/* CSS KamikazeMusic.com sample HTMl5 CSS


-- Import CSS
-- Misc
	-- positioning
	-- clearing breaks
	-- HTML5 inline fix
	-- generic styles
-- main areas
-- header
-- menu
-- main content
-- footer
-- accessibility 
	-- positioning

*/


/* import CSS */
@import url(reset.css);
@import url(typography.css);
@import url(text_replace.css);

 

/*clear breaks*/
.clearright{ clear:right; line-height:0;}
.clearleft{ clear:left; line-height:0;}
.clearboth{ clear:both; line-height:0;}
/**HTML5 inline fix thingie**/
header, footer, nav, section, article {
 display:block;
}

.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


/**generic styles**/
p{
	margin:8px 2px 8px 2px;
}
p.center{
	text-align:center;
}
.fLeft{ float:left; }
.fRight{ float:right;}


/**body/HTML styles**/
body{
	background:#d8d8d8 url("../images/bg.jpg") repeat-x top;
}

/**main areas**/
#content_container{
	width:900px;
	margin:50px auto 10px;
	background:#fff;
	border-top:3px solid #6c0101;
	padding-top:15px;
	-webkit-border-bottom-left-radius:20px;
	-webkit-border-bottom-right-radius:20px;
	-moz-border-radius-bottomleft:20px;
	-moz-border-radius-bottomright:20px;
}


/**header**/
header{
	
}

header a#thelogo{
	float:left;
}

header p{
	float:right;
	padding-right:5px;
	margin-top:-20px;
}
	
	p.telephone{
		background:url('../images/telIcon.png') no-repeat;
		padding:4px 5px 6px 30px;
	}



/**menu**/	
nav{
	border-bottom:2px solid #a3a3a3;
	width:684px;
	float:right;
	text-align:right;
	margin-top:1px;
}

nav > ul li{
	display:inline;
	margin:0 20px;
	padding-bottom:3px;
}
nav > ul li:last-child{
	margin-right:5px;
}

nav > ul li:hover{
	border-bottom:2px solid #6c0101;
}





	
/**main content**/
#mainContent{
	width:900px;
}
	h1{
		padding:20px 10px;
	}
	/**homepage**/
	#homepagespan{
		background:url('../images/homepage_top.jpg') no-repeat;
		background-position:right center;
		width:860px;
		padding:20px;
	}
	#homepagespan p{
		width:510px;
	}
	#homepagespan h1{
		padding:0;
	}

