/********/
/*GLOBAL*/
/********/

body
{
	-moz-background-clip:border;
	-moz-background-inline-policy:continuous;
	-moz-background-origin:padding;
	background: #fffFFF;
	color: #4D528C;
	font: 10pt Trebuchet MS, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	margin: 0px 0px 0px 0px;
	padding: 0px;
}

p
{
	color: #e88326;
	font-family: Trebuchet MS;
}

a 
{
	border:medium none;
	color: #f3a433;
	cursor:pointer;
	outline-color:-moz-use-text-color;
	outline-style:none;
	outline-width:medium;
	text-decoration: none;
}

/*top nav*/

.header 
{
	margin: auto;
	position: relative;
	width: 950px;
	height: 100px;
	

}

.header .topnav
{
	margin:0;
	top: 80px;
}

.topnav ul.tabs a.nav 
{
	height: 24px;
	float: left;
	outline: none;
	text-indent: -9999px;
}



ul.tabs 
{
	list-style: none;
	margin: 0;
}


ul.tabs ol 
{
	display: none;
	position: absolute;
}


ul.tabs li:hover ol 
{
	display: block;
}

ul.tabs li ol li
{
	display: block;
	text-align: left;
}

.topnav ul.tabs a.nav 
{
	background: url(image/topnav.png) 0 0 no-repeat;
}

/*
.topnav ul.tabs a.nav:hover
{
	background: url(image/piggylearn.png) 0 0 no-repeat;

}

*/
.topnav ul.tabs 
{
	font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-size:12px;
	height: 26px;
	line-height:14px;
	position: absolute;
	top: 80px;
	width: 650px;
	right: -80px;
	z-index: 100;
}

/*
.topnav ul.tabs ol {
	margin-top: 37px;
	width: 161px;
}
*/

.topnav ul.tabs ol a {
	background: none;
	color: #ffffff;
	display:block;
	float: none;
	text-indent: 0;
	height: auto;
	margin: 0 4px;
	padding:0px 16px;
	
}

.topnav ul.tabs ol a:hover {

	color: #fbfff8;
	background-color: #669933;
	text-decoration: none;
}

.topnav ul.tabs ol {
	margin-top: 24px;
	width: 200px;
	padding-bottom: 20px;
	
}



/* what*/
.topnav ul.tabs a#what
{
	background-position: 0 0;
	width: 200px;
}

.topnav ul.tabs li#what a:hover
{
	background-position: 0 0;
	width: 200px;
	background: url(image/piggylearn.png) 0 0 no-repeat;
}

/* benefits list style */
.topnav ul.tabs li.what ol {margin-left: -30px; width: 190px;}
.topnav ul.tabs li.what ol a {padding:5px 19px 5px 13px;}
.topnav ul.tabs li.what li {background-color: #99cc33;
}

/* benefits */
.topnav ul.tabs a#benefits
{
	background-position: -210px 0;
	width: 110px;
}

/* benefits list style */
.topnav ul.tabs li.benefits ol {margin-left: 165px; width: 130px;}
.topnav ul.tabs li.benefits ol a {padding:5px 19px 5px 13px;}
.topnav ul.tabs li.benefits li {background-color: #99cc33;
}

/* how */
.topnav ul.tabs a#how
{
	background-position: -325px 0;
	width: 160px;
}

/* benefits list style */
.topnav ul.tabs li.how ol {margin-left: 280px; width: 150px;}
.topnav ul.tabs li.how ol a {padding:5px 19px 5px 13px;}
.topnav ul.tabs li.how li {background-color: #99cc33;
}

/* about */
.topnav ul.tabs a#about
{
	background-position: -485px 0;
	width: 85px;
}

/* about list style */
.topnav ul.tabs li.about ol {margin-left: 450px; width: 100px;}
.topnav ul.tabs li.about ol a {padding:5px 19px 5px 5px;}
.topnav ul.tabs li.about li {background-color: #99cc33;
}


#logo 
{
	-moz-background-clip:border;
	-moz-background-inline-policy:continuous;
	-moz-background-origin:padding;
	background:transparent url(image/rh_logo_beta.png) 	no-repeat scroll 0 0;
	display:inline;
	float:left;
	height:80px;
	text-indent:-1000em;
	width:300px;
	padding-top: 20px;
}

