/*
Theme Name: Cocopunkz
Theme URI: http://cocopunkz.com
Description: Cocopunkz Wordpress theme
Version: 1.0
Author: Andrew Thong
Author URI: http://andrewthong.com

-----*/
/*RESETS AND DEFAULTS*/
html, body, h1, h2, h3, h4, h5, h6, p {
	margin: 0;
	padding: 0;
	font-size: 100%;
}

img {border: none}
a {text-decoration: none}

.clr, .clrl, .clrr {
	height: 0;
	font-size: 0;
}
.clr {clear: both}
.clrl {clear: left}
.clrr {clear: right}

.left {float: left}
.right {float: right}

/*LAYOUT*/
body {
	background: url('images/bg.jpg') repeat top center;
	font-family: Tahoma, Geneva, Verdana, sans-serif;
	font-size: 100%;
}

#ultracontainer {
	background: url('images/bg-top.jpg') repeat-x 50% 0;
	width: 100%;
	min-height: 650px;
	height: auto !important;
	height: 650px;
}

#supercontainer {
	background: url('images/header.jpg') no-repeat 50% 0;
	width: 100%;
	min-height: 320px;
	height: auto !important;
	height: 350px;
}

#container {
	background: url('images/container-top.jpg') no-repeat;
	width: 920px;
	margin: 0 auto;
	position: relative;
	left: 50%;
	margin-left: -460px;
}

#header {
	width: 915px;
	height: 175px;
}
	#header a.home {
		position: absolute;
		top: 40px;
		display: block;
		width: 360px;
		height: 110px;
	}
	
	#header a#twitter, #header a#facebook, #header a#etsy {
		display: block;
		position: absolute;
		width: 36px;
		height: 36px;
	}
	
 	#header a#facebook {
		top: 78px;
		left: 545px;
		background: url('images/icons/header-sm.png') no-repeat 0 0;
	}
		#header a#facebook:hover {background: url('images/icons/header-sm.png') no-repeat 0 -38px;}
	
	#header a#twitter {
		top: 95px;
		left: 622px;
	}
		#header a#twitter:hover {background: url('images/icons/header-sm.png') no-repeat -38px -38px;}

	#header a#etsy {
		top: 26px;
		left: 846px;
	}
		#header a#etsy:hover {background: url('images/icons/header-sm.png') no-repeat -76px -38px;}
		
	#header a.home span, #header a#twitter span, #header a#facebook span, #header a#etsy span {
	visibility: hidden; font-size: 0}
	
#menu {
	width: 920px;
	height: 75px;
}
	/* The Holly Hack */
	* html #menu a { height: 1%; }

	#menu ul {
		padding: 0;
		margin: 0;
		border-width: 0;
		list-style: none;
		white-space: nowrap;
	}
	#menu li {
		float: left;
		display: inline;
		padding: 0;
		margin: 0;
		margin-top: 10px;
		margin-left: 15px;
	}
	#menu li a {
		display: block;
		height: 60px;
		text-decoration: none;
		background-repeat: no-repeat;
	}
	#menu li .fresh {width: 132px;}
		#menu li a.fresh:hover {background: url('images/menu.jpg') 0 0}
	#menu li .fancy {width: 142px;}
		#menu li a.fancy:hover {background: url('images/menu.jpg') -147px 0}
	#menu li .customize {width: 161px;}
		#menu li a.customize:hover {background: url('images/menu.jpg') -304px 0}
	#menu li .vital {width: 121px;}
		#menu li a.vital:hover {background: url('images/menu.jpg') -480px 0}
	#menu li .goodies {width: 115px;}
		#menu li a.goodies:hover {background: url('images/menu.jpg') -616px 0}
	#menu li .contact {width: 139px;}
		#menu li a.contact:hover {background: url('images/menu.jpg') -746px 0}

	#menu li a span {visibility: hidden; font-size: 0}

#maincontainer {
	width: 920px;
	background: url('images/bg-main.png') repeat-y;
	float: left;
}

#main {
	width: 920px;
	background: url('images/bg-maintop.jpg') no-repeat;
	min-height: 370px;
	height: auto !important;
	height: 370px;
	padding-top: 18px;
}

