Difference between revisions of "Template:Stockholm"

m
m
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
{{Template_All_Teams}}
 +
 
<!-- Declare that you are going to use html code instead of wiki code -->
 
<!-- Declare that you are going to use html code instead of wiki code -->
 
<html>
 
<html>
Line 5: Line 7:
 
<style type="text/css">
 
<style type="text/css">
  
+
/* LIGHTBOX */
 
+
#lightbox{
+
background-color:#eee;
@font-face {
+
padding: 10px;
font-family: 'icomoon';
+
border-bottom: 2px solid #666;
src:url('sthlm_fonts2/icomoon.eot?yluato');
+
border-right: 2px solid #666;
src:url('sthlm_fonts2/icomoon.eot?#iefixyluato') format('embedded-opentype'),
+
url('sthlm_fonts2/icomoon.ttf?yluato') format('truetype'),
+
url('sthlm_fonts2/icomoon.woff?yluato') format('woff'),
+
url('sthlm_fonts2/icomoon.svg?yluato#icomoon') format('svg');
+
font-weight: normal;
+
font-style: normal;
+
}
+
 
+
[class^="icon-"], [class*=" icon-"] {
+
font-family: 'icomoon';
+
speak: none;
+
font-style: normal;
+
font-weight: normal;
+
font-variant: normal;
+
text-transform: none;
+
line-height: 1;
+
 
+
/* Better Font Rendering =========== */
+
-webkit-font-smoothing: antialiased;
+
-moz-osx-font-smoothing: grayscale;
+
}
+
 
+
.icon-home:before {
+
content: "\e600";
+
}
+
.icon-bubbles2:before {
+
content: "\e601";
+
}
+
.icon-users:before {
+
content: "\e602";
+
}
+
.icon-gift:before {
+
content: "\e603";
+
}
+
.icon-lab:before {
+
content: "\e604";
+
}
+
.icon-clipboard:before {
+
content: "\e605";
+
}
+
 
+
/* Reset */
+
 
+
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+
margin: 0;
+
padding: 0;
+
border: 0;
+
font-size: 100%;
+
font: inherit;
+
vertical-align: baseline;
+
 
}
 
}
 +
#lightboxDetails{
 +
font-size: 0.8em;
 +
padding-top: 0.4em;
 +
}
 +
#lightboxCaption{ float: left; }
 +
#keyboardMsg{ float: right; }
 +
#closeButton{ top: 5px; right: 5px; }
  
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+
#lightbox img{ border: none; clear: both;}
display: block;
+
#overlay img{ border: none; }
}
+
  
body {
+
#overlay{ background-image: url(https://static.igem.org/mediawiki/2015/2/2d/STHLMOverlay.png); }
line-height: 1;
+
}
+
  
ol, ul {
+
* html #overlay{
list-style: none;
+
background-color: #333;
 +
back\ground-color: transparent;
 +
background-image: url(blank.gif);
 +
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://static.igem.org/mediawiki/2015/2/2d/STHLMOverlay.png", sizingMethod="scale");
 
}
 
}
 +
  
blockquote, q {
+
/* PAGE LAYOUT */
quotes: none;
+
}
+
  