#login 
{
	height: 45px;
	width: 153px;
	float: right;
	padding: 10px;

}

a:hover.signup
{
	background-position: -53px -45px;
}

a:hover.signin
{
	background-position: 0px -45px;
}

a.signin
{
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(image/signup_beta.png) no-repeat scroll 0 0;
float:left;
height:45px;
width:53px;
background-position: 0 0;
text-indent:-9999px;
}

a.signup
{
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(image/signup_beta.png) no-repeat scroll 0 0;
float:right;
height:45px;
width:100px;
background-position: -53px 0;
text-indent:-9999px;
}

/*social*/

#socialwide
{
background-color:#99cc33;
margin:0 auto;
width:100%;
height:50px;
}

#social 
{
background-color:#99cc33;
color:#6FBC8E;

margin:0 auto;
text-align:right;
width:950px;
height:50px;
}

#social p 
{
	float:left;
	color: #ffffff;
	font-size: x-small;
	
}


#icons 
{
display:inline;
float:right;
text-transform:uppercase;
padding-top: 10px;
padding-right: 10px;
}


#social #icons a 
{
display:block;
float:left;
margin-left:5px;
}


#twitter 
{
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(image/twitter.png) no-repeat scroll 0 0;
height:25px;
width:25px;
}

#facebook {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(image/facebook.png) no-repeat scroll 0 0;
height:25px;
width:25px;
}

#rss {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(image/rss.png) no-repeat scroll 0 0;
height:25px;
width:25px;
}

/********/
/*FOOTER*/
/********/

.footerwide
{
	background-color: #99cc33;	
	padding:0px;
	margin: 0 auto;
	position: relative;
	width: 100%;
	height: 200px;
}

.footer 
{
	background-color: #99cc33;	
	padding:0px;
	margin: 0 auto;
	position: relative;
	width: 950px;
	height: 200px;
	font-size: x-small;
}


.footer ul 
{
	color:#dcecc1;
	list-style-type: none;
	margin: 0px;
	float: left;
	width: 15%;
	text-align: left;
	
	
}

.footer li p
{
	color:#dcecc1;
	font: Trebucht MS;
	text-align: left;
	
}

.footer a 
{
	color:#dcecc1;
	font: Trebucht MS;
	
}


.footer a:hover
{
	text-decoration: underline;
}

/*******/
/*PRINT*/
/*******/








/******/
/*HOME*/
/******/



.homebody
{

	height: 100%;
	margin:0 auto;
	position: relative;
	width: 950px;	
}

.homebodywide
{
	/*background-color: #FFFFFF;*/
	background-image:url('image/tabletop.png');
	background-position: bottom left;
	background-repeat: repeat-x;
	min-height: 550px;
	max-height: 100%;
	margin:0 auto;
	position: relative;
	width: 100%;	
}

.homebody a:hover
{



}
.container {
margin:0 auto;
width:950px;
}

/*conent area*/

.promo
{

	width: 950px;
	height: 350px;
	/* background-image:url('image/piggylearn.png'); */
	background-image: url('image/coinjar.png');

}

.promo-free
{

	width: 950px;
	height: 350px;
	/* background-image:url('image/piggylearn.png'); */
	background-image: url('image/coinjar.png');

}

.promo-easy
{

	width: 950px;
	height: 350px;
	/* background-image:url('image/piggylearn.png'); */
	background-image: url('image/blocks.png');

}

.promo-personal
{

	width: 950px;
	height: 350px;
	/* background-image:url('image/piggylearn.png'); */
	background-image: url('image/cup.png');

}

#getstarted
{
	background-image: url('image/getstarted.png');
	height: 100px;
	width: 300px;
	position: relative;
	float: right;
	z-index: 1;
	text-indent: -9998px;
	
}

/*3 containers*/

.transbox
{
	background-image: url('image/trans_box.png');
	height: 150px;
	width: 290px;
	position: relative;
	float: left;
	margin: 13px;
}

.transbox h1
{
	text-indent: -9999em;
}

.transbox p
{
	color: #858585;
	font-size: 1em;
	margin: 10px;
	margin-top: 25px;
	text-align: center;
}

#free h1
{
	background: transparent url('image/free.png') no-repeat scroll 0 0;
	width: 48px;
	height: 30px;
	margin:0 auto;
	position: relative;
	
}


