/*  Feuille de styles
 *poterie des riailles
 */

/*

	HTML5 Reset :: 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
	
	Modified for use on responsive websites by Nathan Leigh Davis http://www.nathanleighdavis.com/

*/
	
	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: 0px;
	    padding: 0px;
	    border: 0px;
	    outline: 0px;
	    font-size: 100%;
	    vertical-align: baseline;
	    background: transparent;
	}                                   
	body {
	    font-size:100%;
	}
	article, aside, figure, footer, header, hgroup, nav, section {
	    display: block;
	    padding:0px;
	    margin:0px;
	}
	/* Responsive images and other embedded objects */
	img, object, embed {
	    max-width: 100%;
	}
	/* force a vertical scrollbar to prevent a jumpy page */
	html {
	    overflow-y: scroll;
	}
	ul {
	    list-style: none;
	}
	blockquote, q {
	    quotes: none;
	}
	blockquote:before, blockquote:after, q:before, q:after {
	    content: '';
	    content: none;
	}
	a {
	    margin: 0; 
	    padding: 0; 
	    font-size: 100%; 
	    vertical-align: baseline; 
	    background: transparent;
	}
	del {
	    text-decoration: line-through;
	}
	abbr[title], dfn[title] {
	    border-bottom: 1px dotted #000;
	    cursor: help;
	}
	/* tables still need cellspacing="0" in the markup */
	table {
	    border-collapse: collapse;
	    border-spacing: 0;
	}
	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 #ccc;
	    margin: 1em 0;
	    padding: 0;
	}
	input, select {
	    vertical-align: middle;
	}
	pre {
	    white-space: pre; /* CSS2 */
	    white-space: pre-wrap; /* CSS 2.1 */
	    white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
	    word-wrap: break-word; /* IE */
	}
	input[type="radio"] {
	    vertical-align: text-bottom;
	}
	input[type="checkbox"] {
	    vertical-align: bottom;
	}
	select, input, textarea {
	    font: 100% sans-serif;
	}
	table {
	    font-size: inherit; font: 100%;
	}
	/* Accessible focus treatment */
	a:hover, a:active {
	    outline: none;
	}
	strong, th {
	    font-weight: bold;
	}
	td, td img {
	    vertical-align: top;
	} 
	/* Make sure sup and sub don't screw with your line-heights */
	sub, sup {
	    font-size: 75%;
	    line-height: 0; 
	    position: relative;
	}
	sup {
	    top: -0.5em;
	}
	sub {
	    bottom: -0.25em;
	}
	/* standardize any monospaced elements */
	pre, code, kbd, samp {
	    font-family: monospace, sans-serif;
	}
	/* 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;
	}
	/*  j.mp/webkit-tap-highlight-color */
	a:link {
	    -webkit-tap-highlight-color: #ff3333;
	} 
	ins {
	    background-color: #ff3333;
	    color: #fff;
	    text-decoration: none;
	}
	mark {
	    background-color: #ff3333;
	    color: #fff;
	    font-style: italic;
	    font-weight: bold;
	}
	input[type="text"], input[type="password"] textarea {
	    -webkit-appearance: none;
	}

/* =Misc
------------------------------------------- */

	a {
		color: #e54003;
		text-decoration: none;
		border-bottom: 1px solid #e54003;
		transition: border-color 0.3s ease;
		-moz-transition: border-color 0.3s ease;
		-o-transition: border-color 0.3s ease;
		-webkit-transition: border-color 0.3s ease;
		outline: none !important;
	}
	
	a:hover, a:focus {
		border-color: transparent !important;
	}
	
	p {
		margin: 5px 0;
	}
	
	.hidetext {
		margin: 0;
		padding: 0;
		width: 0;
		height: 0;
		font-size: 0;
		line-height: 0;
		text-indent: -9999px;
		display: block;
	}
	
/* =Maintenance 
------------------------------------------- */
	
	.maintenance {
		background: black;
		color: white;
		text-align: center;
	}

	.maintenance h1 {
		padding: 50px 0;
		font-size: 25px;
	}

