/* ZERO OUT GLOBAL ELEMENTS --------------------------------- */
/* --------------------------------------------------------- */

body, h1, h2, h3, h4, p, ul, li, form, img {
	margin: 0; /* Removes default the margin that some browsers add. */
	padding: 0; /* Removes default the padding that some browsers add. */
	border: 0; /* Removes any default border that might appear around elements such as images used for links. */
}

/* SET THE BODY STYLES ------------------------------------- */
/* --------------------------------------------------------- */

body  {
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif; /* Sets the default size of the text to 100% of the user's default. Also sets the font families to useon the text throughout the page. */
	background: #E0EEF5 url(../graphix/header_bkg2.gif) repeat-x; /* Sets the body background image to tile across the x-axis of the entire page. Also sets the background color. */
	color: #000;  /* Sets the default color of the text. */
/*	margin-top: 185px;  Works with fixed header height; must be tweaked for different header heights */
}

/* STYLE THE SKIP NAVIGATION LINK --------------------------- */
/* --------------------------------------------------------- */

#skip {
	position: absolute; /* Sets the div to be positioned in a precise spot in relation to its nearest postioned ancestor, or barring that, the body. Also removes it from the flow, so it will not push down the header image. */
	top: -10000px; /* Places the div off screen by giving it a negative top coordinate. */
}
	
/* STYLE THE MAIN WRAPPER DIV ------------------------------- */
/* --------------------------------------------------------- */

#container {
	width: 870px; /* Sets the layout to a minimum width that will fit into most users' browser windows. */
/*	max-width: 970px;  Sets a maximum width so that the lines in the content column do not get too long for comfortable reading. */
	padding-top: 1px; /* Added to prevent the content h2 top margin from escaping. */
	margin-bottom: 0;
} 

#containerInside {
	background: #fff url(../graphix/wrapper_bg.jpg) repeat-y right top; /* Sets the background color of the wrapper to white and tiles its background image on the y-axis. It aligns the background image to the right so that no matter how wide the content region is, the rounded corners appear on the right side of the layout. */
	margin: 0;
	float:left;
	}

	
/* STYLE THE HEADER DIV ------------------------------------ */
/* --------------------------------------------------------- */

#header {
/*	background: url(../graphix/header_bkg2.gif) repeat-x;  Tiles the body_header_bg graphic on the x-axis of the header div so that it seamlessly blends into the same image that tiles on the body. */
	/*position:absolute;
	position: fixed;  This fixes the header in the window at all times for IE7 and other browsers, but not IE6 and lower. */
	width: 870px; /* Must have a width or the positioning will cause shrink-to-fit behavior. */
	top: 0; /* This prevents top margin issues in Firefox. */
	margin:-1px 0 0 0;
} 

#header h1 {
	margin-left: -2000px;
}

/* STYLE THE SIDEBAR DIV ---------------------------------*/
/* --------------------------------------------------------- */

#sidebar {
	float: right; /* Floats the sidebar div to the right of content div. */
	width: 237px;
	margin: 0;
}

#sidebar ul {
	background: url(../graphix/ul_bg.jpg) no-repeat right bottom; /* Places a non repeating rounded corner background image at the bottom of the sidebar list that holds the site navigation. */
	padding-bottom: 20px; /* Pads the bottom of the ul so that the other content below it has breathing room. */
}

#sidebar li {
	list-style: none; /* Removes the bullet from the list items. */
	margin-bottom: 5px; /* Adds 5 pixels of space under each list item. */
	margin-left: 5px; /* Adds 10 pixels of space to the left of the links in the list items so that they align with other text in the sidebar region. */

}
#sidebar li a {
	color:#FFFFFF;
	background-color:transparent;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	line-height:32px;
	text-decoration:none;
}
#sidebar li a:hover {
	color:#FFFF00;
}
/* NAVIGATION ELEMENTS ---------------------------------*/
.nav-about {
	background:url(../graphix/nav_bkg4.jpg) no-repeat left bottom;
	padding-top:5px;
	text-indent:25px;
}
.nav-links {
	background:url(../graphix/nav_bkg7.jpg) no-repeat left bottom;
	padding-top:5px;
	text-indent:25px;
}
.nav-calendar {
	background:url(../graphix/nav_bkg2.jpg) no-repeat left bottom;
	padding-top:5px;
	text-indent:25px;
}
.nav-enn {
	background:url(../graphix/nav_bkg3.jpg) no-repeat left bottom;
	padding-top:5px;
	text-indent:25px;
}
.nav-home {
	background:url(../graphix/nav_bkg6.jpg) no-repeat left bottom;
	padding-top:5px;
	text-indent:25px;
}
.nav-mail {
	background:url(../graphix/nav_bkg5.jpg) no-repeat left bottom;
	padding-top:5px;
	text-indent:25px;
}
.nav-services {
	background:url(../graphix/nav_bkg1.jpg) no-repeat left bottom;
	padding-top:5px;
	text-indent:25px;
}
.nav-news {
	background:url(../graphix/nav_bkg8.jpg) no-repeat left bottom;
	padding-top:5px;
	text-indent:25px;
}
.nav-work {
	background:url(../graphix/nav_bkg9.jpg) no-repeat left bottom;
	padding-top:5px;
	text-indent:25px;
}
 #sidebar h3,  #sidebar h4, #sidebar p {
	color: #fff; /* Sets the text color in the sidebar to white. */
	margin: 10px 15px 7px; /* Sets the margins to 20 pixels for the right and left, 10 pixels to the top, and 7 pixels for the bottom of text in the sidebar. */	
}

