/* CSS Document */


/* ********** MAIN ELEMETS   ********** */

/* Main Elements */
#content {
	/* Main container box. */
	width: 956px;
	background-color: #dcdcdc;	
	clear: both;
}




/* --- Layout (Containers) Elements --- */
.lineClear {
	/* used to add spaces after floats */
	float: left;
	clear: both;
	margin: 4px 0px 0px 0px;
}

.imgLeft{
	/* Places an image to the left.  Use with text paragraphs = textRight */
	float: left;
	margin: 4px 8px 4px 8px;
	vertical-align: text-top;
	border: 1px solid #000000;
	clear: both
}

.marinesCenter{
	/* Places an image in a box and centers it so you can put a caption under it.  
	Captions need to use the <span class="caption"> attribute.  */
	margin: 4px 8px 4px 80px;
	text-align: center;
	clear: both
}

.imgCenter_Caption{
	/* Places an image in a box and centers it so you can put a caption under it.  
	Captions need to use the <span class="caption"> attribute.  */
	align: center;
	margin: 4px 8px 4px 8px;
	text-align: center;
	clear: both
}

.imgCenter_Caption_noClear{
	/* Places an image in a box and centers it so you can put a caption under it.  
	Captions need to use the <span class="caption"> attribute.  */
	width: 899px;
	margin: 0 auto;
	text-align: center;
}

.imgLeft_Caption{
	/* Places an image in a box and to the left so you can put a caption under it.  
	Captions need to use the <span class="caption"> attribute.  Use with text paragraphs = textRight */
	float: left;
	margin: 4px 8px 4px 8px;
	text-align: center;
	clear: both
}

.imgLeft_Caption_noClear {
	/* Places an image in a box and to the left so you can put a caption under it.  
	Captions need to use the <span class="caption"> attribute.  Use with text paragraphs = textRight */
	float: left;
	margin: 4px 8px 4px 8px;
	text-align: center;
}

.imgLeft_Caption_noClear_nosweat {
	/* Places an image in a box and to the left so you can put a caption under it.  
	Captions need to use the <span class="caption"> attribute.  Use with text paragraphs = textRight */
	float: left;
	margin: 4px 8px 4px 175px;
	text-align: center;
}

.imgRight {
	/* Places an image to the right.  Use with text paragraphs = textLeft */
	float: right;
	margin: 4px 8px 4px 8px;
	vertical-align: text-top;
	border: 1px solid #000000;
	text-align: center;	
	clear: both
}
.imgRight_Caption {
	/* Places an image in a box and to the right so you can put a caption under it.  
	Captions need to use the <span class="caption"> attribute.  Use with text paragraphs = textLeft */
	float: right;
	margin: 4px 8px 4px 8px;
	text-align: center;
	clear: both
}

.imgRight_Caption_noClear {
	/* Places an image in a box and to the right so you can put a caption under it.  
	Captions need to use the <span class="caption"> attribute.  Use with text paragraphs = textLeft */
	float: right;
	margin: 4px 8px 4px 8px;
	text-align: center;
}

.textLeft {
	/* this is to be used when you want the text to be left of a right aligned image/box */
	clear:left;
}

.textRight {
	/* this is to be used when you want the text to be right of a left aligned image/box */
	clear: right;
}

.textRight_testimonial {
	/* this is to be used when you want the text to be right of a left aligned image/box */
	display: block;
	float: right;
	clear: right;
	height: 176px;
	width: 660px;
}

.textRight400 {
	/* floats next to the box but to the right of the box */
	width: 400px;
	float: left;
	
}

.textLeft400 {
	/* floats next to the box but to the left of the box */
	width: 400px;
	float: right;
}

.gallery {
	/* this is for the text on the gallery page.  It will put it up against the images using .imgLeft */
	float: left;
	width: 100%;
	clear: both;
}

.personnel {
	/* this is for the text on the gallery page.  It will put it up against the images using .imgLeft */
	float: left;
	width: 100%;
	clear: both;
}

.personnelPlaceHolder{
	/* Places an image to the left.  Use with text paragraphs = textRight */
	float: left;
	margin: 4px 8px 4px 8px;
	vertical-align: text-top;
	border: 0px;
	clear: both;
	width: 150px;
	height: 75px;
}