blockquote:before, blockquote:after, q:before, q:after {
+
/* Change Background color*/
content: '';
+
body {  
content: none;
+
background-color: #fff;
}
+
 
+
table {
+
border-collapse: collapse;
+
border-spacing: 0;
+
}
+
 
+
body {
+
-webkit-text-size-adjust: none;
+
}
+
 
+
/* Box Model */
+
 
+
*, *:before, *:after {
+
-moz-box-sizing: border-box;
+
-webkit-box-sizing: border-box;
+
box-sizing: border-box;
+
}
+
 
+
/* Containers */
+
 
+
.container {
+
margin-left: auto;
+
margin-right: auto;
+
}
+
 
+
.container.\31 25\25 {
+
width: 100%;
+
max-width: 1200px;
+
min-width: 960px;
+
}
+
 
+
.container.\37 5\25 {
+
width: 720px;
+
}
+
 
+
.container.\35 0\25 {
+
width: 480px;
+
}
+
 
+
.container.\32 5\25 {
+
width: 240px;
+
}
+
 
+
.container {
+
width: 960px;
+
}
+
 
+
@media screen and (min-width: 1px) {
+
 
+
.container.\31 25\25 {
+
width: 100%;
+
max-width: 1500px;
+
min-width: 1200px;
+
}
+
 
+
.container.\37 5\25 {
+
width: 900px;
+
}
+
 
+
.container.\35 0\25 {
+
width: 600px;
+
}
+
 
+
.container.\32 5\25 {
+
width: 300px;
+
}
+
 
+
.container {
+
width: 1200px;
+
}
+
 
+
}
+
 
+
 
+
 
+
/* Grid */
+
 
+
.row {
+
border-bottom: solid 1px transparent;
+
-moz-box-sizing: border-box;
+
-webkit-box-sizing: border-box;
+
box-sizing: border-box;
+
}
+
 
+
.row > * {
+
float: left;
+
-moz-box-sizing: border-box;
+
-webkit-box-sizing: border-box;
+
box-sizing: border-box;
+
}
+
 
+
.row:after, .row:before {
+
content: '';
+
display: block;
+
clear: both;
+
height: 0;
+
}
+
 
+
.row.uniform > * > :first-child {
+
margin-top: 0;
+
}
+
 
+
.row.uniform > * > :last-child {
+
margin-bottom: 0;
+
}
+
 
+
.row.\30 \25 > * {
+
padding: 0 0 0 0px;
+
}
+
 
+
.row.\30 \25 {
+
margin: 0 0 -1px 0px;
+
}
+
 
+
.row.uniform.\30 \25 > * {
+
padding: 0px 0 0 0px;
+
}
+
 
+
.row.uniform.\30 \25 {
+
margin: 0px 0 -1px 0px;
+
}
+
 
+
.row > * {
+
padding: 0 0 0 40px;
+
}
+
 
+
.row {
+
margin: 0 0 -1px -40px;
+
}
+
 
+
.row.uniform > * {
+
padding: 40px 0 0 40px;
+
}
+
 
+
.row.uniform {
+
margin: -40px 0 -1px -40px;
+
}
+
 
+
.row.\32 00\25 > * {
+
padding: 0 0 0 80px;
+
}
+
 
+
.row.\32 00\25 {
+
margin: 0 0 -1px -80px;
+
}
+
 
+
.row.uniform.\32 00\25 > * {
+
padding: 80px 0 0 80px;
+
}
+
 
+
.row.uniform.\32 00\25 {
+
margin: -80px 0 -1px -80px;
+
}
+
 
+
.row.\31 50\25 > * {
+
padding: 0 0 0 60px;
+
}
+
 
+
.row.\31 50\25 {
+
margin: 0 0 -1px -60px;
+
}
+
 
+
.row.uniform.\31 50\25 > * {
+
padding: 60px 0 0 60px;
+
}
+
 
+
.row.uniform.\31 50\25 {
+
margin: -60px 0 -1px -60px;
+
}
+
 
+
.row.\35 0\25 > * {
+
padding: 0 0 0 20px;
+
}
+
 
+
.row.\35 0\25 {
+
margin: 0 0 -1px -20px;
+
}
+
 
+
.row.uniform.\35 0\25 > * {
+
padding: 20px 0 0 20px;
+
}
+
 
+
.row.uniform.\35 0\25 {
+
margin: -20px 0 -1px -20px;
+
}
+
 
+
.row.\32 5\25 > * {
+
padding: 0 0 0 10px;
+
}
+
 
+
.row.\32 5\25 {
+
margin: 0 0 -1px -10px;
+
}
+
 
+
.row.uniform.\32 5\25 > * {
+
padding: 10px 0 0 10px;
+
}
+
 
+
.row.uniform.\32 5\25 {
+
margin: -10px 0 -1px -10px;
+
}
+
 
+
.\31 2u, .\31 2u\24 {
+
width: 100%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 1u, .\31 1u\24 {
+
width: 91.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 0u, .\31 0u\24 {
+
width: 83.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\39 u, .\39 u\24 {
+
width: 75%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\38 u, .\38 u\24 {
+
width: 66.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\37 u, .\37 u\24 {
+
width: 58.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\36 u, .\36 u\24 {
+
width: 50%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\35 u, .\35 u\24 {
+
width: 41.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\34 u, .\34 u\24 {
+
width: 33.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\33 u, .\33 u\24 {
+
width: 25%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\32 u, .\32 u\24 {
+
width: 16.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 u, .\31 u\24 {
+
width: 8.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 2u\24 + *,
+
.\31 1u\24 + *,
+
.\31 0u\24 + *,
+
.\39 u\24 + *,
+
.\38 u\24 + *,
+
.\37 u\24 + *,
+
.\36 u\24 + *,
+
.\35 u\24 + *,
+
.\34 u\24 + *,
+
.\33 u\24 + *,
+
.\32 u\24 + *,
+
.\31 u\24 + * {
+
clear: left;
+
}
+
 
+
.\-11u {
+
margin-left: 91.66667%;
+
}
+
 
+
.\-10u {
+
margin-left: 83.33333%;
+
}
+
 
+
.\-9u {
+
margin-left: 75%;
+
}
+
 
+
.\-8u {
+
margin-left: 66.66667%;
+
}
+
 
+
.\-7u {
+
margin-left: 58.33333%;
+
}
+
 
+
.\-6u {
+
margin-left: 50%;
+
}
+
 
+
.\-5u {
+
margin-left: 41.66667%;
+
}
+
 
+
.\-4u {
+
margin-left: 33.33333%;
+
}
+
 
+
.\-3u {
+
margin-left: 25%;
+
}
+
 
+
.\-2u {
+
margin-left: 16.66667%;
+
}
+
 
+
.\-1u {
+
margin-left: 8.33333%;
+
}
+
 
+
@media screen and (min-width: 1px) {
+
 
+
.row > * {
+
padding: 50px 0 0 50px;
+
}
+
 
+
.row {
+
margin: -50px 0 -1px -50px;
+
}
+
 
+
.row.uniform > * {
+
padding: 50px 0 0 50px;
+
}
+
 
+
.row.uniform {
+
margin: -50px 0 -1px -50px;
+
}
+
 
+
.row.\32 00\25 > * {
+
padding: 100px 0 0 100px;
+
}
+
 
+
.row.\32 00\25 {
+
margin: -100px 0 -1px -100px;
+
}
+
 
+
.row.uniform.\32 00\25 > * {
+
padding: 100px 0 0 100px;
+
}
+
 
+
.row.uniform.\32 00\25 {
+
margin: -100px 0 -1px -100px;
+
}
+
 
+
.row.\31 50\25 > * {
+
padding: 75px 0 0 75px;
+
}
+
 
+
.row.\31 50\25 {
+
margin: -75px 0 -1px -75px;
+
}
+
 
+
.row.uniform.\31 50\25 > * {
+
padding: 75px 0 0 75px;
+
}
+
 
+
.row.uniform.\31 50\25 {
+
margin: -75px 0 -1px -75px;
+
}
+
 
+
.row.\35 0\25 > * {
+
padding: 25px 0 0 25px;
+
}
+
 
+
.row.\35 0\25 {
+
margin: -25px 0 -1px -25px;
+
}
+
 
+
.row.uniform.\35 0\25 > * {
+
padding: 25px 0 0 25px;
+
}
+
 
+
.row.uniform.\35 0\25 {
+
margin: -25px 0 -1px -25px;
+
}
+
 
+
.row.\32 5\25 > * {
+
padding: 12.5px 0 0 12.5px;
+
}
+
 
+
.row.\32 5\25 {
+
margin: -12.5px 0 -1px -12.5px;
+
}
+
 
+
.row.uniform.\32 5\25 > * {
+
padding: 12.5px 0 0 12.5px;
+
}
+
 
+
.row.uniform.\32 5\25 {
+
margin: -12.5px 0 -1px -12.5px;
+
}
+
 
+
.\31 2u\28desktop\29, .\31 2u\24\28desktop\29 {
+
width: 100%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 1u\28desktop\29, .\31 1u\24\28desktop\29 {
+
width: 91.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 0u\28desktop\29, .\31 0u\24\28desktop\29 {
+
width: 83.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\39 u\28desktop\29, .\39 u\24\28desktop\29 {
+
width: 75%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\38 u\28desktop\29, .\38 u\24\28desktop\29 {
+
width: 66.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\37 u\28desktop\29, .\37 u\24\28desktop\29 {
+
width: 58.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\36 u\28desktop\29, .\36 u\24\28desktop\29 {
+
width: 50%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\35 u\28desktop\29, .\35 u\24\28desktop\29 {
+
width: 41.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\34 u\28desktop\29, .\34 u\24\28desktop\29 {
+
width: 33.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\33 u\28desktop\29, .\33 u\24\28desktop\29 {
+
width: 25%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\32 u\28desktop\29, .\32 u\24\28desktop\29 {
+
width: 16.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 u\28desktop\29, .\31 u\24\28desktop\29 {
+
width: 8.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 2u\24\28desktop\29 + *,
+
.\31 1u\24\28desktop\29 + *,
+
.\31 0u\24\28desktop\29 + *,
+
.\39 u\24\28desktop\29 + *,
+
.\38 u\24\28desktop\29 + *,
+
.\37 u\24\28desktop\29 + *,
+
.\36 u\24\28desktop\29 + *,
+
.\35 u\24\28desktop\29 + *,
+
.\34 u\24\28desktop\29 + *,
+
.\33 u\24\28desktop\29 + *,
+
.\32 u\24\28desktop\29 + *,
+
.\31 u\24\28desktop\29 + * {
+
clear: left;
+
}
+
 
+
.\-11u\28desktop\29 {
+
margin-left: 91.66667%;
+
}
+
 
+
.\-10u\28desktop\29 {
+
margin-left: 83.33333%;
+
}
+
 
+
.\-9u\28desktop\29 {
+
margin-left: 75%;
+
}
+
 
+
.\-8u\28desktop\29 {
+
margin-left: 66.66667%;
+
}
+
 
+
.\-7u\28desktop\29 {
+
margin-left: 58.33333%;
+
}
+
 
+
.\-6u\28desktop\29 {
+
margin-left: 50%;
+
}
+
 
+
.\-5u\28desktop\29 {
+
margin-left: 41.66667%;
+
}
+
 
+
.\-4u\28desktop\29 {
+
margin-left: 33.33333%;
+
}
+
 
+
.\-3u\28desktop\29 {
+
margin-left: 25%;
+
}
+
 
+
.\-2u\28desktop\29 {
+
margin-left: 16.66667%;
+
}
+
 
+
.\-1u\28desktop\29 {
+
margin-left: 8.33333%;
+
}
+
 
+
}
+
 
+
@media screen and (min-width: 1px) and (max-width: 1px) {
+
 
+
.row > * {
+
padding: 30px 0 0 30px;
+
}
+
 
+
.row {
+
margin: -30px 0 -1px -30px;
+
}
+
 
+
.row.uniform > * {
+
padding: 30px 0 0 30px;
+
}
+
 
+
.row.uniform {
+
margin: -30px 0 -1px -30px;
+
}
+
 
+
.row.\32 00\25 > * {
+
padding: 60px 0 0 60px;
+
}
+
 
+
.row.\32 00\25 {
+
margin: -60px 0 -1px -60px;
+
}
+
 
+
.row.uniform.\32 00\25 > * {
+
padding: 60px 0 0 60px;
+
}
+
 
+
.row.uniform.\32 00\25 {
+
margin: -60px 0 -1px -60px;
+
}
+
 
+
.row.\31 50\25 > * {
+
padding: 45px 0 0 45px;
+
}
+
 
+
.row.\31 50\25 {
+
margin: -45px 0 -1px -45px;
+
}
+
 
+
.row.uniform.\31 50\25 > * {
+
padding: 45px 0 0 45px;
+
}
+
 
+
.row.uniform.\31 50\25 {
+
margin: -45px 0 -1px -45px;
+
}
+
 
+
.row.\35 0\25 > * {
+
padding: 15px 0 0 15px;
+
}
+
 
+
.row.\35 0\25 {
+
margin: -15px 0 -1px -15px;
+
}
+
 
+
.row.uniform.\35 0\25 > * {
+
padding: 15px 0 0 15px;
+
}
+
 
+
.row.uniform.\35 0\25 {
+
margin: -15px 0 -1px -15px;
+
}
+
 
+
.row.\32 5\25 > * {
+
padding: 7.5px 0 0 7.5px;
+
}
+
 
+
.row.\32 5\25 {
+
margin: -7.5px 0 -1px -7.5px;
+
}
+
 
+
.row.uniform.\32 5\25 > * {
+
padding: 7.5px 0 0 7.5px;
+
}
+
 
+
.row.uniform.\32 5\25 {
+
margin: -7.5px 0 -1px -7.5px;
+
}
+
 
+
.\31 2u\28tablet\29, .\31 2u\24\28tablet\29 {
+
width: 100%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 1u\28tablet\29, .\31 1u\24\28tablet\29 {
+
width: 91.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 0u\28tablet\29, .\31 0u\24\28tablet\29 {
+
width: 83.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\39 u\28tablet\29, .\39 u\24\28tablet\29 {
+
width: 75%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\38 u\28tablet\29, .\38 u\24\28tablet\29 {
+
width: 66.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\37 u\28tablet\29, .\37 u\24\28tablet\29 {
+
width: 58.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\36 u\28tablet\29, .\36 u\24\28tablet\29 {
+
width: 50%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\35 u\28tablet\29, .\35 u\24\28tablet\29 {
+
width: 41.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\34 u\28tablet\29, .\34 u\24\28tablet\29 {
+
width: 33.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\33 u\28tablet\29, .\33 u\24\28tablet\29 {
+
width: 25%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\32 u\28tablet\29, .\32 u\24\28tablet\29 {
+
width: 16.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 u\28tablet\29, .\31 u\24\28tablet\29 {
+
width: 8.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 2u\24\28tablet\29 + *,
+
.\31 1u\24\28tablet\29 + *,
+
.\31 0u\24\28tablet\29 + *,
+
.\39 u\24\28tablet\29 + *,
+
.\38 u\24\28tablet\29 + *,
+
.\37 u\24\28tablet\29 + *,
+
.\36 u\24\28tablet\29 + *,
+
.\35 u\24\28tablet\29 + *,
+
.\34 u\24\28tablet\29 + *,
+
.\33 u\24\28tablet\29 + *,
+
.\32 u\24\28tablet\29 + *,
+
.\31 u\24\28tablet\29 + * {
+
clear: left;
+
}
+
 
+
.\-11u\28tablet\29 {
+
margin-left: 91.66667%;
+
}
+
 
+
.\-10u\28tablet\29 {
+
margin-left: 83.33333%;
+
}
+
 
+
.\-9u\28tablet\29 {
+
margin-left: 75%;
+
}
+
 
+
.\-8u\28tablet\29 {
+
margin-left: 66.66667%;
+
}
+
 
+
.\-7u\28tablet\29 {
+
margin-left: 58.33333%;
+
}
+
 
+
.\-6u\28tablet\29 {
+
margin-left: 50%;
+
}
+
 
+
.\-5u\28tablet\29 {
+
margin-left: 41.66667%;
+
}
+
 
+
.\-4u\28tablet\29 {
+
margin-left: 33.33333%;
+
}
+
 
+
.\-3u\28tablet\29 {
+
margin-left: 25%;
+
}
+
 
+
.\-2u\28tablet\29 {
+
margin-left: 16.66667%;
+
}
+
 
+
.\-1u\28tablet\29 {
+
margin-left: 8.33333%;
+
}
+
 
+
}
+
 
+
@media screen and (max-width: 1px) {
+
 
+
.row > * {
+
padding: 20px 0 0 20px;
+
}
+
 
+
.row {
+
margin: -20px 0 -1px -20px;
+
}
+
 
+
.row.uniform > * {
+
padding: 20px 0 0 20px;
+
}
+
 
+
.row.uniform {
+
margin: -20px 0 -1px -20px;
+
}
+
 
+
.row.\32 00\25 > * {
+
padding: 40px 0 0 40px;
+
}
+
 
+
.row.\32 00\25 {
+
margin: -40px 0 -1px -40px;
+
}
+
 
+
.row.uniform.\32 00\25 > * {
+
padding: 40px 0 0 40px;
+
}
+
 
+
.row.uniform.\32 00\25 {
+
margin: -40px 0 -1px -40px;
+
}
+
 
+
.row.\31 50\25 > * {
+
padding: 30px 0 0 30px;
+
}
+
 
+
.row.\31 50\25 {
+
margin: -30px 0 -1px -30px;
+
}
+
 
+
.row.uniform.\31 50\25 > * {
+
padding: 30px 0 0 30px;
+
}
+
 
+
.row.uniform.\31 50\25 {
+
margin: -30px 0 -1px -30px;
+
}
+
 
+
.row.\35 0\25 > * {
+
padding: 10px 0 0 10px;
+
}
+
 
+
.row.\35 0\25 {
+
margin: -10px 0 -1px -10px;
+
}
+
 
+
.row.uniform.\35 0\25 > * {
+
padding: 10px 0 0 10px;
+
}
+
 
+
.row.uniform.\35 0\25 {
+
margin: -10px 0 -1px -10px;
+
}
+
 
+
.row.\32 5\25 > * {
+
padding: 5px 0 0 5px;
+
}
+
 
+
.row.\32 5\25 {
+
margin: -5px 0 -1px -5px;
+
}
+
 
+
.row.uniform.\32 5\25 > * {
+
padding: 5px 0 0 5px;
+
}
+
 
+
.row.uniform.\32 5\25 {
+
margin: -5px 0 -1px -5px;
+
}
+
 
+
.\31 2u\28mobile\29, .\31 2u\24\28mobile\29 {
+
width: 100%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 1u\28mobile\29, .\31 1u\24\28mobile\29 {
+
width: 91.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 0u\28mobile\29, .\31 0u\24\28mobile\29 {
+
width: 83.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\39 u\28mobile\29, .\39 u\24\28mobile\29 {
+
width: 75%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\38 u\28mobile\29, .\38 u\24\28mobile\29 {
+
width: 66.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\37 u\28mobile\29, .\37 u\24\28mobile\29 {
+
width: 58.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\36 u\28mobile\29, .\36 u\24\28mobile\29 {
+
width: 50%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\35 u\28mobile\29, .\35 u\24\28mobile\29 {
+
width: 41.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\34 u\28mobile\29, .\34 u\24\28mobile\29 {
+
width: 33.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\33 u\28mobile\29, .\33 u\24\28mobile\29 {
+
width: 25%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\32 u\28mobile\29, .\32 u\24\28mobile\29 {
+
width: 16.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 u\28mobile\29, .\31 u\24\28mobile\29 {
+
width: 8.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 2u\24\28mobile\29 + *,
+
.\31 1u\24\28mobile\29 + *,
+
.\31 0u\24\28mobile\29 + *,
+
.\39 u\24\28mobile\29 + *,
+
.\38 u\24\28mobile\29 + *,
+
.\37 u\24\28mobile\29 + *,
+
.\36 u\24\28mobile\29 + *,
+
.\35 u\24\28mobile\29 + *,
+
.\34 u\24\28mobile\29 + *,
+
.\33 u\24\28mobile\29 + *,
+
.\32 u\24\28mobile\29 + *,
+
.\31 u\24\28mobile\29 + * {
+
clear: left;
+
}
+
 
+
.\-11u\28mobile\29 {
+
margin-left: 91.66667%;
+
}
+
 
+
.\-10u\28mobile\29 {
+
margin-left: 83.33333%;
+
}
+
 
+
.\-9u\28mobile\29 {
+
margin-left: 75%;
+
}
+
 
+
.\-8u\28mobile\29 {
+
margin-left: 66.66667%;
+
}
+
 
+
.\-7u\28mobile\29 {
+
margin-left: 58.33333%;
+
}
+
 
+
.\-6u\28mobile\29 {
+
margin-left: 50%;
+
}
+
 
+
.\-5u\28mobile\29 {
+
margin-left: 41.66667%;
+
}
+
 
+
.\-4u\28mobile\29 {
+
margin-left: 33.33333%;
+
}
+
 
+
.\-3u\28mobile\29 {
+
margin-left: 25%;
+
}
+
 
+
.\-2u\28mobile\29 {
+
margin-left: 16.66667%;
+
}
+
 
+
.\-1u\28mobile\29 {
+
margin-left: 8.33333%;
+
}
+
 
+
}
+
 
+
/* Basic */
+
 
+
body {
+
background: #f0f0f0;
+
font-family: 'Source Sans Pro';
+
font-weight: 300;
+
color: #777;
+
}
+
 
+
body.is-loading * {
+
-moz-transition: none !important;
+
-webkit-transition: none !important;
+
-ms-transition: none !important;
+
transition: none !important;
+
-moz-animation: none !important;
+
-webkit-animation: none !important;
+
-ms-animation: none !important;
+
animation: none !important;
+
}
+
 
+
input, textarea, select {
+
font-family: 'Source Sans Pro';
+
font-weight: 300;
+
color: #777;
+
}
+
 
+
h1, h2, h3, h4, h5, h6 {
+
font-weight: 600;
+
text-transform: uppercase;
+
color: #888;
+
}
+
 
+
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+
color: inherit;
+
text-decoration: none;
+
border: 0;
+
}
+
 
+
a {
+
-moz-transition: color 0.25s ease-in-out, border-bottom-color 0.25s ease-in-out;
+
-webkit-transition: color 0.25s ease-in-out, border-bottom-color 0.25s ease-in-out;
+
-ms-transition: color 0.25s ease-in-out, border-bottom-color 0.25s ease-in-out;
+
transition: color 0.25s ease-in-out, border-bottom-color 0.25s ease-in-out;
+
color: #666;
+
text-decoration: none;
+
border-bottom: solid 1px #ddd;
+
}
+
 
+
a strong {
+
-moz-transition: color 0.25s ease-in-out, border-bottom-color 0.25s ease-in-out;
+
-webkit-transition: color 0.25s ease-in-out, border-bottom-color 0.25s ease-in-out;
+
-ms-transition: color 0.25s ease-in-out, border-bottom-color 0.25s ease-in-out;
+
transition: color 0.25s ease-in-out, border-bottom-color 0.25s ease-in-out;
+
}
+
 
+
a:hover {
+
color: #ed786a;
+
border-bottom-color: rgba(255, 255, 255, 0);
+
}
+
 
+
a:hover strong {
+
color: #ed786a;
+
 
}
 
}
  
strong, b {
+
/* Creates a container that will wrap all of the content inside your wiki pages. */
font-weight: 600;
+
#mainContainer {
color: #666;
+
width: 978px;
}
+
overflow:hidden;
 
+
float:left;
em, i {
+
margin-left:20px;
font-style: italic;
+
margin-bottom: 10px;
}
+
background-color: #fff;  
 
+
border-bottom: 14px solid #dddddd;
sub {
+
border-right: 2px solid #dddddd;
position: relative;
+
border-left: 2px solid #dddddd;
top: 0.5em;
+
border-top: 2px solid #dddddd;
font-size: 0.8em;
+
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
+
 
+
sup {
+
position: relative;
+
top: -0.5em;
+
font-size: 0.8em;
+
}
+
 
+
hr {
+
border: 0;
+
border-top: solid 1px #ddd;
+
}
+
 
+
blockquote {
+
border-left: solid 0.5em #ddd;
+
padding: 1em 0 1em 2em;
+
font-style: italic;
+
}
+
 
+
p {
+
text-align: justify;
+
margin-bottom: 2em;
+
}
+
 
+
ul, ol, dl, table, blockquote {
+
margin-bottom: 2em;
+
}
+
 
+
br.clear {
+
clear: both;
+
}
+
 
+
/* Sections/Article */
+
 
+
section, article {
+
margin-bottom: 3em;
+
}
+
 
+
section > :last-child,
+
article > :last-child,
+
section:last-child,
+
article:last-child {
+
margin-bottom: 0;
+
}
+
 
+
/* Image */
+
 
+
.image {
+
-moz-transition: opacity 0.25s ease-in-out;
+
-webkit-transition: opacity 0.25s ease-in-out;
+
-ms-transition: opacity 0.25s ease-in-out;
+
transition: opacity 0.25s ease-in-out;
+
display: inline-block;
+
border: solid 6px #ebebeb !important;
+
}
+
 
+
.image:hover {
+
opacity: 0.9;
+
+
}
+
 
+
.image img {
+
display: block;
+
width: 100%;
+
}
+
 
+
.image.fit {
+
display: block;
+
width: 100%;
+
}
+
 
+
.image.featured {
+
+
display: block;
+
width: 100%;
+
margin: 0 0 3.5em 0;
+
}
+
 
+
.image.left {
+
float: left;
+
margin: 0 1.5em 1.5em 0;
+
position: relative;
+
top: 0.5em;
+
}
+
+
.logofotter {
+
  cursor: pointer;
+
}
+
+
.logofotter img {
+
 
+
  /* Firefox 10+, Firefox on Android */
+
  -webkit-filter: grayscale(100%);
+
  filter: grayscale(100%);
+
  filter: gray;
+
  /* IE 6-9 */
+
  -moz-transition: all 0.2s ease-in;
+
  -o-transition: all 0.2s ease-in;
+
  -webkit-transition: all 0.2s ease-in;
+
  transition: all 0.2s ease-in;
+
}
+
{
+
    display:inline-block;
+
    }
+
.logofotter:hover img {
+
 
+
  -webkit-filter: none;
+
  filter: none;
+
}
+
 
+
.image.centered {
+
display: block;
+
margin: 0 0 2em 0;
+
}
+
 
+
.image.centered img {
+
margin: 0 auto;
+
width: auto;
+
 
}
 
}
  
/* List */
+
/* Creates the container for the menu */
 
+
#menuContainer  {  
ul.default {
+
float:left;
list-style: disc;
+
width: 144px;
margin-left: 1em;
+
padding: 20px 0px;
}
+
border-top: 14px solid #dddddd;
 
+
background-color: #E8E8E9;
ul.default li {
+
padding-left: 0.5em;
+
margin: 0.75em 0 0.75em 0;
+
}
+
 
+
ul.default li:first-child {
+
margin-top: 0;
+
 
}
 
}
  
ul.links {
+
/* Creates the container for the content */
list-style: decimal;
+
#contentContainer {
margin-left: 1em;
+
padding-top:20px;
}
+
padding-right:10px;
 
+
margin-bottom: 20px;
ul.links li {
+
width: 804px;
display: inline;
+
padding-left: 20px;
border-left: solid 1px #d0d0d0;
+
float: left;
padding-left: 1em;
+
background-color: #fff;
margin-left: 1em;
+
border-top: 14px solid #dddddd;
}
+
font-family: "Trebuchet MS", Helvetica, sans-serif;
 
+
ul.links li:first-child {
+
margin-left: 0;
+
padding-left: 0;
+
 
}
 
}
  
ul.actions {
+
/*Set up height place holder for the banner*/
margin-top: 2.5em;
+
#bannerContainer {
clear: both;
+
height:200px;
}
+
margin:auto;
 
+
text-align:center;
ul.divided li {
+
color: #24B694;
border-top: solid 2px #e5e5e5;
+
}
+
 
+
ul.divided li:first-child {
+
border-top: 0;
+
margin-top: 0;
+
padding-top: 0;
+
}
+
 
+
ul.icons > li {
+
position: relative;
+
padding: 2em 0 0 3em;
+
}
+
 
+
ul.icons > li:before {
+
position: absolute;
+
left: 0;
+
top: 2em;
+
display: block;
+
background: #878787;
+
color: #e4e4e4;
+
width: 1.65em;
+
height: 1.65em;
+
border-radius: 1.65em;
+
line-height: 1.65em;
+
text-align: center;
+
box-shadow: 0.125em 0.175em 0 0 rgba(0, 0, 0, 0.125);
+
}
+
 
+
ul.icons > li:first-child {
+
padding-top: 0;
+
}
+
 
+
ul.icons > li:first-child:before {
+
top: 0;
+
 
}
 
}
  
ol.default {
+
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
list-style: decimal;
+
margin-left: 1em;
+
}
+
  
ol.default li {
+
/*Change the styling of text for everything inside main container*/
padding-left: 0.5em;
+
#mainContainer p {
margin: 0.75em 0 0.75em 0;
+
font-size: 14px;
}
+
color: #000000;
 +
                                text-align:justify;
 +
                                margin-bottom:20px;
 +
                                line-height:170%;
  
ol.default li:first-child {
 
margin-top: 0;
 
 
}
 
}
 
+
                /*For super and sub script
 
+
                        #mainContainer sub sup {
 
+
                                line-height:100%;
/* Table */
+
                        }
 
+
table {
+
/*This changes the color and font family */
width: 100%;
+
#contentContainer h1, h2, h3, h4, h5, h6 {  
}
+
color: #565656;
 
+
border-bottom: none;
table.default {
+
font-weight: bold;
width: 100%;
+
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
+
margin-top:5px;
 
+
table.default tbody tr {
+
border-top: solid 1px #E5E5E5;
+
}
+
 
+
table.default tbody tr:first-child {
+
border-top: 0;
+
}
+
 
+
table.default td {
+
padding: 0.75em 1em 0.75em 1em;
+
 
}
 
}
  
table.default th {
+
/*Style of the links - links are different inside the menu */
text-align: left;
+
#contentContainer a {  
 
font-weight: bold;
 
font-weight: bold;
padding: 0.75em 1em 0.75em 1em;
+
color: #238eb5;
 
}
 
}
  
table.default thead {
+
  /* Styling links on hover- links are different inside the menu */
background: #878787;
+
#contentContainer a:hover {  
color: #fff;
+
color: #59b9bf;
font-weight: 400;
+
text-transform: uppercase;
+
border: 0;
+
box-shadow: 0.125em 0.175em 0 0 rgba(0, 0, 0, 0.125);
+
 
}
 
}
  
table.default tfoot {
+
/*Change the styling of tables */
background: #F0F0F0;
+
        #contentContainer table {
border-top: solid 2px #E5E5E5;
+
background: none;
}
+
    border: 1px solid #565656;
 +
    border-collapse: collapse;
 +
    width: 90%
 +
    margin: auto;
 +
    margin-bottom: 15px;
 +
    margin-top: 15px;
 +
    margin-right: 10px;
 +
    margin-left: 10px;
 +
    }
  
/* Button */
+
/*Change the styling of table cells*/
 +
    #contentContainer  td {
 +
    padding: 10px;
 +
    border: 1px solid #565656;
 +
    border-collapse: collapse;
 +
    vertical-align: text-top;
 +
    }
  
input[type="button"],
+
/*Change the styling of table headers */
input[type="submit"],
+
    #contentContainer th {
input[type="reset"],
+
    background-color: #E8E8E9;
button,
+
    padding: 10px;
.button {
+
    border: 1px solid #565656;
-moz-transition: all 0.25s ease-in-out;
+
    border-collapse: collapse;
-webkit-transition: all 0.25s ease-in-out;
+
    vertical-align: text-top;
-ms-transition: all 0.25s ease-in-out;
+
    }
transition: all 0.25s ease-in-out;
+
-webkit-appearance: none;
+
position: relative;
+
display: inline-block;
+
background: #ed786a;
+
color: #fff !important;
+
text-transform: uppercase;
+
border-radius: 4px;
+
border: 0;
+
outline: 0;
+
font-size: 1em;
+
box-shadow: 0.125em 0.175em 0 0 rgba(0, 0, 0, 0.125);
+
font-weight: 600;
+
text-align: center;
+
}
+
  
input[type="button"].icon:before,
 
input[type="submit"].icon:before,
 
input[type="reset"].icon:before,
 
button.icon:before,
 
.button.icon:before {
 
position: relative;
 
padding-right: 0.75em;
 
opacity: 0.5;
 
top: 0.05em;
 
}
 
  
input[type="button"]:hover,
 
input[type="submit"]:hover,
 
input[type="reset"]:hover,
 
button:hover,
 
.button:hover {
 
background: #fd887a;
 
}
 
  
input[type="button"]:active,
+
/*MENU STYLING */
input[type="submit"]:active,
+
input[type="reset"]:active,
+
button:active,
+
.button:active {
+
background: #ed786a;
+
}
+
  
input[type="button"].alt,
+
/*Styling for the links in the menu */
input[type="submit"].alt,
+
#menuContainer a {
input[type="reset"].alt,
+
color: #565656;
button.alt,
+
text-decoration:none;
.button.alt {
+
font-weight: bold;
background: #878787;
+
}
+
 
+
input[type="button"].alt:hover,
+
input[type="submit"].alt:hover,
+
input[type="reset"].alt:hover,
+
button.alt:hover,
+
.button.alt:hover {
+
background: #979797;
+
 
}
 
}
  
input[type="button"].alt:active,
+
/* Sets the style for lists inside menuContainer  */
input[type="submit"].alt:active,
+
#menuContainer ul {
input[type="reset"].alt:active,
+
list-style: none;
button.alt:active,
+
margin-left:0px;
.button.alt:active {
+
background: #878787;
+
 
}
 
}
  
/* Box */
+
/*Styles the list items to become menu buttons */
 
+
#menuContainer ul li {  
.box .excerpt .date {
+
background: #878787;
+
color: #fff;
+
font-weight: 400;
+
text-transform: uppercase;
+
border-radius: 4px;
+
border: 0;
+
box-shadow: 0.125em 0.175em 0 0 rgba(0, 0, 0, 0.125);
+
}
+
 
+
/* Icons */
+
 
+
.icon {
+
position: relative;
+
text-decoration: none;
+
}
+
 
+
.icon:before {
+
-moz-osx-font-smoothing: grayscale;
+
-webkit-font-smoothing: antialiased;
+
font-family: FontAwesome;
+
font-style: normal;
+
font-weight: normal;
+
text-transform: none !important;
+
}
+
 
+
.icon > .label {
+
display: none;
+
}
+
 
+
/* Wrappers */
+
 
+
#header-wrapper {
+
position: relative;
+
background: #fff;
+
text-align: center;
+
}
+
 
+
#header-wrapper p {
+
text-align: center;
+
}
+
 
+
#banner-wrapper {
+
position: relative;
+
overflow: hidden;
+
background: #fff;
+
color: #fff;
+
text-align: center;
+
border-top: solid 2px #e5e5e5;
+
border-bottom: solid 2px #e5e5e5;
+
box-shadow: inset 0px -8px 0px 0px #fff, inset 0px -10px 0px 0px #e5e5e5, inset 0px 8px 0px 0px #fff, inset 0px 10px 0px 0px #e5e5e5;
+
}
+
 
+
#banner-wrapper .inner {
+
background: url("../../images/banner.jpg");
+
background-size: cover;
+
}
+
 
+
#banner-wrapper p {
+
text-align: center;
+
}
+
 
+
#features-wrapper {
+
position: relative;
+
overflow: hidden;
+
background: #fff;
+
text-align: center;
+
}
+
 
+
#features-wrapper p {
+
text-align: center;
+
}
+
 
+
#features-wrapper .actions {
+
margin-top: 1.25em;
+
}
+
 
+
#main-wrapper {
+
position: relative;
+
overflow: hidden;
+
background: #fff;
+
}
+
 
+
#footer-wrapper {
+
position: relative;
+
overflow: hidden;
+
border-top: solid 2px #e5e5e5;
+
background: #f0f0f0;
+
}
+
 
+
#footer-wrapper form input[type="text"],
+
#footer-wrapper form input[type="email"],
+
#footer-wrapper form input[type="password"],
+
#footer-wrapper form select,
+
#footer-wrapper form textarea {
+
background: #f7f7f7;
+
}
+
 
+
#footer-wrapper form input[type="text"]:focus,
+
#footer-wrapper form input[type="email"]:focus,
+
#footer-wrapper form input[type="password"]:focus,
+
#footer-wrapper form select:focus,
+
#footer-wrapper form textarea:focus {
+
background: #fff;
+
}
+
 
+
#footer-wrapper h2 {
+
text-align: center;
+
}
+
 
+
/* Header */
+
 
+
#header {
+
position: relative;
+
border-bottom: solid 0px #e5e5e5;
+
box-shadow: inset 0px -8px 0px 0px #fff, inset 0px -10px 0px 0px #e5e5e5;
+
}
+
 
+
#header h1 {
+
font-family: 'Arvo';
+
font-weight: 700;
+
color: #ed786a;
+
text-shadow: 0.05em 0.075em 0 rgba(0, 0, 0, 0.1);
+
}
+
 
+
#header h1 a {
+
border: 0;
+
}
+
 
+
#header p {
+
text-transform: uppercase;
+
font-weight: 400;
+
color: #888;
+
}
+
 
+
/* Nav */
+
 
+
#nav {
+
cursor: default;
+
}
+
 
+
#nav > ul > li > a {
+
border: 0;
+
text-decoration: none;
+
text-transform: uppercase;
+
font-weight: 400;
+
color: #777;
+
outline: 0;
+
}
+
 
+
#nav > ul > li > a:before {
+
display: inline-block;
+
background: #878787;
+
color: #e4e4e4;
+
width: 1.65em;
+
height: 1.65em;
+
border-radius: 1.65em;
+
line-height: 1.65em;
+
 
text-align: center;
 
text-align: center;
box-shadow: 0.125em 0.175em 0 0 rgba(0, 0, 0, 0.125);
+
display: block;
margin-right: 0.75em;
+
width: 100%;
-moz-transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
+
height:30px;
-webkit-transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
+
padding-top:10px;
-o-transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
+
-ms-transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
+
transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
+
 
}
 
}
  
#nav > ul > li > a > span {
+
/*For the menu buttons, changes the color when hovering*/
-moz-transition: color 0.25s ease-in-out;
+
#menuContainer li:hover {
-webkit-transition: color 0.25s ease-in-out;
+
color: #FFF;
-o-transition: color 0.25s ease-in-out;
+
background-color: #248fb6;
-ms-transition: color 0.25s ease-in-out;
+
transition: color 0.25s ease-in-out;
+
 
}
 
}
 
+
               
#nav > ul > li.active > a:before, #nav > ul > li:hover > a:before {
+
                /*For the submenu main buttons, changes the color when hovering*/
background: #ED786A;
+
#menuContainer  li:hover ma {
color: #fff;
+
color: #FFF;
}
+
background-color: #248fb6;
 
+
#nav > ul > li.active > a > span, #nav > ul > li:hover > a > span {
+
color: #ED786A;
+
}
+
 
+
 
+
 
+
/* Banner */
+
 
+
#banner {
+
position: relative;
+
text-transform: uppercase;
+
}
+
 
+
#banner p {
+
font-weight: 400;
+
}
+
 
+
#banner strong {
+
color: inherit;
+
}
+
 
+
/* Content */
+
 
+
#content > section,
+
#content > article {
+
border-top: solid 2px #e5e5e5;
+
box-shadow: inset 0px 8px 0px 0px #fff, inset 0px 10px 0px 0px #e5e5e5;
+
}
+
 
+
#content > section:first-child,
+
#content > article:first-child {
+
border-top: 0;
+
box-shadow: none;
+
}
+
 
+
/* Sidebar */
+
 
+
#sidebar > section,
+
#sidebar > article {
+
border-top: solid 2px #e5e5e5;
+
box-shadow: inset 0px 8px 0px 0px #fff, inset 0px 10px 0px 0px #e5e5e5;
+
}
+
 
+
#sidebar > section:first-child,
+
#sidebar > article:first-child {
+
border-top: 0;
+
box-shadow: none;
+
}
+
 
+
/* Copyright */
+
 
+
#copyright {
+
border-top: solid 0px #e5e5e5;
+
text-align: center;
+
}
+
 
+
 
+
/* Desktop */
+
 
+
@media screen and (min-width: 1px) {
+
 
+
/* Basic */
+
 
+
body, input, textarea, select {
+
line-height: 1.65em;
+
font-size: 13pt;
+
}
+
 
+
h2 {
+
font-size: 1.65em;
+
font-weight: 400;
+
letter-spacing: 4px;
+
margin: 0 0 1.5em 0;
+
line-height: 1.75em;
+
 
}
 
}
  
h3 {
+
/*Submenus are not displayed as default*/
font-size: 1em;
+
#menuContainer li ul {
letter-spacing: 2px;
+
display: none;
margin: 0 0 1.25em 0;
+
padding-top:15px;
 +
margin-left: -19px;
 +
                               
 
}
 
}
  
/* Table */
+
/*Submenus are displayed when hovering the menu button */
 +
#menuContainer li:hover ul {
 +
/*display: inline-block; */
 +
display: block;
 +
position: absolute;
 +
float:right;
 +
margin-left: 134px;
 +
margin-top:-42px;
 +
                             
 +
}
  
