/*
CVS: $Id: $
Title: 
Copyright: (c) 2007
Author: Dennis J. Fesemyer
Company: MeToo Trikes 
Description: Main Site Controls
*/

/* basics
-------------------------------------------------------- */

a  {
   color: #000;
   text-decoration: none;
   }

   a:hover {
      color: #000;
      text-decoration: underline;
      }

      a:visited {
         text-decoration: underline;
         }


p {
   margin: 0 0 10px 0;
   }


strong {
   font-weight: bold;
   }

em {
   font-style: italic;
   }

img {
   display: block;
   border: 0;
   }
   
hr.dotted {
   display: block;
	width: 100%;
	height: 1px;
   border: 0; border-top: 1px dotted #66ccff;
   margin: 15px 0;
   clear: both;
}


hr {
   display: block;
	width: 100%;
	height: 1px;
   border: 0; border-top: 1px solid #ccc;
   }

h2 {
   font-size: 1.6em;
   margin: 10px 0;
   line-height: .5em;
   padding: 0;
   }

  
h5 {
   font-size: 1em;
   text-transform: uppercase;
   margin-top: 20px;
   padding: 0;
   }


/* layout
-------------------------------------------------------- */

#container:after,
#hpcontainer:after,
#left:after,
#hp-left:after,
#customize:after,
#right:after,
.chart:after {
			content: "."; 
			display: block; 
			height: 0; 
			clear: both; 
			visibility: hidden;
			}

/* layout
-------------------------------------------------------- */


body {
   background: #3399cc url(/images/bg.gif) top left repeat-x;
   font: normal 10px/14px  arial, verdana, sans-serif; color: #003333;    
   margin: 0; padding: 0;
   text-align: center;
   width: 100%;
   }


#hpcontainer {
   margin: 0 auto;
   background: transparent url(/images/hp-splat.jpg) 0 31px no-repeat;
   padding: 0 0 0 20px;
   text-align: left;
   width: 800px;
   width/**/:/**/ 780px;
   }
   
#container {
   margin: 0 auto;
   background: transparent url(/images/int-splat.jpg) 20px 31px no-repeat;
   padding: 0 0 0 20px;
   text-align: left;
   width: 800px;
   width/**/:/**/ 780px;
   }
   
   
   #left {
      clear: both;
      margin: 0;
      padding: 0;
      float: left;
      width: 300px;
      background: transparent url(/images/leftbg.gif) top left no-repeat;
      }
      
      
      #hp-left {
         clear: both;
         margin: 0;
         padding: 0;
         float: left;
         width: 300px;
         background: transparent url(/images/hp-leftbg.jpg) 0 205px no-repeat;
         }
      
      
      #hp-logo {
         font-size: 1em;
         height: 205px;
         margin: 0;
         padding: 0;
         width: 300px;
         }
         
         #hp-logo a {
            background: transparent url(/images/hp-logo.jpg) top left no-repeat;
            color: #333;
            display: block;
            height: 205px;
            outline: none;
            text-decoration: none;
            text-indent: -9999px;
            width: 300px;
            }
      
            #hp-logo a:hover {
               text-decoration: none;
               }
               
      h1#ridingisfun {
            margin: 0;
            text-indent: -9999px;
            font-size: 1px;
            padding: 0 0 5px 0;
            height: 34px;
            background: transparent url(/images/ridingisfun.gif) top left no-repeat;
            }
               
      .hp-intro {
         font-size: 1.4em;
         line-height: 1.3em;
         }
      
      #int-logo {
         float: left;
         font-size: 1em;
         height: 149px;
         margin: 0;
         padding: 0;
         width: 300px;
         }
         
         #int-logo a {
            background: transparent url(/images/int-logo.gif) top left no-repeat;
            color: #333;
            display: block;
            height: 149px;
            outline: none;
            text-decoration: none;
            text-indent: -9999px;
            width: 300px;
            }
      
            #int-logo a:hover {
               text-decoration: none;
               }
               
               
         #left-pix { 
            float: left;
            margin: 0;
            position: relative;
            width: 300px; height: 371px;
            }
            
         #left-pix span { 
            position: absolute; 
            width: 300px; height: 371px;
            background: transparent url(/images/lt-pix1.jpg) top left no-repeat;
            }
            
            #left-pix span.lt-troubleshooting { 
               background: transparent url(/images/lt-pix1.jpg) top left no-repeat;
               }
      
            #left-pix span.lt-about { 
               background: transparent url(/images/lt-about.jpg) top left no-repeat;
               }
               
            #left-pix .lt-products { 
               background: transparent url(/images/lt-products.jpg) top left no-repeat;
               }
      
            #left-pix .lt-sizing { 
               background: transparent url(/images/lt-sizing.jpg) top left no-repeat;
               }
               
             #left-pix .lt-howtoorder { 
               background: transparent url(/images/lt-howtoorder.jpg) top left no-repeat;
               }
               
         #customize {
            float: left;
            font-size: 1.2em;
            line-height: 1.2em;
            display: block;
            padding: 0 20px 50px 70px;
            margin: 20px 0 0 0;
            width: 300px;
            width/**/:/**/ 200px;
            }
            
            #customize h5 {
               font-weight: bold;
               margin: 0; padding: 0;
               color: #ccff33;
               }
               
