/*
---------------------------------------------------------------------------------------- global
*/
html, body {
height: 100%;
min-height: 100%;
margin:5px 0 0 0;
padding:0px;
}
div.layout {
min-height: 100%;
}
* html div.layout { /*hack for IE5+*/
height: 100%
}

body {
	background-color:#F3F3F3;
	margin:0px;
	padding: 0;
	font-size: 62.54%;
	font-family: Arial, Helvetica, sans-serif;
}
div.layout {
	width: 860px;
	margin-left:auto;
	margin-right:auto;
	margin-top:0px;
}
.container{
	position:absolute;
	width:860px;
	background-color:#FFFFFF;
	background-image:url(curved_bg.jpg);
}
form {
	margin: 0;
}
img {
	border: none;
}
hr {
	border: solid 1px #E2E2E2;
	color: #E2E2E2;
	height: 2px;
}
hr.important {
	border: solid 1px #000000;
	color: #000000;
	height: 2px;
	width: 100%;
	margin: 15px 0 0 0;
}
div.scrollTerms {
	height: 100px;
	overflow: scroll;
	border: solid 1px #000000;
	margin: 5px 0 10px 0;
	padding: 5px;
	
}
span.required {
	font-size: 1.8em;
	font-weight: bold;
	line-height: 1em;
	color: #FF0000;
}
div.error {
	font-size: 1.2em;
	color: #FF0000;
	font-weight: bold;
	margin: 0 0 5px 0;
	padding: 5px 7px 5px 7px;
	background-color: #FFEAEA;
}
div.message {
	font-size: 1.2em;
	color: #0066CC;
	font-weight: bold;
	margin: 0 0 5px 0;
}
.hidden {
	display: none;
}
div.sessionDebug{
position:absolute;
top:10px;
left:5px;
width:400px;
z-index:2;
}
div.menu{
margin:30px 0px 0px 0px;
}
div.header div.subMenu{
position:absolute;
top:20px;
right:30px;
width:450px;
height:30px;
margin:0px;
border:none;
text-align:left;
}


a img{
	border:none;
}
a div{
	cursor:pointer;
}
.main{

background-image:url(home-main-bg.jpg);
width:840px;
height:390px;
background-attachment: left top;
background-repeat:no-repeat;
margin:-72px 0px 0px 0px;
padding:0px;
z-index:1;
border:none;
}
/*
---------------------------------------------------------------------------------------- abs pos for headings

.main h1{
position:absolute;
font-size:30px;
color:#FFFFFF;
width:500px;
top:280px;
left:25px;
font-weight:normal;
padding:0px;
margin:0px;
}
.main h2{
position:absolute;
top:330px;
left:25px;
width:350px;
color:#FFFFFF;
font-size:18px;
font-weight:normal;
padding:0px;
margin:0px;
}
.main p{
position:absolute;
top:380px;
left:25px;
width:350px;
color:#FFFFFF;
font-size:12px;
font-weight:normal;
padding:0px;
margin:0px;
}
*/
.main .headings{
position:absolute;
top:250px;
left:25px;
width:500px;
color:#FFFFFF;
}

.main h1{

font-size:30px;
color:#FFFFFF;
width:480px;
margin:0px;
font-weight:normal;
padding:0px;
}
.main h3{

margin:10px 0px 0px 0px;
width:480px;
color:#FFFFFF;
font-size:18px;
font-weight:normal;
padding:0px;

}
.main p{

margin:20px 0px 0px 0px;
width:480px;
color:#FFFFFF;
font-size:12px;
font-weight:normal;
padding:0px;
}

/*
---------------------------------------------------------------------------------------- table.input
*/
table.input {
	border-collapse: collapse;
	border: none;
	padding: 0;
	margin: 0;
	font-size: 1.2em;
	width: 100%;
}
table.input th {
	text-align: left;
}
table.input tr {
	padding: 5px 5px 0 0;
}
table.input col.label {
	width: 40%;
}
table.input col.field {
	width: 60%;
}


