/*----------------------------------------------------------------------------- 
 
author:    [Brandon L. Rager] 
email:     [brandonlee@cysy.com] 
website:   [www.cysy.com]
-----------------------------------------------------------------------------*/

/* Remove padding and margin ------------------------------------------------*/ 
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, ol, ul, li, form {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	text-decoration: none;
}

ul, ol {list-style: none; padding: 0 0 1.5em 0;}

#welcome ol { list-style: decimal; list-style-position: inside; }  /* Create numbers for OL on Welcome page */

button {background: none;border: none;outline: none;border: 0;}

p {padding: 0 0 1.5em 0;}

/* remember to define focus styles! */
:focus {outline: 0;}

img {border:0;}
a img {border:0}

/* Float Definitions -----------------------------------------------------------*/

.clear {clear:both;} 

.right {float: right;} 

.left {float: left;}

.middle { float: left; margin-left: 40px; }

#board .left, #board .right, #board .middle { background: #f5f5f6; text-align: center; width: 300px; padding: 20px 0; margin-bottom: 40px; }

.marginright { clear: right; float: right; margin: 0 0 10px 10px; }
.marginright img { border: 3px solid #d2d5de; margin: 0 0 7px 0; }

.marginleft { float: left; margin: 0 10px 0 10px; }
.marginleft img { border: 3px solid #d2d5de; margin: 0 0 7px 0; }

.alignright {float: right;margin: 0 0 2px 7px;}
.alignleft {float: left;margin: 0 7px 2px 0;}

img.left, img.alignleft {float: left;margin: 0 7px 2px 0;border: 3px solid #d2d5de;}

img.right, img.alignright {float: right;margin: 0 0 2px 7px;border: 3px solid #d2d5de;}

.post img.aligncenter, .attachment img.aligncenter { margin: 0 auto; text-align: center; }

.margin_60 {
	margin-left: 60px;
	}
	
.leftwidth400 {
	float: left;
	width: 400px;
	}

.nopad {
	padding: 0px;
}
.noborder {
	border: none !important;
}

/*---------------------------------- BODY TAG ----------------------------- */

body {
	margin: 0;
	background: url(../images/layout_background.jpg) #a4a4a4 top left repeat-x;
	color: #626262;
	font-family: helvetica, arial, sans-serif;
	font-size: .9em;
	line-height: 1.2em;
}

a { 
	outline: none;
	}

a:link {
	color: #446ea0;
	font-weight: bold;
	text-decoration:underline;
}
		a:hover {
			color: #b05e28;
		}
		
h1 {
	font-size: 24px;
	line-height: 1.1em;
	margin-bottom: 15px;
	color: #446ea0;
	text-transform: uppercase;
}
		h1.logo {
			position: absolute;
			top: 2px;
			margin-left: 8px;
			height: 203px;
			width: 203px;
			background: url(../images/graphic_logo.png) top left no-repeat;
			z-index: 9999;
		}
				h1.logo a {
					display: block;
					width: 203px;
					height: 203px;
					text-indent: -9999px;
				}

h2 {
	font-size: 19px;
	line-height: 1.1em;
	margin-bottom: 15px;
	color: #446ea0;
	text-transform: uppercase;
}


/**** CONTENT AREA ****/

.container {
	width: 1000px;
	margin: 0 auto;
}
		.main {
			position:absolute;
			width: 1000px;
			background: #fff;
			top: 60px;
			padding-top: 430px;
			}

	/* This targets "main" on the homepage so it is far enough down to accommodate the larger image and heading. */
	
		#home .main {
			top: 60px;
			padding-top: 636px;
		}
	/* End homepage targeting */
			
		.content {
			padding: 0 10px;
			width: 980px;
		}
				.textarea_605 {
					width: 605px;
					float: left;
					margin-left: 20px;
				}
				
				.sidebar {
					float: right;
					width: 326px;
				}
						h2.sidebar_header {
							height: 50px;
							text-align: center;
							background: #d1d5de;
							color: #446ea0;
							font-size: 20px;
							line-height: 50px;
							margin-bottom: 3px;
						}
								h2.urgent {
									color: #b05e28;
								}
						.sidebar .block {
							padding: 20px 25px 5px 25px;
							background: #efefef;
							margin-bottom: 3px;
						}
						
						.sidebar .marsec {
							padding: 20px 25px 20px 25px;
							background: #d1d5de;
							margin-bottom: 3px;
							text-align:center;
						}
						
						
						/* Announcements */
						
								.width_275 {
									height: 150px;
									width: 275px;
									}
						
								#news { 
									background: #EFEFEF;
									width: 275px;
									}
									
								#news br {
									margin-bottom: 10px;
									}
								
								h5 {
									color: #446EA0;
									font-weight: bold;
									}
									
								.small { 
									font-size: .8em;
									margin-top: 500px;
								}
								
								#datacontainer {
									background: #EFEFEF;
									}
						
		.footer {
			background: #a4a4a4;
			font-size: 12px;
			color: #e4e4e4;
			display: block;
			width: 1000px;
			text-align:center;
			padding:10px 0;
		}
				.footer a {
					color: #e4e4e4;
					text-decoration:none;
					font-weight: normal;
				}
						.footer a:hover {
							color: #446ea0;
						}
		
