html, body, section, div, article, nav, ul, input, li, a, p, h1, h2, h3, button, span { padding:0; margin:0; } * { box-sizing: border-box; } a, a:hover, button, button:hover, input { outline:0; border: 0; } .clearfix::after, .clearfix::before { clear: both; content: " "; display: block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } .clearfix1::after { clear: both; content: "."; display: inline; height: 0; line-height: 0; visibility: hidden; } html[xmlns] .clearfix1 { display: block; } * html .clearfix1 { height: 1%; } img { border-style: none; max-width: 100%; height: auto; } .left { float: left; position: relative; } .right { float: right; position: relative; } .right1 { float: right; position: relative; width: 100%; max-width: 740px; } p { margin-bottom: 5px; margin-top: 0; } a { color: #6a5ae1; text-decoration: none; } a:hover { text-decoration: none; } hr { border-color: #b8b8b8; border-left-style: none; border-right-style: none; border-top-style: none; } .notifier { background-color: #4b0019; display: block; font-size: 12px; margin: 5px; padding: 5px; } .notifier h1 { border-bottom: 1px solid #9d0136; font-size: 17px; margin-top: 4px; padding-bottom: 3px; } .notifier div { float: left; } .notifier div a:hover { text-decoration: underline; } body { //background: url("../img/background.jpg") repeat; background-color: #272727; color: white; font: 0.8em "Lucida Grande",Lucida,Verdana,sans-serif; } .header { margin: 13px auto 0; } .nav, .tab, .main, .header, .footer, .footer-nav, div.threeColA11 { width: 100%; max-width: 1110px; margin: 0 auto; } .nav { background-color: transparent; width: 100%; text-align: left; padding: 20px 20px 10px; } .footer-nav { text-align: center; padding: 10px 0; } .footer-nav li { margin-right: 15px; display: inline-block; } .footer-nav li :last-child { margin-right: 0; } .footer-nav ul li a { color: #fff; background-color: transparent; border-radius: 0; display: inline-block; padding: 2px 0; border-bottom: 1.5px solid #fff; font-weight: normal; font-size: 12px; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } .footer-nav ul li a:hover, .footer-nav ul li a.on { background-color: transparent; color: #fff; border-color: #6a5ae1; } .button-menu { display: none; position: relative; padding: 5px 10px; color: #fff; width: 50px; margin: 0 auto; background: #000000; cursor: pointer; } .button-menu .fa-2x { font-size: 2em; } .header-inner { width: 100%; /*margin: 20px 0 0; padding: 20px 0;*/ /*background: -moz-linear-gradient(top, #BA2A17 0, #56130B 100%) no-repeat; background: -webkit-linear-gradient(top, #BA2A17 0, #56130B 100%) no-repeat; background: -ms-linear-gradient(top, #BA2A17 0, #56130B 100%) no-repeat; background: linear-gradient(top, #BA2A17 0, #56130B 100%) no-repeat; border-radius: 10px 10px 0 0;*/ } .logo-wrapper { padding: 0 25px; } .search { color: white; height: 30px; padding: 20px 25px; text-align: right; margin-top: -6px; } .main { margin-top: 15px; position: relative; background-color: #272727; border-radius: 10px 10px 0 0; } div.threeColA1 { width: 67%; float: left; padding-left: 5px; padding-top: 5px; } div.threeColA11 { padding-left: 5px; background-color: #272727; } .threeColA11 h3 { display: block; padding: 10px; margin-bottom: 20px; font-size: 1.5em; } .threeColA11 .page-content, .page-content span { margin-bottom: 20px; padding: 0 10px; display: block; } .page-content span { padding: 0; } div.threeColATL11 { background-color: #111111; float: left; padding-left: 5px; width: 986px; } div.threeColATL1 { background-color: #111111; float: left; width: 678px; } div.threeColA2 { background-color: #111; float: left; padding-top: 20px; text-align: center; width: 170px; } div.threeColA3 { background-color: #272727; float: right; text-align: center; width: 33%; border-radius: 0 10px 0 0; padding-top: 20px; } .sidebar-inner { max-width: 330px; padding: 10px 15px; margin: 3px auto; background: -webkit-linear-gradient(top, #0B0B0B 0, #252525 20%, #222 50%, #111 80%, #181818 100%) no-repeat; background: -moz-linear-gradient(top, #0B0B0B 0, #252525 20%, #222 50%, #111 80%, #181818 100%) no-repeat; background: -ms-linear-gradient(top, #0B0B0B 0, #252525 20%, #222 50%, #111 80%, #181818 100%) no-repeat; background: linear-gradient(top, #0B0B0B 0, #252525 20%, #222 50%, #111 80%, #181818 100%) no-repeat; /*border-radius: 10px 10px 0 0;*/ } .footer { background-color: #1b1b1b; color: white; font-size: 10px; margin: 0 auto 20px; padding: 5px 10px; text-align: center; } .nav ul { margin: 0; padding-left: 0; /*text-align: center;*/ } .nav ul li { display: inline-block; /*text-align: center;*/ } .nav ul li a { color: white; background-color: #6A5AE1; font-size: 14px; font-weight: bold; padding: 5px 15px; /*border-bottom: 2px solid #fff; border-radius: 10px; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease;*/ transition: all .5s ease; } .nav ul li a:hover { color: #6A5AE1; background-color: #fff; /*border-color: #8F2012;*/ } .nav ul li a.on { color: #6A5AE1; background-color: #fff; /*border-color: #8F2012;*/ } .searchbox input { width: 200px; height: 30px; padding: 2px 10px; border: 0; /*border-radius: 10px 0 0 10px;*/ position: relative; right: 39px; } .searchbox button { padding: 5px 12px; position: absolute; top: 18px; right: 14px; border: 0; color: #fff; cursor: pointer; background-color: #6a5ae1; height:34px; /*border-radius: 0 10px 10px 0;*/ } .fa-2x { font-size: 1.6em; } ::-webkit-input-placeholder { color: #111; } :-moz-placeholder { /* Firefox 18- */ color: #111; } ::-moz-placeholder { /* Firefox 19+ */ color: #111; } :-ms-input-placeholder { color: #111; } .plug { background-color: #111; display: block; margin: 5px; padding: 5px; } .plug a { color: white; display: block; float: left; width: 300px; } .plug div { /*float: left;*/ /*width: 165px;*/ } .plug div a { color: white; width: 100px; } .plug div a.links:hover { background-color: #f1f1f1; } .plug div a.links { border-bottom: 1px solid #ccc; display: block; font-size: 11px; padding-bottom: 3px; padding-top: 3px; width: 125px; } .plug div a.noline { border-bottom: medium none; } .plug div img { background: none repeat scroll 0 0 #fff; float: left; height: 120px; margin-bottom: 0; margin-right: 6px; width: 160px; } .plug span.h1 { display: block; font-size: 120%; font-style: normal; font-weight: normal; margin-bottom: 2px; margin-top: 0; } .plug span.h2 { color: #ff0154; display: block; font-size: 90%; font-style: normal; font-weight: normal; margin-bottom: 1px; margin-top: 0; } .plug span.p { display: block; font-size: 11px; /*margin: 10px 0;*/ width: 62%; float: left; } .plug div.ratingbox { color: #FFF; padding: 3px; width: auto; margin-top: 5px; } .plug div.ratingbox a { /*display: inline;*/ float: none; } .plug div.ratingbox img { display: inline; float: none; height: 20px; margin: 0; padding: 0; position: relative; top: 3px; width: 16px; } .plug div.tagsbox { color: #fff; float: left; font-size: 11px; line-height: 17px; padding: 3px; width: 240px; } .plug div.tagsbox a { color: #999; display: inline; float: none; padding: 3px; } .plug div.tagsbox a:hover { background-color: #323232; color: #fdfdfd; } .plug div.tagsbox2 { color: #fff; float: left; font-size: 11px; line-height: 17px; padding: 3px; width: 240px; } .plug div.tagsbox2 a { color: #ff78a5; display: inline; float: none; padding: 3px; } .plug div.tagsbox2 a:hover { background-color: #360012; color: #fdfdfd; } .plug div.commentsbox { float: left; font-size: 11px; line-height: 17px; padding: 3px; width: 240px; } .plug div.commentsbox a { color: #ff0151; } .plug div.commentsbox a:hover { text-decoration: underline; } div.threeColA2 img { } .main > h2, .main h2.left, div.contentblock { margin-left: -5px; margin-right: 5px; background: #6a5ae1; } div.contentblock { /*border-radius: 10px 0 0 0;*/ } div.contentblock h1, .main h2 { color: white; padding: 5px 0; text-align: left; font-size: 1.5em; } .main > h2, .main h2.left { padding-left: 10px; } div.contentblock h1 { padding-left: 10px; } .main h2.left { width: 100%; } div.threeColA3 div.ad { margin: 0px; margin-bottom: 6px; margin-top: 6px; margin-left: 4px; } div.chosenblock { margin: -11px auto 0px; } .threeColA3 h1, .threeColA3 .hed2 { font-size: 16px; color: white; padding: 0 4px 6px; margin: 0 auto; } div.chosenblock img { width: 96px; height: 75px; border: 1px solid #FFF; margin-left: 4px; margin-top: 4px; } div.chosenblock:hover .description { visibility: visible; } div.chosenblock img:hover { border: 1px solid #6a5ae1; position: relative; } div.chosen1block { margin: 0px; } div.links { margin: 6px; } div.chosen1block img { border: 1px solid #ffffff; height: auto; margin-left: 3px; margin-top: 3px; } div.chosen1block:hover .description { visibility: visible; } div.chosen1block img:hover { border: 1px solid #6a5ae1; position: relative; } div.block { } div.block:hover .description { visibility: visible; } div.block img:hover { opacity: .7; } .video { } .video h1 { border-bottom: 1px solid #9d0136; font-size: 13px; margin-top: 4px; padding-bottom: 3px; } .plug div.commentbox { background-color: #1d1d1d; display: block; font-size: 12px; margin-bottom: 5px; padding: 6px; width: 464px; } .plug div.commentbox div { background-color: #323232; color: #7a7a7a; display: block; margin-bottom: 6px; padding: 4px; width: 456px; } .plug div.commentbox div span { color: #ff014f; } .plug div.commentbox div span.grey { color: #fff; } .plug div img.avatar { height: 64px; width: 64px; } div.pagenav { margin: 10px 0 20px; padding: 0 5px; width: 100%; float: left; } div.pagenav a { /*background: -webkit-linear-gradient(top, #BA2A17 0, #56130B 100%) no-repeat; background: -moz-linear-gradient(top, #BA2A17 0, #56130B 100%) no-repeat; background: -ms-linear-gradient(top, #BA2A17 0, #56130B 100%) no-repeat; background: linear-gradient(top, #BA2A17 0, #56130B 100%) no-repeat;*/ color: #fff; font-size: 11px; font-weight: bold; display: inline-block; padding: 7px 10px; margin-top: 10px; /*border-radius: 10px;*/ } div.pagenav a:hover { /*background: -webkit-linear-gradient(top, #56130B 0, #BA2A17 100%) no-repeat; background: -moz-linear-gradient(top, #56130B 0, #BA2A17 100%) no-repeat; background: -ms-linear-gradient(top, #56130B 0, #BA2A17 100%) no-repeat; background: linear-gradient(top, #56130B 0, #BA2A17 100%) no-repeat;*/ color:#6a5ae1; } .form { color: white; font-size: 14px; } .form span { color: #ea0154; } .form input { font-size: 14px; } .form textarea { width: 242px; } span.legend { color: #ea0154; font-size: 11px; } .plug30 img { border: 1px solid #ffffff; display: block; margin: 0 auto; } .plug30 li { list-style-type: none; vertical-align: bottom; } .plug30 { float: left; margin: 3px .5%; padding: 7px 1%; width: 23.9%; overflow: hidden; background: -webkit-linear-gradient(top, #0B0B0B 0, #252525 20%, #222 50%, #111 80%, #181818 100%) no-repeat; background: -moz-linear-gradient(top, #0B0B0B 0, #252525 20%, #222 50%, #111 80%, #181818 100%) no-repeat; background: -ms-linear-gradient(top, #0B0B0B 0, #252525 20%, #222 50%, #111 80%, #181818 100%) no-repeat; background: linear-gradient(top, #0B0B0B 0, #252525 20%, #222 50%, #111 80%, #181818 100%) no-repeat; /*border-radius: 7px;*/ } .plug30:hover { position: relative; background: -webkit-linear-gradient(top, #181818 0, #111 20%, #222 50%, #252525 80%, #0B0B0B 100%) no-repeat; background: -moz-linear-gradient(top, #0B0B0B 0, #252525 20%, #222 50%, #111 80%, #181818 100%) no-repeat; background: -ms-linear-gradient(top, #0B0B0B 0, #252525 20%, #222 50%, #111 80%, #181818 100%) no-repeat; background: linear-gradient(top, #0B0B0B 0, #252525 20%, #222 50%, #111 80%, #181818 100%) no-repeat; } .plug30:hover .description { visibility: visible; } .plug30:hover img { border: 1px solid #6a5ae1; } .plugtitle30 { padding: 0 2px 2px 0; margin-bottom: 3px; } #plugtitle30:hover { background-color: #710127; } .plugtitle30 a { color: #fff; text-decoration: none; text-align: center; } .plug_play { display: inline; } .cat30 { color: #cccccc; display: block; float: left; font: 9px Arial,sans-serif; height: 12px; } .cat30 a { color: #6a5ae1; font-weight: bold; text-decoration: none; } .cat30 a:hover { color: #fff; text-decoration: none; } .hits30 { float: right; font: 9px Arial,sans-serif; margin: 0 3px; color: #ccc; } .chhits30 { float: right; font: 9px Arial,sans-serif; } .title30 { color: #fff; display: block; font-size: 12px; height: 36px; margin-bottom: 7px; padding: 2px 2px 0; text-align: center; } .title30:hover { } div > .plug30, td > .plug { overflow: visible; position: static; } .plug30:hover { position: relative; } .plug30:hover .description { visibility: visible; } .description30 { background: url("images/tooltip.png") no-repeat scroll 13px bottom rgba(0, 0, 0, 0); font: 10px/11px arial; left: 145px; padding-bottom: 5px; position: absolute; top: 10px; visibility: hidden; z-index: 9999; } .description30 p { background: url("images/tooltip.png") no-repeat scroll right top rgba(0, 0, 0, 0); color: #fff; padding: 5px 2px 0 19px; } .description30:hover p { display: none; } .videorelated { padding-top: 0; } .videorelated li { margin: 0 3px 3px 0; } .videorelated * { display: block; float: left; } .videorelated a { border: 1px solid #FFF; margin: 2px; width: 45%; display: inline-block; } .videorelated a:hover { border: 1px solid #6a5ae1; } #videobar { overflow: hidden; width: 94%; margin: 6px 2% 0 4%; padding: 3px 0 0; } #videobar p { margin: 3px 0; } .videoleft { float: left; width: 70%; } .videoright { float: right; width: 28%; } #videobox { max-height: 325px; height: auto; margin: 10px 0 0 15px; overflow: hidden; position: relative; max-width: 450px; width: 100%; } /*iframe { width: 100%; }*/ iframe * { display: block; } #mediaplayer_wrapper { max-width: 450px !important; width: 100% !important; overflow: hidden; position: unset !important; } #videobox object, #videobox embed, #videobox iframe { /* background: none repeat scroll 0 0 #710127;*/ bottom: 0; height: 100%; left: 0; position: absolute; right: 0; top: 0; width: 100%; } pl, pi { list-style: outside none none; margin: 0; padding: 0; } h { margin-bottom: 5px; margin-top: 0; } #video-right-title { color: #fff; font-family: Tahoma,Geneva,sans-serif; font-size: 12px; font-weight: bold; margin: 0 auto 5px; text-align: center; } .thumbs-wrapper1 { padding-left: 5px; text-align: center; } .chplug { text-align: center; float: left; margin: 3px .3%; padding: 7px .5%; width: 16%; overflow: hidden; background: -webkit-linear-gradient(top, #0B0B0B 0, #252525 20%, #222 50%, #111 80%, #181818 100%) no-repeat; background: -moz-linear-gradient(top, #0B0B0B 0, #252525 20%, #222 50%, #111 80%, #181818 100%) no-repeat; background: -ms-linear-gradient(top, #0B0B0B 0, #252525 20%, #222 50%, #111 80%, #181818 100%) no-repeat; background: linear-gradient(top, #0B0B0B 0, #252525 20%, #222 50%, #111 80%, #181818 100%) no-repeat; } .chplug img { height: auto; width: 100%; max-width: 160px; border: 1px solid #fff; display: inline; } .chplug:hover img { border: 1px solid #6a5ae1; } .chplug:hover { background: -webkit-linear-gradient(top, #181818 0, #111 20%, #222 50%, #252525 80%, #0B0B0B 100%) no-repeat; background: -moz-linear-gradient(top, #0B0B0B 0, #252525 20%, #222 50%, #111 80%, #181818 100%) no-repeat; background: -ms-linear-gradient(top, #0B0B0B 0, #252525 20%, #222 50%, #111 80%, #181818 100%) no-repeat; background: linear-gradient(top, #0B0B0B 0, #252525 20%, #222 50%, #111 80%, #181818 100%) no-repeat; position: relative; } .chplug:hover .desc { visibility: visible; } .chplug:hover .chplug_play { display: inline; } .chplug a { font-weight: bold; color: #6a5ae1; font: 9px Arial,sans-serif; margin: 0 0 5px; display: block; text-decoration: none; } .chplug a:last-of-type { float: left; margin: 0 3px; } .chplug a:hover { text-decoration: none; } .chplugurl { padding: 0 0; } #chplugurl:hover { background-color: #710127; } .chplugurl a { color: #710127; text-decoration: none; } .vtitle { color: #fff; display: block; font-size: 11px; height: 40px; line-height: 1em; overflow: hidden; padding: 1px 0 0 3px; } .vtitle:hover { color: #e3dfe1; } .details { color: #cccccc; display: block; float: left; font: 9px Arial,sans-serif; height: 12px; padding: 3px; } .details a { color: #ff3d7c; font-weight: bold; text-decoration: underline; } .details a { color: #ff3d7c; } .details a:hover { color: #ffffff; text-decoration: none; } .chplug_play { background: rgba(0, 0, 0, 0); cursor: pointer; display: none; height: 100px; left: 15px; position: absolute; top: 15px; width: 133px; z-index: 20; } .chcat30 { color: #cccccc; display: inline-block; float: right; font: 9px Arial,sans-serif; height: 12px; margin: 0 3px; } .chcat30 a { color: #ff3d7c; font-weight: bold; text-decoration: underline; } .chcat30 a:hover { color: #ffffff; text-decoration: none; } .chtitle30 { color: #fff; display: block; font-size: 12px; height: 34px; margin-bottom: 7px; overflow: hidden; padding: 4px 4px 0; text-align: center; } .tab { color: white; padding-left: 10px; text-align: left; background: #6a5ae1; /*border-radius: 10px 10px 0 0;*/ } .hed * { font: bold 14px/15px arial; } .hed { background: none repeat scroll 0 0 #1e1e1e; border-bottom: 1px solid #f23609; clear: both; color: #fff; display: block; height: 24px; margin-bottom: 5px; margin-top: 3px; width: 1000px; } .hed1 { color: #fff; height: 15px; margin-bottom: 7px; padding: 5px 0 5px 5px; width: 950px; } .hed1 * { background: url("img/ar.gif") no-repeat scroll left center rgba(0, 0, 0, 0); font: bold 14px/17px arial; padding-left: 16px; } .hed1 .fr, .hed1 .fr * { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); color: #fc3909; float: right; padding: 0; } .hed1 .fr a:visited { color: #fc3909; } .hed3 * { font: bold 14px/15px arial; } .hed3 { background: none repeat scroll 0 0 #1e1e1e; border-bottom: 1px solid #f23609; clear: both; color: #fff; display: block; height: 25px; margin-bottom: 7px; margin-top: 5px; width: 1000px; } .hed4 { background-color: #f43508; background-position: center top; height: 16px; margin-bottom: 1px; padding: 4px 3px 0 7px; } .hed4 * { color: black; font: bold 12px/12px arial; } .box { margin-bottom: 10px; padding: 5px 10px; width: 100%; text-align: center; } .box .holder { margin: 0 auto; padding: 3px 5px; } .box .holder2 { background: none repeat scroll 0 0 #000000; border-left: 1px solid #3f5164; border-right: 1px solid #3f5164; padding: 4px 0 0 4px; } .new_box { float: left; margin-bottom: 7px; margin-left: 15px; margin-top: 10px; padding-bottom: 5px; width: 312px; } .box2 { } .hed3 { color: #ffffff; font: bold 12px/18px arial; height: 24px; padding: 7px 0 0 15px; } #advholder { clear: left; padding: 10px 0 10px 18px; } #advholder .col { background: none repeat scroll 0 0 #000000; float: left; margin-right: 12px; padding: 1px; width: 312px; } #advholder .adv-300, #advholder .hardlinks { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: none repeat scroll 0 0 #1b1b1b; border-color: -moz-use-text-color #3f5164 #3f5164; border-image: none; border-style: none solid solid; border-width: 0 1px 1px; padding: 5px; } #advholder .hed2 { height: 23px; } .hardlinks { } .hardlinks2 { height: 135px; margin-left: 5px; } .hardlinks ul, .hardlinks2 ul, .new_hardlinks2 ul { padding: 0; } .hardlinks a, .hardlinks2 a, .new_hardlinks2 a { background: transparent; color: #fff; font: 12px/14px arial; display: inline-block; margin-top: 10px; } .hardlinks li, .hardlinks2 li, .new_hardlinks2 li { border-bottom: 1px solid #ddd; display: block; float: left; margin-right: 2%; padding: 5px; width: 48%; } .hardlinks a:hover, .hardlinks2 a:hover, .toplist li a:hover, .new_hardlinks2 a:hover { color: #6a5ae1; } } #footernavi { background:#2b2b31; display: block; height: 35px; line-height: 35px; } #footernavi li { float: left; padding: 0 40px 0 0; } #footernavi li a { color: #fff; font-size: 1.2em; text-decoration: none; } #footernavi li a:hover { text-decoration: underline; } div.threeColAfooter { background-color: #000000; float: left; width: 680px; } .overlay { background-color: white; border-radius: 15px; left: 0; margin-left: 0; margin-top: 0; position: absolute; top: 0; z-index: 2147483647; } .overlay2 { left: 0; margin-left: 0; margin-top: 0; position: absolute; top: 0; z-index: 2147483647; } .overlay1 { display: none; left: 11px; margin-left: 0; margin-top: 0; position: absolute; top: 31px; z-index: 2147483600; } div.threeColAfooter { background-color: #000000; float: left; width: 700px; } } #register big, #register fieldset, #register fieldset label, #register span, .message { display: block; } #register { color: #000; margin: 0 auto 10px; padding: 0 10px 10px 0; width: 420px; } #register big { color: #e60083; font-size: 25px; margin-bottom: 4px; } #register big1 { color: red; } #register fieldset { padding: 0; } #register .login { width: 350px; } #register .login input { width: 190px; } #register fieldset label, #register fieldset input { float: left; } #register fieldset label { font: bold 15px/15px arial; height: 16px; padding: 2px 15px 2px 0; text-align: right; width: 90px; } #register fieldset label td em { color: red; } #em { color: red; } #register fieldset input { border: 2px inset #ccc; margin-bottom: 10px; width: 290px; } #reg-but { background: none repeat scroll 0 0 #f0f0f0; border: 2px outset #000; font-weight: bold; margin-left: 0px; padding: 2px 4px; } #reg-but:hover { background: none repeat scroll 0 0 #b0ffba; color: #006600; } #register span { padding-bottom: 20px; } #container { background: none repeat scroll 0 0 #fff; margin-bottom: 5px; } #holder1, .carousel { width: 689px; } #holder1 { float: left; padding-left: 160px; padding-top: 5px; width: 689px; } .featured { height: 608px; } .videoholder { height: 695px; } .video1 .hed, .chslide .hed { } #video1, .carousel, #extras { } #video1 { background: none repeat scroll 0 0 #3b3a36; padding: 5px 15px; } #shold { height: 450px; padding-top: 40px; } #shold p { font-size: 14px; } #register .edit-profile label { font-size: 12px; } #register a, .message a { color: #e60083; text-decoration: underline; } .message { background: none repeat scroll 0 0 #262626; border: 1px solid #999; color: #fff; font-size: 15px; margin: 5px auto 0; padding: 15px; width: 400px; } .chplugch { float: left; margin: 3px .5%; padding: 7px 1%; width: 23.9%; overflow: hidden; background: -webkit-linear-gradient(top, #0B0B0B 0, #252525 20%, #222 50%, #111 80%, #181818 100%) no-repeat; background: -moz-linear-gradient(top, #0B0B0B 0, #252525 20%, #222 50%, #111 80%, #181818 100%) no-repeat; background: -ms-linear-gradient(top, #0B0B0B 0, #252525 20%, #222 50%, #111 80%, #181818 100%) no-repeat; background: linear-gradient(top, #0B0B0B 0, #252525 20%, #222 50%, #111 80%, #181818 100%) no-repeat; /*border-radius: 7px;*/ } .chplugch img { border: 1px solid #ffffff; display: block; margin: 0 auto; } .chplugch:hover img { border: 1px solid #ff2916; } .chplugch:hover { background: -webkit-linear-gradient(top, #181818 0, #111 20%, #222 50%, #252525 80%, #0B0B0B 100%) no-repeat; background: -moz-linear-gradient(top, #0B0B0B 0, #252525 20%, #222 50%, #111 80%, #181818 100%) no-repeat; background: -ms-linear-gradient(top, #0B0B0B 0, #252525 20%, #222 50%, #111 80%, #181818 100%) no-repeat; background: linear-gradient(top, #0B0B0B 0, #252525 20%, #222 50%, #111 80%, #181818 100%) no-repeat; position: relative; } .chplugch:hover .desc { visibility: visible; } .chplugch:hover .chplug_play { display: inline; } .chplugch a { color: #ff2916; text-decoration: none; font-size: 9px; } .chplugch a:hover { color: #fff; text-decoration: none; } .chplugchurl { background-color: #0c0c0c; height: 130px; padding: 0 0; } #chplugchurl:hover { background-color: #710127; } .chplugchurl a { color: #710127; text-decoration: none; } } .chplugch_play { background:rgba(0, 0, 0, 0); cursor: pointer; display: none; height: 100px; left: 15px; position: absolute; top: 15px; width: 133px; z-index: 20; } .chcatch30 { float: right; font: 9px Arial,sans-serif; margin: 0 3px; color: #ccc; } .chcatch30 a { color: #ff3d7c; font-weight: bold; text-decoration: underline; } .chcatch30 a:hover { color: #ffffff; text-decoration: none; } .chtitlech30 { color: #fff; display: block; font-size: 12px; font-family: Arial, sans-serif; height: 34px; margin-bottom: 7px; overflow: hidden; padding: 4px 4px 0; text-align: center; } .chtitlech30:hover { color: #e3dfe1; } /* ------ RESPONSIVE DESIGN ------ */ @media screen and (max-width: 870px) { .chplug { width: 19.2%; } div.threeColA1 { width: 61%; } div.threeColA3 { width: 39%; } .plug30, .chplugch { width: 32%; } } @media screen and (max-width: 870px) { .videoright { display:none; } } @media screen and (max-width: 730px) { .chplug { width: 24.2%; } div.threeColA1 { width: 56%; } div.threeColA3, .plug30, .chplugch { width: 44%; } } @media screen and (max-width: 640px) { .nav ul li a { font-size: 16px; padding: 4px 12px; } .search, .logo-wrapper { width: 100%; text-align: center; } .search form { display: inline-block; position: relative; } .searchbox input { right: 10px; } .searchbox button { top: -2px; right: -40px; } div.threeColA1, div.threeColA3 { width: 100%; } .plug30, .chplugch { width: 24.2%; margin: 3px .3%; padding: 7px .5%; } div.contentblock h1, .main h2 { font-size: 1.2em; margin: 0; } div.pagenav { text-align: center; } div.pagenav > div { float: none; display: inline-block; margin: 0 5px; } } @media screen and (max-width: 860px) { .button-menu { display: block; } .nav { padding: 10px 0; position: relative; /*border-bottom: 2px solid #fff;*/ } .nav ul { display: none; width: 80%; position: absolute; background-color: #6a5ae1; top: 100%; left: 10%; /*border: 2px solid #fff;*/ border-top: none; /*border-radius: 0 0 10px 10px;*/ z-index: 999; } .nav ul li { display: block; text-align: center; } .nav ul li a { display: block; padding: 6px 12px; width: 100%; /*margin: 0 5%;*/ background-color: transparent; border-width: 1px; border-radius: 0; } .nav ul li:last-child a { border: none; } .header-inner { margin: 0; } } @media screen and (max-width: 860px) { .button-menu { display: block; float:left; margin-left: 30px; } } @media screen and (max-width: 560px) { .chplug, .plug30, .chplugch { width: 32.2%; } .chplug a { margin-bottom: 15px; } .chtitle30, .title30, .chtitlech30 { font-size: 11px; height: 36px; margin-bottom: 10px; } } @media screen and (max-width: 540px) { .button-menu { display: block; float: none; margin-left: auto; } } @media screen and (max-width: 540px) { #nav-outer { width: 100%; display: inline-block !important; } #search1 { margin-left: auto !important; margin-right: auto !important; margin-bottom: 50px; margin-top: -10px; float: none!important; } } @media screen and (max-width: 420px) { .chplug, .plug30, .chplugch { width: 47%; margin: 3px 1%; } .footer-nav { padding: 0 10px; } .footer-nav li { margin-right: 15px; width: 100%; margin: 5px 0; } } @media screen and (max-width: 330px) { .chplug, .plug30, .chplugch { width: 49%; margin: 3px .5%; } .hardlinks li { padding: 0 5px; } .hardlinks a { margin-top: 12px; } } #nav-outer { width:100%; display: inline-flex; } #search1 { float: right; }