/*
Name:			webapp.css
Description:	CSS for SST Web Apps
*/

/*----------------------------------------------------------------------------------------
[Table of contents]

a. Web app colors
b. SST fonts
1. General DOMs
2. General classes
3. General IDs
4. Sections
5. Header
6. EULA
7. Buttons
8. Backgrounds
_. ____
_. Print Styles

----------------------------------------------------------------------------------------*/


/*----------------------------------------------------------------------------------------
[a. Web app colors]

Orange:			#C3640B

Darkest Blue:	#036		
Med Blue:		#369
Light Blue:		#69C

Dark Gray:		#333		Text on light BG
Light Gray:		#AAA		Text on dark BG	

----------------------------------------------------------------------------------------*/



/*----------------------------------------------------------------------------------------
[b. SST fonts]

Neue Helvetica 25 Ultra Light:						font-family: 'helvetica-2';
Neue Helvetica 26 Ultra Light Italic:				font-family: 'helvetica-2i';
Neue Helvetica 27 Condensed Ultra Light:			font-family: 'helvetica-2c';
Neue Helvetica 27 Condensed Ultra Light Oblique:	font-family: 'helvetica-2ci';
Neue Helvetica 23 Extended Ultra Light:				font-family: 'helvetica-2e';
Neue Helvetica 23 Extended Ultra Light Oblique:		font-family: 'helvetica-2ei';

Neue Helvetica 35 Thin:								font-family: 'helvetica-3';
Neue Helvetica 36 Thin Italic:						font-family: 'helvetica-3i';
Neue Helvetica 37 Condensed Thin:					font-family: 'helvetica-3c';
Neue Helvetica 37 Condensed Thin Oblique:			font-family: 'helvetica-3ci';
Neue Helvetica 33 Extended Thin:					font-family: 'helvetica-3e';
Neue Helvetica 33 Extended Thin Oblique:			font-family: 'helvetica-3ei';

Neue Helvetica 45 Light:							font-family: 'helvetica-4';
Neue Helvetica 46 Light Italic:						font-family: 'helvetica-4i';
Neue Helvetica 47 Condensed Light:					font-family: 'helvetica-4c';
Neue Helvetica 47 Condensed Light Oblique:			font-family: 'helvetica-4ci';
Neue Helvetica 43 Extended Light:					font-family: 'helvetica-4e';
Neue Helvetica 43 Extended Light Oblique:			font-family: 'helvetica-4ei';

Neue Helvetica 55 Roman:							font-family: 'helvetica-5';
Neue Helvetica 56 Italic:							font-family: 'helvetica-5i';
Neue Helvetica 57 Condensed:						font-family: 'helvetica-5c';
Neue Helvetica 57 Condensed Oblique:				font-family: 'helvetica-5ci';
Neue Helvetica 53 Extended:							font-family: 'helvetica-5e';
Neue Helvetica 53 Extended Oblique:					font-family: 'helvetica-5ei';

Neue Helvetica 65 Medium:							font-family: 'helvetica-6';
Neue Helvetica 66 Medium Italic:					font-family: 'helvetica-6i';
Neue Helvetica 67 Condensed Medium:					font-family: 'helvetica-6c';
Neue Helvetica 67 Condensed Medium Oblique:			font-family: 'helvetica-6ci';
Neue Helvetica 63 Extended Medium:					font-family: 'helvetica-6e';
Neue Helvetica 63 Extended Medium:					font-family: 'helvetica-6ei';

Neue Helvetica 75 Bold:								font-family: 'helvetica-7';
Neue Helvetica 76 Bold Italic:						font-family: 'helvetica-7i';
Neue Helvetica 77 Condensed Bold:					font-family: 'helvetica-7c';
Neue Helvetica 77 Condensed Bold Oblique:			font-family: 'helvetica-7ci';
Neue Helvetica 73 Extended Bold:					font-family: 'helvetica-7e';
Neue Helvetica 73 Extended Bold Oblique:			font-family: 'helvetica-7ei';

Neue Helvetica 85 Heavy:							font-family: 'helvetica-8';
Neue Helvetica 86 Heavy Italic:						font-family: 'helvetica-8i';
Neue Helvetica 87 Condensed Heavy:					font-family: 'helvetica-8c';
Neue Helvetica 87 Condensed Heavy Oblique:			font-family: 'helvetica-8ci';
Neue Helvetica 83 Extended Heavy:					font-family: 'helvetica-8e';
Neue Helvetica 83 Extended Heavy Oblique:			font-family: 'helvetica-8ei';

Neue Helvetica 95 Black:							font-family: 'helvetica-9';
Neue Helvetica 96 Black Italic:						font-family: 'helvetica-9i';
Neue Helvetica 97 Condensed Black:					font-family: 'helvetica-9c';
Neue Helvetica 97 Condensed Black Oblique:			font-family: 'helvetica-9ci';
Neue Helvetica 93 Extended Black:					font-family: 'helvetica-9e';
Neue Helvetica 93 Extended Black Oblique:			font-family: 'helvetica-9ei';

Neue Helvetica 107 Condensed Extra Black:			font-family: 'helvetica-10c';
Neue Helvetica 107 Condensed Extra Black Oblique:	font-family: 'helvetica-10ci';

----------------------------------------------------------------------------------------*/



