/* Override the breadcrumb rules for corporate to make room for the corporate tools */
#corpTools
{
    border-bottom: 1px solid #B7E0FE;
    width: 960px;
    padding: 0;
    margin: 0;
}
#breadcrumb
{
    float: left;
    width: 70%;
    height: 36px;
    min-height: 36px;
    border: none;
    text-align: left;
    font-size: 90%;
    background: #fff;
}
#printMail
{
    float: right;
    width: 30%;
    height: 36px;
    min-height: 36px;
    text-align: right;
    font-size: 80%;
    background: #fff;
}
#breadcrumb ul, #printMail ul
{
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
#breadcrumb ul li, #printMail ul li
{
    display: inline;
    line-height: 36px;
    padding: 0px 20px 0px 10px;
    background: url(/images/nav/triangle.gif) 100% 50% no-repeat;
    color: #626363;
}
#facebooksharer
{
    background: none;
}

#breadcrumb ul li.last
{
    background: none;
}
#breadcrumb ul li a:link, #breadcrumb ul li a:visited, #printMail ul li a:link, #printMail ul li a:visited
{
    color: #626363;
    text-decoration: underline;
}
#breadcrumb ul li a:hover, #printMail ul li a:hover
{
    text-decoration: none;
}
#printMail ul li#mail
{
    padding: 5px 0 5px 30px;
    margin: 0 30px 0 0;
    width: 100px;
    height: 26px;
    background: url(/images/common/mail_button.gif) 0% 50% no-repeat;
}
#printMail ul li#print
{
    padding: 5px 0 5px 30px;
    margin: 0 10px 0 0;
    width: 100px;
    height: 26px;
    background: url(/images/common/print_button.gif) 0% 50% no-repeat;
}

#printMail ul li#facebooksharer
{
    padding: 5px 0 5px 30px;
    margin: 0 10px 0 0;
    width: 100px;
    height: 26px;
    background: url(/images/fb_sharebutton.gif) 0% 50% no-repeat;
}

#content
{
    width: 960px;
}

#main
{
    margin: 12px;
    padding: 0;
    float: left;
    display: inline; /* This hack overrides the IE double margin bug - http://www.positioniseverything.net/explorer/doubled-margin.html */
    text-align: left;
    width: 712px;
}
#main img
{
    float: left;
    margin: 0 12px 12px 0;
}
#main div p, #main div ul
{
    width: 450px;
    margin: 6px 0 6px 0;
    float: right;
}

/* need this hack to position lists properly when they're beside images */
ul.besideImage li
{
    _float: none;
    margin: 12px 0 0 0;
    padding: 0;
    _margin-left: 224px !important;
}

#main ul li
{
    margin: 4px 0 4px 24px;
}

/* styles for all input tables */
.tableHolder
{
    text-align: center;
    width: 712px;
    clear: both;
}

.uppercaseText
{
    text-transform: uppercase;
}

.tableHolder table
{
    width: 712px;
}

.tableHolder table td
{
    padding: 3px;
    font: 80% arial, helvetica, sans-serif;
}

.tableHolderLeft
{
    text-align: left;
    width: 712px;
    clear: both;
}

.tableHolderLeft table
{
    width: 712px;
}

.tableHolderLeft table td
{
    padding: 3px;
    font: 80% arial, helvetica, sans-serif;
}

td.label
{
    width: 221px;
    text-align: right;
    line-height: 100%;
    vertical-align: 10%;
}

td.labelContact
{
    width: 190px;
    text-align: right;
    line-height: 100%;
    vertical-align: 10%;
}
td.field
{
    text-align: left;
    vertical-align: top;
}

/* This table holds all the red question mark rollover things */
table.pop
{
    width: 500px;
}
table.pop td
{
    font-size: 100%;
    vertical-align: top;
}

/* these are the popup box definitions */
table.pop td div#upc, table.pop td div#production, table.pop td div#upc_fr, table.pop td div#production_fr
{
    position: absolute;
    z-index: 1000;
    margin: -200px 0 0 20px;
    _margin: -200px 0 0 0;
    height: 300px;
    width: 280px;
    border: 1px solid #B7E0FE;
    background: #fff;
    display: none;
}

/* for additional text within the forms */
span.micro
{
    height: 25px;
    font-style: italic;
    color: #4F86BC;
    font-size: 100%;
    position: relative;
    top: 3px;
}

/* sometimes there're tiny word */
span.small
{
    font-size: 70%;
}

/* Gotta overwrite the #main img rule from up the tree */
td.field a img
{
    float: none;
    margin: 0 5px 0 5px;
    position: relative;
    top: 4px;
}

/* for form elements */
select
{
    width: 180px;
    border: 1px solid #B4E0FD;
    border-top: 2px ridge #B4E0FD;
    color: #0687DB;
}
#main input
{
    border: 1px solid #B4E0FD;
    border-top: 2px ridge #B4E0FD;
    display: inline;
}
.radioButtonList
{
    margin-left: 2px;
    margin-right: 5px;
}
/* gotta make the postal code brackets bigger */
.postalBrackets
{
    font-size: 160%;
}
textarea
{
    border: 1px solid #B4E0FD;
    border-top: 2px ridge #B4E0FD;
}
input.noBorder
{
    border: none;
}
span.noBorder input
{
    border: none;
}

/*right hand nav */

#right
{
    padding: 0;
    margin: 0;
    float: right;
    width: 210px;
    text-align: left;
    position: relative;
    vertical-align: top;
}
#right div
{
    border-bottom: 1px solid #B4E0FD;
    background: #FFF;
}

/* Sometimes (only the really awesome times) there are text fields on the right side too. */
#right div.rightForm
{
    background: #CEE9FC url(/images/corporate/Nestle_goodreport_en.jpg) 0% 0% no-repeat;
    height: 239px; /*padding:185px 0 0 0;*/
    position: relative;
    border: none;
    cursor: pointer;
}
#right div.rightForm_FR
{
    background: #CEE9FC url(/images/corporate/Nestle_goodreport_fr.jpg) 0% 0% no-repeat;
    height: 239px; /*padding:185px 0 0 0;*/
    position: relative;
    border: none;
    cursor: pointer;
}


#right input
{
    margin: 0 0 0px 15px;
    padding: 3px;
    _padding: 1px 3px 5px 3px;
    font-size: 90%;
    position: absolute;
    bottom: 5px;
}
#right input.rightFormField
{
    position: absolute;
    bottom: 35px;
}
#right p, #right h3
{
    margin: 15px;
}

#right div.noborder
{
    border: none;
}

#right div .related
{
    background: #FFF;
    padding: 12px;
}
#right .related span.header
{
    display: block;
    height: 19px;
    color: #0671B5;
    background: url(/images/articles/round_button_brown.gif) 0% 0% no-repeat;
    line-height: 19px;
    padding: 0 0 0 25px;
    font-weight: 700;
}

#right .divider
{
    text-align: center;
    margin: 12px 12px 20px 12px;
}

#right ul
{
    margin: 12px 12px 12px 0;
    padding: 0;
    list-style-type: none;
}
#right ul li
{
    margin: 5px 0;
}

span.indent
{
    /*Used for indentation in right hand nav in corporate context */
    display: block;
    padding-left: 10px;
}

/* Need to add shadows to the bottom of each column in some contexts
   background image is almost always over-written in one of the colour-specific sheets */

#theShadow
{
    float: none;
    clear: both;
    height: 11px;
    background: url(/images/articles/bottomShadow.gif) bottom right no-repeat;
}

#Contactus1_optin_fr
{
    width: 100px;
}

div.errText p
{
    padding-left: 4px;
}