body {
	font-family: "Trebuchet MS", Arial, Verdana;
	font-size:small;
	text-align:center;
	color: #333;
}

/* clear all default borders and padding */
h1, h2, h3, h4, h5, h6, ul, li, ol, img, img a, blockquote, form, fieldset, legend {margin:0px; padding:0px; border:0px;}
/* end of clearing default borders and padding*/


#wrapper {
	width:800px;
	margin:0px auto;
	text-align:left;
}


/* start of header styles */
h1 {
	background-color:#f79000;
	color:#fff;
	background-image:url("../images/logo.jpg");
	background-repeat:no-repeat; 
	background-position:top left;
	text-indent: -9999px;
	height:86px;
	min-height:86px;
	margin:0px;
	}

h1 .tagline {color:#333; font-size:smaller;}

#header, #subheader {float:left; position:relative; width:800px;}

ul#mainnav {
	position:absolute;
	right:0px;
	bottom:0px;
	background-color:#333;
	text-align:center;
	color:#fff;
	margin:0px;
	padding:2px 0px 2px 50px;
	border:0px;
	 /* if you change this width then it may effect users with IE5 - check when changing */
	background-image:url("../images/nav-bg.gif");
	background-repeat:no-repeat; 
	background-position:top left;
	z-index:10px;
	font-size:13px;
}

ul#mainnav li {display:inline; list-style:none; border-left:1px solid #999; white-space:nowrap;}
ul#mainnav a {color:#fff; text-decoration:none; padding:12px 14px;}
ul#mainnav a:hover {background-color:#f79000; color:#fff; text-decoration:none; margin-left:4px; padding:2px 14px 2px 10px;}
/* end of header styles */