/*
---------------------------------------------------------------------------------------- table.input
*/
div.right table.input col.label {
	width: 25%;
}
div.right table.input col.field {
	width: 75%;
}


/*
---------------------------------------------------------------------------------------- table.survey
*/
table.survey {
	border-collapse: collapse;
	border: none;
	padding: 0;
	margin: 0;
	font-size: 1.2em;
}
table.survey th {
	text-align: left;
}
table.survey tr {
	padding: 5px 5px 0 0;
}
table.survey col.label {
	width: 80%;
}
table.survey col.field {
	width: 20%;
}


/*
---------------------------------------------------------------------------------------- header
*/
div.header {
	width:100%;
	position:relative;
	background-image:url(curved_bg_top.jpg);
	background-repeat:no-repeat;
	z-index:1;
}
div.header ul {
	list-style: none;
	height: 28px;
	margin: 0px 0px 0px 20px;
	padding: 0;
}
div.header ul li {
	float: left;
	font-size: 1.4em;
	font-weight: bold;
	margin: 0 10px 0 0;
	padding: 0;
}
div.header ul li a {
	text-decoration: none;
	color: #000;
	margin: 0;
	padding: 0;
}
div.header img.logo {
	border: none;
	margin:20px 0px 0px 20px;
}
div.accUserDisplay {
	border: none;
	text-align:right;
	margin:2px 15px 0px 0px;
	float:left;
	padding:0px;
	float:right;
}


/*
---------------------------------------------------------------------------------------- tabs
*/
div.header div.menu ul li.selected {
	/*background: url(right.gif) no-repeat right top;*/
	padding: 6px 0 3px 0;
}
div.header  div.menu ul li.selected a {
	color: #FFFFFF;
	/*background: url(left.gif) no-repeat left top;*/
	padding: 6px 5px 0 5px;
}
div.header div.menu  ul li {
	background: url(menuNoneRight.gif) no-repeat right top;
	padding: 5px 0 3px 0;
}
div.header  div.menu ul li a {
	background: url(menuNoneLeft.gif) no-repeat left top;
	padding: 5px 7px 3px 7px;
}
div.header  div.menu ul li.members a {
	color: #595959;
}
div.header  div.menu ul li.home a {
	color: #568F07;
}
div.header  div.menu ul li.homeCont a {
	color: #568F07;
}
div.header  div.menu ul li.packaging a {
	color: #10335b;
}
div.header  div.menu ul li.weee a {
	color: #6e1b51;
}
div.header  div.menu ul li.rohs a {
	color: #0090a3;
}
div.header  div.menu ul li.batteries a {
	color: #FE960A;
}

/*
---------------------------------------------------------------------------------------- sub menu mini
*/
div.header div.subMenu ul {
	
	text-align:right;
	width:320px;
	height:15px;
	text-transform:lowercase;
	font-size:11px;
	padding:0px;
	margin:0px;
	float:right;
}
div.header div.subMenu ul li {
	background-image: none;
	padding: 0;
	margin: 0;
	float:left;
	
}
div.header div.subMenu ul li a {
	
	background-image: none;
	padding: 0;
	margin: 0;
	font-size: .7em;
	font-weight: normal;
}
div.header div.subMenu ul li.selected {
}
div.header div.subMenu ul li.sep {
	border-right: 1px solid #000;
	margin: 5px 6px 0 3px;
	padding: 3px 0 0 0;
	font-size: 10px;
	height:8px;
}

/*
---------------------------------------------------------------------------------------- sub menu
*/
div.header div.menuBar ul.subMenu  {
	
	padding: 0;
	margin: 0px 0 0 25px;
}
div.header div.menuBar ul.subMenu li {
	background-image: none;
	padding: 0;
	margin: 5px 0px 0px 0px;
}
div.header div.menuBar ul.subMenu li a {
	color: #ffffff;
	background-image: none;
	padding: 0;
	margin: 0;
	font-size: .9em;
	font-weight: normal;
}
div.header div.menuBar ul.subMenu li.selected {
}
div.header div.menuBar ul.subMenu li.sep {
	border-right: 1px solid #fff;
	margin: 7px 6px 0 3px;
	padding: 3px 0 0 0;
	font-size: 8px;
}
div.menuBar{
	height:30px;
	width:830px;
	
}


