@charset "utf-8";

/* reset */ 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
	position: relative; /* Forgetting position relative on block level elements causes problems, so I add it in the beginning */
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}

h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;}

.class {
  width:200px; /* All browsers */
  *width:250px; /* IE */
  _width:300px; /* IE6 */
  .width:200px; /* IE7 */
}

/* reset */ 

a img {
	border: none; /* images that are links get ugly blue borders */
}

h1, h2, h3, h4, h5, p, ul, ol, blockquote {
	margin: 1em auto; /* Typically you want spacing between paragraphs, headings and lists in the body text, this would be changed to match the site I'm working on */
}

li {
	margin-left: 30px; /* Normally on websites bullet lists are indented, using margin-left on the li causes fewer problems than padding-left on the ul */
	color:#666;
}


html {
	margin: 0;
	padding: 0;
	overflow:-moz-scrollbars-vertical; /* always show firefox scrollbar */
/* I moved the following line up above
font-size: 14px;  /* sets the 1em font size */
		}
	
#wrapper {
/* I wouldn't use the following line, plus I set position relative above */
/*	position: relative;	top: 0; right: 0; bottom: 0; left: 0; /* make is go 0px from top and 0px from bottom */

	width: 926px; /* sets width of main container */
	min-height: 870px; /* I only set min-height if the background image depends on it (IE6 doesn't recognize min-height) */
	margin: 0 auto; /* centers box */
	margin-bottom:25px;
	background: url('/images/left-column-back.gif') repeat-y left top;
	background-color: #fff;
	}
	
#main-text {
	background: url('/images/left-column-back.gif') repeat-y left top;
	background-color: #fff;
	position: relative;
	float: left;
	}

/* body, h1, h2, h3, h4, h5, h6, ul, ol, dl { All the other tags inherit this from the body tag, plus I move this above with the textarea */
body, textarea {
	font-size: 14px;
	font-family: Gill Sans, GillSans, Calibri, Trebuchet, sans-serif;
}
	
body {	
	background: url('/images/back.jpg') repeat-x top center;
	background-color:#213f51;
	}
		
h1, .componentheading { font-size: 1.8em; color:#3a6e8f; margin: 2px 0; } /* I have stopped using ems, caused too many problems. All I use ar px for font sizes */
h2 { font-size: 1.5em; color:#3a6e8f; margin: 2px 0;	}
h3 { font-size: 1.25em;	 color:#3a6e8f; margin: 2px 0;}
h4 { font-size: 1.125em;	}
h5 { font-size: 1em;	}
h6 { font-size: .875em;	}
p  { font-size: 1em; color:#666; }
.testimonials p {  color:#3a6e8f; }
.practice-areas p {color:white;}

img { border: 0; } /* Removes default border around linked images */ /* Oh, I added this above */

a:link, a:visited, a:active { text-decoration: none; /*color:#000000;*/ color: #3A6E8F;}
a:hover { text-decoration: underline; color:#ba6b25;}

/* LAYOUT */
	
.practice-areas{
	background-color: #9fad9f;
	margin-left: 1px;
	color: #fff;
	padding: 3px 14px;
	position: relative;
	float: left;
	width: 220px;
	}

.practice-areas a:link, .practice-areas a:active, .practice-areas a:visited {color: #fff; margin-left: 5px; }
.practice-areas a:hover { color:#213f51; }

.practice-areas-middle{
	background-color: #fff;
	margin-left: 1px;
	color: #213f51;
	padding: 3px 14px;
	font-size: 13px;
	position: relative;
	float: left;
	width: 220px;
	}
.practice-areas-middle a:link, .practice-areas a:active, .practice-areas-middle a:visited {color: #213f51; }
#logo { 
	position:relative; 
	float:left;
	z-index: 9999;
	float: left; 
	width: 249px;
	height: 130px;
	background-color: white;
	text-align: center;
	}

#global-nav {
	position: relative; float: left; top: 0; left: 0;
	width: 924px; /* sets width of main container */
	margin-left:1px;
	height: 30px;
	background-color:#9fad9f;
	font-size: 13px;
	z-index: 99;
	}
#global-nav.nav-footer {
	position: relative; 
	float: left;
	border-left-width: 1px;
	border-left-color:#fff;
	border-left-style: solid;
	border-right-width: 1px;
	border-right-color:#fff;
	border-right-style: solid;
	margin-left:0;
	}
#global-nav ul {
	list-style: none;
	margin-top:7px;
	margin-left:10px;
	}

#global-nav li {
	float: left; /* makes the nav menu inline*/
	margin: 0 1em 0 0;
	}
/* floats can be dangerous if you don't set the width, usually doesn't cause problems if used like this. I tend to simply use <a> tags for nav */

#global-nav li a {
	border-left-width: 1px;
	border-left-color:#fff;
	border-left-style: solid;
	padding-left: 1em;
	}
	
#global-nav li a.nav-no-border {border: none;}

#global-nav a:link, #global-nav a:visited, #global-nav a:active, #main-image a, #blog a {	color: #fff;}
#global-nav a:hover {	color:#213f51;}

#disclaimer {
	position:relative;
	float: left;
	background-color: #fff;
	font-size: 10px;
	padding: 10px;
	}
#copyright {
	position:relative;
	float: left;
	background-color: #fff;
	font-size: 10px;
	padding: 10px;
	width: 895px;
	}

#left-column {
	position: relative;
	float: left;
	margin-bottom:40px;
	width: 247px;
	}

#right-column {
	position: relative;
	float: left;
	margin-bottom:20px;
	width: 653px;
	margin-left: 15px;
	margin-top: 30px;
/*	border-left-width: 1px;
	border-left-color:#000000;
	border-left-style: solid; 
	border: 1px solid #000; /* Short Hand of above s.p. 
		padding-left: 2em; /* Use padding left/right and width or padding top/bottom with height with caution. It will cause problems in IE 5 */
	}
	
.testimonials {
	position: relative;
	float: right;
	width: 200px;
	font-size: 18px;
	color: #3a6e8f;
	margin-left: 40px;
	}
.testimonials-author {
	text-align: right;
	font-size: 14px;
	margin-top: -20px;
	}
#blog {
	position: relative;
	float: left;
	width: 673px;
	margin-left: 2px;
	font-size: 18px;
	background-color:#3a6e8f;
	height:25px;
	text-align: right;
	margin-top:2px;
	}
	
#contactus-table td {
	padding-left: 20px;
}

#main-image {position: relative; float: left; width: 675px; margin-left: 2px; }

.call-today {
	position:absolute; right: 30px; top: 0px;
	color:#fff; 
	font-size: 22px;
	z-index: 9;
	}
.call-today p{
	color:#000;
}
#main-image.dark .call-today {
	color:#000000; 
	}

#bugs{ width: 675px; height: 114px; position: relative; float: left; margin-left: 2px; z-index: 99999; margin-top: -24px;}
.stop-foreclosures{ position:absolute; top: 68px; left:10px;}
.save-your-car{position:absolute; top: 89px; left:235px;}
.stop-harassment{position:absolute; top: 89px; left:465px;}

.stop-foreclosures a, .save-your-car a, .stop-harassment a {color:#fff; font-size: 18px;}

.alignleft { float: left; margin: 0px 10px 5px 0px;}

/*#main-image { 
	background: URL('/images/main-image-home.jpg') no-repeat center top;
	width: 675px;
	height: 315px;
}*/