@charset "UTF-8";
/* CSS Document */

/* === Document broken into sections:  ===================================================================================|

1. Universal Page Style where you'll find styles for the top and bottom bars, main navigation (except about navigation), and the main container 
2. Splash Page Style where you'll find the styles for the index page.
3. Mediaton Page Style where you'll find styles for the mediation page.
4. Arbitration Page Style where you'll find styles for the arbitration page.
5: Litigation Page Style...
6: About Attorney Page Style...
7: About Navigation Style where you will find the style for the about page navigation, which is on the right side of the page rather than the left.
8: Contact Page Style...
9. Face Box Style


===========================================================================================================================|      */


body {
	background-image:url(../images/background.gif);
	background-repeat: repeat;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin-top: 0px;
	margin-left: 0px;
	
}



/* //////////////////////////        UNIVERSAL PAGE STYLE      	///////////////////////////////// */



#mainDiv {  /* The div which contains all other elements of the design.*/
	
	background: #FFFFFF;
	width: 800px;
	position: absolute;
	top: 0;
	left: 20%;
	
}


#topBar {        /* div at the top of the page containing William Hopkins and the pattern */

	background-image:url(../images/topBar_pattern.gif);
	background-repeat:repeat;
	display: block;
	width: 790px;
	padding: 5px

	
}

	.topBarheader {     /* defines the font inside of the topBar */
	
		font-family: Garamond;
		color: #ffffff;
		font-size: 30px;
		letter-spacing:1px;
		padding-left: 20px;
		
	}


#bottomBar {   /* This div contains copyright info and bottom links */

	background: #0b304f; 
	width: 800px;
	color: #fff;
	font-size: 11px;
	text-align: center;
	

}

	#bottomBar a {
		color: #fff;
		text-decoration: none;
	}
	
		#bottomBar a:hover {
			text-decoration: underline;
		}
		


#navigationDiv {  /* Contains Navigation elements */
	
	background-image:url(../images/navigation_gradient.jpg);
	position: absolute;
	left: 20px;
	top: 75px;
	padding: 15px;
	text-align:right;

	
	}
	
	#navigationDiv a {
		
		font-family: Garamond;
		font-size: 24px;
		color: #ffffff;
		letter-spacing: 2px;
		line-height: 35px;
		text-decoration: none;
	
	
}

#navigationDiv a:hover {
	
	color:#1dc64d;
}





/* //////////////////////////        SPLASH PAGE STYLE      	///////////////////////////////// */




#splash_contentDiv { 
	background-image:url(../images/splashPage_bg.jpg);
	width: 800px;
	height: 550px;
	
}



	#welcomeText {
		background-image:url(../images/splash_contentBg.png);
		position:absolute;
		top: 355px;
		width: 780px;
		margin-left: 10px;
		
	}
		.welcome {
					color:#0b304f;
					font-size:72px;
					font-family:Garamond;
				}
			
	
			 .splashText {
				background-image:url(../images/splash_contentBg_drk.png);
				display: block;
				color: #333;
				font-size: 16px;
				font-family:Arial, Helvetica, sans-serif;
				letter-spacing: 1px;
				line-height: 30px;
				padding: 10px;
				margin: 10px;
		}

				.splashText a {
					color: #066000;
					font-size: 17px;
					text-decoration: none;
					font-weight:300;
				}
			
					.splashText a:hover {
						text-decoration: underline;
					}
					
			
			
			
			
			
			
/* //////////////////////////        MEDIATION PAGE STYLE      	///////////////////////////////// */
			
			
#mediation_contentDiv {  /* This div contains the body content on the splash page*/
	display: block;
	background-image:url(../images/mediation.jpg);
	background-repeat: no-repeat;
	height: 670px;
	width: 800px;
	
	}



	#mediationContent {
		background:url(../images/gradient-white2.jpg);
		position:absolute; 
		background-color:#FFFFFF;
		top: 340px;
		width: 800px;
		height: 230px;
	
		}
	
	   .mediationContainer {
		
			width: 740px;
			position:relative;
			left: 20px;
			color: #333;
			

			}
			.mediationText {
				color: #333;
				font-size: 15px;
				line-height: 20px;
				letterspacing: 1px;
				padding: 5px;
				}
	
				.mediationTextheader {
					font-family: garamond;
					font-size:32px;
					letter-spacing: 1px;
					color:#006600;
					}
	
					.capable_professional {
						display: block;
						font-size: 28px;
						font-family: garamond;
						line-height: 40px;
						border-right: solid 1px #ccc;
						padding-right: 10px;
						color:#0b304f; 
		
						}
						
									
/* //////////////////////////        ARBITRATION PAGE STYLE      	///////////////////////////////// */
			
			
#arbitration_contentDiv {  /* This div contains the body content on the splash page*/
	display: block;
	background-image:url(../images/arbitration.jpg);
	background-repeat: no-repeat;
	height: 530px;
	width: 800px;
	
	}



	
	#arbitrationContent {
		background:url(../images/gradient-white2.jpg);
		position:absolute; 
		background-color:#FFFFFF;
		top: 340px;
		width: 800px;
		height: 230px;
	
		}
	
		 .arbitrationContainer {
		
			width: 740px;
			position:relative;
			left: 20px;
			color: #333;
			

			}
			.arbitrationText {
				color: #333;
				font-size: 15px;
				line-height: 20px;
				letterspacing: 1px;
				padding: 5px;
				}
	
				.arbitrationTextheader {
					font-family: garamond;
					font-size:32px;
					letter-spacing: 1px;
					color:#006600;
					
					}
	
					.left_panel {
						display: block;
						width: 200px;
						font-size: 16px;
						line-height: 30px;
						font-family: garamond;
						border-right: solid 1px #ccc;
						padding-right: 10px;
		
						}
						
						
