Civilization Wiki
Register
Advertisement

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;
}
Advertisement