/* product image map
-------------------------------------------------------- */         
         #product-left {
            line-height: normal;
            float: left;
            width: 300px;
            position: relative;
            height: 371px;
            background: transparent url(/images/lt-pix6.jpg) top left no-repeat;
            margin: 0; padding: 0;
            }
               
         #seat {
            position: absolute;
            top: 173px;
            z-index: 10;
            left: 46px;
            width: 253px;
            height: 191px;
            margin: 0; padding: 0;
            display: none;
            background: transparent url(/images/closeup1.png);
            }
            
         
         #product-shot {
            background: transparent url(/images/product-shot.jpg) top left no-repeat;
            height: 379px;
            width: 400px;
            position: relative;
            }
            
            #features a{
               position: absolute;
               height: 20px;
               width: 20px;
               text-decoration: none;
               outline: none;
               }
               
            #features a i { visibility: hidden; }
               
               a#one { top: 149px; left: 271px; }
                a#two { top: 97px; left: 312px; }
                 a#three { top: 293px; left: 214px; }
                  a#four { top: 228px; left: 255px; }
                   a#five { top: 31px; left: 191px; }
                    a#six { top: 39px; left: 323px; }
                     a#seven { top: 166px; left: 197px; }
                      a#eight { top: 251px; left: 169px; }
               
               
               a#one:hover #closeup{ 
                 display: block;
                 z-index: 11;
                  }
 
               
   #right {
      margin: 0;
      padding: 0 0 100px 0;
      float: right;
      width: 480px;
      }
      
      #topright { 
         float:left;
         position: relative;
         width: 460px; 
         height: 362px;
         }
   
      #topright span { 
         position:absolute; 
         width: 460px; 
         height: 362px;
         background: url(/images/hp-right1b.jpg) top left no-repeat;
         }

       
       #right-promo {
         float: left;
         font-size: 1em;
         height: 152px;
         padding: 0;
         width: 460px;
         }
         
         #right-promo a {
            background: url(/images/hp-right2b.jpg) top left no-repeat;
            color: #333;
            display: block;
            height: 152px;
            outline: none;
            text-decoration: none;
            text-indent: -9999px;
            width: 460px;
            }
      
            #right-promo a:hover {
               text-decoration: none;
               }
      
      
      #rtheading { 
            float:left;
            position: relative;
            width: 480px; height: 177px;
            }
            
         #rtheading span { 
            position:absolute; 
            width: 480px; height: 177px;
            background: url(/images/rt-heading1.gif) top left no-repeat;
            }
      
            #rtheading span.rt-about { 
               background: url(/images/rt-heading3.gif) top left no-repeat;
               }
               
            #rtheading span.rt-products { 
               background: url(/images/rt-heading2.gif) top left no-repeat;
               }
      
            #rtheading span.rt-sizing { 
               background: url(/images/rt-heading1.gif) top left no-repeat;
               }
               
             #rtheading span.rt-howtoorder { 
               background: url(/images/rt-heading4.gif) top left no-repeat;
               }
   
      #rtcontent {
         float: left;
         display: block;
         background-color: #bfe8fd;
         border-bottom: 1px solid #003333;
         margin: 0;
         font-size: 1.2em;
         line-height: 1.2em;
         padding: 20px;
         width: 460px;
         width/**/:/**/ 420px;
         }
         
         h1#heading {
            margin: 0;
            text-indent: -9999px;
            font-size: 1px;
            padding: 0 0 10px 0;
            height: 24px;
            }
            
            .hd-about {
               background: transparent url(/images/hd-aboutus.gif) top left no-repeat;
               }
            
            .hd-troubleshooting {
               background: transparent url(/images/hd-troubleshooting.gif) top left no-repeat;
               }

            .hd-products {
               background: transparent url(/images/hd-products.gif) top left no-repeat;
               }
               
            .hd-sizinginfo {
               background: transparent url(/images/hd-sizinginfo.gif) top left no-repeat;
               }
               
            .hd-howtoorder {
               background: transparent url(/images/hd-howtoorder.gif) top left no-repeat;
               }
               
             .hd-contact {
               background: transparent url(/images/hd-contact.gif) top left no-repeat;
               }
               
      #outertable {
         clear:right;
         border-top: 1px solid #66ccff;
         padding: 0 0 20px 0;
         margin-top: 20px;
         }
         
              
      .chart {
	  		border-bottom: 1px solid #66ccff;
	  		padding: 5px 0 ;
	  		display: block;
	  		}
	  		
	  		.top {
	  		   background-color: #d2effe;
	  		   }
	  		
	  		.stickers {
	  		   border-bottom: none;
	  		   }
	  		   
	  		   
	  	.cell {
	  		float: left;
	  		width: 100px;
         width/**/:/**/ 90px;
	  		padding: 0 0 0 10px; margin: 0;
	  		}
	  		
	   .lt-cell {
	      float: left;
	  		width: 100px;
         width/**/:/**/ 90px;
	  		padding: 0 0 10px 10px; margin: 0;
	  		}
	  		
	  		.first {
	  		   padding: 0 0 10px 0;
	  		   }
	  		   
	  	.parts-list {
	  		padding: 5px;
	  		text-align: center;
	  		background-color: #003333;
	  		border: 1px solid #ccff33;
	  		width: 200px;
	  		margin: 15px 0;
	  		}
	  		
	  		.parts-list a {
	  			text-decoration: none;
	  			font-size: 10px;
				text-transform: uppercase;
				padding: 0;
				color: #ccff33;
				}
				
				.parts-list a:hover {
	  				text-decoration: none;
					color: #fff;
					}
					
		.trouble {
			padding-bottom: 10px;
			margin: 20px 0 10px 0;
			border-bottom: 1px dotted #2f93c6;
			}
			
			.title {
				text-transform: uppercase;
				font: bold 12px arial, helvetica, sans-serif; color: #2f93c6;
				letter-spacing: .1em;
				}
			
	  		