/*
---------------------------------------------------------------------------------------- box panels
*/

.panelJoin{
position:absolute;
width:265px;
height:200px;
right:38px;
top:310px;
background-image:url(feature_box_join.jpg);
margin:10px 0px 0px 10px;

}
.panelLoggedIn{
position:absolute;
width:265px;
height:200px;
right:38px;
top:310px;
background-image:url(feature_box_loggedin.jpg);
margin:10px 0px 0px 10px;
z-index:99;
}

/*
----------------------------- clients
*/
.panelClients{
float:left;
width:265px;
background-image:url(feature_box_clients.jpg);
margin:10px 0px 0px 10px;
height:140px;
}
.panelClients .panelContent{
margin:15px 20px 20px 20px;
}
.panelClients .panelContent img{
float:right;
margin:0px 0px 0px 0px;
border:none;
}
.panelClients .panelContent p{
margin:40px 0px 0px 0px;
padding:0px;
}

/*
------------------------------ news
*/
.panelNews{
float:left;
width:265px;
background-image:url(feature_box_news.jpg);
margin:0px 0px 0px 10px;
height:140px;

}
.panelNews .panelContent{
margin:44px 20px 20px 18px;
}
.panelNews .panelContent a{
color:#000000;
}
.panelNews .panelContent p{
display:none;
margin:0px;
}
/*
------------------------------------------ members
*/
.panelMembers{
float:left;
width:265px;
background-image:url(feature_box_members.jpg);
margin:10px 0px 0px 10px;
height:140px;
}
.panelMembers .panelContent{
margin:40px 20px 20px 20px;
}

/*
--------------------------------------------------------------- login info panel
*/

div.loginInfoPanel{
width:220px;
font-size:1.3em;
color:#000000;
padding:10px;
margin:35px 0px 0px 12px;
overflow:auto;
}
div.loginInfoPanel span.prominent{
font-weight:bold;
}
div.loginInfoPanel UL{
margin:0px;
padding:0px;
list-style:none;

}
div.loginInfoPanel LI{
margin:2px;
padding:0px;
}
div.loginInfoPanel LI span.selected{
font-weight:bold;
}
div.loginInfoPanel table.input{
font-size:12px;
margin-top:15px;
}
div.loginInfoPanel .switchTo{
z-index:99;
background-color:#FFFFFF;
}
/*
---------------------------------------------------------------------------------------- custom panel
*/
div.right div.panel{

float:left;
width:265px;
margin:20px 0px 0px 10px;

clear:both;
}


/*
---------------------------------------------------------------------------------------- banner text
*/
div.header h1 {	
	position: absolute;
	top: 95px;
	margin: 0 0 0 33px;
	padding: 0;	
	color: #fff;
	font-size: 4em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
}
div.header h2 {
	position: absolute;
	top: 140px;
	margin: 0 0 0 35px;
	padding: 0;	
	color: #fff;
	font-size: 2em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
}
/*
---------------------------------------------------------------------------------------- highlight
*/

div.header div.highlight1{
position:absolute;
right:19px;
top:52px;
width:333px;
height:20px;

}
div.header div.highlight2{
position:absolute;
right:19px;
top:90px;
width:333px;
height:20px;

}

/*
---------------------------------------------------------------------------------------- content
*/
div.content {
	z-index: 1;
	background-color: #FF0000;
	position: relative;
	top: 60px;
}
div.homeImageLeft {
	float: left;
	clear: none;
	width: 237px;
	padding: 20px 0 20px 0;
	margin: -30px 0 0 0;
}
div.homeImageLeft p {
	float: left;
	width: 180px;
	position: absolute;
	top: 283px;
	left: 55px;
	clear: none;
	line-height: 13px;
}
div.homeImageRight {
	float: left;
	width: 210px;
	clear: none;
	padding: 20px 0 20px 0;
	margin: -30px 0 0 0;
}
div.homeImageRight p {
	float: left;
	width: 180px;
	position: absolute;
	top: 377px;
	left: 292px;
	clear: none;
	line-height: 13px;
}
div.testimonialContainer {
	position: absolute;
	top: 563px;
	left: 40px;
	font-size: 11px;
	padding: 0 0 0 20px;
}
div.testimonial {
	float: left;
	clear: none;
	width: 135px;
	height: 100px;
	text-align: center;
	margin: 0 0px 0 0px;
}
div.testimonial a {
	font-weight: bold;
}





