/*
Theme Name: Freshfolio
Theme URI: http://www.netstudio.co.za
Description: Freshfolio theme
Version: 1.0
Author: Aloecorp
Tags: Netstudio
*/
/*  setup the background   */
body{font-family:"Lucida Sans Unicode","Lucida Grande","Trebuchet MS",Helvetica,Arial,sans-serif;color: #000; background: #e6e6e6 url(images/knbg.jpg) repeat-x top;}

/*  colors   */
.whitecolor{color: #fff;}

/* top section */
#top{width: 100%;padding: 0;}
#logoside{float: left;padding: 0; height: 100px;}
#logoside img{padding-top: 20px;}
#blogdescription{float: right;padding: 30px 10px 0 0px;}

/* twitter */
#secondmenu{width: 100%;}
#secondinner{position: relative; padding: 20px 0;}
#secondmenu:hover img.default{display: none;}
#secondmenu:hover img.header{display: block;}
#secondinner img.default, #secondinner img.header{position: absolute;width: 63px;height: 50px;left: -30px;top: -46px;}
#secondinner img.header{display: none;}

/* menu */
#men{width: 100%;padding: 0;height: 52px; z-index: 50; position: relative;}

.menu li.current_page a{
background: #56ABBF url(images/menbg.png) no-repeat top right;
color: #fff
}

.menu li.current_page a:hover{
color: #000;
}

.slide-out-div {
          padding: 20px;
          width: 250px;
          background: #F9F9F9;
          border: 1px solid #29216d;
		  z-index: 1000;
      }  
.slide-out-div a.handle {background: url(images/contact_tab.gif)no-repeat; height: 122px; width: 40px; right: -40px; position: absolute; display: block; z-index: 1000;}

/*searchbar*/
#searchbar{float: right;padding: 29px 0px 0 0;}
form#searchform{margin: 4px 0px 4px 0px; width: 210px;}
input#s{width: 142px;padding: 6px 0 6px 10px;border: 1px solid #000;background: #000; color: #fff;}
.input{float: right;border: 0px solid #000;background:url("images/menbg.png") no-repeat right top #56ABBF;;color: #fff;padding: 6px 25px 6px 5px;cursor: pointer; font-weight: bold; border-left: 0px solid #000;}

/* carousel  tooltip*/
.border{position: relative;width: 610px;height: 360px;}
#info{margin: 0px;width: 610px;height: 360px;overflow: hidden;}
#info h1{color: #fff;text-align: center;padding: 5px 20px;background: #000; opacity: opacity:0.7;filter:alpha(opacity=70);float: left;-moz-border-radius: 7px;-webkit-border-radius: 7px;font-size: 11px;}
#info h1 a{color: #fff;text-decoration: none;}
#info ul{width: 610px; height: 360px; position: relative; margin: 0px;}
#info ul li img{padding: 3px;}
#info ul li{list-style-image: none;list-style-type: none;margin: 0px; padding: 0px;width: 610px; height: 360px; left: -900px; top: 330px; position: absolute;}

/* carousel  */
#outer{width: 100%; position: relative; z-index: 0;}
#outerinner{ center;width: 100%;}
#gradinner{width: 100%;height: 100%;}
#carouselouter{padding: 0px 0 20px 0;overflow: hidden;width: 100%; height: 100%;}
#carousel{height: 376px;width: 960px; position: relative; background: url(images/photshad.png) no-repeat bottom;}
#carouselinner{border: 1px solid #fff;background: #ececec;padding: 8px;position: relative;height: 360px;}
#slides{overflow: hidden;margin: 0px;position: absolute;width: 960px;height: 400px;top: 0px;left: 0px;}
#slides a.ft-prev, #slides a.ft-next{background: #000; padding: 3px 5px; opacity: opacity:0.7;filter:alpha(opacity=70); text-decoration: none; color: #fff;}
#ft-buttons-slides{display: none;}
#ft-title-slides{width: 940px; padding: 10px; font-size: 16px;}

/* twitterbar */
#tweets{margin: 0px 0px 0px 30px;width: 760px; color: #9f9f9f;}
#follow{float: right;padding-top: 15px;padding-left: 10px;margin-right: 10px;padding-bottom: 2px;max-width: 160px;background: url(images/searchbg.png) no-repeat bottom left;}
#follow a{text-decoration: none;color: #fff;font-size: 14px;letter-spacing: 1px;padding-right: 10px;background: url(images/currentright.png) no-repeat bottom right;padding-bottom: 4px;padding-top: 6px;}
#tweets ul{list-style-type: none;float: left;margin: 0px; padding-left: 60px; padding-top: 5px;background: url(images/t.png) no-repeat center left; height: 49px;}
#tweets ul li{font-size: 13px;letter-spacing: 1px;margin: 0px;list-style-image: none;list-style-type: none;padding-bottom: 10px;}
#tweets ul li p{margin: 0px;color: #6f6f6f;font-size: 13px;padding-top: 5px;}
#tweets ul li a{text-decoration: none;font-weight: bold;font-size: 12px;letter-spacing: 0px;font-style: italic;color: #BFBFBF;padding-left: 10px;text-shadow:1px 1px 2px #000;}
#tagline{padding: 13px 0;}
#tagline h2{text-align: center;}

/* frontpage maincontent*/
.iconinfo:first-child{margin-left: 0px;}
#contentwrapper{border-bottom: 1px solid #DFDFDF;}
.intro h6{padding: 5px 0px;}
.intro{ padding: 0px 0 20px 0;}
.imgborder{ background: #fff; border: 1px solid #6f6f6f; padding: 1px; float: left; margin-right: 20px;}
.intro img{background: #fff; padding: 2px; border: 1px solid #8f8f8f; margin: 1px;}
.frontcontent{padding: 40px 0px 0px 0;}
.exp{padding: 40px 0px 0px 0px 0px;}
.frontcontent h3{margin-bottom: 5px; font-size: 18px;}
.frontcontent h1{font-size: 21px; background: url(images/hdiv.png) repeat-x bottom;padding-bottom: 20px;}
.exp{background: url(images/sider.png) no-repeat top left;}
.exp h6{float: right;}
#custcomment{ padding: 60px 0px 0px 20px}
#custcomment h3{background: url(images/hdiv.png) repeat-x bottom;padding: 5px 0 20px 0;margin: 0px 0px 20px 0px; font-size: 18px;}
#custcomment p{font-size: 13px; color: #6f6f6f; background: #dfdfdf; border-bottom: 1px solid #fff; border-top: 1px solid #cfcfcf; padding: 15px 10px; text-shadow: #EFEFEF 1px 1px;}


/* latest news*/
#latestouter{margin: 10px 0 10px 0px; overflow: hidden;}
#latestposts h1{background: url(images/greydiv.png) repeat-x bottom;padding: 5px 0 10px 0;margin: 0px 10px 20px 10px; font-size: 18px;}
.latestwrapper{}
.quickmargin{margin-right: 20px;}
.quickmargin2{margin-left: 20px;}
.poster{background: #8F8F8F; width: 220px; margin: 0px 10px; float: left; overflow: hidden; }
.quickborders   .teamimg img{background: #fff; border: 1px solid #bfbfbf;padding: 2px; position: absolute; top: 0; left: 0;}
.quickborders   .teamimg img.clr{display: none;}
.quickborders :hover .teamimg img.clr{display: block;}
.quickborders  .teamimg{width: 220px; height: 112px;position: relative; background: url(images/aboutpicshadow.png) no-repeat bottom center;}
.quickborders .teamimg{}
.quickborders h6{font-size: 16px;margin: 10px 0 20px;}
.quickborders h6 a{text-decoration: none; color: #4f4f4f;}
.quickborders p.excerpt{color: #4f4f4f; margin: 0px;}
#postimgholder{position: relative;height: 112px;width: 209px; overflow: hidden; float: left; border: 1px solid #8f8f8f;}
#postimgholder img{position: absolute;left: 1px;top: 1px;width: 207px;height: 110px;background: #fff;}
#postimgholder  img.pageimg{display: none;}
.poster:hover #postimgholder  img.pageimg{display: block;}
#postcontentholder a.more{text-decoration: none;text-transform: uppercase;padding: 0px 5px;
float: right;margin-bottom: 30px; color: #fff; padding: 2px 15px; margin-top: 20px; font-size: 11px;}
#postcontentholder a.more:hover{background: #8F8F8F;}
.frontside ul{list-style-type: none; margin: 0px;}
.frontside ul li{margin: 0px; padding: 5px 0;}
.frontside ul li a{text-decoration: none; font-size: 11px; display: block; color: #666;}
.frontside img{  border: 1px solid #8f8f8f; padding: 2px; float: left; margin-right: 5px; margin-top: 3px;}

/* Singlepage colorbar*/
#topinner{
background: #e2e2e2 url("images/menbg.png") repeat-x bottom;
padding-bottom: 10px;
margin-bottom: 20px;
}
.photoinner{float: right;}
.photoinner img{}
#outerinners{background: url(images/gradbg8.png) center top;width: 100%;height: 100%;}
#gradinners{background: url(images/gradbg6.png) center top;width: 100%;height: 100%;}
#topinner h1{color: #000; padding: 10px; font-size: 40px;}
#topinner h2{color: #000; padding: 10px;}
.breadcrumbs{ padding: 7px 10px; color: #7F7F7F; margin: 0px 0 10px 0px;word-spacing: 2px;font-size: 14px; background: #000; font-weight: bold;}
.breadcrumbs a{color: #56ABBF; padding: 0px 5px;}

/* pages*/
#pagecontentinner h1, #pagecontentinner h2, #pagecontentinner h3, #pagecontentinner h4, #pagecontentinner h5, #pagecontentinner h6{margin: 0px; padding: 20px 0px 10px 0px;}
#pagecontent h1.mainheader{background: url(images/hdiv.png) repeat-x bottom;padding-bottom: 20px; padding-top: 0px;}
.pagecontent{padding: 0px 0px 20px 0px}
#pagecontent li.team{list-style-type: none; padding: 0px; margin: 0px 0px 20px 0px; width: 280px; float: left;}
#pagecontent li.team.alternate{list-style-type: none; padding: 0px; margin: 0px 0px 20px 0px; width: 280px; float: right;}
#pagecontentinner li.team h6{margin: 0px 0px 20px 0px;padding: 5px 0px;}
#pagecontentinner li.team h6 span{float: right;}
li.team p{padding: 0px; font-size: 12px;text-align: justify;}
#pagecontent p.date{padding: 5px 0px;font-size: 11px;background: url(images/hdiv.png) repeat-x bottom; letter-spacing: 1px; color: #9F9F9F}
#pagecontent h5.category{margin: 0;}
#pagecontent a.catbut{text-decoration: none;text-transform: uppercase;
float: right;margin-bottom: 30px; letter-spacing: 1px; color: #fff; padding: 2px 15px;}
#pagecontent img.pageimg{float: left; margin-right: 15px;}
.secondinner{padding-right: 20px;}
.teamimg img{background: #fff; border: 1px solid #000;padding: 2px; position: absolute; top: 0; left: 0;}
.teamimg{width: 276px; height: 246px;position: relative;}
.photoinner{width: 325px; height: 126px; background: url(images/lost.png);}
.photoinner img{padding: 23px 0 0 23px;}
.postouter{padding-bottom: 10px;}
.postouter:hover .teamimg img.clr{display: block;}
#pagecontent ul, #pagecontent .secondinner ul{list-style-type: none;}
#pagecontent .secondinner ul li{font-size: 12px; padding: 5px 0;}
#pagecontent ul li a{color: #666666; text-decoration: none; padding-left: 25px; background: url(images/list.png) no-repeat center left;}
#pagecontent ul li a:hover{background: url(images/listhov.png) no-repeat center left;}
#pagecontent blockquote{padding: 20px 0;font-style: italic; color: #000;}
#pagecontent blockquote p{font-size: 14px;padding: 0px; color: #000;}
#pagecontent .secondinner a{text-decoration: none;}

/* __pagination__ */
#pagecontent .pagination{text-align: center; line-height: 40px; font-size: 14px; margin-bottom: 30px;}
#pagecontent .pagination a{text-decoration: none;font-weight: bold;padding: 3px 9px;font-size: 14px;margin: 0px 5px; color: #fff; background: #000; }
#pagecontent .pagination a.current{text-decoration: none;font-weight: bold;padding: 3px 6px;font-size: 14px; color: #fff;}
#pagecontentinner{padding: 0 0px 0px 0px;}

/* __sidebar__ */
.sidebar{padding-left: 20px; min-height: 175px;}
#pagecontent .sidebar h3, .sidebar h3{padding: 7px 7px 7px 15px; color: #fff; background: #000; font-size: 16px;}
#contact{background: #e1e1e1; margin-bottom: 20px;}
.sidebar ul{list-style-type: none; margin: 0px;}
.sidebar ul li{padding: 2px 10px;margin: 0px; overflow: hidden; }
.sidebar ul li a{color: #666; text-decoration: none; padding-left: 25px;}
.sidebar ul li span{float: right;}
.sidebar select{padding: 5px 10px; border: 1px solid #AFAFAF; width: 270px; margin-top: 10px;}
.sidewidget{padding-bottom: 30px;}
.sidewidget table{width: 100%;text-align: center;border: 1px solid #DFDFDF;}
.sidewidget table caption{padding-top: 10px;}
.sidewidget table a{font-weight: bold;}
.sidebar ul.children, .sidebar ul li ul{margin-left: 10px;}
.sidebar #latest ul li a{display: block;}
.sidewidget a{text-decoration: none;}
#contact h6.ctc{background: transparent;}
#contact h6, #sidesearch h6, #sidesocial h6, #sidehelp h6, #latest h6, .sidewidget h6{margin: 0px;font-weight: normal;}
#contact p, #sidesearch p, #sidesocial p, #sidehelp p, #latest p, .sidewidget p{margin: 0px;}
#sidesocial p, #sidewidget p{padding: 5px 0 5px 10px;letter-spacing: -1px;border-bottom: 1px dotted #DFDFDF;background: url(images/list.gif) no-repeat left center;}
#contact p a, #sidesearch p a, #sidesocial p a, #sidehelp p a, #latest p a, #sidewidget p a, .sidewidget ul li a{margin: 0px;text-decoration: none;}
.sidewidget a{text-decoration: none;}


/* __comments__ */
.commentlist li .avatar {margin:0px 10px 0px 0;float: left;padding:2px; background: #efefef; border: 1px solid #dfdfdf;}
.commentmetadata {font-weight: normal; margin: 0;color: #8f8f8f; line-height: 10px; float: right;padding-top: 10px;padding-right: 10px;}
.otherwrap{display: block; float: left; width: 468px;background: #efefef; border-bottom: 1px solid #fff;
border-right: 1px solid #fff;border-left: 1px solid #CFCFCF;border-top: 1px solid #CFCFCF; min-height: 48px; padding: 10px 0 0 10px;}
#pagecontent .commentlist li {margin: 0px;list-style: none; color: #9f9f9f; padding: 0px;}
.reply{float: right; padding: 0px 10px;}
.reply a{color: #fff; font-size: 12px; letter-spacing: 1px; text-decoration: none;}
.fn{color: #000;}
#pagecontent .commentlist p {font-weight: normal;line-height: 1.5em;text-transform: none; margin: 0;padding: 5px 0; color: #636363;}
#comments ol {list-style-type: none;line-height: 18px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;
 margin-left: 0px;padding-top: 0px;padding-right: 0px;padding-bottom: 10px;padding-left: 5px;}
#comments ul li {list-style-type: none;list-style-image: none;list-style-position: outside;margin-top: 0px;margin-right: 0px;margin-bottom: 
0px;margin-left: 5px;padding-top: 5px;padding-right: 0px;padding-bottom: 0px;padding-left: 0pt;}
#pagecontent .commentlist {padding: 0;text-align: justify; margin-top: 40px;}
.commentlist li li {background:none;border:none;list-style:none;margin:0px;padding:3px 0;}
.commentlist cite, .commentlist cite a {font-weight: bold;font-style: normal;font-size: 1.1em;}
#pagecontent .commentlist p {font-weight: normal;line-height: 1.5em;text-transform: none; margin: 0; font-size: 12px;}
#commentform p input, #commentform p textarea {padding: 5px;background: #efefef; border-bottom: 1px solid #fff;
border-right: 1px solid #fff;border-left: 1px solid #CFCFCF;border-top: 1px solid #CFCFCF;}
#commentform p input#submit{color: #fff; letter-spacing: 1px; cursor: pointer;}
.commentmetadata a, .commentmetadata a:visited {color: #8f8f8f; font-size: 10px;}
.commentmetadata a:hover{ color: #333333;}
.cancel-comment-reply{padding: 15px 0;}
form#commentform p a{ color: #fff;}
ul.children{padding-left: 20px;}
ul.children .otherwrap{width: 448px;}
#pagecontent .commentlist ul li a{ background: transparent; padding: 0px; color: #fff;}
#pagecontent .commentlist ul li .comment-meta a{ color: #666;}
#pagecontent .commentlist li.depth-1{padding-bottom: 20px;}
#pagecontent h4.postcomment{margin: 0px;}
#pagecontent .reply a.comment-reply-link{color: #fff;}
#pagecontent .secondinner a.catbut{color: #fff; font-size: 14px; padding: 7px 30px 7px 7px; background:url("images/menbg.png") no-repeat right top #56ABBF;}

/* __portfolio__ */
.portimgouter{padding: 21px 0;}
.portimgouter3{padding: 0px 0 14px 0;background: url(images/fpimage.png) no-repeat bottom left; float: left; width: 200px; margin-right: 15px;}
.portimgouter img, .portimgouter3 img{background: #fff; padding: 3px; border: 1px solid #000;}
#pagecontent a.morebut{text-decoration: none;text-transform: uppercase;padding: 0px 5px;
float: right;margin-bottom: 30px; letter-spacing: 1px; color: #fff; padding: 2px 15px; margin-right: 12px; font-size: 11px;}
.portpage{padding: 0px 0 35px 0; height: 358px; overflow: hidden;}
#pagecontent ul.tags{list-style-type: none;margin: 0px;}
#pagecontent ul.tags li{float: left; width: 198px; margin: 0px 10px 20px 0px; padding: 5px 0;background: #efefef; border-bottom: 1px solid #fff;
border-right: 1px solid #fff;border-left: 1px solid #CFCFCF;border-top: 1px solid #CFCFCF;}
#pagecontent ul.tags li a{text-decoration: none; padding-left: 40px; background: url(images/yes.png) no-repeat 5% 50%; display: block;}
#pagecontent ul#output{list-style-type: none;margin: 0px; position: relative;}
#pagecontent ul#output li{list-style-type: none;margin: 0px; position: absolute; left: 0px; top: 0px;}
#pagecontent ul#output li a{list-style-type: none;margin: 0px; padding: 0px; background: transparent;}
#pagecontent ul#output li a img{background: #fff; border: 1px solid #000;padding: 2px;}
#pagecontent ul#tabs{list-style-type: none;margin: 0px;}
#pagecontent ul#tabs li{list-style-type: none;margin: 0px  0px 30px 0; float: left;}
#pagecontent ul#tabs li a{list-style-type: none;margin: 0px; padding: 0px; background: transparent; padding: 3px; border-bottom: 1px solid #fff;
border-right: 1px solid #fff;border-left: 1px solid #CFCFCF;border-top: 1px solid #CFCFCF; margin-right: 6px; display: block;}
#pagecontent img.alignnone{padding: 3px; background: #fff; border: 1px solid #bfbfbf;}
#pagecontent img.alignleft{padding: 3px;float: left;margin-right: 10px; background: #fff;border: 1px solid #bfbfbf;}
#pagecontent img.alignright{padding: 3px;float: right;margin-left: 10px; background: #fff; border: 1px solid #bfbfbf;}
		   
/* __contact form__ */
form#ajax-contact-form{width: 440px;}
form#ajax-contact-form label{float:left;margin:5px;padding:0px;text-align:left;width:100px;font-size: 14px;}
form#ajax-contact-form  input.textbox, form#ajax-contact-form  textarea.textbox{float:left;font-style:normal;font-variant:normal;
font-weight:normal;line-height:normal;margin:5px;padding: 5px;padding: 5px;background: #efefef; border-bottom: 1px solid #fff;
border-right: 1px solid #fff;border-left: 1px solid #CFCFCF;border-top: 1px solid #CFCFCF;width: 300px;}
form#ajax-contact-form  input.button{text-decoration: none;font-weight: bold;margin-right: 0px;padding: 2px 5px;font-size: 12px;
border: 0px solid #fff;margin-left: 3px;cursor: pointer;color: #fff; float: right;letter-spacing: 1px; margin-right: 13px;}
.map{padding:20px 0 30px 0;}
.map h2{background: url(images/hdiv.png) repeat-x bottom; padding-bottom: 20px; margin: 0px;}
.map img{padding-top: 25px;}

/* footer*/
#bottom{border-top: 5px solid #ccc;background: #171717 url(images/footer_bg.png) repeat-x top;color: #fff;z-index: 70;}
#license{background: #121212;}
.bottombit h6, .bottombit .sidewidget h6{padding: 10px 0px;margin: 0px 0px 20px 0;font-weight: normal;font-size: 17px; text-transform: uppercase;}
.bottombit p, .bottombit .textwidget{padding: 5px 0px;margin: 0px;color: #9f9f9f;}
.bottombit p a{text-decoration: none;color: #9f9f9f;}
.ctc p.name{float: left;padding: 0px;color: #fff;}
.ctc p.info{float: right;padding: 0px;}
.ctc{padding: 5px 0px;}
.bottombit h6.ctc{padding: 0px;background: transparent;}
h6.dby{padding: 25px 0;margin-bottom: 0px;text-align: center;color: #9f9f9f;}
h6.dby a{text-decoration: none;}
.bottombit p a:hover{text-decoration: underline;}
#footer{margin-top: 10px;}
#footer h6{padding: 5px 0;text-align: center;font-weight: normal;letter-spacing: 1px;margin: 0px;}
#postfooter{width: 100%;}
.bottombit .sidewidget{padding: 0px;}
.bottombit .sidewidget ul{list-style-type: none;}
.bottombit .sidewidget ul li{padding: 5px 0px; color: #fff; margin: 0px;}
.bottombit .sidewidget ul li a, .bottombit .sidewidget a{color: #9f9f9f;}

/* formmessage*/
.formerror{padding: 25px;color: red;font-weight: bold;}
.formsuccess{padding: 25px;color: green;font-weight: bold;}
.imageouter img.pageimg{display: none;}
.imageouter:hover img.pageimg{display: block;}
.facts h4{text-align: center;padding: 0px;line-height: 1em;}
.butt{float: right;margin-right: 20px;padding: 15px 0;}


.iconinfo h5{
color: #000;
padding: 10px 0 10px 5px;
margin: 0px;
}

.iconinfo h5 span{
color: #56ABBF;
}

.iconinfo p{
padding: 5px 10px 5px 5px;
color: #000;
}

.iconinfo a{
background:url("images/menbg.png") no-repeat right top #56ABBF;
padding:7px 26px 7px 6px;
margin-left: 5px;
font-size: 14px;
color: #fff;
text-decoration: none;
}

.iconinfo a:hover{
color: #000;
}

.frontwelcome h2{
color: #000;
padding-left: 15px;
}

.frontwelcome p{
color: #000;
padding-left: 15px;
margin: 0px 0px 15px 0px;
}

.frontwelcome  img{
float: left;
border: 1px solid #000;
background: #fff;
padding: 2px;
}

#latest h5{
background: #000 url("images/menbg.png") no-repeat right top;
color: #fff;
padding: 7px;
margin: 0px;
}

#latest{
background: #d1d1d1;
margin-bottom: 20px;
}

#latest ul li a{
color: #000;
padding: 5px 24px;
font-size: 12px;
background: url(images/pointer.png) no-repeat 10px 10px;
}

.vidswrapper{
width: 300px;
margin: 20px 0 40px 0;
height: 180px;
position: relative;
}

.vidswrapper img.vidover{
position: absolute;
left: 0px;
top: 0px;
display: none;
}

.vidswrapper:hover img.vidover{
display: block;
}


.vidswrapper img.vidover2{
position: absolute;
left: 30px;
top: 0px;
display: none;
}

.vidswrapper:hover img.vidover2{
display: block;
}

img.clrs{
margin-bottom: 30px;
border: 1px solid #000;
background: #fff;
padding: 2px;
}

.photshad{
padding-bottom: 9px;
background: url(images/photshad2.png) no-repeat center bottom;
float: left;
margin: 5px 15px 15px 15px;
}

img.clrt{
margin-bottom: 30px;
border: 1px solid #000;
background: #fff;
padding: 2px;
float: left;
margin-right: 50px;
}