/* cf. http://www.positioniseverything.net/easyclearing.html */
	div.field-group:after,
	div.callout:after,
	div.field:after,
	div.confirmation:after,
	#content:after,
	fieldset:after {
		content: "."; 
		display: block; 
		height: 0; 
		clear: both; 
		visibility: hidden;
	}
	* html div.callout,
	* html div.field-group,
	* html div.field,
	* html div.confirmation {
		height: 1%;
	}
	*+html div.callout,
	*+html div.field-group,
	*+html div.confirmation {
		height: 1%;
	}


/* basic elements */
	body {
		padding: 0;
		margin: 0;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		background-color: #ddd;
	}
		body.safari select {
			margin-bottom: 4px;
		}
	
	html {
		/* cf. http://www.hicksdesign.co.uk/journal/forcing-scrollbars-now-even-better */
		height: 100%;
		margin-bottom: 1px;
	}

	a { color: #1c2960; }
	a img { border: 0 !important; }
	
	hr { display: none; }
	
	strong { 
		font-weight: bold;
	}
		strong.important { 
			color: #c90b01;
		}
		fieldset strong {
			color: inherit;
		}
	
	p {
		line-height: 20px;
		margin-bottom: 15px;
	}
		p.h3 {
			font: bold 13px Times, serif;
			color: #666;
			margin-bottom: 5px;
		}
		p.photo-header {
			height: 1px; 
			overflow: visible;
		}
		p.photo-large {
			text-align: center; 
			padding: 3px 0 10px 0;
		}
		p.photo-different {
			text-align: center; 
			padding: 25px 0;
		}
	
	input,
	select,
	textarea {
		font-size: 12px;
		font-family: "Courier New", Courier, monospace;
		color: #000;
		border: 1px solid #333;
		border-color: #333 #999 #999 #333;
		background-color: #fff;
	}
		div.error input,
		div.error select,
		div.error textarea {
			border-color: #c90b01;
			background-color: #fee;
		}
		* html input,
		* html select,
		* html textarea {
			vertical-align: middle;
		}
		
		input:focus,
		select:focus,
		textarea:focus {
			background-color: #ffffcc !important;
		}
			/* social security number inputs */
			input.ssn1 { width: 2.5em !important; }
			input.ssn2 { width: 2em !important;   }
			input.ssn3 { width: 3em !important;   }
			
			input.radio,
			input.checkbox {
				border: 0;
				background-color: transparent;
				width: auto !important;
			}
				* html input.radio,
				* html input.checkbox {
					vertical-align: middle;
				}
				*+html input.radio,
				*+html input.checkbox {
					vertical-align: middle;
				}
	
	h1 {
		margin: 0;
		font: normal 16px Times, serif;
		color: #881502;
		padding: 7px 0 15px 0;
		background: url(../images/design/bg-h1.gif) bottom left repeat-x;
	}
		* html h1 {
			position: relative; /* odd disappearing issues otherwise */
		}
	
	h2 {
		background: none;
		margin: 0;
		font: normal 24px Times, serif;
		color: #1c2960;
		padding: 10px 0 19px 0;
	}
	h3 {
		margin: 0;
		font: normal 15px Times, serif;
		color: #1c2960;
		padding: 0 0 5px 0;
	}
	h4 {
		margin: 0 0 7px -12px;
		padding: 7px 0 7px 12px;
		font: bold 12px Times, serif;
		color: #891300;
		border-top: 0;
		border-bottom: 1px dotted #dddad9;
	}
		h4 span {
			color: #666666;
		}
		div.help h4 {
			line-height: 14px;
		}

	label {
		display: block;
		color: #444444;
		cursor: pointer;
		padding-bottom: 3px;
	}
		div.radio label {
			display: inline;
		}
		label span {
			color: #950000;
			font-style: italic;
			font-size: 10px;
		}
		div.error label {
			padding-left: 10px;
			color: #c90b01;
			background: url(../images/design/bg-error-li.gif) 0 2px no-repeat;
		}
	
	fieldset {
		border: 0;
		padding: 0;
		margin: 0;
	}
		fieldset img {
			border: 1px solid #888888;
		}
		fieldset p {
			color: #444;
		}
	
	table {
		border-collapse: collapse;
		margin-bottom: 20px;
	}
		body.template-nonav table {
			border: 1px solid #888;
			border-width: 1px 0;
		}
		th {
			text-align: left;
			font-weight: normal;
			vertical-align: top;
			padding: 3px 5px;
			color: #666666;
		}
		td {
			vertical-align: top;
			padding: 3px 5px;
		}
		tr.photo img { border: 1px solid #888; }
		tr.even  { background-color: #dddddd; }
		tr.photo { background-color: transparent !important; }
		tr.header { }
			tr.header th,
			tr.header td {
				border-top: 20px solid #f8f8f8;
				background: url(../images/design/bg-header-th.gif) top left repeat-x;
				color: #273368;
				text-align: right;
			}
			tr.header th {
				padding: 3px 0;
				text-align: left;
				font-weight: bold;
			}
			tr.header a       { text-decoration: none; }
			tr.header a:hover { text-decoration: underline; }


/* high level nodes */
	#skiplink { display: none; }
	
	#container {
		width: 760px;
		background-color: #fff;
	}
	
	#branding img {
		display: block;
	}


/* navigation */
	#nav {
		height: 21px;
		position: relative;
	}
		body.template-nonav #nav { height: 0; }
		body.template-nonav #nav-main { display: none; } /* this shouldn't even be present, but if something screwed up... */

