Template:Team:Berkeley/css

From 2013.igem.org

Revision as of 22:50, 28 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; }

inner-content{

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

body{ font-family: serif;

font-size: medium; }

jeans_top img.jeans-image-first {

margin-left:0% }

jeans_top img.jeans-image-last {

margin-right:0% }

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%; }

TitleID a{

font-size: 137%; }

globalWrapper {

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

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

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

*/

p-logo,
catlinks {display: none;}

top-section {

position: fixed;

       top: 0;
       width: 100%;
       height: 0;
       border: none;
       z-index: 100;}

search-controls {display: none;}

menubar {

display: table-cell; background: transparent;

       font-size: 11px;}

top-section #menubar ul {

       -webkit-margin-before: 2px;
       -webkit-margin-after: 2px;
       -webkit-padding-start: 40px;
       margin: .3em 0 0 1.5em;}

menubar.left-menu {width: 100%; padding-top: 6px;}

menubar.right-menu {text-align: right; padding-top: 6px;}

menubar * {

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

top-section:hover #menubar * {color: #333 !important;}

top-section #menubar ul li a:hover {color: #0d9c64 !important; text-decoration: none;}

top-section:hover #menubar.left-menu {background: rgba(255, 255, 255, 0.75) !important; border-bottom: 1px solid #0d9c64;}

/* Footer

*/

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

f-poweredbyico {position:relative;top: 9px;}
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;

}

globalWrapper {width: 100%;}
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; }

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

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

footer-box {

background: #BABABA; border:none; }

p-logo{display:none;}
search-controls{

display:none; }

top-section{

width: 100%;

//background: url(); 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;

}

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;

}

bodyContent {

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

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

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

Tabs *
- - - - /

/*

tab {

 margin-left: 20px; 
 margin-bottom: 64px;
 display: block;

}

tab ul {

 list-style: none;
 float: left;
 width: auto;

}

tab li {

 float: left;
 margin: 0 1em 0 0;

}

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;

}

tab a:hover {

 background-color: #f1f1f1;
 color: #0000AA;
 border-color: #0000AA;

}

tab #selected a {

 background-color: #f1f1f1;
 color: #000050;
 border-color: #000050;

}

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

Sub-Tabs
- - - - /

/*

stages{

 width: 80%;
 height: 100px; 
 margin: auto;

}

stages ul{

 list-style: none;
 padding: 0px;
 margin: 0px;

}

stages li{

 float: left;
 text-align: center;
 color: #000050;
 margin: 5px;

}

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;

}

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;

}

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

cssmenu,
main-nav ul,
main-nav ul li,
main-nav ul li a {

 padding: 0;
 margin: 0;
 line-height: 1;
 font-family: 'Capriola', sans-serif;

}

main-nav:before,
main-nav:after,
main-nav > ul:before,
main-nav > ul:after {

 content: ;
 display: table;

}

main-nav:after,
main-nav > ul:after {

 clear: both;

}

/

main-nav {

 zoom: 1;
 height: 63px;
 background: url() 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;

}

main-nav {

   text-align: justify;

}

main-nav :after {

   content: ;
   display: inline-block;
   width: 100%;

}

main-nav li {

   display: inline-block;

}

main-nav ul {

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

}

main-nav ul li#projectBlue {

/* width: 23%; */ }

main-nav ul li#humanPractices {

   /* width: 22%; */

}

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;

}

main-nav ul li:first-child a {

 /* margin: 4px 2px 0 0; */

}

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

background:white; }

main-nav ul li a:hover,
main-nav ul li.active a {

 display: block;
 color: white;
 text-shadow: white;
 opacity: 1;

}

main-nav ul ul {

 display: none;
 left: 0px;

}

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

}

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

}

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%;

}

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;

}

main-nav ul li ul li a :after{

display:block; text-align: start; }

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;

}

main-nav ul li ul li.odd a:hover,
main-nav ul li ul li.active a {

 display: block;
 color: white;
 text-shadow: white;
 opacity: 1;

}

main-nav ul li ul li:hover a,
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;

}

main-nav img.nav-image#outreach {

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

main-nav img.nav-image#plant {

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

main-nav img.nav-image#solubilizing {

width:100px; height:auto; }

main-nav img.nav-image#lumi {

width: 190px; height:auto; }

main-nav img.nav-image#safety {

width:100px; height:auto; }

main-nav img.nav-image {

 width:200px;
 height:85px;
 margin: 10%;
 margin-left: auto;
 margin-right:auto;
 display: block;
 float: middle;

}

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);

}

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;

}

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

}

header-image-inner-inner {

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

header-image img.firstHeaderImg {

 height: auto;
 width: 19%;
 margin-left: 1%;

}

header-image img.secondHeaderImg {

 height: auto;
 width: 50%;
 margin-left: 4%;
 margin-right: 4%;

}

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

cssmenu1,
cssmenu1 ul,
cssmenu1 ul li,
cssmenu1 ul li a {

 padding: 0;
 margin: 0;
 line-height: 1;
 font-family: 'Capriola', sans-serif;

}

cssmenu1:before,
cssmenu1:after,
cssmenu1 > ul:before,
cssmenu1 > ul:after {

 content: ;
 display: table;

}

cssmenu1:after,
cssmenu1 > ul:after {

 clear: both;

}

cssmenu1 {

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

}

cssmenu1 ul {

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

}

cssmenu1 ul li {

 float: left;
 list-style: none;

}

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;

}

cssmenu1 ul li:first-child a {

 margin: 4px 2px 0 0;

}

cssmenu1 ul li a:hover,
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;

}