* {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

body {
	margin: 30px 0;
	padding: 0;
	background: #EFEFEF;
	font-size: 12px;
	color: #5e5d5d;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	font-weight: normal;
	color: #063c6c;
}

h2 {
	margin-bottom: 5px;
	border-bottom: 1px solid #F4F4F4;
	font-size: 20px;
}

h3 {
	font-size: 16px;
}

p, ol, ul, blockquote {
	line-height: 24px;
	text-align:justify;
	
}

ul {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

a {
	color: #31363B;
	text-decoration: none;

}

a:hover {
	text-decoration: none;
	color: #FF0000;
}

img {
	border: none;
}

#textfield1 {
	width: 185px;
	margin-bottom: 10px;
	border: 1px solid #E0E0E0;
	border-right-color: #F6F6F6;
	border-bottom-color: #F6F6F6;
}

#submit1 {
	border: 1px solid #EBEBEB;
	border-bottom-color: #DDDDDD;
	background: #FBFBFB url(images/img7.gif) repeat-x;
	text-transform: lowercase;
	font-size: 12px;
	color: #7A7A7A;
}

/* Posted */

.posted {
	height: 33px;
	margin: 0 0 30px 0;
	padding: 10px 15px 0 15px;
	background: url(images/img6.gif) repeat-x;
	border-bottom: 1px solid #F2F2F2;
}

.posted p {
	float: left;
	margin: 0;
}

.posted .comments {
	float: right;
}

.posted a {
	color: #717171;
}

/* Header */

#header {
	width: 917px;
	height: 115px;
	margin: 0 auto;
	background: url(images/img2.gif) repeat-x;
}

/* Logo */

#logo {
	float: left;
	height: 115px;
	padding: 0 0 0 0;
	background: url(images/img1.gif) no-repeat;
}

#logo * {
	text-decoration: none;
}

#logo h1 {
	float: left;
	padding: 28px 0 0 9px;
	font-size: 36px;
}

#logo h1 a {
	color: #000000;
}

#logo h1 span {
	font-weight: bold;
}

#logo h2 {
	float: left;
	padding: 72px 0 0 8px;
	font-size: 12px;
	border: none;
}

#logo h2 a {
	color: #B4B4B4;
}

/* Menu */

#menu {
	float: right;
	height: 45px;
	padding: 55px 25px 0 0;
	background: url(images/img3.gif) no-repeat right top;
}

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	padding: 0 15px 0 15px;
	border-left: 1px solid #cfcfcf;
	text-decoration: none;
	font-size: 13px;
	color: #3B3B3B;
}


#menu a:hover {
	color: #FF0000;
}



#menu .first a {
	border: none;
}

/* Splash */

#splash {
	width: 877px;
	height: 160px;
	margin: 0 auto;
	background: url(images/img5.gif) repeat-x left bottom;
	border-right: 20px solid #FFFFFF;
	border-left: 20px solid #FFFFFF;
}

#flash {
	width: 877px;
	height: 290px;
	margin: 0 auto;
	background: url(images/img5.gif) repeat-x left bottom;
	border-right: 20px solid #FFFFFF;
	border-left: 20px solid #FFFFFF;
}



/* Content */

#content {
	width: 847px;
	margin: 0 auto;
	padding: 20px 35px 0 35px;
	background: #FFFFFF url(images/img8.gif) no-repeat left bottom;
}

#colfull {
	float: left;
	width: 835px;

}

#colclient {
	float: left;
	width: 835px;
   height: 520px;

}

#colOne {
	float: left;
	width: 620px;
}

#colOneright {
	float: right;
	width: 620px;
}

#colTwo {
	float: right;
	width: 185px;
	padding: 0px 0 0 0;
}

#colTwoleft {
	float: left;
	width: 185px;
	padding: 0px 0 0 0;
}


/* Footer */

#footer {
}

#footer p {
	text-align: center;
	color: #777777;
	font-size: 10px;

}

#footer a {
	color: #5D5D5D;
	text-decoration: none;

}

#footer a:hover {
	color: #FF0000;
}


#end {
	clear: both;
	width: 840px;
	height: 40px;
	margin: 0 auto;
}


#end P.email {
	FONT-SIZE: 11px;
	FLOAT: right;
	COLOR: #6B6B6B;

}

#end P.terms {
	FONT-SIZE: 11px;
	FLOAT: left;
	COLOR: #6B6B6B;

}



/*
  First define a content are width and position, if needed. I'm centering
  the 623px wide shell
*/
#clb-shell {
  margin : auto;
  width : 835px;
}

/* 
  My main experiment sub-heading. Just setting color
*/
#clb-shell h2 {
  color : #fff;
}

/*
  Now I'm resetting the paragraph padding (it was zeroed). I'm also clearing
  the p, but I don't really need this for the top one, only the bottom. The 
  top has no effect (it'll clear the heading by default), but it is needed 
  for the bottom (depending on the shell width versus the ul width). It may 
  not be needed at all. Your situation will determine.
*/
#clb-shell p {
  padding : 10px;
  clear : both;
}

/*
  I define the width of the ul, set the height (in ems!) align the text and
  remove list styles. The last may not be needed on most browsers
*/
ul#clb {
  width : 835px;
  height : 14em;
  text-align : center;
  list-style-type : none;
}

/*
  Now I style the individual boxes (li)
*/
ul#clb li {
margin : 8px 8px 8px 0px;
  width : 200px;
  height : 75px;
  background : #fff;
  float : left; 
  display : inline;
  

}




/*
  Style the li links
*/
#clb-shell a {
  color : #669900;
}
#clb-shell a:hover, #clb-shell a:focus, #clb-shell a:active {
  color : #000;
  text-decoration : none;
}
#clb-shell a:focus, #clb-shell a:active {
  background-color : #fff;
}

/*
  Style the h3 links
*/
#clb-shell ul#clb h3 a {
  color : #ffffaa;
  display : block;
  width : 200px;
  height : 75px;
  background : #fff; 
  text-decoration : none;
  padding-top : 5px;
    display: table-cell;
    vertical-align: middle;
  
}
#clb-shell ul#clb h3 a:hover, #clb-shell ul#clb h3 a:focus, #clb-shell ul#clb h3 a:active {
  background : #fff;
  color : #fff;

}

/*
  This tyles the text p content within the li separately. The most important 
  thing here is to re-kill the padding and add the margin to create good gutters
*/
ul#clb p {
  font-size : 0.9em;
  padding : 0;
  margin : 10px;
  
}

/* End Styles */