/* //////////////////////////        LITIGATION PAGE STYLE      	///////////////////////////////// */
			
			
#litigation_contentDiv {  
	display: block;
	background-image:url(../images/litigation.jpg);
	background-repeat: no-repeat;
	height: 650px;
	width: 800px;
	
	}



	
	#litigationContent {
		background:url(../images/gradient-white2.jpg);
		position:absolute; 
		background-color:#FFFFFF;
		top: 340px;
		width: 800px;
		height: 230px;
	
		}
		
	
		
			 .litigationContainer {
		
			width: 740px;
			position:relative;
			left: 20px;
			color: #333;
			

			}
			.litigationText {
				color: #333;
				font-size: 15px;
				line-height: 20px;
				letterspacing: 1px;
				padding: 5px;
				}
	
				.litigationTextheader {
					font-family: garamond;
					font-size:32px;
					letter-spacing: 1px;
					color:#006600;
					}
	
			
	
						
						
/* //////////////////////////        ABOUT ATTORNEY PAGE STYLE      	///////////////////////////////// */
			
			
#about_contentDiv {  /* This div contains the body content on the splash page*/
	display: block;
	background-image:url(../images/about.jpg);
	background-repeat: no-repeat;
	height: 530px;
	width: 800px;
	
	}



	
	#aboutContent {
		background:url(../images/gradient-white2.jpg);
		position:absolute; 
		background-color:#FFFFFF;
		top: 340px;
		width: 800px;
		height: 230px;
	
		}
	
		.aboutContainer {
		
			width: 720px;
			position:absolute;
			left: 20px;
			color: #333;

			}
			.aboutText {
				color: #333;
				font-size: 15px;
				line-height: 20px;
				letterspacing: 1px;
				padding: 5px
				}
	
				.aboutTextheader {
					font-family: garamond;
					font-size:32px;
					letter-spacing: 1px;
					color:#006600;
					}
	
					.about_leftPanel {
						
						width: 225px;
						font-size: 15px;
						line-height: 20px;
						letter-spacing: 2px;
						font-family: garamond;
						border-right: solid 1px #ccc;
						padding: 5px;
						color: #333333;
		
						}
						
							.about_leftPanel a {
								color: #333333;
								text-decoration: none;
							}
							
								.about_leftPanel a:hover {
									
									text-decoration:underline;
								}

/* //////////////////////////        ABOUT NAVIGATION STYLE      	///////////////////////////////// */


						
	#aboutnavigationDiv {  /* Contains Navigation elements */
	
		background-image:url(../images/navigation_gradient.jpg);
		position: absolute;
		left: 540px;
		top: 75px;
		padding: 15px;
		text-align:right;
	
	
	}
	
			#aboutnavigationDiv a {
				
				font-family: Garamond;
				font-size: 24px;
				color: #ffffff;
				letter-spacing: 2px;
				line-height: 35px;
				text-decoration: none;
			
			
		}

					#aboutnavigationDiv a:hover {
						
						color:#1dc64d;
					}


/* //////////////////////////        CONTACT PAGE STYLE      	///////////////////////////////// */
			
			
#contact_contentDiv {  /* This div contains the body content on the splash page*/
	display: block;
	background-image:url(../images/contact.jpg);
	background-repeat: no-repeat;
	height: 750px;
	width: 800px;
	
	}



	
	#contactContent {
		background:url(../images/gradient-white2.jpg);
		position:absolute; 
		background-color:#FFFFFF;
		top: 330px;
		width: 800px;
		height: 230px;
	
		}
		
		
		#contactContent input {
			border: 1px solid #000;
			background-color: #f1f1f1;
		}
		
		#contactContent textarea {
			border: 1px solid #000;
			background-color: #f1f1f1;
			overflow: auto;
		}
		#contactContent table { 
			color:#333333;
		}
	
		.contactContainer {
		
			width: 800px;
			color: #fff;

			}
			.contactText {
				color: #fff;
				font-size: 15px;
				line-height: 20px;
				letterspacing: 1px;
				padding: 5px;
				}
			
			
	
				.contactTextheader {
					font-family: garamond;
					font-size:32px;
					letter-spacing: 1px;
					color:#006600;
					}
	
					.contact_leftPanel {
						width: 300px;
						font-family: Arial, Helvetica, sans-serif;
						color:#333333;
						font-size: 14px;
						line-height: 18px;
						padding-right: 10px;
						padding-top:  5px;
						padding-left: 5px;
						padding-bottom: 5px;
						
					
						}
						
						
/* //////////////////////////        FACE BOX STYLE      	///////////////////////////////// */
						

#facebox .b {
  background:url(../images/facebox/b.png);
}

#facebox .tl {
  background:url(../images/facebox/tl.png);
}

#facebox .tr {
  background:url(../images/facebox/tr.png);
}

#facebox .bl {
  background:url(../images/facebox/bl.png);
}

#facebox .br {
  background:url(../images/facebox/br.png);
}

#facebox {

  width: 100%;
  top: 0;
  left: 0;
  z-index: 150;
  text-align: left;
}

#facebox .popup {
  position: absolute;
  top: 0;
  left: 0;
  z-index:150;
}

#facebox table {
  margin: auto;
  border-collapse: collapse;
}

#facebox .body {
  padding: 10px;
  background: #fff;
  width: 600px;
}

#facebox .loading {
  text-align: center;
}

#facebox .image {
  text-align: center;
}

#facebox img {
  border: 0;
}

#facebox .footer {
  border-top: 1px solid #DDDDDD;
  padding-top: 5px;
  margin-top: 10px;
  text-align: right;
}

#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br {
  height: 10px;
  width: 10px;
  overflow: hidden;
  padding: 0;
}