body {
	font-size:medium;
	font-family:Helvetica,Arial;
	margin: 0; 
}

html { min-height: 100%; margin-bottom: 1px; }

strong { color: #000; }

#logo { float: left; }

#wrapper {
	width:960px;
	margin:30px auto;
}

#sidebar {
	float:left;
}
  .menu ul {
  	list-style: none;
  	margin:0;
  	padding:0;
  	font-size:135%;
  	font-weight: bold;
  	margin-top:85px;
  }
  
  .menu ul li a {
  	color:#50729f;
  	text-decoration: none;
  }
  
  .menu ul li.current_page_item a {
  	color:#000;
  }
  
  .menu ul li {
  	padding-bottom:.75em;
  }
  
  .menu ul ul {
  	font-size:80%;
  	font-weight: normal;
  	list-style: none;
  	margin-top:15px;
  	margin-bottom:0;
  	padding:0;
  }
  
  .menu ul ul li a {
  	color:#666;
  	padding-left:25px;
  }
  
  .menu ul ul li.current_page_item a {
  	background:url(../graphics/arrow_right.gif) top left no-repeat;
  	color:#000;
  }
  
  .menu ul ul li a:hover {
  	color:#000;
  }
  
#content,#insideContent {
	float:right;
	width:660px;
}

#insideContent {
  padding-top: 145px;
}
  #insideContent h1 {
    margin-top: 0;
  }
  
  #insideContent p,
  #insideContent li {
  	font-size:90%;
  	line-height: 1.5em;
  	padding-top:5px;
  	color: #666666;
  }
  
h1 {
font-size:135%;
margin:80px 0 15px 0;
}

.benefit {
	padding-left:75px;
	height: 65px;
}
  #insideContent .benefit p {
    padding-top: 0px;
    margin-top: 0px;
  }

.quick {
	background:url('../graphics/icon_clock.gif') top left no-repeat;
}

.easy {
	background:url('../graphics/icon_check.gif') top left no-repeat;
}

.free {
	background:url('../graphics/icon_free.gif') top left no-repeat;
}

h2 {
	font-size:120%;
	font-weight: normal;
	color:#333;
	margin:0;
}

  h2.lined {
    padding-top: 1em;
    border-bottom: 1px solid #c1c1c1;
  }

p {
	color:#666;
	margin:.5em 0 1.5em 0;
}

h3 {
	border-bottom:1px solid #ccc;
	font-size:100%;
	padding-bottom:.25em;
}

a, a:link, a:visited, a:hover, a:active, a img { border: 0 none; outline: none; }

/* HOMEPAGE */
#home_content {
  clear: both;
}
#home_content #home_postcontent {
  float: left;
  width: 440px;
}

#tryNow {
width:170px;
float:right;
margin:80px 0 20px 0;
padding-left:40px;
background:url('../graphics/arrow_down.gif') 150px 5px no-repeat;
font-size: 90%;
}

#tryNow h4 {
	margin:0 0 1em 0;
	padding:0;
	color:#900;
}

#tryNow label {
	color:#666;
}

#email,#password,#password2,#sfvalue1 {
margin:10px 0;
display: block;
font-size:140%;
width:170px;
border:1px solid #666;
}

#signUp {
float: right;
}


/* 
	root element for the scrollable. 
	when scrolling occurs this element stays still. 
*/
div.scrollable {
	
	/* required settings */
	position:relative;
	overflow:hidden;	 	
	width: 580px;	
	height:114px;	
	
	
	/* custom decorations */
	padding:10px 0;					
}

/* 
	root element for scrollable items. Must be absolutely positioned
	and it should have a super large width to accomodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
div.scrollable div.items {	
	/* this cannot be too large */
	width:20000em;	
	position:absolute;
	clear:both;		
	
	/* decoration */
	margin-left:10px;
}

/* single scrollable item */
div.scrollable div.items div {
	float:left;
	
	/* custom decoration */
	text-align:center;
	width:107px;
	padding:0;
	font-size:80%;
	margin-right: 42px;	
	-moz-border-radius:5px;
}

div.scrollable div.items img {
display:block;
margin-bottom:10px;
}

