@import "normalize.css";

body {
 font-family: Trebuchet MS, Arial, Helvetica, Verdana, sans-serif;
 font-size: 13px;
/* line-height: 12px;*/
 background-image:url('/images/background_binary.jpg');
}

/*************************************************************************************************/
/* main body sections */

/* Brackets all body web content between body_start -> body_end includes */
#bodywrapper {
 margin: 0 auto;
 width: 1000px;
}

/* Standard banner header - bannerheading include */
/* no js or webp support */
.no-js .header,
.no-webp .header {
 float: left;
 width: 980px;
 height: 100px;
 padding: 10px;
 margin: 8px 0px 10px 0px;
 border-radius: 5px;
 box-shadow: 3px 3px 10px black;

 background: black;
 background-image:url('/images/header_saturn4.png');
 background-repeat:no-repeat;
 background-position:right top;
}

/* webp support */
.webp .header {
 float: left;
 width: 980px;
 height: 100px;
 padding: 10px;
 margin: 8px 0px 10px 0px;
 border-radius: 5px;
 box-shadow: 3px 3px 10px black;

 background: black;
 background-image:url('/images/header_saturn4.webp');
 background-repeat:no-repeat;
 background-position:right top;
}

#inset_logo {
 float: left;
 padding: 8px 10px 7px 8px;
 margin: 7px 8px 8px 8px;
 border-radius: 5px;
 box-shadow: inset 0px 0px 3px 0px black;
 background: #ebebeb;
}

input, textarea, select
{
 border-radius: 4px;
 box-shadow: inset 0px 0px 3px 0px black;
 padding: 2px 5px;
}

#menu {
 float: left;
 margin: 8px 8px 8px 8px;
 padding: 2px;
 border-radius: 4px;
 box-shadow: inset 0px 0px 4px 0px black;
 background: #ebebeb;
}

#search {
 float: right;
 margin: 15px 8px 8px 8px;
}

/* option lefthand side navigation sub-menu */
#optsubmenu {
 font-size: 15px;
 line-height: 110%;
 background: white;

 width: 219px;
 min-height: 550px;

 display: table-cell;
 vertical-align: top;

 border-radius: 5px;
 box-shadow: 3px 3px 10px black;
}

#optsubmenu-fillercol {
 width: 11px;
 min-height: 550px;
 display: table-cell;
}

/* main content of normal given page - between content_start_withsubmenu and content_end includes */
#maincontent_right {
 font-size: 13px;
 line-height: 125%;
 color: grey;
 background: white;

 display: table-cell;
 vertical-align: top;
 width: 710px;

 min-height: 550px; /* display table layout - this is effectively the minimum */
 margin: 10px;
 padding: 5px 30px 15px 30px;

 border-radius: 5px;
 box-shadow: 3px 3px 10px black;
}

.fullwidthgrfx {
 width: 745px;
 margin: 0px -18px 10px;
 padding: 0px;
 border-radius: 4px;
}

.stdwidthgrfx {
 width: 710px;
 padding: 0px;
 border-radius: 4px;
}

#maincontent {
 font-size: 13px;
 line-height: 125%;
 color: grey;
 background: white;

 display: table-cell;
 vertical-align: top;

 max-width: 940px;
 width: 940px;
 min-height: 550px;
 margin: 10px;
 padding: 5px 30px 15px 30px;

 border-radius: 5px;
 box-shadow: 3px 3px 10px black;
}

/* legal footer */
#footer {
 font-size: 10px;

 float: left;
 width: 980px;
 margin: 10px 0px 10px 0px;
 padding: 5px 10px 5px 10px;
 background: #ebebeb;
 border-radius: 5px;
 box-shadow: 3px 3px 10px black;
}

#legal {
 float: right;
}
#copyright {
 float: left;
}

