body {
	text-align: left;
}

.red {
	color: #cc0000;
	font-weight: normal;
    }

#content {
	background-color: #fff;
}

/*
styles for the header section of the site 
this includes image replacement for the logo, and the rollover effect for the
homepage symbol.
*/

h1#header {
	margin: 0 0 50px 30px;
	padding: 0;
	background: url(../images/layout/logo.png) no-repeat top left;
	text-indent: -100em;
	height: 50px;
}

h1#header a {
	display: block;
	width: 320px;
	height: 35px;
}

h1#header a:hover {
	background: url(../images/layout/home.png) no-repeat top right;
}

/*
styles for the site navigation 
the base navigation is a unordered list with anchor tags inside each list item.
most of the styling is done on the anchor tags themselves because they have been
changed to block elements.
*/

ul#nav {
	padding: 0;
	margin: 0 0 50px 0;
	list-style: none;
	font-variant: small-caps;
}

ul#nav li.selected {
	display: block;
	padding: 5px 0 5px 30px;
	background-color: #fff;
	width: 331px;
	color: #003366;
}

ul#nav a {
	display: block;
	padding: 5px 0 5px 30px;
	width: 331px;
	text-decoration: none;
	color: #fff;
}

ul#nav a:hover {
	background-color: #222;
}

/*
styles for the Hcard or Vcard
which is the contact information of the lower left hand section of the layout.
*/

div.vcard {
	background-color: #222;
	width: 290px;
	padding: 10px;
	color: #fff;
	margin: 0 0 0 20px;
}

div.vcard .org, div.vcard .title { 
	font-weight: bold;
}

/*
styles for the gallery sections of the site.
all images are placed with in unorded list which are then displayed inline.
padding and margin are not changed for different image layouts just the size
of the thumbnail. 
*/

ul.galleries  li {
	margin: 0 20px ;
	padding: 0;
	display: inline;
	list-style: none;
}

ul.galleries img {
	margin: 0;
	padding: 2px;
	border: #003366 solid 1px;
}

ul.galleries li.single {
	margin: 0 -20px;
	padding: 0;
	list-style: none;
}

ul.hsygalleries {
    width: 500px;
    margin: 0 0 0 50px;
    }

ul.hsygalleries  li {
	margin: 0 10px 0 0;
	padding: 0;
	display: inline;
	list-style: none;
}

ul.hsygalleries img {
	margin: 0;
	padding: 2px;
	border: #003366 solid 1px;
}

/* 
This section is dealing with horizontal rulers.
The first rule hides all hr elements while the second rule styles the div
wrapping certain hr's on the page for the desired effect.
*/

hr {
	display: none;
}

div.hr {
	width: 560px;
	height: 10px;
	margin-bottom: 20px;
	background-color: #222;
}

/*
Special rule for swapping out the h3 header for the "hard ship yachets" logo.
*/
 
h2#hsy {
	margin: 0;
	padding: 0 0 30px 0;
	background: url(../images/layout/hsy.png) no-repeat top left;
	text-indent: -100em;
	height: 100px;
}

/*
These rules are for capitalizing the first letters in the mission statement.
The span is used for older broswers where as the :first-letter class is used
for newer generation broswers.
*/

#ms p {
	letter-spacing: 3px;
	line-height: 20px;
	font-style: italic;
	text-align: center;
}
 
#ms p:first-letter {
	font-size: 18px;
	font-weight: bold;
}
 
#ms p span.firstletter {
	font-size: 18px;
	font-weight: bold;
}
 
 /*
 These styles below are all for the various form elements including the
 directions, contact, and online application forms. 
 */

br.clear {
	clear: both;
}

#map p {
	margin: 0;
	padding: 0;
	text-align: center;
	font-weight: bold;
}

#map img {
	margin: 0;
	padding: 2px;
	border: #003366 solid 1px;
	margin: 0 0 30px 120px;
}

#contact label.long {
	width: 190px;
}

#directions label, fieldset#form label, form#app label {
	display: block;
	width: 125px;
	float: left;
}

#directions input, fieldset#form input, form#app input {
	display: block;
	width: 200px;
	float: left;
	margin-bottom: 1px;
}

fieldset#form select, form#app select {
	display: block;
	width: 200px;
	float: left;
	margin: 2px 0 3px 0;
}

form#app label.long {
	width: 190px;
}
  
form#app .radiosmall label {
	width: 50px;
    margin: 2px 0;
}

form#app .radiosmall input {
	width: 30px;
}

form#app ul.radiosmall {
    padding-left: 95px;
}

form#app .radiosmall li {
    list-style: none;
    display: inline;
}
    
hr.form {
    display: block;
}

form#app h3 
{
    clear: both; 
    text-align: center;
    }
    
.validation {
    display: block;
    float: left;
    padding-bottom: 2px 0;
    }
    
.required {
    background-color: #A6BFFF;
    color: #222;
    }
    
.question {
    font-weight: bold;
    }

 /*
These rules are for styling the desciption layout list for the each
individual project for the past projects page.
 */
 
div#jobs ul.job_details li {
	list-style: none;
}

div#jobs ul.job_details li.client {
	font-weight: bold;
}

div#jobs ul.job_details li.date {
	font-weight: bold;
	font-weight: bold;
	font-style: italic;
}
    
/* 
Hack for firefox dealing with the date on the text that's displayed after an application form has been processed.
*/
    
#applicationSuccess {
    float: left;
    }

/* 
Stylings for the link located at the bottom of the Career Opportunities page or employment.html
*/
    
a.employlink {
    color: #cc0000;
    }

a.employlink:hover {
    color: #222;
    }