/* 3D Building Designer (c) onthez.com */

html, body { margin:0; padding: 0; height: 100%; width: 100%; overflow-x: hidden; -webkit-text-size-adjust: none; }
body {
	color: #000;
	font-family: 'Oswald', sans-serif;
	font-size:13px;

	background-color: #fff;
	overflow: hidden;
	position:fixed;

	background-color: #ccc; /* fall back for ie11 */
	background: linear-gradient(#ccc, var(--menuBackgroundColor));
	
	/* overscroll-behavior-y: contain; /* Disables pull-to-refresh but allows overscroll glow effects. */
	overscroll-behavior-y: none; /* Disables pull-to-refresh and overscroll glow effect. Still keeps swipe navigations. */
	overscroll-behavior-x: none; /* Disables swipe navigations. */
}

#info { /* Info bar across the top of the page */
	position: absolute;
	box-sizing: border-box;
	width: 100%;
	height: 32px;
	top: 0px;
	left: 0px;
	text-align:center;
	font-size: 18px;
	line-height: 30px;
	color: #000;
	background: top left/auto 100%;
}
#info #logo { vertical-align: top; position: relative; height: 90%; width: auto; padding-top: 2px; }

#helpButton {
  color: #666; position: absolute; top: 5px; left: 4px; font-size: 1.25em;
  z-index: 1004;
  cursor: pointer;
}
#helpButton:hover { color:#444; }
#helpOverlay {
  opacity: 0;
  display: none;
  transition: visibility 0s 0.2s, opacity 0.5s linear;

  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color:#333;
  z-index:1003;
}
#help {
  opacity: 0;
  display: none;
  transition: visibility 0s 0.2s, opacity 0.2s ease;
  font-size:1.5em;

  box-sizing: border-box;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  min-width:250px;
  max-width:400px;
  padding: 1em 2em;
  background-color:#ddd;
  background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
  border-radius: 4px;
  z-index:1005;
  box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.5);
  text-align: center;
  line-height: 1.2em;
  border: 3px solid #999;
}
#help #closeHelpButton {
	color: #999;
	font-size: 1.5em;
	position: absolute;
	top: 4px;
	right: 5px;
	cursor: pointer;
}
#help h1 {
  font-size: 1.25em;
  font-weight: bold;
  color: #666;
  position: relative;
  margin-bottom: 0;
  line-height: 1.2em;
}
#help h2 {
  font-size: 1.1em;
  color: #666;
  margin-top: 0;
  line-height: 1.2em;
}
#help p, #help ol, #help ul {
  text-align: left;
  font-size: 0.75em;
  line-height: 1.2em;
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: Verdana, Arial, sans-serif;
}
#help a {
  color: #666; font-size: 0.55em; text-decoration: none;
  font-family: Verdana, Arial, sans-serif;
  /* position: absolute; box-sizing: border-box; display: block; width: auto; bottom: 25px; */
}

#help a { display: block; }
#help .fa-cubes { text-decoration: none!important; font-size: 275%; line-height: 25px; color: #999; display: block; margin-top: 10px; margin-left: auto; margin-right: auto; }
#help a:hover { color: #333; }
#help a:hover .fa-cubes { color: #666; }
#help a:hover span { text-decoration: underline; }


.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

#line {
	/*display: none;*/
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	opacity: 0.7;
	z-index: 1000;
}

#popupContainer { z-index: 1001; position: absolute; top: 0; left: 0; right: 300px; bottom: 0; pointer-events: none; }
#popup {
	display: none;
	position: absolute;
	top: 100px;
	left: 100px;
	width: calc(225px - 10px - 4px);

	background-color: rgba(55,55,55,0.75);
	border-radius: 5px;
	color: white;
	/*box-sizing: border-box;*/
	margin-top: 34px;
	border: 2px solid #ccc;
	/*padding: 15px;*/
	padding: 5px;
	font-size: 1.25em;
	text-align: center;
	z-index: 1002;
	
	max-height: calc(85% - 40px);
	
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
#popup .scrollContainer {
	position: relative;
	overflow-y: auto;
	overflow-x: hidden;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
}
#popup .scrollContainer::-webkit-scrollbar { width: 8px; margin-left:50px; } /* width */
#popup .scrollContainer::-webkit-scrollbar-track { background: #f1f1f1; } /* Track */
#popup .scrollContainer::-webkit-scrollbar-thumb { background: #888; } /* Handle */
#popup .scrollContainer::-webkit-scrollbar-thumb:hover { background: #aaa; } /* Handle on hover */

