• Welcome to the Kancolle Wiki!
  • If you have any questions regarding site content, account registration, etc., please visit the KanColle Wiki Discord

Difference between revisions of "MediaWiki:Common.css"

From Kancolle Wiki
Jump to navigation Jump to search
(Maximum organization of CSS, whoever did the syntax for this should remember to DOUBLE CHECK THEIR CODE. Everything should now function correctly according to the stylesheet and not break randomly)
 
(242 intermediate revisions by 7 users not shown)
Line 1: Line 1:
−
/***** CSS placed here will be applied to all skins on the entire site. *****/
+
/*****************************************************************************************/
−
/*Vertical Alignment for MainPage and more*/
+
/*** This page is the central stylesheet for the entire wiki. Any additions or changes ***/
−
#mainpage {
+
/*** that are made here will be reflected globally around the website. Do NOT          ***/
−
width: 100%;
+
/*** modify unless you know exactly what you are doing. Consult me if you have        ***/
−
padding: 1px 3px 1px 3px;
+
/*** something in mind but don't know how to make it happen. You will only end up      ***/
−
box-sizing: border-box;
+
/*** breaking things already in place.                                                 ***/
−
-webkit-box-sizing: border-box;
+
/*** - Gensui Hime                                                                    ***/
−
-moz-box-sizing: border-box;
+
/*****************************************************************************************/
 +
 
 +
/* CSS sheet for fp.html*/
 +
 
 +
/* Separate from Common.CSS in order to make changes swift and easy? Debatable */
 +
/*Primary Container*/
 +
#widgetcontainer{
 +
line-height:1.2 !important; /*MediaWiki resizes line height, destroying placements.*/
 +
max-width:1600px;
 +
margin-left:auto;
 +
margin-right:auto; /*Mediawiki max space for 1080p is some 1600px*/
 +
min-width:710px;
 +
padding-left:18px;
 +
/*height:918px;*/
 +
margin-bottom:2%;
 
}
 
}
  
−
#mainpage * {
+
/*Column Settings*/
−
box-sizing: border-box;
+
.rightcol{
−
-webkit-box-sizing: border-box;
+
width:auto;
−
-moz-box-sizing: border-box;
+
margin-right:4%;
 +
margin-left:4%;
 +
float:left;
 +
height:auto;
 +
font-family: Arial, Helvetica, sans-serif;
 
}
 
}
−
#mp-leftcolumn {
+
.leftcol{
 +
width:710px;
 
float:left;
 
float:left;
−
width:450px;
 
−
margin-right:0.4%;
 
 
 
 +
margin-left:4%;
 +
margin-bottom:1%;
 +
position:relative;
 +
}
 +
/* Misc Icons */
 +
#iconcluster {
 +
float:right;
 +
width:710px;
 +
height:70px;
 +
margin-top:14.4px;
 +
text-align: justify;
 +
    -ms-text-justify: distribute-all-lines;
 +
    text-justify: distribute-all-lines;
 +
margin-bottom:1%;
 +
}
 +
.portalicon {
 +
height:70px;
 +
width:160px;
 +
    vertical-align: top;
 +
    display: inline-block;
 +
    *display: inline;
 +
    zoom: 1;
 +
text-align:center;
 +
font-family: Arial, Helvetica, sans-serif;
 +
color:black;
 +
background-color:white;
 +
border-radius:10px;
 +
margin-bottom:1%;
 +
 +
-webkit-transition: all 0.2s ease-in-out;
 +
    -moz-transition: all 0.2s ease-in-out;
 +
    -o-transition: all 0.2s ease-in-out;
 +
    transition: all 0.2s ease-in-out;
 +
}
 +
.portalicon:hover {
 +
color:white;
 +
/*font-weight:bold;*/
 +
text-shadow:1px 1px 15px black;
 +
background-color:#3090c7;
 +
}
 +
.stretch {
 +
    width: 100%;
 +
    display: inline-block;
 +
    font-size: 0;
 +
    line-height: 0
 +
}
 +
#clustertitle {
 +
width:100%;
 +
background-color:#3090c7;
 +
border-radius:8px;
 +
text-align:center;
 +
padding-top:2px;
 +
padding-bottom:2px;
 +
font-family: Arial, Helvetica, sans-serif;
 +
font-weight:bold;
 +
color:white;
 +
margin-bottom:14.4px;
 +
}
 +
/*More Misc Buttons, not a subcategory of quick links*/
 +
#infodiv {
 +
margin-top:2%;
 +
width:710px;
 +
height:200px;
 +
background:transparent url(frontpage_files/infobarbg.png) no-repeat;
 +
}
 +
#infoicons {
 +
padding-top:10px;
 +
padding-left:40px;
 +
padding-right:40px;
 +
position:relative;
 +
top:30px;
 +
height:124px;
 +
width:auto;
 +
}
 +
.questicon {
 +
float:left;
 +
width:100px;
 +
height:100px;
 +
border-radius:10px;
 +
margin-right:32px;
 +
background-color:#005e95;
 +
}
 +
.questicon:hover {
 +
background-color:#2886bd;
 +
}
 +
.infoicon {
 +
float:left;
 +
width:100px;
 +
height:100px;
 +
border-radius:10px;
 +
margin-right:32px;
 +
position: relative;
 +
    display: inline-block;
 +
background-color:#005e95;
 +
}
 +
.listdrop {
 +
display: none;
 +
    position: absolute;
 +
bottom:100px;
 +
    background-color: #555;
 +
    width: 100px;
 +
    box-shadow: 0px -8px 16px 0px rgba(0,0,0,0.2);
 +
    z-index: 1;
 +
font-family: Arial, Helvetica, sans-serif;
 +
text-align:center;
 +
font-size:14px;
 +
 +
border-top-left-radius:10px;
 +
border-top-right-radius:10px;
 +
overflow:hidden;
 +
}
 +
.listdrop .selbox {
 +
width:100px;
 +
color:white;
 +
background-color:#2886bd;
 +
padding-top:10px;
 +
padding-bottom:10px;
 +
 +
-webkit-transition: all 0.2s ease-in-out;
 +
    -moz-transition: all 0.2s ease-in-out;
 +
    -o-transition: all 0.2s ease-in-out;
 +
    transition: all 0.2s ease-in-out;
 +
}
 +
.listdrop .selbox:hover {
 +
color:black;
 +
background-color:#f9f9f9;
 +
}
 +
.infoicon:hover {
 +
background-color:#2886bd;
 +
 +
border-top-left-radius:0px;
 +
border-top-right-radius:0px;
 +
 +
}
 +
.infoicon:hover .listdrop {
 +
background-color:#2886bd;
 +
display:block;
 +
}
 +
.infotxt {
 +
padding-top:3px;
 +
font-family: Arial, Helvetica, sans-serif;
 +
color:white;
 +
text-align:center;
 +
align:middle;
 +
width:auto;
 +
font-size:14px;
 +
}
 +
/*Icon Triumvirate Styling*/
 +
#iconcontainer{
 +
background:url(frontpage_files/mainboxbg.jpg) no-repeat;
 +
width:710px;
 +
height:300px;
 +
overflow:hidden;
 +
border:0px solid #0099ff;
 +
border-radius:8px;
 +
overflow:hidden;
 +
}
 +
.sortext{
 +
/*font-weight:bold;*/
 +
color:white;
 +
padding:4px 4px 4px 4px;
 +
font-size:20px;
 +
font-family: Arial, Helvetica, sans-serif;
 +
text-decoration:none;
 +
-webkit-transition: all 0.2s ease-in-out;
 +
    -moz-transition: all 0.2s ease-in-out;
 +
    -o-transition: all 0.2s ease-in-out;
 +
    transition: all 0.2s ease-in-out;
 +
}
 +
.sortext:hover{
 +
text-shadow:0px 0px 10px #D50000;
 +
}
 +
.pvptext{
 +
color:white;
 +
padding:4px 4px 4px 4px;
 +
font-size:20px;
 +
font-family: Arial, Helvetica, sans-serif;
 +
text-decoration:none;
 +
-webkit-transition: all 0.2s ease-in-out;
 +
    -moz-transition: all 0.2s ease-in-out;
 +
    -o-transition: all 0.2s ease-in-out;
 +
    transition: all 0.2s ease-in-out;
 +
}
 +
.pvptext:hover{
 +
text-shadow:0px 0px 10px #03D500;
 +
}
 +
.exptext{
 +
color:white;
 +
padding:4px 4px 4px 4px;
 +
font-size:20px;
 +
font-family: Arial, Helvetica, sans-serif;
 +
text-decoration:none;
 +
-webkit-transition: all 0.2s ease-in-out;
 +
    -moz-transition: all 0.2s ease-in-out;
 +
    -o-transition: all 0.2s ease-in-out;
 +
    transition: all 0.2s ease-in-out;
 +
}
 +
.exptext:hover{
 +
text-shadow:0px 0px 10px #00B1D5;
 +
}
 +
#sortie{
 +
background:transparent url(frontpage_files/sortiev2.png) no-repeat;
 +
}
 +
.sortie{
 +
padding-right:10px;
 +
float:left;
 +
width:217px;
 +
height:247px;
 +
display:block;
 +
opacity: 0.0;
 +
    filter: alpha(opacity=0); /* For IE8 and earlier */
 +
    -webkit-transition: 0.2s ease-in-out;
 +
    -moz-transition: 0.2s ease-in-out;
 +
    -o-transition: 0.2s ease-in-out;
 +
    transition: 0.2s ease-in-out;
 +
}
 +
.sortie:hover{
 +
opacity: 1.0;
 +
    filter: alpha(opacity=100); /* For IE8 and earlier */
 +
}
 +
#pvp{
 +
background:transparent url(frontpage_files/pvpv2.png) no-repeat;
 +
}
 +
.pvp{
 +
padding-right:10px;
 +
float:left;
 +
width:217px;
 +
height:247px;
 +
display:block;
 +
opacity: 0.0;
 +
-webkit-transition: 0.2s ease-in-out;
 +
    -moz-transition: 0.2s ease-in-out;
 +
    -o-transition: 0.2s ease-in-out;
 +
    transition: 0.2s ease-in-out;
 +
}
 +
.pvp:hover{
 +
opacity: 1.0;
 +
    filter: alpha(opacity=100); /* For IE8 and earlier */
 
}
 
}
  
−
#mp-rightcolumn {
+
#exped{
−
width:auto;
+
background:transparent url(frontpage_files/expedv2.png) no-repeat;
 +
}
 +
.exped{
 +
padding-right:10px;
 +
float:left;
 +
width:217px;
 +
height:247px;
 +
 +
display:block;
 +
opacity: 0.0;
 +
-webkit-transition: 0.2s ease-in-out;
 +
    -moz-transition: 0.2s ease-in-out;
 +
    -o-transition: 0.2s ease-in-out;
 +
}
 +
.exped:hover{
 +
opacity: 1.0;
 +
    filter: alpha(opacity=100); /* For IE8 and earlier */
 +
}
 +
/*Link Style Reset*/
 +
a:link {
 +
text-decoration:none;
 +
}
 +
a:hover {
 +
text-decoration:none;
 +
}
 +
/*Event Banner*/
 +
/*When there is no event, replace with noevban.png*/
 +
.eventbanner{
 +
 +
width:710px;
 +
height:93px;
 +
float:left;
 +
border-bottom-left-radius:8px;
 +
border-bottom-right-radius:8px;
 +
 +
display:block;
 +
opacity: 0.0;
 +
    filter: alpha(opacity=0); /* For IE8 and earlier */
 +
    -webkit-transition: 0.4s ease-in-out;
 +
    -moz-transition: 0.4s ease-in-out;
 +
    -o-transition: 0.4s ease-in-out;
 +
    transition: 0.4s ease-in-out;
 +
}
 +
.eventbanner:hover{
 +
opacity: 1.0;
 +
    filter: alpha(opacity=100); /* For IE8 and earlier */
 +
border-bottom-left-radius:8px;
 +
border-bottom-right-radius:8px;
 +
}
 +
/* Previous event image: /w/images/b/bf/Summer_2023_Event_Banner_EO.png */
 +
/*      No event image: /w/frontpage_files/noevban.png                    */
 +
/* Incoming event image: /w/images/3/32/Event_Banner_Placeholder_1.png    */
 +
#eventbanner{
 +
text-align:center;
 +
border:0px solid #a7d7f9;
 +
border-bottom-left-radius:8px;
 +
border-bottom-right-radius:8px;
 +
background:url(/w/frontpage_files/noevban.png ) no-repeat center center;
 
overflow:hidden;
 
overflow:hidden;
−
margin-left:0.1%;
+
width:710px;
 +
height:93px;
 +
background-size: contain;
 
}
 
}
−
#coretitle {
+
#eventwrap{
 +
border:0px solid #b6b6b4;
 +
border-top:0px;
 +
width:710px;
 +
border-bottom-left-radius:12px;
 +
border-bottom-right-radius:4px;
 +
margin-bottom:2%;
 +
}
 +
#eventinfo{
 
text-align:center;
 
text-align:center;
−
border:1px solid lightgrey;
+
border-top-left-radius:8px;
 +
border-top-right-radius:8px;
 +
border:0px solid #b6b6b4;
 +
/*border-bottom:0px;*/
 +
background:#3090c7;
 +
font-weight:bold;
 +
color:white;
 +
padding:4px 4px 4px 4px;
 +
font-size:20px;
 +
font-family: Arial, Helvetica, sans-serif;
 +
}
 +
/*World List*/
 +
#worldicons{
 +
width:710px;
 +
border:0px solid #3090c7;
 +
margin-top:2%;
 +
text-align:center;
 +
height:128px;
 +
border-top-right-radius:12px;
 +
border-bottom-right-radius:12px;
 +
background:transparent url(frontpage_files/worldv3.png) no-repeat;
 +
 +
font-weight:bold;
 +
color:black;
 +
font-family: Arial, Helvetica, sans-serif;
 +
text-decoration:none;
 +
 +
margin-bottom:2%;
 +
}
 +
.wor1{
 +
margin:auto;
 +
background: transparent url(frontpage_files/w1v2.png) no-repeat;
 +
background-position:0 0;
 +
display:block;
 +
width:70px;
 +
height:70px;
 +
}
 +
 
 +
.wor1:hover{
 +
background-position:0 100%;
 +
}
 +
.wor2{
 +
margin:auto;
 +
background: transparent url(frontpage_files/w2v2.png) no-repeat;
 +
background-position:0 0;
 +
display:block;
 +
width:70px;
 +
height:70px;
 +
}
 +
 
 +
