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

html {
min-height: 100%;					
}

body {
	min-height: 100%;
	text-align: center;
	margin: 0pt;
}

#container{							/* Holds all the content -- the master container. */				
	height: auto;					
	height: 100%;					/* This added height property is necessary for IE */
	min-height: 100%;				/*We can set this height and it will work bcuz parents "HTML" and "body" also have a matching height. */
	margin: 0 auto;
	padding: 0px;
	text-align: left;
	position: relative;
	background: url(../mccall/graphics/content-backing.jpg) repeat-y; /*Background image for the page content */
	}

/*---------------------- HEADER -----------------------*/	
#header{
	width: 900px;
	height: 140px;
	margin: 0 auto;
	}
	
#headercol1{
	float: left;
	width: 549px;
	height: 140px;
	background: url(../graphics/logo-and-title-large.jpg);
	
	}
/*---------------------- MENU -----------------------*/	
#headercol2menu{
	float:left;
	width: 351px;
	height: 140px;
	}
	
#headercol2menu a {
display: block;
height: 0;
padding-top: 140px;			/* This padding makes the rollovers visible -- should be the height of the r/o images */
}

#headercol2menu ul{
	margin: 0px;
	padding: 0px;
}

#headercol2menu li{
	float:left;
	margin: 0;
	padding: 0;
	list-style-type: none;
	}

#headercol2menu li.menu1{
	width: 83px;
	height: 140px;
	background-image: url(../graphics/menu/menu_01.jpg);}
#headercol2menu a#Home:hover{background: url(../graphics/menu/menu-over_01.jpg);}


#headercol2menu li.menu2{
	width: 114px;
	height: 140px;
	background-image: url(../graphics/menu/menu_02.jpg);}
#headercol2menu a#Membership:hover{background: url(../graphics/menu/menu-over_02.jpg);}


#headercol2menu li.menu3{
	width: 75px;
	height: 140px;
	background-image: url(../graphics/menu/menu_03.jpg);}
#headercol2menu a#About:hover{background: url(../graphics/menu/menu-over_03.jpg);}


#headercol2menu li.menu4{
	width: 79px;
	height: 140px;
	background-image: url(../graphics/menu/menu_04.jpg);}
#headercol2menu a#Events:hover{background: url(../graphics/menu/menu-over_04.jpg);}


#headercol2menu li.menu5{
	width: 71px;
	height: 140px;
	background-image: url(../graphics/menu/menu_05.jpg);}
#headercol2menu a#Links:hover{background: url(../graphics/menu/menu-over_05.jpg);}


#headercol2menu li.menu6{
	width: 65px;
	height: 140px;
	background-image: url(../graphics/menu/menu_06.jpg);}
#headercol2menu a#Press:hover{background: url(../graphics/menu/menu-over_06.jpg);}


#headercol2menu li.menu7{
	width: 91px;
	height: 140px;
	background-image: url(../graphics/menu/menu_07.jpg);}
#headercol2menu a#Contact:hover{background: url(../graphics/menu/menu-over_07.jpg);}

/* Styles to keep the current page's menu item always active -- corresponds with custom body id on each page.
Each style applies the rules only when the body id is "x" and only to the unique headercol2menu a id. Otherwise,
the style is ignored.*/

#home #headercol2menu a#Home {
background: url(../graphics/menu/menu-over_01.jpg);}

#membership #headercol2menu a#Membership {
background: url(../graphics/menu/menu-over_02.jpg);}

#about #headercol2menu a#About {
background: url(../graphics/menu/menu-over_03.jpg);}

#events #headercol2menu a#Events {
background: url(../graphics/menu/menu-over_04.jpg);}

#links #headercol2menu a#Links {
background: url(../graphics/menu/menu-over_05.jpg);}

#press #headercol2menu a#Press {
background: url(../graphics/menu/menu-over_06.jpg);}

#contact #headercol2menu a#Contact {
background: url(../graphics/menu/menu-over_07.jpg);}



/*---------------------- HEADER PICS -----------------------*/	
#headerpic1{
	clear: both;
	width: 900px;
	height: 250px;
	margin-top: 30px;
	margin-left: auto;
	margin-right: auto;
	background: url(../graphics/header-pic-1.jpg) 
	}	
		


#content{
	width: 900px;
	margin: 0 auto;
	clear: both;
	}

	
	
/*---------------------- LEFT COLUMN -----------------------*/
#colleft{
	float: left;
	width: 290px;
	padding-left: 10px;
	padding-right: 30px;
	padding-top: 23px;
	padding-bottom: 60px;
	margin: 0 auto;
	}
	
#colleft p{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	line-height: 160%;
	text-align: left;
	color: #4d4e52;
}

#colleft h3{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	color: #915828;
	font-weight: normal;
	margin-bottom: -10px;
}

