Template:Team:Berkeley/css

From 2013.igem.org

Revision as of 05:59, 22 October 2013 by Tnrich (Talk | contribs)

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

.content section {

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

}

.box{

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

}

navbar{

   position: fixed;
   bottom: 0; left: 20px;
   width: 10%;
   background: #fff;

} .nav li a{

   float: left;
   width: 80px;
   padding: 15px 0;

} .nav li a:hover{

   color: #f33 !important;
   background: none;

} .nav li.active a{

   color: #f55;
   text-decoration: underline;

}

.content {

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

} .container {

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

}

bodyContent {

width: 90%; 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, 0, 80, 1);
 padding: 15px 0px 15px 15px;
 width: auto;

} .heading a {

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

} .heading-large {

 background-color: rgba(0, 0, 80, 1);
 padding: 35px 10px 15px 15px;
 width: auto;

} .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: 69px;
 background: url() repeat-x center bottom;
 border-radius: 0px;
 width: auto;
 margin-top: -4px;

}

main-nav ul {

 background: skyblue;
 height: 92%;
 /* border: yellow 10px; */ 
 /* border-bottom-width: 10px; */
 /* border-bottom-style: solid; */
 margin: 0;

}

main-nav ul li {

 float: left;
 list-style: none;
 width:25%;

}

main-nav 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: 22px;
 color: rgba(0, 44, 96, 1);
 text-shadow: 0;
 font-weight: 400;
 opacity: .9;

}

main-nav ul li:first-child a {

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

}

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: 90%;
 height: 222px;
 position: absolute;
 margin-left: 5%;
 z-index:10;
 
 border: antiquewhite;
 border-width: thin;
 border-top-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: skyblue; */
 /* border-width: thick; */
 background: darkblue;   
 /* color: skyblue; */

}

main-nav ul ul li.odd{

 /* border-style: solid; */
 border-color: darkblue;
 border-width: thick;
 background: skyblue;
  
 /* height: 100%; */
 /* border: double skyblue 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: 20px;
 color: skyblue;
 text-shadow: 0;
 font-weight: 400;
 padding-top: inherit;
 margin-top: 1%;
 opacity: .9;
 padding-top: 7%;

}

main-nav ul li ul li.odd a {

 display: block;
 height: 37px;
 padding: 22px 14px 0;
 margin: 4px 2px 0;
 border-radius: 2px 2px 0 0;
 text-decoration: none;
 font-size: 22px;
 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 {

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

}

header-image {

   height: 100%;
 
 
   width: auto;
   border: double skyblue 15px;
   border-style: solid;
   }

header-image-inner {

   height: 100%;
 
 
   width: auto;
   border: double darkblue;
   border-width: 5px;
   border-style: solid;
   /* outline: solid skyblue; */
   background: skyblue;
   /* 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 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;

}