/*

colours:
	
light blue = #2F97FF

medium blue = #0075EA

dark blue = #0063C6

*/
	html, body {
		margin: 0; padding: 0;
		overflow: auto;
		}

	body {
		width: 100%; max-width: 100%;
		background-color: #333;
		font: 400 0.8em arial, sans-serif;
		color: #ccc;
		line-height: 1.4em;
		}

	a {
		text-decoration: none;
		color: #0063C6;
		}
		
	p {
		margin-top:0;
		}
		
	ul {
		list-style:none;
		}

	a:hover {
		text-decoration: underline;
		color: #2F97FF;
		}

	#left {
		position: absolute; top: 0; left: 0; 
		overflow: hidden; 
		height: 100%; width: 35%;
		text-align: right;
		background: #333 url('../images/fade.jpg') no-repeat right;
		}

	#outer {
		position: absolute; left: 0;
		top: 47%;
		width:100%;
		height: 240px;
		margin-top: -120px;
		}

	body > #left {
		position:fixed;
		}

	#main {
		/*position: absolute; top: 0; left: 36%; 
		overflow: hidden; 
		width: 60%;
		height: 150%;*/
		height: 100%;
		margin: 20px 5% 20px 38%;
		padding-top: 0px !important;
		padding-top: 20px;
		overflow: visible; 
		}
			
	/*#home {
		position:absolute;
		top: 32%;
		width:100%;
		height:100px;
		}
		
	#main_container {
		position: absolute; left: 0;
		top: 0%;
		width:100%;
		height: 240px;
		margin-top: -120px;		
		z-index:2;
		}*/


	h1 {
		display: inline;
		margin-right: 30px;
		font: 800 35px 'century gothic', 'trebuchet ms', arial, sans-serif;
		color: #fff;
		text-align: right;
		}

	span.title {
		display: block;
		margin: 0 0 5px 0;
		/*font: 600 1.1em 'century gothic', 'trebuchet ms', arial, sans-serif;*/
		font: 400 20px 'trebuchet ms', arial, sans-serif;
		color: #fff;
		}

	img.logo {
		margin-bottom: -4px;
		margin-right: 8px;
		}

	img.logo_small {
		margin-bottom: -3px;
		margin-right: 8px;
		}

	span.yellow {
		color: #cf0;
		}

	span.green {
		color: #0c0;
		}
	
	span.lightblue {
		color: #2F97FF;
		}
	
	span.mediumblue {
		color: #0075EA;
		}
	
	span.darkblue {
		color: #0063C6;
		}

	a.nav {
		display: block;
		margin: 0;
		text-decoration: none;
		font: 400 20px 'trebuchet ms', arial, sans-serif;
		color: #aaa;
		padding: 0 30px 3px 0;
		}

	a.nav:hover {
		color: #2F97FF;
		background: #222;
		text-decoration: none;
		}
		
	a.active {
		color: #2F97FF;
		}

	.credit a, .credit a:hover {
		color: #555;
		}

	.date {
		float: left; 
		width: 2.0em;
		font: 600 1.3em arial, sans-serif;
		padding-right: 5px;
		text-align: right;
		}

	div.main {
		margin-left: 2.9em;
		margin-bottom: 25px;
		margin-top:27%;
		border-left: solid 1px #3a3a3a;
		padding: 0 30px 30px 5px;
		background: #333 url('../images/corner.jpg') no-repeat bottom right;
		}
		
	div.main ul {
		list-style:square;
		}
	
	div.main ul.no_bullets {
		list-style:none;
		margin-left:0px;
		}

	p.question {
		font-style:italic;
		}
			
	p.answer {
		margin-top:-15px;
		font-size:11px;
		}
		
	div.web_design {margin-top:15%;}
	
	div.web_hosting {margin-top:14%;}
	
	div.hosting_restrictions {margin-top:36%;}
	
	div.it_consultancy {margin-top:35%}
	
	div.portfolio {margin-top:8%}
	
	div.faq {margin-top:13%}
	
	div.contact {margin-top:25%}
	
	div.submit {margin-top:21%}

	img.main {
		float: right;
		margin: 10px;
		padding: 4px;
		background: #0c0;
		border: solid 3px #2e2e2e;
		}

	a img.main:hover {
		background: #cf0;
		}

	div.quote {
		margin: 8px 0 12px 10px; color: #fff;
		background: #2a2a2a url('../images/quote.jpg') repeat-x top;
		border-bottom: solid 1px #2e2e2e; 
	 	border-right: solid 1px #2e2e2e; 
	 	border-left: solid 2px #0c0;
		padding: 8px;
		line-height: 1.7em;
		}

	p.comment {
		font-size: 0.9em;
		font-family: 'century gothic', 'trebuchet ms', arial, sans-serif;
		}
		
	.credits {
		color:#555;
		font: 400 0.9em 'trebuchet ms', arial, sans-serif;
		margin-right:30px;
		}
	.credits a {
		color:#555;
		}
	
	.credits a:hover {
		color:#2f97ff;
		}

	/*div.credit {
		position:absolute;
		top:20px;
		width:100%;
		display: block;
		text-align: center;
		color: #555;
		font: 400 0.9em 'trebuchet ms', arial, sans-serif;
		z-index:1;
		}
	
		
	div.credit a:hover {
		color:#2F97FF;
		}*/

	
	/* Table Styling */
	table.hosting
{ text-align: center;
font-family: Verdana;
font-weight: normal;
font-size: 11px;
color: #404040;
width: 500px;
background-color: #fafafa;
border: 1px #6699CC solid;
border-collapse: collapse;
border-spacing: 0px; } 

