Team:Wageningen UR/Templates/style.css

From 2013.igem.org

(Difference between revisions)
Line 551: Line 551:
     height: 60px;
     height: 60px;
     background: url(https://static.igem.org/mediawiki/2013/2/28/Sub-bg.png) left top repeat-x;
     background: url(https://static.igem.org/mediawiki/2013/2/28/Sub-bg.png) left top repeat-x;
-
    background-size: contain;
 
}
}

Revision as of 00:41, 29 July 2013

/* This will be our main css file added to the head with jquery's append() */

/* Reset Globals

*/

body, html, #globalWrapper, #content, p { background: transparent; margin: 0; padding: 0; border: 0 none transparent; 

       font-family: 'Open Sans', sans-serif;

font-size: 1em; 

       width: 100%;}

body { 

 background-color: #f1f1f1;

}

ol, ul, li { 

       list-style: none;
       -webkit-margin-before: 0;
       -webkit-margin-after: 0;
       -webkit-padding-start: 0;
       margin: 0;}

blockquote:before, blockquote:after, q:before, q:after {content: "";}

blockquote, q {quotes: "" "";}

a {text-decoration: none; color: #333;} a:visited {text-decoration: none; color: #333;} a:hover {text-decoration: none; color: #0d9c64;}

img, embed, object, video {max-width: 100%;}

.clearfix { 

   display: block;
   width: 100%;
   clear: both;

}

/* Fonts

*/

@import url('http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,latin-ext');

/* Overwrite the css for the top part of the page

*/
  1. p-logo,
  2. catlinks {display: none;}
  1. top-section {

position: fixed; 

       top: 0;
       width: 100%;
       height: 0;
       border: none;
       z-index: 100;}
  1. search-controls {display: none;}
  1. menubar {

display: table-cell; background: transparent; 

       font-size: 11px;}
  1. top-section #menubar ul { 
       -webkit-margin-before: 2px;
       -webkit-margin-after: 2px;
       -webkit-padding-start: 40px;
       margin: .3em 0 0 1.5em;}
  1. menubar.left-menu {width: 100%; padding-top: 6px;}
  1. menubar.right-menu {text-align: right; padding-top: 6px;}
  1. menubar * {

color: transparent !important; background: transparent !important;}

  1. top-section:hover #menubar * {color: #333 !important;}
  1. top-section #menubar ul li a:hover {color: #0d9c64 !important; text-decoration: none;}
  1. top-section:hover #menubar.left-menu {background: rgba(255, 255, 255, 0.75) !important; border-bottom: 1px solid #0d9c64;}

/* Navigation - Topmenu

*/
  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;
       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 .menuleft,
  2. topmenu .menucenter,
  3. topmenu .menuright {position: relative; display: block; line-height: 76px;}
  1. topmenu .menuleft {float:left; 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:hover a {padding: 0 11px 0 9px}
       #topmenu .menucenter li a {display:block; height: 80px; padding: 0 12px 0 8px;}
  1. topmenu .menuright {float:right; top:-80px; z-index: 3;}
  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: 80px;
   left: 0;}

