@charset "utf-8";


/* This is still work in progress! */


/* General */


a:link, a:visited
{
	background-color: transparent;
	color: #f90
}


a:hover
{
	background-color: transparent;
	color: #fc0
}


a:active
{
	background-color: transparent;
	color: #fff
}


abbr
{
	border-bottom: 2px dotted green;

	cursor: help
}


body
{
	background-color: #555;
	background-image: url(../images/page_corner_art-upper_left.png);
	background-repeat: no-repeat;
	background-attachment: fixed;
	color: #000;

	padding: 0;

	font-family: Georgia, serif;

	margin: 0
}


div.Brace
{
	clear: both
}


/* Page Header */


div#PageHeader
{
	/*width: 972px;*/
	height: 175px;


	/*background-color: #666;*/
	background-image: url('../images/page_header_background_pattern.png');
	background-repeat: repeat-x;
	color: #fff;

	padding: 0;

	position: relative
}


div#PageHeader h1
{
	padding: 0;

	margin: 0;

	display: block
}


div#PageHeader h1 > img
{
	padding: 0;

	margin: 0;

	display: block
}


div#PageHeader > h2
{
	padding: 0;

	font-family: Franklin Gothic Medium, Tahoma, sans-serif;
	font-size: 16pt;

	text-align: center;

	margin: 0
}


div#PageHeader img.Splash
{
	/*border: 1px dotted red;*/

	position:absolute;
	left: 170px;
	top: 95px
}


div#PageHeader > p
{
	font-family: Franklin Gothic Medium, Tahoma, sans-serif;
	font-size: 11pt;

	text-align: center;
}


/* Page Header - Navigation */


div#PageHeader div.Main
{
	width: 972px;
	height: 175px;

	padding: 0;

	margin: 0 auto;

	position: relative
}


div#PageHeader ul
{
	list-style-type: none;

	background-color: transparent;
	color: #777;

	padding: 0;

	font-family:  Tahoma, Tahoma, sans-serif;
	font-size: 11px;

	margin: 0;

	position: absolute; right: 20px; bottom: 15px
}

div#PageHeader ul li { display: inline; margin: 0 }

div#PageHeader ul li + li  { margin-left: 10px }

div#PageHeader ul li a { margin: 0 }

div#PageHeader ul li a:link, div#PageHeader ul li a:visited { background-color: transparent; color: #f90; text-decoration: none }
div#PageHeader ul li a:hover { background-color: transparent; color: #fc0; text-decoration: underline }
div#PageHeader ul li a:active { background-color: transparent; color: #fff; text-decoration: underline }


/* Page Body */


div.PageBody
{
	/*border: 1px dashed #f00;*/


	/* This is to compensate for margin-collapsing in Mozilla; in IE 7, it pushes the bottom of the div down, but it also seems to push the p margin OUTSIDE. */
	padding-bottom: 48px;

	background-color: transparent;
	background-image: url(../images/page_corner_art-lower_right.png);
	background-position: bottom right;
	background-repeat: no-repeat;
	color: #fff;

	font-family:  Tahoma, Tahoma, sans-serif;

	margin: 0

}


div.PageBody > p
{
	/*border: 1px solid red;*/
	width: 800px;

	font-size: 15px;

	margin: 48px auto
}


div.PageBody > p.Snug
{
	/* Apparently, IE 7 still doesn't understand last-child and the W3C validator still complains about it. Bah. */

	margin-top: 0;
	margin-bottom: 0
}


/* Page Body - Gallery */


div.PageBody > div.Gallery
{
	/*border: 1px solid red;*/
	padding: 0;

/* It looks like margins are not being collapsed on the floated cards. 32 pixels (4px x 4 cards x 2 sides) were applied when 20 pixels were expected. Do floats always do that? */

	/*width: 924px; - No Margins*/
	/*width: 956px; - 4px Margins */
	width: 964px;

	margin: 32px auto
}


div.PageBody > div.Gallery > div.MessageBox
{
	/*border: 1px solid red;*/
	padding: 25px;
	width: 422px;
	height: 231px;

	overflow: auto;

	background-image: url('../images/message_box_background.png');
	color: #fff;

	margin: 5px;

	display: block;

	float: left
}


div.PageBody > div.Gallery > div.MessageBox > h2
{
	/*border: 1px solid red;*/

	font-size: 15px;

	line-height: 1.1;

	margin: 0 0 10px 0

}


div.PageBody > div.Gallery > div.MessageBox > p
{
	/*border: 1px solid red;*/

	font-size: 13px;

	/* If this isn't specified, the Mac OS X version of Firefox (as of 3.0.5) renders the line height significantly longer than other browsers on Mac OS X or even its own Windows sibling. */
	line-height: 1.25;

	margin: 10px 0 0 0
}