#easy h1
{
	background: transparent url('image/easy.png') no-repeat scroll 0 0;
	width: 48px;
	height: 31px;
	margin:0 auto;
	position: relative;
}

#personal h1
{
	background: transparent url('image/personal.png') no-repeat scroll 0 0;
	width: 95px;
	height: 37px;
	margin:0 auto;
	position: relative;
}
/*********/
/*LEFTNAV*/
/*********/

#left
{
	float: left;
	position: relative;
}

#right
{
	float: right;
	position: relative;
}

#clear
{
	clear: both;

}

.leftnav
{
	min-height: 400px;
	max-height:100%;
	width:290px;
	margin-left: 0px;
	margin-top: 55px;	
	margin-bottom: 20px;
	margin-right: -40px;
	background: url(image/leftnav_grey.png) scroll 0 0 no-repeat;

		
}

.leftnavcontent
{
	
	height: 100%;
	width:350px;
	background: url(image/dropshadow_side.png) scroll 0 0;
	background-repeat: repeat-y;
	
		

		
}

.leftnavtop
{

	background: url(image/shadow_top_leftnav.png) no-repeat scroll left top;
	width: 350px;
	padding-top:0;
	height: 20px;
}

.leftnavbot
{

	background: url(image/shadow_bot_leftnav.png) no-repeat scroll left bottom;
	width: 350px;
	height: 20px;
	margin-bottom:0;
	padding-bottom:0;


}

.leftnav h2 {
	
	/*margin: 40px 0 20px 40px;*/
	/*text-indent: -9999px;*/
	width: 200px;
	margin: auto;
	color: #6b6b6b;
	text-align: center;
	padding-top:0px;
	padding-bottom: 10px;
	font-family: Trebuchet MS;
	font-size: x-large;
	font-style: normal;
	font-weight: 100;
	text-transform: lowercase;
	padding-top: 20px;
}

.leftnav ul {
	color: black;
	font-size: 1.2em;
	line-height: 2em;
	list-style-type: none;
	margin: 0;
	text-indent: 1em;
	
}

.leftnav ul li ul {
	display: none;
	margin: 0.4em 0;
}

.leftnav ul li.selected ul {
	display: block;
	
}

.leftnav ul li ul li {
	line-height: 2.4em;
	border: none;
	font-size: 11px;
	margin: 0;
	padding: 0;
	color: black;
}

.leftnav ul li a {
	display: block;
	text-decoration: none;
	color: #6b6b6b;
	font-family: Tahoma, Trebuchet MS;
	font-size: small;
}

.leftnav ul li li a {
	color: #666;
	display: block;
}


.leftnav ul a {
	display: block;
	color: #382d24;
}

.leftnav ul a:hover {
	background-color: white;
	color: #ff8d23;
	text-decoration: none;
}




.content
{
	height:100%;
	width:550px;
	margin-top: 50px;
	margin-left: 10px;
	margin-bottom: 50px;
	margin-right: 20px;
	

		
}

.rightcontent
{
	height: 100%;
	width:680px;
	margin-top: -29px;
	background: url(image/dropshadow_content.png) scroll 0 0; 
	background-repeat: repeat-y;
	margin-bottom: -12px;
	
}

.rightcontent a
{
	text-decoration:underline;
}

.righttop
{

	background: url(image/dropshadow_topcon.png) no-repeat scroll left top;
	width: 680px;
	padding-top:0;
	height: 20px;
}

.rightbot
{

	background: url(image/dropshadow_botcon.png) no-repeat scroll left bottom;
	width: 680px;
	height: 20px;
	margin-bottom:0;
	padding-bottom:0;

}


.content p
{
	
	color: #666666;
	font-family: Trebuchet MS;
	margin-right: 40px; 
	margin-left: 40px;
	margin-bottom:0px;
	line-height: 1.5em;
	padding-bottom: 10px;
	
}

.content h2
{
	margin-left: 40px;
	color: #7ead3f;
	font-family: Trebuchet MS;
	padding-top: 20px;


}

.content h4
{
	margin-left: 40px;
	color: #c3de65;
	font-family: Trebuchet MS;
	font-size: 1.2em;
	margin-top: -15px;


}

.content h3
{
	margin-left: 40px;
	color: #99cc33;
	font-family: Trebuchet MS;
	font-size: 1.3em;


}