/* global nav (upper right) */
	#nav-global {
		position: absolute;
		top: -79px;
		right: 10px;
		width: 300px;
		font-size: 11px;
		z-index: 20;
	}
		#nav-global ul {
			list-style: none;
			margin: 0;
			padding: 2px 2px 0 0;
			float: right;
		}
		#nav-global li {
			float: left;
			padding: 0 12px;
			border-left: 1px solid #fff;
		}
			#nav-global li:first-child,
			#nav-global li.first-child {
				border-left: 0;
			}
		#nav-global a {
			color: #fff;
			text-decoration: none;
		}
			#nav-global a:hover,
			#nav-global a.on {
				text-decoration: underline;
			}
			
/* primary nav (horizontal and left rail) */
	#nav-main {
		position: absolute;
		top: 0;
		left: 0;
		width: 760px;
		font: normal 11px Arial, Helvetica, sans-serif;
	}
		
		/* this is for nonJS browsers */
		#nav-main a {
			color: #000;
			text-decoration: none;
		}
			#nav-main a:hover {
				text-decoration: underline;
			}
			#nav-main li.on {
				background-color: #b80b01;
				color: #fff;
			}
		/* end nonJS browser CSS */
	
	#nav-main ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	#nav-main li {
		width: 190px;
		height: 16px;
		float: left;
		text-align: center;
		background-color: #ddd;
		padding: 5px 0 0 0;
	}
		#nav-main #nmli0,
		#nav-main #nmli1,
		#nav-main #nmli2,
		#nav-main #nmli3,
		#nav-main #nmli4 {
			height: 21px;
			padding: 0;
			position: relative;
		}
			#nav-main li span {
				width: 190px;
				height: 21px;
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				background-position: 0 0;
				background-repeat: no-repeat;
			}
			#nav-main li.on span {
				background-position: 0 -21px;
			}
			#nav-main li.off span {
				background-position: 0 -42px;
			}
			
/* primary nav: level 2 (left rail) */
	#nav-main li ul {
		position: absolute;
		top: 76px;
		left: 12px;
		padding-bottom: 225px;
		background: url(../images/design/bg-nav-ul.gif) bottom right no-repeat;
		width: 158px;
	}
		#nav-main #nmli0 ul { left: 12px;   }
		#nav-main #nmli1 ul { left: -178px; }
		#nav-main #nmli2 ul { left: -368px; }
		#nav-main #nmli3 ul { left: -558px; }
	
	#nav-main li li {
		width: 158px;
		text-align: left;
		padding: 0;
		height: auto;
		float: none;
		border-bottom: 1px solid #fff;
	}
		*+html #nav-main li li {
			float: left; /* gets rid of extra vertical spacing */
		}
		* html #nav-main li li a {
			height: 1%; /* gets rid of extra vertical spacing */
		}
		#nav-main li li a {
			color: #888;
			padding: 6px 17px 6px 17px;
			display: block;
			font-size: 11px;
			font-weight: bold;
		}
			#nav-main li li.complete {
				background: #5175ae url(../images/design/bg-nav-a-off.gif) 4px 8px no-repeat;
			}
				#nav-main li li.complete a {
					color: #d4e3f0;
				}
			#nav-main li li.current {
				background: #304364 url(../images/design/bg-nav-li.gif) top left repeat-x;
			}
				#nav-main li li.current a {
					color: #f7edd2;
					background: url(../images/design/bg-nav-a-on.gif) 145px 7px no-repeat;
				}
		#nav-main li li a,
		#nav-main li li a:hover {
			text-decoration: none;
		}
			
