/*
 *	Sophisticated Circuits web site master style sheet
 *	for 96dpi compliant browsers
 *	(mozilla/5.0 (macintosh; u; intel mac os x 10_5_6; en-us) applewebkit/525.27.1 (khtml, like gecko) version/3.2.1 safari/525.27.1)
 */

/* Basic page style. */

body {
	margin: 0px;
	background-color: white;
	
	text-align: center; /* For IE 5, which doesn't support auto margins for
	centering. Be sure to "text-align: left" other elements to revert this. */	

	font-family: Arial, Helvetica, sans-serif;
	color: #333;
	}


/* Styles for the page header.
   Because the header has "ears" extending all the way to the edges of the
   window, it's still styled with a table (blech). */

/* Put a styled <div> inside the header to keep the two images on one line. */
#header {
	width: 720px;
	}

	/* Make the header images fill the header cell (instead of stopping at the
	   text baseline). */
	#header img {
		vertical-align: bottom;
		}


/* Styles for the navigation menus. */

#menus {
	margin: 0px auto;
	text-align: left; /* Restore from the IE 5 centering hack. */
	position: relative;
	height: 20px;
	width: 720px;
	}

	/* Make the header images fill the header cell (instead of stopping at the
	   text baseline). */
	#menus img {
		vertical-align: bottom;
		}

	/* Style both the anchor (so IE will style the item) and the image inside
	   (so modern browsers will style the whole height of the anchor). */
	#menus a:hover, #menus img:hover {
		background-color: #eef;
		}
	
#home-menu {
	float: right;
	}

#main-menu {
	position: absolute;
	top: 0px;
	left: 16px;
	}

	/* Put a line to the left of each main menu item. */
	#home-menu img, #main-menu img {
		border-left: 1px solid #666;
		}
	
			.submenu {
				position: absolute;
				top: 20px;
				border-left: 1px solid #666;
				padding-top: 7px;
				}
				
				.submenu img {
					padding-right: 8px;
					vertical-align: bottom;
					}

.popup-menu {
	display: none; /* Will be shown by the rollover script. */
	position: absolute;
	top: 20px;
	border: 1px solid #666;
	background-color: #f7f7f7;
	}
	
	.popup-menu a {
		display: block;
		padding: 3px 3px;
		}
	
	/* Have to specify "#menus" to override its background-color. */
	#menus .popup-menu a:hover, #menus .popup-menu img:hover {
		background-color: #ddf;
		}

#about-popup, #submenu-about { left: 16px }
#products-popup, #submenu-products { left: 95px }
#purchase-popup, #submenu-purchase { left: 199px }
#support-popup, #submenu-support { left: 304px }


/* Styles for the page content region. */

#content-frame {
	width: 720px;
	margin: 46px auto 24px;
	text-align: left; /* Restore from the IE 5 centering hack. */
	}

#content {
	width: 592px;
	min-height: 320px;
	margin: 0px 64px;
	}


/* Styles for the page footer. */

#footer {
	width: 100%;
	min-width: 720px;
	text-align: center;
	font-size: 0.9em;
	}


/* Styles for assorted standard elements. */


dt {
	color: #336;
	font-weight: bold }

hr {
	border: 0;
	color: #999;
	background-color: #999;
	height: 1px }

h1, h2, h3, h4, h5, h6 {
	color: #336 }

/* Link colors. */

a:link {
	color: #339 }

a:visited	{
	color: #306 }


/* Special formatting classes */

.note {
	color: #309;
	font-weight: bold }


/* Font size styles. */

				body { /* 72 = 3/4 of 96.
					     But some browsers get wonky at 75%. */
					font-size: 76%; }
			
			h1 { font-size: 2em }
			h2 { font-size: 1.7em }
			h3 { font-size: 1.4em }
			h4 { font-size: 1.2em }
			h5 { font-size: 1.0em }
			h6 { font-size: 0.8em }
			
			/* Tip: you can nest size classes for increasing results. */
			.very-large { font-size: 1.4em }
			.large { font-size: 1.2em }
			.small { font-size: 0.9em }