/*
Theme Name: 	Starkers
Theme URI: 		http://viewportindustries.com/products/starkers
Description: 	The totally nude Wordpress theme!
Version: 		4.0
Author: 		Elliot Jay Stocks & Keir Whitaker
Author URI: 	http://viewportindustries.com
Tags: 			starkers, naked, clean, basic
*/

/*
===========================
CONTENTS:

01 Sensible defaults
02 Typography
03 CSS
04 Media Queries 
===========================
*/

/* ---------------------------------------------------------------------------------------------------------- 
01 Sensible defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@import "css/reset.css";

div,
article,
section,
header,
footer,
nav,
li					{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
.group:after 		{ display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ }
body 				{ background:#fff; /* Don't forget to style your body to avoid user overrides */ }

img, video, canvas, iframe {
    max-width: 100%;
	max-height:100%;
}


/* Image Fixes for responsive layouts, thanks Wordpress Codex! */
.entry-content img,
.comment-content img,
.widget img {
max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
}

img[class*="align"],
img[class*="wp-image-"] {
height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}

img.size-full {
max-width: 97.5%;
width: auto; /* Prevent stretching of full-size images with height and width attributes in IE8 */
}

.wp-caption,
.wp-caption-text {
max-width: 97.5%;
height: auto;
width: auto9; /* ie8 */
text-align:center;
}

.alignleft {
float:left;
}

.alignright {
float:right;
}

.clearfix:after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

/* ---------------------------------------------------------------------------------------------------------- 
02 Typography -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/*

14 / 16	= 		0.875em 		(14px equivalent)
16 / 16	= 		1em 			(16px equivalent)
18 / 16 = 		1.125em 		(18px equivalent)
21 / 16 = 		1.3125em 		(21px equivalent)
24 / 16 = 		1.5em 			(24px equivalent)
30 / 16 = 		1.875em 		(30px equivalent)

*/

body,
input,
textarea 			{ /* We strongly recommend you declare font-weight using numerical values, but check to see which weights you're exporting first */ }

h1, 
h2, 
h3, 
h4, 
h5, 
h6 					{ font-weight:bold; /* This helps to identify headings at the initial build stage, but you should write something more precise later on */ }

/* ---------------------------------------------------------------------------------------------------------- 
03 Base CSS ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
body {
background:#121212 url('img/background-2.jpg') top center no-repeat;
color:#121212;
font-family:'Lato', sans-serif;
font-weight:300;
}

.container {
max-width:1200px;
margin:0 auto;
background:#fff;
}

.third {
width:30%;
float:left;
}

.half {
width:45%;
float:left;
}

a.button {
display:inline-block;
padding:15px 25px;
letter-spacing:2px;
margin:10px 0;
text-decoration:none;
font-family:'Lato', sans-serif;
font-weight:400;
text-transform:uppercase;
}

.orange.button {
background:#f57f29;
color:#fff;
}

label {
display:none;
}

input, textarea {
width:100%;
background:#ebebeb;
color:#7d7d7d;
font-family:'Lato', serif;
font-size:14px;
letter-spacing:2px;
border:none;
padding:5px 10px;
}

::-webkit-input-placeholder {
text-transform:uppercase;
}
:-moz-placeholder { /* older Firefox*/
text-transform:uppercase;
}
::-moz-placeholder { /* Firefox 19+ */ 
text-transform:uppercase;
} 
:-ms-input-placeholder { 
text-transform:uppercase;
}

input[type=submit] {
display:inline-block;
padding:10px 25px;
letter-spacing:2px;
margin:10px 0;
text-decoration:none;
font-family:'Lato', sans-serif;
font-weight:400;
text-transform:uppercase;
background:#f57f29;
color:#fff;
width:30%;
}

.gform_confirmation_wrapper {
margin:20px 0;
font-weight:700;
}

body.page table {
border:none;
margin:40px auto;
width:100%;
font-family:'Lato', sans-serif;
table-layout:fixed;
}

