/*
  HTML5 Reset :: style.css 
  ----------------------------------------------------------
  We have learned much from/been inspired by/taken code where offered from:
	
	Eric Meyer					:: http://ericmeyer.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com
	
-------------------------------------------------------------------------------*/

/* Let's default this puppy out
-------------------------------------------------------------------------------*/

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, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

article, aside, figure, footer, header, hgroup, nav, section {display: block;}

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites, like, say for Google Maps custom placemarkers. 
   There has been a report of problems with standard Google maps as well, but we haven't been able to duplicate or diagnose the issue. */
img,
object,
embed {max-width: 100%;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted. 
	don't forget to restore the bullets within content. */
ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, 
blockquote:after, 
q:before, 
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle;}

pre {
	white-space: pre; /* CSS2 */
	white-space: pre-wrap; /* CSS 2.1 */
	white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
	word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}
 
/* Accessible focus treatment
	people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {outline: none;}

small {font-size: 85%;}

strong, th {font-weight: bold;}

td, td img {vertical-align: top;} 

/* Make sure sup and sub don't screw with your line-heights
	gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label, 
input[type=button], 
input[type=submit], 
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}
 
/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover */
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }  



/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/

/* Store CSS */























 /* Responsive */

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
 }

/*	MAIN CONTAINER 
	Set the width to whatever you want the width of your site to be. */
.container { 
	margin: 0 auto;
	text-align: center;
	padding: 1%;
}

/*	SELF CLEARING FLOATS - CLEARFIX METHOD */
.container:after,
.row:after, 
.col:after, 
.clr:after, 
.group:after { 
	content: ""; 
	display: table; 
	clear: both; 
}

/* 	DEFAULT ROW STYLES 
	Set bottom padding according to preference */
.row { padding-bottom: 2em;
}

/* DEFAULT COLUMN STYLES */
.col { 
	display: block;
	float: left;
	width: 90%;
	margin-bottom: 20px;
}

@media ( min-width : 768px ) {
	
	.col {
	  margin-bottom: 0;
	}
	
	.gutters .col {
		margin-left: 6%;
	}
	
	.gutters .col:nth-of-type(1) { 
		margin-left: 0; 
	}
	
}

@media ( max-width : 768px ) {
	
	header {
		height: 75px;
	}
	
		
	
	footer .copyright {
	 
	 float: none;
	 display: block;
	 margin: 10px 0px;
	 text-align: center;
	  
	}
	
	footer .creditcards {
	 
	 float: none;
	 display: block; 
	 margin: 10px 0px;
	 text-align: center;
	  
	}
	
	footer .creditcards a {
	 
	 margin: 5px 5px !important; 
	  
	}
	
	footer .socials {
	 
	 float: none;
	 display: block; 
	 margin: 10px 0px;
	 text-align: center;
	  
	}
	
	footer .socials a {
	 
	 margin: 5px 5px;
	 display: inline-block;
	  
	}
	#product-grid .product-details {
		max-width: 40%;
	}
}

/*	COLUMN WIDTH ON DISPLAYS +768px 
	You might need to play with media queries here to suite your design. */
@media ( min-width : 768px ) {
	.span_1 { width: 8.33333333333%; }
	.span_2 { width: 16.6666666667%; }
	.span_3 { width: 25%; }
	.span_4 { width: 33.3333333333%; }
	.span_5 { width: 41.6666666667%; }
	.span_6 { width: 50%; }
	.span_7 { width: 58.3333333333%; }
	.span_8 { width: 66.6666666667%; }
	.span_9 { width: 75%; }
	.span_10 { width: 83.3333333333%; }
	.span_11 { width: 91.6666666667%; }
	.span_12 { width: 100%; }
	
	.gutters .span_1 { width: 6.5%; }
	.gutters .span_2 { width: 15.0%; }
	.gutters .span_3 { width: 23.5%; }
	.gutters .span_4 { width: 32.0%; }
	.gutters .span_5 { width: 40.5%; }
	.gutters .span_6 { width: 44.0%; }
	.gutters .span_7 { width: 57.5%; }
	.gutters .span_8 { width: 66.0%; }
	.gutters .span_9 { width: 74.5%; }
	.gutters .span_10 { width: 83.0%; }
	.gutters .span_11 { width: 91.5%; }
	.gutters .span_12 { width: 100%; }
}

