/*++++++++++++++++++*/
/*      Common      */
/*------------------*/
/*  Effects to all  */
/* part of website  */
/*++++++++++++++++++*/

body {
	background-color: #e9c78a;
	background-image: url("../img/parchment.png");
	font-family: sans-serif;
	font-size: 0.88em;
	line-height: 1.4em;
	color: #ffffee;
	text-shadow: 1px 1px 0px #000000;
}

/*+++++++++++++++++++++++++*/
/* Links and special links */
/*+++++++++++++++++++++++++*/

a img {
	border: none;
}

a {
	text-decoration: none;
	color: rgba(254, 234, 138, 1);
	font-weight: bold;
}

.blogEntry a {
	font-weight: normal;
}

a:visited {
	color: #e0d7b0;
}

a.missingLink {
	color: yellow;
}

a.externalLink:after {
	content: " "url("../img/replied.png");
}

/* Links which needs a users permission */
a.permissionLink {
	color: rgba(254, 234, 138, 1) !important;
}

a:hover {
	color: #181;
}

/* We put this after a:hover  */
/* to prevend the hover style */
/* for this link              */

a.wrongLink {
	color: rgb(255, 117, 0);
}

a.invertedColor {
	color: #181;
}

a.invertedColor:hover {
	color: #ffffee;
}

form {
	display: inline;
}

/**************/
/* Codeblocks */
/**************/

pre {
	white-space: pre-wrap;
	background-image: url("../img/black50.png");
	padding: 5px 10px;
	margin: 5px 10px;
	border: 1px solid black;
	overflow-x: auto;
}

code {
	background-image: url("../img/black50.png");
	font-size: 14px;
}
/*No double background*/
pre > code {
	background-image: none;
}

input, button, textarea, .button, select {
	box-sizing: border-box;
	margin-bottom: 5px;
	padding: 2px 10px;
	border: 1px solid black;
	border-radius: 10px;
	background: none;
	background-image: url("../img/black50.png");
	outline: none;
	color: #ffffff;
	vertical-align: middle;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.85em;
	font-weight: bold;
}

.profileHelp {
    height: 17px;
    width: 17px;
}

select {
	padding: 2px 20px 2px 2px;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: rgba(0, 0, 0, 0.5) url("../img/select_arrow.png") no-repeat center right;
}

select:hover {
	background: rgba(0, 0, 0, 0.2) url("../img/select_arrow.png") no-repeat center right;
}

select > option {
	color: rgba(254, 234, 138, 1);
    background-color: rgba(90, 74, 49, 1);
}

.star-ratings input, .star-ratings button {
	padding: inherit;
}

textarea {
	font-weight: normal;
	font-size: 0.9em;
}

input:hover, button:hover, textarea:hover {
	background-image: url("../img/black20.png");
}

input.radio {
	background: none;
	border: none;
	vertical-align: middle;
}

h1, h2, h3, h4, h5, h6 {
	color: #181;
	margin-top: 0px;
	font-weight: normal;
}

/* different margin for headers where text could be written */
div.blogEntry h1, h2, h3, h4, h5, h6 {
	margin: 0.8em 0em 0.5em 0em;
}

#content_header h1 {
    	display: inline-block;
}

svg {
	text-shadow: none;
}

td {
	vertical-align: top;
	line-height: 1.4em;
}

.posLeft {
	float: left;
}

.posRight {
	float: right;
}

.clear {
	clear: both;
}

.center  {
	text-align: center;
}

.right  {
	text-align: right;
}

.middle {
	vertical-align: middle;
}

.grey {
	color: #998;
}

.green {
	color: #181;
}

.green a {
	color: #181;
}

.green a:hover {
	color: #ffffee;
}
.small {
	font-size: 0.83em;
}

a.small {
	font-weight: normal;
}

.even {
	background-image: url("../img/black20.png");
}

.odd {
	background-image: url("../img/black50.png");
}

.hidden {
	display: none;
}

.placeholder {
  color: #aaa !important;
}

.errormessage {
	color: #ff6b3c;
}

.errormessage ul {
	margin: 0px;
}

.noshadow, .noshadow input {
	text-shadow: none;
}

.italic {
	font-style: italic;
}

.nolinebreak {
    white-space: nowrap;
}

/* Base */

div#wrapper {
	min-width: 980px;
	margin: 0px 20px;
}

div #main {
	min-height: 500px;
}

div#content {
	margin-right: 240px;
	display: flex;
	flex-direction: column;
}

div#footer {
	background-color: #695536;
	background-image: url("../img/wood.png");
	padding: 10px;
	margin-top: 20px;
	text-align: center;
	box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.7);
	border: 1px solid black;
	-moz-border-radius: 4px;
	-khtml-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

/**********/
/* Header */
/**********/
#logo img {
	width: 100%;
}

#header {
	display: flex;
	display: -webkit-flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
}

#header .header_boxes li a, .header_boxes p {
	font-weight: bold;
}