body.page thead {
background:#ececec;
font-weight:700;
color:#a2222b;	
}

body.page th {
padding:15px 0;
text-align:left;
width:auto;
}

body.page th:first-child {
padding-left:30px;
}

body.page tr {
border-bottom:2px solid #ebebeb;
}

body.page td {
padding:10px;
font-size:15px;
}

.wide {
	width:280px;
}

body.page td:first-child {
padding-left:30px;
width:280px;
}

body.page img.alignleft {
margin:10px 20px 10px 0;
}

body.page img.alignright {
margin:10px 0 10px 20px;
}

/* header */
header {
padding:20px 0;
}

header > h1 {
float:left;
width:20%;
margin:0 0 0 4%;
}

#header-right {
float:right;
margin:0;
width:75%;
}

.phoneNum {
width:60%;
margin:0 auto 20px;
text-align:center;
}

a.sideline { /* add side lines to phone number */
	color:#f5812d;
	font-family:'Lato', sans-serif;
	font-weight:900;
	font-size:20px;
	text-decoration:none;
	display: relative;
	overflow:hidden;
	text-align: center;
	margin:0 0 20px;
}

a.sideline:before, a.sideline:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 1px;
    content: '\a0';
    background-color: #f5812d;
}
a.sideline:before {
    margin-left: -52%;
    text-align: right;
	margin-right: 15px;
}
a.sideline:before {
  margin-right:10px;
}

a.sideline:after {
  margin-left:10px;
}

#mobileMenuButton {
display:none;
}

header .menu li {
display:inline;
float:left;
width:14%;
margin:0 1%;
text-align:center;
height:50px;
}

header .menu li a {
font-family:'Lato', sans-serif;
font-weight:900;
font-size:13px;
text-transform:uppercase;
text-align:center;
text-decoration:none;
color:#6d6e71;
vertical-align:bottom;
}

.menu-item-31, .menu-item-29, .menu-item-30 {
word-spacing:999em;	
}

.menu-item-31 li, .menu-item-29 li, .menu-item-30 li{
word-spacing:0;
}


header .menu li a:hover {
color:#a2222b;
}

header .menu li ul {
background:#a2222b;
display:none;
position:absolute;
width:175px;
padding:10px;
text-align:center;
margin-left:-87.5px;
left:50%;
top:50px;
z-index:500;
}

header .menu li li {
width:100%;
float:none;
margin:15px 0;
display:block;
height:auto;
}

header .menu li li a {
font-weight:400;
color:#fff;
text-align:center;
}

header .menu li li a:hover {
color:#fff;
}

header .menu li:hover ul { /* first level hover display */
display:block;
}

/* footer */
footer {
padding:40px 0 80px;
background:#a2222b;
text-align:center;
font-family:'Noticia Text', serif;
}

#copyright {
color:#fff;
font-size:14px;
}

#copyright a {
color:#fff;
text-decoration:none;
}

footer nav {
margin:20px auto;
}

footer nav li {
display:inline;
margin:0 20px;
text-align:center;
}

footer nav li a {
color:#000000;
font-size:14px;
font-weight:700;
font-family:"Lato", sans-serif;
text-transform:uppercase;
text-decoration:none;
letter-spacing:1px;
}

/* homepage */
/* slider */
.flexslider {
width:100%;
margin:0 auto;
}

.flexslider .caption {
position:absolute;
bottom:70px;
left:65px;
width:65%;
z-index:100;
}

.flexslider .caption h2 {
color:#fff;
font-size:56px;
text-transform:uppercase;
font-weight:900;
line-height:56px;
}

/* content areas */
.hpArea {
padding:2.5%;
margin:0 auto;
}

.hpArea h2 {
color:#a2222b;
text-transform:uppercase;
font-weight:900;
}

.hpArea h2 a {
	color:#a2222b;
	text-decoration: none;
}

.hpArea > .half {
width:45%;
margin:0 4%;
}

.hpArea > .half:last-child {
margin:0;
}

