@media all and (min-width: 640px) {
	#header {
	  background: #fff url(images/header-bg.png) no-repeat top right !important;
	  text-align: left;
	}

	#header #logo {
	  margin: 1em .5em 1em 1em;
	  float: left;
	}

	#header h1 {
	  margin: 1em 0 0 1em;
	}

	#header #mission {
	  clear: none;
	  margin: .5em 0 1em 2em;
	}

	#header #nav .toggle-menu {
	  text-align: center;
        }
}

@media all and (min-width: 851px) {
	#wrap {
	  /* fixed vertical, fluid horizontal */
	  padding: 2em 2%;
	}

	#header #nav .toggle-menu {
	  text-align: left;
        }

	#header #language-switcher {
          position: absolute;
          bottom: 1px;
	  right: 1em;
	}

	#nav ul.primary-links {
	  float: left;
	}

	#nav ul.primary-links li {
	  background: none;
	  float: left;
	  display: inline;
	  padding: 0;
	  margin: 0;
	}
	#nav ul.primary-links li {
	  padding: 16px 0 0 0;
	}

	#main-content {
		float: left;
		width: 60%;
		/* Re-shift the content to right
		 * so it enters again in the viewport
		 */
		margin-left: 40%;
	}

	#main-box {
	  margin: 1em .5em 0 1em;
	}

	#sidebar {
		float: right;
		width: 40%;
		/* Shift the sidebar on the right so it stay in place and
		 * floats near the content, remember, the initial position is relative to
		 * the (already shifted to left) container-in element
		 */
		margin-right: -40%;
	}

	#container-mid {
		/* shift the container on the left */
		/* width of the *rigth* sidebar */
		right: 20%;

		/* left sub-sidebar background colour */
		/*
		background-color: #abffff;
		*/
	}
	#container-in {
		/* shift the container on the left */
		/* width of the *left* sidebar */
		right: 20%;

		/* main content background colour */
		/*
		background-color: #d5ffab;
		*/
	}

	#footer {
		width: 80% !important;
	}
}