/*******************************************************************************
* This tool is developed using Rich Media's proprietary code library and may   *
* not be reproduced, altered, reverse engineered, or otherwise copied or       *
* distributed in whole or in part, without the express written permission of   *
* Rich Media.                                                                  *
*                                                                              *
* Please note that this project was developed for Manulife with the agreement  *
* that the source code will not be used for any other project, resold by       *
* Manulife, nor provided by Manulife to any other company. It is also agreed   *
* that certain calculations, validation, currency, reporting, saving and       *
* graphing functionality come from Rich Media's internally developed library   *
* and have been and will continue to be freely used by Rich Media for any of   *
* its clients.                                                                 *
*******************************************************************************/
@media only screen and (max-width : 939px) {
	* { -webkit-appearance: none; }
	
	::-webkit-scrollbar {
    width: 0; 
}
}

/*Tablet and smaller*/
/*@media only screen and (max-width : 767px) {*/
@media only screen and (max-width : 939px)/*,
only screen and (min-width : 768px ) and (orientation:portrait),
only screen and (min-width : 768px ) and (-webkit-max-device-pixel-ratio:1/1),
only screen and (min-width : 768px ) and (max-aspect-ratio:1/1)*/{

/*MAIN BLOCKS*/
	
	.tool {
		padding: 0;
	}
	
	.row#header .title, .row#mode .subtitle {
		padding-left: 25px;
	}
	
	.row#mode .toolbar {
		display: none;
	}
	
	.row#mode .radioset {
		margin: 0 0 14px 10px;
		float: left;
	}
	
	.radioset .ui-button {
		width: 30%;
	}		
		
		
/*INPUTS*/	
	
	input {
		font-size: 90%;
	}
	
	.question input#text-amortization {
		width: 30px;
	}
	
	.question input#text-payment, .question input#text-principal {
		width: 74px;
	}

	.section#input .question .slider {
		width: 170px;
	}
	
	.section#input select {
		width: 170px;
	}
	
/*PREPAYMENTS*/

	#block-form-individual .question.prepay .btn-delete {
		background: url("../img/btn-close.png") no-repeat center center;
		width: 29px;
		height: 32px;
		position: absolute;
		top: 3px;
	}
	
/*RESULTS*/	
	
	/*Statement*/
	.section#result .block#block-result-payment .box {
		width: auto;
	}
	
	/*Save More*/
	.section#result .block#block-result-savemore {
		bottom: 3px;
	}
	
/*FOOTER*/
	#infoAndTools, #rates-to-apply {
		margin-left: 25px;
		margin-right: 25px;
	}
	
	/*Info*/
	#infoAndTools .halfCol {
		width: 49%;
	}
	
	#infoAndTools #footer-col2 {
		padding-left: 2%;
	}
	
	/*Ready to apply*/
	#rates-to-apply .left, #rates-to-apply .right {
		float: none;
		width: 100%;
	}
	
	#rates-to-apply .right ul, #rates-to-apply .right ul li {
		width: 100%;
	}
	
	#rates-to-apply .left h2 {
		margin-bottom: 15px;
	}

}

/*Tablet only NEW*/
@media only screen and (max-width : 939px) and (min-width: 768px)/*,
only screen and (min-width : 768px ) and (orientation:portrait),
only screen and (min-width : 768px ) and (-webkit-max-device-pixel-ratio:1/1),
only screen and (min-width : 768px ) and (max-aspect-ratio:1/1) */{
	
/*MAIN BLOCKS*/

	.row {
		width: 768px;
	}
	.row#mode .radioset {
		width: 768px;
		margin-left:auto;
		display:block;
	}
	
	.section#input {
		padding-left: 25px;
	}
	
	.section#result {
		width: 358px;
	}
	
	.row#dashboard {
		background-position: -160px 0px;
	}
	
	.form#form-prepay {
		margin: 0px 18px;
	}
