/*
everything with html.js is for js enabled clients
*/

/*this file here enhances the content.css (everything .content )*/

/* @group Main style adapted for homepage */

body div.contentContainer {width: 100%;}

body div.contentContainer2 {
	max-width: 882px;
	min-width:  441px;
	overflow: hidden;
	margin:  0 auto;
} /* used in thoughts */

#wrapper2 {
	padding:0 20px 0 260px;
}

/* @end */

/* @group FONT STYLE =CONTENT */

div.contentContainer div.content {
	float: left;
	padding: 0 0 40px 25px;
	width: 416px;
	margin-top:  -15px;
	min-height:  200px;
}

div.contentContainer div.content h2 {
	font: 30px/34px 'LeagueGothicRegular', Impact, "Helvetica Narrow", "Helvetica Condensed", 'Arial Narrow', Arial, Helvetica, sans-serif;
	letter-spacing: 0;
	background: #d1cbaa;
	color: white;
	padding: 0.25em 15px;
	margin: 16px 0 20px 15px;
	background-color: transparent;
	background: url(../images/bg-content-h2.png);
	text-decoration: none;
}

div.contentContainer div.content h2 a {
	background: none;
	text-decoration: none;
}

div.contentContainer p,
div.contentContainer ul,
div.contentContainer ol,
div.contentContainer blockquote,
div.contentContainer div.content h3,
div.contentContainer div.content h4,
div.contentContainer div.content h5,
div.contentContainer div.content h6 {margin-left: 30px;}

div.indexImage {
	position: relative;
	padding-top: 15px;
	float: left;
	margin: 0 0 25px 40px;
	width: 180px;
	margin-top: -15px;
	/*border: solid 1px red;*/
	}
div.indexImage span {
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	background: white;
	border: solid 1px black;
	border-bottom: none;
	display: block;
	width: 30px;
	height: 10px;
	padding: 2px 0;
	font-size: 10px;
	line-height: 10px;
	font-weight: bold;
	color: #333;
}

div.indexImage a {
	position: relative;
	display: block;
	overflow: hidden;
	height: 132px;
	width: 180px;
	float: left;
}
div.indexImage a,
div.indexImage a span {
	font: 20px/25px 'LeagueGothicRegular', Impact, 'Helvetica Narrow Bold', 'Arial Narrow Bold', Arial, Helvetica, sans-serif;
 	letter-spacing: 0.03em;
 	line-height: 30px;
 	text-decoration: none;
 	color: #d2cbac;
 	background-color: #363636;
 	text-transform:uppercase;
 	text-align: left;

}
div.indexImage a span {
 	display: block;
 	height: 94px;
 	width: 154px;
 	padding: 28px 12px 8px 12px;
 	border: solid 1px black;
 	zoom:  1;
 }

div.indexImage a img {
	border: solid 1px black;
	float: none;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #363636;
}

div.indexImage a:hover img {
	top: 130px;
	display: none;
 }
 
 
 /*for js enabled: because of the jquery fadein/fadeout*/
html.js div.indexImage a:hover img.hoverHide {
	top: 0;
	left: 0;
	display: block;
 }

div.contentContainer div.content a.more {
	font-weight:  normal;
	font-size: 1em;
	display:  block;
	margin-left:  30px;
	margin-top:  -20px;
	margin-bottom:  1.8em;
/*	text-decoration: none;*/
	
}


div.contentContainer div.content a.more strong {
	font-size: 1.2em;
}

div.contentContainer div.content a.more:hover,
div.contentContainer div.content a.more:hover strong {
	text-decoration: none;
	color:  black;
}

/* @end */

/* @group =MORE =MORETOUGHTS =MOREART */

#wrapper #wrapper2 a.moreThoughts {
		font: 20px/34px 'LeagueGothicRegular', Impact, "Helvetica Narrow", "Helvetica Condensed", 'Arial Narrow', Arial, Helvetica, sans-serif;
		letter-spacing: 0;
		text-transform: uppercase;
		/*background: #d1cbaa;*/
		color: #ada473;
		padding: 0.25em 15px;
		margin: 16px 0 20px 15px;
		display:  block;
		text-decoration:  none;
			
}