/* primary nav: level 3 (left rail) */
	#nav-main li ul li ul {
		position: static;
		top: 0;
		left: 0;
		padding-bottom: 0;
		background: none;
	}
	
	#nav-main li li.current li {
		width: 158px;
		text-align: left;
		padding: 0;
		height: auto;
		float: none;
		border-bottom: 1px solid #fff;
	}
		*+html #nav-main li li.current li {
			float: left; /* gets rid of extra vertical spacing */
		}
		* html #nav-main li li.current li a {
			height: 1%; /* gets rid of extra vertical spacing */
		}
		#nav-main li li.current li a {
			color: #888;
			padding-left: 28px;
			background-image: none;
			background-color: #fff;
			font-weight: normal;
		}
			#nav-main li li.current li.complete {
				background-image: none;
			}
				#nav-main li li.current li.complete a {
					color: #3b527a;
				}
			#nav-main li li.current li.current {
				background-color: #fff;
				background-image: none;
			}
				#nav-main li li.current li.current a {
					color: #3e5681;
					background: #fff url(../images/design/bg-nav-li-li.gif) 18px 10px no-repeat;
				}
		#nav-main li li.current li a,
		#nav-main li li.current li a:hover {
			text-decoration: none;
		}


/* content (the actual form) */
	#content {
		/* background: url(../images/design/bg-content-nonav.gif) top repeat-x; */
		padding: 0 106px;
		font-size: 11px;
	}
		#content ul {
			margin-bottom: 15px;
			list-style: disc;
			margin-left: 2em;
		}
		#content ol {
			margin-bottom: 15px;
			list-style: decimal;
			margin-left: 2em;
		}
		#content li {
			line-height: 20px;
		}


/* notes presented at the top of the form */
	div.note {
		border: 1px solid #dddddd;
		padding: 14px;
		margin: 0 0 24px 0;
	}
		div.note p {
			margin: 0;
			line-height: 14px;
		}


/* groups of fieldsets */
	div.fieldset-group {
		border: 1px dotted #e5ddca;
		padding: 15px 15px 0 15px;
		margin: 0 0 15px 0;
		background: #f8f8f8 url(../images/design/bg-fieldset.gif) bottom left repeat-x;
	}

/* groups of field groupings */
	div.field-groups {
		width: 360px;
		float: left;
	}
		div.field-groups h4,
		div.field-groups h5 {
			margin: 0;
			padding: 0 0 0 2px;
			font-size: 11px;
			line-height: 18px;
			color: #444444;
			font-weight: bold;
			font-family: Verdana, Arial, Helvetica, sans-serif;
			border: 0;
			clear: left; /* dont ever want it floated */
		}


/* group of fields, isn't utalized now, but was through to be handy in framing elements' */
	div.field-group { }


/* fields (a div wrapper around INPUTs and SELECTs; a wrapper because a field also contains hints, and LABELs) */
	div.field {
		padding: 0 10px 20px 0;
		width: 170px;
		float: left;
	}
		input,
		select {
			width: 165px;
		}
			* html input {
				width: 160px;
			}
			*+html input {
				width: 160px;
			}

	/* within a callout */
		div.callout div.field {
			padding: 0 10px 20px 0;
			width: 156px;
			float: left;
		}
			div.callout input,
			div.callout select {
				width: 156px;
			}
				* html div.callout input {
					width: 151px;
				}
				*+html div.callout input {
					width: 151px;
			}

	/* within a callout within an answer */
		div.a div.callout div.field {
			padding: 0 10px 20px 0;
			width: 145px;
			float: left;
		}
			div.a div.callout input,
			div.a div.callout select {
				width: 143px;
			}
				* html div.a div.callout input {
					width: 137px;
				}
				*+html div.a div.callout input {
					width: 137px;
			}

	/* within a callout within a callout */
		div.callout div.callout div.field { }
			div.callout div.callout input,
			div.callout div.callout select {
				width: 299px;
			}
				* html div.callout div.callout input {
					width: 294px;
				}
				*+html div.callout div.callout input {
					width: 294px;
				}
		
	/* within a callout within a callout within an answer */
		div.callout div.callout div.field {
			width: auto !important;
			float: none;
		}
			div.a div.callout div.callout input,
			div.a div.callout div.callout select {
				width: 275px !important; /* important because we want to override div.full if it is used (it shouldn't be) */
			}
				* html div.a div.callout div.callout input {
					width: 270px !important;
				}
				*+html div.a div.callout div.callout input {
					width: 270px !important;
				}

