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




/*------ basic elements -------------------------------------------------------------*/

body { 
	font-family: Arial, Helvetica, sans-serif;
	background: #000  url(../images/background1.png) repeat-x;
	margin: 0px;
	}

p { text-align: left; color: #fff; font-size: .8em; line-height: 1.5em; }
a:link, a:visited { text-decoration: underline; color: #a5bcff;	}
a:hover, a:active { text-decoration: none; color: #ff9600; }
li { text-decoration: none; list-style-type: none; display: block; color: #fff; }



/*------ specific divs --------------------------------------------------------------*/

#container { 
	width: 536px;
	padding-left: 0px; 
	padding-right: 0px; 
    margin: 215px auto 0px 300px; 
	margin-right:auto;
	position: relative;
	z-index: 6;
	}


#intro { width: 356px; 
float: left;
}
#pageHeader { margin-bottom: 25px; }


/* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */

#pageHeader h1 { 
	width: 355px; 
	float: left;
	color:#BBB;
	margin: 0px;
	}

#pageHeader h2 { 
	background: transparent url(../trial/css/h2.gif) no-repeat top left; 
	width: 275px; 
	height: 12px; 
	float: right;
	color:#BBB;
	
	margin: 2px 0 0 0;
	}
#pageHeader h3 { 
	width: 275px; 
	height: 12px; 
	color:#BBB;
	margin: 2px 0 0 0;
	}

#quickSummary {
	background: transparent url(../trial/css/divider01.jpg) no-repeat;
	float: left;
	padding-top: 50px;
	}

#quickSummary p.p1 {
	background: transparent url(../trial/css/summary.gif) no-repeat;
	width: 356px;
	height: 49px;
	margin: 0px 0px 6px 0px;
	}
#quickSummary p.p1 span, #pageHeader h2 span, #pageHeader h1 span 
{ display: none; }

#quickSummary p.p2 { width: 355px; display: block; 
}

#tours {
 text-align: left;
 width: 300;
 margin: 20px 0 0 0px;
}



#tours p {
 margin: 0 0 12px 0;
}

/*-----------------------------------------------------------------------------------*/

#tourdescriptions { width: 356px; float: left; }





#tours h1, #capitol_hill h1, #private_tours h1, #dupont_circle h1, #lafayette_square h1, #georgetown h1, #kids_tour h1
{
 height: 120px; 
 text-indent: -8000px; /*can you figure out what this is doing? Yep - it's pushing the text far off-screen, so that it does not appear on our monitors, but does appear on screen readers. Then we use CSS to replace the text with our custom image headers (below)*/
 margin: 20px 0 0 0;
 padding: 200 0 0 0 ;
}
#tours h1 { background: transparent url(../images/h1tours.png) no-repeat; }
#capitol_hill h1{ background: transparent url(../images/h1capitol_hill.png) no-repeat; }
#private_tours h1 { background: transparent url(../images/h1private_tours.png) no-repeat; }
#dupont_circle h1 { background: transparent url(../images/h1dupont_circle.png) no-repeat; }
#lafayette_square h1 { background: transparent url(../images/h1lafayette_square.png) no-repeat; }
#georgetown h1 { background: transparent url(../images/h1georgetown.png) no-repeat; }
#kids_tour h1 { background: transparent url(../images/h1kids_tour.png) no-repeat; }

#tours h1 span, #capitol_hill h1 span, #private_tours h1 span, #dupont_circle h1 span, #lafayette_square h1 span, #georgetown h1 span, #kids_tour h1 span
{ display: none; }



#links {
	background-repeat:no-repeat;
	position: absolute;
	top: 40px;
	left: -170px;
	margin: 0px;
	padding: 0px;
	z-index:1;
	}

#linkList2 { 
	font-size: 0.70em;
	background: transparent url(../trial/css/paper-bg.jpg) top left repeat-y; 
	padding: 10px; 
	}

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

#links a.c {
    	display: inline;
    	color: #ff9600;
	text-decoration: none;
	font-weight: normal;
	text-transform: capitalize;	
}
#lselect li .dupont, #lselect li .capitol, #lselect li .lafayette, #lselect li .georgetown, #lselect li .kids 
{
	width: 141px;
	height: 40px;
	display: block;
	margin: 0px;
	}
#lselect li .dupont { background: transparent url(../images/signdupont.png) no-repeat; }
#lselect li .capitol { background: transparent url(../images/signcapitol.png) no-repeat; }
#lselect li .lafayette { background: transparent url(../images/signlafayette.png) no-repeat; }
#lselect li .georgetown { background: transparent url(../images/signgeorgetown.png) no-repeat; }
#lselect li .kids { background: transparent url(../images/signkids.png) no-repeat; }

