html,
body {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
html {
  background: #efefef;
  color: #666;
  font: 12px/1.5em arial, helvetica, sans-serif;
}
body {
  font-size: 100%;
}
header,
footer,
nav,
section,
figure,
aside,
figcaption,
header ul,
header ul li,
footer ul,
footer ul li,
nav ul,
nav ul li {
  margin: 0;
  padding: 0;
  display: block;
}
header ul,
footer ul,
nav ul {
  list-style: none;
}
@font-face {
  font-family: 'WebSymbolsRegular';
  src: url('/html5/fonts/websymbols-regular-webfont.eot');
  src: url('/html5/fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('/html5/fonts/websymbols-regular-webfont.woff') format('woff'), url('/html5/fonts/websymbols-regular-webfont.ttf') format('truetype'), url('/html5/fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
}
nav.off-canvas-navigation {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}
nav.off-canvas-navigation ul {
  list-style: none;
}
nav.off-canvas-navigation ul li {
  width: 20%;
  padding: 4px 8px;
  background: #fff;
  background-color: rgba(255, 255, 255, 0.6);
  text-align: center;
  vertical-align: baseline;
  text-shadow: 0px 1px 3px rgba(255, 255, 255, 0.4);
  background-image: linear-gradient(top, rgba(255, 255, 255, 0.6) 500%, rgba(123, 123, 123, 0.6) 9500%);
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.6) 500%, rgba(123, 123, 123, 0.6) 9500%);
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.6) 500%, rgba(123, 123, 123, 0.6) 9500%);
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.6) 500%, rgba(123, 123, 123, 0.6) 9500%);
  background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.6) 500%, rgba(123, 123, 123, 0.6) 9500%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, rgba(255, 255, 255, 0.6)), color-stop(0.95, rgba(123, 123, 123, 0.6)));
}
nav.off-canvas-navigation ul li:before {
  font-family: WebSymbolsRegular;
  color: #333;
}
nav.off-canvas-navigation ul li a {
  text-decoration: none;
  color: #333;
}
nav.off-canvas-navigation ul li.menu-item {
  float: left;
}
nav.off-canvas-navigation ul li.menu-item:before {
  content: "Z ";
}
nav.off-canvas-navigation ul li.sidebar-item {
  float: right;
}
nav.off-canvas-navigation ul li.sidebar-item:before {
  content: "S ";
}
[role=navigation] {
  background: #dde;
}
[role=main] {
  background: #fcc;
}
[role=complementary] {
  background: #eed;
}
.container {
  position: relative;
  overflow: hidden;
}
/*
	without Javascript
*/
[role=navigation],
[role=main],
[role=complementary] {
  -webkit-transition: .2s all ease;
  -moz-transition: .2s all ease;
  -o-transition: .2s all ease;
  transition: .2s all ease;
  width: 90%;
  padding: 5%;
}
header,
footer {
  width: 100%;
  padding: 20px 0;
  clear: both;
}
header h1 {
  width: 90%;
  padding: 0 5%;
}
footer p {
  width: 90%;
  padding: 0 5%;
}
/*
	with Javascript
*/
/*
	default center
*/
.js [role=navigation] {
  margin-left: -100%;
  float: left;
}
.js [role=main] {
  margin-left: 0;
  float: left;
  background: #eef;
}
.js [role=complementary] {
  margin-right: -200%;
  float: left;
}
/*
	Access Left
*/
.active-menu [role=navigation] {
  margin-left: 0;
  width: 80%;
}
.active-menu [role=main] {
  margin-right: -100%;
}
.active-menu [role=complementary] {
  margin-right: -100%;
  float: right;
}
/*
	Access Right
*/
.active-sidebar [role=navigation] {
  margin-left: -100%;
}
.active-sidebar [role=main] {
  margin-left: -90%;
}
.active-sidebar [role=complementary] {
  margin-left: 0;
  width: 80%;
}
.active-menu nav.off-canvas-navigation ul li.menu-item,
.active-sidebar nav.off-canvas-navigation ul li.sidebar-item {
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
  background-color: #636363;
  background-image: linear-gradient(top, rgba(123, 123, 123, 0.6) 500%, rgba(255, 255, 255, 0.6) 9500%);
  background-image: -o-linear-gradient(top, rgba(123, 123, 123, 0.6) 500%, rgba(255, 255, 255, 0.6) 9500%);
  background-image: -moz-linear-gradient(top, rgba(123, 123, 123, 0.6) 500%, rgba(255, 255, 255, 0.6) 9500%);
  background-image: -webkit-linear-gradient(top, rgba(123, 123, 123, 0.6) 500%, rgba(255, 255, 255, 0.6) 9500%);
  background-image: -ms-linear-gradient(top, rgba(123, 123, 123, 0.6) 500%, rgba(255, 255, 255, 0.6) 9500%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, rgba(123, 123, 123, 0.6)), color-stop(0.95, rgba(255, 255, 255, 0.6)));
}
.active-menu nav.off-canvas-navigation ul li.menu-item a,
.active-sidebar nav.off-canvas-navigation ul li.sidebar-item a,
.active-menu nav.off-canvas-navigation ul li.menu-item:before,
.active-sidebar nav.off-canvas-navigation ul li.sidebar-item:before {
  color: #fff;
}
/*
	Medium Viewport Styles
*/
@media all and (min-width: 600px) {
  .js [role=navigation] {
    width: 20%;
    margin-left: 0;
  }
  .js [role=main] {
    width: 60%;
    float: left;
    background: #fee;
  }
  .js [role=complementary] {
    width: 20%;
  }
  nav.off-canvas-navigation li.menu-item {
    display: none;
  }
  .active-sidebar [role=navigation] {
    margin-left: -100%;
  }
  .active-sidebar [role=main] {
    margin-left: 0;
    width: 60%;
  }
  .active-sidebar [role=complementary] {
    margin-right: -80%;
    width: 20%;
  }
}
/*
	Large Viewport Styles
*/
@media all and (min-width: 800px) {
  .js [role=navigation] {
    width: 19%;
    margin-left: 0;
    float: left;
    padding: 3%;
  }
  .js [role=main] {
    width: 44%;
    padding: 3%;
    background: #efe;
  }
  .js [role=complementary] {
    width: 19%;
    padding: 3%;
    margin-right: 0;
    float: right;
  }
  nav.off-canvas-navigation li.sidebar-item {
    display: none;
  }
}