Team:KU Leuven/CSS:Style
From 2013.igem.org
- {
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: 300px; padding: 10px 20px; display: inline-block; }
- sponsors li img {
float: left; }
- sponsors li.platinum img {
width: 300px;
}
- sponsors li.gs img {
width: 150px;
}
- sponsors li.bronzejamb img {
width: 50px;
}
- 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; } }