@charset "utf-8"; /*CSS Document by ben king, www.webkingdesign.com*/

/*==========fixes and reset==========*/
html{
min-height:100%;
margin-bottom:1px;
}
html a{
outline:0;
}

/*==========text and link styles==========*/
h1, h2, h3, h4, h5, h6{text-transform:capitalize;}
h1{
font-size:24px;
color:#878176;
margin:0px 0px 12px;
text-transform:capitalize;
}
h2{
font-size:24px;
color:#000;
margin:0px 0px 12px;
}
h3{
font-size:16px;
color:#000;
margin:0px 0px 8px;
padding: 10px 0px 0px;
}
h4{
font-size:14px;
color:#878176;
margin:0px 0px 8px;
padding: 10px 0px 0px;
}
h5{
font-size:14px;
color:#878176;
margin:0px 0px 8px;
padding: 0px;
}
h6{
font-size:11px;
color:#878176;
margin:0px 0px 5px;
padding:0px;
}
p{
font-size:14px;
color:#000;
margin:0px 0px 12px;
}
a{
color:#000;
text-decoration:underline;
}
a:hover{
color:#ffac00;
}
ul{
line-height:22px;
list-style:none;
margin:0px;
padding:0px 0px 12px;
}
li{
font-size:14px;
color:#000;
background:url(../images/li.jpg) no-repeat left 2px;
padding-left:22px;
padding-bottom: 4px;
}
.orangetext{
color:#FFAD1C;
}
.orangenumbers{
color:#FFAD1C;
font-weight:bold;
}
.whitetext{
color:#fff;
}
.quote{
padding:5px 15px 15px;
background:#f5f5f5;
border:solid 1px #ccc;
margin:10px 0px;
float: left;
width: auto;
}
.quote2{
padding:12px 15px 0px;
background:#f5f5f5;
border:solid 1px #ccc;
margin:10px 0px;
float: left;
width: 644px;
}
/*==========image styles==========*/
img{
border:none;
float:left;
}
.nofloat{
float:none;
}
/*==========main layout styles==========*/
body{
margin:0px;
padding:0px;
background:#FFF url(../images/bgtop.png) top repeat-x;
font-family: Arial, Helvetica, sans-serif;
}
#swrap{
width:950px;
margin-left:auto;
margin-right:auto;
height:auto;
}
#container{
width:950px;
float:left;
height:auto;
}
#header{
width:950px;
height:152px;
float:left;
}
#logowrap{
float:left;
height:152px;
width:414px;
}
#logo, #logo a{
width:414px;
height:152px;
float:left;
background:url(../images/logo.png) no-repeat 0px -152px;
}
a:hover#logo{
width:414px;
height:152px;
float:left;
background:url(../images/logo.png) no-repeat 0px 0px;
}
#content{
float:left;
width:950px;
padding:0px 0px 20px;
}
#content2{
float:left;
width:950px;
padding:20px 0px;
}
#content3{
float:left;
width:935px;
padding:20px 0px 20px 15px;
}
#content4{
float:left;
width:910px;
padding:20px;
}
.content5{
float:left;
width:950px;
padding: 20px 0px 0px;
}
.content-right{
width:676px; 
padding-left:30px; 
float:left;
}
.wrapl{
float:left;
}
.wrapr{
float:right;
}
.padbot10{
padding-bottom:10px;
}
.padbot20{
padding-bottom:20px;
}
/*==========footers==========*/
#bottom{
width:100%;
float:left;
height:80px;
border-top:#DED5C4 1px solid;
border-bottom:#DED5C4 1px solid;
background:url(../images/bgbottom.png) repeat;
}
#bottom-content-wrap{
margin-left:auto;
margin-right:auto;
width:950px;
text-align:right;
height:80px;
position: relative;
}
#css, #css a{
width:70px;
height:47px;
float:left;
background:url(../images/buttons/css.png) no-repeat 0px -47px;
}
a:hover#css{
width:70px;
height:47px;
float:left;
background:url(../images/buttons/css.png) no-repeat 0px 0px;
}
#html5, #html5 a{
width:70px;
height:47px;
float:left;
background:url(../images/buttons/html5.png) no-repeat 0px -47px;
}
a:hover#html5{
width:70px;
height:47px;
float:left;
background:url(../images/buttons/html5.png) no-repeat 0px 0px;
}
#xhtml, #xhtml a{
width:70px;
height:47px;
float:left;
background:url(../images/buttons/xhtml.png) no-repeat 0px -47px;
}
a:hover#xhtml{
width:70px;
height:47px;
float:left;
background:url(../images/buttons/xhtml.png) no-repeat 0px 0px;
}
#wai, #wai a{
width:70px;
height:47px;
float:left;
background:url(../images/buttons/wai.png) no-repeat 0px -47px;
}
a:hover#wai{
width:70px;
height:47px;
float:left;
background:url(../images/buttons/wai.png) no-repeat 0px 0px;
}
#bottom2{
width:100%;
float:left;
height:auto;
background:#fff;
}
#bottom2-content-wrap{
margin-left:auto;
margin-right:auto;
width:950px;
text-align:center;
font-size:12px;
color:#999;
padding: 20px 0px 40px;
}
#bottom2-content-wrap a{
font-size:12px;
color:#999;
}
#bottom2-content-wrap a:hover{
color:#ffac00;
}
#bottom2-content-wrap span{
color:#333;
}
#bottom2-content-wrap span:hover{
color:#ffac00;
}
#valid-btns-wrap{
float:left;
padding:15px 0px 0px;
}
/*==========top menu==========*/
#menutop{
float:right;
width:auto;
height:74px;
padding-top:78px;
font-size:16px;
font-weight:bold;
text-transform:uppercase;
}
.menuitem{
float:left;
width:auto;
height:50px;
padding:0px 10px;
background:url(../images/menu-side.png) right top no-repeat;
}
.menuitem a{
color:#878176;
height:50px;
float:left;
text-decoration:none;
}
.menuitem a:hover, .menuitemcontact a:hover, .menuitemactive{
background:url(../images/menu-bar.png) bottom repeat-x;
color:#000;
}
.menuitemcontact{
float:left;
height:50px;
background:url(../images/mail-icon.png) left top no-repeat;
padding:0px 10px;
}
.menuitemcontact a{
color:#878176;
height:50px;
float:left;
padding:0px 0px 0px 40px;
text-decoration:none;
}

