
/* COLORS:
	Orange:  #F97103;
	Link Blue: #006699;
	Orange Text: #CC5E01;
	KCC Blue: #4DB3D0;
*/	

/* Global Defaults */
html, body { margin: 0px; padding: 0px; border: 0px; background-color:#B6C8D2;}
body { font: 1em/1.2 Arial, Helvetica, sans-serif; }

h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }
h1 {font-size:1.3em;}

p, th, td, dd, dt, q, acronym, abbr, a, input, select, textarea { margin: 0; padding: 0; }
li {padding-bottom:.5em; padding-top:0;}
ul {margin-top:.7em;}
p {padding:.6em 0; text-align:left;}

small { font-size:.85em; }
big { font-size:1.2em; }
img {border: none; max-width:100%;}
img { -ms-interpolation-mode: bicubic; }

a, a:link, a:visited, a:active {text-decoration: underline; color:#006699;}
a:hover {text-decoration: none; color:#F97103;}
    
h3.center, p.center {text-align: center;}
.bold {font-weight: bold;}
.hide {display:none !important;}

table, td, tr {margin: 0;padding: 0;border: none; text-align:left;vertical-align:top;}
form {margin: 0; padding: 0;}

span.required {color:#FF0000;}

label.disabled, label.disabled b {color:#ccc !important;}

.NonProdWarningBar {position:absolute; top:0; left:0; width:100%; background-color:yellow; border-bottom:1px solid red; overflow:hidden; padding:3px; font-weight:bold; font-size:.7em; text-align:center; opacity: 0.5; box-shadow: 0px 9px 6px -6px #666;}

/* Success & Warning Blocks */
.warningWrapper { border: 2px solid #FF9900; padding: .4em; border-radius: 8px; background-color: #FFFDF4; color: Black; text-align: center; margin: 10px; }
.warningWrapper .emphasize { font-size: 1.2em; color: #FF6600; }

.successWrapper {border:1px solid #00A400; padding:.4em; border-radius:8px; background-color:#ECFFEC; color:#003300; text-align:center; margin:10px;}
.successWrapper .emphasize {font-size:1.2em; color:#006600;}
.successWrapper p {text-align:center !important;}

/* UPDATE BLOCKS */
div.updateBlock h1 { text-align:center; padding: .2em; border: 1px solid red; background-color: #FFCCCC; color: #FF0000; font-weight: bold; text-transform: uppercase; margin-top:.5em;}
div.updateBlock p { padding:.6em; border:1px solid #666; margin-bottom:1em; margin-top:1px;}
div.updateBlock2 {border:1px solid #666; background-color:#F5EBEB; border-radius:10px; padding:15px; margin-bottom:1em;}
div.updateBlock2 h2, div.updateBlock2 h1 {color:#A82A2C !important; text-align:center;}

/* PAGE */
#page {overflow:hidden; display:block; margin:0 auto; width:100%; background-color:#FFFFFF;}

/* darker Blue: #3F7FA1 */
#banner { padding: .8em 0 3px 40px; text-align:center; background-color:#4DB3D0; line-height:1em; border-bottom: 2px solid #000000; font-size:1.2em; color:#fff; font-family:"Times New Roman", Times, serif;}
#banner .smaller {font-size:.75em;}
#banner a.menu { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpi/P//PwOtARMDHQBdLGFBYt+nkR2KjEhxQqvIYaR7cD2glSWMo0mY3DiJo5Edi4ZPEqZ7nMSP5pPRon60qB9NwpQDgAADAMIxHUJvWs/TAAAAAElFTkSuQmCC") no-repeat scroll center center transparent;
	display: block;	width: 40px;height: 40px;position: absolute;top: 0px;left: 10px;}

#LowerBanner {display:none; height: 20px; background-color:#4DB3D0; border-bottom:1px solid #F97103;}
#shaftWrapper {background-color:#FFFFFF; overflow:hidden; padding: 10px 0 10px 0; border-bottom:3px solid #F97103; float:left; width:100%;}

/* Popup window page */
body#popupExampleWindow {padding:20px; background-color:white !important;}

/* Close window button/link */
a.close:link,
a.close:visited {font-weight:bold; text-decoration:none; text-align:center; font-size:.9em; display:block; border:1px solid #666; border-radius:3px; background-color:#EFEFEF; display:block; float:right; width:100px; padding:10px; margin:15px; text-align:center;}
a.close:hover {background-color:White; text-decoration:none;}

/* MENU */
#menuBar {display:none; color:#666666; line-height:1.2em; margin-bottom:15px; float:left; width: 19%; padding-right:1%; font-size:.8em;} /* width: 165px;  */
#menuBar ul, #menuBar li {margin:0; padding:0}
#menuBar li {width:90%;}
#menuBar li a:link,
#menuBar li a:visited {display:block; padding: 6px 3px 6px 15px; margin-bottom:5px; background-color:#DBDBDB;text-decoration: none; color:#000000}
#menuBar li a:hover {color:#FFF; background-color:#999;}
#menuBar p {margin-left:15px;}
#menuBar p.important {color:#CC5E01;}
.mm-menu { background: #323849; }

/* CONTENT */
#contentWrapper {padding:0 4%; min-height:500px; margin-bottom:15px; font-size:.95em; } /* width: 92%;  */
#contentWrapper .topTitleWrapper, #contentWrapper h1.topTitle {text-align:center; width:100%; margin-bottom:20px;}
#contentWrapper .topTitleWrapper h2 {color:black;}
#contentWrapper h2 {font-size:1.1em; color:#4DB3D0; margin-top:1em; margin-bottom:1em;}

/* Content Column (when there's a sidebar) */
.contentColumn {float:left; width:100%;} 

/* SIDEBAR */
#sidebar {margin:.1em .1em 1em .1em; overflow:hidden; font-size:.9em; border-bottom:1px dotted #666; padding-bottom:1em;}
#sidebar h1 {font-size:1.1em; color:#CC5E01; display:block; text-align:center;}
#sidebar h2 {font-size:.95em; color:#000; margin-bottom:.2em;}
#sidebar p {color:#333333; line-height:1.2em; padding:0;}

/* INSIDE FOOTER */
#insideFooterWrapper {margin-top:20px; overflow:hidden; clear:both; width:100%; border-top:15px solid #4DB3D0;}
#insideFooterWrapper img {float:left; display:block; margin:15px 0 5px 15px;}
#insideFooterWrapper a.coLink:link, #insideFooterWrapper a.coLink:visited {float:right; width:150px; text-align:right; margin:20px 15px 5px 0; color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:.7em; font-weight:bold; text-decoration:none;}

/* FOOTER */
#footer {font-size: .7em; color:#333; text-align:center; width:100%; margin:10px 0 20px 0; }
#footer a:link, #footer a:visited {color:#333333; text-decoration:none;}
#footer a:hover {color:#F97103; text-decoration:underline;}
#footer ul {margin:0; padding:0;}
#footer li {display:inline; padding:0; margin:0;}
#footer li a {padding:0 .7em;}

/* LOGIN PAGE */
.loginMessageWrapper {background-color:white; width:300px; border:1px dotted #336699; color:#336699; display:block; margin:1em auto; padding:15px;}
.loginMessageWrapper p {text-align:left;}
.LoginArea {width:330px; display:block; margin:1em auto;  }
.LoginArea label {margin-right:15px; color:#666; font-weight:bold;}

/* PAGES */
.top {font-weight:bold; clear:both; margin:7px; display:block; overflow:hidden; text-align:right; font-size:.9em;} 
.minHeight {min-height:200px;}

.genericTextWrapper .claimnumber {font-size:1.3em; color:#E85C00;}
.adobeFooter {display:block; clear:both; margin: 15px auto; text-align:center; border-top:1px solid #666; border-bottom:1px solid #666; width:85%; padding:15px;}
.adobeFooter p {text-align:center;}

/* TABLE PAGE ELEMENTS */
/*  Usages:  table class="normal lines smaller centercells" */
table.tableStyle1 {margin-left:auto; margin-right:auto;}
table.tableStyle1 th {padding:10px; text-align:center; background-color:#336699; color:#fff; font-weight:bold; font-size:1em;}
table.tableStyle1 td {vertical-align:top; padding:5px; border:1px solid #666;}
table.tableStyle1 td.label {font-weight:bold; }
table.tableStyle1 td.data {font-weight:normal; min-width:150px;}
table.tableStyle1 td .footnote {font-weight:normal; font-size:.9em;}

table.tableStyle2 {margin-left:auto; margin-right:auto;}
table.tableStyle2 th { font-size:.9em; padding:.3em; text-align:center; background-color:#C8C8C8; font-weight:bold;}
table.tableStyle2 td { font-size:.85em; vertical-align:top; padding:.5em; border:1px solid #666;}
table.tableStyle2 td.label {font-weight:bold; }
table.tableStyle2 td.data {font-weight:normal; min-width:150px;}
table.tableStyle2 td .footnote {font-weight:normal; font-size:.9em;}

table.normal th {padding:6px; font-weight:bold; text-align:left;}
table.normal td {vertical-align:top; padding:6px; padding-right:1.5em; border:none;}

table.lines {border-collapse:collapse;}
table.lines td, table.showLines th, table.lines th {border:1px solid #666;}

table.smaller td, table.smaller th {font-size:.8em;}
table.center {margin-left:auto; margin-right:auto;}
table.centercells td {text-align:center !important;}
table.centerhead th {text-align:center !important;}


/* Data Entry Grid */
table.DataGridStyle1 tr.headerRow td {vertical-align:bottom; font-weight:bold; color:#666; font-size:.9em; text-align:center;}
table.DataGridStyle1 tr.itemRow td {vertical-align:middle;}
table.DataGridStyle1 tr.itemRow td input[type="text"].phonenumber {width:8em;}
table.DataGridStyle1 tr.itemRow td input[type="text"].date {width:4em;}
table.DataGridStyle1 td {padding:5px 2px; border-bottom:1px dotted #666;}
table.DataGridStyle1 td ul.checkboxes {margin:0; list-style:none; padding:0; display:block; margin-top:.3em;}
table.DataGridStyle1 td ul.checkboxes li {display:block; overflow:hidden; padding:0; padding-bottom:.2em;}
table.DataGridStyle1 td ul.checkboxes li input {display:inline; margin:0; float:none; }
table.DataGridStyle1 td ul.checkboxes li label {display:inline; margin:0 .5em; float:none; padding:0; text-align:left; font-weight:normal;}
input.gridboxdisable {border:none !important; background-color:transparent; background:none; color:Black; }

div.exampleBar { overflow:hidden; }
div.exampleBar div.example {display:block; float:left; width: 250px;}
div.exampleBar div.example div.detail {min-height:90px; border:1px solid #666; padding: 5px; border-radius:3px;}
div.exampleBar div.example span.claimid {color:Red; text-decoration:underline;}

/* CSS BUTTONS */
.cssbutton { cursor:pointer; text-align:center; padding:.3em .4em; margin-left:10px; border-radius:5px;   }
.cssbutton.primary {text-decoration:none; font-size:1.1em; font-weight:bold; background-image:url(../../../images/btnBack-primary.jpg); background-color:#DD8500; color:#FFF; border:1px solid #996600;}
.cssbutton.primary:hover {background-image:url(../../../images/btnBack-primary-on.jpg);}
.cssbutton.secondary { text-decoration: none; font-size: 1em; font-weight: normal; background-image: url(../../../images/btnBack-dim.jpg); background-color: #D8D8D8; color: #000000; border: 1px solid #999; }
.cssbutton.secondary:hover {background-image:url(../../../images/btnBack-dim-on.jpg);}

/* PROCESSING BUTTON */
/* To enable a button to display "Processing..." after a click. 
	(1) Add class "triggerProcess" to the trigger button. 
	(2) Place the Processing DIV immediately before it. 
	Example:
		<div class="cssbutton processing">Searching...</div>
		<asp:Button CssClass="cssbutton primary triggerProcess" ID="btnNext" runat="server" Text="Continue &raquo;" CommandName="MoveNext"  />
*/
.cssbutton.processing { display:none; line-height:3em; width: 120px; height: 34px; padding: 0; cursor: default; font-size: .7em; font-weight: bold; border: 1px solid #999; background-repeat: no-repeat; background-image: url(/images/processing.gif); background-position: center; background-color: #f8f8f8; color: #0B4F8C !important; font-family: Arial, Helvetica, sans-serif; }

div.buttonrow {text-align:center !important; display:block; margin-top:1em;}
div.buttonrow div.innerButtonRow {display:inline-block; text-align:center;}
div.buttonrow div.innerButtonRow div.buttonAndInstructionWrapper {float:left; text-align:center; margin:0 7px;}
div.buttonrow div.innerButtonRow div.buttonAndInstructionWrapper p.fieldTip {margin:0 !important; text-align:center; margin-top:.4em !important;}
div.buttonrow div.innerButtonRow div.buttonAndInstructionWrapper .cssbutton {margin:0 0 .5em 0 !important;}

/* FORM PAGE ELEMENTS */
.formHeader {color:#000; font-size:1.1em; font-weight:bold; padding-bottom: .8em; margin-bottom:.5em; border-bottom:1px dotted #FF9900;}

.pageHeader {color:#666; font-size:1em; font-weight:bold; overflow:hidden;}
.pageHeader h1 {float:left; margin-bottom:.7em;}
.pageHeader p {width:200px; float:right; font-weight:normal; font-size:.8em; text-align:right; }

.formEyebrow {clear:both; color:#666;}

div.captcha {text-align:center; overflow:hidden; margin-bottom:1em;}
div.captcha .rcCaptchaImage {margin:0 auto .6em auto;}
div.captcha .rcCaptchaAudioLink {display:inline !important;}
div.captcha .rcRefreshImage {display:inline !important; margin-right:10px; border-right:1px solid #999; padding-right:10px;}

/* FORMS */
input.uppercase {text-transform: uppercase;}

.formStyle1 fieldset .buttonrow {padding: 10px 0 10px 205px;}  /* buttons are inside a fieldset */
.formStyle1 .fieldTip { padding-top:.1em; margin-top: 0; margin-left: 2%; display: block; font-style: italic; font-size: .85em; color: #5F5F5F; font-family: Arial, Helvetica, sans-serif; }
.formStyle1 p.instruction {color:#990000; font-style:italic;}

.formStyle1 label {font-size:.9em; line-height:1.1em; color:#333; display:block; text-align:left; margin:.45em 15px .15em 0; font-family:Arial, Helvetica, sans-serif; font-weight:bold;}
.formStyle1 label b {color:#FF0000; font-weight:bold; font-size:1em;}
.formStyle1 fieldset {position:relative; border-radius: 7px; border:none; background-color:#E9EDED; padding:3em 15px 15px 15px; margin-bottom:10px; }
fieldset.nolegend {padding-top:.95em;}
.formStyle1 legend {position:absolute; font-weight:bold; top:.85em; left:.85em; font-size:1.1em; color:#595959; }
.formStyle1 legend b {font-weight:normal; font-size:.85em;}
.formStyle1 .row {display:block; margin-bottom:.5em; overflow:hidden;}
.formStyle1 .row.readOnlyFields span {font-weight:bold; line-height:1.7em; color:Black;}  /* use LABELs instead of TEXTBOXes */
.formStyle1 input[type=text],  
.formStyle1 textarea,
.formStyle1 select {width:95%; padding:4px; font-size:1.1em; border:1px solid #666; border-radius:5px;}

.formStyle1 span.error { margin:10px 0;	padding:10px; color: #C00; display:block; border:1px solid #600; border-radius:4px; background: #FDD0CE;}
.formStyle1 span.success { margin:10px 0; padding:10px; color: #030; display:block; border:1px solid #060; border-radius:4px; background-color:#CDEDCB;}

.formStyle1 .row.checkboxes label,
.formStyle1 .row.widecheckboxes label {width:10%; float:left !important;}
.formStyle1 .row.checkboxes,
.formStyle1 .row.widecheckboxes {margin-bottom:0;}

.formStyle1 ul.checkboxes {list-style:none; padding:0; display:block; overflow:hidden;  margin-top:.1em;}
.formStyle1 ul.checkboxes li {clear:both; display:block; overflow:hidden;}
.formStyle1 ul.checkboxes li input {float:left; display:block; margin:.5em 2% 0 0; }
.formStyle1 ul.checkboxes label {color:#333; padding-top:0; width:79% !important; float:left; overflow:hidden; display:block; text-align:left; font-weight:normal; line-height:1.3em;}

/*		Allows you to create YES/NO radiobuttons to the right of the label text */
.formStyle1 div.row.yesno label {text-align:left; width:90%; }
.formStyle1 div.row.yesno ul {margin-top:0;}
.formStyle1 div.row.yesno li {width:30%; clear:none; margin: .3em 0 0 2%; float:left;}
.formStyle1 div.row.yesno li label {width:70% !important; margin-right:0; margin-left:2%;}

/*		Allows you to create an indented "regular row" within a list of checkboxes */
.formStyle1 ul.checkboxes li.regularRow {margin-left:10%;}
.formStyle1 ul.checkboxes li.regularRow label {width:95% !important; text-align:left; color:#666; font-weight:bold;}
.formStyle1 ul.checkboxes li.regularRow input[type=text] {margin-top:0;}
.formStyle1 ul.checkboxes li.regularRow p.fieldInstruction {clear:both; margin-left:0;}

.formStyle1 input.error, 
.formStyle1 label.error,
.formStyle1 select.error {border-color:#ff0000 !important; background-color:#f1d9d7 !important; border-width:1px; }

/* specific field formatting */
input[type=text].number {width:80px !important;}
input[type=text].number2 {width:25px !important;}
input[type=text].number3 {width:45px !important;}
input[type=text].number4 {width:65px !important;}
input[type=text].number7 {width:80px !important;}
input[type=text].number10 {width:120px !important;}
input[type=text].phonenumber {width:8em !important;}
select.number {width:10em !important;}
input[type=text].readonly {border:none !important; background:transparent; color:Black;}

/* ALERT AREAS ON FORMS */
.alertMsgArea {font-weight:bold; background-image:url(../../../images/warning.jpg); background-position:left top; background-repeat:no-repeat; margin:1em 0; color:#FF0000;}
.alertMsgArea p, .alertMsgArea ul {margin-left:35px; padding-top:0; text-align:left;}

.alertHelpWrapper {display:none; line-height:1.3em; font-size:.85em; padding:8px; border:1px solid #009900; border-radius:8px; background-color: #EBFFE6; background-image:url(../../../images/help.png); background-position:left top; background-repeat:no-repeat; margin:1em 0; color:#002677;}
.alertHelpWrapper p, .alertHelpWrapper ul {margin-left:35px; padding-top:0;}
.alertHelpWrapper strong, .alertHelpWrapper b {color:#000000;}


/* FILE CLAIM LAUNCH PAGE */
.optionsWrapper {margin-top:20px;}
.optionsWrapper .optionColumn {float:left; width:400px; border-right:1px dotted #666; padding-right:15px; margin-right:15px;}
.optionsWrapper .optionColumn.last {width:250px; margin-right:0; border-right:none; padding-right:0;}
.optionsWrapper .optionColumn label {width:150px;}
.optionsWrapper .optionColumn input[type=text] {width:160px;}
.optionsWrapper .optionColumn fieldset {margin-top:10px;}
.optionsWrapper .optionColumn fieldset .buttonrow {padding-left:0;}
.optionsWrapper .optionColumn div.fieldTip {margin-left:160px;}
.optionColumn h1 {color:#666;}

/* REVIEW PAGE */
#contentWrapper .reviewWrapper {margin-bottom:18px;}
#contentWrapper .reviewWrapper ul { margin: 2em 0; padding: 10px; font-size: .9em; border: 1px solid #C0C0C0; border-radius: 8px; }
#contentWrapper .reviewWrapper li {margin:.5em 0; padding:0; display:block; overflow:hidden;}
#contentWrapper .reviewWrapper li {padding-bottom:.2em;}
#contentWrapper .reviewWrapper li h2,
#contentWrapper .reviewWrapper li p {font-size:1em; font-weight:normal; color:#727272; display:block; width:170px; text-align:right; float:left; padding:0; margin:0; line-height:1.1em;}
#contentWrapper .reviewWrapper li p {text-align:left; margin-left:15px; color:#000; width:450px;}
#contentWrapper .reviewWrapper div.datarow {margin-top:.6em; clear:both; overflow:hidden;}
#contentWrapper .reviewWrapper div.label {float:left; width:27%;}
#contentWrapper .reviewWrapper div.data  {float:left; margin-left:1.5%; width:70%; font-weight:bold;}
#contentWrapper .reviewWrapper div.addressBlock {font-weight:bold; font-size:.9em; color:#333; margin-bottom:1.5em; border: 1px dotted #666; padding: 15px;}
#contentWrapper .reviewWrapper h3 { margin: 1em 0px; color: #333333; }

a:link.print, a:visited.print { margin: 1em; color: #333333; text-align: center; border-radius: 3px; display: block; width: 7em; border: 1px solid #FFAC84; background-color: #FEDAA9; padding: .3em; float: right; font-weight: bold; font-size: .8em; font-family: Verdana; text-decoration: none; }
a:hover.print { background-color: #FFF5E8;}

/* ALTERNATE ROW */
.row.rightblock {width:300px; float:left;}

/* UPLOAD AREA */
.uploadArea {margin-top:1em;}
.uploadArea .RadUpload {width:350px; float:left;}
.uploadArea .RadUpload .ruFileWrap {height:auto;}
.uploadArea .RadUpload_Default {font-size: .95em;}
.uploadArea input[type="text"].ruFakeInput {width:180px;}
.uploadArea p.fieldTip {margin-left:0; clear:left; padding-top:0; line-height:1.2em;}
.uploadArea ul.ruInputs li {padding-bottom:.1em;}

.uploadArea .row {display:block; float:left;}

.uploadArea .preAttachedWrapper {font-size:.95em; font-family: "Segoe UI",Arial,sans-serif; }
.uploadArea .preAttachedWrapper .filename { padding-left: 19px; background-image: url('../../../images/on.png'); background-repeat: no-repeat; background-position:left;}
.uploadArea .preAttachedWrapper .remove { margin-left: 2px; padding-left: 13px; font-size: .7em; background-image: url('../../../images/x.png'); background-repeat: no-repeat; background-position:left;}
.uploadArea .preAttachedWrapper .remove a:link {color:#666; text-decoration:none;}
.uploadArea .preAttachedWrapper td {padding-bottom:.6em;}

/* START PAGES */
.offlineMessage {display:block; overflow:hidden; margin-top:20px; padding:20px; border:3px solid #666; border-radius:8px; text-align:center;}

/************************************** */
/* MEDIA QUERIES                        */
/************************************** */

/* Breakpoint at 800px */	
@media screen and (min-width: 40em){
	#page {width:100%; max-width:950px;}
	#contentWrapper {padding:0; float:left; width:77%}

	#content {padding-right:1em;}
	.contentColumn {float:left; width:64%} 
	#LowerBanner {display:block;}
	#banner a.menu {display:none;}
	#banner {font-size:1.8em; line-height:1.1em; color:#3F7FA1; background-color:White; padding: 15px 0 3px 15px; text-align:left;}
	
	#menuBar {display:block;}
	#menuBar img {width:90%; max-width:139px;}

	#sidebar {margin: 25px 0px 15px 15px; border-left:1px dotted #666; border-bottom:none; float:right; padding: 0 .8% 0 1%; width:30%;}
	#sidebar h2 {margin-bottom:.5em;}
	#sidebar p {padding: 0.6em 0px;}

	.formStyle1 label {float:left; width:26%; text-align:right;}
	.formStyle1 input[type=text],
	.formStyle1 textarea,
	.formStyle1 select {width:65%;}
	.formStyle1 .fieldTip { margin-left: 29%; margin-right: 10%;}
	.formStyle1 ul.checkboxes label {width:90%;}
	.formStyle1 div.row.yesno label {text-align:left; width:70%; }
	.formStyle1 div.row.yesno li {width:46%; margin-top:0;}

	.formStyle1 ul.checkboxes li.regularRow {margin-left:10%;}
	.formStyle1 ul.checkboxes li.regularRow label {width:20% !important; text-align:right; }
	.formStyle1 ul.checkboxes li.regularRow input[type=text] {margin-top:0;}
	.formStyle1 ul.checkboxes li.regularRow p.fieldInstruction {clear:both; margin-left:25%}

	.cssbutton { padding:.3em 1.5em;}
}
