@charset "utf-8";
/* Home Page CSS Document */

h2 {
	margin: 0;
	font-family: arial, helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #003366;
}

h3 {
	margin: 0;
	font-family: arial, helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #003366;
}

div #contentHome {
	position: relative;
	overflow: hidden;
	background-color: transparent;
	font-family: arial, helvetica, sans-serif;
	color: #000000;
}

/* width set extra-wide so floats won't wrap, height set to fit .row1_ColorBar and truncate .row1_Image (bkgnd image),
   which will extend below this element
*/
div #row1_Home {
	position: relative;
	width: 850px;
	height: 162px;
}

/* - z-index must be greater than .row1_Filament
   - have to set a width of this container element so when floats are cleared in IE8 compatibility mode,
     the background color will fill in.
*/
div #row2_Home {
	position: relative;
	width: 100%;
	background-color: transparent;
	z-index: 100;
}

/* z-index should be greater than .row1_Filament so that the "LEARN MORE" button will get mouseover focus */
div.row1_ColorBar {
  	-moz-border-radius-topleft:1ex;
  	-webkit-border-top-left-radius:1ex;
	position: relative;
	float: left;
	margin-left: 20px;
	width: 225px;
	height: 162px;
	white-space: normal;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: normal;
	font-family: arial, helvetica, sans-serif;
	text-decoration: none;
	background-color: #C2CB3C;
	z-index: 50;
}

div.row1_ColorBarText {
	padding: 20px 15px 17px 15px;
}

/*
div.row1_ColorBarButton {
	position: absolute;
	bottom: 10px;
	right: 20px;
	padding: 2px;
	border: 1px solid #EEEEEE;
}
div.row1_ColorBarButton a {
	font-family: arial, helvetica, sans-serif;
	font-size: .7em;
	font-weight: bold;
	text-decoration: none;
	color: #FFFFFF;
}
*/

/* initial background image is 'home1.jpg', other images will replace this initial image 
   Left edge of image should be flush with .row1_ColorBar. Height of image should extend below
   the container (#row1_Home), into the next element (#row2_Home)
*/
div.row1_Image {
	position: absolute;
	top: 0px;
	left: 245px;
	height: 220px;
	width: 605px;
	background-image: url(/Media/slideshows/home/home1.jpg);
	background-repeat: no-repeat;
	z-index: 10;
}

/* this is the upper half of the filament, it should be placed in the lower right corner of the containing element.
   Its z-index should be greater than .row1_Image
 */
div.row1_Filament {
	position: absolute;
	right: 0px;
	bottom: 0px;
	z-index: 20;
}
/* IE7 hack to remove gap between image and adjoining block elements */
div.row1_Filament img {
	display: block;
}

/* - should be same width as .row1_ColorBar + margin
   - no bottom margin, this is set by .row2_Col3, because it is the only column that isn't offset
*/
div.row2_Col1 {
	position: relative;
	float: left;
	width: 245px;
	background-color: #FFFFFF;
}

div.row2_Col2 {
	position: relative;
	float: left;
	width: 335px;
	background-color:#FFFFFF;
}

/* this holds two elements, the upper element is a transparent gif (lower filament), and
   the lower element is the news.
*/
div.row2_Col3 {
	position: relative;
	float: left;
	width: 245px;
	height: 260px;
	background-color: transparent;
}

/* found in div.row2_Col1 */
#col1_Container {
	width: 225px;
	height: 335px;
	margin-top: 9px;
	margin-left: 20px;
	background-color: #FFFFFF;
}
#col1_Container table {
	width: 100%;
}
#col1_Container ul {
	list-style-type: none;
	text-decoration: none;
	padding: 0;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 0;
	margin-right: 0;
	font-size: 10px;
	font-weight: normal;
}
#col1_Container a {
	color: #000000;
	text-decoration: none;
	line-height: 1.5;
	padding-left: 1em;
}
#col1_Container a:link, #col1_Container a:visted {
	color: #000000;
}
#col1_Container a:hover {
	text-decoration: underline;
}

.darkGrayBlock {
	padding-top: 14px;
	padding-left: 16px;
	background-color: #E9E9E9;
}

.lightGrayBlock {
	padding-top: 14px;
	padding-left: 16px;
	background-color: #F0F0F0;
}

/* found in div.row2_Col2 */
#col2_Container {
	width: 300px;
	height: 344px;
	background-color: #FFFFFF;
}
#press_releases {
	padding-top: 22px;
	padding-left: 16px;
	width: 100%;
}
#press_releases_table {
	margin-top: 1em;
	font-family: arial, helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #000000;
}
#press_releases_table td {
	padding-bottom: 10px;
}

#press_releases_table a {
	text-decoration: none;
	font-weight: bold;
	color: #428AB9;
}
#press_releases_table a:link, #highlights_table a:visited {
	color: #428AB9;
}
#press_releases_table a:hover {
	text-decoration: underline;
}

/* found in div.row2_Col3 */
#lowerFilament {
	position: relative;
}
/* IE7 hack to remove gaps between image and adjoining block elements */
#lowerFilament img {
	display: block;
}

/* this container is found below the #lowerFilament, and only contains the #news and #news_more_button */
#col3_Container {
	position: relative;
	width: 270px;
	height: 285px;
	background-color: #FFFFFF;
}
#news {
  	-moz-border-radius-topleft:1ex;
  	-webkit-border-top-left-radius:1ex;
	position: relative;
	height: 230px; /* hack for IE7, IE8 which do not properly size dynamic content */
	margin-left: 20px;
	padding-top: 14px;
	padding-left: 16px;
	padding-right: 20px;
	padding-bottom: 20px;
	background-color:#DEF1FF;
}
#news_table {
	margin-top: 1em;
	font-family: arial, helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #000000;
}
#news_table td {
	padding-bottom: 1em;
}
#news_table a {
	text-decoration: none;
	font-weight: bold;
	color: #428AB9;
}
#news_table a:link, #news_table a:visited {
	color: #428AB9;
}
#news_table a:hover {
	text-decoration: underline;
}

#news_more_button {
	position: relative;
	float: right;
	padding: 2px;
	border: 1px solid #999999;
}
#news_more_button a {
	font-family: arial, helvetica, sans-serif;
	font-size: .7em;
	font-weight: bold;
	text-decoration: none;
	color: #003366;
}