@import 'grid.less';

@darkcolour: #222;
@almostblack: #111;
@lightcolour: #ddd;
@medlightcolour: #aaa;
@medcolour: #5a5a5a;
@nicecolour: #6d3838;
@wildcolour: #a9211f;

////////////
//  GRID  //
////////////

// Specify the number of columns and set column and gutter widths
@columns: 12;
@column-width: 60;
@gutter-width: 20;

// Remove the definition below for a pixel-based layout
@total-width: 100%;

////////////
// USEFUL //
////////////

br.clear {
	clear: both;
	height: 0;
}
.emboss-text(@col:@almostblack) {
	-webkit-text-shadow: 0 -1px 1px @col;
	-moz-text-shadow: 0 -1px 1px @col;
	-o-text-shadow: 0 -1px 1px @col;
	text-shadow: 0 -1px 1px @col;
}
.box-shadow(@col:#aaa) {
	-webkit-box-shadow: 0 0 10px @col;
	-moz-box-shadow: 0 0 10px @col;
	-o-box-shadow: 0 0 10px @col;
	box-shadow: 0 0 10px @col;
}
.border-radius(@rad:10px) {
	-webkit-border-radius: @rad;
	-moz-border-radius: @rad;
	-o-border-radius: @rad;
	border-radius: @rad;
}
.an-transition() {
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	transition: all 200ms linear;
}


////////////
// LAYOUT //
////////////

/* set up the basics */
body {
	background: #999 url(../images/bg-light.jpg) repeat fixed center top;
	font-family: Arial, sans-serif;
	font-size: 12px;
	font-weight: 300;
	line-height: 1.8em;
	color: @lightcolour;
}
a {
	color: @lightcolour;
	text-decoration: none;
}
a:hover {
	color: #fff;
	text-decoration: none;
}
#access a {
	color: @darkcolour;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
#access a:hover {
	//color: @wildcolour;
	text-decoration: none;
	border-bottom: 1px solid @darkcolour;
}
.page-content a {
	color: @medcolour;
	text-decoration: none;
	border-bottom: 1px solid @wildcolour;
}
.page-content a:hover {
	color: @darkcolour;
}
.xoxo a {
	color: @medcolour;
	text-decoration: none;
	border-bottom: 1px solid @wildcolour;
}
.xoxo a:hover {
	color: @lightcolour;
}

p {
	display: block;
	margin-bottom: 1em;
}
h1 {
	font-size: 24px;
	font-weight: 400;
	text-transform: uppercase;
}
h2 {
	font-size: 18px;
	font-weight: 400;
}
h3 {
	font-size: 16px;
	font-weight: 400;
}
#wrapper {

}
#access {
	max-width: 960px;
	margin: 30px auto;
	overflow: hidden;
	padding-bottom: 30px;
	border-bottom: 1px solid @darkcolour;
	//.emboss-text(#ddd);
	color: @darkcolour;
}
	#primary-access {
		display: block;
		padding: 30px 0;
		font-weight: 300;
		font-size: 14px;
	}
	.primary-menu-active {
		//color: @wildcolour;
	}
	#secondary-access {
		display: block;
		font-weight: 300;
		font-size: 14px;
	}
	.primarylink {
		text-transform: uppercase;
		font-size: 18px;
		display: block;
		padding-left: 30px;
		margin-top: 7px;
	}
	.accessitem {
		float: left;
		padding-left: 30px;
	}
	.access-active {
		//background: @darkcolour;
		//border: 1px solid @lightcolour;
		//.box-shadow();
		//.border-radius(3px);
		//color: @lightcolour;
	}
	.secondarylink {
		width:100%;
		display: block;
	}
		#submenu1 {
			float: left;
			margin-left: 30px;
			margin-right: 30px;
			width: 278px;
			height:100%;
		}
		#submenu2 {
			float: left;
			margin-right: 30px;
			width: 166px;
			height:100%;
		}
		#submenu3 {
			float: left;
			margin-right: 30px;
			width: 242px;
			height:100%;
		}
		#submenu4 {
			float: left;
			margin-right: 10px;
			width: 140px;
			height:100%;
		}
	
