/* iframe tag style. This is used for the menu at the top of the page */

iframe { margin-left:6px;
	 margin-right:6px;
     margin-bottom: 0px;
	 height: 242px; 
	 border: 0px; 
	 border-style: none;
	 background-color:Transparent;
       }

/* end iframe style */

/* begin navigation bar drop down styles */

 ul { /* top level nav list */
  padding: 0;
  margin: 0;
  margin-left:2.3em;
  list-style: none;
  display:block;
  font-size:13px;
  font-family:Arial;
  text-align:center;
  font-weight:bold;
  cursor:pointer;
  z-index:1;
  }
  
 li { /* top level list cell */
  margin-left: 0; 
    background-color: #ffaeae;
	margin-bottom: 0;
	padding: 2px 10px 2px;
	border-top: 1px solid #000;
	list-style: none;
	float:left;
	position: relative;
  }
  
  li ul { /* second level drop-down list */
  position: absolute; 
  top: 20px;
  left: -999em;
  background-color: #bbbbbb;
  z-index:2;
  float:left;
  text-align:left;
  margin-left: -6px;
  width:auto;
  }
  
 li ul li{ /* second level list cell */
   
   float:left;
   z-index:2;
   clear:left;
   background-color: #eeeeee;
   border-top: 0px;
   border-bottom: 1px solid #aaaaaa;
   border-left: 1px solid #000000;
   border-right: 1px solid #000000;
   white-space:nowrap;
   width:inherit;
   margin-left: auto;
  }
  

	
 ul.industrial li
  {
      width:75px;
  }

 ul.desktop li
  {
      width:125px;
  }
  
 ul.services li
  {
      width:105px;
  }
  	
 ul.accessories li
  {
      width:90px;
  }
	
 li.first 
  {
   border-left: 1px solid #000000;
  }
 li.last
  {
   border-right: 1px solid #000000;
  }
 li.bottom
  {
   border-bottom: 1px solid #000000;
  }

 a.navlink:hover, a.navlink:link, a.navlink:active, a.navlink:visited
 {
     text-decoration:none;
     color:#000000;
 }

 li:hover ul { left:auto; } /* all browser hover code*/
 li.over ul { left:5px; } /* IE specific hover replacement */

/* End navigation bar style section */


