/* 
    Document   : home-landing-page
    Created on : Jul 26, 2011, 4:45:41 PM
    Author     : Mr. K
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

/* *********************************** */
/* OTHER CSS */
root { 
    display: block;
}

/*#content {	
    width: 920px !important;
    padding-left: 15px; 
    padding-right: 15px;
}*/
/* *********************************** */

/* NEW CSS FOR THE PAGE */
h1 {
    color: #067591;
    font-size: 26px;
    font-weight: bold;
    line-height: 34px;
    padding: 30px 0 12px 0px;
    border: 0px;
    margin: 0px;
    text-align: left;
}
body.iphone-finance-app h1 {
    padding-bottom: 18px;
}

/*h2 {
    color: #5C5B61;
    font-size: 16px;
    font-weight: normal;
    line-height: 25px;
    padding: 1px 0 1px 0;
    margin-bottom: 0;
    text-align: left;
}*/

p.indent {
    padding-left: 45px;
}
.subheader ul {
    padding-left: 15px;
}
.subheader ul>li {
    padding-left: 12px;
    color: #5C5B61;
    font-size: 16px;
    font-weight: normal;
    line-height: 25px;
    margin-bottom: 0;
	padding-top: 1px;
	padding-bottom: 1px;
    text-align: left;
}

/* ############################################### CONTENT SLIDER MOD: START ############################################### */
.sliderwrapper {
	position: relative; /*leave as is*/
	overflow: hidden; /*leave as is*/
	border: 0px;
	/*width: 760px;*/ /*width of featured content slider*/
	width: 750px; /*width of featured content slider*/
	height: 22px;
	text-align: center;
	margin-top: 15px;
	margin-bottom: 15px;
	float: left;
}

.sliderwrapper .contentdiv {
	visibility: hidden; /*leave as is*/
	position: absolute; /*leave as is*/
	left: 0;  /*leave as is*/
	top: 0;  /*leave as is*/
	padding: 5px;
	background: white;
	width: 750px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
	/*height: 100%;*/
	filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
	height: 10px;
}

.sliderwrapper div em {
	font-style: italic;
	font-size: 11px;
	/*display: block;*/
}
/* ############################################### CONTENT SLIDER MOD: END ############################################### */
/*#slider1 {
	clear: both;
}*/
.facebook_like {
	clear: both;
	width: 100px;
	margin-right: 6px;
	float: left;
}
.google_plus {
	/*padding-top: 3px;*/
	float: left;
}
div.subheader_container {

}
div.gray_subheader {
	background-image:url(../images/subheader_bg.png);
	background-repeat: repeat-x;
}
div.white_subheader {
	min-height: 310px;
}
.subheader {
	width: 937px;
	margin: 0 auto;
}

.left_subheader {
	float: left;
	width: 450px;
	margin-left: 20px;
}
.right_subheader {
	float: right;
	width: 467px;
	height: 234px;
	text-align: center;
}
.left_subheader_more_wide {
	float: left;
	width: 480px;
	margin-left: 20px;
}
.right_subheader_more_narrow {
	float: right;
	width: 437px;
	height: 298px;
	text-align: center;
	padding-top: 25px;
	position: relative;
	left: 80px;
}
.subheader_container .home_right_subheader {
	background-image:url(../images/subheader_right_home_bg.png);
	background-repeat: no-repeat;
	background-position: left 10px;
	padding-top: 80px;
}
.subheader_container .iphone_right_subheader {
	/*padding-top: 30px;*/
}
.video_block {
	line-height: 21px;
	margin-bottom: 10px;
    margin-left: 27px;
    margin-top: 8px;
}
.video_block img {
	margin-right: 5px;
}
.video_block a:link {
	font-size: 14px;
	text-decoration: none;
}
.video_block a span {
	text-decoration: underline;
	color: #00B1DA;
}

.start_button_block {
	margin-left: 24px;
}
.download_button_block {
	margin-left: 0px;
	margin-top: 24px;
}
.community-line {
	/*clear: both;
	//width: 100%;*/
	margin-top: 19px;
	margin-left: 8px;
	margin-right: 15px;
	float: right;
	z-index: 9999;
}
.iphone-community-section {
	margin-right: 145px;
	z-index: 9999;
}
div.facebook-like-meta {
	width: 90px;
}
div.google-plusone-meta {
	width: 71px !important;
}
/*.content h1 {
	padding: 10px 10px 20px 14px;
}
.content h2 {
	padding: 50px 30px 20px 14px;;
}*/
.content h3 {
	font-size: 17px;
	color: #6B6B6B;
	padding: 0px 30px 4px 14px;
}
.content h4,.content h2 {
	font-size: 15px;
	color: #6B6B6B;
	padding: 0px 30px 4px 14px;
}
.content p {
	font-size: 15px;
	padding: 7px 10px 5px 14px; /* adding the padding to the sides of the elements within the blocks, instead of the block elements themselves, gets rid of any box model math. A nested block with side padding can also be used as an alternate method. */
}
.content section:last-child p {
	line-height: 19px;
}
.content a {
	font-size: 15px;
}