#sidebar h4 {
	background: #445984 url(../graphix/info_bg.jpg) no-repeat left center; /* Places a non repeating info icon on the left, center background area of the h4 text.*/
	padding-left: 25px; /* Gives it 25 pixels of padding so that the text starts to the right of the icon. */
	font-size: 90%; /* Sets the font size to 90% of the user's browser preference. */
	font-weight: normal; /* Removes the default bolding from the h4 text. */
	margin-bottom: 3px; /* After having earlier zeroed out the h4, this adds 3 pixels of margin space to the bottom in all browsers. */
}

#sidebar h3 {
	font-weight: normal; /* Removes the default bolding from the h3 text. */
	background: #445984; /* Provides a background color that contrasts with the white text so that if the background image doesn't load, users can still read the text. */
}

#sidebar p {
	font-size: 75%; /* Sets the font size to 75% of the user's browser preference. */
	margin-right: 15px; /* Puts 15 pixels of margin space to the right of sidebar paragraphs so that it clears the white border of the graphic. */
	background: #445984; /* Provides a background color that contrasts with the white text so that if the background image doesn't load, users can still read the text. */
}

#sidebar li span {
	position: absolute; /* Puts the text within the span way off screen so that visual users to not see it. */
	top: -10000px; /* Places the div off screen by giving it a negative top coordinate. */
}



#testimonial {
	color:#fff;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:100%;
	margin-right: 5px;
}
#testimonial img{
	float:left;
	padding-right:5px;
}
#testimonial .sig{
	font-style:italic;
	}
#testimonial .sig a{
	color:#94c6dd;
	text-decoration:none;
	}
#testimonial .sig a:hover{	
	text-decoration:underline;
	}
/* STYLE THE MAINCONTENT DIV ---------------------------------*/
/* --------------------------------------------------------- */

#mainContent {
/*	margin: 0 237px 0 10px;  Sets the margins for the content region, most notably carving out a 237 pixel right margin for the sidebar. */
	width: 600px;
	margin: 0 0 0 10px;
	float:left;
} 
#mainContent a{
	color:#c40203;
	text-decoration:underline;
	}
#mainContent a:hover{
	color:#445984;
	text-decoration:none;
	}
#mainContent p {
	font-size: .8em; /* Sets the font size to 85% of the user's browser preference. */
	line-height: 1.4; /* Places space, or leading, between lines of text. Using no unit of measurement prevents line-height bugs that occur in some situations. */
	margin: 0 20px 8px 10px; /* Sets margins around paragraph text. */
}

#mainContent h3 {
	font-family:"Times New Roman", Times, serif;
	font-size: 110%; /* Sets the font size to 120% of the user's browser preference. */
	color: #333; /* Sets the color of h3 text within the mainContent div to dark gray. */
	font-weight: bold; /* Removes the default bolding from h3 text. */
	margin-bottom: 3px; /* Puts back a set amount of margin space under the h3 text in the mainContent div. */
	margin-left: 10px; /* Adds 10 pixels of left space to the mainContent h3 so that it aligns neatly with other div content. */
}

#mainContent h2 {
	font-family:"Times New Roman", Times, serif;
	font-size: 130%; /* Sets the font size to 120% of the user's browser preference. */
	color: #222; /* Sets the color of h2 text within the mainContent div to dark gray. */
	font-weight: bold; 
	background: url(../graphix/flag.gif) no-repeat left bottom; /* Adds the decorative image to the left center background of the mainContent h2 text. */
	padding-left: 20px; /* Pads the left side of the h2 by 20 pixels so that the text starts to the right of the decorative image. */
	margin: 20px 0 20px 10px; 
}
#mainContent li {
	font-size: .8em;  /* Sets the font size to 85% of the user's browser preference. */
	line-height: 1.4; /* Places space, or leading, between lines of text. Using no unit of measurement prevents line-height bugs that occur in some situations. */
	margin: 0 20px 8px 30px; /* Sets margins around paragraph text. */
}