#colleft li{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	line-height: 140%;
	color: #4d4e52;
	list-style-type: none;
	padding-left: 20px;			/* Determines how far the image is offset to the left of the text. */
	margin-top: 12px;
	margin-left: -16px;			/*Moves the whole line left or right */
	background-image: url(../graphics/blue-bullet.gif);
	background-repeat: no-repeat;
	background-position: 0px 5px;	/* First value moves bg image left/right, second value moves it up/down */
	font-style: oblique;
}
	
/*---------------------- RIGHT COLUMN -----------------------*/

#colright{
	float:right;
	width: 560px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 60px;
	margin: 0 auto;
	}
	
#colright p{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	line-height: 160%;
	text-align: left;
	color: #4d4e52;
}

#colright h3{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 24px;
	color: #5391c4;
	font-weight: normal;
	margin-bottom: -10px;
}

#colright h4{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	color: #5391c4;
	font-weight: normal;
	font-style: normal;
	letter-spacing: .1em;
}
	
#colright li{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	line-height: 160%;
	color: #4d4e52;
	list-style-type: none;
	padding-left: 20px;			/* Determines how far the image is offset to the left of the text. */
	margin-top: 12px;
	margin-left: -10px;			/*Moves the whole line left or right */
	background-image: url(../graphics/blue-bullet.gif);
	background-repeat: no-repeat;
	background-position: 0px 5px;	/* First value moves bg image left/right, second value moves it up/down */
	font-style: oblique;
}

#colright .ptitle {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	line-height: 160%;
	text-align: left;
	color: #4d4e52;
	font-weight: bold;
	}
	
#colright .specialeventborder {
	width: 560px;
	padding: 6px;
	overflow: auto;
	background-color: #739ebd;
}	

#colright .specialevent {
	width: 546px;
	border: 1px solid #FFFFFF;
	padding: 6px;
	background-color: #FFFFFF;
	overflow: auto;
	position:relative;
	background-image: url(../graphics/special-event-backing.jpg);
	background-repeat: repeat-x;
}	

#colright .eventcol1 {
	width: 340px;
	float: left;
	border-right: 1px dotted #739ebd;
}

#colright .eventcol2 {
	width: 195px;
	padding-left: 10px;
	float: right;
}


/*---------------------- LEFT & RIGHT COLUMN LINKS -----------------------*/


#colleft a:link, #colright a:link{
	font-style: oblique;
	color: #c07f00;
	text-decoration: none;	
	}
	
#colleft a:visited, #colright a:visited{
	font-style: oblique;
	color: #bd9c5a;
	text-decoration: none;
	}

#colleft a:hover, #colright a:hover{
	font-style: oblique;
	color: #dc9200;
	text-decoration: underline;
	}
	
	
/*---------------------- FOOTER -----------------------*/

#footerbacking{
	width: 100%;
	margin: 0;
	clear: both;
	height: 210px;
	background: url(../graphics/footer-background.jpg) repeat-x;
	}
	
	
#footercontent{
	margin: 0 auto;
	width: 900px;
	height: 210px;
	background:url(../graphics/footer-live-background.jpg);
	}	

/*---------------------- FOOTER LEFT COLUMN -----------------------*/
	
#footercolleft{
	float: left;
	width: 290px;
	padding-left: 10px;
	padding-right: 30px;
	padding-top: 20px;
	background-image: url(../graphics/footer-divider.gif);
	background-repeat: no-repeat;
	background-position: 300px 25px;
	}
	
#footercolleft p{
font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	line-height: 160%;
	text-align: left;
	color: #43749d;
}	

/*---------------------- FOOTER RIGHT COLUMN -----------------------*/	
		 
#footercolright{
	float: right;
	width: 560px;
	padding-top: 10px;
	padding-right: 10px;
	text-align: center;
	}
	
#footercolright p{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	color: #43749d;
}	

#footercolright h3{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	line-height: 160%;
	color: #43749d;
}	

#footercolright h4{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	line-height: 160%;
	color: #43749d;
	font-weight: normal;
}	


/*---------------------- FOOTER LINKS -----------------------*/	

#footercolleft a:link, #footercolright a:link{
	font-style: oblique;
	color: #995aab;
	text-decoration: none;	
	}
	
#footercolleft a:visited, #footercolright a:visited{
	font-style: oblique;
	color: #927a99;
	text-decoration: none;
	}

#footercolleft a:hover, #footercolright a:hover{
	font-style: oblique;
	color: #7f2d96;
	text-decoration: underline;
	}

/*---------------------- FORM STYLING -----------------------*/	

.searchfield {
	height: 24px;
	width: 200px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #43749d;
	border: 1px solid #5391c4;
	padding-top: 2px;
	padding-right: 8px;
	padding-left: 8px;
	outline: 0;
	text-align: left;
	background-color: #fbf6e4;
	background-repeat: no-repeat;
	vertical-align: middle;
	}

.searchsubmit {
	width: 22px;
	height: 22px;
	border: 0;
	background: url(../graphics/forms/search-submit-1.jpg);
	left: -9000px;
	cursor: pointer;
	margin-left: 5px;
	}