Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/*Simple tab style*/
.version_tab {
margin: 0;
padding: 0 10px;
border: 1px solid #AAA;
background: #ECECEC;
display: inline-block;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
/*Simple tab style when selected*/
.selected_tab {
background: #FFF;
border-top-color: #ECECEC;
}
/* tabber overrides*/
/* tabber on mainpage */
.mainpage-box-content .tabber.wds-tabber {
background: linear-gradient(135deg,rgba(37,5,0,1) 0%,rgba(61,11,0,1) 100%);
}
.mainpage-box-content .wds-tabs {
background-color: #c8a57d;
}
.mainpage-box-content .wds-tabs__tab.wds-is-current {
color: gold;
background-size: contain;
background-color: #310800;
background-size: auto;
}
.mainpage-box-content .wds-tabs__tab {
border: medium none;
display: inline-block;
margin-left: -3px;
margin-right: 5px;
width: 164px;
background: #866138;
color: white;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-top-right-radius: 10px;
-moz-border-top-left-radius: 10px;
-ms-border-top-right-radius: 10px;
-ms-border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border: 1px solid #310800;
}
.mainpage-box-content ul.wds-tabs {
list-style: none;
margin: 0;
padding: 0;
padding-left: 0px;
padding-left: 10px;
margin-bottom: 0px;
}
.mainpage-box-content .wds-tabs__tab-label {
white-space: break-spaces;
}
.tabberlive .tabbertab {
border: none !important;
border-top:0 !important;
background-color: none !important;
}
/* tabber in infoboxes */
ul.pi-image-collection-tabs {
border-bottom: 1px solid #b0855e;
margin: 0!important;
}
ul.pi-image-collection-tabs li {
border: 1px solid #b0855e;
border-radius: 2px 2px 0 0;
margin: 0;
}
/* end of tabber overrides*/
/* Tab Template */
/* Will eventually replace with the new formatting. I figured I would give it a day so everyone's cache would be refreshed. I need to remove inline styles off the tab template first */
#tabs {
width:100%;
border: 1px;
border-spacing: 0;
padding: 0;
margin-bottom: 5px;
font-size: 10pt;
}
#tabs .tab {
padding:0;
line-height:1em;
border: none;
width: 400px;
}
#tabs .tab > a, #tabs .tab > strong {
display: flex;
border: solid 1px #967c5e;
border-radius: 6px 6px 0 0;
-moz-border-radius: 6px 6px 0 0;
background-color:#967c5e;
width: 100%;
height: 30px;
justify-content: center;
align-items: center;
}
#tabs .tab > a:hover {
background-color: #b7956e;
}
#tabs .tab > a:active {
background-color: #967c5e;
}
#tabs .tab.tab-selected > strong {
border-bottom:0;
background-color:#c8a57d;
}
.between-tab {
border-bottom:1px solid #967c5e;
}
#after-tabs {
border-bottom:1px solid #967c5e;
}
/* Civilization Revolution 2 infoboxes */
div.CivRev2-infobox {
background-color: #dedede;
border: 1px solid #aaa;
border-radius: 5px;
float: right;
width: 402px;
}
div.CivRev2-infobox-row {
background-color: #dedede;
display: table-row;
}
div.CivRev2-infobox-row-one-header {
background-color: #dedede;
border: 1px solid #aaa;
clear: both;
font-weight: bold;
text-align: center;
width: 400px;
}
div.CivRev2-infobox-row-one-value {
background-color: #f2f2f2;
border: 1px solid #aaa;
clear: both;
text-align: center;
width: 400px;
}
div.CivRev2-infobox-row-header {
background-color: #dedede;
border: 1px solid #aaa;
display: table-cell;
font-weight: bold;
width: 130px;
}
div.CivRev2-infobox-row-value {
background-color: #f2f2f2;
border: 1px solid #aaa;
display: table-cell;
height: 100%;
width: 270px;
}
/*CivBE virtues table*/
.civbetable, .civbetable th, .civbetable tr>td{
border: thin solid #030407;
border-spacing: 0;
border-collapse: collapse;
color: #b6bfcb;
}
.civbetable tbody {
background-color: #13161d;
}
table.civbetable > * > tr > th{
background: #0b0c0e;
}
.civbetable .Might {
color: #FF8484;
}
.civbetable .Prosperity {
color: #277c61;
}
.civbetable .Knowledge {
color: #3e7a9e;
}
.civbetable .Industry {
color: #5F5D88;
}
.civbetable a {
color: #73979f!important;
}
.civbetable a:visited {
color: #597b82!important;
}
/* SMAC infoboxes */
.infoboxSMAC{
background: url("https://images.wikia.nocookie.net/__cb20140805055542/civilization/images/c/ce/Background_tile_%28SMAC%29.png") repeat scroll 0pt 0pt transparent;
border-style: double;
border-color: #496C3D;
border-width: 6px;
margin-bottom: 0.5em;
margin-left: 1em;
padding: 0.2em;
float: right;
clear: right;
width: 250px;
font-size: 89%;
text-align:center;
}
.headerSMAC{
background: url("https://images.wikia.nocookie.net/__cb20140805055024/civilization/images/2/22/Background_highlight_%28SMAC%29.png") repeat scroll 0pt 0pt transparent;
font-size:115%;
color: black;
text-align:center;
font-weight:bold;
}
.infoboxSMAC th {
color: #ADC4C0;
vertical-align: top;
text-align:left;
}
.infoboxSMAC td:not(.headerSMAC) {
color: #A4BAB8;
vertical-align: top;
text-align:right;
}
.infoboxSMAC td a {
color: #99CCFF;
}
.infoboxSMAC caption {
font-size: larger;
margin-left: inherit;
}
.infoboxSMAC.bordered {
border-collapse: collapse;
}
/* Steam achievement box styles */
table.steam-achievement-container {
border-style: none;
width:100%;
background-color: #1e1f21;
margin-top: 0;
margin-bottom: 0;
}
.steam-achievement-image-cell {
border-style: none;
width:64px;
background-color: #1e1f21;
}
.steam-achievement-text-cell {
text-align:left;
background-color: #1e1f21;
padding: 3px 5px;
border: none;
}
.steam-achievement-text-cell-inner-container {
border-width: 1px;
border-style:solid;
background-color: #262627;
border-color: #454545;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 7px 4px;
}
.steam-achievement-name {
font-weight:bold;
font-size:15px;
color:#e1e1e1;
}
.steam-achievement-description {
font-weight:normal;
font-size:12px;
color:#898989;
}
.steam-achievement-description a {
color: #73979f;
text-decoration: none;
}
.steam-achievement-description a:visited {
color: #597b82;
text-decoration: none;
}
/* Hover popups/tooltips/infocards */
.tooltip-container .tooltip-content {
display: none;
line-height: 16px;
margin-top: 20px;
margin-left: -130px;
padding: 14px 20px;
width: 270px;
z-index: 9999;
}
.tooltip-container a:hover + .tooltip-content {
display: inline;
position: fixed;
color: #111111;
border: 1px solid #AAAABB;
background: #eeeeee;
}
.MainPageHeader {
padding: 0 0 10px 30px;
margin: 0 0 10px 0;
background: url(https://images.wikia.nocookie.net/__cb20140905004406/civilization/images/b/b8/Headerbackground.png) no-repeat;
color: white;
font-size: 120%;
font-weight: bold;
font-family: 'Orbitron';
width: 100%;
text-transform: uppercase;
/* border:1px solid #ee7a06; */
}
.hidden {
display: none;
}
/** Super Walkthrough **/
/* Super Walkthrough */
/*** Fonts ***/
@font-face {
font-family: "Oswald";
font-style: normal;
font-weight: 400;
src: local("Oswald Regular"), local("Oswald-Regular"), url("https://fonts.gstatic.com/s/oswald/v9/-g5pDUSRgvxvOl5u-a_WHw.woff") format("woff");
}
/*** Branding box ***/
.superwalkthrough .branding {
background: #828682;
margin: 0 0 25px 0;
}
/*** General boxes ***/
.box {
background: no-repeat scroll center bottom #0b181a;
border: 1px solid #2d2d2d;
margin: 25px 0;
padding: 23px 25px 0;
position: relative;
}
.introduction {
min-height: 192px;
padding-bottom: 1px;
}
.box .left {
float: left;
margin-bottom: 16px;
width: -moz-calc(100% - 350px);
width: -webkit-calc(100% - 350px);
width: -o-calc(100% - 350px);
width: calc(100% - 320px);
}
.box .right {
float: right;
margin-bottom: -11px;
width: 320px;
}
.box .name {
color: white;
font-family: oswald;
font-size: 20px;
text-transform: uppercase;
}
.box .description .listing {
margin: -1px 0 0 27px;
}
.box .description .indent {
margin: 0 0 0 20px;
}
.box .right .video-container {
height: 185px;
margin-top: -92.5px;
position: absolute;
right: 25px;
top: 50%;
}
.box .right .video-container figure {
margin: 0;
}
.box .right .video-container figcaption {
text-align: center;
}
.box .right .video-container .title {
padding-bottom: 0;
}
.box .right .item {
margin-bottom: 1px;
}
.box .right .small-video {
margin-top: -4px;
}
.box .right .small-video figcaption {
text-align: center;
}
.box .right .item .caption {
float: left;
width: 150px;
}
.box .bottom {
margin-top: 16px;
text-align: center;
}
.box .bottom .item {
display: inline-block;
vertical-align: top;
}
.box .bottom .item figure {
margin-left: 21px;
}
.box .bottom .item:first-child figure {
margin-left: 0;
}
.box .bottom figcaption {
text-align: center;
}
/*** Contributors box ***/
.contributors {
background: no-repeat scroll center bottom #0b181a;
border: 1px solid #2d2d2d;
margin: 25px 0 25px;
padding: 13px 15px 0;
}
.contributors .wrapper {
margin: 0 auto;
width: 300px;
}
.contributors .header {
color: white;
font-family: oswald;
font-size: 20px;
margin-bottom: -6px;
text-align: center;
text-transform: uppercase;
}
.contributors .contributor {
margin-top: 19px;
}
.contributors .avatar {
float: left;
margin-bottom: 20px;
margin-right: 10px;
}
.contributors .details {
float: left;
}
.contributors .name {
font-family: oswald;
text-transform: uppercase;
width: 170px;
}
.contributors .name a {
color: white;
}
.contributors .more {
color: white;
width: 170px;
}
/*** All Videos box ***/
.allvideos {
background: no-repeat scroll center bottom #0b181a;
border: 1px solid #2d2d2d;
margin: 0 0 25px;
padding: 13px 15px 0;
}
.allvideos .wrapper {
margin: 0 auto -10px;
width: 270px;
}
.allvideos .header {
color: white;
font-family: oswald;
font-size: 20px;
margin-bottom: 14px;
text-align: center;
text-transform: uppercase;
}
.allvideos .item {
margin-bottom: 16px;
}
.allvideos .item:last-child {
margin-bottom: 6px;
}
.allvideos .small-video {
margin-right: 2px;
}
.allvideos figure {
margin: 0 ! important;
}
.allvideos figcaption {
text-align: center;
}
.allvideos .tabberlive {
margin: 0 !important;
}
.allvideos .tabbernav {
border: medium none !important;
padding: 0 !important;
text-align: center !important;
margin-right: 2px !important;
margin-bottom: 11px !important;
}
.allvideos .tabbernav li a {
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0) !important;
border: medium none !important;
color: #ffffff !important;
font-family: oswald !important;
font-size: 11px !important;
margin: 0 !important;
padding: 0 !important;
text-transform: uppercase !important;
}
.allvideos .tabbernav .tabberactive a {
text-decoration: underline !important;
}
.allvideos .tabbernav li a:hover {
text-decoration: underline !important;
}
.allvideos .tabbernav li:after {
content: " • " !important;
}
.allvideos .tabbernav li:last-child:after {
content: "" !important;
}
.allvideos .tabbertab {
border: medium none !important;
padding: 0 !important;
}
/*** All Walkthroughs box ***/
.allwalkthroughs {
background: no-repeat scroll center bottom #0b181a;
border: 1px solid #2d2d2d;
margin: 0 0 25px;
padding: 13px 15px 0;
}
.allwalkthroughs .wrapper {
margin: 0 auto -10px;
width: 270px;
}
.allwalkthroughs .header {
color: white;
font-family: oswald;
font-size: 20px;
margin-bottom: 15px;
text-align: center;
text-transform: uppercase;
}
.allwalkthroughs .category-main {
color: white;
font-family: oswald;
font-size: 17px;
margin-bottom: -4px;
margin-top: 11px;
text-transform: uppercase;
}
.allwalkthroughs .category {
color: white;
font-family: oswald;
font-size: 15px;
margin-left: 5px;
margin-top: 11px;
text-transform: uppercase;
}
.allwalkthroughs .listing {
margin: -1px 0 19px 30px;
}
.allwalkthroughs .tabberlive {
margin: 0 !important;
}
.allwalkthroughs .tabbernav {
border: medium none !important;
padding: 0 !important;
text-align: center !important;
margin-right: 2px !important;
margin-bottom: -3px !important;
}
.allwalkthroughs .tabbernav li a {
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0) !important;
border: medium none !important;
color: #ffffff !important;
font-family: oswald !important;
font-size: 11px !important;
margin: 0 !important;
padding: 0 !important;
text-transform: uppercase !important;
}
.allwalkthroughs .tabbernav .tabberactive a {
text-decoration: underline !important;
}
.allwalkthroughs .tabbernav li a:hover {
text-decoration: underline !important;
}
.allwalkthroughs .tabbernav li:after {
content: " • " !important;
}
.allwalkthroughs .tabbernav li:last-child:after {
content: "" !important;
}
.allwalkthroughs .tabbertab {
border: medium none !important;
padding: 0 !important;
}
.WDIEbanner {
background: url("https://images.wikia.nocookie.net/__cb20141024230148/civilization/images/4/49/SuperWalkthrough_BlogHeader_fluid.jpg") center top no-repeat;
height: 200px;
}
/* Community Choice Awards Voting */
.versusblog .versusitem {
margin-bottom: 15px;
position: relative;
}
.versusblog .versus {
left: -moz-calc(50% - 22px);
left: -webkit-calc(50% - 22px);
left: -o-calc(50% - 22px);
left: calc(50% - 22px);
position: absolute;
top: 154px;
}
.versusblog .ajax-poll {
border: medium none !important;
margin: 0 !important;
padding: 0 !important;
text-align: center;
}
.versusblog .ajax-poll .header {
font-size: 20px;
text-align: center;
}
.versusblog .ajax-poll .description {
display: none;
}
.versusblog .ajax-poll input[type="submit"] {
display: none;
}
.versusblog .ajax-poll .pollAnswer {
display: inline-block;
width: 120px;
}
.versusblog .ajax-poll .pollAnswerName {
padding: 0;
text-align: center;
}
.versusblog .ajax-poll .pollAnswerName a {
display: block;
margin: 0 auto;
}
.versusblog .ajax-poll .name {
font-size: 15px;
font-weight: bold;
margin: 0 auto 10px;
text-align: center;
width: 100px;
}
.versusblog .ajax-poll .challenger {
cursor: pointer;
height: 100px;
margin: 0 auto;
position: relative;
width: 100px;
z-index: 10;
}
.versusblog .ajax-poll .challenger img {
background: none repeat scroll 0% 0% #1d1f1f;
border: 1px solid #454646;
}
.versusblog .ajax-poll .active img, .versusblog .ajax-poll .challenger img:hover {
border: 2px solid #96D320;
margin-left: -1px;
margin-top: -1px;
}
.versusblog .ajax-poll .pollAnswerVotes {
box-shadow: 0 0 8px #4F6B17 inset;
font-size: 20px;
height: 25px;
margin: 10px 0 0 10px;
width: 100px;
}
.versusblog .ajax-poll .pollAnswerVotes span {
display: block;
left: 0;
position: relative;
text-align: center;
top: 2px;
}
.versusblog .ajax-poll .pollAnswerVotes div {
background: url("https://images.wikia.nocookie.net/gameshub/images/b/b3/JRPG_Battle_Bar_Background.png") repeat-x scroll 0 0 transparent;
border-right: medium none;
height: 25px;
position: absolute;
transition: width 1s ease 0s;
z-index: -1;
}
.versusblog .versus-footer {
background: none repeat scroll 0% 0% #000000;
height: 36px;
margin-bottom: 17px;
margin-top: 3px;
padding: 8px 10px;
width: 100%;
}
.versusblog .versus-footer .left {
float: left;
}
.versusblog .versus-footer .right {
float: right;
}
.versusblog .versus-footer .text {
display: inline-block;
font-weight: bold;
margin-right: 10px;
position: relative;
top: 1px;
}
.versusblog .versus-footer .preorder-row {
display: inline-block;
margin-right: 21px;
margin-top: 2px;
}
.versusblog .versus-footer .preorder-button {
display: inline-block;
margin-left: 10px;
}
.versusblog .versus-footer .preorder-button:first-child {
margin-left: 0;
}
.versusblog .versus-footer .preorder-button img {
display: inline-block;
height: 32px;
width: 63px;
}