/*General Classes*/
h1 {
	margin: 0;
	text-align: center;
	font-family: Lancelot, serif;
	font-size: 45px;
	font-weight: normal;
	line-height: 45px;
	color: #786183;
}

h2 {
	margin: 24px 0 0 0;
	text-align: center;
	font-family: Lancelot, serif;
	font-size: 33px;
	font-weight: normal;
	line-height: 38px;
	color: #158E8D;
}

@media screen and (min-width: 1080px) {
	h1 {
		font-size: 60px;
		line-height: 60px;
	}

	h2 {
		margin: 27px 0 0 0;
		font-size: 40px;
		line-height: 43px;
	}
}

h3 {
	margin: 47px 0 0 -12px;
	padding: 9px 15px 9px 15px;
	background: #158E8D;
	font-size: 24px;
	font-weight: normal;
	line-height: 29px;
	color: #fff;
}

h4 {
	margin: 0 0 8px 0;
	padding: 0;
	font-size: 19px;
}

p {
	margin: 18px 0 0 0;
	line-height: 29px;
}

table {
	margin: 18px 0 0 0;
	border: 1px solid #eee;
}

th, td {
	border: 1px solid #eee;
	padding: 5px;
	text-align: left;
}

form {
	margin: 0;
	padding: 0;
}

fieldset {
	margin: 18px 0 0 0;
	border: 0;
	padding: 10px 10px 10px 10px;
	background: #EEF8F6;
}

fieldset label {
	display: block;
	float: left;
	width: 210px;
	padding: 2px 5px 5px 5px;
	vertical-align: top;
	text-align: right;
}

input[type=text], input[type=password] {
	border: 0;
	border-radius: 3px;
	padding: 6px 4px 6px 4px;
	font-size: 18px;
}

textarea {
	border: 0;
	border-radius: 3px;
	padding: 6px 4px 6px 4px;
	font-size: 18px;
}

select {
	font-size: 18px;
}

button {
	display: block;
	border: 0;
	border-radius: 3px;
	padding: 9px 18px 9px 18px;
	background: #2F6D91;
	text-align: center;
	font-size: 17px;
	color: #fff;
}

button[disabled], button:disabled, button:disabled:hover {
	background: #bbb;
	cursor:default;
}

button:hover {
	background: #3780AA;
	cursor: pointer;
}

ol, ul {
	margin: 18px 0 0;
	padding: 0;
}

li {
	margin: 8px 0 0 22px;
	padding: 0;
	line-height: 29px;
}

a:link, a:visited, a:active {
	text-decoration: none;
	color: #2F6D91;
}

a:hover {
	color: #3780AA;
}

img {
	max-width: 100%;
	border: 0;
}

/*Website Sections*/
body {
	margin: 0;
	padding: 0;
	background-color: #eee;
	font: 19px "Source Sans Pro", sans-serif;
	line-height: 19px;
	color: #333;
}

header {
	clear: both;
	position: relative;
	top: 0;
	width: 100%;
	max-width: 1080px;
	height: 450px;
	margin: 0 auto 0 auto;
	padding: 0;
	background: #ccc;
}

/*Logo/Sidebar*/
div#sidebar {
	position: absolute;
	top: 0;
	left: 0;
	width: 160px;
	height: 450px;
	padding: 10px 10px 0 10px;
	background: rgba(238, 248, 246, .9);
}

img#logo {
	max-width: 140px;
	display: block;
}

div#sidebar h2 {
	display: none;
}

div#sidebar {
	width: 100%;
	padding: 0 0 0 0;
	background: rgba(238, 248, 246, 1);
}

div#sidebar ul {
	margin: 0 0 12px 0;
	padding: 0;
}

div#sidebar ul li {
	float: left;
	width: 50%;
	height: 33px;
	margin: 0;
	padding: 0;
	line-height: 16px;
	list-style-type: none;
}

div#sidebar ul li.clear {
	height: 0;
	line-height: 0;
}

a.category, a.category:visited {
	display: block;
	height: 16px;
	margin: 0;
	border-top: 1px solid #CBE7DF;
	padding: 8px 6px 8px 6px;
	font-size: 15px;
	line-height: 15px;
	text-transform: uppercase;
	color: #6E507C;
}

a.category:hover {
	background: #D9F1EB;
}

a.category.active {
	background: #D9F1EB;
}