/*==========side menu==========*/
.sidemenu-wrap{
width:244px;
float:left;
}
.sidemenu{
padding:10px 10px 7px;
width:220px;
margin:0px 0px 20px;
border:solid 1px #DED5C4;
background:#f4ecdc;
color:#FFF;
float:left;
}
.sidemenu-item, .sidemenu-item a{
border:solid 1px #DED5C4;
width:188px;
background:#FFF url(../images/side-menu-arrow.jpg) left no-repeat;
float:left;
padding:10px 10px 10px 20px;
margin:0px 0px 3px;
text-decoration:none;
font-size:14px;
font-weight:bold;
color:#000;
text-transform:capitalize;
outline:0;
}
a:hover.sidemenu-item, #sidemenu-active{
background:#878176 url(../images/side-menu-arrow-hover.jpg) left no-repeat;
color:#fff;
outline:0;
}

/*======== content slider with slideshow ========*/
#slider-wrap{
width:950px;
float:left;
padding:0px;
margin:0px;
}
#imagemain{
width:950px;
background:#000;
height:285px;
padding:0px;
float:left;
}
#box{
position:absolute;
left:0px;
top:0px;
}
#box div{
display:block;
float:left;
}
#mask{
position:relative;
width:950px;
height:285px;
overflow:hidden;
}
div img{
display:block;
border:none;
}
#playstop{
width:950px;
float:left;
height:36px;
}
#playernext, #playernext a{
width:38px;
height:34px;
float:right;
background:url(../images/slider/next.png) no-repeat 0px -34px;
outline:0;
}
a:hover#playernext{
width:38px;
height:34px;
float:right;
background:url(../images/slider/next.png) no-repeat 0px 0px;
outline:0;
}
#playerprev, #playerprev a{
width:38px;
height:34px;
float:right;
background:url(../images/slider/prev.png) no-repeat 0px -34px;
outline:0;
}
a:hover#playerprev{
width:38px;
height:34px;
float:right;
background:url(../images/slider/prev.png) no-repeat 0px 0px;
outline:0;
}
#playerstart, #playerstart a{
width:38px;
height:34px;
float:right;
background:url(../images/slider/start.png) no-repeat 0px -34px;
outline:0;
}
a:hover#playerstart{
width:38px;
height:34px;
float:right;
background:url(../images/slider/start.png) no-repeat 0px 0px;
outline:0;
}
#playerstop, #playerstop a{
width:38px;
height:34px;
float:right;
background:url(../images/slider/stop.png) no-repeat 0px -34px;
outline:0;
}
a:hover#playerstop{
width:38px;
height:34px;
float:right;
background:url(../images/slider/stop.png) no-repeat 0px 0px;
outline:0;
}
/*==========portfolio black box==========*/
.projectinfo{
float:left;
width:460px;
height:265px;
padding:15px 0px 0px 25px;
}
.projectinfo p{
color:#FFF;
}
.viewproject, .viewproject a{
width:134px;
height:47px;
float:left;
background:url(../images/buttons/viewproject.png) no-repeat 0px -47px;
}
a:hover.viewproject{
width:134px;
height:47px;
float:left;
background:url(../images/buttons/viewproject.png) no-repeat 0px 0px;
}
.viewportfolio, .viewportfolio a{
width:134px;
height:47px;
float:left;
background:url(../images/buttons/viewportfolio.png) no-repeat 0px -47px;
}
a:hover.viewportfolio{
width:134px;
height:47px;
float:left;
background:url(../images/buttons/viewportfolio.png) no-repeat 0px 0px;
}
/*==========portfolio items==========*/
#backtomain1, #backtomain1 a{
width:38px;
height:34px;
float:right;
background:url(../images/buttons/back.png) no-repeat 0px -34px;
outline:0;
}
a:hover#backtomain1{
width:38px;
height:34px;
float:right;
background:url(../images/buttons/back.png) no-repeat 0px 0px;
outline:0;
}
#viewsite, #viewsite a{
width:134px;
height:47px;
float:left;
background:url(../images/buttons/viewsite.png) no-repeat 0px -47px;
}
a:hover#viewsite{
width:134px;
height:47px;
float:left;
background:url(../images/buttons/viewsite.png) no-repeat 0px 0px;
}
#backtomain2, #backtomain2 a{
width:134px;
height:47px;
float:left;
background:url(../images/buttons/backtomain.png) no-repeat 0px -47px;
}
a:hover#backtomain2{
width:134px;
height:47px;
float:left;
background:url(../images/buttons/backtomain.png) no-repeat 0px 0px;
}
.port{
width: 220px;
height: 133px;
float:left;
margin:0px;
padding:0px;
}
.port a{
width: 210px;
height: 123px;
border: 5px solid #f4ecdc;
float:left;
}
.port a:hover{
width: 210px;
height: 123px;
border: 5px solid #FFBD00;
float:left;
}
.port_wrap{
width: 220px;
height: 133px;
float:left;
margin:0px;
padding: 5px;
}
.contract-th{
margin:5px; 
float:left;
width:170px;
height:98px;
border: solid 1px #CCC;
}
#portfolio-comidwives{
width:950px;
height:285px;
float:left;
background:#000 url(../portfolio/websites/comidwives/comidwives.jpg) no-repeat left top;
}
#portfolio-southland-ap{
width:950px;
height:285px;
float:left;
background:#000 url(../portfolio/websites/southland-ap/southland-ap.jpg) no-repeat left top;
}
#portfolio-html5slicer{
width:950px;
height:285px;
float:left;
background:#000 url(../portfolio/websites/html5/html5slicer.jpg) no-repeat left top;
}
#portfolio-funkykids{
width:950px;
height:285px;
float:left;
background:#000 url(../portfolio/websites/funkykids/port-funkykids.jpg) no-repeat left top;
}
#portfolio-ryan{
width:950px;
height:285px;
float:left;
background:#000 url(../portfolio/websites/ryan/ryan.jpg) no-repeat left top;
}
#portfolio-acm{
width:950px;
height:285px;
float:left;
background:#000 url(../portfolio/websites/acm/acm.jpg) no-repeat left top;
}
#portfolio-summerstravel{
width:950px;
height:285px;
float:left;
background:#000 url(../portfolio/websites/summerstravel/summerstravel.jpg) no-repeat left top;
}
#portfolio-rmm{
width:950px;
height:285px;
float:left;
background:#000 url(../portfolio/websites/RMM/port-rmm.jpg) no-repeat left top;
}
#portfolio-chamblett-design{
width:950px;
height:285px;
float:left;
background:#000 url(../portfolio/websites/chamblett/chamblett-design.jpg) no-repeat left top;
}
#portfolio-invoice-and-go{
width:950px;
height:285px;
float:left;
background:#000 url(../portfolio/websites/invoiceandgo/invoiceandgo.jpg) no-repeat left top;
}
#portfolio-martyn{
width:950px;
height:285px;
float:left;
background:#000 url(../portfolio/websites/martyn/port-martyn.jpg) no-repeat left top;
}
#portfolio-dymocks{
width:950px;
height:285px;
float:left;
background:#000 url(../portfolio/websites/dymocks/port-smales-farm-dymocks.jpg) no-repeat left top;
}
#portfolio-ldt{
width:950px;
height:285px;
float:left;
background:#000 url(../portfolio/websites/ldt/port-ldt.jpg) no-repeat left top;
}
#portfolio-photo-gallery{
width:950px;
height:285px;
float:left;
background:#000 url(../portfolio/websites/photogallery/port-gallery.jpg) no-repeat left top;
}
#portfolio-dymocks{
width:950px;
height:285px;
float:left;
background:#000 url(../portfolio/websites/dymocks/port-smales-farm-dymocks.jpg) no-repeat left top;
}
#portfolio-mids{
width:950px;
height:285px;
float:left;
background:#000 url(../portfolio/websites/mids/port-mids.jpg) no-repeat left top;
}
#portfolio-alice-gemma{
width:950px;
height:285px;
float:left;
background:#000 url(../portfolio/websites/aliceandgemma/port-alice-gemma.jpg) no-repeat left top;
}
#portfolio-4myearth{
width:950px;
height:285px;
float:left;
background:#000 url(../portfolio/websites/4myearth/port-4myearth2.jpg) no-repeat left top;
}
#portfolio-leadingedge{
width:950px;
height:285px;
float:left;
background:#000 url(../portfolio/websites/leadingedge/port-LE.jpg) no-repeat left top;
}
#portfolio-regilait{
width:950px;
height:285px;
float:left;
background:#000 url(../portfolio/websites/regilait/port-regilait.jpg) no-repeat left top;
}
#portfolio-4x4stuff{
width:950px;
height:285px;
float:left;
background:#000 url(../portfolio/websites/4x4stuff/port-4x4stuff.jpg) no-repeat left top;
}
#portfolio-skitesite{
width:950px;
height:285px;
float:left;
background:#000 url(../portfolio/websites/skitesite/port-skite.jpg) no-repeat left top;
}
#portfolio-highlyflammable{
width:950px;
height:285px;
float:left;
background:#000 url(../portfolio/websites/highlyflammable/port-flammable.jpg) no-repeat left top;
}
#portfolio-bigtums{
width:950px;
height:285px;
float:left;
background:#000 url(../portfolio/websites/bigtums/port-big-tums.jpg) no-repeat left top;
}
#portfolio-painters-online{
width:950px;
height:285px;
float:left;
background:#000 url(../portfolio/websites/paintersonline/port-paintersol.jpg) no-repeat left top;
}
#portfolio-snowscoot{
width:950px;
height:285px;
float:left;
background:#000 url(../portfolio/websites/snowscoot/port-snowscoot.jpg) no-repeat left top;
}
#portfolio-roofbox{
width:950px;
height:285px;
float:left;
background:#000 url(../portfolio/websites/roofbox/port-roofbox.jpg) no-repeat left top;
}
#portfolio-wanaka-bb{
width:950px;
height:285px;
float:left;
background:#000 url(../portfolio/branding-print/wanaka-bb/port-wanaka-bb.jpg) no-repeat left top;
}
#portfolio-pembroke-stud{
width:950px;
height:285px;
float:left;
background:#000 url(../portfolio/branding-print/pembroke-stud/port-pembroke.jpg) no-repeat left top;
}
#portfolio-wanaka-surf-club{
width:950px;
height:285px;
float:left;
background:#000 url(../portfolio/branding-print/wanaka-surf-club/port-wanaka-surf-club.jpg) no-repeat left top;
}
#portfolio-politicard{
width:950px;
height:285px;
float:left;
background:#000 url(../portfolio/branding-print/politicard/port-politicard.jpg) no-repeat left top;
}
/*==========home page==========*/
#welcome-contain{
float:left;
margin:0px;
width:950px;
height:auto;
position:relative;
padding: 15px 0px;
}
#welcome{
float:left;
width:250px;
height:auto;
padding: 0px;
}
#welcome2{
	float:left;
	width:320px;
	height:auto;
	padding:0px 0px 0px 38px;
}
#latestwork{
width:337px; 
height:250px; 
position:absolute; 
top:-50px; 
left:610px; 
background:url(../images/latest-work.png);
}
/*========== tool tip==========*/
.tip{
width:295px; 
font-family:tahoma,arial; 
font-size:16px; 
background:url(../images/tooltip/tip-text.png) left top repeat-y; 
}
.tip-top{
background:url(../images/tooltip/tip-top.png) top left no-repeat; 
height:24px; 
width:295px; 
}
.tip-title{
color:#F60; 
font-weight:bold;
margin:0 30px 0 50px;
}
.tip-text{
color:#000; 
padding:10px 30px 20px 50px;
}
.tip-bottom{
background:url(../images/tooltip/tip-bottom.png) left bottom no-repeat; 
width:295px; 
height:71px;
}
/*============ back to top =============*/
#back-to-top{
position:absolute; 
bottom:0px;
right:0px;
background:url(../images/back-to-top.png);
width:190px;
height:140px;
}
/*========== moo tabs ==========*/
.hiddenMel {
display:none;
padding:10px;
border:solid 1px #ccc;
width:654px;
height:auto;
float:left;
}
#tab-content {
height:auto;
float:left;
}
#tab-wrap {
width:676px;
padding:0px;
}
#tabs-wrap{
float:left;
margin:11px 0px;
}
#tabs ul{
float:left;
margin:0px;
}
#tabs li {
cursor:pointer;
display:inline;
padding:8px;
border:solid 1px #ccc;
list-style:none;
background:#F4ECDC;
font-size:16px;
font-weight:bold;
text-transform:capitalize;
}
#tabs li:hover{
background:#f3f3f3;
color:#000;
}
.tabtitle{
font-size:16px; 
font-weight:bold;   
}
#tab1active{
background:url(../images/tabactive.png); 
width:20px; 
height:12px; 
position:relative; 
top:-22px; 
left:35px;
}
#tab2active{
background:url(../images/tabactive.png); 
width:20px; 
height:12px; 
position:relative; 
top:-22px; 
left:165px;
}
#tab3active{
background:url(../images/tabactive.png); 
width:20px; 
height:12px; 
position:relative; 
top:-22px; 
left:310px;
}
#tab4active{
background:url(../images/tabactive.png); 
width:20px; 
height:12px; 
position:relative; 
top:-22px; 
left:430px;
}
#tab5active{
background:url(../images/tabactive.png); 
width:20px; 
height:12px; 
position:relative; 
top:-22px; 
left:45px;
}
#tab6active{
background:url(../images/tabactive.png); 
width:20px; 
height:12px; 
position:relative; 
top:-22px; 
left:175px;
}
#tab7active{
background:url(../images/tabactive.png); 
width:20px; 
height:12px; 
position:relative; 
top:-22px; 
left:295px;
}
#tab8active{
background:url(../images/tabactive.png); 
width:20px; 
height:12px; 
position:relative; 
top:-22px; 
left:385px;
}
#hosting-features{
background:#FFF; 
border:solid 1px #ccc; 
width:632px; 
height:auto; 
float:left;
padding:10px;
}
/*============= wkd online shops===========*/
.demothumb{
float:left;
padding:2px; 
border:solid #ccc 1px;
margin:2px;
}
/*=========== new tech bar ==============*/
.techbar{
width:928px; 
border:#DED5C4 1px solid; 
padding:10px; 
margin-bottom:20px; 
background:url(../images/bgbottom.png) repeat-x;
}
.techbar p{
margin:0;
}
/*========== new ==========*/
.content-inner{
float:left;
width:676px;
padding:20px 0px 0px;
}
.content-inner2{
float:left;
width:676px;
padding:0px;
}