.wor2:hover{
 +
background-position:0 100%;
 +
}
 +
.wor3{
 +
margin:auto;
 +
background: transparent url(frontpage_files/w3v2.png) no-repeat;
 +
background-position:0 0;
 +
display:block;
 +
width:70px;
 +
height:70px;
 +
}
 +
 
 +
.wor3:hover{
 +
background-position:0 100%;
 +
}
 +
.wor7{
 +
margin:auto;
 +
background: transparent url(frontpage_files/w7.png) no-repeat;
 +
background-position:0 0;
 +
display:block;
 +
width:70px;
 +
height:70px;
 +
}
 +
 
 +
.wor7:hover{
 +
background-position:0 100%;
 +
}
 +
.wor4{
 +
margin:auto;
 +
background: transparent url(frontpage_files/w4v2.png) no-repeat;
 +
background-position:0 0;
 +
display:block;
 +
width:70px;
 +
height:70px;
 +
}
 +
 
 +
.wor4:hover{
 +
background-position:0 100%;
 +
}
 +
.wor5{
 +
margin:auto;
 +
background: transparent url(frontpage_files/w5v2.png) no-repeat;
 +
background-position:0 0;
 +
display:block;
 +
width:70px;
 +
height:70px;
 +
}
 +
 
 +
.wor5:hover{
 +
background-position:0 100%;
 +
}
 +
.wor6{
 +
margin:auto;
 +
background: transparent url(frontpage_files/w6v2.png) no-repeat;
 +
background-position:0 0;
 +
display:block;
 +
width:70px;
 +
height:70px;
 +
}
 +
 
 +
.wor6:hover{
 +
background-position:0 100%;
 +
}
 +
.wortext{
 +
font-size:16px;
 +
/*background-color:#3090c7;
 +
color:#3090c7;
 +
text-decoration:none;*/
 +
/*text-shadow:0px 0px 8px #5DADE2;*/
 +
color:black;
 +
border-radius:6px;
 +
padding:1px 4px 1px 4px;
 +
-webkit-transition: all 0.2s ease-in-out;
 +
    -moz-transition: all 0.2s ease-in-out;
 +
    -o-transition: all 0.2s ease-in-out;
 +
    transition: all 0.2s ease-in-out;
 +
 +
}
 +
 
 +
.wortext:hover{
 +
color:black;
 +
/*text-shadow:0px 0px 16px #2E86C1;*/
 +
 +
}
 +
 
 +
#worlds{
 +
padding-top:3px;
 +
margin:auto;
 +
width:101px;
 +
float:left;
 +
}
 +
 
 +
.worname{
 +
/*text-shadow:0px 0px 8px #5DADE2;*/
 +
color:black;
 +
font-size:13px;
 +
-webkit-transition: all 0.2s ease-in-out;
 +
    -moz-transition: all 0.2s ease-in-out;
 +
    -o-transition: all 0.2s ease-in-out;
 +
    transition: all 0.2s ease-in-out;
 +
}
 +
.worname:hover{
 +
color:black;
 +
text-shadow:0px 0px 10px #FFB813;
 +
}
 +
/* Twitter and Seasonals */
 +
.twidget{
 +
border:0px solid white;
 +
border-radius:4px;
 +
background-color:white;
 +
height:368px;
 +
width:48%;
 +
float:left;
 +
}
 +
.seasonalbox {
 +
width:100%;
 +
height:200px;
 +
background: url(frontpage_files/seasonalbg.jpg) no-repeat;
 +
margin-right:0px;
 
border-radius:8px;
 
border-radius:8px;
−
background-color:#E9F3FE;
+
border-top-left-radius:0px;
 +
border-top-right-radius:0px;
 +
}
 +
.seasoncont {
 +
padding: 4px 4px 4px 4px;
 +
width:auto;
 +
height:auto;
 +
align:middle;
 +
text-align:center;
 +
}
 +
.seasonicon{
 +
margin-left:auto;
 +
margin-right:auto;
 +
width:110px;
 +
height:110px;
 +
border-radius:55px;
 +
background-color:#4EAEE5;
 +
 
 +
-webkit-transition: 0.2s ease-in-out;
 +
    -moz-transition: 0.2s ease-in-out;
 +
    -o-transition: 0.2s ease-in-out;
 +
    transition: 0.2s ease-in-out;
 +
}
 +
.seasonicon:hover{
 +
background-color:#6cccff;
 +
}
 +
/*FactoryBox Div*/
 +
.factorybox{
 +
border-radius:8px;
 +
width:710px;
 +
height:170px;
 +
background: url(frontpage_files/iconboxbgv2.png) no-repeat;
 +
font-family: Arial, Helvetica, sans-serif;
 +
margin-top:2%;
 +
}
 +
 
 +
/* Factorybox Individual Containers - Icon+Text */
 +
.constbox{
 +
width:176px;
 +
position:relative;
 +
top:1px;
 +
left:50px;
 +
margin-right:0px;
 +
}
 +
.develbox{
 +
width:176px;
 +
position:relative;
 +
top:-94px;
 +
left:276px;
 +
}
 +
.kaisyubox{
 +
width:171px;
 +
position:relative;
 +
top:-90px;
 +
left:53px;
 +
}
 +
.kaisoubox{
 +
width:171px;
 +
position:relative;
 +
top:-159px;
 +
left:279px;
 +
}
 +
.revampbox{
 +
width:155px;
 +
position:relative;
 +
bottom:320px;
 +
left:522px;
 +
}
 +
/* Construction Icon FX */
 +
#const{
 +
background: transparent url(frontpage_files/constv2.png) no-repeat center center;
 +
}
 +
.const{
 +
width:176px;
 +
height:70px;
 +
display:block;
 +
margin-top:8px;
 +
margin-bottom:-4px;
 +
opacity: 0.0;
 +
    filter: alpha(opacity=0); /* For IE8 and earlier */
 +
    -webkit-transition: 0.2s ease-in-out;
 +
    -moz-transition: 0.2s ease-in-out;
 +
    -o-transition: 0.2s ease-in-out;
 +
    transition: 0.2s ease-in-out;
 +
}
 +
.const:hover{
 +
opacity: 1.0;
 +
    filter: alpha(opacity=100); /* For IE8 and earlier */
 +
}
 +
/* Development Icon FX */
 +
#devel{
 +
background: transparent url(frontpage_files/develv2.png) no-repeat center center;
 +
}
 +
 
 +
.devel{
 +
width:176px;
 +
height:70px;
 +
display:block;
 +
margin-top:8px;
 +
margin-bottom:-4px;
 +
opacity: 0.0;
 +
    filter: alpha(opacity=0); /* For IE8 and earlier */
 +
    -webkit-transition: 0.2s ease-in-out;
 +
    -moz-transition: 0.2s ease-in-out;
 +
    -o-transition: 0.2s ease-in-out;
 +
    transition: 0.2s ease-in-out;
 +
}
 +
.devel:hover{
 +
opacity: 1.0;
 +
    filter: alpha(opacity=100); /* For IE8 and earlier */
 
}
 
}
−
#tophead {
+
/*More FX*/
−
border:double white;
+
#kaisyu{
−
border-radius:14px;
+
background: transparent url(frontpage_files/kaisyu.png) no-repeat;
−
border-width:4px;
 
−
padding: 6px 6px 6px 6px;
 
−
background-color:#E9F3FE;
 
−
margin-bottom:0.3%;
 
−
min-height:150px;
 
−
min-width:160px;
 
 
}
 
}
−
#logo {
+
.kaisyu{
 +
display:block;
 +
width:171px;
 +
height:47px;
 +
margin-left:auto;
 +
margin-right:auto;
 +
opacity: 0.0;
 +
    filter: alpha(opacity=0); /* For IE8 and earlier */
 +
    -webkit-transition: 0.2s ease-in-out;
 +
    -moz-transition: 0.2s ease-in-out;
 +
    -o-transition: 0.2s ease-in-out;
 +
    transition: 0.2s ease-in-out;
 +
}
 +
.kaisyu:hover{
 +
opacity: 1.0;
 +
    filter: alpha(opacity=100); /* For IE8 and earlier */
 +
}
 +
/*More FX*/
 +
#kaisou{
 +
background: transparent url(frontpage_files/kaisouv2.png) no-repeat;
 +
}
 +
.kaisou{
 +
display:block;
 +
width:171px;
 +
height:47px;
 +
margin-left:auto;
 +
margin-right:auto;
 +
opacity: 0.0;
 +
    filter: alpha(opacity=0); /* For IE8 and earlier */
 +
    -webkit-transition: 0.2s ease-in-out;
 +
    -moz-transition: 0.2s ease-in-out;
 +
    -o-transition: 0.2s ease-in-out;
 +
    transition: 0.2s ease-in-out;
 +
}
 +
.kaisou:hover{
 +
opacity: 1.0;
 +
    filter: alpha(opacity=100); /* For IE8 and earlier */
 +
}
 +
/*More FX*/
 +
#revamp{
 +
background:transparent url(frontpage_files/revampv2.png) no-repeat;
 +
}
 +
.revamp{
 +
margin-top:8px;
 +
margin-bottom:8px;
 +
background:transparent url(frontpage_files/revamp.png) no-repeat;
 +
display:block;
 +
width:155px;
 +
height:95px;
 +
margin-left:auto;
 +
margin-right:auto;
 +
opacity: 0.0;
 +
    filter: alpha(opacity=0); /* For IE8 and earlier */
 +
    -webkit-transition: 0.2s ease-in-out;
 +
    -moz-transition: 0.2s ease-in-out;
 +
    -o-transition: 0.2s ease-in-out;
 +
    transition: 0.2s ease-in-out;
 +
}
 +
.revamp:hover{
 +
opacity: 1.0;
 +
    filter: alpha(opacity=100); /* For IE8 and earlier */
 +
}
 +
 
 +
/* OBSOLETE
 +
.iconname{
 +
font-size:18px;
 +
text-align:center;
 +
color:black;
 +
margin-left:auto;
 +
margin-right:auto;
 +
}
 +
*/
 +
/*Factorybox Names Alignment*/
 +
.constname{
 +
font-size:18px;
 +
text-align:center;
 +
color:white;
 +
margin-left:auto;
 +
margin-right:auto;
 +
 +
border-radius:6px;
 +
-webkit-transition: all 0.2s ease-in-out;
 +
    -moz-transition: all 0.2s ease-in-out;
 +
    -o-transition: all 0.2s ease-in-out;
 +
    transition: all 0.2s ease-in-out;
 +
}
 +
 
 +
.develname{
 +
font-size:15px;
 +
text-align:center;
 +
color:white;
 +
padding-top:2px;
 +
margin-left:auto;
 +
margin-right:auto;
 +
height:20px;
 +
border-radius:6px;
 +
-webkit-transition: all 0.2s ease-in-out;
 +
    -moz-transition: all 0.2s ease-in-out;
 +
    -o-transition: all 0.2s ease-in-out;
 +
    transition: all 0.2s ease-in-out;
 +
}
 +
.kaisyuname{
 +
font-size:18px;
 +
text-align:center;
 +
color:white;
 +
margin-left:auto;
 +
margin-right:auto;
 +
margin-top:2px;
 +
 +
border-radius:6px;
 +
-webkit-transition: all 0.2s ease-in-out;
 +
    -moz-transition: all 0.2s ease-in-out;
 +
    -o-transition: all 0.2s ease-in-out;
 +
    transition: all 0.2s ease-in-out;
 +
}
 +
.kaisouname{
 +
font-size:18px;
 +
text-align:center;
 +
color:white;
 +
 +
margin-left:auto;
 +
margin-right:auto;
 +
margin-top:2px;
 +
 +
border-radius:6px;
 +
-webkit-transition: all 0.2s ease-in-out;
 +
    -moz-transition: all 0.2s ease-in-out;
 +
    -o-transition: all 0.2s ease-in-out;
 +
    transition: all 0.2s ease-in-out;
 +
}
 +
.revampname{
 +
font-size:15px;
 +
text-align:center;
 +
color:white;
 +
border-radius:6px;
 +
-webkit-transition: all 0.2s ease-in-out;
 +
    -moz-transition: all 0.2s ease-in-out;
 +
    -o-transition: all 0.2s ease-in-out;
 +
    transition: all 0.2s ease-in-out;
 +
}
 +
/*Prevent visited links from turning blue*/
 +
.constname:visited{
 +
text-decoration:none;
 +
color:white;
 +
}
 +
.develname:visited{
 +
text-decoration:none;
 +
color:white;
 +
}
 +
.kaisyuname:visited{
 +
text-decoration:none;
 +
color:white;
 +
}
 +
.kaisouname:visited{
 +
text-decoration:none;
 +
color:white;
 +
}
 +
.revampname:visited{
 +
text-decoration:none;
 +
color:white;
 +
}
 +
/*Hover FX - MUST be placed AFTER .visited*/
 +
.constname:hover{
 +
background-color:#BB2F2F;
 +
text-shadow:2px 2px 10px black;
 +
}
 +
.develname:hover{
 +
background-color:#3EBB2F;
 +
text-shadow:2px 2px 10px black;
 +
}
 +
.kaisouname:hover{
 +
background-color:#2FA6BB;
 +
text-shadow:2px 2px 10px black;
 +
}
 +
.kaisyuname:hover{
 +
background-color:#2FA6BB;
 +
text-shadow:2px 2px 10px black;
 +
}
 +
.revampname:hover{
 +
background-color:#39ADF0;
 +
text-shadow:2px 2px 10px black;
 +
}
 +
/*Icon Platform - Not in use*/
 +
.iconplat{
 +
background:transparent url(frontpage_files/iconplat.png) no-repeat;
 +
display:block;
 +
width:182px;
 +
height:10px;
 +
position:relative;
 +
left:0px;
 +
z-index:1000;
 +
}
 +
/*Wiki Description*/
 +
#wikidesc{
 +
border-radius:8px;
 +
border-top-left-radius:16px;
 +
width:auto;
 +
max-width:710px;
 +
height:auto;
 +
background-color:#3090c7;
 +
min-height:103px;
 +
margin-bottom:14.4px;
 +
}
 +
.craneicon{
 
float:left;
 
float:left;
−
width:150px;
+
width:101px;
 +
height:87px;
 +
align:left;
 +
border:1px solid #333;
 +
border-radius:18px;
 +
overflow:hidden;
 +
margin-right:8px;
 
}
 
}
−
#kcheader {
+
.desctext{
 +
height:auto;
 +
margin-left:auto;
 +
margin-right:auto;
 +
font-family: Arial, Helvetica, sans-serif;
 +
color:white;
 +
}
 +