div.pageBody > div.Gallery > a
{
	border: none
}


div.PageBody > div.Gallery > a > img
{
	border: none;
	width: 231px;
	height: 281px;

	margin: 5px;

	display: block;

	float: left
}


/* Page Body - Feature */


div.PageBody > div.Feature
{
	padding: 0;

	width: 750px;

	margin: 32px auto
}


div.PageBody > div.Feature > p.WIPNote
{
	border-top: 2px dotted yellow;
	border-bottom: 2px dotted yellow;

	padding: 8px;

	background-color: #900;
	color: #fff;


	font-family: "Trebuchet MS", sans-serif;
	font-size: 14px;

	margin: 48px auto
}


div.PageBody > div.Feature > h2
{
	border-bottom: 1px solid #999;

	padding: 0 0 8px 0;

	font-family: "Myriad Pro Cond", "Myriad Pro", "Franklin Gothic Medium", "Trebuchet MS", sans-serif;
	font-size: 24px;

	margin: 48px auto 32px auto
}


div.PageBody > div.Feature > div.PrimaryContent
{
	/*border: 1px dashed #eee;*/

	width: 500px;

	font-size: 15px;

	float: right
}


div.PageBody > div.Feature > div.PrimaryContent del { background-color: #fff; color: #fff }
div.PageBody > div.Feature > div.PrimaryContent del[title] { cursor: help }


div.PageBody > div.Feature > div.SecondaryContent
{
	/*border: 1px dashed #eee;*/

	width: 231px;

	float: left
}



/* Page Body - Information */


div.PageBody > div.Information
{
	padding: 0;

	width: 500px;
	min-height: 500px;

	font-size: 15px;

	margin: 32px auto
}


div.PageBody > div.Information > h2
{
	border-bottom: 1px solid #999;

	padding: 0 0 8px 0;

	font-family: "Myriad Pro Cond", "Myriad Pro", "Franklin Gothic Medium", "Trebuchet MS", sans-serif;
	font-size: 24px;

	margin: 48px auto 32px auto
}


/* Page Body - Experimental */


div.FeatureCardRed
{
	background-image: url('./images/feature_card_background-red.png');
	width: 231px;
	height: 281px
}


/* Page Footer - General */


div#PageFooter
{
	/*border: 1px solid red;*/
	background-color: #444;
	color: #fff;

	font-family:  Franklin Gothic Medium, Trebuchet MS, Tahoma, sans-serif;
	font-size: 13px;

	padding: 32px;

	margin: 0
}


div#PageFooter a
{
	/*font-weight: bold*/
}


/*div#PageFooter a:link, div#PageFooter a:visited
{
	background-color: inherit;
	color: #f90
}


div#PageFooter a:hover
{
	background-color: inherit;
	color: #fc0
}


div#PageFooter a:active
{
	background-color: inherit;
	color: #fff
}*/


div#PageFooter > p
{
	padding: 0;
	width: 800px;

	margin: 12px auto

}


div#PageFooter > p:first-child
{
	/*border: 1px solid red;*/

	margin: 0 auto 12px auto
}


div#PageFooter > p.BlahBlahBlah
{
	font-size: 11px;

	clear: both
}


div#PageFooter > p:first-child
{
	margin-top: 0
}


div#PageFooter.Snug
{
	margin-top: 0;
	margin-bottom: 0
}


/* Page Footer - Link Lists */


div#PageFooter > div.LinkLists
{
	/*border: 2px dashed #f00;*/
	padding: 0;
	width: 800px;

	margin: 24px auto;

	position: relative;
}


div#PageFooter > div.LinkLists > div.LinkList
{
	/*border: 1px dashed #fff;*/
	padding: 0;
	width: 390px;

	margin: 0 0 24px 0;

	float: left
}


div#PageFooter > div.LinkLists > div.LinkList + div.LinkList
{
	margin-left: 20px
}


div#PageFooter > div.LinkLists > div.LinkList > ul > li + li
{
	border-top: 1px dotted #999
}



div#PageFooter div.LinkList h3
{
	border-top: 1px dotted #aaa;
	border-bottom: 1px solid #aaa;
	padding: 5px 0;

	font-size: 13px;

	margin: 0
}



div#PageFooter div.LinkList ul
{
	list-style: none;

	padding: 0;

	margin-top: 0;

	position: relative
}


div#PageFooter div.LinkList li
{
	font-size: 11px;

	position: relative
}


div#PageFooter div.LinkLists a
{
	padding: 5px 8px;
	width: 374px;

	display:block
}


div#PageFooter div.LinkLists a:hover
{
	background-color: #333;
	color: #fc0
}


div#PageFooter div.LinkLists a:active
{
	background-color: #222;
	color: #fff
}