/* Copyright Enclavix, LLC 2016 */
/* padding,margin: top right bottom left (TRBL) */
/* background: color image repeat attachment position */
/* border: width style color */

#bannerleft {width: 266px; height: 60px; padding: 4px; background: white;}
#bannercenter {height: 68px; }
#bannerright {width: 160px; height: 68px; }
#footer {
	/* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
	padding-top: 0em;
	padding-bottom: 8px;
	padding-left: 1em;
	padding-right: 0em;
	font-size: 8pt;
}
#infosection {width: 1155px; height: 260px; float: left;}
#infovis {width: 1155px; height: 900px; margin:auto; overflow: hidden; overflow-x: hidden; overflow-y: hidden; }
#inter { position: absolute; }						/* This is just to push the interface window to the left border. */
#container { padding-right: 2em; flex: 1; -webkit-flex: 1; -ms-flex: 1; order: 1; }
#mainContent {
	padding: 1em 2em; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
}
#sections {width: 1155px; height: 600px;}
#tblres { display: block; overflow-y: auto; }

.adspace1 {width: 160px; height: 600px; float: right; }
.adspace1-color {width: 160px; height: 600px; float: right; background: red; }
.adspace2 {width: 160px; height: 600px; float: right; }
.adspace2-color {width: 160px; height: 600px; float: right; background: blue; }
.adspace3 {width: 160px; height: 600px; float: right; }
.adspace3-color {width: 160px; height: 600px; float: right; background: orange; }
.adspacem {width: 100%;  height: 50px; }
.adspacem-color {width: 100%;  height: 50px; background: green; }
.ALL { color: black; }

.workingspace {display: table; width: 100%; }
.attributes   {display: table-cell; padding: 1em; font-size: 80%; text-align: left; width: 15em; }
.workingtable {display: table-cell; padding: 1em; }

.questions  {font-size: 80%; width: 15.5em; height: 800px; text-align: left; padding: 1em; }