/*----------------------------------------------------------------------------------------
[1. General DOMs]
*/

h2.sectionHeader {
	font-family: 'helvetica-4';
	font-size: 22px;
	margin: 0 0 10px 0;
}

p.small {
	font-family: 'helvetica-4';
	font-size: 11px;
}

p.version {
	color: #222;
	font-family: 'helvetica-4';
	font-size: 9px;
	padding: 20px 0 10px 0;
	text-align: center;
}

/*----------------------------------------------------------------------------------------
[2. General Classes]
*/



/*----------------------------------------------------------------------------------------
[3. General IDs]
*/



/*----------------------------------------------------------------------------------------
[4. Sections]
*/

.webAppSection {
	box-sizing: border-box;
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	margin: 15px auto;
	padding: 0;
	position: relative;
	width: 920px;
}

.webAppSection.border {
	border: 1px solid #CCC;
}

#webAppWrapper {
	box-sizing: border-box;
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	color: #555;
	clear: both;
	font-size: 13px;
	font-family: 'helvetica-5';
	line-height: 140%;
	text-shadow: 0 1px 0 #FFF;
	position: relative;
}


/*----------------------------------------------------------------------------------------
[5. Header]
*/

#webAppHeader {
	box-sizing: border-box;
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	height: 150px;
	margin: 10px 0;
	padding: 15px;
	position: relative;
	width: 950px;
}

#webAppHeader h1 {
	font-family: 'helvetica-4';
	font-size: 28px;
	margin: 0 0 15px 0;
}

#webAppHeader p {
	font-size: 13px;
	margin: 10px 0 0 0;
	width: 600px;
}

#webAppHeader .buttons { /* For addThis Social Links */
	position: absolute;
	left: 812px;
	padding: 0;
	top: 20px;
}

/*----------------------------------------------------------------------------------------
[6. EULA]
*/

.eula {
color: #333;
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
box-shadow: inset 0 1px 0 #FFF,
			0 1px 0 #FFF;
font-size: 12px;
line-height: 125%;
padding: 10px 0;
margin: 20px 0 0 0;
}

.eula a {
font-family: 'helvetica-7';
text-decoration: none;
}

.eula a:hover {
color: #aaa;
text-decoration: underline;
}

.eula a:visited { color: #333; }

.eula input#eula {
border: none !important;
float: left;
margin:  2px 6px 6px 0;
}

.eula label { }

/*----------------------------------------------------------------------------------------
[7. Buttons]
*/

.button {
	background: transparent url(/graphics/webapps/button-bg-normal.png) no-repeat;
	border: 1px solid #DDD;
	border: 1px solid RGBA(0,0,0,0.2);
	border-bottom: 1px solid RGBA(0,0,0,0.4);
	box-shadow: inset 0 2px 3px RGBA(255,255,255,0.5),
				inset 1px 0 1px RGBA(255,255,255,0.2),
				inset 0 -1px 1px RGBA(0,0,0,0.3),
				inset -1px 0 1px RGBA(255,255,255,0.2),
				0 1px 2px RGBA(0,0,0,0.3);
	color: #333;
	font-family: 'helvetica-6';
	font-size: 14px;
	height: 35px;
	padding: 5px 35px;
	position: relative;
	text-shadow: 0 1px 0 #FFF;
	text-transform: uppercase;
	z-index: 5;
}

.button:hover,
.button:focus {
	background: transparent url(/graphics/webapps/button-bg-hover.png);
	color: #FFF;
	outline: none;
	text-shadow: 0 -1px 0 #000;
}

