/*************************************************************************/
/********** SKELETON *****************************************************/
/*************************************************************************/

body {
  background: url(../images/backgrounds/body_background.jpg) #eaeaea top repeat-x;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 80%;
}

h1 {
	font-family: Verdana, Geneva, sans-serif;
	color: #069;
	font-size: 1.6em;
}

h2 {
	font-family: Verdana, Geneva, sans-serif;
	color: #069;
	font-size: 1.4em;
	font-weight: bold;
}

h3 {
	font-family: Verdana, Geneva, sans-serif;
	color: #069;
	font-size: 1.1em;
	font-weight: bold;
}

#wrapper {
  width: 980px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
}

a {
  color: #00F;
  text-decoration: none;
}

a:hover {
  color: #0FF;
}

#header {
  background: url(../images/backgrounds/header.jpg) center top no-repeat;
  width: 980;
  height: 248px;
  margin-top: 15px;
}

#header_text {
  float: left;
  width: 300px;
  min-height: 60px;
  margin-left: 90px;
  margin-top: 137px;
  color: #CCCCCC;
  font-style: italic;
  text-align: center;
}

#slider {
  background: url(../images/backgrounds/slider.jpg) center top no-repeat;
  height: 176px;
  overflow: hidden;
}

#mainContent_wrap {
  background: url(../images/backgrounds/mainContent.jpg) center top repeat-y;
  min-height: 400px;
  overflow: hidden;
}

#footer {
  background: url(../images/backgrounds/footer.jpg) center top no-repeat;
  width: 980px;
  height: 144px;
  overflow: hidden;
}

#footer h3 {
	color: #FFF;
	margin-top: 95px;
	margin-right: 50px;
	text-align: right;
	font-size: 0.9em;
}

#footer h3 a {
	color: #FFF;
}

#footer h3 a:hover {
	color: #FFF;
	text-decoration: underline;
}

.hideExtra {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	
}

/*************************************************************************/
/********** NAVIGATION ***************************************************/
/*************************************************************************/

/* Display all <a> tags as block-level items */
#menu a { display: block; }

/* Set margin and padding to 0px and remove bullets from all list items */
#menu ul { 
	padding:    0px;
	margin:     0px;
	list-style: none;
}

/* Move sub menu items off the screen and out of view until called */
#topMenu li ul {
	position: absolute;
	left:     -999em;
}

/* Display sub menus when the mouse hovers over the top menu item (Used by JavaScript) */
#topMenu li:hover ul, #topMenu li.showMenu ul { left: auto; }

#menu {
	width: 938px;
	float: left;
	height: 45px;
	margin-top: 5px;
	margin-left: 23px;
	margin-right: 21px;
	line-height: normal;
	font-family: Verdana;
}

#menu_wrap {
	margin-left: 15px;
	line-height: normal;
	border-right: 1px solid #006;
}

#menu li {
	float: left; /* Display top menu items horizontally from left to right */
}

#topMenu a { 
  border-right: 1px solid #006;  /* Remove right border from all menu items (to stop double borders between top menu items) */
  text-decoration: none;  /* Remove underline from all menu item links */
  width: 130px;  /* Top menu item width (adjusted from 150px to account for border width) */
  height: 32px;
  padding-top: 12px;
}


.topMenuLink a {
  color: #FFF;  /* Set color of top menu text */
  font-weight: bold;  /* Make top menu text bold */
  text-align: center;  /* Center top menu text in menu button */
}

.topMenuLink a:hover {
  background-color: #369;  /* Set top menu rollover background color */
  color: #FFF;  /* Set top menu rollover text color */
}

.topMenuLink a#lastMenu { 
  border-right-width: 1px;  /* Add right border to last top menu item */
  width: 130px;  /* Adjust last top menu item width to fit within top menu */
}

.subMenu {
  background-color: #0b404d;  /* Set the background color of the sub menus */
  border: 1px solid #006;  /* Add the right border back to the sub menus */
  width: 130px;  /* Set the width of the sub menus */
}

