/*   
Theme Name: Lunettes Grasset
Theme URI: http://www.misterharry.fr
Author: TB
Version: 1.0
*/

/*
	HTML5 Reset Wordpress Theme :: style.css
	----------------------------------------------------------
	We have learned much from/been inspired by/taken code where offered from:
	
	Eric Meyer					:: http://ericmeyer.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com
	
	Special thanks: The Wordpress theme owes its start to an empty theme authored 
		by Chris Coyier & Jeff Starr: http://digwp.com
	
-------------------------------------------------------------------------------*/

/* Let's default this puppy out
-------------------------------------------------------------------------------*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}									
html, body {height: 100%;}
body {
    min-height: 100%;
	font:16px 'Open Sans', sans-serif;

}
article, aside, figure, footer, header, hgroup, nav, section {display: block;}

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites, like, say for Google Maps custom placemarkers. 
   There has been a report of problems with standard Google maps as well, but we haven't been able to duplicate or diagnose the issue. */
img,
object,
embed {max-width: 100%;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted. 
	don't forget to restore the bullets within content. */
ul {list-style: none;}


a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; text-decoration:none;}



/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;font-size: inherit; font: 100%;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #7f7f7f; margin: 1.4em 5% 0.4em 0; padding: 0; color:#7f7f7f;}

input, select {vertical-align: middle;}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 87.5% sans-serif;} /* 14/16 */

 
/* Accessible focus treatment
	people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {outline: none;}

small {font-size: 75%;} /* 12/16 */

strong, th {font-weight: bold;}

td, td img {vertical-align: top;} 

/* Make sure sup and sub don't screw with your line-heights
	gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;} /* 12/16 */
sup {top: -0.5em;}
sub {bottom: -0.25em;}


/* hand cursor on clickable elements */
.clickable,
label, 
input[type=button], 
input[type=submit], 
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}
 
/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover */
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }  
.clear {clear:both; height:0; overflow:hidden;}


/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/


/* using local fonts? make sure to read up on Paul Irish's 
	Bulletproof @font-face syntax: http://mky.be/font-face/bulletproof/ */

