/* CSS Document */

/* Font Face
--------------------------------------------------------------- */
@font-face {
    font-family: 'BebasNeueRegular';
    src: url('../../includes/fonts/bebasneue-webfont.eot');
    src: url('../../includes/fonts/bebasneue-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../includes/fonts/bebasneue-webfont.woff') format('woff'),
         url('../../includes/fonts/bebasneue-webfont.ttf') format('truetype'),
         url('../../includes/fonts/bebasneue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}


	
	h1, h2,h3 , #navigation, a.button, #form label, #contactForm .submit, #footer-bottom p{
		font-family: "BebasNeueRegular";
	}
	body, p{
	    font-family: "century gothic", Arial, Helvetica, sans-serif;;
	}

/* Global Styles
--------------------------------------------------------------- */

* {
	margin: 0px;
	padding: 0px;
}

body, html {
	min-height: 101%;
}

body {
	text-align: left;
	font-size: 62.5%;
	color: #fff;
	background: url(../../images/layout/bg.gif) top repeat-x #170016;
	margin: 0px;
}

a:link, a:visited, a:focus {
	color: #0000FF;
	text-decoration: underline;
	outline: none;
}

a:hover, a:active {
	color: #000;
	text-decoration: underline;
}

a img {
	border: none;
}

/* H1/H2/H3 Styles
--------------------------------------------------------------- */

h1 {
	font-size: 3.4em;
	font-weight: normal;
	position:absolute;
	top:55px;
	left:4px;
	z-index:100;

}

h2 {
	font-size: 3.2em;
	font-weight: normal;
	
}

h3 {
	font-size: 3.2em;
	font-weight: normal;
	color: #fff;
}
		h3.pink {
			font-size: 2.0em;
			font-weight: normal;
			color: #b61e74;
			margin:10px 0px;
		}
/* Container Styles
--------------------------------------------------------------- */

#outerContainer {
	width: 100%;
	float: left;
}

#container {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	font-size: 1.2em;
    }
	#contentContainer {
		width: 960px;
		padding-top: 800px;
		background:url("../../images/layout/body-repeat.jpg") repeat-y;
		float:left;

	}
	
/* Main Styles
--------------------------------------------------------------- */

		#main {
			float: left;
			width: 450px;
			padding: 10px 10px 10px 10px;
		}
		
		    #main p {
			    margin: 10px 0px 10px 0px;
			    font-size: 1.0em;
			    line-height: 26px;
		    }
		    
		    #main ul {
			    font-size: 1.2em;
			    padding: 3px 0px;
		    }
		    
			#main ul li {
				padding: 4px 0px 4px 30px;
				list-style: none;
				background: url(../../images/misc/tick.jpg) left center no-repeat;
			}
				
		#contact #main {
			width: 940px;
		}
		
		
		
		a.button{
		    background:#1b001a;
		    color:#9e769d;
		    padding:10px 20px;
		    border-radius:10px;
		    -moz-border-radius:10px;
		    -webkit-border-radius:10px;
		    -moz-box-shadow: 0px 0px 15px #691966;
		    -webkit-box-shadow: 0px 0px 15px #691966;
		    box-shadow: 0px 0px 15px #691966;
		    font-size:1.8em;
		    float:left;
		    display:block;
		    clear:both;
		    -moz-transition-duration: 0.5s;
			-webkit-transition-duration: 0.5s;
			transition-duration: 0.5s;
		}
		    a.button:hover{
			-moz-transition-duration: 0.5s;
			-webkit-transition-duration: 0.5s;
			transition-duration: 0.5s;

			-moz-box-shadow: 0px 0px 15px #A8146F;
			-webkit-box-shadow: 0px 0px 15px #A8146F;
			box-shadow: 0px 0px 15px #A8146F;
		    }
		
	    #services{
		margin:20px 0px;
		width:960px;
		clear:both;
		float:left;
	    }
		#services h2{
		    margin:20px 0px 20px 8px;
		}
		#services .service{
		    background: rgba(255, 255, 255, 0.15);
		    float:left;
		    margin:0px 0px 0px 10px;
		    width:270px;
		    padding:15px;
		    height:300px;
		}
		    #services .service h3{
			padding:10px 0px 10px 60px;
			display:block;
		    }
		    #services .service a{
			color:#fff;
		    }
			#services #seo h3{
			    background:url("../../images/layout/seo.png") no-repeat;
			}
			#services #logo-design h3{
			    background:url("../../images/layout/logo-design.png")  0px 10px no-repeat;
			}
			#services #cms h3{
			    background:url("../../images/layout/cms.png") no-repeat;
			}
		    #services .service p{
			padding:10px 0px;
			line-height:1.8em;
		    }
