"
Template:Team:Berkeley/css
From 2013.igem.org
| (One intermediate revision not shown) | |||
| Line 92: | Line 92: | ||
#TitleID a{ | #TitleID a{ | ||
| - | font-size: | + | font-size: 160%; |
} | } | ||
| Line 293: | Line 293: | ||
} | } | ||
.nav li a:hover{ | .nav li a:hover{ | ||
| - | color: | + | color: white;; |
background: none; | background: none; | ||
/* background-color: #eeeeee; */; | /* background-color: #eeeeee; */; | ||
} | } | ||
.nav li.active a{ | .nav li.active a{ | ||
| - | color: | + | color: white; |
text-decoration: none; | text-decoration: none; | ||
} | } | ||
Latest revision as of 02:06, 29 October 2013
/****************************************************************************************
- 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: 160%; }
- 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;
}
