/* @override http://jjscider.co.uk/css/style.css */

/* ******************************** 
design for	Phillip Maggs, JJ's Cider
© 2012

author:	Prisca Schmarsow
URL:	graphpiceyedea.co.uk

credits:
gradient	colorzilla.com/gradient-editor/

/////////////////////////////////

	resets
	typography
1- 	header
2-	nav
3-	content
4-	contact form
5-	footer
6-	media queries

/////////////////////////////////

COLOURS

445800	dark green		text
b0d104	medium green	borders (border image fallback)

44C3EA	bright blue		active link

E88900	orange			form error
	
******************************** */


/* ******************************** 
thanks, Eric :-)
http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
******************************** */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1em;
	font-weight: normal;
	line-height: 1.4;
	font-family: 'Georgia', Times New Roman, serif;
	color: #445800;
	text-rendering: optimizeLegibility;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* ********************************
	bg visuals
******************************** */
html {	
	background: rgb(224,241,255); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2UwZjFmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg2JSIgc3RvcC1jb2xvcj0iI2ZmZmVmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmY3OTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  rgb(224,241,255) 0%, rgb(255,254,242) 86%, rgb(255,247,147) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(224,241,255)), color-stop(86%,rgb(255,254,242)), color-stop(100%,rgb(255,247,147))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgb(224,241,255) 0%,rgb(255,254,242) 86%,rgb(255,247,147) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgb(224,241,255) 0%,rgb(255,254,242) 86%,rgb(255,247,147) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgb(224,241,255) 0%,rgb(255,254,242) 86%,rgb(255,247,147) 100%); /* IE10+ */
	background: linear-gradient(top,  rgb(224,241,255) 0%,rgb(255,254,242) 86%,rgb(255,247,147) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0f1ff', endColorstr='#fff793',GradientType=0 ); /* IE6-8 */

	border: 3px solid #b0d104;
	border-width: 4px 3px;
	-moz-border-image:    url(../images/border-all.png) 4 repeat ;
	-webkit-border-image: url(../images/border-all.png) 4 repeat ;
	-o-border-image:      url(../images/border-all.png) 4 repeat ;
	border-image:         url(../images/border-all.png) 4 repeat ;

	overflow-y: scroll;
}


/* sun animation */

/* webkit */
@-webkit-keyframes sunshine {
	0% {
		background-position: 12% 4em;
	}
	48% {
		background-position: 88% 0;
	}   
	100% {
		background-position: 12% 4em;
	}
}
/* moz */
@-moz-keyframes sunshine {
	0% {
		background-position: 12% 4em;
	}
	48% {
		background-position: 88% 0;
	}   
	100% {
		background-position: 12% 4em;
	}
}
/* Future-proofing: for browsers supporting vendorles syntax */
@keyframes sunshine {
	0% {
		background-position: 12% 4em;
	}
	48% {
		background-position: 88% 0;
	}   
	100% {
		background-position: 12% 4em;
	}
}

body {
	background: transparent url('../images/sun44.png') no-repeat;	
	background-position: 36% 1em;
	-webkit-animation-name: sunshine;
	-webkit-animation-duration: 120s;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-name: sunshine;
	-moz-animation-duration: 120s;
	-moz-animation-iteration-count: infinite;
	animation-name: sunshine;
	animation-duration: 120s;
	animation-iteration-count: infinite;
}

#wrap {
	width: 760px;
	padding: 0 0 80px 0;
	margin: 0 auto;
	position: relative;
}
/* ********************************
	typography / spacing
******************************** */

h1 {
	margin: 1.4em 0;
	border-bottom: 1px dotted #92e2f4;	
	color: #99823a;	
	font-size: 2em;
	line-height: 1.2;		
	text-align: center;	
	text-transform: lowercase;
	font-variant: small-caps;
}

h2 {
	position: relative;
	margin: 2.2em 0 .8em 0;
	font-size: 1.4em;
	line-height: 1.2;	
	color: #8dbd00;	
}

h2 span {
	position: absolute;
	top: .2em;
	right: 10px;
	font-size: .8em;
	font-style: italic;
	color: #16A3C4;
}