#popup:hover { background-color: rgba(50,50,50,0.8); border: 2px solid #ddd; cursor: move; }
#popup input { font-size: 1.2em; line-height: 1.5em; width: 25%; margin: 5px; position: relative; top: -2px; font-size: 1.1em; line-height: auto; padding-left: 2px; padding-right: 2px; text-align: center; }
#popup input.inches { width: 30%; }
#popup .btn {padding-top: 0.2em; font-size: 0.85em; margin-top: 10px; }
#popup .btn i { font-size: 1.2em; position: relative; top: 1px;}
#popup .row { border-bottom: 1px solid #888; margin-left: auto; }
#popup .row select { width: auto; margin-top: 5px; margin-bottom: 5px; }
#popup .checkbox { padding-top: 5px; }
#popup .checkbox label { display: inline; font-size: 0.7em; position: relative; top: -3px; }
#popup .checkbox input { float: none; top: -1; width: 40px; text-align: center; margin-left: 15px; }
#popup .checkbox label, #popup .checkbox input { transform: scale(1.5); display: inline-block; padding-left: 10px; padding-right: 10px; }
#closePopupWindowButton {
	position: absolute;
	top: -4px;
	right: -6px;
	color: #dedede;
	border-radius: 10%;
	background-color: #333;
	cursor: pointer;
}
#closePopupWindowButton:hover {
	color: white;
}

#oldie { /* Container for WebGL unsupported message */
	font-size: 30px!important;
	padding: 50px 0 0 0!important;
	width: auto!important;
	font-family: 'Oswald', sans-serif!important;
}

a {
	color: #0af;
}

#builder { z-index: 0; }
#print { width: 100%; padding: 10px 5% 10px 5%; display: none; position: absolute; top: 0; }
#print h1 { text-align: center; font-size: 26px; display: block; margin-top: 35px; margin-bottom: 35px; }
#print img#printLogo { width: 250px; height: auto; margin-left: auto; margin-right: auto;  display: block; }
#print #printImage img { width: auto; height: auto; max-width: 100%; max-height: 400px; margin-left: auto; margin-right: auto; margin-bottom: 20px; margin-top: 10px; display: block; }
#print #specs { font-size: 12px; font-weight: normal; line-height: 16px; }
#print #specs h2 { font-size: 18px!important; line-height: 18px!important; }
#print #specs .column { width: 24%; margin-right: 1%; background-color: #eee; float: left; padding: 0 1% 1% 1%; min-height: 250px; box-sizing: border-box; }
#print #specs .column:first-child { margin-left: 0.5%; }
#print #specs .column:last-child { margin-right: 0; }
#print #printFooter { position: absolute; top: 100%; width: 90%; }
#print #printLink { position: absolute; left: 0; top: -0px; font-color: #333; font-size: 0.7em; width: 100%; }
#print ul { margin: 0; padding: 0; display: block; width: 100%; font-size: 20px; margin-top: 30px; padding-top: 10px; padding-bottom: 10px; list-style: disc; border-top: 1px solid #666; border-bottom: 1px solid #666; text-align: center; }
#print ul li { display: inline; padding-right: 26px; list-style: disc; position: relative; }
#print ul li::before { content: "\2022"; font-size: 24px; position: absolute; left: -20px; top: -4px; }
#print ul li:first-child::before { content: ""; }
#print ul li:first-child { list-style-type: none; }
#print ul li:last-child { padding-right: 0; }
#print h3 { text-align: center; font-size: 23px; display: block; font-weight: normal; line-height: 23px; }
@media print {
    /*#builder, #navigation, #navBtn, #info, .dg { display: none; }*/
    body * { display: none; }
    body #print, body #print * { display: block; }
    html, body { width: 100%; min-width: 8in; max-width: 11in; min-height: 8in; max-height: 11in; background: none; }
}

