﻿/* CSS Document */
/* ================= Type Selector ================= */
* { padding: 0; margin: 0; }
ul li, ol li { list-style: none; list-style-position: inside; }
ol ol, ul ul, ol ul, ul ol { margin-left: 20px; margin-bottom: 0; }
img { border: none; }

body {
	color: #4A688A;
	background: #67819d url('../images/bg.gif') repeat-x;
	font-family: "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
	font-size: 14px;
	line-height: 18px;
	}
a:link {
	color: #4A688A;
}
a:visited {
	color: #4A688A;
}
a:hover {
	color: #7594B5;
}
a:active {
	color: #7594B5;
}

h1, h2, h3, h4, h5, h6 { font-family: "Trebuchet MS", Helvetica, Arial, Geneva, Sans-Serif;  }
h1 {
	font-size: 18px;
	line-height: 26px;
	margin-bottom: 10px;
	color: #4A688A;
	text-transform: uppercase;
	letter-spacing:2px;
	word-spacing:2px;
}
h2 { font-size: 20px; line-height: 24px; margin-bottom: 7px; text-transform: uppercase;}
h3 { font-size: 18px; line-height: 22px; margin-bottom: 5px; text-transform: uppercase;}
h4 { font-size: 16px; line-height: 20px; margin-bottom: 5px; text-transform: uppercase;}
h5 { font-size: 14px; line-height: 18px; margin-bottom: 5px; text-transform: uppercase;}
h6 { font-size: 12px; line-height: 16px; margin-bottom: 5px; text-transform: uppercase;}

h1 span { color: #ffffff; }



p { margin-bottom: 10px; color:#4A688A;}

blockquote { 
	font: italic 14px/22px Georgia, Serif; 
	padding: 5px 10px;
	margin-bottom: 20px;
	background: #e4ede2; 
}

fieldset legend {color:#4A688A;}

#container { 
	width: 900px; 
	padding-bottom: 10px; 
	margin: 0 auto; 
	overflow: hidden; 
}
#container #wrap { 
	width: 900px; 
	float: left; 
	overflow: hidden; 
	background: #d6ded4 url('../images/sidebar-bg.gif') repeat-y top right; 
}



#header { 
	width: 900px; 
	height: 46px; 
	float: left; 
	position: relative; 
}
#header h1 {
	padding-top: 10px;
	margin-bottom: 0;
	color: #fff;
	text-transform: uppercase;
	font-family: "Trebuchet MS";
	font-size: 18px;
	font-weight: bold;
}
#header h1 a { 
	color: #fff; 
	
	text-decoration: none; 
}
#header h1 span {
	padding-left: 10px;
	font-size: 24px;
	color: #ccc;
	word-spacing: 2px;
	letter-spacing: 2px;
}

#search {
	position: absolute;
	top: 15px; 
	right: 0px;
}

#search input { border: 0; }

#search #s { 
	width: 148px;
	padding: 4px 0 4px 22px;
	margin-right: -4px;
	vertical-align: top;
	line-height: 0;
	font: normal 12px Trebuchet MS;
	vertical-align: top;
	color: #333;
	background: url('../images/search-text.gif') no-repeat;
}
#search #searchsubmit { 
	width: 35px; 
	height: 22px;
	vertical-align: top;
	background: url('../images/search-submit.gif') no-repeat;
}
.middle {
	width: 900px;
	height: 150px;
	float: left;
	background: url('../images/middle.gif') no-repeat;
	border-bottom: 4px solid #4A688A;
	position: relative;
	text-transform: uppercase;
}
#navigation {
	width: 900px;
	height: 42px;
	float: left;
	background: url('../images/navigation-bg.gif') no-repeat;
	border-bottom: 1px solid #ffffff;
	position: relative;
	background-color: #557DA2;
	text-transform:uppercase;
	letter-spacing:1px;
	word-spacing:1px;
}
#navigation ul { 
	margin-left: 10px; 
	position: absolute; 
	bottom: -1px; 
	overflow: hidden; 
	height: 33px; 
}
#navigation ul li { 
	float: left; 
	margin-right: 3px; 
	padding-left: 7px; 
}
#navigation ul li.current_page_item { background: url('../images/navigation-tab-left.gif') no-repeat; }
#navigation ul li a { 
	display: block; 
	text-decoration: none; 
	color: #ffffff; 
	line-height: 33px; 
	padding: 0 15px 0 8px; 
}
#navigation ul li a:hover { color: #555; }
#navigation ul li.current_page_item a { background: url('../images/navigation-tab-right.gif') no-repeat top right; }
#navigation #feed { 
	position: absolute; 
	right: 15px; 
	top: 12px; 
	height: 19px; 
	padding-left: 37px; 
	color: #544626; 
	display: block; 
	background: url('../images/feed.gif') no-repeat; 
	text-decoration: none; 
}
#content {
	width: 633px;
	float: right;
	padding: 15px;
	background-image: url('../images/tback.gif');
	background-color: #FFFFFF;
	background-repeat: repeat-x;
	border-right: 1px dotted;
	border-color: #CCCCCC;
	border-left: 1px solid #ffffff;
	min-height:400px;
}
#content .post { margin-bottom: 40px; }
#content .post p { margin-bottom: 20px; }
#content .post h1 a { text-decoration: none; }
#content .post-list li { list-style: none; }
#content .post img { margin-right:10px; border: 4px solid #cccccc; }

