/* gray theme */
#innerheader{
	float:left;
	width: 695px;
	height: 103px;
	background: url(../images/graytheme/headerbg.gif) repeat-x;
}
#headerRightCorner{
	float: left;
	width: 11px;
	height: 103px;
	background: url(../images/graytheme/rightcorner.gif) no-repeat;
}
#headerWrapper{
	float: left;
	display:block;
}
#headerLogo{
	width: 117px;
	height: 103px;
	float:left;
	display:block;
	background: transparent url(../images/graytheme/headerlogobg.gif) no-repeat;
}

#headerProductName{
	float:left;
	margin-top: 18px;
	width: 254px;
	height: 29px;
}

#headerProductLogo{
	float:right;
	margin-top: 18px;
	background: url(../images/fujitsu.gif) no-repeat;
	width: 254px;
	height: 55px;
}

#tabContents{
	position:relative;
	float:left;
	background: #ffffff;
	width: 800px;
	font-family: arial;
	margin-left:20px
}

#tabContentsCenter{
	clear:both;
	float:left;
	width: 842px;
	font-family:arial;
}

#tabContentsLeftBorder{
	float: left;
	height: 100%;
	width: 11px;
	background: url(../images/graytheme/leftside.gif) repeat-y;
}

#tabContentsRightBorder{
	float: left;
	height: 100%;
	width: 11px;
	background: url(../images/graytheme/rightside.gif) repeat-y;
}

#tabContentsBottom{
	clear:both;
	float:left;
	height: 11px;
	width: 900px;
}

#tabContentsBottomLeft{
	float: left;
	height: 11px;
	width: 11px;
	background: url(../images/graytheme/bottomleftcorner.gif) no-repeat;
}

#tabContentsBottomRight{
	float:left;
	height:11px;
	width: 11px;
	background: url(../images/graytheme/bottomrightcorner.gif) no-repeat;
}

#tabContentsBottomBorder{
	float: left;
	width: 800px;
	height: 100%;
	background: url(../images/graytheme/bottomside.gif) repeat-x;
}

#innerTabContents{
	position: relative;
	padding: 20px 0px 10px 0px;
}
#tabContentsHeader{
	background: url(../images/graytheme/contentstitle.gif) no-repeat;
	width: 241px;
	height: 63px;
}
#tabContentsDescription{
	padding-top: 15px;
	font: 12px Arial;
	color: #474747;
	display: block;
	width: 300px;
}
#imagePreview{
	position: absolute;
	right: 8px;
	top: 23px;
}

#tabBarWrapper{
	float:left;
	clear: right;
	
}

#tabBar{
	clear:both;
	font: bold 12px Arial;
	color: #686868;
	list-style: none;
	padding: 0px;
	margin: 0px;
	width: 705px;
	height: 37px;
	background-image:url(../images/graytheme/tabbarbg.gif);
}
#tabBar a
{
	color: #686868;
	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: 37px;
	background: url(../images/graytheme/divider.gif) no-repeat top right;
}


/*Dropdown tab styles*/
.bluetabs{position:absolute;margin-top:70px;}

.bluetabs ul{padding: 8px 0;margin-left: 5px;margin-top: 1px;margin-bottom: 0;font: bold 12px Arial;color: #686868;
list-style-type: none;text-align: left;	
 /*set to left, center, or right to align the menu as desired*/
}

.bluetabs li{display: inline;margin: 0 0 0 -5px;list-style:none;	}

.bluetabs li a{text-decoration: none;padding: 8px 35px;margin-right: 0px;color: #686868;
background: url(../images/graytheme/tabbarbg.gif) repeat-x;border-top: 1px solid #ccc;border-left: 1px solid #ccc;border-right: 1px solid #ccc; /*THEME CHANGE HERE*/
}

.bluetabs li a:visited{color: #686868;
}

.bluetabs li a:hover{text-decoration: underline;color: #686868;
}