/*INPUTS*/	
	
	.section#input .block#block-input-title {
		height: auto;
		line-height: normal;
		width: 250px;
		padding: 20px 0 10px;
	}
	
	.section#input .question {
		height: 75px;
	}
	
	.section#input .questionSet {
		height: 150px;
		overflow-y: visible;
	}
	
	.section#input .question label {
		width: auto;
		display: block;
	}

	
/*PREPAYMENTS*/

	.section#input .block#block-input-cta {
		padding: 10px 0;
		width: 360px;
	}
	
	.question.prepay .prepay-front {
		width: 95%;
		padding-right: 5%;
	}
	
	
/*RESULTS*/
	
	/*Statement*/
	.section#result .block#block-result-payment .box  {
		background: url('../img/results_box_270.png') no-repeat center;
	}

	.statement p {
		width: 285px;
		margin: auto;
	}
	
	/*.section#result .block#block-result-payment .box #background-box-result-payment-small{
		display: block;
		position: absolute;
		top : 0;
		background: transparent;
		left: 23px;
		filter: progid:DXImageTransform.Microsoft.gradient(
			startColorstr=#00FFFFFF, endColorstr=#00FFFFFF
		);
		filter: prog
		id:DXImageTransform.Microsoft.AlphaImageLoader(src='img/results_box_270.png"',sizingMethod='crop');

	}
	
	.section#result .block#block-result-payment .box #background-box-result-payment-large{
		display: none;
	}*/
	
	/*Graph/Table*/
	.section#result .block#block-result-amortization {
		margin: 10px 10px 0 0;
	}
	
	/*Bar Graph*/
	.bar-graph {
		width: 310px;
		margin-left: 10px;
	}
	
	/*Amortization Table*/
	.chart {
		margin: 0;
	}
	
	.chart .font-xsmall{
		font-size: 7pt;
	}
	
	/*constants for column widths when table is 320px*/
	.mainview #result-amortization-table  .year .col0 {
		width: 36px;
	}
	.mainview #result-amortization-table .year .col1,
	.mainview #result-amortization-table .year .col2,
	.mainview #result-amortization-table .year .col3 {
		width: 67px;
	}

	.mainview #result-amortization-table  .month .col0 {
		width: 36px;
	}
	.mainview #result-amortization-table .month .col1,
	.mainview #result-amortization-table .month .col2,
	.mainview #result-amortization-table .month .col3 {
		width: 67px;
	}

	.mainview #result-amortization-table  .semimonthly .col0 {
		width: 64px;
	}
	.mainview #result-amortization-table .semimonthly .col1,
	.mainview #result-amortization-table .semimonthly .col2,
	.mainview #result-amortization-table .semimonthly .col3 {
		width: 60px;
	}

	.mainview #result-amortization-table  .biweekly .col0 {
		width: 50px;
	}
	.mainview #result-amortization-table .biweekly .col1,
	.mainview #result-amortization-table .biweekly .col2,
	.mainview #result-amortization-table .biweekly .col3 {
		width: 60px;
	}

	.mainview #result-amortization-table  .week .col0 {
		width: 34px;
	}
	.mainview #result-amortization-table .week .col1,
	.mainview #result-amortization-table .week .col2,
	.mainview #result-amortization-table .week .col3 {
		width: 67px;
	}	

/*FOOTER*/

	#infoAndTools a[href^=tel] {
		display: block;
	}

/*POPUPS*/
	
	.popup {
		width: 500px;
	}
	
	#popup-prepayments {
		width: 600px;
	}
}


/*Tablet only*/
@media only screen and (max-width : 767px) and (min-width: 640px)/*,
only screen and (min-width : 768px ) and (orientation:portrait),
only screen and (min-width : 768px ) and (-webkit-max-device-pixel-ratio:1/1),
only screen and (min-width : 768px ) and (max-aspect-ratio:1/1) */{
	
/*MAIN BLOCKS*/

	.row {
		width: 640px;
	}
	.row#mode .radioset {
		width: 97%;
	}
	
	.section#input {
		padding-left: 10px;
	}
	
	.section#result {
		width: 330px;
	}
	
	.row#dashboard {
		background-position: -263px 0px;
	}
	.row#header .title, .row#mode .subtitle {
		padding-left: 10px;
	}
	.form#form-prepay {
		margin: 0px 18px;
	}

	
