body {
margin: 0;
padding: 0;
border: 0;
background-color: #CCC;
color: #666;
text-align: center; /* Hack to centre the wrapper in IE5.x pc */
font-family: Arial, Helvetica, sans-serif;
font-size: 100.01%;
min-width: 770px;
}
h4 {
font-size: 80%;
background-color: #F4B438;
margin: 4px 5px 6px 5px;
padding: 2px 0 2px 0;
text-align: center;
border: 1px solid #4F4F4F;
color: #0c457a;
}
h6 {
font-size: 90%;
font-weight: normal;
margin: 0;
padding: 0;
margin-bottom: 10px;
}
#wrapper {
margin: 5px auto;
width: 770px;
position: relative;
background-color: #FFF;
border: 1px solid #000;
text-align: left;
}
#banner {
width: 770px;
height: 77px;
border-bottom: 1px solid #4F4F4F;
}
#content {
margin: 10px 210px 20px 12px;
width: 543px;
}
#content p {
font-size: 80%;
margin: 20px 0 0 10px;
padding: 0;
color: #314048;
line-height: 130%;
}
#content ul, #content li {
font-size: 90%;
margin: 5px 0 0 20px;
padding: 0;
color: #314048;
line-height: 130%;
}
#content ul ul {
margin-left: 0px;
font-size: 100%;
*font-size: 110%;
}
#content h1 {
font-size: 180%;
margin: 10px 15px 0 10px;
padding: 0 0 3px 0;
color: #41515A;
font-weight: 500;
}
#content h2 {
font-size: 110%;
margin: 15px 15px 0 10px;
padding: 20px 0 3px 0;
color: #41515A;
font-weight: 500;
}
#content h3 {
font-size: 80%;
margin-left: 10px;
margin-bottom: -20px;
padding: 0;
color: #314048;
line-height: 130%;
}
#content table, td, th {
border-collapse: collapse;
border: 1px solid #666;
font-size: 90%;
padding: 5px;
margin-left: 75px;
}
.boxes {
background-color: #EBEDDF;
border: 1px solid #4F4F4F;
margin: 10px 5px 10px 5px;
padding-bottom: 3px;
}
.boxes h3 {
font-size: 90%;
background-color: #032775;
margin: 0;
padding: 2px 0 2px 0;
text-align: center;
border-bottom: 1px solid #4F4F4F;
color: #CCC;
}
.boxes p {
font-size: 70%;
margin: 5px 3px 3px 5px;
padding: 0;
line-height: 130%;
background-color: transparent;
}
.boxes a:link, .boxes a:visited {
background-color: #A1A1A1;
color: #000;
}
.boxes a:hover, .boxes a:focus {
background-color: #4F4F4F;
color: #fff;
text-decoration: none;
}
#navbox {
float: right;
width: 182px;/*set the width for IE 5.x*/
w\idth: 180px;/*set the width for other browsers*/
margin-right: 5px;/*set the right margin to 5 pixels for IE takes into account misplacement with a float bug*/
background-color: #FFFFFF;
margin-bottom: 20px;
margin-top: 10px;
border: 1px solid #FFF;
}
/*Fix the right margin for good browsers from the right margin hack in the above selector*/
html>body #navbox {
margin-right: 12px;/*correctly align the margin for good browsers after the hack in the rule above*/
}
#navbox h2, #volunteerbox h2 {
font-size: 95%;
background-color: #F4B438;
margin: 4px 5px 6px 5px;
padding: 2px 0 2px 0;
text-align: center;
border: 1px solid #4F4F4F;
color: #0c457a;
}
#navbox ul {
list-style-type: square;
list-style-position: inside;
padding: 5px 0 5px 10px;
margin: 0 5px 0 5px;
color: #036;
font-weight: bold;
background-color:#CBDC52;
border: 1px solid #333;
}
#navbox ul li {
padding: 0;
margin: 0;
line-height: 140%;
font-size: 85%;
color: #094778;
}
#navbox ul li ul {
padding: 0 0 0 10px;
border: none;
}
#navbox ul li ul li {
padding: 0;
margin: 0;
line-height: 120%;
font-size: 100%;
}
#navbox ul li a {
color: #0c457a;
text-decoration: none;
}
#navbox ul li a:hover, #navbox ul li a:focus {
color: #C92434;
text-decoration: underline;
}
.left {
float: left;
border: 1px solid #000;
margin: 5px 10px 0 0;
}
.right {
float: right;
border: 1px solid #000;
margin: 5px 10px 0 10px;
}
#footer {
width: 770px;
clear: right;/*ensures the footer is always placed below the right column no matter what its contents dictate*/
background-color: #4F4F4F;
font-size: 70%;
text-align: right;
margin-top: 20px;
}
/* The navbox div is outside the flow of the document and won't respect the footer;
it would, if it's content was great enough, poke through the bottom of the layout.
The clear right ensures the footer is always moved beyond the navbox div and our design
remains intact. The content div is within the flow of the document and will therefore
push the footer div down as it's content dictates. */

