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

html { overflow: -moz-scrollbars-vertical; }

body {
	text-align: center;
	margin: 0;
	background-color:#FFF;
}

img {
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}


/*===============================================================
Links, unless otherwise specified, have no underlines or other 
decorations until hovered over.
================================================================*/
a {
	outline:none;
	text-decoration:none;
}

a:hover {
	text-decoration:underline;
}

/*===============================================================
Links in the two dark gray boxes are yellow and an underline
appears when the mouse hovers over them. 
================================================================*/

#header a, #left-panel #top a {color:#FCD116; text-decoration:none;}
#header a:hover, #left-panel #top a:hover, #wider-textbox #banner a:hover{text-decoration:underline;}

/*===============================================================
Links in the light gray box in the left panel are purple with an 
underline when the mouse hovers over them.
================================================================*/

#left-panel #lt-gray-box a{color:#603; text-decoration:none;}
#left-panel #lt-gray-box a:hover{text-decoration:underline;}

/*===============================================================
Links in the center text (against the plain white background) are
blue with an underline when the mouse hovers over them.
================================================================*/

#text a, #wider-textbox a, #history-matters-text p a, #history-matters-text ul.text a {color: #36F;text-decoration: none;}
#text a:hover, #wider-textbox a:hover, #history-matters-text p a:hover, #history-matters-text ul.text a:hover {text-decoration: underline;}

/*===============================================================
Unless otherwise specifiec, images have no border
================================================================*/

img {border-style:none;}

/*===============================================================
Structural Elements
================================================================*/

#container {
	width: 810px;  
	background: #FFF;
	margin: 10px auto; 
	text-align: left; 
}

#container2 {                 /* MAGIC LANTERN GALLERY, Getting rid of white extra space on right and left. */
	width: 900px;  
	background: white;
	margin: 10px auto; 
	text-align: left; 
}

#header{
	width:810px;
	padding: 0px;
	margin: 0px;
}

.divider{
	padding:0;
	margin:0;
}

#logo {
	height:70px;
	width:810px;
	background:#BDC4E3;
}

#logo .float-right {
	display:inline;
	float:right;
	display:inline;
	margin:5px 10px 0 0;
}

#logo .float-left {
	display:inline;
	float: left;
}


#image {
	height:200px;
	width:575px;
	display:inline;
	float:left;
	background:#666;
	padding:0;
	margin:0;
}

#message {
	height:200px;
	width:235px;
	background: url(images/ABHS-open-msg.png) #666;
	display:inline;
	float:right;
	margin:0;
	padding:0;
}

#message p {
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:#EDEDED;
	letter-spacing: .1em;
	padding:90px 20px 20px 20px;
	text-align:center;
}

#content{
	width:810px;
	padding: 0px;
	margin: 0px;
}

#text-container {
	background-color:#EDEDED;
	width:575px;
	padding:0;
	margin:0;
}

#right-nav-menu {
	display:inline;
	float:right;
	background:white;
	height:auto;
	padding:0;
	margin:0;
}

/*=============================================================
There are two types of main text areas: a thinner centered one
in the majority of pages (#text) and a wider one that covers 
the left and middle areas (#wider-textbox)
=============================================================*/
#text {
	width:304px; /*300px for IE6*/
	display:block;
	padding:0 18px 10px 18px;
	margin:0 0 0 235px;
	background: #FFF;
	height:100%;
	overflow:hidden;
}

#wider-textbox {
	width:555px;
	display:block;
	padding:0 20px 30px 0;
	margin:0;
	background: #FFF;
}
#text p, #wider-textbox p, #history-matters p, #text li, #wider-textbox li, #history-matters-text ul.text li, table  {
	margin:0;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:#333;
	text-align:justify;
	line-height:22px;
}

#history-matters-text ul.text {
	margin: 0 30px;
	padding: 0 30px;
}

#history-matters-text ul.text li {
	padding:2px 0;
}


#text p, #wider-textbox p, table {
	padding:12px 0;
}

#text ul, #wider-textbox ul, #text ol, #wider-textbox ol {
	margin:0;
	padding:0 0 0 30px;
}

#text li, #wider-textbox li {
	padding:1px 0;
}


#history-matters p{
	padding:8px 30px;
}

#text p em, #text li em, #wider-textbox p em, #wider-textbox li em, #history-matters p em {
	color: #2442AA;
	font-style:normal;
	font-weight:bold;
}

