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="https://static.igem.org/mediawiki/2013/5/5d/Style.txt" 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:46, 18 September 2013

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

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