/*Quick Search*/
div#sidebar fieldset {
	margin: 0;
	padding: 13px 13px 5px 13px;
	text-align: center;
	background: #158E8D;
}

div#sidebar input[type=text] {
	float: left;
	width: 70%;
	margin: 1px 0 10px 0;
	border-radius: 0;
}

div#sidebar button {
	float: left;
	width: 25%;
	border-radius: 0;
	padding: 8px 3px 8px 3px;
	font-size: 14px;
	text-transform: uppercase;
}

div#sidebar fieldset a {
	clear: both;
	display: block;
	font-size: 15px;
	color: #fff;
}

img#dog {
	display: none;
}

/*Customer Service*/
div#contact {
	display: none;
}

div#contact div {
	margin: 4px 0 10px 0;
}

div#contact a {
	display: block;
	padding: 3px;
	font-size: 19px;
	color: #158E8D;
}

/*Sidebar Mobile*/
header h1 {
	display: none;
}

@media screen and (min-width: 540px) {
	header h1 {
		display: block;
		position: absolute;
		top: 0;
		margin: 20px 210px 0 140px;
		text-align: center;
		font-size: 42px;
		line-height: 40px;
		color: #fff;
	}
}

@media screen and (min-width: 684px) {
	header {
		height: 400px;
	}
	
	div#sidebar {
		height: auto;
	}
	
	div#sidebar ul li {
		width: 33%;
	}
}

@media screen and (min-width: 780px) {
	header {
		height: 370px;
	}
	
	div#sidebar ul li {
		width: 25%;
	}
}

@media screen and (min-width: 1080px) {
	header {
		height: 200px;
	}
	
	header h1 {
		position: static;
		float: right;
		margin: 44px 12px 0 0;
		font-size: 57px;
		line-height: 57px;
	}

	div#sidebar {
		width: 260px;
		margin: 0 30px 0 0;
		padding: 10px 0 0 0;
	}
	
	div#sidebar h2 {
		display: block;
		margin-top: 9px;
		text-align: center;
		font-size: 34px;
	}

	div#sidebar ul li {
		float: none;
		width: auto;
		height: auto;
	}
	
	a.category {
		height: 17px;
		padding: 16px 16px 16px 20px;
		font-size: 17px;
		font-weight: bold;
		line-height: 17px;
	}

	div#sidebar fieldset {
		padding: 20px 10px 20px 20px;
	}
	
	img#logo {
		max-width: 160px;
		margin: 0 auto 0 auto;
	}

	img#dog {
		display: block;
	}

	div#contact {
		display: block;
		padding: 1px 0 10px 0;
		background: #D9F1EB;
		text-align: center;
		font-size: 22px;
	}
}

/* Navigation Menu */
ul#menu {
	position: absolute;
	top: 65px;
	right: 0;
	margin: 0;
	line-height: 21px;
}

ul#menu li {
	display: block;
	padding: 0;
	background: #158E8D;
	list-style-type: none;
	line-height: 21px;
}

.menu:link, .menu:visited, .menu:active {
	display: block;
	padding: 12px 18px 12px 18px;
	text-align: center;
	font-size: 16px;
	line-height: 21px;
	color: #fff;
}

ul#menu li:hover .menu, .menu:hover {
	color: #EEF8F6;
}

.active:link, .active:visited, .active:hover, .active:active {
	color: #EEF8F6;
}

ul#menu li ul {
	display: none;
}

@media screen and (min-width: 1080px) {
	ul#menu {
		position: static;
		float: right;
		margin: 12px 0 0 30px;
		height: 46px;
		border: 1px solid #fff;
		padding: 10px 10px 10px 0;
		background: rgba(217, 241, 235, .9);
	}

	ul#menu li {
		float: left;
		height: 46px;
		margin: 0 0 0 10px;
	}
	
	/* Dropdowns */
	ul#menu li:hover > ul {
		display: block;
		position: absolute;
		margin: 0 0 0 -1px;
		z-index: 5;
		border-top: 1px solid #EEF8F6;
		border-right: 1px solid #EEF8F6;
		border-left: 1px solid #EEF8F6;
		background: #EEF8F6;
	}
	
	ul#menu li:hover > ul li {
		float: none;
		width: 190px;
		height: auto;
		margin: 0;
		border-bottom: 1px solid #EEF8F6;
		background: #158E8D;
	}
	
	ul#menu form, ul#menu fieldset {
		width: 190px;
		margin: 0;
		border: 0;
		padding: 0;
	}
	
	.dropdown:link, .dropdown:visited, .dropdown:active, ul#menu button {
		display: block;
		width: 154px;
		border-radius: 0;
		padding: 10px 18px 10px 18px;
		background: #158E8D;
		font-size: 16px;
		color: #fff;
		text-align: left;
	}
	
	.dropdown:hover, ul#menu button:hover {
		background: #4DA7A3;
	}
}