h3 {
	font-size: 1.2em;
	line-height: 1.2;		
}
P {
	margin: 0 0 1.6em 0;
	font-size: .9em;
	line-height: 1.46;
}
p.intro {
	width: 50%;
	margin: 0 auto;
}
 /* phone number link */
a#tel, a#tel:hover, a#tel:active {
	bottom: 2px;
	border-bottom: 2px solid #b0d104;	
	-moz-border-image:    url(../images/border3px.png) 3 repeat;
	-webkit-border-image: url(../images/border3px.png) 3 repeat;
	-o-border-image:      url(../images/border3px.png) 3 repeat;
	border-image:         url(../images/border3px.png) 3 repeat;
	text-decoration: none;
	text-align: center;
	font-size: 1.4em;		
}
a#tel:focus {
	color: #44c3ea;	
	cursor: default;
}
/* ********************************
1- header 
******************************** */
header {
	width: 760px;
	position: relative;
	margin: 0 auto;
	text-align: center;
}
header h1 {
	border: 0;
	margin: 0;	
}
header h1 a {
	display: block;
	position: relative;
	z-index: 2;
	height: 300px;
	width: 300px;
	margin: 0 auto;
	font-size: 3em;
	padding: 20px 0;	
}
header h1 a img {
	width: 100%;
	height: auto;
}

/* ********************************
2-	nav 
******************************** */
nav { 
	width: 760px;
	position: absolute;
	top: 100px;
	margin: 0 auto;
}
nav ul { 
	margin: 6em 0 1em 0;

}
nav ul li {
	display: inline-block;
	width: 220px;
}
/* link positioning */
nav ul li#ciders {
	position: absolute;
	top: 30px;
	left: 0;
	text-align: right;
}
nav ul li#buy {
	position: absolute;
	top: 70px;
	left: 0;
	text-align: right;		
}
nav ul li#about {
	position: absolute;
	top: 30px;
	left: 535px;
	text-align: left;	
}
nav ul li#contact {
	position: absolute;
	top: 70px;
	left: 535px;
	text-align: left;				
}
/* link styling */
nav ul li a {
	display: block;
	padding: .1em;
	border-bottom: 1px solid #b0d104;	
	-moz-border-image:    url(../images/border3px.png) 3 repeat;
	-webkit-border-image: url(../images/border3px.png) 3 repeat;
	-o-border-image:      url(../images/border3px.png) 3 repeat;
	border-image:         url(../images/border3px.png) 3 repeat;
	text-align: center;
	text-decoration: none;
	font-size: 1.6em;	
	line-height: 1;
	color: #6f8d05;
	-webkit-transition: all .2s ease-in-out;  
	-moz-transition: all .2s ease-in-out;  
	-o-transition: all .2s ease-in-out;  
	transition: all .2s ease-in-out;	
}
nav ul li a:link, nav ul li a:visited {
	
}
nav ul li a:hover, nav ul li a:active, nav ul li a:focus {
	color: #44C3EA;
}

body.cider nav ul li#ciders a, body.buy nav ul li#buy a, body.about nav ul li#about a, body.contact nav ul li#contact a {
	color: #a29061;
}
/* ********************************
3-	content
******************************** */
article {
	width: 760px;
	margin: 0 auto;
}

article img {
	float: right;
	margin: -1em 0 1em 2em;
}
article img#pm {
	width: 40%;
	height: auto;
}
article img.container {
	float: right;
	margin: 0 0 1em 2em;
}
em {
	font-style: italic;
	font-weight: normal;
	color: #6f8d05;	
	font-size: 1.1em;
}
strong.id {	
	font-style: normal;
	font-weight: bold;
	color: #6f8d05;
}
body.buy #wrap article h2 {
	color: #96c700;
	font-size: 1.4em;		
	border: 0;
}
/* home page */
article#home {

}
article#home:after {
	clear: both;
}
/* intro -left col */
article#home #intro {
	width: 46%;
	float: left;
	margin: 0 6% 0 0;
}

