* { padding: 0; margin: 0; }

body {
 font-family: Verdana, Arial, sans-serif;
 font-size: 14px; 
 color: #003366;
 background: #EEE;
}

p {
 margin: 0;
 padding: 10px;
}

img {
border: 0;
}

a {
 text-decoration: underline;
 color: #0171AF;
}

#wrapper {
 margin: 5px auto;
 width: 800px;
}

#header {
 height: 95px;
 background: #EEE url(refinanceimages/header-shadow.gif) no-repeat; 
 border: 0px solid black;
}

#header h1 {
 padding: 30px 0 0 30px;
 font-size: 34px;
 font-style: italic;
 color: #CC0000;
 text-align: center;
}

#tagline {
 font-size: 20px;
 font-weight: bold;
 color: #333;
 text-align: center;
}


ul#checklist {
 list-style-type: none;
 padding: 15px 10px 15px 10px;
 text-align: left;
}

li.checklist {
 background: url(refinanceimages/arrow.gif) no-repeat 200px; /* adjust list item px image spacing if needed */
 margin: 0px;
 padding: 4px;
 font-size: 14px;
}

#content {
 padding: 20px;
 background: #FFF url(refinanceimages/content-shadow.gif) repeat-y;
}

#photo-box {
 width: auto;
 /*height: 250px;*/
 height: 101px; 
 background: #FFF url(refinanceimages/masthead.jpg);
 border: 3px solid #CCC;
}

#photo-box h2 {
 font-size: 26px;
 font-weight: 200;
 color: #FFF;
}

#photo-text {
 float: right;
 padding: 20px 20px 0 0;
 color: #FFF;
}

#form-box {
 float: right;
 margin: 50px 92px 0 200px;
 color: #333;
}

* html #form-box {
  margin: 50px 46px 0 200px;
}

input.zipcode {
 padding-top: 4px;
 padding-left: 10px;
 width: 170px;
 height: 24px;
 font-size: 18px;
 vertical-align: middle;
 border: 3px solid #3366cc;
 -moz-border-radius-bottomleft: 4px;
 -moz-border-radius-bottomright: 4px;
 -moz-border-radius-topleft: 4px;
 -moz-border-radius-topright: 4px;
} 

input.button {
 margin-top: 6px;
 margin-bottom: 6px;
 width: 186px;
 height: 28px;
 font-weight: bold;
 color: #333;
} 

.main-text {
 padding: 10px;
}

.main-text h2 {
 padding: 16px 0 10px 0;
 font-size: 18px;
 font-weight: bold;
 text-align: center;
}

p.button {
 padding: 20px 10px 20px 10px;
 text-align: center;
}

#resource-box {
 margin: 20px auto;
 padding-bottom: 6px;
 width: 430px;
 background: #FFF;
 border: 2px solid #CCC;
}

#resource-title {
 padding: 10px;
 font-size: 18px;
 font-weight: bold;
 color: #333;
 text-align: center;
 background: #FFF;
}

ul#resource-list {
 padding: 0;
 list-style-type: none;
 text-align: center;
}

a.resource-link {
 display: block;
 padding: 6px;
 color: #333;
 background: #FFF;
}

* html ul#resource-list li {
 display: inline;
 height: 1%;
}

#bottom {
 padding: 10px;
 background: #EEE url(refinanceimages/bottom-shadow.gif) no-repeat;
}

#footer {
 padding-bottom: 10px;
 text-align: center;
}









form * {margin:0;padding:0; background-color: #FEF7D6;} /* Standard margin and padding reset, normally done on the body */

legend {
	color:#000; /* IE styles legends with blue text by default */
	*margin-left:-7px; /* A hack that only ie reads to position the legend in the same place cross browser */
}
fieldset {
	border:1px solid #dedede; /* Default fieldset borders vary cross browser, so make them the same */
	padding: 3px;
}
fieldset div {
	overflow:hidden; /* Contain the floating elements */
	display:inline-block; /* Give layout in ie to contain float */
}
fieldset div {display:block;} /* Reset element back to block leaving layout in ie */
label {
	float:left; /* Take out of flow so the input starts at the same height */
	width:10em; /* Set a width so the inputs line up */
	font-weight: bold;
}

.radio {
	position:relative; /* Position so children are relative to this container */
	border:0; /* Remove the border */
}
.radio span {
	position:absolute; /* Take the content of the legend out of flow */
	top:0;left:0; /* and position it to the top left of the fieldset */
	width:5em; /* Same width as labels */
}
.radio ul {
	margin-left:5em; /* Since the legend is out of flow. set margin, so inputs are inline */
	list-style:none; /* Dont want bullets */
}
.radio li {
	position:relative; /* Fix a bug in IE zoom functionality */
	display:inline; /* Display the inputs in a line */
	white-space:nowrap; /* We dont want a label to wrap between the input and label */
}
.radio label, .radio input {
	width:auto; /* Reset the width on the label from the 5em, set earlier */
	float:none; /* Reset the float from left on the label, set earlier */
	vertical-align:middle; /* Align the radio buttons with the inputs */
}