#slideshowcontainer {
	position: relative;
	max-width: 960px;
	margin: 0 auto;
	background: @darkcolour;
	border: 1px solid @medlightcolour;
	.box-shadow();
	height: 422px;
	width: 960px;
	display: block;
	.border-radius(3px);
	.an-transition();
	overflow: hidden;
}
	#slideshow {
		position: relative;
		width:750px;
		height:422px;
		overflow: hidden;
		float: left;
	}
	#slideshow img {
		position: absolute;
		top: 0;
		left:0;
		width:750px;
		height:422px;
	}
	#slideshowthumbnails {
		width: 190px;
		height: 422px;
		margin: 10px;
		overflow: visible;
		float: left;
	}
	#slideshowthumbnails img {
		width: 190px;
		height: 107px;
		margin-bottom: 3px; 
	}
	#slideshow div {
		z-index:8;
    	opacity:0.0;
    	position: absolute;
	}
	#slideshow div.active {
	    z-index:10;
	    opacity:1.0;
	}
	
	#slideshow div.last-active {
	    z-index:9;
	}

#mediafeeds {
	position: relative;
	max-width: 960px;
	height: 161px;
	margin: 30px auto;
	background: @darkcolour;
	border: 1px solid @medlightcolour;
	.box-shadow();
	.emboss-text();
	.border-radius(3px);
	.an-transition();
	overflow: hidden;
}
.more-button {
	//padding:0 10px 10px 0;
	font-size: 12px;
	width: 100%;
	display: block;
	text-align: center;
	background: #3b3b3b;
}
.more-button:hover {
	background: #000;
	color: @wildcolour;
} 
.media-item {
	.column(4);
	padding: 10px 0;
}
.media-item div {
	padding: 10px;
	width: 95%;
	height: 100px;
	overflow: hidden;
}
.media-item div:hover {
	background: #000;
	color: @wildcolour;
	.border-radius();
}
.media-item div img {
	width:100px;
	height: 100px;
	float: left;
}
.media-item div div {
	height: 100px;
	width: 150px;
	margin-left: 10px;
	float: left;
}
.meta-author {
	color: @medcolour;
}

.column {
	.column(3);
}

.teamdetails {
	height: 120px;
	display: block;
}
.content-wrap {
	position: relative;
	max-width: 960px;
	margin: 0 auto 20px auto;
	background: @darkcolour;
	border: 1px solid @medlightcolour;
	.box-shadow();
	.border-radius(3px);
	.an-transition();
}
.content-wrap:hover {
	border: 1px solid @lightcolour;
}
	.content-wrap img {
		.border-radius(3px);
	}
	#media-items {
		color: @wildcolour;
	}
	#sermon-categories {
		padding-top: 30px;
	}
	.sermoncategory {
		.column(3);
		height: 300px;
		padding-bottom: 20px;
		text-align: center;
	}
	.sermoncategory img {
		width: 200px;
		height: 200px;
	}
	.sermoncategory span {
		width: 100%;
		display: block;
	}
		.sermoncategorydetail {
			color: @medcolour;
		}
	.featured-details {
		padding: 10px;
	}
	.featured-details img {
		width: 100px;
		height: 100px;
		float: left;
	}
	.featured-meta {
		float: left;
		margin-left: 10px;
		padding-top: 10px;
	}
	.featured-media-player {
		margin-top: 10px
	}
	.download-button {
		float: right;
		margin: 26px 26px 0 0;
		height: 20px;
		font-size: 16px;
		text-transform: uppercase;
		padding: 12px;
		background: #000;
		.border-radius();
		.an-transition();
	}
	.download-button:hover {
		background: @wildcolour;
	}
