/*
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 Content
04 Base Style
05 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:#F2F2F2; font-family:'planerregular'; font-size:14px; color: #444444; }
::-moz-selection 	{ background:#E1E1E1; color:#333; }
::selection 		{ background:#E1E1E1; color:#333; }

/* ---------------------------------------------------------------------------------------------------------- 
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)

*/
@font-face {
    font-family: 'planerregular';
    src: url('fonts/planer_reg-webfont.eot');
    src: url('fonts/planer_reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/planer_reg-webfont.woff') format('woff'),
         url('fonts/planer_reg-webfont.ttf') format('truetype'),
         url('fonts/planer_reg-webfont.svg#planerregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
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:normal; /* This helps to identify headings at the initial build stage, but you should write something more precise later on */ }

h1.logo {
	position: relative;
	height: 155px;
	z-index: 1;
}

h2 { 
	width:335px; 
	height:45px; 
	padding-right:5px; 
	margin-bottom:40px; 
	background:#0F162B; 
	font-size:22px; 
	color:#FFF; 
	text-transform:uppercase; 
	text-align:right; 
	line-height:45px; 
}

.home-widgets-block h2.home {
	width: auto;
	background:none;
	height: 40px;
	margin:0;
	padding: 0;
	font-size: 20px;
	color: #444444;
	text-align: left;
	text-transform: uppercase;
	line-height: 60px;
}

h3 {
	width: 945px;
	height: 60px;
	border-left: 5px solid #0F162B;
	padding-left: 10px;
	margin: 20px 0;
	background: #FFF;
	font-size: 16px;
	color: #0F162B;
	text-transform: uppercase;
	line-height: 60px;
	clear:both;
}	

h3.bis {
	width: 330px;
	line-height: 20px;
	height: 30px;
	border-left: none;
	border-bottom: 1px solid #0F162B;
	margin: 0;
}
h3.portfolio {
	width: auto;
	line-height: normal;
	height: auto;
	border-left: none;
	border-bottom: none;
	margin: 10px 0;
}

h4 {
	font-size: 14px;
	color: #0F162B;
	font-weight: bold;
	margin-bottom: 20px;
	text-transform: uppercase;
}			
/* ---------------------------------------------------------------------------------------------------------- 
03 Content -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/*


/* ########################################################
 * ################# 		HEADER		###################
 * ########################################################
 */

.wrapper { min-height: 100%; position: relative; }

#header {
	position: relative;
	width: 100%;
	height: 175px;
}

.header-bar {
	position: absolute;
	width: 100%;
	height: 40px;
	bottom: 0;
	background: #0F162B;
	z-index: 0;
}


/* --- Navigation --- */

.menu-principal-container {
	position:absolute;
	top: 135px;
	z-index: 1;
}
.menu-principal-container ul { position:relative; text-align: center;}
.menu-principal-container ul li {
	position: relative;
	float: left;
	margin: 0;
	zoom: 1;
}
.menu-principal-container ul li a {
	display: block;
	height: 40px;
	padding: 0 15px;
	font-family: 'planerregular';
	font-size: 15px;
	color: #FFF;
	line-height: 40px;
	text-transform: uppercase;
	text-decoration: none;
}
.menu-principal-container ul li.hover {position: relative;}

.menu-principal-container ul li a:hover,
.menu-principal-container ul.menu li.current-menu-item a {
	background: #FFF;
	color: #0F162B;
}

.menu-principal-container ul li.sep {
	width: 1px;
	height: 40px;
	background: url(images/sep-nav.png) 0 center no-repeat;
}

/* 
	LEVEL TWO
*/
.menu-principal-container ul ul.sub-menu {
	position: absolute;
	visibility: hidden;
	width: 118px;
	/*top: 100%; */
	left: 0;
	background: #0F162B;
	z-index: 5;
}
	
