/* EASY-PIPER.COM */
/* Date: September 9th, 2006 */
/* Developer: Uffenorde.com */

/*=========================================*/
/*
/* COLORS
/*
/*=========================================*/

/* #666633 /* GREEN */
/* #993300 /* RUST */
/* #660000 /* MAROON */
/* #996666 /* MAUVE */
/* #336666 /* TEAL */
/* #AF6E0D /* BROWN */
/* #b09b49 /* SANDY */



body{
  color: #404041;
	margin:0;
	padding:0;
  font-family: Verdana, sans-serif;
  font-size: small;
  text-align: center;
}

#header, #content, #footer { width: 750px; margin: 0 auto; text-align: left; }

#content h1 { margin-bottom: 1em; }

a { color: #336666; }
a:hover { font-weight: bold; }

.fullwidth  { width: 100%; }
.left       { float: left; }
.right      { float: right; }
.large      { font-size: 150%; }
.backwards  { unicode-bidi:bidi-override; direction: rtl; }

tr.even td { background-color: #DEDEDD; }

a img { border-width: 0; }

li img { vertical-align: middle; }
ul { margin: 0; padding: 0; }

ul.TwoCol {
  width: 80%; margin: 0 auto;
  list-style-type: none;
}
ul.TwoCol li { list-style-type: none; }
ul.TwoCol .left,
ul.TwoCol .right { width: 48%; }


span.caption {
  font-size: 10px; font-style: italic;
  display: block;
}
ul.TwoCol ul li { margin-left: 2em; line-height: 4; }
#wrapper{
	margin:0;
	padding:0;

}

ul.TwoCol ul.nomargin li { margin-left: 0; }

p.alert {
	font-weight: bold;
	font-style: normal;
	color: red;
     font-family: Verdana, sans-serif;
	}
p.footNote{
     font-weight: normal;
     font-size: 70%;
	font-style: normal;
	color: black;
     font-family: Verdana, sans-serif;
}  


ul#HomePageVideos {
  background: url("images/videos_ul_bg.gif") no-repeat bottom center;
  height: 370px; clear: both;
  list-style-type: none;
  margin: 0 0 3em 0; padding: 0;
}

ul#HomePageVideos li { width: 200px; list-style-type: none; }


h2#PrintableMaterials {
  background: url("images/h2_printable_materials.gif") no-repeat;
  height: 30px; width: 100%;
  text-indent: -9000px;
}

h2#WhyEasyPiper {
  background: url("images/h2_why_easy_piper.gif") no-repeat;
  height: 30px;
  width: 100%;
  text-indent: -9000px;
}

/* --------------------------------------------------------------------------*/
/* ->> HIGHSLIDE POPUPS <<---------------------------------------------------*/
/* --------------------------------------------------------------------------*/

li.highslide-move { display: none !important; }


/* --------------------------------------------------------------------------*/
/* ->> HEADER <<-------------------------------------------------------------*/
/* --------------------------------------------------------------------------*/


#header{
  background: url("images/header_bg.png") no-repeat center right;
	padding:0;
  width: 750px;
  overflow: visible;
}

#header h1 { 
  background: url("images/logo.gif") no-repeat top left;
  text-indent: -9000px;
  height: 100px;
}


#content{
  clear: both; 
  margin-top: 4em;
  padding: 0;
  font-family: verdana, sans serif;
  width: 750px;
}


/*================== CONTACT FORM SUCCESS ===============*/     
      #content h2.contactFormSuccess{
          color: #336666 /* TEAL */;
          border-bottom: 2px dotted #336666 /* TEAL */;
     } 
      
/*================== CONTACT FORM ERROR ===============*/     
      #content h2.contactFormError{
          color: #336666 /* TEAL */;
          border-bottom: 2px dotted #336666 /* TEAL */;
     }              

body#contact #content h1 {
  text-indent: -9000px;
  background: url("images/h1_contact_us.png") no-repeat;
}

     
/* --------------------------------------------------------------------------*/
/* ->> ABOUT US <<-----------------------------------------------------------*/
/* --------------------------------------------------------------------------*/

body#aboutUs #content h1 {
  text-indent: -9000px;
  background: url("images/h1_aboutus.png") no-repeat;
}

.missionStatement{
     
     border: 1px solid #b09b49 /* SANDY */;
     margin: 0 0 10px 0;
    
}
.missionStatement h3{
     font-weight: bold;
     font-size: 100%;
     font-style: italic;
     color:white;
     background: #b09b49 /* SANDY */;
     margin: 0;
     padding: 0px;
     text-align: center;    
}
.missionStatement p{
     font-weight: bold;     
     font-size: 80%;
     font-style: italic;
     color: #b09b49 /* SANDY */;
     padding: 5px 25px 5px 25px;
     line-height: 180%;
     
}

.aboutUsText{
     float: left;
     border: 1px solid #b09b49 /* SANDY */;
     margin: 0;
     padding: 0;
     width: 400px;

}
.aboutUsText p{
     padding: 10px;
     margin: 0;
}

.aboutUsImage{
     float: right;
     border: 1px solid #b09b49 /* SANDY */;
     padding: 4px;
     
}