#text p strong, #wider-textbox p strong {
	color:#003;
}





/*======================================================
Tables appear on several pages to display fees.
======================================================*/

table.feetable {border:1px solid #CCC; padding:0; margin:0;}
table td, table th {	
	padding:0; 
	margin:0;
	text-align: left; 
	font-size:11px;
}
table.feetable td, table th, table tr {	
	border:1px solid #CCC;
}
table th {font-size:12px;}
table th.title {
	background-color:#EDEDED;
	text-align:center;
	color:#333
}
table th.head {
	background-color:#FEF154;
	text-align:center;
	color:#333;
	line-height:300%;
}
table em {
	font-style:normal;
	font-weight:bold;
	color:#3381FF
}




/*=============================================================
These are special text styles within the two types of text areas. They 
define various headlines, colored text, indented text, etc.
=============================================================*/


.location {
	padding:0 4px 2px 2px;
	margin:0;
	font-size:10px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	background-color: #EDEDED;
	line-height:160%
}

.location a, .location a:hover {
	color:#000;
}

h1 {
	color: #004990;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-weight: bold;
	line-height: 3;
}

h2 {
	color: #2442AA;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 16px;
}


/*=============================================================
Left Panel elements
=============================================================*/

#left-panel {
	width:235px;
	display:inline;
	float:left;
	background-color:#ededed;
	padding:0;
	margin:0;
}

#left-panel p {
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	letter-spacing: .1em;
	text-align:center;
	margin:0;
}

#left-panel #top {
	height:auto;
	background:#666  top no-repeat;
}

#left-panel #top p {
	color:#EDEDED;
	padding:70px 20px 30px 20px;
	line-height:150%;	
}

#left-panel #top em {
	font-size:18px;
	font-family:Arial, Helvetica, sans-serif;
	font-style:normal;
	line-height:150%;
	color: #BDC4E3;
}

#left-panel #top strong {
	font-size:24px;
	font-family:Arial, Helvetica, sans-serif;
	font-style:normal;
	line-height:24px;
	color: white;
	padding: 0 4px;
}


#left-panel #lt-gray-box {
	height:auto;
	background: #BDC4E3  top no-repeat;
}

#left-panel #lt-gray-box p {
	color:#133247;
	padding:110px 20px 30px 20px;
	line-height:150%;
}

#left-panel #lt-gray-box img, #left-panel #top img {
	width:205px;
	padding:15px;
}

.extras {
	padding:20px 10px;
	vertical-align:bottom;
}

/*===============================================================
The list of staff at all three locations - Mercer, Rochester and 
Valley Forge - has special formatting.
===============================================================*/

#about-staff-list ul {
	list-style:none;
	padding:0px 10px;
	margin: 0;
}

#about-staff-list li {
	margin:0;
	padding:0;
}

#about-staff-list ul ul li strong {
	color: #000;
}

#about-staff-list ul ul li em {
	font-style: normal;
	padding: 0 5px;
}

/*===============================================================
Magic Lantern Photogallery elements
===============================================================*/
#magic-lantern-start {
	background:url(images/magic-lantern-bg.jpg) no-repeat top #666;
	padding:0 205px;
	margin:0;
	text-align: center;
}

#magic-lantern-start-text {
	width:400px;
	padding:0;
	background: #666;
}

#magic-lantern-start-text img.begin{margin:20px 0 20px 250px}
#magic-lantern-start-text img.title{margin:30px 0 40px 60px}


#magic-lantern-start p{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#ededed;
	margin:0;
	padding:8px 40px;
	text-align:justify;
}

#magic-lantern-start p strong{
	color:#FCD116;
}

#begin-button {width:69px; height:19px; position:absolute; z-index:102; margin-top:400px; margin-left:539px}

#magic-lantern {
	width:810px;
	min-height:450px !important;
	background-color:#333;
	padding:0 0 15px 0;
	margin:0;
	text-align: center;
}

#magic-lantern img.slide {
	max-width:400px !important;
	max-height:500px !important;
	padding:0;
	border: 1px solid black;
	margin: 0 0 15px 0;
}

#arrow-l, #arrow-r {width:10px;	height:22px; position:absolute;	z-index:100; margin-top:210px}
#arrow-l {margin-left:50px}
#arrow-r {margin-left:760px}
#home-button {width:69px; height:19px; position:absolute; z-index:101; margin-top: 0px; margin-left:700px}