.menu-principal-container ul ul.sub-menu li:hover, 
.menu-principal-container ul ul.sub-menu li.hover {
	
}
.menu-principal-container ul ul.sub-menu li  {
	width: 122px;
	height: 30px;
	width: 100%; 
	background: none !important;
	text-align: left;
	text-transform: none;
}
.menu-principal-container ul ul.sub-menu li a {
	display: block;
	width: 122px;
	height: 30px;
	margin: 0px 0 0 -2px !important;
	padding: 0;
	background: none !important;
	color: #FFF !important;
	font-size: 15px;
	text-align: center;
	line-height: 30px;
	text-transform: none;
}

.menu-principal-container ul li#menu-item-23 a {
	display:block;
	width: 26px;
	height: 40px;
	background: url(images/home-icon.png) 0 center no-repeat;
	padding: 0 6px;
	
}
.menu-principal-container ul li#menu-item-23 a:hover,
.menu-principal-container ul li#menu-item-23.current-menu-item a {
	background-color: none;
}

.menu-principal-container ul ul.sub-menu li a:hover,
.menu-principal-container ul ul.sub-menu li.hover a,
.menu-principal-container ul ul.sub-menu li.current-menu-item a {
	background:#FFFFFF !important;
	color: #0F162B !important;
}




/* ########################################################
 * ################# 		CONTENT		###################
 * ########################################################
 */

