/******************************************************************************
Cascading Style Sheet & Design by Tenaka's Tribe Productions www.tenaka.co.za
******************************************************************************/

* /*Set's border, padding and margin to 0 for all values*/
{
	padding: 0;
	margin: 0;
	border: 0;
}

body, html {
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #eee;
	text-align: center;
	background-image: url(../images/bg_grad.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center top;
	scrollbar-3dlight-color:#666;
	scrollbar-arrow-color:#ffa500;
	scrollbar-base-color:#fff;
	scrollbar-darkshadow-color:#666;
	scrollbar-face-color:#eee;
	scrollbar-highlight-color:#fff;
	scrollbar-shadow-color:#eee;
}

body {
	font-size: 10pt;
}

p {
	padding: 7px 0 7px 0;}

a {
	color: #DE9A27;
}
a:hover {
	color: #999999;
	text-decoration: none;
}

h1, h2, h3, h4, h5 {
	font-weight: bold;
	padding-bottom: 5px;
}
h1 {
	font-size: 1.4em;
	font-family:Arial, Helvetica, sans-serif;
	color: #333;
	font-weight:normal;
}

h2 {
	font-size: 1.2em;
	color: #777777;
	font-weight:normal;
	margin-top: 10px;
}
h3 {
	font-size: 1.1em;
	font-weight:normal;
}

h1 a, #header h2	{
	color: #fff;
}

.clear { clear: both; }

#mainContainer {
	width: 760px;
	margin: 0 auto;
	min-height: 300px;
	background: #FFF;
	text-align: left;
	border: 1px solid #f48d29;
}
* html #mainContainer {
height: 300px; /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
}

#growth_text {
	float:right;
	color:#de9827;
}

.epwp_orange {
	color:#de9827;
}
/**************************
HEADER
**************************/
#header {
background: #FFF;
}
/**************************
CONTENT AND COLUMNS
**************************/
.outer {
padding-left: 165px;  
padding-right: 120px;
}
* html .outer {

}
.inner {
width: 595px; /*** This width is for non-IE browsers. Mozilla makes this necessary. Be sure to check your layout in different browsers if you changes this value. Especially IE7 seems to create a horisontal scroll if this value is set too large ***/
}
* html .inner {
width: 100%;
}
/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid 
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout.
***/
.float-wrap {
float: left;
width: 630px;
margin-left: -165px; /*** Same length as .outer padding-left but with negative value ***/
}
* html .float-wrap {
/*** No need for hacking IE on this layout ***/
}
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left, 
div.left is carried over into the proper position. 
***/
#content {
	float: right;
	width:470px;
	background: #fff;
	position: relative;
	padding: 0px 5px;
}


.search_left {
	width:130px;
}

.contentWrap {
	padding: 5px;
	height:385px;
	overflow: auto;
	margin-bottom:10px;
	border-top: 1px none #f48d29;
	border-right: 1px solid #f48d29;
	border-bottom: 1px solid #f48d29;
	border-left: 1px solid #f48d29;
}
.contentWrapCopy {
	padding: 5px;
	border-top: 1px solid #f48d29;
	border-right: 1px solid #f48d29;
	border-bottom: 1px dashed #BCBCBC;
	border-left: 1px solid #f48d29;
}
.contentWrap ol, .contentWrap ul {
margin: 3px 0 5px 35px;
}
.contentWrap li {
padding-bottom: 2px;
}

#wrap_horizontal {
	overflow:scroll;
	width:458px;
}

#IndexWrap {
	height:371px;
	width:455px;
}

#IndexWrapCopy {
	width:455px;
}
/**************************
LEFT COLUMN
**************************/
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left, 
div.left is carried over into the proper position. 
***/
#left {
float: left;
min-width: 140px; /*** for firefox and IE7 only  ***/
background: #fff; 
min-height: 480px;
padding: 5px;
position: relative; /*** IE needs this  ***/
top:-30px;
}
* html #left {
height: 353px;
width: 135px;/*** IE needs this related to min width above  ***/
}
#left ul {
list-style: none;
padding-bottom: 4px;
}
#left li {
padding-bottom: 2px;
}

.left_boxes {
	padding: 3px;
	margin:24px 0 0 3px;
}

html>body .left_boxes {
	width:130px;
}

.left_boxes h2 {
	color:#DE9827;
}

.left_boxes p {
	font-size:10px;
}
/*************************
RIGHT COLUMN
**************************/
#right {
float: right; 
width: 120px;
background: #FFF;
padding: 5px;
min-height: 221px;
position: relative; /*** IE needs this  ***/
}
* html #right {
margin-right: -120px; /*** IE gets this margin. ***/
height: 221px;
}
#right ul {
list-style: none;
padding-bottom: 4px;
}
#right li {
padding-bottom: 2px;
}
.right_boxes {
	border: 1px solid #de9827;
	padding: 3px;
	margin-top:6px;
	margin-bottom: 5px;
}
/**************************
FOOTER
**************************/
#footer {
width: 760px;
margin: 0 auto;
text-align: center;
background-color: #f48d29;
border: 1px solid #f48d29;
color:#FFFFFF;
}
/**************************
SEARCH
**************************/
.search_area {
	position:relative;
	width:120px;
	padding:2px 0 2px 10px;
	margin:30px 0 0 0 ;
}