table.default thead {
+
/*Style the submenu buttons*/
font-size: 0.85em;
+
#menuContainer li ul li{
letter-spacing: 2px;
+
background-color: #59b9bf;  
 +
padding-left:20px;
 +
padding-right:20px;
 +
height:30px;
 +
padding-top:10px;
 +
margin-top:-2px;
 +
color: #FFF;
 +
width: 150px;
 
}
 
}
  
/* Button */
+
/*CLASSES */
  
input[type="button"],
+
/*Clear class for all the pages, adds spacing too*/
input[type="submit"],
+
.clear{
input[type="reset"],
+
clear:both;
button,
+
height: 10px;
.button {
+
font-size: 0.85em;
+
letter-spacing: 2px;
+
padding: 0.85em 2.75em 0.85em 2.75em;
+
 
}
 
}
  
/* List */
 
  
ul.actions li {
+
/* highlight box for special messages */
display: inline-block;
+
    .highlightBox {
margin-left: 1em;
+
        width:500px;
}
+
        margin:auto;
 +
        background-color: #E8E8E9;  
 +
margin-bottom: 15px;
 +
margin-top: 15px;
 +
padding: 15px;
 +
padding-top: 5px;
 +
    }
  
ul.actions li:first-child {
+
/** LIGHTBOX MARKUP **/
margin-left: 0;
+
}
+
  
