/* CSS STYLE SHEET SPECIFIC TO THE HOMEPAGE ONLY */
/* --------------------------------------------- */

/* CHANGES (Over-writes) TO CSS DEFINED IN DEFAULT.CSS  (in the STRUCTURE section)  */
#ContentHeader {	background:#DFEAEE url(../images/backgrounds/bgimage_ContentHeader_homepage.jpg) repeat-x left top;}

#Content {
	background:#DFEAEE url(../images/backgrounds/bgimage_ContentFooter_homepage.jpg) no-repeat bottom center; /* different background img */
	padding: 0; /* I've taken all padding out */
	padding-top:20px; /* I've added some top padding to the Content div */
	position:relative; /* Added, so that other elements i.e. div#arrow can be positioned relative to the top of the Content div */
	height:360px; /* Added, so that absolutely positioned elements do not overflow Content div area */
}


/* NEW CSS FOR THE HOMEPAGE ONLY  */

/* ContentHeader section */
h1#home-headingtxt {
	text-align:center;
	font: bold 1.6em Arial, Verdana, Geneva, sans-serif;
	color:#036;
	padding-top:20px;
	height:60px; /* actual height is padding + height = 80px.  The background image is 80px high */
}
#secondline {	font-style:italic;	letter-spacing:1px; font-weight:normal; font-size:16px;}


/* Content section */
div#torso {
	background: transparent url(../images/backgrounds/bgimage_home_body2.png) no-repeat center 20px;
	/*background: transparent url(../images/backgrounds/bgimage_home_body.png) no-repeat center 20px;*/
	width:275px;
	height:285px; /* height has to be more than the actual image height, to take the bg padding (above) into account */
	position:absolute;
	left:344px;
	top:28px;
}

div#arrow {
	background: url(../images/icon/home_arrow_up.png) no-repeat center top;
	width:348px;
	height:354px;
	position:absolute;
	top:0px;
	left:315px;
}
div#arrow:hover {background: url(../images/icon/home_arrow_down.png) no-repeat center top;}
div#arrow a {display:inline-block;outline:none;height:100%; width:100%;}


.tab {
	width:340px;
	height:70px;
	padding-bottom:10px;
}

.greentab {
	background:url(../images/backgrounds/bgimage_home_tab_green.jpg) no-repeat left top;
	float: left;
	clear:left;
	margin-left:30px;
}
.greentab:hover {background:url(../images/backgrounds/bgimage_home_tab_green_hover.jpg) no-repeat left top;}

.redtab {
	background:url(../images/backgrounds/bgimage_home_tab_red.jpg) no-repeat left top;
	float:right;
	margin-right:30px;
	text-align:right;
}
.redtab:hover {background:url(../images/backgrounds/bgimage_home_tab_red_hover.jpg) no-repeat left top;}

.tab h2 {
	font: bold 18px Arial, Helvetica, sans-serif;
	height:64px;
}
.greentab h2 {margin:3px 0 3px 7px;}
.redtab h2 {margin:3px 9px 0 0;}


.tab h2 a {text-decoration:none;outline:none; display:block;height:100%;} /* display block and height allow a tag to use all of containing h2 tag */
.tab h2 a:link, .tab h2 a:visited { color:#000044;}
.tab h2 a:hover, .tab h2 a:active {	color:#000077;}

.greentab h2 a {padding-left:98px;}
.redtab h2 a {padding-right:98px;}

.tab h2 span {display:none;text-align:left;} /* hides the alternative text description, until h2 tag area is hovered over */
.tab h2:hover span {display:block;font: 12px Verdana, sans-serif;color:#000033;} /* display block is essential */

h2 a#tab1 {background:url(../images/icon/homepage_icon-tab1.png) no-repeat left top; padding-top:5px; padding-right:20px;}
h2 a#tab2 {background:url(../images/icon/homepage_icon-tab2.png) no-repeat right top; padding-top:5px; padding-left:50px;}
h2 a#tab3 {background:url(../images/icon/homepage_icon-tab3.png) no-repeat left top; padding-top:5px; padding-right:50px;}
h2 a#tab4 {background:url(../images/icon/homepage_icon-tab4.png) no-repeat right top; padding-top:5px; padding-left:95px;}
h2 a#tab5 {background:url(../images/icon/homepage_icon-tab5.png) no-repeat left top;	padding-top:5px; padding-right:65px;}
h2 a#tab6 {background:url(../images/icon/homepage_icon-tab6.png) no-repeat right top;  padding-top:5px; padding-left:70px;}
h2 a#tab7 {background:url(../images/icon/homepage_icon-tab7.png) no-repeat left top;	padding-top:5px; padding-right:20px;}
h2 a#tab8 {background:url(../images/icon/homepage_icon-tab8.png) no-repeat right top; padding-top:0px;padding-left:10px;}

h2 a#tab1:hover {background-image:url(../images/icon/homepage_icon-tab1_hover.png);}
h2 a#tab2:hover {background-image:url(../images/icon/homepage_icon-tab2_hover.png);}
h2 a#tab3:hover {background-image:url(../images/icon/homepage_icon-tab3_hover.png);}
h2 a#tab4:hover {background-image:url(../images/icon/homepage_icon-tab4_hover.png);}
h2 a#tab5:hover {background-image:url(../images/icon/homepage_icon-tab5_hover.png);}
h2 a#tab6:hover {background-image:url(../images/icon/homepage_icon-tab6_hover.png);}
h2 a#tab7:hover {background-image:url(../images/icon/homepage_icon-tab7_hover.png);}
h2 a#tab8:hover {background-image:url(../images/icon/homepage_icon-tab8_hover.png);}

/* ff text */
.ff-heading 
{color: #FFFFFF;}