/* MISC
----------------------------------------------------------*/
fieldset {
	Position: relative;
	margin: 10px;
	margin-top: 2px;
	padding: 10px;
	padding-top: 5px;
	font-weight: normal;
}

legend {
	padding: 0px;
	margin: 0px;
	padding-left: 5px;
	padding-right: 5px;
	font-weight: 700;
}


.clear {
	clear: both;
}

.Italics {
	font-style: italic;
}

.Underline {
	text-decoration: underline;
}

.Lowercase {
	text-transform: lowercase;
}

.Bold {
	font-weight: bold;
}

.RedText {
	color: red;
}

.Figure_center {
	width: 100%;
	margin-top: 0px;
	margin-bottom: 0px;
}

.photo {
	padding: 10px;
	margin-bottom: 0px;
	border: 1px dashed gray;
	background-color: lightgray;
}

.photo img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.CenteredFigureTitle {
	margin-top: 5px;
	padding-top: 0px;
	text-align: center;
	font-weight: bold;
}

.AddSpace {
	display: inline-block;
	padding-top: 10px;
}

.AddSpace_3 {
	display: inline-block;
	padding-top: 30px;
}

.clearRight {
	clear: right;
}

.smallCaps {
	font-variant: small-caps;
}

.bullet {
	color: #ffffff;
	margin: 0 5px 0 5px;
}

.UnhandledErrorTitle {
  color: red;
  font-family: 'Trebuchet MS', Comic Sans MS, Arial;
  font-size: 24px;
  font-weight: bold;
}

.UnhandledErrorDescription {
  color: Black;
  font-family: Verdana, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 14px;
}


.hideSkiplink {
	background-color: #3a4f63;
	width: 1180px;
	height: 62px;
	margin-left: 170px;
}

.hideSkiplink > a {
	display: none;
}


.GridView {
	font-weight: normal;
	font-size: 85%;
	margin-left: 5px;
	margin-top: 5px;
	border: 0px #000000 solid;
}
.GridViewHeader {
	background: #aba594;
	font-weight: bold;
	font-size: 0.9em;
	height: 10px;
	padding: 0px;
	margin: 0px;
}
.GridViewRow {
	font-size: 0.9em;
	padding: 0px;
}

.gridEditControl {
	float: left;
	font-size: 1.0em;
	text-align: right;
}
.gridDropDownEditControl {
	font-size: 1.1em;
}

.gridEditControlRequiredValidator {
	width: 1px;
	color: red;
	font-size: 1.1em;
	padding: 0px;
	margin: 0px;
	border: 0px #000000 solid;
}

.gridEditControlRangeValidator {
	width: 1px;
	color: red;
	font-size: 1.1em;
	padding: 0px;
	margin: 0px;
	border: 0px #000000 solid;
}



/* ------------------------------- Edit Form ------------------------------------ */
#EditFormPageWrapper {
	height: 710px;
	padding-left: 5px;
	padding-right: 5px;
	/*border: 1px solid #496077;*/
}

#EditFormPageWrapper p {
	font-size: 125%;
	padding-left: 20px;
	padding-right: 20px;
}

#EditFormControlsDiv {
	position: relative;
	width: 960px;
	height: 570px;
	background: #c2c2c2;	/*#aba594;*/
	padding-top: 0px;
	padding-bottom: 2px;
	margin-top: 20px;
	margin-bottom: 0px;
	margin-left: 20px;
	border: 1px solid #000000;
	text-align: left;
}

#EditFormNameControlsDiv {
	margin-top: 5px;
	margin-left: 5px;
}

.EditFormQuantityNameLabel {
	font-size: 1.3em;
	font-weight: 700;
}
.EditFormQuantityNameTextBox {
	width: 350px;
	text-align: left;
	margin-left: 0px;
}
.EditFormBasedOnLabel {
	margin-left: 10px;
	font-size: 1.3em;
	font-weight: 700;
}
.EditFormBasedOnDropDownList {
	width: 340px;
	margin-left: 0px;
}

#EditFormControlsFieldset {
	margin-top: 10px;
	font-size: 1.2em;
	text-align: center;
}

.EditFormControlsLegend {
	font-size: 1.0em;
}


