body{
    margin:0px;
    background-color:#FFFFFF;
}
#main_bg{width:100%; height:auto;background-image:url(../images/header-bg-new.jpg);background-repeat:repeat-x;background-color:#FFFFFF;}
#main{width:922px; height:auto; margin:0 auto;}
/*---------- HEADER----------*/
#header{width:922px; height:175px;}
#logo{width:320px; height:auto; float:left;}
#seo{width:350px; height:auto; float:right; text-align:right; padding-top:15px;}
.common_div{width:100%;}
/* TOP NAV */
.nav{width:833px; height:auto; padding-left:0px; padding-top:30px;}
.nav ul{list-style:none;padding:0px;margin:0px;}
.nav li{float:left;	list-style:none;padding-top:0px; padding-right:40px;}
.nav li a{display:block; color:#2E2E29; text-decoration:none;	font-family:Arial, Helvetica, sans-serif;font-size:12px;background-image:url(../images/arrow.gif);  background-repeat:no-repeat;  background-position: 0 .2em; padding-left:15px;}
.nav li a:hover{color:#B4CB2B;}
.nav li.current a{color:#B4CB2B; }
.nav li.current a:hover{color:#B4CB2B;}
/*---------- MIDDEL ----------*/
#middel_contant{width:922px; height:auto;font-family:Arial, Helvetica, sans-serif;}

.topic{margin: 20px 0px 0px 5px;}
.topic div{float: left;color: #2e2e29;font-size: 13px;width: 325px;padding-bottom: 12px;}
.topic div h1{background:url(../images/GreenRound.gif) no-repeat;width: 30px;height: 30px;font-size: 18px;color: #FFF;font-weight: bold;padding: 3px 8px 5px 0px;float: left;text-align: center;}
.topic div p{float: left;margin-top: 6px;}

.package{margin: 25px 0px 0px -3px;position: relative;}
.package .top{background:url(../images/bgPackageTop.gif) no-repeat;width: 661px;height: 1px;line-height: 0px;font-size: 0px;}
.package .center{background:url(../images/bgPackageCenter.gif) repeat-y;width: 651px;padding-left: 6px;}
.package .bot{background:url(../images/bgPackageBottom.gif) no-repeat;width: 661px;height: 11px;}

.package ul{float: left;list-style: none;width: 155px;}
.package ul li.head{font-size: 14px;color: #2e2e29;text-align: center;height: 70px;padding-top: 10px;line-height: 20px;}
.package ul li{font-size: 12px;color: #555555;text-align:center;padding: 9px 0px;border-bottom: #e7e4e4 solid 1px;border-right: #e7e4e4 solid 1px;}
.package ul li.odd{background-color: #FFF;}
.package ul li span{background:url(../images/iconCheck.png) no-repeat;width: 14px;height: 15px;display: inline-block;}
.package ul li a{padding-top: 10px;display:inline-block;}
.package ul li.last{padding: 17px 0px;border-bottom: none;cursor: default;}
.package ul li.last a{text-decoration: underline;color: #555555;padding: 0px;}

.package ul.first{width: 182px;cursor: pointer;}
.package ul.first li{text-align: right;padding-right: 10px;}
.package ul.first li.head{text-align:center;padding-right: 0px;cursor: default;}
.package ul.last{float: right;margin-right: 4px;}
.package ul.last li{border-right:none;}

.package ul.popular{position: absolute;width: 170px;left: 336px;top: -18px;}
.package ul.popular li.topCell{background:url(../images/bgPackPopularTop.png) no-repeat;padding: 0px;height: 14px;border-bottom: none;}
.package ul.popular li.head{font-size: 16px;padding: 12px 0px;}
.package ul.popular li.last{font-size: 16px;padding: 15px 0px 25px 0px;border-bottom: none;}
.package ul.popular li{background:url(../images/bgPackPopularCenter.png) repeat-y;border-right: none;}
.package ul.popular li.botCell{background:url(../images/bgPackPopularBottom.png) no-repeat;padding: 0px;height: 18px;border-bottom: none;}

.package .common{font-size: 12px;color: #2e2e29;padding-left: 5px;}
.package .common a{color: #88ab40;text-decoration: underline;}

.newscheme{background:url(../images/newscheme.gif) no-repeat;width:203px;height:120px;padding:17px 0px 0px 47px;color:#2e2e29;position:relative;}
.newscheme div{position: absolute;width: 200px;}
.newscheme .page3{font-size:19px;margin-top: 4px;}
.newscheme .rs{font-size:48px;color:#cc0000;margin-left:-3px;top: 37px;}
.newscheme .call{font-size:14px;margin-left:-8px;bottom: 19px;}

.need{margin-left:-3px;}
.need a{background:url(../images/btnNeedACustom.png) no-repeat;width:256px;height:87px;display: inline-block;}
.needHover a{background:url(../images/btnNeedACustom_RollOver.png) no-repeat;}

.needportfolio{margin-left:0px;}
.needportfolio a{background:url(../images/btnPricePort.png) no-repeat;width:234px;height:63px;display: inline-block;}
.needportfolioHover a{background:url(../images/btnPricePortRoll.png) no-repeat;}

.cDetail{margin-left: 1px;}
.cDetailTop{background:url(../images/bgContactTop.png) no-repeat;width:246px;height:2px;font-size:0; line-height:0;}
.cDetailCenter{background:url(../images/bgContactCenter.png) repeat-y;width:186px;padding:10px 30px;color:#2e2e29;}
.cDetailCenter div.error{font-size: 12px;color: #FF0000;}
.cDetailCenter input.error{border: #FF0000 solid 1px;color:#2e2e29;}
.cDetail .common{font-size:13px;padding-bottom:15px;color:#2e2e29;}
.cDetailBot{background:url(../images/bgContactBottom.png) no-repeat;width:246px;height:15px;}

.cDetail label{font-size:12px;padding:6px 0px 2px 0px;display:inline-block;}
.cDetail label span{color:#ff0909;}
.cDetail label.ex{padding:20px 0px 5px 0px;}
.cDetail input,.cDetail select{border:#E7E4E4 solid 1px;width:177px;font-size:13px;padding:2px 0px;}
.cDetail .helpIcon{background:url(../images/iconHelp.gif) no-repeat;width: 14px;height: 14px;display: inline-block;margin: 2px 0px -3px 5px;}
.cDetail .capInput{float: right;width: 90px;margin-right: 5px;}
.cDetail .cap{float: left;}
.cDetail .btnContact,.cDetail .btnContactHover{background: url(../images/btnContactMe.png) no-repeat;width: 185px;height: 37px;margin-top: 20px;outline: none;border: none;}
.cDetail .btnContactHover{background: url(../images/btnContactMe_RollOver.png) no-repeat;}
.cDetail .btnContactstatic{margin-top: 20px; border: none;}

.portfolio{border: #E2E0E0 solid 3px;margin: 30px 0px 20px -1px;padding: 15px 0px;}
.portfolio div.img{text-align: center;}
.portfolio .common{font-size: 14px;color:#2e2e29;float: none;padding:0px 0px 10px 33px;}
.portfolio a{width: 74px;display: inline-block;}

.notePop{position: absolute;width: 230px;padding-left: 10px;z-index: 1010;left: 170px;margin-top: -27px;display: none;}
.notePop .popTop{background: url(../images/bgPopTop.png) no-repeat;width: 218px;height: 7px;}
.notePop .popCenter{background: url(../images/bgPopCenter.png) repeat-y;width: 178px;color:#2e2e29;padding: 5px 20px;text-align: left;}
.notePop .popCenter h1{font-size: 12px;font-weight: bold;padding-bottom: 5px;}
.notePop .popCenter .border{border-bottom:#000 dashed 1px;}
.notePop .popCenter p{font-size: 12px;padding-top: 10px;}
.notePop .popBot{background: url(../images/bgPopBottom.png) no-repeat;width: 218px;height: 8px;}
.notePop .aero{background: url(../images/bgPopArrow.png) no-repeat;width: 17px;height: 19px;position: absolute;left: 0px;top:10px;z-index: 10;}

#contant{width:560px; height:auto; padding-right:10px; float:left; }
#right_img{width:352px; height:auto; float:right; }
#left_imgportfolio{width:554px; height:auto; float:left; }
#right_img_button01{width:352px; height:auto; float:left; }
#scroll{width:922px; height:90px; }
#scroll_left_arrow{width:45px; height:auto; float:left;  padding-top:30px; }
#scroll_right_arrow{width:45px; height:auto; float:left; padding-top:30px; }
#scroll_images{width:832px; height:90px; float:left; }
/*---------- FOOTER----------*/
#footer{width:100%; height:315px; padding-top:51px; background-image:url(../images/footer-bg-new.jpg); background-repeat:repeat-x;}
#footer_con{width:850px; height:auto; padding-top:38px; padding-left:72px; margin:0 auto; padding-bottom:30px; }
#Success_Stories{width:217px; height:auto; float:left;} 
#our_blog {width:215px; height:auto; float:left;} 
#online_marketing {width:252px; height:auto; float:left;} 
#make_contact {width:165px; height:auto; float:left;} 
#bottom{width:922px; height:auto; margin:0 auto; padding-top:17px;} 
#bottom_left{width:532px; height:auto; float:left;} 
#bottom_right {width:380px; height:auto; float:right; text-align:right;} 
/*---------- FOOTER LINK----------*/
.footernav h1{font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#EFEFEF;	text-decoration:none; font-weight:bold; margin: 0px; padding:0px; display:block; height:30px;  }
.footernav ul{list-style-type: none;	margin: 0px; padding:0px;}
.footernav li{margin: 0px; padding-bottom:5px; padding-left:14px; background-image:url(../images/footer-arrow.jpg); background-repeat:no-repeat; background-position:left;}
.footernav li a{font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#BEBEBD;text-decoration:underline; line-height:18px;}
.footernav li a:hover{text-decoration:none;}

/*---------- WHAT WE DO----------*/
#wedo_contant{width:642px; height:auto; padding-right:20px; float:left; }
#wedo_right_img{width:260px; height:auto; float:right; }
#wedo_box1 , #wedo_box3{width:332px; height:auto; float:left; }
#wedo_box2 , #wedo_box4{width:310px; height:auto; float:right; }
.heading_box{width:45px; height:auto; float:left;}
#box_contant1, #box_contant3{width:285px; height:auto; float:right; padding-top:45px;}
#box_contant2, #box_contant4{width:265px; height:auto; float:right; padding-top:45px;}

/*---------- LINK----------*/
.wedo h1{font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#555555;	text-decoration:none; font-weight:bold; margin: 0px; padding:0px; display:block; height:30px;  }
.wedo ul{list-style-type: none;	margin: 0px; padding:0px;}
.wedo li{margin: 0px; padding-bottom:5px; font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#555555;text-decoration:none; line-height:15px; background-image:url(../images/dot.jpg);  background-repeat:no-repeat;  background-position: 0 .3em; padding-left:15px;}

/*---------- WHO WE ARE----------*/
#whoweare_right{width:277px; height:auto; float:right; background-image:url(../images/bird.jpg); background-position:right; background-repeat:no-repeat; padding-top:145px; padding-left:75px; }

/*---------- PORTFOLIO DETAIL PAGES ----------*/
#portfoliodetail_right{width:325px; height:auto; float:right; padding-top:45px; padding-left:1px; }
#portprices{display: block; width: 234px; height: 61px; background: url(../images/port-prices.gif) no-repeat 0 0;}
#portprices:hover{background-position: 0 -61px;}
#portprices span{display: none;}

/*---------- PRICE GUIDE----------*/
#price_contant{width:655px; height:auto;  float:left; }
#price_right{height:auto; float:right;margin-right: -10px;}
.price_box{width:595px; height:auto;  padding-bottom:25px; }
.price_box1{width:176px; height:auto;  float:left; padding-top:5px;}
.price_box2{width:66px; height:auto;  float:left;}
.price_box3{width:94px; height:auto;  float:left; padding-top:5px;}
.price_box4{width:259px; height:auto;  float:left; padding-top:5px;}

/*---------- OUR CLIENTS---------*/
#falcor{width:143px; height:auto; padding-right:57px;  float:left; }
#macadams{width:94px; height:auto; padding-right:57px;  float:left; }
#multifix{width:173px; height:auto; padding-right:65px;  float:left; }
#aska{width:100px; height:auto; padding-right:61px;  float:left; }
#elwierda{width:172px; height:auto; float:left; }
#africa_in_focus{width:164px; height:auto; padding-right:93px;  float:left; }
#selectinks{width:175px; height:auto; padding-right:82px;  float:left; }
#iceclean{width:128px; height:auto; padding-right:82px;  float:left; }
#sandydiogo{width:198px; height:auto; float:left; }
#villastsimon{width:193px; height:auto; padding-right:83px;  float:left; }
#kidorable{width:176px; height:auto; padding-right:97px;  float:left; }
#canopyking{width:136px; height:auto; padding-right:96px;  float:left; }
#theeventmanager{width:141px; height:auto; float:left; }

/*---------- WEBSITE PORTFOLIO---------*/
#portfolio_kidorablesa{width:243px; height:auto; padding-right:57px;  float:left; }
#portfolio_tc{width:243px; height:auto; padding-right:57px;  float:left; }
#portfolio_vox{width:243px; height:auto; padding-right:57px;  float:left; }
#portfolio_pp{width:243px; height:auto; padding-right:57px;  float:left; }
#portfolio_golf{width:243px; height:auto; padding-right:57px;  float:left; }
#portfolio_head_south{width:243px; height:auto; padding-right:57px;  float:left; }
#portfolio_aska{width:243px; height:auto; padding-right:57px;  float:left; }
#portfolio_macadams{width:243px; height:auto; padding-right:57px;  float:left; }
#portfolio_fig{width:243px; height:auto; padding-right:57px;  float:left; }
#portfolio_select_inks{width:243px; height:auto; padding-right:57px;  float:left; }
#portfolio_sandy{width:243px; height:auto; padding-right:57px;  float:left; }
#portfolio_feedjit{width:243px; height:auto; padding-right:57px;  float:left; }
#portfolio_secaware{width:243px; height:auto; padding-right:57px;  float:left; }
#portfolio_rivonia{width:243px; height:auto; padding-right:57px;  float:left; }
#portfolio_aif{width:243px; height:auto; padding-right:57px;  float:left; }
#portfolio_offshore{width:243px; height:auto; padding-right:57px;  float:left; }
#portfolio_multifix{width:243px; height:auto; padding-right:57px;  float:left; }
#portfolio_ozonewash{width:243px; height:auto; padding-right:57px;  float:left; }
#portfolio_pointb{width:243px; height:auto; padding-right:57px;  float:left; }
#portfolio_spinnakers{width:243px; height:auto; padding-right:57px;  float:left; }
#portfolio_villa{width:243px; height:auto; padding-right:57px;  float:left; }
#portfolio_event{width:243px; height:auto; padding-right:57px;  float:left; }
#portfolio_balmoral{width:243px; height:auto; padding-right:57px;  float:left; }
#portfolio_falcor{width:243px; height:auto; padding-right:57px;  float:left; }

/*---------- GLOSSARY----------*/
#glossary_contant{width:570px; height:auto;  float:left; }
#glossary_right{width:180px; height:auto; float:right; padding-left:40px; padding-right:130px; }

/*---------- CONTACT----------*/
#contact_box1{width:243px; height:auto; float:left;  }
#contact_box2{width:210px; height:auto; float:left; padding-top:40px;  }
#contact_box3{width:200px; height:auto; float:left; padding-top:40px;}
#contact_box4{width:269px; height:auto; float:left; }
#contact_box{width:243px; height:40px;  }
#contact_submit{width:150px; height:auto;  padding-left:45px; padding-top:15px; }

/* Light box */
#lightbox{width:662px; height:210px; padding:10px; margin:0 auto; }
#lightlogo{width:210px; height:auto; padding-top:10px; padding-left:9px; padding-right:28px; float:left;}
#lightboxbo{width:390px; height:auto; padding:10px; float:right; border:1px solid #D4D4D4;}
#the_challenge{width:183px; height:auto; padding-left:40px; float:left; }
#the_process{width:172px; height:auto; padding-left:24px; padding-right:34px; float:left; }
#the_solution{width:187px; height:auto;  padding-right:20px; float:left; }

/*---------- CSS ----------*/
.clr{clear:both;font-size:0; line-height:0; height:0px;}
.common{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#555555;
    text-decoration:none;
    line-height:18px;
}
.heading{
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    color:#2E2E29;
    text-decoration:none;
    line-height:18px;
}
.heading1{
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#2E2E29;
    text-decoration:none;
    line-height:24px;
}
.common_light{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#2E2E29;
    text-decoration:none;
    line-height:18px;
}
.bottom_link{
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#BEBEBD;
    text-decoration:none;
}
a.bottom_link:hover{text-decoration:underline;}
.green_heading{
    font-family:Arial, Helvetica, sans-serif;
    font-size:70px;
    color:#88AB40;
    text-decoration:none;
}
.green_heading1{
    font-family:Arial, Helvetica, sans-serif;
    font-size:18px;
    color:#B5CC2D;
    text-decoration:none;
}
.read_stories{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#88AB40;
    text-decoration:underline;
    background-image:url(../images/arrow2.jpg);
    background-position:right;
    padding-right:10px;
    background-repeat:no-repeat;
}
a.read_stories:hover{text-decoration:none;}
.para_link{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#88AB40;
    text-decoration:underline;
}
.para_link_green{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#B4CB2B;
    text-decoration:underline;
}
a.para_link:hover{text-decoration:none;}
.common_underline{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#999999;
    text-decoration:underline;
}
a.common_underline:hover{text-decoration:none;}
.common_active{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#B4CB2B;
    text-decoration:none;
    line-height:18px;
}
a.common_active:hover{text-decoration:underline;}
.common_bold{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#999999;
    font-weight:bold;
    text-decoration:none;
    line-height:18px;
}
.error{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#FF7709;
    text-decoration:none;
    line-height:18px;
}
.input{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#999999;
    text-decoration:none;
    width:175px;
    height:18px;
    border:1px solid #A09B96;
}
.comment{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#999999;
    text-decoration:none;
    width:190px;
    height:110px;
    border:1px solid #A09B96;
}
/******************* Enquiry Form ********************/
#enquiry{width:813px; height:auto; margin:0 auto; background-image:url(../images/header-bg-new.jpg); background-repeat:repeat-x; background-color:#FFFFFF;}
#enquirytop{ width:522px; float:right; padding-top:50px;}
#form_main{ width:350px; margin:0px auto;  padding-left:20px; background-image:url(../images/whitebg.jpg); float:left;}
#form_right{ width:380px; margin:0px auto; padding:10px; background-image:url(../images/whitebg.jpg); float:right;}
.formField { float: left; vertical-align: top; padding: 1px;}
.text_field{ width:200px; height:15px; border:1px solid #999999; padding-top:2px;font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#333333; text-decoration:none;}
.select_field{ width:200px; height:20px; border:1px solid #999999; padding-top:2px;font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#333333; text-decoration:none;}
.formField2 { float: left; width:83px; padding-top:3px;}
.formField3 { float: left; width:210px; padding-bottom:12px;}
.text_field2 {
    width:200px;
    height:15px;
    border:1px solid #999999;
    padding-top:3px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    color:#333333;
    text-decoration:none;
    float: right;
    margin-right: 10px;
    line-height: 20px;
    margin-top: 8px;
    position: relative;
}
.text_field5 { float: left; padding: 10px; margin-left: 30px; clear: right; margin-right: 30px;}
.sep { border:0px; float: left; width: 2px;}
.headingBlack{ font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; color:#000000; text-decoration:none;}
.commonText{ font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#333333; text-decoration:none; line-height:18px;}
.headingBlue{ font-family:"myriad Pro"; font-size:27px; color:#012751; text-decoration:none;}
.bottomText{ font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#999999; text-decoration:none;}
/*******************************************/

/******************* Portfolio ********************/
.portfolio_link{color:#C8DCE5;}
a.portfolio_link:hover{color:#FFFFFF;}
*{ padding:0px; margin:0px; }
h3{ margin: 10px 10px 0 10px; color:#FFF; font:16pt Arial, sans-serif; letter-spacing:-1px; font-weight: bold;  }

.boxgrid{ 
    width:199px;
    height:151px;
    margin:9px;
    float:left;
    background:#161613;
    border: solid 2px #ffffff;
    overflow: hidden;
    position: relative;
}
.portfolio_bg{ 
    width:228px;
    height:183px;
    margin:0px;
    float:left;
    background-image:url(../images/web-design-portfolio/bg-portfolio.jpg);  background-repeat:no-repeat;
}
.boxgrid img{ 
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}
.boxgrid p{ 
    padding: 0 10px;
    color:#afafaf;
    font-weight:bold;
    font:10pt Arial, sans-serif;
}

.boxcaption{ 
    float: left;
    position: absolute;
    background: #000;
    height: 100px;
    width: 100%;
    opacity: .5;
    /* For IE 5-7 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    /* For IE 8 */
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.captionfull .boxcaption {
    top: 260;
    left: 0;
}
.caption .boxcaption {
    top: 220;
    left: 0;
}
/*******************************************/