/* reset */
body, p, ul, ol, li, h1, h2, h3, h4, h5, a, div, blockquote, cite, a img, address {
	margin: 0;
	padding: 0;
	text-indent: 0;
	border: none;
	outline: none;
	text-decoration: none;
	font-size: 100%;
	list-style: none;
	font-weight: normal;
	font-style:  normal
}
table, td, tr {
	padding: 0;
	margin: 0;
	border-spacing: 0;
	border: none;
	vertical-align: top
}
a, a:visited {
	color: #f00;
}
a:hover, a:active {
	color: #0f0;
	text-decoration: underline;
}
body { /* avoid syling body tags at all costs */
}
#wrap {
	background: #003;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.62em;
	margin: 0 auto;
	width: 100%;
	overflow:  hidden
}
#container {
	margin: 30px auto 4px;
	width: 893px;
	background:  #fff;
	overflow: hidden;
	position: relative;
}
p, li, h2, h3, h4, h5, h6 {
	line-height:  1.8em;
}
/* set specific heading and copy's line-height, font-size, font-weight, margins, colors as needed */
h1 {
	font-size: 2em;
	color:  #fff;
	background: #2f4261;
	border-bottom:  5px solid #8c98a0;
	display:  block;
	font-family:  Times New Roman, "Times", serif;
	padding:  5px 30px;
	line-height:  1.5em;
	margin-bottom:  20px
}
#colright h2 {
	color:  #010068;
	font-size:  1.5em;
	margin: 9px 30px
}
#colright h3 {
	color:  #010068;
	font-size:  1.5em;
	margin: 9px 30px
}
#colright h4 {
	color:  #010068;
	font-size:  1.4em;
	margin: 9px 30px
}
#colright h5 {
	color:  #010068;
	font-size:  1.3em;
	margin: 9px 30px
}
#colright h6 {
	color:  #010068;
	font-size:  1.2em;
	margin: 9px 30px
}
#colright p, #colright ul, #colright ol {
	color:  #666;
	margin:  9px 30px 20px;
	font-size:  1.2em
}
.portfolio #colright h1 {
	margin-bottom:  4px
}
.portfolio #colright p {
	margin:  0 0 20px
}
.portfolio #colright a {
	padding:  4px;
	background: #2f4261;
	display:  block;
	float:  left;
	clear:  none;
	height:  100px;
	margin: 0 0 4px 4px
}
.portfolio #colright a:hover {
	background:  #003
}
ul, ol {
}
li {
}
/* should be used for logo placement */
h1#header, body#portfolio h1#header, body#design h1#header, body#testimonials h1#header, body#about h1#header {
	margin: 4px 4px 0;
	display:  block;
	height:  228px;
	background:  url(/design/head.jpg) right no-repeat;
	overflow:  hidden;
	border:  none;
	padding:  0;
}
body#portfolio h1#header {
	background:  url(/design/header-portfolio.jpg) right no-repeat;
}
body#design h1#header {
	background:  url(/design/header-design.jpg) right no-repeat;
}
body#testimonials h1#header {
	background:  url(/design/header-testimonials.jpg) right no-repeat;
}
body#about h1#header {
	background:  url(/design/header-about.jpg) right no-repeat;
}
h1#header a {
	display:  block;
	width: 172px;
	height: 137px;
	margin:  40px 16px 0 16px;
	background: url(/design/logo.gif) no-repeat
}
p#info {
	font-size:  2em;
	color:  #666;
	text-align:  center;
	position: relative;
	top:  -80px !important;
	display:  block;
	width:  211px;
	line-height:  5em;
	height: 0;
	margin: 0 !important;
	margin/**/: -20px 0 -60px 0;
}
h1#header {
}
/* nav styles. Do NOT disregard the need to style active states */
#nav {
	display:  block;
	background:  #666;
	margin:  0 auto;
	border-bottom:  2px solid #003
}
#nav ul {
	display:  block;
	padding-left:  150px
}
#nav li {
	display: block;
	margin-top:  2px;
	float:  left;
	clear:  none;
	width:  auto
}
#nav li a, #nav li a:visited {
	display:  block;
	width: auto;
	padding:  10px 18px;
	color:  #fff;
	font-size: 1.1em;
	font-weight:  bold
}
#nav li a:hover, #nav li a:active, #nav li.active a {
	color: #1d3251;
	text-decoration:  none
}
/* clear it all */
.clear {line-height:.01;font-size:.01;clear:both;}

