/*
Main stylesheet:contains CSS normalization, base styles, typography with a vertical rhythm and some mobile-first media queries
Credit is left where credit is due
Much content and inspiration was taken from the normalize.css project:http://necolas.github.com/normalize.css/ and https://github.com/jonathantneal/normalize.css
*/
/* `HTML5 elements display-role
---------------------------------------- */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, dialog{display:block}
audio[controls], 
canvas, 
video{display:inline-block; *display:inline; zoom:1}

/* `Base structure
---------------------------------------- */
html{height:100%; font-size:100%; overflow-y:scroll; /* Force a scrollbar in non-IE */-webkit-overflow-scrolling:touch; /* Native iOS5 inertia scrolling:http://ow.ly/5qmPD */-webkit-text-size-adjust:100%; /* Remove iOS text size adjust without disabling user zoom */}
body{margin:0; min-height:100%}
/* Font settings */
body, button, input, select, textarea{font:14px/1.625 Helvetica,Arial,sans-serif; *font-size:1em; /* IE7 and older:IE can't resize px based text and most mobiles don't default the text to 16px */color:#333; /* Black on white is too much contrast,#333 is a lot better */}
p, blockquote, q, pre, address, hr, code, samp, dl, ol, ul, form, table, fieldset, menu, h1, h2, h3, h4, h5, h6, img{margin:0;padding:0;}

/* `Headings and small
---------------------------------------- */
/* Font sizes are based on the golden ratio of 16. See this for the modular scale:http://ow.ly/5jGl6. Line-heights and margins are adjusted to keep a 26px (1.625em) vertical rhythm across all elements */
h1, h2, h3, h4, h5, h6{font-family:Helvetica, Arial, sans serif;font-size:1em; font-weight:normal; color:#111; /* More contrast than body text for headings */}
small{font-size:0.625em; /* 10px */margin:0 0 2.6em}

/* `Code
---------------------------------------- */
/* Allows line wrapping of 'pre' */
pre{white-space:pre; white-space:pre-wrap; word-wrap:break-word}
pre, code, kbd, samp{font:1em/1.625em Menlo,Consolas,'DejaVu Sans Mono',Monaco,monospace}

/* `Tables
---------------------------------------- */
table{border-collapse:collapse; border-spacing:0}
th{text-align:left;}
tr, th, td{}
th {}

/* `Forms
---------------------------------------- */
form{margin:0}
fieldset{border:0; padding:0}
textarea{overflow:auto; vertical-align:top}
legend{*margin-left:-7px}

button, input, select, textarea{vertical-align:baseline; *vertical-align:middle; /* IE7 and older */}
button, input{line-height:normal; *overflow:visible}
button, input[type="button"], input[type="reset"], input[type="submit"]{cursor:pointer; -webkit-appearance:button}
input[type="checkbox"], input[type="radio"]{box-sizing:border-box}
input[type="search"]{-webkit-appearance:textfield; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box}
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
button::-moz-focus-inner, input::-moz-focus-inner{border:0; padding:0}

/* `Quotes
---------------------------------------- */
blockquote, q{quotes:none}
blockquote:before, blockquote:after, q:before, q:after{content:''; content:none}
blockquote, q, cite{font-style:italic}
blockquote{padding-left:1.625em; border-left:3px solid #ccc}
blockquote >p{padding:0}

/* `Lists
---------------------------------------- */
ul, ol{list-style-position:inside; padding:0}
li ul, li ol{margin:0 1.625em}
dl dd{margin-left:1.625em}

/* `Hyperlinks
---------------------------------------- */
a{text-decoration:none; color: #000; outline: none;}
a:hover{text-decoration:underline; color: #000;}
a:focus{outline:thin dotted}
/* Better CSS outline suppression:people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active{outline:none}
a:visited {text-decoration:none;}

/* `Visual media
---------------------------------------- */
figure{margin:0}
object, embed, video{max-width:100%; /* Consider this first:http://unstoppablerobotninja.com/entry/fluid-images/ */_width:100%; /* If the image/video is smaller than the container,change the 100% to an absolute value */}
img{border:0; -ms-interpolation-mode:bicubic; /* Improve IE's resizing of images:http://css-tricks.com/ie-fix-bicubic-scaling-for-images */}
/* Corrects overflow displayed oddly in IE9 */
svg:not(:root){overflow:hidden}

/* `Abbreviations
---------------------------------------- */
abbr[title], dfn[title]{border-bottom:1px dotted #333; cursor:help}

/* `Marked/inserted and deleted text
---------------------------------------- */
ins, mark{text-decoration:none}
mark{background:#ff0}
ins{background:#ff9}
del{text-decoration:line-through}

/* `Others
---------------------------------------- */
strong, b, dt{font-weight:bold}
dfn{font-style:italic}
var, address{font-style:normal}
/* Position 'sub' and 'sup' without affecting line-height:gist.github.com/413930 */
sub, sup{font-size:0.625em; line-height:0; position:relative; vertical-align:baseline}
sup{top:-0.5em}
sub{bottom:-0.25em}
img.left { float: left; display: block; margin: 0 20px 20px 0; }

/* `Clearfix hack:http://nicolasgallagher.com/micro-clearfix-hack/
---------------------------------------- */
.cf:before, .cf:after{content:""; display:table}
.cf:after{clear:both}
.cf{*zoom:1}


/* Design Style
----------------------------------------------------------------------------------------------------------------------------------- */

/* FONTS */

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

}

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

}

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

}


/* COMMON */

.fright {float:right;}
.fleft {float:left;}
.clearFloat {clear:both;}
.container {width:972px;margin:auto;}
html, body {margin:0;padding:0;background:url(/images/body-bg.jpg) repeat-x #4a4a4a;}

/* HOME */

#boite-content {
	background:url(/images/bg-boite-content.jpg) repeat-y left;
	min-height:1100px;
	-moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
	padding-bottom:15px;	
}

#logo {
	width:307px;
	height:165px;
	position:absolute;
	display:block;
	margin-left:-27px;
	z-index:100;
}

#slogan {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:16px;
	color:#424144;
	line-height:16px;
	padding: 15px 0px 7px 0;
	text-align:right;
}

#colLeft {
	padding-top:140px;
	width:208px;
	padding:140px 20px 0 20px;
}

#colRight {
	width:680px;
	padding:15px 0 32px 32px;
}

#nouvelles {
	width:420px;
	padding:15px;
	border:1px solid #ced644;
}

