/* Appearance */
body {
    background-color: #eee;
    margin: 0px;
    font-family: Roboto, Segoe UI, Arial, Helvetica, sans-serif;
    font-size: 12pt;
    color: #333;
    line-height: 1.4;
    x-ms-overflow-style: -ms-autohiding-scrollbar;
}

h1,h2,h3,h4,h5,h6,h7 {
    font-weight: normal;
    color: #999;
    margin-top: 0;
    margin-bottom: 0;
}

h3, h4, h5, h6, h7 {
    color: #000;
}

.content-body h2 {
    font-size: 24pt;
    font-weight: lighter;
}

h3 {
    font-size: 18pt;
}

p {
    margin-top: 0;
}

.big {
	font-size: 14pt;
}

.small {
	font-size: 10pt;
}

ul, ol {
    margin-top: 0;
}

ul li, ol li {
    margin-bottom: 0.5em;
}

#content > h2 {
    margin-left: 1em;
}

#pagetitle {
    background-image: url('/images/logo.png');
    background-repeat: no-repeat;
    display: block;
    width: 50%;
    height: 80px;
    font-size: 0px;
}

a, a:link, a:visited {
    text-decoration: none;
    color: #286ED8;
}

a:hover {
    text-decoration: underline;
    color: #8EB3EA;
}

a:active {
    outline: 1px #000 solid;
    background-color: #fff;
}
            
/* Structure */
#header {
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16);
    background-color: #09f;
    color: white;
    z-index: 10;
}

#header_search {
    position: absolute;
    width: 100%;
}

#header_search div {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    padding-left: 1em;
    padding-right: 1em;
    text-align: right;
}

#header_inner {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    width: 1200px;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 1em;
}

#breadcrumb {
    width: auto;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 3em;
    padding-top: 0.5em;
}

#title {
    width: auto;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

#title h1 {
    margin: 1rem 1.5rem 0rem;
}

#container {
    width: auto;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    xmargin-top: 100px;
    display: flex;
}

#searchcontainer {
	float: right;
}

#sidebar {
    width: 400px;
}

#content {
    width: 800px;
}
            
#footer {
    width: 100%;
    margin-bottom: 1em;
    margin-top: 1em;
}

#footer_inner {
    box-sizing: border-box;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1em;
    padding-right: 1em;
}

/* Support */
.floatclear {
    clear: both;
}

/* Navigation */
.skiptocontent a {
    color: #09f;
}

nav {
    
}

nav ul {
    list-style: none;
    display: inline;
    padding: 0;
    margin: 0;
    background-color: white;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,0.12);
}

nav ul li {
    float: left;
    background-color: white;
    margin-bottom: 0;
}

nav ul a {
    white-space: nowrap;
}

nav ul:after {
	content: "";
	clear: both;
	display: block;
}

nav ul ul {
	visibility: hidden;
	opacity: 1;
	transform: scale(1,0);
	transform-origin: 0 0;
	transition: transform 0.5s, visibility 0.5s;
	-webkit-transform: scale(1,0);
	-webkit-transform-origin: 0 0;
	-webkit-transition: -webkit-transform 0.5s, visibility 0.5s;
	-moz-transform: scale(1,0);
	-moz-transform-origin: 0 0;
	-moz-transition: -moz-transform 0.5s, visibility 0.5s;
	position: absolute;
}

nav ul ul ul {
	position: absolute;
	opacity: 1;
	transform: scale(0,1);
	-webkit-transform: scale(0,1);
	-moz-transform: scale(0,1);
	left: 100%;
	top: 0;
}

nav ul ul li {
	float: none;
	position: relative;
}

nav ul li {
	float: left;
}

nav ul li a {
	display: block;
	padding: 0.5em;
	transition: background-color 0.5s ease-out;
	-webkit-transition: background-color 0.5s ease-out;
	-moz-transition: background-color 0.5s ease-out;
	color: #09f;
	text-decoration: none;
}

