/* pure-hidden-xs */ @media screen and (max-width:567px) { .pure-visible-sm{display:none} .pure-visible-md{display:none} .pure-visible-lg{display:none} .pure-visible-xl{display:none} .pure-hidden-xs{display:none} } /* pure-hidden-sm */ @media screen and (min-width:568px) and (max-width:767px) { .pure-visible-xs{display:none} .pure-visible-md{display:none} .pure-visible-lg{display:none} .pure-visible-xl{display:none} .pure-hidden-sm{display:none} } /* pure-hidden-md */ @media screen and (min-width:768px) and (max-width:1023px) { .pure-visible-xs{display:none} .pure-visible-sm{display:none} .pure-visible-lg{display:none} .pure-visible-xl{display:none} .pure-hidden-md{display:none} } /* pure-hidden-lg */ @media screen and (min-width:1024px) and (max-width:1279px) { .pure-visible-xs{display:none} .pure-visible-sm{display:none} .pure-visible-md{display:none} .pure-visible-xl{display:none} .pure-hidden-lg{display:none} } /* pure-hidden-xl */ @media screen and (min-width:1280px) { .pure-visible-xs{display:none} .pure-visible-sm{display:none} .pure-visible-md{display:none} .pure-visible-lg{display:none} .pure-hidden-xl{display:none} } /* Blocks -------------------- */ #container { margin: 0 auto; width:1000px; min-height:100% } #header { height: 135px; position: relative; background: url(../images/header-bg.png) repeat 65% top; zoom: 1 } #wrapper { overflow: hidden; zoom: 1; clear:both; background: #222; padding: 16px 15px; border-top: 1px solid #fff; margin:28px 0px 35px 0px } #content { width: 655px; background: #fff; padding: 20px 15px 20px 15px; float: right; } #content img { max-width: 600px; } #sidebar { width: 270px; float: left; } #footer { overflow: hidden; zoom: 1; margin-top:-80px } /* Header -------------------- */ /* #header a.logo { margin-top:32px; text-decoration:none; float:left; display:block; width:106px; height:20px; background:url(../images/logo.png) no-repeat } */ #header .logo { position:absolute; top: 40px; height:80px; width:260px; } #header .logo a { display:block; position:relative; left:15px; top:25px; font-family:Arial; color:#fff; text-decoration:none; font-size:28px; } #header .logo h1, #header .logo small { display:block; position:relative; left:17px; top:30px; color:#b8b8b8; font-size: 11px; } #header .logoimage {left: 335px; width: 330px; height: 151px; position: absolute; background: url(../images/logo.png) repeat 65% top; } #header .pages { display:block; position:absolute; overflow: hidden; zoom: 1; float:left; font-size:20px } #header .pages li { float: left; margin-right: 20px; position: relative; border-bottom: 1px dashed #808080; height:33px; line-height: 40px; } #header .pages li a { color: #e9e9e9; text-decoration: none } #header .pages li.active { } #header .pages li.active a { color: #ec0b0b; font-size: 20px; text-decoration: none; } #header .profile { float:right; position: absolute; right: 0px; top: 41px; overflow:hidden;} #header .profile .avatar { float:right; width: 81px; height: 81px;} #header .profile ul { margin:18px 16px 0px 0px; float:right; text-align:right; } #header .profile li { font-size:11px; margin-bottom:8px; color:#fff } #header .profile li a { color:#fff; text-decoration:none; border-bottom: 1px dashed #808080; } #header .profile li .username { color:#fefefe; font-size:13px; } #header .profile li .logout { color:#fefefe; font-size:13px; } #header .profile li .userrating.plus { color:#77d115 } #header .profile li .userrating.minus { color:#ef2125 } #header .profile span.my { background: url(../images/my-icon.png) no-repeat; margin-right: 5px; margin-left: 14px; display:block; width:18px; height:18px; zoom: 1; text-decoration: none;float:left; } #header .profile span.message { background: url(../images/message-icon.png) no-repeat; margin-right: 5px; margin-left: 14px; margin-top:3px; display:block; width:20px; height:13px; zoom: 1; text-decoration: none; float:left; } #header .profile span.new-message { background: url(../images/message-icon.png) no-repeat right; margin-right: 5px; margin-left: 14px; margin-top:3px; display:block; line-height:12px; height:13px; zoom: 1; text-decoration: none; float:left; padding-right:28px; color:#77d115 } #header .profile span.settings { background: url(../images/settings-icon.png) no-repeat; display:block; margin-left: 14px; margin-right: 5px; width:16px; height:18px; zoom: 1; text-decoration: none; float:left; } #header .profile a:hover { color: #ddd; } #header ul.static { float: right; } #header .static li { float: right; margin-left: 15px; position: relative; height:30px; line-height: 40px; } #header .static a { text-decoration: none; color: #fff; border-bottom: 1px dashed #808080; padding-bottom: 2px; font-size: 14px; } #header .static a.donate { color: #f8b73f; font-size: 14px; } #header .static .donate-icon { background: url(../images/donate-icon.png) no-repeat; margin: 12px 4px 0px 0px; width: 16px; height: 16px; float: left; } #header .auth { position: absolute; top: 70px; right: 10px; overflow:hidden } #header .auth a { float:right; display:block; margin-left:8px; text-decoration:none } #header .auth .reg { width:118px; height:25px; background:url(../images/reg-button.png) no-repeat; display:block; } #header .auth .reg:hover { background-position:0px -25px } #header .auth .login { width:75px; height:25px; background:url(../images/join-button.png) no-repeat; display:block; } #header .auth .login:hover { background-position:0px -25px } /* Navigation -------------------- */ #nav { clear:both; overflow:hidden } /* Menu */ #nav .menu { padding-bottom: 30px; float: left; font-size: 16px; } #nav .menu li { float: left; color: #77d115; height:35px; line-height:35px; padding:0px 12px; position: relative; } #nav .menu li a { text-decoration: none; border-bottom: 1px dashed #808080; color: #949191; } #nav .menu li a.new { color:#77d115 } #nav .menu li.active { position: relative; } #nav .menu li.active a { color: #fff; border: none; } #nav .menu li.active a.new { color: #77d115 } /* Sub-menu */ #nav .sub-menu { position: absolute; top: 33px; width: 500px; left: 0; margin-left:10px; font-size: 14px; } #nav .sub-menu li { padding: 0px 10px; background: #292929; color:#77d115; height:28px; line-height:28px; } #nav .sub-menu li a { color: #909090 !important; border-bottom: 1px dashed #808080 !important; text-decoration: none; } #nav .sub-menu li a:hover { text-decoration: none !important; } #nav .sub-menu li.active a { color: #fff !important; border: none !important; text-decoration: none; } /* Search */ #nav .search { float:right; width:200px; margin-top: 15px; height:35px; padding-left: 5px; background: #222222; border-radius: 14px; border: 2px solid #525251; } #nav .search .text { width:160px; font-weight: bold; float: left; font-size: 16px; color: #fff; background:none; border:0px; height:35px; line-height:34px; } #nav .search .search-icon { display:block; float:left; margin:6px 8px 0px 10px } /* Search */ #nav .button-publish { float: left; font-size:15px; text-decoration: none; background:url(../images/write.png) no-repeat; color: #fff; line-height:34px; text-align:center; margin-right: 10px; width:166px; height:62px; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; } /* Misc blocks -------------------- */ /* Blog profile */ .blog { padding: 20px 0px 0; margin-bottom: 20px; color: #666; position: relative; } .blog .voting { position: absolute; top: 20px; right: 0px; z-index: 100; } .blog .voting .total { float: left; height:25px; font-size:14px; line-height:25px; padding:0px 7px } .blog .voting .total a { text-decoration: none; color: #fff; outline: none; text-shadow:1px 0px 0px #468600 !important } .blog .voting.positive .total { background:#5aac00; color:#fff } .blog .voting.negative .total { background:#f20202; color:#fff } .blog .voting .bg-plus { background:#e2e2e2; width:21px; display:block; padding-left:6px; padding-top:1px; height:24px; float:left } .blog .voting .bg-minus { background:#e2e2e2; width:19px; display:block; padding-left:4px; padding-top:1px; height:24px; float:left } .blog .voting .plus, .blog .voting .minus { width: 15px; height: 15px; display: block; background: url(../images/topic-voting.png) no-repeat; text-shadow:0px 1px 0px #fff; position: relative; outline: none; } .blog .voting .plus { background-position: 0 0; } .blog .voting .minus { background-position: -15px 0px } .blog .voting .plus:hover { background-position: 0px -15px } .blog .voting .minus:hover { background-position: -15px -15px } .blog .voting .text2 { color:#999; padding-left:16px; padding-top:2px; clear:both } .blog .voting.voted.plus .plus { background-position: 0px -15px !important } .blog .voting.voted.minus .minus { background-position: -15px -15px !important } .blog .voting.voted.plus .minus:hover { background-position: -15px 0px } .blog .voting.voted.minus .plus:hover { background-position: 0 0; } .blog .voting.guest .plus:hover { background-position: 0 0; } .blog .voting.guest .minus:hover { background-position: -15px 0px } .blog .blog-header { overflow: hidden; zoom: 1; position: relative; padding: 0 100px 0 30px; } .blog .blog-header img { position: absolute; top: 0; left: 0; } .blog .blog-header h2 { font-size: 24px; line-height: 1.3em; margin-top: -4px; } .blog .blog-header h2 a { text-decoration: none; border-bottom: 1px dashed #70AAE0; } .blog .blog-header h2.inactive a { color: #ccc; border-color: #ccc; } .blog .actions { margin-bottom: 10px; margin-left:30px; } .blog .actions .join2 { margin-top:4px; margin-left:5px; } .blog .blog-info { display: none; background: #F4F4F6; padding: 25px 30px; border-radius: 10px; } .blog .blog-info h3 { font-size: 22px; color: #555; font-family: Verdana, sans-serif; } .blog .blog-info p { border-bottom: 1px solid #DADADA; padding-bottom: 15px; margin-bottom: 0; } .blog .blog-info .user { margin-right: 5px; } .blog .blog-wrapper { overflow: hidden; zoom: 1; margin-bottom: 40px; border-top: 1px solid #fff; padding: 20px 0 0; } .blog .blog-wrapper .blog-admins { float: left; width: 50%; } .blog .blog-wrapper .blog-mods { float: left; width: 50%; } .blog .blog-wrapper .user-list li { float: left; width: 60px;text-align: center; overflow: hidden; } .blog .blog-wrapper .user-list li img { display: block; margin: 0 auto 2px; } .blog-list-table { } .blog-list-table tbody { color: #999; } .blog-list-table td .avatar { float: left; position: relative; top: 2px; } .blog-list-table td .title { font-size: 18px; line-height: 22px; } .blog-list-table td .user { font-weight: bold; color: #999; background: url(../images/icons.gif) 0 -108px no-repeat; } .blog-list-table td .private { position: relative; top: 2px; } .blog-list-table td p { margin-bottom: 0; color: #999; } /* User profile */ .user-profile { margin-bottom: 20px; overflow: hidden; zoom: 1; position: relative; } .user-profile .avatar { float:left; margin-right:20px } .user-profile .about-profile { float:left; margin-top: 10px; width:600px; } .user-profile .about-profile .top-profile { margin-bottom:12px; margin-top:-6px; overflow:hidden; } .user-profile .about-profile .top-profile h3 { font-size:24px; color:#9c9c9c; margin-bottom:0px } .user-profile .about-profile .top-profile h3 span { color:#222 } .user-profile .about-profile .btm-profile { clear:both; overflow:hidden } .user-profile .about-profile .btm-profile .rating { float:left; overflow:hidden } .user-profile .about-profile .btm-profile .rating .voting { float: left; margin-right:30px; overflow:hidden } .user-profile .about-profile .btm-profile .rating .voting .total { float: left; height:25px; font-size:14px; line-height:25px; padding:0px 7px } .user-profile .about-profile .btm-profile .rating .voting .total a { text-decoration: none; color: #fff; outline: none; text-shadow:1px 0px 0px #468600 !important } .user-profile .about-profile .btm-profile .rating .voting .text { color:#999; padding-left:20px; margin-bottom:5px } .user-profile .about-profile .btm-profile .rating .voting .text2 { color:#999; padding-left:24px; margin-top:2px; clear:both } .user-profile .about-profile .btm-profile .rating .voting.positive .total { background:#5aac00; color:#fff } .user-profile .about-profile .btm-profile .rating .voting.negative .total { background:#f20202; color:#fff } .user-profile .about-profile .btm-profile .rating .voting .bg-plus { background:#e2e2e2; width:21px; display:block; padding-left:6px; padding-top:1px; height:24px; float:left } .user-profile .about-profile .btm-profile .rating .voting .bg-minus { background:#e2e2e2; width:19px; display:block; padding-left:4px; padding-top:1px; height:24px; float:left } .user-profile .about-profile .btm-profile .rating .voting .plus, .user-profile .about-profile .btm-profile .rating .voting .minus { width: 15px; height: 15px; display: block; background: url(../images/topic-voting.png) no-repeat; text-shadow:0px 1px 0px #fff; position: relative; outline: none; } .user-profile .about-profile .btm-profile .rating .voting .plus { background-position: 0 0; } .user-profile .about-profile .btm-profile .rating .voting .minus { background-position: -15px 0px } .user-profile .about-profile .btm-profile .rating .voting .plus:hover { background-position: 0px -15px } .user-profile .about-profile .btm-profile .rating .voting .minus:hover { background-position: -15px -15px } .user-profile .about-profile .btm-profile .rating .voting.voted.plus .plus { background-position: 0px -15px !important } .user-profile .about-profile .btm-profile .rating .voting.voted.minus .minus { background-position: -15px -15px !important } .user-profile .about-profile .btm-profile .rating .voting.voted.plus .minus:hover { background-position: -15px 0px } .user-profile .about-profile .btm-profile .rating .voting.voted.minus .plus:hover { background-position: 0 0; } .user-profile .about-profile .btm-profile .rating .voting.guest .plus:hover { background-position: 0 0; } .user-profile .about-profile .btm-profile .rating .voting.guest .minus:hover { background-position: -15px 0px } .user-profile .about-profile .btm-profile .rating .strength { float:right } .user-profile .about-profile .btm-profile .rating .strength .text { color:#999; padding-left:0px; margin-bottom:5px } .user-profile .about-profile .btm-profile .rating .strength .total { background:#5294ce; line-height:25px; font-size:14px; padding:0px 8px; height:25px; text-align:center; color: #fff; outline: none; text-shadow:1px 0px 0px #468600 !important } .user-profile .about-profile .btm-profile .info { float:right; color:#222; font-size:11px; line-height:12px } .user-profile .about-profile .btm-profile .info b { color:#9c9c9c; font-weight:normal } .user-profile .about-profile .btm-profile .friend { float:right; margin-left:30px } .user-profile .about-profile .btm-profile .friend .add-friend { width:158px; height:24px; background:url(../images/friend-button.png) no-repeat; display:block } .user-profile .about-profile .btm-profile .friend .add-friend:hover { background-position:0px -24px; } .user-profile .about-profile .btm-profile .friend .delete-friend { width:158px; height:24px; background:url(../images/friend-button.png) no-repeat 0px -48px; display:block } .user-profile .about-profile .btm-profile .friend .delete-friend:hover { background-position:0px -72px; } .user-profile .about-profile .btm-profile .friend .reject-friend { width:158px; height:24px; background:url(../images/friend-button.png) no-repeat 0px -120px; display:block } .user-profile .about-profile .btm-profile .friend .send-friend { width:158px; height:24px; background:url(../images/friend-button.png) no-repeat 0px -96px; display:block } .user-profile .about-profile .btm-profile .friend .send-message { margin-top:14px; width:158px; height:24px; background:url(../images/send-message.png) no-repeat; display:block } .user-profile .about-profile .btm-profile .friend .send-message:hover { background-position:0px -24px; } .user-profile-table { width: 100%; } .user-profile-table td { vertical-align: top; padding: 0 0 8px; } .user-profile-table td.var { width: 150px; color: #9c9c9c; } .user-profile-table td .user { margin-right: 7px; } /* Stat */ .stat-performance { padding: 15px 20px; background: #fff; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } .stat-performance table { } .stat-performance table td { width: 200px; vertical-align: top; } .stat-performance h4 { font-weight: bold; } /* Userfeed */ .userfeed-get-more { display:block; width: 90%; margin: 0px auto; text-align: center; height: 2.5em; padding-top: 1em;} .userfeed-get-more:hover { background: #f0f7fd;} .userfeed_loading {background: #F7F7F7 url(../images/loader.gif) no-repeat center;} /* Stream */ .stream-get-more { display: block; text-align: center; padding: 12px 0; background: #fafafa; color: #aaa; border-top: 1px solid #eee; text-decoration: none; } .stream-get-more:hover { background: #f0f7fd; } .stream_loading { background: #f7f7f7 url(../images/loader.gif) no-repeat center; } .stream-comment-preview { padding: 5px 10px; background: #f3f3f3; margin-top: 5px; } .stream-list { margin: 0 0 20px; } .stream-list li { margin-bottom: 5px; min-height: 48px; _height: 48px; background: #fafafa; padding: 10px 15px 10px 70px; position: relative; } .stream-list li .avatar { position: absolute; top: 10px; left: 10px; } .stream-list li .date { display: block; color: #999; } .stream-list li a { text-decoration: none; } .stream-list li a:hover { text-decoration: underline; } /* Userfields */ .userfield-list { width: 450px; } .userfield-list li { background: #f7f7f7; margin-bottom: 1px; padding: 10px 5px; overflow: hidden; zoom: 1; line-height: 12px; color: #777; } .userfield-list li .uf-actions { float: right; } .userfield-list li .uf-actions img { vertical-align: top; } .userfield-list li .userfield_admin_name { font-weight: bold; color: #333; } .userfield-add { text-decoration: none; border-bottom: 1px dashed #70AAE0; } .userfield-add:hover { color: #333; border-color: #333; } /* Footer ----------------------------------------------------------------- */ #footer .inner { margin:0 auto; width:1020px; height: 296px; background: url(../images/footer-bg.png); color:#303030; font-size:13px } #footer .inner a { color:#303030; text-decoration:underline } #footer .inner a:hover { text-decoration:none } #footer .inner .right { float:right } #footer .inner .block1 { font-family: Verdana, Tahoma, Arial; float: left; border-radius: 5px; height: 200px; background: rgba(10,10,10,0.65); padding: 15px; margin: 30px 0px 0px 10px;} #footer .inner .block1 h3 {font-size: 18px; font-family: Verdana, Tahoma, Arial; margin: 0px; width: 120px; border-bottom: 1px solid #777; padding-bottom: 10px; color: #fff;} #footer .inner .block1 li {border-bottom: 1px solid #777; width: 120px; padding: 5px 0px; list-style: none outside none; color: #ebebeb; font-size: 12px; text-transform: uppercase;} #footer .inner .block1 li.active {color: #fff;} #footer .inner .block1 li a { color: #ddd; font-size: 12px; text-decoration: none; text-transform: uppercase;} #footer .inner .block2 { font-family: Verdana, Tahoma, Arial; text-align: justify; float: right; border-radius: 5px; width: 330px; height: 200px; background: rgba(10,10,10,0.65); padding: 15px; margin: 30px 0px 0px 10px;} #footer .inner .block2 h3 { font-size: 18px; font-family: Verdana, Tahoma, Arial; margin: 0px; width: 120px; border-bottom: 1px solid #777; padding-bottom: 10px; margin-bottom: 10px; color: #fff;} #footer .inner .block2 a { color: #878787; border-bottom: 1px dashed #aaa; text-decoration: none;} #footer .inner .block2 p { color: #ecebeb; font-family: Verdana, Tahoma, Arial;} #footer .copyright { font-size: 11px; margin-left: 10px; float: left; margin-top: 10px; color: #fff;} #footer .copyright a { color: #fff; border-bottom: 1px dashed #ddd; text-decoration: none; } #footer .copyright2 { font-size: 11px; float: right; margin-top: 10px; color: #fff;} #footer .copyright2 span { color: #ec0b0b;} #footer .copyright2 a { color: #fff; border-bottom: 1px dashed #ddd; text-decoration: none; } #footer .buttons8831 { margin-top:20px; }