/**
/* Title:			Styles.css
/*
/* Purpose:			Defines the styles for the entire website
/*
/* CreatedBy:		Carlos Li
/*
/* CreatedOn:		09 Jul 2005
/*
/* Revisions:
/*                      16 Aug 2007 : Carlos Li
/*                          - reduced size of logo
/*                          - added mediaFilter class
/*
**/




@media screen, print
{
	body
	{
		background-color: rgb(255, 253, 201);
	}


	/** constrols page layout **/
	#pageLayout		
	{
		background-color: white;
		width: 783px;
		border: 1px solid silver;
		margin-left: auto;
		margin-right: auto;
	}

	
	#bannerHolder
	{		
		margin-left: auto;
		margin-right: auto;
		width: 785px;
		height: 100px;
		padding-bottom: 10px;
	}
	
		
	#banner
	{
		width: 760px;
		height: 100%;
		margin-left: 0px;
	}
	
	#promotionLabel
	{
		background-color: rgb(188, 227, 152);
		width: 25px;
		height: 100%;
		margin-right: 0px;
		float:left;
	}
	

	/* text of main menu on the top (home, about us, heroes..., etc.) **/
	.mainMenu, .lastMainMenu
	{
		font-family: Arial Narrow, Arial, sans-serif;
		font-size: 11pt;
		padding: 3px 6px 3px 3px;
		text-decoration: none;
		color: rgb(114, 3, 53);
		text-transform: uppercase;
		border-right: 1px solid white;
		height: 100%;
		white-space: nowrap;
	}


	a.mainMenu:hover
	{
		color: blue;
	}



	/* background and layout of main menu on the top (home, about us, etc.) **/
	td.menuBar
	{
		width: 100%;
	/** 	height; 39px;  */
		height: 25px;
		background-image: url('gradientGold.jpg'); 
	}

	.menuBar 
	{
		height: 100%;
	}



	/* background and layout of hidden submenu menu **/
	div.subMenu
	{
		position: absolute;
		border: 1px solid white;
		visibility: hidden;
		background-color: rgb(248, 196, 0);
		z-index: 100;
		text-align: left;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 3px;
		line-height: 1.3em;
	}



	/* text of hidden submenu menu **/
	a.subMenu
	{
		font-size: 10pt;
		font-family: Arial Narrow, Arial, sans-serif;
		color: rgb(114, 3, 53);
		white-space: nowrap;
	}

	a.subMenu:hover
	{
		color: blue;
	}



	/* text of visible submenu menu on the right **/
	.subMenu2
	{
		font-family: Arial, sans-serif;
		color: rgb(231, 121, 25);
		text-decoration: none;
		vertical-align: top;
	}


	/* background and layout of visible submenu menu on the right **/
	td.subMenu2
	{
		font-size: 0.8em;
		margin-bottom: 2px;
		width: 150px;
		border-bottom: 1px solid rgb(231, 121, 25);
	}


	/* text, background, and layout of hidden selector (<<) to submenu links **/
	td.selector
	{
		font-size: 0.8em;
		font-family: Arial, sans-serif;
		color: rgb(231, 121, 25);
		margin-bottom: 2px;
		border-bottom: 1px solid rgb(231, 121, 25);
	}


	/* hidden selector (<<) to submenu links **/
	div.selector
	{
		visibility: hidden;
	}

	/** logo on top of every page **/
	.logo
	{
/**		width: 136px;
		height: 100px;
**/
		width: 91px;
		height: 68px;
	}


	#websiteTitle
	{
		text-align: center; 
	}


	/** copyright information at the bottom of every page **/
	#copyright
	{
		font-size: 0.7em;
		text-align: center;
		padding-top: 10px;
		padding-left: 5px;
		padding-right: 5px;
	}
	

	blockquote
	{
		font-style: italic;
	}


	/** how we write down where we got our information from **/
	.source
	{
		font-size: 0.75em;
		text-align:left;
		vertical-align: bottom;
		font-style: italic;
		padding-top: 15px;
		padding-bottom: 5px;
	}


	/** gutter spaces (horizontal/vertical) **/
	.hgutter
	{
		height: 10px;
	}
	.vgutter
	{
		width: 10px;
	}


	/** formating for headings **/
	h1, h2, h3, h4, h5, h6
	{
		font-family: Arial, sans-serif;
		color: rgb(222, 66, 35);
		width: 100%;
	}
	
	h1
	{
		border-bottom: 1px solid red;
	}


	/** formatting for content **/
	.content
	{
		font-size: 0.9em;
		font-family: Times New Roman, serif;
	}
	
	p, ul, ol, blockquote
	{		
		line-height: 130%;
	}
	
	
	td.content		/** content layout **/
	{
		width: 600px;
	}


	.highlight
	{
		font-weight: bold;
		color: red;
	}
	



	/** 
	/* HOME PAGE STYLES 
	**/

	/** main picture **/
	.mainPic
	{
		width: 772px;
	}

	/** main topics **/
	table.topicHeadings
	{
		width: 100%;
	}

	td.topicHeadings
	{
		background-image: url('gradientGold.jpg'); 
		background-repeat: no-repeat;
		width: 33%;
/** 		height: 39px; **/
		height: 25px;
	}
	
	a.topicHeadings
	{
		color: rgb(114, 3, 53);
		text-decoration: none;
		font-family: Arial Narrow, Arial, sans-serif;
		font-size: 13pt;
		padding-right: 5px;
		font-variant: small-caps;
		font-weight: 500;
	}


	.topicContentCenter
	{
		/** draw lines on the left and right side **/
		border-left: 1px solid #E77919;
		border-right: 1px solid #E77919;
	}
		
	
	a.announcementSummary
	{
		text-decoration: none;
		color: black;
	}
	div.announcementSummary
	{
		padding-left: 0.25in;
	}
	
	div.announcement
	{
		margin-bottom: 6pt;
	}
	a.highlightSummary
	{
		text-decoration: none;
		color: black;
	}
	
	a.announcementSummary:hover, a.highlightSummary:hover
	{
		text-decoration: underline;
	}
	
	span.announcementSummary
	{
		font-size: 1.25em;
		color: Red;
	}

	a.highlightSummary p
	{
		color: black;
		text-decoration: none;
	}
	
	
	
	/**
	/* GALLERY STYLES
	**/
	div.mediaFilter
	{
		font-family: Arial Narrow, Arial, sans-serif;
		font-size: 0.8em;
		margin-bottom: 4px;
	}
	a.mediaFilter, a.mediaFilter:visited
	{
		color: rgb(231, 121, 25);
/**		color: rgb(114, 3, 53); **/
	}
	a.mediaFilter:hover
	{
		color: red;
	}
	.gallery
	{
/*
		margin-left: auto;
		margin-right: auto;
*/
		width: 565px;
		margin-left: 8px;
	}

	td.thumbnail, td.emptyThumbnail, img.thumbnail
	{
		width: 140px;
	}

	td.thumbnail, td.emptyThumbnail
	{
		padding-bottom: 1.2em;
		text-align: center;
		vertical-align: bottom;
	}
	
	
	td.thumbnail
	{
		border: 1px solid orange;
	}
	
	
	img.thumbnail
	{
		border: 0px;
	}
	
	a.thumbnail
	{
		color: red;
		text-decoration: none;
	}
	a.thumbnail:hover
	{
		text-decoration: underline
	}
	
	
	.imgCaption
	{
		margin-top: 0.8em;
		font-size: 0.8em;
		
	}



	/** Donation Button **/
	#donationSection
	{
		text-align: center;
		margin-top: 10px;
	}

	#donationButton
	{
		font-family: Arial;
		font-size: 0.8em;
		color: orange;
		text-decoration:none;
	}

	
}	/** end of screen CSS **/



@media print
{
	#pageLayout		
	{
		width: 100%;
		border: 0px solid silver;
	}
	
	.mainMenu, .menuBar, .subMenu, .subMenu2, .selector, .logo, .submenuBar, #websiteTitle, #banner, #donationSection
	{
		display: none;
		visibility: hidden;
	}
		
}	/** end of print CSS **/