/********************  BODY  ********************/
body	{	font-family: "verdana", "arial", "calibri";
		font-size: 12px;
		font-weight: 500;
		padding-left: 10px;
		padding-top: 10px;
		background: Black;
		color: #ECECEC;
	}

.blink_new_version { animation: blinker 3s linear infinite; }
@keyframes blinker { 50% { opacity: 0.20; } }

/********************  DIVs  ********************/
fieldset div { line-height: 25px; padding-left: 10px; }
fieldset:first-child { padding-top: 10px; }
fieldset:last-child { padding-bottom: 20px; }
.first-p-surf { padding-left: 20px; line-height: 150%; }
.first-p-opens { padding-left: 20px; line-height: 150%; }
.first-p-ctrl { padding-left: 20px; line-height: 150%; }
.esoxi-abs-ctrl { position: absolute; left: 150px; }
.esoxi-rel-ctrl { position: relative; left: 143px; }
.esoxi-balc1-ctrl { position: relative; left: 140px; }
.esoxi-balc2-ctrl { position: relative; left: 50px; }
.esoxi-tent1-ctrl { position: relative; left: 150px; }
.esoxi-tent2-ctrl { position: relative; left: 215px; }
.esoxi-eave1-ctrl { position: relative; left: 140px; }
.esoxi-eave2-ctrl { position: relative; left: 50px; }
.esoxi-open-ctrl { position: relative; left: 140px; }

/********************  FIELDSET  ********************/
.general fieldset, .surfaces fieldset
	{	border: 2px;
		border-style: solid;
		border-color: #A06800;
		border-radius: 5px;
		-moz-border-radius: 5px;
		width: 980px;
	}
	
.openings fieldset
	{	border: 2px;
		border-style: solid;
		border-color: #5B5BFF;
		border-radius: 5px;
		-moz-border-radius: 5px;
		width: 980px;
	}

.control fieldset
	{	border: 3px;
		border-style: solid;
		border-color: #006633;
		border-radius: 5px;
		-moz-border-radius: 5px;
		width: 980px;
	}

.surfaceshead fielset, .openingshead fieldset { border-style: none; width: 980px; }
.control2head fieldset { text-align: center; border-style: none; width: 980px; }

/********************  LEGEND  ********************/
.general legend, .surfaces legend, .surfaceshead legend
	{	font-size: 14px;
		font-weight: 600;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 2px;
		padding-bottom: 5px;
		border: 2px;
		border-style: solid;
		border-color: #A06800;
		border-radius: 10px;
		-moz-border-radius: 10px;
		margin-left: 10px;
		background: #FFA20C;
		color: Black;
	}

.openings legend, .openingshead legend
	{	font-size: 14px;
		font-weight: 600;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 2px;
		padding-bottom: 5px;
		border: 2px;
		border-style: solid;
		border-color: #5B5BFF;
		border-radius: 10px;
		-moz-border-radius: 10px;
		margin-left: 10px;
		background: #8ED6EA;
		color: Black;
	}
	
.control legend
	{	font-size: 14px;
		font-weight: 600;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 2px;
		padding-bottom: 5px;
		border: 3px;
		border-style: solid;
		border-color: #006633;
		border-radius: 5px;
		-moz-border-radius: 5px;
		margin-left: 10px;
		background: #00CC33;
		color: Black;
	}

.control2head legend
	{	font-size: 14px;
		font-weight: 500;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 2px;
		padding-bottom: 5px;
		border: 3px;
		border-style: solid;
		border-color: #781351;
		border-radius: 5px;
		-moz-border-radius: 5px;
		margin-left: 10px;
		background: #781351;
		color: White;
	}

/********************  HR  ********************/
.surfaces hr, .openings hr, .control hr, .control2 hr, .control2head hr
	{	border-width: 1px;
		border-color: #781351;
		border-style: solid;
		margin-left: 0px;
		margin-right: 10px;
		margin-top: 20px;
	}
hr.thick{ border-width: 2px; border-style: solid; }
hr.thin{ border-width: 1px; border-style: dotted; }
	
/********************  INPUT  ********************/
.general input, .surfaces input, .openings input
	{	font-size: 13px;
		font-weight: 600;
		text-align: center;
		border-radius: 10px;
		-moz-border-radius: 10px;
		border-style: none;
	}

 input.null_input
	{	font-size: 13px;
		font-weight: 600;
		text-align: center;
		border-radius: 10px;
		-moz-border-radius: 10px;
		border-style: none;
		background: #993399;
		color: white;
	}

