@font-face {
	font-family: 'opensans';
	src: url('fonts/opensans-extrabold-webfont.woff2') format('woff2'),
		 url('fonts/opensans-extrabold-webfont.woff') format('woff');
	font-weight: 800;
	font-style: normal;
}

@font-face {
	font-family: 'opensans';
	src: url('fonts/opensans-extrabolditalic-webfont.woff2') format('woff2'),
		 url('fonts/opensans-extrabolditalic-webfont.woff') format('woff');
	font-weight: 800;
	font-style: italic;
}

@font-face {
	font-family: 'opensans';
	src: url('fonts/opensans-bold-webfont.woff2') format('woff2'),
		 url('fonts/opensans-bold-webfont.woff') format('woff');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'opensans';
	src: url('fonts/opensans-bolditalic-webfont.woff2') format('woff2'),
		 url('fonts/opensans-bolditalic-webfont.woff') format('woff');
	font-weight: 700;
	font-style: italic;

}

@font-face {
	font-family: 'opensans';
	src: url('fonts/opensans-semibold-webfont.woff2') format('woff2'),
		 url('fonts/opensans-semibold-webfont.woff') format('woff');
	font-weight: 500;
	font-style: normal;

}

@font-face {
	font-family: 'opensans';
	src: url('fonts/opensans-semibolditalic-webfont.woff2') format('woff2'),
		 url('fonts/opensans-semibolditalic-webfont.woff') format('woff');
	font-weight: 500;
	font-style: italic;

}

@font-face {
	font-family: 'opensans';
	src: url('fonts/opensans-regular-webfont.woff2') format('woff2'),
		 url('fonts/opensans-regular-webfont.woff') format('woff');
	font-weight: 400;
	font-style: normal;

}

@font-face {
	font-family: 'opensans';
	src: url('fonts/opensans-italic-webfont.woff2') format('woff2'),
		 url('fonts/opensans-italic-webfont.woff') format('woff');
	font-weight: 400;
	font-style: italic;

}

@font-face {
	font-family: 'opensans';
	src: url('fonts/opensans-light-webfont.woff2') format('woff2'),
		 url('fonts/opensans-light-webfont.woff') format('woff');
	font-weight: 200;
	font-style: normal;
}

@font-face {
	font-family: 'opensans';
	src: url('fonts/opensans-lightitalic-webfont.woff2') format('woff2'),
		 url('fonts/opensans-lightitalic-webfont.woff') format('woff');
	font-weight: 200;
	font-style: italic;
}



@font-face {
	font-family: 'cabin';
	src: url('fonts/cabin-bold-webfont.woff2') format('woff2'),
		 url('fonts/cabin-bold-webfont.woff') format('woff');
	font-weight: 700;
	font-style: normal;
}


@font-face {
	font-family: 'cabin';
	src: url('fonts/cabin-bolditalic-webfont.woff2') format('woff2'),
		 url('fonts/cabin-bolditalic-webfont.woff') format('woff');
	font-weight: 700;
	font-style: italic;

}


@font-face {
	font-family: 'cabin';
	src: url('fonts/cabin-semibold-webfont.woff2') format('woff2'),
		 url('fonts/cabin-semibold-webfont.woff') format('woff');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'cabin';
	src: url('fonts/cabin-semibolditalic-webfont.woff2') format('woff2'),
		 url('fonts/cabin-semibolditalic-webfont.woff') format('woff');
	font-weight: 600;
	font-style: italic;
}

@font-face {
	font-family: 'cabin';
	src: url('fonts/cabin-medium-webfont.woff2') format('woff2'),
		 url('fonts/cabin-medium-webfont.woff') format('woff');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'cabin';
	src: url('fonts/cabin-mediumitalic-webfont.woff2') format('woff2'),
		 url('fonts/cabin-mediumitalic-webfont.woff') format('woff');
	font-weight: 500;
	font-style: italic;
}

