MediaWiki:WikiaNav.css

/* ================
   NEW NAV 1.2

   written by User:CzechOut 
   22 September 2012
   Latest version: 22 November 2015
   for use at tardis.wikia.com
   and released under the 
   CC-BY-SA 3.0 license

   Though almost all styling elements are
   unique to tardis, grateful acknowledgement 
   is certainly due to fellow code monkeys at
   memory-alpha.org, yoshi.wikia.com,
   all the respondents at
   [[community:Admin_Forum:Restyling_the_new_WikiHeader_navigation]],
   and various members of Wikia Staff
   ================

   On 3 October 2012, Wikia made compulsory a new
   system of top-of-page navigation which radically
   supplanted the previous drop-down-only notion. 

   This design is the homegrown tardis.wikia.com response to
   the new requirement.  */

/* ================ 
   BASICS 
   -- or --
   DEALING WITH 
   #WikiHeader
   ================ 

   +++++++++++++++
   Retaining artistic background
   from previous iteration of WikiHeader
   +++++++++++++++ */

.oasis-split-skin .WikiHeader > nav {
    -webkit-border-radius: 50%/15%;
       -moz-border-radius: 50%/15%;
        -ms-border-radius: 50%/15%;
         -o-border-radius: 50%/15%;
            border-radius: 50%/15%;
     padding-bottom:20px
}


#WikiHeader {
   font-size:10pt;
   padding-left:none;
   padding-right:none;
}

.WikiHeader .WikiNav {
   right:10px;
   
}
/*
nav.WikiNav {
    margin-top:10px;
}
*/
/* +++++++++++++++
   Removing border on top of tabs
   +++++++++++++++ */
.WikiHeader > nav li.marked > a,
.WikiHeader > nav li.marked > a:hover {
   border:none;
   background-color:whitesmoke;
   padding-left:none;
   padding-right:none;
   font-size:10pt;
}

.WikiHeader > nav li.marked > a:hover {
    text-decoration:underline;
}

/* +++++++++++++++
   Removing accent mark 
   under bottom and top row
   +++++++++++++++ */



.WikiHeader .navbackground { 
   background-color:transparent;
   font-size:10pt;
   width:96%; /* 575px keeps dividing line between tiers 
                  the width of the framing box */
} 

.WikiHeader .navbackground img {
    display:none!important;
}



/* ================
   Top row
   ================ */

/* +++++++++++++++
   Main style of WikiHeaderRestyle
   but because its margin-bottom is
   stretched, this effectively "creates an envelope/div"
   which becomes the most visible aspect of the nav
   the major style of the entire new nav.

   Alternately, think of this as the top row in an 
   unhovered state.
   +++++++++++++++ */

.WikiHeader > nav { 
   background:#FFF; /*url(https://images.wikia.nocookie.net/tardistest/images/c/ce/70opacitywhite.png);*/ 
   border:3px solid #012c57; 
     -moz-border-radius:15px; 
  -webkit-border-radius:15px;
       -o-border-radius:15px;
      -ms-border-radius:15px;
          border-radius:15px;
     -moz-box-shadow:0 0 40px #012c57;
  -webkit-box-shadow:0 0 40px #012c57;
       -o-box-shadow:0 0 40px #012c57;
      -ms-box-shadow:0 0 40px #012c57;
          box-shadow:0 0 40px #012c57;
   color:#012c57;
   font-family: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
   padding-bottom:32px; /* "extends the shields" around bottom tier */
   letter-spacing:1.5 px;
   font-weight:normal;
   text-transform:uppercase;
   /*margin-top:-20px; moves it all up beyond reach of search/user masthead */
   z-index:-10px; /* for kicks */
   font-size:10pt;
   /*top:55px;*/
}


/* +++++++++++++++
   Other styling
   +++++++++++++++ */

.WikiHeader > nav li {
   border: none;
   font-size:10pt;
   letter-spacing:2px;
   font-weight:bold;
}
.WikiHeader > nav li.marked {
   border:none;
   color:#012c57;
   background-color: transparent;
   text-decoration: none;
   font-size:10pt;
   letter-spacing:2px;
   text-transform:uppercase;
   font-weight:bold;
}

.WikiHeader > nav li.marked > a:hover {
   border:none;
   color:#012c57;
   text-decoration: none;
   font-size:10pt;
   letter-spacing:2px;
   text-transform:uppercase;
   font-weight:bold;
   background-color:transparent;
}

.WikiHeader > nav li.marked a {
   border: none;
   color:#012c57;
   font-family: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
   font-size:10pt;
   padding:none;
   font-weight:bold;
   text-transform:uppercase;
   letter-spacing:2px;
   background-color:transparent;
}

/* ================
   Bottom row
   ================ */

/* This is the main selector for the actual drop down */
 .WikiHeader > nav .subnav {
   background:transparent;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
  border:1px solid #012c57;
  -moz-box-shadow:0 0 40px #012c57;
  -webkit-box-shadow:0 0 40px #012c57;
  box-shadow:0 0 40px #012c57;
  color:#012c57;
  font-family: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
  padding:1px;
  line-height:8pt;
  font-size:9pt;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:2px;
  /*margin-top:-40px;*/
}
 
 
.WikiHeader > nav .subnav-2 accent {
  background-color: transparent;
}
 
