@import url("reset.css"); /* zeros everything, including margins and paddings */
@import url("drop_down.css");



/*	Main Structural Rules -- note that these are for modern browsers only; there are separate IE6 & 7 styles
	in a conditional stylesheet.
	
	Also, note that in the Main Structural Rules, only properties pertaining to the actual structure are defined.
	Additional presentation styling may be applied further down in this document.
	
	You should probably not mess with this section, unless you have a _really_ good reason to do so!
*/



/*	The outerWrapper is responsible for setting the min and max widths for the content area. Once you hit the 
	maxWidth, opening the browser window wider just adds the body background colour in equal proportions
	to the left and right side of the outerWrapper
*/
div#outerWrapper {
	max-width: 1240px;
	min-width: 800px;
	
	margin: 0 auto;
	background: white;
	padding: 0 15px;
}


	div#header {
		background:#ff0000;
	}
	
	div#masthead {
		background:#ff3300;
	}
	

	
	/*	contentWrapper wraps the mainContent and sidebar areas */
	div#contentWrapper {
		width:100%;
		display:table;
	}
	
		div#mainContent {
			display:table-cell;
			background:#00ff00;
		}
		
		div#mainContent .mainColumn {
			width: 49%;
			float: left;
		}
		
		div#mainContent .secondaryColumn {
			width: 49%;
			float: right;
		}
		
		div#menuNav {
	padding-bottom: 30px;
	background-color: #FFFFFF;
	width: 100%;
	float: left;
		}	
	
		div#sidebar {
			display:table-cell;
			background:#0000ff;
			
			width:238px; padding-left:20px; /* I'm including the padding here because it's integral to calculating the total width */
		}
	/* /contentWrapper */
	
	
	div#siteMap {
		background:#dd0000;
	}
	
	div#footer {
		background:#880000;
	}
	
	
	
	/* structural rules */
	



/*	DEFAULT tag styles */
	
body {
	/* background: url(../images/background_strip.gif) repeat-x; /* Grey background */
	
	/* default body text settings */
	font-family: Arial, Arial, Helvetica, sans-serif;
	font-size: 80%;
	font-weight: normal;
	color: #616363;
	line-height: 175%;
	width: auto;
}

h1
{
	position:relative;
	
	font-size: 150%;
	font-weight: bold;
	color: #003d6b;
	line-height: 110%;
	clear: both;
}

	/* "Back" links embedded inside the page's main h1 tag... */
	h1 a {
		display:block;
		position:absolute;
		top:20%; right:0;
		
		font-size:50%;
	}
	
	h1 a:hover {
		font-size:50%;	
	}

h1.tagline
{
	clear: none;
}

h2
{
	font-size: 140%;
	line-height: 130%;
	font-weight: normal;
	color: #00a3dd;
	font-weight: bold;
	padding-top:15px;

}

h3
{
	font-size: 125%;
	line-height: 150%;
	color: #003d6b;
	padding-top:15px;
}

h4
{
	font-size: 115%;
	line-height: 150%;
	font-weight: bold;
	color: #333333;
	padding-top:15px;
}

p
{
	margin-bottom: 0.4em;
}

a 
{
	font-size: 100%;
	font-style: none;
	line-height: 150%;
	color: #616363;
	text-decoration: underline;	
}

a:hover 
{
	font-size: 100%;
	font-style: none;
	color: #00a3dd;
	text-decoration: underline;
}

ul 
{
	list-style-position: outside;
	list-style-type: square;
	padding-left: 20px;
}

li 
{
	font-size: 100%;
	line-height: 150%;
	font-weight: normal;
	color: #616363;
}

li a
{
	font-size: 100%;
	line-height: 150%;
	color: #616363;
}

li a:hover{
	font-size: 100%;
	line-height: 150%;
	color: #00a3dd;
}

span.uc
{
	text-transform: uppercase;
	font-weight: normal;
}

strong
{
	font-weight: bold;
}
	
p.verticalGap
{
	padding-top: 20px;
}