/* TWO IN THE LINE */
.content section .big_left_section {
	width: 467px; /* 295-18 */
	clear: both;
	float: left;
	border-right: 1px dotted gray;
}
.content section .big_right_section {
	width: 466px; /* 433-30 */
	float: right;
}
.content section div.big_left_section,.content section div.big_right_section {
	margin-top: 30px;
	margin-bottom: 10px;
}
.content section .big_left_section .left_section,.content section .big_right_section .left_section {
	width: 197px; /* 295-18 */
	clear: both;
	float: left;
}
.content section .big_left_section .right_section,.content section .big_right_section .right_section {
	width: 269px; /* 433-30 */
	float: right;
}
/* TWO IN THE LINE: END */


/* THREE IN THE LINE: START */
.content section .big_33perc_left_section {
	width: 311px; /* 295-18 */
	clear: both;
	float: left;
	border-right: 1px dotted gray;
	min-height: 170px;
}
.content section .big_33perc_center_section {
	width: 311px; /* 433-30 */
	float: left;
	border-right: 1px dotted gray;
	min-height: 170px;
}
.content section .big_33perc_right_section {
	width: 311px; /* 433-30 */
	float: right;
	min-height: 170px;
}
.content section div.big_33perc_left_section,.content section div.big_33perc_center_section,.content section div.big_33perc_right_section {
	margin-top: 30px;
	margin-bottom: 10px;
}
.content section .big_33perc_left_section .left_section,.content section .big_33perc_center_section .left_section,.content section .big_33perc_right_section .left_section {
	width: 100px; /* 295-18 */
	clear: both;
	float: left;
	text-align: right;
	padding-top: 13px;
}
.content section .big_33perc_left_section .right_section,.content section .big_33perc_center_section .right_section,.content section .big_33perc_right_section .right_section {
	width: 211px; /* 433-30 */
	float: right;
}
/* THREE IN THE LINE: END */


.content section {
	clear: both;
	background-image: url(../images/section-divider.png);
	background-repeat: no-repeat;
	min-height: 20px;
}
.content section:first-child {
	clear: both;
	background: none;
}
.content section.mid-pad p,.content section.mid-pad a {
	font-size: 12px;
}
.content section.mid-pad {
	padding-top: 32px;
}
/*.content section:last-child {
	border-top: 1px dotted gray;
	background: none;
}*/

/* ~~ The [SIDEBAR] navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
nav.follow ul {
	clear: both;
	list-style: none; /* this removes the list marker */
	margin-bottom: 15px; /* this creates the space between the navigation on the content below */
}
nav.follow ul li {
	padding-left: 0px;
	float: right;
	/* border-bottom: 1px solid #666;*/ /* this creates the button separation */
}
nav.follow ul a,nav.follow ul a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	background-image: url(../images/sprites.png);
	padding: 16px 5px 16px 5px;
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
	width: 110px;  /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
	text-decoration: none;
	font-weight: normal;
	color: #464646;
}
nav.follow ul a:hover, nav.follow ul a:active, nav.follow ul a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
	background-color: #E5E5E5;
	color: #FFF;
}
.follow ul a.twitter {
	background-position: -32px -162px;
	width: 120px;
}
.follow ul a.facebook {
	background-position: -32px -206px;
}
.follow ul a.feed {
	background-position: 18px -257px;
}
.follow ul a.googleplus {
	background-position: 4px -379px;
	width: 37px !important;
}

/* Specific */
div.download-now-button {
	float: left;
}
div.appstore-button {
	float: left;
	padding-top: 2px;
	padding-left: 20px;
}
div.four-columnlist-narrow big {
	font-size: 15px;
}
button.download-iphone-app {
	background-color: transparent;
	background-image:url(../images/content/dl-app-store-button.png);
	background-repeat: no-repeat;
	background-position: left 0px;
	width: 230px;
	height: 36px;
	border: 0 none;
}
button.download-android-app {
	background-color: transparent;
	background-image:url(../images/content/dl-market-button.png);
	background-repeat: no-repeat;
	background-position: left 0px;
	margin-left: 10px;
	width: 230px;
	height: 36px;
	border: 0 none;
}