body,html,div,p,a,ul,li,input,button,form,textarea,span,img,h1,h2,h3 { margin: 0; padding: 0; }

body { background-color: rgb(20,20,20); color: rgb(120,120,120); font-family: 'Encode Sans Condensed', sans-serif; }
input, button { font-family: 'Encode Sans Condensed', sans-serif; }

li { list-style-type: none; }

img { background-color: rgb(60,60,60); display: block; }

a { color: rgb(230,230,230); text-decoration: none; }
a:hover { color: rgb(231,123,120); }

h1, h2 { display: block; font-weight: normal; text-transform: uppercase; }
h1 { color: rgb(168,168,168); font-size: 22px; line-height: 28px; margin: 10px 2px 0 2px; }
h2 { color: rgb(230,230,230); font-size: 20px; margin: 30px 2px 0 2px; }
 
.head-wrapper { background-color: rgb(0,0,0); background: linear-gradient(to bottom,rgb(40,40,40),rgb(0,0,0)); border-bottom: 1px solid rgb(50,50,50); box-shadow: 0 5px 15px -7px rgb(0,0,0); }
.head { margin: 0 auto; text-align: center; padding-bottom: 10px; width: 98%; }
.head-top { overflow: hidden; }
.logo { float: left; margin: 10px 5px 0 2px; }
.logo a { color: rgb(240,240,240); text-transform: uppercase; font-size: 28px; height: 40px; line-height: 40px; }
.logo a span { color: rgb(231,123,120); }

.head-open { background-color: rgb(220,220,220); background: linear-gradient(to bottom,rgb(240,240,240),rgb(200,200,200)); border: 1px solid rgb(200,200,200); color: rgb(20,20,20); height: 38px; line-height: 36px; width: 38px; font-size: 22px; float: right; cursor: pointer; margin: 10px 2px 0 0; }
.head-open.active, .head-open:hover { background-color: rgb(231,123,120); background: linear-gradient(to bottom,rgb(251,143,140),rgb(211,103,100)); border-color: rgb(211,103,100); color: rgb(255,255,255); }

.head-bottom { margin-top: 10px; border-top: 1px solid rgb(50,50,50); box-shadow: 0 -1px 0 0 rgb(0,0,0); display: none; padding: 0 10px; }

.head-menu { padding-top: 8px; min-height: 40px; font-size: 0; }
.head-menu li { display: inline-block; vertical-align: top; margin: 4px 2px 0 2px; text-transform: uppercase; }
.head-menu li a { background-color: rgb(220,220,220); background: linear-gradient(to bottom,rgb(240,240,240),rgb(200,200,200)); border: 1px solid rgb(200,200,200); color: rgb(20,20,20); height: 38px; line-height: 38px; display: block; padding: 0 10px; font-size: 14px; }
.head-menu li a:hover, .head-menu li.active a { background-color: rgb(231,123,120); background: linear-gradient(to bottom,rgb(251,143,140),rgb(211,103,100)); border-color: rgb(211,103,100); color: rgb(255,255,255); }

.search { margin: 10px auto 0 auto; width: 98%; max-width: 400px; }
.search form {overflow: hidden; }
.search input, .search button { display: block; font-size: 14px; outline: none; text-transform: uppercase; }
.search input { background-color: rgba(255,255,255,0.9); border: 1px solid rgb(148,148,148); color: rgb(48,48,48); height: 38px; line-height: 38px; width: 79%; padding: 0 2%; float: left; }
.search input:focus { background-color: rgb(255,255,255); border-color: rgb(255,196,86); }
.search button { background-color: rgb(220,220,220); background: linear-gradient(to bottom,rgb(240,240,240),rgb(200,200,200)); border: 1px solid rgb(200,200,200); color: rgb(20,20,20); height: 40px; line-height: 40px; width: 16%; float: right; cursor: pointer; font-size: 16px; }
.search button:hover { background-color: rgb(231,123,120); background: linear-gradient(to bottom,rgb(251,143,140),rgb(211,103,100)); border-color: rgb(211,103,100); color: rgb(255,255,255); }

.wrapper { overflow: hidden; margin: 0 auto; width: 98%; text-align: left; padding-bottom: 10px; }

.top-bl { overflow: hidden; padding-bottom: 1px; margin-top: 4px;}
.top-bl h1 { float: left; }

