/****************************
* Global styles
*****************************/
html, body {
	padding: 0px;
	margin: 0px;
}

body {
	background-color: #4b4b4b;
}

img {
	border-style: none;
}

/****************************
* Parent wrapper (holds main wraper with room for shadows)
*****************************/
.parent {
	margin: auto;
	margin-top: -5px;
	width: 1284px;	/* 1184px div + 2x 50px shadows */
	
	background-image: url('../images/shadow.png');
}

.parent-bottom {
	margin: auto;
	padding: 0px;
	
	width: 1284px;
	height: 47px;
	
	background-image: url('../images/shadow-bottom.png');
}


/****************************
* Child wrapper (holds header, nav, rotator, middle content)
*****************************/
.wrapper {
	margin: auto;
	width: 1184px;
	
	background-color: #edf3fa;
}


/****************************
* Header and navigation styles
*****************************/
div.header {
	width: 1184px;
	height: 77px;
	background-image: url('../images/header.png');
	
	position: relative;
	z-index: 50;
}

div.header img.logo {
	position: absolute;
	left: 10px;
	top: 12px;
}

div.header .nav {
	position: absolute;
	top: 30px;
	right: 0px;
	width: 775px;
} div.header .nav ul {
	padding: 0px;
	margin: 0px;
	font-family: "Trebuchet MS";
	font-size: 15px;
	font-weight: bold;
} div.header .nav li {
	display: inline;
	float: left;
	margin-left: 22px;	
} div.header .nav li a {
	/* anchors are usually inline elements, and making font-size 0 makes the whole anchor disappear. 
	making this a block-level element allows it to maintain its size (widths are defined below).
	
	this is essentially a block element in an inline element (the parent li), which is why this displays all the links in a single line.*/
	font-size: 0px;	/* makes only the bg-image visible, but allows us to keep link text */
	line-height: 0px; /* makes only the bg-image visible, but allows us to keep link text */
	display: block;	
	height: 13px;
}

/****************************
* Navigation items
*****************************/
.nav li a.home 				{ width: 52px;	background-image: url('/images/nav/home.png');			}
.nav li a.home:hover		{ width: 52px;	background-image: url('/images/nav/home-h.png');		}
.nav li.active a.home, .nav li.alias-parent-active a.home
{ width: 52px;	background-image: url('/images/nav/home-a.png');		}

.nav li a.services 			{ width: 83px;	background-image: url('/images/nav/services.png');		}
.nav li a.services:hover	{ width: 83px;	background-image: url('/images/nav/services-h.png');	}
.nav li.active a.services, .nav li.alias-parent-active a.services
	{ width: 83px;	background-image: url('/images/nav/services-a.png');	}

.nav li a.skyvault 			{ width: 89px;	background-image: url('/images/nav/skyvault.png');		}
.nav li a.skyvault:hover	{ width: 89px;	background-image: url('/images/nav/skyvault-h.png');	}
.nav li.active a.skyvault, .nav li.alias-parent-active a.skyvault
{ width: 89px;	background-image: url('/images/nav/skyvault-a.png');	}

.nav li a.hosting 			{ width: 78px;	background-image: url('/images/nav/hosting.png');		}
.nav li a.hosting:hover		{ width: 78px;	background-image: url('/images/nav/hosting-h.png');	}
.nav li.active a.hosting, .nav li.alias-parent-active a.hosting
{ width: 78px;	background-image: url('/images/nav/hosting-a.png');	}

.nav li a.remote 			{ width: 158px;	background-image: url('/images/nav/remote.png');		}
.nav li a.remote:hover		{ width: 158px;	background-image: url('/images/nav/remote-h.png');		}
.nav li.active a.remote, .nav li.alias-parent-active a.remote	
{ width: 158px;	background-image: url('/images/nav/remote-a.png');		}

.nav li a.eshop 			{ width: 58px;	background-image: url('/images/nav/eshop.png');		}
.nav li a.eshop:hover		{ width: 58px;	background-image: url('/images/nav/eshop-h.png');		}
.nav li.active a.eshop, .nav li.alias-parent-active a.eshop
{ width: 58px;	background-image: url('/images/nav/eshop-a.png');		}

.nav li a.contact 			{ width: 81px;	background-image: url('/images/nav/contact.png');		}
.nav li a.contact:hover		{ width: 81px;	background-image: url('/images/nav/contact-h.png');	}
.nav li.active a.contact, .nav li.alias-parent-active a.contact
{ width: 81px;	background-image: url('/images/nav/contact-a.png');	}