article#home #intro img {
	float: right;
	margin: -2em 0 0 .6em;
}
/* promo - right col */
article#home #promo {
	margin: 0 0 0 52%;
}
article#home #promo img {
	float: none;
	margin: 0;
}
/* thank you page */
article#ta {
	width: 60%;
	margin: 0 auto;
}
article#ta h1 {
	font-size: 1.5em;
}
/* ciders page */
p.note {
	margin: 0 30px 0 40%;
	font-style: italic;	
	color: #8dbd00;
}
p.note strong {
	display: block;
	font-style: normal;
	color: #99823a;
}

body.cider article h2 {
	padding: 0 0 0 40%;
	margin: .8em 0;	
	color: #0065aa;
	font-size: 2em;
	text-transform: lowercase;
	font-variant: small-caps;	
	border-bottom: 3px solid #b0d104;	
	-moz-border-image:    url(../images/border-all.png) 4 repeat;
	-webkit-border-image: url(../images/border-all.png) 4 repeat;
	-o-border-image:      url(../images/border-all.png) 4 repeat;
	border-image:         url(../images/border-all.png) 4 repeat;		
}

article dl { 
	margin: 4em 2em 2em 1em;
}
article dt { 
	margin: 1em 0 .36em 0;
}
article dt h3 {
	margin: 0 0 20px 38%;
	padding: 0 0 0 14px;
	color: #96c700;
	font-size: 1.48em;
	border-bottom: 2px solid #b0d104;	
	-moz-border-image:    url(../images/border-all.png) 4 repeat;
	-webkit-border-image: url(../images/border-all.png) 4 repeat;
	-o-border-image:      url(../images/border-all.png) 4 repeat;
	border-image:         url(../images/border-all.png) 4 repeat;	
}

article dd { 
	position: relative;
	min-height: 200px;
	padding: 0 220px 0 40%;
	margin: 0 0 4em 0;
	font-size: .9em;
	line-height: 1.46;
}
article dd img {
	position: absolute;
	top: -3.6em;
	left: -60px;
	width: 40%;
	height: auto;
}

article dd p {
	width: 200px;
	position: absolute;
	top: -3.9em;
	left: 520px;
}
article dd p span {
	display: block;
	margin: .6em 0;
	text-align: center;
	color: #99823a;	
}
article dd p span em {
	display: block;
	font-style: normal;
	color: inherit;
}
article dd p span.abv {
	margin: 0 0 1.2em 0;
	font-size: 1.4em;
}
article dd p span.quantity {
	font-size: 1.1em;	
	margin: 0 0 .8em 0;	
}
article dd p span.quantity em {
	font-weight: normal;
	font-size: .86em;
}
article dd p span.price {
	font-size: .86em;
	text-transform: lowercase;	
	font-style: italic;	
	color: #445800;
}
article dd p span.price strong {
	display: block;
	font-style: normal;
	font-size: 1.86em;
}
/* photo gallery - about page */
ul#photos { 
	display: block;
	margin: 2em 0;
	overflow: hidden;
}
ul#photos li {
	display: block;
	width: 24%;
	float: left;
	margin: 0 5px 5px 0;
}
ul#photos li a {
	display: block;
	padding: 4px;
	background: transparent;
	border: 1px solid #b0d104;	
	-moz-border-image:    url(../images/border-all.png) 4 repeat;
	-webkit-border-image: url(../images/border-all.png) 4 repeat;
	-o-border-image:      url(../images/border-all.png) 4 repeat;
	border-image:         url(../images/border-all.png) 4 repeat;		
}
ul#photos li a:hover, ul#photos li a:active, ul#photos li a:focus {
	padding: 0;
	border-width: 5px;
}
ul#photos li a img {
	display: block;
	width: 100%;
	height: auto;
	float: none;
	margin: 0;	
}
/* ********************************
4-	contact form
******************************** */
body.contact article { 
	overflow: hidden;
	position: relative;
}

body.contact article p {
	margin: 0 56% 1.6em 0;
}
body.contact article a#tel {
	display: block;
	width: 46%;
	position: absolute;
	margin: 0 54% 0 0;
	bottom: 2px;	
}


/* form  */
body.contact article section { 
	width: 46%;
	float: right;
}