.banner {width: 100%; height: 68px; }
.drawer {display: inline-block; font-size: 100%; width: 28em; height: 1em; text-align: center; border: 3px solid black; background-color: rgb(231, 222, 208); padding-top: 1em; padding-bottom: 1em; margin: 2px; }
.drawers {height: 100%; background-color: #C1B49A;}
.dropdowns { width: 95%;}
.error {color: red;}
.fullw {width: 100%;}
.halfconl {width: 390px; padding: 10px 0; float: left}
.halfconr {width: 390px; padding: 10px 0; float: right}
.infotbl {width: 100%;}
.leftjust { float: left;}
.logo {width: 110px; height: 65px;}
.mainspace {width: 1155px; height: 800px; border: none; }
.maintable {border-width: 0px; border-color: #000000 #ffffff #000000 #ffffff; float: left; height: 100%; width: 100%; }
.resline {background-color: #d0d0d0; height: 3em;}
.rescol1 {width: 25%; }
.rescol2 {width: 70%; }
.rightjust { float: right;}
.split2 {width: 50%;}
.state {font-weight: bold;}
.tabs {width: 30px; }
.title {font-style: italic;}
.username {font-style: italic; text-align: right;}

a:link    {text-decoration: none; font-weight: bold; text-transform: capitalize; color: #695e4a;}
a:visited {text-decoration: none; font-weight: bold; text-transform: capitalize; color: #948671;}
div#ques a:link    {text-decoration: none; font-weight: bold; text-transform: capitalize; color: black;}
div#ques a:visited {text-decoration: none; font-weight: bold; text-transform: capitalize; color: white;}

button.func {width: 300px; height: 25px; color: blue;}
button.graf {width: 225px; height: 25px; color: green;}
div.title {width: 100%; font-weight: bold; text-align: center; font-style: normal; padding-top: 0.5em; padding-bottom: 0.5em;}
div.info {width: 100%; text-align: center; font-style: normal; font-size: small; padding-top: 0.5em; padding-bottom: 0.5em;}
option {width: 240px;}
select {width: 300px;}
span.title {font-size: 150%; color: white; text-align: center}
span.left {font-size: 150%; color: white; text-align: left}
td.title {font-size: 150%; color: white; text-align: center}
text.question {font-size: 12pt; color: black; }
text.answer {font-size: 10pt; }

h1 {padding: 10px 0; } /* using padding instead of margin will allow you to keep the element away from the edges of the div */
h3 {font-weight: bold; font-size: 1.2em;}
h4 {font-weight: bold; font-size: 1.0em;}
h5 {font-style: italic; font-size: 1.0em;}
img {border-width: 0px; }
table { font-size: 10pt; }

/*----------------------------------------------------------------------------------------------------------------------------------------------------*/
/* The stuff for the sliding left-hand menu */
#box-left {
	left: -265px;	/* push menu off screen, leave 1 pixel as a hint */
	top: 6em;	/* change this value to place the menu higher or lower */
	position: fixed;	/* removal of this pushes menu to right side */
	z-index: 99;
}
#tab-left {
	float: right;	/* pointer to right of menu */
	padding: 360px 0;	/* push pointer next to menu */
	display: none;
}
.hide-left {
	margin-left: 0px;
	transition: margin-left .4s ease-in;	/* specify the transition length for hiding */
	-webkit-transition: margin-left .4s ease-in;	/* specify the transition length for hiding */
}
.show-left {
	margin-left: 274px;	/* width of menu (plus border?) */
	transition: margin-left .4s ease-in;	/* specify the transition length for showing */
	-webkit-transition: margin-left .4s ease-in;	/* specify the transition length for showing */
}
.slide-left {
	margin-left: 274px;	/* width of menu (plus border?) */
}
#deco-left {
	width: 268px;	/* width of menu */
	float: right;	/* removal of this looses arrow */
}



/* The stuff for the sliding right-hand menu */
#box-right {
	right: -274px;	/* push menu off screen, leave 1 pixel as a hint */
	top: 0px;	/* change this value to place the menu higher or lower, starts from mainspace */
	position: fixed;	/* removal of this pushes menu to right side */
	z-index: 99;
}
#tab-right {
	float: left;	/* pointer to right of menu */
	padding: 360px 4px 0;	/* push pointer next to menu */
	display: block;
}
.hide-right {
	margin-right: 0px;
	transition: margin-right .4s ease-in;	/* specify the transition length for hiding */
	-webkit-transition: margin-right .4s ease-in;	/* specify the transition length for hiding */
}
.show-right {
	margin-right: 14em;	/* width of menu (plus border?) */
	transition: margin-right .4s ease-in;	/* specify the transition length for showing */
	-webkit-transition: margin-right .4s ease-in;	/* specify the transition length for showing */
}
#deco-right {
	width: 274px;	/* width of menu */
	float: left;	/* removal of this looses arrow */
}

/* Pseudo Element with border, https://css-tricks.com/three-line-menu-navicon/ */
.border-menu { position: relative; padding-left: 1.25em; font-size: 48px; float: right; display: block; }
.border-menu:before { content: ""; position: absolute; top: 0.25em; left: 0; width: 1em; height: 0.125em; border-top: 0.375em double #000; border-bottom: 0.125em solid #000; display: block; }

#box-topleft {
	left: 100%;	/* override positioning */
	right: 100%;	/* push menu off screen  */
	top: 5em;	/* change this value to place the menu higher or lower */
	position: fixed;	/* removal of this pushes menu to right side */
	z-index: 99;
}
.hide-topleft {
	margin-left: 274px;	/* width of menu (plus border?) */
	transition: margin-left .4s ease-in;	/* specify the transition length for hiding */
	-webkit-transition: margin-left .4s ease-in;	/* specify the transition length for hiding */
}
.show-topleft {
	margin-left: 2em;
	transition: margin-left .4s ease-in;	/* specify the transition length for showing */
	-webkit-transition: margin-left .4s ease-in;	/* specify the transition length for showing */
}


.tooltip {
    position: relative;
}

