/**	
 *	Viewport Dimensions - 1920 x 981
 *	Header Height: 54px
 *	Footer Height: 30px
 *	Height of main document: 897px
 *  Windows Chrome Viewport: 1920 x 1017
 *	Mac Chrome Full Screen: 1920 x 1008
 *	Main document area: 1017 - 54 - 30 = 933px (924px on OS X Full Screen Mode)
 */

/* My styles */
#btn-message { position: absolute; top: 15px; right: 10px; }
.message-panel { position: absolute; top: 47px; right: 0; width: auto; height: 250px; padding: 15px; overflow-y: auto; background: white; z-index: 5000; display: none; }

#btn-debug { position: absolute; top: 15px; left: 5px;}
.debug-panel { position: absolute; top: 47px; left: 0; padding-left: 15px; width: 500px; height: 800px; overflow-y: auto; background: white; display: none; font-size: 85%; z-index: 1000;}
.debug-panel pre { font-size: 102%; margin-top: 15px; }

#canvas-container { height: 600px; }

/* Helper classes */
.bgcolor { background-color: #fff6e9 !important; }
.content { height: 924px; padding-top: 15px; overflow: hidden; }	/* this is the height of the main content which is between the header and footer. */
.scroll { overflow: auto; }

/* Style links - Override articlr.core.css */
a, a:visited {
	color: #303030;
	text-decoration: none;
	font-weight: 400;
}

a:hover, a:visited:hover, a:focus, a:visited:focus {
	outline: 0;
	color: #d22;
}

/* Error Styles for Form Validation Fields */
.field-error { padding-top: 20px; }
.field-error em { font-size: .75em; color: red; }
.field-error em.success { color: black; }

/* tooltipster max-width override */
.tooltipster-content { max-width: 250px; }

/* Header Related Styles */
header { background: #293239; }
#logo h1 { margin: .5em 0 0 0; color: #f0f0f0; font-size: 1.8em; }
#logo a { color: white; }
#logo a:hover, #logo a:focus, #logo a:active, #logo a.highlighted { color: #f0f0f0; background: transparent; }

/* Footer Related Styles */
footer { background: #293239; height: 30px; overflow: hidden; padding: 5px 25px 0 25px; width: 100%; }
footer p { color: #989898; }

/* Drop Down menu styles - Override sm-clean.css styles */
ul.sm { float: right }	/* push the whole menu to the right of the container element */
.sm-clean { margin: 7px 0; }
.sm-clean a { color:#F3F3F3; font-size:14px; letter-spacing: 2px; }
.sm-clean a.has-submenu { padding-right: 16px; }
.sm-clean a span.sub-arrow { right: 2px; top: 60%; border-color:#888 transparent transparent transparent; }
.sm-clean ul a { font-size:14px; margin: 3px; padding: 3px; color: black; text-align: left; }
.sm-clean a:hover, .sm-clean a:focus, .sm-clean a:active, .sm-clean a.highlighted { color: #E58A8A; /*#11A9ED;*/ background: transparent; }
.sm-clean ul a:hover, .sm-clean ul a:focus, .sm-clean ul a:active, .sm-clean ul a.highlighted { color: white; background: #11A9ED; }
.sm-clean li.link-signup { margin-top: -3px; padding: 3px 0 0 5px; }
.sm-clean li a.btn-signup {
	background:#495965;
	display: inline-block;
	line-height:30px;
	color: #fff;
	padding: 0 12px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
}

.sm-clean li a.btn-signup:hover { background: #E58A8A; /*#73d3a4;*/ }
.sm-clean li.logged-in {  }
.sm-clean li a.logged-in {
	background:#495965;
	display: inline-block;
	line-height:30px;
	color: #fff;
	padding: 0 20px 0 14px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
}
.sm-clean li.logged-in a span.sub-arrow { right: 5px; top: 60%; border-color:#888 transparent transparent transparent; }

/* Forms - Overrides forms.css - Add border and subtle background color to forms */
form { border: 1px solid #d3d3d3; width: 100%; background: #f7f7f7; }

/* Forms - Overwrite forms.css - Create some space between the checkbox and the label */
input[type="checkbox"] { margin: 0 .3rem 1rem 0; }

/* Form Buttons - Adds to forms.css */
input[type="submit"] {
	min-width: 90px;
	width: 100%;
}

input[type="button"] {
	background: #e2e1e1;
	border: none;
	color: #777;
	border-radius: 6px;
	padding: 5px 15px 7px 13px;
	min-width: 90px;
	width: 100%;
}

input[type="button"]:focus {
	background: #d2d2d2;
	outline: none;
}

input[type="button"]:hover {
	background: #d2d2d2;
}

input[type="button"].disabled {
	color: transparent;
	background: transparent;
	outline: none;
	cursor: default;
}

/* Tables - Overrides articlr.core.min.css */
table caption { margin-bottom: .595em; }
table.small { font-size: 75%; }

/* Tables - Overrides tables.css */
table thead > tr > th,
table tbody > tr > th,
table tfoot > tr > th,
table thead > tr > td,
table tbody > tr > td,
table tfoot > tr > td { padding: 0; vertical-align: middle; /*4px; line-height: 20px; */}

table thead > tr > th { border-bottom: 1px solid #111; }

table tfoot > tr > td,
table tfoot > tr > th { border-top: 1px solid #111; color: black; font-weight: 400; padding: 4px 2px;}

table.hover tbody > tr:hover {  background-color: #e8e8e8; }

@media only screen and (max-width: 767px) {
	table thead > tr > th,
	table tbody > tr > th,
	table tfoot > tr > th,
	table thead > tr > td,
	table tbody > tr > td,
	table tfoot > tr > td {
		padding: 4px; line-height: 22px;
	}
}

/* dataTable styles */
table.dataTable thead th,
table.dataTable thead td {
	padding: 0; /*4px;*/
	border-bottom: 1px solid #111111;
}
table.dataTable tbody th,
table.dataTable tbody td {
	padding: 0; /*3px 14px;*/
}
table.dataTable tfoot th,
table.dataTable tfoot td {
	padding: 4px 2px;
	border-top: 1px solid #111111;
}
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
	color: #333333;
	font-size: .750rem;
}
.dataTables_wrapper .dataTables_filter label {
	/* margin-top: -20px; */
}
.dataTables_wrapper .dataTables_length select {
	color: #333333;
	font-size: .900rem;
	width: 50px;
}
.dataTables_wrapper .dataTables_filter input {
	color: #333333;
	font-size: .900rem;
	width: 200px;
	display: inline-block;
}
.dataTables_wrapper .dataTables_info {
	clear: both;
	float: left;
	padding-top: 1.0em;
	font-size: .8em;
	margin-bottom: 15px;
}
.dataTables_wrapper .dataTables_paginate {
	float: right;
	text-align: right;
	padding-top: 0.750em;
	font-size: .8em;
	margin-bottom: 15px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
	box-sizing: border-box;
	display: inline-block;
	min-width: 1.5em;
	padding: 0.25em .5em; /* 0.5em 1em; */
	margin-left: 2px;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	*cursor: hand;
	color: #333333 !important;
	border: 1px solid transparent;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	color: #333333 !important;
	border: 1px solid #cacaca;
	background-color: white;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, gainsboro));
	background: -webkit-linear-gradient(top, white 0%, gainsboro 100%);
	background: -moz-linear-gradient(top, white 0%, gainsboro 100%);
	background: -ms-linear-gradient(top, white 0%, gainsboro 100%);
	background: -o-linear-gradient(top, white 0%, gainsboro 100%);
	background: linear-gradient(to bottom, white 0%, gainsboro 100%);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
	cursor: default;
	color: #666 !important;
	border: 1px solid transparent;
	background: transparent;
	box-shadow: none;
	font-size: 1em;
	font-weight: 300;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	color: white !important;
	border: 1px solid #111111;
	background-color: #585858;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111111));
	/* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #585858 0%, #111111 100%);
	/* Chrome10+,Safari5.1+ */
	background: -moz-linear-gradient(top, #585858 0%, #111111 100%);
	/* FF3.6+ */
	background: -ms-linear-gradient(top, #585858 0%, #111111 100%);
	/* IE10+ */
	background: -o-linear-gradient(top, #585858 0%, #111111 100%);
	/* Opera 11.10+ */
	background: linear-gradient(to bottom, #585858 0%, #111111 100%);
	/* W3C */
}
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
	outline: none;
	background-color: #2b2b2b;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b2b2b), color-stop(100%, #0c0c0c));
	/* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
	/* Chrome10+,Safari5.1+ */
	background: -moz-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
	/* FF3.6+ */
	background: -ms-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
	/* IE10+ */
	background: -o-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
	/* Opera 11.10+ */
	background: linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);
	/* W3C */
	box-shadow: inset 0 0 3px #111;
}

table.dataTable.hover tbody tr:hover, 
table.dataTable.hover tbody tr.odd:hover, 
table.dataTable.hover tbody tr.even:hover, 
table.dataTable.display tbody tr:hover, 
table.dataTable.display tbody tr.odd:hover, 
table.dataTable.display tbody tr.even:hover {
	background-color: #E8E8E8;
}

/* Custom Door Fabrication styles */
/* Canvas container size */
#panel-container { height: 790px; }

/* Grid for shower door selection tab */
#panel-input div.panel {
	padding: 20px 10px 0 10px;
	overflow-y: auto;
	height: 680px;
}

ul#grid {
	padding: 0;
	list-style: none;
	/* height: 605px; */
	/* overflow-y: auto; */
	/* margin: 20px auto 0; */
	/* width: 465px; */
}

#grid li {
	float: left;
	padding: 0;
	/* margin: 0 5px 10px 5px; */
}

#grid li a {
	display: block;
}

#grid li img {
	background-color: white;
	/* padding: 7px; margin: 0; */
	/* border: 1px dotted #58595b; */
	width: 138px;
	height: 138px;
}

#grid li a:hover img {
	opacity:0.3; filter:alpha(opacity=30);
}

/* Temper Calculations styles */
/* Grid for Temper Calculations */
.grid { margin:1em auto; border-collapse:collapse }

.grid td {
    cursor:pointer;
    width:30px;
    height:40px;
    border:1px solid #ccc;
    text-align:center;
    font-size:13px
}

.grid td.clicked {
    background-color: yellow;
    font-weight: bold;
    color: red;
}

/* leanModal styles */
#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}
.popup { display: none; background: #fff; padding: 25px;}


/* Styles for quote page */
#quote-entry-page { /* height: 876px; */ }
	#quote-entry-page form { border: none; background: transparent; margin: 0; padding: 0; }

	#quote-shapes-col { }
		#shapes-grid { padding-top: 35px; }
		#shapes-grid img { display: block; margin: auto; }

	#quote-dim-col { height: 900px; }
		#quote-dim-col h5 { background-color: #dcdcdc; border-radius: 5px; padding: 5px;}
		#dim-image { /*height: 300px;*/ margin-top: -35px; /* margin-bottom: 15px; */ }
		#dim-image img { display: block; margin: auto; }

		/* Rounded & Clipped Corners Checkboxes Absolute Position */
		#corner_1 { position:absolute; top:100px; left:140px; }
		#corner_2 { position:absolute; top:100px; right:180px; }
		#corner_3 { position:absolute; top:165px; left:140px; }
		#corner_4 { position:absolute; top:165px; right:180px; }

		#holes-column { border-right: 1px solid #dcdcdc; padding-right: 5px;}
			#add-hole-container { height: 160px; overflow: auto; visibility: hidden; }
			#add-hole { cursor: pointer; }
			#add-hole span {float: right; }
			#add-hole span.icon-plus:before { top: .63em; }
			
			table#holes-entry { margin-bottom: 0; }
			table#holes-entry td { border-top: none; }
			table#holes-entry td select { margin: 0; }
			table#holes-entry td input { margin: 0; }
			table#holes-entry td { cursor: pointer; }
			table#holes-entry td { padding-right: 15px; }
			table#holes-entry td span.icon-remove:before { top: .1em; }
			table tr.selected { color: white; background-color: #646464;}
	
			#additional-stuff-column { padding-left: 6px; }
			
		#quote-entry-page #ajax-load { margin: 5px 0; text-align: center; }
		#ajax-load img { margin: 0; }

	#result-col { }
		#result-col h5 { margin-bottom: .42em; }
		#result-content { height: 833px; }
			#result-image img { display: block; margin: auto; height: 245px; }
			#result-image #holes h5 { margin-top: 15px; margin-bottom: .22em; }
			#holes-table { font-size: 70%; }
				#holes-table thead th { padding-bottom: 0; }
				#holes-table td { border-top: none; }
				#holes-table td { padding: 3px; line-height: 10px; }
			#result-text { margin-top: 10px; }
				#result-text h4 { margin-bottom: 0; }
			div#standard-finishes { height: 202px; margin-top: 20px; }
			div#temper-prices { height: 174px; margin-top: 20px; }
			div#extras { margin-top: 15px; }
				#multipliers { padding-top: 5px; border-top: 1px solid #dcdcdc; height: 80px; }
					table.extra { font-size: 70%; }
					table.extra td { padding: 3px; line-height: 10px; border-top: none; }
				#messages { /* padding: 4px; border: 1px solid #dcdcdc;  border-radius: 5px; background-color: #faffa4;  */height: 80px; margin-bottom: 10px; }
					#messages p { margin-bottom: 5px; line-height: 1.2; }
					#messages .alert-box { font-size: 11px; }	/* overwrite the default font size for messages and make it smaller */

		#save-quote-dialog { width: 420px; }
			#result-desc { text-align: center; }
		
		#view-more { float: right; font-size: 12px; }
		
		#view-more-multipliers {
			width: 200px;
			height: 180px;
			z-index: 50;
			background: white;
			border: 1px solid #d6d6d6;
			padding: 15px;
		}
		
		#view-more-multipliers table { margin-bottom: 0;}
		#view-more-multipliers table tr:first-child td { border-top: none; }

/* Invoice page styles */
#invoice-item-entry [class*="col-"] {
	position: relative;
	float: left;
	margin-left: .8571%;
	min-height: 1px;
}
#invoice-item-entry	[class*="col-"]:first-child {
	margin-left: 0;
}

#invoice-item-entry input { text-transform: uppercase; }
#invoice-item-entry > div { margin-left: 10px; }
#invoice-item-entry div:first-child { margin-left: 0px; }

/* Products styles */

/* Nested Lists for Left Column Menu */
#col-nav { font-family: 'Roboto Slab'; color:#555; margin-top: 48px; }
#col-nav > li:first-child { border-top: 1px solid #111111; }
#col-nav > li:last-child { border-bottom: 1px solid #111111; }
#col-nav > li { /* border-bottom: 1px solid #dedede;  */}
#col-nav > li > a { padding: 12px 0; color: #696969; display: block; position: relative; }
#col-nav > li > a:hover { text-decoration: none; }
#col-nav > li.active { /* border-bottom: 1px solid #dedede;  */}
#col-nav > li.active > a { }

#col-nav ul { display: none; margin-bottom: 0; }
#col-nav ul a {padding: 6px 5px; display: block; color: #7b7b7b; font-size: 14px; }
#col-nav ul a:hover { color: #bd0e36; }
#col-nav ul li.active a { color: #ff006b; }

#col-nav li ul { margin-bottom: 12px; }

/* Customer Main Page Styles */
#bill-address { height: 70px; }
#ship-address { height: 70px; }
#cust-phones { height: 70px; }
#website { height:20px; }

#search-list { height: 827px; overflow-y: auto; }
#search-list li { font-size: 13px; cursor: pointer; }
#search-list li.selected { background: gray; color: white; }

#customer-contacts { 
	overflow-y: scroll;
}

ul.cust-contact {
}

#map-canvas {height: 279px; }