/* ---------------------------------------- Grid Related --------------------------------*/
#QuantitesGridDiv {
	margin-top: 15px;
	margin-left: 0px;
	width: 860px;
	padding-top: 0px; /*10*/
	text-align: left;
}
.QuantitiesFieldset {
	width: 100%;
}
.QuantitesGridViewPanel {
	border: 1px #000000 solid;
	padding: 0px;
	/*margin: 0px;*/
}
.QuantitesGridView {
	font-weight: normal;
/*	width: 840px;*/
}
.QuantitesGridHeader {
	background: #aba594;
	font-weight: bold;
	font-size: 1.0em;
	height: 10px;
	padding: 0px;
	margin: 0px;
}
.QuantitesGridRow {
	height: 8px;
	font-size: 0.9em;
	padding: 0px;
}
.QuantitiesGridFooter {
	height: 8px;
	font-size: 0.9em;
	padding: 0px;
}
/* ----------------------------------------------- End grid -----------------------------*/



/*------------------------------------- Model Buttons -------------------------------*/
#AppPage3_ModelButtonsDiv {
	position: absolute;
	top: 480px;
}

.PavementProjectModelButton {
	width: 130px;
	height: 25px;
	margin-bottom: 10px;
	text-align: center;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}

.PavementProjectModelButton:hover, PavementProjectModelButton:focus {
	-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
	-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
	box-shadow: 0 0 1px rgba(0,0,0, .75);
}
/* --------------------------------- end model buttons ------------------------------*/


.EditFormMsg {
	position: relative;
	float: left;
	width: 620px;
/*	border: 1px solid #000000;*/
	font-size: 1.2em;
	font-weight: 600;
	color: red;
	text-align: left;
	margin-left: 10px;
}

/*----------------------------------------- Bottom buttons: Source Transport, Save and Cancel Buttons ---------------------------*/
#EditFormBottomButtonDiv {
	margin: 10px;
}

.EditFormSourceTransportButton {
	width: 140px;
	height: 25px;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}
.EditFormSourceTransportButton:hover, EditFormSourceTransportButton:focus {
	-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
	-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
	box-shadow: 0 0 1px rgba(0,0,0, .75);
}

.EditFormSaveButton {
	width: 70px;
	height: 25px;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}
.EditFormSaveButton:hover, EditFormSaveButton:focus {
	-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
	-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
	box-shadow: 0 0 1px rgba(0,0,0, .75);
}

.EditFormCancelButton {
	width: 95px;
	height: 25px;
	margin-left: 10px;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}
.EditFormCancelButton:hover, EditFormCancelButton:focus {
	-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
	-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
	box-shadow: 0 0 1px rgba(0,0,0, .75);
}
/*----------------------------------------- End Save/Cancel Buttons -------------*/



/* ------------------------------ Model Buttons --------------------------------*/
#ModelButtonsDiv {
	margin-top: 15px;
}

.HmaModelButton {
	width: 90px;
	height: 25px;
	text-align: center;
		border-radius: 2px;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
}
.HmaModelButton:hover, HmaModelButton:focus {
	-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
	-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
	box-shadow: 0 0 1px rgba(0,0,0, .75);
}

.PccModelButton {
	width: 90px;
	height: 25px;
	text-align: center;
		border-radius: 2px;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
}
.PccModelButton:hover, PccModelButton:focus {
	-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
	-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
	box-shadow: 0 0 1px rgba(0,0,0, .75);
}

.AbModelButton {
	width: 90px;
	height: 25px;
	text-align: center;
		border-radius: 2px;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
}
.AbModelButton:hover, AbModelButton:focus {
	-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
	-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
	box-shadow: 0 0 1px rgba(0,0,0, .75);
}

.PortlandCementModelButton {
	width: 120px;
	height: 25px;
	text-align: center;
		border-radius: 2px;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
}
.PortlandCementModelButton:hover, PortlandCementModelButton:focus {
	-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
	-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
	box-shadow: 0 0 1px rgba(0,0,0, .75);
}


.BitumenModelButton {
	width: 110px;
	height: 25px;
	text-align: center;
		border-radius: 2px;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
}
.BitumenModelButton:hover, BitumenModelButton:focus {
	-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
	-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
	box-shadow: 0 0 1px rgba(0,0,0, .75);
}

.CrushedStoneModelButton {
	width: 150px;
	height: 25px;
	text-align: center;
		border-radius: 2px;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
}
.CrushedStoneModelButton:hover, CrushedStoneModelButton:focus {
	-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
	-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
	box-shadow: 0 0 1px rgba(0,0,0, .75);
}

.SandAndGravelModelButton {
	width: 150px;
	height: 25px;
	text-align: center;
		border-radius: 2px;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
}
.SandAndGravelModelButton:hover, SandAndGravelModelButton:focus {
	-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
	-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
	box-shadow: 0 0 1px rgba(0,0,0, .75);
}

.ElectricityModelButton {
	width: 120px;
	height: 25px;
	text-align: center;
		border-radius: 2px;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
}
.ElectricityModelButton:hover, ElectricityModelButton:focus {
	-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
	-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
	box-shadow: 0 0 1px rgba(0,0,0, .75);
}

