html,body {
	margin:0;
	padding:0;
	height:100%; /* needed for container min-height */
	background: #eee url(gfx/bkg-line.png) center repeat-y;
	font-family:arial,sans-serif;
	font-size:12px;
	color:#231f20;
}

h3 { 
	font:18px georgia,serif; 
	margin:-0.2em 0 0.5em 0;
	font-weight:bold;
}

h4 {
	font:15px georgia,serif; 
	margin:0.2em 0 0.3em 0.2em;
	font-weight:bold;
}
	h1, h2, h3, h4, h5, h6 {
		color:#ff0000;
	}

.repair h1, .repair h2, .repair h3, .repair h4, .repair h5, .repair h6{
		color:#231f20;
	}	

p { 
	line-height:1.5; 
	margin:0 0 1em;
}

div#wrapper {
	position:relative; /* needed for footer positioning*/
	margin:0 auto; /* center, not in IE5 */
	width:850px;
	background:#ddd;
	
	height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/

	min-height:100%; /* real browsers */
	
}

#header {
	position:relative;
	height:190px;
	background-color:#000;
	text-align:right;
	}
	
#header a img {border:0;}

#menu {
	/*font-style:italic;*/
	position:absolute;
	bottom:0;
	right:8px;
	font-weight:100;
	font-size:1.2em;
	padding:0;
	color:red;
	text-align:right;
	width: 495px;
	height: 32px;
	margin: 0 0 0 0;
	}
	
#menu2 {
	/*font-style:italic;*/
	position:absolute;
	top:0;
	right:8px;
	font-weight:100;
	font-size:1.2em;
	padding:0;
	color:red;
	text-align:right;
	width: 100px;
	height: 32px;
	margin: 0;
	}	
	
#logo { float:left; padding: 1px 0 0 23px;}
#logotext {float:right; padding: 14px 130px 0 0; margin:0;}

#menu a:visited, #menu a:link {color:#FF0000; text-decoration:none;}
#menu a:active, #menu a:hover {color:#FFFFFF; text-decoration:underline;}

#content a:visited, #content a:link {color:#000000; text-decoration:underline; font-weight:bold;}
#content a:active, #content a:hover {color:#444444; text-decoration:underline; font-weight:bold;}



div#content {
	padding:12px 12px 60px; /* bottom padding for footer */
	font-size:12px;
}
	div#content p {
		text-align:justify;
		padding:0 12px;
	}

div#footer {
	font:13px georgia,serif; 
	position:absolute;
	width:100%;
	bottom:0; /* stick to bottom */
	background:#000;
}

div#footer p {
		padding:0.7em;
		margin:0;
	/*	letter-spacing:2px; */
}

#footer p a:visited, #footer p a:link  {text-decoration:none;}
#footer p a:active, #footer p a:hover {color:#FFFFFF; text-decoration:underline;}

h3.h_main, h3.h_contact, h4.h_main, h4.h_contact {/* grey text */
color:#616161;
}
h3.h_hosting,h4.h_hosting,h3.h_purchase,h4.h_purchase{/* red text */
color:#DF1E1E;
}
h3.h_design, h4.h_design{/* blue text */
color:#1E1EFF;
}
h3.h_portfolio, h4.h_portfoli0{/* green text */
color:#297C1E;
}
h3.h_repair, h4.h_repair{/* orange text */
color:#EA511E;
}
h3.h_about, h4.h_about{/* purple text */
color:#841E84;
}

.bottom_main, .bottom_contact {/* grey border */
border-top:8px solid #7b7b7b;
color:#7b7b7b;
}
.bottom_hosting, .bottom_purchase{/* red border */
border-top:8px solid #DF1E1E;
color:#DF1E1E;
}
.bottom_design{/* blue border */
border-top:8px solid #1E1EFF;
color:#5555FF;
}
.bottom_portfolio{/* green border */
border-top:8px solid #297C1E;
color:#297C1E;
}
.bottom_repair{/* orange border */
border-top:8px solid #EA511E;
color:#EA511E;
}
.bottom_about{/* purple border */
border-top:8px solid #841E84;
color:#841E84;
}