body.contact article section form fieldset {
	width: 46%;
	float: left;
	margin: 0 0 1em 0;
}
body.contact article section form label {
	display: block;
	line-height: 1.6;
}
body.contact article section form label .ss-required-asterisk {
	float: left;
	margin: 0 .3em 0 0;
	color: #E88900;	
}
body.contact article section form label.error {
	display: block;
	width: 160%;
	margin: 0 0 1em 0;
	font-size: .8em;
	line-height: 1.6;
	color: #E88900;
}
body.contact article section form input.required.error, body.contact article section form textarea.required.error  {
	border-color: #E88900;
}
body.contact article section form input {
	width: 86%;
	padding: 5px 3%;
	display: block;
	background: none;
	border: 1px solid #6f8d05;
}
body.contact article section form input:hover, body.contact article section form input:active, body.contact article section form input:focus {
	background: #fff;
	border-color: #44c3ea;
}
body.contact article section form input:focus {
	outline: 0;
	box-shadow: 0 0 3px #fff;
}	

/* message */
body.contact article section form fieldset#message {
	width: 97%;
	float: left;	
}
body.contact article section form textarea {
	width: 86%;
	display: block;
	padding: 5px 2%;
	display: block;
	margin: 0 0 1em 0;
	background: none;
	border: 1px solid #6f8d05;
}
body.contact article section form textarea:hover, body.contact article section form textarea:active, body.contact article section form textarea:focus {
	background: #fff;
	border-color: #44c3ea;
}
body.contact article section form textarea:focus {
	outline: 0;
	box-shadow: 0 0 3px #fff;
}
/* submit */
body.contact article section form input[type="submit"]{
	clear: both;
	width: 89%;
	display: block;
	border: 0;
	border-bottom: 2px solid #b0d104;	
	-moz-border-image:    url(../images/border3px.png) 3 repeat;
	-webkit-border-image: url(../images/border3px.png) 3 repeat;
	-o-border-image:      url(../images/border3px.png) 3 repeat;
	border-image:         url(../images/border3px.png) 3 repeat;
	font-size: 1.4em;
	line-height: 1;	
	text-transform: lowercase;
	font-weight: bold;
	color: #6f8d05;
}

body.contact article section form input[type="submit"]:hover, body.contact article section form input[type="submit"]:active, body.contact article section form input[type="submit"]:focus {
	background: none;
	cursor: pointer;
	border-color: #44c3ea;
	color: #44c3ea;
}
/* ********************************
5-	footer
******************************** */
footer {
	padding: 190px 0 10px 0;
	background: transparent url('../images/design-1xsm-opt.png') repeat-x left bottom;	
	text-align: center;
	color: #c0da01;
}
footer p {
	margin: 0;
	color: #c6dd00;
}
footer span#drink-awareness {
	color: #92e2f4;
	font-size: 1.2em;
}

footer p a {
	display: inline-block;
	width: 18px;
	height: 18px;
	margin: 0 12px;
	color: #92e2f4;
	text-indent: -9999px;
	background: transparent url('../images/fb16.png') no-repeat center top;
}
/* ********************************
6-	media queries
******************************** */


/* medium screens  ----------- */

@media only screen and (max-width : 800px) {
	#wrap {
		width: 86%;	
	}
	header {
		width: 96%;
		max-width: 550px;
		position: relative;
		margin: 0 auto;
		padding: 0 0 128px 0;
		text-align: center;
		overflow: hidden;
	}
	header h1 a {
		display: block;
		position: absolute;
		z-index: 2;
		height: 42%;
		width: 42%;
		margin: 10px 0 0 0px;
		font-size: 3em;
		padding: 5 0;	
	}
	nav { 
		width: 56%;
		position: relative;
		float: right;
		top: 70px;
		margin: 0;
		font-size: .86em;
	}
	nav ul { 
		margin: 0;
		display: block;
	}
	nav ul li {
		display: block;
		width: auto;
		margin: 0 0 .5em 0;
	}
/* link re-positioning */
	nav ul li#ciders, nav ul li#buy, nav ul li#about, nav ul li#contact {
		position: relative;
		top: auto;
		left: auto;	
		display: block;
	}
	article {
		width: auto;
	}
	article h1 {
		text-align: left;
	}
	body.cider article h2	{
		padding: 0;
		margin: 0;
	}
	 
	article#home #intro {
		width: auto;
		float: none;
		position: relative;
		margin: 0 0 4em 0;
	}
	
	article#home #promo {
		margin: 0 ;
	}
	article#home #promo img {
		float: left;
		margin: .3em .6em 0 0;
	}
	article#home #promo img#bar-promo {	
		position: relative;
		left: auto;
		float: right;
		margin: 0 0;
	}
	
