Template:Team:Berkeley/css2

From 2013.igem.org

Revision as of 05:19, 18 October 2013 by HojaeLee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

topmenu {

       display: block;
       position: fixed;
       top: 0;
       width: 89.06244%;
       padding: 0 5.46878%;
       height: 80px;
       background: url('https://static.igem.org/mediawiki/2013/1/1d/Top-gradient.png') #f1f1f1 repeat-x left top;
       border-top: 1px solid #0d9c64;
       box-shadow: 0 0 5px #888;
       z-index: 10;}

topmenu .selflink {font-weight: normal !important; color: #0d9c64; cursor: default; padding: 0 12px 0 8px;}
topmenu .menucenter li:hover .selflink {padding: 0 11px 0 9px}

topmenu .menucenter{position: relative; display: block; line-height: 80px;}

topmenu .menuleft {position: absolute; line-height: 76px; z-index: 3;}
topmenu .menuleft a img {position: relative; height: 60px; top: 10px;}

topmenu .menucenter {

   display:block;
   margin: 0 auto;
   width:100%;
   text-align: center;
   font-size: 0;}
   #topmenu .menucenter li {
       display:inline-block;
       margin: 0;
       background: url('https://static.igem.org/mediawiki/2013/c/ca/Top-menu-divider.png') no-repeat right top;
       font-size: 16px;}
   #topmenu .menucenter li:first-child {
       background: url('https://static.igem.org/mediawiki/2013/c/ca/Top-menu-divider.png') no-repeat left top, url('https://static.igem.org/mediawiki/2013/c/ca/Top-menu-divider.png') no-repeat right top;}
   #topmenu .menucenter li:hover {
       background: url('https://static.igem.org/mediawiki/2013/0/03/Top-menu-hover.png') repeat-x top left; 
       border-left:1px solid #ccc;
       border-right:1px solid #ccc;
       margin: 0 0 0 -2px;}
       #topmenu .menucenter li a {display:block; height: 79px; padding: 0 12px 0 8px;}
       #topmenu .menucenter li:hover a {padding: 0 11px 0 9px}

topmenu .menuright {position: absolute; display: block; width: 109px; height: 80px; right: 5.46878%; top: 0; z-index: 3;}

topmenu .menuright a{display: inline-block; position: relative;}

   #topmenu .menuright a.twitter {
       display:block;
       float: left;
       width: 36px;
       height: 30px;
       margin-top: 25px;
       padding: 0;
       background: url('https://static.igem.org/mediawiki/2013/d/de/Twitterbtn.png') left top no-repeat;
   }
   #topmenu .menuright a.facebook {
       display:block;
       float: left;
       width: 36px;
       height: 34px;
       margin-top: 23px;
       padding: 0;
       background: url('https://static.igem.org/mediawiki/2013/7/7c/Facebookbtn.png') left top no-repeat;
   }
   #topmenu .menuright a.mail {
       display:block;
       float: left;
       width: 37px;
       height: 29px;
       margin-top: 26px;
       padding: 0;
       background: url('https://static.igem.org/mediawiki/2013/9/94/Mailbtn.png') left top no-repeat;
   }
   #topmenu .menuright a:hover {
       background-position: right top;
   }

topmenu ul, topmenu li {

   -webkit-margin-before: 0;
   -webkit-margin-after: 0;
   -webkit-padding-start: 0;}

bodyContent{padding: 81px 0 0px;}

/* Navigation - Submenu

*/

ul.subs {

   display: block;
   position: fixed;
   top: -165px;
   left: 0;
   width: 100%;
   height: 160px;
   box-shadow: 0 0 5px #ccc;
   background: url('https://static.igem.org/mediawiki/2013/2/28/Sub-bg.png') repeat-x top left;
   text-align: center;
   z-index: 5;
      -webkit-transition: all .3s ease-in-out;
          -moz-transition: all .3s ease-in-out;
                    transition: all .3s ease-in-out;}

ul.subs.active {

   top: 79px;
   left: 0;}

ul.subs li:first-child {padding-left: 5px; background:url('http://beoplay.com/resources/sbv-custom/img/megamenu/mm_divider.png') no-repeat right center, url('http://beoplay.com/resources/sbv-custom/img/megamenu/mm_divider.png') no-repeat left center; } ul.subs li {

   display:inline-block;
   width: 10%;
   max-width: 180px;
   font-family: 'Source Sans Pro', sans-serif;
   font-size:13px;
   vertical-align: top;
   padding: 0 5px 0 0;
   background: url('http://beoplay.com/resources/sbv-custom/img/megamenu/mm_divider.png') no-repeat right center;}

