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, sub, sup, 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;
}

.clearfix {
  overflow: auto;
}

/************** Page Reset Above  *******************/
/************** Page Styles Below *******************/

@font-face {
    font-family:"WebSymbols-Regular";
    src:url(WebSymbols-Regular.eot?) format("eot"),url(WebSymbols-Regular.woff) format("woff"),url(WebSymbols-Regular.ttf) format("truetype"),url(WebSymbols-Regular.svg#WebSymbols-Regular) format("svg");
    font-weight:400;
    font-style:normal
}

html {
	overflow-y: scroll;
	-webkit-user-select: none;  
  	-moz-user-select: none;    
  	-ms-user-select: none;      
  	user-select: none;
}

html, body, #page-wrapper {
	width:100%;
	min-width:15em;
	position:relative;
	font-family: proxima-nova-n4, proxima-nova ,sans-serif;
} 

.select-box {
	overflow-y:scroll;
	max-height: 300px;
	border: 1px solid gray;
	background-color:white;
	cursor:pointer;
	border-radius: 5px;
}

.enabled {
	background-color: #EDEDED;
}

.changed {
	background-color: #D37C5F;
	color: white;
	padding:5px;
	border-radius: 4px;
	font-weight: bold;
}

.glyphs {
	font-family:"WebSymbols-Regular";
}

.special-header {
	font-size: 20px;
	line-height: 40px;
}

.small-margin {
	padding:4px;
	box-sizing: border-box;
}

.c-1-1 {
	width:100%;
}

.c-1-2 {
	width: 49%;
}

.c-1-3 {
	width:32.5%;
	min-width: 125px;
}

.c-1-4 {
	width:24%;
}

.c-1-8 {
	width:12.5%;
	min-width:100px;
}

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

.right {
	float: right;
}

.text-left {
	text-align: left;
}
.left {
	float: left;
}

.text-center {
	text-align:center;
}

.center {
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}

.inline {
	display: inline-block;
}

#page-wrapper {
	max-width:980px;
	margin: 0 auto 0 auto;
}

.page {
	min-height:300px;
	border-radius: 4px;
}

.page-header {
	font-size: 42px;
	font-weight: 400;
	text-align: center;
	padding:30px 0 30px 0;
}

.page-controller {
	margin-left: auto; 
	margin-right: auto;
	width:100%;
}

.button-AO {
	color: white;
	border-radius: 4px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
	background: #EC6820; /* this is an orange */
}

.button-cart {
	border-radius: 4px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
	background: #20a4ec; 
	color: white;
}

.button-cart-dark {
	background: #417f93; 
}

.button-export {
	background: #2241EC;
	border-radius: 4px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
	color: white;
}

.button-remove {
	border-radius: 4px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
	background: #b0480f; 
	color: white;
}

.button-overlay {
    border:4px solid black;
}

.hidden {
	display: none;
}

.disclaimer {
	padding:10px; 
	font-size:16px; 
	line-height:24px; 
	margin-top: 20px; 
}

/************** Accessories Styles *******************/

.selected-option 
{
	background-color:lightgray;
	border-color:gray;
}

.border-box {
	box-sizing: border-box; 
	padding:7px;
}
.total {
	text-align: center;
	font-size: 24px;
}


/************** Materials Styles *******************/
.static-view-header {
	font-size: 30px;
	font-weight: 600;
	line-height: 24px;
	text-align: center;
	width:100%;
	margin: 10px 0; 
	padding: 10px 0; 
}

.static-container-header {
	font-size: 24px;
	font-weight: 400;
	line-height: 24px;
	text-align: center;
	width:100%;
}

.acc-container-header {
	font-size: 24px;
	font-weight: 600;
	line-height: 24px;
	text-align: center;
	width:100%;
	padding:10px;
	margin-bottom:10px;
	box-sizing: border-box;
	border-radius: 4px;
}

.accessory-container-header {
	font-size: 22px;
	font-weight: 400;
	line-height: 22px;
	text-align: center;
	width:100%;
	cursor: pointer;
}

.container-header {
	font-size: 25px;
	font-weight: 400;
	line-height: 30px;
	text-align: center;
	width:100%;
	cursor: pointer;
	padding:3px;
	border-radius: 4px;
	box-sizing:border-box;
	font-weight: 600;
}

.container-header:hover {
	/*background-color: rgb(236, 104, 32);
	color:white;*/
}

.project-remove-button {
	float:right; 
	width:30px; 
	height:30px;
	cursor: pointer;
}

.project-print-container {
	width:100%; 
	text-align:center; 
	padding:10px;
}

.container-border {
  border:1px solid lightgray;
  padding:10px;
  margin-bottom:10px;
  box-sizing: border-box;
  border-radius: 4px;
}

.container-border-bottom {
  border-bottom:1px solid lightgray;
  padding:10px;
  margin-bottom:10px;
  box-sizing: border-box;
  border-radius: 4px;
}

.container-no-border {
  padding:10px;
  margin-bottom:10px;
  box-sizing: border-box;
}

/************** Table Styles *******************/
.pure-table tbody td {
	background-color: white;
} 

.pure-table tr {
	background-color: lightgray;
} 

.table-header {
	font-size: 20px;
	font-weight: 600;
	line-height: 20px;
	margin-bottom: 10px;
}

table.gridtable {
	width:100%;
	margin: 0 auto 0 auto;
	font-size:.9em;
	color:#333333;
	border-width: 1px;
	border-color: #666666;
	border-collapse: collapse;
}
table.gridtable th {
	border-width: 1px;
	padding: .5em;
	border-style: solid;
	border-color: #666666;
	background-color: #dedede;
}
table.gridtable td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #ffffff;
}

@media only screen and (max-width: 37.5em) {
	
	/* Force table to not be like tables anymore */
	.no-more-tables table, 
	.no-more-tables thead, 
	.no-more-tables tbody, 
	.no-more-tables th, 
	.no-more-tables td, 
	.no-more-tables tr { 
		display: block; 
	}
 
	/* Hide table headers (but not display: none;, for accessibility) */
	.no-more-tables thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
 
	.no-more-tables tr { border: 1px solid #ccc; }
 
	.no-more-tables td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
		white-space: normal;
		text-align:left;
	}
 
	.no-more-tables td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		text-align:left;
		font-weight: bold;
	}
 
	/*
	Label the data
	*/
	.no-more-tables td:before { content: attr(data-title); }
}

.circle {
	border-radius: 10%;
	width: 60px;
	height: 60px; 
	/* width and height can be anything, as long as they're equal */
}

.accessoriesView {
	margin-top:25px; margin-bottom:25px; background-color: #ededed; border-radius:5px; padding: 10px 0;
}

.button-first-selected {
	background-color:rgba(236, 104, 32, 1);
	box-shadow:  inset 0px 0px 0px 5px rgba(0, 0, 0, 1);
}

.button-first{
	background-color:rgba(236, 104, 32, 1);
}

.button-second-selected {
	background-color: black;
	/*border: 4px solid rgb(236, 104, 32);*/
	box-shadow: inset 0px 0px 0px 5px rgba(236, 104, 32, 1);
}
.button-second {
	background-color: black;
}