/**** NAVIGATION AREA ****/

.navigation {
	margin-left: 10px;
	z-index: 9999;
	background: url(../images/layout_navbg.jpg) top left repeat-x;
	width: 980px;
	height: 42px;
	font-size: 18px;
	font-weight: bold;
	line-height: 42px;
	position: absolute;
	top: 318px;
	margin-left: 10px;
	z-index: 9999;
	}

/* This targets the navigation on the homepage so that it is far enough down to allow for the larger image and heading. */

#home .navigation {
	top: 521px;
}

/* End homepage targeting */

		.navigation li {
			float: left;
			display: inline;
			border-left: 1px solid #fff;
			position: relative;
		}
				.navigation li a {
					display: block;
					padding: 0 27px;
					color: #fff;
					text-transform:uppercase;
					text-decoration: none;
					float: left;
				}
						.navigation li:first-child a {
							border: none;
						}
						.navigation li a:hover {
							opacity:.70;
							filter: alpha(opacity=70);
							-moz-opacity: 0.7;
						}
						
						
/**** DROPDOWNS IN NAVIGATION ****/

							.navigation li ul {
								display: none;
								height: auto;
								position: absolute;
								width: 300px;
								}
								
							.navigation li:hover > ul {
								display: block;
								position: absolute;
								top: 42px;
								width: 250px;
								}
																						
							.navigation ul li a { 
								background: url(../images/layout_navbg.jpg) top left repeat-x;
								display: block;
								height: 42px;
								line-height: 42px;
								width: 250px;
								}
							
							.navigation li li a:hover {
								color: #CCCCCC;
								opacity: 1;
								filter: alpha(opacity=100);
								-moz-opacity: 1.0;
								}

						
/**** FEATURE BOXES ****/

.features {
	position: absolute;
	top: 363px;
	margin-left: 10px;
	height: 100px;
	width: 980px;
	background: #446ea0;
	padding: 0;
	}

/* This targets the features on the homepage so that they are down far enough to accommodate the larger image and heading. */

#home .features {
	top: 566px;
	}

/* End homepage targeting */

		.features li {
			display: inline;
			margin: 0;padding: 0;
		}
				.features li a {
					display: block;
					width: 197px;
					height: 84px;
					background: url() top left no-repeat;
					color: #e5e5e5;
					padding: 16px 10px 0 119px;
					text-decoration:none;
					font-size: 13px;
					line-height: 18px;
					position:relative;
					float: left;
					overflow:hidden;
					border-left: 1px solid #fff;
					font-weight: normal;
				}
						.features li a span {
							display: block;
							color: #f6f6f6;
							font-size: 23px;
							line-height: 26px;
							margin-bottom: 5px;
							font-weight: bold;
						}
						
						.features li.tariff a { background-image: url(../images/graphic_feature_tariff.jpg); border-left: none; }
						.features li.partners a { background-image: url(../images/graphic_feature_partners.jpg); }
						.features li.locations a { background-image: url(../images/graphic_feature_location.jpg); }
						
						.features li a:hover {
							opacity:.70;
							filter: alpha(opacity=70);
							-moz-opacity: 0.7;
						}

