/* Doxygen docs additions */
/* highlighted <span> */
span.doc-highlight
{
	color: #FFFFFF;
	background-color: #202020;
	padding: 0px 4px 0px 4px;
}
/* subscript text */
span.sup-text
{
	text-decoration: underline;
	color:#A05070;
	font-size:90%;
	vertical-align:super;
}
/* subscript note */
span.sup-text a, span.sup-text a:visited, span.sup-text a:focus, span.sup-text a:hover
{
	color: #A05070;
}
.remark-tag
{
	margin: 4px 0px 4px 0px;
	font-weight: bold;
	color: #282828;
	padding: 1px 8px 1px 8px;
	display: inline-block;
	background-color: #A05070;
	border-radius: 5px;
}
/* A special <h2> used only for @remarks sections */
.remark-topic
{
	font-size:130%;
	color:#A05070;
	margin-left: 0;
	font-size: 110%;
	font-weight: bold;
}
/* various notes <span> */
span.doc-caution-note, span.doc-note, span.doc-see, span.doc-sample,span.doc-crossplatfrom-note, span.doc-tip-note
{
	color: #FFFFFF;
	font-size: 11px;
	font-weight: normal;
	vertical-align: 2px;
	border-radius: 5px 5px 0px 0px;
	padding: 2px 3px;
}
/* regular note <span> */
span.doc-note
{
	background-color: #A08058;
}
span.doc-see
{
	background-color: #704050;
}
span.doc-sample
{
	background-color: #684E78;
}
span.doc-sample:after
{
	font-size:120%;
	content: "\25B8";
}
/* important note <span> */
span.doc-caution-note
{
	background-color: #D86038;
}
/* cross-platform note <span> */
span.doc-crossplatfrom-note
{
	background-color: #4880A0;
}
/* tips note <span> */
span.doc-tip-note
{
	background-color: #689048;
}
/* More Info Link */
span.doc-moreinfo a, span.doc-moreinfo a:visited, span.doc-moreinfo a:focus, span.doc-moreinfo a:hover
{
	color: #FFFFFF;
}
span.doc-moreinfo a:after, span.doc-moreinfo a:visited:after, span.doc-moreinfo a:focus:after, span.doc-moreinfo a:hover:after
{
	color: #FFFFFF;
	content: "Info\25B8";
	font-size: 11px;
	border-radius: 0px 5px 5px 0px;
	padding: 1px 1px 1px 3px;
	background-color: #505050;
}
/* Read-More Note */
.read-more-state
{
	display: none; /* We do not show the check-box itself */
}
.read-more-trigger
{
	color: #FFFFFF;
	cursor: pointer;
	padding: 0px 2px;
	border-radius: 0px 5px 5px 0px;
	background-color: #505050;
	transition: color .5s, background-color .5s;
}
.read-more-state:checked ~ .read-more-trigger
{
	border-radius: 5px 0px 0px 5px;
	color: #282828;
	background-color: #D0D0D0;
}
.read-more-state ~ .read-more-trigger:after
{
	content: "more \25B8";
}
.read-more-state:checked ~ .read-more-trigger:after
{
	content: "\25C2 less";
}
.read-more-content
{
	display: none;
}
.read-more-state:checked ~ .read-more-content
{
	display: inherit;
}
/* ------------------------------------------------------ */
/* Detailed Note */
.detail-item:hover
{
	text-decoration: underline;
	cursor: pointer;
}
.detail-state
{
	display: none; /* We do not show the check-box itself */
}
.detail-content
{
	display: none;
}
.detail-state:checked ~ .detail-content
{
	display: inline-block;
}
/* ------------------------------------------------------ */
/* General purpose tab card */
div.generic-title
{
	position: relative;
	display: block;
	padding: 4px 10px;
	border-radius: 5px 5px 0px 0px;
	color: #60A818;
	background: #202020;
	font-weight:bold;
}
.generic-tab-content
{
	border: 1px solid #202020;
	border-radius: 0px 0px 5px 5px;
	margin-bottom: 10px;
}

