/* CSS Document */
#flash1{
	text-align:left;
	padding-top:15px;
	margin-left:10px;
	width:460px;
	height:83px;
}
#flash2{
	width:775px;
	height:125px;
}
#flash3{
	text-align:left;
	padding-top:20px;
	margin-left:80px;
	width:425px;
	height:78px;
}
body{
	background:url(../images/background.png) repeat;
	font-family:Verdana;
 
}

#container{
	background-image:url(../images/container.png);
	width:772px;
	height:799px;
	
}


#container_down{
	background-image:url(/images/container_down.png);
	background-repeat:no-repeat;
	background-position:center;
	width:772px;
	height:193px;
	margin:0px;
}

.navigation_bar{
	font-size:11px;
	color:#FFFFFF;
	font-weight:bold;
	text-decoration:none;
}

.navigation_bar a{
	color:#FFFFFF;
	text-decoration:none;

}

.navigation_bar a:hover{
	color:#CC6600;
	text-decoration:none;
}

.menu_bar{
	font-size:10px;
	color:#FFFFFF;
	font-weight:bold;
	left: 797px;
	top: 150px;
	width: 112px;
	height: 79px;
	
}

.gallery{
	height:380px;
	max-height:380px;
	width:600px;
	overflow:auto;
	color:#FFFFFF;
	font-size:12px;
	text-align:justify;
	text-decoration:none;
	font:trebuchet ms, arial, sans-serif;
	border:2px solid;
	border-color:#3390CB;
	background-image:url(../images/back_gallery.png);
	background-repeat:repeat;
	
}
.gallery a:hover{
	color:#9E0F0F;
}


/* CSS Document */

/*Em`s applied the width of the menu to the "container" div ~ <div id="menu">, that way we can forget about IE's Box Model problems as all block elements inside this will naturally fill the container's width by default, even if borders are used on internal elements.*/
#menu {
	width:120px;
	background: #31689F;
	top: 185px;
	height: 172px;
	left: 772px;
	z-index:auto;
}

/*remove the Bullets and Indents which browsers naturally apply to <ul> elements by default. Both padding and margin require to be set to zero as different browsers create the indent using either of these properties.*/
#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align:center;
	line-height:15px;
}

/* make the <h2> headings and the <a> anchors appear in the same size text and with borders but with slightly differing colors to differentiate between the two */
#menu a, #menu h2 {
	font: bold 11px/16px arial, helvetica, sans-serif;
	display: block;
	margin: 0;
	padding: 2px 3px;
	border-width: 1px;
	border-style: solid;
	border-color:#FFFFFF;

}

#menu h2 {
	color: #FFFFFF;
	background: #31689F;
	text-transform: uppercase;
}

#menu a {
	color: #FFFFFF;
	background:#31689F;
	text-decoration: none;
}

#menu a:hover {
	color: #a00;
	background: #31689F;
}

/* Positioning the Pop Outs */
#menu ul ul ul {
	position: absolute;

}

/*shows all the popouts in their correct position, remember to view with a non-IE browser.*/

#menu li {
	position: relative;

}

#menu li a{
	color:FFFFFF;
	background-color:#F9AF1A;
	width:120px;
}
#menu li a:hover{
	color:#E8B011;
}

	

#menu ul ul ul {/*This is where you change the position of the rollout menu "inherit" if wanted to scroll down, absolute if wanted right*/
	position: absolute;
	top: 0;
	left:-100%;

}

/*hide all those "pop out" menus using the display property.*/
div#menu ul ul ul {
	display: none;

}


/*Now to get them re-appear we want to declare that when a second level <li> element is hovered over we want it's child <ul> to appear.*/
div#menu ul ul li:hover ul{
	display: block;


}


/*So we leave what we have but now tell it that we want to hide any <ul>'s that are two or more descendant children of the hovered <li>*/

/*So we take the rule that we just used to display the lists div#menu ul ul li:hover ul and add a second <ul> to the end of it making, div#menu ul ul li:hover ul ul and add that to the display: none; rule.*/
div#menu ul ul ul,
div#menu ul ul li:hover ul ul{
	display: none;


}

div#menu ul ul li:hover ul{
	display: block;

}


/* here we hide the deepest levels...so they show up only the 2nd level
div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}*/

/*div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
*/
	div#navigation {
	text-align: center;
	font-family: tahoma, arial, helvetica, sans-serif;
	font-size: 0.8em;
	margin: 1ex 0 1ex 0;
}

div#navigation table {
	text-align: center;
	margin: 0 auto 0 auto;
}

div#navigation td.previous {
	text-align: left;
	width: 100px;
}

div#navigation td.index {
	text-align: center;
}

div#navigation td.next {
	text-align: right;
	width: 100px;
}

div#navigation td.thumbcell {
	width: 100px;
	border-style: solid;
	border-color: #D7D3C8;
	border-width: 1px;
	text-align: center;
	vertical-align: middle;
	padding: 10px;
}

div#navigation td.thumbcell img {
	border-style: none;
}

div#navigation td.selected {
	border-style: outset;
	border-width: 2px;
}

div#navigation span.home {
	display: block;
	padding-bottom: 1em;
}

/* Photograph */
div#photograph {
	text-align: center;
	margin: 1ex 0 1ex 0;
}

div#photograph img {
	margin: 0 auto 0 auto;
	border-style: solid;
	border-color: #800000;
	border-width: 1px;
}	

h1{
	font-family:Georgia;
	font-size:16px;
	font-weight:bold;
}

h2 {
	font-size:14px;
	font-weight:bold;
}

h3{
	font-size:14px;
	font-weight:bold;
}