/* reset all margins and set font to whole website */
body {
	font-family: 'Roboto', sans-serif;
	margin: 0 auto;
	padding: 0;
}

/* edit links */
a {
	text-decoration: none;
	color: none;
}

a:focus { 
    outline: none; 
}

input:focus, textarea:focus, select:focus {
	outline: 0;
}

/* ----- Menu ----- */
/* covers whole width of top bar */
#menu {
	width: 100%;
	background-color: rgb(32,30,27);
	height: 55px;
	border-bottom: 1px solid rgba(64,60,54,0.5);
	box-shadow: 1px 1px 2px rgba(32,30,27,0.4);
	position: fixed;
	z-index: 50;
}

/* wrap around menu items which is centered */
.menuWrap {
	width: 1200px;
	margin: 0 auto;
	height: 50px;
}

/* menu items */
#menu .menuWrap span {
	width: 189px;
	border-right: 1px solid rgba(60,60,60,0.4);
	text-align: center;
	color: rgb(250,206,149);
	font-size: 20px;
	font-weight: 300;
	line-height: 46px;
	padding: 0 5px;
	margin: 5px 0;
	float: left;
	cursor: pointer;
	transition: 0.2s all;
	-moz-transition: 0.2s all;
	-o-transition: 0.2s all;
	-webkit-transition: 0.2s all;
}

/* mouse over effect of menu items */
#menu .menuWrap span:hover {
	color: rgb(255,156,0);
	transition: 0.2s all;
	-moz-transition: 0.2s all;
	-o-transition: 0.2s all;
	-webkit-transition: 0.2s all;
}

/* last item has no right border */
#menu span:last-of-type {
	border-right: 0;
}

/* clicked item is bold */
#menu .active {
	font-weight: 700 !important;
	color: rgb(255,137,0) !important;
	border-bottom: 5px solid rgb(255,137,0);
}

/* settings button in right top conrer of screen */
#menu .settings {
	width: 35px;
	height: 35px;
	background-image: url('/img/settings.png');
	background-size: 30px, 30px;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	top: 10px;
	right: 15px;
	opacity: 0.8;
	cursor: pointer;
	z-index: 40;
	transition: 0.2s all;
	-moz-transition: 0.2s all;
	-o-transition: 0.2s all;
	-webkit-transition: 0.2s all;
	-webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

/* settings button mouse over effect */
#menu .settings:hover {
	transition: 0.2s all;
	-moz-transition: 0.2s all;
	-o-transition: 0.2s all;
	-webkit-transition: 0.2s all;
	-webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
}

/* small menu of settingsButton */
#menu .settingsMenu {
	position: absolute;
	z-index: 30;
	top: 0;
	right: 0;
	width: 140px;
	padding: 65px 10px 20px 0;
	background-color: rgb(32,30,27);
	border-bottom-left-radius: 10px;
	border-bottom: 1px solid rgba(64,60,54,0.5);
	box-shadow: 1px 1px 2px rgba(32,30,27,0.4);
	text-align: right;
	overflow: hidden;
	display: none;
}

/* settingsMenu's items */
#menu .settingsMenu span {
	padding: 5px 0 !important;
	color: rgb(192,192,192);
	cursor: pointer;
	transition: 0.2s all;
	-moz-transition: 0.2s all;
	-o-transition: 0.2s all;
	-webkit-transition: 0.2s all;
	line-height: 25px;
}

/* mouse over on items */
#menu .settingsMenu span:hover {
	color: rgb(255,255,255);
	transition: 0.2s all;
	-moz-transition: 0.2s all;
	-o-transition: 0.2s all;
	-webkit-transition: 0.2s all;
}

/* Content of page (centrering content and padding top because of menu) */
#content {
	margin: 0 auto;
	padding-top: 55px;
	max-width: 1400px;
	min-width: 1000px;
}

/* if page has to be splited into two contents */
#content .contentSplit {
	float: left;
	width: 40%;
	margin-top: 40px;
	padding: 10px calc(4% - 1px) 0 calc(6% - 1px);
	border-right: 1px solid rgba(30,30,30,0.2);
}