/*INPUTS*/	
	
	.section#input .block#block-input-title {
		height: auto;
		line-height: normal;
		width: 250px;
		padding: 20px 0 10px;
	}
	
	.section#input .question {
		height: 75px;
	}
	
	.section#input .questionSet {
		height: 150px;
		overflow-y: visible;
	}
	
	.section#input .question label {
		width: auto;
		display: block;
	}

	
/*PREPAYMENTS*/

	.section#input .block#block-input-cta {
		padding: 10px 0;
		width: 360px;
	}
	
	.question.prepay .prepay-front {
		width: 95%;
		padding-right: 5%;
	}
	
	
/*RESULTS*/
	
	/*Statement*/
	.section#result .block#block-result-payment .box  {
		background: url('../img/results_box_270.png') no-repeat center;
	}

	.statement p {
		width: 285px;
		margin: auto;
	}
	
	/*.section#result .block#block-result-payment .box #background-box-result-payment-small{
		display: block;
		position: absolute;
		top : 0;
		background: transparent;
		left: 23px;
		filter: progid:DXImageTransform.Microsoft.gradient(
			startColorstr=#00FFFFFF, endColorstr=#00FFFFFF
		);
		filter: prog
		id:DXImageTransform.Microsoft.AlphaImageLoader(src='img/results_box_270.png"',sizingMethod='crop');

	}
	
	.section#result .block#block-result-payment .box #background-box-result-payment-large{
		display: none;
	}*/
	
	/*Graph/Table*/
	.section#result .block#block-result-amortization {
		margin: 10px 10px 0 0;
	}
	
	/*Bar Graph*/
	.bar-graph {
		width: 310px;
		margin-left: 10px;
	}
	
	/*Amortization Table*/
	.chart {
		margin: 0;
	}
	
	.chart .font-xsmall{
		font-size: 7pt;
	}
	
	/*constants for column widths when table is 320px*/
	.mainview #result-amortization-table  .year .col0 {
		width: 36px;
	}
	.mainview #result-amortization-table .year .col1,
	.mainview #result-amortization-table .year .col2,
	.mainview #result-amortization-table .year .col3 {
		width: 67px;
	}

	.mainview #result-amortization-table  .month .col0 {
		width: 36px;
	}
	.mainview #result-amortization-table .month .col1,
	.mainview #result-amortization-table .month .col2,
	.mainview #result-amortization-table .month .col3 {
		width: 67px;
	}

	.mainview #result-amortization-table  .semimonthly .col0 {
		width: 64px;
	}
	.mainview #result-amortization-table .semimonthly .col1,
	.mainview #result-amortization-table .semimonthly .col2,
	.mainview #result-amortization-table .semimonthly .col3 {
		width: 60px;
	}

	.mainview #result-amortization-table  .biweekly .col0 {
		width: 50px;
	}
	.mainview #result-amortization-table .biweekly .col1,
	.mainview #result-amortization-table .biweekly .col2,
	.mainview #result-amortization-table .biweekly .col3 {
		width: 60px;
	}

	.mainview #result-amortization-table  .week .col0 {
		width: 34px;
	}
	.mainview #result-amortization-table .week .col1,
	.mainview #result-amortization-table .week .col2,
	.mainview #result-amortization-table .week .col3 {
		width: 67px;
	}	

/*FOOTER*/

	#infoAndTools a[href^=tel] {
		display: block;
	}

/*POPUPS*/
	
	.popup {
		width: 500px;
	}
	
	#popup-prepayments {
		width: 600px;
	}
}

