/*
Theme Name: Crossroads
Theme URI: http://aristechmedia.com/
Description: A spectacular theme for independent churches by ArisTech Media.
Author: ArisTech Media
Version: 1.1.8
Tags: black, blue, white, gold, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu (optional)

General comments and license statement (optional).
*/

@import 'styles/wp.css';
@import 'styles/default.css';
@import 'styles/blog.css';
@import 'styles/results.css';

/* =Color Palette
-------------------------------------------------------------
#231f20 - Logo
#b8d1e0 - Text in Header
#d6981d - Orange Highlight
#0a6296 - Header Background
#003054 - Headers & Links
#0094ff - Link Highlight
*/


/* =TopBar
-------------------------------------------------------------*/

#topbar {
	background: #003054 url(images/background-topbar.png);
	height: 45px;
	width: 100%;
	font-size: 15px;
	padding: 0px;
}
	#topbar .container {
		width: 886px;
	}
	#secondary-menu {
		float: left;
		list-style: none;
		margin: 0px;
		padding: 12px 0px;
	}
		#secondary-menu li {
			background: none;
			float: left;
			padding: 0px 0px;
			margin: 0px 0px;
		}
			#secondary-menu a {
				border-left: 1px solid #b8d1e0;
				color: #b8d1e0;
				padding: 0px 15px;
			}
			#secondary-menu li:first-child a {border-left: 0px; padding-left: 0px;}
			#secondary-menu a:hover {color: white;}
	
	#search {
		float: right;
		padding: 6px 0px;
	}
		#search input.text {
			background: url(images/search.png);
			border: 0px;
			width: 300px;
			line-height: 20px;
			height: 20px;
			padding: 5px 5px 5px 30px;
			color: #b8d1e0;
		}
		#search input.text::-moz-placeholder {color: #b8d1e0}
		#search input.text::-webkit-input-placeholder {color: #b8d1e0}

	/* OLD FEATURE */
	#service-time {
		float: right;
		color: #d6981d;
	}
	

/* =Header
-------------------------------------------------------------*/

#header {
	background: url(images/background-page.png) repeat-y center top;
}
#header .flush-container {
	height: 193px;
	position: relative;
}
	#logo {
		font-size: 40px;
		margin: 0px;
	}
		#logo a {
			display: block;
			overflow: hidden;
			padding: 7px 43px;
			text-decoration: none;
		}
			#logo a img {
				float: left;
				height: 136px;
			}
			#logo a span {
				color: #231f20;
				float: left;
				margin: 40px 0px 0px 7px;
			}
	
	#nav {
		position: absolute;
		background: #003054 url(images/background-nav.png) repeat-x left top;
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 43px;
		font-size: 15px;
	}
	
	#menu {
		height: 32px;
		list-style: none;
		margin: 0px;
		overflow: hidden;
		padding: 0px;
		text-transform: uppercase;
	}
		#menu li {
			background: none;
			border-right: 1px solid #095d90;
			display: inline; /* IE6 Float Bug */
			float: left;
			margin: 0px;
			padding: 0px;
		}
			#menu li a {
				border-right: 1px solid #003255;
				color: #b8d1e0;
				display: block;
				line-height: 16px;
				padding: 8px 15px;
				text-decoration: none;
			}
			#menu li.active a {color: #d6981d;}
			#menu li.active a:hover {color: #d6981d;}
			#menu li a:hover {color: white;}
			#menu li a:active {background: url(images/background-nav-active.png) repeat-x;}

/* =Content & Footer
-------------------------------------------------------------*/

#content {
	background: url(images/background-page.png) repeat-y center top;
	padding: 0px 0px 50px;
	border-bottom: 14px solid #4e4e4e;
	min-height: 500px;
}

