/* Generic Selectors */

html, body, {
height: 100%;
}

body{
height: auto;
min-height:100%;
}

body {
margin: 0px 0px 0px 100px;  
padding-left: 15px;
padding-top: 0px;
font-family:sans-serif;
font-size: 16px; 
background: #d8d8d8;
/*background-image: url(media/gradient.jpg);
	background-repeat: repeat-x;*/
}

li{
list-style-type: disc;
line-height: 110%;
color: navy;
}

ul{
list-style: none;
margin-left: 4px;
padding-left: 4px;
}

h1{ /*banner text*/
font-family: BernhardMod BT;
font-size: 26px;
font-weight: bold;
color: white;
text-align: center;
}

h2{ /*center column sub-header text*/
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
color: navy;
text-align: center;
line-height: 20px;
}

h3{/*left column text above menu*/
font-family; sans-serif;
font-size: 16px;
font-weight: bold;
color: white;
text-align: center;
line-height: 16px;
}

h4{/*center column main header text*/
font-family: sans-serif;
font-size: 24px;
font-weight: bold;
color: navy;
text-align: center;
}

div.mgmtimg1 img{
margin-top:35px;
}

div.mgmtimg2 img{
margin-top:270px;
}

div.mgmtimg3 img{
margin-top:360px;
}

div.mgmtimg4 img{
margin-top:250px;
}

div.mgmtimg5 img{
margin-top:270px;
}

.centeredImage img{/*vendor images in center alignment*/
 text-align:center;
 margin-top:0px;
 margin-bottom:0px;
 padding:0px;
display: block;
}

.centerImage img{/*vendor images in center alignment-three across*/
float: left;
/* text-align:center;*/
/* margin-top:0px;*/
 margin-bottom:0px;
 padding:0px;
display: block;
}

.rightImage img{/*vendor images in right alignment*/
float: left;
/* text-align:right;*/
/* margin-top:100px;*/
 margin-bottom:0px;
 padding:0px;
display: block;
}

.leftImage img{/*vendor images in left alignment*/
float: left;
/* text-align:left;*/
/* margin-top:100px;*/
 margin-bottom:0px;
 padding:0px;
display: block;
}

hr{/*thin red line separating sections of text*/
color: #f00;
background-color: #f00;
height: 3px;
}

.content{
padding: 12 25 25px;
padding-bottom: 3em;
/*text-align: justify;*/
color: navy;
}

.contactcontent{
padding: 0 25 0 25px;
padding-bottom: 3em;
text-align:center;
color: navy;
font-size: 16px;
}

.indexcontent{
padding: 12 25 25px;
padding-bottom: 3em;
/*text-align: justify;*/
color: white;
font-size: 16px;
}


.footercontent{ /*this gives dots between sites in footer color specified - text is colored by :link in pseudo classes*/
color: white;
font-size: 12px;
}

p.thick{
font-weight: bold;
background-color: navy;
text-align:center;
color: white;
}




/****************Pseudo classes ******************/

:link{
color: white;
text-decoration: none;
font-size: 12 px;
}

:visited{
color: #66ccff;
text-decoration: none;
font-size: 12px;
}

:hover{
/*color: RGB(0.96,255);*/
color: red;
padding-bottom:5px;
text-decoration: underline;
font-size: 12px;
}

:active{
color: red;
font-weight: bold;
}

li:link{
color:white;
text-decoration: bold;
}

li: visited{
color: white;
text-decoration:none;
}

li:hover{
display: block;
color: red;
padding-bottom: 5px;
font-weight: bold;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000080;
}

.equip A:link{
color: white;
text-decoration: none;
font-size: 12px;
line-height: 12px;
}

.equip A:visited{
color: #66ccff;
text-decoration: none;
font-size: 12px;
line-height: 12px;
}

.equip A:hover{
color: red;
padding-bottom:2px;
text-decoration: underline;
}

A.contact:link{
color: navy;
text-decoration: underline;
font-size: 16px;
line-height: 16px;
}

A.contact:visited{
color: #4169e1;
text-decoration: underline;
font-size: 16px;
line-height: 16px;
}

A.contact:hover{
color: red;
padding-bottom:2px;
text-decoration: underline;
}

A.floating:link{
color: white;
text-decoration: none;
font-size: 15px;
line-height: 24px;
}

A.floating:visited{
color: #66ccff;
text-decoration: none;
font-size: 15px;
line-height: 24px;
}

A.floating:hover{
color: red;
padding-bottom:2px;
/*font-weight: bold;*/
text-decoration: underline;
}


/****************************** ID's *****************************************/

/********************Main Heading****************************/

#maincontainer{
float: left;
padding-top: 20px;
width:780px;
min-height: 100%;
background: navy;
filter: shadow(color: gray, strength:10);
}

#headingcontainer{
float: left;
top: 0px;
width: 100%;
z-index: 2;
background: navy;
}

#logocontainer{
float: left;
margin-left: 5%;
width: 20%;
height: 115px;
background: navy;
padding-top: 0px;
}

#banner{
float: left;
margin-top: 0px;
width: 40%;
margin-left: 2%;
height: 115px;/*107px;*/
/*margin-left: 195px;/*was 457then 415*/*/
padding: 15 0 0 0px;
background:navy;
}

#horiznavcontainer{
float: left;
width: 100%;/*was 800*/
height:35px; /*was 0px-2/26/09*/
/*margin-top: 127px;/*was 108 */*/
/*margin: 0 1% 0 3%;/*was 152 then 110*/*/
padding: 0 0 0 12px;/*was 0000 top padding makes horz menu bar drop down within this container*/
background: #b20000;
text-align: center;
border-bottom: solid 5px navy;
}


/***************************************************Home; About Us; Contact Us Layout************************************/

