@charset "utf-8";
/* CSS Document */

* {margin: 0; padding: 0;}

body {background-color: #FFF; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:12px; color:#666;}

p {font-size:12px; line-height:20px; color:#666;}

h3 {font-size:18px; font-weight:normal;}

h4 {font-size:14px; font-weight:bold;}

a {color:#08c; text-decoration: none; }

a:hover {color:#0088CC; text-decoration:underline}

img, a img,:link img,:visited img, fieldset {border: 0;}

#wrapper {width:960px; margin:0 auto;}
#wrapperAX {width:660px; margin:10px auto;}

#branding {width:960px; height:88px; background-color:#000; padding-top:30px;}
	#brandingleft {float:left; padding-left:70px;}
	#brandingright {float:right; padding-right:70px;}


/* -----------------------------
 		Navigation
----------------------------- */
#navigation {width:905px; height:35px; background:url(images/navBG.png) repeat-x; padding-left:55px;}
	#navigation ul {list-style:none;}
	#navigation li {display: inline;}

#home a {background:url(images/home.png) no-repeat; width:62px; height:35px; float:left;}
	#home a:hover {background-image: url(images/home_hover.png);}
	#home a.current {background:url(images/home_hover.png) no-repeat; width:62px; height:35px;}

#about a {background:url(images/about.png) no-repeat; width:79px; height:35px; float:left;}
	#about a:hover {background-image: url(images/about_hover.png);}
	#about a.current {background:url(images/about_hover.png) no-repeat; width:79px; height:35px;}
	
#prod a {background:url(images/prod.png) no-repeat; width:80px; height:35px; float:left;}
	#prod a:hover {background-image: url(images/prod_hover.png);}
	#prod a.current {background:url(images/prod_hover.png) no-repeat; width:80px; height:35px;}
	
#training a {background:url(images/training.png) no-repeat; width:77px; height:35px; float:left;}
	#training a:hover {background-image: url(http://www.ibox.za.com/images/training_hover.png);}
	#training a.current {background:url(http://www.ibox.za.com/images/training_hover.png) no-repeat; width:77px; height:35px;}
	
#pro-edu a {background:url(images/pro-edu.png) no-repeat; width:117px; height:35px; float:left;}
	#pro-edu a:hover {background-image: url(images/pro-edu_hover.png);}
	#pro-edu a.current {background:url(images/pro-edu_hover.png) no-repeat; width:117px; height:35px;}
	
#service a {background:url(images/service.png) no-repeat; width:66px; height:35px; float:left;}
	#service a:hover {background-image: url(images/service_hover.png);}
	#service a.current {background:url(images/service_hover.png) no-repeat; width:66px; height:35px;}
	
#promo a {background:url(images/promo.png) no-repeat; width:92px; height:35px; float:left;}
	#promo a:hover {background-image: url(images/promo_hover.png);}
	#promo a.current {background:url(images/promo_hover.png) no-repeat; width:92px; height:35px;}
	
#location a {background:url(images/location.png) no-repeat; width:80px; height:35px; float:left;}
	#location a:hover {background-image: url(images/location_hover.png);}
	#location a.current {background:url(images/location_hover.png) no-repeat; width:80px; height:35px;}

.displace {position: absolute; left: -5000px;}
/* ----------------------------- */

#search {height:20px;}
	#search table {margin-top:-9px; padding-left:28px; margin-left:20px;}
	#searchfield {width:125px; height:18px; padding-top:2px; background:url(images/search2.png) repeat-x scroll center;border:0; outline-style:none;}

#content {width:960px; background:url(images/contentBG.png) repeat-y;}

#roundedbottomcontent {width:960px; height:18px; background:url(images/rounded_bottom.png) no-repeat;}

#news {width:950px; height:20px; background-color:#ebebeb; border-top:solid #ccc 1px; border-bottom:solid #ccc 1px; text-align:left; padding-top:2px; padding-left:10px;}

#boxinfo {padding-top:25px; padding-bottom:15px; text-align:center;}
	#boxinfo img {padding-left:7px; padding-right:7px;}

#menutitle {font-size:28px; font-family:Arial, Helvetica, sans-serif; font-weight:500; padding:30px 0 30px 70px;}

#text {padding:30px 90px 30px 70px;}
	#text img {float:left; padding-right:20px;}
	#text h3 {border-bottom:solid 1px #999; padding-bottom:5px; clear:both;}
	#text h4 {clear:both;}
	#text .location {width:185px; padding-right:15px; float:left;}

#textnews {padding:30px 90px 30px 70px; width:400px;}
	#textnews h4 {clear:both;}

#texttop {padding:0 90px 0 70px;}
#textbtm {padding:0 90px 30px 70px;}
	.texttopbtmright {float:right; width:400px;}
	.texttopbtmleft {float:left; width:380px;}
	.text380right {float:right; width:400px;}
	.text380left {float:left; width:380px;}
	
#texttrain{width:380px; float:right;}
#boxgrey {float:left; width:141px; height:73px; background:url(images/boxgrey.png) no-repeat; padding:10px; margin-right:10px; margin-top:10px;}
	#boxgrey img {float:left; padding-right:10px;}
	#boxgrey p {padding-top:30px; font-size:11px; line-height:14px;}

#textleft {padding:0 0 30px 70px; width:400px; float:left;}
#textright {padding:0 90px 30px 0; width:300px; float:right; color:#999;}
	
#textcareerleft {padding:0 0 30px 70px; width:240px; float:left;}
#textcareerright {padding:0 90px 30px 0; width:540px; float:right; color:#666;}
	#textcareerright ul { padding-left:15px;}
	#textcareerright li {line-height:20px; list-style:disc;}

#textgal {padding:0 60px 30px 60px;}
.roundedbox {background:url(images/box.png) no-repeat; width:170px; height:105px; margin-left:10px; margin-right:10px; padding:10px; float:left;}
	.roundedbox img {float:left; padding-right:10px; padding-top:10px;}
	.roundedbox p {line-height:14px; font-size:11px; padding-top:3px;}
#textgaldetail {padding:0 70px 30px 70px; text-align:center;}
	#textgaldetail img {border:#FFF solid 1px;}
	#textgaldetail a:hover img {border:#128ecf solid 1px;}

#category {width:159px; float:left; display:inline; padding:0 0 30px 70px; color:#999;} 
	#category li {list-style:none; line-height:24px;}
	#category a {color:#999;}
	#category a:hover {color:#0088CC;}
/*
#textpromoright {padding:0 70px 0 10px; margin-bottom:30px; width:650px; float:right; border-left:solid 1px #ccc;}
*/
#textpromoright {padding:0 60px 30px 60px;}
	#textpromoright img {padding-left:10px; padding-right:50px;}
/*	
#textpromorightdetail {padding:0 70px 30px 20px; width:640px; float:right; border-left:solid 1px #ccc;}
*/
#textpromorightread {padding:0 60px 30px 60px;}
#textpromorightdetail {padding:0 20px 5px;}

#textmedialeft {padding:0 0 30px 70px; width:560px; float:left;}
	#textmedialeft h3 {font-weight:bold;}
#textmediaright {padding:0 70px 30px 0; width:160px; float:right;}

#textmediadetail {padding:0 70px 30px 70px;}

.searchresults {width:800px; margin-bottom:20px;}
.searchresultstop {width:780px; height:25px; background-color:#ebebeb; text-align:left; padding:0 10px;}
	.searchresultstop .searchcat {float:left; padding-top:4px;}
	.searchresultstop .searchnumber {float:right;}
.searchresultslist {padding:10px; border-bottom:solid #ccc 1px;}
	.searchresultslist a {font-weight:bold;}
.searchresultspaging {width:780px; height:20px; padding:10px 10px 0 10px;}
	.searchresultspaging .searchpaging {float:left;}
	.searchresultspaging .viewall {float:right;}


/* --------- product --------- */
#textprodright {padding:0 50px 0 10px; margin-bottom:30px; width:670px; float:right; display:inline; border-left:solid 1px #ccc;}
#textprodright > p {clear:both; display:block; height:1px}
/*
.boxprod {background:url(images/box_prod.png) no-repeat; width:180px; height:115px; margin:0 10px; _margin:5px; padding:5px 10px; float:left; text-align:center;}
*/
.boxprod {background:url(images/box_prod.png) no-repeat; width:180px; height:130px; _margin:5px; margin:0 10px; padding:5px 10px; float:left; text-align:center; display:inline}
	.boxprod img {padding-top:5px;}
	.boxprod p {line-height:14px; font-size:12px; text-align:left; display:block; clear:both}

.textprodtop {width:660px;margin-bottom:10px;}
/*
#prodetailpic {width:300px; margin:0 10px; _margin:5px; float:left;}
.prodetailpic2 {width:220px; margin:0 10px; _margin:5px; float:left;}
.prodetailinfo {width:140px; margin:0 10px; _margin:5px; float:left;}
*/
#prodetailpic {width:300px; margin:0 10px; float:left;}
.prodetailpic2 {width:220px; margin:0 10px; float:left;}
.prodetailinfo {width:190px; margin:0 10px; float:left;}

.textprodbtm {width:620px; border-top:solid 1px #ccc; margin-left:10px; padding-top:20px; clear:both;}
	.textprodbtm h4 {font-weight:normal; color:#333;}
	.textprodbtm p {color:#666;}
.textprodbtm-first {width:300px; margin-right:10px; float:left;}
.textprodbtm-second {width:300px; margin-left:10px; float:left;}
	.textprodbtm-pic {width:60px; margin-right:10px; float:left;}
	.textprodbtm-info {width:220px; margin-left:10px; float:left;}
	
/* ----------------------------- */

.grey {color:#999;}
.clear {clear: both;}
.normal {font-weight:normal;}

/* --------- form --------- */
fieldset input {width:300px; height:20px; border:1px solid #999; outline-style:none;}
fieldset select, fiedlset option {outline-style:none;}
#question {width:300px; height:150px; border:1px solid #999; outline-style:none;}
#address {width:300px; height:50px; border:1px solid #999; outline-style:none;}
#captcha {width:180px; height:20px; border:1px solid #999;}

fieldset {border:none;}
/* ----------------------------- */

#footer{height:15px; width:960px; font-size:11px; text-align:center; margin-top:15px;}
	#footer a {margin: 0 1em;}
	#footer .developed {font-size:9px; padding-bottom:25px;}
	#footer .developed a {margin: 0 0.5em;}
	#footer .developed img { vertical-align:middle;}
	

/* Tambahan Ofi Hendrasto */
	
#navigation {width:928px; height:35px; background:url(images/navBG.png) repeat-x; padding-left:32px;}

#store a {background:url(images/store.png) no-repeat; width:77px; height:35px; float:left;}
	#store a:hover {background-image: url(images/store_hover.png);}
	#store a.current {background:url(images/store_hover.png) no-repeat; width:77px; height:35px;}