/* >> The Magnificent CLEARFIX << */
.clearfix:after, ul#callouts:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix, ul#callouts {display: inline-block;}
* html .clearfix, * html ul#callouts {height: 1%;} /* Hides from IE-mac \*/
.clearfix, ul#callouts {display: block;}


/* Primary Styles
======================================================== */
* {margin: 0; padding: 0;}
body {
	font-size: 12px; color: #737373;
	line-height: 15px;
	}

img {border: 0;}
fieldset {border: 0;}
.clear { clear: both; height: 0px; overflow: hidden; }


/* Text
======================================================== */
h1 {font-size: 18px; color: #606060; margin: 15px 0 15px 0;}
h2 {font-size: 12px; color: #737373; margin: 10px 0 0 0; padding: 0;}
h3 {font-size: 14px; color: #737373; margin: 0; padding: 0;}

P {margin: 0 0 20px; font-size: 12px; color: #737373;}

.answer {margin: 0 0 10px 0; padding: 0 0 10px 0;}
.required {color: #C70000;}
.warning {color: #C70000;}
.errorSummary, .errorSummary P, .errorSummary ul li {font-weight: bold; color: #C70000; margin: 0;}
	.errorSummary ul {padding-left: 25px;}

/* Footer Flags
======================================================== */
#footer {width: 745px;}
#footerflags {
	margin-bottom:5px;
	margin-left:485px;
	voice-family: "\"}\"";  
	voice-family: inherit;  
	margin-left:485px;    
	}

#footerflags img {
	margin-left:4px;
	margin-right:0px;
	border:0;
	padding:0;
	}


/* Left Navigation
======================================================== */
div#ideasLeftNav {
	position: absolute; top: 0; left: 0;
	width: 203px;
	font-size: 12px;
	}

	div#ideasLeftNav ul {
		list-style: none;
		background: url('../../Images/nav.png') 0 98px no-repeat;
		width: 203px; height: 124px;
		margin: 0; padding: 98px 0 0;
		}
	div#ideasLeftNav ul li {margin-bottom: 2px;}
	div#ideasLeftNav ul li a {
		display: block;
		height: 29px;
		text-indent: -9999em; overflow: hidden;
		}
	div#ideasLeftNav ul li a:hover,
	div#ideasLeftNav ul li.on a {background: url('../../Images/nav-on.png') 13px 11px no-repeat;}


/* Body Containers
======================================================== */
#masthead {margin-bottom: 27px;}
#mainContent {margin-left: auto; margin-right: auto;}
#bodyContainer {
	position: relative;
	background: #f2f5f7 url('../../Images/bg-LeftNav.gif') 0 0 no-repeat;
	width: 757px;
	}

div#bodyContentContainer {
	background: url('../../Images/bg-LeftNav.png') 0 100% no-repeat;
	width: 554px; min-height: 650px;
	padding: 0 0 0 203px; margin: 0;
	}
	* html div#bodyContentContainer {height: 650px;}

div#bodyText {padding: 1px 12px 12px;}
	div#bodyText ul {list-style-type: disc;}
	ol.bodyText li {color: #737373; font-size: 12px; margin: 0 0 10px 25px;}
	ul.bodyText li {color: #737373; font-size: 12px; margin: 0 0 5px 25px;}

/* Callouts
======================================================== */
div#bodyText ul#callouts {
	list-style: none;
	margin: 40px -8px 0 -5px;
	}
	ul#callouts li {
		position: relative;
		float: left; display: inline;
		background: url('../../Images/bg-callout.gif') 0 100% no-repeat;
		width: 158px; height: 108px;
		margin-right: 3px; padding: 9px 10px 0;
		overflow-y: hidden;
		}
		ul#callouts li p {
			font-size: 11px; line-height: 1.2;
			margin: 0 0 5px;
			}
		ul#callouts li select {width: 158px;}
		ul#callouts li a {position: absolute; bottom: 9px; left: 10px;}


