html, body
{
   /*height: 100%;*/
}
body
{
	margin: 0;
	padding: 0;
	color: #dedede;
   font-family: "Roboto Condensed", 'Open Sans', Arial, sans-serif;
   /*font-weight: 700;*/
   font-size: 16px;
	background-color: #121212;
}

#page-wrapper
{
	/*width: 90%;*/
   max-width: 1300px;
	/*height: 100%;*/
	margin: 0 auto;
	display: flex;
	flex-flow: column;
}
#header
{
   height: 100px;
   /*margin-bottom: 12px;*/
   border-bottom: solid 4px #ff5ce9;
   display: flex;
   justify-content: space-between;
}
#site-logo
{
   margin-right: 5px;
   color: #ff5ce9;
   font-family: parsek;
   font-size: 26px;
   display: flex;
   align-items: center;
   justify-content: center;
}
ul#top-menu
{
   margin: 0;
   padding: 0;
   list-style-type: none;
   display: flex;
   align-items: stretch;
}
ul#top-menu li
{
   margin: 0;
   /*background-color: #aaaaaa;*/
   font-family: parsek;
   font-size: 30px;
   display: flex;
}
ul#top-menu li a
{
   padding: 10px;
   color: #dedede;
   transition: background-color .3s, color .3s;
   display: flex;
   flex-flow: column;
   align-items: center;
   justify-content: center;
}
ul#top-menu li a:hover
{
   color: #fff;
   background-color: #ff5ce9;
}
#language-switcher
{
   /* for the child ul with absolute position */
   position: relative;
   display: flex;
   align-items: stretch;
}
#language-switcher #selected-language
{
   padding: 10px;
   cursor: pointer;
   transition: background-color .3s, color .3s;
   display: flex;
   align-items: center;
}
#language-switcher #selected-language:hover
{
   color: #fff;
   background-color: #ff5ce9;
}
#language-switcher #selected-language:hover + ul#language-list
{
   /* hovering on current language displays the language list underneath */
   display: flex;
}
ul#language-list
{
   margin: 0;
   padding: 0;
   background-color: #ff5ce9;
   list-style-type: none;
   position: absolute;
   top: 100%;
   display: none;
   flex-flow: column;
}
ul#language-list:hover
{
   display: flex;
}
ul#language-list li
{
   display: flex;
}
ul#language-list li a
{
   padding: 10px;
   color: #fff;
   flex: 1;
}
ul#language-list li:hover a
{
   color: #ff5ce9;
   background: #fff;
}
#language-switcher .language-flag
{
   margin-right: 5px;
}
#content-wrapper
{
   padding: 10px;
}
.article:not(:last-child)
{
   margin-bottom: 10px;
   padding-bottom: 10px;
   border-bottom: 1px solid #555;
}
.article-title
{
   font-size: 22px;
   font-weight: bold;
   display: flex;
}
.article-title > *
{
   margin-right: 5px;
}
.article-body
{
   margin: 10px 0;
}
.article-footer
{
   display: flex;
}
.article-footer > *
{
   margin-right: 5px;
}
.comment
{
   margin-bottom: 5px;
   padding: 5px;
   border: 1px solid #555;
}
.comment-header
{
   margin-bottom: 10px;
   display: flex;
}
.comment-header > *
{
   margin-right: 5px;
}
.comment-number
{
   display: none;
}
.comment-footer
{
   display: flex;
}
.comment-footer > div
{
   margin-right: 5px;
}
.comment-add
{
   margin-top: 15px;
}
.comment-add textarea
{
   width: 99%;
   height: 100px;
   margin-top: 10px;
}
.editor-toolbar
{
   display: none;
}
#footer
{
	margin: 10px 0;
	text-align: center;
	flex: 0 0 20px;
}

.container
{
   display: flex;
}

a
{
   color: #ff5ce9;
   /*  #f616e1  #2196f3 #03a9f4 */
   text-decoration: none;
}
a:hover
{
   color: #ef0ce6;
}
textarea, input[type=text], input[type=password]
{
   padding: 3px;
   color: #dedede;
   background: none transparent;
   border: 1px solid #555;
   resize: vertical;
}
textarea:focus, input[type=text]:focus, input[type=password]:focus
{
   border: 1px solid #ff5ce9;
}
input[type=text], input[type=password]
{
   width: 100%;
}
button, input[type="button"], input[type="submit"]
{
   margin: 2px;
   padding: 5px;
   vertical-align: middle;
   color: #dedede;
   background: none transparent;
   border: 1px solid #E0E0E0;
   outline: none;
   cursor: pointer;
}
button:hover, input[type="button"]:hover, input[type="submit"]:hover
{
   border: 1px solid #ff5ce9;
}
input[type="file"]
{
   border: 1px solid #555;
}

div.error
{
   text-align: center;
}
img.error
{
   width: 100%;
}

@font-face {
   font-family: "Roboto Condensed";
   src: url("../fonts/roboto-condensed.ttf")   ;
}
@font-face {
   font-family: parsek;
   src: url("../fonts/parsek.ttf")   ;
}