@import url(http://fonts.googleapis.com/css?family=Inconsolata:400,700);

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 { font-size: 14px; font-family: 'Inconsolata', sans-serif; background-color: rgb(110,45,40); color: rgb(255,255,255); }

a { color: rgb(255,255,255); transition: 0.2s; text-decoration: none; }
a:hover { color: rgb(195,81,4); }

img { border: none; }

h1 { color: rgb(255,255,255); font-size: 20px; line-height: 22px; text-shadow: 1px 1px 0 rgb(19,9,2); }
h2 { border-top: 1px solid rgb(197,197,197); border-bottom: 1px solid rgb(197,197,197); margin: 15px 0 0 0; text-transform: uppercase; font-size: 22px; font-weight: bold; color: rgb(255,255,255); line-height: 20px; padding: 10px 0; display: block; background-color: rgb(40,40,40); }

.Clear { clear: both; }

.Wrapper { min-width: 310px; width: 100%; text-align: center; }

.Header { width: 100%; padding: 0px 0 5px 0; background-color: rgb(85,35,30); }
.Logo { display: inline-block; vertical-align: top; }
.Logo a { background-image: url(../images/logo.png); background-repeat: no-repeat; display: inline-block; width: 320px; height: 40px; vertical-align: top; margin: 5px 5px 0px 5px; }
.HeaderMenu { display: inline-block; vertical-align: top; }
.HeaderMenu ul { display: inline-block; vertical-align: top; margin: 0 5px; line-height: 30px; }
.HeaderMenu li { text-transform: uppercase; font-weight: bold; text-shadow: 1px 1px 0 rgb(19,9,2); display: inline-block; vertical-align: top; margin: 10px 3px 5px 3px; }
.HeaderMenu a { color: rgb(255,255,255); display: block; padding: 0 15px; background-color: rgb(110,45,40); }
.HeaderMenu a:hover { background-color: rgb(225,170,10); box-shadow: 0 0 0 4px rgb(225,170,10); }
.HeaderMenu li.Active a { box-shadow: none; background-color: rgb(225,170,10); background: linear-gradient(to bottom,rgb(246,136,98),rgb(206,96,58)); }

.HeaderSearch { display: inline-block; vertical-align: top; }
.HeaderSearch form { margin: 10px 5px 5px 5px; box-shadow: 0 0 0 1px rgb(70,30,25); background-color: rgba(255,255,255,0.5); transition: 0.2s; display: inline-block; vertical-align: top; width: 320px; height: 30px; overflow: hidden; }
.HeaderSearch input { color: rgb(69,59,52); background: transparent; transition: 0.2s; font-family: 'Inconsolata', sans-serif; border: none; display: block; height: 30px; line-height: 30px; font-weight: bold; text-align: center; }
.HeaderSearch:hover form { background-color: rgba(255,255,255,0.9); box-shadow: 0 0 0 4px rgb(225,170,10); }
.HeaderSearch input.SearchText { float: left; width: 70%; }
.HeaderSearch input.SearchButton { background-color: rgb(60,25,20); color: rgb(255,255,255); cursor: pointer; float: right; width: 30%; }
.HeaderSearch input.SearchButton:hover { background-color: rgb(60,25,20); }

.Content { width: 100%; }

.TopBlock { text-align: center; margin: 10px 0px 0 0px; background-color: rgb(85,35,30); background: linear-gradient(to bottom,rgb(85,35,30),rgb(85,35,30)); }
.TopBlock h2 { display: inline-block; vertical-align: top; background-color: rgb(243,172,71); background: linear-gradient(to bottom,rgb(243,172,71),rgb(203,132,31)); color: rgb(10,8,8); height: 25px; line-height: 25px; padding: 0 15px; }

.Sort { }
.Sort ul {  }
.Sort li { color: rgb(70,70,70); text-transform: uppercase; display: inline-block; vertical-align: top; margin: 10px 2px 0 2px; height: 25px; line-height: 25px; }
.Sort li a { background-color: rgb(85,35,30); box-shadow: 0 0 0 1px rgb(85,35,30); color: rgb(255,255,255); text-shadow: 1px 1px 0 rgb(19,9,2); display: block; padding: 0 10px; }
.Sort li a:hover { background-color: rgb(225,170,10); box-shadow: 0 0 0 5px rgb(225,170,10); }
.Sort li.active a { background-color: rgb(225,170,10); box-shadow: 0 0 0 1px rgb(225,170,10); }

.Navigation { margin: 5px 0 0 0; }

.Description_b a { margin: 20px 0 0 0; display: inline-block; font-size: 50px; font-weight: bold; color: #f8c76c; }
.Description_b a:hover { color: #FF6600; }

.Thumb { transition: 0.2s; background-color: rgb(85,35,30); box-shadow: 0 0 0 1px rgb(85,35,30); display: inline-block; vertical-align: top; position: relative; width: 300px; height: 480px; margin: 10px 2px 0 2px; }
.Thumb a { display: block; transition: none; }
.Thumb img  { width: 300px; height: 450px; display: block; background-color: rgb(85,35,30); }
.ThumbTitle { transition: 0.2s; color: rgb(255,255,255); text-shadow: 1px 1px 0 rgb(19,9,2); font-weight: bold; padding: 0 10px; display: block; height: 25px; line-height: 25px; overflow: hidden; font-size: 12px; }
.Thumb:hover .ThumbTitle {background-color: rgb(225,170,10); }
.Thumb:hover { z-index: 1000; box-shadow: 0 0 0 5px rgb(225,170,10); }
.ThumbDur { background-color: rgba(29,19,12,0.3); font-weight: bold; padding: 0 10px; transition: 0.2s; position: absolute; right: 5px; top: 5px; height: 20px; line-height: 20px; font-size: 12px; color: rgb(255,255,255); text-shadow: 1px 1px 0 rgb(19,9,2); }
.Thumb:hover .ThumbDur, .Thumb:hover .ThumbViews, .Thumb:hover .ThumbCategoryInfo { background-color: rgb(225,170,10); }
.ThumbViews { background-color: rgba(29,19,12,0.3); font-weight: bold; padding: 0 10px; transition: 0.2s; position: absolute; left: 5px; top: 5px; height: 20px; line-height: 20px; font-size: 12px; color: rgb(255,255,255); text-shadow: 1px 1px 0 rgb(19,9,2); }

.ThumbCategory { height: 198px; }
.ThumbCategoryInfo { transition: 0.2s; height: 30px; line-height: 30px; overflow: hidden; }
.ThumbCategoryTitle { text-align: left; transition: 0.2s; color: rgb(255,255,255); text-shadow: 1px 1px 0 rgb(19,9,2); font-weight: bold; text-transform: uppercase; font-size: 14px; display: block; float: left; padding: 0 0 0 10px; width: 180px; }
.ThumbCategoryVideos { text-align: right; color: rgb(255,255,255); text-shadow: 1px 1px 0 rgb(19,9,2); float: right; width: 100px; padding: 0 10px 0 0; }
.ThumbCategoryVidNum { text-align: center; font-size: 12px; font-weight: bold; transition: 0.2s; height: 20px; line-height: 20px; margin: 5px 0; background-color: rgb(226,116,78); padding: 0 10px; display: inline-block; vertical-align: top;  }
.Thumb:hover .ThumbCategoryVidNum { color: rgb(226,116,78); background-color: rgb(59,46,37); }

.Photo_g { transition: 0.2s; background-color: rgb(85,35,30); box-shadow: 0 0 0 1px rgb(85,35,30); display: inline-block; vertical-align: top; position: relative; width: 300px; height: 480px; margin: 10px 2px 0 2px; }
.Photo_g a { display: block; transition: none; }
.Photo_g img  { width: 300px; height: 450px; display: block; background-color: rgb(253,253,253); }
.Photo_g:hover .PicTitle {background-color: rgb(225,170,10); }
.Photo_g:hover { z-index: 1000; box-shadow: 0 0 0 5px rgb(225,170,10); }
.Photo_g:hover .PicDur, .Photo_g:hover .PicViews, .Photo_g:hover .PicCategoryInfo { background-color: rgb(225,170,10); }

.ThumbCatShort { transition: 0.2s; background-color: rgb(89,76,67); box-shadow: 0 0 0 1px rgb(69,59,52); display: inline-block; vertical-align: top; position: relative; width: 150px; height: 84px; margin: 10px 0px 0 0px; }
.ThumbCatShort a { display: block; }
.ThumbCatShort img { width: 150px; height: 84px; display: block; }
.ThumbCatShortInfo { left: 0; bottom: 0; box-shadow: 0 -1px 0 0 rgb(49,39,32); transition: 0.2s; background-color: rgba(69,59,52,0.7); color: rgb(255,255,255); text-shadow: 1px 1px 0 rgb(19,9,2); position: absolute; width: 140px; padding: 0 5px; height: 20px; line-height: 20px; overflow: hidden; }
.ThumbCatShortTitle { transition: 0.2s; font-weight: bold; display: block; text-transform: uppercase; }
.ThumbCatShortVideoNum { display: inline-block; margin: 10px 0 0 0; background-color: rgb(226,116,78); padding: 0 10px; }
.ThumbCatShort:hover { z-index: 1000; box-shadow: 0 0 0 5px rgb(226,116,78); }
.ThumbCatShort:hover .ThumbCatShortInfo { background-color: rgba(49,39,32,0.7); box-shadow: none; height: 56px; padding: 15px 5px; }
.ThumbCatShort:hover .ThumbCatShortTitle { color: rgb(226,116,78); }

.FriendsTL {  }
.FriendsTL ul { transition: 0.2s; background-color: rgb(40,40,40); display: inline-block; vertical-align: top; margin: 10px 2% 0 2%; width: 96%; }
.FriendsTL li { transition: 0.2s; height: 25px; line-height: 25px; overflow: hidden; padding: 0 10px; }
.FriendsTL li span { color: rgb(255,255,255); }
.FriendsTL li:hover { background-color: rgb(225,170,10); }


.HorizontBns { margin: 5px 0 0 0; }
.HorizontBn { background-color: rgb(85,35,30); display: inline-block; vertical-align: top; width: 300px; height: 250px; margin: 10px 2px 0 2px; }
.HorizontBn_2 { display: inline-block; }
.HorizontBn_3 { display: inline-block; }
.HorizontBn_4 { display: inline-block; }

.Description { margin: 20px 0 0 0; display: inline-block; max-width: 1320px;  color: #000000; }
.Description span { color: rgb(255,255,255); font-weight: bold; }

.VideoBlock { width: 96%; margin: 10px 1% 0 1%; background-color: rgb(89,76,67); box-shadow: 0 0 0 1px rgb(69,59,52); padding: 1%; }
.VideoLeftBlock { width: 100%; }
.player { width: 100%; height: 250px; background-color: rgb(0,0,0); position: relative; }
.player iframe { width: 100%; height: 100%; }
.player object { width: 100%; height: 100%; }
.player embed { width: 100%; height: 100%; }
.VideoInfo { padding: 8px 0; }
.VideoInfo li { color: rgb(246,136,98); text-shadow: 1px 1px 0 rgb(19,9,2); display: inline-block; vertical-align: top; line-height: 25px; margin: 10px 3px 0 3px; }
.VideoInfo li span { display: inline-block; vertical-align: top; padding: 0 10px; background-color: rgb(99,86,77); color: rgb(235,235,235); }
.VideoInfo li a { box-shadow: 0 0 0 1px rgb(49,39,27); display: block; font-weight: bold; padding: 0 10px; background-color: rgb(69,56,47); color: rgb(255,255,255); }
.VideoInfo li a:hover { background-color: rgb(226,116,78); box-shadow: 0 0 0 5px rgb(226,116,78); }

.VideoRightBlock {  }
.VerticBn { background-color: rgb(85,35,30); width: 300px; height: 250px; display: inline-block; margin: 10px 2px 0 2px; }
.VerticBn_2 { display: inline; }
.VerticBn_3 { display: inline; }
.VerticBn_4 { display: inline; }

.Footer { margin: 20px 0 0 0; background-color: rgb(40,40,40); color: rgb(255,255,255); padding: 5px 0 10px 0; }
.Footer p { margin: 5px 5px 0 5px; }
.Footer span { color: rgb(255,255,255); text-shadow: 1px 1px 0 rgb(19,9,2); height: 25px; line-height: 25px; background-color: rgb(225,170,10); padding: 0 20px; margin: 10px 5px 0 5px; display: inline-block; font-weight: bold; }
.Footer ul { display: block; vertical-align: top; }
.Footer li { font-size: 12px; line-height: 20px; display: inline-block; vertical-align: top; margin: 5px 5px 0 5px; }
.Footer a:hover { color: rgb(255,255,255); text-decoration: underline; }

@media all and (min-width: 340px) {
.HeaderSearch form { width: 320px; }
.Thumb { width: 300px; height: 480px; }
.ThumbCategory { height: 210px; }
.ThumbCategoryTitle { font-size: 16px; width: 190px; }
.ThumbCategoryVideos { width: 110px; }
.Thumb img  { width: 300px; height: 450px; }
.ThumbViews { top: 5px; }
.ThumbCatShort { width: 155px; height: 86px; margin: 10px 1.5px 0 1.5px; }
.ThumbCatShort img { width: 155px; height: 86px; }
.ThumbCatShortInfo { width: 145px; }
.Photo_g { width: 300px; height: 450px; }
.Photo_g img  { width: 300px; height:450px; }
}

@media all and (min-width: 450px) {
    .player { height: 300px; }
	.FriendsTL ul { margin: 10px 2px 0 2px; width: 46%; }
}
@media all and (min-width: 480px) {
    .player { height: 350px; }
}
@media all and (min-width: 600px) {
    .player { height: 450px; }
	.FriendsTL ul { width: 30%; }                
}
@media all and (min-width: 630px) {
	.HorizontBn_2 { display: inline-block; }
    .VerticBn_2 { display: inline-block; }
}
@media all and (min-width: 700px) {
    .player { height: 450px; }
}
@media all and (min-width: 800px) {
    .player { height: 480px; }
}
@media all and (min-width: 900px) {
    .player { height: 550px; }
}

@media all and (min-width: 940px) {
.HorizontBn_3 { display: inline-block; }
}
        
@media all and (min-width: 1000px) { 
.VideoBlock { width: 960px; margin: 10px auto 0 auto; padding: 0 10px 10px 10px; overflow: hidden; }
.VideoLeftBlock { margin: 10px 0 0 0; float: left; width: 650px; }
.player { height: 450px; }
.VideoInfo { text-align: left; }
.VideoInfo h1 { font-size: 22px; line-height: 24px; }
.VideoInfo li { margin: 12px 10px 0 0; }
.VideoInfo li span { padding: 0 15px;}
.VideoInfo li a { padding: 0 15px; }
.VideoRightBlock { float: right; width: 300px; }
.VerticBn { display: block; margin: 10px 0 0 0; }
.VerticBn_2 { display: block; }
.VerticBn_3 { display: none; }

@media all and (min-width: 1240px) {
	.HorizontBn_4 { display: inline-block; }
	.FriendsTL ul { margin: 10px 1.5px 0 1.5px; width: 15.9%; }
}
@media all and (min-width: 1330px) {        
.Header { display: table; width: 99.4%; padding: 0px 0.3% 5px 0.3%; }
.Logo { display: table-cell; width: 33%; text-align: center; }
.HeaderMenu { display: table-cell;width: 33%; text-align: left; }
.HeaderMenu a { padding: 0 20px; }
.HeaderSearch { display: table-cell; width: 33%; text-align: right;}
.VideoBlock { width: 1290px; }
.VideoLeftBlock { width: 980px; }
.player { height: 540px; }
.VideoInfo h1 { font-size: 24px; line-height: 26px; }
.VideoInfo li { line-height: 30px; font-size: 16px; }
.VideoInfo li span { padding: 0 25px;}
.VideoInfo li a { padding: 0 25px; }
.VerticBn_3 { display: block; }
}

@media all and (min-width: 1660px) {
.HeaderMenu a { padding: 0 25px; }    
.VideoBlock { width: 1620px; }
.VideoLeftBlock { width: 1310px; }
.player { height: 740px; }
.VideoInfo h1 { font-size: 26px; line-height: 28px; }
}