/*
	Frameless			<http://framelessgrid.com/>
	by Joni Korpi 		<http://jonikorpi.com/>
	licensed under CC0	<http://creativecommons.org/publicdomain/zero/1.0/>
*/


//
// Configuration
//

@font-size: 16; 		// Your base font-size in pixels
@em: @font-size*1em;	// Shorthand for outputting ems, e.g. "12/@em"

@column: 312;	// The column-width of your grid in pixels
@gutter: 8;	// The gutter-width of your grid in pixels



@highlight: #22ffff;
@emphasis: #cccccc;


//
// Column-widths in variables, in ems
//

 @1cols: ( 1 * (@column + @gutter) - @gutter) / @em; @1col: @1cols;
 @2cols: ( 2 * (@column + @gutter) - @gutter) / @em;
 @3cols: ( 3 * (@column + @gutter) - @gutter) / @em;
 



//
// Column-widths in a function, in ems
//


.width (@cols:1) {
	width: (@cols * (@column + @gutter) - @gutter) / @em;
}


/*
	Margin, padding, and border resets
	except for form elements
*/

body, div,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section {
	margin: 0;
	padding: 0;
	border: 0;
}


/*
	Consistency fixes
	adopted from http://necolas.github.com/normalize.css/
*/

article, aside, details, figcaption, figure, 
footer, header, hgroup, nav, section, audio, canvas, video {
	display: block;
}


html {
	height: 100%; 
	-webkit-text-size-adjust: 100%; 
	-ms-text-size-adjust: 100%;
        
}

	body {min-height: 100%; font-size: 100%;}

sub, sup {
	font-size: 75%; 
	line-height: 0; 
	position: relative; 
	vertical-align: baseline;
}

	sup {top: -0.5em;}
	sub {bottom: -0.25em;}

pre {
	white-space: pre; 
	white-space: pre-wrap; 
	word-wrap: break-word;
}

b, strong {font-weight: bold;}
abbr[title] {border-bottom: 1px dotted;}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

a img, img {
	-ms-interpolation-mode: bicubic;
	border: 0;
}

input, textarea, button, select {
	margin: 0;
	font-size: 100%;
	line-height: normal;
	vertical-align: baseline;
}

	button,
	html input[type="button"], 
	input[type="reset"], 
	input[type="submit"] {
	    cursor: pointer;
	    -webkit-appearance: button;
	}
	
	input[type="checkbox"],
	input[type="radio"] {
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
			 -o-box-sizing: border-box;
			-ms-box-sizing: border-box;
				box-sizing: border-box;
	}
	
	textarea {overflow: auto;}


/*
	These are easy to forget
*/

::selection {
	background: red;
	color: white;
}
::-moz-selection {
	background: red;
	color: white;
}

img::selection {
	background: transparent;
}
img::-moz-selection {
	background: transparent;
}

body {
	// -webkit-tap-highlight-color: rgba(255,0,0, 0.62);
}
//ici mettre le css qui diffère


/*
	Style overrides for IE6-8
	http://jonikorpi.com/leaving-old-IE-behind/
*/




/*
	An easy way to zoom your entire layout in or out (as long as it's set in ems).
	Just change the media queries to activate them.
	Assuming your base font-size is 16:
	- the first one zooms out by a factor of (16-2)/16 = 0.875
	- the second one zooms in by a factor of (16+2)/16 = 1.125  
*/


/*
	Full page zooms
	0.882352941 0.941176471 1.058823529 1.117647059
*/




/*
	Mobile layout 
	240–479 px
	Zoomed out below 320 px
*/

li {
	padding-left:5px;
}

@media screen and (min-width: @1cols) {
	
	.main{width:@1cols;}
	
        .bandeau{
		width:100%;
		height:550px;
		background-color: #45454e;
		opacity: 1.0;
	}
	
	.imgBandeau{
		left:15px;
	}
	
	.imgfontmenu, .imgfontmenu2{
		display:block;
		height:550px;
	}
	.fond-noir{
		height:550px;
	}
	
	.container-contact{
		top: 310px;
		left:15px;
	}
	
	.contient-gris{
		top: 130px;
		left: 0px;
		width: 100%;
		height: 65px;
		display: none;
	}
	
	h1 {
		left: 15px;
		top: 134px;
		width: 282px;
		height: auto;
		font-size: 40px;
		color: #fcea0d;
		line-height: 40px;
		margin: 0;
	}
	
	.menu-haut {
		top: 185px;
		left: 15px;
		width: 100%;
		height: 120px;
	}
	
	.fleche-droit {
		left: 92.4%;
	}
	
	.trait {
		position: relative;
		float: left;
		width: 94%;
		height: 2px;
	}
	.containerfontmenu {
		height:551px;
	}
	
	.imgPanier {
		width:50px;
		height:38px;
	}
	.detailPanier {
		font-size:12px;
		line-height:38px;
		width:100%;
		margin:7px 0px 0 0px;
	}
	.editQte, .editDel {
		width:33px;
		height:38px;
		border-width: 3px;
		line-height:35px;
		font-size:12px;
		margin-right:2px;
	}
	.editDel{
		font-size:13px;
	}
	.subprod2{
		margin-right: 5px;
	}
}



/* 
	Tablet layout 
	600-911 px
	Zoomed in above 600 px
*/

@media screen and (min-width: @2cols) {
	.detailPanier {
		font-size:12px;
		line-height:38px;
		width:98%;
		margin:7px 0px 0 0px;
	}
	.subprod2{
		margin-right: 15px;
	}

}



@media screen and (min-width: @3cols)  {
	.main{width:995px;}
	.bandeau{
		width:100%;
		height:407px;
		background-color: transparent;
		opacity: 1;
	}
	.imgBandeau{
		left:0;
	}
	.imgfontmenu, .imgfontmenu2{
		display:block;
		height:407px
	}
	
	.fond-noir{
		height:407px;
	}
	
	.container-contact{
		top: 170px;
		left:0;
	}
	
	.contient-gris{
		top: 0;
		left: 300px;
		width: 691px;
		height: 141px;
		box-shadow: 2px 18px 12px #000;
		display: block;
	}
	
	h1 {
	
		left: 300px;
		top: 0;
		width: 705px;
		height: 125px;
		font-size: 120px;
		color: #fcea0d;
		line-height: 120px;
	}
	
	.menu-haut {
		top: 135px;
		left: 0;
		width: 100%;
		height: 40px;
	}
	
	.fleche-droit {
		left: 96.5%;
	}
	
	.trait {
		width: 97%;
	}
	.containerfontmenu {
		height:408px;
	}

	.imgPanier {
		width:133px;
		height:100px;
	}
	.detailPanier {
		font-size:20px;
		line-height:100px;
		width:95%;
		margin: 20px 10px 0 10px;
	}
	.editQte, .editDel {
		width:80px;
		height:99px;
		border-width: 5px;
		line-height:99px;
		font-size:16px;
		margin-right:7px;
	}
	.editDel{
		font-size:17px;
	}
	
	.subprod2{
		margin-right: 31px;
	}
}