#mainCol{
	float:left;
	width:550px;
	padding:10px;
}
	#mainCol >p{
		margin-left:10px;
	}
	
	#mainCol h2{
		padding-left:10px;
	}
	
	/**homepage**/
	ul#homeCTA{
		height:65px;
		border-bottom:1px solid #7f7f7f;
	}
	ul#homeCTA li{
		width:102px;
		height:46px;
		padding:5px 7px;
		margin:0 10px;
		float:left;
		
		background:#d8d8d8;
		padding-right:50px;
		-webkit-border-radius:7px;
		-moz-border-radius:7px;
		-o-border-radius:7px;
		border-radius:7px;
		
	}
	ul#homeCTA li.support{
		background:#d8d8d8 url('../images/ring.png') 95% 50% no-repeat;
	}
	ul#homeCTA li.backup{
		background:#d8d8d8 url('../images/monitor.png') 95% 50% no-repeat;
	}
	ul#homeCTA li.secure{
		background:#d8d8d8 url('../images/padlock.png') 95% 50% no-repeat;
	}
	ul#homeCTA  li:hover{
		background-color:#bcbcbc;
		-webkit-transition:background-color 0.75s ease-in-out;
		-moz-transtition:background-color 0.75s ease-in-out;
		-o-transtition:background-color 0.75s ease-in-out;
		transition:background-color 0.75s ease-in-out;
	}
	
	#homepageNav{
		height:360px;
	}
	#homepageNav > div{
		width:260px;
		height:166px;
		background:#f1f1f1;
		-webkit-border-radius:7px;
		-moz-border-radius:7px;
		-o-border-radius:7px;
		border-radius:7px;
		border:2px solid #b3b3b3;
		margin:5px;
		float:left;
	}
	.cssgradients #homepageNav > div{ background:#f1f1f1 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#d5d5d5)) no-repeat; }
	
	#homepageNav > div:hover{
		background:#c8c7c7;
		-webkit-transition:background-color 0.75s ease-in-out;
		-moz-transtition:background-color 0.75s ease-in-out;
		-o-transtition:background-color 0.75s ease-in-out;
		transition:background-color 0.75s ease-in-out;
	}
		
	#homepageNav h2{
		padding:10px;
	}
	#homepageNav p{
		float:right;
		width:130px;
		margin-right:30px;
	}
	#homepageNav img{
		float:left;
		margin-left:20px;
		margin-top:8px;
	}
	
	.serviceContentImage{
		float:right;
		/*border:1px solid #6c0101;*/
	}
	
	
	/**case studies**/
	section.casestudy h2{
		border-top:1px solid #7f7f7f;
		margin-top:16px;
		padding-top:10px;
	}
	
	
	/**contact form**/
	#contactForm{
		margin-left:20px;
	}
	#contactForm  legend {
		font-size:1.1em;
		font-weight: bold;
		padding: 5px 5px 10px 5px;
		text-shadow: 0 1px 1px #c0d576;
	}
	#contactForm fieldset ol li, #contactForm fieldset.enquiry {
		border: 1px solid #7f7f7f;
		line-height: 1.8em;
		list-style: none;
		padding: 5px 10px;
		margin-bottom: 5px;
		width:400px;
	}
	#contactForm label {
		float: left;
		width: 150px;
	}
	#contactForm input{
		width:200px;
		padding:5px;
		border: 1px solid #7f7f7f;
	}
	#contactForm textarea {
		background: #ffffff;
		border: 1px solid #7f7f7f;
		font: italic 13px Georgia, "Times New Roman", Times, serif;
		outline: none;
		padding: 5px;
		width: 200px;
	}
	#contactForm textarea:focus, #contactForm input:focus ,#contactForm textarea:active, #contactForm input:active{
		background: #ddd;
		border:1px solid #6c0101;
		-webkit-transition-property:background-color, border-color;
		-webkit-transition-duration:1s, 0.5s;

	}
	#contactForm button {
		border: 1px solid #7f7f7f;
		display: block;
		padding: 3px;
		margin-left:300px;
		font-weight:bold;
	}
	#contactForm button:hover {
		cursor: pointer;
	}
	p.errors{
		background:#ccc;
		padding:5px;
		border:1px solid #6c0101;
		width:425px;
		color:#000;
	}
	p.enquirySuccess{
		background:#ddd;
		padding:5px;
		border:1px solid #43581D;
		width:425px;
		color:#000;
	}
	#contactForm input.missing{
		border:1px solid #f00;
	}
	
	
	
#sideCol{
	width:310px;
	float:right;
	border-top:2px solid #6c0101;
	margin:10px;
}
	#sideCol h3{
		padding:10px 15px 10px 0;
		border-bottom:1px solid #7f7f7f;
	}
	
	p.address{
		border-top:1px solid #7f7f7f;
		padding:10px;
	}
	
	ul#services{
		padding-left:20px;
	}
	ul#services li{
		list-style-image:url('../images/arrow.gif');
		padding:5px 2px;
	}
	
	




/**footer**/
footer{
	width:900px;
	margin-left:auto;
	margin-right:auto;
	padding:20px;
}	
	footer img{
		display:inline;
		margin:-2px 3px 0 0 ;
		float:left;
	}
/*	footer p{
		display:inline;
	}*/
	
div.creditLink{
	color:#000;
	width:900px;
	margin:5px auto 40px;
	text-align:left;
	padding-left:40px;
	font-size:0.8em;
}



/**accessibility**/
a.accessibility:active, a.accessibility:focus {
	left: 0em;
	width:10em;
	border: 3px solid #FF0000;
	background-color: #fff;
	text-align:center;
	height:3em;
	line-height: 3em;
	font:1em bold Verdana, Geneva, sans-serif;
	color:#03F;
	z-index:10;
}
a.footerAccessibility {
	position: absolute;
	bottom:0;
    left: -999em;
    width: 990em;
}
a.footerAccessibility:active, a.footerAccessibility:focus {
	left: 0em;
	bottom:0em;
	width:10em;
	border: 3px solid #FF0000;
	background-color: #fff;
	text-align:center;
	height:20px;
	line-height: 20px;
	font:14px bold Verdana, Geneva, sans-serif;
	color:#03F;
}

/* positioning */
.accessibility {
	   position: absolute;
       left: -999em;
       width: 990em;
   }
#skipLink {
	display: block;
	position: absolute;
	top:0;
	left: -999px;
	height: 20px;
	padding: 10px 20px;
	z-index:999;
}
#topLink {
	display: block;
	position: absolute;
	bottom:0;
	left: -999px;
	height: 20px;
	padding: 10px 20px;
	z-index:999;
}
#skipLink:focus, #topLink:focus {
	left: 0;
}