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;}

li {list-style-type:none;}

body{ background-image:url(../img/body.png); color:rgb(135,135,135); font-family: 'Open Sans Condensed', sans-serif; font-size: 0; }
input, button { font-family: 'Open Sans Condensed', sans-serif; }



a{ color:rgb(235,235,235); text-decoration:none; }
a:hover {
    color: rgb(221, 117, 0);}

h1 { font-size: 24px; line-height: 26px; font-weight: bold; text-transform: uppercase; margin: 10px 2px 0 2px;}
h2 { font-size: 22px; line-height: 24px; font-weight: bold; text-transform: uppercase; margin: 40px 2px 0 2px;}


.header { background-image:url(../img/bg_header.jpg); border-bottom: 1px solid rgb(55,55,55);}
.head { text-align: center; padding: 0 0 10px 0; margin: 0 auto; overflow: hidden; }

.logo a { color:rgb(255,255,255); font-size: 32px; font-weight: bold; text-transform: uppercase; height: 40px; line-height: 40px; display: inline-block; vertical-align: top; margin: 10px 5px 0 5px; }
.logo a span { color: rgb(75,216,128); }

.search { margin: 10px auto 0 auto; width: 96%; max-width: 600px; }
.search form { overflow: hidden; width: 100%; }
.search input { background-color: #272727; border: 1px solid rgb(75,75,75); color: rgb(175,175,175); outline: none; text-transform: uppercase; width: 74%; padding: 0 2%; font-size: 14px; height: 30px; line-height: 30px; }
.search button { background-color: rgb(65,65,65); background: linear-gradient(to bottom,rgb(75,75,75),rgb(55,55,55)); color: rgb(235,235,235); float: right; width: 20%; border: 0 none; height: 32px; line-height: 32px; font-size: 14px; cursor: pointer; }
.search button:hover { background-color: #ddb100;
background: linear-gradient(to bottom,#dd6d00,#ddb100);}
.search button i { display: block; height: 30px; line-height: 30px; }

.menu { padding-top: 6px; }
.menu li { height: 25px; line-height: 25px; font-size: 16px; text-transform: uppercase; display: inline-block; vertical-align: top; margin: 4px 2px 0 2px; }
.menu li a { background-color: rgb(65,65,65); background: linear-gradient(to bottom,rgb(75,75,75),rgb(55,55,55)); color: rgb(235,235,235); text-shadow: 1px 1px 0 rgb(0,0,0); display: block; padding: 0 10px; }
.menu li.active a, .menu li a:hover {     background-color: #ddb100;
    background: linear-gradient(to bottom,#dd6d00,#ddb100);
    color: rgb(255,255,255);
}
.content { margin: 0 auto; width: 100%; text-align: center; }

.thumbs-container { padding-top: 8px; }

.thumb { display: inline-block; vertical-align: top; width: 98%; margin: 1% 0.5% 0 0.5%; position: relative; overflow: hidden; font-size: 12px; text-shadow: 1px 1px 0 rgb(0,0,0);}
.thumb-pic { padding: 4px; border: 1px solid rgb(75,75,75); overflow: hidden; }
.thumb img { width: 100%; height: auto; }
.thumb .name { display: block; height: 20px; line-height: 20px; width: 69%; padding-right: 1%; float: left; text-transform: uppercase; text-align: left; overflow: hidden; }
.thumb .total { background-image: url(../img/bg_header.jpg);
border-radius: 8px;
border: 1px solid rgb(221, 122, 0);

 color: rgb(235,235,235); display: block; height: 20px;
 line-height: 18px; width: 30%; float: right;  text-transform: uppercase; text-align: center; overflow: hidden; }
.thumb:hover .thumb-pic { border-color: rgb(221, 117, 0);}
.thumb:hover .total {background-color: #ddb100;
background: linear-gradient(to bottom,#dd6d00,#ddb100); }
.thumb .dur { background-color: rgba(0,0,0,0.7); color: rgb(175,175,175); padding: 0 5px; position: absolute; left: 5px; bottom: 25px; height: 20px; line-height: 20px; font-size: 12px; }
.thumb:hover .dur { background: linear-gradient(to bottom,#dd6d00,#ddb100); color: rgb(255,255,255); }


.thumb-cat .name { height: 30px; line-height: 30px; width: 59%; }
.thumb-cat .total { height: 30px; line-height: 30px; width: 35% ;}
.all-cats { background-color: rgb(15,15,15); }
.all-cats .thumb-pic { border-color: rgb(55,196,108); }
.all-cats a { color: rgb(55,196,108); display: block; }
.all-cats a:hover { background-color: rgb(35,176,88); background: linear-gradient(to bottom,rgb(55,196,108),rgb(15,156,68)); color: rgb(255,255,255);}

.pages { background-color: rgb(15,15,15); border: 1px solid rgb(55,55,55); margin: 20px 2px 0 2px; padding: 8px 0 10px 0; overflow: hidden; }
.pages li { height: 30px; line-height: 30px; font-size: 16px; text-transform: uppercase; display: inline-block; vertical-align: top; margin: 2px 1px 0 1px; }
.pages li a { background-color: rgb(65,65,65); background: linear-gradient(to bottom,rgb(75,75,75),rgb(55,55,55)); color: rgb(235,235,235); text-shadow: 1px 1px 0 rgb(0,0,0); display: block; padding: 0 10px; min-width: 10px; }
.pages li.active a, .pages li a:hover { background: linear-gradient(to bottom,#dd6d00,#ddb100); color: rgb(255,255,255); }
.pages li span { background-color: rgb(35,35,35);  color: rgb(135,135,135); text-shadow: 1px 1px 0 rgb(0,0,0); display: block; padding: 0 10px; min-width: 10px; }

.bottom-spts { padding: 6px 0 0 0; }
.bottom-spt { display: inline-block; vertical-align: top; margin: 4px 2px 0 2px; padding: 4px; border: 1px solid rgb(75,75,75); width: 300px; height: 250px; }
.bottom-spt:hover { border-color: rgb(55,196,108); }
.bottom-spt-2, .bottom-spt-3, .bottom-spt-4, .bottom-spt-5 { display: none; }

.bottom-desc { border: 1px solid rgb(75,75,75); color: rgb(175,175,175); margin: 10px 2px 0 2px; text-align: justify; padding: 10px; font-size: 16px; line-height: 20px; }

.fr-list { padding-top: 6px; }
.fr-list ul { display: inline-block; vertical-align: top; margin: 0; width: 50%; }
.fr-list li { height: 30px; line-height: 30px; font-size: 16px; margin: 4px 2px 0 2px; overflow: hidden; text-align: left; }
.fr-list li a { background-color: rgb(50,50,50); color: rgb(225,143,134); text-shadow: 1px 1px 0 rgb(0,0,0); display: block; padding: 0 10px; }
.fr-list li a:hover { background-color: rgb(15,15,15); color: rgb(150,150,150); }
.fr-list li a i { color: rgb(150,150,150); }

.video-wrapper { margin: 6px auto 0 auto; width: 98%; text-align: left; }
.player-block { padding-top: 4px; }
.player-wr { padding: 4px; border: 1px solid rgb(75,75,75); }
.player { background-color: rgb(0,0,0); position: relative; width: 100%; height: 200px; }
.player iframe, .player object, .player embed { width: 100%; height: 100%; }
.video-info h1 { font-size: 20px; line-height: 22px; font-weight: normal; color: rgb(235,235,235); text-shadow: 1px 1px 0 rgb(0,0,0); margin: 10px 0 0 0;}
.video-mt, .video-cts { overflow: hidden; padding: 8px 0 0 0; }
.video-mt span, .video-cts span, .video-cts a {  text-shadow: 1px 1px 0 rgb(0,0,0); font-size: 14px; text-transform: uppercase; height: 30px; line-height: 30px; padding: 0 10px; display: block; float: left; margin: 2px 2px 0 0; }
.video-mt span, .video-cts span { background-color: rgb(65,65,65); background: linear-gradient(to bottom,rgb(75,75,75),rgb(55,55,55)); color: rgb(235,235,235); }
.video-cts a { background-color: rgb(15,156,68); background: linear-gradient(to bottom,rgb(35,176,88),rgb(0,136,48)); color: rgb(255,255,255); }
.video-cts a:hover { background-color: rgb(35,176,88); background: linear-gradient(to bottom,rgb(55,196,108),rgb(15,156,68)); }

.video-spts { padding: 16px 0 0 0; text-align: center; }
.video-spt { display: inline-block; vertical-align: top; margin: 4px 2px 0 2px; padding: 4px; border: 1px solid rgb(75,75,75); width: 300px; height: 250px; }
.video-spt:hover { border-color: rgb(55,196,108); }
.video-spt-2, .video-spt-3 { display: none; }


.footer  { background-color: rgb(15,15,15); border-top: 1px solid rgb(55,55,55); margin-top: 40px; }
.foot { text-align: center; padding: 10px 0 15px 0; margin: 0 auto; overflow: hidden; font-size: 16px; }
.foot p {  width: 94%;
margin: auto;}
.foot a { color: rgb(135,135,135); font-size: 14px; text-decoration: underline; }
.foot a:hover { text-decoration: none; }
.foot span {     color: rgb(221, 122, 0);
}








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

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

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


@media all and (min-width:600px) {
    .fr-list ul { width: 33.3333%; }
    .player { height: 350px; }
}

@media all and (min-width:620px) {
    .bottom-spt-2, .video-spt-2 { display: inline-block; }
}

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

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

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

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

@media all and (min-width:962px) {
    h1, h2 { text-align: left; }
    .content, .head { width: 942px; }
    .head { padding: 4px 0; }
    .logo { display: block; float: left; margin: 0 20px 0 2px;}
    .logo a { margin: 0; height: 40px; line-height: 40px; display: block; }
    .menu { float: left; overflow: hidden; padding-top: 0; }
    .menu li { display: block; float: left; margin: 0 2px 0 0; height: 40px; line-height: 40px; }
    .menu-sort { float: right; }
    .search { margin: 0 0 0 20px; width: 240px; float: left; }
    .search input { height: 40px; line-height: 40px; font-size: 16px; }
    .search button { height: 42px; line-height: 42px; font-size: 16px; }
    .search button i { height: 40px; line-height: 40px; }
    .thumb { width: 310px; margin: 2px 2px 0 2px; font-size: 13px; }
    .thumb img { width: 300px; height: 225px; }
    .thumb .name { width: 76%; }
    .thumb .total { width: 22%; }
    
.thumb-cat .name {     font-size: 18px;
    width: 55%;
    padding-left: 5px;
}
.thumb-cat .total { font-size: 15px;  width: 38% ;}
    
    .pages li { height: 40px; line-height: 40px;  }
    .pages li a, .pages li span { min-width: 30px; }
    .bottom-spt-3 { display: inline-block; }
    
    .video-wrapper { width: auto; margin: 10px 2px 0 2px; padding-bottom: 10px; border-bottom: 1px solid rgb(75,75,75) ;}
    .video-container { display: table; width: 100%; }
    .player-block, .video-spts { display: table-cell; vertical-align: top; }
    .player { height: 400px; }
    .video-mt span, .video-cts span, .video-cts a { padding: 0 15px; }
    .video-spts { padding: 0 0 0 4px; width: 310px; }
    .video-spt { display: block; margin: 4px 0 0 0; }
    .video-spt-3 { display: none; }
}


@media all and (min-width:1276px) {
.content, .head { width: 1256px; }
.menu li a { padding: 0 20px; }
.search { width: 300px; }
.bottom-spt-4 { display: inline-block; }
.fr-list ul { width: 16.6666%; }
.player { height: 514px; }
.video-mt { float: left; }
.video-cts { float: right; }
.video-mt span, .video-cts span, .video-cts a { padding: 0 20px; height: 40px; line-height: 40px; font-size: 15px; }
.video-cts span, .video-cts a { margin: 2px 0 0 2px; }
}

@media all and (min-width:1590px) {
.content, .head { width: 1570px; }
.search { width: 420px; }
.bottom-spt-5 { display: inline-block; }
.player { height: 728px; }
.video-info h1 { float: left; line-height: 40px; }
.video-mt span, .video-cts span { padding: 0 15px; }
.video-cts a { padding: 0 20px; }
.video-mt { float: right; }
.video-mt span { margin: 2px 0 0 2px; }
.video-spt-3 { display: block; }
}