.subMenu a {
  color: #FFF;  /* Set the font color of the sub menu items */
  font-weight: normal;  /* Return the font weight to normal for sub menu items */
  height: 20px;  /* Set the height of the sub menu items */
  line-height: 20px;  /* Set the line height of teh sub menu items (for vertical alignment) */
  margin-top: -1px;  /* Set the top border of each sub menu link to -1px to remove double borders */
}

.subMenu a:hover {
  background-color: #369;  /* Set sub menu rollover background color */
  color: #FFF;  /* Set sub menu rollover text color */
}

.subMenu#last { width: 130px; }  /* Adjust width of last sub menu to align right border correctly */

.subMenu#last a { width: 130px; }  /* Adjust width of links in last sub menu to display right border on rollover */

#login_box {
	width: 245px;
	height: 155px;
	float: left;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 8px;
}

#loginLeft {
	width: 100px;
	float: left;
	margin-right: 20px;
}

#loginRight {
	width: 100px;
	float: left;
}

.login {
	width: 220px;
	height: 130px;
	color: #009;
	font-weight: lighter;
}

.loginField {
	float: right;
	background: #999;
	border: #666 1px solid;
	font-size: 90%;
	margin-right: 5px;
	color: #009;
	margin-top: -14px;
	font-family: Tahoma, Geneva, sans-serif;
}

.loginButton {
	background: #999;
	color: #009;
	border: 1px solid #333;
	float: right;
	padding: 2px 10px;
	margin-right: 8px;
}

.fieldSet_title {
	font-weight: bold;
	color: #069;
}

.didYouKnow_title {
	font-size: 110%;
	font-weight: bold;
	color: #006;
}

#didYouKnow_box {
	width: 480px;
	height: 150px;
	float: left;
	padding-right: 10px;
	margin-top: 8px;
}

.didYouKnow {
	width: 455px;
	height: 130px;
	color: #009;
	font-weight: lighter;
}

#logoBox {
	float: left;
	margin-top: 12px;
}

/*************************************************************************/
/********** BODY *********************************************************/
/*************************************************************************/

#mainContent {
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	color: #009;
}

#fullWidthClear {
	width: 100%;
	clear: both;
}

#flashWarning {
	padding: 5px 10px;
	width: 800px;
	clear: both;
	color: #F00;
	text-align: center;
	font-wight: bold;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #F00;
}

#flashNotice {
	padding: 5px 10px;
	width: 800px;
	clear: both;
	color: #060;
	text-align: center;
	font-wight: bold;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #060;
}

/*************************************************************************/
/********** MAIN *********************************************************/
/*************************************************************************/

#mainLeftWrap {
	width: 280px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: -10px;
	float: left;
}

#liveWrap {
	width: 260px;
	background: black;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 10px;
	color: white;
	float: left;
}

#liveWrap a {
	color: white;
}

#liveWrap a:hover {
	color: #0FF;
}

#mainLinkWrap {
	width: 580px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
	float: left;
}

#mainCenterWrap {
	width: 280px;
	float: left;
	margin-top: 25px;
	margin-right: 20px;
}

.centerWrap {
	width: 280px;
	padding: 10px;
	float: left;
	font-size: 90%;
	background: url(../images/backgrounds/mainCenterTop.jpg) top center no-repeat;
	margin-top: 10px;
}

.centerBody {
	margin-top: 6px;
	padding-left: 15px;
	padding-right: 15px;
	background: url(../images/backgrounds/mainCenterMiddle.jpg) top center repeat-y;
	overflow: hidden;
}

.centerFooter {
	background: url(../images/backgrounds/mainCenterBottom.jpg) bottom center no-repeat;
	height: 38px;
	
}

#mainRightWrap {
	width: 280px;
	padding: 10px;
	min-height: 200px;
	float: left;
}

#mainRightWrap h2 {
	margin-left: 20px;
}

#registerWrap {
	width: 470px;
	margin-left: auto;
	margin-right: auto;
}

#register_terms_box {
	width: 445px;
	height: 300px;
	padding: 5px;
	overflow-y: scroll;
	font-size: 85%;
}