#nouvelles .date {
	color:#8e9808;
	font-size:14px;
	line-height:14px;
	margin-bottom:15px;
}

#nouvelles p {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#4a4a4a;
	line-height:18px;
}

#nouvelles a, {
	color:#8e9808;
	text-decoration:underline;
}

#nouvelles a:hover {text-decoration:none;}

#social {
	width:211px;
	text-align:right;
}

#social .brevendeurs {width:220px;text-align:right;display:block;}

#socialicon {padding-right:40px;}
#socialicon img {padding-left:5px;}

#socialiconFooter {padding-right:0;padding-top:15px;}
#socialiconFooter img {padding-left:5px;}

#panier {padding:15px 40px 0 0;}
#panier a {
	color:#8e9808;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	text-decoration:underline;
	line-height:30px;
}
#panier a:hover {text-decoration:none;}

#bannerCadre {
	width:636px;
	height:188px;
	background:url(/images/bg-banner.jpg) top left no-repeat;
	padding:8px 0 0 8px;
	-moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);	
}
#selectorContainer {width:643px;padding-top:10px;}

.grosbouton a {
	display:block;
	color:#4c4c4c;
	font-size:14px;
	line-height:18px;
	font-family: 'FuturaStdLight';
}
.grosbouton a:hover {color:#8e9808;text-decoration:none;}

.grosboutontitre {
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:18px;
	line-height:20px;
	text-transform:uppercase;
}
.grosbouton img {
	margin:0 0px 0px 0;
}

.line {border-bottom:1px dashed #4c4c4c;padding-top:15px;margin-bottom:15px;}

#colLeft .boutonDesign a {
	background:url(/images/colRightBigButton.png) no-repeat top left;
	width:219px;
	height:47px;
	display:block;
	margin-left:-31px;
	font-family: 'FuturaStdBook';
	font-size:16px;
	color:#1a181c;
	padding:8px 0 0 35px;
	text-transform:uppercase;
} 

#colLeft h1 a {
	font-size:16px;
	color:#4c4c4c;
	font-family: 'FuturaStdHeavy';
	line-height:18px;
	padding-left:22px;
	padding-bottom:6px;
	display:block;
}

#colLeft h1 img {margin-right:15px;}

#colLeft ul {list-style:none;}

#colLeft li a {
	font-size:16px;
	color:#8e9808;
	font-family: 'FuturaStdLight';
	line-height:24px;
	padding-left:22px;
	display:block;
}