.button:active {
	background: transparent url(/graphics/webapps/button-bg-active.png);
	box-shadow: inset 0 2px 3px RGBA(0,0,0,0.5),
				inset 1px 0 1px RGBA(255,255,255,0.2),
				inset 0 -1px 10px RGBA(255,255,255,0.3),
				inset -1px 0 1px RGBA(255,255,255,0.2),
				0 1px 2px RGBA(0,0,0,0.2);
	color: #CCC;
	text-shadow: 0 -1px 0 #000;
}

.button.calculate {
	background: transparent url(/graphics/webapps/button-calculate-normal.png) no-repeat right;
	padding: 5px 52px 5px 20px;
}

.button.calculate:focus,
.button.calculate:hover {
	background: transparent url(/graphics/webapps/button-calculate-hover.png) no-repeat right;
}

.button.calculate:active {
	background: transparent url(/graphics/webapps/button-calculate-active.png) no-repeat right;
}

.button.download {
	background: transparent url(/graphics/webapps/button-download-normal.png) no-repeat right;
	padding: 5px 52px 5px 20px;
}

.button.download:focus,
.button.download:hover {
	background: transparent url(/graphics/webapps/button-download-hover.png) no-repeat right;
}

.button.download:active {
	background: transparent url(/graphics/webapps/button-download-active.png) no-repeat right;
}

.button.hide {
	background: transparent url(/graphics/webapps/button-hide-normal.png) no-repeat right;
	padding: 5px 52px 5px 20px;
}

.button.hide:focus,
.button.hide:hover {
	background: transparent url(/graphics/webapps/button-hide-hover.png) no-repeat right;
}

.button.hide:active {
	background: transparent url(/graphics/webapps/button-hide-active.png) no-repeat right;
}

.button.next {
	background: transparent url(/graphics/webapps/button-next-normal.png) no-repeat right;
	padding: 5px 52px 5px 20px;
}

.button.next:focus,
.button.next:hover {
	background: transparent url(/graphics/webapps/button-next-hover.png) no-repeat right;
}

.button.next:active {
	background: transparent url(/graphics/webapps/button-next-active.png) no-repeat right;
}

.button.previous {
	background: transparent url(/graphics/webapps/button-previous-normal.png) no-repeat right;
	padding: 5px 52px 5px 20px;
}

.button.previous:focus,
.button.previous:hover {
	background: transparent url(/graphics/webapps/button-previous-hover.png) no-repeat right;
}

.button.previous:active {
	background: transparent url(/graphics/webapps/button-previous-active.png) no-repeat right;
}

.button.pdf {
	background: transparent url(/graphics/webapps/button-pdf-normal.png) no-repeat right;
	padding: 5px 52px 5px 20px;
}

.button.pdf:focus,
.button.pdf:hover {
	background: transparent url(/graphics/webapps/button-pdf-hover.png) no-repeat right;
}

.button.pdf:active {
	background: transparent url(/graphics/webapps/button-pdf-active.png) no-repeat right;
}

.button.print {
	background: transparent url(/graphics/webapps/button-print-normal.png) no-repeat right;
	padding: 5px 52px 5px 20px;
}

.button.print:focus,
.button.print:hover {
	background: transparent url(/graphics/webapps/button-print-hover.png) no-repeat right;
}

.button.print:active {
	background: transparent url(/graphics/webapps/button-print-active.png) no-repeat right;
}

.button.restart {
	background: transparent url(/graphics/webapps/button-restart-normal.png) no-repeat right;
	padding: 5px 52px 5px 20px;
}

.button.restart:focus,
.button.restart:hover {
	background: transparent url(/graphics/webapps/button-restart-hover.png) no-repeat right;
}

.button.restart:active {
	background: transparent url(/graphics/webapps/button-restart-active.png) no-repeat right;
}

.button.save {
	background: transparent url(/graphics/webapps/button-save-normal.png) no-repeat right;
	padding: 5px 52px 5px 20px;
}

.button.save:focus,
.button.save:hover {
	background: transparent url(/graphics/webapps/button-save-hover.png) no-repeat right;
}

.button.save:active {
	background: transparent url(/graphics/webapps/button-save-active.png) no-repeat right;
}

.button.show {
	background: transparent url(/graphics/webapps/button-show-normal.png) no-repeat right;
	padding: 5px 52px 5px 20px;
}

