body,html    { height: 100%; width: 100%; }
body	     { margin: 0px; padding: 0px; text-align: left; background-color: #f6f6f6;
			   background:linear-gradient(to right, #f9f9ff, #f3f3f3, #fefefe, #f9f9ff, #f3f3f3, #fefeff);
 }
body, input, textarea, select { font-family: Roboto, Arial, Helvetica, sans-serif; font-size:14px;  }

.small       { font-size: 91%; }
.left        { text-align: Left; }
.right	     { text-align: Right }
.center	     { text-align: Center; }
.nobr	     { white-space: nowrap; }
.bold	     { font-weight: bold; }
.indent      { margin-left: 28px; }
.white       { color: #FFFFFF; }
.warning     { color: #CC0000; }

/*
.rainbowline { width:100%; height: 0.99px; background-image: repeating-linear-gradient(to right, red, green, blue, green, red ); } 
*/
.rainbowline { width:100%; height:1px; border-top:1px solid gray;  } 

p            { text-align: Justify; margin-top: 0px; margin-bottom: 6px; }

img { max-width: 100%; height: auto; }

td           { text-align: Left; vertical-align:top }
td.content   { padding-top: 10px; }

ul           { text-align: Justify; margin-top: 6px; margin-bottom: 12px; }
ol           { text-align: Left; margin-top: 6px; }
li           { text-align: Justify; list-style-type: square; margin-top: 6px; margin-left:18px; }
li.num       { text-align: Justify; list-style-type: decimal; margin-top: 6px;}
li.none      { text-align: Justify; list-style-type: none; margin-top: 6px; }

h1           { font-size: 130%; color: #005000; font-weight: bold; margin-top: 0px; margin-bottom: 16x; }
h2           { font-size: 115%; color: #005000; font-weight: bold; margin-top: 20px; margin-bottom: 16px; }
h3           { font-size: 100%; color: #000000; font-weight: bold; margin-top: 16px; margin-bottom: 12px; }
h4           { font-size: 100%; color: #000000; font-weight: bold; }  

#dialogtable p { margin-top:12px; }

input, textarea, select, #loginout, .button { outline: none; background: #fafaff; border:2px solid #000066; border-radius:6px }
input[type='text'], input[type='email'], input[type='password'] { height:20px; width:320px; padding:4px 12px; margin-top:6px; margin-bottom: 6px;}
input[type='number'] { height:20px; width:36px; padding:5px; }
input[type='radio'] { position:relative; top:2px; margin-right:6px; }
input[type='submit'] { margin-top:12px; }  

input[type='submit'], .button { background: #ECF1FF; min-width:120px; padding: 6px 18px; text-align:center; }
input[type='submit']:hover, #loginout:hover, .button:hover { background: #e0ffe0; }

select { padding:6px 12px; width: 346px;}
textarea { padding:4px 12px; width: 320px; }
.button { display:inline-block; cursor:pointer; color: black;}
.price { display:inline-block; text-align:center; min-width:60px; padding:4px 2px; background: #fafaff; border:2px solid #000066; border-radius:6px }

#darkmodeselect { float:right; height: 32px; padding-right:3px; border: 2px solid navy; margin-right:12px; width:6em; margin-top:4px; }
#loginout { font-size:14px; height: 22px; color: black; float:right; margin-right: 12px; margin-top:4px; background: #ECF1FF; padding: 6px 18px 0px 18px; text-align:center;  cursor: pointer;}
  
input:focus, textarea:focus, select:focus, #loginout:focus, .button  { border-color: #0000ee; } 	

	
a      		{ text-decoration: none; color: blue; }	
a:hover     { color: #FF0000; }

a.externallink
{
    background: url(/img/external.png) center right no-repeat;
    padding-right: 14px;
}

ul { padding-left: 24px; }

dt           { font-weight: normal; margin-top: 6px; margin-bottom: 4px; }
dd           { margin-top: 2px; margin-bottom: 4px }

#header {
	overflow: hidden;
	padding: 18px 12px 18px 36px;
}

#headertitle { font-size:32px; font-weight: bold; color: #001848; text-decoration: none;}

#content  { 
	padding: 36px 16px 24px 36px; 
	line-height: 140%;
	vertical-align: top; 
	text-align: Justify; 
	background: #fefefe;
	min-height:300px;
}

.productframe { float:left; width:360px; max-width:calc(100% - 24px); border:1px solid gray; padding: 0px 12px 0px 12px; margin-right:24px; margin-bottom:24px; cursor:pointer;}

sup.reg { font-size:70%; }


/* h1 + ul , h2 + ul { padding-left: 0px;  }*/

#footer { 
	clear: both;
	color: #444444;
	font-size:95%;
	padding: 12px 3px 3px 36px;
	text-align: Left; 
	margin-top: 0px;
}

.footerblock {
	float:left; 
	vertical-align: top;
	white-space: nowrap; 
	padding-bottom:24px;
	margin-right:40px;
}

.footerblock:last-child {
	margin-right:0px;
}

@media all and (max-width: 540px) {
	.footerblock { float:none; }
}
	
.bottommenu img {
	position: relative; top:2px;
	margin-right:8px;
}

.bottommenu a {
	color: black;
	text-decoration: none; 
	display: block;
	margin-bottom:12px;
}

.bottommenu a:Hover { color: #0000aa; }

div.infotip {
	clear:both;
	margin:12px 60px 12px 28px;
	padding: 12px; 
	min-height:3.4em;
	max-width: 30em;
	background-color:#eeeeee;
	border:1px solid #ddd;
	border-radius:10px;
}

div.infotip p { margin-left:0px; }
div.infotip p:last-child { margin-bottom:0px; padding-bottom:0px }

div.infotip::before {
  content: "";
  width: 2.6em;
  height: 2.6em;
  float:left;
  position: relative; top: -2px;
  display: inline-block;
  background-image: url("/img/tip.png");
  background-repeat: no-repeat;
  background-size: 1.8em 1.8em;
}


@media all and (max-width: 520px) {
	#header, #content, #footer  { padding-left:16px; padding-right:16px;}	
	#headertitle { font-size:28px; position: relative; left:-4px; }
	#header img { width:24; height: 24px; margin-right:0px; }
	#loginout { margin-right: 0px; margin-top: 0px; padding: 6px 6px; }
	.productframe { margin-right:0px; }
	h1, h2 { margin-left: 0px }
	p.image { margin-left: 0px; margin-top: 18px; margin-bottom: 12px; }
}

@media print {
	body { background: none; }	
    .noprint { display: none; }
    .menubar { display: none; }
    #leftbar { display: none; }
    #toolbar { display: none; }
    #sidebar { display: none; }
    #sidebarright { display: none; }
    #sidebarbottom { display: none; }
    .bottommenu  { display: none; }
    #topmenu  { display: none; }
}