/* modified from eric meyer reset */
html,body,div,span,object,iframe,										
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,cite,em,img,strong
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

html{
	height:100%;
}

html,body{
	background-color:black;
	color:white;
}

html {
    overflow-y: scroll; /* force scrollbar for short pages */
}

table{
	border-collapse:collapse;
	width:100%;
} 

th,td{
	vertical-align:top;
	text-align:left;
}

img{
	width:100%;
	display:block;
}

div{
	box-sizing:border-box;
}

.page{
	min-width:17em;
}

.c{
	max-width:2200px;
}



/******** type **************/

*{
	font-family:Sans-Serif;
}

/*
h1, h1 *{font-family:epilogue,arial;}
*/

h1{
	font-weight:600;
	font-size:1em;
	line-height:1.2em;
}
	h1 a.edit{
		font-size:.6em;
		/*
		font-family:opensans,arial;
		*/
	}

/*	
h2, h2 *{font-family:epilogue,arial;}
*/

h2{
	font-weight:600;
	font-size:1.5em;
	line-height:1.3em;
}
	h2 a.edit{
		font-size:.7em;
	}

h3{
	/*font-family:epilogue,arial;*/
	font-weight:500;
	font-size:1.4em;
}

h4,h5,h6,p,li,td,th{
	font-size:1em;
}

p{
	line-height:1.7em;
	max-width:50em;
}

li{line-height:1.5em;}
.free li{max-width:36em;}
.index li{max-width:100%;}

td,th{line-height:1.5em;}

a.button, .errorbox,.error_msg,
input[type="submit"], input[type="button"], 
.cart #progress_bar, td.price,
dt{
	font-weight:bold;
}


/* no underline ******/
a.button{
	text-decoration:none;
}


@media screen and (max-width:399.9999px){	header{font-size:.8em;}	}
@media screen and (min-width:400px){		header{font-size:.9em;}	}
@media screen and (min-width:500px){		header{font-size:1em;}	}
@media screen and (min-width:700px){		header{font-size:1.1em;}}
@media screen and (min-width:1000px){		header{font-size:1.2em;}}
@media screen and (min-width:1300px){		header{font-size:1.2em;}}
@media screen and (min-width:1600px){		header{font-size:1.3em;}}
@media screen and (min-width:2000px){		header{font-size:1.3em;}}


@media screen and (max-width:399.9999px){	main{font-size:.8em;}	}
@media screen and (min-width:400px){		main{font-size:.87em;}	}
@media screen and (min-width:500px){		main{font-size:.95em;}	}
@media screen and (min-width:600px){		main{font-size:1.06em;}	}
@media screen and (min-width:700px){		main{font-size:1.18em;}	}
@media screen and (min-width:800px){		main{font-size:1.36em;}	}
@media screen and (min-width:900px){		main{font-size:1.45em;}	}
@media screen and (min-width:1100px){		main{font-size:1.65em;}	}
@media screen and (min-width:1300px){		main{font-size:1.85em;}	}
@media screen and (min-width:1500px){		main{font-size:1.9em;}	}
@media screen and (min-width:1700px){		main{font-size:2.2em;}	}


@media screen and (max-width:399.9999px){	input[type=checkbox]{transform: scale(1);}	}
@media screen and (min-width:400px){		input[type=checkbox]{transform: scale(1);}	}
@media screen and (min-width:500px){		input[type=checkbox]{transform: scale(1.05);}	}
@media screen and (min-width:600px){		input[type=checkbox]{transform: scale(1.1);}	}
@media screen and (min-width:700px){		input[type=checkbox]{transform: scale(1.2);}	}
@media screen and (min-width:800px){		input[type=checkbox]{transform: scale(1.3);}	}
@media screen and (min-width:900px){		input[type=checkbox]{transform: scale(1.35);}	}
@media screen and (min-width:1100px){		input[type=checkbox]{transform: scale(1.48);}	}
@media screen and (min-width:1300px){		input[type=checkbox]{transform: scale(1.61);}	}
@media screen and (min-width:1500px){		input[type=checkbox]{transform: scale(1.73);}	}
@media screen and (min-width:1700px){		input[type=checkbox]{transform: scale(1.86);}	}


/*
.imgc.landscape{
	width:100%;
	padding-bottom:66.6%;  1.5:1 / 35mm film ratio / using padding to set width
		
		https://stackoverflow.com/questions/8894506/can-i-scale-a-divs-height-proportionally-to-its-width-using-css
		You can do it with the help of padding on a parent item, because relative padding (even height-wise) is based on the width of the parent element.
			
			CSS:

			.imageContainer {
				position: relative;
				width: 25%;
				padding-bottom: 25%;
				float: left;
				height: 0;
			}

			img {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
			}
	
	
	background-color:rgba(255,0,0,.5);
}
*/