nav ul li a:hover {
	background-color: #09f;
	color: white;
	text-decoration: none;
}

nav ul li:hover {
	background-color: #fff;
}

nav ul li:hover > ul {
	visibility: visible;
	transform: scale(1,1);
	-webkit-transform: scale(1,1);
	-moz-transform: scale(1,1);
}
nav a {
	padding-left: 0.75em;
	padding-right: 0.75em;
}
ul li a.parentmenu {
	padding-right: 2em; 
}

/* General boxes */
pre.code, pre.samp, div.code, div.samp, p.code, p.samp, blockquote, .box, .error, .warning, .info, .tip {
    xbackground-color: #eee;
    margin: 0.5em;
    padding: 1em;
    border-left: 0.5em #eee solid;
}

blockquote {
	font-style: italic;
}

pre, div.code, p.code, div.samp, p.samp {
	background-color: #eee;
	font-size: 10pt;
	font-family: Consolas, Courier New, monospace;
	overflow-x: auto;
}

div.code, p.code, pre.code {
	border-left-color: #cde;
}

div.samp, p.samp, pre.samp {
	border-left-color: #cce;
}

code, samp {
	background-color: #eee;
	font-size: 10pt;
	font-family: Consolas, Courier New, monospace;
	padding: 0.25em;
	margin: 0.25em;
}

pre > code, pre > samp, p.code > code, p.samp > samp {
	padding: 0;
	margin: 0;
}

div.buttonline {
	margin-bottom: 1em;
}

/* Images */
.gallery_img, .gallery_vid {
	box-shadow: 0 2px 10px 0 rgba(0,0,0,0.12);
	padding: 1em;
}
.gallery_img {
	float: left;
}

.gallery_img .caption, .gallery_vid .caption {
	font-style: italic;
	font-size: smaller;
	color: #999;
	margin-top: 0.5em;
}

/* Videos */
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

/* Tables */
table {
	border-collapse: collapse;
	background-color: #eee;
}

#WzBoDy table {
	background-color: transparent;
}

table tr {
	
}

table.h_truth tr th, table.h_truth tr td {
	padding: 0.25em;
}

table.h_truth tr th {
	text-align: right;
}


table.h_truth tr td {
	xborder-left: 1px black solid;
}

/* Information Bar */
div.infobar {
	background-color: #FFFFE0;
	background-color: rgba(255,255,224,0.9);
	position: fixed;
	display: table-row;
	top: 0px; 
	left: 0px; 
	width: 100%;
	height: auto; 
	xline-height: 2.5;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	border-bottom: 1px #CECEB5 solid;
	box-shadow: 0 2px 10px 0 rgba(0,0,0,0.12);
	z-index: 99;
}
div.infobar > div {
    display: table-cell;
    vertical-align: middle;
    xoutline: 1px red solid;
}
div.infobar div.infobaricon {
    padding-left: 8px;
    padding-right: 8px;
    width: 20px;
}
div.infobar div.infobartext {
	margin-left: 10px;
	width: 100%;
}
div.infobar div.infobarclose {
	padding-right: 8px;
	width: 20px;
}
div.infobar a, div.infobar a:link, div.infobar a:visited {
	background-color: transparent;
	color: blue;
	text-decoration: underline;
}
div.infobar a:hover, div.infobar a:active, div.infobar a:focus {
	background-color: transparent;
	color: red;
	text-decoration: underline;
}

/* Search box */
#searchbox, #searchbox-full {
    box-sizing: border-box;
    display: inline-block;
    width: 140px;
    height: 23px;
    margin: 0;
}
#searchbutton, #searchbutton-full {
    box-sizing: border-box;
    display: inline-block; 
    width: 26px; 
    height: 23px; 
    margin: 0;
    margin-left: -4px;
    border: 1px #7E9DB9 solid; 
    border-left: none;
    background-color: white; 
    background-image: url('/images/search.png'); 
    background-position: center center; 
    background-repeat: no-repeat;
}
#searchbutton:hover, #searchbutton-full:hover {
    background-color: #ccc;
}

