@charset "utf-8";

/**
	Colors
	
	Dark Gray:         #646465 (Text)
	Dark Blue:         #293d8e (Header and Nav background, H2)
	Light Blue/Violet: #788ad4 (Sticky notes)
	Green:             #75851b (H1, Hovered Links, Bold Text)
*/

/* DO NOT MODIFY: Excerpt from Eric Meyer's CSS Reset Reloaded:
   http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
   A complete reset is not necessary, since we are setting most
   defaults below. */
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td{
margin:0;
padding:0;
font-weight:inherit;
font-style:inherit;
font-family:inherit;
text-align:left;
}

/********************************************************
 Modify the styles below to customize your site's design. 
 ********************************************************/

/* base styles */
body{
font-family:Arial, Helvetica, sans-serif; /* base font */
font-size:12px;                           /* base font-size */
color:#646465;
background:#9e9e9e;
}
#bodyWrap{
float:left;/* required to wrap contents */
width:100%;
background:#a6a6a6 url(../images/brushed-metal-tile.jpg) center top repeat;
text-align:center; /* for centering layouts (remove if not desired) */
}
#wrap{
/* next 3 styles for centering layouts (remove if not desired) */
width:830px;
margin:0 auto;
text-align:left;
}

/* By only applying the margin to the bottom, spacing between
   these common block-level elements remains consistent and
   headings can be flush with the following content if desired. */
p,ul,ol,table,form,blockquote{
margin-bottom:10px;
}

/* heading styles */
h1,h2,h3,h4,h5,h6{
color:#293d8e;
font-weight:bold;
padding-bottom:10px;
}
h1{
color:#75851b;
font-size:20px;
}
h2{
font-size:16px;
}
h3{
font-size:14px;
}
h4,h5,h6{
font-size:12px;
}
h5{
margin-bottom:-11px;
}

/* hyperlink styles */
a{
color:#293d8e;
text-decoration:underline;
}
a:visited{
/*color:#999; Don't forget to add it back in! */
}
a:hover{
color:#75851b;
}
strong a{
color:#75851b;
}
strong a:hover{
color:#293d8e;
}

/* list styles */
ul{
list-style:none;
}
li{
padding:3px;
}
ul li{
padding-left:20px; /* custom bullet (because FF has ugly bullets) */
background:url(../images/bullet.png) 8px 7px no-repeat;
}
ul.green li{
background:url(../images/bullet-green.png) 8px 7px no-repeat;
}
li ul li{
background:url(../images/bullet-circle.gif) 0 2px no-repeat;
}
ol{
list-style-position:outside;
padding-left:32px;
}
ol li{
padding-left:0;
}
li ol{
padding-left:20px;
}
/* nested lists */
li ol, li ul{
margin-bottom:0;
}

/* table styles */
td{
vertical-align:top; /* 99% of the time, you really want this */
}

/* A class is used for formatting tables so nothing weird happens
   when someone wants to use a table for layout. */
table.dataTable{
}
.dataTable caption{
color:#293d8e;
font-weight:bold;
font-size:14px;
}
.dataTable tr{
}
.dataTable th, .dataTable td{
text-align:left;
padding:5px;
}
.dataTable th{
font-weight:bold;
color:#fff;
background:#293d8e;
}
.dataTable td{
/*border-bottom:1px solid #ccc;*/
}

/* form styles */
form{
}
input{

}
label{
}
textarea{
}
button{
}
select{
}
option{
}
fieldset{
border:1px solid #7f9db9;
}
legend{
color:#646465;
margin:0 6px;
}
.contact td {
padding:5px;
}

/* other miscallaneous styles */
p{
}
strong,b{
color:#75851b;
font-weight:bold;
}
em,i{
font-style:italic;
}
hr{
clear:both;
height: 0;
border: 0;
border-bottom: 1px solid #ccc;
margin:8px 0;
}
blockquote, address{
font-style:italic;
margin:20px 20px 30px 25px;
}
blockquote p{
margin-bottom:20px;
}
address{
font-style:normal;
}
img{
/* Most browsers insist on putting margins on images even
   when margins are explicitly set to 0. This can be
   problematic when images are used for layout. */
margin:0 -3px -3px 0;
}