.top_main, .top_contact {/* grey border */
border-bottom:8px solid #7b7b7b;
color:#841E84;
}
.top_hosting, .top_purchase{/* red border */
border-bottom:8px solid #DF1E1E;
color:#DF1E1E;
}
.top_design{/* blue border */
border-bottom:8px solid #1E1EFF;
color:#1E1EFF;
}
.top_portfolio{/* green border */
border-bottom:8px solid #297C1E;
color:#297C1E;
}
.top_repair{/* orange border */
border-bottom:8px solid #EA511E;
color:#EA511E;
}
.top_about{/* purplee border */
border-bottom:8px solid #841E84;
color:#841E84;
}

.imgRight {
float:right;
border:#9bb040 2px solid;
margin: 0 0 0 10px;
}

.curves {
border-radius: 12px;
-o-border-radius: 12px;
-icab-border-radius: 12px;
-khtml-border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
}


.curvesTR {
-moz-border-radius-topright: 12px;
-webkit-border-top-right-radius: 12px;
-o-border-top-right-radius: 12px;
-icab-border-top-right-radius: 12px;
-khtml-border-top-right-radius: 12px;
}

.curvesTL{
-moz-border-radius-topleft: 12px;
-webkit-border-top-left-radius: 12px;
-o-border-top-left-radius: 12px;
-icab-border-top-left-radius: 12px;
-khtml-border-top-left-radius: 12px;
}

.curvesBR {
-moz-border-radius-bottomright: 12px;
-webkit-border-bottom-right-radius: 12px;
-o-border-bottom-right-radius: 12px;
-icab-border-bottom-right-radius: 12px;
-khtml-border-bottom-right-radius: 12px;
}

.curvesBL{
-moz-border-radius-bottomleft: 12px;
-webkit-border-bottom-left-radius: 12px;
-o-border-bottom-left-radius: 12px;
-icab-border-bottom-left-radius: 12px;
-khtml-border-bottom-left-radius: 12px;
}

.hosting {text-align:center; max-width:826px; width:826px;}

.package {
width:232px;
height:280px;
margin:10px 0 10px 0;
text-align:center;
/* float:left; */	
position:relative;
line-height:1.2em;
font-size:13px;
}

.package2 {
width:232px;
height:330px;
margin:10px 5px 10px 5px;
text-align:center;
/* float:left; */	
position:relative;
line-height:1.2em;
font-size:13px;
}

.grey {
border:4px solid #7b7b7b;
background-color: #cccccc;
}

.yellow {
border:4px solid #FFFF00;
background-color: #FBFB96;
}

.orange {
border:4px solid #FD9800;
background-color:#FFC268;
}

.red {
border:4px solid #FF0000;
background-color:#FF6868;
}

.purple {
border:4px solid #CD00D2;
background-color: #F0B2F1;

}

.blue {
border:4px solid #4703FB;
background-color:#C7B3FE;
}

.green {/* to match portfolio colour scheme */
	border:4px solid #297C1E;
	background-color:#72ca66;
	}
	
.purplePage {/* to match about page */
	border:4px solid #841E84;
	background-color:#ca87ca;
	}

.orangePage {/* to match repair page */
	border:4px solid #EA511E;
	background-color:#f59c7f;
	}

.package .icon, .package2 .icon, .person .icon {
position:relative;
top:-25px;
padding-bottom:0;
margin-bottom:-10px;
}



.portfolioWrapper{
	text-align:center;
	padding: 0 20px;
	}
	

.portfolioItem{
	clear:both;
	width:100%;
	margin:10px 0;
	}
	
