/*
LOG: making menu css driven

For now I have created the styles for a general page. This styles are suitable for any page.

The article definition is a particular case for a unit of information displayed on the page. 
There can be more articles in a page.
*/

/*
 Global settings like font style, page background
 are best to be specified in body.
 
 When setting the color in #rrggbb mode, you can
 use a short cut. 
 E.g: #999999 -> #999
      #336699 -> #369
*/

/*widths to find/replace: 740, 750, & 770 (just one) */

/*
 * code to fix issue of <1 screen windows being offset from >1 screen windows in firefox
*/
html { overflow-y: scroll; }
html { overflow: -moz-scrollbars-vertical; }

#container { width: 770px;}

body {
	background: #999;
	padding:0;
	margin:0;
	font-family: verdana, tahoma, arial, sans-serif; 
	width: 80%;
	margin: 0.5em auto;
	padding: 0 1em;
	min-width: 750px;
	max-width: 750px;
	/* width:expression(document.body.clientWidth > 750? "750px": "auto" );; /*added by EM per http://www.svendtofte.com/code/max_width_in_ie/ */
	font-size: 0.9em;
}


/*
 Header is the part of the site containing the logo.
*/
#header
{
	margin: 0 auto;
	height: 80px;
	border: 1px solid black; 
	border-bottom: none;
	width: 740px;
	/*
	I made a trick with the images in order to get around the resize of the page. The fullpro_logo
	is included directly from the html file and the soundvision (ie header1) is included as background
	so when the page becomes wider (eg on 1600x1024) the images keep their relative position. If the
	page is too narow, the background hides behind the logo but the page is still readable and there is no
	horizontal scroll bar (which is a thing to avoid).
	*/
	background: #fff url("images/main/header2.png") no-repeat top right;
}
img {
	/* Strip the images of any additional spacing */
	border: 0;
	margin: 0;
	padding: 0;
}

a
{
	text-decoration: none;
}

#menu
{
	border: 1px solid black;
	text-align: center;
}

/*
NOTICE: you should put no whitespaces outside and inside the li. you should 
print the menu with no newlines, just a single line, no tabs, no formatting,
no whitespaces as they include uncontrollable spacings which cannot be excluded by any
means from css.
*/

#topmenu
{
	margin: 0 auto;
	font-size: 1em;
	background: #aaa;
	text-align: center;
	padding: 0.2em 0;
}
/*
*/
#topmenu li
{
	margin: 0.2em 0;
	padding: 0;
	display: inline;
	list-style-type: none;
}
/*
*/
#topmenu li a
{
	padding: 0.2em 0.5em;
	border-bottom: 1px solid black;
	border-left: 1px solid black;
	border-right: 0px solid black;
	margin: 0;
	text-decoration: none;
	color: white;
	font-weight: bold;
}


/*
This id (ie active) is specified in order to change the look of the current active
page. This should be done dynamically from the php script which generates the menu.
*/
#topmenu li a#active
{
	background: #036;
	border-bottom: 1px solid #074986;
	background: #074986;
}
#topmenu a:hover
{
	background: #369;
	background: #074986;
}

/* Added per Igor's post 12/9/05 to fix border issue */
#topmenu a#inactive:hover 
{
	background: #aaa;
}

/* This is the submenu */
#submenu
{
	margin: 0 auto;
	padding: 0.2em 0;
	background: #074987;
	border-top: 1px solid black;
	font-size: 0.9em;
	color: white;
}
#submenu li
{
	display: inline;
	list-style-type: none;
}
#submenu a
{
	color: #ccc;
	text-decoration: none;
	padding: 0 0.5em;
}
#submenu a#sactive
{
	font-weight: bold;
}

/* 
 The content is everything displayed between menu and copyright bar.
*/
#content
{
	margin: 0 auto;
	border: 1px solid black;
	border-top: none;
	border-bottom: none;
	background: white;
	width: 740px;
}

/*
 I have added a new id, normal-body, in order to help you organize the information 
 displayed on the page. 
 
 Normal-body is everything displayed between two dotted lines.
*/

.normal-body
{
	margin:0;
	padding: 1.5em;
}
/* Normal-body has a title */
.normal-body h4 
{
	padding: 0.2em;
	margin: 0 0 1em 0;
/* 
 We can easily set a dotted line  by using this nice css definition
*/
	border-top: 2px dotted #074987;
	color: #074987;
}

/*
special normal-body tag added by Erik to try to fix spacing issue at top of products page.
*/
.normal-body-products
{
	margin:0;
	padding: 0em 1.5em 1.5em 1.5em;
}



/*
 This is the bottom blue bar that contains the copyright notice. 
*/
#copyright
{
	background: #074987;
	text-align: center; 
	color: #ccc;
	padding: 0.2em;
	border: 1px solid black;
	font-size: 0.85em;
}
#copyright a
{
	color: #ccc;
}



/*
 The bottom part that contains the  company info text
*/
#footer
{
	margin: 0 auto;
	font-size: 0.85em;
	text-align: center;
	background: white;
	color: #4d4d4d;
	padding: 0.2em;
	border: 1px solid black;
	border-top: none;
	width: 740px;
}

.demo-page
{
	padding: 1.5em;
}
/* .demo-page .nav */
.nav
{
	text-align: center;
}
.nav img
{
	display: block;
	margin: auto;
}

/* em changed product-for-sale top margin from 0 to -1 to eliminate extra space at top of products page */
.product-for-sale
{
	margin: -1em 1.5em 0 1.5em;
	padding-bottom: 1.5em;
}
.product-for-sale .photo
{
	float: left;
	border: 1px solid black;
	padding: 0 0 0 0;
	margin-right: 2em;
	margin-top: 1em
}
.product-for-sale ul li
{
	list-style-type:none;
}
.product-for-sale .note
{
	font-size: 0.8em;
}
.product-for-sale h4
{
	padding: 0.2em;
	margin: 1em 0;
	border-top: 2px dotted #074987;
	color: #074987;
}
.product-for-sale .purchase *
{
	display: inline;
	margin-right: 0.5em;
}

.product-for-sale .purchase option
{
display: block;
}


.pfs-info
{
	padding-left: 200px;
}


.text-with-image-left img
{
	float: left;
	margin: 0 1em 1em 1em;
}

/* EM copied .text-with-image-right img back into this page because it was missing and the site formatting was off.  */

.text-with-image-right img
{
	float: right;
	margin: 1em;
}


/* is the code below needed or was it just the result of A&R accidentally deleting "text-with-image-right"? */
/* EM removed space between "." and "img" on 11/8/06 after firefox web page analyzer identified problem */
.img
{
	float: right;
	margin: 1em;
}

P.required {
	color : Red;
}


.fontsytle{
	font-family: Verdana;
	font-size: small;
	color: #000000;
}