ul.divided li {
+
.lightbox {
margin: 2.5em 0 0 0;
+
/** Default lightbox to hidden */
padding: 2.5em 0 0 0;
+
display: none;
}
+
  
/* Box */
+
/** Position and style */
 +
position: fixed;
 +
z-index: 999;
 +
width: 100%;
 +
height: 100%;
 +
text-align: center;
 +
top: 0;
 +
left: 0;
 +
background: rgba(0,0,0,0.8);
 +
}
  
.no-sidebar .box .post > header {
+
.lightbox img {
text-align: center;
+
/** Pad the lightbox image */
}
+
max-width: 90%;
 +
max-height: 80%;
 +
margin-top: 2%;
 +
}
  
.box.excerpt .date {
+
.lightbox:target {
display: inline-block;
+
/** Remove default browser outline */
font-size: 0.85em;
+
outline: none;
letter-spacing: 2px;
+
padding: 0.25em 1em 0.25em 1em;
+
margin: 0 0 2.5em 0;
+
}
+
  
/* Wrappers */
+
/** Unhide lightbox **/
 +
display: block;
 +
}
  
#features-wrapper {
+
</style>
padding: 6em 0 6em 0;
+
<!-- End of CSS -->
}
+
  
#banner-wrapper {
 
padding: 1em 0 3em 0;
 
}
 
  
#main-wrapper {
+
<!-- Start of the template html elements. -->
padding: 6em 0 0em 0;
+
<div id ="mainContainer"><!--The closing tag for mainContainer should be placed at the bottom of each content page.-->
}
+
  
