Template:Team:Berkeley/css

From 2013.igem.org

Revision as of 02:06, 29 October 2013 by Tnrich (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

/****************************************************************************************

  • Thank you Wageningen iGEM 2013 and Berkeley iGEM 2012 for snippets of their CSS code! *
                                                                                                                                                                                • /


div #inner-content img#odd { display: inline-block; width: 16%; padding: 2%; /* padding-bottom: 10%; */ vertical-align: top; } div #inner-content p#odd { display: inline-block; /* float: right; */ width: 76%; padding: 1%; padding-top: 2%; margin: 0; margin-bottom: 0%; } div #inner-content img#even { display: inline-block; width: 16%; padding: 2%; /* padding-bottom: 10%; */ vertical-align: top; } div #inner-content p#even { display: inline-block; /* float: right; */ width: 76%; padding: 1%; padding-top: 2%; margin: 0; margin-bottom: 0%; }

.heading-large a:hover { color: white; font-family: 'Garamond', sans-serif; font-weight: bold; font-size: 42px; text-decoration: none; }

  1. inner-content{

width: 100%; padding-left: 0px; }

body{ font-family: serif;

font-size: medium; }

  1. jeans_top img.jeans-image-first {

margin-left:0% }

  1. jeans_top img.jeans-image-last {

margin-right:0% }

  1. jeans_top img {

width: 11%; margin-left: -1%; /* margin-right: -1%; */ height:50px;

border: none; display: inline-block; padding: 0; } div #jeans_top {

margin: 0;


/* margin-top: 0%; */ /* margin-bottom: 2%; */ width: 100%; float: none; /* padding: 1%; */ overflow: hidden; white-space: nowrap; }

div.inner-content p { margin-left: 2%; margin-right: 2%; }

  1. TitleID a{

font-size: 160%; }

  1. globalWrapper {

background: black; padding-top: 100px; margin-top: -100px; }

ul.bxslider { margin:0; } .bx-wrapper .bx-viewport { border: none; left: 0; }

  1. globalWrapper>#content {

width: 75%; background: rgba(223,177,38,1); background: rgba(187,218,255,1); margin-left: 232px; border:none;

padding-right: 0; padding-left: 0; padding-top: 0; }

body { 

 background-color: #f1f1f1;

}

ol, ul, li { 

       list-style: none;
       -webkit-margin-before: 0;
       -webkit-margin-after: 0;
       -webkit-padding-start: 0;
       margin: 0;
       text-shadow: aquamarine;

}

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

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

a {color: #333; text-decoration: none;} a:visited {color: rgba(223,177,38,1);text-decoration: none;} 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;}

/* 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;}

/************************* body{ 

  background: url(http://www.colourbox.com/preview/2312219-868113-texture-of-blue-jeans-as-a-background.jpg);
  //background-color: white;

}

  1. globalWrapper {width: 100%;}
  2. content{

padding: 0px; width: 1000px; //background: #BABABA; 

       background: white;

font-family: 'Gill Sans MT', 'Garamond', Georgia ,Helvetica,sans-serif; 

       font-size: 1.2em;

border: none; text-decoration: none; }

  1. footer, f-poweredbyico, f-copyrightico, f-list {

background: #BABABA; margin:0px; padding:0px;}

  1. footer-box {

background: #BABABA; border:none; }

  1. p-logo{display:none;}
  2. search-controls{

display:none; }

  1. top-section{

width: 100%;

//background: url(Noise_pattern_8.jpg); height: 5px; border:none; } .firstHeading { 

   display:none;

}

                                • /


.content section { 

 background-color: pink;
 margin-bottom:20px;
   height:750px;

}


.box{ 

   margin: 20px; padding: 15px;
   background: #eee;
   height: 700px;

}

  1. navbar{ 
   position: fixed;
   top: 5%; 
   bottom: auto;
   left: 30px;
   width: 90px;
   background: tranparent;
   font-size: large;

} .nav li a{ 

   float: left;
   width: 80px;
   padding: 15px 0;
   color: rgba(187,218,255,1);
   font-size: larger;

} .nav li a:hover{ 

   color: white;;
   background: none;
   /* background-color: #eeeeee; */;

} .nav li.active a{ 

   color: white;
   text-decoration: none;

}