/* Sidebar/CTA Styles
--------------------------------------------------------------- */
		
	    #sidebar {
		float: right;
		width: 410px;
	    }
	    
		#sidebar .button{
		    margin:20px 0px 0px 0px;
		}

/* Header Styles
--------------------------------------------------------------- */

#header {
	clear: both;
	width: 1022px;
	height: 458px;
	position: absolute;
	z-index: 10;
	top: 0px;
	left: 0px;
	background:url("../../images/layout/header.jpg");
}
    #headerText{
	position:absolute;
	top:260px;
	left:10px;
	width:450px;
    }
	#headerText p{
	    padding:10px 0px;
	}
	#headerText .button{
	    margin:10px 0px;
	}
	#logo {

		float: left;
	}
	
	#cta-top-right {
		width: 600px;
		float: right;
		padding: 5px 0px 0px 0px;
		text-align: right;
		height: 125px;
		font-size: 1.6em;
	}
	
		#cta-top-right .phone {
			font-size: 1.2em;
		}
	
	#examples{
	    position:absolute;
	    top:500px;
	    left:10px;
	}
	    #examples a.fancybox{
		margin:7px;
		float:left;
		-moz-transition-duration: 0.2s;
		-webkit-transition-duration: 0.2s;
		transition-duration: 0.2s;
	    }
		#examples a.fancybox:hover{
		    -moz-transition-duration: 0.5s;
		    -webkit-transition-duration: 0.5s;
		    transition-duration: 0.5s;

		    -moz-box-shadow: 0px 0px 15px #A8146F;
		    -webkit-box-shadow: 0px 0px 15px #A8146F;
		    box-shadow: 0px 0px 15px #A8146F;
		}
	    
	    a#more-examples-show{
		margin:20px 0px;
	    }
	    #more-examples{
		
		float:left;
	    }
/* Main Image Styles
--------------------------------------------------------------- */

#imgmain {
	z-index: 100;
	position: absolute;
	top: 240px;
	left: 0px;
}



/* Horizontal Navigation Styles
--------------------------------------------------------------- */

ul#navigation {
	width: 960px;
	z-index: 1;
	position: absolute;
	left: 0px;
	top: 210px;
	margin: 0px;
	padding: 0px;	
}

	ul#navigation li {
		display: inline;
		list-style: none;
	}
		  
		ul#navigation li a {
			float: left;
			color: #fff;
			text-decoration: none;
			line-height: 1em;
			padding: 10px 10px 10px 10px;
			font-size: 2.0em;
			margin:0px 10px 0px 0px;
			-moz-transition-duration: 0.2s;
			-webkit-transition-duration: 0.2s;
			transition-duration: 0.2s;
		}

			ul#navigation li a:hover {
			    background: rgba(0, 0, 0, 0.3);
			    color: #fff;
			    
			    -moz-transition-duration: 0.4s;
			    -webkit-transition-duration: 0.4s;
			    transition-duration: 0.4s;
			}

/* Footer Styles
--------------------------------------------------------------- */

#outerFooter {
	float: left;
	background:#0b000b;
	width:100%;
	padding:20px 0px 0px 0px;
	
}

#footer {
	clear: both;
	width: 960px;
	color: #875B84;
	margin: 0px auto;
	font-size: 1.2em;
}

	#footer .index-a {
		display: none;
	}

	#footer h3 {
		color: #fff;
		padding: 15px 0px 20px 60px;
		font-size: 3.2em;
		height:60px;
	}
		
	#footer li {
		list-style: none;
	}
	
	#footer a {
		white-space: nowrap;
		color: #875B84;
		text-decoration: none;
	}
		
		#footer a:hover {
			color: #ffcc00;
			text-decoration: underline;
		}