#footer-wrapper {
 
padding: 3em 0 8em 0;
 
}
 
  
/* Header */
+
<div id="bannerContainer">
 +
<img src="https://static.igem.org/mediawiki/2015/d/dc/Team_Stockholm_banner.jpg" style="width:240px;height:200px" alt="Temporary Banner Stockholm">
 +
</div>
  
#header {
+
<!-- Start of menu -->
padding: 1.1em 0 2.7em 0;
+
<div id="menuContainer">
}
+
  
#header h1 {
+
<!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons -->
font-size: 3em;
+
<ul>
letter-spacing: 13px;
+
<a href="https://2015.igem.org/Team:Stockholm"><li>HOME</li></a>
}
+
<a href="https://2015.igem.org/Team:Stockholm/Team"><li><ma>TEAM</ma>
 +
<ul>
 +
<a href="https://2015.igem.org/Team:Stockholm/Model"><li>Modeling Team</li></a>
 +
<a href="https://2015.igem.org/Team:Stockholm/Read-out"><li>Read-out Team</li></a> 
 +
<a href="https://2015.igem.org/Team:Stockholm/Recog"><li>Recognition Team</li></a> 
 +
<a href="https://2015.igem.org/Team:Stockholm/Signal"><li>Signaling Team</li></a>
 +
