/**************************************************************
CSS for St.Patrick's site (Ravenchase Adventures)

Created by: Bridgette and Morgan Huff
Media: Screen, projection
Updated: 2/24/2009
-------------------------------------------------------------- */

/* General
-------------------------------------------------------------- */

/* Set global properties */

body {
 	margin: 0 auto;
	padding: 0;
	font: 74%/1em Georgia, "Times New Roman", Times, serif;
	color: #121212;
	background:#3C6630 url(../images/layout/body-bg.jpg) 0 0 repeat-x;
	text-align:center;
 	}
		
		
/* Layout - Content sections in site
-------------------------------------------------------------- */

/* contains general layout elements used in site templates */

#wrapper {
	margin:0 auto;
	padding:0;
	width: 1200px;
	height:1000px;
	background: transparent url(../images/layout/wrapper-bg.jpg) 0 0 no-repeat;
	position:relative;
	}
	
/* set appearance of the masthead */
#branding {
	position:absolute;
	height: 600px;
	width:413px;
	top:130px;
	left:130px;
	margin:0;
	/* set background image in masthead */
	background: transparent url(../images/layout/branding-img.png) top left no-repeat; 
	z-index:25;
	}

	
/* See bottom of css for branding area text rules */
	
 
 /* content area */
	#content {
		margin:0;
		width: 960px;
		}
		
	#content-main {
		position:absolute;
		top:200px;
		right:147px;
		padding:0;
		z-index:50;
		text-align:left;
		}
	
/* Two-column pages
-------------------------------------------------------------- */

	/* set width of main content area */
	.two-column #content-main {
		width: 440px;
		line-height:1.25em;
		}
		
	/* set width of sidebar */
	.two-column #content-secondary {
		float: right;
		clear: right;
		width: 310px;
		}
		
/* Navigation -- Global
-------------------------------------------------------------- */
#nav-global {
	width:660px;
	padding-top:24px;
	position:relative;
	margin:0 auto;
	}
	
#nav-global ul {
	float:left;
	display:inline;
	list-style:none;
	position:relative;
	margin:0;
	padding:0;
	width:660px;
	overflow:hidden;
	}
	#nav-global ul li {
		float:left;
		color:#fff;
		height:25px;
		margin:0;
		padding:0;
		}
	
	#nav-global ul li a {
		text-indent:-9999px;
		font-size:1em;
		text-decoration:none;
		display:inline;
		float:left;
		width:100px;
		height:25px;
		margin:0 30px 0 0;
		padding:0;
		}
		#nav-global ul li a.last {margin:0;}
	#nav-global ul li a:hover {background:none;}
	#nav-global ul li a:focus,
	#nav-global ul li a:active {
		border:0;
		outline:none;
		}
	
	/* links */
	#nav-global li#home a, 
	#nav-global li#game a, 
	#nav-global li#cities a, 
	#nav-global li#about a, 
	#nav-global li#contact a 		
	{background: url(../images/layout/nav-bg.gif); height:25px; text-decoration:none; border:0;}
	
	/* Background img position */
	#nav-global li#home a:link, #nav-global li#home a:visited {
		width:82px;
		background-position:0px 0px;
		}
	#nav-global li#home a:hover, #nav-global li#home a:focus {
		width:82px;
		background-position:0px -25px;
		}
	#nav-global li#game a:link, #nav-global li#game a:visited {
		width:128px;
		background-position:-118px 0px;
		}
	#nav-global li#game a:hover, #nav-global li#game a:focus {
		width:128px;
		background-position:-118px -25px;
		}
	#nav-global li#cities a:link, #nav-global li#cities a:visited {
		width:73px;
		background-position:-286px 0px;
		}
	#nav-global li#cities a:hover, #nav-global li#cities a:focus {
		width:73px;
		background-position:-286px -25px;
		}
	#nav-global li#about a:link, #nav-global li#about a:visited {
		width:85px;
		background-position:-420px 0px;
		}
	#nav-global li#about a:hover, #nav-global li#about a:focus {
		width:85px;
		background-position:-420px -25px;
		}
	#nav-global li#contact a:link, #nav-global li#contact a:visited {
		width:108px;
		background-position:-550px 0px;
		}
	#nav-global li#contact a:hover, #nav-global li#contact a:focus {
		width:108px;
		background-position:-550px -25px;
		}
	
	/* Active Nav */
	body.home #nav-global ul li#home a {background-position:0 -50px;}
	body.game #nav-global ul li#game a {background-position:-118px -50px;}
	body.cities #nav-global ul li#cities a {background-position:-286px -50px;}
	body.about #nav-global ul li#about a {background-position:-420px -50px;}
	body.contact #nav-global ul li#contact a {background-position:-550px -50px;}



/* Text - set rules for text elements
-------------------------------------------------------------- */