/* start of sub header styles */
.banner {width:800px; height:150px; border-top:1px solid #000; border-bottom:1px solid #000;}

ul.utilities {
	position:absolute; 
	bottom:-15px;  
	_bottom:-11px;
	right:0px;
	text-align:center;
	color:#fff;
	margin:0px;
	padding:0px 0px 0px 15px;
	border:0px;
	 /* if you change this width then it may effect users with IE5 - check when changing */
	background-image:url("../images/utilities-bg.gif");
	background-repeat:no-repeat; 
	background-position:bottom left;
	z-index:10px;
}

ul.utilities li {display:inline; list-style:none; margin:0px; padding:0px;}

li.send {background-color:#333; font-size:10px;}
li.send a  {color:#fff; font-weight:bold; text-decoration:none; padding:2px 7px;}
li.send a:hover {color:#333; background-color:#f79000; padding:2px 7px;}
li.print {background-color:#f79000; font-size:10px;} 
li.print a {color:#333; font-weight:bold; text-decoration:none; padding:2px 7px; margin:2px 0px; }
li.print a:hover {color:#fff; background-color:#f79000; font-weight:bold; text-decoration:none; padding:2px 7px;}
/* end of sub header styles */



#col {float:left; width:170px; margin-top:27px; padding:0px 10px 10px 10px;}
#col h2 {color:#f79000; font-size:medium; margin-bottom:20px;}

ul.subnav {list-style:none; margin:0px 0px 30px 0px; padding:0px 0px 20px 0px; border-bottom:1px dotted #ccc;}
ul.subnav li {display:block; border-bottom:1px solid #fff;}
ul.subnav li a {display:block; background-color:#f79000; padding:5px 5px 5px 10px; color:#fff; text-decoration:none;}
ul.subnav li a:hover {background-color:#333; color:#fff; text-decoration:none;}
ul.subnav .here {background-color:#333;}

#content {
	float:right; 
	position:relative;
	background-image:url("../images/web-url.gif");
	background-repeat:no-repeat;
	background-position:center right;
	margin-top:27px;
	padding:0px 60px 80px 20px;
	border-left:1px solid #ccc;
	_height:400px;
	min-height:400px;
	max-width:520px;
}

#content h2 {color:#f79000; font-size:xx-large; border-bottom:1px solid #ccc; width:100%;}
#content h3 {clear:both; color:#f79000; font-size:large; border-bottom:1px dotted #ccc; margin-top:30px;}


/* ###### start of generic styles ##### */
a {color:#f79000; font-weight:bold; text-decoration:underline;}
a:hover {color:#669900;}

blockquote {
	font-family:Arial, verdana, tahoma;
	padding:0px 15px;
	font-size:0.9em;
	color:#666;
}

.cite {
	font-family:Arial, verdana, tahoma;
	text-align:right;
	padding:0px 15px;
	font-size:0.9em;
	color:#666;
}

.startquote {margin-right:10px;}
.endquote {margin-left:10px;}

.spikey {color:#f79000; font-size:medium;}/* used to make spikey cactus name stand out when used in web text */
.toptip, .highlight {background-color:#f5f5f5; border:1px dotted #ccc; padding:10px;}
.hide {overflow: hidden; width: 0px; position: absolute; height: 0px;}


ul {margin:15px 10px 30px 40px;}

dl {
	float:left;
	position:relative;
	width: 240px;
	margin: 20px 0px 20px 0px;
	padding: 0px;
	min-height:150px;
	_height:150px;
	background: #ccc url(../images/roundedbottom.gif) no-repeat bottom left;
}

dt {
	margin: 0px 0px 10px 0px;
	padding: 10px;
	font-size:small;
	font-weight:bold;
	color: #fff;
	border-bottom: 1px solid #fff;
	background: #999 url(../images/roundedtop.gif) no-repeat top left;
}
	
dd {
	margin: 0px 0px 0px 0px;
	padding: 0px 10px 10px 10px;
	color: #333;
	font-family: Verdana, sans-serif;
	font-size: 90%;
}

dd.link {text-align:right; border-top:1px solid #fff; padding:5px; position:absolute; bottom:0px; right:0px; width:100%;}
dd.link a {color:#fff; padding-left:10px;}
dd.link a:hover {color:#333; background: url(../images/arrow.gif) no-repeat bottom left;}

dl#one {background-color:#f79000; margin-right:30px;}
#one dt {background-color:#333;}

dl#two {background-color:#f79000;}
#two dt {background-color:#333;}

dl#three {background-color:#AFBEE0; margin-right:30px;}
#three dt {background-color:#5573bc;}

dl#four {background-color:#AFBEE0;}
#four dt {background-color:#5573bc;}

dl.portfolio {position:relative; width:500px; background-color:#f5f5f5; background-image:none; border:1px solid #ccc; _height:200px; min-height:200px;}
dl.portfolio dt {clear:both; background-image:none; background-color:#f79000; margin:0px 0px 10px 0px;}
dl.portfolio dd {background-color:#f5f5f5; padding-left:215px;}
dl.portfolio dd.screenshot {position:absolute; top:50px; padding:0px 0px 0px 10px;}
dl.portfolio dd.screenshot img {width:180px; height:130px;}

/* ##### end of generic styles ###### */


/* start of form styles */
form {width:95%; position:relative;}
fieldset {margin-bottom:30px;}
legend {color:#f79000; font-size:large; border-bottom:1px solid #ccc; width:100%; margin-bottom:20px;}
label {float:left; width:200px; margin-right:15px;}
label.wide {width:340px;}
input, textarea {border:1px solid #ccc; font-family:Arial, Helvetica, sans-serif;}
form br {clear:both;}
.radio, .checkbox {border:0px;}
textarea {width:100%;}
div.buttons {text-align:center; margin-top:-20px; padding:0px;}
.button {border:1px solid #ccc; background-color:#f79000; color:#fff;}
.warning {color:red;font-weight:bold;}
.warningblock {
  background-color: #ff0000;
  background-image: url(../images/warning.gif);
  background-repeat: no-repeat;
  background-position: 3px 3px;
  color: #fff;
  font-weight:bold;
  text-align:center;
  padding: 3px 3px 5px 27px;
  margin-top:5px;
  border: 1px solid #000000;
}
.successblock {
  background-color: #37AA00;
  background-image: url(../images/successtick.gif);
  background-repeat: no-repeat;
  background-position: 3px 3px;
  color: #fff;
  font-weight:bold;
  text-align:center;
  padding: 3px 3px 5px 27px;
  margin-top:5px;
  border: 1px solid #000000;
}
/* end of form styles */




/* start of page contact section styles */
.contactinfo {position:absolute; left:-95px; bottom:0px;}
.contactinfo a {text-decoration:none; font-size:large;}
.contactinfo a:hover {text-decoration:underline;}

.cactus {position:absolute; right:35px; bottom:0px;}
/* end of page contact section styles */




/* start of footer section styles */
#footer {float:left; margin:30px 0px 0px 0px; width:100%;}
.policy {background-color:#E1E1E1; color:#999; padding:2px; text-align:right; font-size:11px; margin:0px 0px 2px 0px; padding:0px; border-top:1px solid #999; border-bottom:1px solid #999;}
.policy li {display:inline; list-style:none; padding-right:15px;}
.policy a {color:#333; text-decoration:none;}
.copyright {background-color:#333; color:#fff; padding:2px; text-align:center; font-size:11px; margin:0px;}
/* end of footer section styles */