body {
  
    background-color: #ffffff;
  
  font: normal 300 12px/21px 'YACHT', serif;
}

section {
  padding-bottom: 2em;
}

h1, h2, h3, h4 {
  position: relative;
  text-transform: uppercase;
  font: normal 700 'YACHT', sans-serif;
  letter-spacing: 1px;
  color: #ff0000;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 23px;
  padding-bottom: 5px;
  margin-bottom: 20px;
}

h3 {
  font-size: 17px;
  padding-bottom: 2px;
  border-bottom: 1px solid #ffffff;
  margin-bottom: 20px;
}

h4 {
  font-size: 17px;
}

h2 small, h3 small {
  font-weight: normal;
  position: absolute;
  right: 0;
  bottom: 0;
}

p {
  margin: 0 0 20px;
}

a {
  color: #ff0000;
  text-decoration: none;
}

a:hover {
  color: #ff0000;
}

hr {
  margin: 20px 0;
  border-color: #ddd;
}

header {
  background-color: #ff0000;
  font-weight: 300;
  text-align: center;
}

header img {
	width: 90%;
	margin: 3% 0;
}

nav.menu {
  height: 40px;
  margin: 0 auto;
  width: 90%;
}

nav.menu ul li {
  float: left;
  position: relative;
  z-index: 9999;
}

nav.menu a {
  padding: 0 15px;
  line-height: 40px;
  display: block;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
}

nav.menu ul li a:hover {
  color: #ff0000 !important;
  background-color: #ffffff !important;
}

nav.menu ul ul {
  display: none;
}

nav.menu ul li:hover ul {
  display: block;
  position: absolute;
  z-index: 9999;
  background-color: #ff0000;
}

nav.menu ul li li a {
  text-transform: none;
  letter-spacing: 0;
  line-height: 30px;
  width: 200px;
}

nav.menu #cart {
  cursor: pointer;
}

#wrap {
  min-height: 580px;
  background-color: #ffffff;
  color: #ff0000;
}

#wrap a {
  color: #ff0000;
}

#wrap a:hover {
  color: #ff0000;
}

#content {
  padding: 20px;
}

nav.pagination {
  text-align: center;
}

nav.pagination span,
nav.pagination a {
  color: #aaa;
  margin: 0 5px;
}

#product-grid,
#roster section {
	text-align: center;
}

#product-grid .product {
  /*float: left;*/
  display: inline-block;
  margin: 3% 3%;
  font-size: 0.9em;
}

#product section p {
	text-align: left;
	font-size: 15px;
	line-height: 23px;
	letter-spacing: 1px;
}

#product section h3 {
	font-size: 33px;
	letter-spacing: 1px;
	text-align: left;
	line-height: 36px;
}

#product { padding: 6%;}

#product-grid .image-wrapper {
  max-width: 400px;
  /*height: 436px;*/
  margin-bottom: 30px;
  position: relative;
}

#product-grid .image {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
  display: block;
}

#product-grid .image.without-cover {
  background-size: auto;
}

#product-grid .image-wrapper .fa {
  position: absolute;
  left: 90px;
  top: 115px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 20px;
  display: none;
}

#product-grid .image-wrapper:hover .fa {
  display: block;
}

#product-grid .image-wrapper .fa:hover {
  color: white;
  cursor: pointer;
}

#product-grid .variations {
  position: relative;
  color: #ff0000;
  font-size: 14px;
  font-weight: normal;
}