/* full width field, standard is half width */
	div.full {
		padding-right: 0;
		width: 360px;
		float: none;
		clear: both;
	}
		div.full input,
		div.full select {
			width: 345px;
		}
			* html div.full input {
				width: 340px;
			}
			*+html div.full input {
				width: 340px;
			}
		
	/* within a callout */
		div.callout div.full {
			width: auto;
			float: none; /* can't float with no defined with */
		}
			div.callout div.full input,
			div.callout div.full select {
				width: 320px;
			}
				* html div.callout div.full input {
					width: 315px;
				}
				*+html div.callout div.full input {
					width: 315px;
				}
			
	/* within a callout within an answer */
		div.a div.callout div.full {
			width: auto; /* does it need a width? */
			float: none; /* can't float with no defined with */
		}
			div.a div.callout div.full input,
			div.a div.callout div.full select {
				width: 298px;
			}
				* html div.a div.callout div.full input {
					width: 293px;
				}
				*+html div.a div.callout div.full input {
					width: 293px;
				}
				
	/* within a callout within a callout, same as not in a div.full, but just incase a class slipped through */
		div.callout div.callout div.full { }
			div.callout div.callout div.full input,
			div.callout div.callout div.full select {
				width: 299px;
			}
				* html div.callout div.callout div.full input {
					width: 294px;
				}
				*+html div.callout div.callout div.full input {
					width: 294px;
				}
			
	/* within a callout within a callout within an answer, shouldn't need to redeclare styles here since !important was used above'  */

/* a date field, day select, month select, year input */
	div.date { }
		div.date input,
		div.date select {
			vertical-align: super;
		}
		div.date input {
			width: 3em !important; /* 4 digit year, important because I can not think of a reason this would be overruled */
		}
		div.date select {
			width: auto !important; /* months and years */
		}


/* the wrapper around HR */
	div.hr {
		padding: 1px 0 0 0;
		border-bottom: 1px dotted #dddad9;
		margin: 0 0 10px 0;
		clear: both;
	}


/* a group of radio button choices */
	div.radio { 
		padding-bottom: 20px;
	}
		div.radio div.field {
			width: auto;
			padding-right: 10px;
			padding-bottom: 0;
		}
		div.radio div.field input {
			width: auto;
			vertical-align: text-bottom;
		}
		* html div.radio div.field input {
			vertical-align: middle;
		}
		*+html div.radio div.field input {
			vertical-align: middle;
		}


/* blue callout box */
	div.callout {
		background-color: #eaf1f7;
		border: 1px solid #fff;
		padding: 10px 0 0 10px; /* the bottom padding will be handled by the div.field */
		margin-bottom: 20px; /* makes up for lack of padding */
		margin-right: 13px;
		clear: both;
	}
		/* a callout with additional buttons (with additional); only here because it's used in conjunction with callout' */
		div.wadd {
			margin-bottom: 0;
		}
		div.a div.callout {
			margin-right: 0;
		}


/* white callout box */
	div.callout div.callout {
		background-color: #fff;
		padding: 10px 0 0 10px;
		margin: 0 10px 20px 0;
		border: 1px solid #ccc;
	}


/* help info (right rail) */
	div.help {
		border-left: 1px solid #dddad9;
		padding: 0 0 0 12px;
		margin: 0 0 10px 0; /* for when the help is the tallest part of the fieldset */
		width: 141px;
		float: right;
	}
		div.help p {
			margin-bottom: .5em;
			line-height: 14px;
			color: #888;
		}


/* hint info (under the input) */
	div.hint {
		padding: 3px 0 0 0;
		color: #888888;
	}


/* question as a part of a Q&A scenario */
	div.q {
		background: url(../images/design/q.gif) 0 2px no-repeat;
		padding: 7px 0 7px 25px;
	}
		*+html div.q {
			background-position-y: 3px;
		}
		div.q-error {
			background-image: url(../images/design/q.error.gif);
		}
			div.q-error h4 {
				color: #c90b01 !important;
			}
		div.q h4 {
			padding: 0 4px;
			font-weight: bold;
		}


/* answer as a part of a Q&A scenario */
	div.a {
		background: url(../images/design/a.gif) 0 2px no-repeat;
		padding: 7px 13px 0 25px;
	}
		*+html div.a {
			background-position-y: 3px;
		}
		div.a-error {
			background-image: url(../images/design/a.error.gif);
		}
		div.additional div.a {
			background-image: none;
		}


