/* General: */

:root {
  color-scheme: light dark; /* both supported */
}

/* Font weight
	Open Sans
		300 Light
		400 Regular
		600 Semi-bold
		700 Bold
		800 Extra-bold
	Oswald
		200 Extra-Light
		300 Light
		400 Regular
		500 Medium
		600 Semi-bold
		700 Bold
*/

body {
	background-color: #222;
	color: #eee;
	margin: 0px;
	padding: 0px;
	/*font-family: Verdana, Arial, Helvetica, sans-serif;*/
	font-family: 'Open Sans', sans-serif;
}

body.dark {
	background-color: #222;
	color: #eee;
}

a {
	color: #ffbb55;
	font-weight: 600;
	text-decoration: none;
}

body.dark a {
	color: #ffbb55;
}

q             { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
q:lang(en)    { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
q:lang(en-GB) { quotes: '\2018' '\2019' '\201c' '\201d'; } /* ‘ ’ “ ” */
q:lang(es)    { quotes: '\00ab' '\00bb' '\201c' '\201d'; } /* « » “ ” */
q:lang(et)    { quotes: '\201e' '\201d' '\2019' '\2019'; } /* „ ” ’ ’ */
q:lang(fi)    { quotes: '\201d' '\201d' '\2019' '\2019'; } /* ” ” ’ ’ */
q:lang(fr)    { quotes: '\00ab' '\00bb' '\2039' '\203a'; } /* « » ‹ › */
q:lang(ru)    { quotes: '\00ab' '\00bb' '\201e' '\201c'; } /* « » „ “ */


input {
	background-color: white;
	color: #111;
	border-radius: 3px;
	border: 1px solid #555;
	font-size: 1.1em;
}
body.dark input {
	background-color: #111;
	color: #eee;
	border-color: #aaa;
}

h1, h2, h3 {
	font-family: 'Oswald', sans-serif;	
	/*font-family: 'Open Sans', sans-serif;*/
}
h1:first-child, h2:first-child, h3:first-child {
	margin-top: 0px;	
	padding-top: 0px;	
}
h1 {
	font-size: 3em;
	font-weight: 200;
}
h2 {
	font-weight: 400;
}
body.dark h2 {
	color: #ff7777;
}
h3 {
	font-weight: 600;
	font-size: 1.3em;
}
body.dark h3 {
	color: #dd9955;
}
p:first-child {
	margin-top: 0px;	
	padding-top: 0px;	
}
p:last-child {
	margin-bottom: 0px;	
	padding-bottom: 0px;	
}
.NoWrap {
	white-space: nowrap;
}

@media print {

	.NoPrint {
	  visibility: hidden;
		display: none;
	}

	body {
	  background-color: white;
		color: black;
	}

}

.Centered {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.Button {
	display: inline;
	padding: 4px 8px 4px 8px;
	border-radius: 3px;
	background-color: rgba(0, 0, 0, 0.05);
	border: 1px solid #555;
}

body.dark .Button {
	background-color: rgba(255, 255, 255, 0.05);
	border-color: #bbaa99;
}

span.Gray {
	opacity: 0.3;
}

.Hidden {
	display: none;
}

em {
	font-style: normal;
	background-color: rgba(255, 255, 255, 0.3);
	/*border: 1px solid rgba(255, 220, 100, 1);*/
	border-radius: 3px;
	box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.2);
	margin: 0 0.3ch 0 0.3ch;
	padding: 0 0.7ch 0 0.7ch;
	color: black;
	font-weight: 600;
}
p.Ems {
	line-height: 2em;
}

/* UIDebug with Show/hide toggle: */

#uidebug {
  display: none;
}
#uidebug:target {
  display: block; 
}
div.UIDebug {
	opacity: 0.1;
	border: 1px solid rgba(128, 128, 128, 0.5);
	border-radius: 5px;
	padding: 12px;
	margin: 32px 12px 12px 12px;
	background-color: rgba(0, 0, 0, 0.1);
	transition: all 10s;
}
div.UIDebug:hover {
	opacity: 0.8;
	transition: all 0.3s;
}
div.UIDebug hr {
	margin: 18px 0px 12px 0px;
	border: none;
	border-top: 1px solid rgba(129, 128, 128, 0.3);
}
div.UIDebugContent {
	margin-bottom: 18px;
}
div.UIDebugContent>h3 {
	margin-top: 12px;
}
div.UIDebugContent>h3>span {
	margin-left: 12px;
	font-size: 0.8em;
	font-weight: normal;
	opacity: 0.5;
}
div.UIDebugContent>p {
	font-family: monospace;
	font-size: 1em;
}



/* General */

span.Tag, span.Warning, span.Warning1, span.Warning2, span.Warning3 {
	margin: 0px 2px 0px 2px;
	padding: 0px 4px 0px 4px;
	font-size: 0.9em;
	border-radius: 3px;
	color: black;
}

span.Tag {
	background-color: rgb(128, 128, 128);
}

span.Warning, span.Warning3 {
	background-color: rgb(220, 60, 60);
}
span.Warning1 {
	background-color: rgb(150, 100, 100);
}
span.Warning2 {
	background-color: rgb(180, 80, 80);
}

