/* Elements applied to entire page */
body { margin: 0; font-family: arial, sans-serif; }
img {border: none;}

/* The Navbar */

#navbar {
	width: 800px; 
	height: 95px;
	background-color: #fff;
	background-image: url(/images/navbar.png);
	background-position: bottom;
	background-repeat: repeat-x;
	}
	
#navbar a {
	margin-top: 50px;
	display: block;
	padding: 0 10px 0 10px;
	height: 45px;
	line-height: 45px;
	float: left;
	text-align: left;
	text-decoration: none;
	font-size: 13px;
	color: #000;
	font-family: verdana;	
	}
	
#navbar a.active {
	margin-top: 62px;
	height: 22px;
	line-height: 20px;
	border-radius: 10px;
	background-color: #4b4574;
	color: #fff;
	}
	
a#logo_homelink {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 50px;
	width: 150px;
	}
	
a#navbar_home {
	margin-left: 10px;
	}

a#navbar_sitemap,
a#navbar_contact {
	font-size: 12px;
	float: right;
	}

/* comments box */
#commentbox_button {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 6em;
	height: 1.4em;
	border: 1px solid black;
	color: #fff;
	font-weight: bold;
	font-size: 12px;
	padding: .2em;
	background-color: #236;
	
	opacity: .5;
	filter: alpha(opacity=50);
	}
	
#commentbox_button:hover {
	opacity: 1;
	filter: alpha(opacity=100);
	}

#commentbox {
	position: fixed;
	bottom: 0;
	left: 0;
	
	width: 30em;
	height: 20em;
	padding: .2em;
	
	border: 1px solid black;
	background-color: #236;
	
	color: #fff;
	font-weight: bold;
	font-size: 12px;
	}

#comment_submit {
	float: right;
	}

#comment_text {
	height: 17em;
	width: 99%;
	
	/*
	
	padding: .5em;
	display: block;
	*/
	
	margin: .1em auto;
	
	color: #fff;
	font-weight: bold;
	font-size: 12px;
	
	background-color: #238;
	border: 1px solid black;
	
	overflow: auto;
	}

/* Image Viewer */
#imageviewer_nav {position: fixed; top: 0; left: 0;}
#imageviewer_nav a:hover { color: #fff; background-color: #236;}
#imageviewer_nav ul {list-style-type: none; padding: 0; margin: 0; height: 30px;}
#imageviewer_nav ul li {display: inline;}
#imageviewer_nav li a {
float: left;
padding: .5em 0 0 1em;
font-weight: bold;
color: #fff; 
background-color: #124;
text-decoration: none;
width: 10em;
height: 1.5em;
border-bottom: 1px solid black;
border-right: 1px solid black;

opacity: .6;
filter: alpha(opacity=60);
}

/* page footer */
#footer
{
	padding-top: 2em;
	font-size: .8em;
}

/* Content Elements */
#container { width: 800px;}
#content { padding: 0 1em 0 0px; margin: 0 0 0 200px;}

#content h1 {display: none; } /*in this style, h1 tags are hidden, with their text being shown inside a fancy image. */
#content .headingimage { visibility: visible; width:400px; height:45px;}  /* this is the fancy text-image. 
																									It's here only to explicitly show it's
																									existance as an h1 replacement. */

#content h1 {font-size: 1.8em; margin: 0 0 .3em 0;}
#content h2 {font-size: 1.2em; margin-bottom: 0.5em;}
#content h3 {font-size: 1.05em; margin-left: .5em; margin-bottom: 0.5em;}
#content h4 {font-size: .95em; margin-left: .7em; margin-bottom: 0.5em;}
#content p { margin: .5em 0 .5em 1em; font-size: .8em;}

/* keep an eye on this one. It may be fixed later. */
	/* It's because of an IE bug. IE ignores the margin, and uses the padding while the
	 others ignore the padding and use the margin.*/
#content ul { padding: 0 0 0 1em; margin: 0 0 0 1em;}
/* keep an eye on that one.  */

#content li { margin: .15em 0 .15em 0; padding-right: 1em; font-size: .8em; }
#content li li {padding-right: 1em; font-size: 1em;}
#content table { width: 500px; border-collapse: collapse; margin-left: 20px; margin-bottom: 15px;}
#content table th { text-align: left; border-bottom: 2px solid gray;}
#content table td { vertical-align: top; border-bottom: 1px solid #d0d0d3; padding-bottom: 4px; font-size: .8em;}
#content table strong { font-weight: bold; color: #333333;}
#content hr { border-bottom: 1px solid gray; }


/* Form Styles */
#content .form h3 { border-bottom: 1px solid #aaaaaa; margin: .2em 0 .2em .5em; }
#content .form div { border-bottom: 1px solid #aaaaaa; margin: 0 0 0 2em; padding-left: 4em; font-weight: bold; font-size: .8em;}
#content .form div span { width: 200px; float: left; display: block;}
#content .form div input { margin: .1em 0 .2em 0; width: 250px; }
#content .form div select { margin: .1em 0 .2em 0; width: 250px; }
#content .form #errorblock { font-size: 1.1em; color:#bb0000;}

/* Resource Box Styles */
#resource { 
  margin-top: 7px; 
  margin-left: 1em;
  float: right; 
  width: 170px; 
  border: 1px solid gray;
  font-size: .8em;
  }