.pText {width:520px; float:left; padding-top:5px;}
.pImage {width:250px; float:right; border-left:4px solid #297C1E;}

.pDate {margin-top:-14px; font-style:italic;}
.pLink a {font-style:italic; font-weight:normal;}

.clear {
clear:both;
}

.gap {height:20px;}

.subHeading {font-size:13px; font-weight:bold;}


.about, .repair {text-align:center; width:826px;}

div#content .about p { 
	line-height:1.5; 
	margin:0;
	padding:5px; /* over-rides the padding set in div#content p */
}

.person {
width:383px;
height:350px;
overflow:auto;
margin:10px;
text-align:center;
line-height:1.2em;
font-size:13px;
padding:0;
}

.statement {
width:796px;
height:205px;
margin:10px;
text-align:center;
line-height:1.2em;
font-size:13px;
padding:0;
}

.left {float:left;}
.right {float:right;}


.area {
width:383px;
height:125px;
overflow:auto;
margin:10px;
text-align:center;
line-height:1.2em;
font-size:13px;
padding:0;
}

.maintenance {
width:796px;
height:450px;
margin:10px;
text-align:left;
line-height:1.2em;
font-size:13px;
padding:0;
}


/*main page */

#intropictures
{
  float:left;
  width:396px;
margin:25px 0 0 50px;
text-align:left;
position:relative;
}



#intropictures a:hover, #intropictures a:active { 
background-position: 0 -70px;
color: #049;
}

a.hostingbig {
	display: block; /* a tag must be a block */
	height:70px;
	width: 396px;
	background: url(gfx/hostingbig.png) top left no-repeat;
}

a.designbig {
	display: block; /* a tag must be a block */
	height:70px;
	width: 396px;
	background: url(gfx/designbig.png) top left no-repeat;
}

a.portfoliobig {
	display: block; /* a tag must be a block */
	height:70px;
	width: 396px;
	background: url(gfx/portfoliobig.png) top left no-repeat;
}

a.repairbig {
	display: block; /* a tag must be a block */
	height:70px;
	width: 396px;
	background: url(gfx/repairbig.png) top left no-repeat;
}

a.aboutbig {
	display: block; /* a tag must be a block */
	height:70px;
	width: 396px;
	background: url(gfx/aboutbig.png) top left no-repeat;
}

a.contactbig {
	display: block; /* a tag must be a block */
	height:70px;
	width: 396px;
	background: url(gfx/contactbig.png) top left no-repeat;
}



#introtext {
  float:right;
  width:340px;
margin:15px 10px 0 0;
text-align:left;
position:relative;
}

.introtitle {
    font:28px georgia,serif; 
	margin:0.9em 0 0 0;
	font-weight:normal;
}
.introbody {
    line-height:2em;
	display:block;
	text-align:left;
	margin:0 0 0 0px;
	padding:0;
    font:20px georgia,serif;
}

/*---------- bubble tooltip -----------*/
a.tt{
    position:relative;
    z-index:24;
    /*color:#3CA3FF;
	font-weight:bold;*/
    text-decoration:none;
}

a.tt img {
	border:0;
	position:relative;
	top: 2px;
	padding:0px 2px 0 2px;
	margin-top:-1px;
}

a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #000000; background:;}
a.tt:hover span.tooltip{
    display:block;
    position:absolute;
    top:-10px; left:20px;
	padding: 12px 0 0 0;
	width:200px;
	color: #000000;
	font-weight:normal;
    text-align:justify;
	filter: alpha(opacity:90);
	KHTMLOpacity: 0.90;
	MozOpacity: 0.90;
	opacity: 0.90;
}
a.tt:hover span.top{
	display: block;
	padding: 11px 8px 0 16px;;
    background: url(gfx/bubble.png) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
	display: block;
	padding: 0 8px 0 16px; 
	background: url(gfx/bubble_filler.png) repeat bottom; 
}
a.tt:hover span.bottom{
	display: block;
	padding:3px 8px 10px 16px;
	/*color: #548912;*/
    background: url(gfx/bubble.png) no-repeat bottom;
}
/*--------------------------------*/