@charset "utf-8";

/* CSS Document */

/*.ui-slider-range, .ui-selected{background:#ed1b24!important;}*/
.ui-slider-range, .ui-selected{background:#ed1b24 ;}
.ui-selecting{background:#eef!important;}
.ui-selectee, .ui-selected:hover{color:#a80d13;}
.ui-selected{color:#fff!important;}
.ui-selectee:hover{background:#ffdcdc;}
.slider{
	font-size:11px!important;
	width:42%;
	display:inline-block;
	vertical-align: middle;
}
#val{width:40px;height:40px;}

.lefts{width:47%; float:left; padding:5px 0 0 0px;}
.rights{width:47%;float:right;padding:5px 0 0 0px; margin:0px}


#feedback {font-size: 1em;}
#selectable{
	display:block;
	height:30px;
	font-size:14px;
	list-style-type: none; 
	margin:0;
	padding:0;
	position:relative;
	left:-3px;
}
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable li { margin: 3px; padding: 6px; float: left; width:22%; height: 35px; cursor:pointer; text-align:center;}

#term-cont{position:relative;display:inline-block;}
#term-label{
	position:absolute;
	top:4px;
	right:4px;
	font-size:12px;
}

#chart{margin-top:10px;width:100%;float:right;}
.loanCalc{width:100%; padding:0px; margin:0px;}
#chart-cont{position:relative; width:100%;}

.loanCalc input[type="text"]{width:40%;border:1px solid #eef;}
.loanCalc label{
	display:block;
	font-size:16px;
	font-weight: bold;
	margin:0px; padding:10px 0 10px 0px;
}
.ig{margin:12px 0 0 0px; width:100%; padding:0px;}
.left{width:55%;float:left; padding:0px; margin:0px;}

.right{
	width:42%;
	float:right; padding:0px; margin:0px;
}

.prompt{
	font-size:12px;
	display:none;
width:100%;
padding: 10px;
text-align: center;
background: #fff;
border: 2px solid #007;
border-radius: 16px;
position: absolute;
top: 152px;
right: 38px;
z-index: 10;
}

#copy{
	float:right;
	font-size:11px;
}



/* Start of Tablet ----------- */  
@media screen and (max-width:1023px) and (min-width:700px){

.ui-slider-range, .ui-selected{
	background:#ed1b24;
}
.ui-selecting{
	background:#eef!important;
}
.ui-selectee, .ui-selected:hover{
	color:#a80d13!important;
}
.ui-selected{
	color:#fff!important;
}
.ui-selectee:hover{
	background:#ffdcdc!important;
}


.slider{
	font-size:11px!important;
	width:50%;
	display:inline-block;
	vertical-align: middle;
}
#val{
	width:40px;
	height:40px;
}

.ig.lefts{width:48%!important;}
.ig.rights{width:48%;float:right; padding:0px; margin:0px}

#feedback {
	font-size: 1em;
}
#selectable{
	display:block;
	height:30px;
	font-size:14px; 
	list-style-type: none; 
	margin:0;
	padding:0;
	position:relative;
	left:-3px;
}
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable li { margin: 5px; padding: 1px; float: left; width:28%; height: 23px; cursor:pointer; font-size:14px; text-align:center}

#term-cont{
	position:relative;
	display:inline-block;
}
#term-label{
	position:absolute;
	top:4px;
	right:4px;
	font-size:12px;
}

#chart{margin-top:10px;width:100%;float:right;}
.loanCalc{width:100%; padding:0px; margin:0px;}
#chart-cont{position:relative; width:100%;}

.loanCalc input[type="text"]{
	width:40%;
	border:1px solid #eef;
}
.loanCalc label{
	display:block;
	font-size:14px;
	font-weight: bold;
	margin-bottom:5px;
}
.ig{margin:12px 0 0 0px; width:100%; padding:0px;}

.left{width:55%;float:left; padding:0px; margin:0px;}
.right{width:42%;float:right; padding:0px; margin:0px;}