/* this makes it possible to add next button beside scrollable */
div.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
	display:block;
	width:20px;
	height:20px;
	background:url(../graphics/arrow_left.gif) no-repeat;
	float:left;
	margin:43px 10px;
	cursor:pointer;
	font-size:1px;
}

/* mouseover state */
/*a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
	background-position:0px -18px;		
}*/

/* disabled navigational button */
a.disabled {
	/*visibility:hidden !important;		*/
}

/* next button uses another background image */
a.next, a.nextPage {
	background-image:url(../graphics/arrow_right.gif);
	clear:right;	
}

.callout {
  margin-top: 1em;
  padding-top: 1em;
  border-bottom: 1px solid #e7e7e7;
}
  .callout img {
  	float:left;
  }
  
  .callout h2 {
    color: #000;
    font-size: 90%;
    font-weight: bold;
  }
  
  .callout h1, .callout h2, .callout p {
  	margin-left: 125px;
  }
  
  #insideContent .investor { border-bottom: 0; }
  #insideContent .investor p {
    margin-left: 165px;
    padding-top: 0px
  }

/* PRODUCTS */
#insideContent #footer.shell { width: 660px; }

#footer {
color:#999;
font-size:75%;
margin:40px auto;
}

#footer small {
  font-size: small;
} /* Google maps seems to add this dynamically for some reason */

#try {
  margin-top:20px;
  width: 223px;
  background:url(/graphics/arrow_try.gif) 10px 0 no-repeat;
  padding-top:70px;
}
  
  #try a {
    text-decoration:none;
    font-weight:bold;
    font-size:135%;
    color:#900;
  }
  
  #try a em {
    white-space: nowrap;
    display: block;
    font-style: normal;
  }
  
  #try p {
    margin: 0px;
    padding: 0px;
  }
  
  #try #btn-register {
    text-indent: -9999em;
    display: block;
    background: transparent url('../graphics/btn_register.gif') top left no-repeat;
    width: 122px;
    height: 37px;
  }
  #try #btn-register:hover { background-position: bottom left; }
  
.contactEmail {
margin-bottom:-4px;
}

.alignright {
float:right;
margin:0 0 10px 10px;
border-left:2px solid #999;
padding: 0 0 10px 10px;
}

/* Sketched Tables/Charts */
.graf { width: 660px; background: transparent url(/images/graf-top.gif) left top no-repeat; padding: 19px 0 0; }
  .graf .bod { width: 660px; background: transparent url(/images/graf-body.gif) left bottom no-repeat;}
  .graf .bod .left {width: 310px; float: left; } 
  .graf .bod .right {width: 310px; float: right; }
  .graf .bod h3 { background: transparent url(/images/graf-underline.gif) left bottom no-repeat; border: 0 none; margin: 0; padding: 0 0 15px; font-size: 21px; position: relative; }
  .graf .bod h3 strong { color: #9e2611; text-transform: uppercase; }
  
  .graf .bod h3 img { 
  	position: absolute; right:10px; top:-2px; }
  
  .graf.single { width: 330px; background: transparent url(/images/module-top.gif) left top no-repeat; padding: 19px 0 0; }
  .graf.single .bod { width: 330px; background: transparent url(/images/module-btm.gif) left bottom no-repeat;}
  .graf.single .bod h3 { padding: 0 15px 15px; margin: 0 9px; }
  #insideContent .graf.single .bod ul, .sidecol .graf.single .bod ul { padding: 0 24px 15px; margin: 10px 0 0; }
  #insideContent .graf.single .bod p, .sidecol .graf.single .bod p { padding: 0 24px 15px; margin: 0; }
  
  .graf.single.floatleft { padding: 19px 20px 15px 0; }
  
  #insideContent .graf .bod ul, 
  .sidecol .graf .bod ul { list-style: none; padding: 0; margin: 10px 0; }
  
  #insideContent .graf .bod ul li, 
  .sidecol .graf .bod ul li { 
  	color: #000; 
  	font-weight: bold; 
  	background: transparent url(/images/ico-check.gif) left top no-repeat; 
  	margin: 0 0 10px; 
  	padding: 2px 0 2px 32px; }
  
  .sidecol .graf .bod ul li { font-size: 90%; line-height:1.5em; }
  
  .graf p a.learn-more {
    color: #50729f;
    float: left;
    margin: 10px 0 0 10px;
    font-size: 90%;
    white-space: nowrap;
  }
  
  #btn-signup {
    text-indent: -9999em;
    display: block;
    background: transparent url('../graphics/btn_signup.gif') top left no-repeat;
    width: 180px;
    height: 39px;
    float: left;
    margin: 0;
  }
  #btn-signup:hover { background-position: bottom left; }