/**** FEATURE BOX - BERTH APPLICATION (BOTTOM OF HOMEPAGE) *****/

ul.feature_berthapp {
	background: #446EA0;
	margin: 0;
	padding: 0;
	}

.feature_berthapp li a {
	background: url(../images/graphic_feature_berthapp.jpg) top left no-repeat;
	color: #e5e5e5;
	display: block;
	padding: 16px 10px 0 119px;
	height: 84px;
	width: 476px;
	line-height: 18px;
	overflow: hidden;
	position:relative;
	text-decoration: none;
	}

				.feature_berthapp li a span {
					display: block;
					color: #f6f6f6;
					font-size: 23px;
					line-height: 26px;
					margin-bottom: 5px;
					font-weight: bold;
					text-transform: uppercase;
					}
					
				.feature_berthapp li a:hover {
					opacity:.70;
					filter: alpha(opacity=70);
					-moz-opacity: 0.7;
					}


/**** CONTACT INFO ****/

.contact_info {
	margin:0;
	padding:0;
	text-transform: uppercase;
	font-weight: bold;
	position: absolute;
	top: 81px;
	margin-right: 15px;
	width: 985px;
}
		.contact_info span {
			margin:0;
			padding:0;
			display: inline-block;
			float: right;
			color: #a4a4a4;
			font-size: 30px;
			height: 33px;
			*line-height: normal;
		}
		.contact_info a {
			margin:0;
			padding:0;
			display:block;
			float: right;
			font-size: 20px;
			*line-height: 28px;
			*height: 33px;
			padding: 2px 0 0 0;
			color: #6c86a5;
			text-decoration:none;
		}
				.contact_info a:hover {
					color: #b05e28;
				}

/**** IMAGE AREA ****/

.image {
	position: absolute;
	top: 122px;
	margin-left: 10px;
	width: 980px;
	height: 185px;
	}

/* This targets the image on the homepage so that it is the correct height. */

#home .image {
	height: 388px;
}

/* End homepage targeting */

		.image .image_header {
			width: 980px;
			position: absolute;
			z-index: 9993;
			height: 105px;
			display: block;
			color: #fff;
			font-size: 85px;
			line-height: 105px;
			text-transform: uppercase;
			letter-spacing: -.05em;
			text-align: center;
			padding-bottom: 10px;
			margin-top: 273px;
		}
		.image .image_header_bg {
			width: 980px;
			position: absolute;
			z-index: 9992;
			opacity:.70;
			filter: alpha(opacity=70);
			-moz-opacity: 0.7;
			height: 115px;
			display: block;
			background: #001630;
			margin-top: 273px;
		}
		
		/**** TARGET SAFARI 3 ****/
		@media screen and (-webkit-min-device-pixel-ratio:0){
		.image .image_header {letter-spacing: -.1em;}
		}
		
		.image img {
			position: absolute;
			z-index: 9991;
		}
		
.weather {
	position: absolute;
	top: 0px;
	width: 1000px;
	color: #fff;
}
		.weather .temp, .weather .icon, .weather .description {
			display: block;
			float: right;
			margin: 0;
			padding: 0;
		}
		
		.weather .temp {
			width: 100px;
			margin-top: 15px;
		}
				.weather .temp strong {
					display: block;
					font-size: 33px;
					line-height: 33px;
					float: right;
				}
				.weather .temp span {
					display: block;
					font-size: 21px;
					line-height: 33px;
					float: right;
				}
				
		.weather .description {
			margin-top: 13px;
		}
		

/**** LIST-STYLE: SQUARE + GRAY BG DIV ***/

.gray {
	background: #EFEFEF;
	margin-bottom: 20px;
	overflow: auto;
	}

.square_list {
	float: left;
	width: 480px;
	}
	
.square_list li {
	list-style-type: square;
	list-style-position: inside;
	padding: 10px;
	}
	
	
/**** LIST-STYLE: BLUE ARROW ****/ 	

#links .content ul li {
	list-style-image: url(../images/graphic_arrow.png);
	list-style-position: inside;
	margin: 5px 5px;
	}
	
/**** LIST-STYLE: GRAY ARROW *****/

#location .content ul li, #mission .content ul li {
	list-style-image: url(../images/graphic_arrow_gray.png);
	list-style-position: inside;
	margin: 5px 0;
	}
	
