/* Stylesheet for SweatshirtBlankets.com */

/* Reset based off of http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span, applet, object,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;	padding: 0;
	border: 0;	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
}
small { font-size: .8em; font-weight: lighter;}
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; vertical-align: top; }
blockquote { quotes: "" ""; }
blockquote:before, blockquote:after { content: ""; }

/*======= #typography ========*/
html {
	/* Fontstack based on http://www.sitepoint.com/article/eight-definitive-font-stacks/ */
	font: 90%/1.4em "Myriad Pro", Myriad, 
					"DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", 
					Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body {
	margin: 1em auto;
	width: 907px;
}

h1, h2, h3, h4, h5, h6 { }
h1 { 
	font-size: 1.2em;
	width: 264px;
	height: 64px;
	overflow: hidden;
	position: relative;
	left: -20px;
	margin: 0; padding: 0;
}
	h1 span { 
		position: absolute;
		top: 0; left: 0;
		width: 264px;
		height: 64px;
		background: transparent url(/images/sweatshirtblankets-logo.jpg) no-repeat top left;
	}
h2 { 
	font-size: 2em; 
	margin: 0 0 .3em;
	color: #666;
}
h3 { 
	font-size: 1.4em; 
}
h4 { 
	font-size: 1.25em; 
}

p { margin-bottom: .8em; }
p.note {
	color: #666;
	font-size: .8em;
}
	div.notice, div.error, div.success,
	ul.notice, ul.error, ul.success,
	p.notice, p.error, p.success { 
		margin: 0 1em .8em; 
		padding: .6em; 
		border-width: 1px; 
		border-style: solid;
	}
	div.notice, ul.notice, p.notice { color: #009;border-color: #009; background-color: #aaf;}
	div.error, ul.error, p.error { color: #900; border-color: #900; background-color: #faa; }
	div.success, ul.success, p.success { color: #090; border-color: #090; background-color: #afa; }

address { font-style: normal; margin-bottom: .8em; }

img.right { float: right; margin: 0 0 1.5em 1em; clear: right; } 
	body#contact img.right {margin-top: -2.2em; }
img.left { float: left; margin: 0 1em 1.5em 0; clear: left; } 
#header {
	margin: 0 0 1em;
	position: relative;
}
#splash { 
	padding: 0; margin: 0;
	position: relative;
	top: -13px;
	left: 0;
	height: 290px;
	font-size: 2em; 
	background: transparent url(/images/home-splash.jpg) no-repeat top left;
	border-bottom: 10px solid #efe6cf;
}
#splash li { list-style: none; line-height: 1.4em; text-indent: -99999em; }
#splash a { position: absolute; top:0; left: 0; width: 100%; height: 264px; }
#mainnav {
	background-color: #d8c38c;
	width: 683px;
	position: absolute;
	top: 10px;
	right: -20px;
	height: 1em;
	padding: .6em 0 .8em;
	font-size: 1.2em;
	z-index: 2;
}
#mainnav li {
	width: 119px;
	display: block;
	float: left;
	vertical-align: middle;
	border-left: 2px solid #fff;
	text-align: center;
	margin-left: -2px;
}	
#mainnav #prodlink { width: 205px; }
#mainnav li:first-child { border: none; }
#mainnav li a {
	display: block;
	width: 100%;
	height: 100%;
	color: #fff;
	text-decoration: none;
}
#mainnav li a:hover,
body#contact #mainnav li a.contact,
body#about #mainnav li a.about,
body#products #mainnav li a.products,
body#home #mainnav li a.home,
body#home #mainnav li a.blog {
	font-weight: bold;
}

#footer {
	text-align: center;
	font-size: .8em;
	clear: both;
	float: none;
	width: 100%;
}

div#home-cta {
	display: block;
	width: 300px;
	height: 473px;
	position: relative;
	float: right;
}
div#home-cta span {
	width: 100%;
	height: 100%;
	position: absolute;
	top:0; left:0;
	background: transparent url(/images/home-image-2.png) no-repeat top left;
}
div#home-cta a { position: absolute; top:0; left: 0; width: 100%; height: 473px; }

.shipping-details li { list-style: none; margin: .2em 0; width: 500px; text-align: right;}
.shipping-details li span { font-weight: bold; float: right; width: 390px; padding-left: 10px; text-align: left;}

/*===== TABLES =====*/
table { width: 100%; border-collapse: collapse; margin: 0 0 1em;}
th, td { padding: .2em; vertical-align: middle; }
thead th { text-align: center; font-weight: bold; font-style: italic; }
tfoot th, tfoot td { text-align: right; }
tfoot td { font-weight: bold; }

