Team:KU Leuven/Template:Style

From 2013.igem.org

(Difference between revisions)
 
(16 intermediate revisions not shown)
Line 4: Line 4:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>iGem</title>
     <title>iGem</title>
 +
    <link rel="stylesheet" href="https://2013.igem.org/Team:KU_Leuven/CSS:Bootstrap?action=raw&ctype=text/css" type="text/css" />
 +
    <link rel="stylesheet" href="https://2013.igem.org/Team:KU_Leuven/CSS:Bootstrapresponsive?action=raw&ctype=text/css" type="text/css" />
 +
    <link rel="stylesheet" href="https://2013.igem.org/Team:KU_Leuven/CSS:Style?action=raw&ctype=text/css" type="text/css" />
 +
    <link rel="stylesheet" href="https://2013.igem.org/Team:KU_Leuven/CSS:Timeline?action=raw&ctype=text/css" type="text/css" />
 +
    <link rel="stylesheet" href="https://2013.igem.org/Team:KU_Leuven/CSS:bjqs?action=raw&ctype=text/css" type="text/css" />
-
    <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">
 
-
 
-
* {
 
-
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/bjqs.css"rel="Stylesheet"/>
 
      
      
     <!--[if lt IE 9]>
     <!--[if lt IE 9]>
-
<script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
+
<script src="https://2013.igem.org/Team:KU_Leuven/JS:mediaqueries?action=raw&ctype=text/js"></script>
<![endif]-->
<![endif]-->
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
+
<script src="https://2013.igem.org/Team:KU_Leuven/JS:jquery?action=raw&ctype=text/js"></script> 
-
<script src="http://www.designingtest.org/iGem/raphael-min.js"></script>
+
<script src="https://2013.igem.org/Team:KU_Leuven/JS:Raphael?action=raw&ctype=text/js"></script>
-
<script src="http://www.designingtest.org/iGem/livicons-1.2.min.js"></script>
+
<script src="https://2013.igem.org/Team:KU_Leuven/JS:Livicons?action=raw&ctype=text/js"></script>
-
<script src="http://www.designingtest.org/iGem/bjqs.min.js"></script>
+
<script src="https://2013.igem.org/Team:KU_Leuven/JS:bjqs?action=raw&ctype=text/js"></script>
<!--[if lt IE 8]>
<!--[if lt IE 8]>
-
<script src="http://www.designingtest.org/iGem/json2.min.js"></script>
+
<script src="https://2013.igem.org/Team:KU_Leuven/JS:json2?action=raw&ctype=text/js"></script>
<![endif]-->
<![endif]-->
  
  

Latest revision as of 15:07, 18 September 2013

iGem