@import url("http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css");

/*Needs styles from 5.0/maglist/uniform.default.css */
#calculate {
	width:159px;
	height:28px;
	background-color: #b92116; 
	font-family: 'Lato', Arial, serif;
	color: white; font-size: 13px;
	-webkit-background-clip: padding-box; -moz-border-radius: 3px;
	-webkit-border-radius: 3px; border-radius: 3px; 
	border-width: 0; 
	cursor: pointer; 
	line-height: 1em; 
	font-size: 16px; text-align:center; margin: 0px; 
	padding-top:7px;
	float:right;
	margin-top: 5px;
}

#calculate:hover { background-color: #d02519; }
.breadcrumb
{
  font-weight: bold;
  font-size: 11px;
  color: #3399cc;
  line-height: 1em;
  margin-top: 5px;
  margin-bottom: 10px;
  position: relative;
  text-transform: uppercase;
  text-decoration:none;
}


#mortgage-calculator .breadcrumb a
{
  color: #3399cc;
  text-decoration:none;
}
#calculate:hover {cursor:pointer}

#mortgage-calculator 
{
    font-family: 'Arial', sans-serif;
    width: 625px;
}
#mortgage-calculator a 
{
    color: #006599;
    text-decoration: underline;
}
#mortgage-calculator a:hover 
{
 text-decoration: none;   
}
#mortgage-calculator h2 
{
    font-size: 18px;
    margin: 2px 0 10px 0;
    line-height: 20px;
    font-weight: 700;
}
#mortgage-calculator h3
{
    font-size: 17px;
    margin: 2px 0 20px 0;
    line-height: 20px;
    font-weight: 700;
}
#mortgage-calculator h5 
{
    color: #A0A0A2;
    font-style: italic;
    font-weight: normal;
    margin-top: 100px;
    text-align: center;
}
#mortgage-calculator hr 
{
    border-color: #EEEEEE -moz-use-text-color #cdcdcd;
    margin: 15px 0;
}
#mortgage-calculator form 
{
    margin-bottom: 15px;
}
#mortgage-calculator select 
{
    border: 1px solid #DADADA;
    border-radius: 0 0 0 0;
    font-size: 15px;
    height: inherit;
    margin-right: 10px;
    padding: 8px 3px;
    width: inherit;
    *width: auto;
}

/* layout */
#mortgage-calculator div.controls
{
    border: solid 1px #dadada;
    background: #fff;
    padding: 15px 10px;
    min-height: 380px;
}

#mortgage-calculator .boxHeading {border-bottom:none;font-size:21px;margin-bottom:10px;line-height:26px;}
#mortgage-calculator div.controls
{
    width: 278px;
    margin: 0px 10px 10px 0px;
}



/* charts */
#mortgage-calculator #chart_div
{
    margin-top: 10px;
}
#mortgage-calculator .column-mortgage-labels 
{
    text-align: center;
    z-index: 9999;
}

/* sliders */
#mortgage-calculator .ui-slider 
{
    border-color:transparent !important;
    height: 11px;
}
#mortgage-calculator .ui-slider-horizontal .ui-state-default
{
    background: transparent url("https://i.cdn.turner.com/money/.element/img/1.0/buttons/scrubber.png") no-repeat scroll 50% 50%; 
    border: none;
}

#mortgage-calculator .ui-slider-horizontal .ui-slider-handle 
{
    top: -0.6em;
}

#mortgage-calculator .ui-slider .ui-slider-handle 
{
    cursor: pointer;
    height: 34px;
    position: absolute;
    width: 34px;
    z-index: 2;
}

#mortgage-calculator #slider-label-left
{
    font-size: 12px;
    font-weight: 700;
    margin-top: 9px;
    float: left;
    color: #006599;
}
#mortgage-calculator #slider-label-right 
{
    font-size: 12px;
    font-weight: 700;
    margin-top: 9px;
    float: right;
    text-align: right;
    color: #006599;
}

