/* CssTable.css - 11/15/06 HD

Background color does not extend into the margin area. Only into the padding area.
#324B8D = Blue at right end of masthead.
#F9B713 = Left col gold from AGSM.
#e6ab14 = AGSM logo background gold (darker)
*/
/**********   Structure elements   **********/
body {
	color: Black;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}
#masthead {
	height: 150px;
	width: 100%;
	background-image: url("FlagToBlue_1.5x.jpg");
	background-color: #324B8D;
	background-repeat: no-repeat; /* bkgrnd image 656px wide */
}
#mastletters {
	margin: 14px 0 0 8px;
}
#picturebar {
	height: 143px; /* 142 min value */
	width: 100%;
	background: #122049;
	border: solid White;
	border-width: 2px 0px 2px 0px;
}
#picturebarleft {
	float: left;
	background: #122049; /* blue */
	width: 50%;
	text-align: center;
}
/* The top & bottom margins must fill the space to the top and bottom of
the picturebar or the background color will show.
Adjust these margins to look correct by eye. Must compromise between IE & FF.
*/
#picturebarleft img {
	border: 2px solid white;
	margin: 8px 2px 4px 2px;
}
#picturebarright {
/* If the width is 50% the 2 halves will not fit side by side in IE and the right bar
will be set below and to the right. */
	float: right;
	background: #122049;
	width: 49.99%;
	text-align: center; /* centers images also */
	vertical-align: middle;
}
#picturebarright img {
	margin: 50px 0px 0px 0px;  /* TRBL */
}
#navbar_old {
	clear: both;
	height: 26px;
	width: 100%;
	background: #324B8D;
	text-align: center;
	font-size: .8em;
	border: solid White;
	border-width: 0px 0px 2px 0px;
	padding-top: 4px;
	color: White;
}
#navbar {
/* text-align in this ID will NOT align the JS menu. */
	clear: both;
	height: 35px; /* must be 4 or more than menu height in Xara. Experiment. */
	width: 100%;
	background: #324B8D;
	border: solid White;
	border-width: 0px 0px 2px 0px;
	padding-top: 0px;
	color: White;
}
.hornavbar_old {
	background-color: #180373; /* purple */
}
#navbar a:link {
	color: White;
	text-decoration: none; /* default is underline */
	font-weight : bold;
}
#navbar a:visited {
	color: White;
	text-decoration: none;
	font-weight: bold;
}
#navbar a:hover {
	background-color: #9C85FC;
}
table.container {
/* Must apply padding, at the cell level even though FP allows setting it at the
table level. */
	width: 100%;
	position: relative;
	border-collapse: collapse; /* Only thing that will completely remove the border. */
}
/* .left & .right selectors apply to ALL pages. I. E. the front page left & right col and the
Hero pages left & right cols. */
td.left {
	width: 180px; /* Text width, padding additional */
	color: black; /* font color */
	padding: 10px;
	vertical-align: top;
	background-color: #DEB887;
	font-size: .9em;
	font-family: "Times New Roman", Times, serif;
}
td.right {
	color: black;
	padding: 10px;
	vertical-align: top;
	background-color: #FAEBD7;
	font-size: 1em;
	font-family: Tahoma, Geneva, Arial, Helvetica, sans-serif;
}
/* Table on All Heroes page only.
Need 2 classes on the main table; aht & sortable. Syntax is class="aht sortable".
2 individual class statements will cause the sort to not work.
*/
table.aht {
	background-color: White;
	font-size: .75em;
	width: 95%;
	padding-top: 0;	
}
/* Sortable tables */
table.sortable thead {
	background-color: #324B8D; /* Background color of header cells is Blue */
	color: #F9B713; /* Sort direction indicator is Gold. Also shadow part of borders of header cells in FF but not IE 6*/
	font-weight: bold;
	cursor: default; /* Cursor that shows when you mouse over table header cells. Default is 45 deg arrow */
	size: 2em;
}
/* td,th.ahb doesn't work. Only the th.ahb is applied and the td doesn't get affected.
}
/* I removed this column and added the counter onto the Died field to allow it to be sorted correctly.
td,th.ahi {
	width: 4%;
	padding-left: .5em;
	padding-right: .5em; /*text-align: right; /* Need to set top & bottom padding on only 1 cell in the row */
