/*---------------------------------------------------------------------------*/

    /* Fonts */
    
    @font-face {
      font-family: Neuzeit;
      font-weight: normal;
      font-style: normal;
      src: url("../fonts/neuzeit/neuzeit-book.eot");
      src: url("../fonts/neuzeit/neuzeit-book.woff") format("woff"), url("fonts/neuzeit/neuzeit-book.ttf") format("truetype");
    }
    @font-face {
      font-family: Neuzeit;
      font-weight: bold;
      font-style: normal;
      src: url("../fonts/neuzeit/neuzeit-book-heavy.eot");
      src: url("../fonts/neuzeit/neuzeit-book-heavy.woff") format("woff"), url("fonts/neuzeit/neuzeit-book-heavy.ttf") format("truetype");
    }
    
/*---------------------------------------------------------------------------*/

    /* General Rules */
    
    html, body, body div, span, p, img, b, i, ol, ul, li, form, label, table, tbody, tfoot, thead, tr, th, td, button {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        vertical-align: baseline;
        background: transparent;
        -webkit-text-size-adjust: 100%;
    }
    
    h1, h2, h3, h4, h5, button, body {
        font-family: 'Neuzeit';
        font-weight: normal;
        font-style: normal;
    }
        
    svg {
        width: 100%;
        height: auto;
    }
    
    .no_display {
        display: none;
    }
    
    .inline_link {
        text-decoration: none;
        cursor: pointer;
    }
    .inline_link:hover {
        text-decoration: underline;
    }
    
    table {
        border-collapse: collapse;
    }
    
    .blue {
        color: rgb(54,99,153);
    }
    
    .steel {
        color: rgb(121,130,140);
    }
    
    .charcoal {
        color: rgb(21,30,40);
    }
    
    .input_label {
        font-size: 13px;
        display: block;
        margin: 0 auto 7px 0;
        text-align: left;
    }

    .required_fields {
        padding: 10px 0 5px;
    }
        
    .input_style {
        font-family: 'Neuzeit', sans-serif;
        font-weight: normal !important;
        font-size: 14px !important;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        width: 100%;
    }

    .dark_on_light_input::-webkit-input-placeholder {
        color: rgb(70,70,70);
        opacity: 0.7;
        font-weight: normal;
    }
    .dark_on_light_input:-ms-input-placeholder {
        color: rgb(70,70,70);
        opacity: 0.7;
        font-weight: normal;
    }
    .dark_on_light_input::-moz-placeholder {
        color: rgb(70,70,70);
        opacity: 0.7;
        font-weight: normal;
    }
    .dark_on_light_input:-moz-placeholder {
        color: rgb(70,70,70);
        opacity: 0.7;
        font-weight: normal;
    }
    
    .dark_on_light_input {
        padding: 12px 18px 11px;
        outline: 0;
        border: none;
        color: rgb(70,70,70);
        border: 1px solid rgb(200,203,207);
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        appearance: none;
        -webkit-appearance: none;
        width: calc(100% - 38px);
    }
    
    .dark_on_light_input:active,
    .dark_on_light_input:focus {
        border-color: rgb(153,153,153) !important;
    }
    
    .input_padding {
        margin: 16px 0;
    }
    
    .action_button {
        padding: 10px 20px;
        outline: none;
        border: none;
        font-size: 16px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        cursor: pointer;
        margin: 0 10px;
    }
    
    .kill_margin {
        margin: 0 !important;
    }
    
    .white_on_blue {
        background: rgb(69,114,168);
        color: white;
    }
    .steel_button {
        background: rgb(221,230,240);
        color: black;
    }
    
    .select_label {
        font-size: 12px;
        padding: 4px 0;
    }