/* Undo some of bootstrap.css  */
body .dg ac, body .dg.ac .c input[type=text] { line-height: normal!important; }
/*body #info, body .dg.ac, body .dg ac * {
	-webkit-box-sizing: unset!important;
	-moz-box-sizing: unset!important;
	box-sizing: unset!important;
}*/
.bootstrap-switch { vertical-align: inherit!important; margin-top: 4px; }
.bootstrap-switch-container { margin-top: -3px!important; }
.bootstrap-switch-wrapper { outline:none!important; }
.bootstrap-switch-small { min-width: 74px!important; height: 18px!important; border-radius: 0!important; }
.bootstrap-switch-handle-on, .bootstrap-switch-handle-off { border-radius: 0!important; }
.bootstrap-switch-handle-on { background: transparent; background-color: #007ac2; }

/* Modifications to UI menu */
.dg .cr .property-name { width: 45%; } /* adjust width of GUI label vs slider/input */
.dg .cr .c { width: 55%; } /* adjust width of GUI label vs slider/input */
.dg .cr .c .slider { width: 60%; } /* adjust width of GUI label vs slider/input */

.dg { font-size: 13px!important; }
.dg.ac .dg.main { position: fixed; top: 0; right: 0; bottom: 0;  }
.dg.ac .dg.a { margin: 0; margin-top: 30px; } /* move dat.gui menu down to accomodate info bar */
.dg.a .save-row { top: 30px!important; }
.dg.a.has-save ul { margin-top:0!important; } /* fix for default style of adding margin above each dat.gui folder, not just the first one */
.dg.a.has-save > ul { margin-top:27px!important; } /* fix - same as above */
.dg .c input[type=text] { margin-top: 2px!important; padding: 0px!important; padding-left: 4px!important; }
.dg .c select { font: 400 14px Verdana, Arial, sans-serif; font-weight: bold; }
.dg .slider { margin-left: 0!important; }

.dg .c input[type="checkbox"] { margin-top: 0px!important; }
.dg .cr.function .property-name { width: auto; }
.dg .message .property-name { width: 100%; font-size: 12px; text-align: center; background-color: #ced1d7; float: none; display: block; }
.dg .message.delete .property-name {  }
.dg .message.delete.true .property-name { background-color: #ffcccc; }
.dg .message { line-height: 18px!important; padding: 0!important; height: auto!important; margin: 5px!important; }
.dg .message .c { display: none; }
.dg .closed .message { display: none; }
.dg.a div.close-button {
	background: -moz-linear-gradient(center top, #c8c8c8 34%, #b4b4b4 71%);
	background: -ms-linear-gradient(top, #c8c8c8 34%, #b4b4b4 71%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(34%, #c8c8c8), color-stop(71%, #b4b4b4));
	box-shadow: inset 1px 0 9px 0 #dfdfdf;
	text-shadow: 1px 0 1px white;
	display: none; /* removed close button */
}

li.folder .dg .cr { border-left-color: var(--navSliderColor)!important; } /* change border-left colors to the same color within each folder (applies to: .cr.boolean, .cr.string, .cr.function, .cr.number) */
.dg .c .slider-fg { background: var(--navSliderColor)!important; } /* Chage color of nav menu sliders */
.dg .cr.number input[type=text] { color: var(--navTextColor)!important; }
.dg .cr.number input[type=text]:hover { color: black; }
.dg li.cr:hover { background-color: var(--navRowHighlightColor)!important; } /* row highlight color */
.dg li.title:hover { outline-color: var(--navRowHighlightColor)!important; } /* nav menu item outline color */

.dg .cr.weatherVaneRooster .c::after { content: " Rooster"; }
.dg .cr.weatherVaneHorse .c::after { content: " Horse"; }

/* Modifications to specific UI menu controlls */
.dg.a > div > ul { background-color: red; }
.dg.a #guiEstimate, .dg.a #guiPrint, .dg.a #guiShare, .dg.a #guiSave, .dg.a #guiResetCamera, .dg.a #guiInOut, .dg.a #guiStartOver, .dg.a #guiTopView, .dg.a #guiHideWalls { background-color: #666; background-color: var(--buttonColor); color: white; display: inline-block; padding: 0; border: none; margin-top: 2px; margin-bottom: 2px; border: 2px solid #ccc; box-sizing: border-box; height: auto; line-height: 15px; }
.dg.a #guiEstimate { width: calc(100%); margin-bottom: 0; padding: 4px; }
.dg.a #guiPrint { width: 32%; }
.dg.a #guiShare { width: 32%; margin-left: 2%; margin-right: 2%; }
.dg.a #guiSave { width: 32%; }
.dg.a #guiResetCamera, .dg.a #guiInOut, .dg.a #guiTopView { width: 23.5%; margin-right: 2%; } /* 4 across */
.dg.a #guiStartOver, .dg.a #guiHideWalls { width: 23.5%; } /* 4 across */
.dg.a #guiResetCamera, .dg.a #guiInOut, .dg.a #guiTopView { width: 32%; margin-right: 2%; } /* 3 across */
.dg.a #guiStartOver, .dg.a #guiHideWalls { width: 32%; } /* 3 across */
.dg.a #guiPrint div span, .dg.a #guiShare div span, .dg.a #guiSave div span, .dg.a #guiResetCamera div span, .dg.a #guiInOut div span, .dg.a #guiStartOver div span, .dg.a #guiTopView div span, .dg.a #guiHideWalls div span { word-spacing: 500px; }
.dg.a #guiEstimate div span, .dg.a #guiPrint div span, .dg.a #guiShare div span, .dg.a #guiSave div span, .dg.a #guiResetCamera div span, .dg.a #guiInOut div span, .dg.a #guiStartOver div span, .dg.a #guiTopView div span, .dg.a #guiHideWalls div span { width: 100%; text-align: center; }
.dg.a #guiEstimate:hover, .dg.a #guiPrint:hover, .dg.a #guiShare:hover, .dg.a #guiSave:hover, .dg.a #guiResetCamera:hover, .dg.a #guiInOut:hover, .dg.a #guiStartOver:hover, .dg.a #guiTopView:hover, .dg.a #guiHideWalls:hover { background-color: #aaa; background-color: var(--buttonHoverColor)!important; }

/* Pulse the Quote Button */
@keyframes pulse {
	 0% { transform: scale(0); opacity: 0; }
	 33% { transform: scale(1); opacity: 1; }
	 100% { transform: scale(3); opacity: 0; }
}
 .dg.a #guiEstimate {
	align-items: center;
	box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.1);
	text-decoration: none;
	transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
	will-change: transform;
	font-weight: bold;
	background: 
		linear-gradient(
			var(--buttonColor),
			var(--buttonHoverColor)
		);
}
 .dg.a #guiEstimate:hover {
	background-color: var(--buttonHoverColor)!important;
	color: #fff;
	box-shadow: 0 4px 17px rgba(0, 0, 0, 0.2);
	background: linear-gradient( var(--buttonHoverColor), #d20000fa)!important;
}
 .dg.a #guiEstimate:active {
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
}
 .dg.a #guiEstimate {
	position: relative;
}
 .dg.a #guiEstimate:before, .dg.a #guiEstimate:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, .25);
	border-radius: 50%;
	width: 100px;
	height: 100px;
	opacity: 0;
	margin: auto;
}
 .dg.a #guiEstimate:before {
	animation: pulse 1.5s infinite linear;
}
 .dg.a #guiEstimate:after {
	animation: pulse 2s 0.4s infinite linear;
}
 .dg.a #guiEstimate:hover:before, .dg.a #guiEstimate:hover:after {
	display: none;
}