/*************************************************************************************************/
/* Front page only stylings */
h1.frontpage {
 margin: 5px 5px 10px 5px;
 padding: 5px 10px 15px;
 text-align:right;
 background: #ebebeb;
 font-size: 18px;
 line-height: 18px;
 border-radius: 5px;
 color: darkblue;
 text-shadow:2px 1px 2px grey;
}

h2.frontpage {
 font-size: 15px;
 padding: 0;
 margin: 0;
}

p.frontpage {
 font-size: 14px;
 padding: 6px 0 0 0;
 margin: 0;
}

#fp_leftcolumn {
 float: left;
 margin: 5px 5px 0px 0px;
 padding: 5px;
 height: 465px;
 width: 483px;
 border-radius: 5px;
 box-shadow: 3px 3px 10px black;
 color: #333;
 font-size: 15px;
 line-height: 15px;
 background: white;
 background-image:url('/images/ecospro-background.jpg');
 background-size: 100% 97%;
 background-repeat:no-repeat;
}

.fp_leftboxen { /* text blocks within left column */
 margin: 5px;
 padding: 10px 10px 10px 10px;
 color: black;
 border-radius:5px;
/* background: #ebebeb; */
 background:rgba(230,230,230,0.82);
 margin-bottom: 7px;
}

.fp_leftboxlink:visited, .fp_leftboxlink:link {text-decoration:none; color:black}
div.fp_leftboxen:hover { background:rgba(200,200,200,0.82);}

/* Front Page news  */

#fp_newscolumn {
 float: right;
 margin: 5px 0px 0px 5px;
 padding: 5px;
 height: 465px;
 width: 485px;
 border-radius:5px;
 box-shadow: 3px 3px 10px black;
 color: black;
 background: white;
 line-height: 15px;
}

div.fp_newsscroll {
	width: 470px;
	height: 405px;
	overflow: auto;
	padding-right: 10px;
}

#fp_newsTable {
 border-collapse: collapse;
 }

.newsText {
 float: right;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 10px;
 line-height: 11px;
 color: #666666;
 margin: 0;
 padding: 10px;
 width: 320px;
 color: black;
 border-radius: 5px;
 background: #EBEBEB;
 margin-bottom: 7px;
}

.FWnewsText {
 float: right;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 10px;
 line-height: 11px;
 color: #666666;
 margin: 0;
 padding: 10px;
 width: 440px;
 color: black;
 border-radius: 5px;
 background: #EBEBEB;
 margin-bottom: 7px;
}

.newsText:hover { background:rgba(200,200,200,0.82);}
.FWnewsText:hover { background:rgba(200,200,200,0.82);}
.FWnewsImage:hover { border-color:rgba(200,200,200,0.82);}

.newsLink:visited, .newsLink:link {text-decoration:none; color:black;}

.newsImageTD {
 width: 110px;
 text-align: center;
}

.FWnewsImage {
 width: 440px;
 border-radius: 5px;
 margin-bottom: 5px;
}

/* News Page news  */
.news2Text {
 padding: 10px;
 margin: 5px 5px 5px 10px;
 border-radius: 5px;
 background: #EBEBEB;
 min-height: 70px;
}

.news2Text:hover { background:rgba(200,200,200,0.82);}
.news2Link:visited, .news2Link:link {text-decoration:none; color:black;}

.news2ImageTD {
	text-align: center;
	width: 80px;
}

.news2ImageTD img {
	padding-top: 10px;
}

/*************************************************************************************************/
/* front page image slider - http://www.menucool.com */

#sliderFrame
{
 float:left;
 width:700px;
 padding:0px;
 margin: 0px 5px 6px 0px;
 border:none;
 border-radius: 5px;
 box-shadow: 3px 3px 10px black;
 overflow:hidden;
}

#slider {
	float:left;
	width:700px;height:300px;/* Make it the same size as your images. */
	background:#fff url(/images/sliders/loading.gif) no-repeat 50% 50%;
	position:relative;
	margin:0 auto;/*make the image slider center-aligned */
}

#slider img {
	border:none;
	visibility:hidden;
}

