/* 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: #072f67; text-decoration: underline; }

body { /* avoid syling body tags at all costs */  }

#wrap { 
	background: #3e5d89 url(../design/grade.gif) repeat-x; 
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 0.62em; 
	margin: 0 auto; 
	width: 100%; 
	overflow:  hidden 
	}
	
#container { 
	margin: 15px auto; 
	width: 868px; 
	overflow: hidden; 
	position: relative;
	background: #fff;
	 }

p, h1, h2, h3, h4, h5, h6 { font-family: Verdana; color: #072f67; margin-bottom: 8px }
/* set specific heading and copy's line-height, font-size, font-weight, margins, colors as needed */
h1 {  font-size: 1.8em; border-bottom: 1px solid #ccc; padding-bottom: 7px; margin-bottom: 12px}
h2 { font-size: 1.4em; }
h3 { font-size: 1.3em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1.1em; }
h6 { font-size: 1em; font-style: italic  }
p, ul, ol { font-size: 1.1em; color: #565656; line-height: 1.8em; font-family: Verdana; margin-bottom: 18px }
#colleft ul, #colleft ol { margin-left:  18px }
#colleft ul li { list-style: disc; }
#colleft ol li { list-style: decimal;  }

/* should be used for logo placement */
#branding { height: 128px; width: 868px; background: url(../design/head.gif) no-repeat; padding-top: 20px; position: relative }
#branding h1 { margin:  0 0 0 40px; padding: 0; border: none; }
#branding h1 a { display:  block; height: 84px; width: 540px;  text-indent:  -9999px }
#branding p { display: block; position: absolute; right: 30px; top: 30px; text-align: right }
#branding span { font-size: 2em; color: #ff1300; }
#branding p a { display: block; font-size: 1.4em; color: #666; text-decoration: underline }

#header { display:  block; background: url(../design/market.jpg) no-repeat; height: 180px;margin-bottom:  20px; }
#header p { line-height: 0; margin: 0; padding: 0 }
#header a { width: 434px; height: 180px; display:  block; float: left; clear: none; text-indent: -9999px }

/* menu styles. Do NOT disregard the need to style active states */
#nav { padding: 2px 14px; font-size:  1.1em; font-family:  Verdana;position: relative }  
#nav li { display:  block; float:  left;clear:  none; margin-right:  4px }
#nav li a, #menu li a:visited { background:  url(../design/nav.gif); display:  block; width: 101px; height: 21px; line-height:  21px; text-align:  center; color: #fff }
#nav li.active a, #nav li a:hover, #nav u li a:active, #nav li.hover a { background: url(../design/nav_active.gif); color:  #f00 }
#nav li ul { display: none }
#nav li:hover ul { display: block; position: absolute; z-index: 99; padding-right: 4px }
#nav li:hover ul li { display:  block; clear:  both; border: 1px solid #072f67 }
#nav li:hover ul li a { display:  block; background: #fff; color: #072f67; padding: 2px 4px; width: 194px; text-align:  left }
#nav li:hover ul li a:hover { background: #072f67; color: #fff }

/* 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 { list-style:  none }
#colright #callout li { margin-bottom: 10px; list-style:  none; padding-left: 30px; background: url(../design/balloon.gif) no-repeat }
#colright #callout li.last{ background: url(../design/pen.gif) no-repeat; display:  block; height:  3em}
#colright #callout li.last a { background: url(../design/cc.gif) right no-repeat; display:  block; }
#colright #callout li.last a:hover { color: #f00; }
#callout h2 { display:  inline}
#callout h2 a { color: #ff1300; display:  inline }
#callout p { display: inline; font-size: 1em }
#callout p a {  }

/* 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; clear: none }
#colleft { width: 445px; margin:  0 34px 0 0; border-left: 40px solid #fff; /*border-bottom: 1px solid #ccc*/ }
#colleft.full { width: 795px; margin-right: 34px }
#colright { width: 310px; margin-right:  34px; margin-top: 28px; padding-top:  18px; border-top: 1px solid #ccc }
#colmid { padding: 18px 0; clear: both; margin:  0 34px 0 40px }
#social { border-top: 1px solid #ccc; padding-top: 10px; padding-bottom: 20px; margin: 0 auto; width: 780px;}

/* time to style list elements that will actually display as lists */
#colright li { list-style: disc; margin-left: 14px; }
#colright ol li { list-style: decimal; margin-left: 14px; }

#logo{text-align: center; margin: 0 34px 18px 40px; padding: 5px; border-top: 1px solid #ccc; border-bottom:  1px solid #ccc; clear:  both}
#logo a { margin: 0 4px; }

#footer { clear: both; display: block; overflow: hidden; background: url(../design/foot.gif) bottom no-repeat; text-align: center; font-size: 85%; }
#footer p { margin: 0 34px 0 40px; padding: 18px 0; }
#footer a, #footer p {  }
#footer a { text-decoration: underline }
#footer a:hover {  }


/* 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; }


/* * * =forms * * * * * * * * * * * * * * * * * * * * * * * * * * */

form {
	width: 45em;
	margin-left: 10px;
}

form p{
	font-size: 100%;
	padding: 2px;
	margin-bottom: 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: #072f67;
}

/* 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: 268px;
	padding: 0 .25em;
	background: #072f67;
	color: #fff;
	text-transform: uppercase;
	font-size: 90%;
}

#twitter_div{
width: 400px;
float: left;
}

#facespace{
float: right;
}