/*
+-------------------------------------------------------------------------+
+ wellspring
+ css style
+ gjh@nmm! for clicknathan.com 
+-------------------------------------------------------------------------+
*/

/* global reset ---------------------------------------------------------- */
/* ----------------------------------------------------------------------- */

html, body, div, span, 
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;}

:focus {outline: 0;}

address, caption, cite, code, dfn, th, var { 
	font-style:normal; 
	font-weight:normal; } 

table {
	border-collapse: collapse;
	border-spacing: 0;}

ul {list-style: none;}

caption, th {text-align:left;}

h1, h2, h3, h4, h5, h6 { 
	font-size:100%; 
	font-weight:normal; } 

q:before, q:after,
blockquote:before, blockquote:after {
	content: "";}

/* Additional */
form label {cursor: pointer;}
fieldset {border: none;}
.clear {clear: both;}
.clear-special {clear: both; height: 30px;}
.hide, hr {display: none;}
abbr, acronymn {text-decoration: none; border:0; speak: spell-out;}


/* body styles ----------------------------------------------------------- */
/* ----------------------------------------------------------------------- */
body {
	font-family: "Times New Roman", Times, serif;	
	font-size: 16px;
	background: #fefbec url(../images/shared/bg-stretch.jpg) top center repeat-y;
	color: #000000;
	margin: 0; 
	padding: 0;
	text-align: center;}
	
	a {color: #b14413; text-decoration: underline;}
	a:hover {text-decoration: none;}
	
/* main container--------------------------------------------------------- */
/* ----------------------------------------------------------------------- */
#wellspring {
	width: 856px;
	margin: 0 auto;
	text-align: left;}
	
/* header styles --------------------------------------------------------- */
/* ----------------------------------------------------------------------- */
#header {
	position: relative;
	width: 856px;
	height: 159px; 
	background: url(../images/shared/banner-top.jpg) top left no-repeat;}
	
	#header h1 {text-indent: -5000px;}
		
		#header h1 a {
			display: block;
			width: 372px;
			height: 53px;
			position: absolute;
			top: 66px;
			left:0;
			background:url(../images/shared/logo-wellspring.gif) top left no-repeat;}

/* main navigation */
#navigation-top {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #66676a;
	position: absolute;
	top: 135px;
	left: 36px;}	
	
	#navigation-top li {float: left; padding-right: 25px;}
	
	#navigation-top a {color: #66676a; text-decoration: none; vertical-align:top;}
	#navigation-top a:hover {text-decoration: underline;}
	
/* positioning ----------------------------------------------------------- */
/* ----------------------------------------------------------------------- */
#main-content {
	width: 856px;
	background: url(../images/shared/bg-main.jpg) top left;}

#gutter {
	width: 200px;
	float: right;}

#content {
	width: 656px;
	float: left;
	position: relative;}
	
* html #content {
    margin-top:0px;
}
/* gutter styles --------------------------------------------------------- */
/* ----------------------------------------------------------------------- */
#search {height: 30px;}
#search form {margin: 4px 0 0 6px;}
#search-box {
	width: 96px;
	height: 18px;
	border: 1px solid #6d6968;}

#search-button {
	width: 85px;
	height: 24px;
	border: 0;
	background: transparent url(../images/shared/b-search.jpg) no-repeat center bottom;
	text-indent: -5000px;
	/* cursor: pointer;*/}

#gutter-products {margin: 0 12px 0 6px;}
	#gutter-products h3 {margin-top:2px;}