/* additional content, hidden on page load and only displayed when the proper criteria is met */
	div.additional {
		clear: both;
	}
		div.additional fieldset {
			margin: 15px 0 0 0;
		}


/* print button in the upper right */
	div.print {
		position: relative;
	}
		div.print a {
			position: absolute;
			top: -34px;
			right: 0;
			height: 26px;
			width: 71px;
			cursor: pointer;
		}
		* html div.print a {
			right: 20px;
		}


/* callout within a callout */
	div.sub {
		background-color: #fff;
		padding: 10px;
		margin-bottom: 12px;
	}


/* add another / remove */
	div.addone,
	div.removeone {
		margin-top: 4px;
		float: right;
		background: url(../images/design/add.gif) 10px 50% no-repeat;
		margin-bottom: 10px;
	}
	div.removeone {
		background: url(../images/design/remove.gif) 10px 50% no-repeat;
	}
		div.addone a,
		div.removeone a {
			display: block;
			cursor: pointer;
			padding: 1px 13px 1px 30px;
		}


/* confirmation info */
	div.confirmation { }
		div.confirmation div {
			float: left;
		}
		div.confirmation div.info {
			width: 325px;
		}
			div.confirmation div.info table {
				margin: 0 auto;
			}
		div.confirmation div.barcode {
			float: right;
		}


/* error box */
	div.error-message {
		border: 1px solid #c90b01;
		background-color: #fff;
		padding: 0;
		margin: 0 0 20px 0;
	}
		div.error-message h3 {
			background-color: #c90b01;
			margin: 0;
			padding: 3px 12px;
			color: #fff;
			font: bold 12px Verdana, Arial, Helvetica, sans-serif;
		}
		div.error-message p {
			padding: 12px;
			color: #c90b01;
			margin: 0;
		}
		div.error-message label {
			color: #c90b01;
			padding: 0;
			display: inline;
		}


/* the actual errors */
	div.error-messages { }
		div.error-messages li {
			list-style: none;
			margin: 0;
			padding: 0 12px;
			color: #c90b01;
			background: url(../images/design/bg-error-li.gif) 0 5px no-repeat;
		}
		div.error-messages ul ul {
			margin-left: 0 !important;
		}
		div.error-messages li li {
			padding: 0;
			background-image: none;
		}


/* action buttons (for 3) */
	fieldset.actions {
		padding: 0;
		margin-bottom: 5px;
	}
		*+html fieldset.actions {
			margin-top: 20px;
		}
		* html fieldset.actions {
			margin-top: 20px;
		}
		fieldset.actions div {
			background: url(../images/design/bg-actions-3.gif) 0 0 no-repeat;
			height: 40px;
		}
		fieldset.actions input {
			float: left;
			margin: 0 2px 0 0;
			border: 0;
			padding: 0;
			cursor: pointer;
			width: 169px;
		}


/* subit buttons (3, including a save button) */
	div.submits {
		background-image: none;
	}
		div.submits fieldset {
			padding: 0 0 10px 0;
		}
		div.submits div {
			background: url(../images/design/bg-submits-3.gif) 0 0 no-repeat;
			height: 27px;
		}
		div.submits input {
			border: 0;
			padding: 0;
			float: left;
			cursor: pointer;
		}
			div.submits input.next,
			div.submits input.back {
				width: 204px;
			}
			div.submits input.save {
				margin: 0 2px;
				width: 99px;
			}
			div.submits input.disabled {
				cursor: default;
			}
		
		div.submits p {
			text-align: center;
			padding: 35px 0;
		}
			div.submits p input {
				float: none;
			}


/* site information (footer) */
	#siteinfo {
		background: #ddd url(../images/design/bg-siteinfo.gif) top left repeat-x;
		height: 80px;
		position: relative;
		z-index: 100;
		font-size: 10px;
	}
		#siteinfo p,
		#siteinfo ul {
			border-left: 1px solid #a3a1ae;
			padding: 0 13px;
			margin: 0 0 0 155px;
			line-height: 12px;
		}
			#siteinfo ul {
				border-left: 0;
				margin-left: 156px;
			}
		
		#siteinfo a {
			color: #0600e6;
			background: url(../images/design/external.gif) right no-repeat;
			padding-right: 13px;
		}
		
	#siteinfo-legal {
		background: url(../images/design/bg-siteinfo-legal.gif) 106px 19px no-repeat;
		height: 38px;
		padding: 21px 99px 0 0;
	}
	
	#siteinfo-links li {
		float: left;
		padding: 0 10px 0 0;
	}