Difference between revisions of "Template:London Biohackspace"
| (39 intermediate revisions by 3 users not shown) | |||
| Line 4: | Line 4: | ||
<style type="text/css"> | <style type="text/css"> | ||
| − | @import url(//fonts.googleapis.com/css?family= | + | @import url(//fonts.googleapis.com/css?family=Raleway); |
#content | #content | ||
| Line 10: | Line 10: | ||
width:100% | width:100% | ||
} | } | ||
| + | |||
#mainContainer { | #mainContainer { | ||
| Line 57: | Line 58: | ||
header | header | ||
{ | { | ||
| − | height: | + | background: url(https://static.igem.org/mediawiki/2015/2/20/LONBIO-beer-background.jpg) center 0 no-repeat !important; |
| + | background-size: cover !important; | ||
| + | height:370px; | ||
} | } | ||
| Line 63: | Line 66: | ||
position:relative; | position:relative; | ||
z-index: 11; | z-index: 11; | ||
| − | + | width:110%; | |
| − | + | margin-left:-5%; | |
| − | width: | + | |
| − | margin-left: | + | |
margin-right:auto; | margin-right:auto; | ||
text-align: center; | text-align: center; | ||
| Line 74: | Line 75: | ||
.sf-menu ul {position:absolute;top:-999px; display:none;/* left offset of submenus need to match (see below) */} | .sf-menu ul {position:absolute;top:-999px; display:none;/* left offset of submenus need to match (see below) */} | ||
.sf-menu li { padding-left:0px; position:relative; background: none;} | .sf-menu li { padding-left:0px; position:relative; background: none;} | ||
| − | + | .sf-menu a { | |
| − | + | display: block; | |
| − | + | text-decoration: none; | |
| − | + | text-transform: uppercase; | |
| − | + | font-family: 'Raleway', cursive; | |
| − | + | } | |
| − | + | .sf-menu a:hover {text-decoration: none;} | |
li.sfHover {position: relative;} | li.sfHover {position: relative;} | ||
.sf-menu > li > a { | .sf-menu > li > a { | ||
| − | + | position: relative; | |
| − | + | display:block; | |
| − | + | padding: 0px 0px 0px; | |
| − | + | text-align: center; | |
| − | + | -moz-transition: background 0.3s ease-out; | |
-o-transition: background 0.3s ease-out; | -o-transition: background 0.3s ease-out; | ||
-webkit-transition: background 0.3s ease-out; | -webkit-transition: background 0.3s ease-out; | ||
| − | font-size: | + | font-size: 18px; |
| − | color: | + | color: black; |
line-height: 24px; | line-height: 24px; | ||
} | } | ||
.sf-menu > li { | .sf-menu > li { | ||
| − | + | display: block; | |
| − | + | margin: 0 26px; | |
| − | + | float: left; | |
| − | + | position: relative; | |
} | } | ||
| − | + | .sf-menu > li.current > a, | |
| − | + | .sf-menu > li:hover > a, | |
| − | + | .sf-menu > li.sfHover > a { color: #black;} | |
| − | + | .sf-menu > li:hover > a, | |
| − | + | .sf-menu > li.current > a, | |
| − | + | .sf-menu > li.sfHover > a, | |
| − | + | .sf-menu > li:hover > span, | |
| − | + | .sf-menu > li.current > span, | |
| − | + | .sf-menu > li.sfHover > span { | |
| − | + | text-decoration: none; | |
| − | + | } | |
.sf-menu li span { | .sf-menu li span { | ||
| − | + | position: absolute; | |
| − | + | right: 50%; | |
| − | + | top: 26px; | |
| − | + | width: 0; | |
| − | + | height: 0; | |
| − | + | margin-right: -4px; | |
| − | + | border: 5px solid; | |
| − | + | border-color: #513f25 transparent transparent transparent; | |
} | } | ||
.sf-menu > li a:hover > span, | .sf-menu > li a:hover > span, | ||
| Line 131: | Line 132: | ||
.sf-menu > li > ul, | .sf-menu > li > ul, | ||
.sf-menu > li.sfHover > ul { | .sf-menu > li.sfHover > ul { | ||
| − | + | top: 41px; | |
| − | + | left: 50%; | |
| − | + | margin-left: -67px; | |
| − | + | z-index:99; | |
| − | + | background: black; | |
| − | + | text-align: center; | |
| − | + | ||
| − | + | ||
} | } | ||
.sf-menu > li > ul > li { width:100%; height: auto; margin: 0; line-height: 30px;} | .sf-menu > li > ul > li { width:100%; height: auto; margin: 0; line-height: 30px;} | ||
.sf-menu > li > ul > li > a { | .sf-menu > li > ul > li > a { | ||
| − | + | display: inline-block; | |
| − | + | border: none; | |
| − | + | color: #fff; | |
| − | + | font-size: 18px; | |
| − | + | line-height: 30px; | |
| − | + | -moz-transition: color 0.3s ease-out; | |
-o-transition: color 0.3s ease-out; | -o-transition: color 0.3s ease-out; | ||
-webkit-transition: color 0.3s ease-out; | -webkit-transition: color 0.3s ease-out; | ||
| + | margin: 10px; | ||
} | } | ||
.sf-menu li li a:hover, | .sf-menu li li a:hover, | ||
| Line 156: | Line 156: | ||
.sf-menu li li:hover span, | .sf-menu li li:hover span, | ||
.sf-menu li.sfHover li.sfHover span { | .sf-menu li.sfHover li.sfHover span { | ||
| − | + | text-decoration: underline; | |
| − | + | ||
} | } | ||
.sf-menu li li:hover, | .sf-menu li li:hover, | ||
| Line 163: | Line 162: | ||
.sf-menu > li.sfHover > span { | .sf-menu > li.sfHover > span { | ||
| − | + | color: #ffffff; | |
} | } | ||
.sf-menu > li > ul:after { | .sf-menu > li > ul:after { | ||
| − | + | position: absolute; | |
| − | + | content: ""; | |
| − | + | width: 0; | |
| − | + | height: 0; | |
| − | + | border: 4px solid; | |
| − | + | border-color: transparent transparent #62321d transparent; | |
| − | + | top: -8px; | |
| − | + | left: 50%; | |
| − | + | margin-left: -6px; | |
} | } | ||
.sf-menu > li li > a > span { | .sf-menu > li li > a > span { | ||
| − | + | position: absolute; | |
| − | + | width: 0; | |
| − | + | height: 0; | |
| − | + | border: 4px solid; | |
| − | + | border-color: #fff transparent transparent transparent; | |
| − | + | top: 25px; | |
| − | + | left: 50%; | |
| − | + | margin-left: -6px; | |
} | } | ||
.sf-menu > li li:hover > a > span, | .sf-menu > li li:hover > a > span, | ||
| Line 193: | Line 192: | ||
.sf-menu li li ul { | .sf-menu li li ul { | ||
| − | + | left: 97px; | |
| − | + | top: -16px; | |
| − | + | width: 88px; | |
| − | + | z-index:99; | |
| − | + | background: #970a00 url(../images/bg-3.gif) 0 0 repeat; | |
| − | + | position: absolute; | |
| − | + | padding-top: 16px; | |
| − | + | padding-bottom: 15px; | |
| − | + | margin-top: 0; | |
| − | + | text-align: left; | |
| − | + | text-align: left; | |
} | } | ||
.sf-menu li li ul:after { | .sf-menu li li ul:after { | ||
| − | + | position: absolute; | |
| − | + | content: ""; | |
| − | + | width: 0; | |
| − | + | height: 0; | |
| − | + | border: 4px solid; | |
| − | + | border-color: transparent #990c00 transparent transparent; | |
| − | + | top: 26px; | |
| − | + | left: -8px; | |
} | } | ||
.sf-menu li li li {width: 100%; padding-left: 20px;} | .sf-menu li li li {width: 100%; padding-left: 20px;} | ||
.sf-menu li li li a { | .sf-menu li li li a { | ||
| − | + | display: inline-block; | |
| − | + | text-decoration: none; | |
| − | + | color: #fff; | |
| − | + | font-size: 18px; | |
| − | + | line-height: 30px; | |
| − | + | -moz-transition: color 0.3s ease-out; | |
-o-transition: color 0.3s ease-out; | -o-transition: color 0.3s ease-out; | ||
-webkit-transition: color 0.3s ease-out; | -webkit-transition: color 0.3s ease-out; | ||
} | } | ||
.sf-menu li li li:hover {} | .sf-menu li li li:hover {} | ||
| − | .sf-menu li li li:hover a { color: #fff0c7;} | + | .sf-menu li li li:hover a { color: #fff0c7;} |
.sf-menu > li > ul .sf-sub-indicator {color: #ffffff; line-height: 15px;} | .sf-menu > li > ul .sf-sub-indicator {color: #ffffff; line-height: 15px;} | ||
| − | .sf-menu > li > li.sfHover > span { color: #ffffff;} | + | .sf-menu > li > li.sfHover > span { color: #ffffff;} |
@media only screen and (max-width: 995px) { | @media only screen and (max-width: 995px) { | ||
| Line 235: | Line 234: | ||
@media only screen and (max-width: 767px) { | @media only screen and (max-width: 767px) { | ||
| − | + | .sf-menu { display:none !important;} | |
| − | + | nav { float: none; margin-left: 0; margin-bottom: 0; margin-top: 15px;} | |
| − | + | nav select { | |
| − | + | height: 35px; | |
| − | + | border: 1px solid #f0ab36; | |
| − | + | font-family: Trebuchet MS, sans-serif; | |
| − | + | font-size: 14px; | |
| − | + | line-height: 20px; | |
| − | + | color: #ffffff; | |
| − | + | background-color: #f0ab36; | |
| − | + | width:420px; | |
| − | + | width: 300px; | |
| − | + | outline: none; | |
| − | + | padding: 5px; | |
| − | + | font-weight: normal; | |
| − | + | margin-top: 0px; | |
| − | + | margin-bottom: 25px; | |
| − | + | } | |
| − | + | nav select option:first-child { | |
| − | + | color:#ffffff; | |
| − | + | } | |
} | } | ||
| Line 269: | Line 268: | ||
.container_16{ position: relative; width: 960px; margin: 0 auto; padding: 0; } | .container_16{ position: relative; width: 960px; margin: 0 auto; padding: 0; } | ||
.grid_1, | .grid_1, | ||
| − | + | .grid_2, | |
| − | + | .grid_3, | |
| − | + | .grid_4, | |
| − | + | .grid_5, | |
| − | + | .grid_6, | |
| − | + | .grid_7, | |
| − | + | .grid_8, | |
| − | + | .grid_9, | |
| − | + | .grid_10, | |
| − | + | .grid_11, | |
| − | + | .grid_12, | |
| − | + | .grid_13, | |
| − | + | .grid_14, | |
| − | + | .grid_15, | |
| − | + | .grid_16 { float: left; display: inline; margin-left: 10px; margin-right: 10px; } | |
| − | .container_16 .alpha | + | .container_16 .alpha { margin-left: 0; } |
| − | .container_16 .omega | + | .container_16 .omega { margin-right: 0; } |
| − | .container_16 .grid_1 | + | .container_16 .grid_1 { width: 40px; } |
| − | .container_16 .grid_2 | + | .container_16 .grid_2 { width: 100px; } |
| − | .container_16 .grid_3 | + | .container_16 .grid_3 { width: 160px; } |
| − | .container_16 .grid_4 | + | .container_16 .grid_4 { width: 220px; } |
| − | .container_16 .grid_5 | + | .container_16 .grid_5 { width: 280px; } |
| − | .container_16 .grid_6 | + | .container_16 .grid_6 { width: 340px; } |
| − | .container_16 .grid_7 | + | .container_16 .grid_7 { width: 400px; } |
| − | .container_16 .grid_8 | + | .container_16 .grid_8 { width: 460px; } |
| − | .container_16 .grid_9 | + | .container_16 .grid_9 { width: 520px; } |
| − | .container_16 .grid_10 | + | .container_16 .grid_10 { width: 580px; } |
| − | .container_16 .grid_11 | + | .container_16 .grid_11 { width: 640px; } |
| − | .container_16 .grid_12 | + | .container_16 .grid_12 { width: 700px; } |
| − | .container_16 .grid_13 | + | .container_16 .grid_13 { width: 760px; } |
| − | .container_16 .grid_14 | + | .container_16 .grid_14 { width: 820px; } |
| − | .container_16 .grid_15 | + | .container_16 .grid_15 { width: 880px; } |
| − | .container_16 .grid_16 | + | .container_16 .grid_16 { width: 940px; } |
| − | + | .container_16 .prefix_1 {padding-left:60px;} | |
| − | + | .container_16 .prefix_2 {padding-left:120px;} | |
| − | + | .container_16 .prefix_3 {padding-left:180px;} | |
| − | + | .container_16 .prefix_4 {padding-left:240px;} | |
| − | + | .container_16 .prefix_5 {padding-left:300px;} | |
| − | + | .container_16 .prefix_6 {padding-left:360px;} | |
| − | + | .container_16 .prefix_7 {padding-left:420px;} | |
| − | + | .container_16 .prefix_8 {padding-left:480px;} | |
| − | + | .container_16 .prefix_9 {padding-left:540px;} | |
| − | + | .container_16 .prefix_10 {padding-left:600px;} | |
| − | + | .container_16 .prefix_11 {padding-left:660px;} | |
| − | + | .container_16 .prefix_12 {padding-left:720px;} | |
| − | + | .container_16 .prefix_13 {padding-left:780px;} | |
| − | + | .container_16 .prefix_14 {padding-left:840px;} | |
| − | + | .container_16 .prefix_15 {padding-left:900px;} | |
| − | + | .container_16 .suffix_1 {padding-right:60px;} | |
| − | + | .container_16 .suffix_2 {padding-right:120px;} | |
| − | + | .container_16 .suffix_3 {padding-right:180px;} | |
| − | + | .container_16 .suffix_4 {padding-right:240px;} | |
| − | + | .container_16 .suffix_5 {padding-right:300px;} | |
| − | + | .container_16 .suffix_6 {padding-right:360px;} | |
| − | + | .container_16 .suffix_7 {padding-right:420px;} | |
| − | + | .container_16 .suffix_8 {padding-right:480px;} | |
| − | + | .container_16 .suffix_9 {padding-right:540px;} | |
| − | + | .container_16 .suffix_10 {padding-right:600px;} | |
| − | + | .container_16 .suffix_11 {padding-right:660px;} | |
| − | + | .container_16 .suffix_12 {padding-right:720px;} | |
| − | + | .container_16 .suffix_13 {padding-right:780px;} | |
| − | + | .container_16 .suffix_14 {padding-right:840px;} | |
| − | + | .container_16 .suffix_15 {padding-right:900px;} | |
| − | + | ||
@media only screen and (min-width: 768px) and (max-width: 995px) { | @media only screen and (min-width: 768px) and (max-width: 995px) { | ||
.container_16 { width: 768px; } | .container_16 { width: 768px; } | ||
.grid_1, | .grid_1, | ||
| − | + | .grid_2, | |
| − | + | .grid_3, | |
| − | + | .grid_4, | |
| − | + | .grid_5, | |
| − | + | .grid_6, | |
| − | + | .grid_7, | |
| − | + | .grid_8, | |
| − | + | .grid_9, | |
| − | + | .grid_10, | |
| − | + | .grid_11, | |
| − | + | .grid_12, | |
| − | + | .grid_13, | |
| − | + | .grid_14, | |
| − | + | .grid_15, | |
| − | + | .grid_16 { margin-left: 10px; margin-right: 10px; } | |
.container_16 .alpha { margin-left: 0;} | .container_16 .alpha { margin-left: 0;} | ||
.container_16 .omega { margin-right: 0;} | .container_16 .omega { margin-right: 0;} | ||
| − | .container_16 .grid_1 | + | .container_16 .grid_1 { width: 28px; } |
| − | .container_16 .grid_2 | + | .container_16 .grid_2 { width: 76px; } |
| − | .container_16 .grid_3 | + | .container_16 .grid_3 { width: 124px; } |
| − | .container_16 .grid_4 | + | .container_16 .grid_4 { width: 172px; } |
| − | .container_16 .grid_5 | + | .container_16 .grid_5 { width: 220px; } |
| − | .container_16 .grid_6 | + | .container_16 .grid_6 { width: 268px; } |
| − | .container_16 .grid_7 | + | .container_16 .grid_7 { width: 316px; } |
| − | .container_16 .grid_8 | + | .container_16 .grid_8 { width: 364px; } |
| − | .container_16 .grid_9 | + | .container_16 .grid_9 { width: 412px; } |
| − | .container_16 .grid_10 | + | .container_16 .grid_10 { width: 460px; } |
| − | .container_16 .grid_11 | + | .container_16 .grid_11 { width: 508px; } |
| − | .container_16 .grid_12 | + | .container_16 .grid_12 { width: 556px; } |
| − | .container_16 .grid_13 | + | .container_16 .grid_13 { width: 604px; } |
| − | .container_16 .grid_14 | + | .container_16 .grid_14 { width: 652px; } |
| − | .container_16 .grid_15 | + | .container_16 .grid_15 { width: 700px; } |
| − | .container_16 .grid_16 | + | .container_16 .grid_16 { width: 748px; } |
| − | + | .container_16 .prefix_1 {padding-left:48px;} | |
| − | + | .container_16 .prefix_2 {padding-left:96px;} | |
| − | + | .container_16 .prefix_3 {padding-left:144px;} | |
| − | + | .container_16 .prefix_4 {padding-left:192px;} | |
| − | + | .container_16 .prefix_5 {padding-left:240px;} | |
| − | + | .container_16 .prefix_6 {padding-left:288px;} | |
| − | + | .container_16 .prefix_7 {padding-left:336px;} | |
| − | + | .container_16 .prefix_8 {padding-left:384px;} | |
| − | + | .container_16 .prefix_9 {padding-left:432px;} | |
| − | + | .container_16 .prefix_10 {padding-left:480px;} | |
| − | + | .container_16 .prefix_11 {padding-left:528px;} | |
| − | + | .container_16 .prefix_12 {padding-left:576px;} | |
| − | + | .container_16 .prefix_13 {padding-left:614px;} | |
| − | + | .container_16 .prefix_14 {padding-left:672px;} | |
| − | + | .container_16 .prefix_15 {padding-left:720px;} | |
| − | + | .container_16 .suffix_1 {padding-right:48px;} | |
| − | + | .container_16 .suffix_2 {padding-right:96px;} | |
| − | + | .container_16 .suffix_3 {padding-right:144px;} | |
| − | + | .container_16 .suffix_4 {padding-right:192px;} | |
| − | + | .container_16 .suffix_5 {padding-right:240px;} | |
| − | + | .container_16 .suffix_6 {padding-right:288px;} | |
| − | + | .container_16 .suffix_7 {padding-right:336px;} | |
| − | + | .container_16 .suffix_8 {padding-right:384px;} | |
| − | + | .container_16 .suffix_9 {padding-right:432px;} | |
| − | + | .container_16 .suffix_10 {padding-right:480px;} | |
| − | + | .container_16 .suffix_11 {padding-right:528px;} | |
| − | + | .container_16 .suffix_12 {padding-right:576px;} | |
| − | + | .container_16 .suffix_13 {padding-right:614px;} | |
| − | + | .container_16 .suffix_14 {padding-right:672px;} | |
| − | + | .container_16 .suffix_15 {padding-right:720px;} | |
} | } | ||
| Line 431: | Line 430: | ||
.container_16 .grid_16{ width: 300px;} | .container_16 .grid_16{ width: 300px;} | ||
| − | + | .container_16 .prefix_1, | |
| − | + | .container_16 .prefix_2, | |
| − | + | .container_16 .prefix_3, | |
| − | + | .container_16 .prefix_4, | |
| − | + | .container_16 .prefix_5, | |
| − | + | .container_16 .prefix_6, | |
| − | + | .container_16 .prefix_7, | |
| − | + | .container_16 .prefix_8, | |
| − | + | .container_16 .prefix_9, | |
| − | + | .container_16 .prefix_10, | |
| − | + | .container_16 .prefix_11, | |
| − | + | .container_16 .prefix_12, | |
| − | + | .container_16 .prefix_13, | |
| − | + | .container_16 .prefix_14, | |
| − | + | .container_16 .prefix_15{padding-left:0;} | |
| − | + | .container_16 .suffix_1, | |
| − | + | .container_16 .suffix_2, | |
| − | + | .container_16 .suffix_3, | |
| − | + | .container_16 .suffix_4, | |
| − | + | .container_16 .suffix_5, | |
| − | + | .container_16 .suffix_6, | |
| − | + | .container_16 .suffix_7, | |
| − | + | .container_16 .suffix_8, | |
| − | + | .container_16 .suffix_9, | |
| − | + | .container_16 .suffix_10, | |
| − | + | .container_16 .suffix_11, | |
| − | + | .container_16 .suffix_12, | |
| − | + | .container_16 .suffix_13, | |
| − | + | .container_16 .suffix_14, | |
| − | + | .container_16 .suffix_15{padding-right:0;} | |
| − | + | .container_16 .grid_1, | |
| − | + | .container_16 .grid_2, | |
| − | + | .container_16 .grid_3, | |
| − | + | .container_16 .grid_4, | |
| − | + | .container_16 .grid_5, | |
| − | + | .container_16 .grid_6, | |
| − | + | .container_16 .grid_7, | |
| − | + | .container_16 .grid_8, | |
| − | + | .container_16 .grid_9, | |
| − | + | .container_16 .grid_10, | |
| − | + | .container_16 .grid_11, | |
| − | + | .container_16 .grid_12, | |
| − | + | .container_16 .grid_13, | |
| − | + | .container_16 .grid_14, | |
| − | + | .container_16 .grid_15, | |
| − | + | .container_16 .grid_16 { | |
| − | + | margin-left: 0!important; | |
| − | + | margin-right: 0!important; | |
| − | + | } | |
} | } | ||
| Line 506: | Line 505: | ||
.container_16 .grid_16{ width: 420px; } | .container_16 .grid_16{ width: 420px; } | ||
| − | + | .container_16 .prefix_1, | |
| − | + | .container_16 .prefix_2, | |
| − | + | .container_16 .prefix_3, | |
| − | + | .container_16 .prefix_4, | |
| − | + | .container_16 .prefix_5, | |
| − | + | .container_16 .prefix_6, | |
| − | + | .container_16 .prefix_7, | |
| − | + | .container_16 .prefix_8, | |
| − | + | .container_16 .prefix_9, | |
| − | + | .container_16 .prefix_10, | |
| − | + | .container_16 .prefix_11, | |
| − | + | .container_16 .prefix_12, | |
| − | + | .container_16 .prefix_13, | |
| − | + | .container_16 .prefix_14, | |
| − | + | .container_16 .prefix_15{padding-left:0;} | |
| − | + | .container_16 .suffix_1, | |
| − | + | .container_16 .suffix_2, | |
| − | + | .container_16 .suffix_3, | |
| − | + | .container_16 .suffix_4, | |
| − | + | .container_16 .suffix_5, | |
| − | + | .container_16 .suffix_6, | |
| − | + | .container_16 .suffix_7, | |
| − | + | .container_16 .suffix_8, | |
| − | + | .container_16 .suffix_9, | |
| − | + | .container_16 .suffix_10, | |
| − | + | .container_16 .suffix_11, | |
| − | + | .container_16 .suffix_12, | |
| − | + | .container_16 .suffix_13, | |
| − | + | .container_16 .suffix_14, | |
| − | + | .container_16 .suffix_15{padding-right:0;} | |
} | } | ||
| Line 569: | Line 568: | ||
| − | + | html, body { | |
| − | + | background: #ffffff; | |
| − | + | font: 14px/20px Arial, sans-serif; | |
| − | + | color: #a49887; | |
| − | + | min-width:300px; | |
| − | + | } | |
| − | + | * { -webkit-text-size-adjust: none;} | |
| − | + | a { color: inherit; text-decoration: underline;} | |
| − | + | a:hover { text-decoration: none;} | |
| − | + | a[href^="tel:"] {color: inherit;text-decoration:none;} | |
| − | + | .a-hov { transition: all 0.4s ease;} | |
| − | + | .a-hov:hover { color: #6b460a;} | |
| − | + | ul li a { transition: all 0.4s ease;} | |
| − | + | h1, h2, h3, h4, h5, h6 { font-family: "Raleway", Arial; font-weight: normal; text-transform: uppercase;} | |
| − | + | h1 { } | |
| − | + | h2 { font-size: 32px; line-height: 34px; color: #6b460a; padding-top: 55px; padding-bottom: 15px;} | |
| − | + | h3 { font-size: 22px; line-height: 26px; color: #aca383; padding-bottom: 8px; padding-top: 21px;} | |
| − | + | h4 { } | |
| − | + | h5 { } | |
| − | + | .title-1 { | |
| − | + | background: #67C3CF; | |
| − | + | color: #000000; | |
| − | + | font-size: 20px; | |
| − | + | line-height: 32px; | |
| − | + | text-align: center; | |
| − | + | ||
| − | + | padding: 10px 0px; | |
| − | + | margin-bottom: 29px; | |
| − | + | } | |
| − | + | .title-1.lenablue { background: #67C3CF;} | |
| − | + | .title-1.lenablue { background: #67C3CF;} | |
| − | + | .title-1.lenablue { background: #67C3CF;} | |
| − | + | .title-2 { font-family: 'Stint Ultra Condensed', cursive; font-size: 80px; line-height: 1em; text-transform: uppercase; color: #6b460a; padding-top: 46px;} | |
| − | + | .text-1 { font-family: 'Open Sans', sans-serif; color: #000000; text-transform: uppercase; font-size: 11px; line-height: 22px;} | |
| − | + | .text-2 { } | |
| − | + | .text-3 { } | |
| − | + | .color-1 { color: #f35c1a;} | |
| − | + | .color-2 { } | |
| − | + | h2.v1 { color: #bd812f; padding-top: 0px !important;} | |
| − | + | .page-1 h2 { padding-top: 70px; padding-bottom: 14px;} | |
| − | + | h2 + .btn { margin-top: 9px;} | |
| − | + | h2 + h3 { padding-top: 0;} | |
| − | + | h3 a { transition: all .4s ease;} | |
| − | + | h3 a:hover { color: #6b460a;} | |
| − | + | .link { | |
| − | + | font-size: 24px; | |
| − | + | line-height: 24px; | |
| − | + | color: #f35c1a; | |
| − | + | transition: all .4s ease; | |
| − | + | text-transform: none; | |
| − | + | } | |
| − | + | .link:hover { color:#6b460a; } | |
| − | + | .btn { | |
| − | + | display: inline-block; | |
| − | + | text-align: center; | |
| − | + | vertical-align: middle; | |
| − | + | transition: all 0.4s ease; | |
| − | + | background: #f57741; | |
| − | + | height: 45px; | |
| − | + | line-height: 45px; | |
| − | + | text-transform: uppercase; | |
| − | + | font-size: 22px; | |
| − | + | padding: 0 21px; | |
| − | + | -webkit-border-radius: 2px; | |
| − | + | -moz-border-radius: 2px; | |
| − | + | -ms-border-radius: 2px; | |
| − | + | -o-border-radius: 2px; | |
| − | + | border-radius: 2px; | |
| − | + | color: #808080; | |
| − | + | margin-top: 23px; | |
| − | + | } | |
| − | + | .btn:hover { background: #fff;} | |
| − | + | .btn-1 { | |
| − | + | display: inline-block; | |
| − | + | text-align: center; | |
| − | + | vertical-align: middle; | |
| − | + | transition: all 0.4s ease; | |
| − | + | background: #fff; | |
| − | + | height: 45px; | |
| − | + | line-height: 45px; | |
| − | + | font-family: 'Arial', cursive; | |
| − | + | font-size: 15px; | |
| − | + | padding: 0 20px; | |
| − | + | color: #808080; | |
| − | + | margin-top: 23px; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | .btn-1:hover { text-decoration:underline;} | |
| − | + | .btn-1:visited { color: #808080;} | |
| − | + | .btn-2:visited { color: #be7d25;} | |
| − | + | .btn-2 { | |
| − | + | display: inline-block; | |
| − | + | text-align: center; | |
| − | + | transition: all 0.4s ease; | |
| − | + | line-height: 22px; | |
| − | + | text-transform: uppercase; | |
| − | + | font-size: 22px; | |
| − | + | color: #be7d25; | |
| − | + | background: url(arrow-1.png) right 4px no-repeat; | |
| − | + | padding-right: 20px; | |
| − | + | } | |
| − | + | .btn-2:hover { color: #6b460a;} | |
| − | + | ||
| − | + | .list li { | |
| − | + | line-height: 28px; | |
| − | + | padding-left: 27px; | |
| − | + | background: url(https://static.igem.org/mediawiki/2015/0/0a/LONBIO-Mark-3.png) 0 7px no-repeat; | |
| − | + | margin-top: -7px; | |
| − | + | } | |
| − | + | .list li + li { margin-top: 0px;} | |
| − | + | .list li a { } | |
| − | + | .list li a:hover { color: #f74f42;} | |
| − | + | .img-ind {float: left; margin-right: 20px; margin-top: 2px;} | |
| − | + | .wrapper {width: 100%; position: relative;} | |
| − | + | .extra-wrap {overflow:hidden;} | |
| − | + | .grid_inside { margin: 0 -10px;} | |
| − | + | .aligncenter {text-align: center !important;} | |
| − | + | .alignleft { text-align: left !important; } | |
| − | + | .it {font-style:italic; display: inline-block;} | |
| − | + | .fleft {float: left;} | |
| − | + | .fright {float: right;} | |
| − | + | .h-underline:hover { text-decoration: underline;} | |
| − | + | .underline {text-decoration: underline;} | |
| − | + | .upp {text-transform: uppercase;} | |
| − | + | .transition {transition: all 0.4s ease;} | |
| − | + | .clearfix { *zoom: 1;} | |
| − | + | .clearfix:before,.clearfix:after {display: table; content: "";line-height: 0;} | |
| − | + | .clearfix:after { clear: both;} | |
| − | + | .img-ind + div > h2, .img-ind + div > h3 { padding-top: 0;} | |
| − | + | .img-circle { | |
| − | + | float: left; | |
| − | + | margin-right: 20px; | |
| − | + | background: #f57741; | |
| − | + | text-align: center; | |
| − | + | vertical-align: middle; | |
| − | + | width: 69px; | |
| − | + | height: 69px; | |
| − | + | line-height: 69px; | |
| − | + | margin-top: 4px; | |
| − | + | -webkit-border-radius: 500px; | |
| − | + | -moz-border-radius: 500px; | |
| − | + | -ms-border-radius: 500px; | |
| − | + | -o-border-radius: 500px; | |
| − | + | border-radius: 500px; | |
| − | + | } | |
| − | + | .img-circle img { display: inline-block; line-height: 69px; vertical-align: middle;} | |
| − | + | .img-circle + div > h3 { padding-top: 0; margin-top: -2px;} | |
| − | + | .img-circle + div { overflow: hidden;} | |
| − | + | .pad-left { padding-left: 10px;} | |
| − | + | p { padding-bottom: 20px;} | |
| − | + | .top-1 { padding-top: 70px;} | |
.bg-1 { display: none;} | .bg-1 { display: none;} | ||
| − | .bg-2 { background: | + | .bg-2 { background-colour:#000000 0 0 repeat; padding-bottom: 20px;} |
.bord-1 { position: relative;} | .bord-1 { position: relative;} | ||
.bord-1:after { | .bord-1:after { | ||
| − | + | content: ""; | |
| − | + | position: absolute; | |
| − | + | left: 10px; | |
| − | + | right: 10px; | |
| − | + | bottom: 0; | |
| − | + | height: 1px; | |
} | } | ||
.bord-1.v1 {padding-bottom: 16px;} | .bord-1.v1 {padding-bottom: 16px;} | ||
| Line 767: | Line 756: | ||
.bord-2 { position: relative;margin-top: 57px;} | .bord-2 { position: relative;margin-top: 57px;} | ||
.bord-2:after { | .bord-2:after { | ||
| − | + | position: absolute; | |
| − | + | content: ""; | |
| − | + | border-right: 1px solid #f0ede9; | |
| − | + | top: 0; | |
| − | + | bottom: 0; | |
| − | + | right: 19px; | |
| − | + | width: 1px; | |
} | } | ||
.bord-3 { position: relative; padding-bottom: 55px;} | .bord-3 { position: relative; padding-bottom: 55px;} | ||
.bord-3:after { | .bord-3:after { | ||
| − | + | content: ""; | |
| − | + | position: absolute; | |
| − | + | border-bottom: 1px solid #e9e5df; | |
| − | + | left: 0px; | |
| − | + | right: 0px; | |
| − | + | bottom: 0; | |
| − | + | height: 1px; | |
} | } | ||
.page-1 .img-ind {float: left; margin-right: 41px; margin-top: 2px;} | .page-1 .img-ind {float: left; margin-right: 41px; margin-top: 2px;} | ||
| − | |||
| − | |||
h1 { text-align: center;} | h1 { text-align: center;} | ||
.list_carousel { | .list_carousel { | ||
| − | + | /*background: url(../images/bg-4.png) center 0 no-repeat; */ | |
| − | + | min-height: 119px; | |
| − | + | margin-top: 322px; | |
| − | + | padding: 0 110px; | |
| − | + | position: relative; | |
| − | + | margin-bottom: 115px; | |
} | } | ||
.list_carousel ul { cursor: default;} | .list_carousel ul { cursor: default;} | ||
.list_carousel .foo_bg { | .list_carousel .foo_bg { | ||
| − | + | position: absolute; | |
| − | + | left: 0; | |
| − | + | right: 0; | |
| − | + | bottom: 0; | |
| − | + | top: 0; | |
| − | + | width: 100%; | |
| − | + | height: 100%; | |
} | } | ||
.list_carousel li { | .list_carousel li { | ||
| − | + | float: left; | |
| − | + | color: #fff; | |
| − | + | font-size: 55px; | |
| − | + | line-height: 65px; | |
| − | + | text-transform: uppercase; | |
| − | + | text-align: center; | |
| − | + | padding-top: 17px; | |
| − | + | padding-bottom: 37px; | |
| − | + | ||
} | } | ||
.list_carousel li span { color: #e6ff74;} | .list_carousel li span { color: #e6ff74;} | ||
| Line 835: | Line 821: | ||
.content-last { position: relative; padding-bottom: 66px;} | .content-last { position: relative; padding-bottom: 66px;} | ||
.content-last:after { | .content-last:after { | ||
| − | + | position: absolute; | |
| − | + | content: ""; | |
| − | + | left: 10px; | |
| − | + | right: 10px; | |
| − | + | bottom: 0; | |
| − | + | border-bottom: 1px solid #e9e5df; | |
| − | + | height: 1px; | |
} | } | ||
.box-1 { margin-top: 25px; text-align: center;} | .box-1 { margin-top: 25px; text-align: center;} | ||
| Line 871: | Line 857: | ||
blockquote .inside .quote, | blockquote .inside .quote, | ||
blockquote .inside .quote-1 { | blockquote .inside .quote-1 { | ||
| − | + | width: 28px; | |
| − | + | height: 17px; | |
| − | + | display: inline-block; | |
} | } | ||
blockquote .inside .quote { background: url(../images/quote-1.png) 0 bottom no-repeat;} | blockquote .inside .quote { background: url(../images/quote-1.png) 0 bottom no-repeat;} | ||
| Line 881: | Line 867: | ||
footer { | footer { | ||
| − | + | font-size: 24px; | |
| − | + | line-height: 24px; | |
| − | + | color: #c1baa2; | |
| − | + | text-transform: uppercase; | |
| − | + | padding-bottom: 40px; | |
| − | + | background: #fff; | |
| − | + | z-index: 9; | |
} | } | ||
| Line 893: | Line 879: | ||
.list-services { margin-top: 31px; position: relative; margin-right: auto; margin-left: 11px;} | .list-services { margin-top: 31px; position: relative; margin-right: auto; margin-left: 11px;} | ||
.list-services li { | .list-services li { | ||
| − | + | display: inline-block; | |
| − | + | float: left; | |
} | } | ||
| − | + | [class*="list-services-"] { | |
| − | + | text-decoration: none; | |
| − | + | display: block; | |
| − | + | height: 34px; | |
| − | + | width: 34px; | |
| − | + | background: url(https://static.igem.org/mediawiki/2015/b/b7/LONBIO-Social_icons.png) no-repeat; | |
| − | + | -webkit-transition: all 0.2s ease-out; | |
| − | + | -moz-transition: all 0.2s ease-out; | |
| − | + | -o-transition: all 0.2s ease-out; | |
| − | + | -ms-transition: all 0.2s ease-out; | |
| − | + | transition: all 0.2s ease-out; | |
| − | + | margin-left: 11px; | |
| − | + | -webkit-border-radius: 500px; | |
| − | + | -moz-border-radius: 500px; | |
| − | + | -ms-border-radius: 500px; | |
| − | + | -o-border-radius: 500px; | |
| − | + | border-radius: 500px; | |
| − | + | } | |
| − | + | .list-services-1 { background-position: 0px 0px;} | |
| − | + | .list-services-2 { background-position: -45px 0px;} | |
| − | + | .list-services-3 { background-position: -90px 0px;} | |
| − | + | .list-services-4 { background-position: -136px 0px;} | |
| − | + | .list-services li a:hover { opacity: .6;} | |
| − | + | .box-2 { | |
| − | + | position: relative; | |
| − | + | margin-top: 31px; | |
| − | + | background: url(mark-1.png) 0 4px no-repeat; | |
| − | + | margin-left: 23px; | |
| − | + | padding-left: 29px; | |
} | } | ||
| − | + | .box-2 span { | |
| − | + | } | |
| − | + | .box-3 { | |
| − | + | position: relative; | |
| − | + | margin-top: 54px; | |
| − | + | background: url(mark-2.png) 0 4px no-repeat; | |
| − | + | margin-left: 0px; | |
| − | + | padding-left: 29px; | |
| − | + | color: #aca383; | |
| − | + | font-size: 13px; | |
| − | + | line-height: 26px; | |
| − | + | ||
| − | + | padding-bottom: 44px; | |
} | } | ||
footer .bord-1 { padding-bottom: 0px;} | footer .bord-1 { padding-bottom: 0px;} | ||
| Line 953: | Line 939: | ||
| − | + | /*toTop*/ | |
| − | + | #toTop { | |
| − | + | display:none; | |
| − | + | text-decoration:none; | |
| − | + | position:fixed; | |
| − | + | cursor:pointer; | |
| − | + | overflow:hidden; | |
| − | + | width: 24px; | |
| − | + | height: 24px; | |
| − | + | border:none; | |
| − | + | text-indent:-999px; | |
| − | + | z-index:20; | |
| − | + | background: url(ui.totop.png) 0 0 no-repeat; | |
| − | + | margin-right: -670px !important; | |
| − | + | right: 50%; | |
| − | + | bottom: 20px; | |
| − | + | } | |
| − | + | #toTop:hover { background: url(../images/ui.totop.png) right 0 no-repeat;} | |
| − | + | #toTop:active, #toTop:focus {outline:none;} | |
| − | + | /*touch-touch*/ | |
| − | + | .magnifier { | |
| − | + | position:relative; | |
| − | + | display:block; | |
| − | + | background: url(magnifier.png) center center no-repeat #000000; | |
| − | + | } | |
| − | + | .magnifier img { | |
| − | + | -webkit-transition: all 0.5s ease; | |
| − | + | -moz-transition: all 0.5s ease; | |
| − | + | -o-transition: all 0.5s ease; | |
| − | + | transition: all 0.5s ease; | |
| − | + | width: 100%; | |
| − | + | -webkit-box-shadow: 0px 0px 0px 0px #fff; | |
| − | + | -moz-box-shadow: 0px 0px 0px 0px #fff; | |
| − | + | box-shadow: 0px 0px 0px 0px #fff; | |
| − | + | } | |
| − | + | .magnifier:hover img { | |
| − | + | opacity: 0.4; | |
| − | + | } | |
| − | + | ||
/*==================================RESPONSIVE LAYOUTS===============================================*/ | /*==================================RESPONSIVE LAYOUTS===============================================*/ | ||
@media only screen and (max-width: 1230px) { | @media only screen and (max-width: 1230px) { | ||
| − | + | header { background-size: 100% auto;} | |
| − | + | .list_carousel { margin-top: 60px;} | |
} | } | ||
@media only screen and (max-width: 995px) { | @media only screen and (max-width: 995px) { | ||
| − | + | .wrapper-1 { width: 100%;} | |
| − | + | .list_carousel li { font-size: 50px; line-height: 59px;} | |
| − | + | .bg-2 { background-size: auto 100%;} | |
| − | + | .block-2 img { width: 100%;} | |
| − | + | .title-2 { font-size: 60px; line-height: 60px;} | |
| − | + | .w1 { width: 45%; margin-bottom: 15px;} | |
| − | + | .list-services { margin-left: 0;} | |
| − | + | [class*="list-services-"] { margin-left: 8px;} | |
| − | + | .list_carousel { padding: 0 100px;} | |
| − | + | .list_carousel { margin-bottom: 50px;} | |
} | } | ||
@media only screen and (max-width: 767px) { | @media only screen and (max-width: 767px) { | ||
| − | + | .list_carousel li { font-size: 30px; line-height: 30px;} | |
| − | + | .list_carousel { padding: 0px 70px 0;} | |
| − | + | .w2 { width: 46% !important; margin-left: 2%; margin-right: 2%;} | |
| − | + | .block-2 { text-align: center;padding-bottom: 20px;} | |
| − | + | .block-2 .title-2 { padding-top: 20px;} | |
| − | + | .bord-2:after { display: none;} | |
| − | + | .bord-2 { margin-top: 10px;} | |
| − | + | .box-3 { margin-top: 33px;} | |
| − | + | .gallery > div { width: 29% !important; padding-right: 2%; padding-left: 2%;} | |
| − | + | .grid_inside { margin: 0;} | |
| − | + | blockquote { margin-bottom: 20px;} | |
| − | + | footer .bord-1 { padding-bottom: 0px;} | |
| − | + | .box-2 { margin-left: 9px;} | |
| − | + | .box-3 { margin-left: 9px;} | |
| − | + | header { background-size: auto auto;} | |
| − | + | h1 img { width: 50%;} | |
} | } | ||
@media only screen and (max-width: 479px) { | @media only screen and (max-width: 479px) { | ||
| − | + | .list_carousel li { font-size: 25px; line-height: 31px;} | |
| − | + | .block-2 .w2 { width: 46% !important; margin-left: 2%; margin-right: 2%;} | |
| − | + | .gallery > div { width: 29% !important; padding-right: 2%; padding-left: 2%;} | |
| − | + | h1 img { width: 70%;} | |
} | } | ||
@media only screen and (max-width: 320px) { | @media only screen and (max-width: 320px) { | ||
Latest revision as of 03:27, 19 September 2015