/* common floats used for formatting and images */
.right,.right-wide,.right-narrow{
float:right;
width:200px;
margin:0 0 10px 10px;
}
.right-wide{
width:320px;
margin:0 0 10px 5px;
}
.right-wide img {
margin-left:5px;
margin-bottom:5px;
}
.right-narrow{
width:100px;
}
.left,.left-wide,.left-narrow{
float:left;
width:200px;
margin:0 10px 10px 0;
}
.left-wide{
width:300px;
}
.left-narrow{
width:150px;
}
.clear{
clear:both;
}

/* Login forms */
.login{
font-size:11px;
padding:10px 20px;
}
.login h3{
font-size:13px;
padding-bottom:3px;
}
.login form{
text-align:right;
}
.login label{
text-align:left;
display:block;
float:left;
width:40px;
margin:1px;
font-weight:bold;
}
.login input{
font-size:11px;
margin:1px;
}
.login input.textfield{
height:12px;
width:90px;
}

/* citations for quotes */
ol.citations{
font-size:10px;
padding:0 0 0 24px;
position:relative;
top:15px;
}
.citations li{
margin:0;
padding:0;
}

/* Add any other classes here. */
.center,.adwordsCaption{
text-align:center;
}
.center *{
margin-left:auto;
margin-right:auto;
text-align:left;
}
.contactUs{
padding:0 0 2px 22px;
background:url(../images/email-send.png) 0 1px no-repeat;
}
.adwordsCaption{
position:relative;
left:-40px;
margin-top:4px;
font-size:11px;
}
p.hasIcon{
background-position:0 0;
background-repeat:no-repeat;
padding-left:22px;
}
p.hasLargeIcon{
background-position:0 0;
background-repeat:no-repeat;
padding-left:38px;
}
.partnerLogos{
text-align:center;
}
.partnerLogos img{
margin:0 20px;
}
.screenshotGroup{
float:left;
margin:20px 0;
}
.screenshotGroup a{
display:block;
float:left;
font-weight:bold;
width:180px;
margin-right:20px;
text-decoration:none;
}
.contactinfo{
width:50%;
float:left;
}

/* Begin your layout styles here. Override default styles where necessary. */
#logo{
font-size:36px;
margin-top:12px;
}
#tollfree{
float:right;
text-align:right;
font-family:"Times New Roman", Times, serif;
font-size:18px;
font-style:italic;
font-weight:bold;
color:#808080;
letter-spacing:1px;
padding:33px 10px 0 0;
}

#topnav{
width:830px;
height:31px;
background:#293d8e url(../images/nav-bg-tile.png) 0 0 repeat-x;
margin:13px 0 12px 0;
}
#topnav a, #topnav a:visited{
color:#fff;
}
#login {
float:right;
}
#rightCorner{
/*margin-left:373px;*/
float:right;
margin-right:0px;
}

#header{
float:left; /* fit to contents' height */
color:#fff;
width:830px;
background:#293d8e url(../images/header-bg-tile.jpg) 0 0 repeat-x;
}
#header h1{
color:#fff;
background:url(../images/header-bg-left.png) top left no-repeat;
font-weight:normal;
font-size:24px;
padding:28px 0 0 33px;
}
#header h1 strong{
color:#fff;
}
#header p{
color:#c1c6d4;
font-size:14px;
padding:5px 0 0 33px;
}
#header img{
margin:0px;
}
#header div{
float:left;
width:530px;
text-align:right;
background:url(../images/header-right-corner.png) top right no-repeat;
}
#header div.first{
width:300px;
text-align:left;
background:url(../images/header-bg-left.gif) 0 0 no-repeat;
}
/* just demonstrating how you can make an image/text/etc. extend beyond the
boundaries of the header without having to change any other html or css. */
#above{
position:relative;
top:-72px;
left:130px;
}

