Team:ETH Zurich/css/style.css

From 2014.igem.org

(Difference between revisions)
 
(49 intermediate revisions not shown)
Line 11: Line 11:
/*********************************************************************************/
/*********************************************************************************/
 +
pre
 +
{
 +
background-color:#FFFFFF !important;
 +
}
body.paused *
body.paused *
Line 88: Line 92:
font-size: 1.2em;
font-size: 1.2em;
text-align:left;
text-align:left;
 +
margin-top:1.3em;
 +
margin-bottom:1.2em !important;
 +
font-weight:800;
}
}
Line 209: Line 216:
position: relative;
position: relative;
display: block;
display: block;
-
border: 0;
 
top: 4.5em;
top: 4.5em;
margin-bottom: 9em;
margin-bottom: 9em;
Line 239: Line 245:
right: -1px;
right: -1px;
}
}
 +
 +
 +
@media
 +
only screen and (max-width: 768px) {
 +
 +
/* Force table to not be like tables anymore */
 +
table.resized , .resized thead , .resized tbody , .resized th , .resized td , .resized tr  {
 +
display: block;
 +
}
 +
 +
/* Hide table headers (but not display: none;, for accessibility) */
 +
.resized  thead tr {
 +
position: absolute;
 +
top: -9999px;
 +
left: -9999px;
 +
}
 +
 +
 +
.resized td {
 +
/* Behave  like a "row" */
 +
position: relative;
 +
}
 +
 +
.resized td:before {
 +
/* Now like a table header */
 +
position: absolute;
 +
/* Top/left values mimic padding */
 +
top: 6px;
 +
left: 6px;
 +
width: 45%;
 +
padding-right: 10px;
 +
white-space: nowrap;
 +
}
 +
 +
}
.timestamp
.timestamp
Line 258: Line 299:
z-index: 1;
z-index: 1;
padding: 5%;
padding: 5%;
 +
text-align:justify;
 +
font-family: Source Sans Pro;
}
}
Line 354: Line 397:
.image img
.image img
 +
{
 +
display: block;
 +
height: auto;
 +
}
 +
 +
a>img
{
{
display: block;
display: block;
Line 389: Line 438:
width: auto;
width: auto;
}
}
-
 
+
a.svg {
 +
  position: relative;
 +
  display: inline-block;
 +
}
/* Lists */
/* Lists */
Line 619: Line 671:
#blue:hover
#blue:hover
{
{
-
fill: #1ED9E1;
+
fill: #08F3FF;
 +
}
 +
 
 +
#darkblue
 +
{
 +
fill: #21409A;
 +
}
 +
 
 +
#darkblue:hover
 +
{
 +
fill: #2F62E0;
}
}
Line 644: Line 706:
#silver
#silver
{
{
-
fill: #C0C0C0;
+
fill: #BABABA;
}
}
Line 655: Line 717:
#bronze
#bronze
{
{
-
fill: #8C7853;
+
fill: #CDA966;
}
}
Line 665: Line 727:
/* Molbio animation */
/* Molbio animation */
-
.animbutton#las:hover
+
.animbutton#lasblue:hover, .animbutton#luxblue:hover,.animbutton#bothblue:hover, .animbutton#noneblue:hover
{
{
-
fill: #CD3C28;
+
fill: #6F93EF;
-
transparency: 0.5;
+
}
}
-
.animbutton#lux:hover
+
 
 +
.animbutton#lasred:hover, .animbutton#luxred:hover,.animbutton#bothred:hover, .animbutton#nonered:hover
{
{
-
fill: #1EB2E1;
+
fill: #F18B92;
-
transparency: 0.5;
+
}
}
-
.animbutton#both:hover
 
-
{
 
-
fill: #7F3F98;
 
-
transparency: 0.5;
 
-
}
 
/* Other buttons */
/* Other buttons */
Line 1,248: Line 1,304:
vertical-align: bottom;
vertical-align: bottom;
}
}
-
 
-
.homepage #header
 
-
{
 
-
padding: 17% 5% 10% 5% !important;
 
-
}
 