/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
	z-index:4;
	display:none;position:absolute;
	top:0px;left:0px;border:0;padding:0;margin:0;
	width:100%;height:100%;
}

/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
	position:absolute;
	width:400px;
	height:auto;
	padding:10px;
	left:120px; /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/
	bottom:10px;/*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:150px;*/
	z-index:5;
	overflow:hidden;
	font-size:0;
}
div.mc-caption-bg {
	background:#DDD; /*Caption background color. Can be set to "background:transparent;", or set to semi-transparent through the sliderOptions.captionOpacity setting in the javascript.*/
	border:1px solid white;
	border-radius: 5px;
}
div.mc-caption {
	font:bold 13px/16px Arial;
	color:#069;
	z-index:6;
	text-align:center;
}
div.mc-caption a {
	color:#060;
}

/* built-in navigation bullets wrapper that is relative to the #slider */
div.navBulletsWrapper  {
	display:none;
}

/* slider thumbnails */
#thumbFrame {
	width:268px;
	height:290px;

	float:right;
	padding:10px 10px 0px 10px;
	margin:0px 0px 6px 5px;

	border-radius: 5px;
	box-shadow: 3px 3px 10px black;
	background: white;
}

#thumbs .thumb
{
	padding: 7px;
	margin-bottom: 6px;
	height:52px;
	border-radius:5px;
	background:#ebebeb;

	font:normal 11px/13px Arial;
}
#thumbs .thumb-on { background: lightgrey;}

#thumbs .frame {float:left;padding:1px;border:1px solid #CCC;background:white;border-radius:3px;box-shadow:1px 1px 3px 1px #BBB;font-size:0;line-height:0;}
#thumbs img{border:1px solid #DDD; cursor:pointer; width:70px; height:30px;}
#thumbs .thumb-content {float:right; width:150px; color:black;}

/* Captions in #thumbs .thumb-content */
#thumbs .thumb-content p {font-weight:bold; color:black; margin:0 0 2px;padding:0;}
#thumbs .thumb-on .thumb-content p {}

#slider
{
	transform: translate3d(0,0,0);
	-ms-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
	-o-transform:translate3d(0,0,0);
}

/* -------------------------------------------------------------------------------------------------- */
/* page-curl drop-shadows from http://cssdeck.com/labs/page-curl-box-shadow
 * also see: http://nicolasgallagher.com/css-drop-shadows-without-images/
 *
 * Vital fix to make compatible with background images in containing element
 * is to include the item within a <div class="curl_container">
 * see http://jsfiddle.net/D4qCm/1/ for details
 *
 * Implementation has been modified to make work with background
 * set by contained element and not a gradient fill, and to simplify
 */

/* needed to work with background images in enclosing elements */

.curl_container {
	position:relative;
	z-index:3;
	margin:0;
	padding:0;
}

.curl_container:after {q
	content:"";
	display:block;
	clear:both;
	visibility:hidden;
	height:0;
	font-size:0;
}

.page-curl {
	background: white;
	border: 1px solid #777777;
	border-radius: 4px;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
	margin: 20px auto;
	padding: 10px;
	position: relative;
	max-width: 980px;
}

.page-curl:before, .page-curl:after {
	bottom: 12px;
	box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
	content: "";
	height: 10px;
	left: 12px;
	position: absolute;
	width: 40%;
	z-index: -1;
	transform: skew(-4deg) rotate(-4deg);
}

.page-curl:after {
	transform: skew(4deg) rotate(4deg);
	left: auto;
	right: 12px;
}

/*
.page-curl.shadow-left {
	background: white;
}

.page-curl.shadow-right {
	background: white;
}
*/

.shadow-bottom:before, .shadow-bottom:after {
	top: auto;
	bottom: 12px;
	box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
}

.shadow-left:after {
	display: none;
}

.shadow-right:before {
	display: none;
}

.shadow-top-bottom.shadow-left:after {
	display: block;
	bottom: auto;
	top: 15px;
	right: auto;
	left: 12px;
	box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
}

