@CHARSET "UTF-8";
body {font-size: 1.0em; margin:0px; padding: 0px;
 color: #444; font-size: 1.0em;  font-weight: bold; }
.wait {cursor: wait; }
li.frage   { width: 750px; margin-left:5px; padding-left: 20px; }
li.frage:first-line {padding-left:5px; }
li.frage:first-letter { color:red; font-weight: bolder; }
td.top {vertical-align: top; }	

li.box { font-family:Courier New, Courier; font-size:12pt;
        background-color:#fafecc;
        color:blue; text-align: left;  border:2px solid blue;
        margin-left:15px; margin-right:15px; padding-left:10px;
        width: 415px;
      }
pre.def { BACKGROUND-COLOR: #f6f6f6; BORDER: #dedede thin solid; width:415px;
          margin-left:15px; margin-right:15px;
          COLOR: black; FONT-FAMILY: monospace; FONT-SIZE: 9pt;
          FONT-STYLE: normal; FONT-WEIGHT: normal; PADDING-BOTTOM: 5px;
          PADDING-LEFT: 10px; PADDING-RIGHT: 5px; PADDING-TOP: 5px; TEXT-DECORATION: none
}
p.do:first-line{ padding-left:1px; }
p.do{font-family:Arial;font-size:10pt; margin-top: 2px; padding-left:20px;}


p.box {width: 300px;}
div.head_data, p.head_data,span.call{background-color: #FFAAAA; margin-left:5px; padding: 5px; width:95%; display: inline-block; }
div.msg_data ,p.msg_data ,span.msg_data{background-color: yellow; color: #010101;margin-left:5px;padding:5px; width:95%; display: inline-block;}

span.distr_msg{background-color: yellow;color: #010101;margin-left:5px;padding:5px;  display: inline-block;}
span.distr_call, span.down_cont {background-color: #FFAAAA; color:#010101; margin-left:5px; padding: 5px;  display: inline-block; }

td.msg_data  {background-color: yellow; color: #010101;padding:5px;}
li.head_data {background-color: #FFAAAA; color: #010101;padding: 5px;  display: block;}
li.msg_data {background-color: yellow; color: #010101; padding:5px; display:block}
li b {font-size:12pt; font-weight:bold; color:#010101; }
dsc_ol li {color:#010101;}
div#stack_div  {width:910px; border: 2px solid red; background-color: #FFFFEC; height:500px; }
div#stackOrder {width:900px;  background-color: #FFFFEC; height:450px; }
div.man { height: 700px; border: 1px solid black; width: 560px; padding-left: 2px; }
div#manual_div  { position: relative; left:1px; top:  1px;width: 535px; height: 700px;  z-index: 150; border:outset 4px black; background-color: #FFFCEF; }
div#manual_drag_div {background-color:yellow;width:530px; color: #010101;}
div#manual_text { position: relative;  border: solid 1px black; width:535px;  height: 660px; background-color: #CFCFCF; z-index:50; overflow: scroll;}
div#toggle_manual {position: absolute; left: 1px; top: 20px; z-index: 20; }

/*div#manual_div {position: absolute; left:1px; top: 30px;} */
div#manual_bottom_drag_div div.dragline {position: relative; left:1px; bottom: 1px; width: 515px; background-color:yellow;}

div.dragline 	{position: relative; left:1px; top: 1px; background-color: #CFCFCF; border-bottom: solid 2px #3d3d3d; vertical-align: top; height: 24px;  max-height:30px;}
div.dragline:hover { cursor: move; }
div.dragline  	{background-color: #CFCFCF;margin-bottom: 2px; border-bottom: solid 2px #3d3d3d;  }
div.draggable {font-size: 1.3em; background-color: #CFCFCF;}
.drag_head { padding-bottom:6px; border:outset 2px black;}      

div#myTooltip { font-size: 16px; }
div.tooltip { left:4px; background-color: #FFFFEC; font-size: 16px; padding-left:4px; border: outset 2px red;}

div#tip_div {border: outset 3px red; }
div#tip_content {overflow-y: auto; margin-top: 5px;padding: 3px;border: solid 1px black; max-width: 600px; max-height: 300px;  z-index: 1000;}


div#mapper 	{ position:absolute; left: 180px; top: 1px; }

div#mess_div  { border: outset 5px red; }
div#mess_cont {background-color: #FF6633; color: #ffffff; font-weight: bold; }

area.ch_16 { border: solid 1px green; z-index:200;}

div#dsc_div     {   position: absolute; left: 1px; top: 60px; width:465px; height:340px; border: outset 2px black;}
div#ds_100 		{	position: absolute; left: 1px; top: 35px; width:458px; z-index: 2;} 
div#svg_div {overflow-y: scroll; overflow-x: auto; }
div#ctrl 		{	position: relative; left: 0px; top: 0px; width:450px; z-index: 2;} 
div#dsc_screen 	{   position: absolute;  top:  40px; left:31px; width: 246px; height:158px;  display: none; 
					font-family: monospace; font-size: 1.0em; font-weight: bold; z-index: 300;padding-left: 2px; }
div#call_ent_div {  position: absolute; left: 168px;  top:228px; width:100px; height:46px; border: solid 3px yellow; z-index: 1; display: none; background-color: #ccffff; opacity:0.33; }  /*   filter:alpha(opacity=33); */
div#distr_key_div { position: absolute; left: 55px;  top:220px; width:80px; height:80px; z-index: 1; display: none;}
div#distr_key_div:hover { display:block; } 


div#m503_div     {   position: absolute; left: 478px; top: 50px; width:430px;  height:340px; border: outset 2px black;}
div#m503 		{position: absolute; left: 1px; top: 40px;  width:430px; height:310px; z-index: 20; text-align: center;} 

div.wrc_07  {height:650px; }
div.proc_txt {height:630px; overflow-y: auto;}
div.msg_data, div.head_data {color: #010101; }
div#chan_src ul li {color: #010101; }
div#aufg_txt ul li {color: #010101; }
div#aufg_txt p {color: #010101; }

div#postit_div {position:absolute; left: 10px; top:   1px; width:156px; height: 68px; z-index: 30; }
div#mmsi_postit { position:absolute; left: 0px; top:  2px; width:155px; height: 47px; z-index: 30; font-size:11px; line-height: 12px; 
font-weight: bold; padding-left:10px; background: url('../images/mmsi_zettel.png')  repeat   left top;   }
 

/* div#micro		{position:absolute; top:10px;left:466px; width:150px; z-index:30; }  */


.key { background-color: #CDCDCD; border: outset 3px #3d3dff; border-radius: 5px;padding-left:3px;padding-right: 3px; text-align: center; font-size:1.0em;font-weight:bold; min-width: 60px;  } 
.key:hover  {cursor: crosshair; }


div#reg_div     {   position: absolute; left: 1px; top: 60px; width:600px; border: solid 1px black; opacity:0.9; }
div#reg_text    { background-color: #FFFFBE;  opacity:0.9; font-size: 0.95em;}
ul.reg {margin-left: 30px; font-size: 1.1em;}
ul.reg li  	{ font-size: 0.95em; font-weight: bold;}

div#key_log_div {width: 420px; }

div#recorder_div {border: outset 3px red; }

div#key_animate { border: solid 3px yellow; z-index: 1; display: none; background-color: #ccffff; opacity:0.33; font-size: 1.1em; }
@keyframes blink { 
   50% { border-color: #ff0000; } 
}
div#call_ent_div{ /*or other element you want   ,span.blink */
    animation-name: blink ;
    animation-duration: .5s ;
    animation-timing-function: step-end ;
    animation-iteration-count: infinite ;
    animation-direction: alternate ;
}
div#key_animate { /*or other element you want* http://www.multipetros.gr/posts/728-blink-elements-border-the-css-way// */
    animation-name: blink ;
    animation-duration: .5s ;
    animation-timing-function: step-end ;
    animation-iteration-count: infinite ;
    animation-direction: alternate ;
}


div#console_2	{position: absolute; left:2px; top: 460px;   width:304px;height:209px; border: outset 2px black; padding: 5px; z-index: 40;}
div#cons_div	{ border: outset 2px red; padding: 2px; width:95%;}
div#toggle_console{position: absolute; left: 1px; top: 1px; }
div#console_screen {position: absolute; left: 25px; top: 103px; width: 158px; height: 97px;  z-index: 35; font-family: monospace; font-size: 11px; font-weight: bold; line-height:12px;margin:0px;}
select#con_2_sel {  font-size: 0.8rem; width: 70%;} /*font-family: monospace; font-size: 11px; font-weight: bold; line-height:12px;margin:0px; */
div#cons_grid { width:32%;}

select#fixed_calls { font-size: 0.8rem; width: 70%;}
div#m505_screen {position: absolute; left: 25px; top: 102px; width: 198px; height: 108px;   z-index: 45; display: block;}

div#m505_left 	{position: absolute; left: 0px; top: 0px; width: 198px;  font-family: monospace; font-size: 11px; font-weight: bold; line-height:12px;margin:0px;padding-left:2px; z-index:50;}
div#m505_right	{position: absolute; left: 145px; top: 18px;  width:50px; height: 82px;  display: block; z-index:52;  }
div#canvas_m505 {margin-top: 0px; width:105px; height:82px;}

div#aufgaben_div {position:absolute; left: 3px; top: 720px;  width:400px;padding: 5px; background-color:#FFFFFA; overflow-Y: auto; border: outset 2px lightgray;}

div#aufg_div { background-color:#FFFFFA; padding-left:2px; border: outset 2px lightgray; width:95%;}




a#close_console {margin: 0px; padding-bottom: 4px;  vertical-align: top; float:right; }
div#startlog_div {width:650px; background-color: #FcFcFc; }
div#logtxt {background-color: #FFFACA; border: outset 3px red; }

.contr_8 {color: #000000; }
.contr_7 {color: #202020; }
.contr_6 {color: #303030; }
.contr_5 {color: #303030; }
.contr_4 {color: #303030; }
.contr_3 {color: #303030; }
.contr_2 {color: #303030; }
.contr_1 {color: #303030; }

span.dsczeile { font-family: monospace;  font-size: 1.2rem;  font-weight: bold; width: 240px;   display: block; }
span.zeile    { font-family: monospace;  font-size: 1.0em; line-height: 12px; width:150px; font-weight: bold;display: block; }
span.fzeile   { font-family: monospace;  font-size: 1.1rem; line-height: 1.15rem; width:120px; display: block; }  		/* funke*/
span.czeile   { font-family: monospace;  font-size: 0.9rem; line-height: 1.0rem;  font-weight: bold;display: block; }  /* console II*/

div#ajaxStat_div {position: absolute; left: 700px; top: 60px; width: 460px; border: solid 1px red; background-color: #FFFFFA; font-size:0.8rem;}
textarea#ajaxStat_area {overflow:auto;}

div#icomStat_div{ width: 540px;height: 750px; border: outset 4px blue; z-index:150; background-color: #FFFFFA; display:block;}
div#icom_stat { position:absolute; left: 4px; top: 30px; width:283px; height:715px; border: solid 1px black;}
div#icom_status { position:absolute; left: 1px; top: 15px; 	width:280px; height:700px; border: solid 1px black;overflow:auto;}

div#m503_stat 	{ position:absolute; left: 282px; top: 30px;width:253px; height:310px;border: solid 1px black;}
div#m503_status { position:absolute; left: 1px; top: 15px;  width:250px; height:295px;  border: solid 1px black;overflow:auto;}

div#m505_stat 	{ position:absolute; left: 282px; top: 345px; width:253px; height:400px; border: solid 1px black;}
div#m505_status { position:absolute; left: 2px; top: 15px; width:250px; height:385px; border: solid 1px black;overflow:auto;}


span.statTop { display:block; font-weight: bold; background-color: #FFFECE; border-bottom: solid 1px black; }
span.lblue {background-color: lightblue;  display:block; }
span.lblue:hover { background-color: yellow; }
span.lyell {background-color: #FFFECE;  display:block; }
span.lyell:hover { background-color:yellow; }
span.italic { font-style:italic; color:#010101;}
span.ital  { font-style:italic; font-weight:normal; color: green;}
span.blink { font-weight:bold; background-color: yellow; color: red;}
span.right {float:right; }
span.red , p.red  {color:red; font-weight: bold; }
span.blue    {color:blue; font-weight: bold; }
span.bg_green    {background-color:lightgreen; font-weight: bold; }
.zentr {text-align: center; }

.key { background-color: #CDCDCD; border: outset 3px #3d3dff; padding-left:3px;padding-right: 3px; text-align: center; font-size:1.0em;font-weight:bold; min-width: 60px;  } 
.key:hover  {cursor: crosshair; }

div#aufg { max-height:500px; overflow-y: auto; }


div#body_chan_div { padding-left: 5px;  border: outset 2px black; font-size:0.8em;  background-color: #FFDFEE; }
area  {display:block; border: 2px solid yellow; }


div#report_grid {font-size: 0.8rem; border: outset 2px blue;}
h2,wrc_07 { color: #FF0000; }



div#currState_div {position: absolute; left:1300px; top: 470px; }
div#currStateData { width: 300px; min-height: 400px; overflow:auto; } 
 
 div.grid_5 {width:40%;}
 div#conf_grid  {width:20%;border:solid 1px black;}
 div#currState_div,div#config_div { border: outset 3px red;  padding-left:3px; }
      
div#errordialog  	{width:600px; overflow:auto; }
div.trace_msg 	{width:400px; font-size: 0.8rem; max-height: 500px; overflow-y:auto;}
textarea#trace_txt  {font-size: 0.7rem;}
div#trace_log_div {z-index: 1000; }


div#online_div { border: outset red 3px;}
div#online     { height: 150px; overflow: auto; }


div#upd_div {width: 800px;  border:outset 4px red;}
div#upd_msg {padding: 5px; }
div#upd_msg ul {padding-left: 20px; }
img.updpic {width:240px; float:left; padding-right:15px;}

div#gps_div  { width:98%;}
div#gps_svg_div     {top: 33px; height: 130px; }

div#rr_div {width: 98%; }
div#rr_body_div  {width: 98%; }

/* style the second level background */
/* url(../img/arrow-grey.gif) no-repeat 115px center; */
.menu ul ul input.drop { background:#5b78a4  }
 
 /* style the second level hover */
.menu ul ul input.drop:hover{
  background-color:#5b78a4; 
  /* url(../img/arrow-blue.gif) no-repeat 115px center; */
  color:#ffffff;
 }
.menu ul ul :hover > input.drop {
  background:#5b78a4 url(../img/arrow-blue.gif) no-repeat 115px center;
  color:#ffffff;
  }

.left            { position: absolute; left: 5px; width: 650px; }
.right           { position: absolute; left: 800px; width: 550px; }

div#cbkmnu {z-index: 1000; }
div#cbkmnu menu ul li.dropblue input.drop , div#cbkmnu menu ul li.dropblue ul li.dropblue input.drop {font-size:1.1em; color:white; background-color:#5b78a4;} 
div#cbkmnu menu ul li.dropblue:hover , div#cbkmnu menu ul li.dropblue ul lidrop.blue:hover { color: yellow; background-color: #5b78a4; }
.menu {font-size: 1.1em; }
.menu input  {
       font-size:12px;text-decoration:none;
       color:#fff; width:auto;
       height:31px; border:1px solid #000;
       border-width:1px 0 1px 1px; background-color:#5b78a4;
       padding-left:10px;padding-right:5px;
       line-height:31px;  font-weight:bold;overflow:hidden;
       vertical-align:middle;
      }


ul#cbkshow_ul {width: auto; font-size:0.8em; z-index: 1000;}
ul#cbkshow_ul li {  background-color: #5b78a4; width: 200px; display: block; color: #ffffff; font-size:0.8em; font-weight: bold;border: solid 1px grey;}
ul#cbkshow_ul li:hover {  background-color: #FFFECF; display: block;color: blue; font-weight: bold;}
 
 
div#cbk {
       display:block;font-size:0.8em;text-decoration:none;
       color:#fff; width:auto;font-weight: bold; line-height:25px; z-index: 1000;;
       }
div#cbk   .menu ul:hover, .menu ul ul li:hover
{
  color: #000000;
  background-color: #fefdd0;
}

/* Line 450 */
div#cbk .menu :hover > ul, .menu ul ul :hover > li
{
  color: #000000;
  background-color: #fefdd0;
} 
 
 ul#cbk_ul li  {background:rgba(0,0,0,.6); color:#fff; width:98%;} 
 ul#cbk_ul li:hover { background:rgba(245,245,240,.6); color: #0099ff; }

input[checkbox]
{
  /* scale(2) Double-sized Checkboxes */
  -ms-transform: scale(1); /* IE */
  -moz-transform: scale(1); /* FF */
  -webkit-transform: scale(1); /* Safari and Chrome */
  -o-transform: scale(1); /* Opera */
  padding: 10px;
}

/* Might want to wrap a span around your checkbox text */
li input[checkbox] {width:20px; display:inline;font-weight:bold;padding-left: 5px;}
.checkboxtext
{
  /* Checkbox text */
  color: #010101;
  vertical-align: middle;
  font-size: 1.2em;
  display: inline;
  font-weight:bold;
}

h2.wrc_07 {text-align:center; }
iframe#marinetraffic {border:solid 1px red;  width:99%;  overflow:hidden;  height:600px;}

select#rr_ausw {  width: 90px; }
.styled-select select {
   background: transparent;
   width: 90px;
   padding: 5px;
   font-size: 16px;
   line-height: 1.1em;
   border: 0;
   border-radius: 0;
   height: 34px;
   }
   
.summary_hidden  {display: none; }
.summary_display {display: block; } 

summary {display:block; background-color: lightgray; font-weight:bold; margin-bottom:5px;padding-bottom: 5px;}
/*
summary::-webkit-details-marker {
    display: none;
    }
*/     
details summary:after {
    content: "+";
    float: left;
      margin-right: 5px;
    }
     
details[open] summary:after {
      content: "-";
    }
    
    
/* <details> and <summary> are block level elements */
details, summary { display: block; }

/* The following styles will only get applied if JavaScript is enabled and <details> is not natively supported */

/* Add focus styles (for keyboard accessibility) */
.no-details summary:hover, .no-details summary:focus { background: #ddd; }

/* The following styles are not really needed, since the jQuery script takes care of hiding/displaying the elements. */
/* However, we’re still gonna use CSS as well to prevent FOUC in browsers that understand these selectors. */
/* Remember: by default (and probably most of the time), the contents of the <details> element are hidden. */

/* Hide all direct descendants of every <details> element */
/* Note that IE6 doesn’t support the child selector; we’ll work around that using jQuery later */
.no-details details > * { display: none; }

/* Make sure summary remains visible */ 
.no-details details summary { display: block; }

/* Apply a pointer cursor upon hover to indicate it’s a clickable element. These styles can be applied regardless of whether the fallback is needed */
summary { cursor: pointer; }    
summary p ul li {margin-left: 20px;padding-left:20px; }
table#bugLst {border: outset 2px black; }
table#bugLst td,table#bugLst th {border-bottom: solid 1px black; }
table#bugLst thead {background-color: #CFCFCF; }

div#plotter_div {font-size: 0.8rem; border: outset 2px red;}
table#ais_info {font-size: 0.8rem; width: 99%;}
table#ais_info input {font-size: 0.8rem; }

span.shift {padding-left:25px; text-indent:-24px;display:block; }
span.shift > * {text-indent: 0px; }
/* List-Styles */
.disc {list-style-type: disc;}
.circle {list-style-type: circle;}
.square {list-style-type: square;}
.decimal {list-style-type: decimal;}
.decimal-leading-zero {list-style-type: decimal-leading-zero;}
.lower-roman {list-style-type: lower-roman;}
.upper-roman {list-style-type: upper-roman;}
.lower-alpha {list-style-type: lower-alpha;}
.upper-alpha {list-style-type: upper-alpha;}
.lower-greek {list-style-type: lower-greek;}
.lower-latin {list-style-type: lower-latin;}
.upper-latin {list-style-type: upper-latin;}

.bg { 
		/* Set rules to fill background */ 
		min-height: 100%;
		min-width: 1024px;

			/* Set up proportionate scaling */ 
		width: 100%;
		height: auto;

		/* Set up positioning */
		position: fixed; 
		top: 40px;
		left: 170px;

/*	 background:#ffffff url("../../img_screens/funkschein_dsc_m503.png") no-repeat left top;  */
	 opacity: 0.3; 
	 }

div#known_bugs_div {width:750px; background-color: #FcFcFc; }
div#bugsdiv {background-color: #FFFACA; border: outset 3px red; }

  .main-controls {
  padding-bottom: 0.7rem;
    height: 125px;
  }

  .sound-clips {
    width:98%;
    height: calc(100% - 195px - 0.7rem);
      min-height:180px;
  }
 

@media (min-width: 481px) and (max-height: 460px) {
  .sound-clips {
    width:98%;
    height: auto;
    min-height:180px;
    background-color: #999;
	background-image: linear-gradient(to top right, rgba(0,0,0,0), rgba(0,0,0,0.5));
  }
}

div#src_man_div  {width: 430px; border: outset 3px red;  }
div#src_man_text {max-height: 500px; overflow:auto; }
div#man_text ul {margin-left: 30px; list-style-type: circle; } 



.svg-container {
	display: inline-block;
	position: relative;
	width: 100%;
	padding-bottom: 100%;
	vertical-align: middle;
	overflow: hidden;
}



.svg-content {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}