/*
Royal Navy Admirals of the Dreadnought Era Web Page Stylesheet
Design by F.W. Allen & P.A. Bevand
Date originally created Aug 2007
This stylesheet also incorporates a drop down menu based upon the work of Stu Nicholls of the excellent www.cssplay.co.uk/ website
*/

/* BODY - controls the appearance of all basic text */
body{
	font-family: Arial,sans-serif;
	color: #000;
	line-height: 1.15;
	margin: 0px;
	padding: 0px;
	background: #fff;
}

/* HEADER components- controls the appearance of the header section on every website page */
#header{
	height:150px;
	left:0px;
0	top:0px;
	padding:0px;
	overflow: hidden;
	min-width: 750px;
	background-image: url(../images/header-m.gif);
}
#header-l{
	float: left;
	margin:0;
	padding:0;
	background-image: url(../images/header-l.gif);
	width: 350px;
	height: 150px;
	visibility: visible;
}
#header-r{
	float: right;
	margin:0;
	padding:0;
	background-image: url(../images/header-r.jpg);
	width: 275px;
	height: 150px;
	visibility: visible;
}

/* LAYER1- Creates a black background behind the CSS drop down menu on every website page */
#Layer1 {
	position:absolute;
	width:100%;
	height:16px;
	z-index:1;
	visibility: visible;
	background-color: #000;
}

/* CONTENT components- controls the appearance of the text in the main data portion of every website page */
#content{
	height:100%;
	background: url(../images/background.gif);
	padding:15px;
	font-size: 80%;
	whitespace: 0;
	min-width: 750px;
	background-repeat: repeat-y;
	background-color: #fff;
	background-position: 50% 0%;
}
#content a:link, #content a:visited {
	color: #0066ff;
	font-weight: normal;
	text-decoration:none;
}
#content a:hover {
	text-decoration: underline;
	font-weight: bold;
	color: #ff0000;	
}

/* PAGENAV-  controls the appearance of the section links at the top and bottom of multi-section website article pages.  Used when required. */
#pagenav{
	margin: 0px;
	padding: 0px;
	text-decoration: none;
	font-weight: normal;
	color: #666;
	font-size: 80%;
	text-align: center;
}
#pagenav a:link, #pagenav a:visited {
	text-decoration:none;
	font-weight: normal;
	color: #0033cc;
}
#pagenav a:hover {
	color: #009900;
	text-decoration: underline;
}

/* VARIOUS CONTENT- The following help position text and photos. AMPTEXT is used for small boxes with interesting tidbits or special-emphasis links for interesting articles. amptext1 aligns to the left, amptext2 to centre and amptext3 to the right. AMPPHOTO is used for small boxes with interesting photos and links. ampphoto1 aligns to the left, ampphoto2 to centre and ampphoto3 to the right */
#contleft{
	float: left;
	margin:0;
	padding:0;
	width: 49%;
}
#contleft a:link, #contleft a:visited a:hover {
	line-height: 1.33;
}

#contright{
	float: right;
    margin:0;
	padding:0;
	width: 49%;
}
#contright a:link, #contright a:visited a:hover {
	line-height: 1.33;
}

#amptext1{
	font-size: 90%;
	text-align: center;
	color: #000066;
	padding: 5px 5px;
	margin: 0px 5px 0px 0px;
	width: auto;
	float: left;
	background-color: #ffffff;
	border-width: 2px;
	border-color: #7b99b7;
	border-style: solid;
}

#amptext2{
	padding: 5px 10px;
	position: 0 50%;
	width:auto;
}

#amptext3{
	font-size: 90%;
	color: #000166;
	padding: 5px 5px;
	margin: 0px 0px 0px 5px;
	width: auto;
	float: right;
	background-color: #ffffff;
	border-width: 2px;
	border-color: #7b99b7;
	border-style: solid;
}

#ampphoto1{
	font-size: 90%;
	text-align: center;
	color: #000066;
	padding: 0px;
	margin: 0px 5px 0px 0px;
	width: auto;
	float: left;
}

