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-family: 'Lato', sans-serif;
	font-size:13px;

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

	background: linear-gradient(#ccc, rgb(13,34,64));
	
	/* 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;
	top: 0px;
	left: 0px;
	width: 100%;
	padding: 4px;
	padding-top: 2px;
	background-color: rgba(13,34,64,0.91);
	text-align:center;
	font-size: 15px;
	color: #fff;
}
#info #logo { vertical-align: bottom; position: relative; top: 1px; }

#helpButton {
  color:#ababab; color:#93a1b3; position: absolute; top: 5px; left: 4px; font-size: 1.25em;
  z-index: 1004;
  cursor: pointer;
}
#helpButton:hover { color:#dedede; }
#overlay {
  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 #closeButton {
	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:hover { text-decoration: underline; color: #333; }

.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(240px - 10px - 4px);

	background-color: rgba(55,55,55,0.75);
	border-radius: 5px;
	color: white;
	/*box-sizing: border-box;*/
	margin-top: 28px;
	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 #rotateLeftButton.btn, #popup #rotateRightButton.btn { margin-bottom: 10px; }
#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: 90%; 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: 22%; margin-right: 1.25%; background-color: #eee; float: left; padding: 0 1% 1% 1%; min-height: 165px; }
#print #specs .column:last-child { margin-right: 0; }
#print #printFooter { position: absolute; top: 98%; 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: 8.5in; 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 { font-size: 13px!important; font-family: 'Lato', sans-serif!important; }
.dg.ac .dg.main { position: fixed; top: 0; right: 0; bottom: 0;  }
.dg.ac .dg.a { margin: 0; margin-top: 28px; } /* 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 li.cr:hover { background-color: #c0e8ff!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; }
.dg .message.delete .property-name {  }
.dg .message.delete.true .property-name { background-color: #ffcccc; }
.dg .message {  }
.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 */
}

	/* change border-left colors to the same color within each folder (applies to: .cr.boolean, .cr.string, .cr.function, .cr.number) */
	li.folder .dg .cr { border-left-color: #007ac2!important; }

/* Modifications to specific UI menu controlls */
.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: #007ac2; color: white; display: inline-block; padding: 8px 0!important; border: none; margin: 0; box-sizing: border-box; height: auto; line-height: 15px; border-right: 1px solid #578eaf; background: linear-gradient(#007ac2, #105680); }
.dg.a #guiEstimate { width: calc(100%); margin-bottom: 0; padding: 4px; padding: 10px; font-weight: bold; font-size: 20px; line-height: 24px; }
.dg.a #guiPrint { width: calc(33.3%); }
.dg.a #guiShare { width: calc(33.3%); }
.dg.a #guiSave { width: 33.3%; }
.dg.a #guiResetCamera, .dg.a #guiInOut, .dg.a #guiTopView { width: 25%; }
.dg.a #guiStartOver, .dg.a #guiHideWalls { width: 25%; }
.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: #5bbeec!important; background: linear-gradient(#138fd8, #105680); }
.dg.a #guiHideWalls.disabled { background-color: #6199bb; color: #9dc0d6; background: linear-gradient(#77a8c5, #567a90); pointer-events: none; }

/* Pulse the Quote Button */
@keyframes pulse {
	 0% { transform: scale(0); opacity: 0; }
	 33% { transform: scale(1); opacity: 0.6; }
	 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(#007ac2, #105680);
}
 .dg.a #guiEstimate:hover {
	/*background: #ae4b67;*/
	background-color: rgb(255, 122, 21) !important;
	color: #fff;
	box-shadow: 0 4px 17px rgba(0, 0, 0, 0.2);
}
 .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 3s infinite linear;
}
 .dg.a #guiEstimate:after {
	animation: pulse 4s 0.8s 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: 30px; 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: 16px; padding: 5px; text-shadow: none; } /* font-size was previously 18px */

