/* ============================== */
/* ! Desktop/all                  */
/* ============================== */
	/* YARG. mobile site override */
	#entry-content .interactive ul {
		list-style-type: none;
		margin: 0;
	}
	#entry-content .interactive p {
		margin-bottom: 0;
	}
	#entry-content .interactive .btn p{
		line-height: 2.1em;
	}


	/*--- GENERAL -----------------------------------------------*/
	body {
		font-size: 12px;
		-webkit-text-size-adjust: none;
	}
	.interactive *{
		font: 1em Verdana, Geneva, sans-serif;
		margin: 0;
		padding: 0;
	}
	.interactive{
		border-top: 1px solid #333;
		margin-top: 1.67em;
	}
	.interactive h1, 
	.interactive h2, 
	.interactive h3, 
	.interactive h4, 
	.interactive h5, 
	.intereactive h6{
		font-size: 1em;
		font-family: 'Oswald', Arial, Helvetica, sans-serif;
		font-weight: 300; 
	}
	.interactive h2{
		font-size: 1.6em; 
		line-height: 1.3em;
	}
	.interactive a{
		color: red;
		text-decoration: none;
		cursor:pointer;
	}
	.interactive li{
		list-style:none;
	}
	.interactive span{
		font: inherit;
	}
	
	/* styled display */
	.interactive p.oswlg{
		font: 2em 'Oswald', Arial, Helvetica, sans-serif; 
	}
	.interactive .red{
		color: #DA161F;
	}

	/* dropdowns */
	.interactive select{
		height: 2.83em;
		width: 12.5em;
		margin: 0;
		padding: 0.5em 0.3em 0.5em 0em;
		border: 1px solid #AAA;
	   	border-radius: 0;
		line-height: 1;
		vertical-align:middle;
		display: inline;
		-moz-box-sizing: border-box;
	}
	.interactive option{
		margin: 0;
		padding: 0;
	}
	/* kill highlight on dropdowns */
	.interactive *:focus {
		outline: none;
	}

	/*--- NOTES AND CREDITS -----------------------------------------------*/
	.interactive p.notes{
		color: #666;
		font-size: 0.9em;
		line-height: 1.4em;
	}
	/* credits */
	#sources{
		padding-top: 0.4em;
		width: 100%;
		*width: 960px;	/* IE7 only*/
		border-top: #333 1px solid;
		display: none;
	}
	.interactive #sources .notes{
		color: #000;
		margin-top: 0.2em;
		text-align: right;
	}
	.interactive #credits .notes{
		color: #999;
		margin-top: 1em;
		margin-bottom: 1em;
		text-align: right;
	}

	
	
	
	/*--- ERRORS -----------------------------------------------*/
	.interactive .err{
		display: none;
	}
	.interactive .err .red-circ{
		margin-right: 0.4em;
		background-color: #F00;
	}
	.interactive .err p{
		color: #F00;
		margin: 0 0 0.8em;
		text-transform: uppercase;
	}
	
	
	
	/*--- FORM LAYOUT -----------------------------------------------*/
	/* from the 1140 grid */
	.interactive .container {
		padding-left: 0px;
		padding-right: 0px;
	}
	.interactive .row {
		width: 100%;
		margin: 0 auto;
		overflow: hidden;
	}
	.interactive .fourcol, 
	.interactive .eightcol{
		margin-right: 2%;
		float: left;
		min-height: 1px;
	}
	.interactive .row .fourcol {
		width: 33%;
	}
	.interactive .row .eightcol {
		width: 65%;
	}
	.interactive .row .twelvecol {
		width: 100%;
		float: left;
	}
	.interactive .last {
		margin-right: 0;
	}



	/*--- FORM COLUMNS -----------------------------------------------*/

	/* both columns */
	.interactive .col1, .interactive .col2{
		padding-bottom: 0.83em;
		border-bottom: 1px solid #CCC;
	}
	.interactive .col1 h2, .interactive .col2 h2{
		margin: 0.83em 0 0.5em;
		padding: 0 0 0.83em 0;
		border-bottom: 1px solid #CCC;
	}

	/* col1 */
	.interactive #demog input[type=radio]{
		float: left;
		height: 2.5em;
		margin: 0 0.2em 0 0;
		cursor: pointer;
	}
	.interactive #demog #ind-lbl{
		background: url(http://beta.images.theglobeandmail.com/static/ROB/paycheck/images/individual.png) no-repeat;
		padding-left: 22px; 
	}
	.interactive #demog #hsl-lbl{
		background: url(http://beta.images.theglobeandmail.com/static/ROB/paycheck/images/household.png) no-repeat;
		padding-left: 49px;
	}
	.interactive #demog .rad-cont{
		float: left;
		height: 2.5em;
		margin-top: 0.83em
	}
	.interactive #demog label{
		height: 2.5em;
		line-height: 2.5em;
		margin-right: 1.5em;
		display: inline-block;
		cursor:pointer;
	}
	.interactive #householdsize{
		display: none;
	}
	
	/* form template items */
	.interactive .col1 input[type="number"] {
		width: 11.9em;
	}
	.interactive #demog.form-entry{
		padding-top: 0;
	}
	.interactive .form-entry{
		padding: 0.83em;
		min-height: 2em;
		clear: right;
		overflow: auto;
	}
	.interactive .form-entry.grey{
		background-color: #EEE;
	}
	.interactive .form-entry .input-area{
		float:right;
	}
	.interactive .form-entry .input-text{
		float:left;
		max-width: 65%;
	}
	.interactive .col1 .form-entry .input-text p{
		line-height: 2.83em;
	}
	
	/* full width form items */
	.interactive .full-width select{
		width: 100%;
		float: right;
	}
	.interactive input[type=number]{
		font-size:1em;
		width: 6.67em;
		height: 2.5em;
		margin-left: 0.2em;
		padding: 0 0.3em;
	}
	.interactive input[type=number].error{
		border: 1px solid #F00;
		background-color: #FEE;
	}
	.interactive .full-width .input-text, 
	.interactive .full-width .input-area{
		width: 100%;
		float: none;
	}
	.interactive .col1 .full-width .input-text p, 
	.interactive .col1 .full-width-text .input-text p{
		line-height: 1.5em;
		margin-bottom: 0.4em;
	}
	
	/* spending form only */
	.interactive #val1{
		display: none;
	}
	.interactive p.cat-lbl{
		font-weight:bold;
	}

	/* hints & red circles */
	.interactive .red-circ{
		background-color: #DA161F;
		color: #FFF;
		text-align: center;
	}
	.interactive .red-circ.small{
		border-radius: 0.625em;
		font: bold 1em Verdana,Geneva,sans-serif;
		height: 1.25em;
		line-height:1.25em;
		position: relative;
		top: 0.08em;
		width: 1.25em;
		float: left;
	}
	.interactive .red-circ.xsmall{
		border-radius: 0.3em;
		height: 0.5em;
		line-height:0.4em;
		position: relative;
		top: 0.5em;
		width: 0.5em;
		float: left;
		margin-right: 0.4em;
	}
	
	
	/*--- SUBMIT BUTTON -----------------------------------------------*/
	.interactive #submit-cont{
		border-bottom: 1px solid #000;
		height: 7.5em;
	}
	.interactive .btn{
		width: 15em;
		margin: 0.83em 0;
		height: 5.83em;
		background: #DA161F;
		border: none;
		border-radius: 0.42em;
		color: #FFFFFF;
		float: right;
		clear:both;
		text-align: center;
		text-transform: uppercase;
		cursor: pointer;
	}
	.interactive .btn p{
		line-height: 2.92em;
	}
	.interactive .btn:active{
		background-color: #F00;
	}
	.interactive .btn.disabled, 
	.interactive .btn.disabled:active{
		background-color: #D5D5D5;
		cursor: default;
	}
	
	/*--- RESULTS SCREEN -----------------------------------------------*/
	/* header */
	.interactive .data-gallery{
		display:none;
	}
	.interactive .gallery-header{
		text-align: center;
		background-color: #EEE;
		border-bottom: #CCC 1px dotted;
		overflow: auto;
		padding: 0.83em 0;
	}
	.interactive .header-select{
		margin-top: 2em;
	}
	.interactive .gallery-header select{
		width: 25%;
	}
	/* red legend for warning message */
	.interactive .q-inner div{
		float: left;
	}
	.interactive .q-inner .red-circ.small{
		margin: 0 0.5em 0 0;
	}
	.interactive .q-outer{
		float: right;
		right: 50%;
		position: relative;
	}
	.interactive .q-inner{
		margin-top: 0.3em;
		float: right;
		right: -50%;
		position: relative;
		*float: none; /* shows in IE7 and below */
	}
	.interactive .clearboth {
		clear: both;
	}
	
	
	/*--- SLIDER -----------------------------------------------*/
	/* fixed size -- flexslider only supports init on items at a specific pixel size */
	.interactive .item{
		position: relative;
		z-index: 999;
		width: 310px;
	}
	.interactive .item .inner{
		margin: 0.83em;
		padding: 0.83em;
		background-color: #FFF;
		border: 1px solid #CCC;
	}
	/* warning banner */
	.interactive .item .banner {
		background-color: #000;
		display: none;
		width: 40px;
		height: 40px;
		position: absolute;
		right: 10px;
		text-decoration: none;
		border: 1px solid #DA161F;
		top: 0;
		*top: 10px;
	}
	.interactive .item.warning .inner{
		background-color: #FEE;
		border: #DA161F 1px solid;
	}
	.interactive .item.warning .banner {
		display: block;
	}
	.interactive .item .banner .red-circ.large{
		border-radius: 11px;
		font: 16px Verdana, Geneva, sans-serif;
		height: 22px;
		width: 22px;
		line-height:20px;
		margin: 9px 0 0 9px;
	}
	

	/* item content overlay*/
	.interactive .item .overlay{
		height: 2.5em;
		width: 100%;
		position: relative;
		margin-top: -2.5em;
		font:1.5em 'Oswald', Arial, Helvetica, sans-serif;
		
		/*opacity*/
		/* Fallback for web browsers that doesn't support RGBa */
		background: rgb(0, 0, 0);
		/* RGBa with 0.8 opacity */
		background: rgba(0, 0, 0, 0.8);
		/* For IE 5.5 - 7*/
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
		/* For IE 8*/
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
	}
	.interactive .item .overlay h5{
		font-size: 0.8em;
		margin: 0.2em 0 0.2em 0.2em;
		color: #FFF;
	}
	.interactive .item .overlay .bar{
		height: 1em;
	}
	.interactive .item .overlay .bar-label{
		line-height:1em;
		height: 1em;
		font-size: 1em;
	}
	
	/* all bars */
	.interactive .item .bar-cont{
		clear: both;
	}
	.interactive .item .bar{
		height: 1.5em;
		background-color: #DA161F;
		float: left;
		margin-right: 0.2em;
	}
	.interactive .item .bar-label{
		float: left;
		font-size: 1.2em;
		line-height: 1.2em;
		font-family: 'Oswald', Arial, Helvetica, sans-serif;
	}


	/* slide bars */
	.interactive ul.data-bars{
		margin-top: 0.2em;
	}
	.interactive .item .data-bars li{
		padding: 0.83em 0;
		border-top: 1px solid #000;
		clear: both;
		overflow: auto;
	}
	.interactive .item .data-bars .bar-cont{
		width: 200px;
		float: left;
	}
	.interactive .item .hidebar{
		display:none;
	}
	.interactive .item .data-bars .pink{
		color: #F99;
	}
	.interactive .item .data-bars .pink .bar{
		background-color: #F99;
	}
	.interactive .item .data-bars .grey .bar{
		background-color: #666;
	}
	.interactive .item .data-bars .grey{
		color: #666;
	}

	/* how you compare label */
	.interactive .item .diff-lbl p{
		margin-top: 1.2em;
		font-size: 0.8em;
		font-weight: bold;
		float: right;
		text-transform: uppercase;
		text-align: right;
	}
	/* difference */
	.interactive .item .data-bars .diff{
		width: auto;
		font: 1.5em 'Oswald', Arial, Helvetica, sans-serif;
		text-align: right;
		line-height: 1.9em;
	}
	.interactive .item .data-bars .diff.grey{
		font-size: 1.17em;
	}
	.interactive .item .data-bars h6{
		font: 0.8em Verdana, Geneva, sans-serif normal;
		line-height: 1.5em;
		margin: 0  0 0.2em;
		clear:both;
		text-transform: uppercase;
		color: #000;
	}


