style.css

.section {
clear : both;
padding : 0;
margin : 1% 0;
}
.group:before, .group:after {
content : "";
display : table;
}
.group:after {
clear : both;
}
.col {
display : block;
float : left;
margin : 0;
}
.span_1_of_12 {
width : 8.33%;
}
.span_1_of_11 {
width : 9.09%;
}
.span_1_of_10 {
width : 10%;
}
.span_1_of_9 {
width : 11.11%;
}
.span_1_of_8 {
width : 12.5%;
}
.span_1_of_7 {
width : 14.28%;
}
.span_1_of_6, .span_2_of_12 {
width : 16.66%;
}
.span_2_of_11 {
width : 18.18%;
}
.span_1_of_5, .span_2_of_10 {
width : 20%;
}
.span_2_of_9 {
width : 22.22%;
}
.span_1_of_4, .span_2_of_8, .span_3_of_12 {
width : 25%;
}
.span_3_of_11 {
width : 27.27%;
}
.span_2_of_7 {
width : 28.57%;
}
.span_3_of_10 {
width : 30%;
}
.span_1_of_3, .span_2_of_6, .span_3_of_9, .span_4_of_12 {
width : 33.33%;
}
.span_4_of_11 {
width : 36.36%;
}
.span_3_of_8 {
width : 37.5%;
}
.span_2_of_5, .span_4_of_10 {
width : 40%;
}
.span_5_of_12 {
width : 41.66%;
}
.span_3_of_7 {
width : 42.85%;
}
.span_4_of_9 {
width : 44.44%;
}
.span_5_of_11 {
width : 45.45%;
}
.span_1_of_2, .span_2_of_4, .span_3_of_6, .span_4_of_8, .span_5_of_10, .span_6_of_12 {
width : 50%;
}
.span_6_of_11 {
width : 54.54%;
}
.span_5_of_9 {
width : 55.55%;
}
.span_4_of_7 {
width : 57.14%;
}
.span_7_of_12 {
width : 58.33%;
}
.span_3_of_5, .span_6_of_10 {
width : 60%;
}
.span_5_of_8 {
width : 62.5%;
}
.span_7_of_11 {
width : 63.63%;
}
.span_2_of_3, .span_4_of_6, .span_6_of_9, .span_8_of_12 {
width : 66.66%;
}
.span_7_of_10 {
width : 70%;
}
.span_5_of_7 {
width : 71.42%;
}
.span_8_of_11 {
width : 72.72%;
}
.span_3_of_4, .span_6_of_8, .span_9_of_12 {
width : 75%;
}
.span_7_of_9 {
width : 77.77%;
}
.span_4_of_5, .span_8_of_10 {
width : 80%;
}
.span_9_of_11 {
width : 81.81%;
}
.span_5_of_6, .span_10_of_12 {
width : 83.33%;
}
.span_6_of_7 {
width : 85.71%;
}
.span_7_of_8 {
width : 87.5%;
}
.span_8_of_9 {
width : 88.88%;
}
.span_9_of_10 {
width : 90%;
}
.span_10_of_11 {
width : 90.90%;
}
.span_11_of_12 {
width : 91.66%;
}
.span_1_of_1 {
width : 100%;
}
@media only screen and (min-width:1440px) {
header, #maincontent, .maincontent, footer {
width : 70%;
}
}
@media only screen and (max-width:1024px) and (min-width:800px) {
header, #maincontent, .maincontent, footer {
width : 93.75%;
}
}
@media only screen and (max-width:799px) {
header, #maincontent, .maincontent, footer {
width : 93.75%;
}
.span_1_of_2, .span_1_of_2, .span_2_of_2, .span_1_of_3, .span_2_of_3, .span_3_of_3, .span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4, .span_1_of_5, .span_2_of_5, .span_3_of_5, .span_4_of_5, .span_5_of_5, .span_1_of_6, .span_2_of_6, .span_3_of_6, .span_4_of_6, .span_5_of_6, .span_6_of_6, .span_1_of_7, .span_2_of_7, .span_3_of_7, .span_4_of_7, .span_5_of_7, .span_6_of_7, .span_7_of_7, .span_4_of_8, .span_5_of_8, .span_6_of_8, .span_7_of_8, .span_8_of_8, .span_1_of_9, .span_2_of_9, .span_3_of_9, .span_4_of_9, .span_5_of_9, .span_6_of_9, .span_7_of_9, .span_8_of_9, .span_9_of_9, .span_1_of_10, .span_2_of_10, .span_3_of_10, .span_4_of_10, .span_5_of_10, .span_6_of_10, .span_7_of_10, .span_8_of_10, .span_9_of_10, .span_10_of_10, .span_1_of_11, .span_2_of_11, .span_3_of_11, .span_4_of_11, .span_5_of_11, .span_6_of_11, .span_7_of_11, .span_8_of_11, .span_9_of_11, .span_10_of_11, .span_11_of_11, .span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12 {
width : 100%;
}
.span_1_of_8 {
width : 25%;
}
.span_2_of_8 {
width : 50%;
}
.span_3_of_8 {
width : 75%;
}
.span_1_of_8:nth-child(4n 1) {
clear : both;
margin-left : 0;
}
}
body {
margin : 0 auto;
padding : 0;
font : normal normal 1em/1.4 'Lato', 'Open Sans', 'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif;
color : #333333;
text-align : center;
background : #f9f9f9;
}
::-webkit-selection, ::-moz-selection {
background : #2980b9;
color : #ffffff;
text-shadow : none;
}
#skiptomain {
display : none;
}
#headcontainer, #headcontainer {
background : #e0e0e0;
}
#maincontentcontainer, #maincontent, #footercontainer {
width : 100%;
bottom : 0;
left : 0;
}
#footercontainer {
background : #222;
position:top;
margin-bottom:auto;
}
header, header {
padding : 2% 0 3%;
position : relative;
margin-top:-30px;
color : #000;
text-align : center;
}
#maincontent {
padding : 3% 0 7%;
color : #333;
line-height : 1.5em;
position : relative;
}
footer {
clear : both;
width : 80%;
max-width : 92.3em;
margin : 0 auto !important ;
}
footer {
padding : 2% 0 !important ;
color : #999;
}
footer a:link, footer a:visited {
color : #ccc;
}
footer a:hover {
color : #fff;
}
footer ul {
list-style : none;
}
h1, h2, h3, h4, h5, h6 {
margin : 0;
}
h1 {
font : 300 3em/2 'Lato', 'Open Sans', 'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif;
color : #111;
}
h2 {
font : 400 2em/1.6 'Lato', 'Open Sans', 'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif;
color : #222;
}
h3 {
font : 400 1.8em/1.6 'Lato', 'Open Sans', 'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif;
color : #333;
}
h4 {
font : 400 1.2em/2 'Lato', 'Open Sans', 'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif;
color : #444;
}
h5 {
font : 400 1.2em/2 'Lato', 'Open Sans', 'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif;
color : #555;
}
h6 {
font : 400 1em/2 'Lato', 'Open Sans', 'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif;
color : #666;
}
a {
text-decoration : none;
color : #2980b9;
transition : all 300ms ease-in-out;
}
a:hover, a:active, a:focus {
color : #3498db;
transition : all 300ms ease-in-out;
}
h1 a {
color : #222;
}
h1 a:hover {
color : #111;
}
h2 a {
color : #333;
}
h2 a:hover {
color : #222;
}
b, strong {
font-weight : 700;
}
p {
hyphens : auto;
text-align : left;
}
sub, sup {
font-size : 0.75em;
line-height : 0;
position : relative;
vertical-align : baseline;
}
sup {
top : -0.5em;
}
sub {
bottom : -0.25em;
}
small {
font-size : 0.9em;
}
img {
border : 0;
max-width : 100%;
}
.right {
text-align : right;
}
.center {
text-align : center;
}
.left {
text-align : left;
}
.clear {
clear : both;
}
.clearleft {
clear : left;
}
.clearright {
clear : right;
}
.floatnone {
float : none;
}
.floatleft {
float : left;
}
.floatright {
float : right;
}
.breaker {
margin : 3% 0;
padding : 1px;
height : 1px;
}
.faded {
opacity : 0.699999988079071044921875;
}
.box {
padding : 2% 3%;
margin : 2% 3%;
border-radius : 3px;
text-align : center;
}
h3.box, h4.box {
color : #ffffff !important ;
}
h6.box {
color : #000000 !important ;
}
.red {
color : #c0392b !important ;
}
.up {
background : #2ecc71;
}
.down {
background : #e74c3c;
}
.level {
background : #e67e22;
}
.none {
background : #95a5a6;
}
.highlight, .highlight:hover {
background : #4B98FF !important ;
color : #fefefe;
font-weight : 400;
}
.highlight a, .highlight a:hover {
color : #ffffff;
}