/* list
-------------------------------------------------------- */


.specs {
   margin: 0;
   padding: 0 ;
   list-style-type: none;
   width: 210px;
   float: left;
   }
   
   .specs li {
      padding: 0 10px 5px 20px;
      width: 200px;
      width/**/:/**/ 170px;
      }
      
      .specs li#dot1 {
         background: transparent url(/images/1.gif) top left no-repeat;
         }
      
      .specs li#dot2 {
         background: transparent url(/images/2.gif) top left no-repeat;
         }
      
      .specs li#dot3 {
         background: transparent url(/images/3.gif) top left no-repeat;
         }
         
       .specs li#dot4 {
         background: transparent url(/images/4.gif) top left no-repeat;
         }
         
       .specs li#dot5 {
         background: transparent url(/images/5.gif) top left no-repeat;
         }
         
       .specs li#dot6 {
         background: transparent url(/images/6.gif) top left no-repeat;
         }
         
       .specs li#dot7 {
         background: transparent url(/images/7.gif) top left no-repeat;
         }
         
       .specs li#dot8 {
         background: transparent url(/images/8.gif) top left no-repeat;
         }
	  

/* form
-------------------------------------------------------- */

			
dl { 
	padding: 0; 
	margin: 0;
	clear: both;
}


dt { 
	width: 400px;
	text-align: left;
	float: left; 
	padding: 0; margin: 0px;
}

dd { 
	width: 400px;
	float: left; 
	text-align:left;
	margin: 0px;
	padding: 0 0 12px 0;
}

dd input.text, dd textarea {
   padding: 3px; 
	text-align:left;
   vertical-align:top;
	width: 400px;
	width/**/:/**/ 394px;
	border: 1px solid #66ccff;
	background-color: #fff;
	font: 1.1em Arial, Verdana, sans-serif; color: #003333; 
}

dd input.sm-text {
   padding: 3px; 
	text-align:left;
	margin-left: 5px;
   vertical-align:top;
	width: 52%;
	border: 1px solid #66ccff;
	background-color: #fff;
	font: 1.1em Arial, Verdana, sans-serif; color: #003333; 
}

dd select.sm-menu {
   padding: 2px; 
	text-align:left;
   vertical-align:top;
	width: 40%;
	border: 1px solid #66ccff;
	background-color: #fff;
	font: 1.1em Arial, Verdana, sans-serif; color: #000; 
}

dd input.image {
	text-align: right;
	width: 400px;
   vertical-align: top;
	border: none;
	background-color: #66ccff;
	font: 1em Arial, Verdana, sans-serif; color: #003333; 
}

dd.rule {
   padding: 0 0 6px 0;
   margin: 0 0 8px 0;
   border-bottom: 1px dotted #66ccff;
   }

.required {
   color: #F00;
   }

.thankyoupadding {
   height: 190px;
   }
   
.home dl {
   padding: 0;
   margin: 20px 0 0 0; 
	clear: both;
   }

.home dt {
   text-transform: uppercase;
   font: bold 10px/14px arial, sans-serif;
   padding: 0;
   width: 300px;
   }

.home dd {
   margin: 0;
   padding: 5px 0 15px 0;
   width: 300px;
   }

.home dd input.smtext {
   padding: 4px; 
   margin-right: 5px;
	text-align:left;
   vertical-align:top;
	width: 185px;
	width/**/:/**/ 173px;
	border: 1px solid #fff;
	background-color: #fff;
	font: 10px Arial, Verdana, sans-serif; color: #003333; 
}
      


/* footer
-------------------------------------------------------- */


   
#footer {
   clear: both;
   font: normal 10px arial, verdana, sans-serif; color: #000;
   height: 100px;   
   padding-top: 10px;
   text-align: left;   
   }
   
   .home #footer {
      border-top: 1px solid #000;
      padding-top: 3px;
      }


#footer a {
   font: normal 10px arial, verdana, sans-serif; color: #000;
   text-decoration: none;
   background-color: transparent;
   }

#footer a:hover {
   text-decoration: underline; color: #fff;
   background-color: #003333;
   }