/* CSS Document */

html {
	font-family			:	Arial, Helvetica, sans-serif; 
	font-size			:	0.9em;
	}

body {
	position			:	relative;
	padding				:	0px;
	margin				:	0px;
	text-align			:	center;
	background			:	url(/images/background.jpg) repeat fixed;
	}
	
h1 {
	font-size			:	1.5em; 
	font-weight			:	bold; 
	color				:	#000099;
	}

h2 {
	font-size			:	1.2em; 
	font-weight			:	bold; 
	color				:	#000099;
	}
	
.h2-reduced-margin {
	margin				:	2px;
	}
#portfolio h2 {
	clear				:	right;
	}

h3 {
	font-size			:	1em; 
	font-weight			:	bold;
	font-style			:	italic;
	color				:	#000099;
	margin-bottom		:	-1.2em;
	}

.skip {
	position			:	absolute; 
	left				:	-5000px;
	}


/* Main is the holding Div that contains the banner, main content and footer */
#main {
	position			:	relative;
	margin				:	0px auto;
	width				:	800px;
	margin-bottom:5px;
	margin-top:5px;
	}

/* myBanner hold the logo, business title and control panel */
#myBanner { 
	height				:	100px; 
	padding				:	5px 5px 5px 5px; 
	background			:	url(/images/glass-banner-top.gif) repeat-y;
	margin-bottom		:	0px;
	}
	
h1.bannertext { 
	text-align			:	left; 
	margin				:	2px;
	}
	
#logo {
	vertical-align		:	middle; 
	border				:	none;
	}
	
/* contactbanner contains the telephont and email address bar */
#contactbanner {
	background			:	yellow url(/images/glass-banner-middle.jpg) no-repeat top left;
	border				:	none; 
	padding				:	0px; 
	height				:	25px; 
	text-align			:	center; 
	margin-top			:	0px;
	}
	
#contactbanner p {
	margin				:	0px; 
	padding-top			:	3px;
	}
	
/* maincontent is where the text and other information in the web page appears */
#maincontent { 
	text-align			:	left; 
	padding				:	5px 5px 5px 20px; 
	background			:	white url(/images/glass-banner-bottom.jpg) no-repeat top left;
	}

/* Controlbox is the box that contans links to webmail, control panel and support */
#controlBox  {
	margin				:	15px 20px 0px 0px; 
	width				:	150px; 
	height				:	60px; 
	background			:	url(/images/trans-white-background.png) repeat; 
	padding				:	5px; 
	border				:	1px outset white; 
	text-align			:	left;
	position:absolute;
	top:0px;
	right:0px;
	}
	
a:link, a:visited {
	text-decoration		:	none; 
	color				:	#000099; 
	}
	
a:hover, a:focus {
	text-decoration		:	none; 
	color				:	#000099; 
	background-color	:	#ffcc00;
	}
	
acronym {
	border-bottom		:	1px dotted red;
	}

/* Nav-bar contrains all the navigation elements on the site */
#nav-bar {
	margin-top			:	10px;
	margin-bottom		:	10px;
	text-align			:	center;
	width				:	100%;
}

#nav-bar p  {
	margin-left			:	50px; 
	margin-top			:	0px; 
	}

#nav-bar a:link, #nav-bar a:visited {
	text-decoration		:	none; 
	color				:	#000099; 
	}

#nav-bar a:hover, #nav-bar a:focus {
	text-decoration		:	none; 
	color				:	#000099; 
	background-color	:	white;
	}

.larger-text {
	font-size			:	1.5em;
	}
	
.float-img-right {
	float				:	right;
	margin				:	2px;
	}
	
.portfolio-box {
	float				:	right; 
	margin				:	-12px 5px 5px 5px; 
	padding				:	2px; 
	display				:	block; 
	background-color	:	#D9D9FF; 
	border				:	1px solid #000099;
	}

#supportchat {
	float				:	right; 
	margin				:	-20px 5px 5px 5px; 
	padding				:	2px; 
	display				:	block; 
	}

