Difference between revisions of "Template:Stockholm"

m
Line 7: Line 7:
 
<style type="text/css">
 
<style type="text/css">
  
−
/* PAGE LAYOUT */
+
  
−
/* Change Background color*/
+
@font-face {
−
body {  
+
font-family: 'icomoon';
−
background-color: #fff;
+
src:url('sthlm_fonts2/icomoon.eot?yluato');
 +
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;
 +
}
 +
 
 +
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
 +
display: block;
 +
}
 +
 
 +
body {
 +
line-height: 1;
 +
}
 +
 
 +
ol, ul {
 +
list-style: none;
 +
}
 +
 
 +
blockquote, q {
 +
quotes: none;
 +
}
 +
 
 +
blockquote:before, blockquote:after, q:before, q:after {
 +
content: '';
 +
content: none;
 +
}
 +
 
 +
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;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (min-width: 1px) and (max-width: 1px) {
 +
 
 +
.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 (max-width: 1px) {
 +
 
 +
.container.\31 25\25 {
 +
width: 100%;
 +
max-width: 125%;
 +
min-width: 100%;
 +
}
 +
 
 +
.container.\37 5\25 {
 +
width: 75%;
 +
}
 +
 
 +
.container.\35 0\25 {
 +
width: 50%;
 +
}
 +
 
 +
.container.\32 5\25 {
 +
width: 25%;
 +
}
 +
 
 +
.container {
 +
width: 100% !important;
 +
}
 +
 
 +
}
 +
 
 +
/* 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;
 
}
 
}
  
−
/* Creates a container that will wrap all of the content inside your wiki pages. */
+
strong, b {
−
#mainContainer {
+
font-weight: 600;
−
width: 978px;
+
color: #666;
−
overflow:hidden;
+
}
−
float:left;
+
 
−
margin-left:20px;
+
em, i {
−
margin-bottom: 10px;
+
font-style: italic;
−
background-color: #fff;  
+
}
−
border-bottom: 14px solid #dddddd;
+
 
−
border-right: 2px solid #dddddd;
+
sub {
−
border-left: 2px solid #dddddd;
+
position: relative;
−
border-top: 2px solid #dddddd;
+
top: 0.5em;
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
font-size: 0.8em;
 +
}
 +
 
 +
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;
 
}
 
}
  
−
/* Creates the container for the menu */
+
/* List */
−
#menuContainer  {  
+
 
−
float:left;
+
ul.default {
−
width: 144px;
+
list-style: disc;
−
padding: 20px 0px;
+
margin-left: 1em;
−
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;
 
}
 
}
  
−
/* Creates the container for the content */
+
ul.links {
−
#contentContainer {
+
list-style: decimal;
−
padding-top:20px;
+
margin-left: 1em;
−
padding-right:10px;
+
}
−
margin-bottom: 20px;
+
 
−
width: 804px;
+
ul.links li {
−
padding-left: 20px;
+
display: inline;
−
float: left;
+
border-left: solid 1px #d0d0d0;
−
background-color: #fff;
+
padding-left: 1em;
−
border-top: 14px solid #dddddd;
+
margin-left: 1em;
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
}
 +
 
 +
ul.links li:first-child {
 +
margin-left: 0;
 +
padding-left: 0;
 
}
 
}
  
−
/*Set up height place holder for the banner*/
+
ul.actions {
−
#bannerContainer {
+
margin-top: 2.5em;
−
height:200px;
+
clear: both;
−
margin:auto;
+
}
−
text-align:center;
+
 
−
color: #24B694;
+
ul.divided li {
 +
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;
 
}
 
}
  
−
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
+
ol.default {
 +
list-style: decimal;
 +
margin-left: 1em;
 +
}
  
