/* DOCUMENT INFORMATION - Document: Cult of Rapture Styles - Date: 2009 - Author: ROKKAN | Katarina Milkova */ /* reset.css */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;} body {line-height:1.5;} table {border-collapse:separate;border-spacing:0;} caption, th, td {text-align:left;font-weight:normal;} table, td, th {vertical-align:middle;} blockquote:before, blockquote:after, q:before, q:after {content:"";} blockquote, q {quotes:"" "";} a img {border:none;} body {font-size:62.5%;color:#999;background:#fff;font-family: Arial, Helvetica, sans-serif;} h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#57DCD4;} h1 {font-size:3em;line-height:1;margin-bottom:0.5em;} h2 {font-size:2em;margin-bottom:0.75em;} h3 {font-size:1.5em;line-height:1;margin-bottom:1em;} h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;} h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;} h6 {font-size:1em;font-weight:bold;} h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;} p {clear: both; margin:0; width: 100%;} a:focus {outline: thin #ccc;} a:hover {color:#57DCD4;} a {color:#468480;text-decoration:none;} ul, ol {margin:0;} ul {list-style: none;} ol {list-style-type:decimal;} dl {margin:0 0 1.5em 0;} dl dt {font-weight:bold;} dd {margin-left:1.5em;} hr {background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:.1em;margin:0 0 1.45em;border:none;} hr.space {background:#fff;color:#fff;} .subpage {width:350px} .box {padding:1.5em;margin-bottom:1.5em;background:#E5ECF9;} .clearfix:after, #container:after, #content:after, .content-body:after, .sidemodule-body:after {content:".";display:block;height:0;clear:both;visibility:hidden;} .clearfix, #container, #content {display:block;} .clear {clear:both;} .loading{background:url(../imgs/modules/load.gif) no-repeat center center;} .clickable { cursor: pointer; } /*------------GENERAL CLASSES---------------*/ .hidden {display: none} .col {float: left} .offscreen-render {position: absolute; left: -9999em;} .hr-solid {/*background: url(../imgs/layout/mafia_hr_solid.gif) repeat-x 0 0;*/ clear: both; float:left; height: 1px; width: 100%;} .hr-solid hr {display: none;} /* forms.css */ label {font-weight:bold;} fieldset {padding:1.4em;margin:0 0 1.5em 0;border:1px solid #ccc;} legend {font-weight:bold;font-size:1.2em;} input {font-family: Arial, Helvetica, sans-serif;} input.text, input.title, textarea, select {margin:0.5em 0;border:1px solid #bbb;} input.text:focus, input.title:focus, textarea:focus, select:focus {border:1px solid #666;} input.text, input.title {width:300px;padding:5px;} input.title {font-size:1.5em;} textarea {width:390px;height:250px;padding:5px; background:#f3f3f3; font-size:1.1em; font-family: Arial, Helvetica, sans-serif;} .error, .notice, .success {padding:.8em;margin-bottom:1em;border:2px solid #ddd;} .error {background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;} .notice {background:#FFF6BF;color:#514721;border-color:#FFD324;} .success {background:#E6EFC2;color:#264409;border-color:#C6D880;} .error a {color:#8a1f11;} .notice a {color:#514721;} .success a {color:#264409;} /*------------STRUCTURE---------------*/ html, body {height: 100%} body {margin: 0; background-color: #000; color: #fff} #container { background: #000; clear: both; margin: 0 auto; padding-bottom: 20px; text-align: left; width: 1200px; } #content {background: #000 url(../imgs/layout/cor_content_bg.gif) no-repeat 0 0; clear: both; margin: 0; padding: 0 115px; text-align: left; width: 970px; position: relative; top: -20px;} #content .content-body {padding: 12px 0; width: 100%;} #content .content-body .col-lft .col-header h2 {float: left; position: relative; top: 16px; left: 24px;} .module-holder {clear: both; float: left; width: 970px;} /* Columns */ #content .content-body .col-lft {background: url(../imgs/layout/cor_col_lft_top.png) no-repeat 0 0; float: left; margin: 0 10px 0 0; width: 680px;} #content .content-body .col-lft .col-lft-body {background: url(../imgs/layout/cor_col_lft_body.png) repeat-y 0 0; float: left; margin: 0; padding: 0 0 0 27px; width: 653px; clear: both; float: left; min-height: 420px;} #content .content-body .col-lft .col-header {background: url(../imgs/layout/cor_col_header_bg.png) no-repeat 0 0; height: 70px; width: 636px; padding: 0; margin: 0 auto; position: relative; top: 22px;} #content .content-body .col-lft .col-lft-btm {background: url(../imgs/layout/cor_col_lft_btm.png) no-repeat 0 0; height: 70px; width: 680px; padding: 0; clear: both; float: left;} #content .content-body .col-lft .col-footer {float: left; width: /*626px;*/ 590px; margin-top: 12px; padding-left: 46px;} #content .content-body .col-lft .col-footer a {color: #468480; font-size: 1.4em; font-weight: bold;} #content .content-body .col-lft .col-footer a:hover {color: #bbf3e5;} #content .content-body .col-lft .col-header a.shout-out {background: url(../imgs/icons/cor_shout_out_icon.png) no-repeat 0 0; display: block; height: 68px; width: 67px; text-indent: -9999em; float: right; position: absolute; top: -12px; right: -20px;} #content .content-body .col-rt {float: left; width: 280px;} #content .content-body .col-rt .extras {float: right; width: 237px; position: relative; top: -30px; z-index: 1} #content .content-body .col-rt .extras li {float: left;} #content .content-body .col-rt .extras li.twitter-icon {margin-right: 10px} #content .content-body .col-rt .extras li a {display: block; text-indent: -9999em; overflow: hidden; height: 133px; width: 103px;} #content .content-body .col-rt .extras li.twitter-icon a {background: url(../imgs/icons/cor_twitter_icon.png) no-repeat 0 0;} #content .content-body .col-rt .extras li.rss-icon a {background: url(../imgs/icons/cor_rss_icon.png) no-repeat 0 0;} #content .content-body .col-rt .extras li.twitter-icon a:hover, #content .content-body .col-rt .extras li.rss-icon a:hover {background-position: 0 -133px;} /* Columns found on subpage layout */ #content .content-body .inner-col-lft {float: left; margin: 0 24px 0 0; width: 200px;} #content .content-body .inner-col-rt {float: left; width: 570px;} /*------------BRANDING---------------*/ #branding {background: url(../imgs/layout/cor_header.jpg) no-repeat 0 0; clear: both; float: left; height: 386px; width: 1200px; position: relative;} #branding .header {clear: both; float: left; width: 100%; height: 386px;} #branding .header h1 {color: #fff; font-size: 5.6em; margin: 0; text-transform: uppercase; overflow: hidden; text-indent: -9999em; position: relative; top: 153px;} #branding .header h1 a {color: #fff; display: block; float: none; margin: 0 auto; height: 75px; width: 600px; overflow: hidden; z-index: 1000;} #branding .header h1 a span {color: #57DCD4; margin: 0 auto; text-align: center;} #branding .header .sub-heading {color: #fff; clear: both; font-size: 19px; margin: 0 auto; text-align: center; text-transform: uppercase; position: absolute; left: -9999em;} /*------------COUNTRY LIST---------------*/ .country-list {background: url(../imgs/layout/cor_country_bg.gif) no-repeat 0 0; height: 51px; width: 235px; float: right; position: relative; top: 0; right: 106px; z-index: 200;} .country-list ul {position: absolute; top: 20px; left: 23px;} .country-list li {float: left; text-transform: uppercase; margin-right: 2px;} .country-list li img {margin-right: 8px;} .country-list li a {display: block; float: left;} .country-list li.title-country {background: url(../imgs/titles/cor_title_country.gif) no-repeat 0 0; margin-right: 7px; height: 11px; width: 58px; position: relative; top: 5px; overflow: hidden; text-indent: -9999em;} .country-list li a {overflow: hidden; text-indent: -9999em; height: 19px; width: 24px;} /* COUNTRY ICONS IMG POSITIONING */ .country-list li.country-usa a {background: url(../imgs/icons/cor_country_icon_usa.gif) no-repeat 0 0;} .country-list li.country-fr a {background: url(../imgs/icons/cor_country_icon_france.gif) no-repeat 0 0;} .country-list li.country-ge a {background: url(../imgs/icons/cor_country_icon_germany.gif) no-repeat 0 0;} .country-list li.country-sp a {background: url(../imgs/icons/cor_country_icon_spain.gif) no-repeat 0 0;} .country-list li.country-it a {background: url(../imgs/icons/cor_country_icon_italy.gif) no-repeat 0 0;} .country-list li.country-usa a.current, .country-list li.country-usa a:hover, .country-list li.country-fr a.current, .country-list li.country-fr a:hover, .country-list li.country-ge a.current, .country-list li.country-ge a:hover, .country-list li.country-sp a.current, .country-list li.country-sp a:hover, .country-list li.country-it a.current, .country-list li.country-it a:hover {background-position: 0 -19px;} /*------------NAVIGATION---------------*/ #nav {background: url(../imgs/nav/cor_nav_bg.gif) no-repeat; clear: both; float: left; margin: 0; height: 74px; width: 1200px; position: relative; top: -20px;} #nav ul {float: left; position: relative; height: 74px; width: 1076px; padding-left: 124px;} #nav ul li {float: left; margin: 0; height: 74px;} #nav ul li a {background: url(../imgs/nav/cor_nav.gif) no-repeat -124px 0; color: #fff; display: block; font-size: 1.4em; height: 74px; text-indent: -9999em; position: relative;} /* NAV BTNS IMG POSITIONING */ #nav ul li.link-home a {background-position: -9px 0; width: 88px;} #nav ul li.link-articles a {background-position: -97px 0; width: 106px;} #nav ul li.link-downloads a {background-position: -203px 0; width: 132px;} #nav ul li.link-podcasts a {background-position: -335px 0; width: 113px;} #nav ul li.link-forums a {background-position: -448px 0; width: 102px;} #nav ul li.link-perks a {background-position: -550px 0; width: 121px;} #nav ul li.link-spread a {background-position: -671px 0; width: 166px;} #nav ul li.link-newsletter a {background-position: -837px 0; width: 127px;} #nav ul li.link-home a:hover {background-position: -9px -74px;} #nav ul li.link-articles a:hover {background-position: -97px -74px;} #nav ul li.link-downloads a:hover {background-position: -203px -74px;} #nav ul li.link-podcasts a:hover {background-position: -335px -74px;} #nav ul li.link-forums a:hover {background-position: - 448px -74px;} #nav ul li.link-perks a:hover {background-position: -550px -74px;} #nav ul li.link-spread a:hover {background-position: -671px -74px;} #nav ul li.link-newsletter a:hover {background-position: -837px -74px;} #nav ul li.link-home a.current {background-position: -9px -148px;} #nav ul li.link-articles a.current {background-position: -97px -148px;} #nav ul li.link-downloads a.current {background-position: -203px -148px;} #nav ul li.link-podcasts a.current {background-position: -335px -148px;} #nav ul li.link-forums a.current {background-position: - 448px -148px;} #nav ul li.link-perks a.current {background-position: -550px -148px;} #nav ul li.link-spread a.current {background-position: -671px -148px;} #nav ul li.link-newsletter a.current {background-position: -837px -148px;} /*------------CONTENT SECTION - SHARED STYLES---------------*/ #content .section {clear: both; float: left; margin: 0; width: 100%;} #content .section .section-top {background: url(../imgs/layout/cor_content_section_top.png) no-repeat 0 0; height: 20px; width: 626px; clear: both; float: left;} #content .section .section-body {background: #040707; width: 586px; padding: 0 20px; clear: both; float: left;} #content .section .section-btm {background: url(../imgs/layout/cor_content_section_btm.png) no-repeat 0 0; height: 20px; width: 626px; clear: both; float: left;} #content .col-lft-content .section {clear: both; float: left; margin: 4px 0; width: 100%;} #content .section.first {margin-top: 0;} #content .section img.thumb {clear: both; float: left; margin-right: 10px;} #content .section .inner-section {clear: both; float: left; width: 100%;} #content .section .inner-section .col {float: left; margin: 20px 20px 0 0; width: 170px;} #content .section .inner-section .col.last {margin-right: 0;} #content .section .inner-section .options {clear: both; float: left; margin: 15px 0 0; width: 170px;} #content .section .inner-section .options li {color: #468480; font-size: 12px; clear: both; float: left; width: 100%;} #content .section .inner-section .options li.title {color: #57dcd4; font-size: 12px; font-weight: bold;} #content .section .inner-section .options li.spec {color: #fefefe} #content .section .inner-section .options li a {display: block; width: 100%;} #content .section .inner-section p {color: #bbf3e5; margin: 0; width: 100%;} #content .section .inner-section p.desc {margin: 20px 0 0;} #content .section .inner-section .col.small {float: left; margin: 20px 20px 0 0; width: 80px;} #content .section .inner-section .col.small .options {clear: both; float: left; margin: 15px 0 0; width: 80px;} #content .section .inner-section .col.medsize {float: left; margin: 15px 15px 0 0; width: 100px;} #content .section .inner-section .col.medsize .options {clear: both; float: left; margin: 10px 0 0; width: 100px; text-align:center; font-weight:bold; } #content .section .section-detail {float: left; width: 426px} #content .section.fluid .section-detail {float: left; width: 586px} #content .section h4 {color: #57dcd4; clear: both; float: left; font-size: 1.8em; font-weight: bold; margin: 0; text-transform: uppercase; width: 100%;} #content .section h4 a {color: #57dcd4;} #content .section h4 a:hover {text-decoration: underline;} #content .section h5 {color: #57dcd4; clear: both; float: left; font-size: 1.4em; font-weight: bold; margin: 20px 0 0; text-transform: uppercase; width: 100%;} #content .section h5 a {color: #57dcd4;} #content .section h5 a:hover {text-decoration: underline;} #content .section .section-detail span {clear: none; float: left; color: #bbf3e5; font-size: 1.2em; width: 100%; margin-bottom: 20px;} #content .section .section-detail p { margin-bottom: 20px; color: #bbf3e5; } #content .section .section-detail-pod, #content .section .section-detail-perk { font-size: 1.2em; } #content .section .section-detail span.last {margin-bottom: 0;} #content .section.fluid .section-detail span {width: 100%;} #content .section .section-detail span a.more-link {color: #468480; line-height: 1em; font-size: 12px;} #content .section .section-detail span a.learn-link {color: #468480; clear: both; float: left; font-size: 12px;} #content .section .section-detail span a:hover.more-link, #content .section .section-detail p a:hover.learn-link {text-decoration: underline;} #content .section .post-detail {clear: both; float: left; width: 250px; margin-bottom: 15px} #content .section .post-detail li {color: #468480; font-size: 1.2em;; font-weight: bold; float: left; line-height: 1.4em; margin-right: 8px;} #content .section .post-detail li a {color: #468480;} #content .section .post-detail li a:hover {text-decoration: underline;} #content .section ul.list {clear: both; float: left; margin-bottom: 20px; padding-left: 20px; width: 250px;} #content .section ul.list li {background: url(../imgs/layout/cor_bullet_point.gif) no-repeat left 3px; padding-left: 20px; font-size: 12px; color: #bbf3e5;} #content .hr-solid {margin: 30px 0;} /*------------CONTENT SECTION - SUBPAGE Specific---------------*/ #content .section .inner-col-rt .section-detail h5 {color: #57DCD4; clear: both; float: left; font-size: 1.6em; font-weight: bold; line-height: 1.1em; margin: 0; text-transform: uppercase;} #content .section .inner-col-rt .section-detail h5 span {clear: both; float: left;} #content .section .inner-col-rt .section-detail {float: left; width: 570px} #content .section .inner-col-rt .quote {clear: both; float: left; margin: 30px 0 0 0; width: 570px;} #content .section .inner-col-rt .quote p {clear: both; font-style: italic; width: 100%;} #content .section .inner-col-rt .quote span {clear: both; color: #57DCD4; float: right; font-size: 1.2em;} /*------------SECTION CONTENT---------------*/ .section-content {clear: both; float: left; margin-top: 30px; width: 570px;} .section-content .content-segment {clear: both; float: left; margin: 0 0 30px 0; width: 570px:} .section-content .content-segment.last {margin: 0;} .section-content .content-segment h6 {clear: both; float: left; font-size: 1.2em; width: 570px;} .section-content .content-segment p {clear: both; float: left; font-size: 1.2em; width: 570px;} .promo-module {background: url(../imgs/layout/cor_sidemodule_promo_bg.png) no-repeat 0 0; clear: both; float: left; margin: -35px 0 8px; height: 402px; width: 266px; position: relative; left: 17px;} .promo-module .module-body {clear: both; float: left; padding: 81px 28px 0;} .promo-module .module-body a {background: url(../imgs/content/cultofrapture_poster.jpg) no-repeat 0 0; display: block; height: 288px; width: 209px; overflow: hidden; text-indent: -9999em;} .promo-module .module-body a:hover {background-position: 0 -288px;} /*------------SIDEMODULE - GENERAL STYLES---------------*/ #content .sidemodule {background: url(../imgs/layout/cor_sidemodule_bg.png) no-repeat 0 0; float: left; margin-bottom: 8px; height: 395px; width: 280px; position: relative; overflow: hidden;} #content .sidemodule .sidemodule-header {clear: both; float: left; width: 280px; margin-top: 26px;} #content .sidemodule .sidemodule-body {clear: both; float: left; padding: 0 40px; width: 200px;} #content .sidemodule .module-content {clear: both; float: left; margin: 0; padding: 8px 0; width: 200px} #content .sidemodule .sidemodule-header h3 {float: left; font-size: 2.4em; margin: 0;} #content .sidemodule .section {clear: both; float: left; margin: 16px 0 0;} #content .sidemodule .section h5 {color: #57dcd4; font-size: 1.4em; font-weight: bold; line-height: 1.2em; margin: 0; text-transform: uppercase;} #content .sidemodule .section p {color: #bbf3e5; font-size: 12px; line-height: 1.2em;} #content .sidemodule .section a {color: #468480; font-size: 12px;} #content .sidemodule .section a:hover {color: #468480; text-decoration: underline;} #content .sidemodule ul {clear: both; float: left;} /*------------SIDEMODULE - MODULE SPECIFIC STYLES---------------*/ .in-the-forums h3 {background: url(../imgs/titles/cor_title_intheforums.gif) no-repeat 0 0; height: 19px; width: 155px; overflow: hidden; text-indent: -9999em; position: relative; left: 62px;} .in-the-news h3 {background: url(../imgs/titles/cor_title_inthenews.gif) no-repeat 0 0; height: 18px; width: 124px; overflow: hidden; text-indent: -9999em; position: relative; left: 78px;} /*------------MODULE WIDE - GENERAL STYLES---------------*/ .module-wide {background: url(../imgs/layout/cor_module_wide_bg.png) no-repeat 0 0; float: left; margin-bottom: 8px; height: 223px; width: 469px; position: relative;} .module-wide .module-wide-header {float: left;} .module-wide .module-wide-body, .module-wide .module-content {clear: both; float: left; width: 469px} .module-wide .module-wide-bottom {clear: both; float: left; width: 469px; position: absolute; bottom: -22px; left: 30px;} .module-wide h3 {position: relative; top: 11px; left: 33px;} .module-wide ul.img-list {clear: both; float: left; padding: 20px 0 0 32px; height: 156px; width: 416px;} .module-wide .img-list li {float: left; margin-right: 12px;} .module-wide .img-list li a {display: block;} .module-wide .btn-viewall {clear: both; float: left;} /*------------MODULE WIDE - MODULE SPECIFIC STYLES---------------*/ .downloads {float: right;} .fan-art h3 {background: url(../imgs/titles/cor_title_fanart.gif) no-repeat 0 0; height: 15px; width: 75px; overflow: hidden; text-indent: -9999em;} .downloads h3 {background: url(../imgs/titles/cor_title_downloads.gif) no-repeat 0 0; height: 15px; width: 123px; overflow: hidden; text-indent: -9999em;} /*------------BUTTONS---------------*/ a.btn-viewall {background: url(../imgs/btns/cor_btn_viewall.gif) no-repeat 0 0; height: 22px; width: 86px; overflow: hidden; text-indent: -9999em;} a:hover.btn-viewall {background-position: 0 -22px;} /*------------FOOTER---------------*/ #footer {background: #000; clear: both; float: left; margin-top: 40px; width: 1200px; text-align: center;} #footer ul {margin: 6px auto; text-align: center; width: 950px;} #footer ul li {float: none; height: 98px; margin: 0;} #footer ul li a {margin: 0 16px;} #footer p.legal {color: #707070; font-size: 1em; float: none; margin: 0 auto 18px; text-align: center; width: 760px;} /*------------POPUP IMAGE---------------*/ .screenshots-bg { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #000000; display: none; z-index: 250; } .screenshots-img { z-index: 300; position: fixed; overflow: hidden; padding: 6px; border: 1px solid #468480; } .screenshots-close-hover { z-index: 301; width: 100%; height: 40px; position: absolute; top: 0px; left: 0px; } .screenshots-close { z-index: 501; width: 70px; height: 20px; padding-top: 8px; top: 0px; background: #E8E8E8; color: #468480; font: bold 14px Arial, Helvetica, san-serif; text-align: center; cursor: pointer; } /*------------ MISC ---------------*/ .previewBar { position: absolute; top: 0px; left: 0px; background: #0E766D; opacity: 0.75; width: 100%; height: 42px; font-size: 20px; color: #E5E5E5; display: block; z-index: 500; padding-top: 8px; padding-left: 10px; } .audioplayer-holder { width: 500px; height: 40px; float: left; } /* END CSS */