#mainContent ol
{
}
#mainContent ol li
{
	margin-left:30px;
	list-style-type: decimal;
	list-style-position: outside;
	margin-top:15px;
}

/* form styles */

#mainContent form
{
	display: block;
}

#mainContent form fieldset
{
	display: block;
	width: 100%;
}

#mainContent form fieldset ul
{
	display: block;
	width: 100%;
	list-style-type: none;
	padding:0;
}

#mainContent form label
{
	display: inline-block;
	width: 6em;
	vertical-align: top;
}

#mainContent form label.secondary
{
	display: inline-block;
	width: 2em;
	vertical-align: top;
}

#mainContent form ul li.submit input
{

}

#mainContent form ul li
{
	margin-top: 4px;
	width: 100%;
	display: block;
}

#mainContent form ul li.text input, #mainContent form ul li.textarea textarea
{
	border: solid 1px #616363;
}

#mainContent form ul li.textarea textarea
{
	width: 30em;
}

#mainContent form fieldset ul li.textarea label
{
	display: block;
	width: 20em;
}

#mainContent input, textarea
{
	font-family: Arial, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 100%;
	line-height: 150%;
}


#mainContent .qoute{
	border: 1px solid #BAC405;
	padding: 10px;
	height:165px;
	margin-bottom:10px;
}
#mainContent .qoute img{
	float:left;
	margin:0px 30px 30px 0px;
	
}



/* /defaultStyles */





/*	Presentation Styles */

div#outerWrapper {
	background: white;
}


/* The header contains the LL logo and the quote, right-aligned */
div#header {
	position:relative; /* so the blockquote can use position:absolute to align to the right */
	background:white !important; /* override our structural background colour (for debugging purposes) */
}
		
	#header h-1
	{
		display: block;
		width: 204px;
	}

	/* The actual LL logo */
	#header a
	{
		display: block;
		width: 204px;
		height: 87px;
		margin-bottom: 16px;
		padding-top: 18px;
	}
/*
		#header h-1 a span
		{
			display: none;
		}
*/
	/* The quotation, right-aligned */
	#header blockquote
	{
		/* align to the right */
		position:absolute;
		right:0; top:0px;
		
		font-size: 150%;
		line-height: 120%;
		font-weight: lighter;
		color: #003d6b;
		text-align:right;
		display: block;
		width: 530px;
		padding-top:30px;
	}
	
	#header blockquote span.speaker
	{
		display: block;
		font-size: 80%;
		line-height: 100%;
		font-weight: lighter;
		color: #00a3dd;
		padding-top:3px;
	}
/* /header */


/*	Masthead styles: the masthead is a flexible-width graphic that can optionally
	be swapped on individual pages
*/
div#masthead
{
	height: 136px;
	background: white url(../images/lawyerlocate_masthead.jpg) top center repeat-x;
	
	border-top: #bac405 solid 5px;
	border-bottom: #bac405 solid 16px;
}



/*	MainContent: this is (obviously) the main content area. Any "featured lawyers"
	are floated into this section as well. MainContent's structural aspects are
	controlled at the top of this document in the "Structural Rules" section, and 
	probably shouldn't be touched.
*/
	
