/*
* HTML5 Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html,
button,
input,
select,
textarea {
color: #4e4f56;
}
body {
/*font-size: 1em;
line-height: 1.4;*/
font-family: 'Droid Serif', serif, Georgia, Times New Roman, Times, serif;
-webkit-font-smoothing: antialiased;
overflow-y: scroll;
overflow-x: hidden;
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between images and the bottom of their containers: h5bp.com/i/440
*/
img {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Chrome Frame prompt
========================================================================== */
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
.main {
background: url(../img/BG/BG_subtlenet2.png) top left repeat;
width:100%;
height:auto;
border-top: #7cc50a 4px solid;
/*position:relative;
z-index:auto;*/
}
.mainContainer{
height:520px;
width:920px;
padding:40px 60px 5px 60px;
}
.logo{
margin-bottom:25px;
}
#MainSection{
float:left;
width:920px;
}
.contentMain {
width:700px;
font-family: 'Droid Serif', serif;
font-size:20px;
line-height:2em;
font-weight: normal 400;
padding-top:10px;
}
.highlight{
color : #7cc50a;
text-decoration : none;
}
.dontSpam{
color : #7cc50a;
font-style:italic;
font-family: 'Droid Sans', sans-serif;
font-weight:normal;
margin-top:2px;
}
p {
font-size : 18px;
margin : 0 0 20px 0;
line-height : 1.5em;
font-family: 'Droid Sans', sans-serif;
}
p img {
margin : 0;
}
p.lead {
font-size : 21px;
line-height : 27px;
color : #999999;
}
em {
font-style : italic;
}
strong {
font-weight : bold;
color : #4e4f56;
}
small {
font-size : 80%;
}
/* #Links
================================================== */
a, a:visited {
color : #000000;
text-decoration : none;
outline : 0;
}
a:hover, a:focus {
color : #7cc50a;
}
p a, p a:visited {
line-height : inherit;
}
a.links {
color : #4e4f56;
text-decoration : none;
font-weight : 700;
}
/* ---- Subscribe form---- */
#sunscribeSection{
width:420px;
height:150px;
border-right:1px #CCC;
vertical-align: middle;
background: url(../img/Bg_Subscribe.png) no-repeat center center;
position:absolute;
}
.Subscribe {
width : 430px;
height : 60px;
margin : 40px auto 10px auto;
border-radius : 4px;
vertical-align: middle;
float:left;
}
form {
/*box-shadow : 0 5px 7px 0 rgba(0, 0, 0, 0.3) inset;*/
border-radius : 4px;
}
.email {
width : 280px;
height : 50px;
margin : 15px 0 0 0px;
background : #ffffff;
border : 2px #cccccc;
box-shadow : 1px 1px 0 0 rgba(0, 0, 0, 0.1) inset, 1px 1px 0 0 rgba(0, 0, 0, 0.15);
-webkit-appearance: none;
border-radius : 4px;
font-family : 'Droid Sans', sans-serif;
font-weight : 300;
font-size : 16px;
color : #ccc;
font-style : italic;
text-align : left;
line-height : 26px;
padding-left : 20px;
}
.email:focus {
outline : 0;
background : #f3f3f3;
box-shadow : 1px 1px 0 0 rgba(0, 0, 0, 0.2) inset, 1px 1px 0 0 rgba(0, 0, 0, 0.15);
-webkit-appearance: none;
}
.submit {
width : 70px;
height : 52px;
margin : 8px 15px 15px 10px;
background : #7cc50a url(../img/arrow.png) no-repeat center;
border : 1px solid #68a607;
/*box-shadow : 0 1px 0 0 rgba(255, 255, 255, 0.3) inset, 0 20px 30px 0 rgba(255, 255, 255, 0.2) inset, 0 4px 0 0 rgba(0, 0, 0, 0.15);*/
border-radius : 4px;
-webkit-appearance: none;
font-family : 'Droid Sans', sans-serif;
font-weight : 400;
font-size : 16px;
color : #fff;
line-height : 26px;
cursor : pointer;
text-indent: -9000px;
}
.submit:hover {
box-shadow : 0 1px 0 0 rgba(255, 255, 255, 0.3) inset, 0 -20px 30px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 0 0 rgba(0, 0, 0, 0.15);
-webkit-appearance: none;
}
.submit:active {
box-shadow : 0 1px 1px 1px rgba(0, 0, 0, 0.2) inset, 0 -20px 30px 0 rgba(255, 255, 0, 0.1) inset, 0 1px 0 0 rgba(0, 0, 0, 0.15);
-webkit-appearance: none;
}
/* ---- Countdown timer ---- */
.Counter {
width:430px;
margin : 20px 50px 20px 20px;
float:right;
border-left:dashed 1px #CCC;
}
ul#countdown li {
display : inline-block;
/*background : url('../images/circle.png') top left no-repeat transparent;*/
width : 70px;
margin-bottom : 20px;
text-align : center;
padding-right : 20px;
float:left;
}
ul#countdown li span {
font-size : 3em;
font-weight : bold;
color : #4e4f56;
height : 60px;
line-height : 60px;
position : relative;
}
ul#countdown li p.timeRefDays, ul#countdown li p.timeRefHours, ul#countdown li p.timeRefMinutes, ul#countdown li p.timeRefSeconds {
margin-top : 10px;
color : #4e4f56;
text-transform : uppercase;
font : 70% 'Droid Sans', sans-serif;
font-weight : 400;
}
/* ---- Grid images ---- */
.container{
width: 100%;
position:relative;
margin:0;
}
.mainGrid{
width:100%;
height:auto;
}
.ri-grid{
margin: 0px auto 30px;
position: relative;
height: auto;
}
.ri-grid-loading{
width: 100px;
height: 100px;
background: transparent url(../img/loading.gif) no-repeat center center;
}
.ri-grid ul {
list-style: none;
display: block;
width: 100%;
margin: 0;
padding: 0;
}
/* Clear floats by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.ri-grid ul:before,
.ri-grid ul:after{
content: '';
display: table;
}
.ri-grid ul:after {
clear: both;
}
.ri-grid ul {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
.ri-grid ul li {
-webkit-perspective: 400px;
-moz-perspective: 400px;
-o-perspective: 400px;
-ms-perspective: 400px;
perspective: 400px;
margin: 0;
padding: 0;
float: left;
position: relative;
display: block;
overflow: hidden;
background: #000;
}
.ri-grid ul li a{
display: block;
outline: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
background-color: #333;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/* Grid wrapper sizes */
.ri-grid-size-1{
width: 55%;
}
.ri-grid-size-2{
width: 100%;
}
.ri-grid-size-3{
width: 100%;
margin-top: 0px;
}
/* Shadow style */
.ri-shadow:after,
.ri-shadow:before{
content: "";
position: absolute;
z-index: -2;
bottom: 15px;
left: 10px;
width: 50%;
height: 20%;
max-width: 300px;
max-height: 100px;
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.ri-shadow:after{
right: 10px;
left: auto;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}
.ri-grid-loading:after,
.ri-grid-loading:before{
display: none;
}
/* ---- Footer ---- */
.footer{
height:60px;
font : 70% 'Droid Sans', sans-serif;
font-weight : 400;
padding:20px 0 0 60px;
vertical-align:middle;
}
/* ---- Contact details ---- */
.contact {
width:430px;
margin : 20px 50px 20px 20px;
float:right;
border-left:dashed 1px #CCC;
}
.address{
font : 13px 'Droid Sans', sans-serif;
font-weight : 400;
padding-left:40px;
margin:10px auto;
}
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 100%;
}
/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}