#descbox{
 +
padding:10px 8px 10px 8px;
 +
}
 +
/*JP lang*/
 +
#nihontext{
 +
font-family: Yu Gothic, 遊ゴシック, Meiryo, メイリオ, Serif !important;
 +
}
 +
/*World div Addon*/
 +
.worldside{
 +
background:transparent url(frontpage_files/worldsidev2.png) no-repeat;
 +
width:26px;
 +
height:128px;
 +
position:absolute;
 +
left:-21px;
 +
}
 +
/*Update Box*/
 +
#updateheader{
 +
padding-top:5px;
 +
padding-bottom:5px;
 +
text-align:center;
 
width:auto;
 
width:auto;
−
overflow: scroll;
+
height:auto;
−
height:150px;
+
background-color:#3090c7;
−
overflow-x:hidden;
+
border-top-right-radius:8px;
−
scrollbar-base-color:#E9F3FE;
+
border-top-left-radius:8px;
 +
font-family: Arial, Helvetica, sans-serif;
 +
color:white;
 +
font-weight:bold;
 +
width:100%;
 +
}
 +
.updatebox{
 +
border-radius:8px;
 +
border-bottom-right-radius:8px;
 +
border-top-left-radius:8px;
 +
background: url(frontpage_files/updatebg.jpg) no-repeat;
 +
text-align:center;
 +
width:100%;
 +
height:154px;
 +
font-family: Arial, Helvetica, sans-serif;
 +
opacity:1;
 +
margin-bottom:14.203px;
 +
}
 +
.updatecontainer {
 +
float:left;
 +
}
 +
#uptextbox {
 +
margin-top:13px;
 +
}
 +
.uptext{
 +
color:white;
 +
text-shadow:0px 0px 16px #0071e6;
 +
padding:2px 2px 2px 2px;
 +
 +
-webkit-transition: all 0.2s ease-in-out;
 +
    -moz-transition: all 0.2s ease-in-out;
 +
    -o-transition: all 0.2s ease-in-out;
 +
    transition: all 0.2s ease-in-out;
 +
}
 +
.uptext:visited{
 +
text-decoration:none;
 +
color:white;
 +
}
 +
.uptext:hover{
 +
color:#80bfff;
 +
}
 +
 
 +
/*@media headers specified for front page layout modulation*/
 +
 
 +
/* Add 242px to whatever @media header is defined for use with MW */
 +
@media screen and (min-width:0px) {
 +
html {
 +
min-width:983px;
 +
}
 +
.rightcol, .leftcol {
 +
 +
width:710px;
 +
margin-left:auto;
 +
margin-right:auto;
 +
}
 +
#widgetcontainer {
 +
max-width:710px;
 +
padding:0px 0px 0px 0px;
 +
height:1800px;
 +
}
 +
.updatecontainer {
 +
width:48%;
 +
margin-right:4%;
 +
}
 +
.seasoncont {
 +
padding-top:30px;
 +
}
 +
}
 +
@media screen and (min-width:1259px) {
 +
.rightcol {
 +
width:260px;
 +
margin-left:4%;
 +
}
 +
#widgetcontainer {
 +
max-width:1014px;
 +
height:1300px;
 +
}
 +
.updatecontainer {
 +
width:100%;
 +
}
 +
#iconcluster {
 +
float:left;
 +
position:relative;
 +
top:-50px;
 +
}
 +
.seasoncont {
 +
padding-top:30px;
 +
}
 +
#uptextbox {
 +
margin-top:33px;
 +
}
 +
.updatebox {
 +
height: 200px;
 +
}
 +
.seasonalbox {
 +
height: 200px;
 +
}
 +
}
 +
@media screen and (min-width:1350px) {
 +
.rightcol {
 +
width:350px;
 +
}
 +
#widgetcontainer {
 +
max-width:1106px;
 +
height:1300px;
 +
}
 +
.seasonalbox {
 +
height: 200px;
 +
}
 +
#iconcluster {
 +
position:relative;
 +
top:-25px;
 +
width:710px;
 +
float:left;
 +
}
 +
.seasoncont {
 +
padding-top:30px;
 +
}
 +
#uptextbox {
 +
margin-top:33px;
 +
}
 +
.updatebox {
 +
height: 200px;
 +
}
 
}
 
}
−
/* Language specific CSS */
+
@media screen and (min-width:1660px) {
−
:lang(zh) {
+
.rightcol {
−
font-family: Microsoft Yahei, 微软雅黑, Serif;
+
width:650px;
 +
}
 +
#widgetcontainer {
 +
max-width:1418px;
 +
height:950px;
 +
}
 +
.updatecontainer {
 +
width:48%; /*right margin 4%*/
 +
margin-right:4%;
 +
}
 +
.seasonalbox {
 +
height: 200px;
 +
}
 +
.updatebox {
 +
height: 200px;
 +
}
 +
#uptextbox {
 +
margin-top:33px;
 +
}
 +
.seasoncont {
 +
padding-top:30px;
 +
}
 +
#iconcluster {
 +
width:650px;
 +
float:right;
 +
top:0px;
 +
}
 
}
 
}
−
+
 
−
:lang(zh-cn) {
+
 
 +
/**************************************************************/
 +
/* Global Language Stylesheet */
 +
/* Set fonts for lang type */
 +
:lang(zh), :lang(zh-cn) { /*All Chinese languages?*/
 
font-family: Microsoft Yahei, 微软雅黑, Serif;
 
font-family: Microsoft Yahei, 微软雅黑, Serif;
 
}
 
}
 
   
 
   
−
:lang(zh-tw) {
+
:lang(zh-tw) { /*Taiwanese*/
 
font-family: Microsoft Jhenghei, 微軟正黑體, Serif;
 
font-family: Microsoft Jhenghei, 微軟正黑體, Serif;
 
}
 
}
 
   
 
   
−
:lang(ja) {
+
:lang(ja) { /*Japanese*/
 
font-family: Yu Gothic, 遊ゴシック, Meiryo, メイリオ, Serif;
 
font-family: Yu Gothic, 遊ゴシック, Meiryo, メイリオ, Serif;
 
}
 
}
−
/*Global Button Settings*/
+
 
 +
/*************************************/
 +
/* Button Stylesheet */
 +
/*Button Settings*/
 
.globalbutton {
 
.globalbutton {
 
-webkit-border-radius: 13;
 
-webkit-border-radius: 13;
Line 83: Line 1,067:
 
text-align:center;
 
text-align:center;
 
}
 
}
−
 
+
.globalbutton:hover { /*When mouse hover*/
−
.globalbutton:hover {
 
 
background: #2b9ce3;
 
background: #2b9ce3;
 
text-decoration: none;
 
text-decoration: none;
 
}
 
}
−
.globalbutton:focus {
+
.globalbutton:active { /*When mouse press*/
 +
background: #1d90d8;
 +
text-decoration: none;
 +
}
 +
.globalbutton:focus { /*Removes blue outline*/
 
outline:0 !important;
 
outline:0 !important;
 
}
 
}
  
−
/*Remove this after all instances of Globalbutton are added*/
+
/************************************************/
−
.wikia-menu-button {
+
/* Scrolling Text CSS - Combined with Common.js */
−
    button:focus {outline:0;}
 
−
    border-style: double;
 
−
    border-radius:9px;
 
−
    border-width: 4px;
 
−
    border-color: white;
 
−
    background-color:#E9F3FE;
 
−
    max-width:300px;
 
−
    text-align:center;
 
−
    font-weight:bold;
 
−
}
 
−
 
 
−
/* Sitenotice AutoScroll CSS */
 
 
#scrollDiv{
 
#scrollDiv{
 
width: 100%;
 
width: 100%;
Line 118: Line 1,093:
 
}
 
}
  
 +
/************************************************/
 +
/* SPOILER ALERT */
 +
.spoiler {
 +
background-color: black;
 +
color: #000000;
 +
}
 +
 +
.spoiler:hover {
 +
background-color: black;
 +
color: #ffffff;
 +
}
 +
 +
/************************************************/
 +
/* Centered Table (instead of <table align="center">) */
 +
.centertable {
 +
margin-left: auto;
 +
margin-right: auto;
 +
}
 +
 +
/******************************/
 +
/*    Everything Else        */
 +
/******************************/
 +
/*Construction Table Wrap*/
 +
#constable { /*box*/
 +
width: 100%;
 +
padding: 1px 3px 1px 3px;
 +
box-sizing: border-box; /*Resizing*/
 +
-webkit-box-sizing: border-box;
 +
-moz-box-sizing: border-box;
 +
}
 
/* For template documentation */
 
/* For template documentation */
 
.template-documentation {
 
.template-documentation {
Line 387: Line 1,392:
 
border: 2px solid #bba;      /* Gray-gold */
 
border: 2px solid #bba;      /* Gray-gold */
 
}
 
}
 +
 +
/* Allow limiting of which header levels are shown in a TOC;
 +
  <div class="toclimit-3">, for instance, will limit to
 +
  showing ==headings== and ===headings=== but no further
 +
  (as long as there are no =headings= on the page, which
 +
  there shouldn't be according to the MoS). */
 +
.toclimit-2 .toclevel-1 ul,
 +
.toclimit-3 .toclevel-2 ul,
 +
.toclimit-4 .toclevel-3 ul,
 +
.toclimit-5 .toclevel-4 ul,
 +
.toclimit-6 .toclevel-5 ul,
 +
.toclimit-7 .toclevel-6 ul {
 +
    display: none;
 +
}
 +
 +
.thisisafuckingborder * {
 +
    border-spacing: 0px;
 +
    border-collapse: separate; 
 +
    border-radius: 5px;
 +
    border:1px solid black;
 +
    margin:15px;
 +
    font-family: sans-serif;
 +
    font-size: 1em;
 +
   
 +
}
 +
.thisisafuckingborder th {
 +
  background-color: #92d3fa;
 +
  color:#333333
 +
}
 +
.thisisafuckingborder a {
 +
  border-style: none !important;
 +
}
 +
.thisisafuckingborder td {
 +
  padding:6px;
 +
  background-color:#F6F6F6;
 +
}
 +
 
/* For template documentation */
 
/* For template documentation */
 