span#purchased-for, span#current-value {color:#426b89}
#purchased-slider, #current-slider {
	margin:15px 0px 30px;
	background: url("https://i.cdn.turner.com/money/.element/img/1.0/buttons/scrubber_back.png") no-repeat;
	width:279px;
}



#boughtMonth, #soldMonth, #boughtYear, #soldYear {font-size:18px;height:40px;border:1px solid #dbdbdb;
  float:left;background:#FFF url('https://i.cdn.turner.com/money/.element/img/5.0/tools/coL_dropdown_arrow.gif') no-repeat;margin-top:0px;margin-bottom:0px;}
#boughtMonth, #soldMonth {width:60px;background-position:50px 22px;}
#boughtYear, #soldYear {width:28px;margin-left:0px;}




/** UNIFORM CSS - jquery plugin styles for dropdown **/
#uniform-boughtMonth.selector, 
#uniform-soldMonth.selector, 
#uniform-boughtYear.selector, 
#uniform-soldYear.selector {
	font-size:15px;
	height:32px;padding:5px 0px 0px 10px;
	border:1px solid #dbdbdb;  
	float:left;background:#FFF url('https://i.cdn.turner.com/money/.element/img/5.0/tools/coL_dropdown_arrow.gif') no-repeat;
	margin-top:11px;
	margin-bottom:15px;
}
#uniform-boughtMonth.selector, #uniform-soldMonth.selector {width:60px;background-position:50px 16px;}
#uniform-boughtYear.selector, #uniform-soldYear.selector {width:78px;margin-left:8px;background-position:60px 16px;}





#mortgage-calculator 
{
    font-family: 'Arial', sans-serif;
    width: 625px;
}
#mortgage-calculator a 
{
    color: #006599;
    text-decoration: underline;
}
#mortgage-calculator a:hover 
{
 text-decoration: none;   
}
#mortgagecalc {
  position: relative;
}
#calculator #mortgage-calculator h2 {
    color: #333333;
    font-size: 14px;
    font-weight: 700;
    line-height: 14px;
    margin: 0 0 14px;
    clear:both;
}
#calculator #mortgage-calculator h3
{
    font-size: 17px;
    margin: 0 0 25px 0;
    line-height: 20px;
    font-weight: 700;
}
#calculator #mortgage-calculator h5 
{
    color: #9E9D9D;
    font-style: italic;
    font-weight: normal;
    font-size: 16px;
    padding: 0;
    margin: 75px auto 0;
    width: 100%;
    text-align: center;
    position: absolute;
}
#mortgage-calculator hr 
{
    border: none;
    margin: 18px 0;
    background: #CDCDCF;
    height: 1px;
}
#calculator #mortgage-calculator form 
{
    margin-bottom: 20px;
}
#calculator #mortgage-calculator select 
{
    border: 1px solid #DADADA;
    border-radius: 0 0 0 0;
    font-size: 14px;
    height: inherit;
    margin-right: 10px;
    padding: 8px 3px;
    width: 70px;
    *width: 70px;
    cursor: pointer;
}

/* layout */
#calculator #mortgage-calculator div.controls,
#calculator #mortgage-calculator div.results
{
    border: solid 1px #dadada;
    background: #f4f4f6;
    padding: 15px 11px;
    float: left;
    min-height: 400px;
}
#calculator #mortgage-calculator div.controls
{
    width: 158px;
    margin: 0px 10px 10px 0px;
    padding: 28px 11px 0;
    min-height: 391px;
    height: 391px;
}
#calculator #mortgage-calculator div.results
{
    width: 384px;    
    height: 389px;
    min-height: 389px;
}
#calculator #mortgage-calculator div.disclaimer
{
    border: solid 1px #dadada;
    background: #f4f4f6;
    padding: 10px 16px;
    color: #6D6D6F;
    font-style: italic;
    font-size: 11px;
    line-height: 15px;
    width: 586px;
}