.shadow-top-bottom.shadow-right:before {
	display: block;
	bottom: auto;
	top: 15px;
	right: 12px;
	left: auto;
	box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
}

/*************************************************************************************************/
/* main content css styling */

.alignleft {float: left;}
.alignright {float: right;}
.aligncenter {display: block; margin-left: auto; margin-right: auto;} /* also needs a style="width: Xpx" */
.tablealigncenter {margin-left: auto; margin-right: auto;}
.textaligncenter {text-align: center;}
.clear { clear: both; }

/* used for ecos and ecospro logo's at top right of relevant pages */
.toprightgrfx {
	margin: 15px 0 10px 10px;
	float: right;
}

/* used for bottom of page graphics on middleware pages */
.botpage {
	overflow: auto;
	display: table-cell; vertical-align: middle;
}
.botpage .ileft {
	padding: 20px 15px 20px 0;
	float: left;
}
.botpage .iright {
	padding: 20px 0 20px 15px;
	float: right;
}
.botpage p {
	vertical-align: middle;
}

.roundedbox {
	color: black;
	padding: 15px;
	border-radius: 4px;
	box-shadow: 3px 3px 8px grey;
}

.roundedbox * {
	margin-bottom: 0;
}

.roundedboxlink a:visited, .roundedboxlink a:link {text-decoration:none; color: black}
div.roundedboxlink:hover { background:rgba(200,200,200,0.82);}

.emphasisbox_halfwidth {
	float: right;
	color: black;
	padding: 15px;
	margin: 15px 0 15px 15px;
	border-radius: 4px;
	box-shadow: 0 0 15px gray;
	width: 45%;
}

.emphasisbox {
	float: right;
	color: black;
	padding: 15px;
	margin: 5px 0;
	border-radius: 4px;
	box-shadow: 0 0 15px gray;
}

.emphasisboxlink a:visited, .emphasisboxlink a:link {text-decoration:none; color: black}
div.emphasisboxlink:hover { background:rgba(200,200,200,0.82);}

.menubox {
	background: #ebebeb;
	padding: 0px;
	margin: 13px;
	border: 0;
}

div.leftinfobox {
	font-size: 11px;
	margin: 13px;
	border-radius: 4px;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
	padding: 5px 10px;
}

.leftinfobox * {
	margin: 0;
}

.leftinfobox ul {
	padding-left: 5px;
	margin-left: 10px;
}

.leftinfobox li {
	padding-left: 5px;
	margin-bottom: 3px;
}

.leftinfobox p {
	padding-top: 5px;
}

.leftinfobox h1 {
	font-size: 13px;
	color: darkblue;
	text-shadow: 2px 1px 2px grey;
	text-align: right;
	padding: 0px 0px 5px 0;
}

.leftinfobox a:visited, .leftinfobox a:link {text-decoration:none; color:black}
div.leftinfobox:hover { background:rgba(200,200,200,0.82);}

.h1_widerbox {
	margin: 7px -10px 20px;
	padding: 5px 10px 15px;
	text-align:right;
	background: #ebebeb;
	border-radius: 4px;
	border-width: 0px;
}

.h1_widebox {
	margin: 7px -18px 10px;
	padding: 5px 10px 15px;
	text-align:right;
	background: #ebebeb;
	border-radius: 4px;
	border-width: 0px;
}

.h1_widebox_img_left {
	margin: 7px -18px 10px;
	padding: 5px 10px 15px;
	background: #ebebeb;
	border-radius: 4px;
	border-width: 0px;
	cursor: pointer;
	display: table;
	width: 100%;
}

h1 .wil {
	float: left;
}

h1 .wilg {
	padding-top: 7px;
	width: 130px;
}

.wil, .wilt {
	display: table-cell;
	vertical-align: middle;
        text-align: right;
}