#wrapper #wrapper2 a.moreThoughts span {
	display:  block;
	background: url('../images/bg-a-more-thoughts.png') no-repeat 170px -3px;
	padding: 5px 0;
	border-bottom: 1px solid #d2cbac;
	border-top: 1px solid #d2cbac;
	font-weight: normal;
	letter-spacing: 0.05em;
}

#wrapper #wrapper2 a.moreThoughts:hover span {
	background-position: 170px -53px;
	color:  #000;
	border-color: #890909;
}

/* @end */

/* @group =PAGER */

div#pager {
	display:  block;
	padding: 5px 0;
	border-bottom: 1px solid #d2cbac;
	border-top: 1px solid #d2cbac;
	font-weight: normal;
	letter-spacing: 0.05em;
	font: 20px/34px 'LeagueGothicRegular', Impact, "Helvetica Narrow", "Helvetica Condensed", 'Arial Narrow', Arial, Helvetica, sans-serif;
	letter-spacing: 0;
	text-transform: uppercase;
	padding: 0.25em 15px;
	margin: 0 auto 20px auto;
	display:  block;
	background-color: #f4eddb;
}

.rgba div#pager {
	background-color: rgba(244, 237, 219, 0.5);
}

div#pager:hover {
	border-color: #8f875b;
}

div#pager.contentContainer2 a {
	text-decoration:  none;
	color: #ada473;
	color: #8f875b;
	display:  block;
}
div#pager.contentContainer2 a:hover {
	color:  #000;
}

div#pager.contentContainer2 a.back {
	float:  left;
	padding-left: 100px;
	width:  100px;
	background: url('../images/bg-a-pager-back.png') no-repeat 30px -8px;
}
div#pager.contentContainer2 a.back:hover {
	background-position: 30px -58px;
}
div#pager.contentContainer2 a.forward {
	float:  right;
	width:  166px;
	text-align: right;
	padding-right:  55px;
	background: url('../images/bg-a-pager-forward.png') no-repeat 160px -8px;
}
div#pager.contentContainer2 a.forward:hover {
	background-position: 160px -58px;
}

/* @end */

/* @group =MOREART */

#wrapper div.indexImage.moreArt a,
 #wrapper div.indexImage.moreArt a span {
	color: #ada473;
	letter-spacing: 0.05em;
	background-color:  #f4eddb;
	background: url('../images/bg-a-more-art.png') no-repeat 120px 18px  #f4eddb;
	margin-left: 0px;
	border-color: #ada473;
	font: 20px/34px 'LeagueGothicRegular', Impact, "Helvetica Narrow", "Helvetica Condensed", 'Arial Narrow', Arial, Helvetica, sans-serif;
/*	font: 25px/34px 'LeagueGothicRegular', Impact, "Helvetica Narrow", "Helvetica Condensed", 'Arial Narrow', Arial, Helvetica, sans-serif;*/
 }

.rgba #wrapper div.indexImage.moreArt a,
 .rgba #wrapper div.indexImage.moreArt a span {
 	background: url('../images/bg-a-more-art.png') no-repeat 120px 18px rgba(244, 237, 219, 0.3);
 }
 

#wrapper div.indexImage.moreArt a:hover,
#wrapper div.indexImage.moreArt a:hover span {
	color: #000;
	/*background-color: #f4eddb;*/
	background-position: 120px -112px;
	border-color: #890909;
 }


 #wrapper div.indexImage.moreArt.back a,
  #wrapper div.indexImage.moreArt.back a span {
	text-align:  right;
	background-image: url(../images/bg-a-back-art.png);
	background-position: 5px 18px;
}

#wrapper div.indexImage.moreArt.back a:hover,
#wrapper div.indexImage.moreArt.back a:hover span {
	background-position: 5px -112px;
 }

/* @end */