/* Footer Services Styles
--------------------------------------------------------------- */	

	#footer #footer-services {
		float: left;
		width: 350px;
		margin: 0px;
	}
	    #footer #footer-services h3{
		background:url("../../images/layout/footer-nav.jpg") no-repeat;
	    }
		#footer #footer-services ul li {
			float: left;
		}
	
			#footer #footer-services ul li a {
				float: left;
				width: 230px;
				padding: 3px 5px;
			}
		
/* Footer Areas Styles
--------------------------------------------------------------- */	

	#footer #footer-areas {
		float: left;
		width: 400px;
	}
	 #footer #footer-areas h3{
		background:url("../../images/layout/footer-map.jpg") no-repeat;
		padding-left:70px;
	    }
		#footer #footer-areas ul {
			float: left;
			width: 150px;
		}
	
		#footer #footer-areas ul li {
			float: left;
			width: 130px;
			padding: 3px 5px;
		}
		
/* Footer Address Styles
--------------------------------------------------------------- */	

	#footer #footer-address {
		float: left;
		width: 200px;
	}
		
		#footer #footer-address p {
			line-height: 20px;
			padding: 3px 5px;
		}
		

		
/* Footer Right Styles
--------------------------------------------------------------- */	

	#footer #footer-right {
		float: right;
		width: 190px;
	}
	
		#footer #footer-right h2 {
			width: 170px;
		}
		
		#footer #footer-right p {
			line-height: 20px;
			padding: 3px 5px;
		}
			 #footer #footer-right h3{
		background:url("../../images/layout/footer-address.jpg") no-repeat;
	    }			

				
/* Footer Bottom Styles
--------------------------------------------------------------- */	

	#footer #footer-bottom {
		width: 940px;
		float: left;
		margin:30px 0px 20px 0px;
		text-align: center;
	}
	    #footer #footer-bottom p{
		letter-spacing:0.2em;
	    }

/* Float Styles
--------------------------------------------------------------- */

.left, .img-left {
	float: left;
}

	.img-left {
		margin: 10px 10px 10px 0px;
	}

.right, .img-right {
	float: right;
} 

	.img-right {
		margin: 10px 0px 10px 10px;
	}

	
/* Generic Styles
--------------------------------------------------------------- */

.clearfix {
	clear: both;
}

/* Contact Table Styles
--------------------------------------------------------------- */
div#form {
	float: left;
	width: 920px;
	padding:40px 0px 40px 15px;
}
    #form h2{
	margin:20px 0px;
    }
	#form h2 span{
	    color:#886787;
	    font-size:26px;
	}
	#contactForm fieldset {
		border: none;
		clear: both;
	}
				
	
/* -- Contact Form Left */
	
	#contactForm #contactFormLeft {
		width: 400px;
		float: left;
    
	}
	
	/* -- Contact Details */
	
	#contactForm fieldset#contactDetails .contactDetailsWrap {
		width: 373px;
		padding: 0px 5px 5px 10px;
		margin: 0px 0 15px 0;
		border-radius: 7px;
		display:block;
		float:left;
		clear:both;
	}	
	
	/* -- IE6 Hack :( */
	
		*html #contactForm fieldset#contactDetails .contactDetailsWrap {padding-bottom: 0;}
	
		#contactForm fieldset#contactDetails label {
			width: 123px;
			float: left;
			padding: 8px 0 0 0;
			display: block;
			margin: 0;
			font-size: 1.6em;
		}
		
		#contactForm fieldset#contactDetails input {
			width: 240px;
			color:#fff;
			padding: 15px 5px;
			background: rgba(255, 255, 255, 0.15);
			float: right;
			font-size: 1.1em;
			border: none;
		}
	/* -- Enquiry */
	
	#contactForm #contactFormRight {
		width: 496px;

		float: right;
	}
	
		#contactForm #contactFormRight #enquiryDetailsWrap {
			width: 490px;
			border-radius: 7px;
			
			height: 201px;
		}
	
		#contactForm #contactFormRight #enquiryDetailsWrap label {
			float: left;
			width: 103px;
			padding: 8px 0 0 5px;
			height: 193px;
			font-size:1.6em;
		}
		
		#contactForm #contactFormRight #enquiryDetailsWrap textarea {
			padding: 10px;
			width: 360px;
			float: left;
			height: 181px;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 1.1em;
			background: rgba(255, 255, 255, 0.15);
			border: none;
			color:#fff;
		}
		
			#contactForm #contactFormRight #enquiryDetailsWrap textarea:focus,
			#contactForm fieldset#contactDetails input:focus {
				background: rgba(255, 255, 255, 0.20);
			}
			
	#contactForm #submitFormFieldset {
		margin: 0 0 10px 0;

	}
		
		#contactForm .submit {
			display: block;
			padding: 5px 0px;
			clear: both;
			width: 160px;
			float: right;
			margin:20px 7px 0px 0px ;
			background:#653363;
			border-radius:5px;
			-moz-border-radius:5px;
			-webkit-border-radius:5px;
			border:none;
			color:#fff;
			font-size:2.0em;
			-moz-box-shadow: 0px 0px 15px #281328;
			-webkit-box-shadow: 0px 0px 15px #281328;
			box-shadow: 0px 0px 15px #281328;
		}
		    #contactForm .submit:hover{
			-moz-box-shadow: 0px 0px 15px #691966;
			-webkit-box-shadow: 0px 0px 15px #691966;
			box-shadow: 0px 0px 15px #691966;
		    }
		    

