/* CSS STYLE SHEET SPECIFIC TO THE TWO 'LINKING PAGES' ONLY */
/* --------------------------------------------- */


/*- Below is to position the tabs on the linking pages only -*/

h3.linkpages-heading {text-align:center;}
div.linkpages-tabsholder {margin:25px 0 0 48px;}

/*--------------------------------------------------------*/

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

.greentab {
	background:url(../images/backgrounds/bgimage_home_tab_green.jpg) no-repeat left top;
	float: 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:left;
	margin-left:30px;
	text-align:right;
}
/* I has to comment out the original redtab class css. I coded it to float:left, same as green tab does */
/*.redtab {
	background:url(../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;} /* This 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 */
/*This right side (red) span text comments must be positioned, since there is not enough room to appear beneath the title h2 text */
/*.tab h2 a#tab2:hover span {position:relative;top:-57px;left:-100px;}
.tab h2 a#tab4:hover span {position:relative;top:-50px;left:-78px;}
.tab h2 a#tab6:hover span {text-align:right;padding-top:5px;}
.tab h2 a#tab8:hover span {}*/

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);}