/* TopHeader */

#TopHeader {
	display: block;
	background-color: #ccc;
	text-align: right;
	padding: 8px;
}

body.dark #TopHeader {
	background-color: black;
}

#TopHeader>a {
	padding: 0px 16px 0px 16px;
	font-size: 0.8em;
	opacity: 0.5;
	transition: all 0.5s;
}

#TopHeader>a:hover {
	opacity: 1;
}


/* Login */

#LoginContainer {
	display: inline-block;
	border: 1px solid rgba(0, 0, 0, 0.2);
	padding: 24px;
	border-radius: 5px;
	background-color: rgba(0, 0, 0, 0.1);
}
body.dark #LoginContainer {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.2);
}
#LoginContainer>div:last-child {
	padding: 8px 0px 4px 0px;
	text-align: center;
}
#LoginFields>div {
	padding: 0px 0px 16px 0px;
	text-align: right;
}
#LoginFields>div>label {
	display: inline-block;
	padding: 0px 8px 0px 0px;
	text-align: right;
}
#LoginFields>div>input {
	display: inline-block;
	padding: 0px 0px 0px 8px;
}
#LoginFields>div.LoginWarning {
	text-align: center;
	color: #bb3333;
}
body.dark #LoginFields>div.LoginWarning {
	text-align: center;
	color: #dd6666;
}


/* Dastabase */

div.DbOuter {
	_padding: 16px;
}

div.DBOuter>h2 {
	margin: 32px 16px 16px 16px;
}

div.DBOuter>h3 {
	margin: 32px 16px 16px 16px;
}

div.DbAddress {
	display: block;
	background-color: rgba(0, 0, 0, 0.1);
	padding: 16px 16px 16px 16px;
	color: rgba(255, 255, 255, 0.3);
}
div.DbAddress a {
	text-shadow: 0px 0px 15px rgba(255, 255, 255, 0.2);
	padding-right: 8px;
}
div.DbAddress a.Favorite {
	opacity:  0.1;
}
div.DbAddress a.Favorite:hover {
	opacity:  0.5;
}
div.DbAddress a.Favorite.Active, div.DbAddress a.Favorite.Active:hover {
	opacity:  1;
}
div.DbAddress>a.Level0, div.DbAddress>a.Level1 {
	opacity: 0.1;
	color: rgb(255, 250, 160);
}
div.DbAddress>a.Level2 {
	opacity: 0.2;
	color: rgb(255, 240, 160);
}
div.DbAddress>a.Level3 {
	opacity: 0.3;
	color: rgb(255, 230, 160);
}
div.DbAddress>a.Level4 {
	opacity: 0.4;
	color: rgb(255, 220, 160);
}
div.DbAddress>a.Level5 {
	opacity: 0.5;
	color: rgb(255, 210, 160);
}
div.DbAddress>a.Level6 {
	opacity: 0.6;
	color: rgb(255, 200, 160);
}
div.DbAddress>a.Level7 {
	opacity: 0.7;
	color: rgb(255, 190, 160);
}
div.DbAddress>a.Level8 {
	opacity: 0.8;
	color: rgb(255, 180, 160);
}
div.DbAddress>a.Level9 {
	opacity: 0.9;
	color: rgb(255, 170, 160);
}
div.DbAddress>a.Level10 {
	opacity: 1;
	color: rgb(255, 160, 160);
}
div.DbAddress>a:hover {
	opacity: 1;
}
div.DbAddress>div.Languages {
	float: right;
}
div.DbAddress>div.Languages {
	float: right;
}
div.DbAddress>div.Languages>a {
	opacity: 0.3;
}
div.DbAddress>div.Languages>a:hover {
	opacity: 0.7;
}
div.DbAddress>div.Languages>a.Active {
	opacity:  1;
}

div.Favorites {
	padding: 8px;
}
div.Favorites>a {
	margin: 8px;
}
div.Favorites>a>div {
	display: inline-block;
	background-color: rgba(127, 127, 127, 0.2);
	padding: 4px 8px 4px 8px;
	border-radius: 5px;
}
div.Favorites>a>div>div.Title {
	text-align: center;
}
div.Favorites>a>div>div.Address {
	text-align: center;
	font-size:  0.7em;
	font-weight: normal;
	color:  #777;
}