div#mainContent
{
	vertical-align:top;
	margin-bottom: 8px;
	background:white !important;
	position: relative;
}

	div#mainContent h1.columnHeading
	{
		display: block;
		width: 100%;
	}
	
	/*	In addition to all its funky drop-down functionality, the menu
		also contains the little rounded corner graphic
	*/
	#mainContent #menuNav {
	background: white; /* url(../images/green_sidebar_corner.gif) no-repeat top right; */
	}


	/* The "feature" is inset and text-wrapped to the right of the main content */
	#mainContent #feature
	{
		float: right;
		margin-left: 16px;
	}
	
		#mainContent #feature img
		{
			padding: 0;
			margin-top: 10px;
			margin-left: 0px;
			padding-left: 0px;
			padding-bottom: 0;
			margin-bottom: 0;
			border: none;
		}
		
		#mainContent #feature h2
		{
			font-size: 120%;
			margin-left: 0px;
			color: #003d6b;
			margin: 0;
			padding: 0;
		}
					
		#mainContent #feature p
		{
			margin-left:0px;
			color:#00a3dd;
		}
		
		
		#mainContent img.boxed
		{
			padding: 12px;
			border: 1px solid #bac405;
		}


		/*
			This imageHolder class can be assigned to any container to put a border around an image,
			provided that the image does not exceed the width and height restrictions (otherwise it gets cropped!
		*/
		
		.imageHolder, .imageHolderWithCaption
		{
			height: 140px; width: 220px; line-height:140px;  /* the line height is for Firefox (see ie_style.css for IE-specific properties on this class) */
			display: inline-block;
			vertical-align:top;
			/* overflow: hidden; */
			
			border: 1px solid #bac405;
			
			text-align: center;
			margin: 4px;
		}
		
		.imageHolder img, .imageHolderWithCaption img
		{
			vertical-align: middle;
		}


		.imageHolder p
		{
			display:inline-block;
			font-size: 120%;
			padding: 10px; margin: 0;
			line-height: normal;
			text-align:center; vertical-align:middle;
		}
		
		.imageHolderWithCaption {
			margin-bottom:50px;	
		}
		
		.imageHolderWithCaption p {
			line-height:normal;
			padding-top:10px;
		}
		
		.imageHolderWithCaption a, .imageHolderWithCaption a:hover {
			font-weight:normal;
		}




				.columnContainer
				{
					margin-top: 32px;
					width: 100%;
				}
			
					.contentColumns
					{
						float: left;
						width: 56%;
					}					
											
						div.news
						{
							background: #e7e7e5;
						}
							
						.news p
						{
							padding: 0 12px 0 12px;
							color:#003d6b;
						}
							

						
						.contentColumns h2
						{
	display: block;
	font-weight: bold;
	font-size: 100%;
	padding: 5px 10px 1px 8px;
	width: auto;
	color: white;
	background: #003d6b url(../images/news_area_blue_corner_left.gif) top left no-repeat;
	text-transform: uppercase;
	cursor: pointer;
						}
						
						.contentColumns h2 span
						{
	display:block;
	width:100%;
						}
						
						#level2
						{
							background: #336489;
						}
						
						#level2 span
						{

						}
						
						#level3
						{
							background: #668ba6;
						}
						
						#level3 span
						{

						}
						
						#level4
						{
							background: #8ca8bc;
						}
						
						#level4 span
						{
							background-image:  url(../images/accordion_arrow_sprite_level_4.gif);
						}
						
						
						
						
						
						
					/* The clientTestimonials rules control the Testimonials widget on the home page */
					
					#clientTestimonials
					{
						width: 41%;
						float: right;
						background-color:#e7e7e5;
						border: none;
					}
					
						#clientTestimonials ul
						{
							list-style: none;
							margin: 0;
							padding: 0;
						}
						
							#clientTestimonials ul li
							{
								display: none;
								padding: 0;
								margin: 0;
								overflow: hidden;
							}
							
							#clientTestimonials ul li blockquote
							{
								padding: 0;
								margin: 0;
							}
							
							#clientTestimonials ul li.visible
							{
								display: block;
							}
						
						#clientTestimonials h2
						{
	display: block;
	font-weight: bold;
	font-size: 100%;
	padding: 5px 10px 0 8px;
	width: auto;
	color: white;
	text-transform: uppercase;
	background: #003d6b url(../images/news_area_blue_corner_right.gif) top right no-repeat;
	text-align: left;
	margin: 0;
						}					
						
						#clientTestimonials p
						{
	padding: 12px 20px 0 12px;
	font-size: 100%;
	line-height: 135%;
	color: #003d6b;
	font-weight: normal;
						}
						
						#clientTestimonials h3
						{
							padding: 0px 20px 12px 12px;
							margin: 0 0 0 0;
							font-size: 120%;
							line-height: 130%;
							color: #003d6b;
							text-transform: uppercase;
							font-weight: lighter;
							text-align: right;
						}
						
						#clientTestimonials #testimonialNav
						{
							background: #7f9aae;
							display: block;
							width: 100%;
							float: left;	
						}
						
							#clientTestimonials #testimonialNav ul
							{
								background: #7f9aae;
								display: block;
								margin: 0 auto;
								width: 10em;
								text-align: center;
							}
						
							#clientTestimonials #testimonialNav li
							{
								float: left;
								display: block;	
							}
							
							#clientTestimonials #testimonialNav li.current
							{
								float: left;
								display: block;
							}
						
						#clientTestimonials #testimonialNav a
						{
							font-size: 100%;
							color: #003d6b;
							text-decoration: none;
							margin: 4px;
							text-align: center;
							display: block;
						}
						
						#clientTestimonials #testimonialNav li.current a
						{
							color: white;
						}
						
						#clientTestimonials #testimonialNav a:hover
						{
							text-decoration:underline;
							color:#FFFFFF;
						}					
						
						#clientTestimonials #testimonialNav a span
						{
							display: none;
						}
						
						#clientTestimonials #testimonialNav a.leftArrow, #clientTestimonials #testimonialNav a.rightArrow
						{
							background-repeat: no-repeat;
							background-position: left bottom;
							text-decoration:none;
							width: 12px;
							height: 13px;
							display: block;
							padding-top: 2px;
						}
						
						#clientTestimonials #testimonialNav a.leftArrow
						{
							background-image: url(../images/testimonials_left.jpg);
						}											
				
						#clientTestimonials #testimonialNav a.leftArrow:hover
						{
							background-image: url(../images/testimonials_left_over.jpg);
						}											
				
				
						#clientTestimonials #testimonialNav a.rightArrow
						{
							background-image: url(../images/testimonials_right.jpg);
						}											
				
						#clientTestimonials #testimonialNav a.rightArrow:hover
						{
							background-image: url(../images/testimonials_right_over.jpg);
						}
						
					/* /clientTestimonials */
					
					
					
					
					
					
		/* categoryList class is used to control the listing of categories and subcategories */
		.categoryList {
			margin-top:10px;
		}
		
			.categoryList ul {
				list-style:none;
				margin:0; padding:0;
			}
			
				.categoryList ul li {
					background:	#00a3dd;
					font-weight:bold;
					color:white;
				}
				
					.categoryList ul ul {
						background:white;
						padding:5px 0 10px 0;
					}
				
					.categoryList ul ul li {
						padding: 0px 10px;
						width:auto;
						
						background:none;
						font-weight:normal;
						color:#616363;
					}
				
				
		/* /.categoryList */

		table.comparison
		{
			width: 100%;
			border: none;
		}
		
		table.comparison th
		{
			font-weight: bold;
		}
		
		th.headers
		{
			width: 33%;
		}
		
		th.basic_monthly
		{
			width: 17%;
		}
		
		th.basic_annual
		{
			width: 16%;
		}
		
		th.enhanced
		{
			width: 16%;
		}
		
		th.premium
		{
			width: 18%;
		}
		
		tr.prices td
		{
			background: #cccccc;
		}
		
		td
		{
			text-align: center;
			vertical-align: top;
		}
		
		td.headers
		{
			text-align: right;
			font-weight: bold;
			padding-right: 8px;
		}
		
		td.basic_monthly, td.enhanced
		{
			background-color: #eeeeee;
		}
		
		td.basic_annual, td.premium
		{
			background-color: #fafafa;
		}
		
		form#membership
		{
			width: 100%;
			float: left;
		}
		
		form#membership ul
		{
			list-style: none;
			clear: both;
			width: 100%;
			display: block;
			padding: 0;
			margin: 0;
			float: left;
		}
		
		form#membership ul li
		{
			clear: both;
			float: left;
			width: 100%;
			margin: 0;
			padding: 0;
		}
		
		form#membership ul li.checkbox input
		{
			width: auto;
			display: inline-block;
			margin: 0.65em 1em 0 0;
			padding: 0 0 0 0;
			vertical-align: top;
			/*float: left;*/
		}
		
		form#membership h3
		{
			padding-top: 0;
			margin-top: 0;
		}
		
		form#membership span.description
		{
			/*float: right;*/
			display: inline-block;
		}
		
		form#membership li.submit input
		{
			margin: 10px 0 20px 0;
		}