/****************** Margins/Padding/Borders ******************/


h1,h2,h3,h4,h5,h6{
	margin:1.5em 0 .8em 0;
}
	h1{
		margin-top:.6em;
	}

li{
	margin-bottom:.8em;
}
	
p,ul,ol,dl,.t,
ul.index li{
	margin-bottom:1.4em;
}
	
div.pair,div.button{
	margin-bottom:1em;
}




input,textarea,select	{ /* keep these the same */
	padding:.4em .7em	}
label					{
	padding:.4em 0;		}

	
	
/************************* Overall Layout *******************/


header{
	overflow:auto;
}

.c{
	overflow:auto;
}

.content{
	padding:3em 0 5em 0;
	overflow:auto;
	/*
	border-left:1px #ddd solid;
	background-color:white;
	*/
	border-right:0;
}

.c{
	padding:2em 7%;	
	margin: 0 auto;
}

footer{
	padding:3em 0 4em 0;
	clear:both;
}

.block{
	display:block;
	overflow:auto;
	clear:both;
	margin-top:1em;
	margin-bottom:1em;	
	padding-bottom:1em;
}

	.major{
		margin-top:1.5em;
		margin-bottom:1.5em;
	}
	
	.minor{
		
		
	}
	
ul.index li{
	overflow:auto;
	margin-left:0;
	padding-left:0;
}

h1{
	margin-top:0;
}

/*************** Header/footer/navs **************/

header{
	overflow:auto;
	padding:0;
}

.logo{
	font-size:2em;
	text-transform:uppercase;
	max-width:5.5em;
}

header .adj{
	overflow:auto;
}

@media screen and (max-width:400px){	header .h1_outer{font-size:1.7em;}	}
@media screen and (min-width:400px){	header .h1_outer{font-size:1.9em;}	}
@media screen and (min-width:600px){	header .h1_outer{font-size:2.1em;}	}
@media screen and (min-width:800px){	header .h1_outer{font-size:2.4em;}	}
@media screen and (min-width:1000px){	header .h1_outer{font-size:2.9em;}	}
@media screen and (min-width:1400px){	header .h1_outer{font-size:3.2em;}	}
@media screen and (min-width:1800px){	header .h1_outer{font-size:3.4em;}	}


header a, footer a, nav a{
	text-decoration:none;
}

nav{
	clear:both;
	overflow:auto;
}

nav li{
	float:left;
	margin:0;
}

nav a{	
	display:block;
	padding:.7em 1em;
	
}

footer nav li{
	display:block;
	float:none;
	width:100%;
	padding:0;
}

footer nav a{
	display:block;
	float:none;
	width:100%;
	padding-right:0;
	padding-left:0;
	text-align:center;
}



/*
@media screen and (min-width:720px){
	
	.logo{
		float:left;
		margin-right:5%;
		margin-left:0;
	}
	
	header .text1{
		float:left;	
		text-align:left;
	}
	
	header .text2 div{
		float:right;
		text-align:right;
		margin-left:1em;
	}
}


nav.mobile{display:none;}

@media screen and (max-width:1000px){
	nav.full{display:none;}
	nav.mobile{display:block;}
}


@media screen and (min-width:1000px){
	
	nav.mobile{display:none;}
	nav.full{display:block;}
	nav#full-menu-footer{display:none;}
	
	nav li{margin:0 1.5em 1em 0;}
	nav a{padding:1em 0;}
	
}
*/



/**************** Content area general style ***************/

main li,
main dd,
textarea li{
	margin-left:2.8em;
}

main li, textarea li{
	padding-left:.4em;
}



main.content{
	
}



/*
@media screen and (min-width:680px){
	
	.parallel .photos{
		float:right;
		width:35%;
		margin:0 0 3em 8%;
	}
}
*/

/*****	related links menus/sidebars		***/

/* mobile */
.parallel .dup-top{display:none;}
.parallel .dup-bottom{display:block;}

/* inline/horizontal nav unless parallel */

.content nav ul{
	overflow:auto;
}

.content nav li{
	float:left;
	border-left:.1em dashed black;
	margin-right:0;
}

.content nav li a{
	padding:0 .8em;
	display:block;
}


.form.rfi{
	
	max-width:40em;
}

/*
@media screen and (min-width:800px){
	
	.split .supporting{
		float:right;
		width:30%;
		padding-left:4%;
	}
	
	.split .primary{
		float:left;
		width:66%;
	}	
}

*/





/********************** Forms ****************************/