/****************************
* Rotator
*****************************/
.rotator {
	width: 1184px;
	height: 299px;
	
	position: relative;
	z-index: 40;	/* forces image under the header drawer */
	margin-top: -60px;	/* tucks the image under the header drawer */

} .rotator img {
	/* if image dimensions aren't explicitly defined, the initial load of the carousel won't show anything */
	height: 299px;
	width: 1184px;
}

/****************************
* Middle of page (holds sub-nav and main content)
*****************************/
.middle {
	width: 1184px;
	
	background-color: #edf3fa;

	border-top-style: solid;
	border-top-color: #cacaca;
	border-top-width: 1px;
	
}

/****************************
* Sub-navigation styles
*****************************/
.middle .subnav {
	width: 175px;
	float: left;
	
	background-color: #ffffff;
	
	font-family: "Tahoma";
	font-size: 14px;
	font-weight: bold;
	
	margin-right: 10px;
	
	border-width: 1px;
	border-color: #cacaca;
	border-right-style: solid;
	border-bottom-style: solid;
	
	position: relative;
	z-index: 10;
} .middle .subnav ul {	
	padding: 0px;
	margin: 0px;

	list-style: none;
	
} .middle .subnav ul li {
	height: 50px;
	
	line-height: 50px;
	text-transform: uppercase;
	
	border-width: 1px;
	border-color: #d5d5d5;
	
	border-bottom-style: dotted;
	
} .middle .subnav ul li.active {
	background-color: #e1e7ee;
	
	border-width: 1px;
	border-color: #cacaca;

} .middle .subnav ul li a {
	margin-left: 10px;
	
	text-decoration: none;
	color: #42464b;
	
} .middle .subnav ul li.active a {
	color: #376da2;
}

/****************************
* Content in middle of page
*****************************/
.content {
	min-height: 420px;
	height: auto !important;
	height: 420px;
	
	padding: 20px;	/* subnav takes care of the left padding because of how floating divs work */
	
	font-family: "Lucida Sans Unicode";
	font-size: 13px;
	text-align: justify;
	line-height: 19px;
	color: #444444;
} .content .item-page {
	
} .content p {
	margin: 0px;
	padding-bottom: 10px;
} .content ul {
	position: relative;
	left: 70px;
	margin: 0px;
	margin-bottom: 10px;
} .content h1 {
	color: #000000;
	margin: 0px;
	padding: 0px;	
	margin-top: -12px;
	margin-bottom: 10px;
	font-size: 23px;
	font-family: "Tahoma";
	
} .content strong {
	color: #000000;
	
} .content pre {
	margin: 0px;
	padding: 0px;
	height: 415px;
	white-space: pre-wrap;
	overflow: scroll;
	font-family: "Consolas", "Courier New";
	font-size: 12px;
} .content a {
	color: #2583bc;
} .content a:hover {
	color: #8ab7ed;
}

/****************************
* Footer styles
*****************************/
.footer {
	margin: auto;

	width: 1184px;
	height: 49px;
	
	background-color: #222222;	
} .footer p {
	position: relative;	/* ie7 positioning fix */
	padding: 0px;
	margin: 0px;
	margin-top: -15px;
	
	font-family: "Lucida Sans";
	font-size: 11px;
	color: #787878;
	text-align: center;
	line-height: 13px;
} .footer address {
	width: 432px;
	margin: auto;
	padding: 6px 0px 11px 0px;
} .footer a {
	color: #989898;
} .footer a:hover {
	color: #b9b9b9;
}


/****************************
* Homepage styles
*****************************/
.ic_right_nav, .ic_left_nav {
	visibility: hidden;
}