/* Cart Summary */
div#cart {
	position: absolute;
	top: 0;
	right: 0;
	max-width: 200px;
	height: 46px;
	margin: 0 0 14px 0;
	padding: 9px 16px 10px 16px;
	background: rgba(217, 241, 235, .9);
}

div#cart img {
	display: none;
}

div#cart a {
	display: block;
	color: #158E8D;
}

span#items {
	display: block;
	padding: 7px 0 0 0;
	font-size: 21px;
	text-align: right;
}

span#subtotal {
	display: block;
	float: left;
	padding: 4px 0 0 5px;
	font-size: 16px;
}

span#view {
	display: block;
	float: right;
	padding: 4px 0 0 5px;
	font-size: 16px;
}

@media screen and (min-width: 1080px) {
	div#cart {
		position: static;
		clear: none;
		float: left;
		max-width: 245px;
		width: 245px;
		margin: 12px 0 0 280px;
		border: 1px solid #fff;
	}
	
	div#cart img {
		display: block;
		float: left;
		width: 56px;
		margin-right: 11px;
	}
}

/* Content Area */
main {
	clear: both;
	display: block;
	margin: 0;
	background: #eee;
}

div#page {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto 0 auto;
	padding: 0;
	background: #eee;
}

div#content {
	min-height: 1200px;
	margin: 0;
	padding: 15px;
}

@media screen and (min-width: 780px) {
	main {
		padding: 0 0 20px 0;
	}
}
	
@media screen and (min-width: 1080px) {
	div#content {
		float: right;
		width: 740px;
		padding: 30px 30px 20px 30px;
	}
}
	
fieldset.signout {
	float: right;
	margin: 0 0 20px 20px;
	padding: 0;
	background: #fff;
}

/* General Formatting */
.clear {
	clear: both;
}

.center {
	text-align: center;
}

.right {
	text-align: right;
}

.right button {
	float: right;
}

.error {
	clear: both;
	padding: 5px 10px 5px 10px;
	background: #cc3333;
	font-weight: bold;
	color: #fff;
}

.info, .confirmation {
	clear: both;
	padding: 5px 10px 5px 10px;
	background: green;
	font-weight: bold;
	color: #fff;
}

span.instr {
	font-style: italic;
	font-size: 75%;
}

.honeypot {
	display: none;
}

button.small {
	padding: 7px 15px 8px 15px;
	font-size: 14px;
}

/* Styling for Specific Pages */
div.product {
	float: left;
	width: 32%;
	height: 300px;
	margin: 12px;
	border: 1px solid #CBE7DF;
	border-radius: 3px;
	text-align: center;
}

/* Product Thumbs */
div.product-thumb {
	position: relative; /*needed to position hover popups*/
	float: left;
	width: 43%;
	height: 265px;
	margin: 10px 10px 0 0;
	border: 1px solid #ddd;
	padding: 4px 4px 40px 4px;
	text-align: center;
}

@media screen and (min-width: 600px) {
	div.product-thumb {
		margin: 13px 13px 0 0;
	}
}

@media screen and (min-width: 804px) {
	div.product-thumb {
		width: 220px;
		margin: 15px 15px 0 0;
		max-width: 27%;
	}
}

@media screen and (min-width: 1080px) {
	div.product-thumb {
		max-width: 29%;
	}
}

div.product-thumb:hover {
	border: 1px solid #aaa;
}

div.product-thumb-img {
	display: block;
	width: 100%;
	height: 164px;
	overflow: hidden;
	margin: 0 auto 0 auto;
}

div.product-thumb-img img {
	height: 150px;
}

div.product-thumb a {
	display: block;
	margin: 8px auto 0 auto;
	padding: 3px;
	font-size: 17px;
	line-height: 19px;
}