.WikiHeader > nav .subnav-2 {
   border:none;
}
 
.WikiHeader > nav .subnav-2 li a.subnav-2a {
  background-color:transparent;
  color:#012c57;
  background-image:none;
  font-weight:bold;
  font-family: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
  text-transform:uppercase;
  letter-spacing:1px;
   width:auto;
    z-index: 100;
    display: block;
    border: 0px solid transparent;
    margin: 0px 0px 0px 0px;
    height: 25px;
    padding-left:7.5px;
    padding-right:3.5px;
}

  
.WikiHeader > nav .subnav-2 li.marked2 a.subnav-2a {
  background-color:transparent
}


.WikiHeader > nav li.marked .subnav-2 > li a:hover, 
.WikiHeader > nav li.marked .subnav-2 .marked2 a:hover { background-image: none; border: medium none; color: #012c57; font-family: 'Lucida Grande','Trebuchet MS','Gill Sans',Verdana,'URW Gothic L','Nimbus Sans L',sans-serif; font-weight: bold; }

/*
.WikiHeader > nav li.marked .subnav-2 > li a:hover, .WikiHeaderRestyle > nav li.marked .subnav-2 .marked2 a:hover { 

   background: none repeat scroll 0px 0px #D5D4F0 ; 
}
*/

.WikiHeader > nav .subnav-2 li a.subnav-2a:hover {
    color: rgb(47, 44, 184);
    background-color:none;
    font-weight: bold;
    font-family: 'Lucida Grande','Trebuchet MS','Gill Sans',Verdana,'URW Gothic L','Nimbus Sans L',sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: auto;
}


/* Keeping the hover background for tier 2 separate from tier 3 */
.WikiHeaderRestyle > nav li.marked .subnav-2 > li ul li:hover { background-color:#ececec; }

/* ================
   Floaty dropdown row
   ================ */

/* Get rid of annoying overlay of white */
.WikiHeader > nav .subnav-3 li {
   background:transparent 
}

.WikiHeader > nav .subnav-3 {
   background:#fff; 
    -webkit-border-radius: 10%;
       -moz-border-radius: 10%;
        -ms-border-radius: 10%;
         -o-border-radius: 10%;
            border-radius: 10%;
   border:1px solid #012c57;
      -moz-box-shadow:0 0 40px #012c57;
   -webkit-box-shadow:0 0 40px #012c57;
        -o-box-shadow:0 0 40px #012c57;
       -ms-box-shadow:0 0 40px #012c57;
           box-shadow:0 0 40px #012c57;
   color:#012c57;
   /*font-family: 'Book Antiqua','Calisto MT','Lucida Bright',Georgia,'DejaVu Serif',serif;*/
   font-family: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
   font-size:8pt;
   line-height:8pt;
   padding:5px;
   font-weight:bold;
   text-transform:uppercase;
   font-style:normal;
   /*margin-top:15px;*/
}
 
.WikiHeader > nav .subnav-3 li a {
  background-color:transparent;
  color:#012c57;
  background-image:none;
  font-weight:bold;
   font-family: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
  text-transform:uppercase;
  letter-spacing:0px;
  font-size:8pt;
  padding:5px;
  line-height:8pt;
  font-style:normal;
}
 
.WikiHeader > nav .subnav-3 li a:hover {
  background-color:whitesmoke;
  color:#012c57;
  border:none;
  font-weight:bold;
  background-image:none;
   font-family: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
  text-transform:uppercase;
  letter-spacing:0px;
  font-style:normal;
  padding:5px;
  line-height:8pt;
  }

/*
#WikiHeader li.subnav-3-item:first-child,
#WikiHeader li.subnav-3-item:first-child a {
    border-radius: 8px 8px 0 0;
}
#WikiHeader li.subnav-3-item:last-child,
#WikiHeader li.subnav-3-item:last-child a {
    border-radius: 0 0 8px 8px;
}
*/


/* =====================
   Things that have happened
   as a RESULT of New Nav, but
   which aren't strictly 
   PART OF New Nav
   ===================== */

/* +++++++++++++++++++++
   BASELINE FOR BOTH BUTTONS
   +++++++++++++++++++++ */

.WikiHeader .buttons .wikia-button, .WikiHeaderRestyle .buttons .wikia-menu-button {
    height: 20px;
    font-size: 12pt;
    font-weight:bold;
    vertical-align: top;
    z-index: 3;
    margin: 40px 0px 0px 0px;
}


/* +++++++++++++++++++++
   SHARE button
   +++++++++++++++++++++ */
.WikiHeader .buttons .contribute-button,
.WikiHeader .buttons .share-button {
    padding: 1px 0px 1px 3px!important;
    position: relative!important;
    margin-top: 40px!important;
    margin-right:10px!important;
    font-size:10pt;
    background:#012c57;
    color:white
}

.WikiHeader .buttons .share-button .share-dot {
    display: none;
}


/* ++++++++++++++++++++++
   CONTRIBUTE button  
   ++++++++++++++++++++++ */
/*
.wikia-menu-button.secondary.combined {
    padding: 1px 0px 1px 3px;
    margin-top: 40px!important;
    margin-left: 40px!important;
    margin-right:0px!important;
    font-size:12pt;
    background:#012c57;
    color:white
}
*/
/*
.wikia-menu-button.contribute.secondary.combined {
    padding: 1px 0px 1px 3px;
    margin-top: 40px!important;
    margin-left: 40px!important;
    margin-right:0px!important;
    font-size:12pt
}*/

.WikiHeader .buttons .contribute {
    padding-top: 2px;
    vertical-align: middle;
    margin-top: 40px;
    margin-right:10px;
    font-size: 14px;
    padding-bottom: 2px;
}


.sprite.contribute {
    display: none;
}

/* Trying to get some harmony of buttons
   Fixes prompted by Rappy 1 October 2013 */

.WikiHeader .buttons > .contribute:hover {
     color:#e2e2f0
}

/* Margins on buttons depending on whether 
   Share button is present */

.buttons nav {
    margin-right:100px
}
.buttons nav + a {
    margin-right:200px
}

/* Contribute drop down */

.WikiHeader .buttons .contribute ul {
   background:transparent url(https://images.wikia.nocookie.net/tardistest/images/c/ce/70opacitywhite.png); /* peek-a-boo, I see you! */
      -moz-border-radius:10px;
   -webkit-border-radius:0px 10px 10px 0;
           border-radius:10px;
   border:1px solid #012c57;
      -moz-box-shadow:0 0 40px #012c57;
   -webkit-box-shadow:0 0 40px #012c57;
           box-shadow:0 0 40px #012c57;
   color:#012c57;
   font-family: 'Book Antiqua','Calisto MT','Lucida Bright',Georgia,'DejaVu Serif',serif;
   font-size:9pt;
   line-height:8pt;
   padding:1px;
   font-weight:bold;
   text-transform:lowercase;
   font-style:italic;
   margin-top:2px;
   z-index:1007;
   width:auto;
}


.WikiHeader .buttons .contribute ul li a {
    line-height: 14px;
    background:none;
    border:none;
}

.WikiHeader .buttons .contribute ul { 
    border:#012c57 2px solid;
    background:transparent url(https://images.wikia.nocookie.net/tardistest/images/c/ce/70opacitywhite.png); 
}

.WikiHeader .buttons .contribute li {
    border:none;
    background:none;
} 

/* ++++++++++++++++++++++++++
   Discussion button 
   ++++++++++++++++++++++++++ */

.wikinav2 .WikiaPageHeader > .comments {
    margin: 2px 10px 0px;
    display: inline;
    background-color: transparent;
    border: none;
    color: #012c57;
    font-size:12pt;
}

.commentsbubble { 
   display:inline; 
   font-size:16pt;
   font-family: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
   font-style:normal;
   padding:5px
}
 
.commentsbubble:before { 
   content:" "; 
}
 
.commentsbubble:after { 
   content:" "; 
}


/* +++++++++++++++++++++++++++
   Pages on wiki thingie 
   +++++++++++++++++++++++++++ */

/* Fixing article tally */

.wikinav2 .WikiaPageHeader > .tally {
    position: absolute;
    right: 0px;
    top: 0px;
}

.wikinav2 .WikiaPageHeader > .tally span {
    font-family: 'Futura','Gill Sans','Helvetica Neue','Trebuchet MS',Verdana,'URW Gothic L','Nimbus Sans L',sans-serif;
    text-transform: uppercase;
    font-weight: normal;
    top: 40px;
    margin-top: 30px;
    margin-left: -110px;
}

body.mainpage .WikiaPageHeader > .tally span, body.mainpage .WikiaPageHeader > .tally em {
   /*margin-left:-500px;*/
}

/*
body.mainpage .wikinav2 .WikiaPageHeader > .tally { 
   margin-left:-550px; 
   display:none;
}
*/

body.mainpage .WikiaPageHeader > .tally span, 
body.mainpage .WikiaPageHeader > .tally em,
body.page-Doctor-Who-Wiki .wikinav2 .WikiaPageHeader > .tally span  {
   /*margin-left:-30px;*/
   /*display:none*/ 
}
/* This does work, but I'd have to create a specialised 
   main page css to make it FULLY work.  Might have to 
   do that eventually anyway. 
 
body.mainpage div.WikiaPageContentWrapper {
   background:#012c57;
   color:white;
}
*/
/* ===============
   Media queries
   =============== */
   
   @media screen and (max-width: 1023px) and (orientation:portrait) {
    .WikiHeader .buttons .contribute {
        vertical-align:auto;
        margin-top:-90px;
        margin-right:10px;
    }
    nav.WikiNav {
        width:98%;
        left:5px;
    }
    .WikiHeader > nav.WikiNav .navbackground,
    div#navbackground,
    #navbackground {
    width:95%;
    left:0;
    }
     #WikiHeader .wordmark,
     .WikiHeader .wordmark {
         margin-top:10px;
    }
}