/* General styles */

/* widths of enclosing boxes */

body {
	color: #555;			/* default text color */
	font-family: "Lucida Grande", "Lucida Sans Unicode", sans-serif;
}

div#centered-content
{
	max-width: 700px;		/* Max-width is treated as "width" and thus not well supported by Safari and IE but it's what we want */
	margin: 0 auto;		/* Centers the content area.  If margins are not set, content block is left aligned */
}
div#left-content
{
	max-width: 700px;
}
/* Width that may be applied to tables.  It seems 100% width tables (when no width is specified) are allowed to push the enclosing div beyond its max-width. Style them specifically.  this style can be applied to divs as well as tables. */

.page-width
{
	max-width: 700px;
}

/***********************************************************************/

.home-cell			/* For table cells on the home page - announcement blocks */
{
	vertical-align: top;
	width: 300px;
	padding: 5px 20px 5px 20px;
}


/***********************************************************************/

h1, h2, h3
{
	font-family: "Futura", Helvetica, sans-serif;
	color: #3c93c9;		/* sky blue */
}
.title		/* For misc titles, like in the products table */
{
	font-family: "Futura", Helvetica, sans-serif;
	font-size: 130%;
	font-weight: bold;
	color: #3c93c9;		/* sky blue */	/* I think the #555 gray is too dull in this case */
	margin-bottom: 0;
}
.orange				/* Style orange headings elsewhere */
{
	color: #e28926;		/* YR-orange */
	font-weight: bold;
}
.skyblue
{
	color: #3c93c9;		/* sky blue */
	font-weight: bold;
}
a, a:visited
{
	text-decoration: none;
	color: #3c93c9;
}
a:hover
{
	text-decoration: underline;
	color: #3c93c9;
}
h1 a, h1 a:visited, h2 a, h2 a:visited, h3 a, h3 a:visited
{
	text-decoration: underline;
	color: #3c93c9;
}

/* Horizontal rules ----------------------------------------- */

hr
{
	border: 1px solid #ddd;
}

hr.gray90
{
	width: 90%; border: 1px solid #ddd;
}
hr.navbar		/* HR specifically for menu bars */
{
	width: 100%; border: 1px solid #ddd;
	/*width: 100%; background: #ddd;
	border: none;*/
}
br.top-menu-spacer		/* experimental - CEM */
{
	line-height: 0.5em;
}

/* Gray round-cornered boxes ----------------------------------------- */
/* It turns out we won't use the round-cornered boxes.  I'm keeping the styles here a while for reference */

/* For boxes of a different height, you may override the height on the page */
/* I've set the left margin to zero, so the boxes will line up left justified with other text in the content area */
/* I've could tweaked the box width here, to match a page width of 700px set above. */

.round-box-gray
{
	background-color: #efefef;
	width: 180px;
	height: 180px;
	padding: 2px 15px 15px 15px;		/* top, right, bottom, left */
	margin: 10px 20px 10px 0px;
	float: left;
	border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
}
.round-box-image		/* For image icons in the round-cornered boxes, upper left */
{
	float: left;
	margin: 10px 5px 5px 0px;		/* top, right, bottom, left */
}


/* ---------------------------------------------------------- */
/* Lists */

ul.twolevel li		/* list item within ul of class "twolevel" */
{
	color: #e28926;		/* YR-orange */
	font-weight: bold;
	margin: 16px 0px 0px 0px;		/* top right bottom left */
}

ul.twolevel li ul
{
	margin-top: 5px;		/* set space BELOW outer li - setting margin-bottom for outer li style applies when the li ends, which is at the BOTTOM of the 2nd level list, not what we want */
}

ul.twolevel li ul li	/* list items at 2nd level of twolevel lists */
{
	color: #555;		/* the normal font color */
	list-style-type: disc;		/* instead of circle */
	font-weight: normal;
	margin: 0px 0px 2px 0px;	/* Must set all to override outer li */
}


/* Table for links ---------------------------------------------------- */

.links_table
{
	padding: 2px;
}
.links_header
{
	background-color: #eee;
	font-weight: bold;
}
tr.links_header td
{
	padding-left: 3px;		/* put a little space between the left edge and text start */
}
table.links_table a
{
	color: #555;		/* default text color instead of blue for links */
}
br.half		/* half line break */
{
	line-height: 30%;
}

/* Alternate row colors ----------------------------------------------- */
.alt
{
	background-color: #fffaf4;		/* very light YR orange */
}
.light-gray
{
	background-color: #efefef;		/* light gray */
}

/* Information Index Styles -------------------------------------------------- */