/*=============================================
 * ABOUT / COMPANY
 */
 
 ul.bios {
    list-style: none;
    margin: 0px;
    padding: 0px;
  }
   ul.bios li {
    float: left;
    margin: 5px 20px;
    padding: 0px;
    list-style: none;
    text-align: center;
   }
   ul.bios li.first { margin-left: 0; }
   ul.bios li.last { margin-right: 0; }
   #insideContent ul.bios li p {
    font-size: 90%;
    margin: 0;
    padding: 0;
    line-height: 1em;
   }


/*=============================================
 * LANDING PAGES
 */
 .header  { width: 100%; margin: 0 auto 35px; padding: 20px 0; background: #f2f2f2; border-bottom: 1px solid #d5d5d5; }
 .banner  { width: 960px; margin: 0 auto 40px; text-align: center;}
 .maincol { width: 672px; } 
 .sidecol { width: 250px; }
 .shell	  { width: 960px; margin: 0 auto; }
 
 .header .shell div { float: right; font-size: 12px; margin: 12px 0 0; color: #858585; }
 .header .shell div a, .header .shell div a:link, .header .shell div a:visited {color: #858585; text-decoration: underline; }
 .header .shell div a:hover { color: #4F729F; }
 
  a, a:link, a:visited { color: #9e2611; text-decoration: underline; }
  a:hover { color: #4F729F; text-decoration: none; }
 
 .banner h1 { font-size: 33px; line-height: 1.2em; margin: 0 0 15px; }
 .banner p  { font-size: 14px; line-height: 1.3em; color: #333; width: 80%; margin: 0 auto 15px; }
 .banner p a, .banner p a:link, .banner p a:visited { font-size: 18px; font-weight: bold; color: #9e2611; text-decoration: underline; }
 .banner p a:hover { color: #4F729F; text-decoration: none; }
 
 .maincol .callout { border-bottom:1px solid #E7E7E7; margin-top:0; padding-top:0; padding: 0 0 2em; margin: 0 0 2em; }
 .maincol h1 { margin: 0 0 15px 125px; }
 .maincol h4 { margin: 0 0 8px; }
 .maincol h4.check { background:url('../images/ico-check.gif') top left no-repeat; padding:6px 0 2px 32px; }
 .maincol p { line-height: 1.2em; margin: 0 0 20px; font-size: 13px; }
 .maincol .group p { padding: 12px 0; }

 .graf.single.clean, .graf.single .bod.clean { background: none; padding-top: 0px; }
 .graf.single.adjust, .graf.single .bod.clean { width: 250px; }
 .graf.single .bod.clean h3 { background-image: url(/images/graf-underline-2.gif); margin:0 9px 0 0; padding:0 15px 15px 10px; }
 .sidecol .graf.single .bod.clean ul {padding: 0 0 15px 9px;}
 
  hr {
	background:none repeat scroll 0 0 transparent;
	border-color:#9a9a9a;
	border-style:none none solid;
	border-width:medium medium 1px;
	clear:both;
	height:1px;
	margin:0;
	padding: 15px 0 0; }

/* Begin WP Images */
p img {
	padding: 0;
	max-width: 100%;
	}

/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.alignright {
	float: right;
	}

.alignleft {
	float: left;
	}
/* End WP Images */
 	    
/*------- 
Clearing floats without extra markup 
---------------------------------------------*/
.clearfix:after {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden; }

.clearfix            {display: inline-block;}
* html .clearfix    {height: 1%;}
.clearfix             {display: block;}

/* Regular Float Clearing */
.clearboth {clear:both;}

.floatleft {float: left; }

.floatright {float: right; }