.h1_narrowbox {
	margin: 5px 5px 10px 5px;
	padding: 5px 10px 15px;
	text-align:right;
	background: #ebebeb;
	border-radius: 4px;
	border-width: 0px;
}

h1 {
	color: darkblue;
	text-shadow:2px 1px 2px grey;
	font-size: 18px;
}

h2 {
	color: darkblue;
	text-shadow:2px 1px 2px grey;
	font-size: 15px;
	font-weight: bold;
}

h3 {
	color: darkblue;
	text-shadow:2px 1px 2px grey;
	font-size: 14px;
	font-weight: bold;
}

h4 {
	color: darkblue;
	text-shadow:2px 1px 2px grey;
	font-size: 14px;
	font-weight: normal;
}

h5 {
	color: darkblue;
	text-shadow:2px 1px 2px grey;
	font-size: 13px;
	font-weight: normal;
}

pre {
	padding: 5px;
	max-width: 920px;
	overflow-x: auto;
}

kbd {
	padding: 5px;
}

a:visited, a:link {text-decoration:none; color:rgb(100,100,200);}

div.more_emph, p.more_emph, span.more_emph {
	color: darkblue;
	text-shadow:2px 1px 2px grey;
	font-weight: bold;
}

img.engagenext {
	width: 100px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.engagebox {
	width: 600px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

div.emp, p.emph, span.emph {
	color: darkblue;
	text-shadow:2px 1px 2px grey;
}

.emph dt {
	color: darkblue;
	text-shadow:2px 1px 2px grey;
}

.emph dd {
	margin-bottom: 10px;
}

/* remove automatic quoting - makes inlines shoutout's work with <q> tags */
q:before, q:after {content: ""; }

.shoutout {
	line-height: normal;
    float: right;
	font-size: 17px;
	margin: 10px 5px 10px 15px;
	width: 40%;
	text-shadow:2px 1px 2px grey;
}

.shoutbox {
    float: right;
	margin: 10px 5px 10px 15px;
}

.shout {
	line-height: normal;
	font-size: 17px;
	text-shadow:2px 1px 2px grey;
	text-align: center;
}

figure {
    text-align: center;
    margin: 5px; /* not needed unless you want centered */
}

ul {
	padding-left: 20px;
}

li {
	padding-left: 5px;
}

ul.spaceafter10 li {
	padding-bottom: 10px;
}

ul.spaceafter5 li {
	padding-bottom: 5px;
}


/* ########################################################################################################### */
/* Accordion Menu powered by www.menucool.com */

/* ##### Top level items #####*/
#acdnmenu
{
	/* Note about height:
	Set "height:auto;" if flexible height is required.
	A fixed height is prefered as content below the menu won't be pulled down/up when the menu is expanding/collapsing. */
	height: auto;
	font-family: Verdana, Tahoma, Arial;
	font-size: 11px;
	padding-bottom: 10px;
}

#acdnmenu ul.top
{
	padding-left:0;
	background:none;
	border:none;
}

#acdnmenu div.heading, #acdnmenu a.link
{
	padding:8px; padding-left:30px;
	text-align:left;
	font-weight: bold;
	color:#666666;
	text-decoration:none;
	outline:none;
}

#acdnmenu div.current, #acdnmenu div:hover, #acdnmenu a.link:hover, #acdnmenu div.current a.link
{
}

/*Top level link without children*/
#acdnmenu a.current, #acdnmenu a.current:hover
{
}

/* arrow image for the top headings */
#acdnmenu div.arrowImage {
	width:12px;
	height:12px;
	top:9px;
	left:8px;right:auto; /*Setting "right:6px;left:auto;" will position the arrow image to the right*/
	background-image:url(/images/arrows.gif);
	background-position:0 0;
}

#acdnmenu div.current div.arrowImage {
	background-position:0 -12px;
}

#acdnmenu li.separator
{
	border-top:none;
	border-bottom:none;
}


/* ##### Sub level items #####*/
#acdnmenu ul.sub
{
	padding-left:20px; /*This determines the hierarchical offset*/
}

