html {
	width: 100%;
	height: 100%;
	font-size: 100%;
}
html.offcanvas {
	overflow: hidden;
}

body {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: $darkGrey;
}
.offcanvas body {
	overflow: hidden;
}

.animatedSlide {
	transition-property: transform;  
	transition-duration: 0.3s;  
	transition-timing-function: ease-out;
	
	-ms-transition-property: -ms-transform;  
	-ms-transition-duration: 0.3s;  
	-ms-transition-timing-function: ease-out;
	
	-moz-transition-property: -moz-transform;  
	-moz-transition-duration: 0.3s;  
	-moz-transition-timing-function: ease-out;
	
	-webkit-transition-property: -webkit-transform;  
	-webkit-transition-duration: 0.3s;  
	-webkit-transition-timing-function: ease-out;
	
	-o-transition-property: -o-transform;  
	-o-transition-duration: 0.3s;  
	-o-transition-timing-function: ease-out;
}
.no-csstransforms3d .animatedSlide {
	transition: left 0.3s ease-out, right 0.3s ease-out;  
	-ms-transition: left 0.3s ease-out, right 0.3s ease-out;   
	-moz-transition: left 0.3s ease-out, right 0.3s ease-out;
	-webkit-transition: left 0.3s ease-out, right 0.3s ease-out; 
	-o-transition: left 0.3s ease-out, right 0.3s ease-out; 
}

.floated {
	float:left;
	width:100%;
}

.padded {
	padding:2em;
	@include box-sizing(border-box);
}
.paddedLight {
	padding:1.2em;
	@include box-sizing(border-box);
}

.offcanvas .scrollableArea {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.sidebarLeft.show, .sidebarRight.show {
	z-index: 200;
}

/* Sliding side bars */
.sidebarLeft, .sidebarRight {
	float: left;
	width: 20%;
	word-wrap:break-word;
	z-index: 100;
	background-color: $darkGrey;
	
	/* hides close button unless JS is enabled */
	.shutLeft, .shutRight {
		display: none;
		position:absolute;
		top:0;
		z-index: 90;
		width:1.6em;
		height:1.6em;
		font-size:2.5em;
		line-height: 1.6em;
		color:$lightGrey;
		text-decoration:none;
		text-align:center;
		opacity: 0.3;
		font-family: 'Entypo';
		
		&:hover {
			opacity: 0.5;
		}
	}
}

/* Styles for both sidebars */
.offcanvas .sidebarLeft, .offcanvas .sidebarRight {
	position: absolute;
	top:0;
	bottom:0;
	width:20em;
	
	.shutLeft, .shutRight {
		display: block;
	}
	
	@media screen and (max-width: $smallMediumBreak) {
		width: 16em;
	}
}
.offcanvas .sidebarLeft {
	left: 0;
	transform:translate3d(-7em,0,0);
	-ms-transform:translate3d(-7em,0,0);
	-moz-transform:translate3d(-7em,0,0);
	-webkit-transform:translate3d(-7em,0,0);
	-o-transform:translate3d(-7em,0,0);
	
	.shutLeft {
		left: 0;
	}
}
.offcanvas .sidebarRight {
	right: 0;
	transform:translate3d(7em,0,0);
	-ms-transform:translate3d(7em,0,0);
	-moz-transform:translate3d(7em,0,0);
	-webkit-transform:translate3d(7em,0,0);
	-o-transform:translate3d(7em,0,0);
	
	.shutRight {
		right: 0;
	}
}
/*.no-csstransforms3d .offcanvas .sidebarLeft {
	left:-7em;
}
.no-csstransforms3d .offcanvas .sidebarRight {
	right:-7em;
}*/

/* Main central area styles */
.page {
	word-wrap: break-word;
	position: relative;
	z-index: 500;
	
	.scrollableArea {
		position: absolute;
		top: 4rem;
		bottom: 0;
		background: #fff;
		
		@media screen and (max-width: $mediumLargeBreak) {
			font-size: 90%;
		}
		@media screen and (max-width: $smallMediumBreak) {
			font-size: 85%;
		}
		@media screen and (max-width: $smallestBreak) {
			font-size: 80%;
		}
	}
}
.offcanvas .page {
	width: 100%;
	height: 100%;
}
.no-js .page {
	float: left;
	width: 60%;
}

/* Slid styles */
.page.slidRight {
	transform:translate3d(20em,0,0);
	-ms-transform:translate3d(20em,0,0);
	-moz-transform:translate3d(20em,0,0);
	-webkit-transform:translate3d(20em,0,0);
	-o-transform:translate3d(20em,0,0);
	
	@media screen and (max-width: $smallMediumBreak) {
		transform:translate3d(16em,0,0);
		-ms-transform:translate3d(16em,0,0);
		-moz-transform:translate3d(16em,0,0);
		-webkit-transform:translate3d(16em,0,0);
		-o-transform:translate3d(16em,0,0);
	}
}
.page.slidLeft {
	transform:translate3d(-20em,0,0);
	-ms-transform:translate3d(-20em,0,0);
	-moz-transform:translate3d(-20em,0,0);
	-webkit-transform:translate3d(-20em,0,0);
	-o-transform:translate3d(-20em,0,0);
	
	@media screen and (max-width: $smallMediumBreak) {
		transform:translate3d(-16em,0,0);
		-ms-transform:translate3d(-16em,0,0);
		-moz-transform:translate3d(-16em,0,0);
		-webkit-transform:translate3d(-16em,0,0);
		-o-transform:translate3d(-16em,0,0);
	}
}
.no-csstransforms3d .page.slidRight {
	left: 20em;
	
	@media screen and (max-width: $smallMediumBreak) {
		left: 16em;
	}
}
.no-csstransforms3d .page.slidLeft {
	left: -20em;
	
	@media screen and (max-width: $smallMediumBreak) {
		left: -16em;
	}
}

.sidebarLeft.slidRight, .sidebarRight.slidLeft {
	transform:translate3d(0,0,0);
	-ms-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
	-webkit-transform:translate3d(0,0,0);
	-o-transform:translate3d(0,0,0);
}
.no-csstransforms3d .sidebarLeft.slidRight {
	left: 0;
}
.no-csstransforms3d .sidebarRight.slidLeft {
	right: 0;
}

.topBar {
	position:relative;
	height:4em;
	width:100%;
	z-index:1000;
	word-wrap:break-word;
	overflow:hidden;
	background-color: $mediumGrey;
	
	.slideRight, .slideLeft {
		position:absolute;
		top:0;
		width:0.8em;
		height:0.8em;
		font-size:5em;
		line-height:0.84em;
		color: #fff;
		text-decoration:none;
		text-align:center;
		font-family: 'Entypo';
	}
	.slideRight:hover, .slideRight.pressed, .slideLeft:hover, .slideLeft.pressed {
		color:scale-lightness(#fff, 15em);
	}
	.slideRight.pressed, .slideLeft.pressed {
		background:scale-lightness($mediumGrey, -15em);
	}
	
	.slideRight {
		left:0;
	}
	.slideLeft {
		right:0;
	}
}