/*Wide Phone*/
@media only screen and (max-width : 639px) {
	
/*MAIN BLOCKS*/
	
	.row {
		width: 480px;
	}
	
	.row#header .font-large {
		font-size: 2.1em;
	}
	
	.outerRow#modeOuterRow {
		border-top: 1px solid #cccccc;
		border-bottom: 1px solid #cccccc;
	}
	
	.row#mode {
		border: none;
	}
	
	.row#mode .radioset {
		width: 460px;
	}
	
	.row#mode .radioset .ui-button {
		width: 32.5%;
	}
	
	.row#mode .ui-button-text-only .ui-button-text {
		padding: .4em;
		line-height: 30px;
	}
	
	.row#dashboard {
		background: none;
		border: none;
	}
	
	.section#input, .section#result {
		width: 100%;
		float: none;
		position: static;
	}
	
	#inputBackground {
		position: absolute;
		height: 280px;
		width: 100%;
	}
	
	#inputBackground .questionBackground {
		width: 100%;
		height: 45px;
		background: #f5f5f5;
		position: absolute;
	}
	
	#inputBackground #questionSetBackground {
		top: 55px;
	}
	
	#inputBackground #paymentBackground {
		top: 145px;
	}
	
	#inputBackground #rateBackground {
		top: 235px;
	}
	
	#resultBackground {
		position:absolute;
		height: 515px;
		width: 100%;
		top: 480px;
		/*border-top: solid 1px #cccccc;
		background: url('../img/bg_mobile.png') no-repeat center top;*/
	}
	
	.section#result {
		height: 516px;
	}
	
	
/*INPUTS*/
	
	.section#input .block#block-input-title {
		height: 55px;
		line-height: 55px;
		padding-left: 10px;
	}
	
	.section#input .question {
		padding: 0 10px;
	}
	
	/*
	.questionSet #topHalf, .question#question-frequency, .question#question-rate {
		background: #f5f5f5;
	}*/
	
	.questionSet #topHalf {
		position: absolute;
		width: 100%;
		height: 50%;
	}
	
	
/*PREPAYMENTS*/
	
	.section#input .block#block-input-cta {
		padding: 0px;
		position: absolute;
		bottom: 10px;
		left: 59px;
	}

	.form#form-prepay {
		margin: 0px 18px;
	}

	.question.prepay{
		height: 75px;
	}
	
	#prepay-lumpsum label {
		margin: 0 8px;
		padding-top: 8px;
	}
	
	.question.prepay label{
		margin-bottom: 0;
		display: block;
		float: none;
	}
	
	.question.prepay .fields {
		float: left;
	}
	
	.question.prepay select.prepayMth,
	.question.prepay select.prepaySmt,
	.question.prepay select.prepayBwk,
	.question.prepay select.prepayWkl{
		width : 150px;
	}
	
	.question.prepay .prepay-back div {
		line-height: 59px;
	}
	
	#block-form-individual .question.prepay .btn-delete {
		bottom: 9px;
		top: inherit;
	}
		
/*RESULTS*/
	
	/*Statement*/
	/*.section#result .block#block-result-payment .box #background-box-result-payment-large {
		left: 19px;
	}*/
	
	/*Amortization Table*/
	.section#result .block#block-result-amortization .loader {
		width: 100%;
	}
	
	.chart {
		margin: 0 5px;
	}
	
/*FOOTER*/

	.three-cols, .ready-to-apply-content {
		border: none;
	}
	
	#infoAndTools, #rates-to-apply {
		margin-left: 10px;
		margin-right: 10px;
	}
	
	/*Info*/
	#footerInfoOuterRow {
		border-top: 3px solid #aeaeae;
		border-bottom: 3px solid #aeaeae;
	}
	
	#infoAndTools .doubleCol, #infoAndTools .thirdCol {
		width: 100%;
		padding-right: 0px;
		clear: left;
		padding-top: 15px;
	}
	
	/*Ready to apply*/
	#footerApplyOuterRow {
		/*border-bottom: 3px solid #aeaeae;*/
	}
	