#homepageMain {
background:#fff url('img/homepage-text-bg.jpg') top center no-repeat;
text-align:center;
padding:9% 20% 6.5%;
color:#363636;
font-size:22px;
font-weight:300;
line-height:26px;
font-family:'Lato', serif;
}

#homepageMain h2 {
color:#a2222b;
font-size:40px;
letter-spacing:2.5px;
margin:0 0 20px;
text-transform:uppercase;
font-weight:900;
line-height:44px;
}

#homepageCallouts.left-align {
	background: #272421 url(img/dirt-bg.jpg) top center no-repeat;
	color: #fff;
}

#homepageCallouts.left-align h2 {
	color: #fff;
}

#homepageCallouts.left-align a {
	color: #fff;
}

#homepageCallouts.left-align p {
	width: auto;
	padding: 0 4%;
}

#homepageCallouts {
background:#ebebeb;
font-family:'Noticia Text', serif;
text-align:center;
line-height:21px;
color:#363636;
}

#homepageCallouts > .third {
width:31%;
margin:0 3% 0 0;
min-height:510px;
}

#homepageCallouts > .third:last-child {
margin:0;
}

#homepageCallouts h2 {
font-family:'Lato', serif;
font-size:18px;
letter-spacing:1px;
line-height:20px;
margin:20px 0;
font-weight:700;
}

#homepageCallouts p {
font-size:15px;
line-height:18px;
width:85%;
margin:0px auto 10px;
}

#homepageCallouts .button {
position:absolute;
bottom:0;
right:25%;
}

#homepageHhs {
background:#5b1318;
color:#c2c2c2;
padding:4.5% 2.5%;
}

#homepageHhs p {
line-height:26px;
font-size:21px;
}

#homepageHhs > .half.alignleft {
width:51%;
margin:0 6% 0 0;
}

#homepageHhs > .half.alignright {
width:35%;
} 

#homepageHhs h2, #homepageCommApps h2 {
color:#fff;
font-size:40px;
text-transform:uppercase;
font-weight:900;
letter-spacing:2.5px;
line-height:52px;
}


#homepageCommApps {
background:#272421 url('img/dirt-bg.jpg') top center no-repeat;
color:#fff;
}

#homepageCommApps h2 {
font-size:36px;
line-height:40px;
margin:0 0 30px;
}

#homepageCommApps h3 {
font-size:19px;
text-transform:uppercase;
margin:0 0 15px;
}

#homepageCommApps p {
color:#c2c2c2;
font-family:'Noticia Text', serif;
font-size:16px;
line-height:20px;
margin:0 0 45px;
}

#homepageCommApps > .half.alignleft {
width:51%;
margin:0 6% 0 0;
min-height:395px;
}

#homepageCommApps > .half.alignright {
width:35%;
}

#homepageCommApps .button {
position:absolute;
bottom:0;
left:0;
}

#homepageContact {
color:#363636;
font-size:22px;
}

#homepageContact > .half.alignleft {
width:35%;
margin:0 6% 0 0;
}

#homepageContact > .half.alignright {
width:51%;
}

#homepageContact h4 {
margin:0 0 30px;
}

#homepageContact h4 a {
font-family:'Lato', serif;
font-size:24px;
font-weight:700;
color:#f57f29;
text-align:center;
text-decoration:none;
}

#homepageContact > .alignleft {
font-family:'Noticia Text', serif;
color:#363636;
font-size:16px;
text-align:center;
}

#homepageContact img {
margin:20px 0 0;
}

#homepageContact h2 {
font-size:40px;
line-height:52px;
margin:0 0 20px;
}

#homepageContact label {
display:none;
}

#homepageContact input, #homepageContact textarea {
width:100%;
font-size:14px;
font-weight:400;
letter-spacing:3px;
padding:15px;
}

#homepageContact input[type=submit] {
width:30%;
padding:15px 25px;
letter-spacing:2px;
margin:15px 0;
text-decoration:none;
font-family:'Lato', sans-serif;
font-weight:400;
text-transform:uppercase;
background:#f57f29;
color:#fff;
}