#ampphoto2{
	font-size: 90%;
	text-align: center;
	color: #000066;
	padding: 0px;
	margin: 0px 5px;
	width:auto;
	float: left;
}

#ampphoto3{
	font-size: 90%;
	text-align: center;
	color: #000066;
	padding: 0px;
	margin: 0px 0px 0px 5px;
	width: auto;
	float: right;
}

#colleft{
	float: left;
	width: 23%;
	margin: 0px;
	padding: 0px 10% 0 5%;
}
#colright{
  float:right;
	width: 23%;
	padding: 0px 5% 0 10%;
}
#colmid{
  float: left;
  width: 23%;
}

/* FOOTER components- controls the appearance of the bottom menu on every website page */
#footer{
	height:44px;
	background-image: url(../images/footer-bg.gif);
	min-width: 750px;
	text-align: center;
	font-size: 75%;
}
#footer a:link, #footer a:visited {
	color: #0066ff;
	text-decoration:none;
	font-weight: normal;
}
#footer a:hover {
	text-decoration: underline;
    font-weight: bold;
	color: #ff0000;
}

/* CAPTION-  controls the appearance of all image and photo captions */
.caption {
	font-size: 90%;
	color: #660000;
}

/* DATE-  is used for each page's 'Updated' date */
.date {
	font-size: 75%; 
	color: #000000;
}

/* H1- controls the appearance of the page title text in the content div on every page */
.h1 {
	font-size: 140%;
	font-weight: bold;
	color: #00509f;
	text-transform: uppercase;
}

/* H2- controls the appearance of the paragraph titles in the content div on every page */
.h2 {
	font-size: 120%;
	font-weight: bold;
	color: #003f7d;
}

/* H3-  controls the appearance of list items when used within the content div */
.h3 {
	font-size: 110%;
	font-weight: bold;
	color: #000019;
}
/
* H3GREY is a grey version of h3. Used for placeholders in lists within the content div */
.h3grey {
	font-size: 110%;
	font-weight: bold;
	color: #999;
}

/* H3WHITE- is a white version of h3. Use as needed */
.h3white {
	font-size: 110%;
	font-weight: bold;
	color: #fff;
}

/* H4- controls the appearance of small list items when used within the content div */
.h4 {
	font-size: 100%;
	font-weight: bold;
	color: #3366cc;
}

/* H4WHITE- is a white version of h4. Used for the section title, above the page title within the intro div */
.h4white {
	font-size: 100%;
	font-weight: bold;
	color: #fff;
}

/* LINETHRU- Basic text, but with a line through it. Seldom used, but present in some ADM files */
.linethru {
	font-size: 100%;
	text-decoration: line-through;
}

/* TABLE DEFINITIONS */

/* td.thac- used in the Section title. It uses a light blue background, white font and h2 sized text */
td.thac{
	border-style: solid;
	border-width: 1px 1px 0px 1px ;
	border-color: #6699cc;
	background-color: #6699cc;
	font-size: 130%;
	font-weight: bold;
	color: #fff;
}

td.thacbr{
	border-style: solid;
	border-width: 1px 1px 1px 1px ;
	border-color: #6699cc;
	background-color: #6699cc;
	font-size: 130%;
	font-weight: bold;
	color: #fff;
}



/* td.thal- used in the Section title. It uses a light blue background, white font and h2 sized text */
td.thal{
border-style: solid;
border-width: 1px 1px 0px 1px ;
border-color: #6699cc;
background-color: #6699cc;
font-size: 130%;
font-weight: bold;
color: #fff;
text-align: left;
}

/* td.ac- used cell content that is centred and NOT the bottom row or RIGHT HAND / ONLY column*/
td.h3ac{
	border-style: solid;
	border-width: 1px 0px 0px 1px ;
	border-color: #6699cc;
	font-size: 110%;
	font-weight: bold;
	color: #000019;
}