.content { padding-bottom: 50px;}
.content-box {padding:15px 0; background: #FFFFFF; float:left;}
.content-bloc {padding: 15px; background: #FFFFFF; float:left;}

.hatching {
	background: url(images/crosshatching-texture.jpg) 0 0 repeat;
	
	-moz-box-shadow:    inset 0 0 20px #CCC;
    -webkit-box-shadow: inset 0 0 20px #CCC;
    -o-box-shadow: 		inset 0 0 20px #CCC;
    box-shadow:  		inset 0 0 20px #CCC;
	
}

.image-une {
	width: 940px;
	margin: 0 auto;
}

.w_940.home-block {
	background: #DFDFDF url(images/crosshatching-texture.jpg) 0 0 repeat;
	padding: 30px 20px;
	margin: 0 auto;
	
	-moz-box-shadow:    inset 0 0 20px #CCC;
    -webkit-box-shadow: inset 0 0 20px #CCC;
    -o-box-shadow: 		inset 0 0 20px #CCC;
    box-shadow:  		inset 0 0 20px #CCC;

}

.home-widgets-block span {
	display: block;
	width: 40px;
	float: left;
	margin-right: 10px;
}


.home-widgets-block .desc {
	min-height: 80px;
	clear: both;
	padding: 10px;
	text-align: justify;
}


/* ========================================================================================================================
	PORTOFOLIO 
======================================================================================================================== */
.filter { min-height: 455px; }
.filter li { margin: 0 0 10px 0; }
.filter li a { padding-left: 10px; }
.filter li.active a { font-weight:bold; }

.portfolio-excerpt p { padding: 0 10px !important;  }
.portfolio-excerpt { min-height: 80px; }

a.portfolio-thumbnail { padding-left:10px;}

.filterable-grid li { min-height: 390px; }


/* ########################################################
 * ################# 		FOOTER		###################
 * ########################################################
 */

#footer {
	position: relative;
	width: 100%;
	min-height: 210px;
	bottom:0;
	left:0;
	padding: 15px 0 10px 0;
	background: #0F162B;
	color: #FFF;
}

#footer a, #footer a:hover {color: #FFF !important; }

.adresse, .sitemap { border: 1px solid #FFF; padding:5px; height: 130px;}
.title-footer {
	font-size: 18px;
	text-transform: uppercase;
	margin-bottom: 5px;
}

span#adresse {
	display: block;
	margin-top: 10px;
	line-height: 18px;
}
.adresse a, .adresse a:hover {color: #FFF !important;}

.menu-footer-container ul li a, .menu-footer-container ul li a:hover{ color: #FFF; line-height: 19px; }
.menu-footer-container ul li ul.sub-menu { margin-left: 15px; }
.menu-footer-container ul li ul.sub-menu li { background: url(images/square.jpg) 0 center no-repeat; padding-left: 10px; }



/* ---------------------------------------------------------------------------------------------------------- 
04 Base Style -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

p.h_155 { display:block; min-height: 155px;}

.content-box p { padding: 0 15px;}



/***** Links *****/

	a:link 									{ outline:0; color:#0F162B; text-decoration: none; }
	a:visited 								{ outline:0; color:#0F162B; text-decoration: none;}
	a:active 								{ outline:0; color:#0F162B; text-decoration: none;}
	a:hover 								{ outline:0; color:#0F162B; text-decoration:underline; }
	a:focus 								{ -moz-outline-style:none; text-decoration: none; }
	
	a.diamond 								{ display:block; background; background: url(images/diamond.png) 0 2px no-repeat; padding-left: 20px; }

	
								

/***** Lists *****/

	ul, ol 									{ margin:0; }
	ul 										{ margin:0; padding:0; list-style:none;}
	ol 										{ list-style:decimal; }
	ul.square 								{ list-style:square inside; }
	ul.circle 								{ list-style:circle outside; }
	ul.disc 								{ list-style: none inside; line-height: 18px; }
	
	ul.diamond 								{ margin-left: 20px; }
	ul.diamond li							{ background: url(images/diamond.png) 0 2px no-repeat; padding-left:20px; }
	

/***** Buttons *****/

a.btn-more {
	display: block;
	width: 170px;
	height: 38px;
	background: url(images/btn-more.png) 0 0 no-repeat;
	margin: 15px 0 0 10px;
	
	font-size: 18px;
	color: #FFF;
	line-height: 38px;
	text-decoration: none;
	padding-left: 10px;

}

a.btn-more:hover {
	background-position: 0 -38px;
	text-decoration: none;
}


a.gobackhome {
	display: block;
	width: 200px;
	height: 40px;
	background: #0F162B;
	margin: 20px auto 5px auto;
	font-size: 18px;
	color: #FFFFFF;
	text-align: center;
	line-height: 40px;
	text-transform: uppercase;
}
a.gobackhome:hover {
	background: #232b44;
	text-decoration: none;
}

/***** Images *****/
	img 									{ border:0;}
	.image-une img 							{ border: 10px solid #FFFFFF;}
	img.border 								{ margin: 0 auto; border: 1px solid #8D8C87; }
	.border img								{ margin: 0 auto; border: 1px solid #8D8C87; }
	
/***** Tables *****/
table 										{border-collapse: collapse; border-spacing: 0;}
.table_details table 						{width: 520px; }
.table_details table td						{padding: 3px; vertical-align: middle; border-bottom: 3px solid #FFF;}
.table_details table td.designation			{width:200px; background: #E6E6E6; margin-right: 3px;}
.table_details table td.title				{border-bottom: 1px solid #000;}



/***** Global Classes *****/

	.img-left   							{ float:left; margin:0 30px 30px 0; border:none;}
	.img-right  							{ float:right; margin:0 0 30px 30px; border:none; }

	.clear       							{ clear:both; }
	.float-left 							{ float:left; }
	.float-right   							{ float:right; }

	.text-big								{ color:#a2bd30; font-weight:bold; line-height:26px; }
	.text-left    							{ text-align:left; }
	.text-right    							{ text-align:right; }
	.text-center   							{ text-align:center; }
	.text-justify  							{ text-align:justify; }

	.normal									{ font-weight:normal; }
	.bold          							{ font-weight:bold; }
	.italic        							{ font-style:italic; }
	.underline     							{ border-bottom:1px solid; }

	
	.nopadding 						   		{ padding:0; }
	.noindent  						   		{ margin-left:0; padding-left:0; }
	.nobullet  					   			{ list-style:none; list-style-image:none; }

	.block									{ display:block; }
	.hidden									{ display:none; }
	.hide 									{ display:none; }
	
	.h_125 									{ min-height: 125px; }
/***** Ombres *****/

	.ombre-btn 							{-moz-box-shadow: 4px 4px 15px #000; -o-box-shadow: 4px 4px 15px #000; -webkit-box-shadow: 4px 4px 15px #000; box-shadow: 4px 4px 15px #000;}
	.ombre-image 						{-moz-box-shadow: 0px 0px 10px 0 #000000; -o-box-shadow: 0px 0px 10px 0 #000000; -webkit-box-shadow: 0px 0px 10px 0 #000000; box-shadow: 0px 0px 10px 0 #000000;}

/***** Global Margin/Padding/Spacing *****/

	.alpha 									{margin-left: 0;}
	.omega 									{margin-right: 0;}

	.mLeft5									{margin-left:5px;}
	.mLeft10								{margin-left:10px;}
	.mLeft15								{margin-left:15px;}
	.mLeft20								{margin-left:20px;}
	.mLeft25								{margin-left:25px;}
	.mLeft30								{margin-left:30px;}
	.mLeft35								{margin-left:35px;}
	.mLeft40								{margin-left:40px;}
	.mLeft45								{margin-left:45px;}
	.mLeft50								{margin-left:50px;}
	.mLeft55								{margin-left:55px;}
	.mLeft60								{margin-left:60px;}

	.mRight5								{margin-right:5px;}
	.mRight10								{margin-right:10px;}
	.mRight15								{margin-right:15px;}
	.mRight20								{margin-right:20px;}
	.mRight25								{margin-right:25px;}
	.mRight30								{margin-right:30px;}
	.mRight35								{margin-right:35px;}
	.mRight40								{margin-right:40px;}
	.mRight45								{margin-right:45px;}
	.mRight50								{margin-right:50px;}
	.mRight55								{margin-right:55px;}
	.mRight60								{margin-right:60px;}
	.mRight65								{margin-right:65px;}
	
	.mTop5									{margin-top: 5px;}
	.mTop10									{margin-top: 10px;}
	.mTop15									{margin-top: 15px;}
	.mTop20									{margin-top: 20px;}
	.mTop25									{margin-top: 25px;}
	.mTop30									{margin-top: 30px;}
	.mTop35									{margin-top: 35px;}
	.mTop40									{margin-top: 40px;}
	.mTop45									{margin-top: 45px;}
	.mTop50									{margin-top: 50px;}
	.mTop55									{margin-top: 55px;}
	.mTop60									{margin-top: 60px;}
	
	.mBottom5								{margin-bottom: 5px;}
	.mBottom10								{margin-bottom: 10px;}
	.mBottom15								{margin-bottom: 15px;}
	.mBottom20								{margin-bottom: 20px;}
	.mBottom25								{margin-bottom: 25px;}
	.mBottom30								{margin-bottom: 30px;}
	.mBottom35								{margin-bottom: 35px;}
	.mBottom40								{margin-bottom: 40px;}
	.mBottom45								{margin-bottom: 45px;}
	.mBottom50								{margin-bottom: 50px;}
	.mBottom55								{margin-bottom: 55px;}
	.mBottom60								{margin-bottom: 60px;}

	.margeAuto 								{margin: auto;}
	
	.pLeft5								 	{padding-left: 5px;}
	.pLeft10 								{padding-left: 10px;}
	.pLeft15 								{padding-left: 15px;}
	.pLeft20 								{padding-left: 20px;}
	.pLeft30 								{padding-left: 30px;}
	.pLeft50 								{padding-left: 50px;}
	
	.pTop5								 	{padding-top: 5px;}
	.pTop10 								{padding-top: 10px;}
	.pTop20 								{padding-top: 20px;}
	.pTop30 								{padding-top: 30px;}
	.pTop50 								{padding-top: 50px;}
	
	.hr 									{width: 100%; height:1px; background:#D6DC63;}
	.sep 								    {height: 95px; width: 1px; background:#CCCCCC; float:left; }
	
	.shadow 						 		{ -moz-box-shadow: 4px 4px 15px #000; -o-box-shadow: 4px 4px 15px #000; -webkit-box-shadow: 4px 4px 15px #000; box-shadow: 4px 4px 15px #000; opacity:1; }





/* ---------------------------------------------------------------------------------------------------------- 
05 Media queries (using a mobile-first approach) ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

/* 400 and up */
@media screen and (min-width:400px) {

					{ /* Place your styles here for all widths greater than 400px */ }

}

/* Retina Display */
@media screen and (-webkit-min-device-pixel-ratio:2) {

					{ /* Place your styles here for all 'Retina' screens */ }

}