tbody td { border: 1px solid #000; border-width: 1px 0; }

td.image-example { width: 150px; }
td.description { width: 250px; }
td.cost { text-align: right; width: 50px; }
td.quantity { text-align: center; width: 75px; }

li.position table { width: 95%; margin-left: 1px; }
li.position table th { font-weight: bold; }
li.position table th, 
li.position table td { text-align: center; }
li.position table td { border-width: 1px; }
li.position table input { display: block; margin: 0 auto; }

/*===== FORMS =====*/
form { margin: 1em 0; overflow:hidden; clear: both;}
form p.note {
	padding: 0 0 0 234px;
	margin-bottom: 0;
	font-variant: small-caps;
}
form span.error { font-size: .8em; color: #900; text-align: center; display: block; }
fieldset ul li { 
	list-style: none; 
	overflow: hidden;
	margin: 0 0 .8em;
}
form.contact-form label { font-weight: bold; }
form.contact-form fieldset {
	width: 50%;
	float: left;
}
form.contact-form fieldset legend { display:none; }
form.contact-form fieldset ul li label { 
	width: 200px;
	text-align: right;
	display: block;
	float:left;
	margin: 0 16px 0;
}
form.contact-form fieldset p label { 
	text-align: left; 
	display: block; 
	float: none; 
	width: 100%;
	margin-top: -1.6em;
}
form.contact-form fieldset p textarea { width: 98%; }
form.contact-form fieldset p.submit {
	text-align: right;
	padding-right: 2em;
}
form.contact-form #address2 {
	margin: .25em 0 0 232px; 
}

form.cart fieldset {
	border: 1px solid #000;
	padding: 1em;
	margin-bottom: .8em;
}
	form.cart fieldset fieldset { border: none; padding: 0;}
form.cart ul li { 
	float: left; 
	margin: 0 0 0 30px;
	width: 128px;
}
form.cart li.image-example {
	width: 350px;
	text-align: center;
}
	form.cart li.image-example span { display: block; }
form.cart p.legend, form.cart label, form#upload p label { 
	width: 124px;
	padding: 2px; 
	text-align: center; 
	display: block;
	font-size: 1.1em;
	font-weight: bold;
}
form.cart li.colors input {
	border: 1px solid #000;
}
input.quantity { height: 1.4em; text-align: center; font-size: 1.4em; width: 122px; margin-top: 1em;}
form.cart fieldset fieldset label { display: inline; border: none; display: none; }

form.cart li.image-upload ol { margin: 0;}
form.cart li.image-upload button { width: 58px; margin: 0 4px 4px 0; padding: .2em; display: inline; float: none;}
form.cart li.image-upload button.previousimg { width: 122px; display: block; }

div.order-information {
	border: 1px solid #000;
	background-color: #fdd;
	padding: .8em;
	text-align: right;
	overflow: hidden; 
	clear: both;
}
div.order-information ul li { 
	list-style: none; 
	margin: 0 0 .4em; 
	width: 100%; 
	float: none;
}
div.order-information li span { padding: 0 .25em; font-weight: bold; }
div.order-information p.note {
	color:#000;
	font-variant: normal;
	float: none;
	clear: both;
	padding-top: 1em;
}
form.cart button, .cart-button { 
	display: block;
	width: 200px;
	margin: 1em 0;
	padding: .8em;
	background: #fff;
	border: 1px solid #000;
	text-align: center;
	float: right;
	clear: both;
	cursor: pointer;
	color: #000;
	text-decoration: none;
	font-size:12px;
}
form.cart button:hover, .cart-button:hover {
	background-color: #ddd;
}
.cart-button {
	float: left;
	clear: none;
}
#returntocart { clear: left; }
#checkout { margin-left: 200px; }

form.cart li.colors fieldset ol { margin: 0 auto; }
form.cart li.colors fieldset li {
	width: 20px;
	height: 20px;
	float: left;
	padding: 6px;
	margin:0;
	position: relative;
}
form.cart li.colors fieldset label {
	float: none;
	margin: 2px auto;
	display: block;
	width: 16px;
	height: 16px;
	padding: 0;
	text-indent: -9999em;
}
form.cart li.colors span {
	position: absolute;
	right: 0;
	top: 0;	
}
div.blanket.burgundy, label.burgundy { background-color: #7C2128; }
div.blanket.green, label.green { background-color: green; }
div.blanket.navy, label.navy { background-color: #002649; color: #fff;}
div.blanket.blue, label.blue { background-color: #0038A8; }
div.blanket.black, label.black { background-color: #000; color: #fff; }
div.blanket.red, label.red { background-color: #CE1126; }
div.blanket.yellow, label.yellow { background-color: #FCB514; }
div.blanket.gray, label.gray { background-color: #666; }

form.cart li.colors fieldset label.selected { border: 2px solid #222; margin: 0 auto;}

button#addtocart {
	position: relative;
	width: 124px;
	height: 140px;
	background: url(/images/addtocart.png) no-repeat 0 -140px;
	text-indent: -9999em;
	border: none;
	cursor: pointer;
}
button:hover#addtocart {
	background: url(/images/addtocart.png) no-repeat 0 0;
}

div.cart-link {
	clear: both;
	text-align: right;
}
div.cart-link a.cart-button { float: right; margin: 0 0 0 1em; }

#paypal {
	width: 160px;
	height: 60px;
	display: block;
	position: relative;
	float: right;
	padding: 0;
	margin: 0;
} #paypal:hover { background-color: #fff; }
#paypal span {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0; left: 0;
	background: url(https://cms.paypal.com/cms_content/US/en_US/images/developer/EC-button.gif) no-repeat top left;
}

form#upload li {
	width: 33%;
	margin: 0; padding: 0;
	float: left; 
}
form#upload p label { width: auto; float: left; text-align: left; margin-right: 10px; }
.upload-input { display: block; clear: both; }
#upload_img { float: right; }

div.actual-image { width: 150px; float: left; }
div.actual-image img { max-width: 150px; max-height: 150px; margin-left: -20px;}
div.blanket { float: left; height: 150px; width: 200px; position: relative; }
div.blanket div { position: absolute; width: 75px; text-align: center; padding: 2px;}
div.tl, div.tc, div.tr { top: 0; }
div.cl, div.c, div.cr { top: 33%; }
div.bl, div.bc, div.br { bottom: 0; }
div.tl, div.cl, div.bl { left: 0; }
div.tc, div.c, div.bc { left: 33%; }
div.tr, div.cr, div.br { right: 0; }

div#craftysyntax {
	position: fixed;
	bottom: 0px;
	right: 0px;
	padding: 3px;
	z-index: 50;
}