Template:Team:Berkeley/css2

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
 +
/* Main content area
 +
-------------------------------------------------*/
 +
 +
#wrapper {
 +
        position: relative;
 +
        width: 89.06244%;
 +
        padding: 0 5.46878%;
 +
        font-family: 'Source Sans Pro';
 +
}
 +
 +
#wrapper p {
 +
        font-family: 'Source Sans Pro';
 +
        font-size: 14px;
 +
        padding-bottom:1em;
 +
}
 +
 +
#wrapper .intro {
 +
        margin-top: -4px;
 +
        font-size: 14px;
 +
        text-align: justify;
 +
        font-family: 'Source Sans Pro';
 +
}
 +
 +
 +
 +
#wrapper .blok {
 +
    position: relative;
 +
    display:block;
 +
    float: left;
 +
    width: 30.701754%;
 +
    margin-bottom: 40px;
 +
    margin-right: 3.947368%;
 +
    background: #FFFFFF;
 +
    border-radius: 4px;
 +
    box-shadow: 0px -1px 1px 0px rgb(233, 233, 233), 1px 0px 1px 0px rgb(221, 221, 221), 2px 0px 1px 0px rgb(247, 247, 247), 0px 1px 1px 0px rgb(201, 201, 201), 0px 2px 1px 0px rgb(229, 229, 229), 0px -1px 1px 0px rgb(242, 242, 242) inset, -1px 0px 1px 0px rgb(221, 221, 221), -2px 0px 1px 0px rgb(247, 247, 247);
 +
    -webkit-transition: all .3s ease-in-out;
 +
      -moz-transition: all .3s ease-in-out;
 +
                transition: all .3s ease-in-out;}
 +
 +
#wrapper a.blok:hover {
 +
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .2);
 +
}
 +
 +
#wrapper a.blok p {
 +
    padding: 0 16px 16px;
 +
    -moz-box-sizing: border-box;
 +
      box-sizing: border-box;
 +
}
 +
 +
#wrapper .blok:nth-child(3n+3){margin-right: 0;}
 +
 +
#wrapper .blok .medalcontent {padding: 0 15px 0 75px;}
 +
#wrapper .blok .medalcontent:last-child(){padding-bottom: 15px;}
 +
 +
#wrapper .blok h2 {
 +
    width: 100%;
 +
    text-align: center;
 +
    font-family: 'Cabin';
 +
    font-weight: bold;
 +
    letter-spacing: 1px;
 +
    font-size: 20px;
 +
    line-height: 30px;
 +
    margin: 0 !important;}
 +
#wrapper .blok .medalcontent p {
 +
    position: relative;
 +
    font-family: 'Source Sans Pro';
 +
    font-size: 14px;}
 +
#wrapper .blok .medalcontent p.yes {}
 +
#wrapper .blok .medalcontent p.yes:before{
 +
                content:"";
 +
background:url('http://beauvillemedia.nl/igem/yes.png');
 +
position:absolute;
 +
                background-position: 0 0;
 +
top: 0px;
 +
left: -60px;
 +
width:50px;
 +
height:21px;
 +
display:inline-block;}
 +
#wrapper .blok .medalcontent p.no {}
 +
#wrapper .blok .medalcontent p.no:before{
 +
                content:"";
 +
background:url('http://beauvillemedia.nl/igem/no.png');
 +
position:absolute;
 +
                background-position: 0 0;
 +
top: 0px;
 +
left: -60px;
 +
width:50px;
 +
height:21px;
 +
display:inline-block;}
 +
#topmenu {
#topmenu {
         display: block;
         display: block;

Revision as of 03:46, 18 October 2013

/* Main content area

*/
  1. wrapper { 
       position: relative;
       width: 89.06244%;
       padding: 0 5.46878%;
       font-family: 'Source Sans Pro';

}

  1. wrapper p { 
       font-family: 'Source Sans Pro';
       font-size: 14px;
       padding-bottom:1em;

}

  1. wrapper .intro { 
       margin-top: -4px;
       font-size: 14px;
       text-align: justify;
       font-family: 'Source Sans Pro';

}


  1. wrapper .blok { 
   position: relative;
   display:block;
   float: left;
   width: 30.701754%;
   margin-bottom: 40px;
   margin-right: 3.947368%;
   background: #FFFFFF;
   border-radius: 4px;
   box-shadow: 0px -1px 1px 0px rgb(233, 233, 233), 1px 0px 1px 0px rgb(221, 221, 221), 2px 0px 1px 0px rgb(247, 247, 247), 0px 1px 1px 0px rgb(201, 201, 201), 0px 2px 1px 0px rgb(229, 229, 229), 0px -1px 1px 0px rgb(242, 242, 242) inset, -1px 0px 1px 0px rgb(221, 221, 221), -2px 0px 1px 0px rgb(247, 247, 247);
   -webkit-transition: all .3s ease-in-out;
      -moz-transition: all .3s ease-in-out;
                transition: all .3s ease-in-out;}
  1. wrapper a.blok:hover { 
   box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .2);

}

  1. wrapper a.blok p { 
   padding: 0 16px 16px;
   -moz-box-sizing: border-box;

box-sizing: border-box; }

  1. wrapper .blok:nth-child(3n+3){margin-right: 0;}
  1. wrapper .blok .medalcontent {padding: 0 15px 0 75px;}
  2. wrapper .blok .medalcontent:last-child(){padding-bottom: 15px;}
  1. wrapper .blok h2 { 
   width: 100%;
   text-align: center;
   font-family: 'Cabin';
   font-weight: bold;
   letter-spacing: 1px;
   font-size: 20px;
   line-height: 30px;
   margin: 0 !important;}
  1. wrapper .blok .medalcontent p { 
   position: relative;
   font-family: 'Source Sans Pro';
   font-size: 14px;}
  1. wrapper .blok .medalcontent p.yes {}
  2. wrapper .blok .medalcontent p.yes:before{ 
               content:"";

background:url('http://beauvillemedia.nl/igem/yes.png'); position:absolute; 

               background-position: 0 0;

top: 0px; left: -60px; width:50px; height:21px; display:inline-block;}

  1. wrapper .blok .medalcontent p.no {}
  2. wrapper .blok .medalcontent p.no:before{ 
               content:"";

background:url('http://beauvillemedia.nl/igem/no.png'); position:absolute; 

               background-position: 0 0;

top: 0px; left: -60px; width:50px; height:21px; display:inline-block;}

  1. 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;}
  1. topmenu .selflink {font-weight: normal !important; color: #0d9c64; cursor: default; padding: 0 12px 0 8px;}
  2. topmenu .menucenter li:hover .selflink {padding: 0 11px 0 9px}
  1. topmenu .menucenter{position: relative; display: block; line-height: 80px;}
  1. topmenu .menuleft {position: absolute; line-height: 76px; z-index: 3;}
  2. topmenu .menuleft a img {position: relative; height: 60px; top: 10px;}
  1. 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}
  1. topmenu .menuright {position: absolute; display: block; width: 109px; height: 80px; right: 5.46878%; top: 0; z-index: 3;}
  1. 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;
   }


  1. topmenu ul, topmenu li { 
   -webkit-margin-before: 0;
   -webkit-margin-after: 0;
   -webkit-padding-start: 0;}
  1. 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;
   }
Retrieved from "http://2013.igem.org/Template:Team:Berkeley/css2"