td.header
{ border-bottom: 2px solid #6699CC;
border-left: 1px solid #6699CC;
background-color: #BEC8D1;
text-align: left;
text-indent: 5px;
font-family: Verdana;
font-weight: bold;
font-size: 11px;
color: #404040; }

td.title
{ border-bottom: 1px solid #9CF;
border-top: 0px;
border-left: 1px solid #9CF;
border-right: 0px;
text-align: left;
text-indent: 10px;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-style:italic;
font-size: 11px;
color: #404040;
background-color: #fafafa; }

td.body
{ border-bottom: 1px solid #9CF;
border-top: 0px;
border-left: 1px solid #9CF;
border-right: 0px;
text-align: left;
text-indent: 10px;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 11px;
color: #404040;
background-color: #fafafa; }


.portfolio_image {float:left; margin-top:0px; margin-left:0px;}
.portfolio_image img {border:1px solid #888;}
.portfolio_text {float:left; margin-top:-4px; text-align:left; margin-left:20px; margin-right:20px; font-size:11px; /*border:1px solid #fff;*/}
.portfolio_website {float:left; margin-top:-4px; text-align:left; margin-left:20px; /*border:1px solid #fff;*/}
.portfolio_image img:hover {border:1px solid #2F97FF;}



/* contact page formatting */
.contact_left{float:left; width:49%; margin-top:0px; margin-left:20px; /*border:1px solid #000;*/}
.contact_right{float:right; width:49%; margin-top:34px; margin-right:20px; /*border:1px solid #fff;*/}

p.contact_centre {text-align:center;}

/* contact form formatting */
#contact_form{position:relative; margin-left:0px; margin-top:0px; padding-left:7px; padding-right:7px; padding-top:5px; width:505px; height:395px; border:2px solid #888; z-index:1; text-align:left;}
.contact_form_left{float:left; width:39%; margin-top:0px; margin-left:1px; /*border:1px solid #000;*/}
.contact_form_right{float:right; width:56%; margin-top:34px; margin-right:5px; /*border:1px solid #fff;*/}
.contact_submit{position:absolute; bottom:4px; left:222px; /*border:1px solid #fff;*/}
.contact_title, .contact_ok, .contact_error {/*color:#0075EA;*/}
.contact_required{}
.contact_req{color:#2F97FF;}
.contact_ok {position:relative; left:55px; top:135px; text-align:center;}
.contact_error {position:relative; left:55px; top:115px; text-align:center;}
.box_title {color:#0063C6;}
#submit_button {font-size:90%;}


#search_engine {}
#search_engine .heading {}
#search_engine .normal {}
#search_engine .confirm {font-size:10px; margin-top:-12px;}


.portfolio_section {position:relative; height:120px; padding-bottom:10px; width:100%; /*border:1px dashed #fff;*/}
.left_box {float:left; display:block; width:185px; padding-right:10px; /*border:1px dashed #fff;*/}
.right_box {float:left; display:block; width:400px; /*border:1px dashed #fff;*/}