/* /mainContent */			
				
				
				
				
				
				
				
				
				
				
				
				
/* ================= SIDEBAR ==================================================== */
				
				
/*	The sidebar is a fixed-width right-side sidebar that has a fixed height based
	on the number of elements in it */
div#sidebar {
	vertical-align:top;
	background-color: white;
}


	#sidebar div 
	{ 
		margin-bottom: 6px; /* default box vertical spacing */
	}
	
		#sideBar div h2 
		{ 
			font-size: 130%; 
			line-height: 100%;
			font-weight: normal;
			text-transform: uppercase;
			
		}
		
		#sideBar div h2 strong
		{
			font-weight: bold;
		}
	
	#login {
		background: #bac405;
	}
		
		
		#login fieldset {
			padding:0 10px 10px 10px;
		}
		
				#login input.text
				{
					margin: 2px auto;
					padding: 4px;
					width: 95%;
					color: #616363;
					font-size: 8pt;
					border: solid 1px #6f726a;
				}
				
				#login input#user_login
				{
					background: white url(../images/login_form_default_values.gif) 0 -2px no-repeat;
				}

				#login input#user_pass
				{
					background: white url(../images/login_form_default_values.gif) 0 -30px no-repeat;
				}
			
				#login button.submit
				{
					float: right;
					margin-right: 0px;
					border: none;
					background: url(../images/login_button.gif) top left no-repeat;
					display: block;
					width: 61px;
					height: 21px;
					cursor: pointer;
				}
	
				#login button span
				{
					display: none;
				}
	
				#login button.submit:hover
				{
					background-position: right top;
				}
				
				#login button.submit:active
				{
					background-position: -60px 1px;
				}
				
		#login form fieldset a
		{
			text-transform: uppercase;
			float: left;
			clear: none;
			background: none;
			text-decoration: underline;
		}
		
		#login a
		{
			background: #003d6b url(../images/register_arrow.gif) no-repeat center right;
			color: white;
			text-decoration: none;
			padding: 4px 0 4px 12px;
			font-size: 75%;
			display: block;
			clear: both;
		}
		
		a#register
		{
			text-align: center;
		}
		
		#login a:hover
		{
			text-decoration: underline;
		}
		

		#login p.error
		{
			color: red;
			line-height: 100%;
			font-weight: bold;
			font-size: 90%;
			padding-top: 0.2em;
		}
		
					
		div#membershipInfo
		{
			background: #cfcfcc url(../images/membershipInfo.jpg) 0 5px no-repeat;
			
		}
		
			#membershipInfo h2, #membershipInfo a
			{
				display: block;
				margin-left:90px;
			}
		
			#membershipInfo h2
			{
				color: #aa0066;
				padding-top: 10px;
				text-transform: uppercase;
				font-size: 130%;
			}
		
			#membershipInfo a
			{
				background: url(../images/bt_membershipArrow-down.png) no-repeat 90% 5%;
				text-decoration: none;
				
				font-size: 90%;
				line-height: 110%;
				margin-top: 1em;
				padding-bottom: 1em;
				padding-right: 15px;
			}
		
			#membershipInfo a:hover 
			{
				background-image: url(../images/membershipArrow.png);
				color: #003d6b;
			}
					
		#newestMember
		{
			background: #a0afbb;
			padding:0 10px 5px 10px;
			height:188px;
		}
		
			#newestMember h2
			{
	color: #003d6b;
	border-bottom: 2px solid white;
	text-align:left;
	text-transform: uppercase;
	font-size: 110%;
	margin-top: 0px;
	margin-bottom: 10px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 0;
			}
		
			#newestMember dl
			{
				list-style: none;
				text-align:left;
			}
		
			#newestMember dl dd, #newestMember dl dt
			{	
				line-height: 120%;		
				font-size: 75%;
				font-weight: bold;
				color: #3f3f38;
				padding-bottom:5px;
			}
			
			#newestMember dd strong, #newestMember dt strong
			{	
				color: #003d6b;
			}
		
			#newestMember dd img
			{
				float:right;
				padding-left:5px;
			}
		
			#newestMember a
			{
				font-size: 85%;
				font-weight: bold;
				color:#3f3f38;
			}
						
			#newestMember dd a:hover
			{ 
				color: #003d6b;
				padding-right:5px;
			}
			
			#newestMember p /* abstract / description */
			{
	line-height:120%;
	font-size:85%;
	font-weight:normal;
	color:#3f3f38;
	padding-bottom:5px;
	text-align: center;
			}
						
		#recentStats
		{
			background: #cfcfcc;
		}
		
			#recentStats h2
			{
	border-bottom: 2px solid white;
	color: #aa0066;
	margin-left:10px;
	padding-top:10px;
	text-transform: uppercase;
	font-size: 130%;
	margin-right: 10px;
			}
		
			#recentStats ul
			{
				list-style: none;
				padding-bottom: 12px;
			}
		
			#recentStats li
			{
	font-size: 85%;
	line-height: 130%;
	color:#333738;
	font-style:normal;
	font-weight: normal;
	background: url(../images/arrow_recentStats.png) no-repeat 0px 2px;
	margin-top: 8px;
	margin-right: 10px;
	margin-bottom: 0;
	margin-left: -10px;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 12px;
			}	
		
		#media
		{
			/*min-height: 250px;*/
			background: #a0afbb url(../images/media_box_rounded_corners.gif) bottom right no-repeat;
			padding-bottom: 12px;
		}
				
		
		div#siteMap
		{
			background:white !important;
			
			/* this float is used to overcome auto-height issues when all the contents are floated */
			float:left;
			width:100%; height:auto;
			
			padding-top: 30px;
			padding-bottom: 30px;

			border-top-width: 1px;
			border-bottom-width: 1px;
			border-top-style: solid;
			border-bottom-style: solid;
			border-top-color: #003d6b;
			border-bottom-color: #003d6b;
		}
		
			#siteMap #maps
			{
				width: 80%;
				margin: 0 auto;
				line-height:160%;				
				font-size: 80%;
			}
		
				#siteMap #maps strong
				{
					font-weight: bold;
					text-transform: uppercase;
				}
		
				#siteMap #maps ul
				{
					list-style: none;
					display: block;
					width: 33%;
					float: left;
					padding: 0;
				}
				

div#footer
{
	clear:both;
	background:white !important;
}

	#footer address
	{
		line-height:120%;			
		font-size: 80%;
		text-align:center;
		padding-top: 5px;
		color:#003d6b;
		font-style: normal;
	}
#outerWrapper #contentWrapper #mainContent #businesscard {
	width: 45%;
	border: 1px solid #BAC405;
	padding: 12px;
}
#outerWrapper #contentWrapper #mainContent #businesscard img {
	float: left;
}
#outerWrapper #contentWrapper #submenu {
	width: 200px;
	float: left;
	margin-right: 50px;
	position: relative;
}
#outerWrapper #contentWrapper #menu {
	background-image: url(/images/accordion_arrow_sprite_level_2.gif);
	background-repeat: no-repeat;
	background-position: right top;

}
#outerWrapper #menu {
	background-image: url(../images/green_sidebar_corner_2.gif);
	background-repeat: no-repeat;
	background-position: right top;
	width: 100%;
	height: 70px;
}
#outerWrapper #contentWrapper #sidebar #newestMember #userTestiominals .user {
	text-align: left;
	margin-right: 12px;
	margin-left: 12px;
	font-size: 8pt;
}