html {
	overflow-y: scroll; /* Sticky vertical scrollbar to prevent horizontal shifts on navigation. */
}

html.progress, html.progress * {
	cursor: progress !important;
}

body {
	margin: 0;
	color: #373737;
	background: #f2f2f2;	
	font-family: 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
	letter-spacing: -.02em;
	-webkit-font-smoothing: antialiased;
}

body .ui-widget,
body .ui-widget .ui-widget {
	font-size: inherit;
}

body .ui-widget-content a,
body .ui-widget-content a code {
	color: #007edf;
	text-decoration: none;
}

body .ui-widget-content h3 a {
	color: inherit;
}

body .wrapped {
	max-width: 1200px;
    min-width: 480px;
	margin: 0 auto;
	border: 0;
	color: inherit;
	background: inherit;
}

h1, h2, h3, h4, h5, h6 {
	margin: .5em 0;
	font-weight: 700;
	color: #212121;
	font-family: 'Lucida Grande', 'Calibri', Helvetica, Arial, sans-serif;
	letter-spacing: -.06em;
}

h2 {
	padding: .5em 0;
	font-size: 1.6em;
	border-bottom: 1px #ccc dashed;
}

h3 {
	font-size: 1.4em;
}

h4 {
	font-size: 1.2em;
}

hr {
	margin: 2em 0;
	height: 1px;
	border: none;
	background-color: #ccc;
}

a img {
	border: 0; /* IE */
}

ul {
	margin-bottom: 1em;
	padding-left: 1.5em;
}

blockquote {
	color: #666;
	margin-bottom: 1em;
	padding: 0 0 0 1em;
	border-left: .2em solid #bbb;
}

label.error {
	color: #c66;
}

input.error, select.error, textarea.error {
	background-color: #fee;
}

pre, 
code,
.code {
	font-family: Consolas, Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
	letter-spacing: -.06em; 
}

#header-wrapper {
	background: #212121;
	background: -moz-linear-gradient(top, #373737, #212121);
	background: -webkit-linear-gradient(top, #373737, #212121);
	background: -ms-linear-gradient(top, #373737, #212121);
	background: -o-linear-gradient(top, #373737, #212121);
	background: linear-gradient(top, #373737, #212121);
}

#header {
	padding: 50px 10px 30px;
}

#logo {
	float: left;
	margin-top: -1em;
	margin-right: 1em;
}

#header h1 {
	margin: 0;
	color: white;
	font-size: 2.4em;
	text-shadow: #111 0 0 .4em;
	line-height: 1em;
}

#header h2 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1.275em;
	font-weight: 300;
	color: white;
	text-shadow: #111 0 0 .3em;
}

#content-wrapper {
	padding: 1em 0;
}

#content {
	box-sizing: border-box;
	float: right;
	width: 72%;
	max-width: none;
	min-width: 0;
	padding: .4em .2em;
}

#content a:hover, 
#content a.active {
	text-decoration: underline;
}

#content pre,
#content code,
#content .code {
	width: 99%;
	padding: .2em;
	border-radius: .2em;
	box-shadow: 0 0 .5em rgba(0,0,0,.1);
	background-color: #fff;
}

#content pre {
	margin: 1em 0;
	padding: .5em;
	overflow: auto;
	overflow-y: hidden;
	word-wrap: normal;
}

#content pre code {
	width: auto;
	padding: 0;
	margin: 0;
	box-shadow: none;
}

#content .github {
	background-color: #373737;
	color: #fff;
}

#content .ui-panel-content {
	padding: .5em;
	border: 0;
	background: 0;
}

#content .ui-panel-content .block table tr:nth-child(odd) {
	background-color: #fafafa;
}

#content .ui-panel-content .block table tr:nth-child(even) {
	background-color: #eaeaea;
}

#content .ui-tabs {
    padding: .2em;
    border-radius: 3px;
    background: #fff;
}

#content .ui-tabs .ui-tabs-panel {
	padding: 0;
}

#content .ui-tabs .ui-tabs-nav .ui-state-default,
#content .ui-button.ui-state-default {
	margin: 0 .2em 1px 0;
	border: 0;
	background: #ddd;
	color: #212121;
	box-shadow: 0 0 0.5em #ddd;
}

#content .ui-tabs .ui-tabs-nav .ui-state-default {
	border-radius: 3px 3px 0 0;
}

#content .ui-tabs .ui-tabs-nav .ui-state-focus a,
#content .ui-tabs .ui-tabs-nav .ui-state-hover a,
#content .ui-button.ui-state-focus,
#content .ui-button.ui-state-hover {
	color: #007edf;
}

#contentTitle {
	margin-top: 0;
	padding-top: 0;
}

#menu {
	box-sizing: border-box;
	float: left;
	width: 27%;
	margin: 0;
	padding: .4em .2em;
	border: 0;
	background: none;
}

#menu .ui-panel, 
#content .ui-panel {
	margin: 6px 0;
	padding: 1px;
	border: 0;
	border-radius: 3px;
	box-shadow: 0 0 .5em rgba(0,0,0,.1);
	background: #fff;
}

