html { background: #000000 url('/Images/content/jupitersforge/otc-jupitersforge-bkgd.png') no-repeat center top; } body > form > main a.logo img { margin: 0 14em 2em auto; z-index: 100; } /* #region Common borders */ #middle { behavior: url(Scripts/PIE-1.0/PIE.htc); border-style: solid; border-width: 85px; -moz-border-image: url('/images/otc_frame2.png') 85 85 84 84 repeat; -webkit-border-image: url('/images/otc_frame2.png') 85 85 84 84 repeat; -o-border-image: url('/images/otc_frame2.png') 85 85 84 84 repeat; border-image: url('/images/otc_frame2.png') 85 85 84 84 repeat; box-sizing: border-box; } /* #endregion */ section.expansion { padding-bottom: 1em; padding-top: 1em; text-align: center; } img.title { display: block; margin: -80px auto 20px; position: relative; text-align: center; z-index: 100; } strike { color: #929292; font-size: 0.75em; } section.expansion h1 { color: #019999; font: bold 1.5em Nevis, 'Segoe UI', Arial, sans-serif; margin-bottom: 0; text-transform: uppercase; } section.expansion h2 { color: #019999; font: normal 1.25em Nevis, 'Segoe UI', Arial, sans-serif; margin: 0.25em auto 0; text-transform: uppercase; } section.expansion p { color: #d8c8b3; line-height: 1.25em; } section.expansion > p { margin: 0.25em auto; padding: 0 2em; } section.expansion p.disclaimer { color: #8a8989; font: 0.875em 'Segoe UI', Arial, Verdana, sans-serif; font-style: italic; margin: 1em auto; } section.expansion p.disclaimer a { color: #8a8989; font-style: italic; text-decoration: underline; } section.expansion p.disclaimer a:hover { text-decoration: underline; } section.expansion img.subtitle { display: block; margin: 0 auto; max-width: 625px; position: relative; width: 100%; } section.expansion div.subtitle { background: url(/images/content/jupitersforge/title_expansion.png) no-repeat top center; height: 109px; margin: 0 auto; max-width: 881px; position: relative; overflow: hidden; text-align: center; width: 100%; z-index: 5; } /* #region Expansion Info */ section.expansion section.expansioninfo { display: block; margin: 0 auto; margin-top: 3em; position: relative; } /* #region Lightslider */ section.expansion section.expansioninfo div.media { display: inline-block; margin-bottom: 2em; position: relative; width: 455px; } section.expansion section.expansioninfo div.media section.lightslider { display: block; margin-bottom: 8px; position: relative; width: 450px; } ul.gallery { list-style: none outside none; padding-left: 0; margin: 0; } .demo { width: 800px; } .lSAction > a { background-image: url('/images/controls.png'); } .lSSlideOuter { background-color: #000000; width: 450px; } .lSSlideOuter .lSPager.lSGallery li.active, .lSSlideOuter .lSPager.lSGallery li { opacity: 0.4; } .lSSlideOuter .lSPager.lSGallery li.active, .lSSlideOuter .lSPager.lSGallery li:hover { border-radius: 0; opacity: 1; outline: #019999 solid 1px; outline-offset: -1px; } /* #endregion Lightslider */ section.expansion section.expansioninfo section.info { display: inline-block; margin: 0 auto; margin-bottom: 2em; margin-left: 1em; margin-top: -0.5em; position: relative; width: 400px; vertical-align: top; } section.expansion section.expansioninfo section.info article.text { display: block; margin: 0 auto; position: relative; text-align: left; } section.expansion section.expansioninfo section.info article.text h2 { color: #e3a726; display: block; font: 1.188em 'Segoe UI', Arial, Verdana, sans-serif; font-weight: bold; text-transform: none; } section.expansion section.expansioninfo section.info article.text p.description { margin: 1em 0; } section.expansion section.expansioninfo section.info article.text div.buydlc { display: block; margin: 0 auto; padding-top: 1.5em; position: relative; text-align: left; vertical-align: top; } section.expansion section.expansioninfo section.info article.text div.buydlc p.price { display: inline-block; font-size: 1.25em; margin: 0 auto; position: relative; text-align: center; vertical-align: top; width: 153px; } section.expansion section.expansioninfo section.info article.text div.buydlc div.buttons { display: inline-block; margin: 0 auto; position: relative; vertical-align: top; } section.expansion section.expansioninfo section.info article.text div.buydlc a.cart { background: url(/images/content/store/release/btn_getitnow.png) no-repeat; background-position: left top; display: block; height: 47px; margin: 0 auto 0.5em; position: relative; width: 230px; } section.expansion section.expansioninfo section.info article.text div.buydlc div.dropdownpurchase div { margin-bottom: 0.5em; text-align: left; } section.expansion section.expansioninfo section.info article.text div.buydlc p.price { color: #f6f6f6; display: inline-block; font: 1.275em 'Segoe UI', Arial, sans-serif; padding-bottom: 0; text-align: left; width: 108px; } section.expansion section.expansioninfo section.info article.text div.buydlc p.price > strike { color: #929292; display: block; font: 0.75em 'Segoe UI', Arial, sans-serif; } section.expansion section.expansioninfo section.info article.text div.buydlc a.cart { background: url(/images/content/store/release/btn_getitnow.png) no-repeat; background-position: left top; display: block; height: 47px; margin: 0 auto 0.5em; position: relative; width: 230px; } section.expansion section.expansioninfo section.info article.text div.buydlc a.cart:hover { background-position: left bottom; } select { background: url(/images/content/store/release/arrow_additionaldistributors.png) no-repeat right #3A552A; background-position-x: 195px; border: 1px solid #8CD260; color: #FFFFFF; height: 36px; padding: 5px; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 230px; } select::-ms-expand { display: none; } section.expansion section.expansioninfo article.text div.community-discount { background-color: #0d2120; border: 1px solid #1a7873; display: block; margin: 1em 0; padding: 10px; } section.expansion section.expansioninfo article.text div.community-discount > h2 { color: #88dbda; font: normal 1.125em Nevis, 'Segoe UI', Arial, sans-serif; margin: 0; text-align: left; text-transform: uppercase; } section.expansion section.expansioninfo article.text div.community-discount > p { color: #d8c8b3; margin: 0.25em 0; font-size: 14px; text-align: left; } section.expansion section.expansioninfo article.text div.community-discount > p span { color: #88dbda; font-weight:bold; } /* #endregion */ /* #region Features */ section.expansion section.features { display: block; margin: 0 auto; margin-top: 1em; position: relative; } /*section.expansion section.features img { display: block; margin: 0 auto; margin-bottom: 2em; position: relative; }*/ section.expansion section.features div.gamefeatures { background: url(/images/content/jupitersforge/title_gamefeatures.png) no-repeat top center; height: 38px; margin: 0 auto; max-width: 881px; padding-bottom: 2em; position: relative; overflow: hidden; text-align: center; width: 100%; z-index: 5; } section.expansion section.features ul { display: inline-block; list-style-type: none; margin: 0 auto; max-width: 365px; padding: 0px 3.5em; position: relative; text-align: left; vertical-align: top; } section.expansion section.features ul li { margin-bottom: 2em; position: relative; } section.expansion section.features ul li h2 { color: #01999; display: block; text-transform: uppercase; } section.expansion section.features ul li p { font-size: 0.938em; } /* #endregion */ /* #region Lower */ section.expansion section.lower { display: block; margin: 0 auto; padding: 1em 0 0; position: relative; } /* #region News */ section.expansion section.lower div.news { background: url('/images/content/jupitersforge/box_latestnews.png') no-repeat; display: inline-block; height: 525px; margin: 0 auto; margin-top: -0.5em; position: relative; vertical-align: top; width: 475px; } #news { display: block; max-height: 370px; padding: 0 1em; padding-top: 100px; position: relative; text-align: left; width: 89%; } #news > header { height: 30px; } #news article { display: block; margin-bottom: 0.5em; padding: 0 2em; text-align: left; } #news article header, #news article footer { text-align: left; } #news article header a { color: #88dbda; font: 16px "Segoe UI", Arial, Tahoma; text-decoration: underline; } #news article p { color: #d8c8b3; font: 13px "Segoe UI", Arial, Tahoma; margin: 0.25em 0; text-align: left; text-decoration: none; } #news article p a { color: #d8c8b3; font: 13px "Segoe UI", Arial, Tahoma; margin: 0.5em 0; text-decoration: underline; } #news article p a:hover { text-decoration: underline; } #news article footer { border: none; color: #969696; font: 11px "Segoe UI", Arial, Tahoma; height: auto; margin: 0 auto 1.25em; padding-top: 0; text-decoration: none; } #news article footer a { color: #969696; font: 11px "Segoe UI", Arial, Tahoma; text-decoration: none; } #news article footer a:hover { text-decoration: underline; } #news > div > div > footer { border-top: none; color: #FAFAFA; display: block; font: 13px "Segoe UI", Arial, Tahoma; height: auto; margin: 0 auto 2em; padding: 0; text-align: right; } #news > div > div > footer > a { color: #FAFAFA; text-decoration: underline; } /* #endregion */ /* #region System Requirements */ section.expansion section.lower div.sysreq { background: url('/images/content/jupitersforge/box_sysreqs.png') no-repeat; display: inline-block; height: 525px; margin: 0 auto; margin-top: -0.5em; position: relative; vertical-align: top; width: 475px; } section.expansion section.lower div.sysreq div.sysreqwrapper { display: block; height: 345px; margin: 0 auto; margin-top: 7em; position: relative; width: 336px; } section.expansion section.lower div.sysreq div.box { background-color: #003636; border: 1px solid #003636; margin: 0 auto; margin-top: 16px; text-align: left; } section.expansion section.lower div.sysreq div.box div.left { display: table-cell; position: relative; width: 161px; vertical-align: middle; } section.expansion section.lower div.sysreq div.box div.left h3 { color: #d8c8b3; font: bold 0.875em 'Segoe UI', Arial, Verdana, Sans-Serif; margin-left: 10px; text-transform: uppercase; } section.expansion section.lower div.sysreq div.box div.right { background-color: #000000; height: 100%; display: table-cell; position: relative; width: 175px; vertical-align: top; } section.expansion section.lower div.sysreq div.box div.right p { font-size: 0.813em; margin: 5px auto; margin-left: 10px; } section.expansion section.lower div.sysreq div.box div.right p a { text-decoration: underline; } /* #endregion */ /* #endregion */ @media (max-width: 850px) { section.expansion img.subtitle { display: block; } section.expansion div.subtitle { display: none; } } @media (min-width: 851px) { section.expansion img.subtitle { display: none; } section.expansion div.subtitle { display: block; } } .lightspeed-box .lsb-content { height: 80%; }