#mainContent .more {
	padding: 0 5px 10px 10px;
}
#mainContent .x {
	font-size:1em;
	font-weight:bold;
	}

#mainContent #sea {
	font-size: 1.3em;
	color:#103a74;
	font-style:italic;
	font-weight:bold;
	margin-left:50px;
}
#mainContent #links p{
	line-height:3em;
	}
#mainContent #classes {
	margin: 0 auto;
	width: 425px;
	background-color:#FFFFCC;
	border:1px solid #333333;
}
#mainContent #classes a{
	font-size:1.1em;
	font-weight:bold;
}
/* STYLE THE FOOTER DIV ------------------------------------ */
/* --------------------------------------------------------- */

#footer_wrapper {
	/*background: url(../graphix/footer_wrapper_bg.jpg) repeat-x; Tiles the footer wrapper image across the footer region. */
	height: 77px; /* Sets the height of the footer wrapper to the same height as the footer background tile. */
	position: relative; /* Set to relative so that the absolutely positioned left and right content gets its starting point from the footer region. */
	width: 870px; /* Sets a minimum width for the layout that matches that of the container div. */
 /*	max-width: 970px; Sets a maximum width for the layout that matches that of the container div. */
	margin-bottom:0;
}

 #footer {
	padding: 50px 10px; /* Pads the footer so that the content falls in the right place within the footer background image. */
	background:url(../graphix/footer_bg.jpg) no-repeat left top; /* Places the footer image with the curved edge at the right of the footer region. */
} 

#footer_wrapper>#footer {
	margin-left: -23px;
}

/* CLASSES FOR ALIGNING ELEMENTS LEFT AND RIGHT IN A DIV -------- */
/* --------------------------------------------------------- */

.left-element {
	position: absolute; /* Takes the element out of the flow and sets it at precise coordinates in relation to the footer div. */
	left: 20px; /* Moves the left element 20 pixels from the edge of the layout. */
	width: 40%; /* Makes the left element half the width of the footer region. */
	font-size: 75%; /* Sets the font size to 75% of the user's browser preference. */
	color: #fff; /* Sets the color of footer paragraph text to white. */
   }

.right-element {
	position: absolute; /* Takes the element out of the flow and sets it at precise coordinates in relation to the footer div. */
	right: 130px; /* Moves the right element 30 pixels from the right edge of the layout. */
	width: 30%; /* Makes the left element half the width of the footer region. */
	text-align: right; /* Aligns the right-element text to the right of the footer. */
	color:#CCCCCC;
	font-size: 60%;
   }
   
#footer .right-element a {
	color:#CCCCCC; 
	text-decoration: none; 
}
#footer .right-element a:hover {
	text-decoration:underline;
	}

/* CLASSES FOR FORMS -------- */
/* --------------------------------------------------------- */

form {
	margin: 0 10px;
	}
legend {
	font-weight:bold;
	margin-bottom:5px;
	background-color: #c40203;
	color:#fff;
	}
label {
	font-size:90%;
	margin:3px;
	}
textarea {
	font-size:.9em;
	font-family:Arial, Helvetica, sans-serif;
	margin-left:5px;
	}
input {
	font-size:.9em;
	font-family:Arial, Helvetica, sans-serif;
	}
.req {
	font-size:.8em;
	color:#FF0000;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	}
/* CLASSES FOR IMAGES AND CLEARING FLOATS -------- */
/* --------------------------------------------------------- */

.fltrt { 
	float: right; /* Generic class to use for floating images to the right. */
	margin-left: 8px; /* Adds 8 pixels of space on the left side of the image so that the text doesn't touch it. */
}
.fltlft { 
	float: left; /* Generic class to use for floating images to the left. */
	margin-right: 8px; /* Adds 8 pixels of space on the right side of the image so that the text doesn't touch it. */
}

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	font-size: 1px; /* Sets the font size to 1 pixel.*/
	line-height: 0; /* Sets line-height to 0 -font and line-height; even if not explicitly on the page, they might add dimension to the clearing element rather than make it larely invisible */
	clear: both; /* Keeps floated divs from draping over objects beneath them. */
	height: 0; /* Makes sure the clearing element has no height */
}

.smaller {
	font-size:.8em;}

/* CLASSES FOR SHOPPING CART -------- */
/* --------------------------------------------------------- */

#cart table{
	margin:0 auto:
}

#cart td {
	margin:10px;
	padding-bottom:25px;
	font-size:.9em;
	font-weight:bold;
}