/*
ZeroFour 1.0 by HTML5 Up!
html5up.net | @n33co
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
/*********************************************************************************/
/* Basic */
/*********************************************************************************/
*
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body
{
font-family: 'Open Sans', sans-serif;
font-size: 11pt;
line-height: 1.85em;
color: #888;
background: url('images/bg02.jpg');
}
a
{
color: #3A8EB5;
text-decoration: underline;
}
a:hover
{
text-decoration: none;
}
h1, h2, h3, h4, h5, h6
{
text-transform: uppercase;
font-weight: 800;
letter-spacing: 0.04em;
color: #474747;
margin: 0 0 1em 0;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
{
color: inherit;
text-decoration: none;
outline: 0;
}
h2
{
font-size: 2em;
margin: 0 0 1.5em 0;
line-height: 1em;
}
h2.icon
{
line-height: 48px;
}
h2.icon:before
{
content: '';
width: 48px;
height: 48px;
display: inline-block;
background: url('images/icons.png');
float: left;
margin-right: 0.5em;
}
h2.icon-news:before
{
background-position: 0px -30px;
}
h2.icon-paper:before
{
background-position: -56px -30px;
width: 32px;
}
h3
{
font-size: 1.35em;
margin-top: 2em;
}
strong
{
color: #474747;
}
form
{
}
form input,
form select,
form textarea
{
-webkit-appearance: none;
}
br.clear
{
clear: both;
}
p, ul, ol, dl, table
{
margin-bottom: 2em;
}
section,
article
{
margin-bottom: 5em;
}
section > :last-child,
article > :last-child
{
margin-bottom: 0;
}
section:last-child,
article:last-child
{
margin-bottom: 0;
}
dl.contact
{
}
dl.contact dt
{
display: block;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.065em;
font-size: 0.9em;
color: #696969;
float: left;
width: 8em;
}
dl.contact dd
{
margin: 0 0 1em 8em;
}
.image
{
display: inline-block;
}
.image img
{
display: block;
width: 100%;
border-radius: 8px;
}
.image-full
{
display: block;
width: 100%;
margin: 0 0 2.5em 0;
}
.image-left
{
float: left;
margin: 0 2em 2em 0;
}
.image-centered
{
display: block;
margin: 0 0 2.5em 0;
}
.image-centered img
{
margin: 0 auto;
width: auto;
}
.button
{
display: inline-block;
background: #23749f;
background-image: -moz-linear-gradient(top, #3b91b6, #23749f);
background-image: -webkit-linear-gradient(top, #3b91b6, #23749f);
background-image: -o-linear-gradient(top, #3b91b6, #23749f);
background-image: -ms-linear-gradient(top, #3b91b6, #23749f);
background-image: linear-gradient(top, #3b91b6, #23749f);
border-radius: 8px;
box-shadow: inset 0px 0px 0px 1px #005173, inset 0px 2px 1px 0px #76c0e0, inset 0px 0px 0px 2px #4d98bb;
text-shadow: -1px -1px 0 rgba(0,0,0,1);
color: #fff !important;
text-decoration: none;
text-transform: uppercase;
font-weight: 800;
font-size: 0.95em;
letter-spacing: 0.075em;
padding: 1.1em 2em 1.1em 2em;
outline: 0;
}
.button:hover
{
background-image: -moz-linear-gradient(top, #4ba1c6, #23749f);
background-image: -webkit-linear-gradient(top, #4ba1c6, #23749f);
background-image: -o-linear-gradient(top, #4ba1c6, #23749f);
background-image: -ms-linear-gradient(top, #4ba1c6, #23749f);
background-image: linear-gradient(top, #4ba1c6, #23749f);
}
.button:active
{
background-image: -moz-linear-gradient(top, #23749f, #2b81a6);
background-image: -webkit-linear-gradient(top, #23749f, #2b81a6);
background-image: -o-linear-gradient(top, #23749f, #2b81a6);
background-image: -ms-linear-gradient(top, #23749f, #2b81a6);
background-image: linear-gradient(top, #23749f, #2b81a6);
}
.button-icon
{
position: relative;
}
.button-icon:after
{
content: '';
display: inline-block;
width: 32px;
height: 32px;
background: url('images/icons.png');
position: absolute;
top: 50%;
margin-top: -16px;
left: 1.8em;
}
.button-icon:before
{
content: '';
display: inline;
width: 32px;
padding-left: 32px;
margin-left: 0.25em;
}
.button-icon-check:after
{
background-position: 0px 0px;
}
.button-icon-rarrow:after
{
background-position: -32px 0px;
}
.button-icon-info:after
{
background-position: -64px 0px;
}
.button-icon-paper:after
{
background-position: -96px 0px;
}
.button-medium
{
border-radius: 10px;
font-size: 1.25em;
padding: 1em 2.25em 1em 2.25em;
}
.button-big
{
border-radius: 12px;
font-size: 1.5em;
padding: 1em 2.25em 1em 2.25em;
}
.button-alt
{
background: #3a3a3a;
background-image: -moz-linear-gradient(top, #525252, #3a3a3a);
background-image: -webkit-linear-gradient(top, #525252, #3a3a3a);
background-image: -o-linear-gradient(top, #525252, #3a3a3a);
background-image: -ms-linear-gradient(top, #525252, #3a3a3a);
background-image: linear-gradient(top, #525252, #3a3a3a);
box-shadow: inset 0px 0px 0px 1px #3a3a3a, inset 0px 2px 1px 0px #a8a8a8, inset 0px 0px 0px 2px #515151;
}
.button-alt:hover
{
background-image: -moz-linear-gradient(top, #626262, #3a3a3a);
background-image: -webkit-linear-gradient(top, #626262, #3a3a3a);
background-image: -o-linear-gradient(top, #626262, #3a3a3a);
background-image: -ms-linear-gradient(top, #626262, #3a3a3a);
background-image: linear-gradient(top, #626262, #3a3a3a);
}
.button-alt:active
{
background-image: -moz-linear-gradient(top, #3a3a3a, #424242);
background-image: -webkit-linear-gradient(top, #3a3a3a, #424242);
background-image: -o-linear-gradient(top, #3a3a3a, #424242);
background-image: -ms-linear-gradient(top, #3a3a3a, #424242);
background-image: linear-gradient(top, #3a3a3a, #424242);
}
ul.style1
{
}
ul.style2
{
}
ul.style2 li
{
border-top: solid 1px #eee;
padding: 0.55em 0 0.55em 0;
}
ul.style2 li:first-child
{
border-top: 0;
padding-top: 0;
}
ol.style1
{
}
.byline
{
display: block;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.065em;
font-size: 0.9em;
color: #696969;
}
.byline strong
{
color: #474747;
font-weight: 800;
}
.date
{
display: block;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.065em;
font-size: 0.9em;
color: #696969;
margin: 0 0 0.25em 0;
}
header
{
margin: 0 0 2em 0;
}
header h2, header h3
{
margin: 0 0 0.25em 0;
}
header .byline
{
margin: 0;
}
footer
{
margin: 2.5em 0 0 0;
}
header.major
{
border-bottom: solid 1px #dbdbdb;
margin: 0 0 3em 0;
}
header.major:after
{
content: '';
display: block;
border-top: solid 1px #dbdbdb;
height: 8px;
}
header.major h2,
header.major h3
{
margin: 0 0 1.2em 0;
}
header.major .byline
{
margin: 0 0 1.5em 0;
position: relative;
top: -1em;
}
.box-excerpt
{
position: relative;
overflow: hidden;
}
.box-excerpt header
{
margin: 0 0 1em 0;
}
.box-excerpt .image
{
margin-bottom: 0;
}
.box-excerpt p
{
margin-bottom: 0;
}
.box-feature1
{
text-align: center;
}
.box-feature1 header.first
{
}
.box-feature1 header.first h2
{
font-size: 2.5em;
}
.box-feature1 header.first .byline
{
font-size: 1.2em;
}
.box-feature1 header.second
{
display: inline-block;
text-align: left;
margin: 0 auto;
white-space: nowrap;
position: relative;
left: -48px;
}
.box-feature1 header.second .byline
{
line-height: 1em;
}
.box-feature1 header.second:before
{
content: '';
display: inline-block;
float: left;
background: url('images/icons.png');
width: 64px;
height: 64px;
background-position: 0px -80px;
margin: 0 1em 0 0;
position: relative;
top: -0.5em;
}
.box-feature1 header.second-friends:before
{
background-position: 0px -80px;
}
.box-feature1 header.second-gear:before
{
background-position: -64px -80px;
}
.box-feature1 header.second-chart:before
{
background-position: -128px -80px;
}
.box-feature2
{
text-align: center;
}
.box-article-list
{
}
.box-article-list article
{
border-bottom: solid 1px #dbdbdb;
margin: 0 0 2.75em 0;
padding: 0 0 2.75em 0;
}
.box-article-list article:last-child
{
border-bottom: 0;
margin-bottom: 0;
padding-bottom: 0;
}
/*********************************************************************************/
/* Banner */
/*********************************************************************************/
#banner
{
text-align: center;
}
#banner h2
{
border: solid 1px rgba(255,255,255,0.35);
border-left: 0;
border-right: 0;
color: #fff;
color: rgba(255,255,255,0.75);
font-size: 2.35em;
font-weight: 700;
line-height: 1.3em;
margin: 0 0 1.5em 0;
}
#banner h2 strong
{
font-weight: 800;
color: inherit;
}
#banner h2:before
{
content: '';
display: block;
border-top: solid 1px;
border-color: #888;
border-color: rgba(255,255,255,0.35);
margin: 10px 0 1.25em 0;
}
#banner h2:after
{
content: '';
display: block;
border-bottom: solid 1px;
border-color: #888;
border-color: rgba(255,255,255,0.35);
margin: 1.25em 0 10px 0;
}
#banner p
{
text-transform: uppercase;
color: #fff;
color: rgba(255,255,255,0.75);
font-size: 1.5em;
font-weight: 700;
line-height: 1.3em;
letter-spacing: 0.04em;
}
/*********************************************************************************/
/* Wrappers */
/*********************************************************************************/
#header-wrapper
{
background: url('../images/banner.jpg') top center;
background-size: 100%;
}
body.homepage #header-wrapper
{
background-size: cover;
}
#banner-wrapper
{
}
#main-wrapper
{
background: #fff;
}
#main-wrapper .main-wrapper-style1 .inner,
#main-wrapper .main-wrapper-style2 .inner,
#main-wrapper .main-wrapper-style3 .inner
{
position: relative;
z-index: 2;
}
#main-wrapper .main-wrapper-style1
{
background: url('images/bg01.jpg');
position: relative;
text-shadow: 1px 1px 0 #fff;
}
#main-wrapper .main-wrapper-style1:before
{
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('images/bg03.png');
background-size: 100% 100%;
z-index: 1;
}
#main-wrapper .main-wrapper-style2
{
}
#main-wrapper .main-wrapper-style3
{
background: url('images/bg01.jpg');
position: relative;
text-shadow: 1px 1px 0 #fff;
}
#main-wrapper .main-wrapper-style3:before
{
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 250px;
background: url('images/bg04.png');
background-size: 100% 100%;
z-index: 1;
opacity: 0.25;
}
#footer-wrapper
{
position: relative;
background: url('images/bg04.png') top left no-repeat;
background-size: 100% 250px;
}
#footer-wrapper:before
{
content: '';
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: -moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5));
background: -webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5));
background: -o-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5));
background: -ms-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5));
background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5));
z-index: 1;
}
/*********************************************************************************/
/* Header */
/*********************************************************************************/
#header
{
margin-bottom: 0;
}
/*********************************************************************************/
/* Footer */
/*********************************************************************************/
#footer
{
margin-bottom: 0;
text-shadow: -1px -1px 0 rgba(0,0,0,1);
position: relative;
z-index: 2;
}
#footer h2
{
font-size: 1.35em;
color: #fff;
}
#footer strong
{
color: #fff;
}
#footer a
{
color: #999;
}
#footer ul.style2 li
{
border-top: solid 1px;
border-color: #444;
border-color: rgba(255,255,255,0.075);
}
#footer ul.style2 li:first-child
{
border-top: 0;
}
#footer ul.style2 li a
{
text-decoration: none;
}
#footer .button-alt
{
box-shadow: inset 0px 0px 0px 1px #282828, inset 0px 2px 1px 0px #a0a0a0, inset 0px 0px 0px 2px #424242;
}
#footer dl.contact dt
{
color: #ddd;
}
#copyright
{
border-top: solid 1px;
border-color: #444;
border-color: rgba(255,255,255,0.075);
text-align: center;
margin-top: 2em;
padding: 3em 0 4em 0;
color: #555;
}
#copyright a
{
color: #666;
}