#oof * { box-sizing: content-box; }

#oof .infoButton { position:relative; display:inline-block; margin-top:-5px; vertical-align:middle; cursor:pointer; margin-right:15px; }
#oof .optionTooltip { position:absolute; background-color:white; width:290px; color:black; display:none;
                      box-shadow:0 0 30px 5px #999; font-size:12px; padding:10px; border:1px solid gray; }

#oof .input-block {
	margin-bottom:25px;
	padding:18px 25px;
	background-color: #eee;
}

    #oof .input-block div.cols5 {
        width:443px; /* assuming the input-block is full width, this is half of the input-block */
    }

	#oof h1.form-header + .input-block {
		-moz-border-radius:0 0 4px 4px;
		border-radius:0 0 4px 4px;
	}	
	
	#oof .input-block div label {
		display:block;
		float:left;
		margin:0 20px;
		text-align:right;
		font:normal 14px/26px 'DIN Next W02 Medium', Arial, Helvetica, sans-serif;
		color:#7e7f80;
		text-transform:uppercase;
	}
	
		#oof .input-block div label:first-child {
			width:164px;
			margin-left:0;
		}
		
		    #oof .input-block div.cols5 div label:first-child {
		        width:140px;
		    }
		
		#oof .input-block div label.radio {
		    display:inline;
		    float:none;
		    margin:0 30px 0 8px;
		    color:#58595b;
		}
	
	#oof .input-block input[type="text"],
	#oof .input-block input[type="password"],
	#oof .input-block textarea,
	#oof .input-block .data-field {
		float:left;
		width:243px;
		border:1px solid #cacaca;
		padding:6px 8px;
		background-color:#fff;
		-webkit-box-shadow:inset 1px 3px 4px 0 rgba(88,89,91,0.1);
		box-shadow:inset 1px 3px 4px 0 rgba(88,89,91,0.1);
		font:normal 13px/13px Arial, Helvetica, sans-serif;
		color:#797979;
	}
	
		#oof .input-block p.data-field {
			line-height:20px;
		}
		#oof .input-block input.date {
			width:80px;
			background:#fff url('/images/icons/input-calendar.png') right center no-repeat;
		}

        #oof .input-block input.short,
        #oof .input-block div.cols5 input.short {
            width:64px;
        }
	
	#oof .input-block input[type="checkbox"] {
	    margin-top:5px;
	}
	
	#oof .input-block input[type="radio"] {
	    float:none;
	}
	
	#oof .input-block select {
	    padding:6px 8px;
	    border:1px solid #cacaca;
	    font:normal 13px/13px Arial, Helvetica, sans-serif;
	}
	
	/*.ie8 .input-block select {
	    min-width:120px;
	}
	
	.ie8 option {
	    width:120px;
	}*/
	
	#oof .input-block .toggle {
		position:relative;
		padding:20px;
		background-color:#fdfdfe;
		-webkit-box-shadow:inset 0 0 4px 0 rgba(0,0,0,0.2);
		box-shadow:inset 0 0 4px 0 rgba(0,0,0,0.2);
	}
	
		#oof .input-block .toggle .trigger {
			padding-right:20px;
			background:url('/images/buttons/toggle-small-down.png') right center no-repeat;
			font:normal 16px/16px 'FetteEngschriftDIN1451W', Arial, san-serif;
			color:#b7b8b8;
			text-transform:uppercase;
		}
		
			#oof .input-block .toggle .trigger:hover {
				color:#58595b;
			}
			
			#oof .input-block .toggle .clicked {
				background-image:url('/images/buttons/toggle-small-up.png');
			}
	
	#oof .input-block .required {
		background-color:#ffc !important;
	}	
	
		#oof span.req {
			padding-left:8px;
			font:normal 10px/27px Arial, Helvetica, sans-serif;
			color:#97233f;
		}
	
		#oof .input-block .row > a.button {
			margin:20px 0 0 194px;
		}


