/***************
NORMALIZE
***************/
html {-webkit-text-size-adjust: none;}

html, body{
	margin: 0px;
	padding: 0px;
}


/***************
GENERAL
***************/

html, body, #zr-main{
	height: 100%;
	width: 100%;	
}

#zr-main h1 { font-size: 22px; margin-bottom: 15px;}


.zr-page-item{
	width: 100%;
	text-align: center;
}




/***************
PAGE 1: HERO:;
***************/


#zr-hero{
	background: #004160 url('/Documents/SpendingOverview-MobileFI/images/hero-bg.jpg') no-repeat center; 
	background-size: 100% 100%;
}

	#zr-hero-content
	{
		padding: 30px 0px;
		margin: 0 auto;
	}

	#zr-hero-content img{
		margin: 0 auto;
	}


#zr-hero-checks
{
	color:#FFF;
	text-align: left;
	width:260px;
	margin: 0 auto;
	line-height: 200%;	
}

.zr-hero-check
{
	width:115%;
}

.zr-hero-check img
{
	padding: 2px 10px 0 0;
	float:left;
}





/***************
PAGE 2: TRACK:;
***************/


#zr-track{
	background: #004160 url('/Documents/SpendingOverview-MobileFI/images/track-bg.jpg') no-repeat center;
	background-size: 100% 100%;	
}


#zr-track-content
{
	width:270px;
	padding: 30px 20px 30px 20px;
	margin: 0 auto;
}

#zr-track-content img
{
	margin-left:-20px;
}








/***************
PAGE 3: OVERVIEW SLIDER
***************/

#zr-overview{
	position:relative;
	background: #e2e9eb url('/Documents/SpendingOverview-MobileFI/images/overview-bg.jpg') no-repeat center;
	background-size: 100% 100%;
	width:100%;
	margin: 0 auto;
	height:435px;
	padding: 30px 0;
}


#zr-overview-container
{
	position:relative;
	margin: 0 auto;
	width:320px;
	height: 100%;
	overflow: hidden;
}


#zr-overview-item-container
{
	position: absolute;
	left:0;
	width:1000px;
	height: 100%;
}	


.zr-overview-item-text
{
	margin: 0 auto;
	text-align: center;
	width: 260px;
}

#zr-overview-item-text h1{
	margin-bottom: 10px;
}


.zr-overview-item
{
	position:relative;
	width: 320px;
	height:100%;
	float:left;
}



.zr-overview-item-graph{
	position:absolute;
	left: 0;
	top: 125px;
}

.zr-overview-item-graph-last{
	position:absolute;
	left: 0;
	top: 145px;	
}


	/**** all graphs ****/
	.zr-overview-item-graph table{
		width: 320px;
		text-align: left;
		font-size: 10px;
	}

	/**** first two graphs ****/
	.zr-overview-item-graph table.bars{
	}

	.zr-overview-item-graph table.bars tr{
		height: 34px;
		border: 18px solid rgba(256, 256, 256, 0);
	}
	
	.zr-overview-item-graph table.bars tr td p{
		line-height: 180%;
	}

	.zr-overview-item-graph table.bars td{
		vertical-align:bottom;
		border: 10px solid rgba(256, 256, 256, 0);
	}
	
	.zr-overview-item-graph table.bars td.icon{
		text-align: right;
	}
	
	.zr-overview-item-graph table.bars td.price{
		font-weight: bold;
		text-align: right;
		font-size: 12px;
		line-height: 300%;
	}

	


	/**** last graph ****/

	.zr-overview-item-graph table.last{
		font-weight: bold;
		background: url('/Documents/SpendingOverview-MobileFI/images/bar3_bg.png') repeat;
		background-size: auto 43px;
	}

	.zr-overview-item-graph table.last tr{
		border-bottom: 1px solid #eee;
		vertical-align: center;
		height: 43px;
		border-right: 10px solid rgba(256, 256, 256, 0);
	}

	.zr-overview-item-graph table.last tr td{
		vertical-align: middle;
	}

	.zr-overview-item-graph table.last tr td.icon{
		background: url('/Documents/SpendingOverview-MobileFI/images/bar3_all.png') no-repeat;
		background-size: 43px;
		width: 43px;
		border-right: 10px solid rgba(256, 256, 256, 0);
	}

	.zr-overview-item-graph table.last tr td p.description{
		font-size: 9px;
		font-weight: normal;
	}

	.zr-overview-item-graph table.last tr td.price{
		text-align: right;
	}

	.zr-overview-item-graph table.last tr td.price p.amount{
		color: #cd392a;
		font-size: 12px;
	}

	.zr-overview-item-graph table.last tr td.price p.date{
		font-size: 9px;
		font-weight: normal;
	}