/* td.ac- used cell content that is left align and NOT the bottom row or RIGHT HAND / ONLY column*/
td.h3al{
	border-style: solid;
	border-width: 1px 0px 0px 1px ;
	border-color: #6699cc;
	font-size: 110%;
	font-weight: bold;
	color: #000019;
	text-align: left;
}



/* td.ac- used cell content that is centred and NOT the bottom row or RIGHT HAND / ONLY column*/
td.h3acbr{
	border-style: solid;
	border-width: 1px 1px 0px 1px ;
	border-color: #6699cc;
	font-size: 110%;
	font-weight: bold;
	color: #000019;
}

/* td.h3albr- used cell content that is centred and NOT the bottom row or RIGHT HAND / ONLY column*/
td.h3albr{
border-style: solid;
border-width: 1px 1px 0px 1px ;
border-color: #6699cc;
font-size: 110%;
font-weight: bold;
color: #000019;
text-align: left;
vertical-align: top;
}





/* td.h3albr- used cell content that is centred and AND the bottom row or RIGHT HAND / ONLY column*/
td.h3albb{
border-style: solid;
border-width: 1px 0px 1px 1px ;
border-color: #6699cc;
font-size: 110%;
font-weight: bold;
color: #000019;
text-align: left;
vertical-align: top;
}


td.bz{
border-style: solid;
border-width: 1px 0px 0px 0px ;
border-color: #6699cc;
vertical-align: top;
}

td.badgetext{
border-width: 0px 0px 0px 0px ;
vertical-align: top;
font-size: 100%;
font-weight: bold;
color: #00509f;
text-align: center;
}

td.booktext{
border-width: 0px 0px 0px 0px ;
vertical-align: top;
font-size: 90%;
font-weight: normal;
color: #00509f;
text-align: left;
}

td.booktextb{
border-width: 0px 0px 0px 0px ;
vertical-align: top;
font-size: 90%;
font-weight: bold;
color: #00509f;
text-align: left;
}


td.badge{
border-width: 0px 0px 0px 0px ;
vertical-align: top;
align: center;
}


/* td.ac- used cell content that is centred and NOT the bottom row or RIGHT HAND / ONLY column*/
td.ac{
	border-style: solid;
	border-width: 1px 0px 0px 1px ;
	border-color: #6699cc;
	vertical-align: top;
}

/* td.bac- used cell content that is centred and NOT the bottom row or RIGHT HAND / ONLY column*/
td.bac{
font-weight: bold;
border-style: solid;
border-width: 1px 0px 0px 1px ;
border-color: #6699cc;
vertical-align: top;
}

/* td.acbr- used cell content that is centred and NOT the bottom row but is the RIGHT HAND / ONLY column*/
td.acbr{
	border-style: solid;
	border-width: 1px 1px 0px 1px ;
	border-color: #6699cc;
	vertical-align: top;
}

/* td.acbb- used cell content that is centred and IS the bottom row BUT NOT the RIGHT HAND / ONLY column*/
td.acbb{
	border-style: solid;
	border-width: 1px 0px 1px 1px ;
	border-color: #6699cc;
	vertical-align: top;
}

td.gap{
	border-style: solid;
	border-width: 0px 0px 0px 1px ;
	border-color: #6699cc;
	vertical-align: top;
}


/* td.acbbr- used cell content that is centred and IS the bottom row AND IS the RIGHT HAND / ONLY column*/
td.acbbr{
	border-style: solid;
	border-width: 1px 1px 1px 1px ;
	border-color: #6699cc;
	vertical-align: top;
}

/* td.al-  used cell content that is left aligned and NOT the bottom row or RIGHT HAND / ONLY column*/
td.al{
	border-style: solid;
	border-width: 1px 0px 0px 1px ;
	border-color: #6699cc;
	vertical-align: top;
	height: 2;
	text-align: left;
}

/* td.bal- used cell content that is left aligned and NOT the bottom row or RIGHT HAND / ONLY column*/
td.bal{
font-weight: bold;
border-style: solid;
border-width: 1px 0px 0px 1px ;
border-color: #6699cc;
vertical-align: top;
height: 2;
text-align: left;
}