.tooltip .tooltiptext {
    visibility: hidden;
    background-color: black;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    top: 90%;
    left: 0%;
    width: 9em;
}
.tooltip + .tooltiptext {
    visibility: hidden;
    background-color: black;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 5px;
    
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

.tooltip:hover .tooltiptext, .tooltip:hover + .tooltiptext {
    visibility: visible;
}
#----------------------------------------------------------------------------------------------------------------------------------------
body { font-family: Verdana, Geneva, sans-serif; margin: 4px;}

.full_orange {color: white; background: #f08b1d;}
.half_orange {color: black; background: #f7c38f;}
.fore_orange {color: #f08b1d;}

.full_magenta {color: white; background: #ed037c;}
.half_magenta {color: black; background: #ea86bd;}
.fore_magenta {color: #ed037c;}

.full_blue1 {color: white; background: #0093d0;}
.half_blue1 {color: black; background: #73cae5;}
.fore_blue1 {color: #0093d0;}

.full_green {color: white; background: #b2bb1e;}
.half_green {color: black; background: #e0e07c;}
.fore_green {color: #b2bb1e;}

.full_aqua {color: white; background: #00b1b0;}
.half_aqua {color: black; background: #78cecc;}
.fore_aqua {color: #00b1b0;}

.full_blue2 {color: white; background: #5091cd;}
.half_blue2 {color: black; background: #8fb1c9;}
.fore_blue2 {color: #5091cd;}

.full_red {color: white; background: #ef4135;}
.half_red {color: black; background: #f48784;}
.fore_red {color: #ef4135;}

.full_medium_grey {color: white; background: #948671;}
.half_medium_grey {color: black; background: #c1b09a;}
.fore_medium_grey {color: #948671;}

.full_dark_grey {color: white; background: #695e4a;}
.half_dark_grey {color: black; background: #968978;}
.fore_dark_grey {color: #695e4a;}

.vw_orange {color: #fd5a1e; background: white;}
.vw_footer {color: white; background: #c1b49a;}

.heading1   {font-family: Helvetica, Arial, sans-serif; font-size: 24pt; font-weight: bold;}
.paragraph  {font-family: Helvetica, Arial, sans-serif; font-size: 15pt;}
.group_head1 {font-family: Helvetica, Arial, sans-serif; font-size: 24pt; font-weight: bold;}
.topic_head {font-family: Helvetica, Arial, sans-serif; font-size: 18pt; font-weight: bold;}
.topic_text {font-family: Helvetica, Arial, sans-serif; font-size: 12pt; font-style: italic;}
.topic_list {font-family: Helvetica, Arial, sans-serif; font-size: 14pt; font-weight: bold;}

.category_head {font-family: Helvetica, Arial, sans-serif; font-size: 24pt; font-weight: bold; width: 100%; text-align: left; border: 0;}
.category_text {font-family: Helvetica, Arial, sans-serif; font-size: 12pt; font-style: italic;}
.back_text {font-family: Helvetica, Arial, sans-serif; font-size: 14pt; font-weight: bold; color: white; background: blue;}
.refine_head {font-family: Helvetica, Arial, sans-serif; font-size: 14pt; font-weight: bold; color: #b2bb1e;}
.refine_list {font-family: Helvetica, Arial, sans-serif; font-size: 14pt; color: white;}
.group_head2 {font-family: Helvetica, Arial, sans-serif; font-size: 21pt; font-weight: bold; margin: 4px 4px 16px 4px;}
.item_link {font-family: Helvetica, Arial, sans-serif; font-size: 18pt; font-weight: bold; color: black;}
.item_text {font-family: Helvetica, Arial, sans-serif; font-size: 10pt; color: black; font-style: italic;}
.optional {font-family: Helvetica, Arial, sans-serif; font-size: 14pt; color: #c1b49a;}
.button {font-family: Helvetica, Arial, sans-serif; font-size: 14pt; color: white; width: 100%; text-align: left; border: 0px; height: 1.5em; margin: 0.2em;}
.button2 {font-family: Helvetica, Arial, sans-serif; font-size: 14pt; color: white; width: 100%; text-align: left; border: 0px; height: 2em;}
.frame {color: black; background: white;}
.input {margin: 0.2em;}

label + span + input[type=checkbox] { display: none; }
label[for^="n"]         { height: 0.5em; width: 0.5em; display: inline-block; padding: 0 0 0 0px; border-radius: 5px; border-color: darkgray;}
/* label:checked { background:  red; height: 0.8em; width: 0.8em; display: inline-block; padding: 0 0 0 0px; border-radius: 5px;} */