@charset "utf-8";
/* CSS Document */

	/* --------------------- SIDE BAR --------------------- */

	/* Style of sidebar*/
	#sidebar{
        padding:12px;
        font-family: Tahoma, Geneva, Arial, sans-serif;
        color: #333333;
        opacity: 0.9;
    }

	/* Style of message on sidebar*/
     #sidebar .side-message{
        font-family: Segoe UI, Helvetica, Verdana , Geneva, Arial, sans-serif;
        font-size: 16px;
    	margin-bottom: 0px;
        font-weight: 700;
     }

	/* Style listbox containers within the sidebar*/
     #sidebar .list-box {
        border: 1.3px solid #333333;
        border-radius: 0px;
        margin-left: 5px;
        margin-top: 15px;
     }

     #sidebar .list-box p {
        opacity: 0.95;
     }

	/* Style headers within the sidebar*/
      #sidebar .side-header {
        font-size: 15px;
        padding-left: 10px;
        padding-bottom: 6px;
        margin-top: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
        font-family: Segoe UI, Helvetica, Verdana , Geneva, Arial, sans-serif;
        font-weight: 600;
      }

	/* Style for 'either'/'or' text within the sidebar*/
     #sidebar .side-either-or {
        display: inline-block;
        position: relative;
        top: -8px;
        font-size: 15px;
        margin-top: -12px;
        margin-bottom: 0px;
        margin-left: 8px;
        margin-right: 8px;
        padding-left: 8px;
        padding-right: 8px;
        color: #333333;
        background-color: #f0f0f0;
        font-family: Segoe UI, Helvetica, Verdana , Geneva, Arial, sans-serif;
        font-weight: 600;
     }

	/* Style for menus within the sidebar*/
    #sidebar #selector-menu-beds, #sidebar #selector-menu-income, #sidebar #selector-menu-profile {
        padding-left: 10px;
        padding-bottom: 14px;
        margin-left: 0px;
        margin-bottom: 10px;
        margin-top: 0px;
    }

	/* Style for menu selectors within the sidebar*/
    #sidebar #selector-beds, #sidebar #selector-income, #sidebar #selector-profile {
        font-size: 13.5px;
        width: 138px;
    }

	/* Style for household profile menu selector within the sidebar*/
    #sidebar #selector-profile {
        display: inline-block;
        height: 67px;
        white-space: pre-wrap;
    }

	/* Style for household profile note within the sidebar*/
     #sidebar .hh-profile-note {
        padding-left: 10px;
        padding-right: 10px;
        margin-top: -10px;
        padding-bottom: 12px;
        margin-bottom: 0px;
        font-size: 10px;
    }

	/* Style for side note within the sidebar*/
    #sidebar .side-note {
        padding-left: 10px;
        padding-top: 15px;
        margin-bottom: 0px;
        font-size: 10px;
    }

	/* Style for side note links within the sidebar*/
    #sidebar .side-note a {
        color: #8dc63f;
    }

	/* --------------------- SLIDER --------------------- */

    /* Styles for the slider */
    #slider{
		position: relative;
		left: 3%;
		bottom: 143px;
		width: -o-calc(0.93*(100% - 300px)); /* opera */
		width: -webkit-calc(0.93*(100% - 300px));  /* google, safari */
		width: -moz-calc(0.93*(100% - 300px)); ; /* firefox */
		width: calc(0.93*(100% - 300px)); ; /* firefox */
		-webkit-transition: width 600ms ease-out;
		-moz-transition: width 600ms ease-out;
		-o-transition: width 600ms ease-out;
		transition: width 600ms ease-out;
    }

    /* Styles for the slider label */
    #legend {
		position: relative;
		left: 4%;
		bottom: 145px;
		width: 69%;
		border-width: 1px;
        font-family: Segoe UI, Helvetica, Verdana , Geneva, Arial, sans-serif;
		font color: #ffffff; 
    }

    #legend b, strong {
        font-weight: 500!important;
    }

    /* Font size of the slider label */
    #legend h2 {
		font-size: 30px;
    }

    /* Styles for the geography zoom*/
    div#geography-zoom {
        background-color: #D3D3D3;
        opacity: 0.8;
        position: absolute;
        top: 20px;
        left: 65px;
        width: auto;
        height: auto;
        padding: 10px;
        display: block;
        z-index: 9000;
        font-family: Segoe UI, Helvetica, Verdana , Geneva, Arial, sans-serif;
        font-size: 12px;
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
    }

    /* Styles for state and postcode search*/
    div#postcode-searchbox, div#state-dropdown {
        padding-top: 3px;
        padding-bottom: 3px;
    }

    /* Styles for postcode search box input*/
    div#postcode-searchbox input {
        width: 52px;
        font-family: Segoe UI, Helvetica, Verdana , Geneva, Arial, sans-serif;
        border: 1px solid #aaa;
        box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
        border-radius: .5em;
        padding: .3em .5em .3em .5em;
    }   

    /* Styles for state dropdown box input*/
    #selector-state {
        padding: .3em .5em .3em .5em;
        width: 87px;
    }

    /* Styles for mobile browsing*/
    @media (max-width: 768px) {
    	
    	/* Styles for the slider */
	    #slider {
			width: -o-calc(91%)); /* opera */
			width: -webkit-calc(91%);  /* google, safari */
			width: -moz-calc(91%); ; /* firefox */
			width: calc(91%); ; /* firefox */
	    }

    	/* Font size of the slider label */
	    #legend h2 {
			font-size: 16px;
	    }

        /* Style for menu selectors within the sidebar*/
        #sidebar #selector-beds, #sidebar #selector-income, #sidebar #selector-profile {
            font-size: 11px;
            width: 168px;
        }

        #slider {
            height: 20px;
        }

        /* Style for slider handle height*/
        .ui-slider-handle {
            height: 1.9em !important;
        }
    }

    /* --------------------- TOOLTIP --------------------- */

    /* Style of what proceeds a level 4 heading */
    div#quarter-details h4::after {
        content: "";
    }

    /* --------------------- LEGEND --------------------- */

    /* Legend class cell length */
    .rai-legend-class {
      display: table-cell;
      width: 148px;
    }

    /* Legend score cell length */
    .rai-legend-score {
      display: table-cell;
      width: 75px;
    }

}