.button.show:focus,
.button.show:hover {
	background: transparent url(/graphics/webapps/button-show-hover.png) no-repeat right;
}

.button.show:active {
	background: transparent url(/graphics/webapps/button-show-active.png) no-repeat right;
}

.button.upload {
	background: transparent url(/graphics/webapps/button-upload-normal.png) no-repeat right;
	padding: 5px 52px 5px 20px;
}

.button.upload:focus,
.button.upload:hover {
	background: transparent url(/graphics/webapps/button-upload-hover.png) no-repeat right;
}

.button.upload:active {
	background: transparent url(/graphics/webapps/button-upload-active.png) no-repeat right;
}

/*----------------------------------------------------------------------------------------
[8. Backgrounds]
*/

.aluminum { background: url(/graphics/webapps/brushed_alu.png); }

.inset {
	position: relative;
}

.inset::before {
box-shadow: inset 0 2px 6px RGBA(0,0,0,0.8),
			inset 1px 0 1px RGBA(0,0,0,0.2),
			inset -1px 0 1px RGBA(0,0,0,0.2),
			inset 0 -2px 6px RGBA(255,255,255,0.8);
content: '';
height: 100%;
position: absolute;
width: 100%;
z-index: 5;
}

.cardboard {
	background: url(/graphics/webapps/cardboard_flat.png);
	color: #222;
}

.darkLinen {
	background: url(/graphics/webapps/low_contrast_linen.png);
	color: #AAA;
	text-shadow: 0 -1px 0 #000,
				 0 -1px 2px RGBA(0,0,0,0.5);
}

.lightLinen {
	background: url(/graphics/webapps/whitey.png);
	text-shadow: 0 1px 0 #FFF,
				 0 1px 10px #FFF;
}

.insetDarkBG,
.insetLightBG {
	position: relative;
}

.insetDarkBG::before,
.insetLightBG::before {
	background: -moz-linear-gradient(top,  rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.16) 70%, rgba(0,0,0,0.2) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.05)), color-stop(70%,rgba(0,0,0,0.16)), color-stop(100%,rgba(0,0,0,0.2)));
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.16) 70%,rgba(0,0,0,0.2) 100%);
	background: -o-linear-gradient(top,  rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.16) 70%,rgba(0,0,0,0.2) 100%);
	background: -ms-linear-gradient(top,  rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.16) 70%,rgba(0,0,0,0.2) 100%);
	background: linear-gradient(to bottom,  rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.16) 70%,rgba(0,0,0,0.2) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0dffffff', endColorstr='#33000000',GradientType=0 );
	box-shadow: inset 0 1px 4px RGBA(0,0,0,0.8),
				inset 1px 0 1px RGBA(0,0,0,0.2),
				inset -1px 0 1px RGBA(0,0,0,0.2),
				inset 0 -2px 6px RGBA(255,255,255,0.9);
	content:'';
	height:100%;
	left: 0;
	position:absolute;
	top: 0;
	width:100%;
	z-index: 5;
}

.ricePaper {
	background: url(/graphics/webapps/ricepaper2.png);
	color: #222;
}

/*----------------------------------------------------------------------------------------
[_. _____]
*/

/*----------------------------------------------------------------------------------------
[_. Print Styles]
*/

@media print {

	.button,
	.pageonly,
	#webAppHeader {
		display: none;
	}

	.aluminum,
	.cardboard,
	.darkLinen,
	.lightLinen {
		background: none;
	}

	.printonly {
		display: block;
		visibility: visible;	
	}

}


/*----------------------------------------------------------------------------------------
[_. To Do]








/* Form Elements */
.textbox {
}

.textboxSmall {
width: 35px;
text-align: right;
font-family: Arial, Helvetica, sans-serif;
}


/**************************************************************************************************************************
****************************************************************
***************************
********
*

The DOMs

*/



.webAppWrapper a,
.webAppWrapper a:visited {
color: #D76A2F;
text-decoration: none;
}

.webAppWrapper a:hover {
color: #D76A2F;
text-decoration: underline;
}

.webAppWrapper a:active {
color: #D76A2F;
text-decoration: underline;
}

.webAppWrapper a.button,
.webAppWrapper a.button:visited {
color: #666;
}

.webAppWrapper a.button:active {
color: #777;
text-decoration: none;
}