table#information a
{
	color: #555;		/* default text color instead of blue for links */
}
table#information .h1
{
	color: #e28926;		/* orange */
	font-size: 120%;
	font-weight: bold;
	font-family: "Futura", Helvetica, sans-serif;	/* header font */
	padding-top: 10px;
}
table#information .h1 a
{
	color: #e28926;
}
table#information .h2
{
	color: #3c93c9;		/* sky blue */
	font-size: 110%;
	font-weight: bold;
	padding-left: 30px;
	padding-top: 10px;
	font-family: "Futura", Helvetica, sans-serif;	/* header font */
}
table#information .h2 a
{
	color: #3c93c9;
}
table#information .topic1		/* topic level 1 */
{
	padding-left: 60px;
}
table#information .topic
{
	padding-left: 60px;
}
table#information .updated
{
	padding-left: 30px;
}


/* Site Map Styles ------------------------------------------------ */

div#sitemap
{
	width: 650px;		/* Set a fixed width, so dates don't collapse to the left for narrow browser width */
	clear: both;
}
div#sitemap a
{
	color: #555;		/* default text color instead of blue for links */
}

div#sitemap p.h1
{
	color: #e28926;
	font-size: 120%;
	font-weight: bold;
	margin: 11px 0px 0px 0px;
	clear: both;
	float: left;
	width: 460px;		/* width of topic + indent of topic */
	font-family: "Futura", Helvetica, sans-serif;	/* header font */
}
div#sitemap p.h1 a
{
	color: #e28926;
}
div#sitemap p.h2
{
	color: #3c93c9;		/* sky blue */
	font-size: 110%;
	font-weight: bold;
	margin: 30px 0px 0px 30px;		/* top, right, bottom, left */
	clear: both;
	font-family: "Futura", Helvetica, sans-serif;	/* header font */
}
div#sitemap p.h2 a
{
	color: #3c93c9;
}
							/* I wish HTML had tabs but it doesn't */
							/* Left indents for information index is 0px, 30px, and 60px */
							/* Left indents for site map is 0px, 20px, 40px, and 60px */
							/* Also see div#sitemap p.h3 */
div#sitemap p.h2		/* "rules that appear later have more weight" Liz Castro 6th Ed. p. 123 */
{
	margin-left: 20px;
}
div#sitemap p.h3
{
	color: #555;		/* dark gray */
	font-size: 110%;
	font-weight: bold;
	margin: 30px 0px 0px 30px;		/* top, right, bottom, left */
	clear: both;
	font-family: "Futura", Helvetica, sans-serif;	/* header font */
}
div#sitemap p.h3 a
{
	color: #555;
}
div#sitemap p.h3		/* See div#sitemap p.h2 */
{
	margin-left: 40px;		/* In FF and Safari margin-top seems to be ignored */
									/* I'm adding margin-bottom to the element above, but it will make IE look bad */
}

div#sitemap p.topic
{
	margin: 2px 0px 0px 60px;
	float: left;
	clear: both;
	width: 400px;
}


ol.requirements-list li
{
	margin-bottom: 1em;	/* Saves a bunch of br's */
}

/* Table styles, differing in cell background colors ***********************************/

.info-table th, .info-table th a
{
	background-color: #fffaf4;		/* very light YR orange */
	color: #555;
	vertical-align: top;
	font-size: 95%;
}
.info-table td.left-col
{
	background-color: #fffaf4;		/* very light YR orange */
	font-weight: bold;
	font-size: 95%;
}
.info-table-gray th, .info-table-gray th a
{
	/* background-color: #f3f3f3;		very light gray */
	background-color: #efefef;		/* light gray */
	color: #555;
	vertical-align: top;
	font-size: 95%;
}
.info-table-gray td.left-col
{
	/* background-color: #f3f3f3;		very light gray */
	background-color: #efefef;		/* light gray */
	font-weight: bold;
	font-size: 95%;
}

/* ------------------------------------------------------------------ */

.productsDivider		/* for divs to contain dividers within the products page */
{
	width: 700px;
	float: left; clear: both;
	background-color: #eeeeee;
	margin: 20px 0 5px 0;
	padding: 5px 0 5px 5px;
}
div.productsDivider h2, div.productsDivider h3
{
	text-align: center;
	color: #555;
	font-family: "Futura", Helvetica, sans-serif;		/* title font */
	margin: 0;
	padding: 5px;
}
div.productsColumnLeft, div.productsColumnRight	/* hold one column of location info */
{
	float: left;	/* set clear: both for the left column, clear: none for the right column */
	width: 320px;
	margin: 10px 20px 0px 0px;	/* top, right, bottom, left */
}
div.productsColumnLeft
{
	clear: both;
}
div.productsColumnRight
{
	clear: none;
}
hr.hidden		/* IE won't obey clear: both for our columns, so make an invisible HR */
{
	visibility: hidden;
}
.productsIcon		/* For shadowed round-cornered images in the products overview table */
{
	margin: 0px 5px 5px 0px;
	float: left;
}