#homepageContact .gform_wrapper .gform_footer {
padding:0;
margin:2px 0;
}

#gform_wrapper_1 {
margin:40px 0 0 0;
}

#homepageContact p a {
text-decoration:none;
color:#363636;
font-size:15px;
}

#homepageContact .alignleft p {
border-bottom:1px solid #ebebeb;
padding:0 0 30px;
margin:0 0 20px;
}

#homepageContact .alignright p {
width:80%;
} 

/* general page work */
#headerArea {
background:url('img/header-dirt-bg.jpg') top center no-repeat;
color:#fff;
text-align:center;
font-size:44px;
text-transform:uppercase;
padding:20px;
}

#pageContent {
padding:20px 50px;
background:url('img/page-gradient.jpg') top center repeat-x;
font-family:'Noticia Text', serif;
font-size:16px;
}

#pageContent h2 {
text-transform:uppercase;
font-size:36px;
color:#363636;
margin:0 0 20px;
}

#pageContent h3 {
font-size:30px;
text-transform:uppercase;
margin:0 0 10px;
color:#a2222b;
font-family:'Lato', serif;
letter-spacing:2.5px;
margin:0 0 5px;
}

#pageContent h4 {
color:#63a3bd;
font-style:italic;
font-size:17px;
font-family:'Noticia Text', serif;
font-weight:400;
margin:0 0 20px;
width:65%;
}

#pageContent p {
margin:0 0 16px;
}

#pageContent ol li {
list-style-type:decimal;
margin:0 0 10px;
}

#pageContent ul li {
list-style-type:disc;
margin:0 0 10px;
}

#pageContent blockquote {
width:75%;
margin:20px auto 60px;
font-size:22px;
color:#363636;
text-align:center;
line-height:28px;
font-weight:300;
font-family:'Lato', serif;
}

#pageContent blockquote h2 {
font-size:40px;
margin:40px 0;
text-transform:uppercase;
letter-spacing:2.5px;
color:#a2222b;
font-weight:900;
line-height:48px;
}

/* HHS page */

#hhsSteps {
background:#fff;
padding:2.5% 6%;
font-family:'Noticia Text', serif;
}

#hhsSteps.greyBg {
	background:#ececec;
}


#benefitsTable {
background:#EBEBEB;
}

#benefitsTable h2 {
	font-size:20px;
	line-height:28px;
	margin:0 0 10px;
	font-weight:normal;
}

.embed-container { 
	position: relative; 
	padding-bottom: 56.25%; 
	height: 0; 
	overflow: hidden; 
	max-width: 100%; 
} 

.embed-container iframe, 
.embed-container object, 
.embed-container embed { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
}

#hhsSteps .padder {
	padding: 0 10%;
}

#hhsSteps > .alignleft {
	width:51%;
	margin:0 10% 0 0;
}

#hhsSteps > .alignright {
	width:35%;
}

#hhsSteps h2 {
font-size:28px;
line-height:28px;
margin:0 0 30px;
font-family:'Lato', serif;
}

#hhsSteps ol {
	margin: 10px 20px 40px;
}

#hhsSteps ol li {
    list-style-type: none;
    counter-increment: list;
    position: relative;
	font-family:'Noticia Text', serif;	
	margin: 0 0 10px;
}

#hhsSteps ol li:after {
    content: counter(list) ".";
    position: absolute;
    left: -2.5em;
    width: 2em;
    text-align: right;
    color: #f5812d;
	font-family:'Lato', serif;
	top:2px;
	font-weight:700;
}

#hhsSteps h3 {
	font-size:22px;
	margin:0 0 10px;
	font-family:'Lato', serif;
}

#hhsSteps p {
margin:0 0 20px;

}

#hhsIndustry {
background:#5b1318;
color:#c2c2c2;
font-size:15px;
line-height:20px;
font-family:'Noticia Text', serif;	
padding-top:40px;
padding-bottom:40px;
}