/**** VALUED CLIENTS ON WELCOME + HISTORY ******/

.clients li {
	float: left;
	display: block;
	height: 95px;
	line-height: 95px;
	margin: 0 5px 0 0;
	padding: 0;
	}
		.clients li img {
				bottom: 0;
				}
		
/**** PARTNER RESULTS *****/

.member {
	border: 3px solid #d1d5de;
	margin-bottom: 20px;
	}

h3 {
	height: 50px;
	text-align: center;
	background: #d1d5de;
	color: #446ea0;
	padding-top: 30px;
	font-size: 18px;
	margin-bottom: 3px;
	text-transform: uppercase;
	width: 300px;
	}
	
		h3 span { 	
		background: #d1d5de;
		display: block;
		height: 20px; 
		font-size: 13px; 
		margin-bottom: 10px;
		}

	
/**** PARTNER RESULTS - DETAIL PAGES *****/

.partnerdetail h4 {
	height: 50px;
	text-align: left;
	background: url(../images/layout_partnernamebg.jpg) top left repeat-x;
	color: #446ea0;
	font-size: 20px;
	line-height: 50px;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	width: 975px;
	}

	.partnerdetail dl {
		background: #3e6695;
		border-bottom: 1px solid #45709F;
		color: #fff;
		height: 40px;
		line-height: 40px;
		margin: 0;
		padding: 0;
		width: 975px;
		}
	
		.partnerdetail dt, .partnerdetail dd { 
			display: block;
			float: left;
			margin: 0;
			padding: 0;
			}
	
		.partnerdetail dt {
			font-weight: bold;
			margin-right: 5px;
			}	
	
		.partnerdetail dd {
			margin-right: 30px;
			}

.partnerdetail p {
	background: #EFEFEF;
	color: #666;
	padding: 12px 15px;
	width: 945px;
	}

		
/**** PARTNERS LANDING PAGE: DROPDOWN *****/

/* Div that floats dropdown to right of heading */

.sort_by {
	float: left;
	margin-left: 20px;
	}
	
/**** PARTNERS LANDING PAGE: PARTNER DIVS *****/

.partner_285 {
	background: #3e5877;
	margin: 0 10px 10px 0;
	padding: 0;
	min-height: 125px;
	position: relative;
	width: 320px;
	}
	
/* Remove margin-right property from the last dl on the right */

	.last {
		margin-right: 0;
		}
	
/* Partner Name */

	.partner_285 dt {
		background: #7191b7;
		border-bottom: 1px solid #2c3d50;
		color: #fff;
		font-size: 14px;
		font-weight: bold;
		height: 38px;
		line-height: 38px;
		margin: 0 0 5px 0;
		padding-left: 114px;
		text-transform: uppercase;
		}
	
/* Content: excerpt of partner description */
	
	.partner_285 dd {
		color: #d0dae6;
		padding-left: 75px;
		width: 200px;
		}
	
	#partners dd p {
		line-height: 1.5;
		margin: 0;
		padding: 0;
		}
	
/* Image properties */	
	
	.partner_285 img {
		border: 3px solid #fff;
		position: absolute;
		top: 10px;
		left: 10px;
		margin-right: 10px;
		}
		
/* Link styling for "More >" */
	
	a.more { 
		background: #314762;
		color: #fff;
		display: block;
		float: right;
		padding: 4px 8px;
		margin-bottom: 5px;
		text-align: center;
		text-transform: uppercase;
		width: 60px;
		font-weight: normal;
		text-decoration: none;
		}
	
	a.more:visited {
		color: #f1f1f3;
		}	
		
	a.more:hover {
		background: #2a3d54;
		color: #fff;
		font-weight: bold;
		}
	
	a.more:active {
		background: #2a3d54;
		color: #d0dae6;
		text-decoration: none;
		}
	
	
/***** FORM STYLING - ALL *****/

input, textarea { 
	color: #666;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	padding: 0;
	}
	
	
/***** FORM STYLING FOR BERTH APPLICATION *****/

