/* @import  url('http://files.pressureprinting.com/bigcartel/style-tiles/style.css'); */


/* * * * * * * * * * *
 *                   *
 *       fonts       *
 *                   *
 * * * * * * * * * * */

/*
 * Web Fonts from fontspring.com
 *
 * All OpenType features and all extended glyphs have been removed.
 * Fully installable fonts can be purchased at http://www.fontspring.com
 *
 * The fonts included in this stylesheet are subject to the End User License you purchased
 * from Fontspring. The fonts are protected under domestic and international trademark and 
 * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
 * distributing this font software.
 *
 * (c) 2010-2011 Fontspring
 *
 *
 *
 *
 * The fonts included are copyrighted by the vendor listed below.
 *
 * Vendor:      exljbris
 * License URL: http://www.fontspring.com/fflicense/exljbris
 *
 *
 */

@font-face {
    font-family: 'MuseoSans300';
    src: url(http://files.pressureprinting.com/bigcartel/fonts/museosans/museosans_300_macroman/MuseoSans_300-webfont.eot);
    src: url(http://files.pressureprinting.com/bigcartel/fonts/museosans/museosans_300_macroman/MuseoSans_300-webfont.eot?#iefix) format('embedded-opentype'),
         url(http://files.pressureprinting.com/bigcartel/fonts/museosans/museosans_300_macroman/MuseoSans_300-webfont.woff) format('woff'),
         url(http://files.pressureprinting.com/bigcartel/fonts/museosans/museosans_300_macroman/MuseoSans_300-webfont.ttf) format('truetype'),
         url(http://files.pressureprinting.com/bigcartel/fonts/museosans/museosans_300_macroman/MuseoSans_300-webfont.svg#MuseoSans300) format('svg');
    font-weight: normal;
    font-style: normal;
	}

@font-face {
    font-family: 'MuseoSans300';
    src: url(http://files.pressureprinting.com/bigcartel/fonts/museosans/museosans_300italic_macroman/MuseoSans_300_Italic-webfont.eot);
    src: url(http://files.pressureprinting.com/bigcartel/fonts/museosans/museosans_300italic_macroman/MuseoSans_300_Italic-webfont.eot?#iefix) format('embedded-opentype'),
         url(http://files.pressureprinting.com/bigcartel/fonts/museosans/museosans_300italic_macroman/MuseoSans_300_Italic-webfont.woff) format('woff'),
         url(http://files.pressureprinting.com/bigcartel/fonts/museosans/museosans_300italic_macroman/MuseoSans_300_Italic-webfont.ttf) format('truetype'),
         url(http://files.pressureprinting.com/bigcartel/fonts/museosans/museosans_300italic_macroman/MuseoSans_300_Italic-webfont.svg#MuseoSans300Italic) format('svg');
    font-weight: normal;
    font-style: italic;
	}


@font-face {
    font-family: 'MuseoSans700';
    src: url(http://files.pressureprinting.com/bigcartel/fonts/museosans/museosans_700_macroman/MuseoSans_700-webfont.eot);
    src: url(http://files.pressureprinting.com/bigcartel/fonts/museosans/museosans_700_macroman/MuseoSans_700-webfont.eot?#iefix) format('embedded-opentype'),
         url(http://files.pressureprinting.com/bigcartel/fonts/museosans/museosans_700_macroman/MuseoSans_700-webfont.woff) format('woff'),
         url(http://files.pressureprinting.com/bigcartel/fonts/museosans/museosans_700_macroman/MuseoSans_700-webfont.ttf) format('truetype'),
         url(http://files.pressureprinting.com/bigcartel/fonts/museosans/museosans_700_macroman/MuseoSans_700-webfont.svg#MuseoSans700) format('svg');
    font-weight: normal;
    font-style: normal;
	}

@font-face {
    font-family: 'MuseoSans700';
    src: url(http://files.pressureprinting.com/bigcartel/fonts/museosans/museosans_700italic_macroman/MuseoSans_700_Italic-webfont.eot);
    src: url(http://files.pressureprinting.com/bigcartel/fonts/museosans/museosans_700italic_macroman/MuseoSans_700_Italic-webfont.eot?#iefix) format('embedded-opentype'),
         url(http://files.pressureprinting.com/bigcartel/fonts/museosans/museosans_700italic_macroman/MuseoSans_700_Italic-webfont.woff) format('woff'),
         url(http://files.pressureprinting.com/bigcartel/fonts/museosans/museosans_700italic_macroman/MuseoSans_700_Italic-webfont.ttf) format('truetype'),
         url(http://files.pressureprinting.com/bigcartel/fonts/museosans/museosans_700italic_macroman/MuseoSans_700_Italic-webfont.svg#MuseoSans700Italic) format('svg');
    font-weight: normal;
    font-style: italic;
	}


/* * * * * * * * * * *
 *                   *
 *       reset       *
 *                   *
 * * * * * * * * * * */


/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}



/* * * * * * * * * * *
 *                   *
 *      basics       *
 *                   *
 * * * * * * * * * * */


/* http://paulirish.com/2012/box-sizing-border-box-ftw/ */
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}

body {
	min-width: 300px; min-width: 18.75rem; /* we're responsive but we're not ridiculous -- 300px */
	background-color: white;
	font-family: "MuseoSans300", "Helvetica", sans-serif; /* verdana is a better fallback but helvetica has proper foot/inch marks with more reasonable side-bearings and those actually get shown to everybody as Museo dosen't include them... so going with that */
	color: #5f5f5f;
	font-size: 12px; font-size: 0.75rem; /* 12px */
	line-height: 20px; line-height: 1.25rem; /* fixed to rems (not unitless) for baseline grid. 12px * 166.6-% = 20px  */
	
	/* because when you turn an iphone sideways crazy stuff happens, inconsistently... */
	/* http://stackoverflow.com/questions/2545542/font-size-render-in-iphone */
    -webkit-text-size-adjust: 100%;
    /* and apparently this is an ms thing too? */
    -ms-text-size-adjust: 100%;
    
	}
	
.bodytext p, p.bodytext, .bodytext ul {
	max-width: 42em; /* keep to decent line lengths */
	margin-bottom: 1.625em;
	}


/* I style-linked the italics
   but because font weights are super buggy (500 != 500 in lots of browsers?) -
    - we're keeping different font-weights as seperate fonts */
   
em, i { font-style: italic; }
strong, b { font-family: "MuseoSans700", "Verdana", sans-serif; }


a {
	text-decoration: none;
	color: #BF4D00;              /* salmony */
	}
	a:hover  { color: #B30000; }  /* red */
		.touch a:hover { color: #BF4D00; }
	a:active { color: #231F20; } /* black */


/* modular header styles? modular header styles! */

.h {
	text-transform: uppercase;
	color: #5f5f5f;
	}
	.h a,
	 .touch .h a:hover { color: #5f5f5f; }
	.h a:hover  { color: #B30000; }
	.h a:active { color: #231F20; }

.h.thick {
 	font-family: "MuseoSans700", "Verdana", sans-serif;
 	color: #3F3F3F;
	letter-spacing: 0.2em;
	}
	.h.thick a,
	 .touch .h.thick a:hover { color: #3F3F3F; }
	.h.thick a:hover { color: #B30000; }
	.h.thick a:active { color: #231F20; }

.h.thin, .bullet-list-h, .slide-nav-h {
	letter-spacing: 0.3em;
	}

.h.large {
	font-size: 1.25em;
	}
 
.h.tiny, .logo-name {
 	font-size: 0.825em;
 	}

/* some stuff, when it line breaks, should keep visually tighter & not break all the way down to next line on grid */
/* say, a title in a fixed-height box where it's not going to mess up the ryhtmn, will save space, will keep the title together, etc */
.h.short-breaks {
	line-height: 1.125;
	}
.h.small.short-breaks {
	margin-top: 0.1875em;
	}


ul {
	margin-left: 1em;
	}

hr {
	border: 1px solid #e8e8e8;
	border-bottom: none;
	}

.price {
	color: #B30000;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	}
	.price.large {
		font-size: 1.25em;
		line-height: 0.825em;
		}

.bullet-list {
	list-style: disc;
	}
	.bullet-list dd:before { /* fake ul styles for dls */
		content: '•\0000a0\0000a0\0000a0'; /*  s! http://stackoverflow.com/questions/190396/adding-html-entities-using-css-content */
		}
	.bullet-list dd  {
		text-indent: -1.3125em;
		padding-left: 1.3125em;
		padding-right: 0.625em;
		}
		/* 
		hmmm maybe this stuff is a bad idea
		
		line-height: 1.25em;
		margin-bottom: 0.4375em;
		margin-top: .25em;
		}
		should I move these down? anyways keep single-bullet-point=text-that-breaks closer together but try to do what we can not to break baseline grid by achieving line height with margins... funny how this vibrates from .4357 -> .5, gives me the feeling I'm not understanding something that would make my life easier if I knew what to fix at a lower level...
		@media (min-width: 415px) { .bullet-list dd {
			margin-bottom: 0.5em;
			}}
		@media (min-width: 768px) { .bullet-list dd {
			margin-bottom: 0.4375em;
			}}
		@media (min-width: 1200px) { .bullet-list dd {
			margin-bottom: 0.5em;
			}}
			*/

.bodytext cite { font-style: italic; }

blockquote p {
	font-style: italic;
	padding-left: 2em;
	padding-right: 2em;
	color: #9f9f9f; /* brad insisted that it be lighter and we settled on this (other standard grays are too light */
	}

.quote-cite {
	text-align: right;
	font-style: normal;
	color: #9f9f9f; /* repetition or !important, which is worse? */
	}
	/* superhacky... with "tiny" class on the p element the padding and max-width em values resolve to smaller pixel values.. instead of fixing the root problem (with rems? different max width definitions for p.tinys? which I would need to change for different breakpoints as ratio of tiny to root em size changes... ugh) I made a trial-and-error by-eye band-aid */
	p.quote-cite {
		max-width: 56em;
		padding-right: 4em;
		}
		@media (min-width: 1200px) { p.quote-cite {
			padding-right: 6em;
			}
		}
	

/* special class for stuff with css sprite background image that degrades from svg to png
   social icons, magnifying glass, pp logo, close x */
   
.svg-icon {
	font-size: 16px; /* doing this lets browsers that don't support scaling or ems do it right? */
	background-size: 16.0625em; /* icons.png is 208px wide, ie 13em @16px/em */
	background-repeat: no-repeat;
	background-image: url(http://files.pressureprinting.com/bigcartel/images/icons-spaced.png);
	}
	.inlinesvg .svg-icon {
		font-size: 1.33333333333em;  /* = 16px at our root body size of .75em. Enables em zooming, while old browsers get pngs which they don't try to scale... */
		background-image: url(http://files.pressureprinting.com/bigcartel/images/icons-spaced.svg);
		}

.form-required::after {
	color: #B30000;
	font-size: 150%;
	content: "*";
	}


	
.footnotes {
	color: #9f9f9f; /* brad's light gray */
	border-top: 1px solid #e8e8e8;
	padding: 1em;
	padding-top: .3125em;
}
.footnotes sup {
	display: block;
	float: left;
	margin-left: -1em;
	margin-top: -0.3125em;
}



/* * * * * * * * * * *
 *                   *
 *  layout basics    *
 *                   *
 * * * * * * * * * * */

.main-content-container {
	padding-left: 1.25em;
	padding-right: 1.25em;
	}
	@media (min-width: 415px) {
	.main-content-container {
		padding-left: 2em;
		padding-right: 2em;
		}
	}
 .page-header,
 .page-footer,
 .slide-nav-block {
	padding-left: 1em;
	padding-right: 1em;
	}
 .width-contain {
 	max-width: 64em;
	margin: 0 auto;	
	}


/* * * * * * * * * * *
 *                   *
 *  header + footer  *
 *                   *
 * * * * * * * * * * */
 
 
 #tumblr_controls {
	 /* clever bastards had set it at 2147483647, ie max 32bit signed integer... */
	 z-index: 99 !important;
}
 
.page-header {
	position: relative; /* need this to set z index to get it up over dropdown menu */
	z-index: 9999; /* do cover tumblr controls! otherwise they cover our nav! */
	height: 3.125em;
	padding-top: .5em;
	}
	@media (min-width: 768px) {
		#tumblr_controls{
			top: 4em !important;
		}
	}
	
.page-header, .page-footer {
	width: 100%;
	background-color: #231F20; /* black */
	box-shadow: 0 0 0.5em 0 rgba(0,0,0,0.7);
	text-transform: uppercase;
	}

.page-header a,
 .touch .page-header a:hover  { color: #D3D3D3; }
	.page-header a:hover { color: white; }
	.page-header a:active { color: #B30000; }


/* need this container to get all the margins and things to zoom along with root em element
   while actual element is more fixed (no) thanks to svg-icon class */
.P-contain {
	margin-top: .625em;
	float: left;
	margin-right: 1.5em;
	}

.P {
	background-position: right top;
	width: 1.25em;
	height: 1.0625em;
	background-size: 14em; /* override default background size set in (.inlinesvg .svg-png-icon) to shrink P logo to fit in thin, small-screen header */
	}

@media (min-width: 68em) { /* inexact breakpoint, just to get top header to spread out a little by having logo + social icons bleed off to left and right */
	.P-contain {
		margin-left: -3.5em
		}
	.top-nav {
		margin-right: -6em;
		}
	}


.logo-name {
	float: left;
	letter-spacing: 0.6em;
	margin-top: 0.625em;
	}
	.logo-name a { color: #7f7f7f; }
	/* a:hover .logo-name  { color: white;	  } */
	/* a:active .logo-name { color: #B30000; } */

.logoAndName:hover .logo-name a {
	color: white;
	}
.logoAndName:active .logo-name a { color: #B30000; }

.secret:hover { color: #900 !important; }
	

.top-nav {
	float: right;
	margin-top: 0.1875em;
	}

	.top-nav * {
		display: inline-block;
		}
	
	.top-nav li, top-nav dd {
		border-right: 1px solid #3f3f3f;
		padding: 0 .75em;
		line-height: 1em;
		font-size: 0.9375em;
		letter-spacing: 0.2em;
		}
	
	.top-nav li:first-child, top-nav dd:first-child {
		padding-left: 0;
		}
	
	.top-nav li:last-child, top-nav dd:last-child {
		border-right: none;
		padding-right: 0;
		}
	.top-nav .current {font-family: "MuseoSans700", verdana, sans-serif;}
	.top-nav .current a { color: white;}

.social { /* class is applied to actual links, not lis or ul */
	width: 0.75em;
	height: 0.75em;
	margin-bottom: .0625em;
	}
	.social-icons-top li { 
		border-right: none;
		padding-left: 0;
		}
	.social-icons-bottom *, .social-icons-top, .social-icons-top *, .top-nav, .top-nav * {
		vertical-align: middle;
		}
	
	/* sprites! */
	.instagram,
	 .touch .instagram:hover { background-position: -3em      0;    }
		.instagram:hover	    { background-position: -3em      -1em; }
		.instagram:active    { background-position: -3em      -2em; }
	.facebook,
	 .touch .facebook:hover { background-position: 0      0;    }
		.facebook:hover	    { background-position: 0      -1em; }
		.facebook:active    { background-position: 0      -2em; }
	.twitter,
	 .touch .twitter:hover  { background-position: -1em   0;    }
		.twitter:hover      { background-position: -1em   -1em; }
		.twitter:active     { background-position: -1em   -2em; }	
	.rss,
	 .touch .rss:hover      { background-position: -2em   0;    }
		.rss:hover          { background-position: -2em   -1em; }
		.rss:active         { background-position: -2em   -2em; }
	
	.social-icons-bottom {
		width: 100%;
		text-align: center;
		margin-left: 0; /* ul basic has margin-left?? */
		margin-bottom: .25em;
		}
		
	.social-icons-bottom * {
		display: inline-block;
		padding-left: 0.75em;
		}
	
	.social-icons-bottom li:first-child {
		padding-left: 0;
		}

footer small, footer address {
	display: block;
	width: 100%;
	text-align: center;
	line-height: 1.25;
	}
	footer small.tiny.thin.h,
	 footer address.tiny.thin.h {
		letter-spacing: 0;
		color: #7f7f7f; /* override */
		}
		@media (min-width: 415px ) {
			footer small.tiny.thin.h,
			 footer address.tiny.thin.h {
				letter-spacing: 0.1em;
			}}


/* sticky footer stuffs */

/* http://www.alistapart.com/articles/footers/ */
html, body { height: 100%; }
.everything-container {
    position: relative;
    min-height: 100%;
	padding-bottom: 3.5em; /* same as page-footer height */
	}
	@media (min-width: 768px) {.everything-container {
		padding-bottom: 2.9375em;
		}}
.page-footer {
    position: absolute;
    bottom: 0;
	padding-bottom: .4375em;
	padding-top: 0.125em;
	}
	@media (min-width: 768px) {
	.page-footer {
			padding-top: .625em;
	}}


/* http://nicolasgallagher.com/micro-clearfix-hack/ */
/* For modern browsers */
.cf:before, .cf:after {
    content:"";
    display:table;
}
.cf:after { clear:both; }

/* For IE 6/7 (trigger hasLayout) */
.cf { zoom:1; }



/* * * * * * * * * * *
 *                   *
 *  notification bar *
 *                   *
 * * * * * * * * * * */

.notification-bar {
	position: relative;
	z-index: 998;
	background-color: #EFEFEF;
	box-shadow: 0 0 0.5em 0 rgba(0,0,0,0.3);
	text-align: center;
	height: 2em;
	padding-top: 0.25em;
	}
	.notification-bar p {
		margin-left: auto;
		margin-right: auto;
		}



/* * * * * * * * * * *
 *                   *
 *      slidebar     *
 *                   *
 * * * * * * * * * * */

.slide-nav {
	background-color: #E8E8E8;
	padding: 1em 0;
	background-image: url(http://files.pressureprinting.com/bigcartel/images/bottom-inset-shadow-25.png);
	background-position: bottom;
	background-repeat: repeat-x;
	}
	
.slide-nav hr { border-color: #D3D3D3; }

.slide-nav a,
 .touch .slide-nav a:hover { color: #5f5f5f; }
	.slide-nav a:hover     { color: white;   }
	.slide-nav a:active    { color: #B30000; }

.slide-nav form {
	margin-left: 0.5em;
	}

.slide-nav-h {
	margin-bottom: 0.5em;
	}

.slide-nav-block {
	padding-bottom: 1em;
	margin-bottom: 1em;
	border-bottom: 1px solid #D3D3D3;
	}

.main-content {
	padding: 1em 0;
	}

	


/* begin slidey stuff */	



/* don't show the slide nav until js has determined whether it should be shown or not */
/* script always hides if we're <768px and reads possible web storage or defaults to open on bigger screens */
.js .slide-nav-container {
	display: none;
	}


/* toggle button */

/* no javascript? don't show a toggle button that does nothing */
.toggle-btn { display: none; }

.js .toggle-btn {
	display: block;
	color: #5f5f5f;
	float: right;
	margin-right: 1em;
	border-radius: 0.375em;
	width: 5.75em;
	height: 2.25em;
	}

	/* clipping box used to get shadow to only show up over slide-nav but not over main-content,
	   so it looks like it's a tab coming up out of main-content */
	.js .toggle-btn-clip {
		height: 2.5em; /* extra room for shadow */
		width: 7.5em; /* 5.75 width + 1.5 margin-right + .25 for shadow */
		overflow: hidden;
		float: right;
		position: relative;
		z-index: 997;
		}

	.js .toggle-btn-icon {
		background-size: 11.5625em; /* shrink for small screen - 185px @16px/em */
		width: 30%;
		margin-left: -15%;
		float: right;
		height: 100%;
		}

	.js .toggle-btn-txt.tiny.thin.h {
		letter-spacing: 0.125em;
		width: 80%;
		text-align: center;
		}

	.js .slide-nav-closed .toggle-btn {
		background-color: #E8E8E8;
		margin-top: -0.25em;
		box-shadow: inset 0 0.125em 0.25em rgba(0, 0, 0, 0.2);
		}

		.js .slide-nav-closed .toggle-btn-txt {
			margin-top: 0.625em;
			}
		.js .slide-nav-closed .toggle-btn-icon {
			background-position: -7.875em -.9375em;
			}
		.no-touch.js .slide-nav-closed .toggle-btn:hover .toggle-btn-icon {
		/* bg image shrunk to 11.56253m/16.0625em = %71.984435797665
		   sprite image set up so each state is y -2em @100%
		   so for these, -2.15953307392995em */
			background-position: -7.875em -3.09703307392995em;
			}
		.no-touch.js .slide-nav-closed .toggle-btn:hover .toggle-btn-txt {
			color: white;
			}
		.js .slide-nav-closed .toggle-btn:active .toggle-btn-icon {
			background-position: -7.875em -5.2565661478599em;
			}
		.js .slide-nav-closed .toggle-btn:active .toggle-btn-txt {
			color: #B30000;
			}

	.js .slide-nav-open .toggle-btn {
		background-color: white;
		margin-top: .5em;
		box-shadow: 0 0 0.5em 0 rgba(0, 0, 0, 0.25);
		}
		
		.js .slide-nav-open .toggle-btn-clip {
			margin-top: -2.5em; /* same as height */
			}
		.js .slide-nav-open .toggle-btn-txt {
			margin-top: 0.375em;
			}
		.js .slide-nav-open .toggle-btn-icon {
			background-position: -3.375em -.9875em;
			}
		.no-touch.js .slide-nav-open .toggle-btn:hover .toggle-btn-icon {
			background-position: -3.375em -3.14703307392995em;
			}
		.no-touch.js .slide-nav-open .toggle-btn:hover .toggle-btn-txt {
			color: #E8E8E8;
			}
		.js .slide-nav-open .toggle-btn:active .toggle-btn-icon {
			background-position: -3.375em -5.3065661478599em;
			}
		.js .slide-nav-open .toggle-btn:active .toggle-btn-txt {
			color: #B30000;
			}


	/* actual nav animation */

	.js .slide-nav {
		-o-transition: height 0.25s ease, padding 0.25s ease;
		-moz-transition: height 0.25s ease, padding 0.25s ease;
		-ms-transition: height 0.25s ease, padding 0.25s ease;
		-webkit-transition: height 0.25s ease, padding 0.25s ease;
		transition: height 0.25s ease, padding 0.25s ease;
		}

		.js .slide-nav-closed .slide-nav { /* modernizr switches no-js class for js class, don't hide the nav for people who can't expand it! */
			height: 0 !important; /* need these to override js style which is right on element */
			padding: 0 !important;
			overflow: hidden !important;
			}
		
		.js .slide-nav-open .slide-nav {
			/* height gets set by js */
			overflow-y: scroll;
			-webkit-overflow-scrolling: touch; /* secret sauce ? */
			}



/* end slidey stuff */







/* * * * * * * * * * *
 *                   *
 *   product detail  *
 *                   *
 * * * * * * * * * * */




/* * * * flexslider stuffs * * * */

/* get controls to disapear when you're not hovering the image...wonder how this works with touch interface?  */
.flex-container .flex-direction-nav { opacity: 0; }
.flex-container:hover .flex-direction-nav { opacity: 1.0; }
.flex-direction-nav {
	-o-transition: all 0.15s ease;
	-moz-transition: all 0.15s ease;
	-ms-transition: all 0.15s ease;
	-webkit-transition: all 0.15s ease;
	transition: all 0.15s ease;
	}
	
/* make the image slider fit in a reasonable size even though the images are huge, and give it a little breathing room */
.flex-container { margin: 2.625em auto; margin-top: 1.75em; width: 100%; }

.flex-container { 
	/* png that says "loading..." feels sort of wrong but brad says it makes it feel better */
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHkAAAALCAMAAABsztKxAAAABGdBTUEAANbY1E9YMgAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAYUExURf///6Kaot/Fqd71/Z+31v/64cHc8PPewEYUJvsAAACfSURBVHja5JJLFoAgCEXlo+x/xwmhklmDHMZAgfPgHoWU/m4ZaLjVeoQQ0+WqzpoQXig+kYGVR71boIkHg6xJDoWyQRZ7JHo74eaZwn8gkLmTBTZ/+yS1NlgGhfSYyASlkbUwY9kl+0vD6EwhN7IABnIV0GdytnF5qN2EX+ZMdQC8KOxGD3daLHTcbSU5Zr3bNFbCFDyR29Tm+292CDAAV7MC4iKQWjsAAAAASUVORK5CYII=);
	height: 18em;   /* this should get changed when flexslider loads... just to make it less "jumpy" on load... */
	background-position: center;
	background-repeat: no-repeat;
	}

.flexslider { border: 0 !important; }


/* how tall should we let images get? well it depends... decide responsively */

/* default of 480px */
.flex-container img { max-height: 480px; max-width: 100%; margin: 0 auto; }

/* but if we understand mqs, make different decisions... screen-height = 1.5 * image-height  */
@media (min-height: 0px)    { .flex-container img { max-height: 213px;  } }
@media (min-height: 480px)  { .flex-container img { max-height: 280px;  } } /* iphone special */
@media (min-height: 500px)  { .flex-container img { max-height: 320px;  } }
@media (min-height: 625px)  { .flex-container img { max-height: 400px;  } }
@media (min-height: 750px)  { .flex-container img { max-height: 480px;  } }
@media (min-height: 844px)  { .flex-container img { max-height: 540px;  } }
@media (min-height: 938px)  { .flex-container img { max-height: 600px;  } }
@media (min-height: 1032px) { .flex-container img { max-height: 660px;  } }
@media (min-height: 1125px) { .flex-container img { max-height: 720px;  } }
@media (min-height: 1266px) { .flex-container img { max-height: 810px;  } }
@media (min-height: 1406px) { .flex-container img { max-height: 900px;  } }
@media (min-height: 1547px) { .flex-container img { max-height: 990px;  } }
@media (min-height: 1688px) { .flex-container img { max-height: 1080px; } }

.flex-direction-nav li .flex-next {right: -13px !important;}
.flex-direction-nav li .flex-prev {left: -13px !important;}

.single-image-only {
	height: auto;
	text-align: center;
	}





/* * * * * * * * * * *
 *                   *
 *         blog      *
 *                   *
 * * * * * * * * * * */


/* concessions (?) to readability */

/* darken 
.blog {	color: #444; }*/

/* slightly embiggen? 
@media (min-width: 768px) { .blog .main-content {
		font-size: 1.0625em;
		}}*/
		
/* shorten meter - 36em max widths instead of 42 em max widths... w/ p @ 100%*/

.blogpost p {
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	}

.blogpost {
	max-width: 36em;
	margin-left: auto;
	margin-right: auto;
	margin-top: 3.75em;
	}
	.blogpost:first-of-type {
		margin-top: 1.5em;
		}
.blog .page-list-title {
	max-width: 36em;
	margin-left: auto;
	margin-right: auto;
	}
	
.blogpost header .large.h {
	margin-bottom: .3125em;
	}
.blogpost .date {
	display: block;
	margin-bottom: 1.625em;
	border-top: 1px solid #e8e8e8;
	padding-top: .3125em;
	}

.blogpost img {
	display: block;
	max-width: 100%;
	margin: 2.5em auto;
	}
	.blogpost header + p img {
		margin-top: 0;
		}

.blogpost .bullet-list {
	margin-bottom: 1.625em;
	}

.blogpost .note-count {
	font-style: italic;
	margin-top: 1.25em;
	}


.blogpost .notes {
	margin: 1.25em 0;
	}

.blogpost .notes img {
	float: left;
	margin: 0 0.5em;
	}



/* * * * * * * * * * *
 *                   *
 *       email       *
 *                   *
 * * * * * * * * * * */



.email .h {
	margin-top: 1.825em;
	}

.email {
	width: 100%;
	max-width: 35em;
	margin-left: auto;
	margin-right: auto;
	}

.email input {
	float: right;
	width: 64%;
	}

.email legend {
	display: block;
	padding-top: 0.5625em;
	padding-bottom: 1.1875em;
	}

.email .email-signup div {
	margin: 1.625em 0;
	}

.email .submit.button {
	display: block;
	width: 8em;
	float: none;
	margin: 3em auto;
	}



/* * * * * * * * * * *
 *                   *
 *       about       *
 *                   *
 * * * * * * * * * * */

.about {
	max-width: 42em; /* same as paragraph max width */
	margin-left: auto;
	margin-right: auto;
	}
 
.about .large.h {
	margin-bottom: 1.0625em;
	padding-bottom: 0.3125em;
	border-bottom: 1px solid #e8e8e8;
	}

.about .presspic img {
	width: 100%;
	}
.about .presspic {
	width: 100%;
	float: left;
	}

/* make presspic fit but also hang to left when it can */
@media screen and (min-width: 415px) { .about .presspic {
	width: 63%;
	margin-left: -5%;
	}}
@media screen and (min-width: 640px) {
	.slide-nav-closed .about .presspic {
		width: 68%;
		margin-left: -10%;
		}
	.about .presspic {
		margin-top: 1em; /* no "creative vision." widow */
		}	
	}
@media screen and (min-width: 1000px) { .about .presspic {
	width: 68%;
	margin-left: -10%;
	}}






/* * * * * * * * * * * * *
 *                       *
 *generic message styles *
 * eg maintenence        *
 *    sending to paypal  *
 *    thanks             *
 *                       *
 * * * * * * * * * * * * */


.message {
	text-align: center;
	}
.message p, .message li {
	margin-top: 1em;
	margin-left: auto;
	margin-right: auto;
	}
	.checkout.message {
		margin-top: 20%;
		}

.message, .error {
	margin-top: 2em;
	margin-bottom: 3em;
	}
.oops {
	color: #B30000;
	margin-bottom: 0.5em;
	}











/* * * * * * * * * * * * * * * BREAKPOINTS! * * * * * * * * * * * * * * * * * * * */












/* * * * * * * * * * *
 *                   *
 *       415px       *
 *     embiggen      *
 * * * * * * * * * * */

@media (min-width: 415px) {

	body {
		font-size: 13px; font-size: 0.8125rem; /* 13px */
		line-height: 22px; line-height: 1.375rem; /* 13 * 166.6-% = 21.6-px ~= 22px (rounding to whole px seems like a good idea?) */
		}


	.h.thick {
		letter-spacing: 0.3em;
		}
	
	.h.thin, .bullet-list-h, .slide-nav-h {
		letter-spacing: 0.4em;
		}
	 
	.nav-btn, .big.price {
		font-size: 1.125em;
		}

	.h.tiny, .logo-name {
 		font-size: 0.75em;
		}

	.h.small, .bullet-list-h, .slide-nav-h, .small.price {
		font-size: 0.9375em;
		}

	.page-header {
		height: 4em;
		padding-top: 0;
		}

	.P-contain {
		margin-top: 1.25em;
		}
		.P {
			width: 1.375em; /* 22px */
			height: 1.125em; /* 18px */
			background-size: 16.0625em;  /* reset to default after we overrid it for mobile, actual size of png/svg */
			}

	.logo-name {
		margin-top: 1.625em;
		}

	.top-nav {
		margin-top: 1.1875em;
		}
	.top-nav ul {
		font-spacing: 0.4em;
	}

}




/* * * * * * * * * * *
 *                   *
 *       768px       *
 *  slide nav moves  *
 * * * * * * * * * * */


@media (min-width: 768px) {

.main-content {
	width: 100%;
	padding-right: 18em;
	}

.slide-nav-container {
	float: right;
	width: 18em;
	}

.slide-nav {
	width: 18em;
	padding-top: 5em;
	position: relative;
	left: 0;
	top: 0;
	z-index: 996;
	background: transparent;
	}



/* css animation */

.js .slide-nav { /* undo small screen stuff */
	-o-transition: height 0s linear;
	-moz-transition: height 0s linear;
	-ms-transition: height 0s linear;
	-webkit-transition: height 0s linear;
	transition: height 0s linear;
	}
	.js .slide-nav-open .slide-nav { overflow-y: visible; } /* at first I had simple overflow in the .slide-nav class but it needed an !important to get over the specificity of the slide-nav-open class used in the mobile definitions... so broke it out & just mimiced that... */

.js .slide-nav-container,
 .js .slide-nav-bg-hack {
	-o-transition: width 0.5s ease;
	-moz-transition: width 0.25s ease;
	-ms-transition: width 0.25s ease;
	-webkit-transition: width 0.25s ease;
	transition: width 0.25s ease;
	}

.js .toggle-btn-clip {
	-o-transition: margin 0.25s ease;
	-moz-transition: margin 0.25s ease;
	-ms-transition: margin 0.25s ease;
	-webkit-transition: margin 0.25s ease;
	transition: margin 0.25s ease;
	}
/*
.js .main-content { get it to slide along with sidebar 
	-o-transition: max-width 0.25s ease, padding 0.25s ease;
	-moz-transition: max-width 0.25s ease, padding 0.25s ease;
	-ms-transition: max-width 0.25s ease, padding 0.25s ease;
	-webkit-transition: max-width 0.25s ease, padding 0.25s ease;
	transition: max-width 0.25s ease, padding 0.25s ease;
	}
*/

/* instead of a more traditional bg-image on the body we make this thing and lay it under the sidebar column ... & animate it along with column */
.slide-nav-bg-hack {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 18em;
	background-color: #e8e8e8;
	background-image: url(http://files.pressureprinting.com/bigcartel/images/right-shadow.png);
	background-position: left top;
	background-repeat: repeat-y;
	overflow: hidden;
	padding-top: 5em;
	}

	.slide-nav-closed .slide-nav-container, 
	.slide-nav-closed .slide-nav-bg-hack { 
		width: 0; 
		overflow-x: hidden;
		}
		/* so toggle button dosen't stick out hanging off edge */
		.slide-nav-closed .container { overflow-x: hidden; }

 
.sidebar-notch {
	width: 4em;
	height: 3em;
	border-radius: 1.5em;
	margin-left: -2.5em;
	background-color: white;
	box-shadow: 0 0.25em 0.5625em 0 rgba(0,0,0,0.2);
	margin-bottom: 1em;
	}
	
	.notification-bar-on .slide-nav-bg-hack {
		top: 2em; /* same as notification-bar height */
		/* padding accounts for black nav bar */
		}


.js .toggle-btn {
	width: 5em;
	height: 4.25em;
	border-radius: 2.125em;

	/* hide text */
	/* http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ */
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;		
	/* end hide text */
	
	}
	
	.js .toggle-btn-clip {
		width: 3em;
		height: 5em;
		margin-top: 0.5em;
		}
		
	.js .blog .toggle-btn-clip {
		margin-top: 1.75em; /* out of the way for tumblr buttons */
		}

	.js .toggle-btn-icon {
		width: 100%;
		height: 100%;
		background-size: 16.0625em; /* undo shrinking for small screens */
		z-index: 1001;
		position: relative;
		margin-left: 0;
		}
	
	.js .slide-nav-open .toggle-btn {
		background-color: white;
		box-shadow: none;
		margin-top: 0.5625em;
		margin-right: 1.5em;
		width: 3em;
		height: 3em;
		}
		.js .slide-nav-open .toggle-btn-icon {
			background-position: -4.375em -1.3125em;
			}
		.js .slide-nav-open .toggle-btn-clip {
			overflow: visible;
			margin-top: 0.5em; /* undo small screen */
			margin-right: -3em; /* same as width */
			}
		.no-touch.js .slide-nav-open .toggle-btn:hover .toggle-btn-icon {
			background-position: -4.375em -4.3125em;
			}
		.no-touch.js .slide-nav-open .toggle-btn:hover .toggle-btn-icon:active {
			background-position: -4.375em -7.3125em;
			}

	.js .slide-nav-closed .toggle-btn {
		box-shadow: inset 0 0.125em 0.275em rgba(0, 0, 0, 0.2);
		margin-top: 0.25em; /* undo small screen */
		margin-right: -2.5em; /* clip within thing */
		}

		.js .slide-nav-closed .toggle-btn-clip { /* get it out of the way and let stuff go under it */
			position: relative;
			left: -2.5em;
			margin-right: -2.5em;
			}
		.js .slide-nav-closed .toggle-btn-icon {
			background-position: -10.4375em -.9375em;
			}
		.no-touch.js .slide-nav-closed .toggle-btn:hover .toggle-btn-icon {
			background-position: -10.4375em -3.9375em; /* 67.5px 19.5px */
			}
		.js .slide-nav-closed .toggle-btn:active .toggle-btn-icon {
			background-position: -10.4375em -6.9375em; /* 67.5px 19.5px */
			}
	
	/* no .js on this because we also use it on pages where there IS no slide nav... maintenence */	
	.slide-nav-closed .main-content {
		padding-right: 0;
		}

}


/* * * * * * * * * * *
 *                   *
 *       868px       *
 *  embiggen again. 
 just after we move the nav. 
 because at smallest sizes nav is cramped.
 * * * * * * * * * * */

@media (min-width: 868px) {

body {
 	font-size: 14px; font-size: 0.875rem; /* 14px */
 	line-height: 23px; line-height: 1.4375rem; /* 14px * 166.6-% = 23.3-px ~= 23px (rounding to whole px seems like a good idea?) */
 	}
}


/* * * * * * * * * * *
 *                   *
 *      1200px       *
 * even more bigger! *
 * * * * * * * * * * */
 
 @media (min-width: 1200px) {
	 
	 body {
	 	font-size: 15px; font-size: 0.9375rem; /* 15px */
	 	line-height: 25px; line-height: 1.5625rem; /* 15px * 166.6-% = 25px */
	 	}
	.h.tiny, .logo-name {
 		font-size: 0.825em;
		}


}




/* * * * * * * * * * *
 *                   *
 *      1650px       *
 *                   *
 * * * * * * * * * *  
 
 @media (min-width: 1650px) {
 
	 body {
	 	font-size: 1.125rem;
	 	line-height: 1.875rem;
	 	}
	 	
}*/


/* at the end to override other stuff */

/* http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ */
.hide-text {
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;	
	}

.hide { display: none; }

@media screen and (min-width: 768px) { .hide-on-big-screens {
	display: none;
	}}

@media screen and (max-width: 767px) { .hide-on-small-screens {
	display: none;
	}}



















/* * * * * * * * * * *
 *                   *
 *    STORE STYLES   *
 *                   *
 * * * * * * * * * * */

/* these used to be in a separate file and conceptually that makes more sense to me
   mostly because I wrote them with a lot of inline media queries rather than separating
   them all out into big breakpoint sections. mixing all of this in with the previous
   seems somehow wrong. so concatting to save an http request but sticking them down
   here all by their lonesome */






















/* * * * * * * * * * *
 *                   *
 *   products list   *
 *                   *
 * * * * * * * * * * */


.products {
	margin-top: 0; /* room for search button */
	}
	
.products-product {
	border-bottom: 1px solid #e8e8e8;
	}


/* if our browser supports opacity make the links darken slightly when hovered */
/* .opacity class courtesy modernizr */

.opacity .products-product { background-color: #c8c8c8; }

.opacity .products-product a {
	display: block;
	background-color: white;
	}
	.opacity .products-product a:hover  { opacity: 0.9; }
	.opacity .products-product a:active { opacity: 0.8;  }



.products-txt, .products-img-wrap {
	display: inline-block;
	vertical-align: top;
	}
	
.products-img-wrap {
	width: 14%;
	text-align: center;
	max-height: 4em;
	margin-right: 2%;
	margin-top: .625em;
	margin-bottom: .625em;
	}
	.products-img-wrap img {
		vertical-align: middle;
		display: inline-block;
		max-width: 100%;
		max-height: 4em;
		}

.products-txt {
	width: 82%;
	}

.products-artist {
	margin-top: 1.0625em;
	line-height: 1.1875em;
	}
.products-title {
	margin-bottom: 1.5em;
	margin-top: 0.625em;
	padding-right: 6.5em; /* space for sold out */
	line-height: 1.125;
	}

.latest-release .products-title {
	padding-right: 0;
	}

.latest-release ul {
	margin-top: 1em;
	display: none;
	}

.products-status {
	float: right;
	text-align: right;
	margin-top: -2.8875em; /* brings level with baseline of title */
	}


.our-latest {
	display: block;
	margin-bottom: -1.25em;
	margin-left: 1em;
	position: relative; /* brings it to front so white covers up line */
	z-index: 999;
	margin-top: 1.125em;
	}

.our-latest span {
	background: url(http://files.pressureprinting.com/bigcartel/images/latest-bg.png);
	padding-left: 0.625em;
	padding-right: 0.25em;
	background-repeat: repeat-x;
	}

.latest-release {
	border-top: 1px solid #e8e8e8;
	}
.latest-release .products-img-wrap,
 .latest-release .products-artist {
	margin-top: 1em;
	}
.latest-release .products-img-wrap {
	width: 27%;
	}
	.latest-release .products-img-wrap img {
		max-height: 8em;
		}
.latest-release .products-txt {
	width: 69%;
	}
	
/* DMD-prints launch day oopsies */
.latest-release .products-txt a {
	display: inline !important;
	margin: 0 !important;
	background: transparent !important;
}

.latest-release .products-status {
	margin-bottom: 1.6875em;
	margin-top: 0.625em;
	}
	/* in markup it's a "large price" but actually we want it to be small on small screens... */
@media (max-width: 767px) {
	.latest-release .products-status .large.price {
	font-size: 1em;
	}}

.latest-release .products-title {
	margin-bottom: 0.825em;
	}

.products-description {
	color: #5f5f5f;
	font-size: .825em;
	line-height: 1.5em;
	min-height: 1.5em; /* contain tall images! */
	}


.pagination {
	margin: 3.75em auto 2.5em auto;
	text-align: center;
	width: 100%;

	}
	.pagination .next {
		margin-left: 1.5em;
		}
	.pagination .previous {
		margin-right: 1.5em;
		}

	.pagination a, .pagination span {
		margin-left: 0.5em;
		margin-right: 0.5em;
		}
	.pagination .disabled {
		display: none;
		}
.page-list-title {
	border-bottom: 1px solid #e8e8e8;
	margin-top: -.5625em;
	padding-bottom: .375em;
	width: 100%;
	}




/* * * * * * * * * * *
 *                   *
 * products @ 768px  *
 * switch to grid layout
 *                   *
 * * * * * * * * * * */

@media (min-width: 768px) {


/* undo small screen stuff */
.products-status { float: none; text-align: center; margin-top: 0; }
.products-img-wrap { width: 100%; display: block; margin-top: 0; max-height: none; }

.products-title { padding-right: 0; }

.products-product {
	width: 29%;
	display: inline-block;
	vertical-align: top;
	height: 20.25em;
	text-align: center;
	margin: 0 2.16666666666666%;
	overflow: hidden;
	/* margin-bottom: 1px !important; hmmmm hacky but needed to get chrome not to cover up borders with white?? */
	margin-top: 1px; /* get border to show */
	}
	.products-product a {
		padding: 1.25em 0;
		/* hang white over edges so we never get gray borders on sides?? */
		width: 100%;
		margin-left: 0;
		}


.products-product a {
	height: 100%;
	}

.products-img-wrap {
	height: 10em;
	position: relative;
	}
	/* vertical centering courtesy of:
	http://stackoverflow.com/questions/6282968/vertical-centering-variable-height-image-while-maintaining-max-width-height
	*/
	.products-img-wrap img {
		max-height: 10em; max-width: 90%;
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		}



/* wonder why these have to be bumped up to maintain baseline grid */
.products-artist {
	margin-top: 1.25em;
	max-height: 2.5em; /* 2 lines ish.... dotdotdot hopefully truncates bigger things with ellipsis */
	overflow: hidden;
	}
.products-title {
	margin-top: 0.75em;
	margin-bottom: 1em;
	max-height: 3.25em; /* 3 lines ish dotdotdot hopefully truncates bigger things with ellipsis */
	overflow: hidden;
	}

.products-title.three-lines {
	margin-bottom: 0.5em !important;
	}

.slide-nav-open .main-content {
	max-width: 72em;
	}
	




/* make grid tiles taller if they're wider */

.slide-nav-closed .products-product {
	height: 23.75em;
	}
.slide-nav-closed .products-img-wrap {
	height: 13.375em;
	}
.slide-nav-closed .products-img-wrap img { max-height: 13.375em; }
.slide-nav-closed .products-title { margin-bottom: 1.5em; }
	
}
@media (min-width: 960px) { 
	.products-product {
		height: 23.75em;
		}
	.products-img-wrap {
		height: 13.375em;
		}
	.products-img-wrap img { max-height: 13.375em; }
	.products-title { margin-bottom: 1.5em; }
}

@media (min-width: 768px) { /* back to regularly scheduled media query!! this is weird */

div.products { /* not aside.products, which is the see-also stuff.... */
	margin-left: -.825em;
	margin-right: -.825em;
	}

.our-latest {
	/* width: 104.333333333332%;  same as products-product so they react the same way to surroundings... */
	z-index: 100; /* don't cover clickability of nav toggle button a! */
	}

.products-product.latest-release {
	width: 100%;
	margin: 0;
	text-align: left;
	overflow: visible;
	}
	
	.products .products-product.latest-release {
		height: 35.625em; /* 23.75em what it was * 1.5 brad wanted bigger */ 
		}
	.products .products-product.latest-release img {
		margin-top: 0; /* vertial align top ... when it wasn't lining up with the text == bad */
		}
	
	.latest-release .products-img-wrap {
		height: 90%;
		width: 50%;
		float: left;
		}
	.latest-release .products-img-wrap img {
		max-width: 100%;
		max-height: 100%;
		}
	.latest-release .products-txt {
		width: 40%;
		}
	.latest-release .products-description {
		font-size: 1em;
		line-height: 1.75em;
		}
	.latest-release .products-status {
		text-align: left;
		margin-bottom: 0.4375em;
		margin-top: 1.5em;
		}
		.latest-release ul {
			display: block;
		}
	.latest-release .products-title {
		margin-top: 0.25em;
		margin-bottom: 1.625em;
		}
	.latest-release .products-price {
		margin-top: 1.5625em;
		}

}

/* * * * * * * * * * *
 *                   *
 *   product detail  *
 *                   *
 * * * * * * * * * * */

.product-topline {
	padding-bottom: 0.4375em;
	border-bottom: 1px solid #e8e8e8;
	}

.product-title {
	padding-right: 8em; /* space for sold out */
	}

.product-topline-rightbox {
	float: right;
	text-align: right;
	margin-top: -1.375em;	
	width: 100%;
	display: block;
	margin-bottom: 1.75em;
	}

.product-price, .product-sold-out {
	margin-bottom: 1em;
	max-width: none;
	}

.product-inquire { 
	max-width: none;
	}
.product-inquire a { /* specificity battle! */
	letter-spacing: 0.2em;
	}

.production-notes-link {
	text-align: right;
	margin-top: 1.75em;
	margin-bottom: 1.75em;
	}
	.production-notes-link a:after {
		content: '→';
		}



.product-description p, .product-description ul {
	margin-left: auto;
	margin-right: auto;
	}

.product-description center img {
	max-width: 100%;
	}


.product-description-bulletpoints {
	border-top: 1px solid #e8e8e8;
	margin-top: 2.8875em;
	}

.product-description-bulletpoints dl {
	margin-top: 1.7625em;
	}

.see-also {
	border-top: 1px solid #e8e8e8;
	margin-top: 1.7625em;
	padding-top: 3.9375em;
	padding-bottom: 2em;
	}

.see-also .products-product {
	border-bottom: none;}

.you-may-also {margin-bottom: 1.75em;}

@media (min-width: 768px) { .you-may-also {
	margin-left: 1.625em;
	}}


@media (min-width: 768px) {
	/* break up description bullet point lists into two columns */


	/* this is a little tricky
	   url encoded pngs
	   first one is "whiteout" which makes a gap at the top of the div, covers 2nd which is
	   single pixel dot we repeat to make a line down the center of the div */
	.product-description-bulletpoints {
		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAaCAIAAAAxCktQAAAABGdBTUEAANbY1E9YMgAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAhSURBVHjaYvz//z8DKYCJgUQwqmFUw6iGUQ2DTQNAgAEAYFcDMdIijA0AAAAASUVORK5CYII=), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAABGdBTUEAANbY1E9YMgAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAGUExUReDg4AAAAE2IJKoAAAAMSURBVHjaYmAACDAAAAIAAU9tWeEAAAAASUVORK5CYII=);
		background-position: center top, center top;
		background-repeat: no-repeat, repeat-y;
		}
	
	.product-description-bulletpoints dl {
		width: 50%;
		display: inline-block;
		vertical-align: top;
		padding-left: 1.7625em;
		}
	
	/* if there's only one list, don't make it half size and fill it with a white bg to cover the divider bg image */
	.product-description-bulletpoints dl:only-child {
		width: 95%;
		margin-left: auto;
		margin-right: auto;
		/* display: inline-block;
		vertical-align: top; */
		display: block;
		padding-left: 0;
		padding-right: 0;
		background-color: white;
		}

}





/* * * * * * * * * * *
 *                   *
 *        cart       *
 *                   *
 * * * * * * * * * * */

.cart {
	text-transform: uppercase;
	width: 100%;
	}
	@media all and (min-width: 415px) { .cart { 
		width: 80%;
		margin: 0 auto;
		}}

.cart-table { 
	width: 100%;
	vertical-align: top;
	border-collapse: collapse;
	text-align: left;
	margin-top: 0.9375em;
	}
	.item-artist, .item-title { /* for ie? */
		text-align: left;
		}
	.item-artist {
		margin-top: 0.5em;
		margin-bottom: 0.75em;
		}
	.item-title {
		margin-bottom: 0.5625em;
		}

.cart-head { /* same as wide artists names on main page */
	letter-spacing: 0.5em; /* 2x */
	}
.cart-table th, .cart-table td {
	vertical-align: top;
	border-bottom: 1px #e8e8e8 solid;
	padding-top: 0.5em;
	padding-right: 0.5em;
	}


.item-pic img {
	max-width: 100%;
	max-height: 4em;
	}
.col-item-pic, .item-pic { width: 15%;	}

.item-total, .item-price, .item-qty {
	text-align: right;
	width: 6em;
	}
	.item-qty {
		width: 4em;
		}
	@media all and (max-width: 959px) { .item-price, .col-price, .head-price {
		display: none;
		}}




.item-price, .total-shipping, .total-discount { letter-spacing: 0.2em; }
.item-qty input { width: 3em; }
.remove-btn > .x { color: #B30000; }

.cart-footer {
	margin-top: 1.825em;
	float: right;
	line-height: 2;
	margin-bottom: 2em;
	}

.cart-total {
	border-top: 1px solid #e8e8e8;
	margin-top: 1em;
	padding-top: 1em;
	margin-bottom: 1em;
	}
	
.total-cart-price, .total-shipping, .total-discount {
	display: block;
	float: right;
	}

#cart_discount_code {
	float: right;
	}

.cart-buttons {
	text-align: right;
	}

.cart-update, .cart-options {
	display: inline-block;
	}





/* * * * * * * * * * *
 *                   *
 *      thanks       *
 *                   *
 * * * * * * * * * * */


	.thank-you, .for-your-order {
		display: block;
		}
	.thank-you.large.thick.h {
		text-shadow: #bbb 0 0 0.25em;
		font-size: 2em;
		}





/* SHAME */

a[href="/product/two-witches-meeting-on-a-road"] .products-status {
visibility: hidden;
}