/*
---------------------------------------------------------------------------------------- product download styles
*/
div.productPanelTabs{
display:block;
width:450px;
position:relative;
height:70px;
}

div.productPanelTabs div{
width:100px;
height:70px;
float:left;
text-align:center;
font-size:14px;
padding:10px 5px 0px 5px;
cursor:pointer;
font-weight:bold;
}

div.productPanelTabs div.selected2{
background-color:#EADBE9;
}
div.productPanelTabs div.selected1{
background-color:#DDE2E8;
}
div.productPanelTabs div.selected3{
background-color:#DBEFF2;
}
div.productPanelTabs div.selected6{
background-color:#FFF0DC;
}

div.productPanel2{
background-image:url(panel_bg_weee.jpg);
background-position:top left;
background-repeat:repeat-x;
width:450px;
height:480px;
padding:10px 0px 0px 10px;
display:none;
overflow:visible;
margin:0px;
}
div.productPanel1{
background-image:url(panel_bg_packaging.jpg);
background-position:top left;
background-repeat:repeat-x;
width:450px;
height:480px;
padding:10px 0px 0px 10px;
display:none;
overflow:visible;
margin:0px;
}
div.productPanel3{
background-image:url(panel_bg_rohs.jpg);
background-position:top left;
background-repeat:repeat-x;
width:450px;
height:480px;
padding:10px 0px 0px 10px;
display:none;
overflow:visible;
margin:0px;
}
div.productPanel6{
background-image:url(panel_bg_batteries.jpg);
background-position:top left;
background-repeat:repeat-x;
width:450px;
height:480px;
padding:10px 0px 0px 10px;
display:none;
overflow:visible;
margin:0px;
}

 div.productHost{
float:left;
margin:0px 5px 5px 0px;
color:#FFFFFF;
font-size:12px;
width:220px;
height:130px;
}
 div.productHost a, div.productHost a:visited{
 display:inline;
 padding:0px;
 margin:0px;
 color:#FFFFFF;
 }

 div.productHost div{
width:220px;
height:130px;
position:absolute;
background-position:top left;
background-repeat:no-repeat;
}
 div.productHost div img{
margin:11px 0px 0px 12px;
}
 div.productHost div div img{
margin:0px;
}

 div.productHost div h4{
bottom:17px;
left:20px;
color:#FFFFFF;
padding:0px;
font-size:12px;
font-weight:normal;
position:absolute;
margin:0px;
}
 div.productHost div.unitCost{
position:absolute;
width:70px;
height:70px;
right:0px;
top:0px;
}

div.productHost div  div.productSummary{
z-index:10;
display:none;
position:absolute;
top:0px;
left:0px;
width:185px;
height:115px;
padding:15px 20px 0px 20px;
font-size:12px;
}

 div.productHost div  div.productSummaryShow{
z-index:10;
display:block;
position:absolute;
top:0px;
left:0px;
width:185px;
height:115px;
padding:15px 20px 0px 20px;
font-size:12px;
color:#FFFFFF;
}




.product_2_bg{
background-image:url(products_weee_bg.png);

}
.product_2_summary{
background-image:url(products_weee_bg_summary.png);
}
.memberHeading2{
font-size:18px;
font-weight:bold;
clear:both;
border-bottom:1px solid #000000;
margin:0px 10px 10px 0px;
}

.product_1_bg{
background-image:url(products_packaging_bg.png);

}
.product_1_summary{
background-image:url(products_packaging_bg_summary.png);
}
.memberHeading1{
font-size:18px;
font-weight:bold;
clear:both;
border-bottom:1px solid #000000;
margin:0px 10px 10px 0px;
padding:0px;
}