@font-face {
	font-family: 'cabin';
	src: url('fonts/cabin-regular-webfont.woff2') format('woff2'),
		 url('fonts/cabin-regular-webfont.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'cabin';
	src: url('fonts/cabin-italic-webfont.woff2') format('woff2'),
		 url('fonts/cabin-italic-webfont.woff') format('woff');
	font-weight: 400;
	font-style: italic;
}


/* not working
a{
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}
*/


body,html{
	margin:0;
	padding:0;
}

img{
	max-width:100%;
}

a{color:black;}
.free a{color:#06b;}


.c{
	padding-left:5%;
	padding-right:5%;
	margin-right:auto;
	margin-left:auto;
	max-width:1400px;
}

header, footer, main{
	overflow:auto;
}


table{
	width:100%;
	border-collapse:collapse;
	cell-spacing:0;
}

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

ul.index, ul.index li{

	margin-left:0;
	margin-right:0;
	padding-left:0;
	padding-right:0;
	list-style:none;
	
}


svg{
	width:100%;
}





/************ body text ************/

h1{font-weight:800;}
h2{font-weight:500;}
h3{font-weight:500;}
h4,h5,h6{font-weight:400;}
p strong, li strong{font-weight:700;}


p{
	line-height:1.55em;
}

header, footer{
	font-family:opensans, Arial;
}

main{
	font-family:cabin, Arial;
}

main h1{font-family:opensans, Arial;}

li,th,td{
	line-height:1.45em;
}

.free li{
	padding-right:8%;
}

p{font-size:1em;}
li{font-size:1em;}
h1{font-size:1.6em;}
h2{font-size:1.3em;}
h3{font-size:1.2em;}
h4{font-size:1.1em;}

@media screen and (min-width:300px){main{font-size:1.1em;}}
@media screen and (min-width:400px){main{font-size:1.2em;}}
@media screen and (min-width:500px){main{font-size:1.3em;}}
@media screen and (min-width:600px){main{font-size:1.4em;}}
@media screen and (min-width:700px){main{font-size:1.5em;}}

@media screen and (min-width:500px){
	h1{font-size:2em;}
	h2{font-size:1.6em;}
	h3{font-size:1.3em;}
	h4{font-size:1.1em;}
}

@media screen and (min-width:500px){
	h1{font-size:2em;}
	h2{font-size:1.6em;}
	h3{font-size:1.3em;}
	h4{font-size:1.1em;}
}

@media screen and (min-width:700px){
	h1{font-size:2.4em;}
	h2{font-size:1.7em;}
	h3{font-size:1.5em;}
	h4{font-size:1.25em;}
}

.free p{margin-bottom:1em;}
.free li{margin-bottom:.7em;}
.free li ul, .free li ol{margin-top:.7em;}
h1{margin-bottom:.8em;}
h2{margin-bottom:.5em; margin-top:1.2em;}
h3{margin-bottom:.5em; margin-top:1.2em;}
h4{margin-bottom:.5em; margin-top:1.2em;}

h1{
	padding-bottom:.2em;
	border-bottom:.11em black solid;
	text-transform:uppercase;
}


.free p, .free li, .free h1, .free h2, .free h3, .free h4, .free h5{
	
}


/*

	
	top and bottom margins on .free ol and .free ul
	
	no top/bottom margins on .block ul and .block ol
	
	put the margin on the containing .block instead;
	.block ul/ol is just to define the list, not for layout at all
	




*/







/************ header *************/

header{
	padding-top:2em;
	padding-bottom:2em;
}

header .nav2{display:block;} /* mobile: show inner nav2 instead of outer */
main .nav2{display:none;}

.logo{
	width:20%;
	margin-bottom:5%;
	min-width:4em;
	margin-right:auto;
	margin-left:auto;
}

header ul,header li,
footer ul, footer li{
	margin:0 0 0 0;
	padding:0 0 0 0;
	list-style:none;
}

header nav{
	background-color:black;
	color:white;
}

header nav ul{
	text-align:center;
	border:1px transparent solid;
}

nav li{
	display:inline;
}

header nav a{
	text-decoration:none;
	font-weight:bold;
	color:white;
	line-height:3em;
	padding:1em 1em;
}

	nav a:hover,nav a:focus{
		background-color:white;
		color:black;
	}

.nav2{
	float:right;
	margin-bottom:2em;
}



@media screen and (min-width:420px){header nav{font-size:1.1em;}}
@media screen and (min-width:540px){header nav{font-size:1.3em;}}
@media screen and (min-width:660px){header nav{font-size:1.5em;}}
@media screen and (min-width:740px){header nav{font-size:1.8em;}}
/* 2-col */
@media screen and (min-width:1260px){header nav{font-size:2em;}}


/* header widescreen layout */



@media screen and (min-width:900px){
	
	header{
		width:25%;
		max-width:23em;
		float:left;
		/*background-color:rgba(0,0,255,.1);*/
	}
	
	header .nav2{
		display:none;
	}
	
	main .nav2{
		display:block;
		float:right;
	}
	
	main{
		width:75%;
		max-width:50em;
		margin-left:0;
		float:left;
		padding-top:1em;
		/*background-color:rgba(255,0,255,.1);*/
	}	
	
		footer{

		}
	
	.logo{
		margin-right:0;
		margin-left:0;
		width:100%;
		margin-bottom:5%;
	}	
	

	.logo a{
		padding-left:28%;
		display:block;
	}
	
	.logo img{
		width:50%;
	}
	
	header .c{
		margin-left:0;
		margin-right:0;
		float:right;	
		/*background-color:rgba(0,255,0,.1);*/
		width:100%;
		margin-right:0;
		margin-left:0;
		padding-left:0;
		padding-right:0;
	}
	
	main .c,footer .c{
		margin-left:0;
		margin-right:0;
		padding-left:8%;
		padding-right:10%;
		/*background-color:rgba(255,255,0,.1);*/
	}
	
	header nav{
		clear:both;
		overflow:auto;
		background-color:transparent;
	}
	
	nav ul{
		text-align:left;
	}
	
	header nav li{
		display:block;
		text-align:left;
		/*background-color:rgba(0,0,0,.1);*/
	}
	
	header nav a{
		background-color:black;
		color:white;		
		display:block;
		border-bottom:.2em white solid;
		/*background-color:rgba(255,0,0,.1);*/
		padding-left:28%;
		padding-bottom:.5em;
		padding-top:1.4em;
		line-height:1.5em;
		text-align:left;
	}
	
	header nav a:hover, nav a:focus{
		background-color:white;
		color:black;	
	}
	
	.nav2{
		float:none;
		padding-left:28%;
	}
	
	footer{
		clear:both;
		padding-top:5em;
		padding-bottom:10em;
	}

	footer .c{

		border-top:.15em black solid;
		padding-top:5em;
	}
	
	footer nav ul{
		text-align:left;
	}

	
	
	
}



/************ payment icons *************/

ul.payment_brands li{
	width:3.5em;
	float:left;
	margin-right:1em;
}

footer ul.payment_brands li{
	width:2.5em;
}



.visa{fill:black;}			a:hover .visa{fill:#142787;}
.amex{fill:black;}			a:hover .amex{fill:#2e77bc;}
.discover{fill:black;}		a:hover .discover{fill:#ff6000;}
.mastercard{fill:black;}	a:hover .mastercard{fill:#eb001b;}





/************ footer *************/



/************ content blocks *************/



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


@media screen and (min-width:600px){
	
	.parallel .dup-top{display:block;} /* duplicated content for desktop vs mobile display */
	.parallel .dup-bottom{display:none;}

	.parallel div.related{
		float:right;
		width:25%; 
		min-width:7em;
		font-size:.85em; 
		padding-left:4%; 
		margin-left:4%; 
		margin-bottom:2em;
		border-left:.1em black solid;
	}

}



.block{
	overflow:auto;
}


.block.major{
	margin-bottom:3em;
	margin-top:2em;
}

.block.minor{
	margin-bottom:1.5em;
	margin-top:1em;
}


th,td{
	padding:.85em 5% .85em 0;
	border-bottom:.1em black solid;
}

tr:first-of-type th, tr:first-of-type td{
	border-top:.1em black solid;
}

.attributes th, .attributes td{
	font-size:1.15em;
}

.attributes th{
	min-width:6em;
}










/********************************** Alert box *************************************/

.alert{
	padding:2em;
	background-color:#ffe;
}






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



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

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



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

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

.search .q{
	width:30em;
}

.pair{
	overflow:auto;
}

.wysiwyg{
	overflow:visible;
}

.pair label{
	display:block;
	font-weight:bold;
}
	
	.pair.checkbox label{
		font-weight:inherit;
	}

.long .pair label{
	width:10em;
	padding-right:1em;
	float:left;
	text-align:right;
}
	.long .optional,
	.long #i_forgot_my_password{
		margin-left:13.3em;
	}

.select_ymm select{
	width:auto;
}

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 .specs_form .pair{
	overflow:auto;
}

.edit_page .specs_form .pair label		{
	float:left;
	width:11em;
	margin-right:1em;					}
.edit_page .specs_form .pair input		{
	float:left;
	width:3em;							}

	
.pair input,
.pair textarea,	
.specs_form div.pair,
.edit_page div.select_ymm,
.contact div.pair input,
.contact div.pair textarea{
	width:90%;
}



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



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

}


.contact div.pair input,
.contact div.pair textarea{
	max-width:30em;
}

.edit_page div.specs_form select{
	width:10em;
}

textarea{
	min-height:5em;
}

.edit_page textarea{
	height:320px;
}


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;
}

	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;
}



/*** Calendar extension ***/

.controls_group{
	overflow:auto;
}

li .controls_group{
	font-size:.9em;
}
.pair.date input{
	width:8em;
}

.pair.time input{
	width:4em;
	margin-right:.5em;
	float:left;
}

.pair.time select{
	width:5em;
	float:left;
}

.pair.start_date{
	float:left;
	width:11em;
}

.pair.start_time{
	float:left;
	width:13em;
}

.pair.end_time{
	float:left;
	width:13em;
}


.event.controls_group .cancel_expansion{
	float:left;
	margin-top:3em;
}


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


form .expansion{
	display:none;
}

form .expansion.expanded{
	display:block;
}

.expansion_control.activated{
	display:none;
}


.major{
	margin-bottom:1.5em;
	margin-top:1.5em;
}


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%;
}



/*  when we omit the date field (for time exception controls)
add a left margin so the time inputs align to the row above  */

.event_master .controls_group{ /* for rows 2+ */
	margin-left:11em;
}

.event_master .controls_group:first-of-type{ /* not for the first row */
	margin-left:0;
}