#content .post .post-info {
	clear: both;
	font-size: 11px;
	color: #4A688A;
	padding: 3px 5px 5px 5px;
	margin-bottom: 20px;
	border-top: 1px dotted #ffffff;
	border-bottom: 1px dotted #ffffff;
	background: #c5cdd6;
}
#content .post .post-info a { color: #333; text-decoration:none; }
#content .post .post-info a:hover { color: #555; text-decoration:none; }

#content #pages { text-align: center; }
#content #pages a { font: bold 20px "Trebuchet MS"; color: #414d4c; text-decoration: none; }
#content #pages a:hover { color: #1e2726; }

#content ul, ol, dl { margin-bottom: 20px; }
#content ul { 
	list-style: disc;
	list-style-position: inside; 
}
#content ol { 
	list-style: decimal; 
	list-style-position: inside; 
}
#content dl dt { 
	font-weight: bold;
}
#content dl dd { 
	font-style: italic;
	margin: 0 0 5px 20px;
	color: #555;
}

.aligncenter { margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin: 5px 15px 10px 0; }
.alignright { float: right; margin: 5px 0 10px 15px; }

.hr-divider {border-top:solid 1px #C6DBE7;border-bottom:solid 1px #C6DBE7;}





#sidebar {
	width: 235px;
	float: left;
	font-size: 14px;
	margin-bottom: 10px;
	color: #4A688A;
}

#sidebar h3 {
	font: normal 18px Trebuchet MS, Arial, Sans-Serif;
	color: #4A688A;
}

#sidebar a {
	color: #4A688A;
	text-decoration: none;
}
#sidebar a:hover { color: #38463e; }

#sidebar .block {
	width: 205px;
	padding: 15px;
	border-bottom: 1px solid #bfccbf;
	overflow: hidden;
	color: #4A688A;
}
#sidebar .block li { 
	/* background: url(images/arrow.gif) no-repeat 2px 8px; */
	padding-left: 12px;
}
#sidebar .block a:hover { color: #777; }


/* FOOTER */

#footer 
{
	text-align:center;
	margin-top: 12px;
}
	
	
/* ================= Class Selector ================= */

.alignCenter{
    text-align: center;
}
.helpText{
    font-weight: bold;
    font-size: small;
}

.pageHeader{
    font-weight: bold;
    font-size: larger;
    margin-top:40px;
    margin-bottom: 20px;
    width: 100%;
    border: solid 1px #4A688A;
}

.sectionHeader{
}

.tableHeader{
}

.title 
{
	font-size: 24px; 
	line-height: 22px; 
	margin-bottom: 25px; 
	text-transform: uppercase;
}

.title-question
{
	font-size:1.2em; 
	font-variant:small-caps;
	font-weight:bold; 
	padding-top:14px;
	
	}

ul.vmenu {
    width: 223px; /* set width of menu */
    background: #ACC1D2;
    margin-left:0.21em;
    border: 0px solid #4792E6;
} 

ul.vmenu  { /* remove bullets and list indents */
    list-style: none;
    margin-left: 5px;
    padding: 0;
}

