/*------------------------------------------------------------------
Project:	Mosaic
Version:	1.2
Created: 		20/01/2014
Last change:	27/02/2014
-------------------------------------------------------------------*/

/* ===== Helper Classes ===== */

.primary-font {
	font-family: 'Roboto', sans-serif;
}
.first-child {
	margin-top: 0 !important;
}
@media (max-width: 767px) {
	.first-child-m {
		margin-top: 20px;
	}
}
.delay-1 {
	animation-delay: 0.3s;
	-webkit-animation-delay: 0.3s;
}
.delay-2 {
	animation-delay: 0.6s;
	-webkit-animation-delay: 0.6s;
}
.delay-3 {
	animation-delay: 1s;
	-webkit-animation-delay: 1s;
}
.tab-1 {
	margin-right: 15px;
}
.tab-2 {
	margin-right: 30px;
}
.tab-3 {
	margin-right: 45px;
}
.tab-3 {
	margin-right: 60px;
}
hr.arrow-down {
	margin-top: 40px;
	margin-bottom: 40px;
	position: relative;
}
hr.arrow-down:after {
	content:url(../img/arrow.png);
	position: absolute;
	left: 50%;
	margin-left: -10px;
	top: -5px;
}


/* ===== Buttons ===== */

.btn {
	border-radius: 3px;
}

/* ===== Headlines ===== */

.headline {
	padding-bottom: 1px;
	border-bottom: 1px solid #eee;
	margin-bottom: 30px;
	line-height: 50px;
}
.headline span {
	padding-bottom: 4px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}
h3.headline span {
	padding-bottom: 8px;
}

/* ===== Breadcrumbs ===== */

.topic {
	margin-top: -20px;
	margin-bottom: 40px;
	border-bottom: 1px solid #eee;
}
.topic h3 {
	display: inline-block;
	padding: 20px 0 20px;
	margin: 0 0 -1px 0;
	font-size: 20px;
}
.topic .breadcrumb {
	margin-bottom: 0;
	padding: 21px 0;
	background: transparent;
}

/* ===== Responsive Video =====*/

.flex-video {
	position: relative;
	padding-top: 25px;
	padding-bottom: 67.5%;
	height: 0;
	margin-bottom: 16px;
	overflow: hidden;
}
 
.flex-video.widescreen { padding-bottom: 57.25%; }
.flex-video.vimeo { padding-top: 0; }
 
.flex-video iframe,
.flex-video object,
.flex-video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
	.flex-video { padding-top: 0; }
}

/* ===== Pagination ===== */

.body-green .pagination > .active > a,
.body-green .pagination > .active > span,
.body-green .pagination > .active > a:hover,
.body-green .pagination > .active > span:hover,
.body-green .pagination > .active > a:focus,
.body-green .pagination > .active > span:focus {
	background-color: #94BA65;
	border-color: #94BA65;
}
.body-blue .pagination > .active > a,
.body-blue .pagination > .active > span,
.body-blue .pagination > .active > a:hover,
.body-blue .pagination > .active > span:hover,
.body-blue .pagination > .active > a:focus,
.body-blue .pagination > .active > span:focus {
	background-color: #2790B0;
	border-color: #2790B0;
}
.body-red .pagination > .active > a,
.body-red .pagination > .active > span,
.body-red .pagination > .active > a:hover,
.body-red .pagination > .active > span:hover,
.body-red .pagination > .active > a:focus,
.body-red .pagination > .active > span:focus {
	background-color: #E35E54;
	border-color: #E35E54;
}
.body-orange .pagination > .active > a,
.body-orange .pagination > .active > span,
.body-orange .pagination > .active > a:hover,
.body-orange .pagination > .active > span:hover,
.body-orange .pagination > .active > a:focus,
.body-orange .pagination > .active > span:focus {
	background-color: #D26C22;
	border-color: #D26C22;
}
.pagination > li > a,
.pagination > li > span {
	color: #999;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
	color: #666;
}

/* ===== Panels ===== */

/* 1. Panel Green */

.panel-green {
	border-color: #94BA65;
}
.panel-green > .panel-heading {
	color: #fff;
	background-color: #94BA65;
	border-color: #94BA65;
}
.panel-green > .panel-heading + .panel-collapse .panel-body {
	border-top-color: #94BA65;
}
.panel-green > .panel-footer + .panel-collapse .panel-body {
	border-bottom-color: #94BA65;
}
.panel-green > .panel-footer {
	background-color: #94BA65;
	border-top: 1px solid #94BA65;
}

/* 2. Panel Blue */

.panel-blue {
	border-color: #2790B0;
}
.panel-blue > .panel-heading {
	color: #fff;
	background-color: #2790B0;
	border-color: #2790B0;
}
.panel-blue > .panel-heading + .panel-collapse .panel-body {
	border-top-color: #2790B0;
}
.panel-blue > .panel-footer + .panel-collapse .panel-body {
	border-bottom-color: #2790B0;
}
.panel-blue > .panel-footer {
	background-color: #2790B0;
	border-top: 1px solid #2790B0;
}

/* 3. Panel Red */

.panel-red {
	border-color: #E35E54;
}
.panel-red > .panel-heading {
	color: #fff;
	background-color: #E35E54;
	border-color: #E35E54;
}
.panel-red > .panel-heading + .panel-collapse .panel-body {
	border-top-color: #E35E54;
}
.panel-red > .panel-footer + .panel-collapse .panel-body {
	border-bottom-color: #E35E54;
}
.panel-red > .panel-footer {
	background-color: #E35E54;
	border-top: 1px solid #E35E54;
}

/* 4. Panel Orange */