.apform fieldset {
	background: #f6f6f7;
	border: 1px solid #446EA0;
	margin-bottom: 20px;
	width: 605px;
	}
	
	.apform legend {
		background: #446EA0;
		color: #fff;
		font-size: 18px;
		font-weight: bold;
		padding: 5px;
		}
	
	.apformwrap {
		height: 1%;
		width: 450px;
		clear: left;
		margin: 0;
		padding: 5px 0 8px 0;
		padding-left: 160px;
		}
	
	.apform label {
		float: left;
		margin-left: -160px;
		width: 155px;
		}
		
	.apform input[type="text"] { /*width of text boxes */
		width: 180px;
		}
		
	.apform textarea {
		width: 180px;
		height: 50px;
		}
	
/* For paragraphs within the form */
	
	.apform p {
		float: none;
		font-weight: bold;
		text-align: left;
		margin: 0 0 0 -160px;
		padding: 0;
		width: 605px;
		}
		
/* This gives a 1px solid gray bottom border to sections you want to define */	
		
	.grayborderbottom {
		border-bottom: 1px solid #c0c0c0;
		padding-bottom: 15px;
		margin-bottom: 10px;
		width: 190px;
		}


/**** CONTACTS ON CONTACT PAGE ****/

dl.contact {
	float: left;
	width: 300px;
	margin: 20px 0;
	padding: 0;
	}
	
	dl.contact dt {
		font-weight: bold;
		}
		
		dl.contact dd.name {
			border-bottom: 1px solid #c3cdf8;
			margin: 0 0 2px 0;
			padding: 0 0 2px 0;
			width: 90%;
			}
	
			dl.contact dd.email {
				background: url(../images/graphic_envelope.gif) center left no-repeat;
				height: 16px;
				padding-left: 20px; 
				margin: 0;
				}
				
					dl.contact dd.phone {
						background: url(../images/graphic_phone.gif) center left no-repeat;
						height: 16px;
						padding-left: 20px;
						margin: 0;
						}

/**** CONTACT FORM *****/

#contact fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	}

	#contact legend {
		color: #62778F;
		font-size: 15px;
		font-weight: bold;
		margin-bottom: 15px;
		}	
		
		#contact label {
			display: block;
			}

			#contact input {
				width: 180px;
				margin-bottom: 15px;
				}
	
				#contact textarea {
					display: block;
					margin-bottom: 15px;
					}
					
/**** SUBMIT AND RESET CLASSES (FOR BOTH FORMS) *****/
	
	.submit {
		background: #446EA0;
		border: 0;
		color: #fff;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 15px;
		font-weight: bold;
		padding: 8px;
		width: 90px;
		}
	
	.reset {
		background: #999999;
		border: 0;
		color: #fff;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 15px;
		font-weight: bold;
		padding: 8px;
		width: 90px;
		}
	
/***** ACROBAT READER LOGO: HAS TO BE 17PX AWAY FROM OTHER GRAPHIC + TEXTUAL ELEMENTS ****/

.acrobat {
	background: url(../images/graphic_pdf.gif) top left no-repeat;
	height: 17px;
	line-height: 17px;
	margin: 17px 0;
	padding: 0 0 0 34px;
	} 

.partnerdetail .acrobat {
	background: #E0E3EF url(../images/graphic_pdf.gif) 15px 7px no-repeat;
	font-weight: bold;
	height: 34px;
	line-height: 34px;
	padding-left: 49px;
	width: 926px;
	margin: 0 0 20px 0;
	}

/***** PHOTO GALLERY: iFRAME ******/

iframe { 
	height: 500px;
	margin-bottom: 20px;
	width: 980px;
	}
	
/***** SERVICE PROVIDERS, LOCATION, MISSION, OVERVIEW PAGE HEADINGS *****/

#service_providers .content h4, #location .content h4, #mission .content h4, #overview .content h4 {
	color: #446ea0;
	font-size: 16px;
	margin: 10px 0 5px 0;
	padding: 10px 0;
	text-transform: uppercase;
	}
	
#location .content h5, #mission .content h5 { 
	font-size: 14px; 
	}
	
#location .content h4 {
	border-top: 1px solid #446ea0;
	width: 65%;
	}
	
/***** BOARD MEMBERS *****/

#board h3 {
	float: left;
	margin: 0 10px 10px 0;
	}
	
#board .left p, #board .right p, #board .middle p {
	text-align: left;
	padding: 10px;
	}