#hhsIndustry h2 {
color: #f5812d;
font-family:'Lato', serif;
font-size:21px;
margin:0 0 20px;
letter-spacing:2px;
font-weight:700;
}

#hhsIndustry p {
margin:0 0 20px;
}

#hhsFlotation {
width:70%;
font-size:16px;
line-height:21px;
font-family:'Noticia Text', serif;	
padding-top:40px;
padding-bottom:40px;	
}

#hhsFlotation h2 {
font-size:20px;
font-family:'Lato', sans-serif;
font-weight:700;
letter-spacing:2px;
margin:0 0 20px;
}

#hhsFlotation p{
margin:0 0 10px;
}

#hhsFlotation td:last-child {
padding-left:30px;
}

.page-id-15  hr {
margin:45px 0;
border:none;
}

.page-id-15 blockquote p {
width:100%;
}

.page-id-15 #pageContent img {
margin-bottom:90px;
margin-left:60px;
}

.development-of-hhs-technology th:first-child{
padding-left:50px;
}

.commercial-applications td {
padding-left:15px;
padding-right:15px;
}

body.contact-mrc #pageContent blockquote {
margin:20px auto;
}

/* news and announcements */

.blog #pageContent li {
list-style-type:none;
}

.blog h3 a {
color:#a2222b;
font-size:30px;
text-transform:uppercase;
text-decoration:none;
letter-spacing:1px;
font-family:'Lato', sans-serif;
font-weight:900;
}

.blog article {
border-bottom:1px solid #d7d7d7;
padding:30px 0;
magin:20px 0;
}

.blog time, .single time {
color:#63a3bd;
font-style:italic;
font-size:15px;
font-family:'Noticia Text', serif;
font-weight:400;
margin:20px 0;
display:block;
}

.blog article .alignright, .single article .alignright {
margin:0 0 10px 5%;
}

.single a {
color:#F5812D;
text-decoration:none;

}

#contentColumns {
width:100%;
margin:0px auto;
}

#contentColumns .third {
width:29%;
padding:0 2%;
}

#pageContent .third h2 {
font-family:'Lato', serif;
font-size:18px;
letter-spacing:1px;
line-height:20px;
margin:20px 0;
font-weight:700;
text-align:center;
color:#a2222b;
}

#pageContent .third p {
width:80%;
margin: 0 auto;
}


/* ------------------------------------------------------------------------------------------------------- 
04 Media queries -----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:1801px) {
html {
	background:#121212;
	}
/* body {
	
	background:
	url('img/left-site-bg.jpg') top left no-repeat,
	url('img/right-site-bg.jpg') top right no-repeat;
	}
*/
} 
@media screen and (max-width: 940px) {

	header > h1 {
	float:none;
	margin:0px auto 20px;
	width:22%;
	}

	#header-right {
	float:none;
	width:100%;
	}

	#homepageMain {
	padding:20px;
	}
	
	footer nav li {
	display:block;
	margin:10px 0;
	}
	
	#homepageCommApps .button {
	position:static;
	}
	
		a.sideline { /* add side lines to phone number */
	display: inline-block;
	text-align: center;
	margin:0 0 20px;
}	

	a.sideline:before, a.sideline:after {
	  background-color:none;
	  content: '';
	  display:none;
	  
	}

	a.sideline:before {
	  margin-right:0;
	}

	a.sideline:after {
	  margin-left:0;
	}
	
	.phoneNum {
	text-align:center;
	}

}

