/* DEFAULT LAYOUT - SINGLE COLUMN */

.inner {
	max-width: 100%;
    margin: 0 auto;
}

header .inner {
    position: relative;
}

header img {
    vertical-align: bottom;
}

header .inner > div {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #444;
    padding: 0.2rem 1rem;
}
    
#site-title, #tagline {
    text-align: left;
}

header .inner > img {
    margin-top: 2.25rem;
}

main {
	padding: 1em;
}

#sidebar-one {
    display: none;
}

.sidebar {
	padding: 1em;
}

nav.primary {
	display: none;
}

#menu-button {
    font-size: 1.5rem;
}

h1 {
    font-size: 1.5rem;
}

footer .inner {
	padding: 2em 1em;
}

#footer-links li {
    margin-bottom: 0.75em;
}

/* Coloured header and footer */

/* For a full-width coloured header, change this selector to just the header: */	
header .inner {   
    background-color: #333;
    color: #fff;
}

/* For a full-width coloured footer, change this selector to just the footer: */
footer .inner {
    background-color: #333;
    color: #fff;
}


@media screen and (min-width: 30rem) {

	#site-title {
		font-size: 2rem;
    }

    #site-title, #tagline {
        text-align: center;
    }

    #menu-button {
        font-size: 2rem;
    }

    h1 {
        font-size: 2rem;
    }


    #footer-links ul {
        display: flex;
    }

    #footer-links li {
        margin-right: 2em;
        margin-bottom: 0;
    }

}

@media screen and (min-width: 40rem) {

    /* Images */
    img.left {
        float: left;
        width: 40% !important;
        height: auto !important;
        margin: 0 1em 1em 0;
    }

    img.right {
        float: right;
        width: 40% !important;
        height: auto !important;
        margin: 0 0 1em 1em;
    }

    h2, h3, h4 {
        /* Clear floated images */
        clear: both;
    }

}



/* MEDIUM LAYOUT */
/* A two-column layout with a left-hand sidebar column and a central main column. The two sidebars are combined into one. */

@media screen and (min-width: 58rem) {

    header .inner > div {
        position: absolute;
        width: 92%;
        top: 2rem;
        left: 4%;
        background-color: #000;
        opacity: 0.8;
    }

    .inner {
        border-left: 1px solid #eee;
        border-right: 1px solid #eee;
    }

	#site-title {
		font-size: 3rem;
    }

    header .inner > img {
        margin-top: 0;
    }

	/* Always make the footer stick to the bottom of the window */
	body {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}
	
	#content {
		flex-grow: 1;
	}		
	/* @end sticky footer */

	.inner {
		padding: 0;
		width: 58rem; /* Override the width set by the smaller layout */
		margin: 0 auto;
	}

	/* Create a two-column, two-row grid. The two asides will be put in the first column, with sidebar-one in the first row and sidebar-two in the second row. The height of the first row will be set by the content of sidebar-one. The height of the second row will be flexible, so that it can extend down if needed. The main element will be in the second column and will span the rows created by the asides. */
	#content {
		display: flex;
	}

	main {
        order: 2;
        padding: 2em;
        width: 44rem;
    }

	#sidebar-one {
        display: block;
		order: 1;
        width: 14rem;
	}
	
	.sidebar > div {
		padding-left: 0;
		padding-right: 0;
	}

	nav.primary, form#SearchForm_SearchForm {
		display: block;
	}
	
	form#SearchForm_SearchForm {
		margin-top: 2rem;
	}
	
	#menu-button {
		display: none;
	}

	header h1 {
		font-size: 2rem;
	}

	aside input[type=text], aside input[type=email], aside textarea {
		width: 100%;
	}
	

}

/* Increase base font size if there's enough screen real estate */

@media screen and (min-width: 75rem) {

    html {
        font-size: 125%;
    }

}


@media screen and (min-width: 86rem) {

    html {
        font-size: 140%;
    }

}


/* LARGE LAYOUT */

/* A three-column layout with a left-hand sidebar column, a central main column, and a right-hand sidebar column. */

/*
@media screen and (min-width: 82rem) {	

	.inner {
		width: 80rem;
	}
	
	#content {
		display: flex;
		flex-direction: row;
	}

	main {
		width: 50%;
		max-width: 50%;
		padding: 1em 3em;
		order: 2;
	}

	#sidebar-one {
		width: 25%;
		order: 1;
	}

	#sidebar-two {
		width: 25%;	
		order: 3;
	}

}
*/