#searchbox-full {
	width: calc(100% - 27px);
}

/* Cards */
.card {
    background-color: white;
    margin: 1em 0.5em;
    padding: 1em;
    xbox-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    box-shadow: 0 2px 10px 0 rgba(0,0,0,0.12);
    border-left: 4px white solid;
    transition: all 0.5s ease-in-out;
}

.card p:last-child, .card div:last-child {
    margin-bottom: 0;
}

.error, .card.error {
    background-color: #f00;
    border-left-color: #f00;
    color: #fff;
}

.warning, .card.warning {
    background-color: #fa0;
    border-left-color: #fa0;
    color: #fff;
}
            
.info, .card.info {
    background-color: #3b3;
    border-left-color: #3b3;
    color: #fff;
}

.tip, .card.tip {
    background-color: #09f;
    border-left-color: #09f;
    color: #fff;
}

.card.error h2, .card.warning h2, .card.info h2, .card.tip h2 {
    color: #fff;
}

/* Card-compatible other stuff */
.invisicard {
    margin: 1em 0.5em;
    padding: 0em 1em;
}

#bodycontent > p {
    margin-left: 1.5em;
}

/* Sidebar */
ul.sidebartoc, ul.sidebartoc ul {
    list-style-type: none;
}

ul.sidebartoc {
    margin-left: 0;
    padding-left: 0;
}

#sidebar-tagcloud-alltags {
	text-align: right;
	font-size: 8pt;
}

.homepage_box {
    display: flex;
    flex-flow: row;
    width: 100%;
}
.homepage_box .card {
    width: 200px;
}

.pageinfo {
	color: #999;
}

/* Comments */
div.usercomment .namedate img {
	display: block;
	float: left;
	padding: 0.5em;
	width: 48px;
	height: 48px;
}
div.usercomment div.namedate_text {
	float: left;
	padding-left: 0.5em;
	padding-top: 0.5em;
}
div.usercomment div.commentnamedate {
	padding-top: 0.4em;
	color: #999;
}
div.moderatedcomment .usercommenttext, div.moderatedcomment .namedate {
    opacity: 0.5;
}
div.admincomment {
	background-color: #def;
	border-color: #395079;
}
div.admincomment a {
	xcolor: #395079;
}
div.commentoptions {
	font-style: normal;
	xfont-size: 8pt;
	margin-top: 5px;
	color: #999;
	padding: 0.5em 0 0.2em 0.5em;
}
div.commentmoderationnotice {
	font-style: italic;
	xfont-size: 8pt;
	margin-top: 5px;
}
div.commentlinks {
	font-size: 8pt;
	text-align: right;
}
div.usercomment div.namedate {
	xfont-size: 8pt;
	margin-bottom: 3px;
}
.commentnametext {
	font-weight: normal;
	font-size: 18pt;
}
.webmastercommentnametext a {
	color: #DD686B;
}
div.usercomment div.usercommenttext {
	padding: 0.5em;
}
div.commentinstructions {
	font-size: 8pt;
}
div.usercommenttext a img {
	border: 0;
}
.commenterror {
	border: 2px #ff7273 solid;
	padding: 10px;
	margin: 10px;
	background-color: #ff9393;
	background-image: url('images/boxbackground-light.png');
	background-repeat: no-repeat;
}
.commentthanks {
	border: 2px #5db853 solid;
	padding: 10px;
	margin: 10px;
	background-color: #88db7f;
	background-image: url('images/boxbackground-light.png');
	background-repeat: no-repeat;
}

