/* gray theme */
body {
	background: black;
}
/* To change the height of the tab box change the height field here */
#tabWrapper{
	height: 300px;
	position: relative;
}

#tabWrapper_2{
	height: 300px;
	position: relative;
}

#tabWrapper_3{
	height: 300px;
	position: relative;
}

#tabWrapper_4{
	height: 300px;
	position: relative;
}

#tabContents{
	float: left;
	clear: right;
	background: #f8f8f8 url(../images/graytheme/contentsbg.gif) repeat-x top left;
	width: 600px;
	height: 100%;
	font-family: arial;
}

#leftCorner{
	position; relative;
	float: left;
	background: url(../images/graytheme/leftcorner.gif) no-repeat;
	width: 9px;
	height: 100%;
	z-index: 20;
}

#rightCorner{
	float: left;
	background: url(../images/graytheme/rightcorner.gif) no-repeat;
	width: 9px;
	height: 100%;
}

#innerTabContents{
	position: relative;
	padding: 30px 10px 10px 10px;
}
#tabContentsHeading{
	font: bold 28px Arial;
	color: #0371b7;
	display: block;
}
#tabContentsDescription{
	padding-top: 15px;
	font: 14px Arial;
	line-height: 150%;
	color: #474747;
	display: block;
	width: 488px;
}
#innerTabContents_2{
	position: relative;
	padding: 30px 10px 10px 10px;
}
#tabContentsHeading_2{
	font: bold 28px Arial;
	color: #0371b7;
	display: block;
}
#tabContentsDescription_2{
	padding-top: 10px;
	font: 14px Arial;
	line-height: 150%;
	color: #474747;
	display: block;
	width: 488px;
}
#innerTabContents_3{
	position: relative;
	padding: 30px 10px 10px 10px;
}
#tabContentsHeading_3{
	font: bold 28px Arial;
	color: #0371b7;
	display: block;
}
#tabContentsDescription_3{
	padding-top: 10px;
	font: 14px Arial;
	line-height: 150%;
	color: #474747;
	display: block;
	width: 488px;
}

#innerTabContents_4{
	position: relative;
	padding: 30px 10px 10px 10px;
}
#tabContentsHeading_4{
	font: bold 28px Arial;
	color: #0371b7;
	display: block;
}
#tabContentsDescription_4{
	padding-top: 10px;
	font: 14px Arial;
	line-height: 150%;
	color: #474747;
	display: block;
	width: 488px;
}

#imagePreview{
	position: absolute;
	right: 5px;
	top: 30px;
}
#imagePreview_2{
	position: absolute;
	right: 5px;
	top: 30px;
}
#imagePreview_3{
	position: absolute;
	right: 5px;
	top: 30px;
}
#imagePreview_4{
	position: absolute;
	right: 5px;
	top: 30px;
}

#tabBarWrapper{
	clear: both;
}
#tabBarLeftCorner{
	float: left;
	width: 9px;
	height: 59px;
	background: url(../images/graytheme/bottomleftcorner.gif) no-repeat;
}
#tabBarRightCorner{
	float: left;
	width: 9px;
	height: 59px;
	background: url(../images/graytheme/bottomrightcorner.gif) no-repeat;
}

#tabBar{
	float: left;
	font: bold 12px Arial;
	color: #0371b7;
	list-style: none;
	padding: 0px;
	margin: 0px;
	width: 600px;
	height: 59px;
}
#tabBar a
{
	color: #0371b7;
	text-decoration: none;
}

#tabBar li
{
	position: relative;
	width: 25%;
	height: 100%;
	background: url(../images/graytheme/tabbarbg.gif) repeat-x;
	float: left;
	margin: 0px;
} 

#tabBar a span
{
	cursor: pointer;
	display: block;
	width: 100%;
	height: 59px;
	background: url(../images/graytheme/divider.gif) no-repeat top right;
}

#pricePointTab a span
{
	background: transparent;
} 

#tabBar a span div
{
	padding: 10px;
}

#tabBar a:hover span
{
	background: url(../images/graytheme/tabhover.gif);
}

.tabImage{
	border: none;
	float: left;
	margin-right: 10px;
}
.tabImage_2{
	border: none;
	float: left;
	margin-right: 10px;
}
.tabImage_3{
	border: none;
	float: left;
	margin-right: 10px;
}
.tabImage_4{
	border: none;
	float: left;
	margin-right: 10px;
}


/*This style is used to style the selected tab according to the active page that it is on.  The active page is determined by the id
of the body tag.  Alternatively if you are using ajax you can change this css entry to only contain the name of the selected tab.  
For example 'selectedTab'.  I hope that makes sense...*/
#productPage #productTab, #feature1Page #feature1Tab, #feature2Page #feature2Tab, #pricePage #pricePointTab{
	background: url(../images/graytheme/selectedtab.gif) repeat-x;
}
/*This style is to prevent the currently selected tab from letting the hover state override it */
#productPage #productTab a:hover span, #feature1Page #feature1Tab a:hover span, #feature2Page #feature2Tab a:hover span, #pricePage #pricePointTab a:hover span{
	background: url(../images/graytheme/divider.gif) no-repeat top right;
}

/*This is to ensure that if the left tab is selected it renders a different corner*/
#productPage #tabBarLeftCorner{
	background: url(../images/graytheme/selectedleftcorner.gif) no-repeat;
}

/*This is to ensure that if the right tab is selected it renders a different corner*/
#pricePage #tabBarRightCorner{
	background: url(../images/graytheme/selectedrightcorner.gif) no-repeat;
}