@font-face {
	font-family: "Gafata";
	src: url("/static/Gafata-Regular.ttf");
}

@font-face {
	font-family: "Urbanist";
	src: url("/static/Urbanist-VariableFont_wght.ttf");
}

html {background-color: black;}

body {
	color: #ddd;
	font-family: FreeSans,Arial,Helvetica,sans-serif;
}

nav {
	border: 1px solid #888;
 }

footer {
	border-top: 1px solid #888;
	color: #f0f0f0;
	font-size: small;
	text-align: center;
}


h1,h2,h3,h4 {
	font-family: Urbanist;
}

h1,h2 {
	font-size: 24pt;
	text-shadow: 3px 3px #807000;
} 

h3,h4 {
	text-decoration: underline;
	text-shadow: 2px 2px #807000; 
} 

/* h2,h3 {color: #ff9;}
h4 {color: #ffff80;} */

a:link {
 font-style: normal;
 color: #ffbf00; 
 font-weight: bold;
 text-decoration: none;
}

a:visited {
 font-style: normal;
 text-decoration: none;
 color: #ded0a6; 
}

a:active {color: #ffff00; font-weight: bold;}

a:hover {color: #ffff00; font-style: normal;}


button, input, textarea, select {
	border-width: 1px;
	border-color: #444;
	margin: 0px;
	background-color: #202020;
	color: #ddd;
}
select {border-style: outset;}
input, textarea {border-style: solid;}
input:disabled {
	border-width: 1px;
	border-color: #111;
	margin: 0px;
	background-color: #222;
	color: #444;
}
.CommentButton {color: #ffbf00;}

b,strong {color: #ff6; font-weight: bold;}
em {font-weight: bold;}

h2 a:link {
 font-style: normal;
 font-weight: bold;
 text-decoration: none;
}

h2 a:visited {
 font-style: normal;
 font-weight: bold;
 text-decoration: none;
}

h2 a:hover {
 font-style: normal;
 font-weight: bold;
 text-decoration: none;
}

h3 a:link {
 font-style: normal;
 font-weight: bold;
 text-decoration: none;
}

h3 a:visited {
 font-style: normal;
 text-decoration: none;
}

br.n {
   clear: none;
}

code {
	border-style: dashed;
	border-color: #808080;
	background-color: #222;
	color: #ffffe0;
	padding: 5px;
}

h3 {font-size: 13pt;}

footer.Cebus {border: 0px;}

ul.Menu {list-style-type: none; padding: 0px;}

.Author {
	background-color: #044;
	border: 1px solid #088;
	text-align: left;
}

.Editor {
 text-align: left;
	background-color: #006;
	border: 1px solid #00f;
}

.Admin {
	border: 1px dotted #f00000;
	background-color: #400000;
	text-align: left;
}

.Admin td {text-align: left;}

.Controls {
 background: black;
 padding: 2px 5px 2px 5px;
}

.AuthorControls {
	padding: 5px;
	background-color: #044;
	border: 1px solid #088;
	border-radius: 5px;
}

.EditorControls {
	padding: 5px;
	background-color: #006;
	border: 1px solid #00f;
	border-radius: 5px;
}

.AdminControls {
	padding: 5px;
	background-color: #044;
	border: 1px solid #088;
	border-radius: 5px;
}

input.AuthorButton {
	margin: 2px 10px 2px 10px;
	background-color: #008000;
	color: #fff;
	border: outset #008000;
	vertical-align: middle;
	font-weight: bold;
}

input.EditorButton{
	margin: 2px 10px 2px 10px;
	background-color: #202080;
	color: #fff;
	border: outset #202080;
	font-weight: bold;
}

input.Admin{
 background-color: #300;
 color: #fff;
 border: outset #200;
 font-weight: bold;
}

.InfoExpander {
 color: #12e3f2;
 font-weight: bold;
 cursor: pointer;
 vertical-align: middle;
 margin: 0px;
 display: inline-block;
 height: 100%;
 padding: 1px;
}

.AuthorExpander {
 display: inline-block;
 background-color: #050;
 color: #fff;
 border: outset #020;
 font-weight: bold;
 cursor: pointer;
 vertical-align: middle;
 margin: 0px;
 height: 100%;
}

.EditExpander {
 display: inline;
 background-color: #007;
 color: #fff;
 border: outset #006;
 font-weight: bold;
 cursor: pointer;
 vertical-align: middle;
}

.AdminExpander {
 background-color: #800;
 color: yellow;
 border: outset #e00;
 font-weight: bold;
 cursor: pointer;
 vertical-align: middle;
}

li.MenuEntry a {font-weight: bold; padding: 0px 5px 0px 5px;}

li.MenuEntryActive a { color: black; font-weight: bold; padding: 0px 5px 0px 5px;}
li.MenuEntryActive a:link {background-color: #ffbf00;}
li.MenuEntryActive a:visited {background-color: #ded0a6;}
li.MenuEntryActive a:hover {background-color: #ffff00;}
li.MenuEntryActive a:active {background-color: #ffff00;}

/****************** User Module */

.UserLabel {
 font-weight: bold;
 color: #00ff00;
}

.UserLabelAdmin {
 font-weight: bold;
 color: #f9b66d;
}

.UserLabel a {
 font-weight: bold;
 color: #00ff00;
}

.UserLabelAdmin a {
 font-weight: bold;
 color: #f9b66d;
}

.UserLoginForm {
 color: #f9b66d;
 font-size: 9pt;
 font-weight: bold;
 text-align: left;
 padding: 0px;
 margin: 0px;
}

.UserAdminForm {
 color: #f9b66d;
 font-size: 9pt;
 font-weight: bold;
 text-align: left;
 padding: 0px;
 margin: 0px;
}

.UserProfileForm {
 color: #f10b66d;
 font-size: 9pt;
 font-weight: bold;
 text-align: left;
 padding: 0px;
 margin: 0px;
}

.UserLoginFailed {
 color: white;
 padding-left: 10px;
}

.User .Row {
	border-bottom: 1px solid #088;
}

.Row label {
 padding-right: 5px;
 float: left;
 width: 10em;
}

.UserLoginForm input {
 border: 2px solid #A08000;
}

.UserProfileForm input {
 border: 2px solid #A0A0A0;
}

.UserAdminForm input {
 border: 2px solid #A00000;
}

aside.UserSide input {
	width: 200px;
}

aside.UserSide label {
	display: inline-block;
	width: 10em;
}

aside.UserSide .UserButton {
	width: auto;
}

.Row select {
	font-family: Arial, sans-serif;
	font-size: 11pt;
	border: none;
	margin: 0px;
	background-color: #202020;
	color: yellow;
	width: 100%;
	height: 1.5em;
}

.Row input[type=text],input[type=password] {
	font-family: Arial, sans-serif;
	font-size: 11pt;
	border: 1px solid #006000; 
	background-color: #202020; 
	color: yellow;
	overflow: hidden;
	width: 100%;
}

.Row textarea {
	font-family: Arial, sans-serif;
	font-size: 11pt;
	border: 1px solid #404040; 
	background-color: #202020; 
	color: yellow;
	overflow: hidden;
	width: 100%;
	min-height: 10em;
}

.Item {min-width: 20em;}

input.UserButton {
 width: auto;
 background: #404040;
 border: 1px outset green;
 color: yellow;
}

.UserProfile {
 border: 1px dotted #280010;
 color: #CBC5C5;
 padding: 0px 25px 0px 25px;
 margin: 3px;
 background: black;
 overflow: auto;
}

ul.UserError {
 color: #ffa000;
 font-weight: bold;
}

@media screen and (min-width: 960px) {
	body {background-color: black;}
	nav {text-align: left;}
	.key {text-align: left;}
	.item {text-align: left;}
	.item * {text-align: left;}
}

@media screen and (max-width: 959px) {
	li {text-align: center;}
	li.MenuEntry,li.MenuEntryActive {background-color: #444; text-align: center;}
	p {text-align: center;}
	h1,h2,h3 {text-align: center;}
	.item {text-align: center;}
	.resume ul {text-align: center;}
	.key {text-align: center; width: 100%;}
}

.hn 
{
 font-style: italic;
 color: #ecc440;
}

.light {background: #202020}

.item {
 font-size: 11pt; 
 font-weight: normal; 
}

.key {
 width: 12em; 
 font-size: 13pt; 
 font-weight: bold; 
}