html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input{margin:0;padding:0;}

body { background-color: rgb(24,24,24); color: rgb(124,124,124); font-size: 0; font-family: 'Open Sans', sans-serif;  }

img{   border:0 none;}

li{ list-style-type:none; }

a { color: rgb(224,224,224); text-decoration: none; }
a:hover { color: rgb(248,202,65); }

h1 { color: rgb(224,224,224); margin: 0; display: block; line-height: 26px; font-size: 24px; font-weight: normal; text-transform: uppercase; }
h2 { color: rgb(224,224,224); margin: 20px 1px 0 1px; display: block; line-height: 22px; font-size: 20px; font-weight: bold; }

.header-bl { background-color: rgb(64,64,64); background: linear-gradient(to bottom,rgb(84,84,84),rgb(44,44,44)); border-bottom: 1px solid rgb(4,4,4); text-align: center; padding: 0 0 10px 0; }
.header { overflow: hidden; margin: 0 auto; }
.logo { margin: 10px 5px 0 5px; }
.logo a {  background-repeat: no-repeat; display: inline-block; vertical-align: top; width: 240px; height: 30px; }

.header ul { padding: 8px 4px 0 4px; }
.header li { margin: 2px 1px 0 1px; display: inline-block; vertical-align: top; border-radius: 3px; overflow: hidden; }
.header li a { background-color: rgb(224,224,224); background: linear-gradient(to bottom,rgb(244,244,244),rgb(204,204,204)); color: rgb(0,0,0); text-align: center; height: 30px; line-height: 30px; display: block; padding: 0 5px; font-size: 12px; text-transform: uppercase; }
.header li a:hover, .header li.active a { background-color: rgb(248,202,65); background: linear-gradient(to bottom,rgb(255,222,85),rgb(228,182,45)); }

.search { clear: both; display: block; width: 96%; margin: 10px auto 0 auto; }
.search form { width: 100%; overflow: hidden; }
.search input, .search button { display: block; border: 0 none; float: left; height: 30px; line-height: 30px; font-family: 'Open Sans', sans-serif; }
.search input { background-color: rgb(24,24,24); color: rgb(224,224,224); outline-color: rgb(248,202,65);  width: 80%; text-align: center; font-size: 16px; border-radius: 3px 0 0 3px;  }
.search button { background-color: rgb(224,224,224); background: linear-gradient(to bottom,rgb(244,244,244),rgb(204,204,204)); color: rgb(0,0,0); border-radius: 0 3px 3px 0; cursor: pointer; width: 19.7%; margin-left: 0.3%; font-size: 16px; }
.search button:hover { background-color: rgb(248,202,65); background: linear-gradient(to bottom,rgb(255,222,85),rgb(228,182,45)); }


.spots-box { margin-top: 10px; text-align: center; }
.spot { background-color: rgb(195,195,195); width: 300px; height: 250px; margin: 10px 5px 0 5px; display: inline-block; vertical-align: top; }
 


.wrapper { width: 100%; margin: 0 auto; text-align: center; }

.thumbs-bl { overflow: hidden; padding-top: 8px; }

.thumb { background-color: rgb(4,4,4); color: rgb(104,104,104); margin: 1% 0.5% 0 0.5%; display: inline-block; vertical-align: top; width: 48%; position: relative; }
.thumb:hover { border-color: rgb(248,202,65); }
.thumb img { width: 100%; height: auto; }
.thumb .title { margin: 0 5px; font-size: 11px; text-transform: uppercase; display: block; overflow: hidden; line-height: 25px; height: 25px; }
.thumb .dur, .thumb .date, .thumb-ctg .tot { background-color: rgba(4,4,4,0.7); color: rgb(164,164,164); font-size: 10px; position: absolute; height: 20px; line-height: 20px; padding: 0 5px; }
.thumb .dur { right: 5px; bottom: 27px; }
.thumb .date { left: 5px; bottom: 27px; }

.thumb-ctg .title { height: 30px; line-height: 30px; font-size: 14px; }
.thumb-ctg .tot { left: 5px; bottom: 32px; height: 25px; line-height: 25px; padding: 0 10px; font-size: 12px; }
.thumb-ctg .tot span { color: rgb(224,224,224); }

