﻿/* Pageviews */
.highlights {
margin:-25px 0 0;
margin:0;
}
.highlights .highlightimage
{
	margin: 5px 15px 0px 0px;
	float: left;
	height: 100%;
}

.highlights .highlight
{
	display: block;
	margin: 0;
	padding: 10px 5px 10px 5px;
	clear: both;
	position: relative;
	zoom: 1;
}

.list
{
	margin: 0;
	padding: 0;
	list-style: none;
}
.list .listitem
{
	margin: 0;
	padding: .5em;
	list-style: none;
}

.list .alt
{
	background: #f3f4f9;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-khtml-border-radius: 3px;
}

h4
{
	color:#808db5;
	font-family:Segoe UI, Myriad, Myriad Pro, Calibri, Arial, Sans-Serif;
	line-height:1;
	margin:.2em 0;
	padding:.4em 0;
}


.clear {
clear:both;
display:block;
height:0;
}

div {
margin:0;
padding:0;
}



/* green theme */


#tabBarWrapper{
	float:left;
	clear: right;
}

#tabBar{
	clear:both;
	font: bold 12px Arial;
	color: #ffffff;
	list-style: none;
	padding: 0px;
	margin: 0px;
	width: 856px;
	height: 100px;
}

#tabBar li a
{
	
	background: url(../images/greentheme/TabSprite.gif) no-repeat;
} 

#tabBar a
{
	color: #ffffff;
	text-decoration: none;
}
#tabBar li a.Aerofish
     {
        cursor: pointer;
	    display: block;
	    width: 174px;
	    height: 100px;	    
        background-position:0 -100px;
         
         }
         #tabBar li a.Aerofish:hover
     {
        cursor: pointer;
	    display: block;
	    width: 174px;
	    height: 100px;	    
        background-position:0 -102px;
         
         }
          #tabBar li a.selectedAerofish
     {
        cursor: pointer;
	    display: block;
	    width: 174px;
	    height: 100px;	    
        background-position:0 0px;
         
         }



#tabBar li a.Scan
     {
        cursor: pointer;
	    display: block;
	    width: 152px;
	    height: 100px;	    
        background-position:0 -300px;
         
         }
         #tabBar li a.Scan:hover
     {
        cursor: pointer;
	    display: block;
	    width: 152px;
	    height: 100px;	    
        background-position:0 -302px;
         
         }
          #tabBar li a.selectedScan
     {
        cursor: pointer;
	    display: block;
	    width: 152px;
	    height: 100px;	    
        background-position:0 -200px;
         
         }
          #tabBar li a.selectedManage
     {
        cursor: pointer;
	    display: block;
	    width: 150px;
	    height: 100px;	    
       background-position:0 -400px;
         
         }
         
#tabBar li a.Manage
     {
        cursor: pointer;
	    display: block;
	    width: 150px;
	    height: 100px;	    
        background-position:0 -500px;
         
         }
         #tabBar li a.Manage:hover
     {
        cursor: pointer;
	    display: block;
	    width: 150px;
	    height: 100px;	    
        background-position:0 -502px;
         
         }
         
#tabBar li a.Retrieve
     {
        cursor: pointer;
	    display: block;
	    width: 155px;
	    height: 100px;	    
        background-position:0 -700px;
         
         }
         #tabBar li a.Retrieve:hover
     {
        cursor: pointer;
	    display: block;
	    width: 155px;
	    height: 100px;	    
        background-position:0 -702px;
         
         }
          #tabBar li a.selectedRetrieve
     {
        cursor: pointer;
	    display: block;
	    width: 155px;
	    height: 100px;	    
       background-position:0 -600px;
         
         } 
         
#tabBar li a.Host
     {
        cursor: pointer;
	    display: block;
	    width: 192px;
	    height: 100px;	    
        background-position:0 -900px;
         
         }
         #tabBar li a.Host:hover
     {
        cursor: pointer;
	    display: block;
	    width: 192px;
	    height: 100px;	    
        background-position:0 -902px;
         
         }
      #tabBar li a.selectedHost
     {
        cursor: pointer;
	    display: block;
	    width: 192px;
	    height: 100px;	    
       background-position:0 -800px;
         
         }       
         
         
    #productTab{
        position: relative;
        height:100px;
	    float: left;
	    margin: 0px;
    
}
#aerofishTab{
        position: relative;
        height:100px;
	    float: left;
	    margin: 0px;
    
}
         
    #feature1Tab
    {
        position: relative;
        height:100px;
	    float: left;
	    margin: 0px;
     }
     #feature2Tab
    {
        position: relative;
        height:100px;
	    float: left;
	    margin: 0px;
     }
     #hostTab
     {
        position: relative;
        height:100px;
	    float: left;
	    margin: 0px;
	    padding:0px;
     }

/*
#tabBar a span
{
	cursor: pointer;
	display: block;
	width: 209px;
	height: 180px;
	background: url(../images/greentheme/divider.gif) no-repeat top right;
}

#linkTab a span
{
	background: url(../images/greentheme/rightdivider.gif) no-repeat top right;
} 
*/
#tabBar a span div
{
	padding: 0px;
}

#tabBar a:hover span
{
	background: url(../images/greentheme/tabhover.gif);
}

.tabImage{
	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 #linkTab{
	background: url(../images/greentheme/selectedtab.gif) repeat-x;
}

#productPage #productTab a, #feature1Page #feature1Tab a, #feature2Page #feature2Tab a, #pricePage #linkTab a{
	color: #ffffff !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/greentheme/divider.gif) no-repeat top right;
}