ul.subs li:first-child {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%;
   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 a { 

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

}

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

/* Slider

*/

.slider { 

       display: block;
       background: url('https://static.igem.org/mediawiki/2013/f/f5/Sliderlogo.png') center center no-repeat;
       background-size: 369px 350px;
       width: 100%;
       height: 400px;

} .timeliner{ margin:0; padding:0; position:relative; display:none; } .timeliner .slide{ margin:0; padding:0; list-style:none; overflow:hidden; position:absolute; display:block; } .timeliner .timeline{ display:block; position:absolute; z-index:2; list-style:none; } .timeliner .innertimeline{ position:absolute; bottom:0; z-index:3; overflow:hidden; } .timeliner .timedisplay{ position:absolute; text-align:right; cursor:default; white-space:nowrap; } .timeliner .node{ position:absolute; z-index:4; cursor:pointer; } .timeliner .tooltip{ position:absolute; white-space:nowrap; display:block !important; } .timeliner .pause, .timeliner .play, .timeliner .previous, .timeliner .next{ position:absolute; list-style:none; z-index:3; cursor:pointer; } .timeliner .previous, .timeliner .next{ z-index:2; } .timeliner img{ vertical-align:bottom }


  1. example3{

-webkit-box-shadow:0 0 15px #aaa; -moz-box-shadow:0 0 15px #aaa; box-shadow:0 0 15px #aaa; } /* Each slide */

  1. example3 .slide{

background:#ccc; padding:20px; 

       -webkit-transition: opacity .7s linear;
          -moz-transition: opacity .7s linear;
                    transition: opacity .7s linear;}

/* The timeline background */

  1. example3 .timeline{

background:url('http://beauvillemedia.nl/igem/timeline_dot_pattern.png') repeat-x top left; 

       background-size: 4px 2px;}

/* The timeline fill bar */

  1. example3 .innertimeline{

background:#fff; } /* The time display */

  1. example3 .timedisplay{

font:11px verdana,sans-serif; padding:3px 5px; } /* Each node */

  1. example3 .node{ 
       top: -20px;

background: rgba(255,255,255, .7); width:2px; height:10px;}

  1. example3 .node .tooltip {opacity: .6;}

/* The active node */

  1. example3 .node_active{ background:#fff;}
  2. example3 .node_active .tooltip {opacity: 1;}

/* Each node tooltip */

  1. example3 .tooltip{ 
       font-size: 12px;
       color: #fff;}

/* The time display inside a tooltip */

  1. example3 .tooltiptime{

font-size:8pt; font-weight:bold; } /* The pause/play button */

  1. example3 .pause, #example3 .play{

width:80px; height:80px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; -webkit-box-shadow:0 0 10px #bbb; -moz-box-shadow:0 0 10px #bbb; box-shadow:0 0 10px #bbb; } /* The pause button */

  1. example3 .pause{

background:#fff url(http://friquemag.net/demos/timeliner/images/pause.gif) center no-repeat; } /* The play button */

  1. example3 .play{

background:#fff url(http://friquemag.net/demos/timeliner/images/play.gif) center no-repeat; } /* The previous/next buttons */

  1. example3 .previous, #example3 .next{

width:43px; height:50px; } /* The previous button */

  1. example3 .previous{

background:#fff url(http://friquemag.net/demos/timeliner/images/previous.gif) center no-repeat; -webkit-border-radius:6px 0 0 6px; -moz-border-radius:6px 0 0 6px; border-radius:6px 0 0 6px; } /* The next button */

  1. example3 .next{

background:#fff url(http://friquemag.net/demos/timeliner/images/next.gif) center no-repeat; -webkit-border-radius:0 6px 6px 0; -moz-border-radius:0 6px 6px 0; border-radius:0 6px 6px 0; }

  1. example3 li:nth-child(5){ 
     background: url('http://beoplay.com/layouts/SBV-Custom/HMProductPage/assets/beoplayH6/features/H6_features_background_2.jpg') center center no-repeat;

} .timeline .node1 .tooltip:before{ 

               content:"";

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

               background-position: 0 0;

top: -30px; left: 15px; width:30px; height:30px; display:inline-block;}

.timeline .node2 .tooltip:before{ 

               content:"";

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

               background-position: -30px 0;

top: -30px; left: 12px; width:30px; height:30px; display:inline-block;}

.timeline .node3 .tooltip:before{ 

               content:"";

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

               background-position: -60px 0;

top: -30px; left: 15px; width:30px; height:30px; display:inline-block;}

.timeline .node4 .tooltip:before{ 

               content:"";

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

               background-position: -90px 0;

top: -30px; left: 18px; width:30px; height:30px; display:inline-block;}

.timeline .node5 .tooltip:before{ 

               content:"";

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

               background-position: -120px 0;

top: -30px; left: 21px; width:30px; height:30px; display:inline-block;}

.timeline .node6 .tooltip:before{ 

               content:"";

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

               background-position: -150px 0;

top: -30px; left: 30px; width:30px; height:30px; display:inline-block;}

  1. example3 li:nth-child(6){ 
     background: url('http://beauvillemedia.nl/igem/slide2.png') center center no-repeat;

}

  1. example3 li:nth-child(7){ 
     background: url('http://beoplay.com/layouts/SBV-Custom/HMProductPage/assets/beoplayH6/features/H6_features_background_3.jpg') center center no-repeat;

}

/* Main content area

*/
  1. wrapper { 
       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 { 
       padding: 30px 0;
       font-size: 14px;
       font-family: 'Source Sans Pro';
       column-count:2;
       column-gap:40px;

       /* Firefox */
       -moz-column-count:2;
       -moz-column-gap:40px;

       /* Safari and Chrome */
       -webkit-column-count:2;
       -webkit-column-gap:40px;

} /* Sponsors

*/
  1. sponsors { 
       width: 89.06244%;
       padding: 20px 5.46878%;
       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);
       background: #f1f1f1;
       text-align: center;

}

  1. sponsors h2 { 
       font-size: 20px;
       font-weight: light;
       letter-spacing: 1px;
       border-bottom: none;
       margin: 0;
       padding: 0 0 20px;
       font-family: 'Cabin', sans-serif;}

       #sponsors .sponsor {
               position:relative;
               border: 1px solid #d5d5d5;
               border-radius: 3px;
               box-shadow: inset 0 1px 0 0 #fff;
               margin: 0 10px;
               padding: 0 !important;
               display: inline-block;
               width: 160px;
               height: 160px;
               background: #f2f2f2 !important;
               background-image: none !important;
               -webkit-transition: all .3s ease-in-out;
                   -moz-transition: all .3s ease-in-out;
                             transition: all .3s ease-in-out;}

       #sponsors .sponsor:hover {
               background: #fafafa;
               box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .2);
               border-color: #fafafa;
       }

/* Footer

*/
  1. footer-box { 
       position: relative;
       margin:0;
       width: 89.06244%;
       height: 48px;
       padding: 0 5.46878%;
       background: #f1f1f1 url('https://static.igem.org/mediawiki/2013/9/92/Footerline.png') repeat-x center top;
       border: none;
       z-index: 2;}

   #footer-box #footer {
           color: #333;
           font-size: 10px;
           width: 100%;
   }

       #footer #f-list li {
               margin: 0 10px;
       }

       #footer #f-list li a {
               line-height: 48px;
       }
  1. f-poweredbyico {position:relative;top: 9px;}
  2. f-copyrightico {position:relative;top: 9px;}


/* Edit pages

*/
  1. wrapper h2 { 
       font-size: 20px;
       font-weight: light;
       letter-spacing: 1px;
       border-bottom: none;
       margin: 0;
       padding: 0 0 20px;
       font-family: 'Cabin', sans-serif;
       -webkit-margin-before: 0;
       -webkit-margin-after: 0;}
  1. wrapper.backend ul li { 
       font-size: 14px;
       line-height: 1.5em;
       list-style: circle;
       margin-left: 30px;}


/* Notebook

*/
  1. filters { 
   display: block;
   width: 89.06244%;
   padding: 0 5.46878%;
   height: 60px;
   background: url(Sub-bg.png) left top repeat-x;

}

  1. container { 
 display: block;
 margin: 0px auto 30px;

  width: auto; }

  1. container .item { 
 display: block;
 float: left;
 overflow: hidden;
 width: 300px;
 margin: 20px 20px 0 0;
 background: #fff;
 border-radius: 4px;
 box-shadow: 0 3px 4px 0 #c9c9c9;
 -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
              transition: all .3s ease-in-out;

}

  1. container .item:hover{box-shadow: 0 0 10px #666666;}
  1. container .item .icon { 
   display: block;
   position: relative;
   margin: -31px auto 0;
   width: 64px;
   height: 64px;
   z-index: 2;

}

  1. container .item .icon.idee {background: url(http://www.googleventures.com/img/diamonds/startup-lab.png) center center no-repeat;}
  2. container .item .icon.groei {background: url(http://www.googleventures.com/img/diamonds/investing.png) center center no-repeat;}
  1. container .item .content { 
 padding: 0px 15px 15px;

}

  1. container .item .content h3 { 
 text-align: center;
 font-family: 'Cabin';
 font-weight: bold;
 letter-spacing: 1px;
 font-size: 20px;
 line-height: 30px;
 margin: 0 !important;

}

  1. container .item .content p.date { 
 text-align: center;
 padding-bottom: 10px;

}

  1. container .item .content p { 
 font-family: 'Source Sans Pro';
 font-size: 14px;

}

Retrieved from "http://2013.igem.org/Team:Wageningen_UR/Templates/style.css"