.prompt{
	font-size:12px;
	display:none;
width:100%;
padding: 10px;
text-align: center;
background: #fff;
border: 2px solid #007;
border-radius: 16px;
position: absolute;
top: 152px;
right: 38px;
z-index: 10;
}
 
}



/* Start of Tablet ----------- */ 
@media screen and (max-width:699px) and (min-width:501px){ 

.ui-slider-range, .ui-selected{
	background:#ed1b24;
}
.ui-selecting{
	background:#eef!important;
}
.ui-selectee, .ui-selected:hover{
	color:#a80d13!important;
}
.ui-selected{
	color:#fff!important;
}
.ui-selectee:hover{
	background:#ffdcdc!important;
}


.slider{
	font-size:11px!important;
	width:42%;
	display:inline-block;
	vertical-align: middle;
}
#val{
	width:40px;
	height:40px;
}

.ig.lefts{width:45%!important;}
.ig.rights{width:45%;float:right; padding:0px; margin:0px}

#feedback {
	font-size: 1em;
}
#selectable{
	display:block;
	height:30px;
	font-size:14px; 
	list-style-type: none; 
	margin:0;
	padding:0;
	position:relative;
	left:-3px;
}
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable li { margin: 3px; padding: 6px; float: left; width:22%; height: 35px; cursor:pointer; font-size:14px; text-align:center;}

#term-cont{
	position:relative;
	display:inline-block;
}
#term-label{
	position:absolute;
	top:4px;
	right:4px;
	font-size:12px;
}

#chart{margin-top:10px;width:100%;float:right;}
.loanCalc{width:100%; padding:0px; margin:0px;}
#chart-cont{position:relative; width:100%;}

.loanCalc input[type="text"]{
	width:40%;
	border:1px solid #eef;
}
.loanCalc label{
	display:block;
	font-size:16px;
	font-weight: bold;
	margin-bottom:5px;
}

h2{margin:5px 0px; font-size:15px;}



.ig{margin:12px 0 0 0px; width:100%; padding:0px;}


.left{width:55%;float:left; padding:0px; margin:0px;}
.right{width:42%;float:right; padding:0px; margin:0px;}


.prompt{
	font-size:12px;
	display:none;
width:100%;
padding: 10px;
text-align: center;
background: #fff;
border: 2px solid #007;
border-radius: 16px;
position: absolute;
top: 152px;
right: 38px;
z-index: 10;
}


}



/* Start of Iphone ----------- */  
@media screen and (max-width:500px) and (min-width:320px){
#wrapper{ width:100%; padding:0px; margin:0px;}
.topsection{ width:90%; padding:0px; margin:10px auto 10px auto; clear:both;}
.maincontainer{ width:90%; padding:0px; margin:0 auto; clear:both;} 

#logo{margin:0 6px; padding:0px; width:auto;}
#logo img{margin:0px; padding:0px;}


#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable li { margin: 3px; padding: 1px; float: left; width:27%; height: 23px; cursor:pointer; font-size:12px; text-align:center;}

#term-cont{
	position:relative;
	display:inline-block;
}
#term-label{
	position:absolute;
	top:4px;
	right:4px;
	font-size:12px;
}
.loanCalc{width:100%; padding:0px; margin:0px;}
.loanCalc label{
	display:block;
	font-size:13px;
	font-weight: bold;
	margin:0px;
	padding:10px 0 10px 0px;
}
h2{margin:5px 0px; font-size:15px;}
.ig{margin:12px 0 0 0px; width:100%; padding:0px;}
.left{width:100%;padding:0px; margin:0px;}
.right{width:100%;padding:0px; margin:30px 0 10px 0px;}
#chart{margin-top:10px;width:100%;}
#chart-cont{position:relative; width:100%; padding:0px; margin:0px;}
.prompt{
font-size:12px;
display:none;
width:100%;
padding:0px;
background: #fff;
border: 2px solid #007;
border-radius: 16px;
position: absolute;
top:0px;
left:0px;
z-index: 10; 
float:left;
}
#copy{float:left;font-size:11px;}
}