.template-documentation {
 
.template-documentation {
Line 472: Line 1,514:
 
  /* Fix table style*/
 
  /* Fix table style*/
 
tr.fix {
 
tr.fix {
−
        position: fixed;
+
position: fixed;
−
        top: 0;
+
top: 0;
−
        margin-left: 0;
+
margin-left: 0;
 
}
 
}
 
   
 
   
 
table.fix {
 
table.fix {
−
        margin-top: 0px;
+
margin-top: 0px;
 +
}
 +
/*Signature CSS - Yay!*/
 +
#sigadmin {
 +
overflow:hidden;
 +
border:3px solid #990012;
 +
width:50px;
 +
border-radius:5px;
 +
float:left;
 +
margin-right:8px;
 +
margin-bottom:2px;
 +
}
 +
 
 +
/* Styling for branching tables
 +
Added by: がか
 +
----------------------------------------------------------------------*/
 +
table.wikitable.branching-table > * > tr > td {
 +
    border-left: none;
 +
    border-right: none;
 +
}
 +
 +
table.wikitable.branching-table {
 +
    border: 1px #aaa solid;
 +
}
 +
 +
table.branching-table {
 +
    border-radius: 10px;
 +
    -webkit-border-radius: 10px;
 +
    -moz-border-radius: 10px;
 +
    overflow: hidden;
 +
}
 +
 +
table.branching-table > tbody > tr:first-child > th {
 +
    -webkit-border-radius: 13;
 +
    -moz-border-radius: 13;
 +
    border-radius: 13px;
 +
    font-family: Arial;
 +
    color: #ffffff;
 +
    font-size: 15px;
 +
    background: #3baef5;
 +
    padding: 4px 5px 4px 5px;
 +
    text-decoration: none;
 +
    max-width:300px;
 +
    text-align:center;
 +
}
 +
 
 +
table.branching-table > tbody > tr:first-child > th:hover {
 +
    background: #2b9ce3;
 +
    text-decoration: none;
 +
}
 +
 
 +
table.branching-table > tbody > tr:first-child > th:active {
 +
    background: #1d90d8;
 +
    text-decoration: none;
 +
}
 +
 
 +
table.branching-table > tbody > tr:first-child > th:focus {
 +
    outline:0 !important;
 +
}
 +
 
 +
/* ROUTE TEMPLATE
 +
Added by: dragonjet
 +
Origin from Wikia
 +
----------------------------------------------*/
 +
.maproute{
 +
    display: inline-block;
 +
    font-weight:bold;
 +
    color:#fff;
 +
}
 +
.maproute .mapnode{
 +
    float:left;
 +
    margin:0px 3px 0px 0px;
 +
    width:20px;
 +
    height:20px;
 +
    border:2px solid #ccc;
 +
    border-radius:12px;
 +
    text-align:center;
 +
    line-height:20px;
 +
}
 +
.maproute .mapnodewide{
 +
    float:left;
 +
    margin:0px 3px 0px 0px;
 +
    width:40px;
 +
    height:20px;
 +
    border:2px solid #ccc;
 +
    border-radius:12px;
 +
    text-align:center;
 +
    line-height:20px;
 +
}
 +
/* Fade in Fade out */
 +
 
 +
.fadein {
 +
    opacity: 0.0;
 +
    filter: alpha(opacity=0); /* For IE8 and earlier */
 +
    -webkit-transition: 0.4s ease-in-out;
 +
    -moz-transition: 0.4s ease-in-out;
 +
    -o-transition: 0.4s ease-in-out;
 +
    transition: 0.4s ease-in-out;
 +
}
 +
 
 +
.fadein:hover {
 +
    opacity: 1.0;
 +
    filter: alpha(opacity=100); /* For IE8 and earlier */
 +
}
 +
 
 +
/* Event Banners */
 +
.eventBanner01 {
 +
    background: url(images/f/ff/Spring_2013_Event_Banner.jpg) no-repeat center center;
 +
}
 +
 
 +
.eventBanner02 {
 +
    background: url(images/b/bf/Summer_2013_Event_Banner.jpg) no-repeat center center;
 +
}
 +
 
 +
.eventBanner03 {
 +
    background: url(images/e/ec/Fall_2013_Event_Banner.jpg) no-repeat center center;
 +
}
 +
 
 +
.eventBanner04 {
 +
    background: url(images/4/4e/Christmas_2013_Event_Banner.jpg) no-repeat center center;
 +
}
 +
 
 +
.eventBanner05 {
 +
    background: url(images/7/7d/Spring_2014_Event_Banner.jpg) no-repeat center center;
 +
}
 +
 
 +
.eventBanner06 {
 +
    background: url(images/0/0a/Summer_2014_Event_Banner.jpg) no-repeat center center;
 +
}
 +
 
 +
.eventBanner07 {
 +
    background: url(images/5/5d/Fall_2014_Event_Banner.jpg) no-repeat center center;
 +
}
 +
 
 +
.eventBanner08 {
 +
    background: url(images/3/38/Winter_2015_Event_Banner.jpg) no-repeat center center;
 +
}
 +
 
 +
.eventBanner09 {
 +
    background: url(images/5/56/Spring_2015_Event_Banner.jpg) no-repeat center center;
 +
}
 +
 
 +
.eventBanner10 {
 +
    background: url(images/b/b6/Summer_2015_Event_Banner.png) no-repeat center center;
 +
}
 +
 
 +
.eventBanner11 {
 +
    background: url(images/2/23/Fall_2015_Event_Banner.png) no-repeat center center;
 +
}
 +
 
 +
.eventBanner12 {
 +
    background: url(images/d/d4/Winter_2016_Event_Banner.png) no-repeat center center;
 +
}
 +
 
 +
.eventBanner13 {
 +
background: url(images/2/2b/Spring_2016_Event_Banner.png) no-repeat center center;
 +
}
 +
 
 +
.eventBanner14 {
 +
background: url(images/f/f5/Summer_2016_Event_Banner.png) no-repeat center center;
 +
}
 +
 
 +
.eventBanner15 {
 +
    background: url(images/b/b7/Fall_2016_Event_Banner.png) no-repeat center center;
 +
}
 +
 
 +
.eventBanner16 {
 +
    background: url(images/c/c2/Winter_2017_Event_Banner.jpg) no-repeat center center;
 +
}
 +
 
 +
.eventBanner17 {
 +
    background: url(images/3/38/Spring_2017_Event_Banner.png) no-repeat center center;
 +
}
 +
 
 +
.eventBanner18 {
 +
    background: url(images/9/9d/Summer_2017_Event_Banner.png) no-repeat center center;
 +
}
 +
 
 +
.eventBanner19 {
 +
    background: url(images/8/85/Fall_2017_Event_Banner.png) no-repeat center center;
 +
}
 +
 
 +
.eventBanner20 {
 +
    background: url(images/5/5a/Winter_2018_Event_Banner.png) no-repeat center center;
 +
}
 +
 
 +
.eventBanner21 {
 +
    background: url(images/b/b8/Early_Fall_2018_Event_Banner.png) no-repeat center center;
 +
}
 +
 
 +
.eventBanner22 {
 +
    background: url(images/9/9e/Winter_2019_Event_Banner.png) no-repeat center center;
 +
}
 +
 
 +
.eventBanner23 {
 +
    background: url(images/0/0a/Spring_2019_Event_Banner.png) no-repeat center center;
 +
}
 +
.eventBanner24 {
 +
    background: url(images/6/6c/Summer_2019_Event_Banner.png) no-repeat center center;
 +
}
 +
.eventBanner25 {
 +
    background: url(images/4/40/Fall_2019_Event_Banner.png) no-repeat center center;
 +
}
 +
.eventBanner26 {
 +
    background: url(images/e/e9/Hinamatsuri_2020_Mini-Event_Banner.png) no-repeat center center;
 +
}
 +
.eventBanner27 {
 +
    background: url(images/e/e5/Rainy-Summer_2020_Event_Banner.png) no-repeat center center;
 +
}
 +
.eventBanner28 {
 +
    background: url(images/6/60/Fall_2020_Event_Banner.png) no-repeat center center;
 +
}
 +
.eventBanner29 {
 +
    background: url(images/2/28/Fall_2020_Event_Banner_EO.png) no-repeat center center;
 +
}
 +
.eventBanner30 {
 +
    background: url(images/e/e8/Spring_2021_Event_Banner.png) no-repeat center center;
 +
}
 +
.eventBanner31 {
 +
    background: url(images/7/76/Summer_2021_Event_Banner.png) no-repeat center center;
 +
}
 +
.eventBanner32 {
 +
background: url(images/3/3c/Fall_2021_Event_Banner.png) no-repeat center center;
 +
}
 +
.eventBanner33 {
 +
background: url(images/d/d8/Fall_2021_Event_Banner_EO.png) no-repeat center center;
 +
}
 +
.eventBanner34 {
 +
background: url(images/a/a0/Winter_2022_Event_Banner.png) no-repeat center center;
 +
}
 +
/* Some generic classes. */
 +
 
 +
.explain {
 +
  border-bottom: 1px dotted;
 +
  cursor: help;
 +
}
 +
 
 +
.article-table {
 +
  background: #fafafa;
 +
  border-collapse: collapse;
 +
  margin: 1em 1em 1em 0;
 +
}
 +
 
 +
.article-table th {
 +
  background: #f2f2f2;
 +
}
 +
 
 +
.article-table td, .article-table th {
 +
  border-bottom: 1px solid #c3c6c6;
 +
  padding: 6px 12px;
 +
}
 +
 
 +
.article-table caption {
 +
  font-weight: 700;
 +
}
 +
 
 +
/*
 +
    From https://gbf.wiki/MediaWiki:Common.css
 +
    Provides the classes used by Template:Tooltip
 +
    Author: Tsubakura
 +
*/
 +
 
 +
.tooltip {
 +
  position: relative;
 +
  display: inline;
 +
  border-bottom: 1px dotted black;
 +
  font-size: inherit;
 +
  /*padding: inherit;*/
 +
}
 +
 +
.tooltiptext {
 +
  visibility: hidden;
 +
  padding: 12px 14px;
 +
 +
  position: absolute;
 +
  left: 50%;
 +
  bottom: calc(20px + 100%);
 +
  z-index: 99999;
 +
 +
  background: #fff;
 +
  box-shadow: 0 2px 0 0 rgba(0,0,0,0.15);
 +
  border: 1px solid #a2a9b1;
 +
  border-radius: 2px;
 +
 +
  white-space: nowrap;
 +
  font-weight: normal;
 +
  font-style: normal;
 +
  text-align: center;
 +
  font-size: 14px;
 +
  line-height: 1.6;
 +
}
 +
 +
.tooltiptext:after,
 +
.tooltiptext:before {
 +
  content: '';
 +
  position: absolute;
 +
  left: 50%;
 +
  border-style: solid;
 +
}
 +
 +
.tooltiptext:after {
 +
  top: 100%;
 +
  bottom: auto;
 +
  width: 20px;
 +
  height: 20px;
 +
  background: #fff;
 +
  margin-top: -10px;
 +
  margin-left: -10px;
 +
  box-shadow: 1px 1px 0px #a2a9b1;
 +
  transform: rotate(45deg);
 +
  border-width: 0;
 +
}
 +
 +
.tooltiptext:before {
 +
  top: 100%;
 +
  bottom: auto;
 +
  border-width: 18px;
 +
  margin-left: -18px;
 +
  border-color: rgba(0,0,0,0.15) transparent transparent transparent;
 +
  pointer-events: none;
 +
}
 +
 +
.tooltip .tooltip .tooltiptext,
 +
.header-fixed-helper .tooltip .tooltiptext {
 +
  bottom: auto;
 +
  top: calc(20px + 100%);
 +
}
 +
 +
.tooltip .tooltip .tooltiptext:after,
 +
.header-fixed-helper .tooltip .tooltiptext:after {
 +
  top: auto;
 +
  bottom: 100%;
 +
  border-width: 15px;
 +
  margin-left: -15px;
 +
  border-color: transparent transparent white transparent;
 +
  width: 0;
 +
  height: 0;
 +
  box-shadow: none;
 +
  background: none;
 +
  transform: none;
 +
}
 +
 +
.tooltip .tooltip .tooltiptext:before,
 +
.header-fixed-helper .tooltip .tooltiptext:before {
 +
  top: auto;
 +
  bottom: 100%;
 +
  border-width: 16px;
 +
  margin-left: -16px;
 +
  border-color: transparent transparent #888 transparent;
 +
}
 +
 +
.tooltiptext span.hr {
 +
    display: block;
 +
    height: 1px;
 +
    background-color: #a2a9b1;
 +
}
 +
 +
.tooltiptext hr,
 +
.tooltiptext span.hr {
 +
  margin: 10px 0 12px;
 +
  position: relative;
 +
  background: none;
 +
}
 +
 +
.tooltiptext hr:after,
 +
.tooltiptext span.hr:after {
 +
  content: '';
 +
  display: block;
 +
  width: 100%;
 +
  height: 1px !important;
 +
  position: absolute;
 +
  left: -14px;
 +
  background: #a2a9b1;
 +
  padding: 0 14px;
 +
}
 +
 +
.tooltip:hover > .tooltiptext,
 +
.tooltip.hover > .tooltiptext {
 +
  visibility: visible;
 +
}
 +
 +
.tooltiptext {
 +
  opacity: 0;
 +
  transition: opacity 200ms ease, visibility 0s ease 200ms, transform 200ms ease;
 +
  transform: translate(-50%, 8px);
 +
}
 +
 +
.tooltip .tooltip .tooltiptext,
 +
.header-fixed-helper .tooltip .tooltiptext {
 +
  transform: translate(-50%, -8px);
 +
}
 +
 +
.tooltip:hover > .tooltiptext,
 +
.tooltip.hover > .tooltiptext {
 +
  opacity: 1;
 +
  transition-delay: 0s;
 +
  transform: translate(-50%, 0);
 +
}
 +
 +
.tooltiptext a { color: #0645ad; border-bottom: 0; }
 +
.tooltiptext a:visited { color: #0b0080; }
 +
.tooltiptext a:active { color: #faa700; }
 +
.tooltiptext a:hover, a:focus { text-decoration: underline; }
 +
.tooltiptext { color: #252525; }
 +
.tooltiptext a.new { color: #ba0000; }
 +
 
 +
.mw-body-content { z-index: auto !important;}
 +
 
 +
/*
 +
    Provides the classes used by Template:Map/ImageNode
 +
    Author: gaka
 +
    Added by: Tsubakura
 +
*/
 +
 
 +
.map-nodes {
 +
  max-height: 500px;
 +
  overflow: auto;
 +
}
 +
 
 +
.map-nodes > div {
 +
  text-align: center;
 +
}
 +
 
 +
.map-nodes > table {
 +
  width: 100%;
 +
}
 +
 
 +
.map-image {
 +
  position: relative;
 +
}
 +
 
 +
.map-image > span {
 +
  position: absolute;
 +
  width: 40px;
 +
  height: 40px;
 +
  border: none;
 +
}
 +
 
 +
.map-image > span > a {
 +
  display: block;
 +
  width: 40px;
 +
  height: 40px;
 +
}
 +
 
 +
/* Template:Event/Route class
 +
Author: gaka
 +
Added by: Tsubakura
 +
----------------------------------------------------------------------*/
 +
.map-route-node {
 +
    display: inline-block;
 +
    min-width: 20px;
 +
    line-height: 20px;
 +
    text-align: center;
 +
    padding: 2px;
 +
    border-radius: 100%;
 +
    box-shadow: 0 0 4px rgba(0, 0, 0, .8);
 +
}
 +
 
 +
/**
 +
* Quest templates support.
 +
*/
 +
 
 +
.qr {
 +
display: inline-block;
 +
position: relative;
 +
text-align: center;
 +
vertical-align: top;
 +
}
 +
 
 +
.qrt {
 +
font-size: 10px;
 +
line-height: 12px;
 +
width: 90px;
 +
}
 +
 
 +
.qrt2 {
 +
    line-height: 14px;
 +
    font-size: 14px;
 +
width: 175px;
 +
}
 +
 
 +
.qrt3 {
 +
font-size: 14px;
 +
line-height: 14px;
 +
width: 240px;
 +
}
 +
 
 +
.qrt4 {
 +
font-size: 14px;
 +
line-height: 14px;
 +
width: 90px;
 +
}
 +
 
 +
.qrq {
 +
color: #ff6611;
 +
position: absolute;
 +
top: 40px;
 +
right: 15px;
 +
text-shadow: -1px -1px 4px #fff, 1px 1px 4px #fff, -1px 1px 4px #fff, 1px -1px 4px #fff;
 +
pointer-events: none;
 +
font-size: 18px;
 +
font-weight: bold;
 +
}
 +
 
 +
.qrs {
 +
color: #ff6611;
 +
position: absolute;
 +
top: -5px;
 +
right: 15px;
 +
text-shadow: -1px -1px 4px #fff, 1px 1px 4px #fff, -1px 1px 4px #fff, 1px -1px 4px #fff;
 +
pointer-events: none;
 +
font-size: 18px;
 +
font-weight: bold;
 +
}
 +
 
 +
.q {
 +
margin: auto;
 +
text-align: center;
 +
min-width: 800px;
 +
max-width: 1200px;
 +
}
 +
 
 +
.q1 { border-top: 3px solid #888; }
 +
.q2 { width: 60px; float: left; }
 +
.q3 { display: inline-block; }
 +
.q4 { text-align: left; }
 +
.q5 { background-color: #f0fff0 !important; }
 +
.q6 { background-color: #fdf5e6 !important; }
 +
.q7 { background-color: #fcfcfc !important; }
 +
.q8 { background-color: #ffe4b5 !important; }
 +
 
 +
.q01 { background-color: #42c165 !important; }
 +
.q02 { background-color: #e7696b !important; }
 +
.q03 { background-color: #90cb65 !important; }
 +
.q04 { background-color: #46c6c2 !important; }
 +
.q05 { background-color: #e6c872 !important; }
 +
.q06 { background-color: #897056 !important; }
 +
.q07 { background-color: #cbaae5 !important; }
 +
 
 +
.qw1 { max-width: 150px !important; min-width: 150px !important; }
 +
.qw2 { max-width: 320px !important; min-width: 320px !important; }
 +
 
 +
.qs1 { border: 2px red solid; padding: 2px; }
 +
 
 +
.qs2 {
 +
position: relative;
 +
display: inline;
 +
}
 +
 
 +
.qs3 {
 +
font-size: 10px;
 +
font-weight: 800;
 +
position: absolute;
 +
pointer-events: none;
 +
color: #000;
 +
top: 14px;
 +
right: 1px;
 +
text-shadow: #fff 0 0 1px, #fff 0 0 1px, #fff 0 0 1px, #fff 0 0 1px, #fff 0 0 1px, #fff 0 0 1px, #fff 0 0 1px, #fff 0 0 1px, #fff 0 0 1px, #fff 0 0 1px, #fff 0 0 1px, #fff 0 0 1px, #fff 0 0 1px, #fff 0 0 1px, #fff 0 0 1px;
 +
}
 +
 
 +
/* Template:Quest support.
 +
Added by: がか
 +
Imported from wikia by: Chocolatecravinghobo
 +
Used by: Module:View/Quest
 +
----------------------------------------------*/
 +
/*
 +
.qA > td { border-top: 2px solid #808080; }
 +
.qA > td:nth-child(1) { background: #43C769; }
 +
.qA > td:nth-child(2) { background: #D7F3C7; }
 +
.qdA { height: 60px; }
 +
.qdA > td:nth-child(2n+2) { background: #DBE6D5; }
 +
.qdA > td:nth-child(4n+3) { background: #F2F7F0; }
 +
 
 +
.qB > td { border-top: 2px solid #808080; }
 +
.qB > td:nth-child(1) { background: #EC6063; }
 +
.qB > td:nth-child(2) { background: #F3DCDC; }
 +
.qdB { height: 60px; }
 +
.qdB > td:nth-child(2n+2) { background: #EDE2E2; }
 +
.qdB > td:nth-child(4n+3) { background: #FCF8F8; }
 +
 
 +
.qC > td { border-top: 2px solid #808080; }
 +
.qC > td:nth-child(1) { background: #93CE67; }
 +
.qC > td:nth-child(2) { background: #E5F3DB; }
 +
.qdC { height: 60px; }
 +
.qdC > td:nth-child(2n+2) { background: #E6EDE0; }
 +
.qdC > td:nth-child(4n+3) { background: #F8FAF5; }
 +
 
 +
.qD > td { border-top: 2px solid #808080; }
 +
.qD > td:nth-child(1) { background: #4EBBD4; }
 +
.qD > td:nth-child(2) { background: #DFF0F9; }
 +
.qdD { height: 60px; }
 +
.qdD > td:nth-child(2n+2) { background: #E8EDF0; }
 +
.qdD > td:nth-child(4n+3) { background: #F1F7FA; }
 +
 
 +
.qE > td { border-top: 2px solid #808080; }
 +
.qE > td:nth-child(1) { background: #DEC772; }
 +
.qE > td:nth-child(2) { background: #F0E4B5; }
 +
.qdE { height: 60px; }
 +
.qdE > td:nth-child(2n+2) { background: #DDD9C8; }
 +
.qdE > td:nth-child(4n+3) { background: #F5F2E4; }
 +
 
 +
.qF > td { border-top: 2px solid #808080; }
 +
.qF > td:nth-child(1) { background: #BA8F79; }
 +
.qF > td:nth-child(2) { background: #D9B38C; }
 +
.qdF { height: 60px; }
 +
.qdF > td:nth-child(2n+2) { background: #C6B39F; }
 +
.qdF > td:nth-child(4n+3) { background: #F3ECE6; }
 +
 
 +
.qG > td { border-top: 2px solid #808080; }
 +
.qG > td:nth-child(1) { background: #CAA6DD; }
 +
.qG > td:nth-child(2) { background: #EFE8F7; }
 +
.qdG { height: 60px; }
 +
.qdG > td:nth-child(2n+2) { background: #EFEBF3; }
 +
.qdG > td:nth-child(4n+3) { background: #FAF8FC; }
 +
 
 +
.qW > td { border-top: 2px solid #808080; }
 +
.qW > td:nth-child(1) { background: #FDD0F0; }
 +
.qW > td:nth-child(2) { background: #F6ECFF; }
 +
.qdW { height: 60px; }
 +
.qdW > td:nth-child(2n+2) { background: #F5F3F8; }
 +
.qdW > td:nth-child(4n+3) { background: #FFF7FF; }
 +
*/
 +
 
 +
/* ----------------------------------------------*/
 +
 
 +
/**
 +
* Stacked images with transitions on mouseover. Used on ship pages.
 +
*/
 +
.double-image {
 +
  position: relative;
 +
}
 +
 
 +
.double-image > div {
 +
  position: absolute;
 +
  left: 0;
 +
  top: 0;
 +
  -webkit-transition: opacity 0.5s ease-in-out;
 +
  -moz-transition: opacity 0.5s ease-in-out;
 +
  -o-transition: opacity 0.5s ease-in-out;
 +
  transition: opacity 0.5s ease-in-out;
 +
}
 +
 
 +
.double-image > .bottom-image {
 +
  opacity: 0;
 +
}
 +
 
 +
.double-image > .bottom-image:hover {
 +
  opacity: 1;
 +
}
 +
 
 +
 
 +
/* GRAYSCALE WORKAROUND FOR LUA
 +
Added by: ckwng
 +
 
 +
Wikia does not allow filter in in-line CSS generated by Lua #invokes apparently. Use site css to workaround.
 +
Imported from wikia at request of: Chocolatecravinghobo
 +
Used by: Template:ShipBattleCardKai & Module:BaseAsset
 +
----------------------------------------------*/
 +
.grayscale-wrapper {
 +
    -webkit-filter: grayscale(100%);
 +
    filter: grayscale(100%);
 +
}
 +
/* ----------------------------------------------*/
 +
 
 +
/* Development Tables Column Colours
 +
Used by: Template:DevelopmentByEquipment & Template:DevelopmentSecretaryCol
 +
Added by: Chocolatecravinghobo
 +
----------------------------------------------*/
 +
.dev-s1 { background-color: #eef5ff !important; }
 +
.dev-s2 { background-color: #ffeeee !important; }
 +
.dev-s3 { background-color: #eeffcc !important; }
 +
.dev-s4 { background-color: #a2c8ff !important; }
 +
.dev-s0 { background-color: #aaffcc !important; }
 +
 
 +
.dev-f_s { background-color: #aaffaa !important; }
 +
.dev-a { background-color: #ffaaaa !important; }
 +
.dev-b { background-color: #ffffaa !important; }
 +
/* ----------------------------------------------*/
 +
 
 +
.explain-dash {
 +
    border-bottom: 1px dashed;
 +
    cursor: help;
 
}
 
}

Latest revision as of 13:39, 11 May 2024

/*****************************************************************************************/
/*** This page is the central stylesheet for the entire wiki. Any additions or changes ***/
/*** that are made here will be reflected globally around the website. Do NOT          ***/
/*** modify unless you know exactly what you are doing. Consult me if you have         ***/
/*** something in mind but don't know how to make it happen. You will only end up      ***/
/*** breaking things already in place.                                                 ***/
/*** - Gensui Hime                                                                     ***/
/*****************************************************************************************/

/* CSS sheet for fp.html*/

/* Separate from Common.CSS in order to make changes swift and easy? Debatable */
/*Primary Container*/
#widgetcontainer{
	line-height:1.2 !important; /*MediaWiki resizes line height, destroying placements.*/
	max-width:1600px;
	margin-left:auto;
	margin-right:auto;	/*Mediawiki max space for 1080p is some 1600px*/
	min-width:710px;
	padding-left:18px;
	/*height:918px;*/
	margin-bottom:2%;
}

/*Column Settings*/
.rightcol{
	width:auto;
	margin-right:4%;
	margin-left:4%;
	float:left;
	height:auto;
	font-family: Arial, Helvetica, sans-serif;
}
.leftcol{
	width:710px;
	float:left;
	
	margin-left:4%;
	margin-bottom:1%;
	position:relative;
}
/* Misc Icons */
#iconcluster {
	float:right;
	width:710px;
	height:70px;
	margin-top:14.4px;	
	text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
	margin-bottom:1%;
}
.portalicon {
	height:70px;
	width:160px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
	text-align:center;
	font-family: Arial, Helvetica, sans-serif;
	color:black;
	background-color:white;
	border-radius:10px;
	margin-bottom:1%;
	
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.portalicon:hover {
	color:white;
	/*font-weight:bold;*/
	text-shadow:1px 1px 15px black;	
	background-color:#3090c7;
}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}
#clustertitle {
	width:100%;
	background-color:#3090c7;
	border-radius:8px;
	text-align:center;
	padding-top:2px;
	padding-bottom:2px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:white;
	margin-bottom:14.4px;
}
/*More Misc Buttons, not a subcategory of quick links*/
#infodiv {
	margin-top:2%;
	width:710px;
	height:200px;
	background:transparent url(frontpage_files/infobarbg.png) no-repeat;
}
#infoicons {
	padding-top:10px;
	padding-left:40px;
	padding-right:40px;
	position:relative;
	top:30px;
	height:124px;
	width:auto;
}
.questicon {
	float:left;
	width:100px;
	height:100px;
	border-radius:10px;
	margin-right:32px;
	background-color:#005e95;
}
.questicon:hover {
	background-color:#2886bd;
}
.infoicon {
	float:left;
	width:100px;
	height:100px;
	border-radius:10px;
	margin-right:32px;
	position: relative;
    display: inline-block;
	background-color:#005e95;
}
.listdrop {
	display: none;
    position: absolute;
	bottom:100px;
    background-color: #555;
    width: 100px;
    box-shadow: 0px -8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
	font-family: Arial, Helvetica, sans-serif;
	text-align:center;
	font-size:14px;
	
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	overflow:hidden;
}
.listdrop .selbox {
	width:100px;
	color:white;
	background-color:#2886bd;
	padding-top:10px;
	padding-bottom:10px;
	
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.listdrop .selbox:hover {
	color:black;
	background-color:#f9f9f9;
}
.infoicon:hover {
	background-color:#2886bd;
	
	border-top-left-radius:0px;
	border-top-right-radius:0px;
	
}
.infoicon:hover .listdrop {
	background-color:#2886bd;
	display:block;
}
.infotxt {
	padding-top:3px;
	font-family: Arial, Helvetica, sans-serif;
	color:white;
	text-align:center;
	align:middle;
	width:auto;
	font-size:14px;
}
/*Icon Triumvirate Styling*/
#iconcontainer{
	background:url(frontpage_files/mainboxbg.jpg) no-repeat;
	width:710px;
	height:300px;
	overflow:hidden;
	border:0px solid #0099ff;
	border-radius:8px;	
	overflow:hidden;
}
.sortext{
	/*font-weight:bold;*/
	color:white;
	padding:4px 4px 4px 4px;
	font-size:20px;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration:none;
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.sortext:hover{
	text-shadow:0px 0px 10px #D50000;
}
.pvptext{
	color:white;
	padding:4px 4px 4px 4px;
	font-size:20px;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration:none;
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.pvptext:hover{
	text-shadow:0px 0px 10px #03D500;
}
.exptext{
	color:white;
	padding:4px 4px 4px 4px;
	font-size:20px;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration:none;
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.exptext:hover{
	text-shadow:0px 0px 10px #00B1D5;
}
#sortie{
	background:transparent url(frontpage_files/sortiev2.png) no-repeat;
}
.sortie{ 
	padding-right:10px;
	float:left;
	width:217px;
	height:247px;
	display:block;
	opacity: 0.0;
    filter: alpha(opacity=0); /* For IE8 and earlier */
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}
.sortie:hover{
	opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
#pvp{
	background:transparent url(frontpage_files/pvpv2.png) no-repeat;
}
.pvp{
	padding-right:10px;
	float:left;
	width:217px;
	height:247px; 
	display:block;
	opacity: 0.0;
	-webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}
.pvp:hover{
	opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

#exped{
	background:transparent url(frontpage_files/expedv2.png) no-repeat;
}
.exped{
	padding-right:10px;
	float:left;
	width:217px;
	height:247px; 
	
	display:block;
	opacity: 0.0;
	-webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
}
.exped:hover{
	opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
/*Link Style Reset*/
a:link {
	text-decoration:none;
}
a:hover {
	text-decoration:none;
}
/*Event Banner*/
/*When there is no event, replace with noevban.png*/
.eventbanner{
	
	width:710px;
	height:93px;
	float:left;
	border-bottom-left-radius:8px;
	border-bottom-right-radius:8px;
	
	display:block;
	opacity: 0.0;
    filter: alpha(opacity=0); /* For IE8 and earlier */
    -webkit-transition: 0.4s ease-in-out;
    -moz-transition: 0.4s ease-in-out;
    -o-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out;
}
.eventbanner:hover{
	opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
	border-bottom-left-radius:8px;
	border-bottom-right-radius:8px;
}
/* Previous event image: /w/images/b/bf/Summer_2023_Event_Banner_EO.png */ 
/*       No event image: /w/frontpage_files/noevban.png                    */
/* Incoming event image: /w/images/3/32/Event_Banner_Placeholder_1.png     */
#eventbanner{
	text-align:center;
	border:0px solid #a7d7f9;
	border-bottom-left-radius:8px;
	border-bottom-right-radius:8px;
	background:url(/w/frontpage_files/noevban.png ) no-repeat center center;
	overflow:hidden;
	width:710px;
	height:93px;
	background-size: contain;
}
#eventwrap{
	border:0px solid #b6b6b4; 
	border-top:0px;
	width:710px; 
	border-bottom-left-radius:12px;
	border-bottom-right-radius:4px;
	margin-bottom:2%;
}
#eventinfo{
	text-align:center;
	border-top-left-radius:8px;
	border-top-right-radius:8px;
	border:0px solid #b6b6b4;
	/*border-bottom:0px;*/
	background:#3090c7;
	font-weight:bold;
	color:white;
	padding:4px 4px 4px 4px;
	font-size:20px;
	font-family: Arial, Helvetica, sans-serif;
}
/*World List*/
#worldicons{
	width:710px;
	border:0px solid #3090c7;
	margin-top:2%;
	text-align:center;
	height:128px;
	border-top-right-radius:12px;
	border-bottom-right-radius:12px;
	background:transparent url(frontpage_files/worldv3.png) no-repeat;
	
	font-weight:bold;
	color:black;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration:none;
	
	margin-bottom:2%;
}
.wor1{
	margin:auto;
	background: transparent url(frontpage_files/w1v2.png) no-repeat;
	background-position:0 0;
	display:block;
	width:70px;
	height:70px;
}

.wor1:hover{
	background-position:0 100%;	
}
.wor2{
	margin:auto;
	background: transparent url(frontpage_files/w2v2.png) no-repeat;
	background-position:0 0;
	display:block;
	width:70px;
	height:70px;
}

.wor2:hover{
	background-position:0 100%;	
}
.wor3{
	margin:auto;
	background: transparent url(frontpage_files/w3v2.png) no-repeat;
	background-position:0 0;
	display:block;
	width:70px;
	height:70px;
}

.wor3:hover{
	background-position:0 100%;	
}
.wor7{
	margin:auto;
	background: transparent url(frontpage_files/w7.png) no-repeat;
	background-position:0 0;
	display:block;
	width:70px;
	height:70px;
}

.wor7:hover{
	background-position:0 100%;	
}
.wor4{
	margin:auto;
	background: transparent url(frontpage_files/w4v2.png) no-repeat;
	background-position:0 0;
	display:block;
	width:70px;
	height:70px;
}

.wor4:hover{
	background-position:0 100%;	
}
.wor5{
	margin:auto;
	background: transparent url(frontpage_files/w5v2.png) no-repeat;
	background-position:0 0;
	display:block;
	width:70px;
	height:70px;
}

.wor5:hover{
	background-position:0 100%;	
}
.wor6{
	margin:auto;
	background: transparent url(frontpage_files/w6v2.png) no-repeat;
	background-position:0 0;
	display:block;
	width:70px;
	height:70px;
}

.wor6:hover{
	background-position:0 100%;	
}
.wortext{
	font-size:16px;
	/*background-color:#3090c7;
	color:#3090c7;
	text-decoration:none;*/
	/*text-shadow:0px 0px 8px #5DADE2;*/
	color:black;
	border-radius:6px;	
	padding:1px 4px 1px 4px;
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
	
}

.wortext:hover{
	color:black;
	/*text-shadow:0px 0px 16px #2E86C1;*/
	
}

#worlds{
	padding-top:3px;
	margin:auto;
	width:101px;
	float:left;
}

.worname{
	/*text-shadow:0px 0px 8px #5DADE2;*/
	color:black;
	font-size:13px;
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.worname:hover{
	color:black;
	text-shadow:0px 0px 10px #FFB813;
}
/* Twitter and Seasonals */
.twidget{
	border:0px solid white;
	border-radius:4px;
	background-color:white;
	height:368px;
	width:48%;
	float:left;
}
.seasonalbox {
	width:100%;
	height:200px;
	background: url(frontpage_files/seasonalbg.jpg) no-repeat;
	margin-right:0px;
	border-radius:8px;
	border-top-left-radius:0px;
	border-top-right-radius:0px;
}
.seasoncont {
	padding: 4px 4px 4px 4px;
	width:auto;
	height:auto;
	align:middle;
	text-align:center;
}
.seasonicon{
	margin-left:auto;
	margin-right:auto;
	width:110px;
	height:110px;
	border-radius:55px;
	background-color:#4EAEE5;

	-webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}
.seasonicon:hover{
	background-color:#6cccff;
}
/*FactoryBox Div*/
.factorybox{
	border-radius:8px;	
	width:710px;
	height:170px;
	background: url(frontpage_files/iconboxbgv2.png) no-repeat;
	font-family: Arial, Helvetica, sans-serif;
	margin-top:2%;
}

/* Factorybox Individual Containers - Icon+Text */
.constbox{
	width:176px;
	position:relative;
	top:1px;
	left:50px;
	margin-right:0px;	
}
.develbox{
	width:176px;
	position:relative;
	top:-94px;
	left:276px;
}
.kaisyubox{
	width:171px;
	position:relative;
	top:-90px;
	left:53px;
}
.kaisoubox{
	width:171px;
	position:relative;
	top:-159px;
	left:279px;
}
.revampbox{
	width:155px;
	position:relative;
	bottom:320px;
	left:522px;	
}
/* Construction Icon FX */
#const{
	background: transparent url(frontpage_files/constv2.png) no-repeat center center;
}
.const{
	width:176px;
	height:70px;
	display:block;
	margin-top:8px;
	margin-bottom:-4px;
	opacity: 0.0;
    filter: alpha(opacity=0); /* For IE8 and earlier */
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}
.const:hover{
	opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
/* Development Icon FX */
#devel{
	background: transparent url(frontpage_files/develv2.png) no-repeat center center;
}

.devel{
	width:176px;
	height:70px;
	display:block;
	margin-top:8px;
	margin-bottom:-4px;
	opacity: 0.0;
    filter: alpha(opacity=0); /* For IE8 and earlier */
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}
.devel:hover{
	opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
/*More FX*/
#kaisyu{
	background: transparent url(frontpage_files/kaisyu.png) no-repeat;
}
.kaisyu{
	display:block;
	width:171px;
	height:47px;
	margin-left:auto;
	margin-right:auto;
	opacity: 0.0;
    filter: alpha(opacity=0); /* For IE8 and earlier */
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}
.kaisyu:hover{
	opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
/*More FX*/
#kaisou{
	background: transparent url(frontpage_files/kaisouv2.png) no-repeat;
}
.kaisou{
	display:block;
	width:171px;
	height:47px;
	margin-left:auto;
	margin-right:auto;
	opacity: 0.0;
    filter: alpha(opacity=0); /* For IE8 and earlier */
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}
.kaisou:hover{
	opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
/*More FX*/
#revamp{
	background:transparent url(frontpage_files/revampv2.png) no-repeat;
}
.revamp{
	margin-top:8px;
	margin-bottom:8px;
	background:transparent url(frontpage_files/revamp.png) no-repeat;
	display:block;
	width:155px;
	height:95px;
	margin-left:auto;
	margin-right:auto;
	opacity: 0.0;
    filter: alpha(opacity=0); /* For IE8 and earlier */
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}
.revamp:hover{
	opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

/* OBSOLETE
.iconname{
	font-size:18px;
	text-align:center;
	color:black;
	margin-left:auto;
	margin-right:auto;
}
*/
/*Factorybox Names Alignment*/
.constname{
	font-size:18px;
	text-align:center;
	color:white;
	margin-left:auto;
	margin-right:auto;
	
	border-radius:6px;
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.develname{
	font-size:15px;
	text-align:center;
	color:white;
	padding-top:2px;
	margin-left:auto;
	margin-right:auto;
	height:20px;
	border-radius:6px;
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.kaisyuname{
	font-size:18px;
	text-align:center;
	color:white;
	margin-left:auto;
	margin-right:auto;
	margin-top:2px;
	
	border-radius:6px;
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.kaisouname{
	font-size:18px;
	text-align:center;
	color:white;
	
	margin-left:auto;
	margin-right:auto;
	margin-top:2px;
	
	border-radius:6px;
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.revampname{
	font-size:15px;
	text-align:center;
	color:white;
	border-radius:6px;
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
/*Prevent visited links from turning blue*/
.constname:visited{
	text-decoration:none;
	color:white;	
}
.develname:visited{
	text-decoration:none;
	color:white;	
}
.kaisyuname:visited{
	text-decoration:none;
	color:white;	
}
.kaisouname:visited{
	text-decoration:none;
	color:white;	
}
.revampname:visited{
	text-decoration:none;
	color:white;	
}
/*Hover FX - MUST be placed AFTER .visited*/
.constname:hover{
	background-color:#BB2F2F;
	text-shadow:2px 2px 10px black;	
}
.develname:hover{
	background-color:#3EBB2F;
	text-shadow:2px 2px 10px black;	
}
.kaisouname:hover{
	background-color:#2FA6BB;
	text-shadow:2px 2px 10px black;
}
.kaisyuname:hover{
	background-color:#2FA6BB;
	text-shadow:2px 2px 10px black;
}
.revampname:hover{
	background-color:#39ADF0;
	text-shadow:2px 2px 10px black;
}
/*Icon Platform - Not in use*/
.iconplat{
	background:transparent url(frontpage_files/iconplat.png) no-repeat;
	display:block;
	width:182px;
	height:10px;
	position:relative;
	left:0px;
	z-index:1000;
}
/*Wiki Description*/
#wikidesc{
	border-radius:8px;
	border-top-left-radius:16px;
	width:auto;
	max-width:710px;
	height:auto;	
	background-color:#3090c7;
	min-height:103px;
	margin-bottom:14.4px;
}
.craneicon{
	float:left;
	width:101px;
	height:87px;
	align:left;
	border:1px solid #333;
	border-radius:18px;
	overflow:hidden;
	margin-right:8px;
}
.desctext{
	height:auto;
	margin-left:auto;
	margin-right:auto;
	font-family: Arial, Helvetica, sans-serif;
	color:white;
}
#descbox{
	padding:10px 8px 10px 8px;	
}
/*JP lang*/
#nihontext{
	font-family: Yu Gothic, 遊ゴシック, Meiryo, メイリオ, Serif !important;
}
/*World div Addon*/
.worldside{
	background:transparent url(frontpage_files/worldsidev2.png) no-repeat;
	width:26px;
	height:128px;
	position:absolute;
	left:-21px;
}
/*Update Box*/
#updateheader{
	padding-top:5px;
	padding-bottom:5px;
	text-align:center;
	width:auto;
	height:auto;
	background-color:#3090c7;
	border-top-right-radius:8px;
	border-top-left-radius:8px;
	font-family: Arial, Helvetica, sans-serif;
	color:white;
	font-weight:bold;
	width:100%;
}
.updatebox{
	border-radius:8px;
	border-bottom-right-radius:8px;
	border-top-left-radius:8px;
	background: url(frontpage_files/updatebg.jpg) no-repeat;
	text-align:center;
	width:100%;
	height:154px;
	font-family: Arial, Helvetica, sans-serif;
	opacity:1;
	margin-bottom:14.203px;
}
.updatecontainer {
	float:left;	
}
#uptextbox {
	margin-top:13px;	
}
.uptext{
	color:white;
	text-shadow:0px 0px 16px #0071e6;
	padding:2px 2px 2px 2px;
	
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.uptext:visited{
	text-decoration:none;
	color:white;	
}
.uptext:hover{
	color:#80bfff;
}

/*@media headers specified for front page layout modulation*/

/* Add 242px to whatever @media header is defined for use with MW */
@media screen and (min-width:0px) {
	html {
		min-width:983px;	
	}
	.rightcol, .leftcol {
		
		width:710px;
		margin-left:auto;
		margin-right:auto;
	}
	#widgetcontainer {
		max-width:710px;
		padding:0px 0px 0px 0px;	
		height:1800px;
	}
	.updatecontainer {
		width:48%;
		margin-right:4%;	
	}
	.seasoncont {
		padding-top:30px;
	}
}
@media screen and (min-width:1259px) {
	.rightcol {
		width:260px;
		margin-left:4%;
	}
	#widgetcontainer {
		max-width:1014px;
		height:1300px;
	}
	.updatecontainer {
		width:100%;	
	}
	#iconcluster {
		float:left;
		position:relative;
		top:-50px;
	}
	.seasoncont {
		padding-top:30px;
	}
	#uptextbox {
		margin-top:33px;	
	}
	.updatebox {
		height:	200px;
	}
	.seasonalbox {
		height: 200px;
	}
}
@media screen and (min-width:1350px) {
	.rightcol {
		width:350px;
	}
	#widgetcontainer {
		max-width:1106px;
		height:1300px;
	}
	.seasonalbox {
		height: 200px;
	}
	#iconcluster {
		position:relative;
		top:-25px;
		width:710px;
		float:left;
	}
	.seasoncont {
		padding-top:30px;
	}
	#uptextbox {
		margin-top:33px;	
	}
	.updatebox {
		height:	200px;
	}
}
@media screen and (min-width:1660px) {
	.rightcol {
		width:650px;	
	}
	#widgetcontainer {
		max-width:1418px;
		height:950px;
	}
	.updatecontainer {
		width:48%; /*right margin 4%*/
		margin-right:4%;
	}
	.seasonalbox {
		height: 200px;
	}
	.updatebox {
		height:	200px;
	}
	#uptextbox {
		margin-top:33px;	
	}
	.seasoncont {
		padding-top:30px;
	}
	#iconcluster {
		width:650px;
		float:right;
		top:0px;
	}
}


/**************************************************************/
/* Global Language Stylesheet */
/* Set fonts for lang type */
:lang(zh), :lang(zh-cn) {					/*All Chinese languages?*/
	font-family: Microsoft Yahei, 微软雅黑, Serif;
}
 
:lang(zh-tw) {					/*Taiwanese*/
	font-family: Microsoft Jhenghei, 微軟正黑體, Serif;
}
 
:lang(ja) {					/*Japanese*/
	font-family: Yu Gothic, 遊ゴシック, Meiryo, メイリオ, Serif;
}

/*************************************/
/* Button Stylesheet */
/*Button Settings*/
.globalbutton {
	-webkit-border-radius: 13;
	-moz-border-radius: 13;
	border-radius: 13px;
	font-family: Arial;
	color: #ffffff;
	font-size: 15px;
	background: #3baef5;
	padding: 4px 5px 4px 5px;
	text-decoration: none;
	max-width:300px;
	text-align:center;
}
.globalbutton:hover {				/*When mouse hover*/
	background: #2b9ce3;
	text-decoration: none;
}
.globalbutton:active {				/*When mouse press*/
	background: #1d90d8;
	text-decoration: none;
}
.globalbutton:focus {				/*Removes blue outline*/
	outline:0 !important;
}

/************************************************/
/* Scrolling Text CSS - Combined with Common.js */
#scrollDiv{
	width: 100%;
	height: 25px;
	line-height: 25px;
	overflow: hidden;
}
#scrollDiv li{
	height: 25px;
	padding-left: 10px;
	list-style: none;
}

/************************************************/
/* SPOILER ALERT */
.spoiler {
	background-color: black;
	color: #000000;
}
 
.spoiler:hover {
	background-color: black;
	color: #ffffff;
}

/************************************************/
/* Centered Table (instead of <table align="center">) */
.centertable {
	margin-left: auto;
	margin-right: auto;
}

/******************************/
/*     Everything Else        */
/******************************/
/*Construction Table Wrap*/
#constable {					/*box*/
	width: 100%;
	padding: 1px 3px 1px 3px;
	box-sizing: border-box;			/*Resizing*/
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}
/* For template documentation */
.template-documentation {
	clear: both;
	margin: 1em 0 0 0;
	border: 1px solid #aaa;
	background-color: #ecfcf4;
	padding: 1em;
}

/* Default skin for navigation boxes */
table.navbox {								/* Navbox container style */
	border: 1px solid #7384B5;
	width: 100%;
	margin: auto;
	clear: both;
	font-size: 88%;
	text-align: center;
	padding: 1px;
}
 
/* Navbox Layout */
	table.navbox + table.navbox {			/* Single pixel border between adjacent navboxes */
	margin-top: -1px;						/* (doesn't work for IE6, but that's okay)       */
}
.navbox-title,
.navbox-abovebelow,
table.navbox th {
	text-align: center;						/* Title and above/below styles */
	padding-left: 1em;
	padding-right: 1em;
}
.navbox-group {								/* Group style */
	white-space: nowrap;
	text-align: right;
	font-weight: bold;
	padding-left: 1em;
	padding-right: 1em;
}
.navbox-list {
	text-align: left;
}
.collapseButton {          					/* 'show'/'hide' buttons created dynamically */
	float: right;							/* by the CollapsibleTables javascript in    */
	font-weight: normal;					/* [[MediaWiki:Common.js]]are styled here    */
	text-align: right;						/* so they can be customised.                */
	width: auto;
}
.navbox .collapseButton {					/* In navboxes, the show/hide button balances */
	width: 6em;								/* the vde links from [[Template:Tnavbar]],   */
}											/* so they need to be the same width.         */
.navbox-title, .navbox-above, .navbox-below {
	padding-left:1em;
	padding-right:1em;
	text-align:center;
}
 
/* Navbox Colors */
.navbox, .navbox-subgroup {
	background: #fdfdfd;     /* Background color */
}
.navbox-list {
	border-color: #fdfdfd;   /* Must match background color */
}
.navbox-title,
table.navbox th {
	background:#CEDAFF;     /* Level 1 color */
}
.navbox-abovebelow,
.navbox-group,
.navbox-subgroup .navbox-title {
	background: #DDE6FF;     /* Level 2 color */
}
.navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow {
	background: #DDE6FF;     /* Level 3 color */
}
.navbox-even {
	background: #f7f7f7;     /* Even row striping */
}
.navbox-odd {
	background: transparent; /* Odd row striping */
}


/* Mark redirects in Special:Allpages and Special:Watchlist
-------------------------------*/
.allpagesredirect {
	font-style: italic;
}
.allpagesredirect:after {
	color: #808080; content: " (redirect)"
}
.watchlistredir {
	font-style: italic;
}

/* Cell sizes for ambox/tmbox/imbox/cmbox/ombox/fmbox/dmbox message boxes */
th.mbox-text, td.mbox-text {   /* The message body cell(s) */
	border: none;
	padding: 0.25em 0.9em;     /* 0.9em left/right */
	width: 100%;               /* Make all mboxes the same width regardless of text length */
}
td.mbox-image {                /* The left image cell */
	border: none;
	padding: 2px 0 2px 0.9em;  /* 0.9em left, 0px right */
	text-align: center;
}
td.mbox-imageright {           /* The right image cell */
	border: none;
	padding: 2px 0.9em 2px 0;  /* 0px left, 0.9em right */
	text-align: center;
}
td.mbox-empty-cell {           /* An empty narrow cell */
	border: none;
	padding: 0px;
	width: 1px;
}
 
/* Article message box styles */
	table.ambox {
	margin: 0px 10%;                  /* 10% = Will not overlap with other elements */
	border: 1px solid #aaa;
	border-left: 10px solid #1e90ff;  /* Default "notice" blue */
	background: #fbfbfb;
}
	table.ambox + table.ambox {      /* Single border between stacked boxes. */
	margin-top: -1px;
}
.ambox th.mbox-text,
.ambox td.mbox-text {            /* The message body cell(s) */
	padding: 0.25em 0.5em;       /* 0.5em left/right */
}
.ambox td.mbox-image {           /* The left image cell */
	padding: 2px 0 2px 0.5em;    /* 0.5em left, 0px right */
}
.ambox td.mbox-imageright {      /* The right image cell */
	padding: 2px 0.5em 2px 0;    /* 0px left, 0.5em right */
}
 
table.ambox-notice {
	border-left: 10px solid #1e90ff;    /* Blue */
}
table.ambox-speedy {
	border-left: 10px solid #b22222;    /* Red */
	background: #fee;                   /* Pink */
}
table.ambox-delete {
	border-left: 10px solid #b22222;    /* Red */
}
table.ambox-content {
	border-left: 10px solid #f28500;    /* Orange */
}
table.ambox-style {
	border-left: 10px solid #f4c430;    /* Yellow */
}
table.ambox-move {
	border-left: 10px solid #9932cc;    /* Purple */
}
table.ambox-protection {
	border-left: 10px solid #bba;       /* Gray-gold */
}
 
/* Image message box styles */
table.imbox {
	margin: 4px 10%;
	border-collapse: collapse;
	border: 3px solid #1e90ff;    /* Default "notice" blue */
	background: #fbfbfb;
}
.imbox .mbox-text .imbox {  /* For imboxes inside imbox-text cells. */
	margin: 0 -0.5em;       /* 0.9 - 0.5 = 0.4em left/right.        */
	display: block;         /* Fix for webkit to force 100% width.  */
}
.mbox-inside .imbox {       /* For imboxes inside other templates.  */
	margin: 4px;
}
 
table.imbox-notice {
	border: 3px solid #1e90ff;    /* Blue */
}
table.imbox-speedy {
	border: 3px solid #b22222;    /* Red */
	background: #fee;             /* Pink */
}
table.imbox-delete {
	border: 3px solid #b22222;    /* Red */
}
table.imbox-content {
	border: 3px solid #f28500;    /* Orange */
}
table.imbox-style {
	border: 3px solid #f4c430;    /* Yellow */
}
table.imbox-move {
	border: 3px solid #9932cc;    /* Purple */
}
table.imbox-protection {
	border: 3px solid #bba;       /* Gray-gold */
}
table.imbox-license {
	border: 3px solid #88a;       /* Dark gray */
	background: #f7f8ff;          /* Light gray */
}
table.imbox-featured {
	border: 3px solid #cba135;    /* Brown-gold */
}
 
/* Category message box styles */
table.cmbox {
	margin: 3px 10%;
	border-collapse: collapse;
	border: 1px solid #aaa;
	background: #DFE8FF;    /* Default "notice" blue */
}
 
table.cmbox-notice {
	background: #D8E8FF;    /* Blue */
}
table.cmbox-speedy {
	margin-top: 4px;
	margin-bottom: 4px;
	border: 4px solid #b22222;    /* Red */
	background: #FFDBDB;          /* Pink */
}
table.cmbox-delete {
	background: #FFDBDB;    /* Red */
}
table.cmbox-content {
	background: #FFE7CE;    /* Orange */
}
table.cmbox-style {
	background: #FFF9DB;    /* Yellow */
}
table.cmbox-move {
	background: #E4D8FF;    /* Purple */
}
table.cmbox-protection {
	background: #EFEFE1;    /* Gray-gold */
}
 
/* Other pages message box styles */
table.ombox {
	margin: 4px 10%;
	border-collapse: collapse;
	border: 1px solid #aaa;       /* Default "notice" gray */
	background: #f9f9f9;
}
 
table.ombox-notice {
	border: 1px solid #aaa;       /* Gray */
}
table.ombox-speedy {
	border: 2px solid #b22222;    /* Red */
	background: #fee;             /* Pink */
}
table.ombox-delete {
	border: 2px solid #b22222;    /* Red */
}
table.ombox-content {
	border: 1px solid #f28500;    /* Orange */
}
table.ombox-style {
	border: 1px solid #f4c430;    /* Yellow */
}
table.ombox-move {
	border: 1px solid #9932cc;    /* Purple */
}
table.ombox-protection {
	border: 2px solid #bba;       /* Gray-gold */
}

/* Allow limiting of which header levels are shown in a TOC;
   <div class="toclimit-3">, for instance, will limit to
   showing ==headings== and ===headings=== but no further
   (as long as there are no =headings= on the page, which
   there shouldn't be according to the MoS). */
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul {
    display: none;
}

.thisisafuckingborder * {
    border-spacing: 0px;
    border-collapse: separate;  
    border-radius: 5px;
    border:1px solid black;
    margin:15px;
    font-family: sans-serif;
    font-size: 1em;
    
}
.thisisafuckingborder th {
  background-color: #92d3fa; 
  color:#333333
}
.thisisafuckingborder a {
  border-style: none !important;
}
.thisisafuckingborder td {
  padding:6px;
  background-color:#F6F6F6;
}

/* For template documentation */
.template-documentation {
	clear: both;
	margin: 1em 0 0 0;
	border: 1px solid #aaa;
	background-color: #ecfcf4;
	padding: 1em;
}

/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript
   in [[MediaWiki:Common.js]] are styled here so they can be customised. */
.collapseButton {
	/* @noflip */
	float: right;
	font-weight: normal;
	/* @noflip */
	margin-left: 0.5em;
	/* @noflip */
	text-align: right;
	width: auto;
}
/* In navboxes, the show/hide button balances the v·d·e links
   from [[Template:Navbar]], so they need to be the same width. */
.navbox .collapseButton {
	width: 6em;
}
 
/* Styling for JQuery makeCollapsible, matching that of collapseButton */
.mw-collapsible-toggle {
	font-weight: normal;
	/* @noflip */
	text-align: right;
}
.navbox .mw-collapsible-toggle {
	width: 6em;
}

/* Standard Navigationsleisten, aka box hiding thingy
from .de.  Documentation at [[Wikipedia:NavFrame]]. */
div.NavFrame {
	margin: 0;
	padding: 4px;
	border: 1px solid #aaa;
	text-align: center;
	border-collapse: collapse;
	font-size: 95%;
}
	div.NavFrame + div.NavFrame {
	border-top-style: none;
	border-top-style: hidden;
}
div.NavPic {
	background-color: #fff;
	margin: 0;
	padding: 2px;
	/* @noflip */
	float: left;
}
div.NavFrame div.NavHead {
	line-height: 1.6em;
	font-weight: bold;
	background-color: #ccf;
	position: relative;
}
div.NavFrame p,
div.NavFrame div.NavContent,
div.NavFrame div.NavContent p {
	font-size: 100%;
}
div.NavEnd {
	margin: 0;
	padding: 0;
	line-height: 1px;
	clear: both;
}
a.NavToggle {
	position: absolute;
	top: 0;
	/* @noflip */
	right: 3px;
	font-weight: normal;
	font-size: 90%;
}
 /* Fix table style*/
tr.fix {
	position: fixed;
	top: 0;
	margin-left: 0;
}
 
table.fix {
	margin-top: 0px;
}
/*Signature CSS - Yay!*/
#sigadmin {
	overflow:hidden;
	border:3px solid #990012;
	width:50px;
	border-radius:5px;
	float:left;
	margin-right:8px;
	margin-bottom:2px;
}

/* Styling for branching tables
Added by: がか
----------------------------------------------------------------------*/
table.wikitable.branching-table > * > tr > td {
    border-left: none;
    border-right: none;
}
 
table.wikitable.branching-table {
    border: 1px #aaa solid;
}
 
table.branching-table {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    overflow: hidden;
}
 
table.branching-table > tbody > tr:first-child > th {
    -webkit-border-radius: 13;
    -moz-border-radius: 13;
    border-radius: 13px;
    font-family: Arial;
    color: #ffffff;
    font-size: 15px;
    background: #3baef5;
    padding: 4px 5px 4px 5px;
    text-decoration: none;
    max-width:300px;
    text-align:center;
}

table.branching-table > tbody > tr:first-child > th:hover {
    background: #2b9ce3;
    text-decoration: none;
}

table.branching-table > tbody > tr:first-child > th:active {
    background: #1d90d8;
    text-decoration: none;
}

table.branching-table > tbody > tr:first-child > th:focus {
    outline:0 !important;
}

/* ROUTE TEMPLATE
Added by: dragonjet
Origin from Wikia
----------------------------------------------*/
.maproute{
    display: inline-block;
    font-weight:bold;
    color:#fff;
}
.maproute .mapnode{
    float:left;
    margin:0px 3px 0px 0px;
    width:20px;
    height:20px;
    border:2px solid #ccc;
    border-radius:12px;
    text-align:center;
    line-height:20px; 
}
.maproute .mapnodewide{
    float:left;
    margin:0px 3px 0px 0px;
    width:40px;
    height:20px;
    border:2px solid #ccc;
    border-radius:12px;
    text-align:center;
    line-height:20px; 
}
/* Fade in Fade out */

.fadein {
    opacity: 0.0;
    filter: alpha(opacity=0); /* For IE8 and earlier */
    -webkit-transition: 0.4s ease-in-out;
    -moz-transition: 0.4s ease-in-out;
    -o-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out;
}

.fadein:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

/* Event Banners */
.eventBanner01 {
    background: url(images/f/ff/Spring_2013_Event_Banner.jpg) no-repeat center center;
}

.eventBanner02 {
    background: url(images/b/bf/Summer_2013_Event_Banner.jpg) no-repeat center center;
}

.eventBanner03 {
    background: url(images/e/ec/Fall_2013_Event_Banner.jpg) no-repeat center center;
}

.eventBanner04 {
    background: url(images/4/4e/Christmas_2013_Event_Banner.jpg) no-repeat center center;
}

.eventBanner05 {
    background: url(images/7/7d/Spring_2014_Event_Banner.jpg) no-repeat center center;
}

.eventBanner06 {
    background: url(images/0/0a/Summer_2014_Event_Banner.jpg) no-repeat center center;
}

.eventBanner07 {
    background: url(images/5/5d/Fall_2014_Event_Banner.jpg) no-repeat center center;
}

.eventBanner08 {
    background: url(images/3/38/Winter_2015_Event_Banner.jpg) no-repeat center center;
}

.eventBanner09 {
    background: url(images/5/56/Spring_2015_Event_Banner.jpg) no-repeat center center;
}

.eventBanner10 {
    background: url(images/b/b6/Summer_2015_Event_Banner.png) no-repeat center center;
}

.eventBanner11 {
    background: url(images/2/23/Fall_2015_Event_Banner.png) no-repeat center center;
}

.eventBanner12 {
    background: url(images/d/d4/Winter_2016_Event_Banner.png) no-repeat center center;
}

.eventBanner13 {
	background: url(images/2/2b/Spring_2016_Event_Banner.png) no-repeat center center;
}

.eventBanner14 {
	background: url(images/f/f5/Summer_2016_Event_Banner.png) no-repeat center center;
}

.eventBanner15 {
    background: url(images/b/b7/Fall_2016_Event_Banner.png) no-repeat center center;
}

.eventBanner16 {
    background: url(images/c/c2/Winter_2017_Event_Banner.jpg) no-repeat center center;
}

.eventBanner17 {
    background: url(images/3/38/Spring_2017_Event_Banner.png) no-repeat center center;
}

.eventBanner18 {
    background: url(images/9/9d/Summer_2017_Event_Banner.png) no-repeat center center;
}

.eventBanner19 {
    background: url(images/8/85/Fall_2017_Event_Banner.png) no-repeat center center;
}

.eventBanner20 {
    background: url(images/5/5a/Winter_2018_Event_Banner.png) no-repeat center center;
}

.eventBanner21 {
    background: url(images/b/b8/Early_Fall_2018_Event_Banner.png) no-repeat center center;
}

.eventBanner22 {
    background: url(images/9/9e/Winter_2019_Event_Banner.png) no-repeat center center;
}

.eventBanner23 {
    background: url(images/0/0a/Spring_2019_Event_Banner.png) no-repeat center center;
}
.eventBanner24 {
    background: url(images/6/6c/Summer_2019_Event_Banner.png) no-repeat center center;
}
.eventBanner25 {
    background: url(images/4/40/Fall_2019_Event_Banner.png) no-repeat center center;
}
.eventBanner26 {
    background: url(images/e/e9/Hinamatsuri_2020_Mini-Event_Banner.png) no-repeat center center;
}
.eventBanner27 {
    background: url(images/e/e5/Rainy-Summer_2020_Event_Banner.png) no-repeat center center;
}
.eventBanner28 {
    background: url(images/6/60/Fall_2020_Event_Banner.png) no-repeat center center;
}
.eventBanner29 {
    background: url(images/2/28/Fall_2020_Event_Banner_EO.png) no-repeat center center;
}
.eventBanner30 {
    background: url(images/e/e8/Spring_2021_Event_Banner.png) no-repeat center center;
}
.eventBanner31 { 
    background: url(images/7/76/Summer_2021_Event_Banner.png) no-repeat center center;
}
.eventBanner32 {
	background: url(images/3/3c/Fall_2021_Event_Banner.png) no-repeat center center;
}
.eventBanner33 {
	background: url(images/d/d8/Fall_2021_Event_Banner_EO.png) no-repeat center center;
}
.eventBanner34 {
	background: url(images/a/a0/Winter_2022_Event_Banner.png) no-repeat center center;
}
/* Some generic classes. */

.explain {
  border-bottom: 1px dotted;
  cursor: help;
}

.article-table {
  background: #fafafa;
  border-collapse: collapse;
  margin: 1em 1em 1em 0;
}

.article-table th {
  background: #f2f2f2;
}

.article-table td, .article-table th {
  border-bottom: 1px solid #c3c6c6;
  padding: 6px 12px;
}

.article-table caption {
  font-weight: 700;
}

/* 
    From https://gbf.wiki/MediaWiki:Common.css 
    Provides the classes used by Template:Tooltip
    Author: Tsubakura
*/

.tooltip {
  position: relative;
  display: inline;
  border-bottom: 1px dotted black;
  font-size: inherit;
  /*padding: inherit;*/
}
 
.tooltiptext {
  visibility: hidden;
  padding: 12px 14px;
 
  position: absolute;
  left: 50%;
  bottom: calc(20px + 100%);
  z-index: 99999;
 
  background: #fff;
  box-shadow: 0 2px 0 0 rgba(0,0,0,0.15);
  border: 1px solid #a2a9b1;
  border-radius: 2px;
 
  white-space: nowrap;
  font-weight: normal;
  font-style: normal;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
}
 
.tooltiptext:after,
.tooltiptext:before {
  content: '';
  position: absolute;
  left: 50%;
  border-style: solid;
}
 
.tooltiptext:after {
  top: 100%;
  bottom: auto;
  width: 20px;
  height: 20px;
  background: #fff;
  margin-top: -10px;
  margin-left: -10px;
  box-shadow: 1px 1px 0px #a2a9b1;
  transform: rotate(45deg);
  border-width: 0;
}
 
.tooltiptext:before {
  top: 100%;
  bottom: auto;
  border-width: 18px;
  margin-left: -18px;
  border-color: rgba(0,0,0,0.15) transparent transparent transparent;
  pointer-events: none;
}
 
.tooltip .tooltip .tooltiptext,
.header-fixed-helper .tooltip .tooltiptext {
  bottom: auto;
  top: calc(20px + 100%);
}
 
.tooltip .tooltip .tooltiptext:after,
.header-fixed-helper .tooltip .tooltiptext:after {
  top: auto;
  bottom: 100%;
  border-width: 15px;
  margin-left: -15px;
  border-color: transparent transparent white transparent;
  width: 0;
  height: 0;
  box-shadow: none;
  background: none;
  transform: none;
}
 
.tooltip .tooltip .tooltiptext:before,
.header-fixed-helper .tooltip .tooltiptext:before {
  top: auto;
  bottom: 100%;
  border-width: 16px;
  margin-left: -16px;
  border-color: transparent transparent #888 transparent;
}
 
.tooltiptext span.hr {
    display: block;
    height: 1px;
    background-color: #a2a9b1;
}
 
.tooltiptext hr,
.tooltiptext span.hr {
  margin: 10px 0 12px;
  position: relative;
  background: none;
}
 
.tooltiptext hr:after,
.tooltiptext span.hr:after {
  content: '';
  display: block;
  width: 100%;
  height: 1px !important;
  position: absolute;
  left: -14px;
  background: #a2a9b1;
  padding: 0 14px;
}
 
.tooltip:hover > .tooltiptext,
.tooltip.hover > .tooltiptext {
  visibility: visible;
}
 
.tooltiptext {
  opacity: 0;
  transition: opacity 200ms ease, visibility 0s ease 200ms, transform 200ms ease;
  transform: translate(-50%, 8px);
}
 
.tooltip .tooltip .tooltiptext,
.header-fixed-helper .tooltip .tooltiptext {
  transform: translate(-50%, -8px);
}
 
.tooltip:hover > .tooltiptext,
.tooltip.hover > .tooltiptext {
  opacity: 1;
  transition-delay: 0s;
  transform: translate(-50%, 0);
}
 
.tooltiptext a { color: #0645ad; border-bottom: 0; }
.tooltiptext a:visited { color: #0b0080; }
.tooltiptext a:active { color: #faa700; }
.tooltiptext a:hover, a:focus { text-decoration: underline; }
.tooltiptext { color: #252525; }
.tooltiptext a.new { color: #ba0000; }

.mw-body-content { z-index: auto !important;}

/* 
    Provides the classes used by Template:Map/ImageNode
    Author: gaka
    Added by: Tsubakura
*/

.map-nodes {
  max-height: 500px;
  overflow: auto;
}

.map-nodes > div {
  text-align: center;
}

.map-nodes > table {
  width: 100%;
}

.map-image {
  position: relative;
}

.map-image > span {
  position: absolute;
  width: 40px;
  height: 40px;
  border: none;
}

.map-image > span > a {
  display: block;
  width: 40px;
  height: 40px;
}

/* Template:Event/Route class
Author: gaka
Added by: Tsubakura
----------------------------------------------------------------------*/
.map-route-node {
    display: inline-block;
    min-width: 20px;
    line-height: 20px;
    text-align: center;
    padding: 2px;
    border-radius: 100%;
    box-shadow: 0 0 4px rgba(0, 0, 0, .8);
}

/**
 * Quest templates support.
 */

.qr {
	display: inline-block;
	position: relative;
	text-align: center;
	vertical-align: top;
}

.qrt {
	font-size: 10px;
	line-height: 12px;
	width: 90px;
}

.qrt2 {
    line-height: 14px;
    font-size: 14px;
	width: 175px;
}

.qrt3 {
	font-size: 14px;
	line-height: 14px;
	width: 240px;
}

.qrt4 {
	font-size: 14px;
	line-height: 14px;
	width: 90px;
}

.qrq {
	color: #ff6611;
	position: absolute;
	top: 40px;
	right: 15px;
	text-shadow: -1px -1px 4px #fff, 1px 1px 4px #fff, -1px 1px 4px #fff, 1px -1px 4px #fff;
	pointer-events: none;
	font-size: 18px;
	font-weight: bold;
}

.qrs {
	color: #ff6611;
	position: absolute;
	top: -5px;
	right: 15px;
	text-shadow: -1px -1px 4px #fff, 1px 1px 4px #fff, -1px 1px 4px #fff, 1px -1px 4px #fff;
	pointer-events: none;
	font-size: 18px;
	font-weight: bold;
}

.q {
	margin: auto;
	text-align: center;
	min-width: 800px;
	max-width: 1200px;
}

.q1 { border-top: 3px solid #888; }
.q2 { width: 60px; float: left; }
.q3 { display: inline-block; }
.q4 { text-align: left; }
.q5 { background-color: #f0fff0 !important; }
.q6 { background-color: #fdf5e6 !important; }
.q7 { background-color: #fcfcfc !important; }
.q8 { background-color: #ffe4b5 !important; }

.q01 { background-color: #42c165 !important; }
.q02 { background-color: #e7696b !important; }
.q03 { background-color: #90cb65 !important; }
.q04 { background-color: #46c6c2 !important; }
.q05 { background-color: #e6c872 !important; }
.q06 { background-color: #897056 !important; }
.q07 { background-color: #cbaae5 !important; }

.qw1 { max-width: 150px !important; min-width: 150px !important; }
.qw2 { max-width: 320px !important; min-width: 320px !important; }

.qs1 { border: 2px red solid; padding: 2px; }

.qs2 {
	position: relative;
	display: inline;
}

.qs3 {
	font-size: 10px;
	font-weight: 800;
	position: absolute;
	pointer-events: none;
	color: #000;
	top: 14px;
	right: 1px;
	text-shadow: #fff 0 0 1px, #fff 0 0 1px, #fff 0 0 1px, #fff 0 0 1px, #fff 0 0 1px, #fff 0 0 1px, #fff 0 0 1px, #fff 0 0 1px, #fff 0 0 1px, #fff 0 0 1px, #fff 0 0 1px, #fff 0 0 1px, #fff 0 0 1px, #fff 0 0 1px, #fff 0 0 1px;
}

/* Template:Quest support.
Added by: がか
Imported from wikia by: Chocolatecravinghobo
Used by: Module:View/Quest
----------------------------------------------*/
/*
.qA > td { border-top: 2px solid #808080; }
.qA > td:nth-child(1) { background: #43C769; }
.qA > td:nth-child(2) { background: #D7F3C7; }
.qdA { height: 60px; }
.qdA > td:nth-child(2n+2) { background: #DBE6D5; }
.qdA > td:nth-child(4n+3) { background: #F2F7F0; }

.qB > td { border-top: 2px solid #808080; }
.qB > td:nth-child(1) { background: #EC6063; }
.qB > td:nth-child(2) { background: #F3DCDC; }
.qdB { height: 60px; }
.qdB > td:nth-child(2n+2) { background: #EDE2E2; }
.qdB > td:nth-child(4n+3) { background: #FCF8F8; }

.qC > td { border-top: 2px solid #808080; }
.qC > td:nth-child(1) { background: #93CE67; }
.qC > td:nth-child(2) { background: #E5F3DB; }
.qdC { height: 60px; }
.qdC > td:nth-child(2n+2) { background: #E6EDE0; }
.qdC > td:nth-child(4n+3) { background: #F8FAF5; }

.qD > td { border-top: 2px solid #808080; }
.qD > td:nth-child(1) { background: #4EBBD4; }
.qD > td:nth-child(2) { background: #DFF0F9; }
.qdD { height: 60px; }
.qdD > td:nth-child(2n+2) { background: #E8EDF0; }
.qdD > td:nth-child(4n+3) { background: #F1F7FA; }

.qE > td { border-top: 2px solid #808080; }
.qE > td:nth-child(1) { background: #DEC772; }
.qE > td:nth-child(2) { background: #F0E4B5; }
.qdE { height: 60px; }
.qdE > td:nth-child(2n+2) { background: #DDD9C8; }
.qdE > td:nth-child(4n+3) { background: #F5F2E4; }

.qF > td { border-top: 2px solid #808080; }
.qF > td:nth-child(1) { background: #BA8F79; }
.qF > td:nth-child(2) { background: #D9B38C; }
.qdF { height: 60px; }
.qdF > td:nth-child(2n+2) { background: #C6B39F; }
.qdF > td:nth-child(4n+3) { background: #F3ECE6; }

.qG > td { border-top: 2px solid #808080; }
.qG > td:nth-child(1) { background: #CAA6DD; }
.qG > td:nth-child(2) { background: #EFE8F7; }
.qdG { height: 60px; }
.qdG > td:nth-child(2n+2) { background: #EFEBF3; }
.qdG > td:nth-child(4n+3) { background: #FAF8FC; }

.qW > td { border-top: 2px solid #808080; }
.qW > td:nth-child(1) { background: #FDD0F0; }
.qW > td:nth-child(2) { background: #F6ECFF; }
.qdW { height: 60px; }
.qdW > td:nth-child(2n+2) { background: #F5F3F8; }
.qdW > td:nth-child(4n+3) { background: #FFF7FF; }
*/

/* ----------------------------------------------*/

/**
 * Stacked images with transitions on mouseover. Used on ship pages.
 */
.double-image {
  position: relative;
}

.double-image > div {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}

.double-image > .bottom-image {
  opacity: 0;
}

.double-image > .bottom-image:hover {
  opacity: 1;
}


/* GRAYSCALE WORKAROUND FOR LUA
Added by: ckwng

Wikia does not allow filter in in-line CSS generated by Lua #invokes apparently. Use site css to workaround.
Imported from wikia at request of: Chocolatecravinghobo
Used by: Template:ShipBattleCardKai & Module:BaseAsset
----------------------------------------------*/
.grayscale-wrapper {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
/* ----------------------------------------------*/

/* Development Tables Column Colours
Used by: Template:DevelopmentByEquipment & Template:DevelopmentSecretaryCol
Added by: Chocolatecravinghobo
----------------------------------------------*/
.dev-s1 { background-color: #eef5ff !important; }
.dev-s2 { background-color: #ffeeee !important; }
.dev-s3 { background-color: #eeffcc !important; }
.dev-s4 { background-color: #a2c8ff !important; }
.dev-s0 { background-color: #aaffcc !important; }

.dev-f_s { background-color: #aaffaa !important; }
.dev-a { background-color: #ffaaaa !important; }
.dev-b { background-color: #ffffaa !important; }
/* ----------------------------------------------*/

.explain-dash {
    border-bottom: 1px dashed;
    cursor: help;
}
Retrieved from "https://en.kancollewiki.net/w/index.php?title=MediaWiki:Common.css&oldid=175005"