.sort { float: right; margin-top: 10px;}
.sort li { display: block; float: right; margin: 0px 2px 0 2px; }
.sort li a { background-color: rgb(0,0,0); background: linear-gradient(to bottom,rgb(60,60,60),rgb(0,0,0)); border: 1px solid rgb(0,0,0); border-bottom: 1px solid rgb(50,50,50); box-shadow: 0 1px 0 0 rgb(0,0,0); height: 26px; line-height: 26px; text-align: center; text-transform: uppercase; display: block; padding: 0 7px; font-size: 12px; }
.sort li a:hover, .sort li.active a { background-color: rgb(231,123,120); background: linear-gradient(to bottom,rgb(251,143,140),rgb(211,103,100)); border-color: rgb(211,103,100); border-bottom-color: rgb(251,143,140); box-shadow: 0 1px 0 0 rgb(211,103,100); color: rgb(255,255,255); }

.thumbs-wrap {  overflow: hidden; padding: 6px 0 10px 0; }

.thumb-bl { float: left; width: 100%; }
.thumb { margin: 4px 2px 0 2px; position: relative;  }
.thumb a { background-color: rgb(0,0,0); background: linear-gradient(to bottom,rgb(40,40,40),rgb(0,0,0)); border: 1px solid rgb(0,0,0); border-bottom: 1px solid rgb(50,50,50); box-shadow: 0 5px 15px -7px rgb(0,0,0); padding: 3px 3px 0 3px; display: block; }
.thumb a:hover { background: rgb(0,0,0); border-color: rgb(231,123,120); }
.thumb a img { width: 100%; height: auto; max-height: 240px; }
.thumb a p { display: block; line-height: 20px; height: 20px; font-size: 12px; overflow: hidden; text-transform: uppercase; padding: 0 3px; }
.thumb-play { color: rgb(255,255,255); position: absolute; opacity: 0; top: 50%; left: 50%; width: 50px; height: 50px; line-height: 50px; font-size: 40px; margin: -35px 0 0 -25px; }
.thumb a:hover .thumb-play { opacity: 1; color: rgb(231,123,120); }
.thumb-views, .thumb-dur, .thumb-date { position: absolute; background-color: rgba(20,20,20,0.8); color: rgb(220,220,220); height: 20px; line-height: 20px; padding: 0 5px; font-size: 12px;  }
.thumb-views { bottom: 31px; left: 4px; }
.thumb-dur { bottom: 31px; right: 4px; }
.thumb-date { top: 4px; right: 4px; }

.thumb-cat a p { height: 35px; line-height: 35px; font-size: 14px; }
.thumb-cat .thumb-views { bottom: 35px; }

.pages-bl { overflow: hidden; margin-top: 6px; text-align: center; }
.pages-bl ul { overflow: hidden; padding-bottom: 1px; }
.pages-bl li { display: inline-block; vertical-align: top; margin: 4px 2px 0 2px; }
.pages-bl li a, .pages-bl li span { background-color: rgb(0,0,0); background: linear-gradient(to bottom,rgb(40,40,40),rgb(0,0,0)); border: 1px solid rgb(0,0,0); border-bottom: 1px solid rgb(50,50,50); box-shadow: 0 1px 0 0 rgb(0,0,0); min-width: 20px; display: block; height: 30px; line-height: 30px; padding: 0 5px; font-size: 12px; }
.pages-bl li a:hover, .pages-bl li.active a { background-color: rgb(231,123,120); background: linear-gradient(to bottom,rgb(251,143,140),rgb(211,103,100)); border-color: rgb(211,103,100); border-bottom-color: rgb(251,143,140); box-shadow: 0 1px 0 0 rgb(211,103,100); color: rgb(255,255,255); }

.next-prev li a, .next-prev li span { padding: 0 20px; min-width: 60px; }

.bns-bl { background-color: rgb(0,0,0); background: linear-gradient(to bottom,rgb(40,40,40),rgb(0,0,0)); border: 1px solid rgb(0,0,0); border-bottom: 1px solid rgb(50,50,50); box-shadow: 0 5px 15px -7px rgb(0,0,0); margin: 20px 2px 0 2px; padding: 6px 0 10px 0; text-align: center; overflow: hidden; font-size: 0; }
.bn { background-color: rgb(60,60,60); display: inline-block; vertical-align: top; margin: 4px 2px 0 2px; width: 300px; height: 250px; }
.bn-2, .bn-3, .bn-4, .bn-5 { display: none; }

