/* Browser Reset*/
@import url("reset.css");

/* Primary Styles */
body{
	background: #FFF;
	color: #000;
	font: 1em Tahoma, Geneva, Verdana, Sans, sans-serif;
	margin-left: -460px;
	left: 50%;
	position: relative;
	width: 920px;
	}
	
a{
	color: #79a837;
	text-decoration: underline;
	}
	
a:hover{ color: #3767A8; }

h1{ 
	color: #79A837;
	margin: 0 0 .5em 0;
	letter-spacing: 2px;
	font-size: x-large;
	text-transform: uppercase;
	}

h2{
	color: #3767A8;
	font-size: large;
	letter-spacing: 2px;
	margin-bottom: .5em;
	}
	
h2.block{
	background: #79A837;
	color: #FFF;
	font-size: small;
	font-weight: bold;
	letter-spacing: 2px;
	margin-bottom: .5em;
	padding: 5px;
	}	

h3{
	color: #79A837;
	margin-bottom: 1em;
	font-size: small;
	font-weight: bold;
	}

h4{
	font-size: x-small;
	font-weight: bold;
	margin-bottom: 1em;
	}

#content ul{ 	
	list-style-position: inside;
	list-style-type: square;
	margin-bottom: 1em; 
	}

#content li{
	font-size: small;
	line-height: 16px;
	padding: .5em 1em .5em 2em;
	}

#content ul.important{ list-style-type: none; }
	
#content ul.important li{
	background: url("../imgs/bullet.png") no-repeat 9px 8px;
	}

p{
	font-size: small;
	line-height: 150%;
	margin-bottom: 1em;
	text-align: justify;
	}

blockquote{
	border-left: 2px solid #3767A8;	
	margin-left: 1em;
	padding-left: 1em;
	}
	
blockquote p{
	color: #666;
	font: large Georgia, Palatino, Times, serif;
	line-height: 125%;
	margin: 1em;
	}
	
code, pre{
	background: #333;
	color: #FFF;
	font: small "Courier New", Courier, monospace;
	}
	
code{ 
	display: inline; 
	padding: 2px;
	}

pre{
	display: block;
	line-height: 125%;
	margin-bottom: 1em;
	padding: .5em;
	white-space: pre;
 	}
 	
 th{
 	background: #79A837;
 	color: #FFF;
 	font-size: x-small;
 	font-weight: bold;
 	padding: .5em;
 	}
 	
 td{
 	border-bottom: 1px solid #79A837;
 	font-size: small;
 	padding: 1em .5em;
 	}
 	
 td.highlight{ 
 	font-size: x-small;
 	font-weight: bold;
  	}
  	
 td.name{
 	font-weight: bold;
 	text-transform: uppercase;
 	}

/* Utility Classes */	
.left{ float: left; }
.right{ float: right; }

.c{ text-align: center; }
.l{ text-align: left; }
.r{ text-align: right; }

.clr{ clear: both; }
	
/* Dialogs */
div.info, div.warning, div.error, div.help{
	background: no-repeat 10px center;
	line-height: 125%;
	margin-bottom: 1em;
	font-size: small;
	padding: 20px 20px 20px 60px;
	}
	
div.info{ 
	background-color: #FAFFF1;
	background-image: url("../imgs/icons/info_32.png"); 
	border: 1px solid #CADFAB;
	}
	
div.error{ 
	background-color: #FFE3D6;
	background-image: url("../imgs/icons/error_32.png"); 
	border: 1px solid #F8B596;
	}
	
div.warning{ 
	background-color: #FFF9D0;
	background-image: url("../imgs/icons/warning_32.png"); 
	border: 1px solid #F9E981;
	}
	
div.help{ 
	background-color: #F1F8FF;
	background-image: url("../imgs/icons/unknown_32.png"); 
	border: 1px solid #CAD7E8;
	}
	
/* HEADER */
#header{ margin: 20px 10px; }

#header #logo{ 
	float: left; 
	padding: 10px 0;
	}

/* Top Tabs */
#topNav{ 
	float: right; 
	padding-top: 20px;
	}

#topNav li{
	background: url("../imgs/tab_off.png") no-repeat center center;
	float: left;
	height: 65px;
	width: 85px;
	}

#topNav li.selected, #topNav li.selected:hover{	background-image: url("../imgs/tab_selected.png"); }

#topNav li:hover{ background-image: url("../imgs/tab_on.png"); }
	
#topNav li a{
	background: no-repeat center 5px;
	color: #333;
	display: block;
	font-size: x-small;
	font-weight: bold;
	height: 11px;
	padding-top: 54px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	width: 100%;
	}
	
#topNav li.selected a{ color: #FFF; }
	
#topNav li a:hover{ color: #6e9e32; }
#topNav li.selected a:hover{ color: #FBCD3C; }
	
#topNav li a#home{ background-image: url("../imgs/icons/home_48.png"); }
#topNav li a#hosting-plans{ background-image: url("../imgs/icons/server2_48.png"); }
#topNav li a#support{ background-image: url("../imgs/icons/phone_48.png"); }
#topNav li a#about-us{ background-image: url("../imgs/icons/tips_48.png"); }
	
/* Sub-menu */
#navBar{
	background: #444 url("../imgs/navBar.png") repeat-x;
	clear: both;
	height: 25px;
	width: 100%;
	}
	
#navBar ul{	
	text-align: right;
	width: 100%; 
	}

#navBar ul li{
	display: inline;
	font-size: x-small;
	line-height: 25px;
	padding: 0 1.5em;
	}
	
#navBar ul li a{
	color: #FFF;
	text-decoration: none;
	}
	
#navBar ul li a:hover{ color: #FBCD39; }

/* Masthead */
#masthead{
	background: #79a837;
	color: #fff;
	overflow: hidden;
	}
	
#masthead .left{
	font-size: x-large;
	line-height: 200%;
	margin: 30px;
	width: 380px;
	}
	
#masthead .right{
	margin: 30px;
	width: 380px;
	}
	
#masthead p{ line-height: 200%; }
	
#masthead a{ color: #FFF; }

#masthead a:hover{ color: #3767a8; }

/* CONTENT */
#content{
	margin: 10px;
	overflow: hidden;
	}
	
/* Column Layouts */
.oneColumn .left{
	margin: 0 20px 0 30px;
	width: 600px;
	}
	
.oneColumn .right{
	margin: 0 30px 0 20px;
	width: 200px;
	}
	
.twoColumn .left, .twoColumn .right{
	margin: 0 30px;
	width: 390px;
	}
	
.threeColumn div.column{
	float: left;
	margin: 0 30px;
	width: 240px;
	}
	
/* FOOTER */
#footer{
	border-top: 1px solid #79A837;
	clear: both;
	margin: 3em 30px 1em 30px;
	}
	
#footer ul#footerNav{
	padding: 1em;
	text-align: center;	
	width: 100%;
	}
	
#footer ul#footerNav li{
	display: inline;
	font-size: small;
	padding: 0 1em;
	}
	
#footer ul#footerNav a{
	color: #666;
	text-decoration: none;
	}
	
#footer ul#footerNav a:hover{ 
	color: #9FC84B;
	text-decoration: underline;
 	}

#footer ul#meta{
	padding: 1em;
	text-align: center;
	width: 100%;
	}
	
#footer ul#meta li{
	display: inline;
	font-size: x-small;
	padding: 0 1em;
	}	
	
#footer ul#meta a{ color: #999; }
#footer ul#meta a:hover{ color: #333; }