#footer ul {
padding: 2px 0 4px 0;
margin: 0;
}
#footer p {
padding: 3px;
margin: 0;
color: #4E4E4E;
background-color: #9F9F9F;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
#footer ul li {
padding: 4px;
margin: 0;
display: inline;
}
#footer a {
color: #fff;
text-decoration: underline;
}
#footer a:hover, #footer a:focus {
text-decoration: none;
}
#modeTest {
background-image: url(../images/test2.gif);
}
#modeDev {
background-image: url(../images/dev.gif);
}
#formcontainer {
width: 500px;
margin: 10px 5px 20px 55px;
}
#formcontainer h1 {
font-size: 120%;
margin: 10px 15px 0 0;
padding: 0 0 20px 0;
color: #333;
font-weight: 500;
}
#formcontainer p {
font-size: 80%;
margin: 0 0 20px 0;
padding: 0;
}
#formcontainer input, option {
background-color: #F2F7E7;
color: #333;
border: 1px solid #4C5854;
margin: 0;
width: 150px;
}
#formcontainer input.phoneshort {
width: 30px;
}
#formcontainer input.phonelong {
width: 45px;
}
#formcontainer input.zip {
width: 76px;
}
#formcontainer input.zip4 {
width: 55px;
}
#formcontainer input.radiobtn,
#formcontainer input.radiobtn1,
#formcontainer input.radiobtn2,
#formcontainer input.radiobtn1None,
#formcontainer input.radiobtn2None,
#formcontainer input.radioBtnJobType1None,
#formcontainer input.radioBtnJobType2None {
background-color: #fff;
margin: 0;
border: 0;
width: 20px;
}
#formcontainer textarea {
background-color: #F2F7E7;
color: #556660;
border: 1px solid #4C5854;
margin: 0 25px 0 0;
height: 200px;
}
#formcontainer input:focus, #formcontainer textarea:focus {
background-color: #F2F7E7;
color: #333;
}
.labelfloat {
float: right;
padding-top: 20px;
}
#formcontainer label {
color: #4F4F4F;
font-size: 75%;
padding-top: 5px;
display: block;
width:400px;
}
.radioLabel {
color: #4F4F4F;
font-size: 75%;
padding-top: 5px;
display: block;
width: 350px;
}
#formcontainer fieldset {
margin: 0;
border: 1px solid #5C6231;
text-align: left;
padding: 5px 5px 20px 20px;
width: 450px;
}
#formcontainer fieldset fieldset {
display: block;
border-color: #ccc;
width: 90%;
padding: 4px;
margin-top: 10px;
background-color: #f8f8f8;
}
#formcontainer legend {
font-weight: bold;
background-color:#F4B438;
border:1px solid #4F4F4F;
color:#0C457A;
padding: 2px 10px;
font-size: 90%;
}
#messagecontainer fieldset {
width: 285px;
padding: 2px 10px;
border: 1px solid #5C6231;
}
#message p {
padding 2px 10px;
font-size: 80%;
}
#formcontainer .button {
background-color: #F4B438;
color: #333333;
width: 80px;
margin-top: 20px;
}
#front {
width: 770px;
margin: 0;
text-align: center;
padding: 0;
}
#front h1 {
font-size: 120%;
margin: 10px 15px 0 0;
padding: 0 0 20px 0;
color: #41515A;
font-weight: 500;
}
#front a {
color: #798153;
background-color: #F2F7E7;
border: 1px solid #000;
padding:4px 10px 4px 10px;
text-decoration: none;
}
#front a:hover, #front a:focus {
background-color: #BDC984;
color: #F2F7E7;
}
#floatcontainer {
width: 770px;
height: 220px;
padding-top: 20px;
}
.floatboxes {
width: 160px;/*set a width for IE pc*/
w\idth: 162px;/*set the width for good browsers*/
height: 200px;
margin:  0 12px;/*set the margins for IE5.5*/
ma\rgin: 0 10px;/*set the margins for IE 6 and other browsers allows for a float bug in IE 6*/
border: 1px solid #4f4f4f;
float: left;
background-color: #F2F7E7;
overflow: auto;
}
html>body .floatboxes {
margin: 0 12px;
}
*>html .floatboxes {
padd\ing-right: 16px; /*sets some padding to the right to avoid the horizontal scroll bars that IE insists are needed*/
w\idth: 137px; /*Feeds in a corrected width for IE due to the padding above */
}
.floatboxes h3 {
text-align: center;
font-size: 90%;
padding: 0 0 3px 0;
margin: 0;
border-bottom: 1px dotted #333;
color: #003366;
font-weight: 500;
background-color: #C2D636;
/
}
/*This selector is only seen by IE Mac due to the escape characters that also block IE 5 PC -- this reverses the heading colors */
*>html .floatboxes h3 {
bac\kground-color: #F2F7E7;/*provides a background colour to match the box background for IE Mac only*/
c\olor: #4F4F4F;/*provides the contrasting text colour*/
}
.floatboxes p {
font-size:90%;
margin: 5px;
padding-bottom: 4px;
}
.floatboxes a, #content a {
color: #606D26;
}
.floatboxes a:hover, .floatboxes a:focus, #content a:hover, #content a:focus {
color: #F2F7E7;
background-color: #4f4f4f;
text-decoration: none;
}
.youarehere {
color: #DEECDD;
}
.smalltext {
font-size: 80%;
font-style: italic;
}
blockquote {
margin:0px 10px;
}
sup {
font: bold .50em Verdana, Arial, sans-serif;
}
.align {
font-size: 85%;
}
#formcontainer .fieldValueError {
background: #FFFFCC;
}
#formcontainer .fieldValueErrorPhone1 {
background: #FFFFCC;
width: 30px;
}
#formcontainer .fieldValueErrorPhone2 {
background: #FFFFCC;
width: 45px;
}
#formcontainer ul {
margin-top: 5px;
margin-bottom: -20px;
font-size: .9em;
}
#formcontainer .vollist {
margin-top: 30px;
margin-bottom: 0px;
}
#volunteerbox h3 {
font-size: .95em;
margin: 4px 5px 5px 5px;
padding: 2px 0 0 0;
text-align: left;
color: #036;
}
#volunteerbox ul {
list-style-type: none;
padding: 0 5px;
color: #FFEACA;
background-color: #FFF;
font-weight: bold;
border: none;
}
#volunteerbox ul li {
font-size: 70%;
line-height: 110%;
}
#box {
padding: 5px 0 5px 5px;
margin: 0 5px 0 5px;
border: 1px solid #4F4F4F;
background-color:#FFF;
}
#messagebox {
font-size: 80%;
color: #314048;
line-height: 130%;
width: 225px;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #5C6231;
font-weight: bold;
}
/* for pre-registration page hack */
.links a {
color: #606D26;
}
.links a:hover, .links a:focus {
color: #F2F7E7;
background-color: #4f4f4f;
text-decoration: none;
}
.note {
margin-top: 5px;
font-size: .75em;
}
.errors {
margin: 0 0 25px;
}