/* style, color and size links and headings to suit */
.vmenu a, .vmenu h2 {
    font: bold 11px/16px arial, helvetica, sans-serif;
    display: block;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc #888 #555 #bbb;
    margin: 0;
    padding: 2px 2px;
}


/* ----------- form-style with labels on left ----------- */
#form-style{padding:8px 8px 24px 8px;margin:0 10px 0 10px;}
/* div#form-style{border-top:solid 1px #C6DBE7;border-bottom:solid 1px #C6DBE7;} */
div#form-style{border-bottom:solid 1px #C6DBE7;}
#form-style h1 {font-size:18px;font-weight:bold;margin-bottom:8px;}
#form-style h3, #form-style-top #form-style h3{padding: 25px 0 25px 0;}
#form-style p{font-size:11px;color:#666666;margin-bottom:20px;padding-bottom:10px;}
#form-style label{display:block;font-weight:bold;text-align:right;width:150px;float:left;}
#form-style .small{color:#666666;display:block;font-size:11px;font-weight:normal;text-align:right;width:140px;}
#form-style input{float:left;font-size:12px;padding:4px 2px;border:solid 1px #aacfe4;width:200px;margin:2px 0 20px 10px;}
#form-style p {font-size:14px;}
#form-style .formButton{clear:both;margin-left:160px;width:125px;height:31px;background:#8CA2B5;text-align:center;line-height:17px;color:#FFFFFF;font-size:11px;font-weight:bold;}

/* ----------- form-style with labels on top ----------- */

#form-style-top .formButton{clear:both;width:125px;height:31px;background:#8CA2B5;text-align:center;line-height:17px;color:#FFFFFF;font-size:11px;font-weight:bold;margin: 10px 0 0 0;}
/* div#form-style-top{border-top:solid 1px #C6DBE7;border-bottom:solid 1px #C6DBE7; margin: 2px 2px 5px 2px;} */
div#form-style-top{border-bottom:solid 1px #C6DBE7; margin: 2px 2px 5px 2px;}
#form-style-top div.input-area{padding-top:8px;clear:both;}
#form-style-top div.inputFirst{float:left;clear:left;}
#form-style-top div.inputNext{float:left;margin-left:25px;}
#form-style-top input{display:block;clear:left;float:left;padding:2px;font-family:Arial,Helvetica,Geneva,Verdana,sans-serif;font-size:1.0em;}
#form-style-top select{display:block;clear:left;}
#form-style-top input.checkbox{display:inline;float:left;margin-right:0.8em;}
#form-style-top input.checkbox2{display:none;float:right;margin-right:0.8em;}
#form-style-top label.checkbox2{float:left; vertical-align:top;}
#form-style-top label{float:left; padding-right:0.8em;clear:left;font-weight:bold;font-family:Arial,Helvetica,Geneva,Verdana,sans-serif;font-size:.9em;}
#form-style-top label.checked{clear:none; }
#form-style-top span.small{float: left;}
#form-style-top input {padding-left:2px;}
#form-style-top div.inputFirst input{width:200px;}
#form-style-top div.inputWidth2 input{width:200px;}	

#form-style-top #attorney {padding:15px;border:solid 1px #CCC;}	

/* ----------- form-style with labels on top for search criteria area ----------- */
#search-style-top { padding: 5px; margin-bottom: 5px;}
#search-style-top .formButton{clear:both;width:125px;height:31px;background:#8CA2B5;text-align:center;line-height:17px;color:#FFFFFF;font-size:11px;font-weight:bold;margin: 10px 0 10px 0;}
#search-style-top div.input-area{padding-top:2px;clear:both;}
#search-style-top div.inputFirst{float:left;clear:left;}
#search-style-top div.inputNext{float:left;margin-left:25px;}
#search-style-top input{display:block;clear:left;float:left;padding:2px;font-family:Arial,Helvetica,Geneva,Verdana,sans-serif;font-size:1.0em;}
#search-style-top select{display:block;clear:left; margin-top: 3px;}
#search-style-top label{float:left; padding-right:0.8em;clear:left;font-weight:bold;font-family:Arial,Helvetica,Geneva,Verdana,sans-serif;font-size:.9em;}
#search-style-top label.checked{clear:none; }
#search-style-top span.small{float: left;}
#search-style-top input {padding-left:2px;}
#search-style-top div.inputWidth2 input{width:200px;}


