/*--------------------------------Many of these overwrite already existing selectors from widget.css-----------*/

/*For easier specific targetting-------------------------------------------------------------------------------*/
body#widget, body#widgetIntroduction, body#widgetBenefits, body#widgetConstruction, body#widgetInnovation {
	background:#333 none repeat scroll 0%;
	color:#FFFFFF;
}


/*main tool box container*/
#toolbox {
	width: 670px;
	background: #aa9977;
	margin: 0 auto;

}

/*-----------widget container*/

#toolbox #widget {
	width: 670px;
	height: auto;
	background: #333;
	float: left;
	text-align: left;
	position: relative;
}

#toolbox #widget h2 {
	color: #fff;
	background: #aa9977;
	padding: 15px 0 17px 30px;
	margin: 0 0 12px 0;
	border-bottom: 2px solid #fff;
	font-size: 1.5em;
}

/*makes sure everything is properly contained*/
#toolbox div.container,
#toolbox div.tabs,
#toolbox div.content {
	float: left;
}
	
#toolbox div.container {
	background: #333;
	height: auto;
	width: 670px;
	margin: 3px 0 0 0;
}

/*new BG img and color plus fixed height*/
#toolbox div.content {
	 background: #666666;
	 height: auto;
	 border-top: 2px solid #848484;
	 border-bottom: 2px solid #848484;
	 width: 670px;
}

/*--------------logo*/
div#logo {
	position: relative;
}

div#logo img {
	position: absolute;
	top: 17px;
	left: 577px;
}

/*------------tabs*/

#toolbox ul.tabs {
	width: 660px; /*670 minus 10 of left padding*/
	top: 2px;
	float: left;
	}
	
#toolbox ul.tabs li a {
	/*background-color: #333;
	border: 1px solid  #606060;
	border-bottom: 2px solid #848484;
	padding: 6px 15px 8px;
	text-transform: capitalize;*/
	background-color: transparent;
	border:1px solid #606060;
	border-bottom: 0;
	color:#FFFFFF;
	display:block;
	font-weight:bold;
	padding:6px 15px 7px;
	text-decoration:none;
	text-transform:uppercase;
	}
#toolbox ul.tabs li a.active {
	/*background-color: #666;
	border: 2px solid  #848484;
	border-bottom: 2px solid #666;*/
	background-color:#666666;
	border-color:#848484 rgb(132, 132, 132) rgb(102, 102, 102);
	border-style:solid;
	border-width:2px 2px 1px;
	color:#FFFFFF;
	}

/*--------------content*/

body#widgetIntroduction #toolbox #widget div#textual,
body#widgetIntroduction #toolbox #widget div#textual ul.details {
	width: 390px;
	height: auto;
	margin-left: 5px;
}

body#widgetIntroduction #toolbox #widget div.content div#visual {
	width: 211px;
	height: 94px;
}

body#widgetBenefits #toolbox #widget div#textual,
body#widgetBenefits #toolbox #widget div#textual ul.details {
	width: 220px;
	height: auto;
	margin-left: 5px;
}

body#widgetBenefits #toolbox #widget div#textual ul.details li {
	width: 220px;
}

body#widgetBenefits #toolbox #widget div.content div#visual {
	width:395px;
	height: 165px;
}

body#widgetConstruction #toolbox #widget div#textual,
body#widgetConstruction #toolbox #widget div#textual ul.details {
	width: 220px;
	height: auto;
	margin-left: 5px;
}

body#widgetConstruction #toolbox #widget div#textual ul.details li {
	width: 220px;
}

body#widgetConstruction #toolbox #widget div.content #visual {
	width:395px;
	height: 165px;
}

body#widgetInnovation #toolbox #widget div#textual {
	width: 360px;
	height: auto;
	margin-left: 7px;
}

body#widgetInnovation #toolbox #widget div#textual ul.details {/*to accomodate two column layout in Innovation*/
	width: 160px;
	margin-left: 7px;
	float: left;
}

body#widgetInnovation #toolbox #widget div.content #visual {
	width:300px;
	height: 165px;
}


#toolbox #widget div.container div.top_widget img {
	display: none;
	
}

#toolbox #widget div.content ul.details {
	margin-left: 22px;
}


/*--------------footer*/
#toolbox div#widgetFooter {
	padding: 6px 0 0 36px;
	width: 634px;
	height: 22px;
	font-size: 10px;
	background: #333 url(../images/arrow_yellow_dir_right.gif) 25px 9px no-repeat;
	border: none;
	clear: both; 
		
}

#toolbox div#widgetFooter a {
	color: #fff;
	
}
/*--------------scroll bar wrapper*/
div.scrollbar_wrapper{/*adjusted to accomodate the width swf*/
	width: 265px;

}

#widgetInnovation div.scrollbar_wrapper {/*added to override this selector in widget.css that is too wide */
  float:left;
  width:370px;
}

div.content #textual {
	padding: 10px 0 0 0;
}

div.content div#description {/*to accomodate two column layout in Innovation*/
	float:left;
	width:160px;
	margin-left: 15px;	
}