.button input,
input.button{
	font-weight:bold;
	padding:.4em 1em;
	margin-bottom:2em;
}	

input,textarea,select{
	font-size:1em;
}

input[type=text]{
	min-width:2em;	
}

.search .q{
	width:30em;
}

.pair{
	overflow:auto;
}

.help_text{
	font-size:.95em;
}

.controls_group{
	overflow:auto;
}

form .expansion{display:none;}
form .expansion.expanded{display:block;}
form .expansion_control.activated{display:none;}

ul.radios, ul.radios li,
ul.checkboxes, ul.checkboxes li{
	list-style:none;
	margin-left:0;
	padding-left:0;
}

li .expansion.major{
	margin-left:5%;
}

.wysiwyg{
	overflow:visible;
}

.pair label{
	display:block;
}

	.pair.checkbox label{
		display:inline;
	}

input[type=radio]{
	font-size:2em;
}

input.zip{
	width:5em;
}

.search label,
.pair label,
.select_ymm label,
.pair input{
	display:block;
}

.select_ymm select,
.search .q,
.search .button{
	display:inline;
}

.edit_page .attr .pair{
	overflow:auto;
}

form .attr .pair label		{
	float:left;
	width:11em;
	margin-right:1em;		}
form .attr .pair input		{
	float:left;
	width:12em;				}

form attr select{
	min-width:10em;
	width:100%;
	box-sizing:border-box;
}

	form .attr .numeric input{ /* make the numeric inputs smaller */
		width:4em;
	}

.pair label,.file label,.submit,
.file_input_wrapper,
.pair input,.pair textarea, .pair select,
.attr div.pair,.edit_page div.select_ymm{
	width:100%;
	box-sizing:border-box;
}

div.pair label,
div.pair input,
div.submit input,
div.pair textarea,
div.pair select{
	display:block;
}


.pair.checkbox input, .pair.checkbox label{
	display:inline;
	width:auto;
}

.tinymce_container textarea{
	padding:0;
	width:100%;
}

div.pair input,
div.pair select,
div.pair textarea{
	/*max-width:50em;*/
}


/*** FLOAT FIELD LABELS TO THE LEFT OF INPUTS */
/*
	.pair{
		overflow:auto;
		margin:.5em 0;
	}

	.pair label{
		display:block;
		float:left;
		width:6em;
		font-weight:bold;
	}

	.pair input{
		width:20em;
		max-width:80%;
		float:left;
		display:block;
	}
*/
	
label .expl_text{
	display:none;
}	

li form a.button{
	margin-right:.3em;
}

form .images li{
	list-style:none;
	clear:both;
	overflow:auto;
	border-bottom:1px gray solid;
	margin-bottom:2.5em;
	padding-bottom:2.5em;
}

form .images img{
	border:1px gray solid;
}

form .images li .s{
	float:left;
}

.fieldgroup{
	margin-bottom:1.5em;
	
}

form .images li .sort_order{width:80px;}
form .images li .options{width:320px;}
form .images li .img{width:300px;}

form .images li img{width:92%;}

input.smallnum{
	width:1.5em;
}

.sort_order input{
	font-size:1.7em;
	padding:.2em .3em;
	font-weight:bold;
}

li fieldset{
	margin-bottom:2em;
}

.images li div.pair input{
	width:90%;
}

.checkbox_tree li{
	list-style:none;
}

.subcontent_sort_order input.sort_order{
	width:1.5em;
	text-align:right;
	margin-right:.5em;
}


.submit_button{
	margin-top:2em;
}

input[type=submit]:hover{
	cursor:pointer;
}
input.submit{
	
	max-width:15em;
	
}

ul.checkboxes .input{
	float:left;
	margin-top:.1em;
}

ul.checkboxes label{
	margin-left:2em;
	display:block;
	padding-top:0;
}



/********************************** Buttons, Tabs, Padded Boxes ***************/

a.button{
	line-height:3em;
	padding:.7em 1.1em;
	text-decoration:none;
	white-space:nowrap;
	border-radius:5px;
}

ul.alert li{
	list-style:none;
}

.errorbox,
.error_msg,
.alert_msg,
.special_product_status {
	display: block;
	padding: 1em 2.5em 1.4em 2.5em ;
}

.alert{
	padding:2em;
}



/***************************** color base ***************/


input,textarea,select,option{
	background-color:transparent;
	color:inherit;
}


a:hover,a:active,a:focus{
	text-decoration:underline;
}


div.alert,ul.alert{
	padding:2em;
}

.alert{
	background-color:rgba(255,255,200,1);
	color:black;
}

.alert li{
	margin-left:0;
	padding-left:0;
	list-style:none;
}