<a href="https://2015.igem.org/Team:Stockholm/Finance"><li>Finance Team</li></a>
 +
</ul>
 +
</li></a>
  
#header p {
+
<a href="#"><li><ma>PROJECT</ma>
margin: 2.5em 0 0 0;
+
            <ul>
font-size: 0.85em;
+
<a href="https://2015.igem.org/Team:Stockholm/Description"><li>Description</li></a>
letter-spacing: 3px;
+
<a href="https://2015.igem.org/Team:Stockholm/Experiments"><li>Experiments &amp; Protocols</li></a> 
}
+
<a href="https://2015.igem.org/Team:Stockholm/Results"><li>Results</li></a> 
 +
<a href="https://2015.igem.org/Team:Stockholm/Design"><li>Design</li></a>
 +
</ul>
 +
</li></a>
  
/* Nav */
+
<a href="#"><li><ma>PARTS</ma>
 +
            <ul>
 +
<a href="https://2015.igem.org/Team:Stockholm/Parts"><li>Team Parts</li></a>
 +
<a href="https://2015.igem.org/Team:Stockholm/Basic_Part"><li>Basic Parts</li></a> 
 +
<a href="https://2015.igem.org/Team:Stockholm/Composite_Part"><li>Composite Parts</li></a>
 +
<a href="https://2015.igem.org/Team:Stockholm/Part_Collection"><li>Part Collection</li></a> 
 +
