/* styles.css
	This document contains elements that are used on specific pages.
*/


/* 1.0 Homepage */

.pg_homepage #mid .inner { width: 659px; float: right; }
            
    .pg_homepage .invader { width: 144px; height: 100px; position: absolute; top: 0px; right: 0px;}
        .pg_homepage .invader .hotspot,
        .pg_homepage .invader .element {position: absolute; width: 144px; height: 100px; top: 0px; left: 0px;  }
        .pg_homepage .invader .hotspot { z-index: 10; background: #fff; opacity: 0; filter: alpha(opacity=0);}
        .pg_homepage .invader .element { z-index: 9; }
    
    .pg_homepage .animation { width: 659px; height: 150px; margin-bottom: -150px }
    
    .pg_homepage .header { background: url(/App_Images/img_home.jpg) no-repeat; width: 659px; height: 361px; }
        
        .pg_homepage .header a {height: 111px; float: left; margin-top: 245px; }
        .pg_homepage .header .a { width: 93px; }
            .pg_homepage .header .a:hover { background: url(/App_Images/btn_home_a_on.gif) no-repeat; }
        .pg_homepage .header .b { width: 80px; }
            .pg_homepage .header .b:hover { background: url(/App_Images/btn_home_b_on.gif) no-repeat; }
        .pg_homepage .header .c { width: 80px; }
            .pg_homepage .header .c:hover { background: url(/App_Images/btn_home_c_on.gif) no-repeat; }
        .pg_homepage .header .d { width: 87px; }
            .pg_homepage .header .d:hover { background: url(/App_Images/btn_home_d_on.gif) no-repeat; }
        .pg_homepage .header .e { width: 80px; }
            .pg_homepage .header .e:hover { background: url(/App_Images/btn_home_e_on.gif) no-repeat; }
        .pg_homepage .header .f { width: 75px; }
            .pg_homepage .header .f:hover { background: url(/App_Images/btn_home_f_on.gif) no-repeat; }
        .pg_homepage .header .g { width: 74px; }
            .pg_homepage .header .g:hover { background: url(/App_Images/btn_home_g_on.gif) no-repeat; }
        .pg_homepage .header .h { width: 84px; }
            .pg_homepage .header .h:hover { background: url(/App_Images/btn_home_h_on.gif) no-repeat; }

    .pg_homepage #mid h1 { margin: 20px 30px 11px; }
    .pg_homepage #mid p { margin: 0px 5px 20px 30px; }


/* 2.1 About -> Company Info */

.pg_about #left { width: 252px; }
.pg_about #right { width: 494px; padding: 51px 12px 0px;}
    .pg_about #right .scrollable {  clear: both; height: 358px; margin-bottom: 22px; overflow: auto; padding-right: 19px; padding-bottom: 20px; margin-right: -19px; position: relative}
    .pg_about #right .scrollable_msg {  clear: both; height: 345px; margin-bottom: 35px; overflow: auto; padding-right: 19px; padding-bottom: 20px; margin-right: -19px; position: relative}
    .pg_about #right .spacer { height: 2px; display: block; margin-bottom: 20px;font-size: 2px; line-height: 2px; background: #60869f; }
        .pg_about #right .marg { margin-bottom: 25px; }

/* 2.2 About -> Message from President */

.pg_about #right ul.disc { list-style: disc; margin-bottom: 25px;}
.pg_about #right ul.disc li { margin-bottom: 5px; margin-left: 20px; }

/* 2.3 About -> Competitive Advantage */

.pg_about #mid .advantage { padding: 0px; width: 777px; }
.pg_about .advantage img { float: left; }
.pg_about .advantage .content {float: left; width: 495px; padding: 10px; margin: 41px 0px 0px -230px; background: #fff}
    .pg_about #mid .advantage .content p { margin-top: -10px; }

/* 2.4 About -> Facilities */

.pg_about #mid .facilities {padding-top: 0px; margin-top: 51px}
.pg_about #mid .facilities .hdn { display: none; margin-top: 0px; }
.pg_about #mid .facilities .hdn strong { display: block; }


/* 2.5 Contact */

.pg_about .form h1 { margin: 30px 0px 22px 149px; }
.pg_about .form #left { width: 225px; margin-left: 150px; font-size: 1.2em; display: inline; }
    .pg_about .form #left a { margin: 0px; font-size: 1.1em; position: absolute}
    .pg_about .form #left .lower { margin-top: 120px; font-size: .9em }
.pg_about .form #right { width: 323px; margin-left: 72px; padding: 0px; display: inline; }
.pg_about .form .txt, .pg_about .form .txtarea { font-family: arial; border: 1px solid #356486; width: 275px; display: block; margin: 2px 0px 12px}
    .pg_about .form .txtarea { height: 45px; font-family: arial; font-size: 12px; }
.pg_about .form .spacer { margin: 0px 0px 15px 150px; clear: both; font-size: 2px; line-height: 2px; height: 2px; background: #6f90a8; }
.pg_about .form address { font-style: normal; display: inline; float: left; width: 120px; margin-left: 150px; font-size: 1.1em;  padding-bottom: 30px  }
.pg_about .form .number { float: left; width: 150px; margin-left: 38px; display: inline;}
.pg_about .form .submit { float: right; margin-right: 45px; display: inline; position: relative; }
    .pg_about .form .submit a { float: right; }
.pg_about .form .ERROR { border: 1px solid #930; background: #ffffcb; color: #000; }

.pg_about .form #error {  display: none; color: #CF4400; padding: 2px 0px 6px; }

    .pg_about .form .success { position: absolute; text-align: right; visibility: hidden; width: 330px; top: 25px; right: -40px; color: #009900; font-weight: normal; line-height: 1.6em; height: 25px; }


/* Whats New */

.pg_whats_new #mid { background: url(/App_Images/bg_whatsnew.jpg) repeat-y; padding: 21px 0px 0px 26px;}
.pg_whats_new #mid h1.top { margin-top: -21px; margin-left: -26px; }
.pg_whats_new #mid #left { width: 468px }
    .pg_whats_new #mid #left img.new { width: 468px; height: 273px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 2px solid #414042;}
    .pg_whats_new #mid #left h2 { display: inline; color: #414142; font: bold 14px arial; letter-spacing: -1px;  }

    .pg_whats_new #mid #left ul { margin-bottom: 10px; }
    .pg_whats_new #mid #left li { display: block; margin-right: 20px; padding-left: 12px; height: 14px; line-height: 14px; background: url(/App_Images/ico_whatsnew_bullet.gif) top left no-repeat; }
    .pg_whats_new #mid #left li.title { display: inline; background: none; padding-left: 0px; margin-right: 5px}
    .pg_whats_new #mid #left li.first { display: inline; }
    .pg_whats_new #mid #left li a { color: #414142; font-weight: bold; font-size: 12px; }

.pg_whats_new #mid #right { float: right; margin-right: 25px; display: inline; }
.pg_whats_new #mid img.coffee { behavior: url(/App_Css/iepngfix.htc); position: absolute; z-index: 5; right: -29px; bottom: -40px; width: 172px; height: 167px}



/* 3.x Products Individual Pages */

.pg_products .invader { width: 144px; height: 100px; position: absolute; top: 375px; right: 0px;}
        .pg_products .invader .hotspot,
        .pg_products .invader .element {position: absolute; width: 144px; height: 100px; top: 0px; left: 0px;  }
        .pg_products .invader .hotspot { z-index: 10; background: #fff; opacity: 0; filter: alpha(opacity=0);}
        .pg_products .invader .element { z-index: 9; }


.pg_products #left { position: relative; width: 493px; z-index: 2; }
    .pg_products #left .large, .pg_products #left .medium, .pg_products #left .small { position: absolute; behavior: url(/App_Css/iepngfix.htc)} 
    .pg_products #left .large { left: 249px; top: 94px; z-index: 1; width: 245px; height: 245px;}
    .pg_products #left .medium { left: 95px; top: 21px; z-index: 2; width: 221px; height: 222px;}
    .pg_products #left .small { left: 144px; top: 220px; z-index: 3; width: 177px; height: 178px}

.pg_products #right { width: 284px; position: relative; z-index: 1; min-height: 500px; height: auto!important; height: 500px}
    .pg_products #right h1 { margin-top: 37px; height: 88px; float: right; text-align: right;margin-left: 0px; position: relative;}
    .pg_products #right ul.disc { clear: both; list-style: disc; margin-left: 70px; min-height: 200px; height: auto!important; height: 200px}
    .pg_products #right ul.disc li { margin-bottom: 5px; margin-left: 20px; font-size: 1.3em}
    
    .pg_products #right a.subpoint { color: #164c72; text-decoration: none; }
        .pg_products #right a.subpoint:hover { font-weight: normal; font-size: 18px;  }
        .pg_products #right a.on { font-size: 18px;   }
    
    .pg_products #right .spacer { margin: 20px 0px 15px -280px; position: relative; font-size: 2px; line-height: 2px; height: 2px; background: #6f90a8; }
    .pg_products #right .hdn_subpoint { display: none; margin: 0px 0px 0px -135px; position: relative; min-height: 120px; height: auto!important; height: 120px }
        .pg_products #right .hdn_subpoint ul { list-style: disc; }
        .pg_products #right .hdn_subpoint ul li { margin-bottom: 5px; margin-left: 20px; font-size: 1.2em}

    /* Background Images */
    
    .pg_products .antibac { background: url(/App_Images/bg_Products_Antibac.gif) no-repeat right bottom }
    .pg_products .babywipes { background: url(/App_Images/bg_Products_Babywipes.gif) no-repeat right bottom }
    .pg_products .bakingcups { background: url(/App_Images/bg_Products_Bakingcups.gif) no-repeat right bottom }
    .pg_products .coffeeneeds { background: url(/App_Images/bg_Products_Coffee.gif) no-repeat right bottom}
    .pg_products .facialcleanse { background: url(/App_Images/bg_Products_Facial.gif) no-repeat right bottom }
    .pg_products .household { background: url(/App_Images/bg_Products_Household.gif) no-repeat right bottom }
    .pg_products .mtt { background: url(/App_Images/bg_Products_MTT.gif) no-repeat right bottom }
    .pg_products .personalcare { background: url(/App_Images/bg_Products_Personal.gif) no-repeat right bottom }

/* 4.0 Contract Manufacturing */

.pg_contract #left { position: relative; width: 494px; z-index: 2; }
    .pg_contract .landing { height: 486px;}
    .pg_contract #left .large, .pg_contract #left .medium, .pg_contract #left .small { position: absolute; behavior: url(/App_Css/iepngfix.htc)} 
    .pg_contract #left .large { left: 249px; top: 94px; z-index: 1; width: 245px; height: 245px;}
    .pg_contract #left .medium { left: 95px; top: 21px; z-index: 2; width: 221px; height: 222px;}
    .pg_contract #left .small { left: 144px; top: 220px; z-index: 3; width: 177px; height: 178px}

    .pg_contract #left a { margin-left: 150px; font-size: 1.2em; }
        .pg_contract #left a.abs { position: absolute; bottom: 0px; }
        .pg_contract #left a:hover { font-size: 1.2em; }
.pg_contract #right { width: 251px; padding: 100px 12px 0px; z-index: 2;position: relative;margin-left: 1px; margin-right: -30px}
    
    .pg_contract #right h1 { margin-left: -15px; margin-top: -65px; position: absolute}
    .pg_contract #right .scrollable {  height: 365px; margin-bottom: 20px; overflow: auto; padding-right: 19px; padding-bottom: 20px; margin-right: -19px; position: relative}
    .pg_contract #right .spacer { height: 2px; display: block; font-size: 2px; line-height: 2px; background: #60869f; }
        .pg_contract #right .marg { margin-bottom: 25px; }

/* 4.1 Contract Manufacturing Form */

.pg_contract .form h1 { margin: 30px 0px 22px 149px; }
.pg_contract .form #left { width: 225px; margin-left: 150px; font-size: 1.2em; display: inline}
    .pg_contract .form #left a { margin: 0px; font-size: 1.1em; position: absolute}
    .pg_contract .form #left .lower { margin-top: 80px; font-size: .9em }
.pg_contract .form #right { width: 343px; height: auto; margin-left: 60px; padding-top: 0px; display: inline}
.pg_contract .form .txt, .pg_contract .form .txtarea { font-family: arial; font-size: 12px; border: 1px solid #356486; width: 275px; display: block; margin: 2px 0px 12px}
    .pg_contract .form .txtarea { height: 45px; }
.pg_contract .form .spacer { margin: 0px 0px 15px 150px; clear: both; font-size: 2px; line-height: 2px; height: 2px; background: #6f90a8; }
.pg_contract .form address { font-style: normal; display: inline; float: left; width: 115px; margin-left: 150px; font-size: 1.1em;  padding-bottom: 30px  }
.pg_contract .form .number { float: left; width: 150px; margin-left: 38px; display: inline;}
.pg_contract .form .submit { float: right; margin-right: 45px; display: inline; position: relative; }
    .pg_contract .form .submit a { float: right; }
.pg_contract .form .ERROR { border: 1px solid #930; background: #ffffcb; color: #000; }

.pg_contract #error {  display: none; color: #CF4400; padding: 2px 0px 6px; }

    .pg_contract .success { position: absolute; text-align: right; visibility: hidden; width: 330px; top: 30px; right: -40px; color: #009900; font-weight: normal; line-height: 1.6em; height: 25px; }


/* 5.0 Food Services & OCS Products */

.pg_food_services #mid { padding: 0px; width: 777px; }
.pg_food_services #mid h1 { padding-bottom: 20px; }
.pg_food_services img { float: left; }
.pg_food_services .content {position: relative; float: left; width: 505px; padding: 10px; margin: 50px 0px 0px -90px; background: #fff}
.pg_food_services #right .scrollable {  clear: both; height: 220px; margin-bottom: 22px; overflow: auto; padding-right: 19px; padding-bottom: 20px; margin-right: -19px; position: relative}
.pg_food_services #right .spacer { height: 2px; margin-top: 15px; margin-bottom: 10px; display: block; font-size: 2px; line-height: 2px; background: #60869f; }
.pg_food_services .content .links { position: absolute; bottom: -80px; right: 0px;width: 300px; }
    .pg_food_services #mid #right .content .links p { margin-bottom: 5px; text-align: right;}


/* 6.1 Career Opportunities -> Culture & Values */

.pg_careers #mid .culture { padding: 0px; width: 777px; }
.pg_careers .culture img { float: left; }
.pg_careers .culture .content {float: left; width: 495px; padding: 10px; margin: 41px 0px 0px -135px; background: #fff}
    .pg_careers .culture .content .ital { margin-left: 12px; margin-bottom: 20px}
    .pg_careers .culture .content .ital em { font-style: italic; }

/* 6.3 Career Opportunities -> Professional Development */

.pg_careers #left { width: 252px; padding-top: 5px}
.pg_careers #right { width: 494px; padding: 51px 12px 0px;}
    .pg_careers #right .scrollable {  clear: left; height: 390px; overflow: auto; padding-right: 19px; padding-bottom: 20px; margin-right: -19px; position: relative}
    .pg_careers #right .spacer { height: 2px; display: block; margin-bottom: 20px;font-size: 2px; line-height: 2px; background: #60869f; }
        .pg_careers #right .marg { margin-bottom: 25px; }

/* 6.4 Career Opportunities -> Job Openings Listings */

.pg_careers #mid .openings { padding: 0px; width: 777px; }
.pg_careers .openings img { float: left; }
.pg_careers .openings .content {float: left; width: 495px; height: 300px; padding: 10px; margin: 41px 0px 0px -230px; background: #fff}
    .pg_careers #mid .openings .content p { margin-top: -10px; }
.pg_careers .openings .content p { float:left; width: 400px; padding-top: 20px;}
.pg_careers #right ul.disc { clear: both; float: left; width: 500px; list-style: disc; margin-top: 20px;}
.pg_careers #right ul.disc li { margin-bottom: 15px; margin-left: 20px; font-size: 1.2em}

/* 6.4.x Career Opportunities -> Job Listings */

.pg_careers #mid .listing { padding: 0px; width: 777px; }
.pg_careers .listing img { float: left; }
.pg_careers .listing .content {float: left; width: 495px; padding: 10px; margin: 41px 0px 0px -230px; background: #fff}
    .pg_careers #mid .listing .content p { margin-top: -10px; }
.pg_careers .listing .content p { float:left; width: 400px; padding-top: 20px;}
.pg_careers .listing ul.disc { clear: both; float: left; width: 300px; list-style: disc; margin-top: 20px;}
.pg_careers .listing ul.disc li { line-height: 1.6em}
.pg_careers .listing em { font-style: italic; }

/* 6.4.x.x Career Opportunities -> Job Details */


.pg_careers #mid .details { padding: 0px; margin: 31px 0px 0px 149px; width: 630px; display: inline }

.pg_careers #mid .form { float: left; padding-bottom: 60px; display: none; position: relative;}

.pg_careers #mid .noscript { margin-top: -10px; position: relative; font-weight: bold; }
.pg_careers .details h2 { clear: both; font-size: 1.3em; font-weight: bold;  }
    .pg_careers .details .form h2 { font-size: 1.5em; margin-bottom: 15px}
.pg_careers .details h3 { font-size: 1em; color: #878579; margin-bottom: 25px; font-weight: normal}
.pg_careers .details .form .outer { width: 600px; border: 1px solid #164c72; background: #f1eedc; }
.pg_careers .details .form .outer td { border-bottom: 1px solid #d4d1c0; padding: 5px}
    .pg_careers .details .form .outer .nob { border: 0px; }
    .pg_careers .details .form .outer .nop { padding: 0px; }
    .pg_careers .details .form .outer .nopbtm { padding-bottom: 0px; }
    .pg_careers .details .form .outer .nopR { padding-right: 0px; }
    .pg_careers .details .form .outer .noptop { padding-top: 0px; }
    .pg_careers .details .form .outer .nopL { padding-left: 0px; }
   
    .pg_careers .details .form .outer .nom { margin: 0px; }
    .pg_careers .details .form .outer .nombtm { margin-bottom: 0px; }
    .pg_careers .details .form .outer .nomR { margin-right: 0px; }
    .pg_careers .details .form .outer .nomtop { margin-top: 0px; }
    .pg_careers .details .form .outer .nomL { margin-left: 0px; }
    
.pg_careers .details .form label { font-size: .8em; display: block;}
    .pg_careers .details .form label.norm { font-size: 1em; display: inline; }
.pg_careers .details .form .txt { font-family: arial; background: #FFF; border: 1px solid #356486; margin-top: 4px}

.pg_careers .details .form .inner { width: 600px; }
    .pg_careers .details .form .inner td { border: 0px}
    
.pg_careers .details .form .success {position: absolute; text-align: right; visibility: hidden; width: 450px; bottom: 22px; right: 0px; color: #009900; font-weight: normal; line-height: 1.6em; height: 25px;  }



/* EU Regulations */

.pg_eu #mid .listing { padding: 0px; width: 777px; }
.pg_eu .listing img { float: left; }
.pg_eu .listing .content {float: left; width: 495px; padding: 10px; padding-bottom: 0px; margin: 41px 0px 0px -230px; background: #fff}
    .pg_eu #mid .listing .content p { clear: both; padding-left: 20px; padding-bottom: 0px; margin-bottom: 0px; margin-top: -10px;  float: left; width: 400px }

/* Environmental Sustainability */

.pg_environmental #mid { background: url(/App_Images/bg_environmental.jpg) no-repeat; height: 508px }
.pg_environmental #left { width: 252px; }
.pg_environmental #right { width: 494px; padding: 51px 12px 0px;}
    .pg_environmental #mid .inner #right h1 { margin: -30px 0px 0px 40px; display: inline}
    .pg_environmental #mid .inner #right h1 img { display: block; }
    
    .pg_environmental #right .text { clear: both; padding-top: 25px; height: 260px; overflow: auto; padding-right: 19px;  margin-right: -19px; position: relative}
    .pg_environmental #mid .inner #right p { margin-bottom: 15px; }
    .pg_environmental #right span { clear: both; display: block; height: 2px; font-size: 2px; background: #576f91; margin-right: -18px; position: relative; }

    .pg_environmental #right ul { margin-top: 10px; height: 70px; overflow: auto; }
    .pg_environmental #right ul li { float: left; width: 230px; margin-bottom: 8px; display: inline }