HTML {
	height:100%;
	margin-bottom:0.01em;
}

BODY {
	margin-top:0;
	margin-left:0;
	margin-right:0;
	padding:4px;
	border:0;
	font-family:Arial,sans-serif;
	font-size:10pt;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
}

H1 {
	font-family:Verdana,Arial,sans-serif;
	font-size:17pt;
	line-height:105%;
	margin-top:0.3em;
	margin-bottom:11pt;
	color:#433;
}

H2 {
	font-family:Verdana,Arial,sans-serif;
	font-size:13pt;
	line-height:105%;
	margin-top:10pt;
	margin-bottom:7pt;
	color:#433;
}

H3 {
	font-family:Verdana,Arial,sans-serif;
	font-size:11pt;
	line-height:105%;
	margin-top:8pt;
	margin-bottom:4pt;
	color:#433;
}

H4 {
	font-family:Verdana,Arial,sans-serif;
	font-size:10pt;
	line-height:105%;
	margin-top:7pt;
	margin-bottom:2pt;
	color:#433;
}

H5, H6 {
	font-family:Verdana,Arial,sans-serif;
	font-size:9pt;
	font-style:italic;
	line-height:105%;
	margin-top:6pt;
	margin-bottom:1pt;
	color:#322;
}

P {
	margin-top:0pt;
	margin-bottom:7pt;
	font-family:Arial,sans-serif;
	font-size:10pt;
}

TABLE, TR, TD, th {
	font-family:Arial,sans-serif;
	font-size:10pt;
}

th, .thdropdown {
	font-weight:bold;
	font-size:11pt;
	font-style:italic;
	text-align:left;
	vertical-align:top;
}

td {
	vertical-align:top;
}

/*label, input {*/
label {
	display:inline-block;
	padding-top:3px;
}

input {
	margin-top:0px;
	margin-bottom:0px;
}

A:hover {
	color:red;
}

/* Main banner across top of the page */
#banner {
	width:100%;
	height:110px;
	background:url(images/header1.jpg) left top repeat-x;
}

/* Yellow Australian Cemeteries Index writing on the banner */
#banner P {
	padding:8px;
	text-align:center;
	font-size:36pt;
	font-weight:bold;
	font-family:'Times New Roman',Times,serif;
	color:yellow;
	letter-spacing:0.2em;
}

/* The rest of the page */
#main_band {
	clear:both;	/* force it to start below the banner */
}

/* Top of tombstone. Done separately from rest of tombstone since part of it is transparent.
	 Fixed in position except on mobiles.
	 We could use @media to determine if mobile but there are too many variables to check, which is already done at the start of common.php via detect-mobile
	 So instead common.php sets the header id= to either tombstone-header or tombstone-headerm for mobiles
	 NB. This is purely for mobiles that have chosen to view the full site, not for mobiles on the mobile site, which uses commonm.css not this one.
*/

#tombstone-header {
	position:fixed;
}
@media only screen and (max-width:640px){	/* This is just for PC's with shrunken screen, not for mobiles */
	#tombstone-header {
		position:absolute;
	}
}
#tombstone-headerm {
	position:absolute;
}

#tombstone-header, #tombstone-headerm {
	left:4px; top:33px; height:81px; width:150px;
	background:url(images/tombstone-header.gif) left top no-repeat;
}

/* Left side tombstone and menu. Fixed in position when page scrolled so menu always visible
	 but not for mobile devices or small browser display window. See comments above re how we detect mobiles. */
#leftside {
	position:fixed;
}
@media only screen and (max-width:640px){	/* This is just for PC's with shrunken screen, not for mobiles */
	#leftside {
		position:absolute;
	}
}
#leftsidem {
	position:absolute;
}
#leftside, #leftsidem {
/* float:left; doesn't work on old IE versions - ref. Paul Fitz */
	left:4px;
	width:150px;
	height:480px;
	min-height:480px;
	padding-top:70px;
	background:url(images/tombstone-main.jpg) left top no-repeat;
	z-index:9999999;
}

/* Pop-out menu. Up to 5 pop-out levels catered for. Just add extra levels in common.php with class="sub" */
#navlist {
	width:100%;
}