#contact {
	/* This is for the front page "quick contact" box */
	width: 250px;
	float: right;
	margin: 4px 8px 4px 8px;
	background-color: #999999;
}

.centeredBox {
	/* Puts a 420 px box in the middle of the page but left aligns the text */
	display: block;
	clear: both;
	width: 420px;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	font-size: 12px;
}

.centeredBox li {
	border: none;
	list-style-image: url(images/li_icon.gif);
	font-size: 12px;
	font-weight: bold;
	list-style-position: outside;
	font-style: italic;
	color: #990000;
}

.centeredBox h3 {
	font-size: 12px;
	color: #333333;
	text-transform: uppercase;
}

/* --- Inline Elements --- */
p {
	/* Main text paragraph "boxes"  This simply gives the proper padding for each text "box" (technically not a "box")*/
	margin: 4px 8px 4px 8px;
}

/* General link attributes */
a:link   { color: #000099; font-style: normal; text-decoration: none; text-transform: uppercase; font-size: 9px;}
a:visited   { color: #000099; font-style: normal; text-decoration: none; text-transform: uppercase; font-size: 9px;}
a:hover   { color: #990000; font-style: normal; text-decoration: none; text-transform: uppercase; font-size: 9px;}
a:active  { color: #0000FF; font-style: normal; text-decoration: none; text-transform: uppercase; font-size: 9px;}

.quick_contact {
	/* Quick Contact text attributes */
	font-size: 14px;
	font-weight: bold;
	font-variant: small-caps;
	color: #993300;
}

.caption {
	/* To be used for captions under images (ie imgLeft_Caption) */
	font-size: 11px;
	font-style: italic;
}

.pageTitle {
	margin: 4px 8px 4px 8px;
	font-size: 16px;
	font-weight: bold;
	font-variant: normal;
	color: #0000FF;
	text-transform: uppercase;
}

.tagline {
	font-size: 14px;
	font-style: italic;
	font-weight: bold;
	color: #990000;
	text-align: center;
}

.name {
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	color: #990000;
}

.company {
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	color: #000000;
	font-style: italic;
}

.title {
	font-size: 12px;
	text-transform: uppercase;
	color: #000000;
	font-style: italic;
}







/* ********** HEADER ELEMETS ********** */

body {
	margin: 0px;
	background-color: #494949;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

#container {
	width: 956px;
	margin-right: auto;
	margin-left: auto;
	background-color: #dcdcdc;	
	border: 0px none;
}

.top-logo {
	width: 131px;
	float: left;
}
.logo {
	width: 131px;
	float: left;
	clear: both;
	border: 0px;
}

#top-extend {
	width: 825px;
	background-color: #494949;	
	height: 50px;
	line-height: 50px;
	float: right;
}

.banner {
	width: 825px;	
	float: right;
}

#nav_background {
	width: 825px;
	background-image: url(images/nav_background.gif);	
	height: 20px;
	line-height: 20px;
	float: right;
}

/* Navigation Link attributes */
a.nav:link   { display: block; float: left; margin-right: 8px; margin-left: 8px; color: #000099; text-align: center; font-style: normal; text-decoration: none; text-transform: uppercase; font-size: 9px;}
a.nav:visited   { display: block; float: left; margin-right: 8px; margin-left: 8px; color: #000099; text-align: center; font-style: normal; text-decoration: none; text-transform: uppercase; font-size: 9px;}
a.nav:hover   { display: block; float: left; margin-right: 8px; margin-left: 8px; color: #990000; text-align: center; font-style: normal; text-decoration: none; text-transform: uppercase; font-size: 9px;}
a.nav:active  { display: block; float: left; margin-right: 8px; margin-left: 8px; color: #0000FF; text-align: center; font-style: normal; text-decoration: none; text-transform: uppercase; font-size: 9px;}

#bottom-white {
	/* also includes the "Dont Sweat the Small Things" attributes */
	width: 825px;
	background-color: #dcdcdc;
	height: 44px;
	float: left;
	font-style: italic;
	text-align: right;
	vertical-align: text-top;
}

/* ********** FOOTER ELEMETS ********** */

#footer {
	width: 956px;
	height: 40px;
	line-height: 20px;
	background-image: url(images/footer.jpg);
	background-repeat: no-repeat;
	color: #CCCCCC;
	text-align: center;
	clear: both;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #000000;
	background-color: #006699;
}