#product-grid .variations div {
	display: inline-block;
}

#product-grid .variations div a {
	margin-right: 5px;
	font-weight: bold;
}

#product-grid .product-details {
	width: 100%;
	text-align: left;
	height: 100%;
}

.product-details a{
	text-transform: uppercase;
	float: left;
	font-size: 15px;
	font-weight: bold;
	vertical-align: top;
	margin-top: 4px;
}

#product-grid .pricetag {
	margin:0;
	padding:0;
	float: right;
	list-style:none;
	vertical-align: middle;
}	
#product-grid .pricetag li, .pricetag a{
	float:right;
	height:30px;
	line-height:33px;
	letter-spacing: 1px;
	position:relative;
	font-size:15px;
	width: 100%;
	margin-bottom: 3%;
}	
#product-grid .pricetag a{
	margin-left:20px;
	padding:0 10px 0 12px;
	background:#FF0000;
	color:white;
	text-decoration:none;
	border: 0;
}	
#product-grid .pricetag a:before{
	content:"";
	float:left;
	position:absolute;
	top:0;
	left:-15px;
	width:0;
	height:0;
	border-color:transparent #FF0000 transparent transparent;
	border-style:solid;
	border-width:15px 15px 15px 0;		
}	
#product-grid .pricetag a:after{
	content:"";
	position:absolute;
	top:12px;
	left:0;
	float:left;
	width:6px;
	height:6px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	background:#fff;
}	

.socials {
	float: right;
	font-size: 25px;
}
.socials i {
	margin-left: 20px;
}

section.highlight-box h3 {
	float: right;
}

#product-grid select {
	width: 140px;
	line-height: 24px;
}

#product-grid button {
  position: absolute;
  right: 0;
  border: 1px solid white;
}

#product #variations {
	position: relative;
	margin-bottom: 3em;
}

#product #variations #cart_variation_id {
	padding: 7px;
	border: 1px solid red;
	border-radius: 2px;
	height: 33px;
	letter-spacing: 1px;
	font-size: 14px;
	line-height: 1em;
	text-transform: uppercase;
}

#product #variations button {
  height: 33px;
  margin-right: 5px;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#product .highlight-box {
  display: block;
  text-align: left;
}

#product .highlight-box .fa {
  margin-top: 4px;
  font-size: 28px;
}

#product a.highlight-box:hover {
}

#product ol {
  margin: 0 20px;
}

#product #social li {
  float: left;
  width: 65px;
}

#order table {
  margin-bottom: 40px;
  width: 100%;
}

#order table thead th, #order table tbody td {
  text-align: left;
  vertical-align: top;
}

#order table thead th {
  vertical-align: bottom;
}

#order table tbody td + td {
  text-align: right;
  width: 130px;
}

#order table#metadata td {
  width: 50%;
}

#order table#metadata td + td {
  text-align: left;
}

#news .aside h3:first-child,
#news-item .aside h3:first-child {
  margin-top: 3px;
}

#news article {
  padding-bottom: 20px;
}

#news article + article {
  padding-top: 40px;
  border-top: 1px solid #ffffff;
}

#news-item h2 {
  padding-right: 75px;
}

article header {
  background: transparent;
  margin-bottom: 20px;
  font-weight: normal;
}

#news-item article ol {
  margin-left: 20px;
}

#news-item article ol ol,
article ol ul {
  font-size: 0.9em;
  list-style: none;
  margin: -6px 0 6px 0;
  color: #aaa;
}

#news-item article a, p a, #order a {
  color: red !important;
  text-decoration: underline;
}

#news-item article a:hover, p a:hover, #order a:hover {
  border-color: #333;
  color: #333 !important;
}

#news-item article ul,
.history-item ul {
  list-style: initial;
  list-style-position: inside;
  margin-bottom: 20px;
}

#roster ul li {
	float: left;
	margin: 0 20px 20px 0;
  width: 200px;
}