.bluetabs li.selected{
}

.bluetabs li.selected a{ /*selected main tab style */
background-image: url(media/bluetabactive.gif); /*THEME CHANGE HERE*/
border-bottom-color: white;
}

.bluetabs li.selected a:hover{ /*selected main tab style */text-decoration: none;
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv_b{position:absolute;top: 0;border: 1px solid #918d8d; /*THEME CHANGE HERE*/border-width: 0 1px;font:normal 12px Verdana;
line-height:18px;z-index:100;background-color: white;width: 200px;visibility: hidden;
}


.dropmenudiv_b a{width: auto;display: block;text-indent: 5px;border: 0 solid #918d8d; /*THEME CHANGE HERE*/border-bottom-width: 1px;
padding: 2px 0;text-decoration: none;color: black;
}

* html .dropmenudiv_b a{ /*IE only hack*/width: 100%;
}

.dropmenudiv_b a:hover{ /*THEME CHANGE HERE*/background-color: #edf3f3;
}

/*dorp down tab menu ends */

#linkTab a span
{
	background: url(../images/graytheme/rightdivider.gif) no-repeat top right;
} 

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

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

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

/*Content*/
#left {
float:left;
width:340px;
background:#fff;

}

#left_pc {
float:left;
width:680px;
background:#fff;

}

#right {
float:right;
width:380px;
background:#fff;

}

#content {
float:left;
padding-left:10px;
padding-top: 20px;
width:95%;


}
#computer {
float:left;
padding-left:10px;
width:136px;


}

#computer2 {
float:left;
padding-left:10px;
width:400px;


}

#headercontent {
float:left;
padding-left:10px;
width:100%;
height:30px;


}

#info {
float:right;
width:220px;
background:#fff;

}

#info img{
	clear:left;

}



/*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 #linkTab{
	background: url(../images/graytheme/selectedtab.gif) repeat-x;
}

#productPage #productTab a, #feature1Page #feature1Tab a, #feature2Page #feature2Tab a, #pricePage #linkTab a{
	color: #323232 !important;
	font-weight: bold;
}
/*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 #linkTab a:hover span{
	background: url(../images/graytheme/divider.gif) no-repeat top right;
}

.style1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #CC0000;
}
.style4 {
	font-size: 11px;
	line-height: 2;
}


/*This is for the data*/

.leftcolumn{
	float:left;
	width:80px;
	border:0px solid green;
	clear:left;
	font: Arial;
	font-size: 10px;
	line-height:15px;
}
.rightcolumn{
	float:left;
	width:150px;
	border:0px solid yellow;
	font: Arial;
	font-size: 10px;
	line-height:15px;
}
.copymain{width:250px;border:0px solid #f00;}

/*This is for the topimages*/

.wrapper{
   margin: 0px auto;
   width: 800px;
   background-color: #fff
}
.left1{
   float: left;
   margin-right: 20px;
   width: 170px;
   background-color: #fff
}
.lefttopcontent{
	float: left;
	margin-right: 10px;
	width: 150px;
	background-color: #fff;
	font: Arial;
	font-size: 11px;
	margin-top:8px;
	padding-top:5px;
	
}

.lefttopheader{
	float: left;
	width: 190px;
	height:33px;
	background-image:url(../images/bg_left.gif);
	background-repeat:repeat-x;
	font: Arial;
	color:#C00;
	font-size: 11px;
	margin-top:8px;
	padding:0 0 0 13px;
	line-height:30px;

}

.left2{
   float: left;
   margin-right: 20px;
   width: 170px;
   background-color: #fff
}
.left3{
   float: left;
   margin-right: 20px;
   width: 170px;
   background-color: #fff
}
.left4{
   float: left;
   width: 170px;
   background-color: #fff
}

hr {color: #fff; background-color: #fff; border: 1px dotted #ff0000; border-style: none none dotted; }


.light_content {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #CCC;
}