From 2013.igem.org
iGem
* {
margin:0;
padding:0;
}
html, body {
background-color:#f7f7f7;
font-size:13px;
}
h3 {
font-weight: 400;
}
#content .container {
font:'PT Sans',sans-serif !important;
color:#34495e!important;
}
.container {
max-width: 960px;
font:'PT Sans',sans-serif !important;
color:#34495e!important;
}
.span12, .span4, .span6 {
padding: 15px 30px;
}
.span4 {
padding: 15px 30px;
}
.span12.white p, .span4.white p, .span6.white p {
padding-left: 20px;
}
.span12.white .span4 p {
padding-left: 0px;
}
.container>div {
margin-bottom: 40px;
}
.white {
background-color: #fff;
border-bottom: 2px solid #e4e5e4;
}
#container .head {
margin-bottom: 10px;
margin-top: 20px;
}
#topbar {
background-color: green;
margin: 0;
width: 100%;
margin-top: -15px;
margin-left: -10px;
position: relative;
padding-right: 20px;
}
#links {
position: absolute;
top: -28px;
right: 10px;
}
#links a {
padding: 0 5px;
}
#secret {
display: none;
padding: 20px;
}
#secret h3 {
color: #fff;
}
/* Icon */
.icon {
height: 102px;
padding: 0;
}
.big {
height: auto;
}
.icon-text {
margin: 0;
padding: 0;
height: auto;
}
.icon-text h3 {
text-align: center;
color: #fff;
margin: 0;
display: block;
min-width: 204px;
margin-left: -8px;
background-color: #2f343a;
font-weight: 400;
font-size: 20px;
}
.big .icon-text h3 {
text-align: left;
color: #2f343a;
background-color: transparent;
}
.icon-text p {
padding: 10px;
}
.icon .span3 {
width: 100px;
height: 100px;
float: left;
margin-top: -0.5px;
}
.icon .livicon {
padding: 35px 35px;
}
.icon-small {
padding: 0;
height: auto;
}
.icon-small .span2 {
width: 70px;
height: 70px;
}
.icon-small .livicon {
padding: 20px 20px;
}
.icon-small .icon-text h3 {
text-align: left;
background-color: transparent;
color: #2f343a;
}
.icon-small .span10 {
height: auto;
padding: 0;
}
.icon-small .span10 .row-fluid {
margin-left: 10px;
}
.icon-small .span10.icon-text .span4 {
padding: 10px 0;
}
.icon-small .span10.icon-text .span4 p {
padding: 0;
}
.icon-half {
padding: 0;
height: auto;
}
.icon-half .video p {
padding-left: 10px;
}
.icon-half .span6 {
padding: 0;
}
.icon-half .icon-text {
margin-left: 20px;
}
.icon-half .span3 {
width: 70px;
height: 70px;
}
.icon-half .span3 i {
padding: 20px;
}
.icon-half .icon-text h3 {
text-align: left;
background-color: transparent;
color: #2f343a;
}
/* Colors */
.greytext {color: #979ca1;}
.blacktext {color: #34495e;}
.livicon {
display: inline-block;
line-height: inherit;
vertical-align: middle;
height: 18px!important;
}
.bg-darkblue {
background-color: #2f343a !important;
}
.bg-red {
background-color: #e84d3c !important;
}
.bg-blue {
background-color: #2980b9 !important;
}
.bg-green {
background-color: #27ae60 !important;
}
.bg-yellow {
background-color: #f1c40f !important;
}
.bg-grey {
background-color: #5e7e8e !important;
}
.bg-purple {
background-color: #9b59b8 !important;
}
.bg-twitter {
background-color: #5bb3ee !important;
}
.bg-maroon {
background-color: #7f154c !important;
}
/* Menu */
#menubar {
top:0;
}
#menu a.toggleMenu:visited {
color:#fff;
}
ul,li,a {
margin:0;
padding:0;
}
#menu {
overflow:visible;
margin-top:22px;
float:right;
}
#logo {
float:left;
}
a {
text-decoration:none;
}
.toggleMenu {
display:none;
background:#34495e;
padding:10px 15px;
color:#fff;
}
.nav {
list-style:none;
background-color: #fff;
float:right;
margin-bottom: 0px;
}
.nav:before, .nav:after {
content:" ";
display:table;
}
.nav:after {
clear:both;
}
.nav ul {
list-style:none;
width:9em;
}
.nav a {
padding:10px 15px;
color:#34495e;
}
.nav li {
position:relative;
padding-top:10px;
padding-bottom:10px;
padding-left:4px;
padding-right:4px;
font-size:15px;
}
.nav .sub li a:hover {
background:#57bce5;
}
.nav > li {
float:left;
border-top:0 solid #e4e5e4;
}
.nav > li > a {
display:block;
}
.nav li ul {
position:absolute;
left:-9999px;
}
.nav > li.hover > ul {
left:0;
}
.nav li li.hover ul {
left:100%;
top:0;
}
.nav li li {
padding-top:0;
padding-bottom:0;
}
.nav li li a {
display:block;
background:#34495e;
color:#fff;
position:relative;
z-index:100;
border-top:0 solid #e4e5e4;
padding-left:30px;
}
#sponsors li {
width: 100px;
padding: 10px 20px;
display: inline-block;
}
#sponsors li img {
width: 100px;
float: left;
}
#sponsors {
margin-bottom: -25px !important;
}
#fullpicture .span12, #header .span12 {
padding: 0;
}
#fullpicture img {
opacity: 0.8;
}
#header h3 {
color: #fff;
background:#34495e;
font-size: 23px;
padding-left: 20px !important;
}
#top-section {
width: 960px;
height: 30px;
background-color: green;
}
#top-section a {
color: #fff !important;
}
#menubar {
padding-left: 20px;
padding-top: 3px;
}
#menubar ul li a{
color: #fff;
}
.team-item {
min-height: 200px;
padding: 0px;
}
.team-item .span3 {
padding: 0px;
width: 200px;
max-height: 250px;
overflow: hidden;
}
.team-item .span3 img {
width: 200px;
opacity: 0.6;
}
.team-item:hover .span3 img {
opacity: 0.9;
}
.team-item.right .span3 {
float: right;
margin-left: 0;
}
.team-item .span9 {
padding: 15px 30px;
}
.span12 .span6 {
padding: 0;
}
.span12 .span4 {
padding: 0 30px;
}
.right-menu {
margin-right: 100px;
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 990px) {
.nav {
float:none;
clear:both;
}
.team-item .span9 {
width: 100%;
padding: 15px 30px;
}
.icon-text h3 {
margin-left: -6px;
background-color: transparent;
color: #2f343a;
}
.span4 {
padding: 15px 15px;
}
.icon-small .span10.icon-text .span4 {
padding: 10px 10px;
}
.span12 .row-fluid .icon-text {
width: 95%;
margin-left: 20px;
padding: 10px 10px;
}
#logo {
width:200px;
margin-left:auto;
margin-right:auto;
float:none;
}
#menu {
float:left;
width: 100%;
}
.nav {
width: 100%;
}
.team-item .span9 {
margin: 0 !important;
}
}
@media (max-width: 960px) {
#top-section {
display:none!important;
}
}
/* Landscape phone to portrait tablet */
@media only screen and (max-width: 767px) {
#top-section {
display:none!important;
}
#menu {
float:none;
}
.row-fluid .span4.white, .row-fluid .span6.white {
margin-bottom: 20px;
}
.icon p {
padding-left: 20px;
}
.span12 .row-fluid .icon-text {
width: 95%;
margin-left: 20px;
}
.icon-small .span10.icon-text .span4 {
padding: 10px 10px;
}
.icon-text h3 {
margin-left: 0px;
background-color: transparent;
color: #2f343a;
}
.team-item .span9 {
padding: 15px 30px;
margin: 0 !important;
}
.active {
display:block;
}
.nav {
clear:both;
float:none;
}
.nav > li {
float:none;
padding-left:10px;
}
.nav > li > .parent {
background-position:95% 50%;
}
.nav li li .parent {
background-image:url(images/downArrow.png);
background-repeat:no-repeat;
background-position:95% 50%;
}
.nav ul {
display:block;
width:100%;
}
.nav > li.hover > ul,.nav li li.hover ul {
position:static;
}
.toggleMenu {
float:right;
margin-top:22px;
}
}
/* Landscape phones and down */
@media only screen and (max-device-width: 480px) {
.phone: {
display:inline-block;
}
.no-phone: {
display:inline-block;
}
}
"