/* ------------------------------------------------------ */
/* CSS Accordion */
input.accordion-tab
{
	display: none;
}
div.accordion-title
{
	position: relative;
	display: block;
	cursor: pointer;
	padding: 4px 10px;
	border-radius: 5px 5px 0px 0px;
	color: #60A818;
	background: #282828;
	transition: color 0.5s, background-color 0.5s;
}
input[type=checkbox]:checked + div.accordion-title, input[type=radio]:checked + div.accordion-title
{
	border: 1px solid #202020;
	border-bottom: none;
	color: #D085C5;
	background: #505050;
	transition: color .5s, background-color .5s;
}
/* Tab Token at right end */
input.accordion-tab ~ div:after
{
	color: #60A818;
	font-weight: bold;
	position: absolute;
	right: 10px;
	top: 4px;
	transition: all .5s;
}
input.accordion-tab:checked ~ div:after
{
	color: #D085C5;
}
input.accordion-tab[type=checkbox] ~ div.accordion-title:after
{
	font-size: 120%;
	content: "+";
}
input.accordion-tab[type=checkbox]:checked ~ div.accordion-title:after
{
	transform: rotate(135deg);
}
input.accordion-tab[type=radio] ~ div.accordion-title:after
{
	font-size: 85%;
	content: "\25BC"; /* downward triangle */
}
input.accordion-tab[type=radio]:checked ~ div.accordion-title:after
{
	transform: rotate(180deg);
}
input.accordion-tab ~ .accordion-tab-content
{
	border: 1px solid #202020;
	border-top: none;
	border-radius: 0px 0px 5px 5px;
	margin-bottom: 3px;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
}
input.accordion-tab:checked ~ .accordion-tab-content
{
	padding: 4px;
	opacity: 1;
	max-height: 100vh;
}
input.accordion-tab[type=checkbox] ~ .accordion-tab-content
{
	transition: opacity .25s, max-height .25s;
}
input.accordion-tab[type=checkbox]:checked ~ .accordion-tab-content
{
	transition: opacity .5s, max-height .5s;
}
input.accordion-tab[type=radio] ~ .accordion-tab-content
{
	transition: opacity .8s, max-height .8s;
}
input.accordion-tab[type=radio]:checked ~ .accordion-tab-content
{
	transition: opacity .5s, max-height .5s;
}

/* ------------------------------------------------------ */
/* CSS TreeView */
ul.treeview > li
{
	padding-left: 25px;
}
ul.treeview > li:before
{
	content: "";
}
.treenode-state
{
	display: none; /* We do not show the check-box itself */
}
.treenode-name
{
	color: #B0D890;
}
.treenode-name:hover
{
	cursor: pointer;
	color: #A05070;
	text-decoration: underline;
}
.treenode-trigger
{
	vertical-align: middle;
	font-size: 150%;
	color: #B0D890;
	cursor: pointer;
}
.treenode-state ~ .treenode-trigger:before
{
	content: "\25B8";
}
.treenode-state:checked ~ .treenode-trigger:before
{
	content: "\25BE";
}
.treenode-content
{
	display: none;
}
.treenode-state:checked ~ .treenode-content
{
	display: inherit;
}
/* ------------------------------------------------------ */
/* CSS Lightbox */
.lightbox-state
{
	display: none;
}
.lightbox
{
	cursor: zoom-in;
}
.lightbox-target
{
	overflow:auto;	/* show scrollbar when needed */
	position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0);
    z-index: 100000;
	visibility:hidden;
	transition: background-color .75s;
}
.lightbox-state:checked ~ .lightbox-target
{
	top: 0;
	bottom: 0;
	background: rgba(0,0,0,.75);
	visibility:visible;
}
/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */
.lightbox-target img
{
	position: fixed;
	margin: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	cursor: zoom-out;
	opacity:0;
	transition: opacity .75s;
}
.lightbox-state:checked ~ .lightbox-target img
{
	opacity:1;
}
/* ------------------------------------------------------ */
/* CSS Tooltip */
.tooltip-container
{
	cursor: pointer;
	position: relative; /* Important:  z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). */
	width: 100%;
	height: 100%;
}

.tooltip-container .tooltip-text
{
	/*pointer-events: none;*/
	display: block;
	position: absolute; /* absolute position make DIV does not occupy any space */
	font-size: 13px;
	padding: 3px;
	border-radius: 5px;
	border: 1px solid #202020;
	background-color: rgba(64,64,64,0.9);
	color: #E0E0E0;
	line-height: 14px;
	box-shadow: 4px 4px 10px #202020;
	visibility:hidden;
	opacity: 0;
	max-height: 0;
	transition: opacity 0s;
}
.tooltip-container:hover .tooltip-text
{
	z-index: 10000;
	visibility:visible;
	opacity: 1;
	max-height: 100vh;
	transition: opacity .25s;
}
/* ------------------------------------------------------ */
/* Table (borderless) */
div#omnig-table-borderless table.doxtable
{
	border: none;
}
div#omnig-table-borderless table.doxtable th
{
	border: none;
	background-color: Transparent;
}
div#omnig-table-borderless table.doxtable td
{
	border: none;
	background-color: Transparent;
}

/* Table (header-only) */
div#omnig-table-headeronly table.doxtable
{
	border: none;
}
div#omnig-table-headeronly table.doxtable th
{
	background-color: Transparent;
	border: none;
	border-bottom: solid 3px #202020;
}
div#omnig-table-headeronly table.doxtable td
{
	border: none;
	background-color: Transparent;
}
/* Table (header-and-row) */
div#omnig-table-headerandrow table.doxtable
{
	border: none;
}
div#omnig-table-headerandrow table.doxtable th
{
	background-color: Transparent;
	border: none;
	border-bottom: solid 3px #202020;
}
div#omnig-table-headerandrow table.doxtable td
{
	background-color: Transparent;
	border: none;
	border-bottom: solid 2px #282828;
}