/* Forms */
form {
	margin: 0;
	padding: 0;
}
.disabled {
	color: #999;
}
div.labelcnt {
	float: left; 
	clear: both; 
	width: 8em;
	margin-top: 0.5em;
}
div.inputcnt, div.inputcnt-large, div.inputcnt-xlarge {
	float: left;
	width: 350px;
	margin-top: 0.5em;
}
div.inputcnt input, div.inputcnt-large input {
	width: 350px;
}
div.inputcnt textarea {
	width: 350px;
}
div.inputcnt-large, div.inputcnt-large input, div.inputcnt-large textarea {
	/* Large: fits full width when floated with label to the left*/
	width: 650px;
}
div.inputcnt-xlarge {
	/* Extra large: fits full width on its own */
	width: 100%;
}
div.inputcnt-xlarge input, div.inputcnt-xlarge textarea {
	width: 100%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}
div.formerror
{
	font-weight: bold;
	color: red;
}
label .small
{
	font-size: 8pt;
	display: block;
} 

/* Buttons */
button, input[type=button], a.button {
    background-color: #09f;
    font-size: 12pt;
    color: white;
    border: none;
    padding: 1em 2em;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

button:hover, input[type=button]:hover, a.button:hover {
    background-color: #3bf;
}

button:active, input[type=button]:active, a.button:active {
    background-color: #06b;
    box-shadow: none;
}

a.button.card {
    display: block;
}

/* Flyout Menu */
#hamburger {
	display: none;
	float: right;
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
}

#hamburger:active {
	background-color: transparent;
	outline: none;
}

#hamburger span {
	display: block;
	position: absolute;
	height: 12.5%;
	width: 80%;
	background: #fff;
	opacity: 1;
	left: 0;
	transform: rotate(0deg);
	transition: .25s ease-in-out;
}

#hamburger span:nth-child(1) {
	top: 12.5%;
}

#hamburger span:nth-child(2), #hamburger span:nth-child(3) {
	top: 37.5%;
}

#hamburger span:nth-child(4) {
	top: 62.5%;
}

#hamburger.open span {
	width: 100%;
}

#hamburger.open span:nth-child(1) {
	top: 33%;
	width: 0%;
	left: 50%;
}

#hamburger.open span:nth-child(2) {
	transform: rotate(45deg);
}

#hamburger.open span:nth-child(3) {
	transform: rotate(-45deg);
}

#hamburger.open span:nth-child(4) {
	top: 33%;
	width: 0%;
	left: 50%;
}

#flyout {
	xdisplay: none;
	position: fixed;
	width: 400px;
	max-width: 90%;
	height: calc(100% - 50px);
	right: -400px;
	top: 50px;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 9;
	
	background-color: white;
	box-shadow: 0 2px 10px 0 rgba(0,0,0,0.12);
	
	transition: all 0.3s ease-out;
}

#flyout .card {
	xbox-shadow: none;
}

#fade {
	visibility: hidden;
	background-color: black;
	opacity: 0;
	position: fixed;
	left: 0; top: 0; right: 0; bottom: 0;
	transition: opacity 0.3s ease-out;
}

#flyout #searchbox {
	width: calc(100% - 40px);
	padding: 0.5em 1em;
}

#flyout #searchbutton {
	width: 40px;
}

#flyout #searchbox, #flyout #searchbutton {
	border: none;
	border-bottom: 1px #09f solid;
	border-top: 1px #09f solid;
	height: 40px;
}

#flyout .card, #flyout .sidebarstatic, #flyout #footer_inner {
	box-shadow: none;
	padding: 0;
	margin: 0;
	border: none;
}

#flyout .card .sidebartitle, #flyout #footer_inner #copyrighttext {
	padding: 0.5em 1em;
	background: #888;
	color: white;
}

#flyout nav ul li {
	float: none;
}

#flyout a {
	display: block;
	padding: 0.5em 1em;
	transition: background-color 0.5s ease-out;
	-webkit-transition: background-color 0.5s ease-out;
	-moz-transition: background-color 0.5s ease-out;
	color: #09f;
	text-decoration: none;
}

#flyout a:hover {
	background-color: #09f;
	color: white;
	text-decoration: none;
}

#flyout .listseparator {
	display: none;
}

.lofiOnly {
	display: none;
}