.categories-list { margin-top: 8px; overflow: hidden; padding-bottom: 1px; }
.categories-list ul { width: 50%; float: left; }
.categories-list li { margin: 0 2px; }
.categories-list li a { background-color: rgb(0,0,0); background: linear-gradient(to bottom,rgb(30,30,30),rgb(0,0,0)); border: 1px solid rgb(0,0,0); border-bottom: 1px solid rgb(50,50,50); box-shadow: 0 1px 0 0 rgb(0,0,0); text-transform: uppercase; height: 38px; line-height: 38px; padding: 0 10px; font-size: 12px; display: block; overflow: hidden; }
.categories-list li a:hover { background: rgb(0,0,0); border-color: rgb(231,123,120); }
.categories-list li a:hover i { color: rgb(230,230,230); }

.top-list { margin-top: 8px; overflow: hidden; }
.top-list ul { width: 50%; float: left; }
.top-list li { margin: 0 2px; }
.top-list li a { background-color: rgb(0,0,0); background: linear-gradient(to bottom,rgb(30,30,30),rgb(0,0,0)); border: 1px solid rgb(0,0,0); border-bottom: 1px solid rgb(50,50,50); box-shadow: 0 1px 0 0 rgb(0,0,0); color: rgb(140,140,140); text-transform: uppercase; height: 38px; line-height: 38px; padding: 0 10px; font-size: 12px; display: block; overflow: hidden; }
.top-list li a:hover { background: rgb(0,0,0); border-color: rgb(100,100,100); color: rgb(230,230,230); }
.top-list li a i { color: rgb(230,230,230); }

.video-wrap { background-color: rgb(0,0,0); background: linear-gradient(to bottom,rgb(40,40,40),rgb(0,0,0)); border: 1px solid rgb(0,0,0); border-bottom: 1px solid rgb(50,50,50); box-shadow: 0 5px 15px -7px rgb(0,0,0); overflow: hidden; margin: 10px 2px 0 2px; padding: 0 10px 10px 10px; }
.player { margin-top: 10px; background-color: rgb(0,0,0); position: relative; width: 100%; height: 250px; }
.player iframe, .player object, .player embed { width: 100%; height: 100%; }

.video-info { overflow: hidden; }
.video-info ul { overflow: hidden; }
.video-info li { float: left; text-transform: uppercase; }
ul.video-meta li { font-size: 16px; margin: 10px 10px 0 0; }
ul.video-meta li i { color: rgb(248,248,248); }
ul.video-tags { padding-top: 8px; }
ul.video-tags li { margin: 2px 2px 0 0;  }
ul.video-tags li a { font-size: 13px; display: block; }
ul.video-tags li a { background-color: rgb(220,220,220); background: linear-gradient(to bottom,rgb(240,240,240),rgb(200,200,200)); border: 1px solid rgb(200,200,200); color: rgb(20,20,20); height: 30px; line-height: 30px; padding: 0 10px; display: block; }
ul.video-tags li a:hover { background-color: rgb(231,123,120); background: linear-gradient(to bottom,rgb(251,143,140),rgb(211,103,100)); border-color: rgb(211,103,100); color: rgb(255,255,255); }

.right-player-col { font-size: 0; text-align: center; }
.player-bn { background-color: rgb(60,60,60); display: inline-block; vertical-align: top; margin: 10px 5px 0 5px; width: 300px; height: 250px; }
.player-bn-2, .player-bn-3 { display: none; }

.footer-wrapper { background-color: rgb(0,0,0); background: linear-gradient(to top,rgb(40,40,40),rgb(0,0,0)); border-top: 1px solid rgb(50,50,50); box-shadow: 0 -5px 15px -7px rgb(0,0,0); margin-top: 20px; }
.footer { margin: 0 auto; overflow: hidden; text-align: center; padding: 20px 10px; width: 98%; font-size: 14px; text-transform: uppercase; }
.footer span { color: rgb(231,123,120); }
.footer a { text-decoration: underline; }
.footer a:hover { text-decoration: none; }