/* --------------------------------------------------------------------------*/
/* ->> HOW IT WORKS <<-------------------------------------------------------*/
/* --------------------------------------------------------------------------*/

body#howItWorks #content h1 {
  text-indent: -9000px;
  background: url("images/h1_howitworks.png") no-repeat;
}

ul.HowItWorksSteps li {
  position: relative;
  list-style-type: none;
  padding: 0; margin: 0;
  border-top: #9a9a9a 1px solid;
  text-align: right;
  margin-bottom: 1.5em;
  zoom: 1;
  z-index: 100;
  width: 100%;
}

ul.HowItWorksSteps p {
  color: #7a7a7a;
  float: left;
  width: 275px;
  margin-top: 3em;
  margin-left: 25px;
  text-align: left;
}

ul.HowItWorksSteps h2 {
  background-color: #fff;
  background: url("images/howitworks_headers.png") no-repeat top left;
  color: #404041;
  height: 28px;
  left: 0px;
  padding-right: 0.5em;
  position: absolute;
  text-align: left;
  text-indent: -9000px;
  top: -14px;
  width: 300px;
  margin: 0;
}

ul.HowItWorksSteps img {
}

li.step1 h2 { width: 155px; }
li.step2 h2 { width: 228px; background-position: 0 -28px; }
li.step3 h2 { width: 159px; background-position: 0 -56px; }
li.step4 h2 { width: 151px; background-position: 0 -84px; }
li.step5 h2 { width: 114px; background-position: 0 -112px; }
li.step6 h2 { width: 300px; background-position: 0 -140px; }
li.step7 h2 { width: 308px; background-position: 0 -168px; }
li.step8 h2 { width: 300px; background-position: 0 -196px; }

#OptionalAccessories {
  background: #f6f1e9;
  border: 1px solid #336666;
  padding: 0 1em 1em 1em;
  text-align: center;
}

body#howItWorks #content #OptionalAccessories h1 {
  background-image: url("images/h1_optional_accessories.png");
  margin-bottom: 0;
  text-align: left;
}

/* --------------------------------------------------------------------------*/
/* ->> ECONOMICS <<----------------------------------------------------------*/
/* --------------------------------------------------------------------------*/
body#economics #content h1 {
  text-indent: -9000px;
  background: url("images/h1_economics.png") no-repeat;
  margin-bottom: 0;
}

body#economics #content ul { margin-left: 2em; }

table.ROI th {
  padding-right: 30px;
}

/* --------------------------------------------------------------------------*/
/* ->> ERGONOMICS <<---------------------------------------------------------*/
/* --------------------------------------------------------------------------*/

body#ergonomics #content h1 {
  text-indent: -9000px;
  background: url("images/h1_ergonomics.png") no-repeat;
}

ul.ErgonomicsOptions li {
  position: relative;
  list-style-type: none;
  border-top: #9a9a9a 1px solid;
  padding: 0; margin: 0;
  text-align: right;
  margin-bottom: 2.5em;
  padding-left: 2em; 
  zoom: 1;
}

ul.ErgonomicsOptions li p {
  margin: 1em 0;
}

ul.ErgonomicsOptions li img { float: right; }
ul.ErgonomicsOptions li * { text-align: left; }
ul.ErgonomicsOptions li li {
  border-top-width: 0;
  margin-bottom: 0.5em;
  text-align: left;
}

ul.ErgonomicsOptions h2 {
  background-color: #fff;
  background: url("images/ergonomics_headers.png") no-repeat top left;
  color: #404041;
  height: 28px;
  left: 0;
  padding-right: 0.5em;
  position: absolute;
  text-align: left;
  text-indent: -9000px;
  top: -14px;
  width: 180px;
  margin: 0;
}

ul.ErgonomicsOptions li.PipingBag h2 { width: 187px; }
ul.ErgonomicsOptions li.EasyPiper h2 { background-position: 0 -28px; width: 98px; }

h2.HandPositions {
  background: url("images/ergonomics_headers.png") no-repeat top left;
  background-position: 0 -56px;
  text-indent: -9000px;
}

ul.HandPositions li {
  list-style-top: none;
  margin: 0 0 0 0;
  padding: 0;
  width: 24%;
}

/* --------------------------------------------------------------------------*/
/* ->> CONTACT US <<---------------------------------------------------------*/
/* --------------------------------------------------------------------------*/
ul#ContactSidebar {
  float: right;
  list-style-type: none;
  width: 250px;
}



/*=========================================*/
/*
/* FAQ PAGE
/*
/*=========================================*/


fieldset.faqFieldset {
     margin: 10px;
     padding: 10px;
     border: 1px solid #660000 /* MAROON */;
}
fieldset.faqFieldset legend{
     font-weight: bold;
     font-size: 90%;
     color: #660000 /* MAROON */;
     margin:  0 0 10px 0;
}
fieldset.faqFieldset img {
     margin: 10px;
     padding: 3px ;
     border: 1px dotted #660000 /* MAROON */;
}
p.faqP{     
     float:right;
     width: 330px;
     margin: 0;
     padding: 0;
}
fieldset.faqFieldset p{
     margin: 0;
     padding: 0;
}