/* ciders */	
	article dd { 
		position: relative;
		min-height: 200px;
		padding: 0 20% 0 40%;
		font-size: .9em;
		line-height: 1.46;
	}
	article dl { 
		margin: 2em 0 4em 0;
	}
	article dt h3 {

		margin: 0 0 20px 38%; 
	}
	article dd p {
		width: 20%;
		position: absolute;
		top: 0;
		left: 82%;
	}
	article dd p span.abv {
		margin: 0 0 1.2em 0;
		font-size: 1.4em;
	}
	article dd img {
		position: absolute;
		top: -3.6em;
		left: -60px;
	}
	h2 span {
		position: relative;
		top: auto;
		right: auto;
		display: block;
	}
	p.note {
		margin: 0;
	}
	ul#photos li {
		width: 24%;
	}
	
	body.contact article section { 
		width: 96%;
		float: none;
		margin: 0 0 3em 0;
	}
	body.contact article p {
		margin: .6em 0;
	}
	body.contact article a#tel {
		display: block;
		width: auto;
		position: relative;
		margin: 1em 0;
		bottom: 2px;	
	}
}
@media only screen and (max-width : 620px) {
	article#home #promo img {
		float: none;
		width: 100%;
		height: auto;
		margin: -1em 0 0 0;
	}

	
/* ciders */
	article dd { 
		position: relative;
		min-height: 200px;
		padding: 0 0 0 40%;
		font-size: .9em;
		line-height: 1.46;
	}
	article dd p {
		width: 240px;
		position: relative;
		top: auto;
		left: 0;
		overflow: hidden;
		margin: 0 0 6em 0;
	}
	article dd img {
		position: absolute;
		top: -2.6em;
		left: -40px;
	}
	article dd p span {
		float: left;
	}
	article dd p span.abv {
		margin: 0.6em  0;
		font-size: 1.4em;
		text-align: left;
	}
	article dd p span.quantity {
		clear: left;
		font-size: 1.1em;	
		margin: 0 0 .8em 0;	
		text-align: left;
	}
	article dd p span.quantity em {
		font-weight: normal;
		font-size: .86em;
	}
	article dd p span.price {
		position: absolute;
		top: 36px;
		right: 0;
		font-size: .86em;
		text-transform: lowercase;	
		font-style: italic;	
		color: #445800;
	}
	footer p {
		font-size: 76%;
	}
	
}
@media only screen and (max-width : 580px) {
	nav {
		top: 50px;
		font-size: 66%;
	}
	h1 {
		font-size: 1.6em;
	}
	footer span#drink-awareness {
		display: block;
		margin: 0;
	}
	article img.container {
		width: 40%;
		height: auto;
	}
}
@media only screen and (max-width : 360px) {
	header {
		min-height: 20px;
	}
	header h1 a {
		z-index: 2;
		height: auto;
		width: 110px;
		padding: 20px 0;	
	}
	nav { 
		position: absolute;
		top: 40px;
		right: 0;
		margin: 0 auto;
		font-size: 52%;
	}	
	h1 {
		font-size: 1.2em;
	}
	article#home #intro img {
		float: right;
		margin: -1em 0 0 .6em;
		width: 40%;
		height: auto;
	}
	article {
		font-size: 86%;
	}
	body.buy #wrap article h2 {
		color: #96c700;
		font-size: 1.2em;		
		border: 0;
	}
	article h2 {
		clear: both;
		font-size: 96%;
	}
	article dd {
		padding: 0 0 4em 40%;
	}
	article dd p {
		overflow: visible;
	}
	article dd p span.price {
		position: absolute;
		top: -12px;
		left: -380px;
		font-size: .86em;
		text-transform: lowercase;	
		font-style: italic;	
		color: #445800;
	}

	ul#photos li {
		width: 46%;
	}
	a#tel {
		display: block;
	}
}