#acdnmenu ul.sub div.heading
{
	text-align:left;
	padding:5px; padding-left:20px;
	background:none;
}
#acdnmenu ul.sub div.heading a
{
}

#acdnmenu ul.sub div.current
{
	background:none;
}

#acdnmenu ul.sub a.link
{
	font-weight:bold;
	font-size:11px; /* sub menu text links */
	padding:5px; padding-left:20px;
	text-decoration:none;
	background:none;
  }

#acdnmenu ul.sub a.link:hover, #acdnmenu ul.sub a.current, #acdnmenu ul.sub div.heading a:hover, #acdnmenu ul.sub div.heading a.current
{
	background-color: lightgrey;
}

#acdnmenu ul.sub div.arrowImage {
	width:12px;
	height:12px;
	top:6px;
	left:6px;
	background-image:url(/images/arrows.gif);
	background-position:0 -24px;
}
#acdnmenu ul.sub div.current div.arrowImage {
	background-position:0 -36px;
}

/* ##### Followings usually don't need modification ###### */
/*Hack the font-size:0 bug for IE6 */
#acdnmenu,	#acdnmenu ul
{
	display:block;
	font-size:0px;
	line-height:0px;
}
#acdnmenu li {font-size:11px; line-height:16px;}
#acdnmenu:after {content:'.';height:0;clear:both;display:block;visibility:hidden;}

/*Hack for IE6-7*/
#acdnmenu ul, #acdnmenu li, #acdnmenu div.heading, #acdnmenu a.smLink, #acdnmenu div.description {*zoom:1;}
#acdnmenu li {*float:left;*width:100%;}

#acdnmenu ul
{
	position:relative;/*!*/
	overflow:hidden;
	padding:0;margin:0;list-style-type: none;padding-left:10px;
}
#acdnmenu>ul{visibility: hidden;}
#acdnmenu li {padding:0;margin:0;}

#acdnmenu div.heading, #acdnmenu div.current
{
	position:relative;
	cursor: pointer;
}
#acdnmenu div.arrowImage {position:absolute; overflow:hidden;}


/* ########################################################################################################## */

/* Alternate table rendering e.g. as per middleware_summary.shtml
 * Use for tables that include <th>'s
 * <table class="rounded">
 * or if no <th>'s use:
 * <table class="rounded roundedNoHdr">
 *   - without this you would see a missing top border.
 *
 * issues discussed here
 * http://stackoverflow.com/questions/628301/css3s-border-radius-property-and-border-collapsecollapse-dont-mix-how-can-i
 */
table.rounded {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 350px;
	box-shadow: 3px 3px 8px grey;
}

table.rounded tr th,
table.rounded tr td {
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    padding: 5px;
}
table.rounded tr th:first-child,
table.rounded tr td:first-child {
    border-left: 1px solid black;
}

table.rounded tr th:first-child,
table.rounded tr td:first-child {
    border-left: 1px solid black;
}

table.rounded tr th {
    background: lightgrey;
    text-align: left;
}

table.rounded tr th,
table.roundedNoHdr tr:first-child td
{
    border-top: 1px solid black;
}

/* top-left border-radius */
table.rounded tr:first-child th:first-child,
table.roundedNoHdr tr:first-child td:first-child {
    border-top-left-radius: 4px;
}

/* top-right border-radius */
table.rounded tr:first-child th:last-child,
table.roundedNoHdr tr:first-child td:last-child {
    border-top-right-radius: 4px;
}

/* bottom-left border-radius */
table.rounded tr:last-child td:first-child {
    border-bottom-left-radius: 4px;
}

/* bottom-right border-radius */
table.rounded tr:last-child td:last-child {
    border-bottom-right-radius: 4px;
}

/* zebra stripe */
table.roundedZebraEven tr:nth-child(even)
{
	background: #E6E6F3;
}