/*=========================================*/
/*
/* FOOTER
/*
/*=========================================*/

#footer{
     clear: both;
     background: #AF7029; /* BROWN */;
     height: 51px ;
     width: 750px;
     margin-top: 3em;
}
  #footer p{
    font-size: 60%;
    color:white; 
    margin: 3px 0 0 3px;    
    padding: 0;
  }

/*================== FOOTER TEXT LINKS ===============*/     

#footer ul li a, #footer ul li a:visited, #footer ul li a:active{
     color: white;
     font-family: verdana, sans serif;
     font-size: 60%;
     font-weight: normal;
     text-align: left;  
     border-right: 1px solid #660000 /* MAROON */;
     margin: 0;
     padding: 0 4px 0 0 ;
     text-decoration: none;
}
#footer ul li a:hover{
     color: white;
     font-family: verdana, sans serif;
     font-size: 60%;
     font-weight: normal;
     text-align: left;  
     border-right: 1px solid #660000 /* MAROON */;
     margin: 0;
     padding: 0 4px 0 0 ;
     text-decoration: underline;
} 
/*================== FOOTER DESIGN BY: UFFENORDE.COM ===============*/   
         
#footer h6{
     float: right;
     text-align:right;
     color: white;
     font-family: verdana;
     font-size: 60%;
     font-weight: normal;
     margin: 5px 0 0 0;
     padding: 0;
}
#footer a, #footer a:visited, #footer a:active{
     color: white;
     text-decoration: none;
     font-family: Verdana, sans-serif;
     font-weight: normal;
     text-decoration: none;
}
#footer a:hover{
     color: white;
     text-decoration: none;
     font-family: Verdana, sans-serif;
     font-weight: normal;
     text-decoration: underline;
}  









   

/*=========================================*/
/*
/* NAVIGATION
/*
/*=========================================*/

ul#mainMenu {
     clear: both;
     border:0; height: 30px; 
     margin: 0 0 0 0; 
     list-style-type:none;
}
ul#mainMenu li {
     display:block; 
     width:122px;  
     height:30px; 
     float:left; 
     margin-left:1px; 
     position:relative;
}
ul#mainMenu li a{
     display:block; 
     width:122px;  
     height:30px; 
     text-decoration:none; 
     border-top:10px solid white;
     background: #336666;
     color:white;
     font-family:verdana, sans-serif;
     position:relative;
     font-size: 80%;
}
* html ul#mainMenu li a {
     height:30px; 
     he\ight:30px;
}
ul#mainMenu li a b {
     font-weight:normal; 
     position:absolute; 
     bottom:5px; 
     left:5px;
}


ul#mainMenu li a.navHome       { background: #000000; border-top: 10px solid black; }
ul#mainMenu li a.navHowItWorks { background: #336666; border-top: 10px solid #336666; }
ul#mainMenu li a.navEconomics  { background: #666633; border-top: 10px solid #666633; }
ul#mainMenu li a.navErgonomics { background: #660000; border-top: 10px solid #660000; }
ul#mainMenu li a.navFaq        { background: #996666; border-top: 10px solid #996666; }
ul#mainMenu li a.navContact    { background: #336666; border-top: 10px solid #336666; }
ul#mainMenu li a.navAboutUs    { background: #b09b49; border-top: 10px solid #b09b49; }

ul#mainMenu li a:hover {
     border-top:10px solid white; 
     cursor:pointer;
}
ul#mainMenu li em {
     font-weight:normal; 
     position:absolute; 
     bottom:5px; 
     left:5px; 
     font-style:normal; 
     font-family:verdana, sans-serif;
}

ul#mainMenu li a em {
     font-weight:normal; 
     position:absolute; 
     bottom:5px; 
     left:5px; 
     font-style:normal; 
     font-family:verdana, sans-serif;
}

/*================== STICKY NAVIGATION ================*/

body#home       #currentTab-navHome a,
body#ergonomics #currentTab-navErgonomics a,
body#economics  #currentTab-navEconomics a,
body#howItWorks #currentTab-navHowItWorks a,
body#faq        #currentTab-navFaq a,
body#contact #currentTab-navContact a, body#aboutUs #currentTab-navAboutUs a{
     display:block; 
     width:124px;
     height:30px; 
     border-top: 10px solid white;
     text-decoration:none; 
     color:white;
     font-family:verdana, sans-serif;
     position:relative;
     font-size: 80%;
     cursor:default;
 }
 
/*=========================================*/
/*
/* COLORS
/*
/*=========================================*/

/* #666633 /* GREEN */
/* #993300 /* RUST */
/* #660000 /* MAROON */
/* #996666 /* MAUVE */
/* #336666 /* TEAL */
/* #AF6E0D /* BROWN */
/* #b09b49 /* SANDY */
 

/*=========================================*/
/*
/* CLEAR FIX
/*
/*=========================================*/  

.clearFix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearFix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearFix {height: 1%;}
.clearFix {display: block;}
/* End hide from IE-mac */