/*****
	LESS
*****/
@import "bootstrap.less";
@keyColor: rgb(76,33,33);
@centralColumn: rgba(245,246,244,0.9);
@baseBG: rgb(246,246,244);
@renRed: #4b2123;
@renRedHover: lighten(@renRed, 30);


/*****
	HTML5 CSS RESET
*****/
html,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,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}body {line-height:1;}article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary {display:block;}nav ul {list-style:none;}blockquote,q {quotes:none;}blockquote:before,blockquote:after,q:before,q:after {content:'';content:none;}a {margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:transparent;}ins {background-color:#ff9;color:#000;text-decoration:none;}mark {background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}del {text-decoration: line-through;}abbr[title],dfn[title] {border-bottom:1px dotted #000;cursor:help;}table {border-collapse:collapse;border-spacing:0;}hr {display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0;}input,select {vertical-align:middle;}* {outline: none;} .clear {clear: both;}


/*****
	LAYOUT
*****/
body														{background: @baseBG; background-size: contain; font-family: Arial, sans-serif; font-size: 13px; color: rgb(100,100,100); line-height: 18px; -webkit-font-smoothing: antialiased;}
.wrapper													{width: 960px; margin: 0 auto; background: fadeout(@baseBG, 50%); .clearfix; padding: 0 10px;}
.wrapper.solid												{/* Used when the site does not have a solid white background on wrapper, except header */}
#mainColumn													{width: 650px; padding: 0 20px 15px; float: left; background: #fff;}
#mainColumn.fullWidth										{width: 920px; float: none;}
#sideColumn													{width: 230px; padding: 0 20px 0 10px; float: left; margin-left: 10px; font-size: 14px;}
footer														{clear: both;}


/*****
	HEADER
*****/
#header														{padding-top: 20px; height: 85px; padding-bottom: 20px; overflow: hidden; position: relative;
	.logo													{width: 660px; text-indent: -2px; background: #fff; padding: 10px 20px 0px 10px; line-height: 32px; font-size: 32px; float: left; font-weight: bold; clear: left; text-transform: lowercase;}
	nav														{float: left; overflow: hidden; margin-top: 5px; clear: left; width: 600px;
		li													{float: left; margin-right: 3px;
			&:last-child span								{display: none;}
		}
		a													{background: #fff; text-transform: none; color: @keyColor; font-size: 16px; float: left; padding: 5px 10px 7px; font-weight: bold;
			&:link, &:visited								{color: @keyColor;}
		}
	}
	.cart													{.clearfix; display: block; line-height: 20px; text-align: right; position: absolute; top: 42px; right: 278px;
		span												{width: 19px; height: 20px; background: url(../images/sprite.png) 0px -23px; display: block; position: absolute; top: -3px; left: -25px;}
	}
	.social													{clear: right; position: absolute; top: 14px; right: 0;
		li													{float: left; margin-left: 3px; background: #fff; list-style: none;
			a												{background-image: url(../images/sprite.png); width: 22px; height: 22px; display: block; text-indent: -500px; overflow: hidden;
				&.twitter									{background-position: 0px 0px;}
				&.facebook									{background-position: -69px 0px;}
				&.soundcloud								{background-position: -46px 0px;}
				&.rss										{background-position: -23px 0px;}
				&:hover										{opacity: 0.5;}
			}
		}
	}
	form													{clear: right; position: absolute; top: 37px; right: 0;
		input												{border: 0; background: #fff; width: 240px; height: 11px; line-height: 11px; margin: 3px 0; padding: 9px 10px 1px; font-size: 11px;}
	}
	.account												{position: absolute; top: 65px; right: 0; clear: right; padding: 8px 10px 5px; font-size: 15px; line-height: 18px; background: #fff;}
	.logout													{position: absolute; top: 65px; right: 100px; clear: right; padding: 8px 10px 5px; font-size: 15px; line-height: 18px; background: #fff;}
}


/*****
	MAIN COLUMN
*****/
#mainColumn													{
	article													{border-bottom: 1px dotted #a59091; padding-bottom: 10px; margin-bottom: 15px; position: relative;
		p, ul, ol, img, video, object, iframe				{margin-bottom: 10px;}
		header												{.clearfix; padding-bottom: 15px;
			.title											{width: 420px; float: left;}
			.meta											{width: 200px; float: right; color: rgb(80,80,80); text-align: right; font-size: 12px; text-transform: lowercase; line-height: 14px;
				time										{display: block;}
				span										{display: block;}
				a											{
					&:link, &:visited						{color: rgb(80,80,80);}
				}
			}
		}
	}
	.tags													{font-size: 12px; position: relative; top: -15px;}
	.more													{color: @renRed; position: absolute; bottom: 0; right: 0;
		&:hover												{color: @renRedHover !important;}
	}
	.musicItem												{.clearfix;
		.musicImage											{float: left; margin: 0 20px 0 0;}
		h1													{font-size: 16px; padding-bottom: 5px;}
		div													{}
	}
}


/*****
	ARCHIVE
*****/
#archive													{
	h4														{font-size: 16px; color: #000; padding-bottom: 5px;}
	ul														{padding: 0 0 20px 0px;
		li													{list-style: none;}
	}
}


/*****
	SIDEBAR
*****/
#sideColumn													{font-size: 13px; line-height: 18px;
	.tweets													{
		.tweet												{border-bottom: 1px dotted #a59091; padding-bottom: 10px; margin-bottom: 10px;
			small a											{
				&:link, &:visited							{color: rgb(100,100,100) !important;}
			}
		}
	}
	.box													{margin-bottom: 20px;}
	.subNav													{
		li													{list-style: none;
			&.current_page_item								{
				a											{
					&:link, &:visited						{color: @renRedHover;}
				}
			}
		}
	}
	.aniversary												{display: block; margin-bottom: 10px;
		img													{margin: 0 0 0 -10px; display: block;}
	}
	#archive												{height: 300px; width: 250px; overflow: auto;}
}


/*****
	COMMENTS
*****/
#comments.postCommentTitle									{background: @renRed; color: #fff; float: left; padding: 2px 70px 2px 20px; margin-left: -20px; font-weight: bold;}
#commentList												{clear: both;
	li														{list-style: none; border-bottom: 1px dotted #a59091; padding-bottom: 10px; padding-top: 5px; margin-bottom: 15px;
		&:last-child										{border-bottom: 0px; margin-bottom: 0;}
		p													{padding: 5px 0;}
		time												{font-size: 12px;}
	}
}

.commentForm												{margin-top: 50px;}
#respond													{background: fadeout(@renRed, 10); color: #fff; padding: 10px 20px 15px; width: 630px; margin-left: -20px; position: relative;
	
	.social													{position: absolute; top: -40px; left: 20px;}
	
	p														{border-bottom: 1px dotted #a59091; padding: 0 0 5px 0; margin: 0 0 5px 0;}
	label													{font-weight: bold !important; display: block;}
	input													{margin: 0 0 5px 0;}
	textarea												{height: 60px; margin: 10px 0 5px 0;}
	input, textarea											{display: block; width: 620px; padding: 5px; border: 0; font-size: 13px; line-height: 15px; font-family: Arial, sans-serif}
	button													{padding: 2px 5px; margin: 5px 0 0 0; border: 0; background: #fff; text-transform: uppercase; font-size: 13px;}
	a														{
		&:link, &:visited									{color: #fff;}
		&:hover, &:active									{color: @renRedHover;}
	}
}


/*****
	SHOP HACKY STYLES
*****/
#mainColumn													{
	.product												{
		.summary											{float: left; margin-left: 20px; width: 300px;}
	}
	div.product #tabs .panel								{padding: 15px;}
	#reviews #comments ol.commentlist						{clear: both;}
	.hreview-aggregate .star-rating							{position: relative; top: -10px;}
	.button-alt												{background: @renRed;
		&:hover												{background: @renRedHover;}
	}
	.products												{
		a.button, button.button, input.button, #review_form #submit		{background: @renRed !important; color: #fff !important;
			&:hover											{background: @renRedHover !important; color: #fff !important;}
		}
	}
	.show_review_form, .button,  .checkout-button, #submit  {background: @renRed !important; color: #fff !important;
		&:hover												{background: @renRedHover !important; color: #fff !important;}
	}
	.checkout-button										{margin-top: 0px !important;}
	#review_form_wrapper									{margin-top: 20px;}
	#reviews												{
		.form-submit, .comment-form-comment					{border: 0;}
		#comment											{width: 565px;}
	}
	.panel													{
		ol, ul												{margin-left: 25px; margin-right: 20px;
			li												{list-style-position: outside;}
		}
	}
}


/*****
	FOOTER
*****/
#footer														{background: @renRed; padding: 15px 40px 15px 30px; color: #fff; .clearfix; margin-left: -10px;
	&.fixed													{position: fixed; bottom: 0;}
	h3.hasBorder											{border-bottom: 3px double #a59091; padding-bottom: 2px;} 
	h3														{font-size: 16px; text-transform: lowercase;}
	section													{width: 150px; float: left;
		ul													{/*display: none;*/ padding-top: 10px;
			li												{list-style: none;}
		}
	}
	a														{
		&:link, &:visited									{color: #fff;}
	}
}


/*****
	WORDPRESS STYLES
*****/
.alignleft 													{float: left; margin: 20px 20px 20px 0;}
.alignright 												{float: right; margin: 20px 0 20px 20px;}
.aligncenter 												{display: block; margin: 0 auto; clear: both;}


/*****
	GENERAL STYLING
*****/
h1, h2, h3, h4, h5, h6, .logo, nav a, #mainColumn header .meta, .account, #header form input, #header .cart, .flex-caption, .readMore, #respond label, #respond button, .tags, .logout	{font-family: trajan-pro, "Trajan Pro", serif; font-weight: normal;}
#sideColumn .pageTitle										{width: 230px; margin-left: -10px; padding-left: 10px;}
.pageTitle													{background: @renRed; font-size: 16px; text-transform: lowercase; line-height: 20px; color: #fff; font-weight: bold; width: 100%; padding: 8px 20px 7px; margin: 0 0 15px -20px;
	a   													{
		&:link, &:visited									{color: @keyColor;}
	}  
}
.newsTitle													{font-size:16px; text-transform: lowercase; line-height: 20px; color: rgb(60,60,60); font-weight: bold;
	a   													{
		&:link, &:visited									{color: rgb(60,60,60);}
	} 
}
.readMore													{
	&:link, &:visited										{color: @renRed; background: #eee; font-size: 12px;}
	&:hover, &:active, &:focus								{color: #fff; background: @renRed;}
}


a:link, a:visited 											{color: @renRed; text-decoration: none;}
a:active, a:hover, a:focus 									{color: @renRedHover !important;}
em, i 														{font-style: italic;}
strong, b 													{font-weight: bold;}


@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
    html {
    -webkit-text-size-adjust: none;
        -ms-text-size-adjust: none;
    }
}


/*****
	FLEX SLIDER
*****/
#slides 													{width: 690px; margin: 0 0 0 -20px; overflow: hidden;}
.flex-container a:active, .flexslider a:active 				{outline: none;}
.slides, .flex-control-nav, .flex-direction-nav 			{margin: 0; padding: 0; list-style: none;} 
.flexslider 												{width: 100%; margin: 0; padding: 0;}
.flexslider .slides > li 									{display: none;}
.flexslider .slides img 									{max-width: 100%; display: block;}
.flex-pauseplay span 										{text-transform: capitalize;}
.slides:after 												{content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides 										{display: block;} 
* html .slides 												{height: 1%;}
.no-js .slides > li:first-child								{display: block;}
.flexslider 												{background: #fff; position: relative; zoom: 1; overflow: visible !important; margin-bottom: 10px;}
.slideWrapper 												{overflow: hidden;}
.flexslider .slides 										{zoom: 1;}
.flexslider .slides > li 									{position: relative;}
.flex-container 											{zoom: 1; position: relative;}
.flex-caption 												{max-width: 400px; font-weight: bold; padding: 10px 15px; position: absolute; left: 0; bottom: 20px; font-size: 16px; background: url(rgba.php?r=255&g=255&b=255&a=70) repeat; background: rgba(255,255,255,0.7); color: @renRed; text-shadow: 0 -1px 0 rgba(255,255,255,0.3); margin: 0;}
.flex-direction-nav li a 									{width: 36px; height: 112px; margin: -35px 0 0; display: block; background: url(../images/carousel_sprite.png) no-repeat 0 0; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px;}
.flex-direction-nav li a.next 								{background-position: -44px -26px; right: 0px;}
.flex-direction-nav li a.prev 								{background-position: 0 -26px; left: 0px;}
.flex-direction-nav li a.disabled 							{opacity: .3; filter:alpha(opacity=30); cursor: default;}
.flex-control-nav 											{width: 100%; position: absolute; top: 0px; text-align: center;}
.flex-control-nav li 										{padding: 3px; background: #fff; display: inline-block; zoom: 1; *display: inline;}
.flex-control-nav li:first-child 							{margin: 0;}
.flex-control-nav li a 										{width: 13px; height: 13px; display: block; background: url(../images/carousel_sprite.png) no-repeat -37px 0; cursor: pointer; text-indent: -9999px;}
.flex-control-nav li a:hover 								{background-position: -12px 0;}
.flex-control-nav li a.active 								{background-position: -12px 0px; cursor: default;}
.flex-direction-nav, .flex-control-nav						{display: none;} /* Made visible on hover with JS */