/*---------------- Edit Appeal --------------------------------*/
span.right-aligned-label { float:left; width: 11em; margin-right:1em; text-align:right;}


/*---------------- Appeal Form ---------------------------------*/

#AppealForm .title-label {font-weight:bold; text-transform:uppercase; font-size:0.85em;}	

.radio-question1{width:25px; float:left;}
.title-type-question1 {font-weight:bold; width:60px; float:left;}
.title-description-question1{width:330px; float:right;}



/*----------------- Positioning and Size Styles ----------------*/

.field-width-60{width:60%;}
.input-padding{margin:3px 0 0 0;}
.label-width-40{width:40%;}
.min-width{min-width: 100px;}
.move{margin-left:160px;clear:both;}
.spacer{clear:both; height:1px;}
.width-25px{width:25px;}

/* vvvvvvvvv For the password strength indicator vvvvvvvvvv */
.textIndicator_poor,
.textIndicator_weak,
.textIndicator_good,
.textIndicator_strong,
.textIndicator_excellent {
    padding:2px;
    font-weight:bold;
}

.textIndicator_poor {
    background-color:gray;
    color:#ffff00;
}
 
.textIndicator_weak {
    background-color:gray;
    color:#00ffff;
}
 
.textIndicator_good {
    background-color:gray;
    color:lightblue;
}
 
.textIndicator_strong {
    background-color:gray;
    color:lightgreen;
}
 
.textIndicator_excellent {
    background-color:gray;
    color:#00ffdd;
}

.textbox {
    border: solid 2px #cccccc;
    border-top: solid 2px #a0a0a0;
}
.sideIndicatorAndHelpText {
    float: right; 
    width: 65%;
}
/* ^^^^^^^^^^^ For the password strength indicator ^^^^^^^ */

/* vvvvvvvvvvv For the AJAX date picker vvvvvvvvv */
.MyCalendar .ajax__calendar_container {
    border:1px solid #646464;
    background-color: #FFFACD;
    color: blue;
}
.MyCalendar .ajax__calendar_other .ajax__calendar_day,
.MyCalendar .ajax__calendar_other .ajax__calendar_year {
    color: black;
}
.MyCalendar .ajax__calendar_hover .ajax__calendar_day,
.MyCalendar .ajax__calendar_hover .ajax__calendar_month,
.MyCalendar .ajax__calendar_hover .ajax__calendar_year {
    color: black;
}
.MyCalendar .ajax__calendar_active .ajax__calendar_day,
.MyCalendar .ajax__calendar_active .ajax__calendar_month,
.MyCalendar .ajax__calendar_active .ajax__calendar_year {
    color: black;
    font-weight:bold;
}
/* ^^^^^^^^^^^^ For the AJAX date picker ^^^^^^^^^^^^^ */

div.label_field_pair {
  clear: right;
  float: none;
}
div.label_field_pair label {
  clear: left;
  display: block;
  float: left;
  text-align: left;
  width: 90px;
  margin:-17px 0 0 45px;
}
  
div.label_field_pair input {
  clear: right;
  float: left;
  margin-left: 10px;
  width: 50px;
}

.errorMessage {
    color: Red;
    font-weight: bold;
    font-size: small;
}

.warningMessage {
    color: #996633;
    font-weight: bold;
    font-size: small;
}

.successfulMessage {
    color: Green;
    font-weight: bold;
    font-size: small;
}
.hide{
   display: none;
   visibility: hidden;
}

.show{
   display: inline;
   visibility: visible;
}