/* zebra stripe */
table.roundedZebraOdd tr:nth-child(odd)
{
	background: #E6E6F3;
}

table.rounded caption {
	color: darkblue;
	padding: 5px;
	font-size: 14px;
	text-shadow: 2px 1px 2px grey;
}

table.rounded th {
	color: black;
	padding: 5px;
	font-size: 12px;
}

/* scrollable parameter table rendering as per ecos/ecospro_tab.shtml */

.paramscrolltable table {
	font-size: 5px;
	table-layout: fixed;
}

.paramscrolltable tr:nth-child(even)
{
	background: #E6E6F3;
}

.paramscrolltable th {
	background-color: lightgrey;
	text-align: center;
	color: black;
	padding: 5px 0;
	font-size: 11px;
	table-layout: fixed;
}

.paramscrolltable caption {
	background-color: lightgrey;
	text-align: left;
	color: darkblue;
	padding: 5px 0;
	font-size: 12px;
}

.paramscrolltable td {
	border: 1px solid lightgrey;
	padding: 5px;
	font-size: 11px;
}

/* used for eCosPro licenses */
h1.black_h {
	padding-top: 0px;
	color: #444444;
	text-shadow: none;
}
h2.black_h {
	padding-top: 15px;
	color: #444444;
	text-shadow: none;
}
h3.black_h {
	padding-top: 10px;
	color: #444444;
	text-shadow: none;
}
h4.black_h {
	padding-top: 10px;
	color: #444444;
	text-shadow: none;
}

p.l_indent1 {
	padding-left:1em;
}
p.l_indent2 {
	padding-left:2em;
}

p.point {
	background: url("/images/tick_dblue_ds_tiny.png") no-repeat scroll 0 5px transparent;
	min-height: 20px;
	padding-left: 30px;
}

ul.tick {list-style: square outside url("/images/tick_dblue_ds_tiny.png");}
ul.circle {list-style: circle outside none;}
ul.square {list-style: square outside none;}

/* Used for registration drop down select */
.ddselect {
        width: 314px;
}
.ddselect_wide {
        width: 386px;
}

hr.grey {
  margin: 10px 0;
  height: 1px;
  border-width: 0;
  color: #666;
  background-color: #666;
}

#cookie-law {
  max-width:575px;
  min-width:350px;
  background:#EEEADD;
  margin-top: 0px;
  margin-left: 205px;
  height:auto;
  z-index:10000;
  border-radius: 17px;
  -webkit-border-radius: 17px;
  -moz-border-radius: 17px;
  border-style:solid;
  border-color:#AABBAA;
  position: fixed;
}

#cookie-law p {
  padding:5px;
  font-size:0.9em;
  font-weight:bold;
  text-align:center;
  color:#682008;
  margin:5px;
}


table.cookie-settings {
  border-spacing: 8px 4px;
  border-collapse: separate;
  /* margin: 0 auto; */
  width: fit-content;
}

td.cookie-settings {
  padding: 4px;
}

table.cookie-settings-popup {
  border-spacing: 2px 4px;
  border-collapse: separate;
  /* margin: 0 auto; */
  width: fit-content;
}

td.cookie-settings-popup {
  padding: 0px 4px;
}

span.cookie-settings {
  font-weight: 100;
  font-family: Helvitica;
  font-style: italic;
}

span:hover.cookie-settings {
  color: blue;
}

button.cookie-settings {
  border-radius: 4px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  font-family: Trebuchet MS, Arial, Helvetica, Verdana, sans-serif;
  font-size: 13px;
 }

button:hover.cookie-settings {
  background-color: #4CAF50; /* Green */
  color: white;
}

button.cookie-erase {
  border-radius: 4px;
  font-family: Trebuchet MS, Arial, Helvetica, Verdana, sans-serif;
  font-size: 13px;
  background-color: red;
  color: white;
}

/*
 * Tooltips
 */

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

/*
 * These are for eCosPro documentation
 */