div.DbInner0 {
	margin: 0px;
	background-color: rgba(170, 200, 150, 0.1);
	padding: 16px;
}
div.DbInner1 {
	margin: 0px;
	background-color: rgba(200, 190, 160, 0.1);
	padding: 16px;
}
div.DbInner2 {
	margin: 0px;
	background-color: rgba(100, 80, 60, 0.1);
	padding: 16px;
}
table.DbList {
}
table.DbList>tbody>tr>td, table.DbList>tbody>tr>th {
	padding: 4px 8px 4px 8px;
	font-size: 0.85em;
}
table.DbList>tbody>tr>td {
	background-color: rgba(0, 0, 0, 0.1);
}
table.DbList>tbody>tr>td.Photo {
	padding:  0px;
	text-align: center;
	vertical-align: middle;
}
body.dark table.DbList>tbody>tr>td {
	background-color: rgba(255, 255, 255, 0.1);
}
table.DbList>tbody>tr>td.DbLinkCell {
	background-color: rgba(0, 0, 0, 0.2);
	cursor: pointer;
}
body.dark table.DbList>tbody>tr>td.DbLinkCell {
	background-color: rgba(255, 255, 255, 0.2);
	cursor: pointer;
}
table.DbList>tbody>tr>th {
	font-weight: normal;
	text-align: left;
	background-color: rgba(0, 0, 0, 0.2);
}
body.dark table.DbList>tbody>tr>th {
	color:  rgb(255, 230, 160);
	background-color: rgba(255, 255, 255, 0.2);
}
table.DbDetails {
}
table.DbDetails>tbody>tr>th, table.DbDetails>tbody>tr>td {
	padding: 4px 8px 4px 8px;
	font-size: 0.85em;
}
table.DbDetails>tbody>tr>th {
	background-color: rgba(255, 255, 255, 0.2);
}
table.DbDetails>tbody>tr>td {
	background-color: rgba(0, 0, 0, 0.1);
}
body.dark table.DbDetails>tbody>tr>th {
	color:  rgb(255, 230, 160);
	background-color: rgba(255, 255, 255, 0.2);
}
body.dark table.DbDetails>tbody>tr>td {
	background-color: rgba(255, 255, 255, 0.1);
}
table.DbDetails>tbody>tr>th  {
	font-weight: normal;
	text-align: right;
}
table.DbDetails>tbody>tr>td {
}
table.DbList>tbody>tr>th.DbEditor {
	background-color: rgba(0, 0, 0, 0.1);
}
body.dark table.DbList>tbody>tr>th.DbEditor {
	background-color: rgba(255, 255, 255, 0.1);
}
table.DbList>tbody>tr>td.DbEditor, table.DbDetails>tbody>tr>td.DbEditor {
	background-color: rgba(0, 0, 0, 0.05);
}
body.dark table.DbList>tbody>tr>td.DbEditor, body.dark table.DbDetails>tbody>tr>td.DbEditor {
	background-color: rgba(255, 255, 255, 0.05);
}
div.RecordPhoto {
	padding: 16px;
}
div.RecordPhoto>img {
	border-radius: 5px;
}


/* Buttons */

div.BigButtons {
	padding: 16px;
}

a.SmallButton {
	margin: 0px 4px 0px 4px;
	padding: 2px 8px 2px 8px;
	border-radius: 3px;
}

a.BigButton {
	margin: 0px 12px 0px 12px;
	padding: 4px 10px 4px 10px;
	border-radius: 3px;
}

a.Edit, body.dark a.Edit {
	background-color: rgb(0, 16, 50);
	color: #ccc;
	opacity: 0.4;
}
a.Edit:hover, body.dark a.Edit:hover {
	opacity: 1;
}

a.Delete, body.dark a.Delete {
	background-color: rgb(100, 35, 35);
	color: #ccc;
	opacity: 0.3;
}
a.Delete:hover, body.dark a.Delete:hover {
	opacity: 1;
}

a.Go, body.dark a.Go {
	background-color: black;
	color: #ccc;
	opacity: 0.6;
}
a.Go:hover, body.dark a.Go:hover {
	opacity: 1;
}

a.Save, body.dark a.Save {
	background-color: rgba(255, 255, 255, 0.7);
	color: black;
	opacity: 0.3;
	transition: all 0.5s;
}
a.Save:hover, body.dark a.Save:hover {
	background-color: rgb(100, 150, 0);
	opacity: 1;
}

a.Cancel, body.dark a.Cancel {
	background-color: rgb(200, 70, 70);
	color: black;
}


/* zz */

#zzcontainer {
	display: block;
	width: 100%;
	/*background-color: black;*/
	text-align: right;
}
#zzcontainer>div {
	display: inline-block;
	margin: 4px;
}


/*
table {
  border-size: 0px;
	border-collapse: collapse;
	vertical-align: top;
}

td {
  vertical-align: top;
	font-family: Verdana, Arial, Helvetica, sans-serif;
  padding: 0px;
}

th {
	vertical-align: bottom;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

img {
  border: 0px;
}

hr {
	height: 1px;
	border-style: none;
	border-top: 1px solid #cccccc;
}
*/

/* a */

/*
a, a:hover, a:visited {
  color: inherit;
}
*/

/* Input: */
/*
.Field {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	width: 160px;
	background-color: white;
	border: 1px solid #999999;
	border-radius: 3px;
	color: #222222;
	opacity: 0.7;
	padding: 0px 4px 0px 4px;
}
.Field:hover, .Field:focus {
  opacity: 1;
}
select.Field {
	padding: 0px;
}

input.Small {
	width: 80px;
}

input.Gray, .Disabled {
  opacity: 0.5;
}

textarea {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	width: 240px;
	background-color: white;
	border: 1px solid #669900;
	border-radius: 3px;
	color: #222222;
}
textarea.Field {
	width: 240px;
	height: 100px;
}
*/