common.less

// Bootstrap Import
// ================

// CSS Reset
@import "../../../bootstrap/less/reset.less";

// Core variables and mixins
@import "../../../bootstrap/less/variables.less"; // Modify this for custom colors, font-sizes, etc
@import "../../../bootstrap/less/mixins.less";

// Grid system and page structure
@import "../../../bootstrap/less/scaffolding.less";
@import "../../../bootstrap/less/grid.less";
@import "../../../bootstrap/less/layouts.less";

// Base CSS
@import "../../../bootstrap/less/type.less";
@import "../../../bootstrap/less/code.less";
@import "../../../bootstrap/less/forms.less";
@import "../../../bootstrap/less/tables.less";

// Components: common
// @import "../../../bootstrap/less/sprites.less";
@import "../../../bootstrap/less/dropdowns.less";
@import "../../../bootstrap/less/wells.less";
@import "../../../bootstrap/less/component-animations.less";
@import "../../../bootstrap/less/close.less";

// Components: Buttons & Alerts
@import "../../../bootstrap/less/buttons.less";
@import "../../../bootstrap/less/button-groups.less";
@import "../../../bootstrap/less/alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less

// Components: Nav
@import "../../../bootstrap/less/navs.less";
@import "../../../bootstrap/less/navbar.less";
@import "../../../bootstrap/less/breadcrumbs.less";
@import "../../../bootstrap/less/pagination.less";
@import "../../../bootstrap/less/pager.less";

// Components: Popovers
@import "../../../bootstrap/less/modals.less";
@import "../../../bootstrap/less/tooltip.less";
@import "../../../bootstrap/less/popovers.less";

// Components: Misc
@import "../../../bootstrap/less/thumbnails.less";
@import "../../../bootstrap/less/labels-badges.less";
@import "../../../bootstrap/less/progress-bars.less";
@import "../../../bootstrap/less/accordion.less";
@import "../../../bootstrap/less/carousel.less";
@import "../../../bootstrap/less/hero-unit.less";

// Utility classes
@import "../../../bootstrap/less/utilities.less"; // Has to be last to override when necessary

// Custom Responsive
@import "../../../bootstrap/less/variables.less";
@import "../../../bootstrap/less/mixins.less";
@import "../../../bootstrap/less/responsive-utilities.less";
@import "../../../bootstrap/less/responsive-767px-max.less";
@import "../../../bootstrap/less/responsive-768px-979px.less";
// @import "../../../bootstrap/less/responsive-1200px-min.less";
@import "../../../bootstrap/less/responsive-navbar.less";


// Custom Icons & Fonts
// ====================

@import 'pictos.less';
@import 'webfonts.less';

// variables

@base: 10px;
@body-text-height: 16px;
@color-accent: #d83629; // Logo/Accent/Link Color (Red/Orange)
@color-body-text: #303030;
@color-grey-accent: #eeeeee;
@color-mast: #9fc9d4; // Mast Color (Aqua)
@color-white: #fff;
@color-red: #d83629;
@icons: "PictosRegular", sans-serif;

// responsimage

@media (-webkit-min-device-pixel-ratio: 2) {

	[data-responsimage] {
		font-family: 'pixel-ratio-2'
	}
}

// less modules & defaults

#font {

	#proxima {

		.regular() {
			font-family: "proxima-nova-regular", "Helvetica Neue", Arial, Helvetica, sans-serif;
			font-style: normal;
			font-weight: normal;
		}

		.bold() {
			font-family: "proxima-nova-bold", "Helvetica Neue", Arial, Helvetica, sans-serif;
			font-style: normal;
			font-weight: normal;
		}
	}

	#tisa {

		.regular() {
			font-family: "ff-tisa-web-pro-regular", Georgia, 'Times New Roman', Times, serif;
			font-style: normal;
			font-weight: normal;
		}

		.italic() {
			font-family: "ff-tisa-web-pro-italic", Georgia, 'Times New Roman', Times, serif;
			font-style: normal;
			font-weight: normal;
		}

		.bold() {
			font-family: "ff-tisa-web-pro-bold", Georgia, 'Times New Roman', Times, serif;
			font-style: normal;
			font-weight: normal;
		}
	}

	#climacons {
		font-family:'ClimaconsRegular';
		font-weight: normal;
		font-style: normal;
		text-transform: none !important;
	}
}

#link {

	.large {
		.small-grey-text;
		#font > #proxima > .bold;
		display: inline;
		color: #fff;
		background: @color-mast;
		padding: 12px 14px;

		&:hover {
			color: #fff;
			background: darken(@color-mast, 10%);
		}
	}
}

.entry-defaults {
	background: #fff;
	margin: @base 0 @base * 3 0;
	position: relative;
}

.edit-defaults {
	position: absolute;
	border: none !important;
	background: none;
	z-index: 10000;
	padding: 0;
	margin: 0;
	.opacity(50);
}

// styles

.small-grey-text {
	#font > #proxima > .regular;
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	margin: 10px 0;
	color: #999;
}

.small-serif-header {
	#font > #tisa > .regular;
	margin: @base * 4 0;
	color: @color-body-text;
	font-size: 16px;
	text-align: center;
	border: none;
}

.body-text-sans {
	#font > #proxima > .regular;
	color: #303030;
	line-height: 22px;
	font-size: 14px;
}

.body-text-serif {
	#font > #tisa > .regular;
	font-size: @body-text-height;
	line-height: 1.7;
	color: #303030;
	margin-bottom: 20px;
}

// bootstrap overrides

[class^="icon-"] {
	background-image: none;
}

.icon-white {
	background-image: none;
}

.column-full-width,
.column-center,
.column-right {

	.description,
	p,
	blockquote,
	ul,
	li {
		.body-text-serif;
	}
}

p {
	strong {
		#font > #tisa > .bold;
		font-weight: normal;
	}
}

.nav-tabs {

	&.nav-stacked {

		> li {

			> a {
				border: none;
			}
		}
	}
}

.mast {

	.nav-pills {
		margin-right: 5px;

		> li {

			> a {
				padding: @base * .5 0;
				margin: 0 0 0 @base * 2.5;
				.border-radius(0);
			}
		}

		.active {

			* {
				background: none !important;
			}
		}
	}
}