/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

@media handheld, only screen and (max-width: 767px) {

	body {
		font-size: 16px;
		-webkit-text-size-adjust: none;
	}
	.interactive{
		margin-top: 0;
	}
	.interactive .col1, 
	.interactive .col2{
		clear: both;
	}
	.interactive .col1{
		margin-bottom: 1.25em;
	}

	/* 1140 grid Mobile */
	.interactive .row, 
	.interactive .container {
		width: 100%;
		min-width: 0;
		margin-left: 0px;
		margin-right: 0px;
		padding-left: 0px;
		padding-right: 0px;
	}
	.interactive .row .fourcol, 
	.interactive .row .eightcol, 
	.interactive .row .twelvecol {
		width: auto;
		min-width: inherit;
		float: none;
		margin-left: 0px;
		margin-right: 0px;
	}
	
	/* form */
	.interactive input[type=number]{
		width: 6.25em;
	}
	.interactive .form-entry{
		padding: 0.6em;
	}
	.interactive .form-entry .input-text{
		max-width: 90%;
	}
	/* alter demography heights to match image size*/
	.interactive #demog .rad-cont{
		height: 1.875em;
   	 	margin-top: 0.6em;
	}
	.interactive #demog input[type="radio"] {
		height: 1.875em;
	}
	.interactive #demog label{
		line-height: 1.875em;
		height: 1.875em;
	}
	
	/* submit button */
	.interactive #submit-cont{
		border-bottom: 1px solid #000;
		height: 5.625em;
	}
	.interactive .btn{
		width: 11.25em;
		margin: 0.625em 0;
		height: 4.375em;
		background-color: #DA161F;
		border-radius: 0.31em;
		color: #FFFFFF;
		float: right;
		clear:both;
		text-align: center;
		text-transform: uppercase;
		cursor: pointer;
	}
	.interactive .btn p{
		line-height: 2.19em;
	}
	.interactive .btn:active{
		background-color: #F00;
	}
	.interactive .btn.disabled, 
	.interactive .btn.disabled:active{
		background-color: #D5D5D5;
		cursor: default;
	}
	
	/* results header */
	.interactive .header-select label{
		display: block;
		clear: both;
	}
	.interactive .gallery-header select{
		width: 90%;
		margin: 0 5%;
	}
	.interactive .red-note{
		max-width: 16em;
	}
	/* flexslider - has to be fixed width*/
	.interactive .item{
		width: 300px;
	}
	.interactive .item .inner{
		margin: 0.83em 0.4em;
		padding: 0.5em;
	}
}

/* ============================= */
/* ! Slider fix for 320 version  */
/* ============================= */

@media handheld, only screen and (max-width: 320px) {
	.interactive .item .inner{
		margin: 10px 0;
		padding: 10px;
	}
	.interactive .red-note {
    	max-width: 80%;
	}
	.interactive .q-inner .red-circ.small {
		margin: 0 0.5em;
	}
		/* warning banner */
	.interactive .item .banner {
		right: 0px;
	}
}


/* ========================================== */
/* ! Provide higher res assets for iPhone 4   */
/* ========================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
}