/* Template Name: Barbos Theme URI: codesweet.ru Autor: Ed.Creater Autor URI: codesweet.ru Version: 1.0 */ .lap{ background: url("img/bg-lap.png") center top no-repeat; } .wrapper{ width: 1000px; margin: 0 auto; position: relative; } .container .wrapper:before, .container .wrapper:after{ content: " "; display: table; } .container .wrapper:after{ clear: both; } body{ min-width: 1000px; background: url("img/bg.jpg") top left repeat-x #97e9d7; font-size: 14px; color: #2f3845; font-family: "Open Sans", Helvetica, Arial, sans-serif; } body.page{ margin: 0; } p{ font-size: 1em; line-height: 19px; margin: 20px 0; } a{ font-size: 1em; } h1{ font-size: 18px; font-weight: 500; font-family: Roboto, sans-serif; } h2{ font-size: 1.4em; font-weight: 500; font-family: Roboto, sans-serif; } h3{ font-size: 1.3em; font-weight: 500; font-family: Roboto, sans-serif; } header{ height: 245px; width: 100%; font-weight: 500; } header a.logo{ display: block; } header a.logo img{ margin-left: 50px; } .container{ position: relative; margin-top: -60px; } .container .wrapper{ padding-left: 15px; padding-right: 15px; box-sizing: border-box; margin-bottom: 30px; } .sidebar{ float: left; width: 253px; } .sidebar .side-head{ background: url("img/side-header.png") center top no-repeat; height: 80px; width: 100%; text-align: center; color: #58311e; padding: 16px 0; box-sizing: border-box; } .sidebar .side-head h3{ color: #fff; } .sidebar .side-entry{ background-color: #fff; width: 100%; } .sidebar .side-foot{ background: url("img/side-footer.png") center top no-repeat; height: 21px; width: 100%; } .content{ width: 697px; float: left; margin-left: 20px; } .row{ margin-left: -10px; margin-right: -10px; } .row:before, .row:after{ content: " "; display: table; } .row:after{ clear: both; } /*navigation*/ nav ul{ display: block; } nav ul li{ display: block; } nav ul li a{ display: table; padding: 10px; border-left: 5px solid #c85cff; box-sizing: border-box; text-decoration: none; font-family: "Open Sans", Helvetica, Arial, sans-serif; color: #2f3845; width: 100%; } nav ul li:nth-child(3n+1) a{ border-color: #ff9920; } nav ul li:nth-child(3n+2) a{ border-color: #90969a; } nav ul li:nth-child(3n+3) a{ border-color: #80a62a; } nav ul li a:hover{ color: #fff; text-decoration: none; border-left: 0 none; padding-left: 15px; background: #19b2c3; /* Old browsers */ background: -moz-linear-gradient(top, #19b2c3 0%, #15a1b6 50%, #1191aa 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#19b2c3), color-stop(50%,#15a1b6), color-stop(100%,#1191aa)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #19b2c3 0%,#15a1b6 50%,#1191aa 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #19b2c3 0%,#15a1b6 50%,#1191aa 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #19b2c3 0%,#15a1b6 50%,#1191aa 100%); /* IE10+ */ background: linear-gradient(to bottom, #19b2c3 0%,#15a1b6 50%,#1191aa 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#19b2c3', endColorstr='#1191aa',GradientType=0 ); /* IE6-9 */ } nav ul li a span{ margin-left: 40px; display: table-cell; width: 100%; vertical-align: middle; } nav ul li a span.navico{ margin: 0; margin-right: 10px; display: inline-block; width: 35px; height: 43px; background: url("img/nav-icon.png") left top no-repeat; } /* Game Preview */ .game-prev{ width: 337px; float: left; margin: 0 10px 20px 10px; border-radius: 5px; overflow: hidden; } .game-prev .thumb{ font-size: 0; position: relative; } .game-prev .thumb img{ width: 100%; height: 192px; } .game-prev .hover{ position: absolute; opacity: 0; top: 0; left: 0; width: 100%; height: 100%; } .game-prev .hover{ background-color: rgba(93,73,91,0.6); -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; color: #fff; font-size: 14px; padding: 0 20px; box-sizing: border-box; overflow: hidden; } .game-prev .hover p{ font-size: 14px; } .game-prev .hover:hover{ opacity: 1; } .game-prev .box-title{ display: table; width: 100%; min-height: 44px; background: #19b2c3; /* Old browsers */ background: -moz-linear-gradient(top, #19b2c3 0%, #15a1b6 50%, #1191aa 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#19b2c3), color-stop(50%,#15a1b6), color-stop(100%,#1191aa)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #19b2c3 0%,#15a1b6 50%,#1191aa 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #19b2c3 0%,#15a1b6 50%,#1191aa 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #19b2c3 0%,#15a1b6 50%,#1191aa 100%); /* IE10+ */ background: linear-gradient(to bottom, #19b2c3 0%,#15a1b6 50%,#1191aa 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#19b2c3', endColorstr='#1191aa',GradientType=0 ); /* IE6-9 */ } .game-prev .box-title span{ display: table-cell; vertical-align: middle; color: #fff; font-family: Roboto, sans-serif; font-weight: 400; padding-left: 20px; } .game-prev .rating{ height: 45px; padding: 15px 20px; box-sizing: border-box; background: #0c7388; /* Old browsers */ background: -moz-linear-gradient(top, #0c7388 0%, #0c7a8e 25%, #0e8698 50%, #109cab 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0c7388), color-stop(25%,#0c7a8e), color-stop(50%,#0e8698), color-stop(100%,#109cab)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #0c7388 0%,#0c7a8e 25%,#0e8698 50%,#109cab 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #0c7388 0%,#0c7a8e 25%,#0e8698 50%,#109cab 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #0c7388 0%,#0c7a8e 25%,#0e8698 50%,#109cab 100%); /* IE10+ */ background: linear-gradient(to bottom, #0c7388 0%,#0c7a8e 25%,#0e8698 50%,#109cab 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c7388', endColorstr='#109cab',GradientType=0 ); /* IE6-9 */ } .rating .star{ float: left; padding-top: 2px; } .rating .views{ float: right; margin-right: 15px; padding-left: 20px; background: url("img/ico-views.png") left center no-repeat; color: #fff; font-size: 1em; font-weight: 400; font-family: Roboto, sans-serif; padding-top: 4px; } .rating .like { float: right; } .rating .cs-likes-dislikes-form { display: flex; align-items: center; } .rating .cs-likes-dislikes .cs-like-post { margin-right: 5px; display: flex; align-items: center; } .rating .cs-likes-dislikes .like-ico{ background: url("img/up.png") left center no-repeat; display: block; width: 16px; height: 16px; } .rating .cs-likes-dislikes .like-count { color: #fff; font-size: 14px; margin-left: 5px; font-weight: bold; } .rating .cs-likes-dislikes .cs-dislike-post { display: flex; align-items: center; } .rating .cs-likes-dislikes .dislike-ico{ background: url("img/down.png") left center no-repeat; display: block; margin-left: 8px; width: 16px; height: 16px; } .rating .cs-likes-dislikes .dislike-count { color: #fff; font-size: 14px; margin-left: 5px; font-weight: bold; } /* page */ .page{ margin-bottom: 20px; } .home .page{ margin-bottom: 0; } .page-head{ background: url("img/page-header.png") left top no-repeat; height: 78px; padding: 17px 45px; box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 18px; font-weight: 500; } .page-head{ color: #fff; } .page-middle{ background: url("img/page-middle.png") left top repeat-y; padding: 10px 30px; box-sizing: border-box; height: 44px; } .page-entry{ background: url("img/page-entry.png") left top repeat-y; padding: 10px 30px; box-sizing: border-box; } .page-entry .mini-thumb{ float: left; border-radius: 5px; overflow: hidden; margin: 20px 20px 10px 0; } .page-entry .mini-thumb img{ width: 240px; height: auto; } .page-entry .pagecont{ margin-top: -17px; } .page-foot{ background: url("img/page-footer.png") left top no-repeat; height: 10px; } /* game-single */ .game-single{ margin-right: 3px; border-radius: 5px; margin-bottom: 20px; } .game-single .game-head{ border-radius: 5px; min-height: 44px; background: #19b2c3; /* Old browsers */ background: -moz-linear-gradient(top, #19b2c3 0%, #15a1b6 50%, #1191aa 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#19b2c3), color-stop(50%,#15a1b6), color-stop(100%,#1191aa)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #19b2c3 0%,#15a1b6 50%,#1191aa 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #19b2c3 0%,#15a1b6 50%,#1191aa 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #19b2c3 0%,#15a1b6 50%,#1191aa 100%); /* IE10+ */ background: linear-gradient(to bottom, #19b2c3 0%,#15a1b6 50%,#1191aa 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#19b2c3', endColorstr='#1191aa',GradientType=0 ); /* IE6-9 */ } .game-single .game-head .star{ float: left; margin: 10px 15px; width: 100%; } .game-single .game-head .social{ float: left; margin: 0 12px 10px; width: 100%; } .game-single .game-head .star .label{ float: left; color: #fff; margin-right: 15px; } .game-single .thumb{ padding: 10px 0; } .game-single .thumb iframe{ width: 100%; } .game-single .thumb img{ width: 100%; height: auto; } .game-single .game-foot{ border-radius: 0 0 5px 5px; height: 45px; padding: 15px 20px; box-sizing: border-box; background: #0c7388; /* Old browsers */ background: -moz-linear-gradient(top, #0c7388 0%, #0c7a8e 25%, #0e8698 50%, #109cab 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0c7388), color-stop(25%,#0c7a8e), color-stop(50%,#0e8698), color-stop(100%,#109cab)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #0c7388 0%,#0c7a8e 25%,#0e8698 50%,#109cab 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #0c7388 0%,#0c7a8e 25%,#0e8698 50%,#109cab 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #0c7388 0%,#0c7a8e 25%,#0e8698 50%,#109cab 100%); /* IE10+ */ background: linear-gradient(to bottom, #0c7388 0%,#0c7a8e 25%,#0e8698 50%,#109cab 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c7388', endColorstr='#109cab',GradientType=0 ); /* IE6-9 */ } .game-single .game-foot .views{ float: left; margin-right: 20px; color: #fff; font-size: 1em; font-weight: 400; font-family: Roboto, sans-serif; } .game-single .game-foot .like { float: right; margin-top: -2px; } .game-single .game-foot .like .text { color: #fff; margin-right: 10px; } .game-single .game-foot .cs-likes-dislikes { vertical-align: middle; } .game-single .game-foot .cs-likes-dislikes-form { display: flex; align-items: center; } .game-single .game-foot .cs-likes-dislikes .cs-like-post { margin-right: 5px; display: flex; align-items: center; } .game-single .game-foot .cs-likes-dislikes .like-ico{ background: url("img/up.png") left center no-repeat; display: block; width: 16px; height: 16px; } .game-single .game-foot .cs-likes-dislikes .like-count { color: #fff; font-size: 14px; margin-left: 5px; font-weight: bold; } .game-single .game-foot .cs-likes-dislikes .cs-dislike-post { display: flex; align-items: center; } .game-single .game-foot .cs-likes-dislikes .dislike-ico{ background: url("img/down.png") left center no-repeat; display: block; margin-left: 8px; width: 16px; height: 16px; } .game-single .game-foot .cs-likes-dislikes .dislike-count { color: #fff; font-size: 14px; margin-left: 5px; font-weight: bold; } .block-head{ background: url("img/block-head.png") left top no-repeat; height: 55px; font-size: 18px; font-weight: 500; font-family: Roboto, sans-serif; padding: 17px 20px; box-sizing: border-box; margin-bottom: 10px; color: #fff; } /* Similiar */ .similiar{ margin-left: -5px; margin-right: -5px; } .similiar:before, .similiar:after{ content: " "; display: table; } .similiar:after{ clear: both; } .game-sim{ width: 224px; float: left; margin: 0 5px 10px 5px; border-radius: 5px; overflow: hidden; } .game-sim .thumb{ font-size: 0; } .game-sim .thumb img{ width: 100%; height: 128px; } .game-sim .box-title{ display: table; width: 100%; min-height: 44px; background: #19b2c3; /* Old browsers */ background: -moz-linear-gradient(top, #19b2c3 0%, #15a1b6 50%, #1191aa 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#19b2c3), color-stop(50%,#15a1b6), color-stop(100%,#1191aa)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #19b2c3 0%,#15a1b6 50%,#1191aa 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #19b2c3 0%,#15a1b6 50%,#1191aa 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #19b2c3 0%,#15a1b6 50%,#1191aa 100%); /* IE10+ */ background: linear-gradient(to bottom, #19b2c3 0%,#15a1b6 50%,#1191aa 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#19b2c3', endColorstr='#1191aa',GradientType=0 ); /* IE6-9 */ } .game-sim .box-title span{ display: table-cell; vertical-align: middle; color: #fff; font-family: Roboto, sans-serif; font-weight: 400; padding-left: 20px; padding-right: 20px; } .game-sim .rating{ height: 45px; padding: 15px 20px; box-sizing: border-box; background: #0c7388; /* Old browsers */ background: -moz-linear-gradient(top, #0c7388 0%, #0c7a8e 25%, #0e8698 50%, #109cab 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0c7388), color-stop(25%,#0c7a8e), color-stop(50%,#0e8698), color-stop(100%,#109cab)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #0c7388 0%,#0c7a8e 25%,#0e8698 50%,#109cab 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #0c7388 0%,#0c7a8e 25%,#0e8698 50%,#109cab 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #0c7388 0%,#0c7a8e 25%,#0e8698 50%,#109cab 100%); /* IE10+ */ background: linear-gradient(to bottom, #0c7388 0%,#0c7a8e 25%,#0e8698 50%,#109cab 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c7388', endColorstr='#109cab',GradientType=0 ); /* IE6-9 */ } .post-ratings-loading{ display: none !important; } .page-comments{ padding-left: 10px; padding-right: 10px; } footer{ background: #17b7b1; min-height: 90px; padding: 1px; } footer p{ color: #fff; margin: 0; } footer .entry{ margin: 30px 0; } .navigation{ padding-left: 8px; padding-right: 8px; margin-bottom: 20px; } .navigation .pages{ display: none; } .navigation a, .navigation span{ background: url('img/bg-page-nav.png') top left repeat-x; border-radius: 5px; height: 35px; border: 0 none; width: 36px; display: inline-block; color: #58311e; box-sizing: border-box; text-align: center; padding: 10px 5px 3px; } .navigation a.last, .navigation a.first{ width: 100px; } .navigation a.last{ margin-left: 6px; } .navigation a.first{ margin-right: 6px; } .navigation a:hover, .navigation a:active{ color: #fff; } .navigation span.current{ color: #fff; font-weight: 400; } .hidden{ display: none; } /* Like widget */ .vk-knopka { float: left; height: 22px; margin: 15px auto; position: relative; } .odn-knopka { float: left; height: 22px; margin: 15px 15px; position: relative; width: 220px; } /* =WordPress Core -------------------------------------------------------------- */ .alignnone { margin: 5px 20px 20px 0; } .aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; } .alignright { float:right; margin: 5px 0 20px 20px; } .alignleft { float: left; margin: 5px 20px 20px 0; } a img.alignright { float: right; margin: 5px 0 20px 20px; } a img.alignnone { margin: 5px 20px 20px 0; } a img.alignleft { float: left; margin: 5px 20px 20px 0; } a img.aligncenter { display: block; margin-left: auto; margin-right: auto } .wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; /* Image does not overflow the content area */ padding: 5px 3px 10px; text-align: center; } .wp-caption.alignnone { margin: 5px 20px 20px 0; } .wp-caption.alignleft { margin: 5px 20px 20px 0; } .wp-caption.alignright { margin: 5px 0 20px 20px; } .wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; } .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; } .title404{ font-size: 50px; } .title404 span{ font-size: 30px; } .counters{ float: right; margin-top: 5px; } /* promo block */ .promo{ width: 100%; height: 302px; background: url("img/promo-bg.png") center top no-repeat; margin-bottom: 15px; text-align: center; display: table; border-radius: 5px; } .promo-wrap{ margin: 0 auto; display: table-cell; vertical-align: middle; text-align: center; } .promo-3-wrap, .promo-2-wrap{ margin-left: -15px; } .clear:before, .clear:after{ content: " "; display: table; } .clear:after{ clear: both; } .flash{ position: relative; } .overlay { position: absolute; left: 0; top:0; background: rgba(255,255,255,0.8); opacity: 1; transition:500ms all ease; width: 100% !important; height: 100% !important; } .new_ban_img { position: absolute; transition: 500ms all ease; left: 34%; top:50%; margin-left: -183px; margin-top: -186px; z-index: 10; position: absolute; background: #fff; border: 1px solid #dedede; border-radius: 5px; box-shadow: 0px 0px 10px rgba(0,0,0,.3); text-align: center; width:600px; padding: 15px 0 10px 0; } .ind_adv { position: relative; width: 652px; height: 296px; background: url(img/adv.jpg) 0 0 no-repeat; text-align: center; margin: 0 auto; padding-top: 16px; margin-bottom: 20px; } .new_ban_img a.skip_link { color: #AAA; font-size:14px; opacity: 0; } .progressbar { margin-top: 5px; height: 31px; position: relative; margin:0 auto; width: 336px; background: url(img/progress.png) 0 0 no-repeat; } .ui-progressbar-value { position: relative; max-width: 327px; top: -14px; background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #50D2C8), color-stop(1, #19B1C3) ); background-image: -o-linear-gradient(bottom, #50D2C8 0%, #19B1C3 100%); background-image: -moz-linear-gradient(bottom, #50D2C8 0%, #19B1C3 100%); background-image: -webkit-linear-gradient(bottom, #50D2C8 0%, #19B1C3 100%); background-image: -ms-linear-gradient(bottom, #50D2C8 0%, #19B1C3 100%); background-image: linear-gradient(to bottom, #50D2C8 0%, #19B1C3 100%); color:#fff; border-radius: 2px; width: 0; border-radius: 8px; height: 20px; opacity: 0; } #progressbar { width: 327px; margin:0 auto; } .progress-label { position: relative; z-index: 100; top:3px; font-size: 14px; color: #000; }