body {
	padding: 0;
	margin: 0;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	overflow: hidden;
	font-family: Monospace;
}


.onlinemark {
    color: Chartreuse;
    font-weight: bold;
}

#lang , button {
    margin: 3px 3px;
}

.but {
    color:blue;
    background-color:yellow;    
}

@media screen and (min-resolution: 150dpi) and (orientation: portrait) {
	body {
		font-size: 36pt;
	}
	button img {
	height 50%;
	}
}

@media screen and (min-resolution: 150dpi) and (orientation: landscape)
	{
	body {
		font-size: 24pt;
	}
	button img {
	height 16px;
	}
}

@media screen and (min-resolution: 250dpi) and (orientation: landscape)
	{
	body {
		font-size: 200%;
		  color: green;
	}
}

@media screen and (min-resolution: 200dpi) and (orientation: portrait) {
	body {
		font-size: 36pt;
		  color: brown;
	}
	
	select,[type=checkbox],[type=text],button {
	font-size: 48px;
	height: 66px;
	}
button ,[type=checkbox]{	
	width: 78px;
}
 	button img {
	height: 64px;
	}
}

@media screen and (min-resolution: 300dpi) and (orientation: portrait) {
	body {
		font-size: 48pt;
		  color: blue;
	}
	button img {
	height 200%;
	}
}

@media ( orientation : landscape) {
	.two {
		flex-direction: row;
	}
	.w {
		width: 50%;
	}
}

@media ( orientation : portrait) {
	.two {
		flex-direction: column;
	}
	.w {
		width: 100%;
	}
}

/* Create the caret/arrow with a unicode, and style it */
[x]::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
[x^="+"]::before {
  transform: rotate(90deg);
}

button {
    vertical-align: top;
    margin-left: 10;
}

[type=checkbox] {
float: left;
  left: 5px;
 }

.lnk {
	  color: red;
}

.wm {
	width: 100%;
}

.full {
	display: flex;
	height: 100%;
	background-color: red;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	flex-flow: column;
	overflow: hidden;
}

.w {
	display: flex;
	flex-flow: column;
	overflow: hidden;
}

#fullmodal {
	z-index: 1; /* Sit on top */
	display: none;
	background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

.modal {
	height: 70%;
	width: 70%;
	display: flex;
	position: fixed;
	left: 15%;
	top: 15%;
	flex-flow: column;
	overflow: hidden;
	background-color: salmon;
}

.columnButtons{
     display: flex;
  flex-direction: column;
}

.two {
	flex-grow: 1;
	display: flex;
	background-color: Aqua;
	overflow: hidden;
}

#winLog {
    	background-color: LightGrey;
        color: DarkBlue;
}

.lnk000 {
    background-color: DarkRed;
        color: Yellow;
}

.lognum {
    width:4em;
}

.lnk111 {
    background-color: Green;    
}

.lnk11s {
    background-color: Yellow;    
}

.lnk00c {
    background-color: BlueViolet;    
}

.w, .menu, .wm, .wIn {
	border-style: solid;
	border-width: 1%;
	border-color: #8F8F8F;
}
.wIn2 {
	border: 0;
    overflow: auto;
    width:100%;
    height:100%;    
    background-color: DarkBlue;
}

.w, .wm, .wIn {
	flex-grow: 1;
	overflow: auto;
}

.w, .wIn {
	background-color: DarkBlue;
}


.wm {
	background-color: #999999;
}

.top {
	flex-grow: 0;
	text-align: left;
	width: 100%;
	background-color: LightSkyBlue;
}

.menu {
	flex-grow: 0;
	align: top;
	background-color: #ABABAB;
}

#w2 {
	background-color: #00FFCB;
}

#w1 {
	background-color: #FF0000;
}
#menu1 {
	background-color: #3344CB;
}
#menu2 {
	background-color: #338822;
}


.wm {
	color: black;
}

 #w2 p {
 margin: 0;
 padding: 0;
 }

 

 
 
 .topstring {
     border: solid;
     display: block;
 }
 
 
legend {
    color: yellow;
}

#lang {
    	background-color: #FFFF00;
}

#wm2 {
}

#online {
    color:FireBrick;
    background-color: FireBrick;
    font-weight: bold;
}

@keyframes blinker { to { opacity: 0; } }

.wIn2 {
    color: White;
}