.price {
	font-size: 83%;
	color: #999;
}

.strike {
	font-size: 90%;
	text-decoration: line-through;
	color: #888;
}

.wholesale {
	font-size: 90%;
	color: #999;
	font-weight: bold;
}

.sale {
	font-size: 90%;
	color: #cc3333;
	font-weight: bold;
}

/* Product Thumbs hover popups */
div.popup {
	display: none;
}

div.product-thumb:hover div.popup {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 200;
}

div.product-thumb:hover div.popup a {
	display: block;
	margin: 0 auto 0 auto;
	padding: 3px;
	background: #158E8D;
	font-size: 75%;
	color: #fff;
}

div.product-thumb:hover div.popup a:hover {
	color: #eee;
}

div.product-thumb:hover div.popup fieldset {
	margin: 0;
	padding: 5px;
}

div.product-thumb:hover div.popup select {
	font-size: 70%;
}

div.product-thumb:hover div.popup button {
	margin: 0 auto 0 auto;
	padding: 7px 12px 7px 12px;
	font-size: 68%;
}

/* Product Detail */
div#product-images {
	margin: 0 auto 0 auto;
	text-align: center;
}

div#product-images img {
	margin: 10px;
}

div#purchase {
	clear: both;
	margin-top: 24px;
	padding: 24px;
	background: #D9F1EB;
}

div#price {
	float: left;
}

div.price {
	color: #555;
}

fieldset#addCart {
	margin: 0;
	padding: 0;
	background: #D9F1EB;
}

fieldset#addCart select {
	margin: 0 10px 0 10px;
}

fieldset#addCart button {
	float: right;
}

@media screen and (min-width: 1080px) {
	div#product-images {
		float: left;
		max-width: 33%;
		margin: 0 24px 0 0;
	}

	div#product-images img {
		display: block;
		float: left;
	}
	
	div#product-info {
		clear: none;
		float: right;
		max-width: 61%;
		margin: 0 0 24px 0;
	}

}

/*Product Reviews*/
div#review-header {
	margin: 20px 0 0 0;
	padding: 9px 15px 8px 15px;
	background: #158E8D;
	font-size: 20px;
	font-weight: normal;
	line-height: 20px;
	color: #fff;
}

span#username {
	display: block;
	float: left;
}

span#date {
	display: block;
	float: left;
	margin-left: 36px;
}

span#stars {
	display: block;
	float: right;
	clear: right;
}

div#review-header img {
	display: inline-block;
	height: 20px;
	padding: 0 2px 0 2px;
}

p.review {
	margin: 12px 15px 0 15px;
	font-size: 17px;
	line-height: 24px;
}

.prev {
	display: block;
	float: left;
	margin: 12px 0 0 12px;
	font-size: 16px;
}

.next {
	display: block;
	float: right;
	margin: 12px 12px 0 0;
	font-size: 16px;
}

/* Checkout */
table#cart {
	width: 100%;
	border: 0;
	padding: 0;
}

table#cart button {
	margin: 0 auto 0 auto;
	padding: 6px 11px 7px 11px;
	font-size: 13px;
}

table#cart th, table#cart td {
	border: 0;
	border-bottom: 1px solid #CBE7DF;
}

div#registered {
	border-radius: 4px;
	padding: 24px;
	background: #D9F1EB;
	text-align: center;
}

div#registered h2 {
	margin: 0;
}

div#registered a {
	display: block;
	margin: 24px 0 0 0;
	border-radius: 5px;
	padding: 9px 15px 9px 15px;
	background: #158E8D;
	font-size: 24px;
	font-weight: normal;
	line-height: 29px;
	color: #fff
}

div#registered a:hover {
	color: #EEF8F6;
}

fieldset.payment {
	margin: 0 12px 0 0;
	padding: 24px 10px 24px 10px;
	background: #D9F1EB;
}

fieldset.payment div {
	clear: both;
	padding: 8px;
}

fieldset.payment label {
	width: 170px;
}

fieldset#continue {
	margin: 18px 12px 0 0;
	background: #D9F1EB;
}

fieldset#continue button {
	float: right;
	margin-left: 24px;
}

div#cc_exp {
	clear: none;
	margin: 0;
	padding: 0;
	float: left;
}

#cc_exp .ui-datepicker-inline {
	border: none;
	background: none;
}

