/* good refererence for CSS: http://24ways.org/2006/compose-to-a-vertical-rhythm */


/* This rule resets a core set of elements so that they will appear consistent across browsers. Without this rule, content styled with an h1 tag, for example, would appear in different places in Firefox and Internet Explorer because each browser has a different top margin default value. By resetting these values to 0, the elements will initially be rendered in an identical fashion and their properties can be easily defined by the designer in any subsequent rule. */
html, body, div, table, tr, td, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, pre, form, fieldset, p, blockquote,th {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
}
/* The body is the outermost layout component and contains the visible page content. Setting properties for the body element will help to create consistent styling of the page content and more manageable CSS. Besides using the body element to set global properties, it is common to use the body element to set the background color of the page and create a centered container for the page content to display. */
body {
	color: #333333;
	font-family: Arial, Helvetica, sans-serif;
    font-size: 75%;
	margin: 0 0 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
	padding: 0 0 0 0; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
	text-align: left;
	background-color: #333333;
	background-repeat: repeat-x;
	background-image: url(../images/backgrd_repeat2.jpg);
}
/*  By way of explanation, the first font-size (in the body style above) reduces the body text from the 16px default (common to most browsers and OS set-ups) down to the 12px we require. This rule is primarily there for Internet Explorer 6 and below on Windows: the percentage value means that the text will scale predictably should a user bump the text size up or down.

The second font-size (in the "html>body" style below) sets the text size specifically and is ignored by IE6, but used by Firefox, Safari, IE7, Opera and other modern browsers which allow users to resize text sized in pixels. */
html>body {
	font-size: 12px; 
}
/* Spacing between paragraphs

With our rhythmic unit set at 18px (font size 12px + 6px = 18px line height--or 1em + .5em = 1.5em) we need to ensure that it is maintained throughout the body copy. A common place to lose the rhythm is the gaps set between margins. The default treatment by web browsers of paragraphs is to insert a top- and bottom-margin of 1em. In our case this would give a spacing between the paragraphs of 12px and hence throw the text out of rhythm. If the rhythm of the page is to be maintained, the spacing of paragraphs should be related to the basic line height unit. This is achieved simply by setting top- and bottom-margins equal to the line height.

In order that typographic integrity is maintained when text is resized by the user we must use ems for all our vertical measurements, including line-height, padding and margins.  */
p {
	font-size:1em;
	margin-top: 0;
	margin-bottom: .7em;
	line-height: 1.7em;
}
/* h1 headings are set to 18px, therefore the line-height has been set to 1em, as has the margin. */
h1 {
	font-size:1.5em;
	line-height: 1.25em;
	margin-top: 0;
	margin-bottom: .5em;
}
/* h2 subheadings are set to 14px. In order that the height of each line is 18px, the line-height should be set to 18 ÷ 14 = 1.286. Similarly the margins above and below the heading must be adjusted to fit. The temptation is to set heading margins to a simple 1em, but in order to maintain the rhythm, the top and bottom margins should be set at 1.286em so that the spacing is equal to the full 18px unit. */
h2 {
	font-size: 1.1667em;
	line-height: 1.286em;
}
/* h3 subheadings are set to 13px. */
h3 {
	font-size: .8125em;
	line-height: 1.3846em;
}
.sidenote {
	font-size:0.8333em;
	line-height:1.8em; 
}








/*************************************************************

/* header container styles BEGIN 

*************************************************************/
/* This style creates the outside container of the 100% elastic width header which expands to fit any size browser window. */
#fullWidthHeader {
	font-size: 18px;
	font-weight: bold;
	line-height: 15px;
	border-bottom-style: none;
	border-top-style: solid;
	border-right-style: none;
	border-left-style: none;
	margin: 0px;
	border-top-width: 12px;
	border-top-color: #333333;
	border-right-color: #333333;
	border-bottom-color: #333333;
	border-left-color: #333333;
	padding: 0px;
}
/* This style is applied to the header layout table. */
#fullWidthHeader  #logoHeader {
	color: #333333;
	font-size: 14px;
	font-weight: bold;
	line-height: 14px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #808080;
	border-left-color: #808080;
	width: 899px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-repeat: no-repeat;
	background-color: #FFFFFF;
}
/* This style is applied to h1 tags in the header layout table. */
#fullWidthHeader  #logoHeader h1 {
	font-size: 16px;
	font-weight: normal;
	text-align: right;
	line-height: 20px;
}
/* This style is applied to p tags in the header layout table. */
#fullWidthHeader  #logoHeader p {
	font-size: 14px;
	font-weight: normal;
	text-align: right;
	line-height: 18px;
}
/* This style is applied to the company name h1 tag in the header layout table to make it stand out larger than other h1 tags in the header. */
.Xlarge_h1 {
	font-size: 20px;
	font-weight: bold;
}
/*************************************************************

/* header container styles END 

*************************************************************/