/* =Fonts
------------------------------------------- */

	@font-face{ font-family: CarterOneRegular; font-style: normal; font-weight: normal; src: url(/fonts/carterone-webfont.eot), url(/fonts/carterone-webfont.eot?#iefix) format("embedded-opentype"), url(/fonts/carterone-webfont.woff) format("woff"), url(/fonts/carterone-webfont.ttf) format("truetype"), url(/fonts/carterone-webfont.svg#CarterOneRegular) format("svg"); }
	 
	body {
		font: 14px/1.6em Ubuntu, arial, helvetica, sans-serif;
		color: black;
	}
	
		h1, h2 {
			font: 45px/1.25em "CarterOneRegular", arial, helvetica, sans-serif;
		}
		
		@media screen and (max-width: 1024px) {
			h1 {
				font-size: 35px;
				line-height: 1.25em;
			}
		}
		
		@media screen and (max-width: 320px) {
			p, dl {
				font-size: 13px;
				line-height: 1.55em;
			}
		}

/* =Layout
------------------------------------------- */
	 
	body {
		background: white;
		border-top: 10px solid white;
	}
	
/* =Banner
-------------------------------------------- */

	#banner {
		width: 169px;
		height: 100px;
		background: url('(EmptyReference!)') top center no-repeat;
		position: absolute;
		top: 10px;
		left: 5%;
		z-index: 4;
	}
	
	@media screen and (max-width: 450px) {
		#banner {
			width: 100%;
		}
	}
		
		#banner h1 {
			padding-top: 25px;
			font: 12px/1.6em Ubuntu, arial, helvetica, sans-serif;
			color: black;
			text-align: center;
			text-transform: uppercase;
		}
		
			#banner h1 a { margin: 0 auto 6px; width: 169px; height: 19px; background: url(images/poterie-petit.png) no-repeat left top; border-style: none; }
			
			#banner h1 a:hover, #banner h1 a:focus {
				border: none;
			}

/* =Products
------------------------------------------- */

	#products {
		background: white url(images/poterie-footer-top-background.png) repeat-x left bottom;
	}
	
		#products article {
			margin: 0 auto;
			width: 90%;
			max-width: 980px;
			position: relative;
		}
		
			.description {
				text-align: center;
				position: absolute;
				top: 250px;
				right: 0;
				z-index: 3;
			}
			
			@media screen and (max-width: 800px) {
				.description {
					padding-bottom: 100px;
				}
			}
			
				.description header {
					margin: 0 auto 30px;
					padding: 35px 5px 30px 0;
					width: 380px;
					
				}
				
				@media screen and (max-width: 450px) {
					.description, .description header {
						width: auto;
					}
				}
				
				#hopeful header {
					
				}
				
				.description h1 {
					padding-bottom: 25px;
					background: url(images/poterie-decoration-border.png) bottom center no-repeat;
					color: black;
					text-shadow: 0 2px #ee8661;
				}
				
				#hopeful .description h1 {
					background-image: url(images/poterie-decoration-border.png);
					text-shadow: 0 2px #0064f8;
				}
			
					.description h1 span {
						font-size: 60px;
						line-height: 1em;
						text-transform: uppercase;
						color: white;
						word-wrap: break-word;
						text-shadow:
							1px 1px black,
		               2px 2px black,
		               3px 3px black,
		               4px 4px black,
		               5px 5px black;
		            display: block;
					}
					
					@media screen and (max-width: 400px) {
						.description h1 {
							font-size: 20px;
						}
						.description h1 span {
							margin-bottom: 5px;
							font-size: 35px;
							text-shadow:
								1px 1px black,
			               2px 2px black,
			               3px 3px black;
						}
					}
					
				.description p, .description dl {
					margin: 20px auto;
					width: 300px;
				}
				
				@media screen and (max-width: 400px) {
					.description p, .description dl {
						margin: 10px auto;
						width: auto;
					}
				}
				
				.reward a {
					margin-top: 20px !important;
					padding-top: 40px;
					background: url(../Test%20pour%20mobile/images/ipa-reward-pic.png) top center no-repeat;
					font-size: 12px;
					color: #fd5;
					line-height: 1.45em;
					text-transform: uppercase;
					border: none;
					display: block;
				} 
				
				.description dl {
					margin: 0 auto;
				}				
				
					.description dt {
						padding-right: 5px;
						font-weight: bold;
						text-transform: uppercase;
					}
				
					.description dt, .description dd {
						display: inline;
					}
			
			.packshot {
				width: 66.5%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 2;
			}	
			
			@media screen and (max-width: 800px) {	
				.description, .packshot {
					margin: 0 auto;
					width: 90%;
					position: static;
				}
			}
			
			@media screen and (max-width: 450px) {	
				.packshot {
					margin-top: 120px;
				}
			}
			
	/* =Flexslider
	------------------------------------------- */
	
		/* Navigation */
			
		.flexslider nav a {
			width: 47px;
			height: 88px;
			background: top left no-repeat;
			font-size: 0;
			line-height: 0;
			text-indent: -9999px;
			border-bottom: none;
			cursor: pointer;
			display: block;
			position: absolute;
			top: 35%;
			z-index: 4;
		}
		
		.flexslider nav .prev {
			background-image: url(images/poterie-slider-prev-button.png);
			left: 0;
		}
		
		.flexslider nav .next {
			background-image: url(images/poterie-slider-next-button.png);
			right: 0;
		}
		
		.flexslider nav a:active {
			top: 35.25%;
		}
		
			@media screen and (max-width: 400px) {
				.flexslider nav a {
					width: 29px;
					height: 59px;
					top: 20%;
				}
				.flexslider nav .prev {
					background-image: url(images/poterie-slider-prev-small-button.png);
				}
				.flexslider nav .next {
					background-image: url(images/poterie-slider-next-small-button.png);
				}
				.flexslider nav a:active {
					top: 20.25%;
				}
			}
			 
		/* FlexSlider Necessary Styles */
		.flexslider {
			margin: 0;
			padding: 0;
			width: 100%;
			position: relative;
			overflow: hidden;
			zoom: 1;
		}
			
			.flexslider .slides > li {
				height: 1000px;
				position: relative;
				display: none; /* Hide the slides before the JS is loaded. Avoids image jumping */
			}
			
			@media screen and (max-width: 800px) {
				.flexslider .slides > li {
					height: auto;
				}
			}
		
