html{
overflow-y:-moz-scrollbars-vertical;/* shows right scroll all the time to avoid screen jumping on smoke out */
overflow-y:scroll;
}
html.noscroll{/* this class is applied when we disallow scrolling during smoke-out*/
position:fixed;
overflow-y:scroll;
width:100%;
}
body{
background-color:#FFFFFF;
margin-top:10px;
font-family:"Ubuntu",arial,helvetica,sans-serif;
font-weight:500;/*for Ubuntu*/
font-size:15px;
line-height:1.4; 
color:#46A147;/* green standard color font */
}
FORM{margin:0;}
IMG{border:0;}
a,a:link,a:active,a:visited{color:#379937;text-decoration:none;}
a:hover{color:#46A147;text-decoration:underline;}
div#page{
position:relative;
width:1120px;
margin:0 auto 0 auto;
}
/* body container thru end,including footer*/
div#bod{
position:absolute;
top:175px;/* starts below header */
left:0;
width:100%;
height:auto;
font-size:21px;
line-height:1.5;
font-family:"Ubuntu",arial,helvetica,sans-serif;
font-weight:500;/*for Ubuntu*/
color:#46A147;/* green standard color font */ 
}
/* HOME PAGE */
div.home_main{height:562px;positon:relative;}
div.home_bg{
position:absolute;
top:0;
left:0;
z-index:0;
width:100%;
height:570px;
overflow:visible;
}
div.home_bg img{width:1120px;height:568px;}
div.home_hand{
position:absolute;
top:48px;
left:558px;
z-index:1;
}
div.home_hand img{width:560px;height:515px;}
div.home_words{
position:absolute;
z-index:2;
top:150px;/*lower higher 200 so longer french version doesn't cut-off at bottom*/
left:100px;
width:500px;
overflow:hidden;
}
/* different for video pages */
div.videopage .home_words{top:50px;}
div.videopage .home_words p{font-weight:normal;}
div.videopage .home_words p a{text-decoration:underline;}
div.videopage .home_words p a:hover{text-decoration:none;color:black;}
div.videopage div.home_words div.video{margin-top:20px;}
div.videopage.video div.home_words{width:722px !important;}
div.videopage.video div.home_words iframe.videoClass{width:720px;height:405px;}
div.videopage.video div.home_words h1{font-size:30px;margin-bottom:20px;}
/* homepage statistics and report section */
div#home_green{/* bodyHalf */
background:#46A147;
height:560px;
overflow:hidden;
text-align:center;
line-height:1.3;/* so longer version of french version fits*/
}
/* statistics on homepage */
IMG.home_stats{
width:485px;
height:119px;
margin:0px auto 15px auto;
}
IMG.home_45{
width:180px;
height:171px;
margin:-10px auto 15px auto;
}
/* home report space */
div#home_report_slide_space{/* contains both reports on right */
height:560px;
width:100%;
overflow:hidden;
position:relative;
}
div#home_report_over_1, /* these overlay the home_report_slide_space (background) with a higher z-index of 1,but are currently not displayed till we slide them in */
div#home_report_over_2{
display:none;
width:100%;
height:560px;
overflow:hidden;
position:absolute;
top:0;
left:0;
z-index:1;
}
div#home_report_over_1_mobile,
div#home_report_over_2_mobile{
display:none;
width:100%;
height:auto;
overflow:hidden;
position:absolute;
top:0;
left:0;
z-index:1;
}
IMG.home_reports_enlarged{
height:560px;
width:100%;
cursor:pointer;
}
div#home_report_1,/* green background area on right */
div.home_report_2{/* white background area on right */
height:280px;
overflow:hidden;
background:#89C389;
text-align:center; 
position:relative;
}
div.home_report_2{background:#FFFFFF;}
IMG.home_report_white{/* inline image for report 1 */
width:485px;
height:162px;
margin:5px auto 0 auto;
}
div.click_to_enlarge_1{/*button*/
min-width:33%;
max-width:80%;
overflow:hidden;
white-space:nowrap; 
line-height:normal; 
margin:0 auto 0 auto;
border-radius:20px;
-moz-border-raduis:20px;
text-align:center;
padding:3px;
background:#FFFFFF;
cursor:pointer;
}
IMG.home_report_gray{/* inlineimage for report 2 */
width:485px;
height:157px;
margin:5px auto 0 auto;
}
div.click_to_enlarge_2{
min-width:33%;
max-width:80%;
overflow:hidden;
white-space:nowrap;
line-height:normal; 
margin:0 auto 0 auto;
border-radius:20px;
-moz-border-raduis:20px;
text-align:center;
padding:3px;
background:#89C389;
color:#FFFFFF;
cursor:pointer;
}
/* employee girl section */
div.home_employee{width:400px;height:486px;overflow:hidden;}
IMG#home_employee{width:400px;height:486px;}
/*div.text_next_to_employee{height:486px;overflow:hidden;} */
div#text_next_to_employee p:first-child{margin-top:50px;}

/* HOW IT WORKS */ 
div.howItWorks_left{
height:auto;
overflow:visible;
}
IMG#howItWorks_graphic{
/*width:515px;*/
height:993px;
width:100%;
height:auto;
}
div.howItWorks_right{
margin-top:-40px;
height:1650px;
overflow:hidden;/* avoids scrollbar */
}
div.howItWorks_right div.howItWorks_slider p{
font-size:15px;
line-height:1.4;
}
IMG.howItWorks_bxImage{height:125px;width:auto;}
div.howItWorks_video{padding-right:10px;}
div.howItWorks_video iframe{
width:100%;
height:300px;
border:1px solid #999999;
margin-bottom:15px;
}
div.howItWorks_video H3{
font-weight:normal;
text-align:center;
color:#76777A;
font-size:25px;
}
/* TRAINING PAGE  */
div#training_page .bodyPad{
padding-top:40px;
padding-bottom:40px;
}
div#train_box1st .bodyPad{
padding-top:20px;
padding-bottom:20px;
}
div#train_box1st p{color:#000000 !important;}
div.train_sep{
width:100%;
border-bottom:1px solid #eeeeee;
}
IMG.train_number{
float:left;
margin-right:20px;
width:35px;
height:35px;
}
div.train_box_text{/* bod size text inside the divs in the green and white boxes */
margin-top:8px;
margin-bottom:0;
font-size:22px;
line-height:32px;
}
div.train_green_box{
width:100%;
background:#89C389;/* faded green */
color:#FFFFFF !important;
}
div.train_white_box{
width:100%;
background:#FFFFFF;
}
div.train_logobox{/* box of floating logos inside the green and white boxes */
width:100%;
margin-top:20px;
height:120px;
}
div.train_logo{
float:left;
margin-left:45px;
text-align:center;
font-size:17px !important;
color:#000000 !important;
}
IMG.train_logo{height:105px;width:auto;}
div.train_logo_bars{float:left;margin-left:45px;}
IMG.train_logo_bars{height:105px;width:auto;}
/* BX SLIDER FOR HOW IT WORKS AND FOR TESTIMONIALS  */
#myBxSliderBox{display:none;}
/*BX SLIDER NOTE ON CHANGING THE COLOR OF THE TEXT (it's funky so use the following css to change the color of the text to whatever color you want -  the !important is,well,important to keep :) */
.bx-wrapper .bx-viewport p{color:#46A147 !important;}/* green */

/* VIDEO LOGIN PAGE*/
DIV#liErr{color:red;font-size:16px;margin-bottom:10px;}
TEXTAREA#vlig{width:150px;padding:5px;}
INPUT#liVidButton{padding:5px;}

 
/* SLIDE DOWN FOOTER CONTACT US FORM */
div#divContactForm{
display:none;/* until loaded by ajax */
text-align:center;
margin-bottom:20px;
padding:0;
margin:0;
color:#FFFFFF;
overflow:hidden;/* especially important for  smoke to not overflow */
}
div#contactRelative{
width:600px;
position:relative;
margin:0 auto 0 auto;
}
div#form-loader-smoke{/* inside of divContactForm */ 
display:none;
width:600px;
height:453px;
position:absolute;
background-color:#eeeeee;
top:0;
left:0;
z-index:1000;
opacity:0.8;
filter:alpha(opacity=80);/* For IE8 and earlier */ 	
border-radius:10px;
-moz-border-radius:10px;
}
div.greenWheelWhiteBG{/* the spinner is inside of this */
position:absolute;
top:105px;
left:260px;
z-index:1100;
background:#FFFFFF !important;
width:60px;
border-radius:10px;
-moz-border-radius:10px;
padding:10px;
text-align:center;
opacity:0.9 !important;
filter:alpha(opacity=99) !important;
}
div#divContactForm p{
font-size:17px;
margin:0;
line-height:normal;
}
div#contactFormERR{
display:block;
color:#FFFF00 !important;
font-size:17px;
margin-top:15px;
}
div#contactFormFields{
width:300px;
margin:0 auto 0 auto;
padding:0 0 20px 0;
border-radius:10px;
-moz-border-raduis:10px;
}
div#contactFormFields TEXTAREA,
div#contactFormFields SELECT,
div#contactFormFields INPUT[type="text"],
div#contactFormFields INPUT[type="email"],
div#contactFormFields INPUT[type="tel"]{
width:95%;
text-align:center;
font-size:20px;
line-height:normal;
padding:7px;
border:1px solid #46A147;/* normal site green */
border-radius:7px;
-moz-border-radius:7px;
background:#FFFFFF;
font-family:arial,helvetica,sans-serif !important;
font-weight:normal;
color:#46A147;/* normal site green */
}
div#contactFormFields TEXTAREA{resize:none !important;}/* don't allow resize or smoke won't cover this */
div#contactFormFields SELECT{width:auto;}
div#submitContactButton{
min-width:100px;
max-width:150px;
overflow:hidden;
margin-top:15px;
margin-left:auto;/*aligns right*/
margin-right:0;/*aligns right*/
/*margin-left:199px;*/
border-radius:20px;
-moz-border-raduis:20px;
padding:5px;
text-align:center;
background:#89C389;/* light faded green */ 
color:#FFFFFF !important;
line-height:normal;
cursor:pointer;
}
div#contactCloseButtonRight{
text-align:right;
}
div#contactCloseButton{
width:50px;
margin-top:15px;
border-radius:20px;
-moz-border-raduis:20px;
padding:5px;
background:#89C389;/* light faded green */ 
color:red !important;
cursor:pointer;
font-size:15px !important;
text-align:center;
}
div.fieldDiv{margin-top:15px;}
div.fieldErrContainer{}
div.fieldErr{
height:18px;
font-size:16px !important;
line-height:18px;
font-family:arial,helvetica,sans-serif !important;
font-weight:lighter;
text-align:left;
padding:1px;
overflow:hidden;
color:#FFFF00 !important;
}
/* colors */
.green{color:#218057;}
.red{color:#C43A31;}
.white{color:#FFFFFF !important;}
a.white:link,a.white:active,a.white:visited{color:#FFFFFF !important;text-decoration:none;}
a.white:hover{color:#f7f7f7;text-decoration:underline;}
.black{color:#000000;}
a.black:link,a.black:active,a.black:visited{color:#000000;}
a.black:hover{color:#404040;}
.yellow{color:#FFFF00;}/*yellow*/
.bold{font-weight:bold !important;}
/* other standard stuff */
.relative{positon:relative;}
.nobr{white-space:nowrap;}
.clear{clear:both;}
.mobileOnly{display:none;}
.textCenter{text-align:center;}
.textLeft{text-align:left;}
.textRight{text-align:right;}
.underline{text-decoration:underline;}
.bodyPad{padding:20px;}
.blockCenter{margin:0 auto 0 auto;}
.textCenter{text-align:center;}
.blockLeft{float:left;}
.blockRight{float:right;}
#container{width:100%;overflow:auto;}
.bodyThird{
float:left;
width:33%;
margin:0 !important;
padding:0 !important;
border:0 !important;
}
.bodyThirdLast{
float:left;
width:34%;
margin:0 !important;
padding:0 !important;
border:0 !important;
}
.bodyHalf{
float:left;
width:50%;
margin:0 !important;
padding:0 !important;
border:0 !important;
}

h1{
font-family:"Ubuntu",arial,helvetica,sans-serif;
font-size:50px;
margin-top:0px;
margin-bottom:0px;
line-height:normal;
color:#000000;
}
h2{
font-family:"Ubuntu",arial,helvetica,sans-serif;
font-size:42px;
margin-top:0px;
margin-bottom:0px;
line-height:normal;
color:#000000;
}
h3{
font-family:"Ubuntu",arial,helvetica,sans-serif;
font-size:32px;
margin-top:0px;
margin-bottom:0px;
line-height:normal;
color:#000000;
}
h1.white,h2.white,h3.white,p.white{color:#FFFFFF;}
h1.yellow,h2.yellow,h3.yellow,p.yellow{color:#FFFF00;}/*yellow*/