/* Assuming whenever possible Callouts even with image based will be marked up as list elements, be mindful of margin's and padding previously set */
#callout {

}
#callout li {
	display:  block;
	background:  #2f4261 url(/design/caret.gif) no-repeat;
	margin-bottom:  2px;
	padding:  24px 14px 20px 30px
}
#callout h2 {
	color:  #dfe5e6;
	font-size:  2em;
	font-family:  Times New Roman, "Times", serif;
	line-height:  1.1em;
	margin-top:  0.2em
}
#callout p {
	color:  #dfe5e6;
	font-size: 1.3em;
	font-family: Times New Roman, "Times", serif
}
#callout a, #callout a:active, #callout a:visited {
	color:  #fff;
	display:  block
}
#callout a:hover {
	color:  #fff;
}
/* box model hacks add markup that isn't neccesary nor bad practice, div width issues should be resolved straightforwardly whenever possible */
#colleft, #colright {
	float: left;

}
#colleft {
	width: 211px;
	margin:  10px 4px 4px 4px;
	padding: 0 0 4px 0;
	display:  block;
	z-index:40;
	height:100%;

}
#colleft ul{
	height:100%;
}
#colright {
	width: 670px;
	width/**/: 660px;
	margin:  10px 4px 4px 0;
		display:  block;
}
/* time to style list elements that will actually display as lists */
#colright li {
	list-style: disc;
	margin-left: 24px;
}
#colright ol li {
	list-style: decimal;
	margin-left: 14px;
}
#footer {
	clear: both;
	display:  block;
	z-index:-40;
	border-top: solid 13px #666;
	display: block;
	padding: 20px;
	width:  853px;
	margin:  0 auto;
	text-align:  center
}
#footer a, #footer p {
	color: #666;
}
#footer a {
	text-decoration: underline
}
#footer a:hover {
	color: #fff
}
/* the one and only hack, should resolve any and all height issues, apply class group to any container div holding one or more floating divs */
.group:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.group {
	zoom: 1;
	display: block;
}
blockquote {
	margin: 10px 10px;
	padding: 5px;
	background: #f2f2f2;
	border-bottom: 1px solid #e2e2e2;
	border-right: 1px solid #e2e2e2;
}
blockquote p {
	padding-left: 5px;
}
/* * * =forms * * * * * * * * * * * * * * * * * * * * * * * * * * */
form {
	width: 44em;
	margin-left: 15px;
}
form p {
	font-size: 100%;
	padding: 2px;
}
#colright form fieldset p {
	margin: 0;
}
/* fieldset styling */
fieldset {
	padding: 1em 0; /*  space out the fieldsets a little*/
	padding: 1em;
	border : 1px solid #e2e2e2;
}
/* legend styling */
legend {
	font-weight: bold;
	color: #014b86;
}
/* style for  labels */
label {
	float: left;
	width: 14em;
}
/* style for required labels */
label .required {
	font-size: 0.9em;
	font-style: normal;
	color: red;
}
input {
	width: 225px;
}
input.radio, input.submit {
	width: auto;
}
textarea {
	width: 225px;
	height: 100px;
}
/* submit */
form div input {
	width: 100px;
	margin-left: 168px;
	padding: 0 .25em;
	color: #000;
	text-transform: uppercase;
	font-size: 90%;
}