﻿@charset "utf-8";


/* General Element Styles */
* {
	padding: 0;
	margin: 0;
	z-index: 1;
/*	border: 1px dotted #000; Uncomment to highlight all elements width dotted border */
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
body {
	background-color: #fff;
	font-family: Tahoma, Arial, sans-serif;
	font-size: 100%;
	color: #000;
	width: 100%;
	height: 100%;
}
a img {
	border: 0;
}
a, a:link, a:visited {
	text-decoration: underline;
	color: #0f8097;
}
a:hover, a:focus, a:active {
	text-decoration: none;
	color: #14abc9;
}
h1 {
	font-size: 160%;
	font-weight: lighter;
	color: #28c4d9;
}
h2 {}
h3 {}

	
/* Header (Logo and Live Chat area) */
#header {
	height: 80px;
	width: 950px;
	margin: 0 auto;
	padding: 10px 0 10px 0;
}
#logo {
	float: left;
	height: 42px;
	width: 164px;
	margin: 9px 0 9px 100px;
}
#liveChat {
	float: right;
	height: 55px;
	width: 130px;
	margin: 4px 150px 1px 0;
}


/* Navigation Styles */
#nav {
	background: url("../images/nav_inactive.png") top left repeat-x;
	display: block;
	height: 30px;
	width: 100%;
	line-height: 30px;
	padding-bottom: 3px;
	margin: 0 auto 2px auto;
}
#nav ul {
	display: block;
	height: 30px;
	width: 950px;
	line-height: 30px;
	list-style-type: none;
	list-style: none;
	text-align: center;
	margin: 0 auto;
}
#nav li {
	display: inline-block;
	height: 30px;
	width: 118px;
}
#nav li a, #nav li a:link, #nav li a:visited {
	display: block;
	height: 30px;
	width: 118px;
	font-size: 110%;
	text-align: center;
	text-decoration: none;
	color: #fff;
	padding: 1px 0 5px 0;
}
#nav li a:hover, #nav li a:focus, #nav li a:active {
	background: url("../images/nav_active.png") top left repeat-x;
}
		/* Promotion Area Styles */
#blueArea {
	background: url("../images/blue_bg.png") left top repeat-x;
	height: 150px;
	width: 100%;
}
#promoBox {
	background: url("../images/blue_bg_corners.png") bottom left no-repeat; /* Blue Backing Rounded Corners */
	height: 150px;
	width: 950px;
	margin: 0 auto;
}
#promoBox #smlImage {
	float: right;
	width: 250px;
	height: 110px;
	margin-right: 15px;
}
#promoBox #promoImage {
	width: 650px;
	height: 130px;
	margin: 40px 0 0 20px;
}


/* Main Content Styles */
#content {
	width: 950px;
	margin: 20px auto;
}
#mainContent {
	width: 650px;
	float: left;
	margin: 25px 0 0 20px;
}
#mainContent h1 {
	font-size: 200%;
	margin: 0 0 0 15px;
}
#mainContent p {
	margin-top: 10px;
	line-height: 1.2;
}
#sidebar {
	background: url("../images/sidebar_white.png") top left no-repeat;
	float: right;
	width: 248px;
	margin: -50px 15px 0 0;
}
#sidebarBox1 {
	margin: 15px;
}
#sidebarBox1 h3 {
	text-align: center;
	font-size: 120%;
	font-weight: lighter;
	color: #0f8097;
	border-bottom: 1px dotted #333;
	margin-top: 10px;
}


/* Small Info Styles */
#smallInfo {
	width: 650px;
	margin-top: 15px;
}
#smallInfo ul {
	display: block;
	list-style: none;
	list-style-type: none;
	width: 650px;
	text-align: center;
	vertical-align: top;
}
#smallInfo li {
	background: url("../images/smallinfo_grad.png") top left repeat-x;
	display: inline-table;
	width: 40%;
	padding: 10px;
	margin: 0 15px 0 15px;
	text-align: left;
	vertical-align: top;
}
#smallInfo h3 {
	font-size: 130%;
	font-weight: lighter;
	color: #28c4d9;
}


/* Footer Styles */
#footer {
	width: 950px;
	padding: 3px;
	margin: 50px auto; /* use the first value to determine distance from content above the footer */
	font-size: 75%;
}
#ftrLeft {
	float: left;
	width: 60%;
}
#ftrLeft ul {
	display: inline;
	width: 100%;
	list-style-type: none;
	list-style: none;
	margin: 0 auto;
}
#ftrLeft li {
	height: 30px;
	display: inline;
	padding: 0 2px 0 2px;
}
#ftrRight {
	float: right;
	width: 40%;
}


/* 

Sub Page CSS

Below follows the CSS for all other pages (unless stated otherwise, if so, therefore will be below the Sub Page CSS).

*/

/* Image Area is where the Blue Header is but allows for ease of use instead of dealing with the Blue Area's style */

#imageArea {
	height: 120px;
	width: 700px;
	margin: 0 auto;
	text-align: left;
	vertical-align: middle;
}
#imageArea #subPromoImg {
	
}

#packageBox {
	width: 100%;
	padding: 10px;
}
#packageBox h2 {
	font-size: 120%;
	color: #0f8097;
	font-weight: lighter;
	width: 42%;
	margin: 10px 0 10px 10px;
	padding: 0 15px 0 15px;
	text-align: center;
	border-bottom: 1px solid #0f8097;
}
#packageBox ul {
	display: block;
	list-style: none;
	list-style-type: none;
}
#packageBox li {
	display: block;
	line-height: 1.2;
}

#sidebarBox1 ul {
	list-style: none;
	list-style-type: none;
	display: block;
}
#sidebarBox1 li {
	display: block;
	padding-top: 8px;
	border-bottom: 1px dotted #0f8097;
	
}

/* Quick Links shows up on the About page only (The list of links at the bottom) */
#quickLinks {
	width: 650px;
	margin-top: 15px;
}
#quickLinks ul {
	display: block;
	list-style: none;
	list-style-type: none;
	width: 650px;
	text-align: center;
	vertical-align: top;
}
#quickLinks li {
	display: inline-table;
	width: 20%;
	margin: 0 15px 0 15px;
	text-align: left;
	vertical-align: top;
}
#quickLinks h3 {
	font-size: 130%;
	font-weight: lighter;
	color: #28c4d9;
}
#testimonials {
	display: block;
	width: 100%;
	font-style: italic;	
	text-align: right;
}
ol#testimonials {
	margin-left: 30px;
}
.boldName {
	font-weight: bold;
}
#clienttag {
	display: block;
	width: 100%;
	text-align: right;
	font-style: normal;
}
#vpsBox {
	width: 100%;
	padding: 10px;
	text-align: center;
}
#vpsBox h2 {
	font-size: 120%;
	color: #0f8097;
	font-weight: lighter;
	width: 100%;
	margin: 10px 0 10px 10px;
	padding: 0 15px 0 15px;
	text-align: center;
}