.panel-orange {
	border-color: #D26C22;
}
.panel-orange > .panel-heading {
	color: #fff;
	background-color: #D26C22;
	border-color: #D26C22;
}
.panel-orange > .panel-heading + .panel-collapse .panel-body {
	border-top-color: #D26C22;
}
.panel-orange > .panel-footer + .panel-collapse .panel-body {
	border-bottom-color: #D26C22;
}
.panel-orange > .panel-footer {
	background-color: #D26C22;
	border-top: 1px solid #D26C22;
}

/* ===== Info Boards ==== */

.info-board {
	margin: 20px 0;
	padding: 15px 30px 15px 15px;
	border-left: 5px solid #eee;
}
.info-board h4 {
	margin-top: 0;
	font-family: 'Roboto', sans-serif;
}
.info-board p:last-child {
	margin-bottom: 0;
}

/* 1. Info board green */

.info-board-green {
	background-color: #F5F9F1;
	border-color: #94BA65;
}

/* 2. Info board blue */

.info-board-blue {
	background-color: #EEF8FB;
	border-color: #2790B0;
}

/* 3. Info board orange */

.info-board-orange {
	background-color: #FCF4ED;
	border-color: #D26C22;
}

/* 4. Info board red */

.info-board-red {
	background-color: #FCEEED;
	border-color: #E35E54;
}

/* ===== Navs ===== */

/* 1. Nav tabs */

.nav-tabs {
	margin-bottom: 15px;
}
.nav-tabs > li > a {
	border-bottom: 1px solid #dedede;
	border-radius: 0;
	background: #fff;
	color: #999;
	-webkit-transition: color 200ms;
			transition: color 200ms;
}
.nav-tabs > li > a:hover, .nav > li > a:focus {
	text-decoration: none;
	background-color: #fff;
	border-color: #fff #fff #dedede;
	color: #515151;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
	color: #515151;
	cursor: default;
	background-color: #fff;
	border: 1px solid transparent;
}
.body-green .nav-tabs > li.active > a,
.body-green .nav-tabs > li.active > a:hover,
.body-green .nav-tabs > li.active > a:focus {
	border-bottom-color: #94BA65;
}
.body-blue .nav-tabs > li.active > a,
.body-blue .nav-tabs > li.active > a:hover,
.body-blue .nav-tabs > li.active > a:focus {
	border-bottom-color: #2790B0;
}
.body-orange .nav-tabs > li.active > a,
.body-orange .nav-tabs > li.active > a:hover,
.body-orange .nav-tabs > li.active > a:focus {
	border-bottom-color: #D26C22;
}
.body-red .nav-tabs > li.active > a,
.body-red .nav-tabs > li.active > a:hover,
.body-red .nav-tabs > li.active > a:focus {
	border-bottom-color: #E35E54;
}
.nav-tabs.nav-justified > li > a {
	margin-right: 0;
	border-radius: 0;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:focus {
	border: 1px solid transparent;
	border
}

/* 2. Nav pills */

.nav-pills {
	margin-bottom: 15px;
}
.nav-pills > li > a {
	color: #515151;
	-webkit-transition: background-color 200ms;
			transition: background-color 200ms;
}
.nav-pills > li > a {
	background-color: #f5f5f5;
}
.body-green .nav-pills > li.active > a, 
.body-green .nav-pills > li.active > a:hover,
.body-green .nav-pills > li.active > a:focus {
	background-color: #94BA65;
}
.body-blue .nav-pills > li.active > a, 
.body-blue .nav-pills > li.active > a:hover,
.body-blue .nav-pills > li.active > a:focus {
	background-color: #2790B0;
}
.body-orange .nav-pills > li.active > a, 
.body-orange .nav-pills > li.active > a:hover,
.body-orange .nav-pills > li.active > a:focus {
	background-color: #D26C22;
}
.body-red .nav-pills > li.active > a, 
.body-red .nav-pills > li.active > a:hover,
.body-red .nav-pills > li.active > a:focus {
	background-color: #E35E54;
}
.nav.nav-pills > li > a:hover, .nav > li > a:focus {
	text-decoration: none;
	background-color: #f0f0f0;
}
.nav-pills-green > li.active > a,
.nav-pills-green > li.active > a:hover,
.nav-pills-green > li.active > a:focus {
	background-color: #94BA65 !important;
}
.nav-pills-blue > li.active > a,
.nav-pills-blue > li.active > a:hover,
.nav-pills-blue > li.active > a:focus {
	background-color: #2790B0 !important; 
}
.nav-pills-red > li.active > a,
.nav-pills-red > li.active > a:hover,
.nav-pills-red > li.active > a:focus {
	background-color: #E35E54 !important;
}
.nav-pills-orange > li.active > a,
.nav-pills-orange > li.active > a:hover,
.nav-pills-orange > li.active > a:focus {
	background-color: #D26C22 !important;
}

/* ===== Sidebar ===== */
.bs-sidebar {
	margin-bottom: 50px;
}
.bs-sidebar.affix {
	position: static;
}

/* Show and affix the side nav for ui elements when space allows it */
@media (min-width: 992px) {
	.bs-sidebar .nav > .active > ul {
		display: block;
	}
	/* Widen the fixed sidebar */
	.bs-sidebar.affix,
	.bs-sidebar.affix-bottom {
		width: 213px;
	}
	.bs-sidebar.affix {
		position: fixed; /* Undo the static from mobile first approach */
		top: 110px;
	}
	.bs-sidebar.affix-bottom {
		position: absolute; /* Undo the static from mobile first approach */
	}
}
@media (min-width: 1200px) {
	/* Widen the fixed sidebar again */
	.bs-sidebar.affix-bottom,
	.bs-sidebar.affix {
		width: 220px;
	}
}