/* Hosting Packages Table */
table.hostingpackages, table.hostingpackages td, table.hostingpackages th {
border-color:#000099;
text-align:center;
}

table.hostingpackages caption {
font-weight:bold;
font-size:1.2em;
color:#000099;
}

/* Form Layout */
form {
border:1px ridge #000099;
}

form fieldset {
border:1px solid #000099;
}

form fieldset legend {
font-weight:bold;
color:#000099;
}



/* Footer contains all the footer styles, including last updated and maintained by info */
#main-bottom {
	background			:	url("/images/background-main-bottom-white-round.gif") no-repeat top left;
	height				:	20px;
	}
	
#footer {
	font-size			:	0.9em; 
	text-align			:	left; 
	background			:	url("/images/glass-footer.gif") no-repeat top left;
	height				:	50px; 
	padding-left		:	50px; 
	padding-top			:	10px;
	margin-top			:	5px;
	}

#footer p {
	margin				:	0px; 
	color				:	#333333;
	}
/* =======================	Floating glass-note boxes	=============================================== */
.glass-note {
	float				:	right;
	display				:	block;
	width				:	200px;
	margin				:	5px;
	padding				:	0px;
	}

.glass-note-top {
	height				:	50px;
	padding				:	0px 10px 0px 20px;
	margin				:	0px;
	background			:	url(/images/infonote-glass/top.gif) no-repeat top left;
	}


.glass-note-middle {
	padding				:	0px 10px 0px 0px;
	margin				:	0px;
	background			:	url(/images/infonote-glass/middle.gif) repeat-y top left;
	}

.glass-note-middle p.first {
	margin				:	0px 0px 0px 20px;
	}

.glass-note-bottom {
	height				:	50px;
	padding				:	0px;
	margin				:	0px;
	background			:	url(/images/infonote-glass/bottom.gif) no-repeat top left;
	}

/* =======================	Floating note boxes	=============================================== */

/* Top Left */
.note-tl {
	background			:	url(/images/infonote/top-left.gif) no-repeat;
	background-position	:	bottom;
	}
	
/* Top Centre */
.note-tm {
	background			:	 url("/images/infonote/top.gif") no-repeat; 
	background-position	:	bottom;
	}

/* Top Right */
.note-tr {
	background			:	url(/images/infonote/top-right.gif) no-repeat; 
	background-position	:	bottom;
	}

/* Middle Left */
.note-ml {
	background			:	url(/images/infonote/middle-left.gif) repeat-y; 
	background-position	:	bottom;
	}

/* Middle Centre */
.note-mm {
	background			:	url(/images/infonote/middle-centre.gif) repeat-y; 
	background-position	:	bottom; 
	padding-top			:	10px;
	}

/* Middle Right */
.note-mr {
	background			:	url(/images/infonote/middle-right.gif) repeat-y; 
	background-position	:	bottom;
	}

/* Bottom Left */
.note-bl {
	background			:	url(/images/infonote/bottom-left.gif) no-repeat; 
	background-position	:	bottom;
	}

/* Bottom Centre */
.note-bm {
	background			:	url(/images/infonote/bottom.gif) no-repeat; 
	background-position	:	bottom;
	}

/* Bottom Right */
.note-br {
	background			:	url(/images/infonote/bottom-right.gif) no-repeat; 
	background-position	:	bottom;
	}

/* ================================== End of Note boxes ======================================= */

/* ================================== Front Page Boxes ======================================== */

#box-holder {
display:table; 
width: 99%;
}


#box-row {
display:table-row; 
width:100%;
}


.thebox {
display:block; 
margin-bottom:5px; 
text-align:center;
width: 230px;
float:left;
margin-left: 10px;
}

.boxtitle {
background-color:#3106A2; 
padding:5px; 
display:block; 
margin-bottom:5px; 
text-align:center;
}

.boxtitle h2 {
color:white
}


.boxcontent {
background-color:#E8E6F2; 
padding:5px;
text-align:left;
height:300px;
}