.content { 

 width: auto;
 margin: 0px 20px;
 background: #f1f1f1;
 border: 0.1em solid black;

} .container { 

 display: block;
 padding: 20px;
 background: #f1f1f1;

}

  1. bodyContent {

width: 100%; margin: auto; } .firstHeading { 

   display: none;
   margin-bottom: .1em;

} /********************************************************

  • Tabs *
                                                                                                                • /

/*

  1. tab { 
 margin-left: 20px; 
 margin-bottom: 64px;
 display: block;

}

  1. tab ul { 
 list-style: none;
 float: left;
 width: auto;

}

  1. tab li { 
 float: left;
 margin: 0 1em 0 0;

}

  1. tab a { 
 text-decoration: none;
 display: block;
 padding: 1em;
 font-weight: bold;
 background: #c1c1c1;
 border: 0.1em solid #000050;
 border-bottom: 0.5em solid #000050;
 border-top-left-radius: 1em;
 border-top-right-radius: 1em;
 color: #000050;

}

  1. tab a:hover { 
 background-color: #f1f1f1;
 color: #0000AA;
 border-color: #0000AA;

}

  1. tab #selected a { 
 background-color: #f1f1f1;
 color: #000050;
 border-color: #000050;

}

/********************************************************

  • Sub-Tabs
                                                                                                                  • /

/*

  1. stages{ 
 width: 80%;
 height: 100px; 
 margin: auto;

}

  1. stages ul{ 
 list-style: none;
 padding: 0px;
 margin: 0px;

}

  1. stages li{ 
 float: left;
 text-align: center;
 color: #000050;
 margin: 5px;

}

  1. stages ul > li:before { 
 content: "♦";
 font-size: 25px;
 line-height: 1px;
 display: block;
 color: #000050;
 background-color: #262626;
 border-top: 5px solid #ededed;
 margin: 0 0 15px 0;

}

  1. stages ul > li.active:before { 
 color: #4ee54e;
 text-shadow: 0px 0px 10px #56ff5f;

}

/********************************************************

  • The Rest
                                                                                                                  • /

.data { 

 width: 80%;
 display: block;
 margin: 0 auto;

} .box { 

 float: right;
 width: 775px;
 background-color: rgba(17, 77, 146, 0);

} .buttons { 

 float: left;
 width: 150px;
 background-color: rgba(17, 77, 146, 0);
 margin: 3px;

} .buttons a { 

 text-decoration: none;

} .buttons a span { 

 display: block;
 margin-bottom: 5px;

}

  1. title { 
 margin: 0 auto;
 text-shadow: 2px 2px #C0C0C0;
 font-size: 16px;

} .names { 

 font-size: 20px;
 text-shadow: 2px 2px #C0C0C0;
 margin: 2px;

} .top-left { 

 width: 495px;
 background-color: rgba(17, 77, 146, 0);
 float: left;
 margin: 0px 5px 5px 0px;

} .top-right { 

 width: 460px;
 height: 389px;
 background-color: rgba(17, 77, 146, 0.5);
 display: block;
 float: left;
 margin: 0px 0px 5px 0px;

} .middle { 

 width: 100%;
 height: 300px;
 clear: both;
 background-color: rgba(17, 77, 146, 0);
 margin: 0px 0px 5px 0px;

} .bottom-left { 

 width: 315px;
 height: 200px;
 float: left;
 margin: 0px 5px 0px 0px;

} .bottom-middle { 

 width: 315px;
 height: 200px;
 float: left;

} .bottom-right { 

 width: 315px;
 height: 200px;
 float: left;
 margin: 0px 0px 0px 5px;

}

.heading { 

 background-color: rgba(0,44,96,1);
 padding: 15px 0px 15px 0px;
 width: 100%;

} .heading a { 

 color: white;
 font-family: 'Garamond', sans-serif;
 font-weight: bold;
 font-size: 28px;
 text-decoration: none;
 margin-left: 10px;

} .heading a:hover{ 

 color: white;
 font-family: 'Garamond', sans-serif;
 font-weight: bold;
 font-size: 28px;
 text-decoration: none;

} .heading-large { 

 background-color: rgba(0,44,96,1);
 padding: 35px 10px 15px 15px;
 width: auto;
 margin-bottom: 10px;

} .heading-large a { 

 color: white;
 font-family: 'Garamond', sans-serif;
 font-weight: bold;
 font-size: 42px;
 text-decoration: none;

} .sub-heading { 

 background-color: rgba(0, 0, 80, 1);
 //background-color: rgba(65, 105, 225, 1);
 padding: 12px 0px 12px 12px;
 width: auto;

} .sub-heading a { 

 color: white;
 font-family: 'Garamond', sans-serif;
 font-weight: bold;
 font-size: 20px;
 text-decoration: none;

} .table, tr, td { 

 margin: 25px;
 border: 0px solid rgba(17,77,146, 0);
 background-color: rgba(17, 77, 146, 0);
 text-align: left;

} table tr, table td { 

 border: 0px solid rgba(17,77,146, 0);

} .button:hover { 

 opacity: 0.5;

}

@import url(http://fonts.googleapis.com/css?family=Capriola); /* Let's import the lovely google font, please keep this line at the top of your stylesheet */ /* Menu CSS */ /*


  1. cssmenu,
  2. main-nav ul,
  3. main-nav ul li,
  4. main-nav ul li a { 
 padding: 0;
 margin: 0;
 line-height: 1;
 font-family: 'Capriola', sans-serif;

}

  1. main-nav:before,
  2. main-nav:after,
  3. main-nav > ul:before,
  4. main-nav > ul:after { 
 content: ;
 display: table;

}

  1. main-nav:after,
  2. main-nav > ul:after { 
 clear: both;

}

  • /


  1. main-nav { 
 zoom: 1;
 height: 63px;
 background: url(Nav_whxite.png) repeat-x center bottom;
 /* border-radius: 0px; */
 /* border-style: solid; */
 border-left-style: none;
 border-right-style: none;
 border-bottom-style: solid;
 /* border-bottom: antiquewhite; */
 border-color: rgba(0,44,96,1);
 width: 100%;
 margin-top: -.46%;
 margin-left: 0%;
 z-index: 99999;
 position:relative;

}

  1. main-nav { 
   text-align: justify;

}

  1. main-nav :after { 
   content: ;
   display: inline-block;
   width: 100%;

}

  1. main-nav li { 
   display: inline-block;

}

  1. main-nav ul { 
 background: rgba(187,218,255,1);
 height: 100%;
 /* border: yellow 10px; */ 
 /* border-bottom-width: 10px; */
 /* border-bottom-style: solid; */
 margin: 0;

}

  1. main-nav ul li#projectBlue {