/* charts */
#mortgagecalc #mortgage-calculator #chart_div
{
    margin-top: 25px;
    position: relative;
}
#mortgage-calculator .column-mortgage-labels 
{
    text-align: center;
    z-index: 9999;
    line-height: 16px;
    margin-top: -2px;
}

/* sliders */
#calculator #mortgage-calculator .ui-slider 
{
    margin-top:22px;
    border-color:transparent !important;
    height: 10px;
}
#mortgage-calculator .ui-slider-horizontal .ui-state-default
{
    background: transparent url("https://i.cdn.turner.com/money/.element/img/1.0/buttons/scrubber.png") no-repeat scroll 50% 50%; 
    border: none;
}
#calculator #mortgage-calculator .ui-slider-horizontal .ui-slider-handle {
   z-index: 0;
    margin-left: -21px;
    top: -10px;
}
#mortgage-calculator .ui-slider .ui-slider-handle 
{
    cursor: pointer;
    height: 38px;
    position: absolute;
    width: 38px;
    z-index: 2;
    margin-top:-3px;
    margin-left:-17px;
}
#calculator #mortgage-calculator #slider-label-left
{
    font-size: 12px;
    font-weight: 700;
    margin-top: 12px;
    float: left;
    color: #0F6191;
}
#calculator #mortgage-calculator #slider-label-right 
{
    font-size: 12px;
    font-weight: 700;
    margin-top: 12px;
    float: right;
    text-align: right;
    color: #0F6191;
}

/* result values */
#calculator #mortgage-calculator #annual-return,
#calculator #mortgage-calculator #total-return
{
    margin-top: 25px;
    padding-bottom: 25px;
    width: 180px;
    border-bottom: solid 1px #CDCDCF;
}
#mortgage-calculator #annual-return 
{
    float: left;
    
}
#mortgage-calculator #total-return 
{
    float: right;
}
#mortgage-calculator #annual-return-value,
#mortgage-calculator #total-return-value
{
    font-size: 56px;
    color: #006599;
    font-weight: 600;
    line-height: 30px;
    height: 40px;
    overflow: visible;
}
#calculator #mortgage-calculator #annual-return-value.greyscale,
#calculator #mortgage-calculator #total-return-value.greyscale
{
    color:#9E9D9D !important;
}
#mortgage-calculator .percent 
{
    font-size: 34px;
}
#mortgage-calculator div.home-value
{
    font-size: 12px;
    margin-top: 15px;  
}



/** UNIFORM CSS - jquery plugin styles for dropdown **/
#mortgage-calculator div.selector {
    font-size:15px;
    height:32px;
    line-height: 32px;
    padding:0px 0px 0px 10px;
    border:1px solid #dbdbdb;  
    float:left;background:#FFF url('https://i.cdn.turner.com/money/.element/img/5.0/tools/coL_dropdown_arrow.gif') no-repeat;
    margin-bottom:20px;
   
    background-position: 108px  13px;
}




div.selector span {
  padding: 0px;
  cursor: pointer;
  overflow:hidden;
  color: #666;
  text-shadow: 0 1px 0 #fff;
  display:block;
  height:32px;
}




#uniform-purchased-month,
#uniform-current-month {
    margin-right: 8px;
    width: 118px;
    background-position: 108px  13px;
}

#uniform-purchased-month span,
#uniform-current-month span{
    width: 130px;
}

#uniform-purchased-year,
#uniform-current-year{
    background-position: 108px 13px;
}

#uniform-purchased-year,
#uniform-current-year,
#uniform-purchased-year span,
#uniform-current-year span{
    width: 118px;
}

#calculator #mortgage-calculator #uniform-purchased-month select,
#calculator #mortgage-calculator #uniform-current-month select {
    width: 130px;
}
#calculator #mortgage-calculator #uniform-purchased-year select,
#calculator #mortgage-calculator #uniform-current-year select{
    width: 130px;
}
#purchased-controls select:hover {cursor:pointer}