#leftside {
	float: left;
	width: 595px;
}

	.posts {margin-left: 20px}
		.post {margin-bottom: 9px;}
		.post .date {
			float: left;
			width: 70px;
		}
		.post .cont {
			float: right;
			width: 505px;
		}

#rightside {
	float: right;
	width: 295px;
}
	.widget {width: 275px; margin-bottom: 9px}

#mainbottom {
	clear: left;
	width: 920px;
	background: url('images/bg-mainbot.png') no-repeat;
	height: 20px;
	font-size: 0;
}
#footer p {
	margin-bottom: 18px;
	text-align: center;
	font-size: 12px;
	line-height: 18px;
	color: #695751;
}

/* PAGINATION: WP-PAGENAVI*/
.wp-pagenavi {margin: 4px 0}
.wp-pagenavi .pages, .wp-pagenavi a, .wp-pagenavi .current {
	display: inline-block;
	margin: 1px;
	width: 22px;
	height: 22px;
	font-size: 12px;
	line-height: 22px;
	font-weight: bold;
	background: #E6D1B3;
	color: #6B532E;
	margin-right: 3px;
	text-align: center;
	border: 1px solid #CCA366;
	vertical-align: middle;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}
	.wp-pagenavi .pages {width: auto; padding: 0 3px;}
	.wp-pagenavi a {}
	.wp-pagenavi a:hover {color: #FFF; background: #BD3900; border: 2px solid #712100; margin: 0 2px 0 0}
	.wp-pagenavi .current, .wp-pagenavi .activeSlide {color: #CCA366; border-width: 2px; margin: 0 2px 0 0}
	.wp-pagenavi a.nav {padding: 0 3px; width: auto; height: auto;}

/* BASE TYPOGRAPHY */
.posts h1 {
	font: normal 18px/24px Tahoma, Geneva, Verdana, sans-serif;
	color: #150600;
}
	.posts h1 a {color: #381000}
	.posts h1 a:hover {color: #712100}
.posts h2 {
	display: block;
	background: url('images/bg-sb-header.png') no-repeat 0% 100%;
	padding-left: 5px;
	margin: 0 0 5px;
	font: normal 18px/32px Tahoma, Geneva, Verdana, sans-serif;
	color: #472B1F;
}
.post .date {
	background: url('images/bg-news.png') no-repeat 50% 0%;
	padding-top: 6px;
}

	.post .date h4, .post .date h5, .post .date h6 {
		text-transform: uppercase;
		text-align: center;
		color: #26211F;
	}
	.post .date h4 {font: normal 12px/12px Tahoma, Geneva, Verdana, sans-serif;}
	.post .date h5 {font: normal 24px/26px Tahoma, Geneva, Verdana, sans-serif;}
	.post .date h6 {font: normal 12px/14px Tahoma, Geneva, Verdana, sans-serif;}

.post h3 {
	color: #712100;
	font: bold 16px/18px Tahoma, Geneva, Verdana, sans-serif;
}
.post h3 span {display: inline-block}
	.post h3 a {
		color: #712100;
		text-decoration: none;
	}
	.post h3 a:hover {color: #BD3900}

.post h4 {
	font-size: 12px;
	line-height: 22px;
}

.post small {
	display: inline-block;
	font-size: 12px;
	line-height: 18px;
	color: #71635D;
	margin-bottom: 9px;
}
	.post small a {color: #995233}

.posts p {
	margin: 0 0 9px;
	font: normal 13px/18px Tahoma, Geneva, Verdana, sans-serif;
	color: #26211F;
}
	.posts p a {color: #BD3900; font-weight: bold;}
		.posts p a:hover {border-bottom: 1px dotted #CC3E00; color: #CC3E00;}
		
	.posts p.tags {
		border-bottom: 1px dotted #997033;
		font-size: 12px;
		color: #71635D;
		margin-bottom: 3px;
	}
		.posts p.tags a {background: transparent; color: #71635D;}
		.posts p.tags a:hover {color: #995233}
		
.posts li {
	font: normal 14px/18px Tahoma, Geneva, Verdana, sans-serif;
	color: #26211F;
}
		
.widget h2 {
	display: block;
	background: url('images/bg-sb-header.png') no-repeat 0% 100%;
	padding-left: 5px;
	margin: 0 0 5px;
	font: normal 18px/32px Tahoma, Geneva, Verdana, sans-serif;
	color: #472B1F;
}
.widget ul, .widget ol {margin: 0; padding: 0; list-style: none}
.widget p, .widget li {
	padding: 4px;
	font: normal 13px/18px Tahoma, Geneva, Verdana, sans-serif;
	color: #26211F;
}
.widget a {color: #8B2900;}
	.widget a:hover {color: #CC3E00}
	.widget p a:hover {border-bottom: 1px dotted #CC3E00}
.widget small {font-size: 11px; line-height: 12px; color: #71635D;}

/* SHOELIST SIDEBAR */
ul.shoelist {
	list-style: none;
	margin: 0;
	padding: 0;
}
	ul.shoelist li {padding: 2px 4px;}
	ul.shoelist li:hover {background: #E7D8BD}
	ul.shoelist a {
		display: block;
		width: 269px;
	}
		ul.shoelist a:hover {text-decoration: none; border: none}

	ul.shoelist a span {
		display: block;
		float: left;
		width: 222px;
		font-weight: bold;
		font-size: 12px;
		line-height: 28px;
		text-transform: capitalize;
		color: #150600;
	}
	ul.shoelist a:hover span {text-decoration: none; border: none;}
	ul.shoelist a img {
		float: right;
		display: block;
		width: 42px;
		height: 28px;
	}

/* TWITTER SIDEBAR FEED */
#tweets li {border-bottom: 1px dashed #D5BB8B;}

/* SOCIAL MEDIA LINKS */
a.ifacebook, a.itwitter, a.ietsy {
	margin: 2px 0;
	padding: 0 0 0 30px;
	display: block;
	background: url('images/icons/social-media.png') no-repeat;
	height: 24px;
	line-height: 24px;
}
	a.ifacebook {background-position: 0 0}
	a.itwitter {background-position: 0 -24px}
	a.ietsy {background-position: 0 -48px}

/* INDEX PAGE CSS */
#index {margin: 0 0 18px 20px}
	#index h2 {
		font: normal 24px/30px Tahoma, Geneva, Verdana, sans-serif;
		color: #1A100B;
	}	
	#index h4 {
		font: normal 16px/22px Tahoma, Geneva, Verdana, sans-serif;
		color: #1A100B;
	}
#showcasenav {
	position: absolute;
	margin: 215px 0 0 30px;
	z-index: 100;
}

#showcasecontainer {
	width: 878px;
	height: 272px;
	border: 1px solid #E2D2B1;
	overflow: hidden;
}
	#showcase img {width: 878px; height: 272px}

/* SHOE GALLERY CSS */
.strip {
	float: left;
	display: inline;
	width: 188px;
	height: 222px;
	background: url('images/bg-strip.jpg') no-repeat 0 0;
	margin-right: 3px;
}
	.strip a.pic {
		display: block;
		margin: 9px 0 0 9px;
		width: 168px;
		height: 112px;
	}
	.strip a.pic img {
		width: 168px;
		height: 112px;
	}
	.strip a.pic:hover img {
		outline: 2px solid #BD3900;
	}
	.striptext {
		margin: 4px 0 0 9px;
	}
	.strip h3 a {
		font: bold 14px/16px Tahoma, Geneva, Verdana, sans-serif;
		color: #1A100B;
	}
		.strip h3 a:hover {color: #BD3900; text-decoration: none;}
	.strip small {
		display: block;
		margin-bottom: 5px;
		font: italic 12px/16px Tahoma, Geneva, Verdana, sans-serif;
		color: #24160F;
	}
	.strip p {
		float: left;
		width: 84px;
		font: normal 12px/16px Tahoma, Geneva, Verdana, sans-serif;
		color: #24160F;
	}

/* SHOE PAGE CSS */
.posts .shoebox {
	width: 575px;
	margin-bottom: 9px;
}
#shoegallery {float: left}

#gallerycontainer {
	width: 360px;
	height: 240px;
	border: 4px solid #FDFBF8;
	overflow: hidden;
}
	#gallery img {height: 240; width: 360px}

#gallerynav {
	margin: 4px 0;
	width: 368px;
}
	#gallerynav a {
		float: left;
		display: block;
		position: relative;
		width: 84px;
		height: 56px;
		margin: 4px;
	}
	#gallerynav a img {
		opacity: 0.8;
		display: inline;
		width: 84px;
		height: 56px;
	}
	#gallerynav a:hover img {
		opacity: 1;
		outline: 4px solid #FFF;
	}
	#gallerynav a.activeSlide img {
		opacity: 1;
		outline: 2px solid #000;
	}
#shoeinfo {
	float: right;
	width: 190px;
}
	
#shoedetails {padding: 45px 0 0 28px}
	.detail {
		float: left;
		width: 65px;
		padding-left: 2px;
		margin-bottom: 9px;
	}

	.posts #shoedetails small {font: normal 14px/16px Tahoma, Geneva, Verdana, sans-serif; margin: 0; color: #26211F}
	.posts #shoedetails h5 {font: bold 18px/24px Tahoma, Geneva, Verdana, sans-serif}
	
	.posts #shoedetails small.yes, .posts #shoedetails small.no, .posts #shoedetails small.unknown {
		display: inline-block;
		padding: 0 20px 9px 2px
	}
		.posts #shoedetails small.yes {background: url('images/icons/check.png') no-repeat 100% 0%;}
		.posts #shoedetails small.no {background: url('images/icons/cross.png') no-repeat 100% 0%;}
		.posts #shoedetails small.unknown {background: url('images/icons/unknown.png') no-repeat 100% 0%;}

	.posts .buy a {
		display: block;
		height: 28px;
		width: 134px;
		background-position: top left;
		text-decoration: none;
		margin-bottom: 36px;
	}
	.posts .buy a:hover {background-position: bottom left}
	.posts .buy a span {visibility: hidden}
	
	.buy a.etsy {background: url('images/b-etsy.png')}
	.buy a.noetsy {background: url('images/b-noetsy.png')}
	.buy a.custom {background: url('images/b-custom.png')}
	.buy a.store {background: url('images/b-store.png')}

/* PINK STYLESHEET */
.posts .pink .shoebox {background: url('images/bg-shoe-pink.jpg') no-repeat}
.posts .pink small.by {color: #CF176D}
.pink #gallerynav a.activeSlide img {outline-color: #CF176D;}

/* GREEN STYLESHEET */
.posts .green .shoebox {background: url('images/bg-shoe-green.jpg') no-repeat}
.posts .green small.by {color: #13AE4C}
.green #gallerynav a.activeSlide img {outline-color: #13AE4C;}

/* FORM CSS */
form.default label {
	font: normal 12px/18px Tahoma, Geneva, Verdana, sans-serif;
	color: #24160F;
}
	.post label i {color: #BD0F00}
	
form.default input, form.default textarea {
	padding: 3px;
	font: normal 12px Tahoma, Geneva, Verdana, sans-serif;
	border: 1px solid #CCAB66;
	background: #E3D3B2;
	color: #150600;
	margin-bottom: 9px;
}
	form.default input.error, form.default textarea.error {
		border: 1px solid #B20B36;
		background: #F1C1BC;
	}
	form.default input {width: 380px}
	form.default textarea {width: 564px}
	
form.default button {
	display: inline-block;
	margin: 1px 3px 1px 1px;
	height: 22px;
	font-size: 12px;
	line-height: 22px;
	font-weight: bold;
	background: #E6D1B3;
	color: #6B532E;
	text-align: center;
	border: 1px solid #CCA366;
	vertical-align: middle;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}
	form.default button:hover {color: #FFF; background: #BD3900; border: 2px solid #712100; margin: 0 2px 0 0}
	
.post #respond {
	position: relative;
	width: 380px;
	padding: 10px;
	left: 50%;
	margin: 9px 0 0 -200px;
	background: #EADDC5;
}
	.post #respond input, .post #respond textarea {
		padding: 3px;
		font: normal 12px Tahoma, Geneva, Verdana, sans-serif;
		border: 1px solid #CCAB66;
		background: #E3D3B2;
		color: #150600;
		margin-bottom: 9px;
	}
	.post #respond input {width: 240px}
	.post #respond textarea {width: 374px}

#errorbox {
	width: 460px;
	position: relative;
	left: 50%;
	margin-left: -230px;
	border: 1px solid #B20B36;
	background: #F1C1BC;
	padding: 6px 0;
}

#errorbox p {
	margin: 0;
	padding: 6px 10px;
	font: normal 12px/18px Tahoma, Geneva, Verdana, sans-serif;
	color: #6B2E3E;
}

#errorbox ul {
	padding: 0 30px 6px;
	margin: 0;
}

#errorbox li {
	font: normal 12px/18px Tahoma, Geneva, Verdana, sans-serif;
	color: #992A47;
	margin-bottom: 0;
}

/* COMMENTS PAGE */
ol.commentlist {
	list-style: none;
	margin: 9px 0; padding: 0;
}
ol.commentlist li {
	margin: 0; padding: 9px;
}
	ol.commentlist li.odd {background: #F5EDE2;}
	ol.commentlist li.even {background: #EEE4D7;}
.commentside {
	float: left;
	display: inline;
	width: 61px;
}
	.commentside img {border: 2px solid #BDB09B;}
.commentcontent p {
	margin: 0 0 0 61px;
}
	p.commentauthor {
		color: #70695C;
		font-weight: bold;
	}
	.commentauthor cite {
		font-style: normal;
		color: #3D3932;
	}
		.commentauthor cite a {color: #712100; background: none; padding: 0;}
		.commentauthor cite a:hover {color: #BD3900; background: none; text-decoration: none;}
	p.commentdate {font-size: 10px; line-height: 15px; color: #8A8171;}
	
/* GIFT CERTIFICATE */
form.gift {}

	form.gift .column {
		margin-right: 10px;
		width: 242px;
		float: left;
	}

	form.gift li, form.gift h4 {
		margin-bottom: 9px;
		font-size: 18px;
		line-height: 24px;
		color: #2E1910;
	}
	
	form.gift label {
		font-size: 14px;
		line-height: 24px;
		color: #2E1910;
	}
		form.gift li.step4 label, li.step3 label.sm {
			font-size: 10px;
			line-height: 18px;
		}

	form.gift p.optionprice {
		margin: 0;
		float: right;
		width: 125px;
		text-align: right;
		font-size: 14px;
		line-height: 24px;
		color: #712100;
	}
	
	li.step4 input, li.step4 textarea, .shipping input, li.step3 select {
		margin-bottom: 9px;
		width: 236px;
		background: #E3D3B2;
		border: 1px solid #995133;
		padding: 2px;
		font: normal 13px Tahoma, Geneva, Verdana, sans-serif;
		color: #150600;
	}
		li.step3 select {width: 240px}
		li.step3 input#City {width: 200px}
		li.step3 input#State {width: 22px}
		li.step3 input#Zip {width: 100px}
		
		li.step4 textarea#Message {
			margin-bottom: 0;
			font-size: 12px;
		}
		label#msgCount {
			margin: 0 9px 9px;
			display: block;
			text-align: right;
		}
		
	#shipping, #personal, #recipient {padding: 10px}
	form.gift #shipping {background: #EADCC6}
	form.gift #personal {background: #E6D7BD}
	form.gift #recipient {background: #EADCC6}
		
	form.gift button {
		background: none;
		border: 0;
		cursor: pointer;
	}
	
	form.gift input.error, form.gift textarea.error, form.gift select.error {
		border: 1px solid #CB162B;
		background: #E7CFB4;
	}
	
table.package {

}
	table.package td {padding: 3px}

	table.package col.standard, table.package col.deluxe {width: 90px}
	table.package col.standard {background: #E3D1B5}
	table.package col.deluxe {background: #D5B990}
	
	table.package thead td {
		font-size: 15px;
		line-height: 18px;
		font-weight: bold;
		text-align: center;
	}
	
	table.package tbody p {
		margin: 0 15px;
		font-size: 13px;
		line-height: 18px;
		text-align: left;
		color: #472B1F;
	}
	
	table.package tbody td h6 {
		margin: 0;
		font-size: 18px;
		line-height: 24px;
		font-weight: bold;
		color: #712100;
		text-align: center;
	}
	
	table.package tbody td small {
		margin: 0;
		display: block;
		font-size: 10px;
		line-height: 12px;
		color: #805C4D;
		text-align: center;
	}
	
	table.package tbody label {
		
	}