−
/*Change the styling of text for everything inside main container*/
+
ol.default li {
−
#mainContainer p {
+
padding-left: 0.5em;
−
font-size: 14px;
+
margin: 0.75em 0 0.75em 0;
−
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 {
+
/* Form */
−
                                line-height:100%;
+
 
−
                        }
+
form label {
−
+
font-weight: 600;
−
/*This changes the color and font family */
+
text-transform: uppercase;
−
#contentContainer h1, h2, h3, h4, h5, h6 {  
+
color: #888;
−
color: #565656;
+
display: block;
−
border-bottom: none;
+
margin: 0 0 1em 0;
−
font-weight: bold;
+
}
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
 
−
margin-top:5px;
+
form input[type="text"],
 +
form input[type="email"]
 +
input[type="password"],
 +
form select,
 +
form textarea {
 +
-moz-transition: background-color 0.25s ease-in-out;
 +
-webkit-transition: background-color 0.25s ease-in-out;
 +
-ms-transition: background-color 0.25s ease-in-out;
 +
transition: background-color 0.25s ease-in-out;
 +
-webkit-appearance: none;
 +
display: block;
 +
border: 0;
 +
background: #e8e8e8;
 +
width: 100%;
 +
box-shadow: inset 2px 2px 0px 0px rgba(0, 0, 0, 0.1);
 +
border-radius: 4px;
 +
line-height: 1.25em;
 +
padding: 0.75em 1em 0.75em 1em;
 +
}
 +
 
 +
form input[type="text"]:focus,
 +
form input[type="email"]
 +
input[type="password"]:focus,
 +
form select:focus,
 +
form textarea:focus {
 +
background: #f0f0f0;
 +
}
 +
 
 +
form textarea {
 +
min-height: 11em;
 +
}
 +
 
 +
form .formerize-placeholder {
 +
color: #555 !important;
 +
}
 +
 
 +
form ::-webkit-input-placeholder {
 +
color: #555 !important;
 +
line-height: 1.35em;
 +
}
 +
 
 +
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;
 +
}
 +
 
 +
/* Table */
 +
 
 +
table {
 +
width: 100%;
 +
}
 +
 
 +
table.default {
 +
width: 100%;
 +
}
 +
 
 +
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;
 
}
 
}
  
−
/*Style of the links - links are different inside the menu */
+
table.default th {
−
#contentContainer a {  
+
text-align: left;
 
font-weight: bold;
 
font-weight: bold;
−
color: #238eb5;
+
padding: 0.75em 1em 0.75em 1em;
 
}
 
}
  
−
  /* Styling links on hover- links are different inside the menu */
+
table.default thead {
−
#contentContainer a:hover {  
+
background: #878787;
−
color: #59b9bf;
+
color: #fff;
 +
font-weight: 400;
 +
text-transform: uppercase;
 +
border: 0;
 +
box-shadow: 0.125em 0.175em 0 0 rgba(0, 0, 0, 0.125);
 
}
 
}
  
−
/*Change the styling of tables */
+
table.default tfoot {
−
        #contentContainer table {
+
background: #F0F0F0;
−
background: none;
+
border-top: solid 2px #E5E5E5;
−
    border: 1px solid #565656;
+
}
−
    border-collapse: collapse;
+
−
    width: 90%
+
−
    margin: auto;
+
−
    margin-bottom: 15px;
+
−
    margin-top: 15px;
+
−
    margin-right: 10px;
+
−
    margin-left: 10px;
+
−
    }
+
  
−
/*Change the styling of table cells*/
+
/* Button */
−
    #contentContainer  td {
+
−
    padding: 10px;
+
−
    border: 1px solid #565656;
+
−
    border-collapse: collapse;
+
−
    vertical-align: text-top;
+
−
    }
+
  
−
/*Change the styling of table headers */
+
input[type="button"],
−
    #contentContainer th {
+
input[type="submit"],
−
    background-color: #E8E8E9;
+
input[type="reset"],
−
    padding: 10px;
+
button,
−
    border: 1px solid #565656;
+
.button {
−
    border-collapse: collapse;
+
-moz-transition: all 0.25s ease-in-out;
−
    vertical-align: text-top;
+
-webkit-transition: all 0.25s ease-in-out;
−
    }
+
-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;
 +
}
  
−
/*MENU STYLING */
+
input[type="button"]:active,
 +
input[type="submit"]:active,
 +
input[type="reset"]:active,
 +
button:active,
 +
.button:active {
 +
background: #ed786a;
 +
}
  
