/*
	Color codes:
	#ACFDA2: Bright green
	#0072FF: Dark blue
	#A0B8E8: Light purple
	
*/

	/*-----------------\
	|  General styles  |
	\-----------------*/
	html, body {
		height: 100%; 
		width: 100%;
        margin:0;			/* set the body margin to 0 -- no white psace on edges */
        padding:0;			/* set the body padding to 0 -- no white space on edges */
        border:0;			/* This removes the border around the viewport in old versions of IE */
	}

    body {
		font-family:Arial;
		font-size:12px;
		background-color:#002789;
    }
	img {
		border:0px;
	}
	
	#mainTable {
		width:800px;
	}
	
	/*-----------------\
	|  Header styles   |
	\-----------------*/
	#header {
		background-color:#ACFDA2; 	/* added bright green color background to header div */
    }

	#header p,
	#header h1 {					
		color:#000;
		font-family:Arial, Helvetica, sans-serif;
		font-size:16px;
		font-weight:bold;
		text-align:center;
		margin-top:1px;
		margin-bottom: 0px;
		padding-bottom: 0px;
		
	}
	#header h2 {					
		text-align:center;
		margin:0;
	}
	#header h3 {					/* added h3 as we are using it as the subtitle in the header */
		color:#000;
		font-family:Geneva, Arial, Helvetica, sans-serif;
		font-size:13px;
		line-height: 15px;
		margin-top:1px;
		margin-bottom: 2px;
		padding-bottom: 2px;
}
	
	#HeaderLeft {
		width:200px;
		vertical-align:bottom;
	}
	#HeaderLeft img {
		display:block; /* This was used to fix the added space below the image in Firefox. Use this only when there is only an image within the Div tag */
	}
	#HeaderRight {
		width:140px;
	}
	#HeaderRight img.nospace {
		display:block; /* This was used to fix the added space below the image in Firefox. Use this only when there is text along with an image within the Div tag */
	}

	#Logo {
	}
	
	#MainTitle {
		text-align: center;
		padding:20px 25px 10px 25px;
		min-width:439px; /* I know this is a strange number, but this is the max that this can be set at. */
   		width:expression(document.body.clientWidth < 840? "439px" : "auto" );/* IE Dynamic Expression to set the width. The extra 40pixel is added to accomodate the scrollbars. */
	}

	#Screenshot {
		margin:5px;
		text-align:center;
		font-size:10px;
	}

	/*--------------\
	|  Menu Styles  |
	\--------------*/

	/* Credits: Dynamic Drive CSS Library
	URL: http://www.dynamicdrive.com/style*/

	#headerMenu{
	width: 100%;
	background: #0072FF url(../seo/images/chromebg_new.gif) center center repeat-x;
	}
	
	#headerMenu ul{
	border: 1px solid #0072FF;
	width: 685px;
	*width: 688px; 	/*IE only rule.*/
	/*width: 99.5%;
	*width: 100%; 	IE only rule.*/
	background: #0072FF url(../seo/images/chromebg_new.gif) center center repeat-x;
	padding:5px 0;
	margin:0;
	text-align: right; 		/*set value to "right" for example to align menu to the right of page*/
	list-style:none;		/* remove the "dot" from the list style */
	}
		
	#headerMenu ul li{
	display: inline;
	font: bold 12px Arial;
	margin-right:-3px;		/* Removes the default 3px margin to the right of each menu item. */
	}
	
	#headerMenu ul li a{
	color: #0072FF;
	padding:5px 10px ; 	/* First # controls top and bottom spacing. Second controls left and right spacing. Adds spacing around the text and sets the button size. */
	margin: 0;
	text-decoration: none;
	border-left: 1px solid #A0B8E8;
	background: #ACFDA2 url(../seo/images/chromebg2_new.gif) center center repeat-x;
	}
	
	#headerMenu ul li a:hover{
	background: #0072FF url(../seo/images/chromebg_new.gif) center center repeat-x;
	color: #ACFDA2;
	}

	
	#headerMenu ul li a.signupbtn {
		color:#ff0000;
	}
	#headerMenu ul li a.signupbtn:visited {
		color:#ff0000;
	}
	#headerMenu ul li a.signupbtn:hover {
		background: #de4004 url(../seo/images/chromebg3_new.gif) center center repeat-x;
		color:#FFFFFF;
	}

	
	#footerMenu td {
		background-color:#ACFDA2;	/* This is the background color for the dark blue menu bar */
		border-top: 5px solid #0072FF;
	}
	#footerMenu ul {
	    width:99%;			/*necessary for the list menu structure, otherwise we won't have blue background across */
		*width: 100%; 	/*IE only rule.*/
		text-align:right;
	    list-style:none;			/* remove the "dot" from the list style */
	   	margin:2px 2px 2px 2px;	/* Adds 2px of space to show blue border. */
	    padding: 3px 0 3px 0; 		/* override the default ul padding (if not provided menus will be all bunched up) */
	}
	#footerMenu ul li {
	    display:inline;				/* necessary for ie6 compatibility (otherwise we get "step" menu structure */
		background-color:#ACFDA2;
		font-size:12px;
		font-family:Arial;
		color:#0072FF;
	}
	#footerMenu ul li a {
	    text-align:center;
	    text-decoration:none;
	    position:relative;
	    padding:3px 10px ; /* First number controls the top and botom spacing. Second controls left and right spacing. */
		font-weight:bold;
		color:#0072FF;
	    background:#ACFDA2;
		border-right:2px solid #0072FF;
	}
	#footerMenu ul li a:visited {
		color:#0072FF;
	}
	#footerMenu ul li a:hover {
	    background:#0072FF;		/* changed to 0072FF from 369 to match background color of dark blue */
		color:#ACFDA2;			/* changed to ACFDA2 from fff to match bright green color */
	}
	
	#footerMenu ul li a.signupbtn {
		color:#ff0000;
	}
	#footerMenu ul li a.signupbtn:visited {
		color:#ff0000;
	}
	#footerMenu ul li a.signupbtn:hover {
		background-color:#de4004;
		color:#FFFFFF;
	}
	

	#leftNav{
		width: 98%;
		font-family: Arial;
		font-size: 90%;
		margin: 10px 0;
	}
		
	#leftNav ul{
		list-style: none;
		margin: 0;
		padding: 0;
		border: none;
	}
	
	#leftNav li {
		margin: 0;
		font-weight:bold;
	}
	
	#leftNav li a{
		display: block;
		padding: 3px 8px 3px 3px;
		border-left: 5px solid #0072FF;
		background-color: #ACFDA2;
		color: #0072FF;
		text-decoration: none;
		font-weight:bold;
		width: 100%;
		border-bottom: 1px solid #A0B8E8;
	}
	
	html>body #leftNav li a{ /*Non IE6 width*/
		width: auto;
	}
	
	#leftNav li a:hover{
		border-left: 5px solid #ACFDA2;
		background-color: #0072FF;
		color: #ACFDA2;
	}
	
	#leftNav li ul li a{
		display: block;
		padding: 3px 3px 3px 15px;
		background-color: #B1FCD1;
		color: #0072FF;
		text-decoration: none;
		width: 100%;
		border-bottom: 0;
	}
	
	html>body #leftNav li ul li a{ /*Non IE6 width*/
		width: auto;
	}
	
	#leftNav li ul li a:hover{
		border-left: 5px solid #ACFDA2;
		background-color: #0072FF;
		color: #ACFDA2;
	}
	
	
	#benefits ul {
		text-decoration:none;
		padding-left: 5px;
		margin:10px 0;								/* needed in order override the built in margin */
		border:0;
		font-size:12px;
	}
	#benefits ul li {
	    list-style:none;			/* remove the "dot" from the list style */
		background: url(/images/green-blue-check.gif) left 0.1em no-repeat; /* This creates the bullets. */
    	padding-left: 20px;			/* needed in order to override the built in padding of the ul tag */
		padding-right:5px;			/* needed in order to create a space on the right */
	}

	/*--------------\
	|  Left Column  |
	\--------------*/
	#leftColumn {
		text-align:left;
		background-color:#A0B8E8;
		padding-left:5px;
		vertical-align:top;		
		margin-right:0px;
		width:150px;
	}
	#leftColumnDiv {
		width: 150px; /* Use this only with fixed width layout */
		/* Uncomment this for expandable layout.)
		min-width:150px; /* Used to set Minimum width restrictions to most browsers*/
   		/*width:expression(document.body.clientWidth < 840? "150px" : "auto" );/* IE Dynamic Expression to set the width. The extra 40pixel is added to accomodate the scrollbars. */
	}
	#leftColumnImageDiv {
		text-align:center;
	}
	
	#quote {
		text-align:center;
		margin: 10px 5px;
	}
	
	/*----------------\
	|  Center Column  |
	\----------------*/
	#contentColumn {
		vertical-align:top;
		background-color:#FFFFFF;
		/* width: 500px;*/
	}

	#contentColumnDiv {
		border:2px solid #0072FF;
		margin:5px;
		padding: 10px;
		width: 500px; /* Use this only with fixed width layout */
		/* Uncomment this for expandable layout.)
		min-width:500px;
   		width:expression(document.body.clientWidth < 840? "500px" : "auto" ); IE Dynamic Expression to set the width. The extra 40pixel is added to accomodate the scrollbars. */
	}
	#contentColumnDiv h2 {
 		background-color: #EAFDE7;
 		color:#339F21;
 		font-family:arial,helvetica,sans-serif;
 		font-size:16px;
 		font-weight:bold;
 		margin-top:1px;
 		text-align:left;
	}

	#contentColumnDiv h4 {
		font-style:italic;
	}
	#contentColumnDiv ul li span {
		font-weight:bold;
	}
	
	#learnMore {
		float:right;
	}
	#learnMore ul {
		list-style:none;
		margin:0;
		padding:0;
		text-align:center;
	}
	
	/*---------------\
	|  Right Column  |
	\---------------*/
	#rightColumn {
		background-color:#A0B8E8;
		vertical-align:top;
		width:150px;
		text-align:left;
	}
	
	#rightColumnDiv {
		width: 150px; /* Use this only with fixed width layout */
		/* Uncomment this for expandable layout.
		min-width:150px; /* Used to set Minimum width restrictions to most browsers*/
   		/*width:expression(document.body.clientWidth < 840? "150px" : "auto" );/* IE Dynamic Expression to set the width. The extra 40pixel is added to accomodate the scrollbars. */
	}
	
	#rightColumn ul {
	    list-style:none;				/* remove teh bullets from the list style */
	   	margin:10px 0 0 0;				/* apply a top margin (space) between list and content above (menu) */
	    padding: 0;						/* needed in order to override the built in padding of the ul tag */
	}
	
	#rightColumn ul li {
		background-position:top left;	/* only show the top left part of the background (inactive ... green) */
		background-repeat:no-repeat;	/* don't repeat the background */
		height:71px;					/* width and height are needed otherwise it will be "squashed" */
		width:120px;
		cursor:pointer;					/* converts the curosor to a pointer when hovering over the box */
		margin:0 auto 10px auto
	}
	#rightColumn ul li.accidental {
		background:url(/seo/images/accidental.gif);	/* image containing both inactive and activek colors */
	}
	
	#rightColumn ul li.demos {
		background:url(/seo/images/demos.gif);	/* image containing both inactive and activek colors */
	}
	
	#rightColumn ul li.signup {
		background:url(/seo/images/riskfree_signup.gif);	/* image containing both inactive and activek colors */
	}
	
	
	#rightColumn ul li.chat {
		background:url(/seo/images/forum.gif);	/* image containing both inactive and activek colors */
	}
	#rightColumn ul li.reviews {
		background:url(/seo/images/reviews.gif);	/* image containing both inactive and activek colors */
	}
	#rightColumn ul li.guide {
		background:url(/seo/images/whg.gif);	/* image containing both inactive and activek colors */
	}

	#rightColumn ul li.hover {
		background-position:bottom left;	/* special "class" created to do the hovering (for compatibility) used with Javascript code to make it all work */
	}	
	#rightColumn ul li a {
	    color:#0072FF;				/* changed the color to 0072FF dark blue from 000 */
	    text-decoration:none;
	}
	#signup {
		float:right;
		background-image:url(/seo/images/red_star.png);
		height:130px;
		background-repeat:no-repeat;
		width:85px;
		padding-top:50px;
	}
	#signup div {
		padding:0;
		margin:0;
		float:right;
		width:45px;
		font-weight:bold;
		line-height:1.5em;
		text-align:center;
	}
	#signup a {
		color:white;
	}