/* Koki Studio CSS File - Isn't It Beautiful... */
/* ------------------------------------------- */

/* Make everything relative so when absolute is used it just 'magically' works */
div,ul,li { position:relative; }

/* Clearfix Code - What would we do without it */
.clearfix:after { content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0; }
.clearfix { display:inline-block; }
html[xmlns] .clearfix { display:block; }
* html .clearfix { height:1%; }

/* -----------------------------------*/
/* ---------->>> GLOBAL <<<-----------*/
/* -----------------------------------*/
body,td,th { color:#000; }
body { background-color:#585858; font-size:15px; line-height:28px; font-family:Helvetica Neue,Helvetica,Arial,Tahoma,sans-serif; font-weight:300; color:#2b2c2c; font-style:normal; font-variant:normal; text-shadow:#FFF 1px 1px 0; letter-spacing:-.02em; }
a { color:#b82d2d; text-decoration:none; }
a:hover { color:#B87278; text-decoration:none; }
p { margin-bottom:20px; }
#content{background-color:#FFF;}
h1{color:#98be31;font-size:48px;padding-bottom:5px;padding-top:25px; height:42px;}
h2{font-size:44px;} h3{font-size:38px;}
	h2, h3{padding-bottom:5px;padding-top:5px; font-weight: 700; text-shadow:#FFF 1px 1px 0; letter-spacing:-.03em; color: #4a4a4a;}



#page-container{background-color:#FFF;}
/* --------------------------------------------*/
/* ---------->>> GLOBAL CLASSES <<<-----------*/
/* ------------------------------------------*/
.wrap-900{ width: 900px; margin-left: auto; margin-right: auto; }
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0; }
.hidden {display: none;}
.breaker{border-top-color: #a0a0a0; border-top-width: 1px; border-top-style: dashed; width: 100%; height: 1px;}
.padder{margin-bottom:60px;}
.page-text{padding-top:10px;padding-left:15px; line-height: 30px; font-size: 17px;}
.align-centre{text-align: center;}
.align-left{text-align: left;}
.align-right{text-align: right;}
.align-justify{text-align: justify;}

/* -----------------------------------*/
/* ---------->>> HEADER <<<-----------*/
/* -----------------------------------*/
#header { background-position: center top; background-repeat: repeat-x; height: 122px; background-image: url("/img/layout/header.png"); width: 100%; }
	#logo{ width: 170px; height: 25px; background-position: center top; background-repeat: none; background-image: url("/img/layout/logo.png"); top: 37px; left: 0; position: absolute;}
		#logo span{display: none;}

/* ----------------------------------------*/
/* ---------->>> NAVIGATION <<<-----------*/
/* --------------------------------------*/
#navigation{position: absolute; display: block; width: 390px; height: 21px; left: 515px; text-align: right; top: 39px;}
	#navigation .button{width: 80px; height:21px; float: left; margin-left: 15px; position: relative; background-position: center top; display:inline-block;}
		#navigation .button:hover{background-position: 0 -21px;}
			#navigation .button span{display: none; }

#navigation #nav-home{ background-image: url("/img/layout/navigation/home.png"); }
#navigation #nav-portfolio{background-image: url("/img/layout/navigation/portfolio.png"); }
#navigation #nav-why-us{background-image: url("/img/layout/navigation/why-us.png"); }
#navigation #nav-contact{background-image: url("/img/layout/navigation/contact.png"); }
#navigation #nav-login{background-image: url("/img/layout/navigation/login.png"); }


  /*-----------------------------------*/
 /*-------->>> WHY-US <<<-----------*/
/*-----------------------------------*/

#why-us-wrap{ background-image: url(/img/layout/contact-back.jpg); background-color: white; background-repeat: no-repeat; background-position: center bottom; width: 100%; min-height:465px; height:auto !important; height:465px;}

#why-us-page{margin-top:65px; padding-bottom:20px;}
	.why-use-us-h2{margin-bottom:5px;}
	.why-use-us-h3{margin-bottom:5px;}
#why-us-left{float:left; width: 500px; padding-right: 30px;}
#why-us-right{background-image:url("/img/layout/why-us-picture.png");background-position:right top;background-repeat:no-repeat;float:right;font-size:14px;height:auto !important;min-height:278px;padding-left:70px;padding-top:281px;width:300px; text-align:left;}

#why-us-page ul{margin-left:20px;}
	#why-us-page ul li{list-style-position:outside;list-style-type:square;margin-left:10px;}
		#why-us-page ul li span{color:#B82D2D;}

.free-quote-why{background-image: url("/img/layout/buttons/free-quote.png"); display:inline-block; width: 182px; height: 25px; background-position: center top; background-repeat: no-repeat; margin:0; float:right;}
		.free-quote-why:hover{background-position: 0 -25px;}
			.free-quote-why span{display: none;}


/* -----------------------------------*/
/* -------->>> CONTACT <<<----------*/
/* -----------------------------------*/

#contact-wrap{ background-image: url(/img/layout/contact-back.jpg); background-color: white; background-repeat: no-repeat; background-position: center bottom; width: 100%; min-height:465px; height:auto !important; height:465px;}
	.contact-arrow{ background-image:url("/img/layout/contact-arrow.png");background-position:410px 125px;background-repeat:no-repeat;}
#contact-details-page{margin-top:65px; padding-bottom:20px;}
#contact-left{float:left; width: 550px;}
#contact-right{float:right; width: 350px; font-size: 14px;}
.contact-number{font-size:18px;padding-left:18px;padding-top:13px;}
	.contact-number span{color:#B82D2D;}
.contact-office{padding-left:18px;padding-top:10px; }
#contactFormContainer{padding-top: 20px; width:400px;}
#contactFormContainer label{color:#444444;
display:block;
margin-bottom:5px;
font-weight:700;
width:374px;}
#contactFormContainer label span{color: #999; width:50%;font-weight: 300; text-align: right; float: right; }


#office-map{
	margin-bottom: 40px;
	margin-top: 25px;
	border-width: 1px;
	border-color: #8e8e8e;
	border-style: solid;
	width: 100%;
	height: 210px;
	box-shadow: 0px 0px 20px #333; -moz-box-shadow: 0px 0px 20px #333;  -webkit-box-shadow: 0px 0px 20px #333;
}

	/* ---->>> CONTACT FORM <<<-----*/
	#contact-left input[type=text], #contact-left textarea { 
	background-color:#FFFFFF;border:thin solid #CCCCCC;color: #b85654;font-family:"Helvetica Neue",Helvetica,Arial,Tahoma,sans-serif;
font-size:16px;font-style:normal;font-variant:normal;font-weight:300;margin-top:4px;padding:7px;text-shadow:1px 1px 0 #F3F2F5;width:360px;
	}
	#contact-right input[type=text] { float:left; display: block; }
	#contact-left textarea {font-size:18px; color:#B82D2D;}
	#contact-right input[type=submit] {float:left; display: block;}


/* -----------------------------------*/
/* -------->>> PORTFOLIO <<<----------*/
/* -----------------------------------*/
#portfolio-wrap{ background-image: url(/img/layout/portfolio-back.jpg); background-color: white; background-repeat: no-repeat; background-position: center bottom; width: 100%; min-height:465px; height:auto !important; height:465px;}
.portfolio-top-back{background-image:url("/img/layout/portfolio-top-back.png");background-position:16px 12px;background-repeat:no-repeat;}



.portfolio-item{
width: 100%;
border-bottom-color: #a0a0a0; border-bottom-width: 1px; border-bottom-style: dashed;
padding:30px 0 10px;
}
	.portfolio-item .left{ float:left;padding-right:70px;width:500px;}
	.portfolio-item .right{ float: right; width: 330px; min-height:165px; height:auto !important; height:165px;}
	.portfolio-item .right img{ box-shadow: 0px 0px 20px #333; -moz-box-shadow: 0px 0px 20px #333;  -webkit-box-shadow: 0px 0px 20px #333;}
	
	.portfolio-item-client{font-size:25px;font-weight:700;padding-bottom:14px;}
	.portfolio-item-quote{ font-size: 13px; font-style: italic; color: #666;text-align:justify;padding-bottom:14px; line-height: 20px;}
	.portfolio-item-story{line-height:30px;padding-bottom:12px;}
	.portfolio-item-website{font-size:13px; padding-top:25px;}
	.portfolio-item-website span{width: 95px; color: #2c2c2c; font-weight: 700; display: inline; display:inline-block;}
	
#portfolio-wrap .first-item{
padding-top: 80px;
}
#portfolio-wrap .last-item{
padding-bottom: 50px;
border:0;
}

.free-quote{background-image: url("/img/layout/buttons/free-quote.png"); display:inline-block; width: 182px; height: 25px; background-position: center top; background-repeat: no-repeat; margin-left:718px; margin-top:15px; }
		.free-quote:hover{background-position: 0 -25px;}
			.free-quote span{display: none;}



/* -----------------------------------*/
/* ---------->>> HOME-P <<<-----------*/
/* -----------------------------------*/
#feature-wrap{ width: 100%; height: 503px; background-repeat:no-repeat; background-position: center top; background-image: url("/img/layout/features/feature-back.jpg"); margin-bottom:15px;}
	#feature-container{ height: 417px; width: 900px; margin-left: auto; margin-right: auto; top: 42px;}
	#feature-container img{ height: 417px; width: 900px;}
	
.front-boxes{ padding: 8px 0 0 0; border-top-color: #a0a0a0; border-top-width: 1px; border-top-style: dashed; text-align: center;}
	.front-boxes img{ margin: 0 24px 0 0; width: 205px; height: 110px; float:left;}
		.front-boxes img.last{margin: 0 0 0 8px; padding:0; width: 205px; height: 110px;}
		
	.view-recent-work{background-image: url("/img/layout/buttons/recent-work.png"); display:inline-block; width: 182px; height: 25px; background-position: center top; background-repeat: no-repeat; margin-left:718px; margin-top:15px; }
		.view-recent-work:hover{background-position: 0 -25px;}
			.view-recent-work span{display: none;}


	/* Easy Slider */
		#slider ul, #slider li,
		#slider2 ul, #slider2 li{ margin:0;	padding:0;list-style:none;}
		#slider2{margin-top:0;}
		#slider li, #slider2 li{ 
			/* 
				define width and height of list item (slide)
				entire slider area will adjust according to the parameters provided here
			*/ 
			height: 417px;   width: 900px;
			overflow:hidden; 
			}	
	/* // Easy Slider */



/* -----------------------------------*/
/* ---------->>> FOOTER <<<-----------*/
/* -----------------------------------*/
#footer{ background-color:#FFFFFF; background-image:url("/img/layout/footer.png"); background-position:center bottom; background-repeat:repeat-x;
height:137px; width:100%; }

#footer .col{ height: 50px; float: left; top: 70px; text-shadow:#000 1px 1px 0;  margin: 0 0 0 40px; width: 270px; color: #fff;}
	#footer .col-last{height: 50px; float: left; top: 70px; text-shadow:#000 1px 1px 0;  margin: 0 0 0 20px; width: 250px; color: #fff;}

#footer #facebook{ background-position: left 1px; background-repeat: no-repeat; background-image: url(/img/layout/footer/facebook.png);      padding-left: 50px; line-height: 18px; width: 220px;}
#footer #twitter{ background-position: left 1px; background-repeat: no-repeat; background-image: url(/img/layout/footer/twitter.png); padding-left: 50px; line-height: 18px; width: 220px; }
#footer #contact-details { line-height: 14px; width: 200px; padding-left: 50px; height: 55px; background-position: left 1px; background-repeat: no-repeat; background-image: url(/img/layout/footer/tea.png); }


#footer .col strong{ font-size: 17px; font-weight: 400;}
	#footer .col strong a { color: #fff; text-decoration: none;}
		#footer .col strong a:hover { color: #fff; text-decoration: underline;}
#footer .col p{ font-size: 12px; color: #bdbdbd;}
	#footer .col p a{ color: #bdbdbd; text-decoration: none;}
		#footer .col p a:hover{ color: #bdbdbd; text-decoration: underline;}

#footer .col-last p{ font-size: 12px; color: #bdbdbd; margin: 0;}
	#footer .col-last p a{ color: #bdbdbd; text-decoration: none;}
		#footer .col-last p a:hover{ color: #dfdfdf; text-decoration: none;}
#footer .col-last p span{ font-weight: 700; color: #FFF; padding-right: 10px;}