.webAppWrapper a.button:focus,
.webAppWrapper a.button:hover {
color: #444;
text-decoration: none;
}

.webAppWrapper h2 {
color: #555;
font-size: 14px;
font-family: 'helvetica-7';
margin: 10px 0;
text-shadow: 0px 1px 1px #FFF, 0px 1px 5px #DDD;
transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
}

.webAppWrapper h3 {
color: #D76A2F; /* Burnt Orange */
font-size: 13px;
font-family: 'helvetica-7';
margin: 10px 0;
}

.webAppWrapper h4 {
color: #555;
font-size: 11px;
font-family: 'helvetica-7';
margin: 5px 0 10px 0;
}

.webAppWrapper hr {
background-color: #DDD;
background: linear-gradient(left, rgba(255, 255, 255, 0.01) 0%, rgba(221, 221, 221, 1) 10%, rgba(221, 221, 221, 1) 90%, rgba(255, 255, 255, 0.01) 100%);
background: -moz-linear-gradient(left, rgba(255, 255, 255, 0.01) 0%, rgba(221, 221, 221, 1) 10%, rgba(221, 221, 221, 1) 90%, rgba(255, 255, 255, 0.01) 100%);
background: -ms-linear-gradient(left, rgba(255, 255, 255, 0.01) 0%, rgba(221, 221, 221, 1) 10%, rgba(221, 221, 221, 1) 90%, rgba(255, 255, 255, 0.01) 100%);
background: -o-linear-gradient(left, rgba(255, 255, 255, 0.01) 0%, rgba(221, 221, 221, 1) 10%, rgba(221, 221, 221, 1) 90%, rgba(255, 255, 255, 0.01) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0.01)), color-stop(10%, rgba(221, 221, 221, 1)), color-stop(90%, rgba(221, 221, 221, 1)), color-stop(100%, rgba(255, 255, 255, 0.01)));
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.01) 0%, rgba(221, 221, 221, 1) 10%, rgba(221, 221, 221, 1) 90%, rgba(255, 255, 255, 0.01) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03ffffff', endColorstr='#03ffffff', GradientType=1 );
border: 0;
box-shadow: 0px 1px 2px 0px #FFF; /* Not sure if this shadow is needed? */
-webkit-box-shadow: 0px 1px 2px 0px #FFF;
height: 1px;
margin: 20px 0;
}

.webAppWrapper input,
.webAppWrapper textarea {
background: #FFF;
background: RGBA(255, 255, 255, 0.3);
border: 1px #DDD solid;
border-radius: 3px;
-webkit-border-radius: 3px;
color: #555;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin: 5px 10px 0 0;
padding: 3px;
transition: background 0.25s linear;
-moz-transition: background 0.25s linear;
-ms-transition: background 0.25s linear;
-o-transition: background 0.25s linear;
-webkit-transition: background 0.25s linear;
}

.webAppWrapper input:focus {
outline: none;
border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: 0px 0px 5px 0px rgba(215, 106, 47, 0.5);
-webkit-box-shadow:  0px 0px 5px 0px rgba(215, 106, 47, 0.5);
}

.webAppWrapper input[type=text]:hover {
background: #EEE;
}

.webAppWrapper p {
font-size: 11px;
line-height: 167%;
}

.webAppWrapper select {
-webkit-appearance: button;
background: #FFF;
background: transparent url('/graphics/webapps/select-arrow-555.png') no-repeat right center;
border: 1px solid #DDD;
border-radius: 3px;
-webkit-border-radius: 3px;
color: #555;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin: 5px 0 10px 0;
padding: 1px 4px 1px 2px;
transition: background 0.3s linear;
-moz-transition: background 0.3s linear;
-ms-transition: background 0.3s linear;
-o-transition: background 0.3s linear;
-webkit-transition: background 0.3s linear;
}

.webAppWrapper select:hover,
.webAppWrapper select:focus {
background: #EEE url('/graphics/webapps/select-arrow-555.png') no-repeat right center;
}

.webAppWrapper label {
font-size: 11px;
line-height: 23px;
margin-right: 10px;
}

.webAppWrapper textarea {
padding: 4px;
}

/**************************************************************************************************************************
****************************************************************
***************************
********
*

The Classes

*/

.webAppWrapper .appHeader {
color: #336699;
margin: 10px 0;
width: 100%;
}