#register_terms_box h1 {
	font-size: 1.6em;
}

.registerField {
	font-size: 90%;
	font-family: Arial, Helvetica, sans-serif;
	color: #009;
	border: 1px solid #8bcdfb;
	padding-left: 5px;
	padding-right: 5px;
}

.registerFieldSet {
	margin-bottom: 20px;
	width: 450px;
}

.register_submitButton {
	color: #009;
	background: #5699e4;
	border: #009 1px solid;
	padding: 2px 10px;
	float: right;
}

#terms {
	font-size: 90%;
	text-align: justify;
}

#terms h1,h2 {
	text-align: left;
}

#contactLeft {
	width: 310px;
	float: left;
	margin-right: 15px;
}

#contactRight {
	width: 570px;
	float: left;
}

.contact {
	width: 300px;
	color: #009;
	font-weight: lighter;
	float: left;
	margin-bottom: 5px;
}

.contactForm {
	width: 550px;
	color: #009;
	font-weight: lighter;
	float: left;
	margin-bottom: 5px;
	min-height: 400px;
}

.contactField {
	font-family: Verdana, Geneva, sans-serif;
}

#highlightsWrap {
	width: 880px;
	background: black;
	color: white;
	padding: 10px;
	margin-bottom: 10px;
}

#highlightsWrap h2 {
	font-family: Verdana, Geneva, sans-serif;
	color: #069;
	font-size: 1.2em;
	font-weight: bold;
}

.highlightsText {
	width: 600px;
	float: left;
	background: none;
}

/*************************************************************************/
/********** PRODUCTS *****************************************************/
/*************************************************************************/

.productWrap {
	border-bottom: 1px solid #000066;
	float: left;
	margin: 5px;
	min-height: 200px;
	margin-bottom: 15px;
	padding: 10px;
}

.productDetails {
	float: left;
	width: 450px;
	min-height: 200px;
	margin-right: 20px;
	text-align: justify;
	padding: 10px 10px;
}

.productDetailsBig {
	float: left;
	width: 850px;
	min-height: 200px;
	margin-right: auto;
	margin-left: auto;
	text-align: justify;
	font-size: 1.4em;
	padding: 10px 10px;
}

.productDetails h2 {
	text-align: left;
	color: #069;
}

.productImage {
	float: right;
	width: 350px;
	min-height: 200px;
	margin-top: 12px;
	padding: 10px 10px;
}

.productBigImage {
	margin-left: 20px;
	
}

.productTitle {
	width: 100%;
	clear: both;
	margin-bottom: 10px;
	padding: 0px 10px;
}

.productTitle h2 a {
	color: #069;
}

.productTitle h2 a:hover {
	color: #0FF;
}

/*************************************************************************/
/********** DOCUMENTATION ************************************************/
/*************************************************************************/

.faqQuestionIDWrap h1 {
	font-size: 2.2em;
	color: #009;
	margin-left: 20px;
}

.faqQuestionIDWrap h2 {
	font-size: 1.6em;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #009;
}

.faqChapterWrap h2 {
	font-size: 1.4em;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #009;
}

.faqChapterWrap {
	width: 850px;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.2em;
	color: #666;
}

.faqChapter_list {
	margin-left: 40px;
	margin-bottom: 3px;
}

.faqTitleWrap {
	width: 100%;
	overflow: hidden;
	height: 80px;
	background: url(../images/backgrounds/faqTitleWrap.jpg) center top no-repeat;
}

.faqChapterWrap  a {
	color: #666;
	margin-left: 20px;
}

.faqChapterWrap  a:hover {
	color: #0FF;
}

.faqListWrap {
	width: 100%;
	background: url(../images/backgrounds/faqBodyWrap.jpg) center top repeat-y;
	overflow: hidden;
}

.faqListWrapFooter {
	width: 100%;
	height: 60px;
	background: url(../images/backgrounds/faqFooterWrap.jpg) center top no-repeat;
}

#brochureLeft {
	width: 500px;
	float: left;
	margin-right: 10px;
}

