/* H.M.S. Hood Association's "Battle Cruiser Hood" Website Stylesheet.  POTENTIAL 2010 REDESIGN
Controlling stylesheet for all single-column website pages within the "Battle Cruiser Hood" website at http://www.hmshood.com and http://www.hmshood.org.uk.
Design by Frank Allen and Paul Bevand, MBE
Date originally created 2006; Updated December 2008; Updated April 2009; Overhauled February 2010 and again March 2011 */

/* "body" style - controls the appearance of all basic text */
body { background-color: #00316D; min-width:927px; background-image:url(/images/2010bg.jpg); background-repeat:repeat-x; font-family:Arial,sans-serif; font-size:0.95em; color:#333; }
body a:link, body a:visited { color:#09C; font-weight:normal; text-decoration:none; } /*color:#069; */
body a:hover { color:#F00; text-decoration:underline; font-style:italic;}

/*
img { max-width:100%; height:auto; }*/

#wrapper { max-width:1200px; min-width:927px; margin:auto; border:2px solid #fff; }

/****************************** HEADER COMPONENTS ******************************/
/* "header" divs - controls the main header/banner at the top of the page */ 
#header{ height:90px; left:0px; top:0px; padding:0px; overflow:hidden;  min-width:927px; background-image:url(/images/header_l.jpg); background-repeat:no-repeat; background-color:#3f82c6 }
/*#head1{ float:left; margin:0; padding:0; width:400px; height:90px; visibility:visible; }*/
#head2{ float:right; margin:0; padding:0; width:927px; height:90px; background-image:url(/images/header_r.gif); background-repeat:no-repeat; visibility:visible; background-position: right; }


/****************************** MAIN NAVIGATION MENU BAR COMPONENTS ******************************/
/* "navbar" div - controls the dimensions, position and background color of the main navigation bar just below the header*/
#navbar { background-image:url(/images/navbar.jpg);	margin:0; height:25px; border:1px none #000000; text-align:center; }


/****************************** INTRODUCTION COMPONENTS ******************************/
/* "intro" div - controls the appearance and position of the page title and introductory text below the navbar and above the main page content*/
#intro{ text-align:center; background:url(/images/introfade.jpg); background-position:bottom; background-repeat:repeat-x; padding:.1em 2.0em; color:#000 }
#intro .h1 {line-height:1.1em;}
#intro p {line-height:1.15em;}
/* "intromem" div - controls the appearance of the text in the introductory section of the Roll of Honour memorial pages. Similar to "intro". */
#intromem{ text-align:center; background:url(/images/introfade.jpg); background-position:bottom; background-repeat:repeat-x; padding:.1em 2.0em; }
#intromem .h1 {line-height:1.1em;}
#intromem p {line-height:1.0em;}
#intro a:link, #intro a:visited { color:#03C; font-weight:normal; text-decoration:none; } 


/****************************** CONTENT COMPONENTS ******************************/
/* "content" div - controls the appearance of the text in the main data portion of every website page */
#content{height:100%; background:url(/images/background3.gif); margin:auto; padding:1em 2em; background-color:#fff; background-position:50% 200px; background-repeat:no-repeat; background-attachment:fixed;}

/* "memorial" div - controls the appearance of the content area in the main data portion of the Roll of Honour memorial pages */
#memorial{height:100%; background:url(/images/poppyback.gif); margin:auto; padding:1em 2em; background-color:#fff; background-position:50% 350px; background-repeat:no-repeat; background-attachment:fixed;}

/* "pagenav" class - controls the appearance of the section links at the top and bottom of multi-section website article pages.  Used as needed. */
.pagenav{ margin:0; padding:0; text-decoration:none; color:#000; font-size:0.9em; text-align:center; }
.pagenav a:link, #pagenav a:visited {text-decoration:none; color: #0088ff;}
.pagenav a:hover {color:#0000ff; text-decoration: underline;}


/* "contleft" and "contright" classes - Enables the use of a left and right column as required. */
.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;}

/* "amptext" classes - can be used for small featured item boxes with interesting tidbits or special-emphasis links for interesting articles. "amptext1" aligns to the left, "amptext2" to centre and "amptext3" to the right. */
.amptextL{font-size:0.9em; text-align:center; color:#024064; width:208px; padding:3px; margin:0px 5px 0px 0px; width:auto; float:left; background-color:#fff; border:2px #7b99b7 solid;}
.amptextR{font-size:0.9em; color:#024064; width:208px; padding:3px; padding:5px; margin:0px 0px 0px 5px; width:auto; float:right; background-color:#fff; border:2px #7b99b7 solid;}

/* "ampphoto" classes - similar to "amptext" in that they can be used for small boxes with interesting photos and links. "ampphotoL" aligns to the left and "ampphotoR" to the right. */ 
.ampphotoL{font-size:0.9em;	text-align:center; color:#024064; padding:0px; margin:0px 5px 0px 0px; width:auto; float:left;}
.ampphotoR{font-size:0.9em; text-align:center; color:#024064; padding:0px; margin:0px 0px 0px 5px; width:auto; float:right;}

/* "colleft", "colmid" amnd "colright" classes - used to position text in three columns where needed.*/
.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%;}

/* "hoodtodaybox" style - container to evenly space photo & textual content in "Hood Today" pages */
.todaybox { width:100%; height:240px; margin:10px 0px; }

/* "greylist" style - Used for items to be linked before they actually point to a live page or item (aka "coming soon"). */
.greylist { font-family:Arial,sans-serif; font-size:0.95em; color:#777; font-weight:bold }

/* "super" div - controls the appearance of the reference numerals */
.super{font-size:0.8em; font-weight:bold; vertical-align:super}

/****************************** FOOTER COMPONENTS ******************************/

/* "footer" div - controls the appearance of the bottom menu/footer on every website page. */
#footer{ font-size:0.8em; color:#fff; text-align:center; padding:5px 0px; left:0px; top:0px; background-position: top; margin:0; overflow:hidden;  min-width:927px; background-image:url(/images/page-footer.jpg); background-repeat:no-repeat; background-color:#fff }

#footer a:link, #footer a:visited {color:#ffffff; text-decoration:none; font-weight:normal;}
#footer a:hover {color: #ffff00; text-decoration: underline;}


/*#footer{margin:0px; padding:5px 15px; font-size:0.8em; color:#fff; background:url(/images/page-footer.jpg); text-align:center; min-width:927px; background-position: top; overflow:hidden}*/


/****************************** ASSORTED STYLES & COMPONENTS *******************************/

/* "caption" style - controls the appearance of all image and photo captions */
.caption {font-size:0.90em; color:#133A75; }

/* "date" style - controls each page's 'Updated' date, EXCEPT for the main index page. The main index has its own version in a separate stylesheet */
.date {font-size:0.75em; color:#000; margin-top:2.0em;}

/* "h1" style - controls the appearance of the page title text in the intro div on every page */
.h1 {font-size:1.8em; font-weight:bold; color:#fff;}

/* "h2" style - controls the appearance of the paragraph titles in the content div on every page */
.h2 { font-size:1.4em; font-weight:bold; color:#133A75; margin-top:1.0em; margin-bottom:1.0em;}/*#0099ff*/

/* "h2mem" style - controls the appearance of lost men's names in the title of each roll of honour page */
.h2mem { font-size:1.4em; font-weight:bold; color:#036; text-transform: uppercase; }

/* "h3" style - controls the appearance of list items when used within the content div */
.h3 {font-size:1.20em; font-weight:bold; color:#111;}

/* "h3" style - controls the appearance of list items when used within the content div */
.h3mem {font-size: 1.0em; font-weight: bold; color: #0087e1;}

/* "h3grey" style - grey version of h3. Used for placeholders in lists within the content div */
.h3grey {font-size:1.20em; font-weight:bold; color:#777;}

/* "h3white" style - white version of h3. Use as needed */
.h3white {font-size:1.20em; font-weight:bold; color:#fff;}

/* "h4" style - controls the appearance of small list items when used within the content div */
.h4 {font-size:1.1em; font-weight:bold; color:#222;}

/* "h4white" style - white version of h4. Used for the section title, above the page title within the intro div */
.h4white {font-size:1.1em; font-weight:bold; color:#fff;}

/* "linethru" style - basic text, but with a line through it. Seldom used, but present in some ADM files */
.linethru {text-decoration:line-through;}

/* "note" style - red italic text which can be used when special attention needs to be called to something */
.note {font-size:0.90em; color:#ff0000; font-style:italic; font-weight:normal;}


/****************************** INDEX-PAGE SPECIFIC STYLES & COMPONENTS *******************************/
/* "index-wrapper" div - controls the dimensions and positioning of the index page*/
#index-wrapper { max-width:1200px; min-width:927px; margin:auto; padding:0 }

#index-memorial-wrapper { width:100%; margin:auto; padding:10px; background-color: #002046; }

/* "index-top" div - controls the dimensions, position and background of the page header*/
#index-top { height:250px; left:0px; top:0px; padding:0px; overflow:hidden; min-width:931px; background-image:url(/images/index-top-2011.jpg); background-position:right; }
#index-memorial-top { height:250px; left:0px; top:0px; padding:0px; overflow:hidden; min-width:931px; background-image:url(/images/index-mem-top.jpg); background-position:right; }

/* "index-navbar" div - controls the dimensions, position and background color of the main navigation bar just below the header*/
#index-navbar { background-image:url(/images/navbar.jpg); margin:0; height:25px; border:1px none #000000; border-left:2px solid #fff; border-right:2px solid #fff; text-align:center; }

#index-mem-navbar { background-image:url(/images/navbarmem.jpg); margin:0; height:25px; border:1px none #000; border-left:2px solid #000; border-right:2px solid #000; text-align:center; }

/* "index-centre" div - controls the dimensions, position and background color of the center section of the page just below the navbar*/
#index-centre{ background:url(/images/index-center.jpg); overflow:hidden; min-width:927px; background-color:#fff; background-position:bottom; border-left:#fff solid 2px; border-right:#fff solid 2px;}
#index-centre ul { margin-left:1em; padding-left:1px; list-style-type:disc;}
#index-centre li li{ margin-left:0.5em; padding-left:1px; list-style-type:disc; }

#index-memorial-centre{ background:url(/images/index-center.jpg); overflow:hidden; min-width:927px; background-color:#fff; background-position:bottom; border-left:#000 solid 2px; border-right:#000 solid 2px; }

/* "index-title" style - controls the appearance of index page section titles */
.index-title { font-size:1.1em; font-weight:bold; color:#0099ff; }

/* "colleft", "colmid" amnd "colright" classes - used to position text in three columns where needed.*/
.index-colL { margin:0px; padding:0px 8px; border-right:#999 1px solid; }
.index-colC { padding:0px 4px; }
.index-colR { padding:0px 8px; border-left:#999 1px solid; }

/* "index-footer" div - controls the dimensions, position and background of the bottom of the index page*/
#index-footer{ height:110px; font-size:0.8em; color:#fff; background-image:url(/images/index-footerR.jpg); min-width:931px; background-position: top right; margin-top:-10px; }
#index-footer a:link, #index-footer a:visited { color:#fff; text-decoration:none; font-weight:normal; }
#index-footer a:hover { color: #ffff00; text-decoration: underline; }
#index-footer p { text-align:center; color: #fff; }

/* "index-memorial-footer" div - controls the dimensions, position and background of the bottom of the memorial version of the index page*/
#index-memorial-footer{ height:110px; font-size:0.8em; color:#fff; background-image:url(/images/index-mem-footer.jpg); min-width:931px; background-position: top right; margin-top:-10px; }
#index-memorial-footer a:link, #index-memorial-footer a:visited { color:#000; text-decoration:none; font-weight:normal; }
#index-memorial-footer a:hover { color: #ff0000; text-decoration: underline; }
#index-memorial-footer p { text-align:center; color: #000; }
/*Remember to create memorial version of page...different background and different top image...also look into a rotating top image*/