/* width: 23%; */ }

  1. main-nav ul li#humanPractices { 
   /* width: 22%; */

}

  1. main-nav ul li a { 
 display: block;
 height: 37px;
 padding: 21px 14px 0;
 margin: 4px 2px 0;
 border-radius: 2px 2px 0 0;
 text-decoration: none;
 font-size: larger;
 color: rgba(0, 44, 96, 1);
 text-shadow: 0;
 font-weight: 400;
 opacity: .8;

}

  1. main-nav ul li:first-child a { 
 /* margin: 4px 2px 0 0; */

}

  1. main-nav ul li a:hover img.home-image{

background:white; }

  1. main-nav ul li a:hover,
  2. main-nav ul li.active a { 
 display: block;
 color: white;
 text-shadow: white;
 opacity: 1;

}

  1. main-nav ul ul { 
 display: none;
 left: 0px;

}

  1. main-nav ul li:hover ul{ 
 display: block; 
 width: 100%;
 height: 184px;
 position: absolute;
 margin-left: 0;
 z-index:10;
 
 border: rgba(0,44,96,1);
 border-width: 3px;
 border-top-style: solid;
 border-bottom-style: solid;
 /* border-left-style: solid; */
 /* border-right-style: solid; */

}

  1. main-nav ul ul li { 
 width: 25%; 
 height: 100%;
 left:auto;  
 clear:none;
 float: left;
 /* margin-left: 1%; */
 
 /* margin-right: 1%; */
 /* border-color: rgba(187,218,255,1); */
 /* border-width: thick; */
 background: rgba(0,44,96,1);   
 /* color: rgba(187,218,255,1); */

}

  1. main-nav ul ul li.odd{ 
 /* border-style: solid; */
 border-color: rgba(0,44,96,1);
 border-width: thick;
 background: rgba(187,218,255,1);
  
 /* height: 100%; */
 /* border: double rgba(187,218,255,1) 37px; */
 /* margin-top: 1%; */
 /* margin-left: 2%; */ 
 /* margin-right: 2%; */ 
 width: 25%;

}

  1. main-nav ul li ul li a { 
 display: block;
 height: 37px;
 padding: 22px 14px 0;
 margin: 4px 2px 0;
 border-radius: 2px 2px 0 0;
 text-decoration: none;
 font-size: larger;
 color: rgba(187,218,255,1);
 text-shadow: 0;
 font-weight: 400;
 padding-top: inherit;
 margin-top: 1%;
 opacity: 0.9;
 padding-top: 7%;
 text-align: center;

}

  1. main-nav ul li ul li a :after{

display:block; text-align: start; }

  1. main-nav ul li ul li.odd a { 
 text-decoration: none;
 color: rgba(0, 44, 96, 1);
 text-shadow: 0;
 font-weight: 400;
 opacity: .9;

}

  1. main-nav ul li ul li.odd a:hover,
  2. main-nav ul li ul li.active a { 
 display: block;
 color: white;
 text-shadow: white;
 opacity: 1;

}

  1. main-nav ul li ul li:hover a,
  2. main-nav ul li ul li.active a { 
 display: block;
 /* height: 100%; */
 /* margin-top: 0px; */
 /* padding-top: 14%; */
 color: white;
 text-shadow: white;
 opacity: 1;

}

  1. main-nav img.nav-image#outreach {