.lnks { position:absolute; line-height: 28px; margin: 12px 20px 12px 20px; display:inline-block;}
.lnks li { display:inline-block; padding-left: 20px;}


@media screen and (max-width: 701px) { 
.top-bl { overflow: hidden; padding-bottom: 5px; margin-top: 4px;}
.top-bl h1 { text-align:left;}
.lnks { position:relative; line-height: 28px; margin: 5px 5px 0px 5px; display:inline-block;}
.lnks li { display:inline-block; padding-left: 20px;}
} 

@media all and (min-width:380px) {
    .thumb-bl { width: 50%; }
    .player { height: 300px; }
}
@media all and (min-width:500px) {
    .player { height: 350px; }
}

@media all and (min-width:600px) {
    .categories-list ul, .top-list ul { width: 25%; }
    .player { height: 400px; }
}

@media all and (min-width:700px) {
    .player { height: 450px; }
    .popular-cats li { width: 25%; }
	.bn-2, .player-bn-3 { display: inline-block; }
}

@media all and (min-width:800px) {
	.player { height: 500px; }
}

@media all and (min-width:900px) {
	.player { height: 510px; }
}

@media all and (min-width:844px) {
.wrapper { width: 824px; }
    .head { width: 824px; height: 40px; padding: 10px 0; }
    .head-top { float: left; }
    .head-open { display: none; }
    .logo { float: none; margin: 0 0 0 2px; }
    .head-bottom { display: block !important; border-top: 0 none; box-shadow: none; margin: 0; padding: 0; }
    .head-menu { float: left; padding: 0 0 0 20px; }
    .head-menu li { display: block; float: left; margin: 0 2px 0 0; }
    .search { float: right; margin: 0 2px 0 0; width: 240px; }
    .sort li a { padding: 0 10px; }
    .thumb-bl { width: 412px; }
    .thumb a img { width: 400px; height: 225px; }
    .thumb a p { line-height: 30px; height: 30px; font-size: 14px; }
    .thumb-cat a p { height: 40px; line-height: 40px; font-size: 18px; }
    .thumb-cat .thumb-views { bottom: 40px; }
    .pages-bl li { display: block; float: left; }
    ul.next-prev { float: right; }
    ul.pages { float: left; }
    .categories-list li a, .top-list li a { font-size: 14px; }
	.video-tab { display: table; width: 100%; }
	.player-col, .right-player-col { display: table-cell; vertical-align: top; }
    .player { height: 340px; }
	.video-info li { font-size: 18px; }
    .right-player-col { width: 310px; }
    .player-bn { margin: 10px 0 0 10px; display: block; }
    .player-bn-3 { display: none; }
    .footer { width: 824px; }
}


@media all and (min-width:1256px) {
    h1 { font-size: 28px; }
    h2 { font-size: 28px; }
    .wrapper, .head, .footer { width: 1236px; }
    .logo a { font-size: 34px; }
    .head-menu li a { min-width: 80px; }
    .search { width: 300px; }
    .bn-3, .bn-4 { display: inline-block; }
    .categories-list ul, .top-list ul { width: 12.5%; }
    .categories-list li a, .top-list li a { font-size: 12px; }
    .pages-bl li a, .pages-bl li span { min-width: 30px; display: block; height: 40px; line-height: 40px; font-size: 14px; }
    .next-prev li a, .next-prev li span { min-width: 100px; }
    .player { height: 510px; }
    ul.video-meta { float: left; margin-right: 20px; }
    ul.video-meta li { height: 32px; line-height: 32px; margin-right: 20px; }
    ul.video-tags { float: left; }
    ul.video-tags li a { height: 32px; line-height: 32px; }

}

@media all and (min-width:1668px) {
    .wrapper, .head, .footer { width: 1648px; }
    .head-menu li a { min-width: 100px; font-size: 16px; }
    .search { width: 400px; }
    .player { height: 770px; }
    .bn-5 { display: inline-block; }
    .categories-list li a, .top-list li a { font-size: 14px; }
    .player-bn-3 { display: block; }
    ul.video-meta { float: left; margin-right: 30px; }
    ul.video-meta li { height: 40px; line-height: 40px; margin-right: 30px; font-size: 18px; }
    ul.video-tags { float: left; }
    ul.video-tags li a { height: 40px; line-height: 40px; padding: 0 20px; font-size: 15px; }
}