/* ------------------------------------------------------ */
/* Tree-like List */
div#omnig-treelike-list li:before
{
	content: "\25B8";
	font-size:140%;
}
/* ------------------------------------------------------ */
/* Text Box */
div.text-box
{
	padding: 10px;
	border-radius: 4px;
	border: 1px solid #202020;
	background-color: #282828;
}

/* ========================================================================== */
/* HTML Form Elements */
input, textarea, select, option
{
	background-color: #282828;
	color: #B0B0B0;
	border: 1px solid #60A818;
}
input[type="button"], input[type="reset"], input[type="submit"], button
{
	background-color: #60A818;
	color: #FFFFFF;
	padding: 4px 8px;
	border-radius: 4px;
	border: none;
}
input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, button:hover
{
	background-color: #A05070 !important;
	cursor: pointer;
}
input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active, button:active
{
	background-color: #D085C5 !important;
}
input:hover, textarea:hover, button:hover
{
	border-color: #A05070;
}
::-webkit-file-upload-button /* For Input type='file' */
{
	background-color: #60A818;
	color: #FFFFFF;
	border: none;
	outline:none;
	padding: 4px 8px;
}
::-webkit-file-upload-button:hover
{
	background-color: #A05070;
}
::-ms-browse	/* For Input type='file' */
{
	background-color: #60A818;
	color: #FFFFFF;
	border: none;
	outline:none;
	padding: 4px 8px;
}
::-ms-browse::hover
{
	background-color: #A05070;
}
input:focus, textarea:focus, button:focus
{
	outline: none;
	border-color: #A05070;
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus
{
	outline: none;
	background-color: Transparent;
}
/* ............. select / option ..................... */
/*
Tool - Convert image to data URI format
http://websemantics.co.uk/online_tools/image_to_data_uri_convertor
*/
select
{
	outline: none;
}
option
{
	border: none;
}
option:checked, option[selected]
{
	background-color: #60A818;
	background-image: url("data:image/gif;base64,R0lGODlhCAABAIAAAGCoGP///yH5BAAAAP8ALAAAAAAIAAEAAAIDhG8FADs=") !important; /* A background image with color #60A818 #60A818*/
	color: #FFFFFF;
}
select:hover, option:hover
{
	background-color: #A05070;
	background-image: url("data:image/gif;base64,R0lGODlhCAABAIAAAKBQcP///yH5BAAAAP8ALAAAAAAIAAEAAAIDhG8FADs=") !important; /* A background image with color #A05070 #A05070*/
	color: #FFFFFF;
}
/* .............All disabled element .................. */
input:disabled, button:disabled, textarea:disabled, select:disabled, option:disabled
{
	background-color: #505050;
	color: #808080;
}
/* .............. Fix for IE ............... */
input[type="checkbox"], input[type="radio"], input[type="checkbox"]:disabled, input[type="radio"]:disabled
{
	border: none;
	background: none;
}
/* ------------------------------------------------------ */
/* header area */
#omnig-header
{
	height: 65px;
	width: 100%;
	color: #FFFFFF;
	background-image: url("page_header.png") !important;
	background-repeat: no-repeat;
}
img#header-logo
{
	width: 40px;
	height: 40px;
	margin: 5px;
	vertical-align: middle;
}
#omnig-header a:hover
{
	text-decoration: none;
}
span#project-title
{
	vertical-align:middle;
	color: #E0E0E0;
	font-size: 26px;
}

/* <div> #header-bottom-line only show up as a decoration line when the menu bar is disabled */
#omnig-header #header-bottom-line
{
	height: 6px;
	background-color: #60A818;
}
/* ------------------------------------------------------ */
/* footer area */
#omnig-footer
{
	height: 45px;
	width: 100%;
	font-size: 11px;
	padding: 4px 0px 4px 0px;
	color: #B0B0B0;
	text-align: center;
	background-image: url("page_footer.png") !important;
	background-position: right;
	background-repeat: no-repeat;
	border-top: solid 5px #A05070;
}

/* ------------------------------------------------------ */
/* To-be-done Document (draft) */
.tobedone
{
	margin: 0px 10px 0px 10px;
	border: 1px solid Red;
}
.tobedone:before, .tobedone:after
{
	color: Red;
	font-size: 120%;
}
.tobedone:before
{
	content: "DRAFT BEGIN! <";
}
.tobedone:after
{
	content: "> DRAFT END!";
}
.todo
{
	border: 1px solid Red;
	color: #E04040;
	padding: 2px;
}
.todo:before
{
	content: "\2190 todo:";
}
.done
{
	border: 1px solid Green;
	color: #40E040;
	padding: 2px;
}
.done:before
{
	content: "\2190 done:";
}

/* ------------------------------------------------------ */
/* For toggling the header/footer between standalone and emnedded version */
#omnig-header
{
	display: none;
}
#omnig-footer
{
	display: none;
}
#main-menu
{
	display: none;
}

/* ----------- Mobile CSS ----------- */
@media only screen and (max-width:800px)
{
	#omnig-header
	{
		height: 55px;
	}
}