/* first item on the page gets no top margin or padding */
.first {margin-top:0; padding-top:0;}
 
	h2 {
		margin: 0 0 15px 0;
		font-size: 1.8em;
		font-weight: normal;
		color:#63753B;
		text-align:center;
		}

	h3 {
		clear: both;
		margin: 1.5em 0 .5em 0;
		padding-bottom: .2em;
		font-size: 1.5em;
		line-height: 1.4em;
		font-weight: bold;
		}
		
	h4 {
		margin: 1.5em 0 .3em 0;
		font-size: 1.3em;
		font-weight: bold;
		}
		
	h5 {
		margin: 1.5em 0 0 0;
		font-size: 1em;
		font-weight: bold;
		}
	
	p {
		margin: 0 0 1.5em 0;
		font-size: 1.3em;
		line-height: 1.4em;
		}
		
	blockquote {
		display:block;
		margin: 0 30px .5em 30px;
		font-size:1.3em;
		width:100%;
		}
	blockquote p {margin-bottm:1em;}
	blockquote cite {text-align:right;}
		
	/* captions */
		
	.caption {
		font-size: 1.1em;
		line-height: 1.5em;
		color: #666;
		}
	
/* Lists - ul, ol and dl
-------------------------------------------------------------- */

ul, ol {
	margin: 0 0 15px 0;
	padding: 0;
	font-size: 1.3em;
	line-height: 1.4em;
	}
	
	ul ul, ul ol, ol ol, ol ul {
		font-size: 1.0em;
		}
		
	ul li {
		margin: 5px 0;
		padding: 0 0 0 30px;
		list-style: none;
		background: url(../images/layout/bullet.gif) no-repeat 18px 0.65em;
		}
	 
	ol li {
		margin: 5px 0 5px 30px;
		}
	 
	dl {
		margin: 0 0 15px 0;
		line-height: 1.4em;
		}
		
	dt {
		margin: 0 0 3px 0;
		font-size: 1.2em;
		font-weight: bold;
		}
		
	dd {
		margin: 0 0 15px 0;
		font-size: 1.3em;
		line-height: 1.4em;
		}
	
/* Links
-------------------------------------------------------------- */

a:link, a:hover, a:active, a:visited {padding-bottom:.1em; text-decoration:none;}

a:link, a:visited {
	color: #642A0A;
	font-weight: bold;
	border-bottom: 1px solid #642A0A;
	}
		
	a:hover {
		color: #AE5105;
		background: #9ABFD3;
		border-bottom: 1px solid #9ABFD3;
		}
		
	a:active {
		color: #b31b1b;
		border-bottom: 1px solid #ae4f0c;
		border-color: #365C70;	
		outline:none;
		}
	
/* Content - Secondary (in sidebar on two-column page)
-------------------------------------------------------------- */

#content-secondary {}
	
	/* Register now box */
	#content-secondary div.register {
		position:relative;
		float:left;
		background:transparent url(../images/layout/registernow-box.gif) 0 0 no-repeat;
		margin:30px 0 0 0;
		padding:0;
		width:282px;
		height:302px;
		}
		
	/* Register now button */
	div.register .btn {
		position:absolute;
		background:transparent url(../images/layout/register-btn.gif) 0 0 no-repeat;
		background-position:0 0;
		text-decoration:none;
		text-indent:-9999px;
		bottom:25px;
		left:55px;
		width:146px;
		height:33px;
		border:0;
		}
		/* button hover */
		div.register a.btn:hover {background-position:-146px 0;}
	
	/* Save Your City box */
	#content-secondary div.savecity {
		position:relative;
		float:left;
		background:transparent url(../images/layout/save-city.gif) 0 0 no-repeat;
		margin:30px 0 0 0;
		padding:0;
		width:235px;
		height:305px;
		}
	
	/* secondary section content -- IF NEEDED */
	.secondary-section {
		margin: 0 0 50px 0;
		padding: 0 30px;
		}
		
	#secondary-section-first {
		margin-top: 25px;
		}
		
	#content-secondary h2 {
		margin: 0 0 10px 0;
		font-size: 1.1em;
		font-weight: bold;
		}
		
	#content-secondary p {
		margin: 0 0 10px 0;
		font-size: 1.1em;
		line-height: 1.5em;
		}
		
	#content-secondary ul {
		margin: 0 0 10px 0;
		font-size: 1.1em;
		}
		
	#content-secondary ul li {
		padding-left: 12px;
		background-position: 0 0.65em;
		}
 
/* Main Images - img used in content-main
-------------------------------------------------------------- */

img {border: 0;}
 
 /* add photo border */
 .photo {
 		border:1px solid #c7c7c7;
		padding:3px;
		background:#fff;
		}
		
	.right {
		margin: 5px 0 15px 25px;
		float: right;
		border:1px solid #c7c7c7;
		padding:3px;
		background:#fff;
		}
		
	.left {
		margin: 5px 25px 15px 0;
		float: left;
		border:1px solid #c7c7c7;
		padding:3px;
		background:#fff;
		}
	