#indexcontainer{         
float: left;
width: 760px;
min-height: 100%;
background:#navy;	
margin-left: 25px;
margin-right:25px;
display:inline;
}



#contentcenterlg{         
float: left;
width: 550px;
min-height: 100%;
background:white;	
margin-left: 115px;
margin-right:115px;
display:inline;
}

#contentcenterwarren{         
float: left;
width: 550px;
min-height: 100%;
background:white;	
margin-left: 115px;
margin-right:115px;
display:inline;
}

#contentcenterlgleftcolumn{     /* inside content section for contact us */
float: left;
width:45%;
background:white;	
text-align:center;
}

#contentcenterlgrightcolumn{       /* inside content section for contact us */
float: left;
width:45%;
background:white;	
margin-top:0px;
text-align:center;
}

#centerfootlg {     
clear: both;
float: left;
z-index: 10;
height: 2em;
margin-top: -2em;
background: navy;
padding-top: 10px;
padding-bottom: 5px;
width:100%;
text-align: center;
} 



/**************************************************************Markets Layout*********************************/

#contentcentersm{        
float: left;
width:48%;
min-height: 100%;
background:white;	
margin-left: 2%;					
z-index: -10;	
}

#centerfootsm{ 	 
clear: both;
float: left;
z-index: 10;
height: 2em;
background: navy;
padding-top: 10px;
padding-bottom: 5px;
width: 100%;
text-align: center;
} 


#leftcolumncontentsm{		
float: left;
list-style-type:none;
width: 20%;
margin: 0px 0px 0px 2%;                
min-height: 100%;
padding-bottom: 20px;   
z-index: 0;        
background:navy;
}


#rightcolumn{	
float: left;
list-style-type:none;
width: 23%;/*20%;*/
margin: 0px 0px 0px 2%;
min-height: 100%;
padding-top: 2px;
z-index: 0;
background:navy;
padding-bottom: 15px;
}


/********Individual Product & Manufacturer Pages; Main Industrial & Municipal Pages; Service & Aftermarket Pages Layout******/

#contentright{		
float: left;
width: 60%;
min-height: 100%;
background:white;
margin-left: 10%;
display: inline;
}

#rightalignfooter { 		
clear: both;
float: left;
z-index: 10;
height: 4em;
margin-top: -4em;
background: navy;
padding-top: 35px;
padding-bottom: 5px;
width: 100%;
text-align: center;
} 


#leftcolumncontentright{		
float: left;
list-style-type:none;
width: 180px;
margin: 20 0 0 3%;/*left margin was 152*/                     
height: 50%;
padding-bottom: 20px;   
z-index: 0;        
}



/**************************************************Management Layout******************************/

#contentmgmt{
float: left;	
width:85%;
min-height: 100%;
background:white;	
margin-left:5%;
padding-left: 10px;
border: solid red 1px;
}

#leftmgmt{		
float: left;
width: 220px;
height: 100%;
margin-left: 3%;
padding: 25 0 0 10px; /*top right bottom left*/
background:white;
z-index: 1;
border: solid red 1px;
}

/**********************************Product & Manuf Page Columns*********************/

#leftcolumnmanu{
float:left;
list-style-type:none;
width: 150px:
margin-left: 3%;          
min-height: 100%;
z-index: 0;     
padding-left: 5px;
}

#leftcolumnmanu2{
float:left;
list-style-type:none;
width: 150px;
margin-left: 3%;             
min-height: 100%;
padding-top: 45px;
z-index: 0;      
}

***************************************************** Warren Pumps Image Gallery********************************************************************
#contentcenterwarren{         
float: left;
width: 550px;
min-height: 100%;
background:white;	
margin-left: 115px;
margin-right:115px;
display:inline;
}



div.img
  {
  margin:2px;
  border:1px solid #0000ff;
  height:auto;
  width:auto;
  float:left;
  text-align:center;
  }
div.img img
  {
  display:inline;
  margin:3px;
  border:1px solid #ffffff;
  }
div.img a:hover img
  {
  border:1px solid #0000ff;
  }
div.Warrendesc
  {
  text-align:center;
  font-weight:normal;
  width:120px;
  margin:2px;
  }


<div class="Warrenimg">
  <a target="_blank" href="klematis_big.htm">
  <img src="klematis_small.jpg" alt="Klematis" width="110" height="90" />
  </a>
  <div class="Warrendesc">This is Warren pump 1</div>
</div>
<div class="Warrenimg">
  <a target="_blank" href="klematis2_big.htm">
  <img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" />
  </a>
  <div class="Warrendesc">Add a description of the image here</div>
</div>
<div class="Warrenimg">
  <a target="_blank" href="klematis3_big.htm">
  <img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" />
  </a>
  <div class="Warrendesc">Add a description of the image here</div>
</div>
<div class="Warrenimg">
  <a target="_blank" href="klematis4_big.htm">
  <img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" />
  </a>
  <div class="Warrendesc">Add a description of the image here</div>
</div>





<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.mattblacktabs{
width: 100%;
overflow: hidden;
border-bottom: 1px solid red; /*bottom horizontal line that runs beneath tabs*/
}

.mattblacktabs ul{
margin: 0;
padding: 0;
padding-left: 40px; /*offset of tabs relative to browser left edge*/
font: bold 16px Arial, sans-serif;
list-style-type: none;
}

.mattblacktabs li{
display: inline;
margin: 0;
}

.mattblacktabs li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 8px; /*padding inside each tab*/
/*border-right: 1px solid white; /*right divider between tabs*/*/
color: white;
background: #b20000; /*background of tabs (default state)*/
}

.mattblacktabs li a:visited{
color: white;
}

.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background: navy; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}

</style>