/*===========================================================
STYLES FOR HOMEPAGE AND MAIN STYLES (CASCADED TO OTHER PAGES)
============================================================= */

* { margin: 0; padding: 0; }
   
body {
	background-color: #f2f2f2;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
}

strong { color: #757575; }

img { display: block; }

a:link, a:visited {
	text-decoration:none; color: #438971/*#538D80#497568*/; font-weight: bold;
}

a img { border-width: 0; }

a:hover { color: #0B615E; text-decoration:underline;}

h2 { color: #438971/*#538D80#497568*/; font-size: 140%; margin: 28px 0 1em; letter-spacing: 0.1em; clear:both;}
h2.top { margin-top: 18px; }

p { color: #5C5A60; margin: 1em 0; line-height: 1.4em;}

p.intro { color: #757575; font-weight: bold; font-size: 100%; }

ul.lista {
	list-style-image:url(images/bullet.gif);
	font-weight:bold;
	margin-left: 20px; margin-bottom: 30px;
}

ul.lista li { margin-bottom: 0.8em; }

ul.lista li a:link, ul.lista li a:visited { color: #757575; }
ul.lista li a:hover { color: #444; }



/*==================================================
LAYOUT
==================================================== */

div#page {
	width: 760px;
	margin: 0 auto;
	background-image:url(images/page-bkgrnd.gif);
	background-repeat:repeat-y;
	
}

div#masthead {
	width: 736px;
	margin-left: 12px;
	padding-top: 22px;
	background-color:#fff;
}

div#content {
	width: 736px;
	margin-left: 12px;
	background-image:url(images/sidebar-bk-top.gif);
	background-position:top right;
	background-repeat:no-repeat;
	position: relative;
	border-top: 1px solid #fff;
}

div#main {
	margin: 0 350px 80px 20px;
}
	
div#sidebar {
	position: absolute;
	top: 0;
	right: 20px;
	width: 290px;
}

img#logo {
	margin: 0 0 26px 13px;
}

/*==================================================
NAV BAR
==================================================== */

div#masthead ul {
	list-style-type: none;
	height: 24px;
	background-image:url(images/navbar-bkgrnd.gif);
	background-repeat:repeat-x;
	padding-left: 0px;

}

div#masthead li {
	display: block;
	float: left;
	height: 24px;
	background-repeat: no-repeat;
	background-position:bottom left;
	text-indent: -3000px;
}

div#masthead li a:link, div#masthead li a:visited {
	display: block;
	background-position:bottom left;
	height: 24px;
	background-repeat: no-repeat;
	text-decoration: none;
}

/*Tab is active in the following 2 cases:*/
div#masthead li.active, div#masthead li a:hover { background-position: top left; }

/*Image replacements - note that double layer prevents flickering in IE*/
li#index, li#index a { background-image:url(images/index.gif); width: 73px;}
li#news, li#news a { background-image:url(images/news.gif); width: 63px;}
li#product, li#product a { background-image:url(images/product.gif); width: 111px;}
li#about, li#about a { background-image:url(images/about.gif); width: 69px; }
li#faq, li#faq a { background-image:url(images/faq.gif); width: 50px; }
li#contact, li#contact a { background-image:url(images/contact.gif); width: 80px; }



/*==================================================
FLASH BUTTONS
==================================================== */

div.flashbutton { margin-top: 20px; }

/*Note: image on double layers prevents IE flickering*/
div.flashbutton, div.flashbutton a {
	display: block;
	height: 46px;
	width: 203px;
	background-image:url(images/flash-intro-button.gif);
	background-position:bottom left;
	text-indent:-3000px;
}

div.flashbutton a:hover { background-position:top left; text-decoration: none;}


/*==================================================
FOOTER 
==================================================== */
div#footer {
	background-image:url(images/footer-bkgrnd.gif);
	background-position:bottom left;
	background-repeat:no-repeat;
	height: 43px;	
}

div#footer p {
	color: #CBDCDA;
	padding-top: 7px; /*hack to get a top margin*/
	font-size: 90%;
}

div#footer a:link, div#footer a:visited { color: #cbdcda; font-weight: normal; }

div#footer a strong { color: #cbdcda; font-weight: bold; }

div#footer a:hover, div#footer a:hover strong { color: #fff; text-decoration: none;}

p#contactdetails { float: left; font-weight: bold; padding-left: 30px; margin: 0;}
div#footer p#contactdetails a { font-weight: bold; }
p#copyright { float: right; margin: 0; padding-right: 40px;}

/*==================================================
FORMS 
==================================================== */

input.button { padding: 0 0.4em;}

/*==================================================
EXPANDING LINKS 
==================================================== */

h3 { 
	margin: 0.5em 0;
	font-size: 100%;
	clear: both;
	background-image:url(images/rotating-bullet.gif);
	background-position: bottom left;
	background-repeat: no-repeat;
}

h3 a:link, h3 a:visited {
	background-image:url(images/rotating-bullet.gif);
	background-position: bottom left;
	background-repeat: no-repeat;
	padding-left: 15px;
	line-height: 14px;
	color: #757575;
}

h3 a:active, h3 a.active:link, h3 a.active:visited, h3 a.active:hover { background-position: top left;}

div.feature { display: none; } /*This is changed by the javascript*/