table.home {
	margin: auto;
	margin-top: 10px;
	margin-bottom: 20px;
	
	background-color: #f3f8fd;
	
	border-color: #e5e9ee;
	border-style: solid;
	border-width: 3px;


} table.home h1 {
	padding: 0px;
	margin: 0px;
	
	font-family: "Tahoma";
	font-size: 18px;
	font-weight: normal;
	text-align: left;
	text-transform: uppercase;
	font-weight: bold;
	color: #ff5337;
	
	position: relative;
	top: 4px;
	left: 26px;
	
} table.home ul {
	padding-left: 5px;
	padding-right: 0px;
	padding-top: 8px;
	padding-bottom: 0px;
	
	margin: 0px;
	list-style: square;
	color: #6e6e6e;
	
	position: relative;
	left: 0px;
	
} table.home ul li {
	margin-left: 35px;
	padding-bottom: 5px;
	text-transform: uppercase;
	font-size: 12px;
	
} table.home td {
	width: 300px;
	height: 160px;
	
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 0px;
	padding-bottom: 0px;

	border-right-style: solid;
	border-right-width: 1px;
	border-right-color: #c5c9cd;
	
	font-family: "Trebuchet MS";
	font-size: 14px;
	
	vertical-align: top;
	
	background-position: -1px -1px;
	background-repeat: no-repeat;
	
} table.home td#help		{ background-image: url('/images/icons/help.jpg') }
table.home td#cloud		{ background-image: url('/images/icons/cloud.jpg') }
table.home td#web		{ background-image: url('/images/icons/web.jpg') }
table.home td#store		{ background-image: url('/images/icons/carriage.jpg') }
table.home td#print		{ background-image: url('/images/icons/printer.jpg') }
table.home td#news		{ background-image: url('/images/icons/rss.jpg')

}




/****************************
* Skyvault styles
*****************************/
.middle .content .skyvault-quote {
	padding-top: 10px;
	padding-bottom: 15px;
	margin: auto;
} .middle .content .skyvault-quote blockquote {
	color: #222222;
	padding: 0px;
	padding-bottom: 8px;
	margin: 0px;
	text-align: center;
	
	font-family: "Georgia";
	font-weight: bold;
	font-size: 24px;
} .middle .content .skyvault-quote blockquote strong {
	color: #ff0000;
} .middle .content .skyvault-quote p { 
	font-family: "Lucida Sans";
	font-size: 14px;
	font-style: oblique;
	text-align: right;
	
	margin-top: -8px;
}

/****************************
* Contact form styles
*****************************/
form table {
	margin: auto;
	font-size: 18px;
	border-collapse: collapse;
	color: #000000;
} form table td {
	padding: 5px;
	border-style: solid;
	border-color: #c5c9cd;
	border-width: 2px;
	
	background-color: #e9eef2;
} form table td.label {
	background-color: #dee1e4;
	text-align: right;
	font-weight: bold;
	width: 140px;
} form table td.field {
	width: 
} form table td.field input, form table td.field textarea {
	width: 350px;
} form table td.field select {
	width: 120px;
} form table td input.submit {
	float: right;
	width: 150px;
	height: 30px;
}

.contact-form {
	float: left;
	width: 850px;
}
.contact-details {
	float: right;
	width: 250px;
	margin: -37px 0px 0px 15px;
	padding-left: 20px;
	height: 460px;
	
	border-left-style: solid;
	border-left-width: 1px;
	border-left-color: #e0e0e0;
} .contact-details h2 {
	font-size: 20px;
	color: #000000;
	font-family: "Georgia";
	margin-bottom: 2px;
} .contact-details p {
	margin-left: 20px;
	font-family: "Tahoma";
	font-size: 14px;
	font-weight: bold;
	line-height: 23px;
	color: #294266;
} .contact-details table {
	margin-left: -20px;
	color: #294266;
	font-size: 14px;
} .contact-details table td.left {
	font-weight: bold;
	width: 100px;
	text-align: right;
	padding-right: 7px;
	color: #131313;
}

/****************************
* Pricelist styles
*****************************/
.pricelist {
	color: #000000;
	padding-bottom: 30px;
} .pricelist h1 {
	position: relative;	/* ie7 positioning fix */
	
	text-align: center;
	font-size: 22px;
	text-decoration: underline;
	
	color: #000000;
	margin: -12px 0px 5px 0px;
	padding: 0px;
	font-family: "Tahoma";
} .pricelist table {
	margin: auto;
	width: 464px;
	font-size: 14px;
	border-collapse: collapse;
} .pricelist table td {
	padding: 2px;
	border-style: solid;
	border-color: #c5c9cd;
	border-width: 2px;
	
	background-color: #e9eef2;
} .pricelist table tr.alt td {
	background-color: #eff3f7;
} .pricelist table tr.header td {
	font-family: "Tahoma";
	font-weight: bold;
	background-color: #eff3f7;
} .pricelist table tr.annual {
	text-align: right;
	font-size: 9px;
}