/*---------------------------------------------------------------------------*/

    /* Menu */
    
    #menu_control {
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        height: 56px;
        z-index: 5001;
    }
    
    #left_menu_icon_container i, #right_menu_icon_container i {
        color: rgb(169,169,169);
        font-size: 21px;
        padding: 14px 18px;
        cursor: pointer;
    }

    #left_menu_icon_container {
        position: absolute;
        top: 0;
        left: 0;
    }
    
    #right_menu_icon_container {
        position: absolute;
        top: 0;
        right: 0;
    }
    
    #left_menu_icon_container.white_icons i, #right_menu_icon_container.white_icons i {
        color: white;
    }
    
    .sign_in_button {
        border: none;
        outline: none;
        padding: 7px 14px 6px;
        margin: 9px 15px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        text-decoration: none;
        font-size: 14px;
        cursor: pointer;
    }
    
    .sign_in_button:active,
    .action_button.white_on_blue:active {
        background: rgb(104,149,203);
    }
    
    #close_left_menu_icon, #open_right_menu_icon, #close_right_menu_icon, #sign_in_button {
        display: none;
    }
    
    .fly_out {
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        width: 260px;
        background: rgb(247,247,247);
        z-index: 5000;
    }
    
    #fly_out_left {
        position: fixed;
        top: 0px;
        bottom: 0px;
        left: -300px;
    }
    
    #fly_out_right {
        position: fixed;
        top: 0px;
        bottom: 0px;
        right: -300px;
    }
    
    .fly_out ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .fly_out li {
        display: inline-block;
        vertical-align: middle;
    }
    
    #left_menu {
        width: 100%;
        margin-top: 70px;
    }
    
    #right_menu {
        width: 100%;
        margin-top: 80px;
    }
        
    .fly_out i {
        font-size: 21px;
        width: 40px;
        color: rgb(100,100,100);
    }
    
    .menu_link {
        padding: 15px 25px;
        text-decoration: none;
        display: block;
        color: rgb(100,100,100);
        font-size: 16px;
        cursor: pointer;
    }
    
    .menu_link:hover {
        background: rgb(235,235,235);
        color: black !important;
    }
    
    .menu_link:hover i {
        color: black !important;
    }
        
    #fb_padding {
        margin: 0 22px;
    }
    
    #user_bubble {
        width: 50px;
        height: 50px;
        border-radius: 25px;
        margin-right: 16px;
    }
    
    #user_name {
        display: block;
        color: rgb(100,100,100);
        padding: 5px 0 10px;
    }
    
/*---------------------------------------------------------------------------*/

    /* Subwindows */
    
    .subwindow {
        padding: 20px;
        /*background: rgb(250,251,252);*/
        /*margin-top:20px;*/
        /*border-radius:10px;*/
        border: 1px solid rgb(196,199,201);
        border-top: none;
        position: relative;
        text-align: left;
        -webkit-box-shadow: inset 0px 7px 15px -10px rgba(0,0,0,0.15);
        -moz-box-shadow: inset 0px 7px 15px -10px rgba(0,0,0,0.15);
        box-shadow: inset 0px 7px 15px -10px rgba(0,0,0,0.15);
    }

    .clickable_subwindow {
        cursor: pointer;
    }

    .clickable_subwindow:hover {
        /*background: rgb(250,251,252);*/
    }

    .hidden_subwindow {
        display: none;
        font-size: 14px;
    }

    .subwindow_heading {
        font-size: 16px;
    }
    
    .subwindow_heading.major {
        max-width: calc(100% - 20px - 40px);
    }

    .hide_button {
        position: absolute;
        top: 0;
        right: 0;
        padding: 20px 20px 60px 40px;
        cursor: pointer;
    }
    .hide_button:hover {
        text-decoration: underline;
    }
    