/*POPUPS*/
	
	.popup,	#popup-prepayments {
		width: 450px;
	}
}

/*Wide Phone only*/
@media only screen and (max-width : 639px) and (min-width: 480px) {
	.row#header .title, .row#mode .subtitle {
		padding-left: 10px;
	}
	.section#result .block#block-result-savemore {
		right: 27px;
	}
	
	.section#result .block#block-result-amortization {
		margin: 10px 28px 0;
	}
	
}

/*Thin Phone*/
@media only screen and (max-width : 479px) {
	.row#header .title, .row#mode .subtitle {
			padding-left: 10px;
		}
	.font-medium {
		font-size: 0.9em;
	}
	
	.font-small {
		font-size: 0.8em;
	}
	
/*MAIN BLOCKS*/
	/*
	.tool {
		width: 320px;
	}*/
	
	.row {
		width: 320px;
	}
	
	.row#header {
		height: 50px;
	}
	
	.row#header .title {
		line-height: 50px;
		height: 50px;
	}
	
	.row#header .font-large {
		font-size: 1.4em;
	}
	
	.row#mode .radioset {
		width: 300px;
	}
	
	.radioset .ui-state-default {
		font-size: 12px;
	}
	
	.row#mode .ui-button-text-only .ui-button-text {
		line-height: 40px;
	}
	
	.row#mode [for="radio-calcType1"] .ui-button-text {
		line-height: 17px;
		margin-top: 3px;
		margin-bottom: 3px;
	}
	
	#resultBackground {
		top: 468px;
		height: 489px;
	}
	
	.section#result {
		height: 490px;
	}
	
	.radioset label span{
		white-space : normal;
	}

	
	
/*INPUTS*/
	
	.section#input .slider {
		display: none;
	}
	
	.section#input .question label{
		padding-left: 2px;
	}
	
	#question-principal label, #question-payment label {
		width: 164px;
	}
	
	#question-amortization label {
		width: 176px;
	}
	
	#question-frequency label, #question-product label {
		width: 101px;
	}
	
	#question-rate label {
		width: 180px;
	}
	
	#question-frequency label {
		line-height: 17px;
		margin-top: 5px;
	}
	
	#question-frequency .rm-drop-down {
		position:relative;
		bottom: 5px;
	}
	
	#question-product .rm-drop-down {
		margin: 0;
	}
	
	.section#input select {
		width: 160px;	
	}

	
/*PREPAYMENTS*/
	
	/*Launch Button*/
	.section#input .block#block-input-cta {
		left: 10px;
	}
	
	.section#input .block#block-input-cta .red-btn {
		width: 300px;
	}
	.section#input .block#block-input-cta .red-btn {
		font-size: 14px;
		/*padding-top: 10px;*/
	}
	
	.section#input .block#block-input-cta .red-btn .ui-button-text {
		width: 290px;
		padding-left: 5px;
		padding-right: 5px;
	}
	
	/*Heights*/
	#block-form-lumpsum .question.prepay{
		height: 110px;
	}
	
	#block-form-individual .question.prepay {
		height: 145px;
	}
	
	#block-form-individual .question.prepay .prepay-back div {
		line-height: 128px;
	}
	
	/*Borders*/
	#block-form-individual .question.prepay{
		border-top: dashed 1px #CCCCCC;
	}
	
	#block-form-individual #prepay-individual_1 {
		border-top: 0;
	}
	
	/*Fields*/
	.form#form-prepay {
		margin: 0px 9px;
	}

	.popup .section#section-prepayHeader #lbl-prepayTitle {
		padding: 0 0 0 5px;
	}
	
	#text-prepayAmount {
		margin-bottom: 5px;
	}
	
	#block-form-individual .question.prepay .fields > * {
		float: left;
	}
	
	.question.prepay span{
		clear: left;
	}
	
	.dynamicSelect {
		clear: left;
	}
	
	#form-prepay select {
		width: 150px;
	}
	
	#form-prepay input {
		width: 115px;
	}
	
	#block-form-individual .question.prepay .btn-delete {
		right: 15px;
		top: 56px;
	}
	
	.bottomRow #prepay-addmore {
		width: 150px;
		margin-bottom: 0;
	}
	
	