#featured-media-tag {
	position: absolute;
	left:-31px;
	top:10px;
	width: 30px;
	height: 80px;
	background: url(../images/latest.jpg) no-repeat scroll left top;
}
#media-items-tag {
	position: absolute;
	left:-31px;
	top:10px;
	width: 30px;
	height: 80px;
	background: url(../images/recent.jpg) no-repeat scroll left top;
}
#sermon-categories-tag {
	position: absolute;
	left:-31px;
	top:10px;
	width: 30px;
	height: 80px;
	background: url(../images/archive.jpg) no-repeat scroll left top;
}
//very nb that this comes after content-wrap!!!!
.page-content {
	padding: 30px;
	max-width: 900px;
	color: @darkcolour;
	background: transparent url(../images/white50.png);
	background: rgba(221, 221, 221, 0.5) none;
}
.page-content h1 {
	margin-bottom: 10px;
}
.page-content .featured {

}
.page-content img, .page-content iframe {
	padding: 5px;
	background: transparent url(../images/white50.png);
	background: rgba(221, 221, 221, 0.5) none;
}
#nblinks-container {
	position: relative;
	width:100%;
	height: 330px;
	overflow: hidden;
}
#nblinks {
	position: relative;
	max-width: 950px;
	height: 320px;
	margin: 0 auto -5px auto;
	padding-top: 20px;
	padding-left: 10px;
	color: @medcolour;
	.emboss-text();
	.border-radius(3px);
	.box-shadow();
	background: @darkcolour;
	border: 1px solid @medlightcolour;
}
#nblinks a {
	color: @medcolour;
}
#nblinks h2 {
	color: @lightcolour;
}
#nblinks a:hover {
	color: @lightcolour;
}
#nblinks a:hover img {
	background: @lightcolour;
}
	#childrens-cta {
		width: 200px;
		height: 200px;
		padding: 5px;
		margin-bottom: 5px;
		background: @medcolour url('../images/uptown-hover.jpg') no-repeat scroll 5px 5px;
	}
	#nblink-childrens:hover #childrens-cta {
		background: @medcolour url('../images/uptown.jpg') no-repeat scroll 5px 5px;
	}
	#youth-cta {
		width: 200px;
		height: 200px;
		padding: 5px;
		margin-bottom: 5px;
		background: @medcolour url('../images/youth-hover.jpg') no-repeat scroll 5px 5px;
	}
	#nblink-youth:hover #youth-cta {
		background: @medcolour url('../images/youth.jpg') no-repeat scroll 5px 5px;
	}
	#meetings-cta {
		width: 200px;
		height: 200px;
		padding: 5px;
		margin-bottom: 5px;
		background: @medcolour url('../images/meetings-hover.jpg') no-repeat scroll 5px 5px;
	}
	#nblink-meetings:hover #meetings-cta {
		background: @medcolour url('../images/meetings.jpg') no-repeat scroll 5px 5px;
	}
	#smallgroups-cta {
		width: 200px;
		height: 200px;
		padding: 5px;
		margin-bottom: 5px;
		background: @medcolour url('../images/smallgroups-hover.jpg') no-repeat scroll 5px 5px;
	}
	#nblink-smallgroups:hover #smallgroups-cta {
		background: @medcolour url('../images/smallgroups.jpg') no-repeat scroll 5px 5px;
	}

#footer-wrap {
	width: 100%;
	color: @medcolour;
	.emboss-text();
	margin-top: 0;
	background: @darkcolour;
	border-top: 1px solid @medlightcolour;
	.an-transition();
}

#footer {
	padding-top: 20px;
	padding-left: 10px;
	max-width: 950px;
	background: @darkcolour;
	margin: 0 auto;
	.box-shadow(#111);
}
#footer h3 {
	text-transform: uppercase;
	font-size: 10px;
	margin-bottom: 6px;
}
.xoxo div {
	.column(4);
}
.xoxo div div {
	width:100%;
}
#finalthoughts {
	font-size: 8px;
	width:100%;
	padding: 30px 0 70px 0;
	text-align: center;
}
input {
	height: 18px;
	width:200px;
	padding: 6px;
	font-size: 14px;
	border: none;
	.border-radius();
}
input:active {
	outline: none;
}
input[type=submit] {
	background: @medlightcolour;
	color: @lightcolour;
	height: 30px;
	padding: 6px;
	font-size: 12px;
	border: none;
	.border-radius();
}
input[type=submit]:hover {
	background: @wildcolour;
}
#mc_embed_signup label {
	display: none;
}
#mc_embed_signup h2 {
	text-transform: uppercase;
	font-size: 10px;
}
#mc_embed_signup .indicates-required {
	display: none;
}
#mce-EMAIL {
	margin: 6px 0;
	width:180px;
	float: left;
	outline: none;
}
#mc-embedded-subscribe {
	margin: 6px 0;
	width:80px;
}
@media screen and and (max-width: 500px) {
	.primarylink {
		width:100%;
		display: block;
		text-align: center;
	}
}