/*	padding-top: .3em;
	padding-bottom: .3em;
	text-align: left;
} */
td.ahb {
	/* Branch col */
	padding-left: .5em;
	padding-right: .5em;
	text-align: left;
}
td.ahr {
	/* Rank col */
	padding-left: .5em;
	padding-right: .5em;
	text-align: left;
}
td.ahl {
	/* Last Name col */
	padding-left: .5em;
	padding-right: .5em;
	text-align: left;
}
td.ahf {
	/* First Name col */
	padding-left: .5em;
	padding-right: .5em;
	text-align: left;
}
td.ahh {
	/* Hometown col */
	padding-left: .5em;
	padding-right: .5em;
	text-align: left;
}
td.ahd {
	/* Died col */
	padding-left: .5em;
	padding-right: .5em;
	text-align: right;
}
td.aha {
	/* Age col */
	padding-left: .5em;
	padding-right: .5em;
	text-align: center;
}
td.ahw {
	/* Where col */
	padding-left: .5em;
	padding-right: .5em;
	text-align: left;
}
#footer {
	width: 100%;background-color: navy;
}
#footer p {
/* The margin in the footer must be 0 to make sure the footer box touches
the leftcol box and leaves no space between of a different color.
Set the top padding to make the footer box taller. The text will vertically
center in the box. */
	margin: 0;
	padding: .9em;
	text-align: center;
	color: White; /* font color */
	font-size: .8em;
}
#footer a:link {
	color: White;
	text-decoration : underline;
	/* font-family : Arial, Helvetica, sans-serif; */
	font-weight : bold;
}
#footer a:visited {
	color: White;
	text-decoration: underline;
	font-weight: bold;
}
#footer a:active{
	color: White;
	text-decoration: underline;
	font-weight: bold;
}
/* Maintain existing color (link, visited or active) and highlight
with a mid tone blue.*/
#footer a:hover {
	background-color: #AC8FFC;
}
/**********   Appearance elements   *********
Body styles
*/
h1 {
	font: normal bold 24pt "Times New Roman", Times, serif;
	color: #180373; /* same as logo lettering */
	text-align: center;
}
h2 {
	font: normal bold 16pt "Times New Roman", Times, serif;
	color: #180373; /* same as logo lettering */
}
h3 {
	font: normal bold 12pt "Times New Roman", Times, serif;
	color: #180373; /* same as logo lettering */
}
hr {
	color: #180373; /* same as logo lettering */
}
/* Links use same font family as their page
all the same color with hover color overlay */
a:link {
	color: #180373;
	text-decoration : underline;
	/* font-family : Arial, Helvetica, sans-serif; */
	font-weight : bold;
}
a:visited {
	color: #180373;
	text-decoration : underline;
	/* font-family : Arial, Helvetica, sans-serif; */
	font-weight : bold;
}
a:active {
	color: #180373;
	text-decoration : underline;
	/* font-family : Arial, Helvetica, sans-serif; */
	font-weight : bold;
}
a:hover {
	/* Maintain existing color (link, visited or active) and highlight
	with gold highlight color */
	background-color: #E3DDFB;
}
/* Photo styles */
.photos {
	border: medium solid white;
	margin: 5px; /* padding is inserted between image and border,
	margin is inserted outside the border. */
}
/*.photocaption {
	font-family: "Times New Roman", Times, serif;
	font-size: 16px;
	padding-bottom: 5px;
	color: #180373;
	line-height: 5px; /* Sets spacing from bottom of photo border
	and top of caption letters. Assumes a <br> after photo & before
	caption. */
/*} */

/**********   Hero page specific styles   **********/
/* NOTE, set the width of the image in pixels to the width percentage (25%)
of the max width of the screen that is expected, probably 1280 px. Therefore
use 25% x 1280 = 320 px as the width of the photos. This will cause all
screen resolutions less than 1280 to resize the photos to a smaller width in
pixels and no screen resolutions will scale the photos up.
Note: because the left col is a fixed width (200px incl padding) the percent of the
screen width represented by the right col varies with the screen resolution so the
photo doesn't quite scale correctly because the thing it's a percentage of, changes
with screen resolution. It goes from about 4.1" (800 px) to 4.7" (1152 px) */
.herophoto {
	width: 40%;
	border: 4px solid white; /* same as .photo */
	margin: 5px 10px 10px 5px; /* right pad same as .right, right pad for symmetry */
	float: left;
}
.heroname {
	color: #180373; /* same as logo lettering */
	font: normal bold 2em "Times New Roman", Times, serif;
	text-align: center;
	padding-top: 1em;
}
.heromap {
	text-align: center;
}
.herostmt {
	color: Black;
	font-size: 1em;
	padding-top: 1em;
}
.herobanner {
	border: medium solid white;
	margin: 5px; /* text-align: center; */
}
.right hr {
	clear: both;
	color: #180373; /* same as logo lettering */
}
/**********   Ceremony Pages Only   **********/
/* Make the photos 740 px wide. This will be nearly full width at 1024 x 768 and slightly less at 800 x 600.
All the photos MUST be the same width or they will be distorted. */
.cerphoto {
	width: 90%;
/*	height: auto;*/
	border: 4px solid white; /* same as .photo */
	margin: 5px;
	/*	float: left;
	clear: both;*/
}
.cercaption {
	margin-top: 10em;
	display: block;
}
/* Left side menu on "Heroes" pages */
.menu {
	margin-left: 0px;
}
.menu a:link {
	color: #180373;
	text-decoration : none; /* default is underline */
	font-weight : bold;
}
.menu a:visited {
	color: #180373;
	text-decoration : none;
	font-weight : bold;
}
.menu a:active {
	color: #180373;
	text-decoration: none;
	font-weight: bold;
}
.menu a:hover {
	/* Maintain existing color (link, visited or active) and highlight
	with gold highlight color */
	background-color: #E3DDFB;
}
.center {
	text-align: center;
}