.formButton2{background:#8CA2B5;text-align:center;line-height:17px;color:#FFFFFF;font-size:11px;font-weight:bold;padding: 3px;}

/************** Clock ********************/

     #clock { float: left; width: 290px; margin: 155px 0 0 18px; border: 1px solid #ccc; background-color: #eee; }
     #defaultCountdown{ border: none; background-color: transparent; width:100%}

/************  Dialog   ******************/

     .ui-dialog-content{font-size:80%; color:#000;}
     .ui-dialog-title {text-transform:uppercase; font-weight:bold; font-size:90%;letter-spacing:0.25em;}
     .helpText{color:#666666;font-size:11px;padding-left:10px;font-weight:normal;}
     
/* ========== For GridView control ============ */
.gridViewStyle
{
	width:100%;
    
}
.gridViewHeaderStyle{
    background-color: #92A6BA;
    color: #FFFFFF;
    font-weight: bold;
}
.gridViewHeaderStyle td, 
.gridViewHeaderStyle th {
    padding-left: 2px;
    padding-right: 2px;
}

.gridViewRowStyle{
    background-color: #FFFFFF;

}
.gridViewRowStyle td{
    padding-left: 2px;
    padding-right: 2px;
}

.gridViewAlternatingRowStyle{
    background-color: #EBEBEB;
}
.gridViewAlternatingRowStyle td{
    padding-left: 2px;
    padding-right: 2px;
}

.gridViewPagerStyle{ /* this class will apply to the outer <tr> */
    background-color: #94A6BD;
    color: #FFFFFF;
}
.gridViewFooterStyle{

}
.gridViewFooterStyle td{
    padding-left: 2px;
    padding-right: 2px;
}
div.radio-spacer{padding-bottom:20px;}
.radio-style input, radio-style-2 input{float:left;margin-right:0.4em; }
.radio-style label{ float:right;vertical-align:top;  width:80px; position:absolute;}

/* ----- */
table.tableSectionStyleH1 {
	border-width: 0px; /*1px 1px 1px 1px; */
    width: 100%;
    font-size: small;
    background-color: #dddddd;
}
table.tableSectionStyleH1 td{
	padding: 5px;
	text-align: left;
}
table.tableSectionStyleH1 th{
	padding: 5px;
	text-align: right;
	font-weight: bold;
}
/* ----- */
table.tableSectionStyleV1 {
	border-width: 0px;
    width: 100%;
    font-size: small;
    padding: 10px;
}
table.tableSectionStyleV1 td{
	text-align: left;
}
table.tableSectionStyleV1 th{
	text-align: left;
	font-weight: bold;
}
/* ----- */
table.frame{
	border-width: 0px;
	border-spacing: 0px;
	padding: 0px;
	margin: 0px;
	border-style: none;
	width: 100%;
}

table.frame th td{
	border-width: 0px;
	padding: 0px;
	border-style: none;
}
/* ----------------------- */
div.row{
    padding-top:8px;
    clear:both;
}

div.column{
    float: left;
    margin-right: 10px;
}

div.firstField{
    float: left;
    clear: left;
    color: #4a688a;
    padding: 5px;
}
div.firstField label {
    float: left;
    clear: left;
    font-weight: bold;
    white-space:nowrap;
    
}
div.firstField input {
    clear: left;
    float: left;
    display: block;
}
div.firstField img {
    float: left;
    display: block;
    margin-top: 4px;
    margin-left: 2px;
}

div.nextField{
    float: left;
    padding-left: 25px;
    color: #4a688a;
}

div.nextField label {
    float: left;
    clear: left;
    font-weight: bold;
    white-space:nowrap;
}
div.nextField input {
    clear: left;
    float: left;
    display: block;
}
div.nextField img {
    float: left;
    display: block;
    margin-top: 4px;
    margin-left: 2px;
}

img.calDatePicker {
    float: left;
    display: block;
    margin-top: 8px;
    margin-left: 2px;
}

/* ----------------------- */
.clearer { clear: both;}

fieldset { padding: 10px;}
legend { font-weight: bold; }

/* --------- class selectors for input fields formatting ----------- */
div.inputFieldFirst{
    clear: left;
    float: left;
    padding-top: 8px;
}

div.inputFieldNext{
    float: left;
    margin-left: 25px;
    padding-top: 8px;
}

div.inputFieldFirst label,
div.inputFieldNext label{
    clear:left;
    float:left;
    font-size:0.9em;
    font-weight:bold;
    padding-right:0.8em;
}
div.inputFieldFirst input,
div.inputFieldNext input{
    clear:left;
    display:block;
    float:left;
    font-size:1em;
    padding:2px;
}

div.inputFieldFirst img.calDatePicker,
div.inputFieldNext img.calDatePicker {
    display:block;
    float:left;
    margin-left:2px;
    margin-top:8px;
}