ul.TOCl0,ul.TOCl1,ul.TOCl3,ul.TOCl4 {
  list-style-type: none;
}

ul.TOCl2 {
  list-style-type: circle;
}

ol.TOCl0 {
  list-style-type: upper-roman;
}

span.smallsup {
  font-size: 0.5em;
  vertical-align: super;
}

span.unsupported {
  font-style: italic;
  font-size: 0.9em;
  color: #CC0000;
}

span.doclicense {
  font-size: 0.8em;
}

.NAVHEADER hr, .NAVFOOTER hr, .BOOK hr {
  margin: 5px 0;
  height: 0px;
  background-color: #666;
}

.NAVHEADER th {
	color: darkblue;
	text-shadow:2px 1px 2px grey;
	font-size: 18px;
	padding: 5px 5px 15px 5px;

	text-align:right;
	background: #ebebeb;
	border-radius: 4px;
	border-width: 0px;
}

.NAVHEADER td {
	padding-top: 5px;
	font-size: 11px;
}

.NAVFOOTER td {
	font-size: 11px;
}

div.NAVFOOTER {
	margin-bottom: 10px;
}

h1.TITLE {
	color: darkblue;
	text-shadow:2px 1px 2px grey;
	font-size: 18px;
}

.SECT1 h1, .CHAPTER h1 {
	color: darkblue;
	text-shadow:2px 1px 2px grey;
	font-size: 16px;
}

.SECT1 h2, .CHAPTER h2 {
	color: darkblue;
	text-shadow:2px 1px 2px grey;
	font-size: 15px;
	font-weight: bold;
}

.SECT1 h3, .CHAPTER h3{
	color: darkblue;
	text-shadow:2px 1px 2px grey;
	font-size: 14px;
}

.SECT1 h4, .CHAPTER h4 {
	color: darkblue;
	text-shadow:2px 1px 2px grey;
	font-size: 13px;
	font-weight: normal;
}

.SECT1 table, .CHAPTER table, .SECT1 th, .CHAPTER  th, .SECT1 td, .CHAPTER td {
	font-size: 12px;
	border: 1px solid black;
	border-collapse: collapse;
	padding: 5px;
	color: grey;
}

.PROGRAMLISTING {
	color: black;
}

.SECT1 li, .CHAPTER li {
	padding-bottom: 0px;
}

table.ec {
    border-spacing: 6px;
    border-collapse: separate;
}

input.ec[type=text], input.ec[type=password], textarea.ec {
  width: 30em;

  box-sizing: border-box;
  border: 1px solid #555;
  outline: none;
}

input.ec[type=text]:focus, input.ec[type=password]:focus, textarea.ec:focus {
  background-color: rgb(250, 255, 189);
}

@media only screen and (max-device-width: 768px) {
  input.ec[type=text], input.ec[type=password], textarea.ec {
    width: 15em;
  }

  #inset_logo {
    padding: 4px 5px 3px 4px;
    margin: 3px 4px 4px 4px;
    width: 30%;
  }

  #search {
    float: right;
    margin: 6px 0px 0px 0px;
  }

  input, textarea, select {
    font-size: x-small;
  }

  /* main content of normal given page - between content_start and content_end includes */
  #maincontent {
    display : block !important;
    width : auto !important;
    overflow : visible !important;
    float : none !important;
    max-height: none !important;
    line-height: 100% !important;
    font-size: medium !important;
  }

  #maincontent_right {
   font-size: medium !important;
   line-height: 100% !important;
  }

  #optsubmenu {
    font-size: medium !important;
    display: none;
  }

  #optsubmenu-fillercol {
    display: none;
  }

  .fullwidthgrfx, #bodywrapper {
    width: 100%;
  }

  .toprightgrfx {
    width: 40%;
  }

  .header {
    width: 100%;
    height: unset;
    padding: 0px;
    margin: 0px 0px 5px 0px;
  }

  #footer {
    width: 95%;
  }
  div.leftinfobox {
    font-size: small !important;
  }
}