.product_3_bg{
background-image:url(products_rohs_bg.png);

}
.product_3_summary{
background-image:url(products_rohs_bg_summary.png);
}
.memberHeading3{
font-size:18px;
font-weight:bold;
clear:both;
border-bottom:1px solid #000000;
margin:0px 10px 10px 0px;
}

.product_6_bg{
background-image:url(products_batteries_bg.png);

}
.product_6_summary{
background-image:url(products_batteries_bg_summary.png);
}
.memberHeading6{
font-size:18px;
font-weight:bold;
clear:both;
border-bottom:1px solid #000000;
margin:0px 10px 10px 0px;
padding:0px;
}


/*
---------------------------------------------------------------------------------------- left
*/
div.left {
	width: 498px;
	float: left;
	padding: 0 0 0 25px;
	margin: 0px 0 0px 0;
	position: relative;
	z-index: 1;
}
div.left h1 {
	font-size: 2em;
	margin: 0 0 10 0;
	padding: 0 0 0 0;
	color: #000000;
}
div.left h2 {
	font-size: 1.7em;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	color: #568F07;
}
div.left h3 {
	font-size: 1.5em;
	font-weight: bold;
	padding: 0;
	margin: 0;
}
h3 a {
	color: #000000;
	text-decoration: none;
}
div.left p {
	font-size: 1.2em;
	margin: 0 0 20px 0;
	padding: 0;
}
a {
	color: #568F07;
	text-decoration: none;
}
div.left li {
	font-size: 1.2em;
	margin: 0;
	padding: 0 0 10px 10px;
}
div.left li li{
	font-size: 1em;
}
div.left p.quote{
float:right;
width:280px;
}

/*
---------------------------------------------------------------------------------------- right
*/


div.right {
	float: left;
	min-height:200px;
	position: relative;
	
	
	
	background-repeat: no-repeat;
	width: 250px;
	margin: 0px 5px 115px 0;
	padding: 10px 20px 0 25px;
}
div.right h2 {
	color: #568F07;
	font-size: 1.7em;
	margin: 0 0 10px 0;
}
div.right h3 {
	font-size: 1.4em;
	font-weight: bold;
}
div.right p {
	font-size: 1.2em;
	margin: 0 0 25px 0;
}
div.right p.rss {
    clear:both;
	margin:0px 0px 0px 10px;
	padding:0px;
}
div.right p.rss p{
margin:0px;
padding:0px;
}
/*
---------------------------------------------------------------------------------------- join tabs
*/
ul.joinUsTabs{
width:563px;
height:125px;
position:absolute;
top:410px;
left:20px;
margin:0px;
padding:0px;
list-style:none;
list-style-type:none;
}
ul.joinUsTabs li{
height:125px;
width:190px;
margin:0px 0px 0px -20px;
padding:0px;
float:left;
}
ul.joinUsTabs li div{
width:190px;
height:125px;
}
ul.joinUsTabs li span.hide{
display:none;
}
ul.joinUsTabs li.tabUp0{
background-image:url(joinUsTabs0Up.png);
}
ul.joinUsTabs li.tabUp1{
background-image:url(joinUsTabs1Up.png);
}
ul.joinUsTabs li.tabUp2{
background-image:url(joinUsTabs2Up.png);
}

ul.joinUsTabs li.tabDown0{
background-image:url(joinUsTabs0Down.png);
}
ul.joinUsTabs li.tabDown1{
background-image:url(joinUsTabs1Down.png);
}
ul.joinUsTabs li.tabDown2{
background-image:url(joinUsTabs2Down.png);
}

/*
---------------------------------------------------------------------------------------- footer
*/
div.footer {
/*	position: absolute;
	top: 100%;
	border-top: solid 3px #F3F3F3;
	padding: 0 0 0 0; */
	/*margin: -65px 0 0 35px;*/
/*	margin: -0 0 0 35px;
	color: #666666;
	clear: both; */
	/*z-index: 0;*/
	clear:both;
	margin:0px;
	padding:50px 0px 0px 0px;
	width:860px;
}
.footer div{
	border-top:1px solid #000000;
	text-align:right;
	margin:0px 45px 0px 5px;
	height:60px;
	color:#666666;
}
.footer div p{
	margin:0px;
	font-size:12px;
}