−
/*Styling for the links in the menu */
+
input[type="button"].alt,
−
#menuContainer a {
+
input[type="submit"].alt,
−
color: #565656;
+
input[type="reset"].alt,
−
text-decoration:none;
+
button.alt,
−
font-weight: bold;
+
.button.alt {
 +
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;
 
}
 
}
  
−
/* Sets the style for lists inside menuContainer  */
+
input[type="button"].alt:active,
−
#menuContainer ul {
+
input[type="submit"].alt:active,
−
list-style: none;
+
input[type="reset"].alt:active,
−
margin-left:0px;
+
button.alt:active,
 +
.button.alt:active {
 +
background: #878787;
 
}
 
}
  
−
/*Styles the list items to become menu buttons */
+
/* Box */
−
#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;
−
display: block;
+
box-shadow: 0.125em 0.175em 0 0 rgba(0, 0, 0, 0.125);
 +
margin-right: 0.75em;
 +
-moz-transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
 +
-webkit-transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
 +
-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 {
 +
-moz-transition: color 0.25s ease-in-out;
 +
-webkit-transition: color 0.25s ease-in-out;
 +
-o-transition: color 0.25s ease-in-out;
 +
-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 {
 +
background: #ED786A;
 +
color: #fff;
 +
}
 +
 
 +
#nav > ul > li.active > a > span, #nav > ul > li:hover > a > span {
 +
color: #ED786A;
 +
}
 +
 
 +
/* Features */
 +
 
 +
/* 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 {
 +
font-size: 1em;
 +
letter-spacing: 2px;
 +
margin: 0 0 1.25em 0;
 +
}
 +
 
 +
/* Table */
 +
 
 +
table.default thead {
 +
font-size: 0.85em;
 +
letter-spacing: 2px;
 +
}
 +
 
 +
/* Button */
 +
 
 +
input[type="button"],
 +
input[type="submit"],
 +
input[type="reset"],
 +
button,
 +
.button {
 +
font-size: 0.85em;
 +
letter-spacing: 2px;
 +
padding: 0.85em 2.75em 0.85em 2.75em;
 +
}
 +
 
 +
/* List */
 +
 
 +
ul.actions li {
 +
display: inline-block;
 +
margin-left: 1em;
 +
}
 +
 
 +
ul.actions li:first-child {
 +
margin-left: 0;
 +
}
 +
 
 +
ul.divided li {
 +
margin: 2.5em 0 0 0;
 +
padding: 2.5em 0 0 0;
 +
}
 +
 
 +
/* Box */
 +
 
 +
.no-sidebar .box .post > header {
 +
text-align: center;
 +
}
 +
 
 +
.box.excerpt .date {
 +
display: inline-block;
 +
font-size: 0.85em;
 +
letter-spacing: 2px;
 +
padding: 0.25em 1em 0.25em 1em;
 +
margin: 0 0 2.5em 0;
 +
}
 +
 
 +
/* Wrappers */
 +
 
 +
#features-wrapper {
 +
padding: 6em 0 6em 0;
 +
}
 +
 
 +
#banner-wrapper {
 +
padding: 1em 0 3em 0;
 +
}
 +
 
 +
#main-wrapper {
 +
padding: 6em 0 0em 0;
 +
}
 +
 
 +
#footer-wrapper {
 +
padding: 3em 0 8em 0;
 +
}
 +
 
 +
/* Header */
 +
 
 +
#header {
 +
padding: 1.1em 0 2.7em 0;
 +
}
 +
 
 +
#header h1 {
 +
font-size: 3em;
 +
letter-spacing: 13px;
 +
}
 +
 
 +
#header p {
 +
margin: 2.5em 0 0 0;
 +
font-size: 0.85em;
 +
letter-spacing: 3px;
 +
}
 +
 
 +
/* Nav */
 +
 
 +
#nav {
 +
position: absolute;
 +
top: 1em;
 +
left: 0;
 
width: 100%;
 
width: 100%;
−
height:30px;
 
−
padding-top:10px;
 
 
}
 
}
  