#colLeft li a:hover, #colLeft li a.here {
	background:url(/images/colleft-li-over.jpg) no-repeat top left;
	text-decoration:none;
	color:#4c4c4c;
}

#soumission {margin-top:20px;margin-bottom:20px;}

.colFooter {
	width:205px;
	border-right:1px dashed #919191;
	min-height:212px;
	padding:20px;
	float:left;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#fff;
	line-height:18px;
	margin-top:20px;
	margin-bottom:20px;	
}
.colFooterLast {
	width:170px;
	min-height:212px;
	padding:20px;
	float:left;
	text-align:right;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#fff;
	line-height:18px;
	margin-top:20px;
	margin-bottom:20px;	
}

.colFooter h1, .colFooterLast h1 {
	color:#c5d015;
	font-size:18px;
	font-family: 'FuturaStdHeavy';
	line-height:18px;
	padding-bottom:25px;
	display:block;
	text-transform:uppercase;
}

.colFooter a {color:#c5d015;text-decoration:underline;}
.colFooter a:hover {text-decoration:none;}

.colFooter ul {
	list-style-position:outside;
	list-style-image:url(/images/li-footer.png);
	margin-left:13px;
}
.colFooter li {
	line-height:18px;
}

/* Zone contenu */

#txt {padding-left:10px 15px 0 0;margin-top:25px;}
#resume {margin-top:20px;}

.col1 {width:400px;float:left;}
.col2 {width:235px;float:right;margin-right:33px;}
.centpourcent {margin-right:33px;}

#txt h1 {
	color:#c6d017;
	font-size:20px;
	line-height:20px;
	font-family: 'FuturaStdHeavy';
	margin-bottom:25px;
	text-transform:uppercase;
}

#txt h2 {
	color:#4a4a4a;
	font-size:16px;
	line-height:16px;
	font-family: 'FuturaStdHeavy';
	margin-bottom:10px;
	border-bottom:1px dashed #4c4c4c;padding-bottom:5px;margin-bottom:15px;
}

#txt h3 {
	color:#4c4c4c;
	font-size:16px;
	line-height:16px;
	font-family: 'FuturaStdHeavy';
	margin-bottom:5px;
}

#txt p {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#000;
	line-height:18px;
	margin-bottom:15px;
}


/* Boite temoignage */

.temoignage {margin-top:20px;width:429px;}

.temoignage-txt {
	background:url(/images/boite-temoignage/middle.png) repeat-y top left;
	padding:25px 30px 5px 15px;
	min-height:140px;
}

#txt .temoignage-txt p {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-style:italic;
	color:#000;
	line-height:16px;
	margin-bottom:15px;
	margin-left:45px;
}

#txt .temoignage-bande {
	width:95px;
	height:95px;
	position:absolute;
	z-index:100;
	display:block;
	margin: -5px 0 0 -5px;
}

#txt .signature {text-align:right;font-weight:bold;}

/* Résumé */

#resume {
	border:1px solid #ced644;
	padding:5px 5px 30px 5px;
}

#resume h1 {
	color:#4c4c4c;
	font-size:16px;
	line-height:16px;
	font-family: 'FuturaStdHeavy';	
	background:#c5d015;
	padding:8px 10px 8px 10px;
	margin-bottom:15px;
}

#resume p {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#000;
	line-height:18px;
	padding:0 7px 0 7px;
}


/* boutons */

.unBouton a {
	background:url(/images/boutons/bg.jpg) repeat-x bottom left #c4cf15;
	color:#000;
	font-family: 'FuturaStdBook';
	font-size:15px;
	line-height:15px;
	
	-moz-border-radius: 10px;
	border-radius: 10px;
	-Webkit-border-radius: 10px; 
		
	text-transform:uppercase;
	-moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
	display:block;
	padding:8px;
	text-align:center;
	letter-spacing:-1px;
	float:left;
}

.unBouton a:hover {
	color:#fff;
	text-decoration:none;
	background:url(/images/boutons/bg-over.jpg) repeat-x bottom left #a4af13;
}

#boite-resume .unBouton {
	width:175px;
	position:absolute;
	margin-top:-18px;
	margin-left:45px;
}


/* form */

select {margin-bottom:0px;}


/* menu */

#mainmenu {
	margin-top:40px;
	padding-left:30px;
}