/* Sets the style for unvisited links. */
a,  a:link {
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: underline;
	padding: 4px;
	line-height: 18px;
}
/* Sets the style for visited links. */
a:visited {
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: underline;
	padding: 4px;
	line-height: 18px;
}
/* Sets the style for links on mouseover. */
a:hover {
	color: #FFFFFF;
	text-decoration: none;
	background-color: #666666;
	padding: 4px;
	line-height: 18px;
}
/* Sets the style for a link that has focus. */
a:focus {
	color: #FFFFFF;
	background-color: #666666;
	padding: 4px;
	line-height: 18px;
}
/* Sets the style for a link that is being activated/clicked. */
a:active {
	color: #FFFFFF;
	background-color: #666666;
	padding: 4px;
	line-height: 18px;
}









/*************************************************************

/* main navigation container styles BEGIN 

*************************************************************/
/* This style filles in the gap with background color at the right end of the navigation bar. */
#fullWidthHeader .mainNav {
	height: 41px;
	width: 900px;
	background-color: #333333;
}
/*************************************************************

/* main navigation container styles END 

*************************************************************/














/*************************************************************

/* #footer LINK styles BEGIN 

*************************************************************/
/* Sets the style for unvisited links. */
#outerWrapper #footer a,  a:link {
	color: #FFFFFF;
	font-weight: normal;
	text-decoration: underline;
	padding: 4px;
	line-height: 18px;
}
/* Sets the style for visited links. */
#outerWrapper #footer a:visited {
	color: #FFFFFF;
	font-weight: normal;
	text-decoration: underline;
	padding: 4px;
	line-height: 18px;
}
/* Sets the style for links on mouseover. */
#outerWrapper #footer a:hover {
	color: #FFFFFF;
	text-decoration: none;
	background-color: #808080;
	padding: 4px;
	line-height: 18px;
}
/* Sets the style for a link that has focus. */
#outerWrapper #footer a:focus {
	color: #FFFFFF;
	background-color: #808080;
	padding: 4px;
	line-height: 18px;
}
/* Sets the style for a link that is being activated/clicked. */
#outerWrapper #footer a:active {
	color: #FFFFFF;
	background-color: #808080;
	padding: 4px;
	line-height: 18px;
}
/*************************************************************

/* #footer LINK styles END

*************************************************************/










/* This is a container for the page content. It is common to use the container to constrain the width of the page content and allow for browser chrome to avoid the need for horizontal scrolling. For fixed layouts you may specify a container width and use auto for the left and right margin to center the container on the page. IE 5 browser require the use of text-align: center defined by the body element to center the container. For liquid layouts you may simply set the left and right margins to center the container on the page. */
#outerWrapper {
	text-align: left; /* Redefines the text alignment defined by the body element. */
	width: 900px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-right-style: none;
	border-left-style: none;
	border-top-style: none;
	border-bottom-style: none;
}
/* The contentWrapper conains the main content areas helow the header, but above the footer. */
#outerWrapper #contentWrapper {
	overflow: hidden;
	border-right-style: none;
	border-left-style: solid;
	border-bottom-style: none;
	border-left-width: 1px;
	border-top-style: none;
	border-left-color: #666666;
}
#outerWrapper #contentWrapper #sidebar {
	padding: 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
	width: 318px;
}









/*************************************************************

/* sidebar and main content area styles BEGIN 

*************************************************************/
/* This style is used on the home page right column sidebar. */
#sidebar_right {
	text-align: left;
	vertical-align: top;
	width: 280px;
	background-color: #CCCCCC;
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 20px;
}
/* This style is used on the project slideshow pages left column sidebar. */
#sidebar_left_slideshowRight {
	text-align: left;
	vertical-align: top;
	width: 280px;
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 20px;
	color: #FFFFFF;
	background-color: #666666;
}
/* This style is used on the contact page left column sidebar. */
#sidebar_left {
	width: 320px;
}
/* This style is used on the affiliatations.php page left column sidebar. */
#sidebar_left_affiliates {
	width: 320px;
	background-image: url(../images/sidebar_pic.jpg);
	background-repeat: no-repeat;
	background-color: #333333;
	height: 764px;
}

/* This style is used on the project slideshow pages. */
#slideshow_right {
	text-align: left;
	vertical-align: top;
	width: 580px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	background-image: url(../images/slideshow_bckgrd_gradient.jpg);
	background-repeat: repeat-y;
	margin: 0px;
	padding: 0px;
}