li.folder select option[value="Almond"]			{ background-color: #dacac2; background-image: url(../images/color.gif.php?c=dacac2); color: black; }
li.folder select option[value="Ash Gray"]		{ background-color: #ACA0A0; background-image: url(../images/color.gif.php?c=ACA0A0); color: black; }
li.folder select option[value="Autumn Red"]		{ background-color: #81312B; background-image: url(../images/color.gif.php?c=81312B); color: white; }
li.folder select option[value="Bone White"]		{ background-color: #eae3e9; background-image: url(../images/color.gif.php?c=eae3e9); color: black; }
li.folder select option[value="Brandywine"]		{ background-color: #532F35; background-image: url(../images/color.gif.php?c=532F35); color: white; }
li.folder select option[value="Brite Red"]		{ background-color: #9C212C; background-image: url(../images/color.gif.php?c=9C212C); color: white; }
li.folder select option[value="Charcoal"]		{ background-color: #625C5F; background-image: url(../images/color.gif.php?c=625C5F); color: white; }
li.folder select option[value="Clay"]			{ background-color: #A1938B; background-image: url(../images/color.gif.php?c=A1938B); color: white; }
li.folder select option[value="Colonial Red"]		{ background-color: #6F312F; background-image: url(../images/color.gif.php?c=6F312F); color: white; }
li.folder select option[value="Copper Penny"]		{ background-color: #9d6042; background-image: url(../images/color.gif.php?c=9d6042); color: white; }
li.folder select option[value="Dark Bronze"]		{ background-color: #3e383b; background-image: url(../images/color.gif.php?c=3e383b); color: white; }
li.folder select option[value="Evergreen"]		{ background-color: #3a4d44; background-image: url(../images/color.gif.php?c=3a4d44); color: white; }
li.folder select option[value="Forest Green"]		{ background-color: #1e3f31; background-image: url(../images/color.gif.php?c=1e3f31); color: white; }
li.folder select option[value="Hartford Green"]		{ background-color: #333c38; background-image: url(../images/color.gif.php?c=333c38); color: white; }
li.folder select option[value="Ivory"]			{ background-color: #e7ccbd; background-image: url(../images/color.gif.php?c=e7ccbd); color: black; }
li.folder select option[value="Light Stone"]		{ background-color: #cdb9ae; background-image: url(../images/color.gif.php?c=cdb9ae); color: black; }
li.folder select option[value="Mansard Brown"]		{ background-color: #4c3632; background-image: url(../images/color.gif.php?c=4c3632); color: white; }
li.folder select option[value="Matte Black"]		{ background-color: #2f2e31; background-image: url(../images/color.gif.php?c=2f2e31); color: white; }
li.folder select option[value="Medium Bronze"]		{ background-color: #5d4f49; background-image: url(../images/color.gif.php?c=5d4f49); color: white; }
li.folder select option[value="Patina Green"]		{ background-color: #7e8476; background-image: url(../images/color.gif.php?c=7e8476); color: white; }
li.folder select option[value="Patrician Bronze"]	{ background-color: #443a35; background-image: url(../images/color.gif.php?c=443a35); color: white; }
li.folder select option[value="Preweathered Galvalume"]	{ background-color: #78777e; background-image: url(../images/color.gif.php?c=78777e); color: white; }
li.folder select option[value="Regal Blue"]		{ background-color: #214e6e; background-image: url(../images/color.gif.php?c=214e6e); color: white; }
li.folder select option[value="Regal White"]		{ background-color: #e2dde7; background-image: url(../images/color.gif.php?c=e2dde7); color: black; }
li.folder select option[value="Roman Blue"]		{ background-color: #4c6f87; background-image: url(../images/color.gif.php?c=4c6f87); color: white; }
li.folder select option[value="Sandstone"]		{ background-color: #cdc0bc; background-image: url(../images/color.gif.php?c=cdc0bc); color: black; }
li.folder select option[value="Sepia Brown"]		{ background-color: #4a342a; background-image: url(../images/color.gif.php?c=4a342a); color: white; }
li.folder select option[value="Silver"]			{ background-color: #b0a9af; background-image: url(../images/color.gif.php?c=b0a9af); color: black; }
li.folder select option[value="Slate Gray"]		{ background-color: #7f7577; background-image: url(../images/color.gif.php?c=7f7577); color: white; }
li.folder select option[value="Surrey Beige"]		{ background-color: #b59c8d; background-image: url(../images/color.gif.php?c=b59c8d); color: white; }
li.folder select option[value="TerraTone"]		{ background-color: #6b5d58; background-image: url(../images/color.gif.php?c=6b5d58); color: white; }
li.folder select option[value="Tudor Brown"]		{ background-color: #5b403c; background-image: url(../images/color.gif.php?c=5b403c); color: white; }

li.folder select option[value="Stone"]			{ background-color: #8b8d7a; color: white; background-image: url(../images/ui/StackedStone.jpg); }
li.folder select option[value="Brick"]			{ background-color: #841f27; color: white; background-image: url(../images/ui/Brick.jpg); }

/* 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.Almond			{ background-color: #dacac2; background-image: url(../images/color.gif.php?c=dacac2); }
li.folder select.AshGray		{ background-color: #ACA0A0; background-image: url(../images/color.gif.php?c=ACA0A0); }
li.folder select.AutumnRed		{ background-color: #81312B; background-image: url(../images/color.gif.php?c=81312B); color: white; }
li.folder select.BoneWhite		{ background-color: #eae3e9; background-image: url(../images/color.gif.php?c=eae3e9); }
li.folder select.Brandywine		{ background-color: #532F35; background-image: url(../images/color.gif.php?c=532F35); color: white; }
li.folder select.BriteRed		{ background-color: #9C212C; background-image: url(../images/color.gif.php?c=9C212C); color: white; }
li.folder select.Charcoal		{ background-color: #625C5F; background-image: url(../images/color.gif.php?c=625C5F); color: white; }
li.folder select.Clay			{ background-color: #A1938B; background-image: url(../images/color.gif.php?c=A1938B); color: white; }
li.folder select.ColonialRed		{ background-color: #6F312F; background-image: url(../images/color.gif.php?c=6F312F); color: white; }
li.folder select.CopperPenny		{ background-color: #9d6042; background-image: url(../images/color.gif.php?c=9d6042); color: white; }
li.folder select.DarkBronze		{ background-color: #3e383b; background-image: url(../images/color.gif.php?c=3e383b); color: white; }
li.folder select.Evergreen		{ background-color: #3a4d44; background-image: url(../images/color.gif.php?c=3a4d44); color: white; }
li.folder select.ForestGreen		{ background-color: #1e3f31; background-image: url(../images/color.gif.php?c=1e3f31); color: white; }
li.folder select.HartfordGreen		{ background-color: #333c38; background-image: url(../images/color.gif.php?c=333c38); color: white; }
li.folder select.Ivory			{ background-color: #e7ccbd; background-image: url(../images/color.gif.php?c=e7ccbd); }
li.folder select.LightStone		{ background-color: #cdb9ae; background-image: url(../images/color.gif.php?c=cdb9ae); }
li.folder select.MansardBrown		{ background-color: #4c3632; background-image: url(../images/color.gif.php?c=4c3632); color: white; }
li.folder select.MatteBlack		{ background-color: #2f2e31; background-image: url(../images/color.gif.php?c=2f2e31); color: white; }
li.folder select.MediumBronze		{ background-color: #5d4f49; background-image: url(../images/color.gif.php?c=5d4f49); color: white; }
li.folder select.PatinaGreen		{ background-color: #7e8476; background-image: url(../images/color.gif.php?c=7e8476); color: white; }
li.folder select.PatricianBronze	{ background-color: #443a35; background-image: url(../images/color.gif.php?c=443a35); color: white; }
li.folder select.PreweatheredGalvalume	{ background-color: #78777e; background-image: url(../images/color.gif.php?c=78777e); color: white; }
li.folder select.RegalBlue		{ background-color: #214e6e; background-image: url(../images/color.gif.php?c=214e6e); color: white; }
li.folder select.RegalWhite		{ background-color: #e2dde7; background-image: url(../images/color.gif.php?c=e2dde7); }
li.folder select.RomanBlue		{ background-color: #4c6f87; background-image: url(../images/color.gif.php?c=4c6f87); color: white; }
li.folder select.Sandstone		{ background-color: #cdc0bc; background-image: url(../images/color.gif.php?c=cdc0bc); }
li.folder select.SepiaBrown		{ background-color: #4a342a; background-image: url(../images/color.gif.php?c=4a342a); color: white; }
li.folder select.Silver			{ background-color: #b0a9af; background-image: url(../images/color.gif.php?c=b0a9af); }
li.folder select.SlateGray		{ background-color: #7f7577; background-image: url(../images/color.gif.php?c=7f7577); color: white; }
li.folder select.SurreyBeige		{ background-color: #b59c8d; background-image: url(../images/color.gif.php?c=b59c8d); color: white; }
li.folder select.Terratone		{ background-color: #6b5d58; background-image: url(../images/color.gif.php?c=6b5d58); color: white; }
li.folder select.TudorBrown		{ background-color: #5b403c; background-image: url(../images/color.gif.php?c=5b403c); color: white; }

li.folder select.Stone			{ background-color: #8b8d7a; background-image: url(../images/ui/StackedStone.jpg); color: white; }
li.folder select.Brick			{ background-color: #841f27; background-image: url(../images/ui/Brick.jpg); color: white; }


/* Modal Forms */
form { margin: 0; }
form label { font-size: 18px !important; color: #555; padding-left: 5px; padding-bottom: 2.5px; }
form select { font-size: 18px; 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 { max-width: 90%; transform: translate(-50%, 0%); margin-left: auto; }
div.modal-header {
	background-color: #f5f5f5;
	-webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px;
	-moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px;
	border-top-left-radius: 6px; border-top-right-radius: 6px;
}
div.modal label { margin-top: 5px; margin-bottom: 0; }
div.modal input, div.modal textarea, div.modal select { width: calc(100% - 14px); }
div.modal .checkbox-large { width: 20px; height: 20px; margin-top: 0; margin-right: 8px; }
div.modal-footer .btn { font-size: 24.5px; padding-top: 10px; padding-bottom: 10px; }
div.modal-footer .btn:hover, div.modal-footer .btn:focus { color: white; }
div.modal p { font-size: 24.5px; color: #555; padding-left: 5px; margin-bottom: 0; margin-top: 5px; }
div.modal { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; }
div.modal form div.group { clear:both; }
div.modal form div.column.half { width: calc(50% - 10px); float: left; }
div.modal form div.column.quarter { width: calc(25% - 20px); float: left; }
div.modal form div.column.quarter.right { width: calc(25% - 10px); float: left; }
div.modal form div.column.left { margin-right: 10px; }
div.modal form div.column.middle { margin-right: 10px; margin-left: 10px; }
div.modal form div.column.right { margin-left: 10px; }
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, div.modal form select.error { background-color: #ffcccc!important; }

#modal-share .modal-footer input#shareLink { float: left; width: 27%; margin-top: 6px; margin-bottom: 0; cursor: text!important; }
#modal-share .modal-footer label { float: left; font-size: 17px!important; margin-top: 11px; margin-right: 5px; }

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, p.fail { border-bottom: 1px solid; border-top: 1px solid; font-size: 20px!important; padding: 5px; text-align: center; }
p.success { display: block; color: #4F8A10!important; background-color: #DFF2BF; border-color: #4F8A10; }
p.fail { display: block; color: #D8000C!important; background-color: #FFBABA; border-color: #D8000C; }

/* Touch GUI */
#touchGUI { top:50%;left:50%;	position: absolute; display: none; background-image: url("../images/TouchControls/scaleArrows.png"); background-size: 100% 100%; background-repeat: no-repeat; width: 300px; height: 300px; color: white; transform: translate(-50%,-50%); }
#touchGUI span { font-size: 24px; text-align: center; position: absolute; transform: translate(-50%,-50%); }
#touchGUI span.x { top: 50%; left: 78%; }
#touchGUI span.y { top: 23%; left: 50%; }


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