.navigation-bl { padding: 18px 4px 0 4px; }
.navigation-bl li { margin: 2px 1px 0 1px; display: inline-block; vertical-align: top; border-radius: 3px; overflow: hidden; }
.navigation-bl li a { background-color: rgb(224,224,224); background: linear-gradient(to bottom,rgb(244,244,244),rgb(204,204,204)); color: rgb(0,0,0); min-width: 20px; text-align: center; height: 30px; line-height: 30px; display: block; padding: 0 5px; font-size: 12px; text-transform: uppercase; }
.navigation-bl li a:hover, .navigation-bl li.active a { background-color: rgb(248,202,65); background: linear-gradient(to bottom,rgb(255,222,85),rgb(228,182,45)); color: rgb(0,0,0); }
.navigation-bl li span {background-color: rgb(64,64,64); color: rgb(164,164,164); min-width: 20px; text-align: center; height: 30px; line-height: 30px; display: block; padding: 0 5px; font-size: 12px; text-transform: uppercase;  }

.toplist-txt { border: 1px solid rgb(64,64,64); margin: 10px 1px 0 1px; padding: 0 1px 2px 1px; }
.toplist-txt ul { display: inline-block; vertical-align: top; width: 50%; }
.toplist-txt li { margin: 2px 1px 0 1px; }
.toplist-txt li a { background-color: rgb(44,44,44);  color: rgb(144,144,144); display: block; height: 30px; line-height: 30px; overflow: hidden; padding: 0 10px; font-size: 12px; }
.toplist-txt li a:hover { background-color: rgb(4,4,4); }
.toplist-txt li a i { color: rgb(224,224,224); }

.bottom-sq-bl { margin: 10px 0 0 0; text-align: center; }
.bottom-sq { background-color:rgb(44,44,44); display: inline-block; vertical-align: top; margin: 10px 5px 0 5px; width: 300px; height: 250px; }
.bottom-sq-2, .bottom-sq-3, .bottom-sq-4, .bottom-sq-5 { display: none; }

.video-bl { background-color: rgb(4,4,4); color: rgb(104,104,104); border-bottom: 1px solid rgb(67,56,60); overflow: hidden; padding: 0 5px 10px 5px; }
.video-bl h1 { margin: 10px 5px 0 5px; text-align: left; }
.player-bl { padding: 10px 0 0 0; text-align: left; }
.player { background-color: rgb(0,0,0); position: relative; width: 100%; height: 250px; }
.player iframe, .player object, .player embed { width: 100%; height: 100%; }

.video-bottom { overflow: hidden; padding: 0 0 0 10px; }
.video-views-dur-date { color: rgb(144,144,144); overflow: hidden; padding-top: 8px; }
.video-views-dur-date i { color: rgb(224,224,224); }
.video-views, .video-dur, .video-date { background-color: rgb(24,24,24); display: block; float: left; margin: 2px 2px 0 0; height: 25px; line-height: 25px; padding: 0 10px; font-size: 12px; text-transform: uppercase; }

.video-tags { overflow: hidden; padding-top: 8px; }
.video-tags span, .video-tags a { display: block; float: left; margin: 2px 2px 0 0; font-size: 12px; text-transform: uppercase; }
.video-tags span { color: rgb(248,202,65); height: 25px; line-height: 25px; margin-right: 5px; }
.video-tags a { border: 1px solid rgb(84,84,84); padding: 0 10px; height: 23px; line-height: 23px;}
.video-tags a i { color: rgb(248,202,65); }
.video-tags a:hover { background-color: rgb(248,202,65); border-color: rgb(248,202,65); color: rgb(0,0,0); }
.video-tags a:hover i { color: rgb(0,0,0); }

.video-r-bl { padding-top: 10px; }
.video-r-b { background-color: rgb(203,202,200); margin: 10px 5px 0 5px; display: inline-block; vertical-align: top; width: 300px; height: 250px; }
.video-r-b-2, .video-r-b-3 { display: none; }

