@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;100&display=swap');

@media (prefers-color-scheme: light) {

	body {
		background-color: #f0f0f0;
		color: #111;
	}

	h2.topnote {
		color:#999;
	}

	div.uline {
		border-bottom:1px dotted #dedede
	}

	.divider {
		background-color:#dedede
	}
	
	.topMenu {
		color: #333;
		background-color:#ddd;
	}

	.topMenu.active {
		color: #fff;
		background-color:#aaa
	}

	a {
		color:#009;
	}

	span.fio {
		color:#009;
		line-height: 25px;
	}	

	input.searchInput {
		background-color: #fff;
		border:1px solid #ccc;
		color: #333;
	}

	.clear-search {
		color:#777;
	}

	#myBtn, #btnForm, #clearFilter {
		background-color: #ccc;
		color: #555;
	}

	#myBtn:hover, #btnForm:hover, #clearFilter:hover {
		color: #333;
	}	
	
    div.switch {
		 background-color: #ddd;
	}
	
	.strikesw {
		color:#777;
	}
	
	.lnkOut {
		border-bottom: 1px dotted #79b8c6;
		color:#79b8c6;
	}
		
	.points {
		color:#aaa;
	}
	
	.topMenuBull {
		color:#bbb;
	}

	.aSilence {
		font-size:30px;
		color:#bbb;
	}
	
	div.newDiv {
		background-color:#ea654f;
		color:#fff
	}

	div.swDiv {
		background-color:#333;
		color:#fff
	}

	div.terrorDiv {
		background-color:#080;
		color:#fff
	}

}





@media (prefers-color-scheme: dark) {
	body {
		background-color: #222;
		color: white;
	}

	h2.topnote {
		color:#555
	}

	div.uline {
		border-bottom:1px dotted #333
	}

	.divider {
		background-color:#777
	}

	div.topMenuLeft {
		color:#dedede;
	}
	
	div.titleHuman {
		color:#dedede;
	}
	
	div.titleNonHuman {
		color:#dedede;
	}
	
	div.lText {
		color:#ccc;
	}
	
	div.rText {
		color:#ccc;
	}	

	a {
		color:#29a6c4;
	}	

	span.fio {
		color:#29a6c4;
		line-height: 25px;		
	}	

	.topMenu {
		color: #dedede;
		background-color:#333;
	}
	
	.topMenu.active {
		color: black;
		background-color:#ccc;
	}

	.topMenuBull {
		color:#555;
	}

	input.searchInput {
		background-color: #333;
		border:1px solid #222;
		color: #f2f2f2;
	}

	input[type="text"]::placeholder {
		color: #ccc;
	}

	.clear-search {
		color:#fff;
	}

	#btnForm, #myBtn, #clearFilter {
		background-color: #555;
		color: #ccc;
	}
	
	#btnForm:hover, #myBtn:hover, #clearFilter:hover {
		color: #fff;
	}	

	div.switch {
		 background-color: #333;
	}

	.strikesw {
		color:#aaa;
	}

	.lnkOut {
		border-bottom: 1px dotted #4b686f;
		color:#4b686f;
	}
	
	.points {
		color:#666;
	}

	.aSilence {
		font-size:30px;
		color:#555;
	}

	div.newDiv {
		background-color:#d68c80;
		color:#333
	}

	div.swDiv {
		background-color:#ccc;
		color:#333
	}

	div.terrorDiv {
		background-color:#090;
		color:#fff
	}

}

div.terrorDiv {
	position:relative;
	top:8px;
	font-size:12px;
	width:75px;
	padding:2px;
	text-align:center;
}

div.swDiv {
	position:relative;
	top:8px;
	font-size:12px;
	width:75px;
	padding:2px;
	text-align:center;
}

div.newDiv {
	position:relative;
	top:8px;
	font-size:12px;
	width:50px;
	padding:2px;
	text-align:center;
}

body {
	min-width:900px;
	margin:0px;		
    font-family: 'Roboto', sans-serif;
	font-weight:100;
	font-size:16px;
}

h1 {
	font-size:48px;
	font-weight:100;
	padding:0px;
	margin:0px
}

h2.topnote {
	padding:0px;
	margin:0px;
	font-weight:100;
	font-size:16px
}

.aSilence {
	font-size:30px;
	text-decoration: underline dotted;
	text-decoration-thickness: 3px
}

div {	
	padding:0px;
	margin:0px;
	border:0px solid #ccc
}

div.topMenuLeft {
 	float:left;
 	width:50%;
 	height:40px;
 	line-height:60px	
}

div.topMenuRight {
 	float:right;
	width:50%;
}

div.titleHuman {
	float:left;
	padding-top:50px;
	height:120px;
	width:52%;
	line-height:40px
}

div.titleNonHuman {
	float:left;
	padding-top:50px;
	height:120px;
	width:48%;
	line-height:40px
}

div.menuFilters {
	width:100%;
	height:50px;
	padding-bottom:30px
}

div.clearB {
	clear: both
}

div.lHalf {
	width:48%;
	float:left;
	padding-left:30px;
	padding-top:40px;
	padding-bottom:40px;
}

div.rHalf {
	width:45%;
	float:right;
	padding-right:30px;
	padding-top:40px;
	padding-bottom:40px;

}

div.Name {
	float:left;
	width:180px;
	font-size:15px
}

div.Nick {
	width:230px;
	float:left;
	color:#777;
}

span.role {
	color:#777;
	line-height: 23px;
}

.lnkOut {
	font-size:13px;
    text-decoration: none;	
}

.lnkBlock {
	height:10px;
}

div.lText {
	margin-left:185px;
	padding-right:30px;
	line-height:25px;
}

div.rText {
	margin-left:185px;
	line-height:25px;
}

img {
	border-radius: 8px;	
}

img.photoR {
	margin-bottom:15px;	
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
}

img.photoL {
	margin-bottom:15px;	
}

span.date {
	color:#999;
	font-size:12px
}

div.note {
	padding-top:15px;
	color:#777;
}

div.preText {
	color:#777;
	padding-bottom:20px;
}

.divider {
	height:5px;
}

#clearFilter {
	position: fixed;
	bottom: 20px;
	left: 30px;
	z-index: 99;
	font-size: 15px;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 15px;
	border-radius: 4px;
	display:none;
}

#btnForm {
	position: fixed;
	bottom: 20px;
	right: 130px;
	z-index: 99;
	font-size: 15px;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 15px;
	border-radius: 4px;
}

#myBtn {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 30px;
	z-index: 99;
	font-size: 15px;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 15px;
	border-radius: 4px;
}

input[type="checkbox"] {
	width:20px;
	height:20px
}

#searchInput {
	font-family: Courier New;
	font-weight:100;
	font-size:16px;
}

label.tags {
	position: relative;
	top:-4px;
	font-size:20px
}

textarea, select, input {
	width: 600px;
	padding: 5px;
	margin: 5px 0px;
	font-size:18px
}

.topMenu {
	font-size: 14px;
	cursor: pointer;
	margin-right:10px;
	margin-bottom:10px;
	line-height:35px;
	padding:5px;
}

.topMenuBull {
	position: relative;
	left:-7px;
	top:1px;
}

.topMenu.active {
	cursor: pointer;
}

.search-box {
	position: relative;
	float:right;
	top:10px;
}

.clear-search {
	position: absolute;
	left: 180px;
	color:#777;
	top: 10px;
	cursor: pointer;
	display: none; 
}

.clear-search.visible {
	display: block;
}

.highlight {
	background-color: yellow;
}

.center-div {
  max-width: 1100px;
  margin: 0 auto;
}