/* Secondary Images - img used in content-secondary (sidebar)
-------------------------------------------------------------- */

.secondary-photo {
	margin: 0 0 50px 0;
	}

	#content-secondary .secondary-photo .caption {margin: 10px 15px 0 15px;}

 
/* Tables
-------------------------------------------------------------- */

table, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1em;
	}
	
	table {
		margin: 15px 0;
		caption-side: bottom;
		}
		
	th {
		padding: 0 15px 5px 15px;
		font-weight: normal;
		text-align: left;
		color: #888;
		}
		
	td, tbody th {
		padding: 5px 5px;
		font-size: 1.1em;
		line-height: 1.5em;
		vertical-align: top;
		}
		
	tbody th {
		font-weight: bold;
		color: #222;
		text-align: right;
		}
		
	.row1, .row1 td, .row1 th {
		background: #fff;
		} 
		
	.row2, .row2 td, .row2 th {
		background: #fafaf7;
		}
		
	tfoot td {
		font-weight: bold;
		}
	
	caption {
		margin: 0 0 15px 0;
		text-align: left;
		color: #888;
		font-size: 1.1em;
		}
		
/* Custom Classes
-------------------------------------------------------------- */
 
.small {
		font-size: 1em;
		font-weight: bold;
		}

.small2 {
		font-size: 1.1em;
		}

.red {
		color:#CC0000;
		font-weight: bold;
	}

/* Footer
-------------------------------------------------------------- */

#footer {
	display:block;
	width:1050px;
	height:50px;
	margin:0 auto;
	margin-top:820px;
	padding:1em 0 2em 0;
	width:960px;
	}
		
	/* footer links */
	#footer a,#footer a:link,#footer a:visited,#footer a:hover,#footer a:active 
		{display:block; border:0; text-decoration:none; background:none; width:1050px; height:50px;}

/* Hide elements from General Users 
   * content is visable to non-css and screen reader users
-------------------------------------------------------------- */

	/* Hide "skip to content" link */
	#skipnav {
		position: absolute;
		top: -1000em;
		left: -1000em;
		}
	
	/* Hide horizontal rules */	
	hr {display: none;}
	
	
/* HIDE branding text */

	body.home #branding h1#site {
		float:left;
		width:960px;
		height:400px;
		margin:0;
		padding:0;
		color:#333;
		}
	
	body.home #branding h1#site a.homelink,
	body.home #branding h1#site a.homelink:link,
	body.home #branding h1#site a.homelink:visited,
	body.home #branding h1#site a.homelink:hover,
	body.home #branding h1#site a.homelink:active {
		display:block; 
		position:absolute;
		top:0; 
		left:0; 
		width:960px; 
		height:400px; 
		background:none;
		text-decoration:none; 
		text-indent:-9999px;
		z-index:10;
		border:0;
		
		}
		
/* hide text for subpage branding */
	body.sub #branding h1#site {
		float:left;
		width:960px;
		height:220pxpx;
		margin:0;
		padding:0;
		color:#333;
		}
	
	body.sub #branding h1#site a,
	body.sub #branding h1#site a:link,
	body.sub #branding h1#site a:visited,
	body.sub #branding h1#site a:hover,
	body.sub #branding h1#site a:active {
		display:block; 
		position:absolute;
		top:0; 
		left:0; 
		width:960px; 
		height:220px; 
		background:none;
		text-decoration:none; 
		text-indent:-9999px;
		z-index:10;
		border:0;
		
		}
		
/* Cities list */

ul.cities {
	font-size:16px;
	font-weight:700;
	width:521px;
	margin-bottom:1.5em;
	}
ul.cities li {margin-left:0; padding-left:0;}

ul.cities li a, ul.cities li a:visited, ul.cities li a:hover {
	display:block;
	padding:5px;
	border:0;
	text-decoration:none;
	background: url(/images/layout/li_arrow.png) 15px 7px no-repeat;
	padding-left:40px;
	}
	
ul.cities li a:hover {
	color:#273813
	display:block;
	padding:5px;
	background:#B3D090 url(/images/layout/li_arrow_hover.png) 15px 7px no-repeat;
	border:0;
	padding-left:40px;
	}
	
.style1 {
	font-size: small;
	font-weight: bold;
	color: #C42D1C;
}

/* Extras 
#photo1 {
position: absolute;
top: 0px;
left: 0px;
width: 367px;
height: 197px;
background: url(../images/extras/headergraphic.png) top left no-repeat;
z-index:3;
} */

#photo2 {
position: absolute;
top: 340px;
right: -50px;
width: 145px;
height: 140px;
background: url(../images/extras/clover.png) top left no-repeat;
z-index:4;
}