.search_box {
	border: 1px solid #CCCCCC;
	width:75px;
}

#search_button {
	position:relative;
	width:143px;
	height:25px;
	color:#FFF;
	font-size:11px;
	background:url(../images/SearchArea.gif) 0% -5px;
	background-color:#F48D29;
	margin:5px 0 0 -12px ;
	*margin:5px 0 0 -13px ;
	padding:2px;
}

#search_button:hover {
	cursor:pointer;
	background:url(../images/SearchArea.gif) 0% -33px;
}

.search_hold {
	position:relative;
	padding: 4px;
	font-size:12px;
	margin-left:8px;
	margin-right:4px;
	color: #333333;
	text-align: center;
	background-color:#F5E1C0;
	width: 125px;
	border: 1px solid #DE9A27;
}


#search_input {
	padding:3px;
	width:129px;
	margin:0 0 0 -10px;
	border:solid 1px #DE9A27;
	background-image:url(../images/magnify.gif);
	background-position:right;
	background-repeat:no-repeat;
}

form {margin:0}
/**************************
TOP MENU - NAVIGATION
**************************/
#navcontainer {
	padding:15px 35px 15px 0px;
	text-align:right;}
 #navlist ul
{
	margin-left: 0;
	padding-left: 0;
	white-space: nowrap;
}
#navlist li
{
display: inline;
list-style-type: none;
}

#navlist a {
	padding: 3px 20px;
	border: 1px solid #de9827;
	}

#navlist a:link, #navlist a:visited
{
color: #000;
text-decoration: none;
}

#navlist a:hover
{
color: #fff;
background-color: #de9827;
text-decoration: none;
}
/**************************
LEFT MENU - NAVIGATION
**************************/
.rollover {
	display:block;
	width: 135px;
	height: 31px;
	text-indent:-9999px;
	background-color:#FFCC00;
	background-repeat: no-repeat;
	background-position: left;
	margin-bottom:5px;
	margin-top:5px;
}

#infrastructure, #infrastructure a.rollover:link, a.rollover:visited, a.rollover:active {
	background-image: url(../images/btn_infrastructure.gif);	
}

#economy, #economy a.rollover:link, a.rollover:visited, a.rollover:active {
	background-image: url(../images/btn_economy.gif);
}

#environment, #environment a.rollover:link, a.rollover:visited, a.rollover:active {
	background-image: url(../images/btn_environment.gif);
}

#social, #social a.rollover:link, a.rollover:visited, a.rollover:active {
	background-image: url(../images/btn_social.gif);
}

#guidelines, #guidelines a.rollover:link, a.rollover:visited, a.rollover:active {
	background-image: url(../images/btn_guidelines.gif);
}
#downloads, #downloads a.rollover:link, a.rollover:visited, a.rollover:active {
	background-image: url(../images/btn_downloads.gif);
}
#whatsnew, #whatsnew a.rollover:link, a.rollover:visited, a.rollover:active {
	background-image: url(../images/btn_whatsnew.gif);
}
#future, #future a.rollover:link, a.rollover:visited, a.rollover:active {
	background-image: url(../images/btn_future.gif);
}
#links, #links a.rollover:link, a.rollover:visited, a.rollover:active {
	background-image: url(../images/btn_links.gif);
}
#blank, #blank a.rollover:link, a.rollover:visited, a.rollover:active {
	background-image: url(../images/btn_blank.gif);
}
a.rollover:hover {
background-position:-135px 0;
}

#sectors_image {
	position:relative;
	left:4px;
}

.Static {
	width:435px;
	padding:0 10px 0 10px;
	border:solid 1px orange;
}

.Static p, .Static li {
	padding:0;
	margin:0;
}

.rgtfloat {
	float:right;
	color:#de9827;
}

.contact_table td {
	border:solid 1px #CCC;
	padding:3px;
}


#HomeQuote {
	font-size:12px;
	font-style:italic;
	text-align:center;
}

#HomeLink {
	color:#DE9827;
	float:right;
	height:25px;
	padding-left:25px;
	background-image:url(../images/pdficon_small.gif);
	background-position:left top;
	background-repeat:no-repeat;
}


#line {
	border:solid 1px #999999;
	margin-bottom:5px;
}

#sectors_menu {
	margin-left:35px;
	font-weight:bold;
	color:#F48D29;
}