#resource ul { padding: 0 0 0 20px; margin: 0 .5em 0 0; list-style-type: none;}
#resource ul li a:hover { display: block; background-color: #f0f0ff; color: #333;}
#resource ul li { padding: 0; margin: 0; color: #333;	border-bottom: 1px solid #f0f0ff;}
#resource ul li a img { border: none;}
#resource ul li img { float: left;}
#resource ul li a
{
	display: block;
	padding-bottom: 5px;

	text-decoration: none;
	color: #333;
	background-color: #fff;
}
#resource p
{
	margin: 0 1em 1em 1em;
}

#resource strong
{
	margin: 0 1em 1em 1em;
	font-weight: bold;
}

#rightnav
{
	padding: 0 0 0 1em;
	float: right;
	width: 170px;
}

#footer
{
	clear: both;
	text-align: center;
	width: 1000px;
	left: 0;
}

.navheading
{
	background-image: url("/images/purplebar_small.png");
	background-position:center;
	background-repeat: repeat-x;
	text-align: center;
	color: #fff;
	background-color: #fff;
	font-size: .9em;
	font-weight: 600;
	height: 30px;
	width: 180px;
	padding-top: 10px;
}

.navheading a { color: #fff; text-decoration: none;}
.resourceheading
{
	margin: 2px 0 0 0;
	background-image: url("/images/purplebar_156.gif");
	background-position:center;
	background-repeat:no-repeat;
	text-align: center;
	color: #fff;
	background-color: #fff;
	font-weight: bold;
	font-size: 12px;
}

#leftnav { width: 170px; float: left; }

ul.navlist { padding: 0; margin: 0 .5em 0 1em; list-style-type: none;}
ul.navlist li a:hover { background-color: #f0f0ff; color: #333;	}
ul.navlist li {padding: 0; margin: 0;}
ul.navlist li a
{
	display: block;
	font-size: .8em;
	padding: 0 0 5px 0;
	border-bottom: 1px solid #f0f0ff;
	text-decoration: none;
	color: #333;
	background-color: #fff;
	margin: 0;
}

ul.navlist li a img {
	margin-right: 3px;	
}

/* page specific styles */
.advertitems { font-size: .8em; }
.trainingcomplete { color: #ccc; text-decoration: line-through;}
.trainingcomplete td { text-decoration: line-through; }

.downloadheading {
	background-image: url("/images/purplebar_huge.png");
	width: 560px;
	background-position:center;
	background-repeat:no-repeat;
	font-size: 1.3em;
	line-height: 50px;
	color: #fff;
	height: 50px;
	padding-left: 10px;
}

.downloadcategory {	width: 540px; height: 40px; line-height: 40px; padding-left: 10px;}

.downloadcategory span { font-size: .9em; font-weight: bold; float: left; }

.downloadcategory a {
	font-size: .9em;
	font-weight: bold;
	float: right;
}

.downloaditem {width: 550px;	margin-left: 10px; border-bottom: 1px solid #f0f0ff; margin-bottom: 8px;}
.downloaditem p { }

.downloaditem span { padding-left: 15px;}
.downloadlinks{float: right;	font-size: .9em; }

/*download page hover background colors */
.downloadcategory:hover { background-color: #efefff;}
.downloaditem:hover { background-color: #efefff;}

/*distributor list page */
.distributorlist { width: 260px; float: left; padding-top: 1em;}
.distributorlist a {display: block;}

/*distibutor media page */
.mediaitem {
	border: 1px solid #cccccc;
	float: left;
	width: 275px;
	height: 150px;
	margin: 5px;
	background: #f0f0f0;
	}
.mediaitem img {
	float: left;
	border: 1px solid #cccccc;
	margin: 6px;
	}
.mediatitle {
	font-size: 1.05em;
	margin: .3em;
	font-weight: bold;
	}
	
/* appnotes */
.appnote { 
	float: left;
	height: 125px;
	width: 280px;
	overflow: hidden;
	background-color: #f8f8f8;
	background-image: url(/images/appnotebox.png);
	color: #000;
	padding:1px;
	margin: 5px;
	}
	
.appnote:hover {
	background-image: url(/images/appnotebox_hover.png);
	background-color: #eaeaea;
	}
	
.appnote:hover h3 {
	background-color: #426;
	}
	
.appnote img 		{ float: left; padding-right: 7px; width: 110px; height: 125px; }
.appnote h3			{ margin-top: 0px; padding: 3px 0 3px 0; border-bottom: 1px solid #236; background-color: #648; color: #fff; -moz-border-radius: 0px 10px 0 0} /* -moz-border-radius is used because firefox is the only browser doing it wrong */
.appnote p		 	{ display: none; }
.appnote p.tags 	{ display: block; font-style: italic; }
.appnavtag img		{ margin-left: -16px; }

/* front, "main" page */
#frontpage {
	float: left;
	}
#frontpage img{
	float: left;
	}

#frontpage table {
	float: left;
	}
#frontpage tr td {
	border-collapse: collapse;
	border: 0;
}

#frontpage table img {
	margin: -1px;
}

#frontpage #bigimage {
	height: 300px;
	} 