* {
	margin: 0;
	padding: 0;
}
html {
	height: 100%;
}
nav, section, article, aside, footer {
	display: block;
}
body {
	font-family:'Droid Serif', serif;
	font-weight:400;
	text-align:	justify;
	width: 100%;
	height: 100%;
    margin:0;
    color:#333;
}
h1 {
	color: #555 !important;
	font-size:1.5rem;
}
h2 {
	font-family: 'Quicksand', sans-serif;
	font-size:	1rem;
	color:		#555;
}
p {
	margin: 0 0 18px;
	font-family: 'Droid Serif', serif;
	font-weight:400;
	line-height: 150%;
}
a:link {
	color: #333;
}
a:hover {
	color: #08c;
}
a:visited {
	color: inherit;
}
select {
	border-color:transparent;
	font-size: 1rem;
	font-family:'Droid Serif', serif;
	font-weight:400;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
select:hover {
	color: #08c;
}

@font-face {
	font-family: 'brain_catalogue_icons';
	src: url('/img/braincatalogueicons.woff') format('woff');
}
.bcicon {
	font-family: 'brain_catalogue_icons';
}

/* Wrapper
-----------------------------------------------------------------------------*/
#wrapper {
	width:100%;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}

/* Header
-----------------------------------------------------------------------------*/
#header {
	display:table;
}
#header * {
	vertical-align:middle;
}
@media all and (min-width: 532px) {
	#header {
		width:calc(100% - 2rem);
		padding-left:1rem;
		padding-right:1rem;
		padding-top:1rem;
		padding-bottom:3rem;
	}
	#header #title h1 {
		font-size:2rem;
	}
	.myinner {
		width:calc(100% - 8rem);
	}
	.myinner {
		display:table-row;
	}
	.cell {
		display:table-cell;
		padding:0.2rem;
	}
}
@media not all and (min-width: 532px) {
	#header {
		width:calc(100% - 1rem);
		padding-top:0.5rem;
		padding-bottom:1rem;
		padding-left:0.5rem;
	}
	#header #title h1 {
		font-size:1.5rem;
	}
	.myinner {
		display:block;
	}
	.cell {
		display:block;
		padding:0.2rem;
	}
}

/* Title (Left)
-----------------------------------------------------------------------------*/
@media all and (min-width: 532px) {
	#title {
		height:2.5rem;
		text-align:left;
	}
	#name {
		text-align:left;
	}
}
@media not all and (min-width: 532px) {
	#title {
		height:2rem;
		text-align:center;
	}
	#name {
		text-align:center;
		margin-top:20px;
	}
}

/* Menu (Right)
-----------------------------------------------------------------------------*/
.menu {
	text-decoration:none;
	font-family: 'Quicksand', sans-serif;
	margin:0 0.3rem;
	outline:none;
}
a.menu, .menu a {
	border-bottom: 1px solid transparent;
	border-color: transparent;
}

.menu:hover {
	color: #08c !important;
}
#menu .menu:hover,
#menu .menu :hover {
	color: #08c !important;
	border-color: #aaa;
}
.menu:visited, .menu :visited {
	color: inherit;
}
@media all and (min-width: 532px) {
	#menu {
		text-align:right;
	}
}
@media not all and (min-width: 532px) {
	#menu {
		text-align:center;
		border-top:thin solid grey;
		border-bottom:thin solid grey;
	}
}

div#extra-menu {
	border:thin solid black;
}

/* Login
-----------------------------------------------------------------------------*/
#login {
	/*text-align:center;*/
	display:inline;
}
#login * {
	font-family: 'Quicksand', sans-serif;
	width:auto;
	display:inline;
	vertical-align:middle;
	text-decoration:none;
}
/*
#login .hidden {
	display:none !important;
}
*/
.loginbox {
	border:1px solid lightGrey;
	position:absolute;
	top:10px;
	left:-150px;
	background-color:white;
	padding:20px;
	max-width:80%;
	margin-left: 50%;
    width: 300px;
    line-height:20px;
	box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.5);
    z-index:20;
}
.loginbox * {
	color:black;
}
.loginbox #username,
.loginbox #e-mail,
.loginbox #password,
.loginbox #repassword,
.loginbox #registerLink,
.loginbox #remind,
.loginbox #warning {
	display:block;
}
.loginbox #username,
.loginbox #e-mail,
.loginbox #password,
.loginbox #repassword {
	width:90%;
}

/* Middle
-----------------------------------------------------------------------------*/
#middle {
	width: 100%;
	padding: 0 0 100px;
	height: 1%;
	position: relative;
}
#middle:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}
#middle p {
	font-size: 1rem;
}
#container {
	width: 100%;
	float: left;
	overflow: hidden;
}
#content {
	font-size: 1rem;
	line-height: 150%;
}
@media all and (max-width: 532px) {
	#content {
		margin: 0 5px;
		padding: 0 0 0 0px;
	}
}
@media all and (min-width: 533px) and (max-width: 847px) {
	#content {
		margin: 0 30px;
		padding: 0px;
	}
}
@media all and (min-width: 848px) {
	#content {
		margin: 0 50px;
		padding: 0 0 0 230px;
	}
}

#specimens {
	width:100%;
	height:100%;
}

/* Sidebar Left
-----------------------------------------------------------------------------*/
#sideLeft {
	width: 200px;
}
@media all and (max-width: 532px) {
	#sideLeft {
		margin-left: calc(50% - 100px);
	}
}
@media all and (min-width: 533px) and (max-width: 847px) {
	#sideLeft {
		float: left;
		margin-left: 0px;
		padding-right:20px;
	}
}
@media all and (min-width: 848px) {
	#sideLeft {
		float: left;
		margin-left: -230px;
	}
}

/* Footer
-----------------------------------------------------------------------------*/
#footer {
	font-weight: 100;
	font-size: 0.8rem;
	width: 100%;
	position: relative;
	margin: -100px 0px 0;
	height: 100px;
	text-align:	right;
	color: white;
	background-color:black;
}
#footer img {
	border:1px solid white;
	margin: 10px;
}
#footer div {
	padding:20px;
}
#footer a {
	color: white;
}