/* This style is used on the contact page right column main content area. */
#main_content_right {
	text-align: left;
	vertical-align: top;
	width: 540px;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	background-repeat: repeat-y;
	color: #FFFFFF;
}
.affiliate {
	height: 50px;
	width: 210px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 20px;
	padding-left: 20px;
	border: 1px solid #FFFFFF;
}
.affiliate_heading {
	padding-left: 30px;
}
.affiliations_table {
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
.content_gradient1 {
	background-image: url(../images/content_gradient.jpg);
	background-repeat: repeat-y;
	color: #333333;
}

/*************************************************************

/* sidebar and main content area styles END 

*************************************************************/







/* This style applies padding to the flash logo in the header. */
#fullWidthHeader #logoHeader .leftPad {
	padding-left: 60px;
	padding-top: 15px;
	padding-right: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-bottom: 20px;
	width: 439px;
}
/* This style is used to apply padding to the section of right aligned text with company name, phone number and address in the home page header section. */
#fullWidthHeader #logoHeader .header {
	padding-top: 30px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 10px;
	margin: 0px;
}



/* These are the footer styles. */
#outerWrapper #footer {
	width: 900px;
	color: #FFFFFF;
	padding-top: 15px;
	margin: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}




/*************************************************************

/* project.php styles BEGIN 

*************************************************************/
#projects_gallery_background {
	background-color: #CCCCCC;
	margin: 0px;
}

#projects_gallery_background a:hover {
	background-color: ;
	background-color: #CCCCCC;
}
#projects_gallery_background a:focus {
	background-color: ;
	background-color: #CCCCCC;
}
#projects_gallery_background a:active {
	background-color: ;
	background-color: #CCCCCC;
}

.proj_thumb {
	padding-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 20px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 190px;
}

.prog_text {
	color: #333333;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 8px;
	font-size: 1.15em;
	font-weight: normal;
	width: 169px;
}
#projects_head {
	color: #FFFFFF;
	padding-top: 25px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 60px;
	background-color: #AF292E;
	background-image: url(../images/projgallery_mainBckgrdRepeat.jpg);
	background-repeat: repeat-y;
	margin: 0px;
}
.project_type {
	background-color: #333333;
	color: #FFFFFF;
	font-weight: normal;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	width: 161px;
	text-align: center;
	padding-top: 7px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 3px;
}
/*************************************************************

/* project.php styles END 

*************************************************************/





/*************************************************************

/* contact page styles BEGIN 

*************************************************************/
/* This is the required field asterisk color used on the contact page. */
.required_asterisk {
	color: #CC3333;
	font-weight: bold;
}

/* Red text style for server validation error messages. */
.textfieldServerError {
  display:block;
  margin:0px;
  color:#CC3333;
  border: 1px solid #CC3333;
}
/* Container for contact form in right content area. */
.contactForm_border {
	width: 350px;
	border: 1px solid #FFFFFF;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-top: 30px;
	padding-right: 50px;
	padding-bottom: 20px;
	padding-left: 50px;
}
/* Text box container style for address and link to mapquest map; applied to P tag. */
.map {
	background-color: #339999;
	text-align: left;
	font-size: 14px;
	line-height: 22px;
	color: #FFFFFF;
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 25px;
	padding-left: 50px;
	font-weight: bold;
	background-image: url(../images/sidebar_gradient.jpg);
	background-repeat: repeat-y;
}
/* Text box container style for management names/roles; applied to P tags. */
.management {
	background-color: #000000;
	text-align: left;
	font-size: 14px;
	line-height: 22px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 55px;
	margin-bottom: 10px;
}
/* Container for links_OnDarkBackground. */
#links_OnDarkBackground {
	vertical-align: top;
	color: #FFFFFF;
	background-position: top;
	padding: 0px;
	font-weight: bold;
}
/* Sets the style for unvisited links. */
#links_OnDarkBackground a,  a:link {
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: underline;
	padding: 4px;
	line-height: 18px;
}
/* Sets the style for visited links. */
#links_OnDarkBackground a:visited {
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: underline;
	padding: 4px;
	line-height: 18px;
}
/* Sets the style for links on mouseover. */
#links_OnDarkBackground a:hover {
	color: #FFFFFF;
	text-decoration: none;
	background-color: #711B1E;
	padding: 4px;
	line-height: 18px;
	font-weight: bold;
}
/* Sets the style for a link that has focus. */
#links_OnDarkBackground a:focus {
	color: #FFFFFF;
	background-color: #711B1E;
	padding: 4px;
	line-height: 18px;
	font-weight: bold;
}
/* Sets the style for a link that is being activated/clicked. */
#links_OnDarkBackground a:active {
	color: #FFFFFF;
	background-color: #711B1E;
	padding: 4px;
	line-height: 18px;
	font-weight: bold;
}

/*************************************************************

/* contact page styles END 

*************************************************************/