/*
	Color scheme:

		border: #3366CC  &  background-color: #E5ECF9  -->  important panels, lang codes, etc..

		border: #EE9D29  &  background: #FFEABD  -->  link hovering, FAQ sections, various panels, etc..

*/



/*			===  OVERALL STYLES  ===			*/

body
{
	margin: 10px;
	padding: 0px;

	font-family: verdana, sans-serif;
	font-size: 80%;
}

/* For some strange reason the table, or tr, or td is NOT inheriting font-size and font style from body the way div does!*/
table
{
	font-size: 100%;
}

a
{
	text-decoration: none;
}

a:hover
{
	text-decoration: underline;
	color: darkred;
}

h1, h2, h3, h4, h5, h6
{
	font-variant: small-caps;
	font-family: helvetica, sans-serif;
}



/*			===  TEMPLATE & NAV. STYLES  ===			*/

div.NavBar
{
	text-align: center;
	font-weight: bold;
	font-size: 85%;
	padding: 3px;
	padding-top: 5px;
	padding-bottom: 7px;

	border: 1px solid black;
	border-left-width: 0px;
	border-right-width: 0px;
	
	margin-top: 10px;
	margin-bottom: 10px;
}

div.NavPanelLeft, div.NavPanelRight
{
	padding: 10px;
	margin-bottom: 15px;

	font-weight: bold;
	font-size: 85%;
	
	border: 1px solid black;
}


div.NavPanelLeft, div.NavPanelLeftHeader
{
	margin-right: 20px;
}

div.NavPanelRight
{
	margin-left: 20px;
	text-align: left;
}

div.NavPanelLeftHeader  /* Used only on dynamic xxxxxInfo pages */
{
	padding: 5px 10px;
	font-weight: bold;
	border: 1px solid black;
	border-bottom-width: 0px;
}

div.TPAPanel
{
	line-height: 140%;
	text-align: center;
/*	padding: 5px 11px 5px 0px;*/
	font-size: 80%;
	font-weight: bold;
}


div.NavBar, div.NavPanelLeft, div.NavPanelRight
{
	background-color: #ffffef; 
	border-color: black;
}

div.NavBar a, div.NavPanelLeft a, div.NavPanelRight a
{
	border: 1px solid #ffffef;
	
	padding-top: 1px;
	padding-bottom: 3px;
	padding-left: 5px;
	padding-right: 5px;
}

div.NavBar a:hover, div.NavPanelLeft a:hover, div.NavPanelRight a:hover
{
	border: 1px solid #ee9d29;
	background-color: #ffeabd;
}

div.NavPanelLeft ul
{
	list-style-type: square;
	padding-left: 0px;
	margin-left: 30px;

	margin-top: 0px;
	margin-bottom: 10px;
	border-top: 0px;
	border-bottom: 0px;
}


div.NavPanelLeft a, div.NavPanelRight a, div.NavPanelLeft .NavLinkPlaceholder, div.NavPanelRight .NavLinkPlaceholder
{
	margin: 3px;
	display: block;
}


/* Needed for IE (without it, there's a large spacing between li tags*/
div.NavPanelLeft li a, div.NavPanelRight li a, div.NavPanelLeft li .NavLinkPlaceholder, divNavPanelRight li .NavLinkPlaceholder
{
	margin: 0px;
	padding-top: 0px;
	padding-bottom: 2px;

/*	display: inline;*/
}


div.NavPanelLeft li
{
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;

	/* Following is a fix for IE only (it MUST be set to 1) (without it, there's large spacing between li tags) */
	padding-bottom: 1px;

	font-weight: normal;
}



/*  This is a combination of:  div.NavBar a  &  div.Navbor a:hover   ;  however padding values must be reduced by 1, to get same results */
.NavLinkPlaceholder
{
	border: 1px solid #ee9d29;
	background-color: #ffeabd;
	font-weight: bold;

	padding-top: 1px;
	padding-bottom: 3px;
	padding-left: 6px;
	padding-right: 6px;
}



.LangCode
{
	color: black;
	text-decoration: none;
	
	font-family: monospace;
	font-size: 100%;   /*shows too small on FireFox  */
	font-weight: normal;
	
	border: 1px solid #3366cc;
	background-color: #e5ecf9; 

	padding-top: 0px;
	padding-left: 3px;
	padding-right: 3px;
	margin-right: 8px;
	margin-top: 0px;
}

/* Style for Google translation links */
a.UnvailableLangLinkLabel
{
	font-weight: normal;
}


/* Dealing with image links on the nav. panels */
div.NavPanelLeft a.PanelImageLink, div.NavPanelRight a.PanelImageLink
{
	display: block;
	margin-bottom: 10px;
	padding: 0px;
	text-align: center;
	
	border: 0px solid #ffffef;
	background-color: #ffffef;
}



/*			===  PAGE CONTENT STYLES  ===			*/

div.PanelAdvert
{
	float: right;
	vertical-align: top;
	padding: 10px;
	margin: 10px;
	
	background-color: #e5ecf9;
	border: 2px solid #3366cc;
	
	font-size: larger;
	font-weight: bold;
}

/* UIL stands for User Interface Label */
span.UIL
{
	font-family: monospace;
	font-weight: bold;
}

ul.FeaturesList li
{
	margin-bottom: 5px;
}

td.ContentSpaced
{
	border-bottom: 10px solid white;   /* should be using margin but it seems broken! */
}

.SectionHeader
{
	padding-left: 10px;
	border-top: 1px dashed #ee9d29;
}



div.ScreenShots
{
	vertical-align: top;
	text-align: center;

	border-top: 1px dashed gray; 
	border-bottom: 1px dashed gray; 

	background-color: #efefef;
}

.ScreenShotTile
{
	display: inline-block;
	display: -moz-inline-stack;  /* Firefox 2.0 and older */

	margin: 5px;

	/*border: 1px solid yellow;
	background-color: cyan;*/

}

.ScreenShotTile a
{
	display: block;  /* this CAN NOT be an inline-block --> images get resized to tile size */

	width: 300px;  /* 288 (max width) + 2 * 5 (margin) = 298 */
	height: 175px;  /* 165 (max height) + 2 * 5 (margin) = 175 */
}

.ScreenShotTile a:hover
{
	background-color: #ffeabd;
}

.ScreenShotTile img
{
	vertical-align: center;
	text-align: center;

	padding: 0px;
	border: 0px;
	margin: 5px;
}



/* For the table cells for the app info tables */
.AppInfo td
{
	margin-bottom: 12px; 
	margin-right: 11px;  
}

.AppInfo th
{
	text-align: left;
}

/* The background colors for all the content panels */
.ContentPanel, .SectionHeader, td.ContentSpaced, .AppInfo td, .AppInfo th, div.NavPanelLeftHeader
{
	background-color: #ffeabd;
}