−
/*For the menu buttons, changes the color when hovering*/
+
#nav > ul > li {
−
#menuContainer li:hover {
+
display: inline-block;
−
color: #FFF;
+
padding-right: 2em;
−
background-color: #248fb6;
+
}
 +
 
 +
#nav > ul > li:last-child {
 +
padding-right: 0;
 +
}
 +
 
 +
#nav > ul > li > a {
 +
display: block;
 +
}
 +
 
 +
#nav > ul > li > a > span {
 +
font-size: 0.85em;
 +
letter-spacing: 3px;
 +
}
 +
 
 +
#nav > ul > li > ul {
 +
display: none;
 +
}
 +
 
 +
.dropotron {
 +
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;
 
}
 
}
−
               
+
 
−
                /*For the submenu main buttons, changes the color when hovering*/
+
.dropotron.level-0 {
−
#menuContainer  li:hover ma {
+
margin-top: 1.5em;
−
color: #FFF;
+
margin-left: -1em;
−
background-color: #248fb6;
+
}
 +
 
 +
.dropotron.level-0:after {
 +
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 {
 +
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 {
 +
display: block;
 +
padding: 0.3em 1em 0.3em 1em;
 +
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;
 
}
 
}
  
−
/*Submenus are not displayed as default*/
+
#banner p {
−
#menuContainer li ul {
+
font-size: 2em;
−
display: none;
+
line-height: 1.5em;
−
padding-top:15px;
+
letter-spacing: 4px;
−
margin-left: -19px;
+
}
−
                               
+
 
 +
#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;
 
}
 
}
  
−
/*Submenus are displayed when hovering the menu button */
+
#content > > section:first-child,
−
#menuContainer li:hover ul {
+
#content > > article:first-child {
−
/*display: inline-block; */
+
margin: 0;
−
display: block;  
+
padding: 0;
−
position: absolute;  
+
}
−
float:right;
+
−
margin-left: 134px;
+
−
margin-top:-42px;
+
−
                             
+
−
}
+
  
−
/*Style the submenu buttons*/
+
/* Sidebar */
−
#menuContainer li ul li{
+
 
−
background-color: #59b9bf;
+
#sidebar > section,
−
padding-left:20px;
+
#sidebar > article {
−
padding-right:20px;
+
margin: 5em 0 0 0;
−
height:30px;
+
padding: 5em 0 0 0;
−
padding-top:10px;
+
−
margin-top:-2px;
+
−
color: #FFF;
+
−
width: 150px;
+
 
}
 
}
  
−
/*CLASSES */
+
#sidebar > section:first-child,
 +
#sidebar > article:first-child {
 +
margin: 0;
 +
padding: 0;
 +
}
 +
 
 +
/* Copyright */
  
−
/*Clear class for all the pages, adds spacing too*/
+
#copyright {
−
.clear{
+
margin-top: 6em;
−
clear:both;
+
padding-top: 4em;
−
height: 10px;
+
 
}
 
}
  
 +
}
  
−
/* highlight box for special messages */
+
/* Tablet */
−
    .highlightBox {
+
−
        width:500px;
+
−
        margin:auto;
+
−
        background-color: #E8E8E9;
+
−
margin-bottom: 15px;
+
−
margin-top: 15px;
+
−
padding: 15px;
+
−
padding-top: 5px;
+
−
    }
+
  