/*---------------------------------------------------------------------------*/

    /* External Container / Login */
    
    #signin .view {
        width: 260px;
        margin: 0 auto;
    }
    
    .landing_center {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .landing_center td {
        text-align: center;
        vertical-align: middle;
    }
    
    table.or_line {
        margin-top: 18px;
        width: 100%;
        border-collapse: collapse;
    }
    
    table.or_line hr {
        border: none;
        height: 1px;
        background: rgb(153,153,153);
    }
    
    td.or_cell {
        padding: 7px 10px 10px;
    }
    
    .auth_button:focus {
        outline: 1px dotted black;
    }

    .fb_button {
        width: calc(100% - 20px);
        padding: 12px 10px 2px;
        margin-top: 10px;
        margin-bottom: 20px;
        margin-left: 0;
        margin-right: 0;
        outline: none;
        border: none;
        display: inline-block;
        text-align: left;
        font-size: 14px;
        text-align: center;
    }
    .fb_button i {
        margin-left: -6px;
        padding-right: 24px;
        font-size: 24px;
    }
    .fb_button span {
        display: inline-block;
        height: 30px;
        vertical-align: middle;
    }

    .welcome_screen_padding {
        height: 20px;
    }
    
    .auth_message {
        padding: 10px;
        width: calc(100% - 20px);
        margin: 10px 0;
        color: rgb(165,42,42);
        font-size: 14px;
        background: rgb(245,245,245);
    }
	
/*---------------------------------------------------------------------------*/

    /* Static pages and links to those pages */
    
    .static_page_links {
        width: 100%;
        /*margin: 15px 25px;
        width: 250px;*/
        margin-top: 26px;
        border-top: 1px solid rgb(200,200,200);
    }
    
    .static_page_links a {
        font-size: 12px;
        padding: 20px 5px;
        display: inline-block;
        text-decoration: none;
    }
    .static_page_links a:first-child {
        margin-left: 20px;
    }
    .static_page_links a:hover {
        text-decoration: underline;
    }

    .static_container {
        text-align: left;
        max-width: 680px;
        margin: 70px auto;
        padding: 20px;
    }
    
/*---------------------------------------------------------------------------*/

    /* Google Place Autocomplete Button */

    #search_container .app_input {
        margin-top: 30px;
    }
    
    .app_input {
        font-family: Neuzeit;
        font-size: 15px;
        padding: 8px 13px;
        text-overflow: ellipsis;
        width: 260px;
        border: 1px solid rgb(121,130,140); /* steel */
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        height: 40px;
        outline: none;
    }

    .app_input:focus {
        border-color: rgb(54,99,153); /* blue */
    }
	
    #app_input {
        margin-bottom: 20px;
    }

/*---------------------------------------------------------------------------*/

    /* Property Match */
    
    #property_match_container {
        width: 100%;
        max-width: 680px;
        margin: 65px auto;
    }
    
    #map_canvas {
        width: 100%;
        height: 280px;
        margin: 0;
        max-height: 380px;
    }
    
    #google_view_toggle {
        float: right;
        padding: 10px 20px 0;
        font-size: 12px;
        cursor: pointer;
    }
    
    #google_view_toggle:hover {
        text-decoration: underline;
    }
    
    #did_we_get_right {
        clear: both;
        padding-top: 15px;
    }
   
    #address_bar {
        display: none;
        width: calc(100%-20px);
        max-width: calc(100%-20px);
        font-size: 14px;
        font-weight: bold;
        padding: 0 55px;
        height: 50px;
        text-align: center;
    }
    
    #display_address_text {
        padding-top: 16px;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        white-space: nowrap;
    }
            
    #property_detail_table {
        width: 100%;
        margin: 15px auto 25px;
    }
    
    #property_detail_table td {
        text-align: left;
        white-space: nowrap;
        padding: 3px 20px;
    }
    
    #property_detail_table td:first-child {
        padding-right: 0px;
    }
    
    #property_detail_table tr:first-child td {
        padding-right: 20px !important;
    }
    
    #non_residential_property {
        padding: 0 20px;
        max-width: 360px;
        margin: 0 auto;
    }
    
    #result_action_prompt {
        padding-top: 15px;
    }
    
    #mobile_input {
        width:180px;
        font-size:20px;
        text-align:center
    }
    