ul.subs li:hover {

   background: url('http://beoplay.com/resources/sbv-custom/img/megamenu/mm_hover_bg.png') no-repeat top right;
   background-size: cover;
   margin: 0 0 0 -6px;
   padding: 0 5px 0 6px;

} ul.subs li:first-child:hover {padding: 0 5px 0 4px; margin-left: 1px; } ul.subs li a {

   display: block;
   padding: 40px 0 0;
   height: 120px;
   line-height: 16px;

}

ul.subs li a img {padding-bottom: 10px;}

ul.subs li .selflink img {padding-bottom: 10px;} ul.subs .selflink {display:block; font-weight: normal !important; color: #0d9c64; cursor: default; padding: 40px 0 0; height: 120px; line-height: 16px;}

.tournav {

   height: 74px;
   background: url('https://static.igem.org/mediawiki/2013/9/92/Footerline.png') left bottom repeat-x;

}

.tournav ul {

   width: 89.06244%;
   margin: 0 5.46878%;

}

   .tournav ul li {
       display: block;
       position: relative;
       float: left;
       width: 11.11111111%;
       font-size: 10px;
       text-align: center;
       line-height: 14px;
       background: url('https://static.igem.org/mediawiki/2013/a/a7/Progress2sm.png') center top no-repeat;
       color: #ccc;
   }

   .tournav ul li a {
       display:block;
       padding-top: 42px;
       color: #ccc;}
   .tournav ul li a:hover {
       color: rgb(19,162,102);}

/* Tournav begin

*/

   .tournav ul .first{
       background: url('https://static.igem.org/mediawiki/2013/6/64/Progress1.png') center top no-repeat;
       color: rgb(19,162,102);
   }
   .tournav ul .first.pad{padding-top: 42px;}

   .tournav ul .firstbgsm.fill{
       background: url('https://static.igem.org/mediawiki/2013/2/2d/Progress1fillbgsm.png') center top no-repeat !important;
   }
   .tournav ul .firstbgsm.fill a{color: #333;}
   .tournav ul .firstbgsm.fill a:hover{color: rgb(19,162,102);}
   .tournav ul .first.fill {
       background: url('https://static.igem.org/mediawiki/2013/2/25/Progress1fill.png') center top no-repeat !important;
       color: #ccc;
   }

/* Tournav verloop klein -> klein (standaard behalve fill)

*/

   .tournav ul .fill {
       background: url('https://static.igem.org/mediawiki/2013/c/ca/Progress2fillsm.png') center top no-repeat !important;
   }

/* Tournav verloop groot -> groot

*/

   .tournav ul .bgbg {
       background: url('https://static.igem.org/mediawiki/2013/a/a1/Progress2.png') center top no-repeat !important;
   }
   .tournav ul .bgbg a{color: #333;}
   .tournav ul .bgbg a:hover{color: rgb(19,162,102);}
   .tournav ul .bgbg.current {
       background: url('https://static.igem.org/mediawiki/2013/1/1e/Progress2current.png') center top no-repeat !important;
       color: rgb(19,162,102);
       padding-top: 42px;
   }
   .tournav ul .bgbg.fill {
       background: url('https://static.igem.org/mediawiki/2013/b/b0/Progress2fill.png') center top no-repeat !important;
   }

/* Tournav verloop klein -> groot

*/

   .tournav ul .smbg {
       background: url('https://static.igem.org/mediawiki/2013/b/b8/Progress2smbg.png') center top no-repeat !important;
   }
   .tournav ul .smbg a{color: #333;}
   .tournav ul .smbg a:hover{color: rgb(19,162,102);}
   .tournav ul .smbg.current {
       background: url('https://static.igem.org/mediawiki/2013/1/18/Progress2currentsmbg.png') center top no-repeat !important;
       color: rgb(19,162,102);
       padding-top: 42px;
   }
   .tournav ul .smbg.fill {
       background: url('https://static.igem.org/mediawiki/2013/5/5c/Progress2fillsmbg.png') center top no-repeat !important;
   }

/* Tournav verloop groot -> klein

*/

   .tournav ul .bgsm {
       background: url('https://static.igem.org/mediawiki/2013/2/23/Progress2bgsm.png') center top no-repeat !important;
   }    
   .tournav ul .bgsm a{color: #333;}
   .tournav ul .bgsm a:hover{color: rgb(19,162,102);}
   .tournav ul .bgsm a{color: #333;}
   .tournav ul .bgbg.fill a:hover{color: rgb(19,162,102);}
   .tournav ul .bgsm.current {
       background: url('https://static.igem.org/mediawiki/2013/a/ae/Progress2currentbgsm.png') center top no-repeat !important;
       color: rgb(19,162,102);
       padding-top: 42px;
   }
   .tournav ul .bgsm.fill {
       background: url('https://static.igem.org/mediawiki/2013/c/ce/Progress2fillbgsm.png') center top no-repeat !important;
       color: rgb(19,162,102);
   }
   .tournav ul .bgsm.fill a{color: #333;}
   .tournav ul .bgsm.fill a:hover{color: rgb(19,162,102);}

/* Tournav verloop klein -> groot -> klein

*/

   .tournav ul .smbgsm {
       background: url('https://static.igem.org/mediawiki/2013/0/04/Progress2smbgsm.png') center top no-repeat !important;
   }
   .tournav ul .smbgsm a{color: #333;}
   .tournav ul .smbgsm a:hover{color: rgb(19,162,102);}
   .tournav ul .smbgsm.current {
       background: url('https://static.igem.org/mediawiki/2013/f/f6/Progress2currentsmbgsm.png') center top no-repeat !important;
       color: rgb(19,162,102);
       padding-top: 42px;
   }
   .tournav ul .smbgsm.fill {
       background: url('https://static.igem.org/mediawiki/2013/6/61/Progress2fillsmbgsm.png') center top no-repeat !important;
   }

/* Tournav end

*/

   .tournav ul .last {
       background: url('https://static.igem.org/mediawiki/2013/1/1c/Progress3.png') center top no-repeat;
   }
   .tournav ul .last.bg {
       background: url('https://static.igem.org/mediawiki/2013/5/53/Progress3bg.png') center top no-repeat !important;
   }
   .tournav ul .last.bg a{color: #333;}
   .tournav ul .last.bg a:hover{color: rgb(19,162,102);}
   .tournav ul .last.current {
       background: url('https://static.igem.org/mediawiki/2013/2/2a/Progress3current.png') center top no-repeat !important;
       color: rgb(19,162,102);
       padding-top: 42px;
   }

/* Navigation

*/

tabs {

   display: block;
   width: 89.06244%;
   height: 40px;
   position: absolute;
   left: 5.46878%;
   top: -40px;

}

tabs ul li {

   display: block;
   width: 19%;
   height: 40px;
   float: left;
   margin-right: 1.25%;
   background: #fff;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
   overflow: hidden;
   border: 1px solid #ccc;
   border-bottom-color: #0d9c64;
   -moz-box-sizing: border-box;
             box-sizing: border-box;

}

tabs ul li#li_tab1 a {

   background: url('https://static.igem.org/mediawiki/2013/b/ba/Aspergillusheader-icon.png') 10px 8px no-repeat;
   background-size: 20px auto;}

tabs ul li#li_tab2 a {

   background: url('https://static.igem.org/mediawiki/2013/6/6d/Secmetheader-icon.png') 7px 9px no-repeat;
   background-size: 24px auto;}

tabs ul li#li_tab3 a {

   background: url('https://static.igem.org/mediawiki/2013/2/29/Toolbox-icon.png') -10px 6px no-repeat;
   background-size: auto 28px;}

tabs ul li#li_tab4 a {

   background: url('https://static.igem.org/mediawiki/2013/6/63/Host-icon.png') -10px 6px no-repeat;
   background-size: auto 28px;}

tabs ul li#li_tab5 a {

   background: url('https://static.igem.org/mediawiki/2013/8/8e/Applications-icon.png') -10px 6px no-repeat;
   background-size: auto 28px;}

tabs ul li#li_tab5 {margin-right: 0;}

tabs ul li a {

   display: block;
   width: 100%;
   padding-left: 35px;
   line-height: 40px;
   color: #888;
   cursor:pointer;
   -moz-box-sizing: border-box;
             box-sizing: border-box;

}

tabs ul li a:hover {color: #0d9c64;}

tabs ul li.active {background: #f1f1f1; border-bottom: none;border-color: #0d9c64;}
tabs ul li.active a {color: #333;cursor: default;}