-
.homepage #header .overlay
+
.homepage #header
{
{
content: '';
content: '';
Line 1,277: Line 1,328:
}
}
-
#header .inner
+
.inner
{
{
z-index: 1;
z-index: 1;
position: relative;
position: relative;
-
padding-bottom: 22em;
+
        font-family: 'Source Sans Pro', sans-serif;
-
font-family:'Inder', sans-serif;
+
}
}
-
#header .inner2
+
.inner2
{
{
background: #fff;
background: #fff;
position: relative;
position: relative;
z-index: 1;
z-index: 1;
-
padding: 5%;
+
padding: 2% 10%;
min-height: 30em;
min-height: 30em;
 +
width:87%;
 +
margin:auto;
}
}
Line 1,377: Line 1,429:
z-index: 1;
z-index: 1;
overflow: hidden;
overflow: hidden;
-
font-family: 'Inder', sans-serif;
+
font-family: 'Source Sans Pro', sans-serif;
}
}
Line 1,514: Line 1,566:
/*********************************************************************************/
/*********************************************************************************/
-
#updates
+
#Start
{
{
background: #fff;
background: #fff;
Line 1,521: Line 1,573:
-
#updates .inner1
+
#Start .inner1
{
{
z-index: 1;
z-index: 1;

Latest revision as of 02:22, 18 October 2014

@charset 'UTF-8';

/* Helios 1.5 by HTML5 UP html5up.net | @n33co Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)

  • /

/*********************************************************************************/ /* Basic */ /*********************************************************************************/

pre { background-color:#FFFFFF !important; }

body.paused * { -moz-transition: none; -webkit-transition: none; -o-transition: none; -ms-transition: none; transition: none; }

body { background: #f0f4f4; font-family: 'Source Sans Pro', sans-serif; }

center p { text-align:center; }

body,input,textarea,select { font-size: 12pt; line-height: 1.85em; }

.thumb { 

       	max-height:90%;
       	max-width:90%;

}

.thumbimage, .thumbinner, .image { 

       	max-height:100%;
       	max-width:100%;

}

div { 

       	max-width:100%;

}

img { 

       	max-width:100%;

}

h1,h2,h3,h4,h5,h6 { font-weight: 400; color: #483949; line-height: 1.25em; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #002bb8; text-decoration: none; border-bottom-color: transparent; }

h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong { font-weight: 600; }

h2 { font-size: 2em; }

h3 { font-size: 1.2em; text-align:left; margin-top:1.3em; margin-bottom:1.2em !important; font-weight:800; }

h4 { font-size: 1em; text-align: left; font-style: italic; }

h5 { font-size: 1.2em; text-align:center; } .byline { display: block; font-size: 1.5em; margin-top: 1em; line-height: 1.5em; color:#fff; }

strong { font-weight: 400; color: #FF0000; }

b { font-weight: 800; }

em, i { font-style: italic; }

a { text-decoration: none; -moz-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out; -webkit-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out; -o-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out; -ms-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out; transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out; }

a:hover { color: #ef8376; border-bottom-color: transparent; }

sub { position: relative; top: 0.5em; font-size: 0.8em; }

sup { position: relative; top: -0.5em; font-size: 0.8em; }

blockquote { border-left: solid 0.5em #ddd; padding: 1em 0 1em 2em; font-style: italic; }

ul, ol, dl, table { margin-bottom: 1em; font-size:12pt; }

ol { list-style-type:decimal; text-align:left; list-style-position: inside; }

p { color: #000000; text-align: justify; font-size: 12pt; }

br.clear { clear: both; }

header { margin: 0 0 1em 0; }

header .byline { margin-bottom: 2em; 

                       color:#fff;

}

footer { margin: 2.5em 0 0 0; }

hr { position: relative; display: block; top: 4.5em; margin-bottom: 9em; background: rgba(128,128,128,0); height: 6px; border-top: solid 1px rgba(128,128,128,0.2); border-bottom: solid 1px rgba(128,128,128,0.2); }

hr:before, hr:after { content: ; position: absolute; top: -8px; display: block; width: 1px; height: 21px; background: rgba(128,128,128,0.2); }

hr:before { left: -1px; }

hr:after { right: -1px; }


@media only screen and (max-width: 768px) {

/* Force table to not be like tables anymore */ table.resized , .resized thead , .resized tbody , .resized th , .resized td , .resized tr { display: block; }

/* Hide table headers (but not display: none;, for accessibility) */ .resized thead tr { position: absolute; top: -9999px; left: -9999px; }


.resized td { /* Behave like a "row" */ position: relative; }

.resized td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; }

}

.timestamp { color: rgba(128,128,128,0.75); font-size: 0.8em; }

/* Sections/Articles */

section, article { margin-bottom :3em; }

article { background: #fff; position: relative; z-index: 1; padding: 5%; text-align:justify; font-family: Source Sans Pro; }

article > ul { list-style-type:disc; text-align:left; font-size:12pt; margin-left:2%; }

section > :last-child, article > :last-child { margin-bottom: 0; }

section:last-child, article:last-child { margin-bottom: 0; }

.row > section, .row > article { margin-bottom: 0; margin-left: 0; }

.container .row: { padding-left:0px; }

section.special > header, section.special > footer, article.special > header, article.special > footer { text-align: center; }

/* Images */

#igemLogo { 

		 position:absolute;
		 right:2%;
		 top:1em;
		 z-index:10001;
		 width:10%;

}

#mosaiLogo { 

		 position:absolute;
		 left:2%;
		 top:1em;
		 z-index:10001;
		 width:10%;

}

.image { position: relative; display: inline-block; border: 0; outline: 0; }

/* Uncomment the block below if you want linked images to highlight on hover */

/* a.image:before { content: ; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; opacity: 0; -moz-transition: opacity 0.35s ease-in-out; -webkit-transition: opacity 0.35s ease-in-out; -o-transition: opacity 0.35s ease-in-out; -ms-transition: opacity 0.35s ease-in-out; transition: opacity 0.35s ease-in-out; }

a.image:hover:before { opacity: 0.15; } */

.image img { display: block; height: auto; }

a>img { display: block; height: auto; }

.image.full { display: block; width: 100%; }

.image.featured { display: block; width: 100%; margin: 0 0 4em 0; }

.image.left { float: left; margin: 0 2em 2em 0; }

.image.centered { display: block; margin: 0 0 2em 0; }

.image.centered img { margin: 0 auto; width: auto; } a.svg { 

 position: relative;
 display: inline-block;

} /* Lists */

ul.style1 { }

ul.actions { }

ul.divided { }

ul.divided li { border-top: solid 1px rgba(128,128,128,0.2); padding-top: 1.5em; margin-top: 1.5em; }

ul.divided li:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

ul.menu { height: 1em; line-height: 1em; }

ul.menu li { display: inline-block; border-left: solid 1px rgba(128,128,128,0.2); padding-left: 1.25em; margin-left: 1.25em; list-style-type: none !important; }

ul.menu li:first-child { border-left: 0; padding-left: 0; margin-left: 0; }

ul.icons li { display: inline-block; }

ul.icons li a { display: inline-block; background: none; width: 10em; height: auto; line-height: 2.5em; text-align: center; border-radius: 100%; border: 0; color: #fff; padding: 0.6em; }

ul.icons li a:hover { color: #ef8376; }

ol.style1 { } 

               ul.sponsors
               {
        		width: 100% !important;
        		text-align:center !important;

}

ul.sponsors li { display: inline-block; height: auto; background: none; height: auto; text-align: center; } ul.sponsors li a img { display: inline-block; width: 10em; }

/* Forms */

form { }

form label { display: block; }

form input.text, form select, form textarea { -webkit-appearance: none; display: block; border: 0; background: #ccc; width: 100%; }

form input.text:hover, form select:hover, form textarea:hover { }

form input.text:focus, form select:focus, form textarea:focus { }

form textarea { min-height: 9em; }

form .formerize-placeholder { color: #555 !important; }

form ::-webkit-input-placeholder { color: #555 !important; }

form :-moz-placeholder { color: #555 !important; }

form ::-moz-placeholder { color: #555 !important; }

form :-ms-input-placeholder { color: #555 !important; }

form ::-moz-focus-inner { border: 0; }

/* Tables */

table { width: 100%; }

table.style1 { width: 100%; }

table.style1 tbody tr:nth-child(2n+2) { background: #f4f4f4; }

table.style1 td { padding: 0.5em 1em 0.5em 1em; }

table.style1 th { text-align: left; font-weight: 400; padding: 0.5em 1em 0.5em 1em; }

table.style1 thead { background: #444; }

table.style1 tfoot { background: #eee; }

table.style1 tbody { }

/* Buttons */

/* Blog mosaic */ #red { fill: #CD3C28; }

#red:hover { fill: #FF0000; }

#blue { fill: #1EB2E1; }

#blue:hover { fill: #08F3FF; }

#darkblue { fill: #21409A; }

#darkblue:hover { fill: #2F62E0; }

#green { fill: #60C914; }

#green:hover { fill: #00FF00; }

#gold { fill: #FFCC00; }

#gold:hover { fill: #FFFF00; }

#silver { fill: #BABABA; }

#silver:hover { fill: #E6E6E6; }


#bronze { fill: #CDA966; }

#bronze:hover { fill: #CC9900; }

/* Molbio animation */

.animbutton#lasblue:hover, .animbutton#luxblue:hover,.animbutton#bothblue:hover, .animbutton#noneblue:hover { fill: #6F93EF; }


.animbutton#lasred:hover, .animbutton#luxred:hover,.animbutton#bothred:hover, .animbutton#nonered:hover { fill: #F18B92; }


/* Other buttons */

.button { position: relative; display: inline; background: #df7366; color: #fff; text-align: center; border-radius: 0.5em; text-decoration: none; padding: 0.65em 3em 0.65em 3em; border: 0; cursor: pointer; outline: 0; margin-left:auto; margin-right:auto; }

.button:hover { color: #fff; background: #ef8376; }

.button:active { }

.button.alt { }

.button.alt:hover { }

.button.alt:active { }

.button.small { }

.button.big { }

.button.huge { }

/* Posts */

.post { }

.post.stub { text-align: center; }

.post.stub header { margin: 0; }

/* Hidden Content Slider */ #hidden_content{display:none;} #hide_content{}

/*********************************************************************************/ /* Icons */ /* Powered by Font Awesome by Dave Gandy | http://fontawesome.io */ /* Licensed under the SIL OFL 1.1 (font), MIT (CSS) */ /*********************************************************************************/

.fa { text-decoration: none; }

.fa.solo { }

.fa.solo span { display: none; }

.fa.circled { position: relative; display: inline-block; background: #2b252c; color: #fff; border-radius: 100%; width: 3.5em; height: 3.5em; line-height: 3.5em; text-align: center; font-size: 1em; }

.fa.circled:before { font-size: 2em; line-height: 1.75em; }

header .fa.circled { margin: 0 0 2em 0; }

.fa:before { display:inline-block; font-size: 1.25em; text-decoration: none; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

.fa-lg{font-size:1.3333333333333333em;line-height:.75em;vertical-align:-15%} .fa-2x{font-size:2em} .fa-3x{font-size:3em} .fa-4x{font-size:4em} .fa-5x{font-size:5em} .fa-fw{width:1.2857142857142858em;text-align:center} .fa-ul{padding-left:0;margin-left:2.142857142857143em;list-style-type:none}.fa-ul>li{position:relative} .fa-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;top:.14285714285714285em;text-align:center}.fa-li.fa-lg{left:-1.8571428571428572em} .fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em} .pull-right{float:right} .pull-left{float:left} .fa.pull-left{margin-right:.3em} .fa.pull-right{margin-left:.3em} .fa-spin{-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;animation:spin 2s infinite linear} @-moz-keyframes spin{0%{-moz-transform:rotate(0deg)} 100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)} 100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)} 100%{-o-transform:rotate(359deg)}}@-ms-keyframes spin{0%{-ms-transform:rotate(0deg)} 100%{-ms-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)} 100%{transform:rotate(359deg)}}.fa-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)} .fa-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)} .fa-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)} .fa-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);-webkit-transform:scale(-1, 1);-moz-transform:scale(-1, 1);-ms-transform:scale(-1, 1);-o-transform:scale(-1, 1);transform:scale(-1, 1)} .fa-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);-webkit-transform:scale(1, -1);-moz-transform:scale(1, -1);-ms-transform:scale(1, -1);-o-transform:scale(1, -1);transform:scale(1, -1)} .fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle} .fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center} .fa-stack-1x{line-height:inherit} .fa-stack-2x{font-size:2em} .fa-inverse{color:#fff} .fa-glass:before{content:"\f000"} .fa-music:before{content:"\f001"} .fa-search:before{content:"\f002"} .fa-envelope-o:before{content:"\f003"} .fa-heart:before{content:"\f004"} .fa-star:before{content:"\f005"} .fa-star-o:before{content:"\f006"} .fa-user:before{content:"\f007"} .fa-film:before{content:"\f008"} .fa-th-large:before{content:"\f009"} .fa-th:before{content:"\f00a"} .fa-th-list:before{content:"\f00b"} .fa-check:before{content:"\f00c"} .fa-times:before{content:"\f00d"} .fa-search-plus:before{content:"\f00e"} .fa-search-minus:before{content:"\f010"} .fa-power-off:before{content:"\f011"} .fa-signal:before{content:"\f012"} .fa-gear:before,.fa-cog:before{content:"\f013"} .fa-trash-o:before{content:"\f014"} .fa-home:before{content:"\f015"} .fa-file-o:before{content:"\f016"} .fa-clock-o:before{content:"\f017"} .fa-road:before{content:"\f018"} .fa-download:before{content:"\f019"} .fa-arrow-circle-o-down:before{content:"\f01a"} .fa-arrow-circle-o-up:before{content:"\f01b"} .fa-inbox:before{content:"\f01c"} .fa-play-circle-o:before{content:"\f01d"} .fa-rotate-right:before,.fa-repeat:before{content:"\f01e"} .fa-refresh:before{content:"\f021"} .fa-list-alt:before{content:"\f022"} .fa-lock:before{content:"\f023"} .fa-flag:before{content:"\f024"} .fa-headphones:before{content:"\f025"} .fa-volume-off:before{content:"\f026"} .fa-volume-down:before{content:"\f027"} .fa-volume-up:before{content:"\f028"} .fa-qrcode:before{content:"\f029"} .fa-barcode:before{content:"\f02a"} .fa-tag:before{content:"\f02b"} .fa-tags:before{content:"\f02c"} .fa-book:before{content:"\f02d"} .fa-bookmark:before{content:"\f02e"} .fa-print:before{content:"\f02f"} .fa-camera:before{content:"\f030"} .fa-font:before{content:"\f031"} .fa-bold:before{content:"\f032"} .fa-italic:before{content:"\f033"} .fa-text-height:before{content:"\f034"} .fa-text-width:before{content:"\f035"} .fa-align-left:before{content:"\f036"} .fa-align-center:before{content:"\f037"} .fa-align-right:before{content:"\f038"} .fa-align-justify:before{content:"\f039"} .fa-list:before{content:"\f03a"} .fa-dedent:before,.fa-outdent:before{content:"\f03b"} .fa-indent:before{content:"\f03c"} .fa-video-camera:before{content:"\f03d"} .fa-picture-o:before{content:"\f03e"} .fa-pencil:before{content:"\f040"} .fa-map-marker:before{content:"\f041"} .fa-adjust:before{content:"\f042"} .fa-tint:before{content:"\f043"} .fa-edit:before,.fa-pencil-square-o:before{content:"\f044"} .fa-share-square-o:before{content:"\f045"} .fa-check-square-o:before{content:"\f046"} .fa-move:before{content:"\f047"} .fa-step-backward:before{content:"\f048"} .fa-fast-backward:before{content:"\f049"} .fa-backward:before{content:"\f04a"} .fa-play:before{content:"\f04b"} .fa-pause:before{content:"\f04c"} .fa-stop:before{content:"\f04d"} .fa-forward:before{content:"\f04e"} .fa-fast-forward:before{content:"\f050"} .fa-step-forward:before{content:"\f051"} .fa-eject:before{content:"\f052"} .fa-chevron-left:before{content:"\f053"} .fa-chevron-right:before{content:"\f054"} .fa-plus-circle:before{content:"\f055"} .fa-minus-circle:before{content:"\f056"} .fa-times-circle:before{content:"\f057"} .fa-check-circle:before{content:"\f058"} .fa-question-circle:before{content:"\f059"} .fa-info-circle:before{content:"\f05a"} .fa-crosshairs:before{content:"\f05b"} .fa-times-circle-o:before{content:"\f05c"} .fa-check-circle-o:before{content:"\f05d"} .fa-ban:before{content:"\f05e"} .fa-arrow-left:before{content:"\f060"} .fa-arrow-right:before{content:"\f061"} .fa-arrow-up:before{content:"\f062"} .fa-arrow-down:before{content:"\f063"} .fa-mail-forward:before,.fa-share:before{content:"\f064"} .fa-resize-full:before{content:"\f065"} .fa-resize-small:before{content:"\f066"} .fa-plus:before{content:"\f067"} .fa-minus:before{content:"\f068"} .fa-asterisk:before{content:"\f069"} .fa-exclamation-circle:before{content:"\f06a"} .fa-gift:before{content:"\f06b"} .fa-leaf:before{content:"\f06c"} .fa-fire:before{content:"\f06d"} .fa-eye:before{content:"\f06e"} .fa-eye-slash:before{content:"\f070"} .fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"} .fa-plane:before{content:"\f072"} .fa-calendar:before{content:"\f073"} .fa-random:before{content:"\f074"} .fa-comment:before{content:"\f075"} .fa-magnet:before{content:"\f076"} .fa-chevron-up:before{content:"\f077"} .fa-chevron-down:before{content:"\f078"} .fa-retweet:before{content:"\f079"} .fa-shopping-cart:before{content:"\f07a"} .fa-folder:before{content:"\f07b"} .fa-folder-open:before{content:"\f07c"} .fa-resize-vertical:before{content:"\f07d"} .fa-resize-horizontal:before{content:"\f07e"} .fa-bar-chart-o:before{content:"\f080"} .fa-twitter-square:before{content:"\f081"} .fa-facebook-square:before{content:"\f082"} .fa-camera-retro:before{content:"\f083"} .fa-key:before{content:"\f084"} .fa-gears:before,.fa-cogs:before{content:"\f085"} .fa-comments:before{content:"\f086"} .fa-thumbs-o-up:before{content:"\f087"} .fa-thumbs-o-down:before{content:"\f088"} .fa-star-half:before{content:"\f089"} .fa-heart-o:before{content:"\f08a"} .fa-sign-out:before{content:"\f08b"} .fa-linkedin-square:before{content:"\f08c"} .fa-thumb-tack:before{content:"\f08d"} .fa-external-link:before{content:"\f08e"} .fa-sign-in:before{content:"\f090"} .fa-trophy:before{content:"\f091"} .fa-github-square:before{content:"\f092"} .fa-upload:before{content:"\f093"} .fa-lemon-o:before{content:"\f094"} .fa-phone:before{content:"\f095"} .fa-square-o:before{content:"\f096"} .fa-bookmark-o:before{content:"\f097"} .fa-phone-square:before{content:"\f098"} .fa-twitter:before{content:"\f099"} .fa-facebook:before{content:"\f09a"} .fa-github:before{content:"\f09b"} .fa-unlock:before{content:"\f09c"} .fa-credit-card:before{content:"\f09d"} .fa-rss:before{content:"\f09e"} .fa-hdd-o:before{content:"\f0a0"} .fa-bullhorn:before{content:"\f0a1"} .fa-bell:before{content:"\f0f3"} .fa-certificate:before{content:"\f0a3"} .fa-hand-o-right:before{content:"\f0a4"} .fa-hand-o-left:before{content:"\f0a5"} .fa-hand-o-up:before{content:"\f0a6"} .fa-hand-o-down:before{content:"\f0a7"} .fa-arrow-circle-left:before{content:"\f0a8"} .fa-arrow-circle-right:before{content:"\f0a9"} .fa-arrow-circle-up:before{content:"\f0aa"} .fa-arrow-circle-down:before{content:"\f0ab"} .fa-globe:before{content:"\f0ac"} .fa-wrench:before{content:"\f0ad"} .fa-tasks:before{content:"\f0ae"} .fa-filter:before{content:"\f0b0"} .fa-briefcase:before{content:"\f0b1"} .fa-fullscreen:before{content:"\f0b2"} .fa-group:before{content:"\f0c0"} .fa-chain:before,.fa-link:before{content:"\f0c1"} .fa-cloud:before{content:"\f0c2"} .fa-flask:before{content:"\f0c3"} .fa-cut:before,.fa-scissors:before{content:"\f0c4"} .fa-copy:before,.fa-files-o:before{content:"\f0c5"} .fa-paperclip:before{content:"\f0c6"} .fa-save:before,.fa-floppy-o:before{content:"\f0c7"} .fa-square:before{content:"\f0c8"} .fa-reorder:before{content:"\f0c9"} .fa-list-ul:before{content:"\f0ca"} .fa-list-ol:before{content:"\f0cb"} .fa-strikethrough:before{content:"\f0cc"} .fa-underline:before{content:"\f0cd"} .fa-table:before{content:"\f0ce"} .fa-magic:before{content:"\f0d0"} .fa-truck:before{content:"\f0d1"} .fa-pinterest:before{content:"\f0d2"} .fa-pinterest-square:before{content:"\f0d3"} .fa-google-plus-square:before{content:"\f0d4"} .fa-google-plus:before{content:"\f0d5"} .fa-money:before{content:"\f0d6"} .fa-caret-down:before{content:"\f0d7"} .fa-caret-up:before{content:"\f0d8"} .fa-caret-left:before{content:"\f0d9"} .fa-caret-right:before{content:"\f0da"} .fa-columns:before{content:"\f0db"} .fa-unsorted:before,.fa-sort:before{content:"\f0dc"} .fa-sort-down:before,.fa-sort-asc:before{content:"\f0dd"} .fa-sort-up:before,.fa-sort-desc:before{content:"\f0de"} .fa-envelope:before{content:"\f0e0"} .fa-linkedin:before{content:"\f0e1"} .fa-rotate-left:before,.fa-undo:before{content:"\f0e2"} .fa-legal:before,.fa-gavel:before{content:"\f0e3"} .fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"} .fa-comment-o:before{content:"\f0e5"} .fa-comments-o:before{content:"\f0e6"} .fa-flash:before,.fa-bolt:before{content:"\f0e7"} .fa-sitemap:before{content:"\f0e8"} .fa-umbrella:before{content:"\f0e9"} .fa-paste:before,.fa-clipboard:before{content:"\f0ea"} .fa-lightbulb-o:before{content:"\f0eb"} .fa-exchange:before{content:"\f0ec"} .fa-cloud-download:before{content:"\f0ed"} .fa-cloud-upload:before{content:"\f0ee"} .fa-user-md:before{content:"\f0f0"} .fa-stethoscope:before{content:"\f0f1"} .fa-suitcase:before{content:"\f0f2"} .fa-bell-o:before{content:"\f0a2"} .fa-coffee:before{content:"\f0f4"} .fa-cutlery:before{content:"\f0f5"} .fa-file-text-o:before{content:"\f0f6"} .fa-building:before{content:"\f0f7"} .fa-hospital:before{content:"\f0f8"} .fa-ambulance:before{content:"\f0f9"} .fa-medkit:before{content:"\f0fa"} .fa-fighter-jet:before{content:"\f0fb"} .fa-beer:before{content:"\f0fc"} .fa-h-square:before{content:"\f0fd"} .fa-plus-square:before{content:"\f0fe"} .fa-angle-double-left:before{content:"\f100"} .fa-angle-double-right:before{content:"\f101"} .fa-angle-double-up:before{content:"\f102"} .fa-angle-double-down:before{content:"\f103"} .fa-angle-left:before{content:"\f104"} .fa-angle-right:before{content:"\f105"} .fa-angle-up:before{content:"\f106"} .fa-angle-down:before{content:"\f107"} .fa-desktop:before{content:"\f108"} .fa-laptop:before{content:"\f109"} .fa-tablet:before{content:"\f10a"} .fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"} .fa-circle-o:before{content:"\f10c"} .fa-quote-left:before{content:"\f10d"} .fa-quote-right:before{content:"\f10e"} .fa-spinner:before{content:"\f110"} .fa-circle:before{content:"\f111"} .fa-mail-reply:before,.fa-reply:before{content:"\f112"} .fa-github-alt:before{content:"\f113"} .fa-folder-o:before{content:"\f114"} .fa-folder-open-o:before{content:"\f115"} .fa-expand-o:before{content:"\f116"} .fa-collapse-o:before{content:"\f117"} .fa-smile-o:before{content:"\f118"} .fa-frown-o:before{content:"\f119"} .fa-meh-o:before{content:"\f11a"} .fa-gamepad:before{content:"\f11b"} .fa-keyboard-o:before{content:"\f11c"} .fa-flag-o:before{content:"\f11d"} .fa-flag-checkered:before{content:"\f11e"} .fa-terminal:before{content:"\f120"} .fa-code:before{content:"\f121"} .fa-reply-all:before{content:"\f122"} .fa-mail-reply-all:before{content:"\f122"} .fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"} .fa-location-arrow:before{content:"\f124"} .fa-crop:before{content:"\f125"} .fa-code-fork:before{content:"\f126"} .fa-unlink:before,.fa-chain-broken:before{content:"\f127"} .fa-question:before{content:"\f128"} .fa-info:before{content:"\f129"} .fa-exclamation:before{content:"\f12a"} .fa-superscript:before{content:"\f12b"} .fa-subscript:before{content:"\f12c"} .fa-eraser:before{content:"\f12d"} .fa-puzzle-piece:before{content:"\f12e"} .fa-microphone:before{content:"\f130"} .fa-microphone-slash:before{content:"\f131"} .fa-shield:before{content:"\f132"} .fa-calendar-o:before{content:"\f133"} .fa-fire-extinguisher:before{content:"\f134"} .fa-rocket:before{content:"\f135"} .fa-maxcdn:before{content:"\f136"} .fa-chevron-circle-left:before{content:"\f137"} .fa-chevron-circle-right:before{content:"\f138"} .fa-chevron-circle-up:before{content:"\f139"} .fa-chevron-circle-down:before{content:"\f13a"} .fa-html5:before{content:"\f13b"} .fa-css3:before{content:"\f13c"} .fa-anchor:before{content:"\f13d"} .fa-unlock-o:before{content:"\f13e"} .fa-bullseye:before{content:"\f140"} .fa-ellipsis-horizontal:before{content:"\f141"} .fa-ellipsis-vertical:before{content:"\f142"} .fa-rss-square:before{content:"\f143"} .fa-play-circle:before{content:"\f144"} .fa-ticket:before{content:"\f145"} .fa-minus-square:before{content:"\f146"} .fa-minus-square-o:before{content:"\f147"} .fa-level-up:before{content:"\f148"} .fa-level-down:before{content:"\f149"} .fa-check-square:before{content:"\f14a"} .fa-pencil-square:before{content:"\f14b"} .fa-external-link-square:before{content:"\f14c"} .fa-share-square:before{content:"\f14d"} .fa-compass:before{content:"\f14e"} .fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"} .fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"} .fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"} .fa-euro:before,.fa-eur:before{content:"\f153"} .fa-gbp:before{content:"\f154"} .fa-dollar:before,.fa-usd:before{content:"\f155"} .fa-rupee:before,.fa-inr:before{content:"\f156"} .fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"} .fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"} .fa-won:before,.fa-krw:before{content:"\f159"} .fa-bitcoin:before,.fa-btc:before{content:"\f15a"} .fa-file:before{content:"\f15b"} .fa-file-text:before{content:"\f15c"} .fa-sort-alpha-asc:before{content:"\f15d"} .fa-sort-alpha-desc:before{content:"\f15e"} .fa-sort-amount-asc:before{content:"\f160"} .fa-sort-amount-desc:before{content:"\f161"} .fa-sort-numeric-asc:before{content:"\f162"} .fa-sort-numeric-desc:before{content:"\f163"} .fa-thumbs-up:before{content:"\f164"} .fa-thumbs-down:before{content:"\f165"} .fa-youtube-square:before{content:"\f166"} .fa-youtube:before{content:"\f167"} .fa-xing:before{content:"\f168"} .fa-xing-square:before{content:"\f169"} .fa-youtube-play:before{content:"\f16a"} .fa-dropbox:before{content:"\f16b"} .fa-stack-overflow:before{content:"\f16c"} .fa-instagram:before{content:"\f16d"} .fa-flickr:before{content:"\f16e"} .fa-adn:before{content:"\f170"} .fa-bitbucket:before{content:"\f171"} .fa-bitbucket-square:before{content:"\f172"} .fa-tumblr:before{content:"\f173"} .fa-tumblr-square:before{content:"\f174"} .fa-long-arrow-down:before{content:"\f175"} .fa-long-arrow-up:before{content:"\f176"} .fa-long-arrow-left:before{content:"\f177"} .fa-long-arrow-right:before{content:"\f178"} .fa-apple:before{content:"\f179"} .fa-windows:before{content:"\f17a"} .fa-android:before{content:"\f17b"} .fa-linux:before{content:"\f17c"} .fa-dribbble:before{content:"\f17d"} .fa-skype:before{content:"\f17e"} .fa-foursquare:before{content:"\f180"} .fa-trello:before{content:"\f181"} .fa-female:before{content:"\f182"} .fa-male:before{content:"\f183"} .fa-gittip:before{content:"\f184"} .fa-sun-o:before{content:"\f185"} .fa-moon-o:before{content:"\f186"} .fa-archive:before{content:"\f187"} .fa-bug:before{content:"\f188"} .fa-vk:before{content:"\f189"} .fa-weibo:before{content:"\f18a"} .fa-renren:before{content:"\f18b"} .fa-pagelines:before{content:"\f18c"} .fa-stack-exchange:before{content:"\f18d"} .fa-arrow-circle-o-right:before{content:"\f18e"} .fa-arrow-circle-o-left:before{content:"\f190"} .fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"} .fa-dot-circle-o:before{content:"\f192"} .fa-wheelchair:before{content:"\f193"} .fa-vimeo-square:before{content:"\f194"} .fa-turkish-lira:before,.fa-try:before{content:"\f195"}

/*********************************************************************************/ /* Wrapper */ /*********************************************************************************/

.wrapper { color:inherit; margin: 0 0 5%; }

.wrapper.style1 { 

               background-color:#fff;
               position:relative;

margin: 0 auto; width : 90%; }

.wrapper.style2 { padding-top: 0; }


/*********************************************************************************/ /* Header */ /*********************************************************************************/

#header { position: relative; background-image: url('https://static.igem.org/mediawiki/2014/d/d8/ETH_Zurich_background.png'); background-size: cover; background-attachment: fixed; text-align: center; padding: 10% 5% 10% 5%; cursor: default; font-weight: 200; vertical-align: bottom; }

.homepage #header { content: ; background: #2b2e3c; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 1.0; -moz-transition: opacity 2s ease-in-out; -webkit-transition: opacity 2s ease-in-out; -o-transition: opacity 2s ease-in-out; -ms-transition: opacity 2s ease-in-out; transition: opacity 2s ease-in-out; }

.homepage #header.ready .overlay { opacity: 0; }

.inner { z-index: 1; position: relative; font-family: 'Source Sans Pro', sans-serif; }


.inner2 { background: #fff; position: relative; z-index: 1; padding: 2% 10%; min-height: 30em; width:87%; margin:auto; }


#header .inner2 ul { list-style-type:disc; text-align:left; font-size:12pt; margin-left:2%; }

#header h1 { color: #fff; font-size: 3em; line-height: 1em; }

.homepage #header h1 { font-size: 4em; }

#header h1 a { color: inherit; }

#header .byline { font-size: 1.25em; margin: 0; padding-bottom: 2%; }

#header .button { border-radius: 100%; width: 5.5em; height: 5.5em; line-height: 4em; text-align: center; font-size: 1em; padding: 1%; color: #fff; text-decoration: none; margin-left:auto; margin-right:auto; }

#header .twolines { line-height:inherit; }

#header footer { margin: 1em 0 0 0; }

#header hr { top: 1.5em; margin-bottom: 3em;

border-bottom-color: rgba(192,192,192,0.35); box-shadow: inset 0 1px 0 0 rgba(192,192,192,0.35); }


/*********************************************************************************/ /* Nav */ /*********************************************************************************/

#nav { position: absolute; top: 0; left: 10%; width: 80%; text-align: center; padding: 1.5em 0 1.5em 0; z-index: 1; overflow: hidden; font-family: 'Source Sans Pro', sans-serif; }

#nav > ul { line-height: 0px; position: relative; display: inline-block; margin: 0;

height: 21px; }

#nav > ul:before, #nav > ul:after { content: ; display: block; width: 300%; position: absolute; top: 50%; margin-top: -2px;

height: 5px; }

#nav > ul:before { left: 100%; margin-left: 1px; }

#nav > ul:after { right: 100%; margin-right: 1px; }

#nav > ul > li { display: inline-block; margin: -9px 0.5em 0 0.5em; border-radius: 0.5em; padding: 0.85em; border: solid 1px transparent; -moz-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out; -webkit-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out; -o-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out; -ms-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out; transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out; }

#nav > ul > li.active { border-color: rgba(192,192,192,0.35); }

#nav > ul > li > a, #nav > ul > li > span { display: block; color: #fff; text-decoration: none; border: 0; outline: 0; }

#nav > ul > li > ul { display: none; }

.dropotron { background: rgba(255,255,255,0.975); padding: 1em 1.25em 1em 1.25em; line-height: 1em; height: auto; width: auto; text-align: left; border-radius: 0.5em; box-shadow: 0 0.15em 0.25em 0 rgba(0,0,0,0.25); min-width: 12em; }

.dropotron li { border-top: solid 1px rgba(128,128,128,0.2); color: #5b5b5b; list-style-type: none; }

.dropotron li:first-child { border-top: 0; }

.dropotron li:hover { color: #ef8376; }

.dropotron li a, .dropotron li span { display: block; border: 0; padding: 0.5em 0 0.5em 0; -moz-transition: color 0.35s ease-in-out; -webkit-transition: color 0.35s ease-in-out; -o-transition: color 0.35s ease-in-out; -ms-transition: color 0.35s ease-in-out; transition: color 0.35s ease-in-out; }

.dropotron.level-0 { margin-top: 2em; font-size: 0.9em; }

.dropotron.level-0:before { content: ; position: absolute; left: 50%; top: -0.7em; margin-left: -0.75em; border-bottom: solid 0.75em rgba(255,255,255,0.975); border-left: solid 0.75em rgba(64,64,64,0); border-right: solid 0.75em rgba(64,64,64,0); }

/*********************************************************************************/ /* Updates banner */ /*********************************************************************************/

#Start { background: #fff; text-align: center; }


#Start .inner1 { z-index: 1; position: relative; padding: 5%; }

/*********************************************************************************/ /* Content */ /*********************************************************************************/

#content { }

#content > hr { top: 3em; margin-bottom: 6em; }

#content > section { margin-bottom: 0; }

/*********************************************************************************/ /* Sidebar */ /*********************************************************************************/

#sidebar { }

#sidebar > hr.first { display: none; }

#sidebar > hr { top: 3em; margin-bottom: 6em; }

#sidebar > section { margin-bottom: 0; }

/*********************************************************************************/ /* Main */ /*********************************************************************************/

#main { }

#main section:first-of-type { padding-top: 2em; }

/*********************************************************************************/ /* Footer */ /*********************************************************************************/

#footer { position: relative; overflow: hidden; background: #2b252c; color: #fff; padding: 2em 0 2em 0; }

#footer .fa.circled { background: #fff; color: #2b252c; }

#footer header { text-align: center !important; cursor: default; }

#footer h2, #footer h3, #footer h4, #footer h5, #footer h6 { color: #fff; }

#footer .contact { text-align: center; }

#footer .contact p { text-align: center; margin: 0 0 3em 0; }

#footer .copyright { text-align: center; color: rgba(128,128,128,0.75); font-size: 0.8em; cursor: default; }

#footer .copyright a { color: rgba(128,128,128,0.75); }

#footer .copyright a:hover { color: rgba(212,212,212,0.85); }

/*********************************************************************************/ /* Carousel */ /*********************************************************************************/

.carousel { position: relative; overflow: hidden; max-height:150px; }


.carousel .reel { width:100%; white-space: nowrap; position: relative; -webkit-overflow-scrolling: touch; padding: 0 2em 0 2em; }

.carousel article { display: inline-block; width: 18em; background: #fff; text-align: center; padding: 3em; margin: 0 2em 0 0; white-space: normal; opacity: 1.0; -moz-transition: opacity 0.75s ease-in-out; -webkit-transition: opacity 0.75s ease-in-out; -o-transition: opacity 0.75s ease-in-out; -ms-transition: opacity 0.75s ease-in-out; transition: opacity 0.75s ease-in-out; }

.carousel article.loading { opacity: 0; }

.carousel article .image { position: relative; left: -1em; top: 0; width: auto; margin-right: -2em; margin-bottom: 3em; }

.carousel article p { text-align: center; }

Retrieved from "http://2014.igem.org/Team:ETH_Zurich/css/style.css"