.NaturalGasEquipModelButton {
	width: 180px;
	height: 25px;
	text-align: center;
		border-radius: 2px;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
}
.NaturalGasEquipModelButton:hover, NaturalGasEquipModelButton:focus {
	-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
	-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
	box-shadow: 0 0 1px rgba(0,0,0, .75);
}

.DieselEquipModelButton {
	width: 140px;
	height: 25px;
	text-align: center;
		border-radius: 2px;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
}
.DieselEquipModelButton:hover, DieselEquipModelButton:focus {
	-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
	-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
	box-shadow: 0 0 1px rgba(0,0,0, .75);
}




/* --------------------------- Message Area Controls -------------------------*/
#MessageArea {
	position: relative;
	top: 100px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	height: 25px;
   /* border: 1px #800000 dotted;*/
}

.Message {
	position: absolute;
	top: 0px;
	left: 0px;
	margin-top: 3px;
	margin-left: 10px;
	text-align: left;
	color: Red;
	font-size: 1.1em;
	font-weight: bold;
	/*border: 1px #800000 dotted;*/
}

#MessageWrapper {
	position: absolute;
	left: 20px;
	top: 620px;
	width: 1005px;
	height: 80px;
	border: 1px solid #5f6252;
	background-color: #eef518;
}

.Message_TextBox {
	margin-left: 10px;
	margin-top: 10px;
	width: 975px;
	height: 50px;
}
/* ---------------------- End Message Area Controls ---------------*/


/* ------------------------------------- context sensitive help -------------------------------*/
.help-tip {
	position: absolute;		/* make sure the containing element has position:relative */
	top: 0px;
	right: 0px;
	text-align: center;
	background-color: #BCDBEA;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	font-size: 14px;
	line-height: 26px;
	cursor: default;
	border: 0px #800000 solid;
}

.help-tip:before {
	content: '?';
	font-weight: bold;
	color: #fff;
}

.help-tip:hover p {
	display: block;
	transform-origin: 100% 0%;
	-webkit-animation: fadeIn 0.3s ease-in-out;
	animation: fadeIn 0.3s ease-in-out;
}

.help-tip p { /* The tooltip */
	display: none;
	text-align: left;
	background-color: #88cbec;
	padding: 20px;
	width: 300px;
	position: absolute;
	border-radius: 3px;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
	right: -4px;
	color: #FFF;
	font-size: 13px;
	line-height: 1.4;
	z-index: 100;
}

.help-tip p:before { /* The pointer of the tooltip */
	position: absolute;
	content: '';
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-bottom-color: #88cbec;
	right: 10px;
	top: -12px;
}

.help-tip p:after { /* Prevents the tooltip from being hidden */
	width: 100%;
	height: 40px;
	content: '';
	position: absolute;
	top: -40px;
	left: 0;
}


.help-tip-2 {
	text-align: center;
	background-color: #BCDBEA;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	font-size: 14px;
	line-height: 26px;
	cursor: default;
}

.help-tip-2:before {
	content: '?';
	font-weight: bold;
	color: #fff;
}

.help-tip-2:hover p {
	display: block;
	transform-origin: 100% 0%;
	-webkit-animation: fadeIn 0.3s ease-in-out;
	animation: fadeIn 0.3s ease-in-out;
}

.help-tip-2 p { /* The tooltip */
	display: none;
	text-align: left;
	background-color: #88cbec;
	padding: 20px;
	width: 300px;
	position: absolute;
	border-radius: 3px;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
	right: -4px;
	color: #FFF;
	font-size: 13px;
	line-height: 1.4;
	z-index: 100;
}

.help-tip-2 p:before { /* The pointer of the tooltip */
	position: absolute;
	content: '';
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-bottom-color: #88cbec;
	right: 10px;
	top: -12px;
}

.help-tip-2 p:after { /* Prevents the tooltip from being hidden */
	width: 100%;
	height: 40px;
	content: '';
	position: absolute;
	top: -40px;
	left: 0;
}
/* ---------------------------------------------------------------------------------------*/


/* CSS animation */

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
		transform: scale(0.6);
	}

	100% {
		opacity: 100;
		transform: scale(1);
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 100;
	}
}





/* FOOTER
---------------------------------------------------------*/
.footer {
	clear: both;
	/*position: absolute;
	left: 0px;
	top: 795px;*/
	width: 100%;
	background-color: #82a3ba;
	font-size: 0.9em;
	text-align: center;
	color: #ffffff;
	/*border: 1px solid #000000;*/
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0.50em;
	padding-bottom: 0.50em;
	vertical-align: middle;
}