@media screen and (max-width:768px) {
	.break {
	display:block;
	}
	header {
		margin:20px 0 0;
	}
	
	header > h1 {
	width:39%;
	}
	#mobileArea:after {
	   content: " ";
	   display: block; 
	   height: 0; 
	   clear: both;
	}
	
	#mobileMenuButton {
	display:block;
	float:left;
	margin:0 0 0 5%;
	}
	
	.phoneNum {
	float:right;
	width:auto;
	margin:10px 5% 0 0;
	}
	

	header .menu {
	display:none;
	background:#e0e0e0;
	width:100%;
	}
	
	header .menu li {
	display:inline-block;
	text-align:center;
	float:none;
	width:100%;
	height:auto;
	margin:10px auto 0;
	}
	
	header .menu li a {
		margin:0 0 10px;
		display:inline-block;
		font-size:16px;
		line-height:32px;
		color:#000000;
	}
	
	.menu-item-31, .menu-item-29, .menu-item-30 {
		word-spacing:0;
	}
	
	header .menu li ul {
	display:block;
	position:static;
	margin:0 auto;
	width:80%;
	float:none;
	text-align:center;
	padding:10px 10px 0 10px;
	}
	
	header .menu li li {
	padding:0;
	margin:0;
	}
	
	.alignleft, .alignright {
	float:none;
	width:100%;
	}

	.third, .half, #homepageHhs > .half.alignleft, #homepageHhs > .half.alignright,
	#homepageCommApps > .half.alignleft, #homepageCommApps > .half.alignright,
	#homepageContact > .half.alignleft, #homepageContact > .half.alignright,
	#homepageCallouts > .third, #homepageCallouts > .third:last-child,
	#hhsSteps > .alignleft, #hhsSteps > .alignright, .hpArea > .half, .hpArea > .half:last-child,
	#contentColumns .third
	{
	float:none;
	width:90%;
	margin:30px auto;
	}
	
	#hhsFlotation {
		width:90%;
	}
	
	#homepageCallouts > .third {
	min-height:300px;
	}
	
	#homepageCallouts .button {
	position:static;
	}
	
	#homepageHhs, #homepageCommApps, #homepageContact h2 {
	text-align:center;
	}
	
	#homepageContact .alignright p {
	width:90%;
	margin:20px auto;
	text-align:center;
	}
	
	#homepageCommApps {
	background:#272421 url("img/dirt-bg-mobile.jpg") no-repeat center top;
	}
	
	.flexslider .caption {
	background:#000;
	position:static;
	width:90%;
	padding:20px 5%;
	}
	
	.flexslider .caption h2 {
	font-size:32px;
	text-align:center;
	line-height:48px;
	}
	
	#pageContent {
	padding:20px 5%;
	}
	
	#pageContent blockquote h2 {
	font-size:32px;
	margin:10px 0;
	line-height:34px;
	}
	
	#pageContent blockquote {
	margin:0px auto 30px;
	width:95%;
	}
	
	#pageContent h3 {
	font-size:26px;
	line-height:28px;
	}
	
	#headerArea {
	background:transparent url("img/header-dirt-bg.jpg") repeat top center;
		font-size:34.75px;
	}
	
	.blog article .alignright, .single article .alignright {
		margin:20px auto;
	}
	
	.blog h3 {
		width:95%;
	}
	
	.page-id-15 #pageContent img {
		margin:20px auto !important;
		display:block;
		width:45%;
	}
	
	#pageContent h4, .page-id-15 #pageContent h3 {
		text-align:center;
		width:95%;
	}
	
	#homepageContact input, #homepageContact textarea {
	width:90%;
	}
	
	#homepageContact input[type="submit"] {
	width:auto;
	}
	
		table {width:100%;}
		thead {display: none;}
		tr:nth-of-type(2n) {background-color: inherit;}
		body.page tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em; width:auto;}
		tbody td {display: block;  text-align:center;}
		tbody td:before { 
			content: attr(data-th); 
			display: block;
			text-align:center;  
		  }
		 
		/* make some mods to the results tables only */
		.results tbody td:first-child:before, .results tbody td:last-child:before{ 
			content: ''; 
			display: block;
			text-align:center;  
		  }
		  
	#pageContent .third p, #pageContent .third h2 {
	text-align:center;
	width:100%;
	}
	
	.wide {
		width:auto;
	}
}

@media screen and (max-width:550px) {
	header > h1 {
	width:50%;
	}

}