/* James Lilley.com CSS Document */

body {
	margin: 0px;
	font-size: 100%;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	color: #000;
	background: #f6f6f6 url('images/bg-grad.jpg') repeat-x;
	}

#wrapper { 
	margin: 0px auto;
	width: 790px;
	padding: 0px;
	text-align: left;
	}

#header {
	border-top: 15px solid #ff2000;
	border-bottom: 7px solid #ff2000;
	}

#header h1 { height: 82px; width: 500px; margin: 3px 0px; float: left; background: url(images/jl_script_tran.png) 0px 0px no-repeat; }
#header h1 span { display: none; }

#header ul {
	float: right;
	margin: 0px;
	padding: 0px;
	list-style: none;
	position: relative;
	top: 65px;
	right: 0px;
/*	width: 270px; */
	}

#header ul li {
	list-style: none;
	display: inline;
	float: left;
	}
#header ul li a {
	padding: 10px 10px 3px 10px;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 90%;
	text-decoration: none;
	line-height: 160%;
	}

#header ul li a:hover { background-color: #ddd; }

#main {
	margin: 0px;
	}

#announce { margin: 10px 0px 0px; padding: 5px 15px; border: 1px solid #666; background-color: #e3e3e3; }
#announce a { color: #333; padding: 2px; }
#announce a:hover { text-decoration: none; background-color: #eee; }

#content { background-color: #ddd; border: 1px solid #999; margin: 15px 0px 40px; padding: 0px 0px;}

#content h2#nav { margin: 5px 0px; padding: 3px 10px; font-weight: normal; color: #000; font-size: 100%; background-color: #eee; border-width: 1px 0px; border-color: #ccc; border-style: solid;}
#content h2#nav a { color: #000; text-decoration: underline; }
#content h2#nav a:hover { text-decoration: none; }

#content h2 { margin: 5px 0px; padding: 5px 10px; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 180%; color: #000; background-color: #eee; border-width: 1px 0px; border-color: #ccc; border-style: solid; }
#content p { padding: 0px 20px; }
#content p.quote { padding: 0px 40px; font-style: italic; }

#content a { color: #333; text-decoration: underline; }
#content a:hover { color: #333; background-color: #eee; text-decoration: none; }

ul#pics1, ul#pics2 { list-style: none; padding: 0px; margin: 10px 0px 0px 0px; width: 389px; float: left; }
ul#pics1 li, ul#pics2 li { list-style: none; padding: 0px; margin: 0px; }
ul#pics1 li a, ul#pics2 li a { 
	display: block; 
	padding: 5px 0px 5px 175px; 
	line-height: 125px; 
	color: #333;
	font-size: 200%;
	text-decoration: none;
	}
ul#pics1 li#brides a { background: url('images/bridethumb.jpg') 10px 10px no-repeat; }
ul#pics1 li#grooms a { background: url('images/groomthumb.jpg') 10px 10px no-repeat; }
ul#pics1 li#women a { background: url('images/womenthumb.jpg') 10px 10px no-repeat; }
ul#pics2 li#men a { background: url('images/menthumb.jpg') 10px 10px no-repeat; }
ul#pics2 li#families a { background: url('images/familiesthumb.jpg') 10px 10px no-repeat; }
ul#pics2 li#events a { background: url('images/eventsthumb.jpg') 10px 10px no-repeat; }

ul#pics1 li#brides a:hover,
ul#pics1 li#grooms a:hover, 
ul#pics1 li#women a:hover, 
ul#pics2 li#men a:hover, 
ul#pics2 li#families a:hover, 
ul#pics2 li#events a:hover { background-color: #ccc; }

#photo { text-align: center; }
#photo img { margin: 10px auto; border: 10px solid #FFF; }

#selector { margin: 10px 0px; padding: 5px 0px; text-align: center; background-color: #eee; border-width: 1px 0px; border-color: #aaa; border-style: solid; }
#selector a { margin: 0px 3px; }
#selector ul { list-style: none; padding: 0px; margin: 0px auto; width: 350px; }
#selector ul li { list-style: none; padding: 0px; margin: 0px 5px; float: left; }
#selector ul li a { display: block; width: 75px; height: 50px; float: left;  border: none;}

#footer { border-top: 7px solid #ff2000; font-size: 70%; color: #999; text-align: center; padding-top: 5px; }

.clr { clear: both; line-height: 1px; }