/* 
  ##Device = for cramped screens
*/
@media (max-width: 768px) {
	#popupContainer { right: 0; bottom: 0; top: 0; left: 0; }
	#builder { position: fixed; }
	#info { position: fixed; }
}
/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
*/
@media (max-width: 480px) {
	html { touch-action: none; }
	#builder { top: 0px; }
	#popup { max-height: 40%; }
	#builder canvas {  }
	body .dg {
		width: auto!important;
		margin:0;
		padding:0;
		position: fixed:
		top: 28px;
		left: 0;
		right: 0;
		bottom: 100%;
	}
	.dg.ac .dg.main {
		margin:0;
		padding:0;
		position: fixed;
		top: 34%;
		left: 0;
		right: 0;
		bottom: 0%;
		height; 300px;
	}
	.dg.a #guiPrint div span, .dg.a #guiShare div span, .dg.a #guiSave div span, .dg.a #guiResetCamera div span, .dg.a #guiInOut div span, .dg.a #guiStartOver div span, .dg.a #guiTopView div span, .dg.a #guiHideWalls div span { word-spacing: normal; }
}


div#navigation { position: absolute; top: 36px; left: 15px; width: 300px; max-width: calc(100% - 340px); background-color: rgba(150, 150, 150, .5); }
div#navigation .content { padding: 15px; font-size: 16px; }
div#navigation h3 { font-size: 20px; line-height: 30px; margin: 10px 0 4px 0; }
button#navBtn { position: absolute; left: 15px; top: 2px; }
.navMove { display: block; width: 100px; height: 100px; position: absolute; background-image: url("../images/TouchControls/nav.png"); }
.navMove a { position: absolute; display: block; width: 24px; height: 24px; }
.navMove img { width:24px; height:24px; opacity: 0.4; }
.navMove img:hover { width:24px; height:24px; position: absolute; opacity: 0.75; }
.navMove #navForward { top: 7px; left: calc(50% - 12px); }
.navMove #navRight   { top: calc(50% - 12px); right: 7px; }
.navMove #navBack    { bottom: 7px; left: calc(50% - 12px); }
.navMove #navLeft    { top: calc(50% - 12px); left: 7px; }
.navMove #navForward img { transform: rotate(0deg); }
.navMove #navRight img   { transform: rotate(90deg); }
.navMove #navBack img    { transform: rotate(180deg); }
.navMove #navLeft img    { transform: rotate(270deg); }
div#navigation .content button { background-color: #007ac2; color: white; display: inline-block; border: none; border-radius: 5px; padding: 0 5px; margin: 12px 4px 0 4px; line-height: 20px; height: 22px; }
div#navigation .content button { background-color: #5bbeec; }
div#navigation #navReset { position: absolute; left: 50%; transform: translate(-50%, 0); }
div#navigation #navStartOver, div#navigation #navTopView { float: right; }
.navZoom { width: 40px; height: 100px; position: absolute; position: absolute; left: 50%; transform: translate(-50%, 0); }
.navZoom #navZoomIn, .navZoom #navZoomOut { width: 30px; height: 30px; border: 3px solid; border-color: rgba(255,255,255,0.35); border-radius: 50%; position: absolute; top: 8px; left: 50%; transform: translate(-50%, 0); }
.navZoom #navZoomOut { top: 62px; }
.navZoom img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; opacity: 0.4; }
.navZoom #navZoomIn:hover, .navZoom #navZoomOut:hover { border-color: rgba(255,255,255,0.7); }
.navZoom #navZoomIn:hover img, .navZoom #navZoomOut:hover img { opacity: 0.75; }
.navRotate { width: 100px; height: 100px; position: relative; left: 165px; background-image: url("../images/TouchControls/orbit.png"); }
.navRotate a { position: absolute; display: block; width: 40px; height: 40px; border-radius: 40%; }
.navRotate a img { position: absolute; width:16px; height:16px; opacity: 0.4; }
.navRotate a:hover img { opacity: 0.75; }
.navRotate #navRotUp    { top: 0px; left: calc(50% - 20px); }
.navRotate #navRotRight { top: calc(50% - 20px); right: 0px; }
.navRotate #navRotDown  { bottom: 0px; left: calc(50% - 20px); }
.navRotate #navRotLeft  { top: calc(50% - 20px); left: 0px; }
.navRotate #navRotUp img    { transform: rotate(0deg); top: 7px; left: calc(50% - 8px); }
.navRotate #navRotRight img { transform: rotate(90deg); right: 7px; top: calc(50% - 8px); }
.navRotate #navRotDown img  { transform: rotate(180deg); bottom: 7px; left: calc(50% - 8px); }
.navRotate #navRotLeft img  { transform: rotate(270deg); left: 7px; top: calc(50% - 8px); }
/* Colors */
li.folder select { height: 26px; font-weight: bold; padding: 0; margin: 0; margin-top: -4px!important; width: 100%; border-left: 1px solid #bbb!important; }
li.folder select option { font-weight: bold; font-size: 18px; padding: 5px; text-shadow: none; }


li.folder select option[value="Ash Gray"]		{ background-color: #828282; background-image: url(../images/color.php?c=828282); color: white; }
li.folder select option[value="Berry"]			{ background-color: #805658; background-image: url(../images/color.php?c=805658); color: white; }
li.folder select option[value="Bone White"]		{ background-color: #f7f9eb; background-image: url(../images/color.php?c=f7f9eb); color: black; }
li.folder select option[value="Brown"]			{ background-color: #5f4029; background-image: url(../images/color.php?c=5f4029); color: white; }
li.folder select option[value="Charcoal"]		{ background-color: #505050; background-image: url(../images/color.php?c=505050); color: white; }
li.folder select option[value="Green"]			{ background-color: #274f00; background-image: url(../images/color.php?c=274f00); color: white; }
li.folder select option[value="Hawaiian Blue"]		{ background-color: #8abadd; background-image: url(../images/color.php?c=8abadd); color: white; }
li.folder select option[value="Ivory"]			{ background-color: #ffffaa; background-image: url(../images/color.php?c=ffffaa); color: black; }
li.folder select option[value="Light Stone"]		{ background-color: #bd9d7e; background-image: url(../images/color.php?c=bd9d7e); color: white; }
li.folder select option[value="Polar White"]		{ background-color: #ffffff; background-image: url(../images/color.php?c=ffffff); color: black; }
li.folder select option[value="Rustic Red"]		{ background-color: #8e3a22; background-image: url(../images/color.php?c=8e3a22); color: white; }
li.folder select option[value="Tan"]			{ background-color: #ffd4aa; background-image: url(../images/color.php?c=ffd4aa); color: black; }
li.folder select option[value="Burnished Slate"]	{ background-color: #4f3b35; background-image: url(../images/color.php?c=4f3b35); color: white; }
li.folder select option[value="Crimson Red"]		{ background-color: #b60000; background-image: url(../images/color.php?c=b60000); color: white; }
li.folder select option[value="Desert Sand"]		{ background-color: #bd8d7e; background-image: url(../images/color.php?c=bd8d7e); color: white; }
li.folder select option[value="Black"]			{ background-color: #000000; background-image: url(../images/color.php?c=000000); color: white; }
li.folder select option[value="Red Oxide"]		{ background-color: #820000; background-image: url(../images/color.php?c=820000); color: white; }
li.folder select option[value="Galvanized"]		{ background-color: #bebebe; background-image: url(../images/color.php?c=bebebe); color: black; }
li.folder select option[value="Royal Blue"]		{ background-color: #0057a1; background-image: url(../images/color.php?c=0057a1); color: white; }

/* repeat the colors for the parent select box - these have non-alphanumeric characters removed */
li.folder select { border: none; text-shadow: none; }

li.folder select.AshGray		{ background-color: #828282; background-image: url(../images/color.php?c=828282); color: white; }
li.folder select.Berry			{ background-color: #805658; background-image: url(../images/color.php?c=805658); color: white; }
li.folder select.BoneWhite		{ background-color: #f7f9eb; background-image: url(../images/color.php?c=f7f9eb); color: black; }
li.folder select.Brown			{ background-color: #5f4029; background-image: url(../images/color.php?c=5f4029); color: white; }
li.folder select.Charcoal		{ background-color: #505050; background-image: url(../images/color.php?c=505050); color: white; }
li.folder select.Green			{ background-color: #274f00; background-image: url(../images/color.php?c=274f00); color: white; }
li.folder select.HawaiianBlue		{ background-color: #8abadd; background-image: url(../images/color.php?c=8abadd); color: white; }
li.folder select.Ivory			{ background-color: #ffffaa; background-image: url(../images/color.php?c=ffffaa); color: black; }
li.folder select.LightStone		{ background-color: #bd9d7e; background-image: url(../images/color.php?c=bd9d7e); color: white; }
li.folder select.PolarWhite		{ background-color: #ffffff; background-image: url(../images/color.php?c=ffffff); color: black; }
li.folder select.RusticRed		{ background-color: #8e3a22; background-image: url(../images/color.php?c=8e3a22); color: white; }
li.folder select.Tan			{ background-color: #ffd4aa; background-image: url(../images/color.php?c=ffd4aa); color: black; }
li.folder select.BurnishedSlate		{ background-color: #4f3b35; background-image: url(../images/color.php?c=4f3b35); color: white; }
li.folder select.CrimsonRed		{ background-color: #b60000; background-image: url(../images/color.php?c=b60000); color: white; }
li.folder select.DesertSand		{ background-color: #bd8d7e; background-image: url(../images/color.php?c=bd8d7e); color: white; }
li.folder select.Black			{ background-color: #000000; background-image: url(../images/color.php?c=000000); color: white; }
li.folder select.RedOxide		{ background-color: #820000; background-image: url(../images/color.php?c=820000); color: white; }
li.folder select.Galvanized		{ background-color: #bebebe; background-image: url(../images/color.php?c=bebebe); color: black; }
li.folder select.RoyalBlue		{ background-color: #0057a1; background-image: url(../images/color.php?c=0057a1); color: white; }

/* Modal Forms */
form { margin: 0; }
form label { font-size: 24.5px !important; color: #555; padding-left: 5px; padding-bottom: 10px; }
form select { font-size: 24.5px; font-weight: bold; }
form.sign-up-form input { font-size: 24.5px !important; font-weight: bold; width: calc(100% - 12px); height: auto !important; background-color: #f8f8f8 !important; color: black !important; }
form .dropdown ul { margin-left: 0; }
form .dropdown {
	width: 100%;
	border: 1px solid #cccccc;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
	-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
	-o-transition: border linear 0.2s, box-shadow linear 0.2s;
	transition: border linear 0.2s, box-shadow linear 0.2s;
	font-size: 24.5px !important;
	font-weight: bold;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
form .dropdown li { border-bottom: 1px solid rgba(200, 200, 200, 0.8); }
form .dropdown:focus {
  border-color: rgba(82, 168, 236, 0.8);
  outline: 0;
  outline: thin dotted \9;
  /* IE6-9 */

  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
form .dropdown span, form .dropdown li { font-size: 24.5px !important; }

div.modal form label.error { color: red; font-size: 15px!important; line-height: initial; margin-bottom: 0; padding-bottom: 0; margin-top: 0; }
div.modal form input.error { background-color: #ffcccc!important; }

#loadingModal .progress-bar { background-color: var(--buttonColor); }

.modal-content { font-size: 1.25em; }

div#modal-success.modal { width: 325px; height: auto; top: 12%; background-color: rgba(91, 190, 236, 0.75); } /* was: background-color: rgba(223, 242, 191, 0.6); border: 2px solid #4F8A10; */
div#modal-success.modal button.close {
	color: white;
	width: 35px; height: 35px; border-radius: 50%;
	position: absolute;
	line-height: 0;
	top: 10px;
	right: 10px;
	opacity: 0.7;
	border: 2px solid white!important;
}
div#modal-success.modal button.close:hover { opacity: 0.85; }
div#modal-success.modal button.close strong { position: relative; top: -3px; font-size: 24px; font-weight: normal; }
div#modal-success.modal div.modal-header { background: transparent; border: none; padding: 0; text-align: center; margin-top: 12px; }
div#modal-success.modal div.modal-header h3 { text-shadow: 1px 1px 6px black; font-size: 30px; color: white; }
div#modal-success.modal div.modal-body { text-align: center; font-size: 18px; color: white; line-height: 1.35em; }
div#modal-success.modal div.modal-body .video { margin-top: 15px; width: 100%; padding-top: 56.25%; position: relative; }
div#modal-success.modal div.modal-body .video iframe { width: 100%; height: 100%; position: absolute; top:0; left: 0; bottom: 0; right: 0; }

p.success, div.error.messages { display: none; border-bottom: 1px solid; border-top: 1px solid; font-size: 20px!important; padding: 5px; text-align: center; }
p.success { color: #4F8A10!important; background-color: #DFF2BF; border-color: #4F8A10; }
div.error.messages { color: #D8000C!important; background-color: #FFBABA; border-color: #D8000C; }

/* Mobile only styles */
	/* Smartphones (portrait and landscape) ----------- */
	/* @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { */
	@media only screen and (max-width : 640px) {
		div#navigation .content { font-size: 14px; line-height: 17px; }
		div#navigation h3 { font-size: 16px; line-height: 24px; }
		div#navigation #navReset { position: relative; left: 0; transform: none; }
		div#navigation button { display: block; left: 0; position: relative; transform: none; float: none; width: calc(100% - 8px); height: auto; padding: 4px; }
	}