#cc_exp .ui-datepicker-calendar {
	display: none;
}

/*Order History*/
table#order-history td {
	cursor: pointer;
	color: #2F6D91;
}

table#order-history td:hover {
	color: #3780AA;
}

/*Advanced Search*/
fieldset#search {
	padding: 2px;
	background: #158E8D;
	color: #fff;
	font-weight: bold;
}

@media screen and (min-width: 600px) {
	fieldset#search {
		padding: 36px 12px 24px 12px;
	}
	
	fieldset#search label {
	}
}

fieldset#search div {
	clear: both;
	padding: 8px;
}

fieldset#search label {
	width: 160px;
}

fieldset#search button {
	display: inline-block;
	margin-top: 10px;
}

/* Footers */
footer {
	clear: both;
	margin: 0;
	padding: 0;
	background: #392E3E;
}

div#footer {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto 0 auto;
	font-size: 16px;
	color: #fff;
}

img#footer-logo {
	display: none;
}

ul#footer-menu {
	width: 100%;
	margin: 0;
	padding: 0;
	background: rgba(0,0,0,.3);
	list-style-type: none;
}

ul#footer-menu li {
	float: left;
	width: 50%;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.footer:link, .footer:visited, .footer:active {
	display: block;
	border-bottom: 1px solid #786183;
	padding: 11px 10px 11px 10px;
	font-size: 15px;
	line-height: 15px;
	text-transform: uppercase;
	color: #B9AAC0;
}

.footer:hover {
	background: rgba(0,0,0,.3);
}

.footer.active {
	background: rgba(0,0,0,.2);
}

div#facebook {
	clear: both;
	margin: 0 auto 0 auto;
	padding: 30px 0 30px 0;
	text-align: center;
}

div#guarantee {
	width: 200px;
	margin: 0 auto 0 auto;
}

div#guarantee img {
	display: block;
	margin: 20px auto 20px auto;
	padding: 20px 0 0 0;
}

div#footer-contact {
	clear: both;
	margin: 16px 0 0 0;
	padding: 14px 20px 14px 20px;
	background: #786183;
	text-align: center;
	line-height: 30px;
	font-size: 18px;
	text-transform: uppercase;
}

div#footer-contact a img {
	display: inline-block;
	max-width: 25px;
	margin-right: 5px;
}

div#footer-contact a {
	color: #fff;
}

div#footer-contact a:hover {
	color: #EEF8F6;
}

img#credit-cards {
	display: block;
	margin: 15px auto 0 auto;
}

@media screen and (min-width: 600px) {
	ul#footer-menu li {
		width: 33%;
	}
}

@media screen and (min-width: 960px) {
	footer {
		margin: 20px 0 0 0;
	}
	
	div#footer {
		padding: 40px 0 40px 0;
	}
	
	ul#footer-menu {
		width: auto;
		float: left;
		margin: 0 50px 30px 2px;
	}
	
	ul#footer-menu li {
		float: none;
		width: auto;
	}
	
	.footer:link, .footer:visited, .footer:active {
		padding: 15px 33px 13px 33px;
		font-size: 17px;
		line-height: 17px;
	}

	img#footer-logo {
		display: block;
		float: right;
		margin: 0 45px 0 15px;
	}

	div#facebook {
		clear: none;
		float: left;
		padding: 0 0 50px 0;
	}
	
	div#guarantee {
		float: right;
		margin: 0 20px 0 auto;
		padding: 0;
	}
	
	div#footer-contact {
		text-align: left;
	}
	
	div#footer-contact div {
		float: left;
		margin-right: 40px;
	}

	img#credit-cards {
		float: right;
		margin: 0;
	}
}

/*Copyright Footer*/
div#copyright-container {
	background: rgba(0,0,0,.8);
}

div#copyright {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto 0 auto;
	padding: 20px 0 20px 0;
	text-align: center;
	font-size: 15px;
	line-height: 15px;
	color: #777;
}

.copyright:link, .copyright:visited, .copyright:active {
	display: inline-block;
	margin: 0 8px 0 8px;
	padding: 2px;
	color: #777;
}

.copyright:hover {
	color: #999;
}

@media screen and (min-width: 960px) {
	div#copyright {
		text-align: left;
	}
	
	div#copyright-links {
		float: right;
	}
}