#footer {
	background: #373737;
	border-top: 1px solid #d6981d;
	font-size: 12px;
	padding: 20px 0px 0px;
}
	#footer * {color: #b8b8b8;}
	#footer a {
		color: #ddd;
		-webkit-transistion: text-shadow 150ms linear;
	}
	#footer a:hover {
		color: #0094FF;
		text-shadow: rgba(0,0,0,.3) 1px 1px 3px;
	}
	#footer ul li {
		background: none;
		padding-left: 0px;
	}
	#footer .columns {
		overflow: hidden;
	}
		#footer .column {
			display: inline;
			float: left;
			width: 220px;
			margin: 0px 3px;
		}
			#footer .column h3 {
				border-bottom: 1px solid #272727;
				margin-bottom: 5px;
				padding-bottom: 5px;
				color: #eee;
				text-shadow: rgba(0,0,0,.3) 2px 1px 1px;
			}
	#footer .legal {
		background: #4e4e4e;
		border-top: 4px solid #2f2f2f;
		padding: 6px 0px;
		overflow: hidden;
	}
		#footer .legal p {
			float: left;
			font-size: 10px;
			margin: 2px 0px;
		}
		#footer .legal ul {
			float: right;
			list-style: none;
			margin: 0px;
		}
			#footer .legal li {
				float: left;
				border-left: 1px solid #ddd;
				padding: 0px 0px 0px 5px;
				margin: 0px 0px 0px 5px;
			}
			#footer .legal li.first {
				border: 0px;
			}

/* =Billboard
-------------------------------------------------------------*/

#billboard {
	overflow: hidden;
	padding: 6px;
}

#banner {
	/*
	display: inline;
	float: left;
	width: 640px;
	margin: 6px 0px 6px 6px;
	*/
	border: 1px solid #003054;
	height: 333px;
	overflow: hidden;
	position: relative;
}
#banner .controls {
	position: absolute;
	top: 0px;
	width: 100%;
	z-index: 3;
}
	#banner .controls a {
		background: url(images/banner-control.png) no-repeat left top;
		float: left;
		overflow: hidden;
		padding-top: 16px;
		width: 16px;
		height: 0px;
	}
	#banner .controls a.active {background-position: 0px -16px;}
#banner .slide {
	background: #e6e6e6 url(images/placeholder.png) center;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#banner .active {
	z-index: 1;
}
	#banner img {
		display: block;
		/*
		width: 640px;
		height: 333px;
		 */
		border: 0px;
	}
	#banner .overlay {
		/* FALLBACK */
		background: rgb(246,246,246);
		filter: alpha(opacity=80);
		
		background: rgba(246,246,246,.6);
		text-shadow: rgba(255,255,255,.5) 1px 1px 2px;
		padding: 10px 25px 10px 20px;
		position: absolute;
		bottom: 0px;
		left: 0px;
		right: 0px;
		/*
		width: 595px;
		*/
		word-wrap: break-word;
	}
	#banner .description {
		color: #003054;
		margin: 0px;
	}

#banner-sidebar {
	/*
	margin: 6px 6px 6px 0px;
	 */
	display: inline;
	float: right;
	padding: 0px;
	position: relative;
	width: 252px;
	height: 335px;
}
	#banner-sidebar h3 {
		background: #0a6296;
		color: white;
		font-weight: normal;
		margin-bottom: 10px;
		padding: 3px 15px;
		text-shadow: rgba(0,0,0,.6) 1px 1px 3px;
	}
	#banner-sidebar .widgets h3 {
		display: none;
	}
	#banner-sidebar .service {
		height: 72px;
		margin-bottom: 8px;
		padding: 5px 0px 5px 15px;
		background: #eee;
		overflow: hidden;
	}
		#banner-sidebar p {margin: 0px;}
		#banner-sidebar .service h5 {margin-bottom: 0px;}
		#banner-sidebar .service .time {margin-bottom: 3px;}
		#banner-sidebar .service .desc {color: #555; }
		#banner-sidebar .live-link {
			background: #003054;
			color: white;
			display: block;
			padding: 2px 15px;
			position: absolute;
			right: 0px;
			bottom: 0px;
			left: 0px;
			text-align: right;
		}