.webAppWrapper .appHeader .appTitle {
color: #336699;
float: left;
font-size: 18px;
font-family: 'helvetica-7';
line-height: 22px;
}

.webAppWrapper .appHeader .buttons {
margin: 0;
position: relative;
}

.webAppWrapper .checkbox,
.webAppWrapper .radio {
background: url('/graphics/webapps/frost-chbx.png') no-repeat;
clear: left;
display: block;
float: left;
height: 20px;
padding: 0 5px 0 0;
width: 19px;
}

.webAppWrapper .button {
background: #FFF;
background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #f1f1f1), color-stop(51%, #e1e1e1), color-stop(100%, #f6f6f6));
background: -webkit-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
background: -o-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
background: linear-gradient(to bottom, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#EEEEEE', GradientType=0 );
border: 1px solid #DDD;
border-radius: 3px;
box-shadow: 0 1px 1px #fff;
color: #666;
cursor: pointer;
font-size: 11px;
font-family: 'helvetica-7';
margin-right: 10px;
padding: 6px 10px;
vertical-align: middle;
white-space: nowrap;
text-shadow: 0 1px 1px white;
transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
}

.webAppWrapper .button:focus,
.webAppWrapper .button:hover {
border-color: #CCC;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #e1e1e1 51%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #f3f3f3), color-stop(51%, #e1e1e1), color-stop(100%, #ffffff));
background: -webkit-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #e1e1e1 51%, #ffffff 100%);
background: -o-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #e1e1e1 51%, #ffffff 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #e1e1e1 51%, #ffffff 100%);
background: linear-gradient(to bottom, #ffffff 0%, #f3f3f3 50%, #e1e1e1 51%, #ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#E6E6E6', GradientType=0 );
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 0 3px #fff;
color: #444;
}

.webAppWrapper .button:active {
border: 1px solid #AAA;
border-bottom-color: #CCC;
border-top-color: #999;
box-shadow: inset 0 1px 2px #aaa;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #e1e1e1 50%, #d1d1d1 51%, #f6f6f6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #e1e1e1), color-stop(51%, #d1d1d1), color-stop(100%, #f6f6f6));
background: -webkit-linear-gradient(top, #ffffff 0%, #e1e1e1 50%, #d1d1d1 51%, #f6f6f6 100%);
background: -o-linear-gradient(top, #ffffff 0%, #e1e1e1 50%, #d1d1d1 51%, #f6f6f6 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #e1e1e1 50%, #d1d1d1 51%, #f6f6f6 100%);
background: linear-gradient(to bottom, #ffffff 0%, #e1e1e1 50%, #d1d1d1 51%, #f6f6f6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#DDDDDD', GradientType=0 );
color: #777;
}

.webAppWrapper .button:hover:after {
border-top-color: black;
color: #666;
}

.webAppWrapper .center {
margin: auto;
text-align: center;
}

.webAppWrapper .checkBoxHeader {
line-height: 15px;
}

.webAppWrapper .clearBoth {
clear: both;
}

.cf:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}



.webAppWrapper .divHelpText {
background: #FFF;
background: linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%);
background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #f3f3f3), color-stop(51%, #ededed), color-stop(100%, #ffffff));
background: -webkit-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%);
background: -o-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#FAFAFA', GradientType=0 );
border: 1px solid #DDD;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 0 3px #fff;
color: #444;
display:block;
font-size: smaller;
line-height: 150%;
padding: 8px;
position: absolute;
text-shadow: 0 1px 1px white;
visibility:hidden;
width: 180px;
z-index:99;
}

.webAppWrapper .fileUploadBox {
margin: 15px 0;
}

/* applied to original <select> to hide */
.webAppWrapper .has_sb {
position: absolute;
left: -999999em;
text-indent: -999999em;
}

.webAppWrapper .hideDiv {
display:none;
}

.webAppWrapper .left {
float: left;
}

.webAppWrapper .right {
float: right;
}

.webAppWrapper .NavDiv {
margin-top: 20px;
}

.webAppWrapper .orderformreq {
color: #D76A2F;
font-weight: normal;
margin: 10px 0;
}

.webAppWrapper .orderformpale {
color: #555;
font-weight: normal;
margin: 10px 0;
}



.webAppWrapper .radio {
background: url('/graphics/webapps/frost-radio.png') no-repeat;
display: inline !important;
float: none !important;
padding: 4px 26px 2px 0;
}

.webAppWrapper .rule{
background-color: #DDD;
background: linear-gradient(left, rgba(255, 255, 255, 0.01) 0%, rgba(221, 221, 221, 1) 10%, rgba(221, 221, 221, 1) 90%, rgba(255, 255, 255, 0.01) 100%);
background: -moz-linear-gradient(left, rgba(255, 255, 255, 0.01) 0%, rgba(221, 221, 221, 1) 10%, rgba(221, 221, 221, 1) 90%, rgba(255, 255, 255, 0.01) 100%);
background: -ms-linear-gradient(left, rgba(255, 255, 255, 0.01) 0%, rgba(221, 221, 221, 1) 10%, rgba(221, 221, 221, 1) 90%, rgba(255, 255, 255, 0.01) 100%);
background: -o-linear-gradient(left, rgba(255, 255, 255, 0.01) 0%, rgba(221, 221, 221, 1) 10%, rgba(221, 221, 221, 1) 90%, rgba(255, 255, 255, 0.01) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0.01)), color-stop(10%, rgba(221, 221, 221, 1)), color-stop(90%, rgba(221, 221, 221, 1)), color-stop(100%, rgba(255, 255, 255, 0.01)));
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.01) 0%, rgba(221, 221, 221, 1) 10%, rgba(221, 221, 221, 1) 90%, rgba(255, 255, 255, 0.01) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03ffffff', endColorstr='#03ffffff', GradientType=1 );
border: 0;
box-shadow: 0px 1px 2px 0px #FFF; /* Not sure if this shadow is needed? */
-webkit-box-shadow: 0px 1px 2px 0px #FFF;
height: 1px;
margin: 20px 0;
}