/*
---------------------------------------------------------------------------------------- accordion
*/


.AccordionPanel {
	margin: 0px;
	padding: 0px;
}


.AccordionPanelTab {
	background-color: #eee;
	border-top: none;
	border-bottom: none;
	margin: 0px;
	padding: 2px;
	cursor: pointer;
	font-size:12px;
	-moz-user-select: none;
	-khtml-user-select: none;
}


.AccordionPanelContent {
	overflow: auto;
	margin: 5px 0 0 0;
	padding: 0 0 0 5px;
	height: 200px;
}


.AccordionPanelOpen .AccordionPanelTab {
	background-color: #ccc;
	font-weight: bold;
}


.AccordionPanelTabHover {
	color: #555555;
}
.AccordionPanelOpen .AccordionPanelTabHover {
	color: #555555;
}

.AccordionFocused .AccordionPanelTab {
	background-color: #eee;
}

.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
	background-color: #ccc;
}
.AccordionPanelContent p {
	margin: 0;
	padding: 5px 5px 0 5px;
}
div.AccordionPanelContent img {
 	margin: 0 5px 0 0;
}
.Accordion {
	border-left: none;
	border-right: none;
	border-bottom: none;
	overflow: hidden;
	width: 450px;
}

/* 
--------------------------------------------------------  FLASHREPLACE These are standard flashReplace styles... do not modify 
*/

.flashReplace-flash {
	visibility: visible !important;
	margin: 0;
}

.flashReplace-replaced {
	visibility: visible !important;
}

span.flashReplace-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.flashReplace-flash + div[adblocktab=true] {
  display: none !important;
}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the flashReplace text metrics since the flashReplace text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

div.flashReplace-hasFlash h1 {
	visibility: hidden;
	font-size: 30px;
	
}
div.flashReplace-hasFlash h2 {
	visibility: hidden;
	letter-spacing: -9px;
	font-size: 20px;
}

div.flashReplace-hasFlash h3 {
	visibility: hidden;
	letter-spacing: -6px;
	font-size: 24px;
}

div.flashReplace-hasFlash h4 {
	visibility: hidden;
	letter-spacing: -5px;
	font-size: 21px;
}


.flashReplace-hasFlash h5#pullquote {
	letter-spacing: -4px;
	visibility: hidden;
	font-size: 24px;
}
.noDisplay{
display:none;
}

/* 
--------------------------------------------------------  PRINT stylesheet
*/


@media print {
body {
	background-image: none;
	background-color: #FFFFFF;
}
div.layout {
	background-image: none;
	background-color: inhreit;
	left: 0;
	margin: 0;
}
div.header {
	top: 30px;
	background-position: left;
}
div.header div.accUserDisplay, div.header ul {
	display: none;
}
div.header img.logo {
	border: none;
	left: 0;
	top: -30px;
	
}
div.header h1 {	
	position: absolute;
	top: 95px;
	margin: 0 0 0 15px;
	padding: 0;	
}
div.header h2 {
	position: absolute;
	top: 140px;
	margin: 0 0 0 15px;
	padding: 0;	
}
div.left {
	top: 15px;
	clear: both;
	position: relative;
	margin: 0;
	padding: 0 0 0 15px;
	float: none;
	height: 0;	
}
div.right {
	top: 15px;
	clear: both;
	position: relative;
	margin: 10px 0 0 0;
	padding: 0 0 0 15px;
	background-image: none;
	background-color: inhreit;
	float: none;
	height: 0;
}
div.footer {
	/*top: 15px;*/
	clear: both;
	/*position: relative;*/
	margin: -120px 35px 0 35px;
	/*margin: 10px 0 0 0;*/
	padding: 10px 15px 0 15px;
	float: none;
	height: 0;
	border-top: solid 3px #F3F3F3;
	color: #666666;	
}
}