html {
  	height:100%;
}
body {
  	margin:0;
  	height:100%;
  	width:100%;
  	font-family:arial,sans-serif;
	font-size:.8em;
	overflow:hidden;
}
#header {
	width:95%;
	position:absolute;
	right:0;
	height:15%;
	z-index:4;
	background-color:#666;
	min-height:45px;
}
#nav {
  	position:absolute;
	left;0;
	width:5%;
	min-width:30px;
	height:100%;
	z-index:3;
	border-right:1px solid #0099cc;
	background-color:#fff;
}
#content {
	width:95%;
	height:85%;
	position:absolute;
	right:0;
	bottom:0;
	min-width:570px;
	min-height:255px;
}
a {
	color:#0099cc;
	text-decoration:none;
	font-weight:bold;
}

/** Header **/
#logo {
  	position:absolute;
	top:0;
	right:0;
	height:100%;
	border:none;
}
h1 {
  	font-family:"Arial Narrow","Arial MT Std",arial,sans-serif;
  	padding:10px 20px;
  	font-weight:normal;
	color:#fff;
	margin:0;
  	font-size:20px;
	line-height:120%;
	position:absolute;
	width:100%;
	bottom:0;
}

/** Nav **/
#nav div {
	height:0px;
	overflow:visible;
	font-size:18px;
	padding:5px 0px 25px;
	width:120px;
  	text-align:center;
  	cursor:pointer;
  	background-color:#aaa;
  	-o-transition:all .5s ease-in-out;
  	-ms-transition:all .5s ease-in-out;
  	-moz-transition:all .5s ease-in-out;
  	-webkit-transition:all .5s ease-in-out;
  	transition:all .5s ease-in-out;
  	border-radius:8px 8px 0 0;
  	color:#fff;
	-webkit-transform:translate(46px,45px) rotate(-90deg);
	-moz-transform:translate(46px,45px) rotate(-90deg);
	-ms-transform:translate(46px,45px) rotate(-90deg);
	-o-transform:translate(46px,45px) rotate(-90deg);
	transform:translate(46px,45px) rotate(-90deg);
	position:absolute;
	right:0;
}
#nav div[rel=datatable] {
	top:120px;
}
#nav div[rel=embed] {
	top:240px;
}
#nav div.active {
  	background-color:#0099cc;
  	color:#fff;
}

/** Content **/
#info {
	padding:10px;
	background-color:#e8e8e8;
	position:absolute;
	bottom:0;
	right:16px;
	z-index:3;
	opacity:.8;
}
table {
	border-collapse:collapse;
	margin:30px auto;
}
thead {
	background-color:#666;
	color:#fff;
}
th {
	padding:10px;
	text-align:left;
}
tbody tr {
	border-bottom: 1px solid #666;
}
td {
	padding:8px 20px;
}
.display {
  	height:100%;
	width:100%;
  	position:absolute;
	background-color:#fff;
	display:none;
}
.display.active {
	display:block;
}
.display#datatable {
	overflow:auto;
}
.display#embed {
	padding:20px;
	font-size:15px;
}
code {
	background-color:#e8e8e8;
	border:1px solid #ccc;
	margin-top:1em;
	padding:10px 20px;
	display:block;
	width:500px;
	border-radius:10px;
}