.footer-bl { background-color: rgb(64,64,64); background: linear-gradient(to bottom,rgb(84,84,84),rgb(44,44,44)); border-top: 1px solid rgb(4,4,4); text-align: center; padding: 10px 5px 20px 5px; margin: 20px 0 0 0; font-size: 12px; }
.footer-logo { margin: 10px 5px 0 5px; }
.footer-logo a { background-image: url(../images/logo.png); background-repeat: no-repeat; display: inline-block; vertical-align: top; width: 240px; height: 30px; }
.footer-info { margin: 10px 5px 0 5px; }
.footer-info p { line-height: 15px; }
.footer-bl span { color: rgb(248,202,65); }
.footer-bl a { color: rgb(207,200,200); text-decoration: underline; }
.footer-bl a:hover { text-decoration: none; }

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

@media all and (min-width: 440px) {
.thumb { width: 49%; }
}

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

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


@media all and (min-width: 640px) {
.thumb { width: 32%; }
.bottom-sq-2, .video-r-b-2 { display: inline-block; }
}

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


@media all and (min-width: 800px) {
.toplist-txt ul { width: 25%; }
.player { height: 500px; }
}

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

@media all and (min-width: 940px) {

h2 { text-align: left; } 
.wrapper, .header { width: 930px; }
.header-bl { padding: 10px 0; }
.logo { display: block; float: left; margin: 0 0 0 1px; }
.logo a { display: block; }

.header ul { display: block; float: left; padding: 0 0 0 20px; text-align: left; }
.header li { margin: 0 1px 0 0; border-radius: 0; }
.header li a { padding: 0 10px; }
.header li:first-child { border-radius: 3px 0 0 3px; }
.header li:last-child { border-radius: 0 3px 3px 0; }


.navigation-bl li { margin: 2px 1px 0 0;  border-radius: 0; }
.navigation-bl li a { padding: 0 10px; }
.navigation-bl li:first-child { border-radius: 3px 0 0 3px; }
.navigation-bl li:last-child { border-radius: 0 3px 3px 0; }
.navigation-bl li span { padding: 0 10px; }

.search { clear: none; float: right; margin: 0 1px 0 0; width: 240px; }

.thumb { margin: 2px 1px 0 1px; width: 300px; border: 1px solid rgb(67,56,60); padding: 3px 3px 0 3px; text-align: left; }
.thumb img { width: 300px; height: 225px; }
.toplist-txt ul { text-align: left; }

.bottom-sq-3 { display: inline-block; }

.video-bl { padding: 0 0 10px 0; }
.video-bl h1 { margin-left: 1px; }
.video-wr { display: table; width: 100%; }
.player-bl { display: table-cell; vertical-align: top; margin: 0; padding: 10px 0 0 1px; }
.player { height: 440px; }
.video-r-bl { display: table-cell; vertical-align: top; padding: 0 0 0 9px; width: 302px; }
.video-r-b { display: block; margin: 10px 1px 0 1px; }
.video-r-b-3 { display: none; }
.video-bottom { padding-left: 0; }

.footer { display: inline-block; vertical-align: top; overflow: hidden; }
.footer-logo { display: inline-block; vertical-align: top; }
.footer-logo a { display: block; }
.footer-info { display: inline-block; vertical-align: top; text-align: left; }

}


@media all and (min-width: 1255px) {
.wrapper, .header { width: 1240px; }
.header li a { padding: 0 15px; font-size: 13px; }
.search { width: 300px; }
.toplist-txt ul { width: 12.5%; }
.bottom-sq-4 { display: inline-block; }
.player { height: 510px; }
.video-views-dur-date { float: left; text-align: left; }
.video-tags { float: right; text-align: right; }
.video-tags a { margin: 2px 0 0 2px; }
}

@media all and (min-width: 1565px) {
.wrapper, .header { width: 1550px; }
.header li a { padding: 0 20px; font-size: 14px; }
.search { width: 450px; }
.bottom-sq-5 { display: inline-block; }
.player { height: 720px; }
.video-bl { padding: 0 0 20px 0; }
.video-r-b-3 { display: block; }
.video-views-dur-date { padding-top: 18px; }
.video-views, .video-dur, .video-date { height: 30px; line-height: 30px; padding: 0 15px; }
.video-tags { padding-top: 18px; }
.video-tags span { height: 30px; line-height: 30px;  }
.video-tags a { height: 28px; line-height: 29px; padding: 0 15px;  }

}