#history section:nth-child(odd) {
  padding: 2em;
  background: #fafafa;
  margin: 0 -20px 20px;
}

.full-width #product-grid .product {
  margin-bottom: 0;
}

#bit-events {
  font-family: inherit;
}

#bit-events td a {
  font-size: 12px !important;
}

/* Remove column headers, Facebook comments, RSVP, lineup */
#bit-events a.bit-track-artist-header,
#bit-events th,
#bit-events .bit-description-links,
#bit-events .bit-rsvp,
#bit-events .lineup {
	display: none !important;
}

#bit-events .bit-date {
	width: 15%;
}

#bit-events .bit-venue {
	width: 30%;
}

footer {
  background-color: white;
  color: red;
  font-size: 0.9em;
  font-weight: 300;
  letter-spacing: 1px;
  padding: 1% 3%;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
}

footer .copyright {
 
 display: inline-block; 
  
}

footer .creditcards {
	float: left;
	font-size: 25px;
}


.icons li {
  display: inline-block;
  margin: 0 5px;
}

select {
	-webkit-appearance: none;
	font-weight: bold;
	font-size: 13px;
	border: 0;
	cursor: pointer;
	color: red;
	font-family: inherit;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
}

select:focus {
  outline: none;
}

.ellipsis {
  display: block;
	text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.pull-up {
  margin-top: -20px;
}

.pull-down {
  margin-bottom: -20px;
}

small {
  font-size: 11px;
}

.button {
	padding: 8px 10px;
	background: #ff0000;
	color: #ffffff !important;
	font-size: 14px;
	font-weight: bold;
	line-height: 1em;
	border: 0;
	display: inline-block;
	border-radius: 2px;
	float: left;
}

.button + .button {
  margin-left: 5px;
}

.button:hover {
	background: #333;
	color: #eee !important;
}

.button:active, .button:focus {
  outline: none;
}

.news-snippet {
  font-size: 12px;
  margin-bottom: 5px;
  color: #aaa;
}

.date {
  float: left;
  margin-right: 10px;
  height: 43px;
  width: 40px;
  background: #252C30;
  color: #eee;
  letter-spacing: 1px;
  text-align: center;
}

.date:hover {
  background: #39CBE0;
}

.day {
  display: block;
  margin-top: 15px;
  font-size: 18px;
  line-height: 3px;
  font-weight: bold;
}

.month {
  font-size: 10px;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
}

.thumbnail {
  float: left;
  margin-right: 10px;
}

/* Product Carousel */

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
}

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
}

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
}

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  max-width: 600px;
  border: 0;
}

.rslides_tabs li {
  float: left;
}

#product-gallery-pager li {
  float: left;
}

#product-gallery-pager img {
  max-width: 80px;
  margin: 5px 5px 20px 0;
}

#scrollUp {
	bottom: 20px;
	right: 20px;
	height: 38px;
	width: 38px;
	background: url(http://s0.limitedrun.com/images/1060808/top.png) no-repeat;
	opacity: 0.5;
}

#scrollUp:hover {
  opacity: 1;
}

.aside {
  overflow: hidden;
}

/* Responsive Nav */

nav a#pull {
	display: none;
}

@media screen and (max-width: 768px) {
	nav ul {
		display: none;
	}	
	nav li {
		width: 100%;
		background: #222;
  }
  
  #product {
	  padding-top: 8%;
  }
  
  nav li li, nav ul li:first-child {
    display: none;
  }
  
  	footer {
		position: relative;
	}
  
	nav a {
  	width: 100%;
  	}
  		
	nav a#pull {
		/*display: block;*/
	}
	nav a#pull:after {
    content: "";
    background: url("http://s0.limitedrun.com/images/1066056/nav-icon.png") no-repeat;
    width: 30px;
    height: 30px;
    color: #FFF;
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 10px;
	}
}