</ul>
 +
</li></a>
  
#nav {
+
                                        <a href="https://2015.igem.org/Team:Stockholm/Overview_or_Something"><li><ma> NOTEBOOK</ma>
position: absolute;
+
            <ul>
top: 1em;
+
<a href="https://2015.igem.org/Team:Stockholm/Modeling_Team"><li>Modeling Team</li></a>
left: 0;
+
<a href="https://2015.igem.org/Team:Stockholm/Read-out_Team"><li>Read-out Team</li></a> 
width: 100%;
+
<a href="https://2015.igem.org/Team:Stockholm/Recognition_Team"><li>Recognition Team</li></a> 
}
+
<a href="https://2015.igem.org/Team:Stockholm/Signaling_Team"><li>Signaling Team</li></a>
 +
</ul>
 +
</li></a>
 +
     
 +
<a href="https://2015.igem.org/Team:Stockholm/Attributions"><li>ATTRIBUTIONS</li></a>
  
#nav > ul > li {
+
                                        <a href="https://2015.igem.org/Team:Stockholm/Medals"><li>MEDAL REQUIREMENTS</li></a>
display: inline-block;
+
padding-right: 2em;
+
}
+
  
#nav > ul > li:last-child {
+
<a href="https://2015.igem.org/Team:Stockholm/Collaborations"><li>COLLABORATIONS</li></a>
padding-right: 0;
+
}
+
  
