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

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

  1. container .head {

margin-bottom: 10px; margin-top: 20px; }

  1. topbar {

background-color: green; margin: 0; width: 100%; margin-top: -15px; margin-left: -10px; position: relative; padding-right: 20px; }

  1. links {

position: absolute; top: -28px; right: 10px; }

  1. links a {

padding: 0 5px; }

  1. secret {

display: none; padding: 20px; }

  1. 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-education { background-color: #ADD8E6 !important; }

.bg-press { background-color: #00008B !important; }

.bg-red { background-color: #e84d3c !important; }

.bg-red1 { background-color: #ffc0c8 !important; }

.bg-red2 { background-color: #f88379 !important; }

.bg-red3 { background-color: #f88379 !important; }

.bg-red4 { background-color: #ee204d !important; }

.bg-red5 { background-color: #da2c46 !important; }

.bg-red6 { background-color: #b22222 !important; }

.bg-red7 { background-color: #8b0000 !important; }


.bg-blue { background-color: #2980b9 !important; }

.bg-green { background-color: #27ae60 !important; }

.bg-Mes { background-color: #009F6b !important; }

.bg-journals { background-color: #ffff66 !important; }

.bg-protocols { background-color: #fff700 !important; }

.bg-yellow { background-color: #ffc400 !important; }

.bg-yellow1 { background-color: #FEDF00 !important; }

.bg-yellow2 { background-color: #EFCC00 !important; }

.bg-yellow3 { background-color: #FCF75E !important; }

.bg-background { background-color: #71BC78 !important; }

.bg-farnesene { background-color: #74C365 !important; }

.bg-ecology { background-color: #228b22 !important; }

.bg-parts { background-color: #066400 !important; }

.bg-oscillator { background-color: #27ae60 !important; }

.bg-students { background-color: #B2BEB5 !important; }

.bg-attributions { background-color: #708090 !important; }


.bg-collaborations { background-color: #36454f !important; }

.bg-grey { background-color: #5e7e8e !important; }

.bg-grey1 { background-color: #DCDCDC !important; }


.bg-purple { background-color: #9b59b8 !important; }

.bg-twitter { background-color: #5bb3ee !important; }

.bg-maroon { background-color: #7f154c !important; }

/* Menu */

  1. menubar {

top:0; }

  1. menu a.toggleMenu:visited {

color:#fff; }

ul,li,a { margin:0; padding:0; }

  1. menu {

overflow:visible; margin-top:22px; float:right; }

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

  1. sponsors li.platinum {

width: 400px; padding: 10px 20px; display: inline-block; }

  1. sponsors li.gs {

width: 200px; padding: 10px 20px; display: inline-block; }

  1. sponsors li.bronzejamb {

width: 100px; padding: 10px 20px; display: inline-block; }

  1. sponsors li img {

float: left; }


  1. sponsors li.platinum img {
   width: 400px;

}

  1. sponsors li.gs img {
   width: 200px;

}

  1. sponsors li.bronzejamb img {
   width: 100px;

}


  1. sponsors {

margin-bottom: -25px !important; }

  1. fullpicture .span12, #header .span12 {

padding: 0; }

  1. fullpicture img {

opacity: 0.8; }

  1. header h3 {

color: #fff; background:#34495e; font-size: 23px; padding-left: 20px !important; }

  1. top-section {

width: 960px; height: 30px; background-color: green; }

  1. top-section a {

color: #fff !important; }

  1. menubar {

padding-left: 20px; padding-top: 3px; }

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