.navbar {

	.divider-vertical {
		background: transparent;
		border-right: 1px solid darken(desaturate(@color-mast, 20%), 15%);
		height: 20px;
		margin: 10px 5px 5px 5px;
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	#font > #proxima > .bold;
}

em {
	#font > #tisa > .italic;
}

// tags

a {
	color: @color-accent;
	text-decoration: none;

	&:hover {
		color: darken(@color-accent, 15%);
		text-decoration: none;
	}
}

blockquote {

	h3 {
		text-transform: none;
		font-weight: normal;
	}
}

body {
	#font > #proxima > .regular;
	background-image: none;
	background: #fdfdfd;
	color: #303030;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
}

form,
input {
	margin: 0;
	padding: 0;
}

h1 {
	font-size: 64px;
	line-height: 1.2;
	text-align: center;
	width: 80%;
	margin: @base * 3 auto;
}

h2 {
	font-size: 28px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

h3 {
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.main-container {

	ul {

		li {
			margin: 0;
		}
	}
}

// classes

.red {
	color: @color-accent;
}

.icon {
	font-family: @icons;
	font-weight: normal;
	font-style: normal;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
	position: relative;
	font-size: 20px;
	margin-right: 7px;
	top: 1px;

	&.big {
		font-size: 28px;
	}
}


.climacon {
	#font > #climacons;
	position: relative;
	font-size: 20px;
	margin-right: 7px;
	top: 1px;
	-webkit-font-smoothing: antialiased;
}

.badge {
	#font > #proxima > .bold;
	text-transform: uppercase;
	padding: 4px 6px 3px 6px;
	margin-right: 5px;
}

.divider {
	margin: 0 10px;
}

.share {
	border-top: 1px solid #e9e9e9;
	margin-top: 15px;
	padding-top: @base;

	label,
	input {
		display: inline;
	}

	label {
		#font > #proxima > .bold;
		color: #ccc;
		text-transform: uppercase;
		margin-right: 10px;
	}

	input {
		#font > #proxima > .regular;
		display: inline;
		font-size: 14px;
		padding: 5px;

		&.span4 {
			margin-top: @base;
		}
	}
}

.mast {
	background: @color-mast;
	padding: 7px 0 @base * 1.5 0;
	margin: @base * 3 0 @base * 3 0;

	.container {

		.row {
			margin-left: 0;

			.span12 {
				margin-left: 0;

				.logo {
					position: relative;
					top: @base * 4.5;
					float: left;
					z-index: 1000;
					height: 120px;
					width: 120px;

					.icon {
						z-index: 30;
						font-size: 140px;
					}

					.white {
						color: #fff;
						position: absolute;
						top: 0;
						left: 0;
						z-index: 20;
					}

					&:hover {
						color: darken(@color-accent, 5%);
					}
				}

				.main {
					#font > #proxima > .regular;
					float: right;
					position: relative;
					display: block;
					text-transform: uppercase;
					font-size: 18px;
					margin-top: 47px;
					padding-right:  0;
					margin-right: 0;
					letter-spacing: 1px;
					z-index: 10;

					li {
						margin-right: 10px;
						display: inline;

						&.active {

							a {
								background: none;
								color: @color-accent;

								&:hover {
									color: darken(@color-accent, 10%);
								}
							}
						}

						&.last {
							margin-right: 0;

							a {
								margin-right: 0;
							}
						}

						a {
							display: inline;
							color: #ffffff;

							&:hover {
								background: none;
								color: darken(@color-mast, 35%);
							}
						}
					}
				}
			}
		}
	}

	.row {
		margin: @base * 4 auto @base auto;

		.span8 {
			margin-left: 0;

			h2 {
				color: #fff;
				margin-top: 0;
				margin-bottom: @base * 2;
			}

			p {
				.body-text-serif;
				width: 95%;
				color: #fff;
			}
		}

		.span4 {
			background: darken(desaturate(@color-mast, 10%), 5%);

			.link-bar {
				position: relative;
				top: -3px;
				font-size: 14px;
				#font > #proxima > .bold;
				color: #fff;
				margin:0;
				padding: @base 0;
				text-align: center;
				background: darken(desaturate(@color-mast, 25%), 25%);

				a {
					.small-grey-text;

					#font > #proxima > .bold;
					display: inline;
					color: #fff;
					padding: 0 5px;

					&:hover {
						color: darken(desaturate(@color-mast, 20%), 55%);
					}
				}
			}

			blockquote {
				border: none;
				padding: 13px 15px 0 15px;

				.body-text-serif;

				#font > #tisa > .italic;
				margin-bottom: 0;
			}

			cite {
				.small-grey-text;
				color: #fff;
				display: block;
				margin-top: @base;
				padding: 0 15px 5px 15px;

				.verse {
					color: @color-accent;
				}
			}
		}
	}
}

.modalLive {
	width: 630px !important;
}

.alert {
	#font > #tisa > .regular;
	margin: @base * 3 0;
	.box-shadow(0px 1px 3px rgba(0,0,0,0.2));


	&.alertLive {
		margin-top: @base * 3;
	}

	p {
		margin: 0;
		padding: @base * 0.5 0;
	}

	span {
		#font > #proxima > .bold;
		text-transform: uppercase;
	}

	strong {
		#font > #proxima > .bold;
		text-transform: uppercase;
	}

	.btn {
		#font > #proxima > .regular;
		text-transform: uppercase;
		margin-top: 1px;
	}
}

.navbar {

	&.navbar-fixed-top {
		position: absolute;
	}

	.navbar-inner {
		.box-shadow(none);

		#font > #proxima > .bold;
		background: darken(desaturate(@color-mast, 10%), 5%);
		filter: none;
		text-transform: uppercase;
		letter-spacing: 1px;
		font-size: 12px;

		ul.nav {

			li {

				&.last {

					a {
						padding-right: 0;
					}
				}

				a {
					color: darken(desaturate(@color-mast, 20%), 20%);
					text-shadow: none;

					&:hover {
						color: #fff;
					}
				}
			}
		}
	}

	.btn-navbar {
		.border-radius(0%);

		background: darken(desaturate(@color-mast, 10%), 20%);
		background-image: none;
		filter: none;
		border: none;

		&:hover {
			background: darken(desaturate(@color-mast, 10%), 40%);
		}
	}
}

.link-large {
	#link > .large;

	.icon {
		color: darken(@color-mast, 40%);
	}
}

.edit-tag {
	.edit-defaults;
	top: @base;
	right: @base;
}

.edit {
	color: #303030 !important;

	.icon {
		font-size: 16px;
		margin-right: 0;
		top: 0;
	}
}

.subnav {
	background: #fdfdfd;
	border: none;
	text-transform: uppercase;
	font-size: 12px;
	line-height: 18px;

	&.subnav-fixed {
		top: 0;
	}

	.nav {
		margin-bottom: 0;
	}

	ul {
		text-align: center;
		border-bottom: 1px solid #ddd;
	}

	li {
		float: none;
		display: inline;

		&.active {

			a {
				color: @color-accent;
				background-image: none;
				background: none;
				.box-shadow(none);

				&:hover {
					background: none;
					color: darken(@color-accent, 10%);
				}
			}
		}

		a {
			padding: 15px 0;
			margin: 0 10px;
			display: inline-block;
			color: #303030;
			font-size: 12px;
			line-height: 18px;
			font-weight: normal;

			&:hover {
				background: none;
				color: darken(desaturate(@color-mast, 10%), 20%);
			}
		}
	}
}

.masthead {
	position: relative;
	top: -30px;
	margin-bottom: 0;
}

.jumbotron {

	h1 {
		display: none;
	}
}

.column-right {

	.more {
		#font > #proxima > .bold;
		position: relative;
		display: block;
		background: darken(@color-grey-accent, 33.5%);
		font-size: 12px;
		letter-spacing: 1px;
		text-transform: uppercase;
		color: #fff !important;
		line-height: @base * 5;
		padding: 0;

		span {
			padding-left: @base * 1.5;
		}

		&:hover {
			background: darken(@color-grey-accent, 40%);
			text-decoration: none;
		}
	}
}

.to-top {
	#font > #proxima > .regular;
	font-size: 12px;
	text-transform: uppercase;
	margin: @base * 4 0 @base * 2 0;

	a {
		color: #999;
		background: #f3f3f0;
		display: block;
		padding: 4px 6px;

		&:hover {
			background: #f5f5f5;
			color: #777;
			text-decoration: none;
		}

		.icon {
			position: relative;
			top: -1px;
			left: px;
			font-size: 12px;
		}
	}
}

.normal {
	text-transform: none;
}

.footer {
	background: #D6D6D6;
	position: absolute;
	margin: 60px 0 80px 0;
	left: 0;
	width: 100%;

	a {
		color: #333;

		&:hover {
			color: @color-accent;
		}

		&.btn.btn-primary.give {
			position: relative;
			left: -10px;
			top: -15px;
			background-image: none;
			background: none;
			color: #CF1E18;
			-webkit-box-shadow: none;
			-moz-box-shadow: none;
			box-shadow: none;
			border: none;
			text-transform: uppercase;
			text-shadow: none;
		}
	}

	address,
	p {
		color: inherit;
		font-family: inherit;
		font-size: inherit;
		line-height: inherit;
		margin: 15px 0;
	}

	h4 {
		font-size: 11px;
		line-height: 18px;
		text-transform: uppercase;
	}

	.footer-nav {
		margin-top: @base * 2.5;
		margin-bottom: @base;

		* {
			font-size: 13px;
			background: none !important;
		}

		.nav-header {
			#font > #proxima > .bold;
			margin: 0;
			padding: 0;
		}

		.nav-list {

			> li {
				margin: @base * .5 0;

				> a {
					padding: 0;

					&:hover {
						background: none;
					}
				}
			}

			> .active {

				> a {
					color: @color-red;
					text-shadow: 0 1px 0 rgba(255,255,255,0.5);
				}
			}
		}
	}

	.twitter {
		background: @color-red;
		color: @color-white;
		padding: 15px 0;

		strong {
			#font > #proxima > .bold;
		}

		a {
			color: inherit;

			&:hover {
				color: darken(@color-accent, 30%);
			}
		}

		span {
			#font > #tisa > .regular;
			color: @color-white;
			margin-left: @base * 2;
			font-size: 14px;
			// -webkit-mask-image: -webkit-gradient(linear, 95% 0, 100% 0, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.2))); // Safari 4+, Chrome 2+ // Safari 4+, Chrome 2+
			// -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,1) 95%, rgba(0,0,0,0.2) 100%); // Safari 5.1+, Chrome 10+;

			a {
				text-decoration: underline;
			}
		}

		strong {
			text-transform: uppercase;
			font-size: 12px;
			letter-spacing: 1px;
		}
	}

	.active {

		a {
			background: none;
			color: @color-accent;
			text-shadow: none;
		}
	}

	.baseline {
		background: #fdfdfd;
		position: relative;
		left: 0;
		bottom: -20px;
		padding: @base * 2 @base * 2.5;
		color: #aaa;
		font-size: 14px;

		.facebook {
			line-height: 3;

			a {
				#font > #proxima > .bold;
				color: #aaa;
				letter-spacing: 1px;
				text-transform: uppercase;

				&:hover {
					color: @color-accent;
				}
			}
		}

		a {
			color: #aaa;

			&:hover {
				color: @color-accent;
				text-decoration: none;
			}
		}

		.copyright {

			a {

				strong {
					#font > #proxima > .bold;
				}
			}
		}
	}
}

.spotify {
	#font > #proxima > .regular;

	border-top: 1px solid #ccc;
	color: #999;
	font-size: 14px;
	padding: @base * 1.5 0 @base 0;
	margin-bottom: @base * 2;

	.links {
		margin-left: 10px;
	}

	a {
		#font > #proxima > .bold;
		color: #6AAD2E;

		&:hover {
			color: darken(#6AAD2E, 10%);
		}

		span {
			margin: 0 5px;
			text-transform: uppercase;
			color: #999;

			&:hover {
				color: #303030;
			}
		}
	}
}

.top-search {
	line-height: 40px;
	color: darken(desaturate(@color-mast, 20%), 40%);

	* {
		float: left;
	}

	a {
		width: auto;
		float: left !important;
		padding-right: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
	}

	.icon {
		position: relative;
		top: 1px;
	}

	span {
		color: darken(desaturate(@color-mast, 20%), 20%);
	}

	input {
		.border-radius(0 0 0 0);

		#font > #proxima > .regular;
		color: darken(desaturate(@color-mast, 20%), 40%);
		background: darken(desaturate(@color-mast, 10%), 5%);
		position: relative;
		border: none;
		margin: 0 0 0 0;
		padding: 12px 6px;

		&:focus {
			border-bottom: 2px solid darken(desaturate(@color-mast, 20%), 20%);
			outline: none;
			border:none;
		}

		&::-webkit-input-placeholder  {
			color: darken(desaturate(@color-mast, 20%), 20%);
			#font > #proxima > .regular;
			text-transform: uppercase;
		}

		&:-moz-placeholder {
			color: darken(desaturate(@color-mast, 20%), 20%);
			#font > #proxima > .regular;
			text-transform: uppercase;
		}
	}
}

// column defaults ---------------------------------------------------------

.column-full-width {

	.columns-2 {
		-webkit-column-count: 2; -webkit-column-gap:20px;
		-moz-column-count: 2; -moz-column-gap:20px;
		-o-column-count: 2; -o-column-gap:20px;
		column-count: 2; column-gap:20px;
	}

	.columns-3 {
		-webkit-column-count: 3; -webkit-column-gap:20px;
		-moz-column-count: 3; -moz-column-gap:20px;
		-o-column-count: 3; -o-column-gap:20px;
		column-count: 3; column-gap:20px;
	}

	.columns-4 {
		-webkit-column-count: 4; -webkit-column-gap:20px;
		-moz-column-count: 4; -moz-column-gap:20px;
		-o-column-count: 4; -o-column-gap:20px;
		column-count: 4; column-gap:20px;
	}

	.intro {
		display: block;
		font-size: 26px;
		margin: @base * 2 0;
	}

	.nav-box {

		.row {
			margin-bottom: @base * 2;

			.box {
				font-family: 'Times New Roman', Times, serif;
				text-transform: uppercase;
				font-weight: normal;
				font-size: 24px;
				line-height: 1.2;
				font-style: italic;
				text-align: center;
				-webkit-font-smoothing: antialiased;

				a {
					background: lighten(desaturate(@color-mast, 10%), 20%);
					display: block;
					padding: @base * 8 0;
					color: darken(desaturate(@color-mast, 10%), 20%);

					&:hover {
						background: lighten(desaturate(@color-mast, 10%), 15%);
						text-decoration: none;
					}

					span {
						padding: @base * 2 0;
						border-top: 2px solid darken(desaturate(@color-mast, 10%), 20%);
						border-bottom: 2px solid darken(desaturate(@color-mast, 10%), 20%);
					}
				}
			}
		}
	}
}

.grey-bkd {
	background: #e9ebea;
	padding: @base * 1.5 @base * 2 @base * 0.5 @base * 2;
	margin-bottom: @base * 2;

	&.top {
		position: relative;
		top: 0px;

		ul {
			list-style: none;
			margin-left: 0;
			padding: @base * 0.5;

			li {
				margin: 0 0 @base 0;

				&.last {
					margin-bottom: 0;
				}
			}
		}
	}
}

.search {
	margin: @base auto @base * 2 auto;
	text-align: center;

	input {
		#font > #tisa > .regular;
		border: 5px solid #e5e5e3;
		width: 81%;
		line-height: 25px;
		height: 40px;
		padding: 10px 15px 10px 85px;
		font-size: 25px;
		border: solid @base #e5e5e3;
		background: url('../img/search.gif') no-repeat left center;
	}

	p {
		color: #999;
		margin: @base * .5 0 @base 0;
		font-size: 14px;

		span {
			text-decoration: underline;
			cursor: pointer;
		}
	}
}

//-------------------------------------------------------------------
// components--------------------------------------------------------
//-------------------------------------------------------------------

// layouts ----------------------------------------------------------

.layout-home {

	.main-container {

		.component-text {

			.edit {
				.edit-defaults;
				position: relative;
				top: @base * 1;
				left: 0;
			}
		}
	}

	.column-right {

		> .component-events {

			.entry {

				&.last {
					padding-bottom: 62px;
				}
			}
		}
	}

	.component-series {
		margin: @base * 2 0;
	}

	.component-teachings {

		&.recent {
			margin: @base * 4 0 @base * 2 0;
		}

		.latest {
			margin-top: 0;

			.video {
				margin:0;
				height: 349px;
			}

			h2 {
				margin-top: 0;
			}

			.tags {
				text-transform: uppercase;
			}
		}
	}
}

.layout-missions {

	.column-right {

		> .component-locations {
			margin-top: @base * 4;
		}
	}
}

.layout-home-group {

	.column-center {

		.entry {

			h2 {
				margin-top: 0;
				margin-bottom: @base;
			}
		}
	}

	.meta {
		#font > #tisa > .italic;
		color: #303030;
		font-size: 18px;
		clear: both;
		margin: 0 0 @base 0;
		padding: 0;

		.icon {
			color: #878787;
			font-size: 20px;
			position: relative;
			top: -1px;
		}

		&.last {
			margin-bottom: @base * 2;
		}
	}
}

// text --------------------------------------------------------------

.column-full-width {

	> .component-text {

		h2 {
			text-transform: uppercase;
			margin: @base * 4 0 @base * 2 0;
		}
	}
}

.column-center {

	> .component-text {

		h2 {
			text-transform: none;
			margin: @base * 4 0 @base * 2 0;
		}
	}
}

// downloads ---------------------------------------------------------

.column-right {

	> .component-downloads {

		.entry {
			background: @color-grey-accent;
			padding: 0 20px;
			border: none;
			margin: 0;
			position: relative;

			a {
				border: none;
				background: @color-grey-accent;
				padding: 30px 0;
				border-bottom: 1px solid darken(@color-grey-accent, 20%);
				color: @color-body-text;
				font-size: 14px;

				&:hover {
					color: @color-accent;
					border-bottom: 1px solid darken(@color-grey-accent, 20%);
				}

				.date {
					#font > #proxima > .regular;
					width: 48px;
					margin: 0 15px 0 -10px;
					text-align: center;

					.month {
						display: block;
						width: 48px;
						background: @color-accent;
						color: #fff;
						font-weight: bold;
						font-size: 12px;
						letter-spacing: 1px;
						text-transform: uppercase;
					}

					.day {
						width: 48px;
						background: #fff;
						font-weight: bold;
						font-size: 26px;
						color: @color-body-text;
						padding: 7px 0;
					}
				}
			}

			&.even {
				background: @color-grey-accent;
			}

			&.last {

				a {
					border-bottom: none;
				}
			}

			.edit {
				.edit-defaults;
				top: @base;
				right: @base;
			}
		}
	}
}

// events ---------------------------------------------------------

.pageid-20 {

	&.profile {
		.component-events {
			.entry {
				margin-bottom: 0;
			}
		}
	}

	.component-events {

		.entry {
			padding: 0;
			margin: 0 0 @base *3 0;
		}
	}
}

.column-full-width,
.column-center {

	.row {

		> .component-events {

			.back {
				margin: 30px 0 30px 0;

				.link-large {
					background: #e9e9e9;
					color: #999;

					&:hover {
						background: #ccc;
						color: #777;
						text-decoration: none;
					}
				}
			}

			.entries {

				.entry {
					background: #fdfdfd;
					border: @base solid #e9e9e9;
					padding: 0;
					position: relative;

					&.even {
						background: #fff;
					}

					a {
						.border-radius(0 0 0 0);
					}


					.date {
						#font > #tisa > .italic;
						color: #303030;
						font-size: 18px;
						clear: both;
						margin: 0 0 @base @base * 1.5;
						padding: 0;

						.icon {
							color: #878787;
							font-size: 20px;
							position: relative;
							top: -1px;
						}
					}

					.description {
						padding: 0 @base * 1.5;

						p {
							margin-top: @base * 1.5;
						}
					}

					.edit {
						position: absolute;
						top: @base;
						right: @base;
					}

					.header {
						text-transform: none;
						font-size: 26px;
						margin: @base 0 @base 0;
						padding: 0 @base * 1.5 0 @base * 1.5;
						line-height: 1.1;

						a {
							text-transform: none;
							text-decoration: none;
							color: #303030;

							&:hover {
								color: @color-accent;
							}
						}
					}

					.label {
						display: block;
						margin-bottom: 15px;
						font-size: 14px;
						font-weight: normal;
						text-transform: uppercase;
						padding: @base;
						background: none;
						color: @color-accent;
						text-align: right;
						border-bottom: 1px solid @color-grey-accent;
						.border-radius(0);
						text-shadow: none;
					}

				}
			}
		}
	}
}

.profile {

	.column-full-width {

		.row {
			padding-left: @base * 2;

			> .component-events {

				.back {
					margin: 15px 0 30px 0;
				}

				> .entries {

					.entry {
						border: none;
						padding: none;
						margin: none !important;

						.header,
						.description,
						.help-block {
							padding-left: 0;
							padding-right: 0;
						}

						.header {
							margin: 0 0 @base 0;
						}

						.date {
							margin: 0 0 @base 0;
						}
					}
					.span4 {
						background: none;
						margin-top: 0;
						padding-top: 0;
					}

					.component-members-roles, .component-downloads {

						.entry {
							background: #eee;
							padding-left: @base * 2;
						}
					}
				}
			}
		}
	}
}

.column-right {

	> .component-events {

		.entries {
			list-style: none;
			margin: 0 0 @base * 2 0;
			padding: 0;

			@month-height: 16px;
			@day-height: 32px;
			@calendar-height: @month-height + @day-height;
			@calendar-width: @calendar-height;
			@calendar-padding: @base * 1.5;

			.entry {
				background: @color-grey-accent;
				position: relative;
				padding: 0 20px;
				margin: 0;

				a {
					display: block;
					height: 100%;
					padding: @base * 1.5 @base @base * 1.5 0;
					border-bottom: 1px solid darken(@color-grey-accent, 20%);
					.clearfix;

					&:hover {

						.info {
							color: @color-accent;
						}
					}

					.date {
						#font > #proxima > .bold;
						width: @calendar-width;
						text-align: center;
						position: absolute;
						height: @calendar-height;
						left: 15px;

						.month {
							background: @color-accent;
							color: #fff;
							font-size: 12px;
							letter-spacing: 1px;
							text-transform: uppercase;
							line-height: @month-height;
							height: @month-height;
						}

						.day {
							background: #fff;
							font-size: 26px;
							color: @color-body-text;
							line-height: @day-height;
							height: @day-height;
						}
					}

					.info {
						#font > #tisa > .regular;
						font-size: 15px;
						line-height: 1.3;
						font-weight: normal;
						float: left;
						height: @calendar-height;
						margin-left: @calendar-padding + @calendar-width;
						color: @color-body-text;

						.cel {

							td {
								vertical-align: middle;
							}
						}
					}
				}

				&.last {

					a {
						border: none;
					}
				}

				.header {
					text-transform: none;
					font-size: 26px;

					a {
						text-transform: none;
						text-decoration: none;
						color: @color-body-text;

						&:hover {
							color: #555;
						}
					}
				}

				.edit {
					.edit-defaults;
					top: @base;
					right: @base;
				}
			}
		}

		.more  {

			.icon {
				margin-right: @base * .5;
				position: relative;
				top: 1px;
			}
		}
	}
}

// recurring events

.component-events-recurring {

	margin-bottom: @base * 2;

	ul {
		list-style: none;
		list-style-type: none;
		margin: 0;
		background: #E9E9E9;
		padding: 15px;


		li {
			list-style: none;
			list-style-type: none;

			.edit {
				position: absolute;
				top: 10px;
				right: 10px;
			}
		}

		.entry {
			border-bottom: 1px solid #ccc;
			padding: @base * 2 0 @base * 2 @base;
			margin: 0;
			position: relative;

			&.first {
				padding-top: 5px;
			}

			&.last {
				border-bottom: none;
				padding-bottom: 5px;
			}

			a {
				.title {
					.body-text-serif;
					color: #303030;
					margin-bottom: 0;
				}

				.frequency {
					.small-grey-text;
					margin: 0;
					text-transform: none;
				}

				&:hover {

					.frequency,
					.title {
						color: @color-accent;
					}
				}
			}

			.edit {
				position: absolute;
				bottom: 10px;
				right: 10px;
			}
		}
	}
}

.layout-events {

	.component-events-recurring {

	}
}

// images ---------------------------------------------------------

.component-images {

	.entry {
		position: relative;
		width: 100%;

		.edit {
			.edit-defaults;
			top: @base;
			right: @base;
			background: #fff;
			padding: 2px 2px 1px 4px;
		}
	}
}

// locations ---------------------------------------------------------

.component-locations {

	margin-bottom: @base * 3;

	.entry {
		.entry-defaults;

		@media (max-width: 480px)  { .map { height: 120px; } }
		@media (max-width: 767px)  { .map { height: 150px; } }
		@media (max-width: 979px)  { .map { height: 180px; } }
		@media (max-width: 1200px) { .map { height: 200px; } }

		&:hover {

			.map {

				.screen,
				address {
					display: block;
				}
			}

			.link {
				background: darken(@color-grey-accent, 40%);
			}
		}

		.map {
			position: relative;
			border: 10px solid @color-grey-accent;
			line-height: 0;
			background-position: center;
			background-repeat: no-repeat;
			height: 280px;

			img {
				height: 280px;
			}

			address {
				display: none;
				position: absolute;
				left: @base * 1.75;
				bottom: @base * 1.5;
				margin: 0;

				h4 {
					text-transform: uppercase;
					margin-top: 0;
					margin-bottom: @base * .5;
				}
			}

			.screen {
				position: absolute;
				bottom: 0px;
				left: 0;
			}


			.screen {
				display: none;
				background: #e9e9e9;
				.opacity(75);
				width: 100%;
				height: 90px;
			}
		}

		.edit {
			.edit-defaults;
			bottom: @base;
			right: @base;
		}
	}
}

// members-roles ---------------------------------------------------------

.column-full-width {

	> .component-members-roles {

		.header {
			text-align: center;
			margin-bottom: 50px;
		}

		.entry {
			text-align: center;
			margin-bottom: @base * 3;

			p {
				text-align: left;
			}

			img {
				margin: @base auto @base auto;
				.border-radius(100%);
			}

			h3 {
				.small-serif-header;
				display: inline;
				border-bottom: 1px solid #ccc;
				text-transform: none;
				font-weight: normal;
				margin: 0 0 @base * 0.5 0;
				padding: 0 0 @base 0;
			}

			h4 {
				.small-grey-text;
				margin: @base 0 @base * .25 0;
			}

			.contact-info {
				text-align: center;
				margin: @base * 2 0;

				span {
					color: #999;
					display: block;
					margin: 0 0 @base * 0.5 0;

				}

				a {
					color: #999;

					&:hover {
						color: @color-accent;
					}
				}
			}
		}

		.edit {
			margin-left: @base;
		}
	}
}

.column-right {

	> .component-members-roles {

		.entry {
			background: @color-grey-accent;
			padding: 0 0 0 @base * 2;
			position: relative;

			.mailto {
				min-height: 50px;
				background: @color-grey-accent;
				padding: @base * 1.5 0 @base * 1.5 @base * 1.5;
				margin-right: @base * 2;
				border-bottom: 1px solid darken(@color-grey-accent, 20%);
				color: @color-body-text;
				height: 72px;

				&:hover {
					color: @color-accent;
					border-bottom: 1px solid darken(@color-grey-accent, 20%);

					.email {
						color: @color-accent !important;
						-webkit-transition: color 200ms ease-in-out;
					}

					h4 {
						font-size: 16px;
					}
				}

				img {
					position: relative;
					left: -20px;
					margin-right: @base;
					margin-bottom: @base * 0.5;
					.border-radius(100%);
					width: 75px;
					height: 75px;
				}

				.info  {
					position: relative;
					left: -@base * 1.5;
					padding-top: @base * 0.5;

					h4 {
						#font > #tisa > .regular;
						padding: @base * .25 0 0 0;
						margin-bottom: @base * .125;
						vertical-align: center;
						font-size: 18px;
						line-height: 1.2;
					}

					.icon {
						color: #999;
					}

					.email,
					.phone {
						.small-grey-text;
						text-transform: none;
						display: inline;
					}

					.phone {
						position: relative;
						top: -4px;
					}
				}
			}

			&.even {
				background: @color-grey-accent;
			}

			&.last {

				.mailto {
					border-bottom: none;
				}
			}

			.edit {
				.edit-defaults;
				bottom: @base;
				right: @base;
			}
		}
	}
}

// search ---------------------------------------------------------

.component-search {

	.intro {
		padding-bottom: @base * 2;
		border-bottom: 2px solid #e9e9e9;
	}

	.filters {

		* {
			font-size: 14px;
		}

		.alternatives,
		.suggestions,
		.filter {
			#font > #tisa > .regular;
			border: @base solid #E9E9E9;
			margin: @base 0 @base * 2 0;

			h4 {
				margin: 0;
				background: @color-mast;
				padding: 10px;
				color: #fff;
				#font > #proxima > .bold;
				text-transform: uppercase;
				font-size: 14px;
			}
		}

		.filter {

			.collection {

				ul {
					list-style: none;
					margin: 0;

					li {
						list-style-type: none;

						a {
							display: block;
							padding: 5px 10px;
							border-bottom: 1px solid #e9e9e9;

							strong {
								#font > #proxima > .bold;
								text-transform: uppercase;
							}
						}
					}
				}
			}
		}

		.alternatives, .suggestions {
			padding-bottom: 5px;

			a {
				margin: @base;
			}
		}
	}

	.entries {
		margin: @base * 2 0;

		.span8 {
			padding-top: @base;
		}
	}

	.entry {
		margin: 0 0 @base *3 0;
		background: #fdfdfd;
		border: @base solid #e9e9e9;
		padding: @base;

		a {
			display: block;
		}

		h3 {
			font-size: 15px;
		}
	}

	.excerpt {

		* {
			font-size: 12px;
			color: #888;
			margin: 0;
			padding: 0;

			strong {
				color: #333;
			}
		}
	}

	.hyphen {
		margin: 0 @base;
	}

	i {
		margin-right: @base;
		position: relative;
		top: 1px;
	}

	.type-tags {

		h3 {
			margin: 0;
			padding: 0;
		}
	}

	h3 {

		.meta {
			.body-text-serif;
			text-transform: none;
			font-size: 14px;
			letter-spacing: 0;
		}
	}
}

// spacer ---------------------------------------------------------

.component-spacer {

	.spacer {
		font-size: 18px;
		letter-spacing: 5px;
		text-align: center;
		margin: @base * .5 0 @base * 2.5 0;

		.edit {
			margin-left: @base;
		}
	}
}

// teachings -------------------------------------------------------

.component-teachings,
.component-series {

	h4 {
		font-size: 16px;
		margin: 10px 0 5px 0;
		color: #303030;

		&:hover {
			color: @color-accent;
		}

		.meta {
			#font > #tisa > .regular;
			color: #999;
		}
	}

	.latest {
		margin-bottom: 40px;

		.video {
			width: 100%;
			height: 349px;
			margin: @base * .5 auto;
		}

		h2 {
			margin: 20px 0 5px 0;
			text-transform: none;

			a {
				color:#303030;

				&:hover {
					color: @color-accent;
				}
			}
		}

		.actions {
			margin-top: -10px;

			.audiojs {
				margin-left: 20px;
			}

			.action {
				.download {
					position: relative;
					left: 0;
				}

			}



		}

		.tags {

			a {
				#font > #proxima > .bold;
				text-transform: uppercase;
				font-size: 12px;
			}
		}
	}

	.series,
	.recent {

		.info {
			margin: 0 0 15px 0;
		}

		img {
			margin-top: @base;
			width: 300px;
			height: 200px;
		}

		.meta {
			font-size: 13px;
		}

	}

	.meta {

		&.series {
			padding: 10px 0;
		}

		p {
			.body-text-serif;
			color: #999;
			padding: 0;
			margin: 0;
			line-height: 1;
		}

		.teacher {
			#font > #proxima > .bold;
			text-transform: uppercase;
			margin-right: 10px;

			em {
				text-transform: none;
			}
		}

		.icon {
			margin: 0 5px;
		}

		.icon-book {
			.opacity(50);
			position: relative;
			top: 7px;
			margin-right: 5px;
		}
	}

	.description {
		margin: 10px 0;

		p {
			.body-text-serif;
		}
	}

	.actions {
		font-size: 12px;
		text-align: center;
		color: #999;
		background: #e9e9e9;
		padding: @base;
		margin: @base * .5 0;

		.action {
			margin-right: 20px;

			.download {
				position: relative;
				left: @base * -18;
			}
		}

		strong {
			#font > #proxima > .bold;
			text-transform: uppercase;
		}

		a {
			color: #303030;
			#font > #proxima > .bold;
			text-transform: uppercase;
			margin: 0 5px;

			&:hover {
				color: @color-accent;
			}
		}
	}

	.tags {
		color: #999;
		border-top: 1px solid #999;
		border-bottom: 1px solid #999;
		padding: 10px 0;

		a {
			#font > #proxima > .bold;
			font-size: 12px;
			color: #999;

			&:hover {
				color: @color-accent;
			}
		}
	}

	// main column

	.span8 {

		h4 {
			font-size: 16px;
			margin: 10px 0 5px 0;
			color: #303030;

			&:hover {
				color: @color-accent;
			}
		}

		.result {
			border: 10px solid #e9e9e9;
			border-bottom: none;
			margin: 0 0 30px 0;

			h4 {
				font-size: 18px;
				padding: @base * 0.3 @base *2 @base @base;
				border-bottom: 1px solid @color-grey-accent;
				margin-bottom: @base;

				.verse {
					#font > #proxima > .regular;
					float: right;
					font-size: 14px;
					text-transform: uppercase;
					background: none;
					color: @color-accent;
					text-shadow: none;
				}

				a {
					color: #303030;

					&:hover {
						color: @color-accent;
					}
				}
			}

			.meta {
				clear: both;
				padding: 0 @base;

				p {
					font-size: 13px;
				}

				.teacher {
					margin-right: 0;
				}
			}

			.badge {
				margin-right: 5px;
			}

			.icon-book {
				top: 5px;
			}

			.description {
				padding: 0 @base;
			}

			.tags {
				#font > #proxima > .bold;
				text-transform: uppercase;
				font-size: 12px;
				border-color: #e9e9e9;
				border-bottom: none;
				padding: @base @base 0 @base;
			}

			.entry {
				position: relative;
				bottom: -5px;
			}
			.actions {

				.action {

					.download {
						position: relative;
						left: -10px;
					}
				}
			}
		}
	}

	// widget

	.widget {
		#font > #tisa > .regular;
		border: @base solid #E9E9E9;
		margin: @base 0 @base * 2 0;

		h4 {
			margin: 0;
			background: @color-mast;
			padding: 10px;
			color: #fff;
			#font > #proxima > .bold;
			text-transform: uppercase;
			font-size: 14px;
		}

		h5 {
			#font > #proxima > .bold;
			padding: 6px @base 5px @base;
			color: #ccc;
			border-top: 1px solid #e9e9e9;
			border-bottom: 1px solid #e9e9e9;
			text-transform: uppercase;
			font-size: 14px;
		}

		.collection {
			padding: @base;
			font-size: 13px;
			line-height: 1.6;

			a {
				color: #303030;

				&:hover {
					color: @color-accent;
					text-decoration: underline;
				}
			}
		}

		.more {
			display: block;
			background: darken(@color-grey-accent, 33.5%);
			#font > #proxima > .bold;
			font-size: 12px;
			letter-spacing: 1px;
			text-transform: uppercase;
			color: #fff !important;
			padding: 10px;

			&:hover {
				background: darken(@color-grey-accent, 40%);
				text-decoration: none;
			}
		}

		.inline-search {
			margin: 0 @base;
			padding: @base 0 @base * 0.5 0;
			border-bottom: 1px solid #e9e9e9;

			label {
				display: inline;

				.icon {
					color: #999;
				}
			}

			.keywords {
				#font > #proxima > .regular;
				color: #777;
				background: none;
				border: none;
				margin: 0;
				padding: 0;
				font-size: 14px;

				&:focus {
					border-bottom: 2px solid darken(desaturate(@color-mast, 20%), 20%);
					outline: none;
					border:none;
				}

				&::-webkit-input-placeholder  {
					color: #ccc;
					#font > #proxima > .regular;
					text-transform: uppercase;
				}

				&:-moz-placeholder {
					color: #ccc;
					#font > #proxima > .regular;
					text-transform: uppercase;
				}
			}

			&:focus {
				border-color: @color-accent;
			}
		}
	}
}

.column-full-width {

	> .component-teachings {

		.individual {

			h1 {

				.verse {
					padding-top: @base * 2;
					font-size: 32px;
					text-transform: uppercase;
					color: #ccc;
				}
			}

			.meta {
				margin: @base * 2 0;

				p {
					font-size: 20px;
				}
			}

			.tags {
				margin: @base * 2 0;
				text-transform: uppercase;
			}
		}
	}
}

.component-series {
	margin-bottom: @base * 3;
}

// videos

// verses ---------------------------------------------------------

.component-verses {

	blockquote {
		.small-serif-header;
		font-size: @body-text-height;
		margin: @base * 1.5 0 @base * 1.5 0;

		cite {
			.small-grey-text;

			a {

				&:hover {
					color: @color-accent;
				}
			}
		}

		p {
			font-size: 20px;
			letter-spacing: 5px;
		}

		.edit {
			margin-left: @base;
		}
	}
}

// audioJS styles -----------------------------------------------------

.audiojs {
	display: inline;
	float: left;
	height: 36px;
	background: #e9e9e9;
	overflow: hidden;
	font-family: monospace;
	font-size: 12px;
	position: relative;
	top: -8px;
	.box-shadow(none);
	.clearfix;

	audio {
		position: absolute;
		left: -1px;
	}

	p {
		display: none;
		width: 25px;
		margin: 0px;
		cursor: pointer;
	}

	.action {
		display: block;
		float: left;
		position: relative;
		top: 8px;
		margin-right: 0 !important;

		.icon {
			color: #999;
			margin-right: @base * 1.5;
			position: relative;
			top: 1px;

			&:hover {
				color: #999;
			}
		}
	}

	.error-message {
		float: left;
		display: none;
		margin: 0px 10px;
		height: 36px;
		width: 400px;
		overflow: hidden;
		line-height: 36px;
		white-space: nowrap;
		color: #fff;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		-icab-text-overflow: ellipsis;
		-khtml-text-overflow: ellipsis;
		-moz-text-overflow: ellipsis;
		-webkit-text-overflow: ellipsis;

		a {
			color: #eee;
			text-decoration: none;
			padding-bottom: 1px;
			border-bottom: 1px solid #999;
			white-space: wrap;
		}

	}

	.icon {
		color: #303030;
		position: relative;
		top: -2px;
		left: 5px;

		&:hover {
			color: @color-accent;
		}
	}

	.loaded {
		position: absolute;
		top: 0px;
		left: 0px;
		height: 14px;
		width: 0px;
		background: #999;
	}

	.play {
		display: block;
	}

	.play-pause {
		width: 25px;
		padding: 4px 6px;
		margin: 0px; float: left;
		overflow: hidden;
	}

	.progress {
		position: absolute;
		top: 0px;
		left: 0px;
		height: 14px;
		width: 0px;
		background: #ededec;
		z-index: 1;
	}

	.scrubber {
		position: relative;
		float: left;
		width: 280px;
		background: #ccc;
		height: 14px;
		margin: 10px;
		border-left: 0px;
		border-bottom: 0px;
		overflow: hidden;
	}

	.time {
		float: left;
		line-height: 36px;
		margin: 0;
		padding: 0;
		color: #999;

		em {
			padding: 0px 2px 0px 0px;
			color: #bbb;
			font-style: normal;
			#font > #proxima > .regular;
		}

		strong {
			padding: 0px 0px 0px 2px;
			font-weight: normal;
		}
	}

}

.playing {

	.play,
	.loading,
	.error {
		display: none;
	}

	.pause {
		display: block;
	}
}

.loading {

	.play,
	.pause,
	.error {
		display: none;
	}

	.loading {
		display: block;
	}
}

.error {

	.time,
	.play,
	.pause,
	.scrubber,
	.loading {
		display: none;
	}

	.error {
		display: block;
	}

	.error-message {
		display: block;
	}

	.play-pause {

		p {
			cursor: auto;
		}
	}
}

// popover styles -----------------------------------------------------

.popover {

	.popover-inner {

		.popover-title {
			margin-bottom: 3px;
		}
	}
}

// site cleanup -------------------------------------------------------

.column-right {
	margin-top: @base * 4;
}

.layout-home,
.layout-events {
	.column-right,
	& + .column-right {
		margin-top: 0;

		ul {
			margin-top: 15px;
		}
	}

	.component-teachings {
		margin-top: 15px;
	}

	.component-events {

		.entries {
			margin-top: 15px;
		}
	}
}

.layout-home-group {

	.column-right {
		margin-top: 0;
	}
}

.layout-meetings {

	.column-center {

		> .component-text {

			h2 {
				margin-bottom: 0;
			}
		}
	}

	.date {
		#font > #tisa > .italic;
		color: #303030;
		font-size: 18px;
		clear: both;
		margin: 5px 0 @base * 2 0;
		padding: 0;

		.icon {
			color: #878787;
			font-size: 20px;
			position: relative;
			top: -1px;
		}
	}
}


// media queries ---------------------------------------------------------

// Phones only

@media (max-width: 767px) {

	body {
		padding: 0;
		overflow-x: hidden;
	}

	#overview,
	.container {
		padding-left: 20px;
		padding-right: 20px;
	}

	.navbar-fixed-top,
	.navbar-fixed-bottom {
		margin: 0;
	}

	.subnav {

		li {

			a {
				padding: @base 0;
				margin: 0 5px;
			}
		}
	}

	.to-top {
		float: none;
		margin: 0 auto;

		a {
			display: block;
			width: 120px;
			margin: 20px auto 0 auto;
			text-align: center;
			padding: 5px 0
		}
	}

	.audiojs {
		margin: 0;

		.scrubber {
			width: 155px;
		}

	}
}

// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
// --------------------------------------------------

@media (max-width: 767px) {

	.component-teachings {

		.latest {

			.video {
				width: 450px !important;
				height: 253px !important;
			}
		}
	}
}

// TABLETS AND BELOW
// -----------------

@media (max-width: 979px) {

	.layout-home {

		.featured {

			a {
				display: block;
				margin-bottom: 20px;
			}
		}

		.column-right {

			.component-events {

				.entry {

					&.last {
						padding-bottom: 0;
					}

					a {
						padding: @base * 1.2 0;

						.info {
							font-size: 13px;
						}
					}
				}
			}
		}
	}

	.mast {
		padding-top: @base * 9.7;
		padding-bottom: 20px;

		.container {

			.row {
				margin-top: 0;

				&.introduction {
					margin: 40px 0;

					h2 {
						text-align: center;
					}

					p {
						text-align: center;
					}

					.span4 {
						margin-top: @base * 3;
					}
				}

				.span12 {

					.logo {
						display: block;
						float: none;
						margin: 0 auto 30px auto;
					}

					.main {
						margin-top: @base * 2;
						margin-bottom: 0;
						text-align: center;
						display: block;
						float: none;
						padding: 0 75px;

						li {
							float: none;
							display: inline;

							a {
								display: inline-block;
								padding: 15px 0;
								margin: 0 5px;
							}
						}
					}
				}
			}
		}
	}

	.navbar-inner {

		.nav {
			float: none;

			&.left {
				position: relative;
				display: block;
				z-index: 10;
			}

			&.pull-right {
				position: relative;
				margin: 0;
				float: none;
				text-align: center;
				width: 100%;

				li {
					float: none;
					display: inline;

					a {
						display: inline-block;
					}
				}

				.worship {
					display: none;
				}
			}

			.top-search {
				background: darken(desaturate(@color-mast, 20%), 20%);
				position: relative;
				left: -5px;
				top: -5px;
				display: block;
				width: 100%;
				padding-right: @base * 2;

				.icon {
					color: darken(desaturate(@color-mast, 20%), 40%);
					margin-left: @base * 2;
				}

				input {
					background: darken(desaturate(@color-mast, 20%), 20%);
					color: #fff;
				}

				input:-moz-placeholder {
					color: #fff;
				}

				input::-webkit-input-placeholder  {
					color: #fff;
				}
			}
		}
	}

	.component-locations {
		width: 300px;
		margin: 0 auto;
	}

	.column-full-width {

		.nav-box {

			.row {
				margin-bottom: 0px;
			}

			.box {

				a {
					margin-bottom: 20px;
				}
			}
		}
	}

	.baseline {
	   text-align: center;
		line-height: 1.7;

		.facebook {
			a {
			  line-height: 1.7;
				float: none;
			}
		}
	}

	.audiojs {
		margin: 0;

		.scrubber {
			width: 200px;
		}

	}

	.component-teachings,
	.component-series {

		.latest {

			.actions {

				.audiojs {
					margin-left: 0;
				}

				.download {
					position: relative;
					margin-right: -40px;
				}
			}
		}

		.results {

			.actions {

				.action {

					.audiojs {
						.scrubber {
							width: 150px;
						}
					}

					.download {
						position: relative;
						left: -40px;
					}
				}
			}
		}
	}



	.component-teachings {

		.search {

			.keywords {
				width: 65%;
			}
		}
	}
}

// PORTRAIT TABLET TO DEFAULT DESKTOP
// ----------------------------------

@media (min-width: 768px) and (max-width: 979px) {


	.mast {
		padding-bottom: 20px;

		.container {

			.row {
				margin-top: 0;

				.span12 {

					.logo {
						margin-bottom: 0;
					}

					.main {
						margin-top: 20px;
						margin-bottom: 0;
						padding: 0 0;
					}
				}
			}
		}
	}

	.component-teachings {

		.latest {

			.video {
				width: 476px !important;
				height: 268px !important;
			}
		}
	}

	.column-right {

		> .component-members-roles {

			.entry {

				.pull-left {
					float: none;
					text-align: center;
					margin: 0;
					padding: @base 0 0 0;

					img {
						margin-right: 0;
					}

				}

				.mailto {
					display: block;
					float: none;
					height: auto;
					margin: 0;
					text-align: center;
				}
			}
		}
	}


}

// DEFAULT DESKTOP
// ---------------

@media (min-width: 980px) {

	.mast {

		.main {
			text-align: right;
			display: block;
			float: none;

			li {
				float: none;
				display: inline;

				a {
					display: inline-block;
					padding: 15px 0;
					margin: 0 5px;
				}
			}
		}
	}

	.twitter {

		span {
			font-size: 13px;
		}
	}

	.copyright {
		margin-bottom: 0;
		line-height: 1.5;
	}
}

// iPhone
// ---------------

@media (max-width: 480px) {

	.modalLive {
		width: 440px !important;

		.ustream-embed {
			width: 420px !important;
			height: 236px !important;

			iframe {
				width: 420px !important;
				height: 236px !important;
			}
		}
	}

	.column-full-width {

		.columns-2 {
			-webkit-column-count: 1;
			-moz-column-count: 1;
			-o-column-count: 1;
			column-count: 1;
		}

		.columns-3 {
			-webkit-column-count: 1;
			-moz-column-count: 1;
			-o-column-count: 1;
			column-count: 1;
		}

		.columns-4 {
			-webkit-column-count: 1;
			-moz-column-count: 1;
			-o-column-count: 1;
			column-count: 1;
		}
	}

	.mast {
		padding: @base * 10 0 0 0;

		.container {

			.row {
				margin-top: 0;

				&.introduction {
					margin: 40px 0;
				}

				.span12 {

					.logo {
						margin-bottom: 0;

					}

					.main {
						margin-top: @base * 2;
						margin-bottom: 0;
						padding: 0;
						text-align: center;
						display: block;
						float: none;

						li {
							float: none;
							display: inline;
							line-height: 2;

							a {
								display: inline-block;
								padding: 0;
								margin: 0;
							}

						}
					}
				}
			}
		}
	}

	.alert {
		margin-top: 0;
	}

	.layout-home {

		.component-teachings {

			.latest {

				.video {
					width: 440px !important;
					height: 248px !important;
				}

			}
		}
	}

	.component-teachings {

		.latest, .individual {

			.video {
				width: 440px !important;
				height: 248px !important;
			}
		}

		.actions {

			.action {

				.audio {
					display: none;
				}
			}
		}

		.meta {

			p {
				line-height: 1.6;
			}
		}

		.results {

			.result {
				h4 {
					font-size: 14px;
				}
			}

			.actions {

				.action {

					.audiojs {
						.scrubber {
							width: 110px;
						}
					}

					.download {
						position: relative;
						left: 0;
					}
				}
			}
		}

		.pagination {
			* {
				font-size: 14px;
			}

			a {
				padding: 0 9px;
			}
		}
	}

	.audiojs {

		.scrubber {
			width: 200px;
		}

		.duration,
		.time {
			display: none;
		}

	}

	.component-teachings,
	.component-series {

		.actions {

			.action {

				.action {
					display: none;
				}

				.download {
					display: inline;
					left: 0;
				}
			}
		}
	}

	.footer {

		.dev {
			display: none;
		}

		.nav {

			#page18 {
				display: block;
				padding: @base * 2 0;
				border-bottom: 1px solid #ccc;
			}

			.entry {
				display: none;
			}
		}

		.span3 {
			margin-top: @base * 2;
		}

		.span3 + .span3 {
			margin-top: 0;
		}
	}
}

// iPhone Portrait

@media (max-width: 320px) {

	.modalLive {
		width: 280px !important;

		.ustream-embed {
			width: 240px !important;
			height: 135px !important;

			iframe {
				width: 240px !important;
				height: 135px !important;
			}
		}
	}

	h1 {
		font-size: 48px;
	}

	.layout-home {

		.component-teachings {

			.latest {

				.video {
					width: 280px !important;
					height: 158px !important;
				}

			}
		}
	}

	.component-teachings {

		.latest,
		.individual {

			.video {
				width: 280px !important;
				height: 158px !important;
			}
		}

	}

	.audiojs {

		.scrubber {
			width: 140px;
		}

		.duration,
		.time {
			display: none;
		}

	}

}

// RESPONSIVE IMAGES

.featured {

	img {
		width: 300px !important;
		height: 200px !important;
	}
}

.component-teachings,
.component-series {

	img {
		width: 300px !important;
		height: 169px !important;
	}
}

.layout-ministry {

	.component-images {

		img {
			width: 940px !important;
			height: 378px !important;
		}
	}
}

.layout-missions {

	.component-images {

		img {
			width: 940px !important;
			height: 529px !important;
		}
	}
}

// tablets and below

@media (max-width: 979px)  {

	.featured {

		img {
			width: 228px !important;
			height: 152px !important;
		}
	}

	.component-teachings,
	.component-series {

		img {
			width: 228px !important;
			height: 128px !important;
		}
	}

	.layout-ministry {

		.component-images {

			img {
				width: 724px !important;
				height: 291px !important;
			}
		}
	}

	.layout-missions {

		.component-images {

			img {
				width: 724px !important;
				height: 407px !important;
			}
		}
	}
}

// up to landscape phone

@media (max-width: 480px)  {

	.featured {

		img {
			width: 440px !important;
			height: 294px !important;
		}
	}

	.component-teachings,
	.component-series {

		img {
			width: 440px !important;
			height: 248px !important;
		}
	}

	.layout-ministry {

		.component-images {

			img {
				width: 440px !important;
				height: 248px !important;
			}
		}
	}

	.layout-missions {

		.component-images {

			img {
				width: 440px !important;
				height: 248px !important;
			}
		}
	}
}

@media (max-width: 320px) {

	.featured {

		img {
			width: 280px !important;
			height: 187px !important;
		}
	}

	.component-teachings,
	.component-series {

		img {
			width: 280px !important;
			height: 158px !important;
		}
	}

	.layout-ministry {

		.component-images {

			img {
				width: 280px !important;
				height: 158px !important;
			}
		}
	}

	.layout-missions {

		.component-images {

			img {
				width: 280px !important;
				height: 158px !important;
			}
		}
	}

}