#menu .ui-panel-titlebar, 
#content .ui-panel-titlebar {
	padding: .1em .2em;
	border: 0;
	border-radius: 3px;
	box-shadow: 0 0 .2em rgba(0,0,0,.5);
	color: #fff;
	background: #373737;
}

#menu .ui-panel-content {
	padding: 0;
	border: 0;
	background: 0;
}

#menu .ui-panel-content .ui-panel-content {
	padding: 0 .2em;
}

#menu ul {
	margin: .2em 0 .1em 0;
	padding: 0;
	list-style-type: none;
}

#menu ul.group li {
	float: left;
	margin-right: 2px;
}

#menu a {
	display: block;
	color: #212121;
	border-radius: 3px;
}

#menu a.code {
	padding: 1px 0;
}

#menu a:link {
	background: inherit;
	box-shadow: inherit;
	transition: all .3s;
}

#menu a:hover, 
#menu a.active {
	background: #ddd;
	box-shadow: 0 0 .5em #ddd;
	transition: all .3s;
}

#footer-wrapper {
	background: #212121;
}

#footer {
	height: 500px; /* Just some spacing to avoid vertical page shifts when switching between source code tabs. */
	text-align: center;
}

#footer .ui-widget-content {
	color: white;
	background: 0;
	border: 0;
}

#footer h3 {
	border: 0;
	font-size: 22px;
	font-weight: 300;
	color: white;
}

.messages {
	margin: 1em 0;
	padding: 0;
}

.messages li {
	list-style-type: none;
	padding: .3em;
	color: white;
	font-size: 1.4em;
	box-shadow: .1em .1em .2em #ccc;
}

.messages li:first-child {
	border-radius: .2em .2em 0 0;
}

.messages li:last-child {
	border-radius: 0 0 .2em .2em;
}

.messages li:only-child {
	border-radius: .2em;
}

.messages .info {
	background: yellowgreen;
}

.messages .warn {
	background: orange;
}

.messages .error {
	background: orangered;
}

.messages .fatal {
	background: maroon;
}

.snapshot {
	padding: 0 5px;
	background: #ff9;
	color: #373737;
	border-radius: 3px;
	box-shadow: 0 0 .5em #ff9;
	text-shadow: none;
}

.important {
	background: #ff9;
}


/*******************************************************************************
Large Device Styles
*******************************************************************************/

@media screen {

	body {
		font-size: 120%;
		line-height: 160%;
		transition: all .3s;
	}

	body .showOnMobile {
		display: none;
	}

	pre, code, .code {
		font-size: 90%;
		line-height: 120%;
		transition: all .3s;
	}

	#logo img {
		width: 100px;
		height: 100px;
		transition: all .3s;
	}

	#hamburger, #hamburger+label {
		display: none;
	}

}


/*******************************************************************************
Medium Device Styles
*******************************************************************************/

@media screen and (max-width: 1023px) {

	body {
		font-size: 110%;
		transition: all .3s;
	}

	#header {
		padding-top: 40px;
		padding-bottom: 20px;
		transition: all .3s;
	}

	#logo img {
		width: 90px;
		height: 90px;
		transition: all .3s;
	}

	#menu a {
		font-size: 85%;
		line-height: 140%;
		transition: all .3s;
	}

	#menu a.code {
		font-size: 75%;
		transition: all .3s;
	}

}


/*******************************************************************************
Small Device Styles
*******************************************************************************/

@media screen and (max-width: 767px) {

	body {
		font-size: 100%;
		transition: all .3s;
	}

	body .hideOnMobile {
		display: none;
	}

	body .showOnMobile {
		display: block;
	}

	body span.showOnMobile {
		display: inline;
	}

	#header {
		position: fixed;
		z-index: 9997;
		width: 100%;
		padding-top: 30px;
		padding-bottom: 10px;
		border-bottom: 2px solid #f2f2f2;
		transition: all .3s;
	}

	#header .snapshot {
		position: fixed;
		top: .2em;
		right: .2em;
	}

	#logo img {
		width: 80px;
		height: 80px;
		cursor: pointer;
		transition: all .3s;
	}

	#hamburger {
		display: block;
	}

	#hamburger ~ #menu {
		font-size: 120%;
		position: fixed;
		z-index: 9996;
		width: auto;
		top: 100px;
		bottom: 100%;
		right: 0;
		left: 0;
		transition: bottom .4s;
		background: #f2f2f2;
		overflow: hidden;
	}

	#hamburger:checked ~ #menu {
		bottom: 0;
		overflow-y: scroll;
	}

	#menu a {
		font-size: 120%;
		line-height: 140%;
	}

	#menu a.code {
		font-size: 100%;
	}

	#menu>.ui-panel-content {
		padding-top: .5em;
		padding-bottom: 5em;
	}

	#content {
		float: none;
		width: auto;
		padding-top: 100px;
	}

	#contentTitle .separator {
		display: block;
		height: .5em;
		color: #f2f2f2;
	}
	
}