@charset "utf-8";
/*--TABLETS--*/

@media only screen and (min-width:480px), only screen and (max-width:768px) {
	
body{font:12px/1.2em arial, helvetica, sans-serif; line-height:1.5em; padding:0; background-position:0 20px}

/*--LAYOUTS--*/
#page {margin: 0 auto; min-width:480px; max-width:768px; }

#headerbar{width:100%; height:120px; background:#f4f4f4; border-bottom:5px solid #90989e;}
#header{height:130px; position: relative; min-width:480px; max-width:768px; margin: 0 auto;}
#logo{padding:5px 0px 0px 10px; float:left; width:130px;}

/*--Utility nav--*/
#header-navigation{float:right; padding:15px 15px 3px 0; margin:0px;}

#content{margin:0 auto; max-width:768px; min-width:480px; padding:10px 1% 20px 1%; position:relative;  }
#main-content{position:relative; float:left; width:71%; padding:0 0 20px 0;}

/*--BANNER--*/
#feature{margin:0 0 0 0; height:220px; overflow:hidden; text-align:center; width:100%; position:relative;}
#feature img{text-align:center; margin:0; overflow:hidden; }

/*--Banner Content--*/
#share-widget{position:absolute; top:-250px; right:0px; z-index:100; width:306px; height:134px; }
#slogan{position:absolute; top:-280px; left:0px; z-index:100; width:255px; height:150px; background:url(../images/slogan-bg.png); padding:20px 0 0 20px}
#slogan img{padding:0 0 9px 0}
#slogan img a{border:none; margin:0; padding:0}

/*--Commodities--*/
#commodities-wrapper{width:100%; height:auto; min-height:75px; position:relative; background:#f2f2f2;}
#commodities{padding:10px 0 10px 0; text-align:center;}

.widget{text-align:left; width:60%; float:none; background:url(../images/commodities-back.jpg) left top repeat; padding:10px 1% 0 1%; margin:0 auto; position:relative; border:1px dotted #999;}
.widget.last{text-align:left; width:60%; float:none; padding:10px 1%; margin:0 auto; border:1px dotted #999;}

/*--Banner-Indaba--*/
#banner-indaba{display:block; width:97%; height:auto; min-height:130px; margin:0 0 30px 0; padding:24px 0 24px 3%; background:url(../images/banner-indaba-back1.png) bottom 50px no-repeat; border:2px solid #f4a824; background-size:90px auto;}
#banner-indaba p{display:inline-block; float:left; width:50%; margin:0 0 0 0; padding:0; font-size:1.25em; font-weight:bold; color:#9b9b9b; text-transform:uppercase; line-height:1.5em;}
#banner-indaba a.bani{display:inline-block; float:left; margin:0 3% 0 0; padding:0; width:31.6%; position:relative; border:none;}
#banner-indaba a.bani img{width:100%; height:auto;}

/*--Banner Chamber--*/

#chamber p{font-size:1.0em; margin:0}
#chamber img{margin:0; padding:0; width:100%; height:auto;}
	
/*--GENERIC CLASSES--*/
.row.home{padding-top:0px; margin-top:40px}
.col{width:95%;}
.col-10,
.col-15,
.col-20,
.col-24,
.col-25,
.col-30,
.col-33,
.col-35,
.col-40,
.col-45,
.col-46,
.col-48,
.col-50,
.col-55,
.col-60,
.col-65,
.col-70,
.col-75,
.col-80 {width:95%;}
.left, .right{float:none;}
	
/*--Responsive 50% columns--*/
.leftcol{width:90%; float:none; margin:0 auto 20px auto; }
.rightcol{width:90%; float:none; border-left:0px; margin:0 auto 20px auto; padding-left:0; }

/*--MAIN NAV--*/
#main-navigation{float:none; clear:right; display:block; margin:0 0 0 0; padding:0; position:absolute; right:0; top:80px; z-index:2000;}
#main-navigation li{font-size:11px; padding:0; margin:0 0 0 3px; float:left;}
#main-navigation li a{padding:8px 10px 5px 10px; margin:13px 0 0 0; line-height:14px; }
#main-navigation li a:hover{padding-bottom:5px; margin:12px 0 0 0; -moz-box-shadow:1px 1px 3px #888; }
#main-navigation li.active a{padding-bottom:10px; margin:10px 0 0px 0; background-color:#90989e; color: #fff}

/*--SEARCH--*/
li#search{float:none; margin-top:33px;}
#search li input[type=text] {width:100px; height:24px; padding:0px 3px 0px 3px; }
#search li input[type=submit] {display:block; width:60px; height:24px; color:#5b5959 !important; background:url('../images/btn-backtile1.jpg') repeat-x 0 0; border:1px solid #aca8a8; padding:0px 3px 0px 4px; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; margin-right:0; cursor:pointer; text-shadow:1px 1px 1px #fff;}
#search li [type=submit]:hover{color:#000; }

#skip, .skip{position: absolute; top:-500px; display:none}

/*--SUB NAVIGATION--*/
#sub-navigation {position:relative; float:left; width:24%; padding:40px 20px 0px 0px;}

}