/* we like off-black for text */
body, select, input, textarea {color: #000;}

a {color: #000;}
a:hover {color: #000; }
footer a:hover {text-decoration:underline;}
footer a {font-size:0.9em;}
/* PAGES
-------------------------------------------------------------------------------*/
header {
	background:url(images/bgHeader.png) repeat-x left bottom ;
	padding:40px 0 0;

}
header .col1, header .col2 {height:153px;}
header h1 { background:none; margin:0}
header h1 a {
	display:block;
	background:url(images/grassetLogo.png) no-repeat right bottom;
	width:100%;
	height:153px;
	text-indent:-50000px;
	background-size:150px 153px;
}
.espacePro {
	text-transform:uppercase;
	text-align:right;
	height:42px; /*  36/960 */
	line-height:110%; /* 18/16 */
	padding-right:0.84%; /* 8/960 */
}
.espacePro a { background:url(images/espacePro_Off.png) right top no-repeat; padding:0 49px 5px 0; display:block; font-size:0.9em;  float:right;}
.espacePro a:active, .espacePro a:hover {font-weight:bold; background:url(images/espacePro_On.png) no-repeat right bottom;}
.lang {text-align:right; margin-top:43px;}
.lang img {margin:0 5px;}
header .widget_pages h2 {display:none;}
header .colh1 {float:left; width:21%; }
header .colh2 {float:left; margin:0 2% 0 3%; width:74%;}
header ul li {float:left;}
header ul li a {
	display:block;
	padding:0 0.9375em 0 1.5625em; /*15/16  -  25/16 */
	text-decoration:none;
	height:0.9375em; /*15/16 */
	overflow:hidden;
	text-transform:uppercase;
	margin-top:0.0625em; /* 1/16 */
}

header ul li a:hover, header ul li a:active   {
	font-weight:bold;
	height:1.125em; /* 18/16 */
	margin-top:0;
	color:#000;
}

header ul li.current-menu-item a, header ul li.current_page_ancestor a   {
	font-weight:bold;
	height:1.125em; /* 18/16 */
	margin-top:0;
	background:url(images/black12.png) no-repeat left bottom;
}
.ie7 header ul li.current-menu-item a, header ul li.current_page_ancestor a   {
	background:url(images/black12.png) no-repeat left center;
}

header ul li + li {
	background:url(images/bgLiMenu.png) no-repeat left 6px;	
}

footer {
	background:url(images/bgFooter.jpg) repeat-x left 4.1875em; /* 67/16 */
	min-height:10em; /* 160/16 */
	width:100%;
	clear:both;
	text-align:center;
}
footer .widget h2 {display:none;}
footer .widget_pages li {display:inline-block; padding:0 0.625em; line-height:0.8em;margin-top:1.375em; font-size:0.875em; } /* padding:0 10px; 10/16  - margin-top:22px; 22/16 */
footer .widget_pages li + li {border-left:solid 1px #000;}
footer #menu-marques-footer {margin-top:-5px;}
footer #menu-marques-footer li {display:inline-block; }
footer #menu-menu-footer li {display:inline-block; padding:0 0.625em; line-height:0.8em;margin-top:1.375em; font-size:0.875em; } /* padding:0 10px; 10/16  - margin-top:22px; 22/16 */
footer #menu-menu-footer li + li {border-left:solid 1px #000;}

footer #menu-marques-footer a {display:block; margin:0; height:66px; text-indent:-1000000px;}
footer #menu-marques-footer #menu-item-52 a, footer #menu-marques-footer #menu-item-59 a  {background: url(images/agnesb-small.png) no-repeat center center;	width:104px;} /*Agen B*/
footer #menu-marques-footer #menu-item-50 a, footer #menu-marques-footer #menu-item-57 a {background: url(images/edenpark-small.png) no-repeat center center;	width:130px;} /*Eden Parl*/
footer #menu-marques-footer #menu-item-49 a, footer #menu-marques-footer #menu-item-56 a {background:url(images/guylaroche-small.png) no-repeat center right;	width:118px;} /* Guy Laroche */
footer #menu-marques-footer .ikks a{background:url(images/ikks-small.png) no-repeat center center;	width:68px; }
footer #menu-marques-footer .lacroixsmall a {background: url(images/lacroix-small.png) no-repeat center center;	width:72px;}
footer #menu-marques-footer #menu-item-48 a, footer #menu-marques-footer #menu-item-55 a {background:url(images/levis-small.png) no-repeat center center;	width:73px;}
footer #menu-marques-footer .royalmusemenu a {background:url(images/royalmuse-small.png) no-repeat center center;	width:100px;}
footer #menu-marques-footer #menu-item-47 a, footer #menu-marques-footer #menu-item-54 a {background: url(images/seiko-small.png) no-repeat center center;	width:72px;}
footer #menu-marques-footer #menu-item-483 a, footer #menu-marques-footer #menu-item-199 a {background: url(images/tarajarmon-small.png) no-repeat center center;	width:110px;}
footer #menu-marques-footer .vespa a {background:url(images/vespa-small.png) no-repeat center center;	width:72px;}
footer #menu-marques-footer .reebok a {background:url(images/reebok-small.png) no-repeat center center;	width:127px;}
footer #menu-marques-footer .bensimon a{background:url(images/bensimon-small.png) no-repeat center center;	width:120px; }
footer #menu-marques-footer .newbalance a{background:url(images/newbalance-small.png) no-repeat center center;	width:140px; }
/*footer #menu-marques-footer #menu-item-46 a, footer #menu-marques-footer #menu-item-53 a {background: url(images/zadigvoltaireSmall.png) no-repeat center center;	width:132px;}
footer #menu-marques-footer #menu-item-51 a {background: url(images/ddpSmall.png) no-repeat center center;	width:93px;}*/





.ie7 #menu-menu-footer {clear:both; height:1.2em; width:55%; margin:auto;}
.ie7 #menu-menu-footer li {float:left; line-height:1.2em;}

#page {
	background:url(images/bgPage.jpg) repeat-x left top;
	clear:both;
	min-height:60%;
}
#page footer  {clear:none;}
#page .content .col1 {
	background:url(images/grassetShadow.png) no-repeat right top;
	text-align:right;
	background-size:150px auto;
}
#page .content {
	background:url(images/bgContentpage.png) left top repeat-x #fff;
	padding-bottom:90px;
}
.content {width: 960px; margin:auto; }

.slider {padding:0 0 10% 0;}
.accueil #menu-marques { display:none;  }
#menu-marques { margin-top:1em; font-size:0.9375em; font-weight:bold;} /*font-size : 15/16 */
#menu-marques li {margin:0.4em 0 0.4em 44px;}
#menu-marques li a { line-height:1.2em; display:block;} /* line-height:26/16 */
#menu-marques li a:hover {background:#cbcbcc;}
#menu-marques li.current-menu-item a {background:#000;color:#FFF; display:block;}

.col1 {float:left; width:20.45%; min-height:100px; margin-right:3%}
.col2 {margin:0 1%; width:98%;}

/*   Tout ceci est a reprendre dans editor style 
-------------------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {font-weight:normal;}
h1 {font-size:1.1em; /*19/16*/ color:#fff; background:#000; line-height:1em; text-transform:uppercase; margin:0 4.78%; font-weight:bold} /* Les titres des marques : L'univers Agnes B. */
h2 {font-size:1.75em; /*28/16*/ text-transform:uppercase; font-weight:bold; letter-spacing:-0.05em; margin:0.7em 0; line-height:0.9em;} /* titres paragraphes page société */
h2.titPage {display:none;}
h3 {font-size : 0.75em;/* 12/16*/} /* titres des rubriques des pages Espace presse et carriere */
h4 {font-size : 0.75em;/* 12/16*/} /* sous-titres des rubriques des pages Espace presse et carriere */
h5 {font-size : 1.13em; font-weight:bold; font-style:italic;/*18/16 */} /* pages des marques : texte en gras */
h6 {font-size : 0.84em; /*13/16 */ line-height:1.3em; /*17/13*/ font-style:italic; margin:0.74em 0;} /* page société : texte mis en avant */
.col2 p {font-size:0.94em/*15px*/; line-height:1.3em; /*18px*/;}
.contentPC p {font-size:1em; }
.Carriere p {line-height:1.2em;}
p.slogan {font-size:1.48em; /*23/16*/ line-height:1.48em; /*34/23*/letter-spacing:-0.075em; text-align:right; float:left; width:20.4%; margin-right:3%;}
.lesarticles {margin-left:23.4%;}
.article {width:45.6%; margin-right:4.4%; float:left;}
.ie7 .article {width:45%; margin-right:4%; float:left;}
.ie7 .article h2 {font-size:1.6em;}
.article p {font-size:0.8em; line-height:1.4em; text-align:justify;}
.article p strong {letter-spacing:-0.05em;}
.negatif {margin-left:-14%; width:59%; clear:both; }
.ie7 .negatif {margin-left:-10%; width:59%; clear:both; }

.colmarque {display:table;}
.ie7 .colmarque {height:100%; overflow:hidden;}
.colmarque div {display:table-cell; vertical-align:bottom; width:40%; padding:1% 5%; text-align:justify;}
.ie .colmarque div {width:40%; margin:1% 5%; float:left;text-align:justify; padding:0;}
.colmarque strong {font-size : 1.1em;  font-weight:bold; font-style:italic; line-height:1.38em;/*18/15 */} /* pages des marques : texte en gras */
.colmarque p {margin:1em 0;}
article a {color:#848484; font-weight:bold; text-decoration:underline;}


/* Pages aux formats particuliers !
-------------------------------------------------------------------------------*/
h1.h1Presse {color:#000; font-size:85%; letter-spacing:-0.025em; text-transform:none; font-weight:normal; width:67%; border-bottom:solid 13px #1a171b; margin:0 0 85px 26%; height:15px; padding:165px 0 0 5px; vertical-align:bottom; background:url(images/bgH1Presse.png) no-repeat left bottom;}
#contact_presse a, #contact_carrieres a { color:#000; text-decoration:none; }
h1.h1Presse strong {margin-left:70px;}
.ie7 h1.h1Presse {line-height:1.2em; height:17px;}
h3 {width:67.189%; margin:20px 0 10px 4.2517%; border-bottom:solid 2px #c6c5c6; padding:0 0 0 22%; line-height:1em;font-size:85%;}
h3 strong {background:#000; color:#FFF; padding:0.05em 0 0 0.5em; width:20%; display:inline-block; font-weight:normal;text-transform: uppercase;}
.contentP {width:89.189%; margin:0 0 0 4.2517%; font-size:75%;}
.contentPL {width:24.5%; float:left; text-align:center;}
.contentPR {width:12.5%; float:left; text-align:center;}
.contentPC {float:left; width:63%; margin-bottom:20px;}
.ie7 .contentPC {float:left; width:62%}
.contentPC h4 {font-size:135%; font-weight:bold; border-left: solid 1em #000; text-transform:uppercase; line-height:1em; margin: 0.4em 0; padding-left:0.4em;}
.contentP h2 {font-size:135%; font-weight:normal;}
.contentP  a {color:#c00; text-decoration:none; font-weight:normal;}

.Carriere {color:#000; font-size:85%; letter-spacing:-0.025em; text-transform:none; font-weight:normal; width:67%; border-bottom:solid 13px #1a171b; margin:0 0 85px 26%; height:3.6em; padding:131px 0 0 5px; vertical-align:bottom; background:url(images/bgH1Carriere.png) no-repeat left bottom;}
.Carriere p {float:left; font-size:100%}
.Carriere p+p {margin:2.4em 0 0 80px;}

.contact {background:none; color:#000; font-size:85%; letter-spacing:-0.025em; text-transform:none; font-weight:normal; width:67%; border-bottom:solid 13px #1a171b; margin:0 0 0.5em 26%; height:2.6em; padding:144px 0 0 5px; vertical-align:bottom; background:url(images/bgH1Presse.png) no-repeat left bottom;}
.contact p {float:left; font-size:100%; margin:1.3em 0 0 180px;}

/* Form */
.fm-form fieldset { border:0; font-size: 85%;  margin-top:20px; }
.fm-form fieldset table td { padding-bottom:15px; vertical-align:middle }
.fm-form fieldset legend { display:none }
.fm-form fieldset label { text-align:right; width:350px; padding-right:10px; }
.fm-form fieldset input[type=text] { width:350px; padding:5px; }
.fm-form fieldset textarea { width:350px; height:100px; }
.fm-form fieldset div { height:20px; text-align:center }
.fm-form fieldset input.submit { padding:5px 10px; color:#FFF; background-color:#000;; border:0 }
.fm-form fieldset input.submit:active { background-color:#333 }


/* Pre-Home
-------------------------------------------------------------------------------*/
/*#preHome {
	background:#fff url(images/bgPreHome.png) repeat-x 0px -210px ; 
	vertical-align:bottom;
	padding:0; 
	margin:0; 
	width:100%;
	position:fixed;
	top:0;
	z-index:100;
	height:100%;
	}
#preHome img {
	position:absolute;
	bottom:0;
	margin:auto;
	width:100%;

}*/

#preHome {
	padding:0; 
	margin:0; 
	width:100%;
	z-index:100;
	height:100%;
	position:fixed;
	top:0;
	background:	#FFF;	
	}
	
#preHome .logo {
	height:65%; 
	width:25%;
	margin:0 auto; 
	position:relative;

}
#preHome .logo a {
	position:absolute;
	bottom:0;
	margin:auto;
	width:100%;
	display:block;
}
#preHome .logo a img {
	position:absolute;
	bottom:0;
}
#preHome .ombre {
	height:35%;
	width:100%;
	margin:auto;
	position:relative;
	background:url(images/bgPreHome.png) repeat-x; 
	text-align:center;
}
#preHome .ombre img {width:25%;}

#scroller { background:url('images/Chargement.gif') no-repeat center center }

/* 404
-------------------------------------------------------------------------------*/
.error404 #header {display:none;}
.error404 {background: url(images/bg404.jpg) no-repeat center top;}
.error404 #page, .error404 #page .content {background:none;}
.error404 #page .content  h2 {margin:130px 0 0 0;}
.error404 #page .content  p {margin:-40px 0 0 50%; font-size:1.3em;}
/* Media queries!
-------------------------------------------------------------------------------*/

/* Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */

@media screen and (max-width: 1100px) {
	
}
@media screen and (max-width: 800px) {
	
}
@media screen and (max-width: 400px) {
	
}



@media screen and (max-device-width: 480px) {
	
		
}

@media all and (orientation: portrait) {
		
		.content {
			margin: auto;
			width:100%;
		}
		header {padding: 20px 0 0 0;}
		header .content { margin:0 0.5%}
		
		header .colh1 {
			float: left;
			min-height: 100px;
			width: 25%;
		}
		header .colh2 {
			float: left;
			margin: 0 1% 0 1%;
			width: 73%;
		}
		
		
		header h1 a {height:193px; background-size:190px;}
		#page .content .col1 {
			background-size:190px auto;
		}
		
		.lang {margin:50px 0 31px 0;}
		
		
		
		/* Menu header */
		/*************************/
		header ul li a {
			padding:0 0.6em 0 1.1em; /*15/16  -  25/16 */
			height:0.9em; /*15/16 */
			margin-top:0em; /* 1/16 */
			font-size:1.2em;
		}
		header ul li a:hover, header ul li a:active   {
			height:1.2em; /* 18/16 */
			margin-top:0;
		}
		header ul li.current-menu-item a, header ul li.current_page_ancestor a   {
			font-weight:bold;
			height:1.2em; /* 18/16 */
			margin-top:0;
			background:url(images/black12.png) no-repeat left 7px;
			background-size:15px 15px;
		}
		header ul li + li {
			background:url(images/bgLiMenu.png) no-repeat left 8px;	
		}
		header ul li a:hover, header ul li a:active   {
			height:1.125em; /* 18/16 */
			margin-top:0;
		}
		header ul li a:hover   {
			font-weight:normal;
		}
		
		
		
		
		
		
		
		.espacePro a {
		
			font-size:1.1em;
			padding: 0 49px 5px 0;
		}
		#menu-marques { font-size:1.22em;}
		
		#menu-marques li a { line-height:1.2em; } 
		
		.col1 {
			margin-right: 2.1%;
			width: 24.35%;
		}
		#menu-marques li { margin-left:20.5%;}
		
		
		/* ESPACE PRESSE */
		h1.h1Presse {
			margin-left:29%;
			font-size: 120%;
			background: url("images/bgH1Presse.png") no-repeat 50px bottom;
			height:1em;
		}
		h1.h1Presse strong {
			margin-left: 90px;
		}
		
		/* Carriere */
		.Carriere {
			background: url("images/bgH1Carriere.png") no-repeat 40px bottom ;
			font-size: 100%;
			height: 4.3em;
			margin: 0 0 85px 29%;
		}
		.contact {
			font-size:100%;
			height:3em;
			margin: 0 0 85px 29%;
			background: url("images/bgH1Presse.png") no-repeat 30px bottom;
		}
		h3 {
			font-size: 95%;
			margin: 20px 0 10px 5.2517%;
			padding: 0 0 0 24%;
			width: 67.189%;
			line-height:1.5em;
		}
		.contentP {
			font-size: 95%;
			margin: 0 0 0 4.2517%;
			width: 95%;
		}
		.contentPL {
			width: 26.4%;
		}
		.contentPC {
			width:62%;
		}
		.contentPR {
			width: 11.6%;
		}
		.lesarticles {
			margin-left: 27.35%;
		}
		.lesarticles .article {float:none; width:90%}
		h6 {font-size:1em;}
		.negatif {
			clear: none;
			margin-left: 0;
			width: 90%;
		}
		.col2 {
			margin: 0;
			width: 100%;
		}
		h1 {
			margin:0; 
			padding:0 4.78%;
			font-size: 1.5em;
		}
		.col2 p {
			font-size:1.2em;
		}
		.colmarque strong {
			font-size: 1.2em;
		
		}
		.colmarque div {
			display: block;
			padding: 1% 5%;
			text-align: justify;
			vertical-align: bottom;
			width: 90%;
		}
		
		p.slogan {
			float: left;
			font-size: 1.7em;
			margin-right: 3%;
			margin-bottom:350px;
			width: 24.35%;
		}
		footer #menu-marques-footer {text-align:center; margin:0 6em;}
		footer #menu-marques-footer li {display:inline-block; float:none;}
		footer #menu-marques-footer a {height:80px;}
		footer #menu-marques-footer #menu-item-49 a {content: url(images/guyLarocheSmall2.png); background:none; width:168px;}
		footer #menu-marques-footer #menu-item-48 a {background:none; content:url(images/levisSmall.png);	width:149px;}
		footer #menu-marques-footer #menu-item-47 a {background:none; content:url(images/seikoSmall.png);	width:152px;}
		footer #menu-marques-footer #menu-item-52 a {background:none; content:url(images/agnesbSmall.png);	width:158px;}
		footer #menu-marques-footer #menu-item-46 a {background:none; content:url(images/zadigvoltaireSmall.png);	width:169px;}
		footer #menu-marques-footer #menu-item-51 a {background:none; content:url(images/ddpSmall.png);	width:138px;}
		footer #menu-marques-footer #menu-item-50 a {background:none; content:url(images/edenparkSmall.png);	width:164px;}
		footer #menu-marques-footer a img {width:100%}
		footer {
			background: url("images/bgFooter.jpg") repeat-x scroll left 10.5em transparent;
			padding-bottom:20px;
		}
		
		
		footer #menu-menu-footer li {
		
			font-size:1.5em;
			line-height: 0.8em;
			margin-top: 1.375em;
			padding: 0 0.625em;
			margin-bottom:0.5em;
		}
		footer small {
			font-size:95%;
		}
}
@media all and (orientation: landscape) {
	
}