#gutter h3 {
	font-size: 17px;
	color:#3c3636;
	background: #f4eae9 url(../images/shared/bg-bul.jpg) 3px 8px no-repeat;
	padding: 3px 0 3px 27px;
	margin-bottom: 5px;}
	
	#product-highlight {
		border: 1px solid #a09697;			
		background: #ffffff;
		font-size: 15px;
		color: #3e3838;
		padding: 8px;
		text-align:center;}
		
		#product-highlight img {
			/*float: left;*/
			padding-right: 5px;}
	
	div.product-sub-highlight {
		margin: 10px 12px 10px 6px;
		background: #e1efdd;
		font-size: 15px;
		color: #000000;
		font-weight: bold;
		padding: 8px;
		text-align: center;}
		
		div.product-sub-highlight a {color: #000000; text-decoration: none;}
		div.product-sub-highlight a:hover {color: #000000; text-decoration: underline;}
		
#navigation-sub {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 13px;
	margin: 5px 12px 10px 6px;}
	
	#navigation-sub li {display: inline;}
	
	#navigation-sub a {
		display: block;
		border: 1px solid #ffffff;
		color: #66676a;
		padding: 3px;
		margin: 3px 0 0 3px; /* sets white boxes around gutter prod items*/
		text-decoration: none;}
		#navigation-sub a:hover {background: #fefeff;}

#newsletter-subscribe {margin: 0 12px 0 6px;}

	#newsletter-subscribe label {
		display: block;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 10px;
		text-transform: uppercase;
		margin-bottom: 3px;}
		
	#newsletter-subscribe input {margin-bottom: 5px;}

/* index-content styles -------------------------------------------------- */
/* ----------------------------------------------------------------------- */
#index-primary-content {height: 299px;}
	
	#aisha-kessler {
		width: 181px;
		background: #ffffff;
		text-align: center;
		float: left;}
		
		#aisha-kessler h2 {
			width: 181px;
			height: 218px;
			background:url(../images/sitewide/front-aisha.jpg) top left no-repeat;
			text-indent: -5000px;}

	#wellspring-difference {width: 475px; float: right;}
		
		#difference-text {
		clear: both;
		padding: 5px 15px;
		font-size: 14px;
		color: #070707;}
			
			#welcome-message {
				display: block;
				height: 218px;
				background: url(../images/sitewide/front-welcome.jpg) top left no-repeat;
				text-indent: -5000px;}

#index-secondary-content {height: 120px;}

	#index-secondary-content img {
		float: left; 
		border: 1px solid #666; 
		margin: 0 10px 15px 0;}
		
	#index-secondary-content h3 {		
		font-size: 22px;/*23*/
		color: #ffffff;}
	
	#index-secondary-content p a {
			font-size: 12px;
			font-weight:bold;
			text-decoration: none;
			border:1px black solid;
			background:#495A57; /*Buy CD box bkg color*/
			color:#fff;
			padding:2px;
			}
			/*font-size: 18px*/
			/*font-style:italic;
			color: #0a0909;*/
		#index-secondary-content p a:hover {text-decoration: underline;}

	#dl-secondary-left {
		width: 306px;
		height: 120px;
		padding: 10px;
		float: left;
		background: url(../images/shared/bg-grey.jpg) top left;}
	
	#dl-secondary-right {
		width: 306px;
		height: 120px;
		padding: 10px;
		float: right;
		background: url(../images/shared/bg-grey.jpg) top left;}
		
#why-choose {
	clear: both;
	padding: 7px 0 5px;
	background: url(../images/shared/bg-blue.jpg) top left;}
	
	#why-choose h3 {
		font-size: 17px;
		background: url(../images/shared/bg-bul-blue.gif) 3px 8px no-repeat;
		color: #000000;
		padding: 3px 0 3px 27px;
		margin: 0 43% 5px 0;}
	
	#why-choose ul {
		font-size: 14px;
		margin: 15px 20px;}
		#why-choose li {margin-bottom: 7px;}
	
	#why-choose h4 {
		font-size: 17px;
		background: url(../images/shared/bg-bul-blue2.gif) right 8px no-repeat;
		color: #000000;
		padding: 3px 27px 3px 0;
		margin: 0 0 5px 74%;
		text-align: right;}

#nav-front-third {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-align: center;
	padding: 5px 0 7px;}
	#nav-front-third a {color: #74787c; text-decoration: none;}
	#nav-front-third a:hover {text-decoration: underline;}

#footer {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #ffffff;
	background: url(../images/shared/bg-footer.jpg) top left;
	text-align: center;
	padding: 11px 0;}
	
	#footer a {text-decoration: none; color: #ffffff;}
	#footer a:hover {text-decoration: underline;}