#magic-lantern p{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:12px;
	letter-spacing:1px;
	color:#ededed;
	margin:0;
	padding:0 205px;
	text-align:justify;
}

#magic-lantern h1 {
	margin:0;
	padding:15px 0 10px 0;
	color:#ededed;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:normal;
	font-size:22px;
	letter-spacing: 2px;
	line-height: 20px;
	text-align:center;
}

#nav-buttons-container {
	height:40px;
	background:#333;
	margin:0;
	padding:0;
}

#nav-buttons {
	margin:0;
	padding:10px 0 0 0;
	text-align:center;
}

#nav-buttons li {
	display: inline;
	list-style-type: none;
	margin:0;
	padding:0;
}

#nav-buttons li a {
	padding: 0 4px;
	margin: 0 4px;
	background-color: #666;
	font-size:9px
}

#image1 #nav_1 a, #image2 #nav_2 a, #image3 #nav_3 a, #image4 #nav_4 a, #image5 #nav_5 a, #image6 #nav_6 a, #image7 #nav_7 a, #image8 #nav_8 a, #image9 #nav_9 a, #image10 #nav_10 a, #image11 #nav_11 a, #image12 #nav_12 a {
	background-color: #999;	/*background-color:#E4BF4E'*/
}

/*==============================================
History Matters page 
==============================================*/
#history-matters {
	background:#999;
	padding:0;
	margin:0;
	text-align: center;
}

#history-matters-text {
	width:574px;
	padding:0 0 20px 0;
	background: #FFF;
	margin:0 0 0 235px;
	border-right:1px solid #999;
}

img.history-matters-logo{
	padding:30px 0 62px 20px;
}

#history-matters h1 {
	padding:0 30px;
	margin:0;
	text-align:right;
	line-height:46px;
	color: #FFF;
	background: #BDC4E3;
	border-top:1px solid #666;
	border-bottom:1px solid #666;
}

img.avail-image {
	display:inline;
	float:left;
	padding-right:10px
}

.forsaletitle {
	color:#006;
	font-size:14px;
	font-weight:700;
}

.forsale-em {
	font-style:italic;
	font-size:14px;
	color:#006;
}

#floating-right-nav-menu {
	width:235px; 
	display:inline;
	float:right;
	clear:none;
	background: white;
	padding:0;
	margin:0;
}


/*==============================================
Membership
==============================================*/
#membership a.join {
	color:#F90;
	font-size:14px;
}


/*==============================================
Maps & Directions
==============================================*/
#maps img.maplink {
	border: 3px solid #2442AA;
	margin-bottom: 20px;
}

#maps img.maplink:hover {
	border: 3px solid #FC0;
}

/*==============================================
Maps & Directions page
==============================================*/
#banner {
	margin:0 10px 15px 25px;
	padding:40px 8px 8px 8px;
	background: url(images/just-beginning.png) no-repeat top #EDEDED;
	border:1px #999;
	border-style:dashed;
	width:200px;
	display:inline;
	float:right;
}

#banner p {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:14px;
	letter-spacing: 0.1em;
	line-height:150%;
	text-align:center;
	margin:0;
	padding: 5px 5px 5px 0;
}

#banner p a {
	font-size:16px;
	font-variant:small-caps;
	padding:0 3px;
	color:#F3B701;
	text-decoration:none;
}
#links #container #content #text-container #wider-textbox p em {
	font-weight: normal;
	color: #000;
	line-height:16px;
	font-size:12px;
}
#links #wider-textbox p {
	padding: 4px 0 4px 10px;
}
#links #link-sub {
	padding: 0 30px;
	margin:0;
}

/*=================================================
Any pages under construction will have an "Under
Construction" heading.
=================================================*/
underconstruction h1 {
	line-height:29px;
	color:#390;
	margin:0;
	padding:0;
}

#underconstruction {
	background-color:#EDEDED;
	padding:15px 0;
	margin:10px 0 0 0;
	text-align:center;
	border:dashed 1px #666;
}


/*==================================================
Donate Template Example page
==================================================*/

b {
	color:#F30;
}

.donate-txt {
	font-size:11px;
}

.abq-button {
	background-color:#39C;
	border:none;
	margin-bottom:10px;
	width:205px;
	height:30px;
	color:#FFF; 
	font-weight:bold;
	font-size:16px;
	text-decoration:none;
}

.abq-button:hover {
	background-color:#67B4D8
}