html {
		    overflow-y:scroll;
		}
		
		body {
        background:#f8fafd;
        width:100%;
        margin:auto;
        font-family:verdana, sans-serif;
        font-size:11px;
        color:#666;
    }

    a {
        color:inherit;
    }

    h1 {
        font-size:1.8em;
    }

    h2 {
        font-size:1.4em;
    }

    header {
        background:url(mobile.png) no-repeat center, #7bb0e6;
        height:125px;
        overflow:hidden;
        font-size:2em;
    }

    header img {
        max-width:100%;
				display:none;
    }

    nav, aside {
        background:#ffffff;
        padding:15px 15px 0px 15px;
    }

    nav p {
        text-align:center;
        font-weight:bold;
    }

    nav a {
        padding:1px 10px;
    }

    nav img, .box img {
        display:none;
    }

    aside a {
        text-decoration:none;
        font-weight:bold;
    }

    .box {
        background:#edf4ff;
        padding:0px 10px;
        border:1px solid #7bb0e6;
    }

        nav h2, aside h2 {
            background:#7bb0e6;
            color:#ffffff;
            margin:0;
            padding:7px 10px;
            font-size:1.2em;
        }

        .box {
            background:#fdfdfd;
            padding:initial;
        }

        .box p {
            padding:0px 15px;
        }

        .districts p {
            text-align:center;
        }

        .districts a {
            font-weight:normal;
        }

        .distlink::after {
            content: " / ";
        }

    main {
        background:#ffffff;
        padding:5px 15px;
        line-height:1.4em;
        text-align:justify;
    }

    footer {
        background:#ffffff;
        padding:1px 15px;
        text-align:center;
        font-size:0.8em;
    }

    @media (min-width: 800px) {

        body {
            width:680px;
            border:1px solid #7bb0e6;
            border-top:none;
            display:grid;
            grid-template-columns: 500px 180px;
            grid-template-rows: 125px 190px auto;
        }

        header {
						background:url(gradient.png) no-repeat right, url(logo.png) no-repeat left, linear-gradient(to right, #7bb0e6 40%, #F9FEFF 80%);
            grid-column: 1 / span 2;
            grid-row: 1;
						text-align:right;
        }

        header .title {
            display:inline-block;
            font-size:2.7em;
        }

				header img {
					display:initial;
				}

        nav {
            grid-column: 2;
            grid-row: 2;
        }

        nav p {
            text-align:left;
        }

        nav a {
            display:block;
            padding:8px 0px;
            font-weight:normal;
        }

        nav img, .box img {
            display:inline;
            padding-right:10px;
        }

        nav, aside {
            padding:15px 15px 0px 10px;
        }

        nav h2, aside h2 {
            background:#7bb0e6;
            color:#ffffff;
            margin:0;
            padding:7px 15px;
            font-size:1.2em;
        }

        .box {
            background:#fdfdfd;
            padding:initial;
        }

        .box p {
            padding:0px 15px;
        }

        .districts a {
            display:block;
            padding:1px 0px;
            font-weight:normal;
        }

        .districts p {
            text-align:left;
        }

        .distlink::after {
            content: "";
        }

        main {
            grid-column: 1;
            grid-row: 2 / span 5;
            border-right:none;
        }

        aside {
            grid-column: 2;
            grid-row: 3 / span 5;
            border-left:none;
            line-height:1.6em;
        }

        aside a {
            display:block;
            color:#333333;
        }

        footer {
            text-align:left;
            border-top:1px solid #7bb0e6;
            }
    }