/* remove all the bullets, borders and padding from the default list styling */
#navlist ul {
	padding:0;
	margin:0;
	list-style-type:none;
	margin-bottom:0px;
}

/* style the list items */
#navlist li {
	margin-bottom:0px;
	text-align:center;
	list-style:none;
	font-family:Verdana,Arial,sans-serif;
	font-size:10pt;
	font-weight:bold;
	/* for IE7 */
	float:left;
}

#navlist li.sub {
	background:url(images/arrow.gif) right center no-repeat;
}

#navlist li.sub li {
	background:#E0DACE url(images/tombstone-middle.jpg) right center no-repeat;
	width:150px;
}

/* style the links */
#navlist a {
	display:block;
	width:135px;
	padding:4px 8px 4px 8px;
	color:#444444;
	text-decoration:none;
}

/* For accessibility of the top level menu when tabbing */
#navlist a:active, #navlist a:focus {
	color:#FEFEFE;
	background:#AEA89C;
}
#navlist li:hover {
	position:relative;
}

/* retain the hover colors for each sublevel IE7 and Firefox etc */
#navlist li:hover > a {
	color:#FEFEFE;
	background:#AEA89C;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
#navlist li ul {
	visibility:hidden;
	position:absolute;
	top:-30px;
	/* set up the overlap (minus the overrun) */
	left:120px;
	/* set up the overrun area to allow cursor to wander off the menu without it closing*/
	padding:30px;
	/* this is for IE to make it interpret the overrrun padding */
	background:transparent url(images/transparent.gif);
}

/* for browsers that understand this is all you need for the flyouts */
#navlist li:hover > ul {
	visibility:visible;
}

/* for IE5.5 and IE6 you need to style each level hover */
/* keep the third level+ hidden when you hover on first level link */
#navlist ul a:hover ul ul{
	visibility:hidden;
}
/* keep the fourth level+ hidden when you hover on second level link */
#navlist ul a:hover ul a:hover ul ul{
	visibility:hidden;
}
/* keep the fifth level hidden when you hover on third level link */
#navlist ul a:hover ul a:hover ul a:hover ul ul{
	visibility:hidden;
}

/* make the second level visible when hover on first level link */
#navlist ul a:hover ul {
	visibility:visible;
}
/* make the third level visible when you hover over second level link */
#navlist ul a:hover ul a:hover ul{
	visibility:visible;
}
/* make the fourth level visible when you hover over third level link */
#navlist ul a:hover ul a:hover ul a:hover ul {
	visibility:visible;
}
/* make the fifth level visible when you hover over fourth level link */
#navlist ul a:hover ul a:hover ul a:hover ul a:hover ul {
	visibility:visible;
}

#adsense {
	float:right;
	clear:right;
	margin-left:4px;
}

#adsense2 {
	margin-left:158px;
	padding:4px 4px 4px 4px;
}

#main {
	min-height:292px;
	margin-left:150px;
	padding:4px 4px 4px 12px;
}

#footer_band {
	clear:both;
}

#footer {
	float:left;
	width:100%;
}

#footer P {
	margin-top:0;
	margin-bottom:0;
}

.error {
	color:red;
}
.tablespaced {
	border-spacing:10px 0px;
}
#narrow {
	width:800px;
}

ol li {
	margin-bottom:10px;
}

ul li {
	margin-bottom:4px;
}

/* style button as link. For use in other-sources.php */
button.link {
	background:none;
	border:none;
	padding:0;
	text-decoration:underline;
	display:inline;
	font:inherit;
	font-weight:bold;
	margin:0;
	outline:none;
	color:blue;
	cursor:pointer;
}

/* BDM search styles */
.white {
	border-style:solid;
	border-width:1px;
	border-color:rgb( 148, 191, 217 );
}
.blue {
	background-color:#E8EFF6;
	border-style:solid;
	border-width:1px;
	border-color:rgb( 148, 191, 217 );
}

.colheadnolink {
	border-style:solid;
	border-width:1px;
	border-color:rgb( 148, 191, 217 );
	color:#014C90;
	font-weight:bold;
	text-decoration:none;
}

.colhead {
	color:#014C90;
	font-weight:bold;
	text-decoration:none;
}

.colhead:hover {
	color:#014C90;
	font-weight:bold;
	text-decoration:underline;
}

.hide{
display:none;
}