/*RESULTS*/
	
	/*Statement*/
	
	.section#result .block#block-result-payment .box  {
		background: url('../img/results_box_270.png') no-repeat center;
	}

	.statement p {
		width: 285px;
		margin: auto;
	}
	
	.section#result .block#block-result-savemore {
		right: 15px;
	}
	
	/*.section#result .block#block-result-payment .box #background-box-result-payment-small{
		display: block;
		position: absolute;
		top : 0;
		background: transparent;
		left: 23px;
		filter: progid:DXImageTransform.Microsoft.gradient(
			startColorstr=#00FFFFFF, endColorstr=#00FFFFFF
		);
		filter: prog
		id:DXImageTransform.Microsoft.AlphaImageLoader(src='img/results_box_270.png"',sizingMethod='crop');

	}
	
	.section#result .block#block-result-payment .box #background-box-result-payment-large{
		display: none;
	}*/
	
	/*Graph/Table*/
	.section#result .block#block-result-amortization {
		margin: 10px 0 0;
	}
	
	#result-amortization-figure, #result-amortization-table {
		height: 200px;
	}
	
	/*Bar Graph*/
	.bar-graph {
		width: 270px;
	}
	
	/*Amortization Table*/
	.chart {
		margin: 0;
	}
	
	.chart .font-xsmall{
		font-size: 7pt;
	}
	
	.mainview #result-amortization-table div.data {
		height: 170px;
	}
	
	/*constants for column widths when table is 320px*/
	.mainview #result-amortization-table  .year .col0 {
		width: 36px;
	}
	.mainview #result-amortization-table .year .col1,
	.mainview #result-amortization-table .year .col2,
	.mainview #result-amortization-table .year .col3 {
		width: 67px;
	}

	.mainview #result-amortization-table  .month .col0 {
		width: 36px;
	}
	.mainview #result-amortization-table .month .col1,
	.mainview #result-amortization-table .month .col2,
	.mainview #result-amortization-table .month .col3 {
		width: 67px;
	}

	.mainview #result-amortization-table  .semimonthly .col0 {
		width: 64px;
	}
	.mainview #result-amortization-table .semimonthly .col1,
	.mainview #result-amortization-table .semimonthly .col2,
	.mainview #result-amortization-table .semimonthly .col3 {
		width: 60px;
	}

	.mainview #result-amortization-table  .biweekly .col0 {
		width: 50px;
	}
	.mainview #result-amortization-table .biweekly .col1,
	.mainview #result-amortization-table .biweekly .col2,
	.mainview #result-amortization-table .biweekly .col3 {
		width: 60px;
	}

	.mainview #result-amortization-table  .week .col0 {
		width: 34px;
	}
	.mainview #result-amortization-table .week .col1,
	.mainview #result-amortization-table .week .col2,
	.mainview #result-amortization-table .week .col3 {
		width: 67px;
	}

/*FOOTER*/
	
	/*Info*/
	#infoAndTools .halfCol {
		width: 100%;
	}
	
	#infoAndTools #footer-col2 {
		padding-left: 0;
	}
	
	/*Ready to apply*/
	#rates-to-apply .right ul li.link {
		height: 6.5em;
	}
	
	#rates-to-apply .right li strong {
		width: 40%;
	}
	
	#rates-to-apply .right li.link a {
		width: 60%;
	}
	
/*POPUPS*/
	
	.popup,	#popup-prepayments {
		width: 300px;
	}
}