input.light { height: 75%; font-size: 12px; font-weight: 600; border-style: none; border-radius: 6px; -moz-border-radius: 6px; margin-top: 2px; margin-bottom: 2px; background: #C0CBE7; }
input.verylightOrange { font-size: 12px; font-weight: 200; text-align: center; color: Orange; padding: 0px; border-style: none; margin: 0px; background: Black; }
input.verylightCyan { font-size: 12px; font-weight: 200; text-align: center; color: #4FBDDD; padding: 0px; border-style: none; margin: 0px; background: Black; }
input.glass_l_h { font-size: 10px; font-weight: 200; text-align: center; color: #4FBDDD; padding: 0px; border-style: none; margin: 0px; background: Black; }
input.thin { font-size: 13px; font-weight: 500; }
input.left { text-align: left; }
input.posright { position: relative; float: right; right: 10px; }

input.ctrlOrange { font-size: 13px; font-weight: 600; text-align: center; color: Orange; border-style: none; background: Black; }
input.ctrlOrangeLeft { font-size: 13px; font-weight: 600; text-align: left; color: Orange; border-style: none; background: Black; }
/*input.ctrlCyan { font-size: 13px; font-weight: 600; text-align: center; color: #4FBDDD; border-style: none; background: Black; }*/

/********************  SELECT  ********************/
.general select, .surfaces select, .openings select
	{	font-size: 13px;
		font-weight: 600;
		text-align: center;
		border-radius: 8px;
		-moz-border-radius: 8px;
	}

select.thin { font-size: 13px; font-weight: 500; text-align: center; }
select.light { font-size: 12px; background: #C0CBE7; }
select.verylightSelCyan { /*font-size: 10px; border-style:none; color: Cyan; background: Black; } new*/
 -webkit-appearance: button;
  -webkit-border-radius: 2px;
  -webkit-padding-end: 2px;
  -webkit-padding-start: 2px;
  -webkit-user-select: none;
  background: Black; 
  border-style: none;
  color: #4FBDDD;
  font-size: 10px;
  margin: 0;
  overflow: hidden;
  padding-top: 2px;
  padding-bottom: 2px;
  text-overflow: ellipsis;
  white-space: nowrap; }
/*.ctrl select { font-size: 13px; font-weight: 600; text-align: center; color: White; border-style: none; background: Black; }*/

/********************  RADIO  ********************/
.radio { width: 1.2em; height: 1.2em; vertical-align: text-bottom; }

/********************  CHECKBOX  ********************/
input.verylightCheck {
/*  -moz-appearance:none;
-webkit-appearance:none; and
-o-appearance:none;*/
border: none;
background-color: #4FBDDD;
width: 0.9em; height: 0.9em; }




/********************  CHECKBOX  WITH  STYLE !!!!!!   ********************/

/* The container */
.null_chkbx {
  display: inline;
  position: relative;
/*  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 12px; */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.null_chkbx input {
  position: relative;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 16px;
  width: 16px;
  background-color: #ECECEC;
}

/* On mouse-over, add a grey background color */
.null_chkbx:hover input ~ .checkmark {
  background-color: #ECECEC;
}

/* When the checkbox is checked, add a background */
.null_chkbx input:checked ~ .checkmark {
  background-color: #bf40bf;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.null_chkbx input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.null_chkbx .checkmark:after {
  left: 5px;
  top: 2px;
  width: 2px;
  height: 6px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}





/********************  BUTTON  ********************/
input.generbutton, input.surfbutton
	{	font-size: 13px;
		font-weight: 600;
		border: 3px;
		border-style: outset;
		border-color: Orange;
		border-radius: 5px;
		-moz-border-radius: 5px;
		padding: 2px 10px;
		background: #CCCCCC;
		color: Black;
		cursor: pointer;
	}

input.opensbutton
	{	font-size: 13px;
		font-weight: 600;
		border: 3px;
		border-style: outset;
		border-color: #5B5BFF;
		border-radius: 5px;
		-moz-border-radius: 5px;
		padding: 2px 10px;
		background: #CCCCCC;
		color: Black;
		cursor: pointer;
	}

input.linksbutton
	{	font-size: 12px;
		font-weight: 600;
		border: 3px;
		border-style: outset;
		border-color: Blue;
		border-radius: 5px;
		-moz-border-radius: 5px;
		padding: 2px 10px;
		background: #CCCCCC;
		color: Black;
		cursor: pointer;
	}
	
input.ctrlbutton
	{	font-size: 13px;
		font-weight: 600;
		border: 3px;
		border-style: outset;
		border-color: #006633;
		border-radius: 5px;
		-moz-border-radius: 5px;
		padding: 2px 10px;
		background: #A5FF8A;
		color: Black;
		cursor: pointer;
	}

 input.helpbutton
	{	font-size: 12px;
		font-weight: 600;
		border: 3px;
		border-style: outset;
		border-color: Green;
		border-radius: 5px;
		-moz-border-radius: 5px;
		padding: 2px 10px;
		background: #CCCCCC;
		color: Green;
		cursor: pointer;
	}

input.backbutton
	{	font-size: 13px;
		font-weight: 600;
		border: 3px;
		border-style: outset;
		border-color: Red;
		border-radius: 5px;
		-moz-border-radius: 5px;
		padding: 2px 10px;
		margin-left: 720px;
		background: #CCCCCC;
		color: Black;
		cursor: pointer;
	}

input.ctrlthinbutton
	{	font-size: 13px;
		font-weight: 600;
		border: 3px;
		border-style: outset;
		border-color: #006633;
		border-radius: 5px;
		-moz-border-radius: 5px;
		padding: 2px 4px;
		background: #A5FF8A;
		color: Black;
		cursor: pointer;
	}

input.roofbutton
	{	font-size: 12px;
		font-weight: 600;
		border: 3px;
		border-style: outset;
		border-color: Lime;
		border-radius: 5px;
		-moz-border-radius: 5px;
		padding: 2px 10px;
		background: #d4e7b2;
		color: Black;
		cursor: pointer;
	}

/********************  TABLES  ********************/
table, td { border: 0; }
tr { line-height: 80%; }
tr:first-child { font-size: 80%; line-height: 200%; }
.inline { display: inline-table; vertical-align: text-bottom; }
#headgl1 { position: absolute; left: 570px; }
#headgl2 { position: absolute; left: 622px; }
#headgl3 { position: absolute; left: 673px; }

.wrapcellbig { line-height:120%; padding-top: 5px; padding-bottom: 0px; vertical-align: middle; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; }
.wrapcell { line-height:100%; padding-top: 5px; padding-bottom: 0px; vertical-align: middle; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; }
.wrapcell2 { line-height:100%; padding-top: 2px; padding-bottom: 0px; vertical-align: middle; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; }

/********************  ΔΙΑΦΟΡΑ COLOR  ********************/
	.silver { color: Silver; }
	.grey { color: Grey; }
	.red { color: Red; }
	.blue { color: Blue; }
	.orange { color: Orange; }
	.yellow { color: #fff44f; }
	.green { color: Green; }
	.cyan { color: #4FBDDD; }
	.kafe { color: saddlebrown; }
	.lime { color: Lime; }

/********************  ΔΙΑΦΟΡΑ FONT-SIZE  ********************/
	.f6 { font-size: 6px; }
	.f7 { font-size: 7px; }
	.f8 { font-size: 8px; }
	.f9 { font-size: 9px; }
	.f10 { font-size: 10px; }
	.f11 { font-size: 11px; }
	.f12 { font-size: 12px; }
	.f13 { font-size: 13px; }
	.f14 { font-size: 14px; }
	.f15 { font-size: 15px; }
	.f16 { font-size: 16px; }
	.f17 { font-size: 17px; }
	.f18 { font-size: 18px; }
	.f19 { font-size: 19px; }
	.f20 { font-size: 20px; }
	.f21 { font-size: 21px; }
	.f22 { font-size: 22px; }
	
/********************  ΔΙΑΦΟΡΑ PADDING-LEFT  ********************/
	.pad1 { padding-left: 1px; }
	.pad2 { padding-left: 2px; }
	.pad3 { padding-left: 3px; }
	.pad4 { padding-left: 4px; }
	.pad5 { padding-left: 5px; }
	.pad6 { padding-left: 6px; }
	.pad7 { padding-left: 7px; }
	.pad8 { padding-left: 8px; }
	.pad9 { padding-left: 9px; }
	.pad10 { padding-left: 10px; }
	.pad20 { padding-left: 20px; }
	.pad30 { padding-left: 30px; }
	.pad40 { padding-left: 40px; }
	.pad50 { padding-left: 50px; }
	.pad60 { padding-left: 60px; }
	.pad70 { padding-left: 70px; }
	.pad80 { padding-left: 80px; }
	.pad90 { padding-left: 90px; }
	.pad100 { padding-left: 100px; }
	.pad200 { padding-left: 200px; }
	.pad300 { padding-left: 300px; }
	.pad400 { padding-left: 400px; }
	.pad500 { padding-left: 500px; }
	.pad600 { padding-left: 600px; }
	.pad700 { padding-left: 700px; }
	.pad800 { padding-left: 800px; }
	.pad900 { padding-left: 900px; }
	.pad1000 { padding-left: 1000px; }

.typeonoma { font-size: 13px; font-weight: 600; }
.UskUtx { position: relative; float: right; right: 30px; }
.star { color: Red; 	font-weight: 600; }

#logo { vertical-align: bottom; margin-left: 20px; margin-top: 5px; }
#version { font-size: 10px; font-weight: 100; line-height: 20px; margin-top: 5px; color: Grey;}
#company { word-spacing: 0.03em; letter-spacing: 0.03em; }

canvas
	{ 	border: 4px;
		border-style: solid;
		border-color: Green;
		margin-left: 20px;
		margin-bottom: 50px;
		display: block;
	}

a:link { text-decoration: none; color: Yellow; }
a:visited { text-decoration: none; color: Yellow; }	
a:hover { color: Orange;}

.ex a:link { text-decoration: none; color: #00FF00; }
.ex a:visited { text-decoration: none; color: #00FF00; }	
.ex a:hover { color: #009900;}

.par a:link { text-decoration: none; color: Cyan; }
.par a:visited { text-decoration: none; color: Cyan; }	
.par a:hover { color: Orange;}

#whats_new
	{	width: 1150px;
		font-size: 11px;
		font-weight: 500;
		line-height: 180%;
		padding-left: 0px;
		text-align: justify;
		color: #ECECEC;
	}
	
li.new	{	list-style-type: decimal;
		list-style-position: inside;
		font-size: 11px;
		font-weight: 500;
		line-height: 180%;
		text-align: justify;
		padding-left: 0px;
		margin-right: 150px;
		overflow: visible;
		color: silver;
	}
li:last-child#whats_new { padding-bottom: 10px; }


#help
	{	font-size: 13px;
		font-weight: 500;
		line-height: 150%;
		margin-left: 10px;
		margin-right: 100px;
		text-align: justify;
		color: #ECECEC;
	}

div#help p
	{	font-size: 13px;
		font-weight: 500;
		line-height: 150%;
		text-align: justify;
		padding-bottom: 15px;
		margin-left: 10px;
		margin-right: 100px;
		color: #ECECEC;
	}

div#help .esoxi2 p
	{	font-size: 13px;
		font-weight: 500;
		line-height: 130%;
		text-align: justify;
		padding-bottom: 10px;
		margin-left: 30px;
		margin-right: 100px;
		color: #ECECEC;
	}

div#help .esoxi3 { margin-left: 20px; }
div#help .esoxi2 dl { margin-left: 20px; }
	
li	{	list-style-type: decimal;
		list-style-position:inside;
		padding-left: 20px;
		font-size: 13px;
		font-weight: 500;
		line-height: 150%;
		text-align: justify;
		margin-left: 10px;
		margin-right: 150px;
		overflow: visible;
		color: #ECECEC;
	}
li:last-child { padding-bottom: 10px; }

li.emp { list-style-type: upper-alpha; }
li.pleur { list-style-type: lower-alpha; }
li.none { list-style-type: none; }

li li { list-style-type: lower-roman; }
li li:last-child { padding-bottom: 7px; }

dt	{	font-size: 13px;
		font-weight: 500;
		line-height: 150%;
		text-align: justify;
		margin-left: 10px;
		margin-right: 150px;
		margin-bottom: 5px;
		overflow: visible;
		color: #ECECEC;
	}
	
dd	{	padding-left: 20px;
		font-size: 13px;
		font-weight: 500;
		line-height: 150%;
		text-align: justify;
		margin-left: 10px;
		margin-right: 150px;
		margin-bottom: 5px;
		overflow: visible;
		color: #ECECEC;
	}
	
dd:last-child { padding-bottom: 10px; }

i	{	font-size: 13px;
		font-weight: 700;
		font-style: italic;
		line-height: 150%;
		color: #ECECEC;
	}

h1	{	font-size: 14px;
		font-weight: 500;
		line-height: 150%;
		padding-bottom: 15px;
		margin-left: 10px;
		margin-right: 100px;
		margin-top: 20px;		
		color: #ECECEC;
	}

h2 	{	font-size: 16px;
		font-weight: 600;
		line-height: 150%;
		padding-bottom: 15px;
		margin-left: 10px;
		margin-right: 100px;
		margin-top: 20px;
		color: #00CCFF;
	}
	
h3 	{	font-size: 14px;
		font-weight: 700;
		line-height: 150%;
		padding-bottom: 15px;
		margin-left: 10px;
		margin-right: 100px;
		margin-top: 20px;
		color: cyan;
	}

h4 	{	font-size: 13px;
		font-weight: 600;
		line-height: 150%;
		padding-bottom: 15px;
		margin-left: 30px;
		margin-right: 100px;
		margin-top: 20px;
		color: cyan;
	}

h6	{	font-size: 10px;
		font-weight: 700;
		line-height: 150%;
		margin-left: 10px;
		margin-right: 100px;
		margin-top: 10px;
		margin-bottom: 20px;
		color: cyan;
	}