.webAppWrapper .sectionHead {
color: #777;
font-size: 16px;
font-family: 'helvetica-7';
line-height: 18px;
margin: 0 0 5px 0;
padding: 0;
text-shadow: 0px 1px 1px #FFF, 0px 1px 5px #DDD;
transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
}

.webAppWrapper .sectionWrapper {
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #fafafa 12%, #f1f1f1 25%, #fafafa 40%, #ffffff 60%, #ffffff 98%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(12%, #fafafa), color-stop(25%, #f1f1f1), color-stop(40%, #fafafa), color-stop(60%, #ffffff), color-stop(98%, #ffffff));
background: -webkit-linear-gradient(top, #ffffff 0%, #fafafa 12%, #f1f1f1 25%, #fafafa 40%, #ffffff 60%, #ffffff 98%);
background: -o-linear-gradient(top, #ffffff 0%, #fafafa 12%, #f1f1f1 25%, #fafafa 40%, #ffffff 60%, #ffffff 98%);
background: -ms-linear-gradient(top, #ffffff 0%, #fafafa 12%, #f1f1f1 25%, #fafafa 40%, #ffffff 60%, #ffffff 98%);
background: linear-gradient(top, #ffffff 0%, #fafafa 12%, #f1f1f1 25%, #fafafa 40%, #ffffff 60%, #ffffff 98%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#F6F6F6', GradientType=0 );
border: 1px solid #DDD; /* FOR IE < 9 */
border: 1px solid RGBA(238,238,238,1.0); /* == #EEE */
border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 1px 1px 2px 0px #DDD;
-webkit-box-shadow: 0px 1px 2px 0px #AAA;
margin: 15px auto;
padding: 15px;
width: 900px;
}

/* Javascript driven select dropdown styles */
/* always visible styles */
.selectbox {
display: inline-block;
*display: inline;
font-family: arial;
font-size: 11px;
margin: 7px 10px 10px 0;
position: relative;
vertical-align:middle;
zoom: 1;
transition: background 0.25s linear;
-moz-transition: background 0.25s linear;
-ms-transition: background 0.25s linear;
-o-transition: background 0.25s linear;
-webkit-transition: background 0.25s linear;
}

.selectbox:hover {
background: #EEE;
}

.selectbox .display {
background: RGBA(255, 255, 255, 0.3);
border: 1px solid #DDD;
border-radius: 3px;
color: #555;
cursor: default;
display :block;
font-weight: normal;
height: 1.46em;
line-height: 1.46em;
overflow: hidden;
outline: none;
padding: 0 24px 0 3px;
position: relative;
text-decoration: none;
overflow: hidden;
}

.selectbox.disabled .display {
color: #999;
}

.selectbox.focused .display .text {
color: #555;
display:inline-block;
*display:inline;
zoom:1;
}

.selectbox .display.active {
background-color: RGBA(86, 108, 132, 0.5);
border-color: #999;
}

.selectbox .display .arrow_btn {
background: #dbdbdb url('/graphics/webapps/frost-select-bg-hover-design.png') repeat-x left center;
border:1px solid RGBA(255, 255, 255, 0.9);
display:block;
height:1.15em;
line-height:.92em;
padding:1px;
position:absolute;
right:0;
text-align:center;
top:0;
width:1.08em;
}

.selectbox .display .arrow_btn .arrow {
background:transparent url('/graphics/webapps/select_arrow.gif') no-repeat center center;
opacity: 0.3;
display:inline-block;
*display:inline;
height:4px;
left:.33em;
position:absolute;
top:.5em;
width:7px;
zoom:1;
}

.selectbox .display.active .arrow_btn {
/*
-moz-box-shadow:inset 0 0 1px 1px #D76A2F;
-webkit-box-shadow:inset 0 0 1px 1px #D76A2F;
*/
}

.selectbox .display.hover .arrow_btn {
background-image:url('/graphics/webapps/frost-select-bg-hover-design.png');
}

.selectbox .value {
display:none;
}

/* dropdown styles */
.selectbox.items {
background: #FAFAFA;
border:1px solid #828790;
display:block;
font-family:arial;
font-size: 11px;
list-style-type:none;
margin:0;
overflow-x:hidden;
overflow-y:auto;
padding:0 0 1px 0;
z-index:99999;
-moz-box-shadow:0 3px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow:0 3px 5px rgba(0, 0, 0, .5);
border: 1px solid #EEE;
box-shadow: 1px 1px 2px 0px #DDD;
-webkit-box-shadow: 0px 1px 2px 0px #AAA;
}

.selectbox.items.above {
}

.selectbox.items li {
display:block;
margin:0;
padding:0;/*white-space:nowrap; maybe necessary if using fixedWidth: false */
}

.selectbox.items li.first {
margin-top:0;
}

.selectbox.items li>.item {
color: #555;
cursor:default;
display:block;
padding: 2px 6px;
text-decoration:none;
}

.selectbox.items li>.item>.text {
display:inline-block;
*display:inline;
zoom:1;
}

.selectbox.items li.selected>.item {
background: #EEE;
}

.selectbox.items li.disabled>.item {
color:#999;
}

.selectbox.items li.hover>.item {
background-color:#566C84;
color:#fcfcfc;
}

.selectbox.items .value {
display:none;
}

/* optgroup styles */
.selectbox.items .optgroup .items {
border:none;
margin:0;
padding:0;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}

.selectbox.items .optgroup>.label {
cursor:default;
font-weight:bold;
line-height:1em;
}

.selectbox.items .optgroup .items li>.item {
padding-left:1em;
}

/* easy rounding styles */
.selectbox .round_sb.display {
padding:2px 26px 2px 5px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

.selectbox .round_sb.display .arrow_btn {
right:2px;
top:2px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}

.selectbox.round_sb.items {
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

.selectbox.round_sb.items>li>a {
padding:4px 6px;
}

.selectbox.round_sb.items>li.first>.item {
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
}

.selectbox.round_sb.items>li.last>.item {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
}

/* for optgroups */
.selectbox.round_sb.items>li>.label {
line-height:2.08em;
padding:4px 6px;
}

.selectbox.round_sb.items>li>.items li>.item {
padding:4px 6px 4px 12px;
}

/* fixed width example styles */
.selectbox .display.fixed_width {
width:73px;
padding:0 24px 0 3px;
}

.selectbox.fixed_width.items {
width:100px; /* width of display text plus the padding (60 + 27) = 87 */
}

.selectbox .display.fixed_width2 {
width:60px;
padding:0 24px 0 3px;
}

.selectbox.fixed_width2.items {
width:300px; /* width of display text plus the padding (60 + 27) = 87 */
}

.webAppWrapper {
clear: both;
color: #555;
float: left;
font-size: 11px;
margin: 10px auto;
width: 950px;
}


p.featureTitle {
font-family: 'helvetica-7';
font-size: 11px;
margin-bottom: 5px;
}

p.featureTitle .link,
p.featureTitle .pdf {
font-weight: normal;
}


/**************************************************************************************************************************
****************************************************************
***************************
********
*