#lselect li .dupont:hover { background: transparent url(../images/signdupontred.png) no-repeat; }
#lselect li .capitol:hover { background: transparent url(../images/signcapitolred.png) no-repeat; }
#lselect li .lafayette:hover { background: transparent url(../images/signlafayettered.png) no-repeat; }
#lselect li .georgetown:hover { background: transparent url(../images/signgeorgetownred.png) no-repeat; }
#lselect li .kids:hover { background: transparent url(../images/signkidsred.png) no-repeat; }


#lselect li .dupont span, #lselect li .capitol span, #lselect li .lafayette span, #lselect li .georgetown span, #lselect li .kids span
{ display: none; }

#order li .tickets
{
	width: 139px;
	height: 123px;
	display: block;
	margin: 0px;
	}
	
#order li .tickets { background: transparent url(../images/ticketskull.png) no-repeat; }

#order li .tickets:hover { background: transparent url(../images/ticketskullbright.png) no-repeat; }

#order li .tickets span
{ display: none; }


#links li a {
	color: #fff;
	text-decoration: none;
	}

#links li a:hover {
	}

#lselect li {
	line-height: 16px; 
	}
#lselect li a {
	font-weight: bold;
	color: #fff;
	display: block;
        text-transform: uppercase;
        text-decoration: none; 
	}

#larchives li, #lresources li {
	line-height: 16px; 
        padding: 1px 0px;
	color: #fff;
	}


/*------ Image Replacement for headings----------------------------------------------*/


#links h3 {
	width: 141px;
	height: 20px;
	display: block;
	margin: 0px;
	}




#links h2.options { background: transparent url(../trial/css/h2_options.png) no-repeat; }
#links h2.support {
	margin-top: 22px; 
	background: transparent url(../trial/css/h2_support.png) no-repeat; 
	}
#links h2.resources {
	margin-top: 22px; 
	background: transparent url(../trial/css/h2_resources.gif) no-repeat; 
	}




#ads {
	width: 141px;
	position: absolute;
	top: 80px;
	left: 400px;
	margin: 0px;
	padding: 0px;
	}


/*------ footer ---------------------------------------------------------------------*/

#footer 
{
	width:720px;
    margin: 30px auto 0px 120px; 
	margin-right:auto;
clear:both;
height:60px;
	padding: 0 0px 20px 0px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	text-align:center;
	color:#fff;

} 
#footer p
{
	text-align:center;
}

#footer a:link, #footer a:visited { 
	margin-right: 6px; 
	color: #ff9600;
	}


/*------ main images -----------------------------------------------------------------*/


#extraDiv1, #extraDiv2, #extraDiv3, #extraDiv3 span, #extraDiv4, #extraDiv5, #extraDiv6, #extraDiv6 span
{ position: absolute;  }


#extraDiv1 { 
	background: url(../images/Storm_clouds.png) repeat-x; 
	top: 0px;
	right: 0px; 
	width: 100%; 
	height: 400px; 
	}

#extraDiv2 { 
	background: url(../images/turqoise_masthead.png) no-repeat; 
		z-index: 8;

	top: 50px;
	left: 10%; 
	width: 480px; 
	height: 170px; 
	}

#extraDiv3 { 
	background: url(../images/narrow_spirit.png) no-repeat right top; 
	z-index: 3;
	top: 100px;
	right: 4%;
	width: 500px; 
	height: 900px;
	}

#extraDiv3 span { 
	background: url(../trial/css/fish_bottom.gif) no-repeat; 
	z-index: 3;
	top: 1000px;
	width: 224px; 
	height: 108px; 
	} 

#extraDiv4 {
	background: url(../images/skyline.png) no-repeat;
	z-index: 3;
	top:80px;
	left: 40%;
	width: 472px;
	height: 200px;
	}

#extraDiv5 {
	background: url(../images/narrow_spirit.png) no-repeat;
	top: 286px;
	left: 7px;
	width: 500px;
	height: 900px;
	}

#extraDiv6 {
	z-index: 2;
	top: 125em;
	left: 0px;
	width: 100%; 
	height: 426px; 
	background: url(../trial/css/seafloor_bg.jpg) repeat-x left bottom;
	}

#extraDiv6 span {
	z-index: 2;
	top: 0px;
	left: 0px;
	width: 633px; 
	height: 426px; 
	background: url(../trial/css/seafloor.jpg) no-repeat;
}