−
/** LIGHTBOX MARKUP **/
+
@media screen and (min-width: 1px) and (max-width: 1px) {
  
−
.lightbox {
+
/* Basic */
−
/** Default lightbox to hidden */
+
−
display: none;
+
  
−
/** Position and style */
+
body {
−
position: fixed;
+
min-width: 960px;
−
z-index: 999;
+
line-height: 1.75em;
−
width: 100%;
+
font-size: 12pt;
−
height: 100%;
+
}
−
text-align: center;
+
−
top: 0;
+
−
left: 0;
+
−
background: rgba(0,0,0,0.8);
+
−
}
+
  
−
.lightbox img {
+
input, textarea, select {
−
/** Pad the lightbox image */
+
line-height: 1.75em;
−
max-width: 90%;
+
font-size: 12pt;
−
max-height: 80%;
+
}
−
margin-top: 2%;
+
−
}
+
  
−
.lightbox:target {
+
h2 {
−
/** Remove default browser outline */
+
margin: 0 0 1em 0;
−
outline: none;
+
font-size: 1.5em;
 +
}
  
−
/** Unhide lightbox **/
+
h3 {
−
display: block;
+
margin: 0 0 1em 0;
−
}
+
}
  
−
</style>
+
h2 br, h3 br, h4 br, h5 br, h6 br {
−
<!-- End of CSS -->
+
display: none;
 +
}
  
 +
/* Image */
  
−
<!-- Start of the template html elements. -->
+
.image.featured {
−
<div id ="mainContainer"><!--The closing tag for mainContainer should be placed at the bottom of each content page.-->
+
margin: 0 0 2.5em 0;
 +
}
  
 +
/* Wrappers */
  
−
<div id="bannerContainer">
+
#features-wrapper {
−
<img src="https://static.igem.org/mediawiki/2015/d/dc/Team_Stockholm_banner.jpg" style="width:240px;height:200px" alt="Temporary Banner Stockholm">
+
padding: 4em 0 4em 0;
−
</div>
+
}
  
−
<!-- Start of menu -->
+
#banner-wrapper {
−
<div id="menuContainer">
+
padding: 2em 0 2em 0;
 +
}
  
−
<!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons -->
+
#main-wrapper {
−
<ul>
+
padding: 4em 0 4em 0;
−
<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>
+
  
−
<a href="#"><li><ma>PROJECT</ma>
+
#footer-wrapper {
−
            <ul>
+
padding: 4em 0 6em 0;
−
<a href="https://2015.igem.org/Team:Stockholm/Description"><li>Description</li></a>
+
}
−
<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>
+
  
−
<a href="#"><li><ma>PARTS</ma>
+
/* Header */
−
            <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>
+
  
−
                                        <a href="https://2015.igem.org/Team:Stockholm/Overview_or_Something"><li><ma> NOTEBOOK</ma>
+
#header {
−
            <ul>
+
padding: 2em 0 4em 0;
−
<a href="https://2015.igem.org/Team:Stockholm/Modeling_Team"><li>Modeling Team</li></a>
+
}
−
<a href="https://2015.igem.org/Team:Stockholm/Read-out_Team"><li>Read-out Team</li></a> 
+
−
<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>
+
  
−
                                        <a href="https://2015.igem.org/Team:Stockholm/Medals"><li>MEDAL REQUIREMENTS</li></a>
+
#header h1 {
 +
font-size: 2em;
 +
}
  
−
<a href="https://2015.igem.org/Team:Stockholm/Collaborations"><li>COLLABORATIONS</li></a>
+
#header p {
 +
margin: 1.5em 0 0 0;
 +
}
  
−
<a href="https://2015.igem.org/Team:Stockholm/Practices"><li>HUMAN PRACTICES</li></a>
+
/* Nav */
  
−
<a href="https://2015.igem.org/Team:Stockholm/Safety"><li>SAFETY</li></a>
+
#nav > ul > li {
 +
padding-right: 1.25em;
 +
}
  
−
<a href="https://2015.igem.org/Team:Stockholm/Modeling"><li>MODELING</li></a>
+
/* Banner */
  
−
<a href="https://2015.igem.org/Team:Stockholm/Measurement"><li>MEASUREMENT</li></a>
+
#banner {
 +
padding: 7em 0 7em 0;
 +
}
  
−
<a href="https://2015.igem.org/Team:Stockholm/Software"><li>SOFTWARE</li></a>
+
/* Copyright */
  
−
<a href="https://2015.igem.org/Team:Stockholm/Entrepreneurship"><li>ENTREPRENEURSHIP</li></a>
+
#copyright {
 +
margin-top: 5em;
 +
padding-top: 2em;
 +
}
  
−
<a href="https://2015.igem.org/Team:Stockholm/Sponsor"><li>SPONSORSHIP</li></a>
+
}
  
−
</ul>
+
/* Mobile */
−
</div>
+
 
−
<!-- End of menu  -->
+
 +
 +
 
 +
</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>

Revision as of 12:18, 28 July 2015