/*---------------------------------------------------------------------------*/

    /* Appraisal */
    
    .pac-container {
        z-index: 5002 !important;
    }
    
    #address_input_2 {
        margin-top: 9px;
        padding: 8px 20px;
        border: none;
        outline: none;
        min-width: 110px;
        width: 77%;
        border-radius: 0;
        max-width: 300px;
    }
    
    #aerial_map_container {
        width: 100%;
        height: 300px;
        overflow: hidden;
        text-align: center;
    }
    
    #aerial_map_element {
        width: 100%;
        height: 100%;
        display: inline-block;
    }
    
    #appraisal_header {
        background: white;
        position: relative;
        top: -25px; /* cover Google logo */
        text-align: left;
        padding: 10px;
        border: 1px solid rgb(196,199,201);
        border-top: none;
    }
            
    #appraisal_img, #appraisal_img_placeholder {
        max-width: 30%;
        height: auto;
        display: block;
        min-width: 110px;
    }
   
    #bed_bath {
        list-style: none;
        padding-top: 10px;
        padding-left: 5px;
    }
    
    #bed_bath li {
        display: inline-block;
        vertical-align: bottom;
        padding-right: 5px;
    }
    
    #bed_bath li.spacer {
        width: 5px;
    }
   
    #appraisal_address {
        position: absolute;
        top: 20px;
        right: 10px;
        font-size: 20px;
    }
    
    #appraisal_value {
        position: absolute;
        right: 10px;
        top: 80px;
        margin: 0;
    }
    
    #appraisal_value.showing_value {
        font-weight: bold;
        top: 75px;
        font-size: 50px;
    }
    
    #appraisal_signin_button {
        font-size: 24px !important;
        padding: 10px 15px;
    }
    
    #comparables {
        position: absolute;
        right: 10px;
        top: 130px;
        font-size: 18px;
    }

    #appraisal_subwindow_container {
        position: relative;
        top: -25px; /* cover Google logo */
    }
    
    #price_growth {
        width: 100%;
        text-align: center;
    }
    
    #vs_toronto_average {
        float: right;
        margin-right: 10px;
    }
    
    .appraisal_detail_table {
        width: calc(100% - 20px);
        margin: 10px;
        margin-bottom: 0;
    }
    
    .appraisal_detail_table td {
        text-align: left;
        font-size: 18px;
        padding: 20px 0;
        border-top: 1px solid rgb(160,165,170);
    }
    .appraisal_detail_table td:nth-child(2) {
        padding-left: 15px;
        padding-right: 15px;
    }
    .appraisal_detail_table tr:first-child td {
        border-top: none;
    }
    
    #sales_stat_table td:first-child, #poi_table td:nth-child(2) {
        color: black;
        font-size: 28px;
    }
    
    #comps_table td {
        padding: 20px 0;
        text-align: center;
    }
    
    #comps_table img {
        width: 25px;
        height: 25px;
        padding-top: 8px;
    }
    
    #comps_table tr:first-child td {
        font-size: 22px;
    }
    
    #comps_table td:first-child {
        text-align: left;
        padding-left: 20px;
    }
    #comps_table td:last-child {
        padding-right: 20px;
    }
    
    .up_down_icon {
        width: 26px;
        height: auto;
    }
    
    #poi_map_canvas {
        height: 400px;
        width: 100%;
    }
    
    #poi_button_container {
        display: table;
        width: 100%;
    }
    
    #poi_button_container a {
        display: table-cell;
        border: 3px solid white;
        text-align: center;
        padding-top: 10px;
        padding-bottom: 10px;
        cursor: pointer;
        background: rgb(228,236,244);
    }
    
    #poi_button_container a:first-child {
        border-left: none;
    }
    
    #poi_button_container a:last-child {
        border-right: none;
    }
    
    #poi_button_container a:hover {
        background: rgb(239,244,250);
    }
    
    #poi_button_container a.selected {
        background: rgb(54,99,153);
        color: white;
    }
    
    .poi_icon {
        width: 45px;
        height: auto;
    }
    
    .comps_icon {
        width: 20px;
        height: auto;
    }
    
    @media only screen and (min-width: 700px) {
        
        #aerial_map_container {
            margin-top: 25px;
        }
        
    }
    
    @media only screen and (max-width: 700px) {
        
        #property_match_container {
            margin: 0;
            position: absolute;
            top: 50px;
        }
        
    }
    
    @media only screen and (min-width: 680px) {
        
        #poi_map_canvas {
            width: calc(100% - 20px);
            margin: 0 10px;
        }
        
        #poi_button_container {
            width: calc(100% - 20px);
            margin: 0 10px;
        }
        
        #neighborhood_description {
            padding: 0 10px;
        }
        
    }
    
    @media only screen and (max-width: 680px) {
        
        #menu_control.inactive #address_bar {
            padding: 0 105px 0 55px !important;
        }

        #appraisal_address {
            top: 15px;
            font-size: 20px;
        }

        #appraisal_value {
            top: 60px;
        }

        #appraisal_value.showing_value {
            top: 55px;
            font-size: 50px;
        }

        #appraisal_signin_button {
            font-size: 24px !important;
            padding: 10px 15px;
        }

        #comparables {
            top: 110px;
            font-size: 18px;
        }
        
    }
    
    @media only screen and (min-width: 640px) {
    
        #map_canvas {
            width: 100%;
            height: 400px;
            margin: 0;
            max-height: 380px;
        }
    
    }
    
    @media only screen and (min-width: 500px) and (max-width: 640px) {
         
        .appraisal_detail_table td {
            font-size: 16px;
            padding: 16px 0;
        }
        
        .up_down_icon {
            width: 23px;
        }
        
        #sales_stat_table td:first-child {
            font-size: 24px;
        }
    
    }
    
    @media only screen and (max-width: 500px) {

        #appraisal_address {
            top: 15px;
            font-size: 18px;
        }

        #appraisal_value {
            top: 50px;
        }

        #appraisal_value.showing_value {
            top: 50px;
            font-size: 40px;
        }

        #appraisal_signin_button {
            font-size: 18px !important;
            padding: 8px 12px;
        }

        #comparables {
            top: 90px;
            font-size: 16px;
        }
        
        #bed_bath {
            padding-left: 0px;
        }

        #bed_bath li {
            padding-right: 5px;
        }

        #bed_bath li.spacer {
            width: 0;
        }
        
        #vs_toronto_average {
            font-size: 10px;
        }
        
        .appraisal_detail_table td {
            font-size: 14px;
            padding: 14px 0;
        }
        
        .up_down_icon {
            width: 20px;
        }
        
        #sales_stat_table td:first-child, #poi_table td:nth-child(2) {
            color: black;
            font-size: 20px;
        }
        
        #poi_map_canvas {
            height: 300px;
        }
    
        .poi_icon {
            width: 35px;
        }
        
        .subwindow_heading {
            font-size: 14px;
        }
        
        #comps_table img {
            padding-top: 5px;
        }
        
        #comps_table tr:first-child td {
            font-size: 18px;
        }
    
        #comps_table td:first-child {
            padding-left: 10px;
        }
        
        #comps_table td:nth-child(3), #comps_table td:nth-child(4) {
            padding: 14px 5px;
        }
    
        #comps_table td:last-child {
            padding-right: 10px;
        }
    }
    
    @media only screen and (max-width: 380px) {

        
        #appraisal_address {
            top: 15px;
            font-size: 15px;
        }

        #appraisal_value {
            top: 45px;
        }

        #appraisal_value.showing_value {
            top: 50px;
            font-size: 32px;
        }

        #appraisal_signin_button {
            font-size: 16px !important;
            padding: 8px 12px;
        }

        #comparables {
            top: 85px;
            font-size: 14px;
        }
        
        #bed_bath {
            padding-left: 0px;
        }

        #bed_bath li {
            padding-right: 5px;
        }

        #bed_bath li.spacer {
            width: 0;
        }
        
        #vs_toronto_average {
            font-size: 10px;
        }
    
        .appraisal_detail_table td {
            font-size: 12px;
            padding: 12px 0;
        }
        
        .up_down_icon {
            width: 17px;
        }
        
        #sales_stat_table td:first-child, #poi_table td:nth-child(2) {
            color: black;
            font-size: 20px;
        }
        
        #poi_map_canvas {
            height: 300px;
        }
    
        .poi_icon {
            width: 30px;
        }
        
        .subwindow_heading {
            font-size: 14px;
        }

        #comps_table td {
            font-size: 14px;
        }
        
        #comps_table tr:first-child td {
            font-size: 16px;
        }
        
        #comps_table td:first-child {
            padding-left: 5px;
        }
        
        #comps_table td:last-child {
            padding-left: 5px;
            padding-right: 0;
        }
        
        .hide_380 {
            display: none;
        }
        
    }
     
/*---------------------------------------------------------------------------*/

    /* Sales chart */
    
    #chart_container {
        width: 100%;
    }    
    
    svg {
        font: 10px sans-serif;
    }

    .y.axis path/*, .y.axis line*/ {
        fill: none;
        stroke: rgb(210,212,214); /* grid color */
        shape-rendering: crispEdges;
    }

    .bar_blue {
        fill: rgb(106,137,190);
        shape-rendering: crispEdges;
    }
    
    .bar_grey {
        fill: rgb(200,205,210);
        shape-rendering: crispEdges;
    }

    .x.axis path {
        display: none;
    }
    
    .trendline {
        stroke-dasharray: 3;
        stroke: grey;
        stroke-width: 2px;
    }
    
    #chart_legend {
        margin-left: auto; 
        margin-right: auto;
    }
    #chart_legend td {
        font-size: 10px;
        padding: 0 5px;
        text-align: left;
    }
    .legend_square {
        width: 20px;
        height: 20px;
    }
    .legend_square.blue {
        background: rgb(106,137,190);
    }
    .legend_square.grey {
        background: rgb(200,205,210);
    }