/* td.albr- used cell content that is left aligned and NOT the bottom row but IS the RIGHT HAND / ONLY column*/
td.albr{
	border-style: solid;
	border-width: 1px 1px 0px 1px ;
	border-color: #6699cc;
	vertical-align: top;
	height: 2;
	text-align: left;
}

/* td.balbr- used cell content that is left aligned and NOT the bottom row but IS the RIGHT HAND / ONLY column*/
td.balbr{
font-weight: bold;
border-style: solid;
border-width: 1px 1px 0px 1px ;
border-color: #6699cc;
vertical-align: top;
height: 2;
text-align: left;
}

/* td.albb- used cell content that is left aligned and IS the bottom row BUT NOT the RIGHT HAND / ONLY column*/
td.albb{
	border-style: solid;
	border-width: 1px 0px 1px 1px ;
	border-color: #6699cc;
	vertical-align: top;
	height: 2;
	text-align: left;
}

/* td.albbr- used cell content that is left aligned and IS the bottom row AND IS the RIGHT HAND / ONLY column*/
td.albbr{
	border-style: solid;
	border-width: 1px 1px 1px 1px ;
	border-color: #6699cc;
	vertical-align: top;
	height: 2;
	text-align: left;
}

/* DOCUMENT TRANSRIPTION DIVs*/

#c {
	text-align: center;
	align: center;
}

#h1 {
	font-size: 140%;
	font-weight: bold;
	color: #00509f;
}

#h2 {
	font-size: 120%;
	font-weight: bold;
	color: #003f7d;
}

#h3 {
	font-size: 110%;
	font-weight: bold;
	color: #000019;
}

#footnote {
	font-size: 90%;
	color: #355c84;
}

#footnotec {
	font-size: 90%;
	color: #355c84;
	text-align: center;
}

#pin{
	text-indent: 25px
}

#in25{
	margin: 25px
}


/* THE FOLLOWING PORTION WAS DERIVED FROM http://www.cssplay.co.uk & MODIFIEED WITHIN SAID WEBSITE'S TERMS, TO SUIT OUR REQUIREMENTS */

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/final_drop.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any way to fit your requirements.
=================================================================== */

.menu {
	width:950px;
	font-size: 75%;
	position:relative;
	z-index:100;
	margin-left: auto;
	margin-right: auto;
	border-width:1px 0px 0px 1px;
	text-align: center;
}

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

.menu ul ul {
	width:150px;
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
	float:left;
	width:150px;
	position:relative;
}

/* style the links for the top level */
.menu a, .menu a:visited {
	display:block;
	font-size:11px;
	text-decoration:none;
	font-weight: bold;
	color:#fff;
	width:139px;
	height:15px;
	border:1px solid #000;
	border-width:1px 1px 0 0;
	background:#000;
	padding-left:10px;
	line-height:14px;
}

/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
	width:150px;
	w\idth:139px;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
	position:absolute;
	height:0;
	top:16px;
	left:0;
	width:150px;
	visibility: hidden;
}

/* another hack for IE5.5 */
* html .menu ul ul {
	top:15px;
	t\op:16px;
}

/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {
	position:absolute; top:0; left:0;
}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
	background:#6699cc; 
	color:#000; 
	font-weight: normal;
	height:auto; 
	line-height:1em; 
	padding:5px 10px; 
	width:129px
}

/* yet another hack for IE5.5 */
* html .menu ul ul a{
	width:150px;
	w\idth:129px;
}

/* style the top level hover */
.menu a:hover, .menu ul a:hover{
	color:#fae46b;
	background:#000000;
	font-weight: bold;
}

.menu :hover > a, .menu ul :hover > a {
	color:#fae46b;
	background:#000000;
}

/* style the second level hover */
.menu a:hover, .menu ul ul a:hover{
	color:#fff;
	background:#336699;
	font-weight: bold;
}

.menu :hover > a, .menu ul ul :hover > a {
	color:#fff;
	background:#336699;
}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul, .menu ul a:hover ul{
	visibility:visible; 
}