/* -------------- PHP Errors */

#form #errors {
	font-size:1.0em;
	color: #7F2D0F;
	font-weight: bold;
	padding:0px;
	margin:0px;
}

	#contact #form #errors ul {
		padding:0px;
		margin:10px;
		}

	#contact #form #errors li {
		background: url(../../images/misc/form-error.png) left center no-repeat;
		list-style: none;
		margin:0px;
		padding: 8px 0px 8px 25px;
	}
	
/* -------------- Hide Bot Buster */

div#form fieldset.botBuster,
div#callbackform #callbackBotBuster {
	display: none;
}


/* -------------- jQuery Errors */

	.formError {
			position:absolute;
			top:300px; left:300px;
			padding-bottom:13px;
			display:block;
			z-index:5000;
		}
			.ajaxSubmit{ padding:20px; background:#55ea55;border:1px solid #999;display:none}
			
			.formError .formErrorContent {
				width:100%; 
				background:#ee0101;
				color:#fff;
				width:150px;
				font-family:tahoma;
				font-size:11px;
				border:2px solid #ddd;
				padding:4px 10px 4px 10px;
			}
			.greenPopup .formErrorContent {background:#33be40;}
			
			.blackPopup .formErrorContent {background:#393939;color:#FFF;}
			
			.formError .formErrorArrow{
				position:absolute;
				bottom:0;left:20px;
				width:15px; height:15px;
				z-index:5001;
			}
			.formError .formErrorArrowBottom{top:0;margin:-6px;}
			
				.formError .formErrorArrow div{
					border-left:2px solid #ddd;
					border-right:2px solid #ddd;
					font-size:0px; height:1px; background:#ee0101;
					margin:0 auto;line-height:0px;
					font-size:0px; display:block;
				}
					.formError .formErrorArrowBottom div{
					}
					
				.greenPopup .formErrorArrow div{background:#33be40;}
				.blackPopup .formErrorArrow div{background:#393939;color:#FFF;}

				.formError .formErrorArrow .line10{width:15px;border:none;} 
				.formError .formErrorArrow .line9{width:13px;border:none;} 
				.formError .formErrorArrow .line8{width:11px;} 
				.formError .formErrorArrow .line7{width:9px;} 
				.formError .formErrorArrow .line6{width:7px;} 
				.formError .formErrorArrow .line5{width:5px;} 
				.formError .formErrorArrow .line4{width:3px;} 
				.formError .formErrorArrow .line3{width:1px;
					border-left:2px solid #ddd;
					border-right:2px solid #ddd;
					border-bottom:0px solid #ddd;} 
				.formError .formErrorArrow .line2{width:3px;border:none;background:#ddd;}
				.formError .formErrorArrow .line1{width:1px;border:none;background:#ddd;}