.hpagetable {
    width: 1000px;
    border-collapse:collapse;
	font-size: 14px;
	box-sizing: border-box;
}
.hpagetable > tbody > tr > td {
    /*border: 1px solid #877; /*just remove later so double lines dissapear*/
    width: 200px;
    vertical-align: top;
}
.hpagetable .hpheader {
    border: 1px solid #222;
    /* margin: 4px; */
    border-radius: 4px;
}

.hppanel {
	padding: 0;
	margin: 0;
	text-align: center;
	border: 1px solid #333;
	margin: 4px 0px 2px 0px;
}
.hppanel.width5 {
	width: 980px;
	/* font-size: 16px; */
}
.hppanel.width4 {
	width: 780px;
}
.hppanel.width2 {
	width: 380px;
}
.hppanel.width1 {
	width: 190px;
}
.hpbliptitle {
	color: #ffd;
	height: 18px; /*wont go any loawer for some reason, font size and padding maybe? probably expandcollapse*/
	font-size: 14px;
}
.hptitledark{
	color: #000;
}
.hppanelexpandable {cursor: pointer;}
.hpexpandcollapse {
	width: 18px;
	height: 18px;
	margin: 1px 2px;
	float: left;
}
/* .hpexpandcollapse img { */
	/* width: 14px; */
	/* height: 14px; */
/* } */
.hppanelrecent { /*global stuff nothing here yet*/
}

.hppanelvideocell {
	width: 196px; /*980px wide base, and 4px magin to make it centered!!!!!*/
	vertical-align: top;
	padding: 0;
	margin: 0;
}

.thumbnail a{
	overflow:hidden;
	background:#000;
	text-align:center;
	line-height:141px;
	margin:0;
	display:block;
}

.thumbnail {
/*dont globally define! [remove soon]*/
}
.hppanelvideocell .thumbnail, a.thumbnail {
	margin: 4px; /*no top padding for title div.*/
	width: 188px;
	height: 141px;
	position: relative;
	border-bottom: 1px solid #bfbfbf;
	overflow:hidden;
}
.hppanelvideocell .thumbnail img{
	width: 100%; /*might fit maybe*/
}
.hppanelvideocell img{
	vertical-align:middle;
	display:inline;
	border:none;
}
.hppanelvideocell .title {
	margin: 0px 4px 4px 4px;
	width: 188px;
	text-align: left;
	/* padding: 0px 0px; */
}
.hppanelvideocell a {
	text-decoration: none;
	color: #001;
}
.hppanelvideocell a:hover {
	text-decoration: underline;
	color: #D00e0e;
}
.hppanelvideocell a:active {
	font-style: italic;
	color: #D00e0e;
}
.hppanelvideocell .viewcount {
	color: blue;
	float: right;
	font-size: 12px;
}
/*to do: make sure why if i paste in content block 5 times theres barely any outside padding left. and then fix that and copy it downward. my motivation will be gone but whatever.*/
/*i think it was padding on the video cell*/


/*categories*/
.hppanelcategories {
	text-align: left;
}
.hppanelcategories a {
	color: #D00e0e;
	margin: 3px;
	border: 1px dashed yellow;
}
.hppanelcategories a:hover {
	border: 2px dotted green;
}
.hppanelcategories a:active {
	border: 2px dotted green;
	font-style: italic;
}
/*statistics homepaGE*/
.hpstatistics {
	margin-top: 16px;
}

/*posts? */

.hp-userpost-bg {
    width: 100%;
    overflow: auto;
    min-height: 100px;
	background: #d7ffdb !important;
	text-align: center;
	height: 200px;
}
/* Inner box: dark green, smaller than column */
.hp-userpost-box {
	text-align: left;
    background: #25673c;
    border: 1px solid #155623;
    margin: 12px auto 12px auto;
    padding: 8px 6px 5px 8px;
    color: #fff;
    font-family: Arial, Verdana, sans-serif;
}

.hp-userpost-dateadded {
	float:right; font-size:12px; color:#e8ffe3;
}



/* Title in the box */
.hp-userpost-title {
    margin: 0 0 10px 0;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.5px;
}
/* Description */
.hp-userpost-desc {
    margin: 0 0 16px 0;
    color: #bcffd2;
    font-size: 15px;
    margin-bottom: 5px;
}

/* Images below title-description */
.hp-userpost-imgs {
    margin: 0;
    padding: 0 0 0px 0;
    text-align: left;
    overflow-x: auto;
	overflow-y: hidden;
    height: 80px;
    white-space: nowrap;
    width: 345px
}
.hp-userpost-imgs img {
    display: inline;
    border: 1px solid #155623;
    background: #18591c;
    margin-right: 7px;
    margin-bottom: 0;
    height: 56px;
    float: none;
}


/*netack statistics*/
#statistics ul {margin-bottom: 4px;}
#statistics {text-align: left; padding-top: 18px;}
#statistics .header {text-align: center;}
#statistics .statsofthesitetext {font-size: 16px;}
.statistics:hover {font-style: italic;}
/*individual*/
.statistics.users {}
.statistics.videos {}
.statistics.views {}
.statistics.comments {}
#statistics .sincewhen {
	border: 4px dotted green;
}
#statistics .sincewhen:hover {
	border: 4px dotted #D00e0e;
	color: green;
}