/* Also relates to the pseudo class & sibling bug */
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }

.outer {
	overflow: hidden;
	min-height: 720px;
}

.slide {
	background: #ffffff;
	padding: 20px;
}

.content {
	margin-top: 30px;
}

.content ul,
.content ol {
	margin: 10px 40px;
}

h1,h2,h3,p {
	margin-bottom: 18px;
}

h1 {
	line-height: 26px;
}

/* @group .nav */
.nav {
	width: 100%;
	margin: 0 0 20px 0;
	padding: 5px 0;
	background: #005596;
	border-radius: 3px;
	overflow: hidden;
	min-height: 720px;
}

.nav li {
	list-style: none;
	margin: 0;
	padding: 0;
	float: left;
}

.nav li a {
	display: block;
	padding: 5px 20px;
	text-decoration: none;
	background: #005596;
	color: #ffffff;
}

.nav li a:hover {
	background: #ffffff;
	color:#005596;
}

/* @end nav */

/* This is the clickable label */
.slide-toggle {
	float: right;
	cursor: pointer;
	position: relative;
	z-index: 1;
	display: none;
	margin: 10px 10px 0 0;
}

/* Kill the nasty outlines everywhere */
.slide-toggle,
.slide-toggle:active,
.slide-toggle:focus {
	border: none !important;
	outline: none !important;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* The :after pseudo element has an icon that covers the checkbox */
.slide-toggle:after {
	content: "!";
	color: #ffffff;
	background: #005596;
	display: block;
	height: 30px;
	width: 38px;
	border-radius: 3px;
	font: 24px/30px 'responav';
	text-align: center;
	margin-left: -19px;
}

/* This is the checkbox */
.slide-checkbox {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

/* When it's checked replace the menu icon with a close icon */
.slide-checkbox:checked ~ .slide-toggle:after {
	content: '"';
}

/*
 * I set the width pretty high because I wanted to test on an Ipad in portrait mode,
 * depending on your website you can probably make this narrower
 */
@media handheld, only screen and (max-width: 994px) {

	/* Only show the menu link on smaller screens */
	.slide-toggle {
		display: block;
	}

	/*
	 * The transition value determines the speed
	 * at which the content will slide over
	 */
	.slide {
		-webkit-transition: -webkit-transform 500ms ease;
		-moz-transition: -moz-transform 500ms ease;
		-o-transition: -o-transform 500ms ease;
		transition: transform 500ms ease;
	}

	/*
	 * Enable hardware acceleration and stop flickering
	 * More details: http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/
	 * Add more browser prefixes as required for your environment
	 */
	.slide,
	.nav {
		-webkit-transform: translateZ(0);
		-moz-transform: translateZ(0);
		-webkit-perspective: 1000;
		-moz-perspective: 1000;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
	}

	/*
	 * When the checkbox is checked slide the content
	 * over and the checkbox with it
	 */
	.slide-checkbox:checked ~ .slide {
		-webkit-transform: translateX(70%) scale(1);
		-moz-transform: translateX(70%) scale(1);
		-ms-transform: translateX(70%) scale(1);
		-o-transform: translateX(70%) scale(1);
		transform: translateX(70%) scale(1);

	}

	.nav {
		height: 100%;
		background: #005596;
		border-radius: 0;

		/*
		 * The width determines how much of the page you want to
		 * remain visible once the menu slides over
		 */
		width: 70%;

		/*
		 * Must be absolutely positioned otherwise it won't sit
		 * side by side with the content but instead above it
		 * */
		position: absolute;
		left: 0;
		top: 0;

		/* Keeps the menu hidden off-canvas to the left */
		-webkit-transform: translateX(-100%);
		-moz-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		-o-transform: translateX(-100%);
		transform: translateX(-100%);
	}

	.nav li {
		float: none;
	}

	.nav li a {
		border-top: 1px solid #ffffff;
		padding: 12px 12px;
	}

	.nav li:first-child a {
		border-top: none;
	}

	.nav li:last-child a {
		border-bottom: none;
	}

}

@font-face {
	font-family: 'responav';
	src:url('/drw/ecs/fonts/responav.eot');
	src:url('/drw/ecs/fonts/responav.eot?#iefix') format('embedded-opentype'),
		url('/drw/ecs/fonts/responav.woff') format('woff'),
		url('/drw/ecs/fonts/responav.ttf') format('truetype'),
		url('/drw/ecs/fonts/responav.svg#responav') format('svg');
	font-weight: normal;
	font-style: normal;
}