/* links, bold, superscript and line break tags */

 /* default links */
 a:link {color: #ff0000; text-decoration: none;}
 a:visited {color: #000000; text-decoration: none;}
 a:hover {color: #0000ff; text-decoration: underline;}
 a:active {color: #ff0000}

 /* these are the links on the contact page, need to always remain same color for aesthetics */
 .contactlink:link {color: #ff0000; text-decoration: none;}
 .contactlink:visited {color: #ff0000; text-decoration: none;}
 .contactlink:hover {color: #ff0000; text-decoration: underline;}
 .contactlink:active {color: #ff0000}

 /* these are links inside the .caption TD class for systems specs and pricing links */
 .caption a:link {color: #ff0000; text-decoration: none;}
 .caption a:visited {color: #ff0000; text-decoration: none;}
 .caption a:hover {color: #0000ff; text-decoration: underline;}
 .caption a:active {color: #ff0000}

 sup {font-size: 12px;} /* this is for the little 2 above the TA2 logo, any larger and spacing gets thrown off */
 sub {font-size: 11px;}

 br {font-size: 8px;}

 b {text-align: center;}



/* end links and misc. small tags section */



/* top level body and html elements, necessary for centered content */

 html, body { text-align:center;
              margin: 0px auto;
              margin-top: 0px;
	      padding-right:0px;
	      padding-left:0px;
	      background-color: transparent;
            } 

/* end body, html elements */



/* main container div, centers content on page */

 .mainlayout { width: 800px;
	       margin: 0px auto;
	       height:100%;
           color: black;
           background-image: url('../img/bglinebig.png');
           padding-bottom: 1px;
	     }

/* end main div section */



/* form elements for quotes page */

 form { border: 0px;
 	padding: 0px;
 	background-color:#eeeeee;
 	width: 100%;
 	font-family:arial; 
 	text-align:left;
 	margin:0px;
      }

 select { margin:0px;
          padding:2px; 
          padding-right:2px;
        }

 textarea { width: 780px;
            height: 70px;
          }

 input { width: 780px;
         margin-bottom:1px;
       }

 input.button { width: 150px; }

 input.shorttext { width: 170px; }

/* end form elements */



/* tables and table elements */

 table { background-color:#990000;
         border: 1px #ff0000;
         border-style: solid;
       } 

 /* this is a plain table that floats left, used on contacts page */
 .cleartable { background-color:Transparent;
               border: 0px #ff0000;
               border-style: solid;
               float: none;
               width: 700px;
               margin: 0px auto;
             }

 /* this table is used on the quotes page */
 table.quote { border: 1px black; 
 	       border-top: 0px;
	       border-style: solid;
 	       padding: 0px;
 	       background-color:#eeeeee;
 	       font-family:arial; 
 	       text-align:left;
 	       margin:6px;
	       margin-top:0px;
	       margin-bottom:0px;
 	       font-size: 12px;
 	       width: 788px;
     	     }

 table.quote td { border-bottom: 1px #ff0000;
 		  border-top: 0px;
		  border-left: 0px;
 		  border-right: 0px;
		  border-style: solid;
		  padding:0px;
 		}

 /* these table elements are for the products/services blocks */
 table.pictureframe { text-align:left;
   		      width: 788px;
  		      margin: 6px;
  		      margin-top:0px;
  		      margin-bottom:0px;
 		      background-color:#aaaaaa; 	   
                    }

 /* this TD element sets the defaults for the .pictureframe class, which are modifed below...*/
 table.pictureframe td { border: 1px #000000;
       			 border-style:solid;
			 
                       }

 /* this is defined for .pictureframe TD elements that hold pictures only. */
 .picback { background-color: #ffffff;
            text-align:center;
            table-layout:auto;
            font-weight:bold;
            font-family:Arial;
            font-size:12px;
            /*width: 250px;*/
	  }

 /* this is defined for .pictureframe TD elements that hold long descriptions of products. */
 .description { font-size: 12px;
                font-family:arial;
                background-color: #eeeeff;
     	        text-align: justify;
    	        text-indent: 10px;
    	        padding: 3px;
     	        vertical-align: top;
                width: 250px;
               }

 /* this is defined for descriptions that need variable widths. */
 .descriptionStretch { font-size: 15px;
                font-family:arial;
                background-color: #eeeeee;
     	        text-align: justify;
    	        padding: 10px;
     	        vertical-align: top;
               }

 /* this is defined for .pictureframe TD elements that hold captions underneath pictures of products. */
 .caption { font-size: 12px;
            font-family:arial;
            background-color: #eeeeee;
            text-indent: 4px;
            font-weight: bold;
          }

/* end table elements */



/* image elements */

 img { border:0px; }
 
 .picture { width: 200px;
            height: auto;
            /*float:left;*/
            clear:none;
            z-index:1;
            white-space:nowrap;
	  }

 /* this is for inline images aligned to the left of content */
 .singlepicL { width: 200px;
               height: auto;
               float: left;
               clear: left;
               border: 1px #ff0000;
               border-style:solid;
               margin:1px;
               margin-right: 2px;
               vertical-align: middle;
	     }

 /* this is for inline images aligned to the right of content */
 .singlepicR { width: 200px;
               height: auto;
               float: right;
               clear: right;
               border: 1px #ff0000;
               border-style:solid;
               margin:1px;
               margin-left: 2px;
               vertical-align: middle;
	     }

 /* this is for the map picture on the contacts page, it is aligned to the right */
 .mapPic { width: 241px;
           height: auto;
           float: right;
           clear: none;
           border: 1px #ff0000;
           border-style:solid;
           margin:4px;
           margin-bottom: 0px;
           margin-left: 6px;
           vertical-align: middle;
	 }

 /* this is for the TA2 logo, it is aligned to the right */
 .inlineLogo { width: 125px;
               height: auto;
               float: right;
               clear: none;
               border: 1px #ff0000;
               border-style:solid;
               margin:4px;
	     }

 .banner { margin-bottom: 0px;
           margin-left: -11px;
           border: 1px #ff0000;
	   border-style:solid;
         }

 .topbanner { margin-bottom: 0px;
              margin-left: -10px;
            }

 .inlinebanner { margin-bottom: 0px;
                 margin-top: 2px;
                 margin-left: 0px;
                 border: 1px #ff0000;
	         border-style:solid;
               }

/* end image elements */

h1 {

font-family:Arial;
margin: 6px;
margin-top: 2px;
margin-bottom: 0px;
color: #ff0000;
text-decoration:none;
background-color:#dddddd;
background-image: url(../img/smbackg2.gif);
border: 1px black;
border-style: solid;
padding-left:5px;
padding-bottom:3px;
text-align: left;
   }

h3 {

font-family:Arial;
margin: 6px;
margin-top: 2px;
margin-bottom: 0px;
color: #ff0000;
text-decoration:none;
background-color:#dddddd;
background-image: url(../img/smbackg2.gif);
border: 1px black;
border-style: solid;
padding-left:5px;
padding-bottom:3px;
text-align: left;
   }

p {
 border: 1px;
 border-style: solid;
 padding: 10px;
 padding-left: 4px;
 background-color:#eeeeee;
 margin: 6px;
 font-family:arial; 
 text-align:justify;
 z-index:2;
  }
  
 p.block {
 border: 1px;
 border-style: solid;
 padding: 10px;
 background-color:#eeeeee;
 margin: 6px;
 color: #666666;
 font-family:arial; 
 text-align:justify;
 z-index:2;
 float:right;
 width:535px;
  }


        .footer {
         margin-top:2px; 
         width: 774px;
         text-decoration:none; 
         color:black; 
         text-align:center; 
         font-size: 10px;
         background-color:#eeeeee;
         border: 1px black;
         border-style: solid;
                }

        .body {margin-top:2px; margin-right:6px; margin-left:6px; margin-bottom:0px; text-align: justify;}
        .servbody {margin-top:0px; margin-right:6px; margin-left:6px; margin-bottom:2px;}

        .topper {margin-top:2px;  
                 border: 1px #000000;
                 border-bottom: 0px;
                 border-style: solid;
                 padding: 3px;
                 margin-bottom:0px;
                 color:#aa0000;
                 font-weight: bold;
                 background-image: url(../img/smbackg.gif);
                 width: 780px;
                }

        .topper2 {margin-top:2px;  
                 border: 1px #000000;
                 border-style: solid;
                 padding: 3px;
                 margin-bottom:0px;
                 color:#aa0000;
                 font-weight: bold;
                 background-image: url(../img/smbackg.gif);
                 width: 780px;
                }
                
 b.redBold {color:#ff0000; text-align:left;}
 b.grayBold {color:#aa7777; font-weight:bold;}

/* The following sections define various elements required for the
   javascript code used in the popup images and the clickable
   "slide-out" sections of the quotes page. These are necessary for
   the .js files to work properly. Any non-critical code for these
   portions of the site, like table formatting and styles will 
   be grouped in the appropriate sections above for consistency.
   There shouldn't be any reason to edit the values below. */


/* these div classes are defined for the slide-out javascript code on the quotes page */
 
 .slideout_header{ overflow:hidden;
		   cursor:pointer;
		 }

 .slideout_body{ visibility:hidden;
		 height:0px;
		 overflow:hidden;
		 position:relative;
	       }

 .slideout_body_content{ padding:0px;
			 position:relative;
		       }

/* end slideout div elements */



/* this code is for the image popup windows and the faded background */

 #lightbox{ background-color:#eee;
            padding: 10px;
	    border-bottom: 2px solid #666;
	    border-right: 2px solid #666;
	  }

 #lightboxDetails{ font-size: 0.8em;
	           padding-top: 0.4em;
	         }
	
 #lightboxCaption{ float: left; }

 #keyboardMsg{ float: right; }

 #closeButton{ top: 5px; right: 5px; }

 #lightbox img{ border: none; clear: both;} 

 #overlay img{ border: none;}

 #overlay{ background-image: url(../img/overlay.png); }

/* end image popup code */



/* the code below is for IE 7 and lower specific positioning */

 *html select {padding:0px;}
 *html table.quote { margin-top: 0px; border-style:solid; padding:0px;}
 *html form {margin-left:10px; margin-top: 0px;}
 *html iframe {margin: 0px;}
 *html .inlineLogo {margin-top:1px; margin-bottom:-3px}
 *html .topper{width: 788px}
 *html .topper2{width: 788px}
 *html .footer{width: 788px}
 /**html .singlepicL { margin-bottom:-2px; margin-top:5px;}
 *html .singlepicR { margin-bottom:-2px; margin-top:5px;}*/

 /* the section below is IE specific allowing for transparent "dimming" effect suring popup image viewing */
 *html #overlay
 { 
     background-color: #333;
	 background-color: transparent;
	 background-image: url(blank.gif);
     margin-top: 0px;
     margin-bottom: 0px;
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../img/overlay.png", sizingMethod="scale");
 }