#header .header_boxes {
	display: flex;
	flex-flow: row wrap;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	border: 1px solid #474444;
	-webkit-border-radius: 4px 4px 0px 0px;
	-khtml-border-radius: 4px 4px 0px 0px;
	border-radius: 4px 4px 4px 4px;
	box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.7);
	background-image: url("../img/wood.png");
}

#header .header_boxes li {
	border: 1px solid rgba(90, 74, 49, 0.84);
	padding: 2px 5px 2px 5px;
	text-align: center;
}

#header .header_boxes img {
	margin: 0 2px 0 2px;
}

#header li.loginBox {
	background-image: url("../img/black20.png");
	border: 1px solid #474444;
	-webkit-border-radius: 4px 4px 0px 0px;
	-khtml-border-radius: 4px 4px 0px 0px;
	border-radius: 4px 4px 4px 4px;
}

#header p {
	padding: 0px;
	margin: 0px;
}

#header img {
	vertical-align: middle; /* to prevent a space below */
}

/****************/
/* Right Column */
/****************/

div#rightColumn {
	width: 220px;
}

div.columnModule {
	width: 220px;
}

div.columnModule h3 {
	margin-bottom: 10px;
	margin-top: 8px;	/* Correction for first box */
}

div.columnModuleBox {
	width: 220px;
	margin-bottom: 20px;
	background-color: #695536;
	background-image: url("../img/wood.png");
	border: 1px solid black;
	box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.7);
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	border-radius: 4px;
}


div.columnModuleBox h4 {
	color: #ffffee;
	padding: 8px;
	padding-bottom: 0px;
	margin: 0px;
}

div.columnModuleBox ul.poll {
	padding: 8px;
	list-style-type: disc;
	border: none;
}

div.columnModuleBox ul.poll li {
	padding: 0px;
	border: none;
	height: 20px;
}

div.columnModuleBox p {
	margin: 0px;
	padding: 8px;
}

div.columnModuleBox ul {
	width: 220px;
	padding: 0px;
	margin: 0px;
	list-style-type: none;
}

div.columnModuleBox ul.player {
	padding: 4px;
	list-style-type: disc;
}

div.columnModuleBox ul.player li{
	padding: 4px;
	border: none;
}

div.columnModuleBox ul li {
	display: block;
	padding: 8px;
	border-top: 1px solid black;
	font-size: 0.8em;
}

div.columnModuleBox ul li:first-child {
	border-top: none;
}

/* News Posts */

img.landing {
	margin-left: 20px;
	margin-bottom: 15px;
	border: 10px solid transparent;
	border-image: url(../img/image_border.png) 20 round;
	-webkit-border-image: url(../img/image_border.png) 20 round; /* Safari 3.1-5 */
	-o-border-image: url(../img/image_border.png) 20 round; /* Opera 11-12.1 */
}

div.blogEntry {
	background-color: #332f29;
	background-image: url("../img/but1.png");
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid black;
	padding: 1em 1em 2em 1em;
	margin-bottom: 20px;
	box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.7);
}

div.blogEntry img {
	max-width: 100%;
}

div.blogEntry img.title {
	width: 150px;
	margin-right: 20px;
	margin-bottom: 10px;
}

div.blogEntry p {
	text-align: justify;
	margin: 0px;
	margin-bottom: 10px;
}

div.blogEntry hr {
	height: 1px;
	background: #998;
	border: none;
	clear: left;
}

div.blogEntry .breadCrumb{
	margin-bottom: 1em;
}

div.blogEntry .posRight{
	margin-bottom: 1em;
}

/* Pagination */

.pagination .current.page{
	font-weight: bold;
	font-size: large;
	color: #C8BE93;
	vertical-align: bottom;
}

.pagination .summary{
	margin-right: 1em;
}

/****************/
/* Tabbed views */
/****************/

.tab-list {
	align-self: flex-end;
	margin-bottom: 0px;
	margin-top: -18px; /* Fix the margin of the header*/
	z-index: 2;
	display: flex;
	flex-direction: row;
	list-style: none;
	height: 20px;
}

.tab-list a {
	background-color: #332f29;
	background-image: url("../img/but1.png");
	border-radius: 4px;
	border: 1px solid black;
	padding: 0.5em;
	margin: 0 0 0 0.4em;
	box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.7);
	font-size: 0.83em;
}

.tab-list a:hover {
	border-bottom: none;
	box-shadow: none;
}

.tab-list .active {
	border-bottom: none;
	box-shadow: none;
}

.tab-list li ul {
	position: absolute;
	list-style: none;
	padding-left: 0px;
	display: none;
}

.tab-list li:hover ul{
	display: block;
	border: 1px solid black;
	border-radius: 4px;
}

.tab-list li ul li{
	border-top: 1px solid black;
}

.tab-list li ul li:first-child{
	border-top: none;
}

.tab-list li ul li a{
  border: none;
  margin: 0 0 0 1px;
	display: block;
	box-shadow: none;
	border-radius: 0px;
	padding: 2px 4px 2px 4px;
}

/* The max-width has to be adjusted
   depending on the width of the logo*/
@media (max-width: 1000px) {
	#header {
		justify-content: center;
	}
	.header_boxes {
		justify-content: center;
		margin-bottom: 10px !important;
	}
}