|
|
(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]--> |
| | | |