#mainmenu ul {list-style:none;}
#mainmenu li {float:left;}
#mainmenu li a {
	display:block;
	background:url(/images/bg-bouton.jpg) repeat-x #b4be14;
	
	-moz-border-radius: 15px 15px 0 0;
	border-radius: 15px 15px 0 0;
	-Webkit-border-radius: 15px 15px 0 0;
	
	text-align:center;
	text-transform:uppercase;
	color:#1a181c;
	font-family: 'FuturaStdBook';
	font-size:15px;
	line-height:15px;
	margin-right:5px;
	-moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
	min-width:126px;
	text-decoration:none;	
	text-shadow:1px 1px 1px rgba(0, 0, 0, 0.5);
	padding:10px 5px 7px 5px;
}
#mainmenu li a:hover {
	background:#424144;
	color:#fff;
	text-decoration:none;
}


.tblCommandes{
	margin:0 auto;
	background-color:white;
	border-collapse:collapse;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	width:100%;
	border:solid 1px black;
}

.tblCommandes th{
	background-color:#c6d017;
	padding:5px;
	color:#000000;
	font-size:12px;
		border:solid 1px black;
}

.tblCommandes th a{
	color:#000000;
	text-decoration:none;
}
.tblCommandes th a:visited, .tblCommandes td a:visited{
	color:#00F;
	text-decoration:none;
}
.tblCommandes td{
	padding:5px;
	border:solid 1px black;
}



.tblMaitre{
	width:687px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	margin-bottom:7px;
	border-collapse:collapse;
}

.tblProduit{
	width:100%;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	margin-bottom:7px;
	border-collapse:collapse;
	text-align:left;
}

.tblMaitre2{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	margin-bottom:7px;
	border-collapse:collapse;
}

.tblMaitre td, .tblMaitre2 td, .tblProduit td {
	padding:4px;
}

.tblMaitre2 th{
	padding:4px;
	border-bottom:solid 1px black;
}

.tblMaitre a, .tblMaitre2 a{
	color:#8E9808;
	text-decoration:none;
}

.tblMaitre a:hover, .tblMaitre2 a:hover{
	text-decoration:underline;
}

.tblMaitre input[type=text], .tblMaitre input[type=password], .tblMaitre select, .tblMaitre textarea{
	width:540px;
	border: solid 2px #d1d1d1;
	padding:2px;
}

.tblMaitre2 input[type=text], .tblMaitre2 select, .tblMaitre2 input[type=password], .tblMaitre2 textarea {
	border: solid 2px #d1d1d1;
	padding:2px;
}

div.autocomplete {
  position: absolute;
  width: 350px;
  background-color: white;
  border: 1px solid #888;
  margin: 0px;
  padding: 0px;
}
 
div.autocomplete ul {
  width:350px;
  background-color: white;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  max-height: 20em;
  overflow: auto;
}
 
div.autocomplete ul li.selected {
    background-color: #ffb;
}
 
div.autocomplete ul li {
  list-style-type:none;
  display: block;
  margin: 0;
  padding: 2px;
  cursor: pointer;
}

/* TABLE DESIGN DYNAMIQUE PRINCIPALE */
.divscroll {
	height: 230px;
	width: 97%;
	overflow: auto;
	border: 1px solid #666;
	background-color: #ffffff;
	padding: 8px;
}

#box-SelectProduit {
	border: dashed 1px #4a4a4a;
}
#SelectProduit {
	border: none;
	padding:15px;
	padding-top:30px;
	height:250px;
	background-color:#4a4a4a;	
}
#SelectProduit select{
	width:100%;
	padding-left:25px;
}
#Boite_Description{
	color:#FFF;
	font-family: 'FuturaStdHeavy';
	font-size:14px;
	padding-left:20px;
	padding-right:15px;
}

.messageBordure1 {
  border: 3px solid #636161;
  width:100%;
  margin-bottom:20px;
}

.messageBordure2 {
  border: 1px solid #333333;
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
  font-weight:bold;
  width:100%;
}

.coin_select_buy_now{
	position:absolute;
	z-index:10;
}

.btnAction{
	background:url(/images/boutons/bg.jpg) repeat-x bottom left #c4cf15;
	color:#000;
	font-family: 'FuturaStdBook';
	font-size:15px;
	line-height:15px;
	
	-moz-border-radius: 10px;
	border-radius: 10px;
	-Webkit-border-radius: 10px; 
		
	text-transform:uppercase;
	-moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
	padding:8px;
	text-align:center;
	letter-spacing:-1px;
}