/* =Story
------------------------------------------- */

	#story {
		background:
			url(images/poterie-asides-top-background.png) bottom left repeat-x,
			url(images/poterie-footer-background.png) top left,
			#e6e6e6 url(images/poterie-asides-top-background.png)   left bottom;
		color: #333;
	}
	
		#story div {
			margin: 0 auto;
			padding: 25px 0 80px;
			width: 90%;
			max-width: 980px;
		}
			
			#story h1 {
				margin: -50px 0 25px;
				width: 252px;
				height: 144px;
				background: url(images/poterie-logo.png) top left no-repeat;
			}
			
			#story figure {
				margin: -35px 0 0 25px;
				float: right;
			}
			
			@media screen and (max-width: 500px) {
				#story figure {
					margin: 0;
					float: none;
				}
			 }
			
/* =Asides
------------------------------------------- */
		
	#asides {
		margin: 50px auto 0;
		width: 90%;
		max-width: 980px;
		color: #333;
		overflow: hidden;
	}
	
		aside {
			margin-right: 50px;
			padding: 30px 40px;
			background:
				url(images/poterie-aside-end-border.png) top left no-repeat,
				url(images/poterie-aside-top-border.png) top left repeat-x,	
				url(images/poterie-aside-right-border.png) top right repeat-y,				
				url(images/poterie-aside-bottom-border.png) bottom right repeat-x,
				url(images/poterie-aside-left-border.png) bottom left repeat-y,
				#e6e6e6 url(images/poterie-aside-end-border.png)   left top url(images/poterie-aside-end-border.png)   left top url(images/poterie-aside-end-border.png)   left top;
			float: left;
		}
		
			aside h2 {
				margin-bottom: 20px;
				font-size: 30px;
			}
			
		@media screen and (max-width: 800px) {
			aside {
				padding: 25px 30px;
			}
			aside h2 {
				margin-bottom: 15px;
				font-size: 25px;
			}
		}
		
		#warning {
			width: 30%;
		}
		
		#about {
			width: 40%;
		}
		
		@media screen and (max-width: 1024px) {
			#warning, #about {
				margin: 0 auto 50px;
				width: auto;
				float: none;
			}
		}
		
			aside figure {
				margin: 0 0 5px 15px;
				float: right;
			}
			
			@media screen and (max-width: 400px) {
				#about figure {
					margin: 15px 0;
					float: none;
				}
			}
			
/* =Footer
------------------------------------------- */

	#footer {
		padding: 50px 5%;
		text-align: center;
		clear: left;
	}
	
		#footer p, #footer p a {
			font-size: 12px;
			color: #999;
			border: none;
		}
		
		@media screen and (max-width: 400px) {
			#footer p img {
				margin: 5px auto 0;
				width: 60px;
				display: block;
			}
		}