/* About
======================================================== */
#about #bodyText ul {
	list-style: none;
	margin-bottom: 15px;
	}
	#about #bodyText li {
		height: 100px;
		padding: 17px 0 0 150px;
		border-top: 1px solid #e1e7ea;
		border-bottom: 1px solid #f9fafb;
		}
		#about #bodyText li h3 {
			color: #606060;
			margin: 0 0 5px;
			}
		#about #bodyText li .expanded {display: none;}

		#about #bodyText li.expandable {
			height: auto; min-height: 100px;
			padding: 17px 0 0 150px;
			border-top: 1px solid #e1e7ea;
			border-bottom: 1px solid #f9fafb;
			}
			#about #bodyText li.expandable h3 {
				background: url('../../Images/arrows.gif') 0 -37px no-repeat;
				margin-left: -15px; padding-left: 15px;
				cursor: pointer;
				}
			#about #bodyText li.expandable h3.open {background-position: 0 4px;}

	#about li#ingredients {background: url('../../Images/about-ingredients.jpg') 0 17px no-repeat; border-top: none;}
	#about li#products {background: url('../../Images/about-products.jpg') 0 17px no-repeat;}
	#about li#packaging {background: url('../../Images/about-packaging.jpg') 0 17px no-repeat;}
	#about li#processes {background: url('../../Images/about-processes.jpg') 0 17px no-repeat;}
	#about li#sustainability {background: url('../../Images/about-sustainability.jpg') 0 17px no-repeat; border-bottom: none;}


/* FAQs
======================================================== */
#faq ul#faqs {
	list-style: none;
	margin-bottom: 15px;
	}
#faq ul#faqs h2 {
	background: url('../../Images/arrows.gif') 0 -37px no-repeat;
	margin: 0 0 15px; padding-left: 20px;
	cursor: pointer;
	}
#faq ul#faqs h2.open {background-position: 0 4px;}
#faq ul#faqs p {
	display: none;
	margin: 0 10px 15px 30px;
	}

/* Submit Your Idea
======================================================== */
h1#submitHeader {
	background-color: #16314c; color: #FFFFFF;
	line-height: 52px;
	margin: 0; padding: 0 0 0 20px;
	}
	
div#showSteps {background-color: #E1E1E1; height: 70px;}
	div#showSteps ul {list-style: none; padding: 10px 0 0 10px; position: relative;}
	div#showSteps ul li {width: 100px; height: 50px; position: absolute;}
		div#showSteps ul li#step1 {}
		div#showSteps ul li#step2 {left: 120px;}
		div#showSteps ul li#step3 {left: 230px;}
		div#showSteps ul li#step4 {left: 340px;}
		div#showSteps ul li#step5 {left: 450px;}

#submitidea ol.bodyText {margin-bottom: 30px;}

/* Forms
======================================================== */
select { font-size: 12px; }
fieldset {
    display: block;
    margin: 20px 0 0 0;
    width: 100%;
    }

    fieldset ol {width: 100%;}
    fieldset ol li {
        margin: 0 0 10px 0;
        width: 100%;
        list-style: none;
        }
        fieldset ol li label {
            display: block;
            margin: 0 10px 0 0;
            color: #737373;
            font-size: 12px;      
            }
        fieldset ol li input {
			width: 275px;
			font-size: 12px;
			}
			
			fieldset ol li.radio {
				margin: 0 0 10px 0;
				width: 100%;
				list-style: none;
				}
				fieldset ol li.radio table label {
					display: inline;
					margin: 0 10px 0 0;
					padding: 0 0 0 5px;
					color: #737373;
					font-size: 12px;    
					vertical-align: middle;  
					}
				fieldset ol li.radio table input {
					width: 20px;
					font-size: 12px;
					vertical-align: middle;  
					}					
            fieldset ol li label em {
                margin: 0;
                font-style: normal;
                }

	fieldset ol ul {height: 35px;}
    fieldset ol ul li {display: inline; width: auto; padding-right: 10px; float: left;}

        select {
            padding: 0;
            width: 275px;
            font-size: 11px;
            }
            
    span#serialRegistrationNum {float: right; margin: 15px 45px 0 0; visibility: hidden; }
    span#namesOfOtherClaimantsHolder {float: right; margin: 15px 140px 0 0; visibility: hidden;}

/*  FORM CONTROLS
=================================================*/
fieldset.controls {margin: 25px 0; }
    fieldset.controls ul {margin-left: auto; margin-right: auto; text-align: right; padding-right: 10px;}
        fieldset.controls li {display: inline;}
            fieldset.controls li a {
                margin: 0;
                font-size: 1em;
                }
                
                fieldset.controls li img {vertical-align: middle; padding-left: 5px;}

fieldset fieldset.controls {margin: 10px 0 15px 0;}

div.formControls {margin-top: 25px;}
	div.formControls div.leftFormControls {float: left;}
	div.formControls div.rightFormControls {text-align: right;}
		div.formControls div.rightFormControls img {vertical-align: middle; padding-left: 5px;}

.acceptTable {margin-left: 30px;}
	.acceptTable td {padding: 2px;}
	.acceptTable input {vertical-align: middle;}
	.acceptTable label {padding: 0 0 0 7px;}
	
.thankYouPanel {border: solid 1px #000000; padding: 7px; margin: 10px 0;}
	.thankYouPanel h2 {padding: 0; margin: 0;}