#pagebody{
clear:both;
float:right;
background:#fff;
min-height:400px;
width:830px;
}

#content{
float:right;
width:620px;
padding:34px 15px 0 0;
margin-bottom:-10px;
}

#sidenav{
float:right;
width:165px;
margin-top:10px;
padding:0;
font-size:11px;
}
#sidenav h2{
color:#75851b;
background:#eaeaea url(../images/leftnav-top.png) top left no-repeat;
padding:12px 12px;
}
#sidenav ul{
background:#eaeaea;
}
#sidenav li{
padding:4px 10px 5px 12px;
background-image:none;
}
#sidenav a, #sidenav strong a{
display:block;
padding-left:18px;
color:#646465;
background:url(../images/bullet-green-empty.png) 4px 2px no-repeat;
text-decoration:none;
}
#sidenav a:hover, #sidenav strong a:hover{
color:#646465;
background:url(../images/bullet-green-solid.png) 4px 2px no-repeat;
}
#sidenav li p{
margin:0;
padding:0 0 0 18px;
}
#sidenav a.currentPage, #sidenav strong a.currentPage{
background:url(../images/bullet-blue-diamond-solid.png) 4px 2px no-repeat;
color:#293d8e;
font-weight:bold;
}
#sidenav blockquote{
font-weight:bold;
text-align:center;
font-size:11px;
border-top:1px dotted #75851b;
padding:10px 0 5px 0;
margin:10px 20px 0 20px;
}

/** Develop, Drive, Convert */
#bottomNav {
clear:both;
float:left;
position:relative; /* Prevents getting cut off at bottom in IE */
border-top:1px dotted #75851b;
padding-top:5px;
margin-top:20px;
}
#bottomNav p{
width:190px;
float:left;
}

#bottomNav a{
display:block;
text-decoration:none;
}

#bottomNav a:hover{
}

/** Rounded corners and shadow at bottom of pageBody */
#shadow{
clear:both;
width:100%;
text-align:center;
background:#a6a6a6 url(../images/brushed-metal-tile.jpg) center top repeat;
padding-bottom:25px;
}
#shadow img{
width:830px;
margin:0 auto;
}

#footerwrap{
background:#9e9e9e url(../images/footer-tile.png) top left repeat-x;
width:100%;
height:60px;
text-align:center;
}
#footer{
color:#eee;
width:800px;
margin:0 auto;
}
#footer p{
float:left;
width:190px;
text-align:right;
padding-top:25px;
}
#footer p.first{
width:610px;
text-align:left;
}
#footer a, #footer a:visited{
color:#eee;
text-decoration:none;
}
#footer a:hover{
text-decoration:underline;
}
/* Equal Height Columns
   Tutorial: http://www.ejeliot.com/blog/61 */
#pagebody{
overflow:hidden;
}
#sidenav{
background:#eaeaea;
margin-bottom: -5000px;
padding-bottom: 5000px;
border:15px solid #fff;
border-left-width:5px;
border-bottom:none;
}
/* Content/Header Switch
	Ok, here is where I move the logo and top navigation above the content
	section while keeping it below the content section in the code.
	If anyone can figure out how to do this without so many double <div>
	wraps, please do. */
#topWrap{
position:absolute;
top:0;
width:830px;
}
#pagebody{
margin-top:220px;
}

/**
Sticky note callouts to floated to right
*/
.stickyRight{
margin:0 0 0px 10px;
padding:10px 10px 0px 10px;
width:185px;
background:#f3f3f3 url(../images/sticky-gray-bg.jpg) top right no-repeat;
float:right;

}
.stickyRight p, .stickyRight li{
padding-left:20px;
padding-right:10px;
color:#788ad4;
line-height:1.4em;
} 
.stickyRight img.bottom{
margin:10px 0 -3px 0;
}