#nav > ul > li > a {
+
<a href="https://2015.igem.org/Team:Stockholm/Practices"><li>HUMAN PRACTICES</li></a>
display: block;
+
}
+
  
#nav > ul > li > a > span {
+
<a href="https://2015.igem.org/Team:Stockholm/Safety"><li>SAFETY</li></a>
font-size: 0.85em;
+
letter-spacing: 3px;
+
}
+
  
#nav > ul > li > ul {
+
<a href="https://2015.igem.org/Team:Stockholm/Modeling"><li>MODELING</li></a>
display: none;
+
}
+
  
.dropotron {
+
<a href="https://2015.igem.org/Team:Stockholm/Measurement"><li>MEASUREMENT</li></a>
text-align: left;
+
border: solid 1px #e5e5e5;
+
border-radius: 4px;
+
background: #fff;
+
background: rgba(255, 255, 255, 0.965);
+
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
+
padding: 0.75em 0 0.5em 0;
+
min-width: 12em;
+
margin-top: calc(-0.5em + 1px);
+
margin-left: -2px;
+
}
+
  
.dropotron.level-0 {
+
<a href="https://2015.igem.org/Team:Stockholm/Software"><li>SOFTWARE</li></a>
margin-top: 1.5em;
+
margin-left: -1em;
+
}
+
  
.dropotron.level-0:after {
+
<a href="https://2015.igem.org/Team:Stockholm/Entrepreneurship"><li>ENTREPRENEURSHIP</li></a>
content: '';
+
display: block;
+
position: absolute;
+
left: 1.25em;
+
top: calc(-0.75em + 1px);
+
border-left: solid 0.75em rgba(255, 255, 255, 0);
+
border-right: solid 0.75em rgba(255, 255, 255, 0);
+
border-bottom: solid 0.75em #fff;
+
}
+
  
.dropotron.level-0:before {
+
<a href="https://2015.igem.org/Team:Stockholm/Sponsor"><li>SPONSORSHIP</li></a>
content: '';
+
display: block;
+
position: absolute;
+
left: 1.25em;
+
top: -0.75em;
+
border-left: solid 0.75em rgba(255, 255, 255, 0);
+
border-right: solid 0.75em rgba(255, 255, 255, 0);
+
border-bottom: solid 0.75em #ccc;
+
}
+
  
.dropotron span, .dropotron a {
+
</ul>
display: block;
+
</div>
padding: 0.3em 1em 0.3em 1em;
+
<!-- End of menu  -->
border: 0;
+
border-top: solid 1px #f0f0f0;
+
outline: 0;
+
}
+
 
+
.dropotron li:first-child > span, .dropotron li:first-child > a {
+
border-top: 0;
+
padding-top: 0;
+
}
+
 
+
.dropotron li:hover > span, .dropotron li:hover > a {
+
-moz-transition: color 0.25s ease-in-out, border-bottom-color 0.25s ease-in-out;
+
-webkit-transition: color 0.25s ease-in-out, border-bottom-color 0.25s ease-in-out;
+
-ms-transition: color 0.25s ease-in-out, border-bottom-color 0.25s ease-in-out;
+
transition: color 0.25s ease-in-out, border-bottom-color 0.25s ease-in-out;
+
color: #ed786a;
+
}
+
 
+
/* Banner */
+
 
+
#banner {
+
padding: 10em 0 10em 0;
+
}
+
 
+
#banner p {
+
font-size: 2em;
+
line-height: 1.5em;
+
letter-spacing: 4px;
+
}
+
 
+
#banner:before, #banner:after {
+
content: '';
+
display: block;
+
position: absolute;
+
top: 50%;
+
width: 35px;
+
height: 141px;
+
margin-top: -70px;
+
background: url("images/bracket.svg");
+
opacity: 0.15;
+
}
+
 
+
#banner:before {
+
left: 0;
+
}
+
 
+
#banner:after {
+
-moz-transform: scaleX(-1);
+
-webkit-transform: scaleX(-1);
+
-ms-transform: scaleX(-1);
+
transform: scaleX(-1);
+
right: 0;
+
}
+
 
+
/* Content */
+
 
+
#content > > section,
+
#content > > article {
+
margin: 5em 0 0 0;
+
padding: 5em 0 0 0;
+
}
+
 
+
#content > > section:first-child,
+
#content > > article:first-child {
+
margin: 0;
+
padding: 0;
+
}
+
 
+
/* Sidebar */
+
 
+
#sidebar > section,
+
#sidebar > article {
+
margin: 5em 0 0 0;
+
padding: 5em 0 0 0;
+
}
+
 
+
#sidebar > section:first-child,
+
#sidebar > article:first-child {
+
margin: 0;
+
padding: 0;
+
}
+
 
+
/* Copyright */
+
 
+
#copyright {
+
margin-top: 6em;
+
padding-top: 4em;
+
}
+
 
+
}
+
 
+
 
+
+
 
+
</style>
+
<!-- End of CSS -->
+
  
 +
<!-- Start of content -->
 +
<div id="contentContainer"> <!--The closing tag for contentContainer should be placed at the bottom of each content page.-->
 
</html>
 
</html>

Latest revision as of 13:05, 4 August 2015