/* sub-content styles ---------------------------------------------------- */
/* ----------------------------------------------------------------------- */
#sub-content {padding: 10px 10px 20px 10px;}

	/* pages with the third audio bar get this style.  this is set in the BODY tag. */
	#sub-w-gutter #sub-content {margin-left: 165px; border: solid #ffffff;}

#sub-content p {
	margin-bottom: .9em;
	line-height: 1.3em;}/*1.5em*/
	p.callout {font-size: 17px; margin: .9em 15px;}

#sub-content h2 {
	font-size: 27px;
	color: #000000;
	margin-bottom: .6em;}

#sub-content h3 {
	font-size: 23px;
	color: #000000;
	margin-bottom: .6em;
	font-weight: bold;}

#sub-content h4 {
	font-size: 18px;
	color: #000000;
	margin: 1.2em 0 .6em;
	font-weight: bold;}
	
#sub-content blockquote{margin: .5em 15px 1em ; line-height: 1.2em;}/*1.5em*/	
	#sub-content blockquote.bq-main{color: #2c4e8f;}

#sub-content ul {
	margin-left: 40px;
	list-style-type:disc;
	margin-bottom: 1em;}
	
#sub-content ol {
	margin-left: 40px;
	margin-bottom: 1em;}
	
/* audio-column styles --------------------------------------------------- */
/* ----------------------------------------------------------------------- */
#audio-column {
	width: 165px;
	position: absolute;
	top:0;
	left:0;
	font-family: Arial, Helvetica, sans-serif;}
	
	#audio-top {
		background: #fbe89e;
		padding: 5px;}
		#audio-top img {
	 		display:block;
			margin-bottom: 5px;}
			
		#audio-top a {
			display: block;
			border: 1px solid #333333;
			padding: 3px 2px;
			color: #333333;
			background: #FFFFFF;
			font-weight: bold;
			font-size: 12px;
			text-align: center;
			text-decoration: none;}
			
				#audio-top a:hover {background: #cccccc;}
			
		#audio-clips h3 {
			background: #99b0c6;
			font-weight: bold;
			font-size: 16px;
			text-align: center;
			padding: 10px;}
			
		#audio-clips dt {
			background: #a3c8e5;
			font-weight: bold;
			color: #5c6972;
			text-align: center;
			padding: 7px;}
			
			#audio-clips dt em {
				display: block; 
				font-weight: normal;
				margin-top: 4px;}
		
		#audio-clips dd {
			background: #d8e0e6;
			text-align: center;
			padding: 5px 0;}
			
			#res {width:400px !important;}
		
	#text-clips p {
		margin: 12px 6px;
		font-family: "Times New Roman", Times, serif;
		font-size: 1.2em;
		padding-bottom: 5px;
		border-bottom: 1px solid #000;}
		#text-clips p.last {border-bottom: none;}
			
/* some special styles */
#content-head {
	width: 100%;
	float: left;
	padding-bottom: 15px;}

div.highlight {
	clear: both;
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
	padding: 15px;
	margin: 10px 20px;
	font-size: 18px;}
		
		#sub-content div.highlight h4 {
		font-size: 18px;
		font-weight: bold;
		margin-top:0;}
	
	.center,
	.audio {text-align: center;}
	
	img[align="left"] {padding: 0 15px 13px 0;}
	img[align="right"] {padding: 0 0 13px 15px;}

/* some specifics that could not be avoided */

.guild,
.contact-box {width: 70%; margin: 15px auto;}

.satisfaction {
	padding: 10px;
	width: 85%;
	border: 2px solid #666;
	margin: 15px auto;
	font-size: .9em;}
		 #sub-content div.satisfaction h4 {margin-top:0;}


.thumb {
	background: url(../images/sitewide/thumb.jpg) #FFFFD8 top left no-repeat;
	padding-left: 55px;
	border:1px #495A57;
	/*padding:3px;*/
	}
	
#disclaimer {font-size: 14px;}
	#disclaimer h3{font-size: 18px; font-weight: strong;}

#logo-gutter {
	display: block;
	margin: 10px 0 10px 25px;}