/* =Contact Form
-------------------------------------------------------------*/

#contact-form {
	float: left;
	width: 482px;
}
#contact-form .field label {
	width: 60px;
}

#contact-extra {
	float: right;
	width: 357px;
	border-left: 1px solid #dedede;
	padding-left: 20px;
	margin-left: 20px;
}
#contact-extra .box {
	border-bottom: 1px solid #dedede;
	margin-bottom: 20px;
}
#contact-extra iframe {
	width: 100%;
}
#contact-extra pre {
	font-family: inherit;
}

/* =Structures
-------------------------------------------------------------*/

.container {
	margin: 0px auto;
	width: 880px;
	overflow: hidden;
}
.flush-container {
	margin: 0px auto;
	width: 906px;
	overflow: hidden;
}

.left-divide, .right-divide {
	color: white;
	font-size: 15px;
	font-weight: normal;
	text-transform: uppercase;
	line-height: 35px;
	padding: 0px 16px;
	margin-bottom: 16px;
}
.left-divide {
	background: url(images/left-divide.png) no-repeat left top;
}
.right-divide {
	background: url(images/left-divide.png) no-repeat left top;
	
}

.promos {
	margin: 32px 0px 22px;
	overflow: hidden;
	clear: both;
}
	.promos .column {
		float: left;
		margin: 0px 0px 10px 16px;
		width: 280px;
	}
		.promos .column h3 {
			margin: 0px;
			padding-bottom: 5px;
			border-bottom: 1px solid #dedede;
		}
		.promo {
		}
			.promo img {
				display: block;
				width: 280px;
			}
			.promo .title {
				background: url(images/promo.png);
				color: white;
				display: block;
				width: 230px;
				height: 35px;
				line-height: 35px;
				overflow: hidden;
				padding: 0px 25px;
				text-align: right;
				text-overflow: ellipsis;
				text-transform: uppercase;
				white-space: nowrap;
			}

.primary {
	width: 600px;
	float: left;
	clear: left;
}
.secondary {
	width: 260px;
	float: right;
	clear: right;
}

#sidebar .widget {
	background: url(images/background-sidebar.png) repeat-y left top;
	list-style: none;
	padding-left: 27px;
}
	#sidebar .widget .top {
		background: url(images/background-sidebar-caps.png) no-repeat 0px -40px;
		width: 100%;
		height: 40px;
		padding-left: 27px;
		position: relative;
		left: -27px;
	}
	#sidebar .widget .bottom {
		background: url(images/background-sidebar-caps.png) no-repeat 0px top;
		width: 100%;
		height: 40px;
		padding-left: 27px;
		position: relative;
		left: -27px;
	}
	#sidebar .widget .title {
		margin: 0px;
	}
		#sidebar .widget ul {
			margin: 0px;
			padding: 0px;
			position: relative;
			left: -15px;
		}
			#sidebar .widget li {
				background: none;
				margin: 0px;
				padding-left: 0px;
			}
			#sidebar .widget li a {
				zoom: 1; /* IE fix */
				display: block;
				padding: 10px 0px 10px 30px;
			}
			#sidebar .widget li a:hover {
				background: #f8f8f8;
			}
		#sidebar .widget ul.children {
			list-style: none;
			margin: 0px;
			padding: 0px;
			position: static;
		}
			#sidebar .widget ul.children li { background: none; }
				#sidebar .widget ul.children a {	padding-left: 50px;	}
					#sidebar .widget ul.children ul.children a {	padding-left: 70px;	}
						#sidebar .widget ul.children ul.children ul.children a {	padding-left: 90px;	}
							#sidebar .widget ul.children ul.children ul.children ul.children a {	padding-left: 110px;	}

.columns {
	margin: 10px 0px;
	overflow: auto;
	width: 100%;
}

.column-half {
	display: inline;
	float: left;
	width: 50%;
}
.column-third {
	display: inline;
	float: left;
	width: 33.3%;
}
.column-fourth {
	display: inline;
	float: left;
	width: 25%;
}