#brochureRight {
	width: 380px;
	float: left;
}

.brochureSelect {
	text-align: center;
	color: #006;
	font-weight: bold;
}

.brochureSelect a {
	padding-top: 5px;
	border: 1px #009 solid;
	padding-bottom: 5px;
	background: #84baf7;
	display: block;
}

.brochureSelect a:hover {
	background: #beeef7;
	display: block;
	padding-top: 5px;
	padding-bottom: 5px;
}

#tutorialBoxWrap {
	width: 850px;
	background: url(../images/backgrounds/faqTitleWrap.jpg) center top no-repeat;
	height: 80px;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}

#tutorialBoxWrap h1 {
	font-size: 1.8em;
	margin-left: 30px;
}

#tutorialBoxBody {
	width: 850px;
	overflow: hidden;
	background: url(../images/backgrounds/faqBodyWrap.jpg) center top repeat-y;
	margin-left: auto;
	margin-right: auto;
}

.tutorialChapterBox {
	width: 650px;
	display: block;
	margin-bottom: 20px;
}

.tutorialChapterBox a {
	display: block;
	padding: 10px 30px;
	color: #069;
}

.tutorialChapterBox a:hover {
	display: block;
	background-color: #CCC;
	padding: 10px 30px;
}

#tutorialFooter {
	width: 850px;
	overflow: hidden;
	height: 60px;
	background: url(../images/backgrounds/faqFooterWrap.jpg) center bottom no-repeat;
	margin-left: auto;
	margin-right: auto;
}

#tutorialNav {
	clear: both;
	padding-top: 20px;
	font-size: 1.2em;
}

#tutorial2 {
	width: 580px;
	margin-left: auto;
	margin-right: auto;
	text-align: justify;
}

/*************************************************************************/
/********** QUOTATION ****************************************************/
/*************************************************************************/

.quoForm {
	font-size: 85%;
	font-family: Arial, Helvetica, sans-serif;
}

.quoButton {
	font-size: 90%;
	background: #CCCCCC;
	border: 1px solid #666666;
	padding: 2px 10px;
}

.quoFloat {
	float: right;
	margin-left: 10px;
}

.quoFloatLeft {
	float: left;
	margin-right: 40px;
}

#quoText {
	width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.editQuote {
	padding: 5px 5px;
	border: #000066 solid 1px;
	background-color: #9CF;
}

.quoDiscounts {
	color: #F00;
}

.quoExtras {
	color: #006;
}

.quoBold {
	font-weight: bold;
}

#quoFieldLeft {
	width: 320px;
	float: left;
	margin-right: 20px;
}

.quoFieldSet_left {
	width: 300px;
	height: 225px;
}

#quoFloatRight {
	width: 560px;
	float: left;
}

.quoFieldSet_right {
	width: 540px;
	height: 225px;
}

/*************************************************************************/
/********** LICENSE ******************************************************/
/*************************************************************************/

#leftLicense {
	width: 320px;
	color: #009;
	float: left;
	margin-right: 20px;
}

#rightLicense {
	width: 560px;
	color: #009;
	float: left;
}

.licField {
	color: #009;
	font-size: 90%;
	font-family: Arial, Helvetica, sans-serif;
}

.licFieldSet {
	width: 300px;
}

.licButtonWrap {
	float: right;
	margin-top: 10px;
	clear: right;
}

.licButton {
	background: #CCC;
	color: #333;
	border: #333 solid 1px;
	padding: 2px 10px;
}

.licFieldSetRight {
	width: 530px;
	margin-top: -10px;
}

.licFieldWrap {
	margin-bottom: 10px;
}

/*************************************************************************/
/********** PASSWORD RESET ***********************************************/
/*************************************************************************/

#leftPwdReset {
	width: 500px;
	float: left;
	min-height: 100px;
}

#rightPwdReset {
	width: 380px;
	float: left;
}

.pwdResetForm {
	background: #f5f5f5;
	padding: 10px;
	padding-top: 30px;
	padding-bottom: 30px;
}