body {
	padding: 60px 0 30px 0;
	overflow: hidden;
	font-family: Helvetica,Arial,sans-serif;
	font-size: 13px;
}

body.login-page {background: #fff; padding: 0;}

h1, h2, h3, h4, h5, h6 {}

h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}

.navbar {
	top: 0;
	position: fixed;
	padding: 0 30px;
	z-index: 3333;
	border: 1px solid #ccc;
}
.navbar-default {
	background: #fff;
	color: #333;
}
.navbar-brand {
	padding: 0px;
	width: 400px;
	height: 80px;
}
.navbar-brand img {height: 60px; margin-top: -5px;}
.navbar h3, .navbar h5 {text-align: left; padding-left: 13px;}
.navbar h3 {color: #003c70!important; margin-top: 14px;}
.navbar h5 {color: #5e5e5e!important;}

.navbar-default .navbar-nav>li>a {line-height: 50px; font-size: 120%;}
.navbar-default .navbar-nav>li>a {color: #003c70;}
.navbar-default .navbar-nav>li>a:hover, .navbar-nav>li>a:active {color: #8996A0;}
.navbar-default .navbar-nav li:first-child {padding-left: 0;}

.logo {font-size: 24px; font-weight: bold; text-align: center;}

#legend {
	position: fixed;
	z-index: 1111;
	right: 0;
	bottom: 41px;
	width: 400px;
	height: calc(100% - 121px); 
	max-height: calc(100% - 121px);  
	overflow-y: scroll;
	background: #eef0f2;
	-webkit-transition: transform .3s ease;
    -moz-transition: transform .3s ease;
    -o-transition: transform .3s ease;
    -ms-transition: transform .3s ease;
	transition: transform .3s ease;
	-webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}
body.legend-is-closed #legend {
	-webkit-transform: translateX(400px);
    -moz-transform: translateX(400px);
    -o-transform: translateX(400px);
    -ms-transform: translateX(400px);
    transform: translateX(400px);
}
button.toggle-legend {
	position: fixed;
	width: 30px;
	height: 60px;
	background: #f1f1f1;
	top: 150px;
	right: 0;
	z-index: 1111;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	border: none;
	-webkit-transition: transform .3s ease;
    -moz-transition: transform .3s ease;
    -o-transition: transform .3s ease;
    -ms-transition: transform .3s ease;
	transition: transform .3s ease;
	-webkit-transform: translateX(-400px);
    -moz-transform: translateX(-400px);
    -o-transform: translateX(-400px);
    -ms-transform: translateX(-400px);
    transform: translateX(-400px);
	border: solid 1px rgba(0,0,0, 0.2);
	border-right: none;

}
button.toggle-legend:focus {
	outline: none;
}
button.toggle-legend  span.icon img {
	margin-top: 6px;
	width: 16px;
	height: 16px;
}
button.toggle-legend  span.caret{
	 -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
body.legend-is-closed button.toggle-legend {
	-webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}
body.legend-is-closed button.toggle-legend  span.caret{
	-webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.comment-form {
	padding: 20px;
}
.comment-form label {
	display: block;
}
.comment-form input,
.comment-form select,
.comment-form textarea {
	width: 100%;
}
.comment-form textarea {
	min-height: 140px;
}
.comment-form input[type="submit"] {
	width: auto;
}

#sidebar {
	-webkit-overflow-scrolling: touch;
	position: fixed;
	left: 0;
	top: 81px;
	width: 400px;
	padding: 0 30px 30px 30px; 
	height: calc(100% - 121px); 
	max-height: calc(100% - 121px);  
	z-index: 2222;
	overflow: auto;
	-webkit-transition: transform .3s ease;
    -moz-transition: transform .3s ease;
    -o-transition: transform .3s ease;
    -ms-transition: transform .3s ease;
	transition: transform .3s ease;
	padding-bottom: 100px;
	background: #eef0f2;
	color: #8996A0;
}
#sidebar h4:nth-child(1) {
	background: #8996A0;
	color: #fff;
	padding: 20px 30px 20px 30px;
	margin: 0 -30px 20px -30px;
}
#sidebar b {
	color: #8996A0;
	font-size: 120%;
	margin-bottom: 10px;
}
#sidebar p {margin: 0 0 20px;}

button.toggle-sidebar {
	position: fixed;
	width: 30px;
	height: 60px;
	background: #f1f1f1;
	top: 150px;
	left: 400px;
	z-index: 1111;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	border: none;
	-webkit-transition: transform .3s ease;
    -moz-transition: transform .3s ease;
    -o-transition: transform .3s ease;
    -ms-transition: transform .3s ease;
	transition: transform .3s ease;
	border: solid 1px rgba(0,0,0, 0.2);
	border-left: none;
}
button.toggle-sidebar:focus {
	outline: none;
}
button.toggle-sidebar  span.caret{
	 -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
body.sidebar-is-open button.toggle-sidebar  span.caret{
	-webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
#main {
	height: calc(100% - 121px);
	overflow: hidden;
	position: fixed;
	top: 81px;
	left: 400px;
	width: calc(100% - 400px);
}
#footer {
	background: #b6bec4;
	color: #fff;
	padding: 10px 0 0 0; 
	text-align: center;
	height: 40px;
	position: fixed;
	bottom: 0;
	width: 100%;
}

[data-toggle="collapse"]{
	cursor: pointer;
}

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; 
 }

 b[klap-open]{
	 display:block;
 }

 [aria-expanded="true"] .rotate180 {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

body.sidebar-is-open #sidebar,
body.sidebar-is-open button.toggle-sidebar {
	-webkit-transform: translateX(-400px);
    -moz-transform: translateX(-400px);
    -o-transform: translateX(-400px);
    -ms-transform: translateX(-400px);
    transform: translateX(-400px);
}

body.sidebar-is-open #main {
	left: 0;
	width: 100%;
}

#footer a, #footer a:visited {text-decoration: none; color: #fff;}
#footer a:hover {text-decoration: underline;}

body.login-page h5 {font-weight: bold; color: #2d356e}
#login-header {padding:20px; background: #8996A0;}
#login-header h4, #login-header h3 {color: #fff;}
#login-introtext {padding: 20px; background: #8996A0; color: #fff;}
#login-introtext input {color: #333; padding: 0 10px;}
#login-image {}
#login-image .col-xs-12 {padding: 0; margin: 0;}
#login-logorow {padding: 20px; background: #fff;}
#login-logorow img {padding-right: 20px;}
#login-bro-logo {background: #8996A0; padding: 20px;}
#login-disclaimer {background: #fff; color: #8996A0; padding: 6px; font-size: 11px;}
#login-disclaimer p {margin: 0;}

.success-message {
	color: green;
	margin-top: 10px;
}
.error-message {
	color: red;
	margin-top: 10px;
}
.hide {
	display: none;
}

input[type="submit"]:disabled {
	opacity: .5;
}

ul.nav.nav-tabs {
	background: #ddd;
}

ul.nav-tabs>li.active>a {
	background-color: #efefef;
}