Team:KU Leuven/Template:Style

From 2013.igem.org

(Difference between revisions)
Line 7: Line 7:
     <link href="http://www.designingtest.org/iGem/bootstrap.min.css" rel="stylesheet">
     <link href="http://www.designingtest.org/iGem/bootstrap.min.css" rel="stylesheet">
     <link href="http://www.designingtest.org/iGem/bootstrap-responsive.min.css" rel="stylesheet">
     <link href="http://www.designingtest.org/iGem/bootstrap-responsive.min.css" rel="stylesheet">
-
 
+
    <link href="http://www.designingtest.org/iGem/style.css" rel="stylesheet">
-
* {
+
-
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;
+
-
}
+
-
}
+
-
 
+
-
 
+
     <link href="http://www.designingtest.org/iGem/timeline.css" rel="stylesheet">
     <link href="http://www.designingtest.org/iGem/timeline.css" rel="stylesheet">
<link href="http://www.designingtest.org/iGem/bjqs.css"rel="Stylesheet"/>
<link href="http://www.designingtest.org/iGem/bjqs.css"rel="Stylesheet"/>

Revision as of 12:47, 18 September 2013

iGem

Retrieved from "http://2013.igem.org/Team:KU_Leuven/Template:Style"