width: 100px; height:auto; margin-top: 11px; }

  1. main-nav img.nav-image#plant {

width: 180px; height:auto; margin-top: 14px; }

  1. main-nav img.nav-image#solubilizing {

width:100px; height:auto; }

  1. main-nav img.nav-image#lumi {

width: 190px; height:auto; }

  1. main-nav img.nav-image#safety {

width:100px; height:auto; }

  1. main-nav img.nav-image { 
 width:200px;
 height:85px;
 margin: 10%;
 margin-left: auto;
 margin-right:auto;
 display: block;
 float: middle;

}

  1. main-nav img.home-image { 
 width: 25px;
 height: auto;
 margin: 0;
 margin-left: auto;
 margin-right: 10px;
 margin-bottom: 0px;
 padding-top: -5px;
 display: left;
 float: middle;
 
 opacity: .9;
 background: rgba(0, 44, 96, 1);

}

  1. header-image { 
   height: auto;
 
 
   width: 100%;
   border: rgba(0,44,96,1);
   border-bottom-width: 0px;
   border-left-style: none;
   border-right-style: none;
   border-top-style: solid;
   border-width: 3px;
   margin-left: 0%;
   margin-top: -2%;
   background: white;
   display: block;

}

  1. header-image-inner { 
   height: 183px;
 
 
   width: auto;
   margin-top: 0%;
   margin: 0%;
   padding: 0%;
   /* border: double rgba(0,44,96,1); */
   /* border-width: 5px; */
   /* border-style: solid; */
   /* outline: solid rgba(187,218,255,1); */
   background: rgba(187,218,255,1);
   /* box-shadow: 0 0 0 2px #000,     0 0 0 3px #999,     0 0 0 9px #fa0,     0 0 0 10px #666,     0 0 0 16px #fd0,     0 0 0 18px #000; */

}

  1. header-image-inner-inner {

/* margin-top: 3%; */ padding-top: 1%; float: none; }


  1. header-image img.firstHeaderImg { 
 height: auto;
 width: 19%;
 margin-left: 1%;

}

  1. header-image img.secondHeaderImg { 
 height: auto;
 width: 50%;
 margin-left: 4%;
 margin-right: 4%;

}

  1. header-image img.thirdHeaderImg { 
 height: auto;
 width: 19%;

}

/* @import url(http://fonts.googleapis.com/css?family=Capriola); /* Let's import the lovely google font, please keep this line at the top of your stylesheet */ /* Menu CSS */ /*

  1. cssmenu1,
  2. cssmenu1 ul,
  3. cssmenu1 ul li,
  4. cssmenu1 ul li a { 
 padding: 0;
 margin: 0;
 line-height: 1;
 font-family: 'Capriola', sans-serif;

}

  1. cssmenu1:before,
  2. cssmenu1:after,
  3. cssmenu1 > ul:before,
  4. cssmenu1 > ul:after { 
 content: ;
 display: table;

}

  1. cssmenu1:after,
  2. cssmenu1 > ul:after { 
 clear: both;

}

  1. cssmenu1 { 
 zoom: 1;
 height: 69px;
 background: url(bottom-bg.png) repeat-x center bottom;
 border-radius: 2px;
 width: auto;

}

  1. cssmenu1 ul { 
 background: url(nav-bg.png) repeat-x 0px 4px;
 height: 69px;

}

  1. cssmenu1 ul li { 
 float: left;
 list-style: none;

}

  1. cssmenu1 ul li a { 
 display: block;
 height: 37px;
 padding: 22px 30px 0;
 margin: 4px 2px 0;
 border-radius: 2px 2px 0 0;
 text-decoration: none;
 font-size: 15px;
 color: white;
 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
 font-weight: 400;
 opacity: .9;

}

  1. cssmenu1 ul li:first-child a { 
 margin: 4px 2px 0 0;

}

  1. cssmenu1 ul li a:hover,
  2. cssmenu1 ul li.active a { 
 background: url(color.png) center bottom;
 display: block;
 height: 37px;
 margin-top: 0px;
 padding-top: 26px;
 color: #616161;
 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.35);
 opacity: 1;

}

Retrieved from "http://2013.igem.org/Template:Team:Berkeley/css"