/**** control buttons ****/

.zr-bars-btn
{
	float:left;
	cursor:pointer;
}


.zr-bars-btn:hover
{
	opacity: .8;

	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

	/* Quick fix for IE 5-7 */
	filter: alpha(opacity=80);
}


#zr-bars-btns
{
	position: absolute;
	bottom: 15px;
	left:65px;
	width:194px;
	text-align: center;
}










/***************
PAGE 4: CTA / BTNS
***************/

#zr-cta{
	background: #004160 url('/Documents/SpendingOverview-MobileFI/images/cta-bg.jpg') no-repeat center;
	background-size: 100% 100%;
	color: #FFF;
}

	#zr-cta-content{
		width: 290px;
		padding: 30px 0;
		margin: 0 auto;
	}
	
	#zr-cta p{
	}

	#zr-cta a.button{
		display: block;
		margin: 15px 0;
	}

	#zr-cta a:link,
	#zr-cta a:visited,
	#zr-cta a:active,
	#zr-cta a:hover,
	#zr-cta a:focus{
		text-decoration: none;
		color: #FFF;
	}

	#zr-cta a#download{
	}
	#zr-cta a#call{
	}










/***************
PAGE 5: FAQ
***************/

#zr-faq
{
position: relative;
width: 100%;
height: auto;
text-align: center;
background: #e2e9eb url('/Documents/SpendingOverview-MobileFI/images/faq-bg.jpg') no-repeat center;
background-size: 100% 100%;
text-align: center;
}


#zr-faq-container
{
position: relative;
padding-top: 30px;
width: 280px;
margin: 0 auto;
}


#zr-faq p{
	margin-bottom: 20px;	
}

#zr-faq-list
{
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
line-height: 140%;
text-align: left;
position: relative;
margin: 10px auto 30px;
width: 280px;
-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;  
    overflow: hidden;
    -moz-box-shadow:    0px 0px 8px rgba(68,68,68,0.4);
-webkit-box-shadow: 0px 0px 8px rgba(68,68,68,0.4);
box-shadow:         0px 0px 8px rgba(68,68,68,0.4);
background-color: rgb(68,68,68); /* Needed for IEs */
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
zoom: 1;
}

.zr-faq-list-item
{
width: 100%;
height: 50px;
overflow: hidden;
border-bottom: 1px solid #e4e8ea;
}

.zr-faq-list-item.even
{
background: url('/Documents/SpendingOverview-MobileFI/images/faq_list_bg_even.jpg') 0 0 repeat-x;
}

.zr-faq-list-item.odd
{
background: url('/Documents/SpendingOverview-MobileFI/images/faq_list_bg_odd.jpg') 0 0 repeat-x;
}


.zr-faq-list-content
{
padding: 10px 30px 30px 50px;
color: #0c3d57;
*filter: alpha(opacity=0);
opacity: 0;
font-size: 11px;
}


.zr-faq-list-content.show
{
*filter: alpha(opacity=100);
opacity: 1;
}


.zr-faq-list-header
{
font-family: Verdana, Arial, sans-serif;
font-size: 13px;
line-height: 16px;
text-decoration: none;
color:#0c3d57;
margin-left: 20px;
background: url('/Documents/SpendingOverview-MobileFI/images/blue-arrow.png') no-repeat;
background-size: 11px 11px;
background-position: 0% 45%;
padding-left: 30px;
padding-top:7px;
}


.zr-faq-list-header.active
{
background: url('/Documents/SpendingOverview-MobileFI/images/blue_arrow_down.png') no-repeat;
background-size: 11px 11px;
background-position: 0% 45%;
}

.zr-faq-list-header:hover
{
color:#4f8fb0;
}


.zr-faq-link
{
color:#0c3d57;
}

.zr-faq-link:hover
{
color:#0c3d57;
text-decoration: none;
}





/***************
PAGE 6: FOOTER
***************/



#zr-footer{
	background: #004160 url('/Documents/SpendingOverview-MobileFI/images/footer-bg.png') no-repeat center; 
	background-size: 100% 100%;
}