.approvalGreen:hover { background-color:#4b8f16; color:white; }
.approvalApproved { background-color:#4b8f16; color:white; }
.approvalYellow:hover { background-color:#adae04; color:white; }
.approvalPending { background-color:#adae04; color:white; }
.approvalRed:hover { background-color:#aa3333; color:white; }
.approvalDenied { background-color:#aa3333; color:white; }

/* #region OOF: Prevent Printing */

@media screen {
	#oof #noprint { display:none; }
}
@media print {
	#oof * { display:none; }
	#oof #noprint { display:block; color:black; font-size:55px; padding:100px 0; text-align:center; }
}

/* #endregion */

/* #region OOF: Old Styles */

#oof div { font-family:Arial, Sans-Serif }
#oof h1 { border-bottom:8px solid #575a5d; font:normal 32px/32px 'FetteEngschriftDIN1451W', Arial, san-serif; color:#666; margin:0; padding-bottom:4px; }
#oof input[type="text"] { width:243px; }
#oof select { width:243px; }
#oof a { font-size:12px; cursor:pointer; vertical-align:text-top; margin-right:10px; }
#oof img { border-style:none; }
#oof .row { margin:15px 0; }
#oof .button { padding:2px 10px; font-size:11px; cursor:pointer; }
#oof .colorSwatch { border:2px solid transparent; }
#oof .selectedSwatch { border:2px solid black; border-radius:4px; }
#oof .placeholder { color:#aaaaaa; }
#oof .automationId { display:none; }
#oof .productSection { border:1px solid #666666; border-top-width:0px; padding:0; margin:0; zoom:1; }
#oof .optionSection { background-color:#e9e9e9; padding:0; margin-bottom:2px; clear:both; }
#oof .optionStatic { background-color:#ffffff; }
#oof .fullWidth { padding:8px; }
#oof .center { text-align:center; }
#oof .clear { clear:both; }
#oof .sectionEnd { height:0; clear:both; }
#oof .label { float:left; color:#666666; font-size:11px; text-align:right; clear:both; padding:9px 9px 9px 0; width:131px; text-transform:uppercase; }
#oof .field { margin-left:140px; padding:8px; font-size:13px; }
#oof .options { margin-left:150px; padding:9px 8px 0 15px; font-size:13px; border-left:1px solid #cccccc; }
#oof .smallInput { width:113px; margin-right:8px; }
#oof .radio { width:auto; padding:0; margin:-2px 5px 2px 10px; cursor:pointer; }
#oof .checkbox { width:auto; padding:0; margin:1px 5px 0 0; cursor:pointer; display:inline; }
#oof .squish { margin-top:-10px; }
#oof .requiredOOF { background-color:#ffc !important; }
#oof .requiredSection { border:2px solid #aa3333; background-color:#ffcccc; margin-top:20px; padding:15px; }
#oof .requiredHeader { color:#aa3333; font-size:18px; font-weight:bold; text-align:center; padding-bottom:10px; }
#oof .requiredItem { color:#aa3333; font-size:14px; font-weight:bold; text-align:center; }
#oof .error { color:#aa3333; font-weight:bold; }
#oof .specialTextArea { width:242px; height:100px; resize:none; margin-bottom:3px; }
#oof .printButton { width:220px; margin:0; height:50px; cursor:pointer; font-size:15px; font-weight:bold; }
#oof .printButtonArea { text-align:center; padding:15px 0 25px 0; clear:both; }
#oof #mask { display:none; background:#000; position:fixed; left:0; top:0; z-index:10; width:100%; height:100%; opacity:0.5; z-index:999; }
#oof #emailPopup { display:none; background:#fff; padding:15px; border:2px solid #fff; margin-top:-192px; margin-left:-317px; width:600px; height:350px;
                   float:left; font-size:1.2em; position:fixed; top:50%; left:50%; z-index:99999; box-shadow:0px 0px 20px #000; border-radius:10px; }
#oof #emailOrPrintPopup { display:none; background:#fff; padding:15px; border:2px solid #fff; margin-top:-242px; margin-left:-317px; width:600px; height:450px;
                   float:left; font-size:1.2em; position:fixed; top:50%; left:50%; z-index:99999; box-shadow:0px 0px 20px #000; border-radius:10px; }

/* #endregion */

/* #region OOF: Audiogram */

#oof .right { border-color:#aa6666; color:#aa6666; }
#oof .left { border-color:#4E74A2; color:#4E74A2; }
#oof .frequency { display:inline; float:left; width:34px; vertical-align:middle; text-align:center; font-size:10px; padding:5px; margin:0; }
#oof .curveType { float:left; width:28px; text-align:center; font-size:10px; padding-top:13px; line-height:1em; }
#oof .copyRight { width:70px; cursor:pointer; position:absolute; font-size:11px; padding:2px; margin:86px 20px; right:50%; }
#oof .copyLeft  { width:70px; cursor:pointer; position:absolute; font-size:11px; padding:2px; margin:86px 20px; left:50%; }
#oof .response { float:left; text-align:center; font-size:13px; }
#oof .responseRight { width:40px !important; padding:10px 0px; text-align:center; margin:0 0 2px 2px; border:solid 1px #ddaaaa; background-color:#F2DCDB; }
#oof .responseLeft { width:40px !important; padding:10px 0px; text-align:center; margin:0 2px 2px 0; border:solid 1px #A0BEE2; background-color:#DCE6F2; }
#oof .responseRequired { background-image:url("order-form/images/required.png"); background-position:center top; }
#oof .noresponse { background-image:url("order-form/images/nr.png"); background-position:center top; }
#oof .requiredNR { background-image:url("order-form/images/required_nr.png"); background-position:center top; }
#oof .noresponseRight { text-align:left; font-size:10px; clear:both; height:30px; margin-left:35px; padding-top:5px; width:350px; }
#oof .noresponseLeft { text-align:right; font-size:10px; clear:both; height:30px; margin-left:82px; padding-top:5px; width:350px; }
#oof .requiredFields { float:right; color:#dd4444; font-weight:bold; font-size:11px; margin:-10px 5px 0 0; }
#oof .requiredMarker { color:#dd4444; display:inline; margin-left:5px; font-weight:bold; font-size:12px; margin-right:8px; }
#oof .speechLabel { margin-left:228px; }
#oof .speechLeftOnly { margin-left:388px; }
#oof .speechHeader { font-size:10px; margin:15px 0 2px 0; width:80px; color:#666666; text-align:center; }
#oof .speechRight { width:58px !important; padding:5px; text-align:center; margin:2px 5px; border:solid 1px #E59692;  }
#oof .speechBoth { width:58px !important; padding:5px; text-align:center; margin:2px 5px; border:solid 1px #999999; }
#oof .speechLeft { width:58px !important; padding:5px; text-align:center; margin:2px 5px; border:solid 1px #5F91CC;  }
#oof .aidGraph { background-image:url("order-form/images/graph1.png"); background-repeat:no-repeat; margin:0; border:0; padding:0; }
#oof .iicGraph { background-image:url("order-form/images/graph8.png"); background-repeat:no-repeat; margin:0; border:0; padding:0; }

/* #endregion */

/* #region OOF: Custom Controls */

#oof .radioControl { margin-right:5px; margin-bottom:10px; padding:0; width:14px; height:14px; border: 0px solid #FFFFFF; cursor:pointer; background-color:transparent; background-repeat:no-repeat }
#oof .radioOff { background-image:url('order-form/images/controls/radio-off.png'); }
#oof .radioOn { background-image:url('order-form/images/controls/radio-on.png'); }
#oof .radioPressed { background-image:url('order-form/images/controls/radio-pressed.png'); }
#oof .radioUnpressed { background-image:url('order-form/images/controls/radio-unpressed.png'); }

#oof .radioRightOff { background-image:url('order-form/images/controls/rr-off.png'); }
#oof .radioRightOn { background-image:url('order-form/images/controls/rr-on.png'); }
#oof .radioRightPressed { background-image:url('order-form/images/controls/rr-pressed.png'); }
#oof .radioRightUnpressed { background-image:url('order-form/images/controls/rr-unpressed.png'); }

#oof .radioLeftOff { background-image:url('order-form/images/controls/br-off.png'); }
#oof .radioLeftOn { background-image:url('order-form/images/controls/br-on.png'); }
#oof .radioLeftPressed { background-image:url('order-form/images/controls/br-pressed.png'); }
#oof .radioLeftUnpressed { background-image:url('order-form/images/controls/br-unpressed.png'); }

#oof .checkboxRightOff { background-image:url('order-form/images/controls/rc-off.png'); }
#oof .checkboxRightOn { background-image:url('order-form/images/controls/rc-checked.png'); }
#oof .checkboxRightPressed { background-image:url('order-form/images/controls/rc-pressed.png'); }
#oof .checkboxRightUnpressed { background-image:url('order-form/images/controls/rc-unpressed.png'); }

#oof .checkboxLeftOff { background-image:url('order-form/images/controls/bc-off.png'); }
#oof .checkboxLeftOn { background-image:url('order-form/images/controls/bc-checked.png'); }
#oof .checkboxLeftPressed { background-image:url('order-form/images/controls/bc-pressed.png'); }
#oof .checkboxLeftUnpressed { background-image:url('order-form/images/controls/bc-unpressed.png'); }

/* #endregion */

/* #region OOF: Product Options */

#productSelection label { font-size:12px; font-weight:normal; cursor:pointer; color:#000; vertical-align:text-top; margin-right:10px; display:inline; }
#productSelection select { width:250px; padding:2px; margin:0; margin-top:-5px; cursor:pointer; border:1px solid #999999; }
#options label { font-size:12px; font-weight:normal; cursor:pointer; color:#000; vertical-align:text-top; margin-right:10px; display:inline; }
#options select { width:250px; padding:2px; margin:0; margin-top:-5px; cursor:pointer; border:1px solid #999999; }
#oof .sideSelectionRight { color:#aa6666; padding:2px; font-size:12px; font-weight:bold; }
#oof .sideSelectionBinaural { color:#666666; padding:2px; font-size:12px; font-weight:bold; }
#oof .sideSelectionLeft { color:#4E74A2; padding:2px; font-size:12px; font-weight:bold; }
#oof .productSelection { margin:10px -10px 10px 10px; font-size:13px; }
#oof .productBox { width:225px; }
#oof .productLeft { height:210px; float:left; width:210px; margin:0; padding-left:50px; }
#oof .productMiddle { height:195px; float:left; padding:15px 0 0 100px; }
#oof .productRight { height:210px; float:right; width:260px; margin:0; padding:0; border:0; }
#oof .aidImageArea { height:210px; margin:0; }
#oof .aidImage { clear:both; height:210px; width:210px; position:absolute; display:none; }
#oof .infoTooltip { position:absolute; background-color:white; width:290px; color:black; display:none; margin:5px 0 0 0;
                    box-shadow:0 0 30px 5px #999; font-size:12px; padding:10px; border:1px solid gray; }
#oof .optionsLabel { width:172px; }
#oof .optionsError { padding:8px; background-color:#900; color:#fff; font-weight:bold; text-align:center; }
#oof .optionsRight { float:left; width:401px; padding:20px; margin-top:10px; border:2px solid #F4CECD; border-radius:7px; clear:both;
					 background-image:url('order-form/images/options_right.png'); background-repeat:repeat-y; color:#CE2019; }
#oof .optionsLeft { float:right; width:401px; padding:20px; margin-top:10px; border:2px solid #C8DAEB; border-radius:7px;
					background-image:url('order-form/images/options_left.png'); background-repeat:repeat-y; color:#0055A5; }
#oof .optionsButton { float:right; padding:2px 10px; font-size:11px; margin-top:3px; cursor:pointer; }
#oof .requiredOption { float:left; color:#aa3333; font-weight:bold; font-size:12px; padding-top:5px; }

/* #endregion */