/* CSS Document */

/*
Theme Name: Lehigh VAlley Humanists
Theme URI: www.ttlgdesign.com
Description: This is the theme for the Lehigh Valley Humanists website
Author: Gregory Nirshberg
Author URI: http://www.ttlgdesign.com/
Tags: green, two columns, fixed width, custom header, widgets
*/


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,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

p + p {
	margin-top:1em;
	margin-bottom:1em;
}

html {
height: 100%;
}
body {
margin:0px auto;
height: 100%;
}

#header {
width:100%;
height:172px;
position:relative;
top:0px;
left:0px;
}

#topLinkBar {
width:100%;
height:22px;
position:relative;
top:0px;
background-color:#b5985a;
}

#topLinks{
position:relative;
width:960px;
height:22px;
margin:0px auto;
}

#topLinks ul, #bottomLinkBar ul {
	position:relative;
	top:0px;
	left:0px;
	margin:0px 0px 0px 0px;
	list-style:none;
	padding: 0px 0px 0px 0px;
}

#topLinks li, #bottomLinkBar li {
	margin: 4px 0px 0px 0px;
	padding: 0px 0px 4px 0px;
	float: left;
}

#topLinks a, #bottomLinkBar a {
	color: #FFFFFF;
	padding: 0px 13px 0px 13px;
	border-right: 1px solid #ffffff;
	text-decoration: none;
	font: normal normal normal 12px/12px Verdana, Geneva, Tahoma, sans-serif;
	margin:0px 0px 0px 0px;
	display: block;
	}

#topLinks a:hover, #bottomLinkBar a:hover {
text-decoration:underline;
}

#headerBar {
width:100%;
height:124px;
position:relative;
background-image:url(images/logoheaderbackground.gif);
background-repeat:repeat-x;
top:0px;
}

#logo {
width:960px;
margin:0px auto;
}

.logo{
	float: right;
	border: 0px;
}

#navBar {
width:100%;
height:24px;
position:relative;
background-color:#3e936b;
top:0px;
}

#nav{
	position:relative;
	width:960px;
	height:24px;
	margin:0px auto;
	border-left: 1px solid #FFFFFF;
        top:0px;
}

#nav ul {
	position:relative;
	top:0px;
	margin:0px 0px 0px 0px;
	list-style:none;
	padding: 0px 0px 0px 0px;
}

#nav li {
	margin: 0px 0px 0px 0px;
	padding: 0px;
	border-right: 1px solid #FFFFFF;
	float: left;

}

#nav a {
	color: #FFFFFF;
	padding: 3px 15px 3px 15px;
	text-decoration: none;
	font-size: 15px;
	margin:0px 0px 0px 0px;
	font-weight: bold;
	display: block;
	text-transform: uppercase;

	}
#nav a:hover {
text-decoration:underline;
}
a {
   text-decoration:none;
   color:#00703c;
}
a:hover {
   text-decoration:underline;
}


#mainContent {
	position:relative;
	width:100%;
	top:0px;
	height:auto;
        min-height: 880px;
	background-image: url(images/rightpanelbackflip.png);
	background-repeat: repeat-x;
	background-position:bottom;

}
#content {
	margin:0px auto;
	width:960px;
	height: auto;
        min-height:880px;
	background-color:#FFFFFF;
	position: relative;
}
#leftPanel {
	position:relative;
	width:580px;
	top:0px;
	left:0px;
	margin: 20px 20px 0px 20px;
}

#sliderContent {
	position:relative;
	top:0px;
	width:576px;
	height:250px;
	border:2px solid #00552d;
	margin-bottom: 20px;
}

.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 576px; /*Width of Carousel Viewer itself*/
height: 250px; /*Height should enough to fit largest content's height*/
background-color:#00703c;
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px; /*margin around each panel*/
width: 556px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
height:230px;
}
.sliderImg {
position:relative;
border:4px ridge #00552D;
}

.panel h2 {
	position:absolute;
	top:0px;
	left:220px;
	color: #FFFFFF;
	font-size:22px;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
}

.panel p {
	position:absolute;
	top:65px;
	left:222px;
	color:#FFFFFF;
	font-size:16px;

	font-family:Arial, Helvetica, sans-serif
	width:330px;
	line-height: 1.3;
	text-align: justify;
	width: 320px;
}

.panel a {
	position:absolute;
	top:185px;
	left:220px;
	text-decoration:none;
	display:block;
	width:80px;
	height:20px;
	background-image: url(images/headerbackground.gif);
	border: 1px solid #00552D;
	color: #FFFFFF;
	padding-left: 5px;
}

#sliderNav{
	height:20px;
	width:576px;
	position:absolute;
	top:230px;
	left:0px;
	background-color: #003E20;
	border-top: 1px inset #00552d;

}
#arrows {
	position:relative;
	top:0px;
	left:470px;
	width: 100px;
}
.arrow {
	margin: 0px 10px;
}
.post {
	position: relative;
	top: 0px;
	width: 580px;
	padding: 20px 0px 35px 0px;
	border-bottom: 1px solid #ccc;
}

.post a {
	text-decoration:none;
	color:#00703c;
}
.post a:hover {
text-decoration:underline;
}

.mainContentImg {
	float: left;
	height: 100px;
	border: 2px solid #00703c;
	padding: 2px;
	background-color: #3e936b;
}
h4 {
	position: relative;
	top: 0px;
	width: 400px;
	left: 20px;
	font-size: 17px;
	margin-left:120px;

}
.mainContentText {
	position: relative;
	top: 10px;
	width: 420px;
	left: 20px;
	margin-left:120px;
	height:80px;
}
p + p {
	margin-top:.5em;

}

.more-link {
font-size:13px;
}
.postmetadata {
position: relative;
top: 30px;
left: 20px;
width: 400px;
font-size:12px;
margin-left:120px;
}
	
#rightPanel {
	position:absolute;
	top:-22px;
	left:620px;
	width:339px;
	margin: 0px 0px 0px 0px;
	background-image: url(images/rightpanelback.gif);
	min-height: 880px;
	height: auto;
        padding-top: 20px;
	border-left: 1px solid #ccc;

}

#tabSelecter {
	position: relative;
	margin: 0px 20px 0px 20px;
	height: 290px;
}
#genericContentArea {
	position: relative;
	top: 20px;
	height: 300px;
	width: 300px;
	margin: 0px 20px 20px 20px;
	border: 1px solid #00703c;
	background-color: #FFFFFF;
}

#genericContent {
	position:relative;
	width:280px;
	height:244px;
	margin: 0px 10px 0px 10px;
	text-align: center;
}
#genericContentArea2 {
	position: relative;
	top: 20px;
	height: 120px;
	width: 300px;
}
#genericArea {
	position:absolute;
	top:0px;
	width:140px;
	left:0px;
	height:100%;
	border:1px solid #00703c;
	background-color: #FFFFFF;

}
#genericArea ul {
	margin:15px 5px 0px 5px;
	display:block;
	left: 0px;
	list-style:none;
	border-top:1px solid #ccc;
}
#genericArea li {
border-bottom:1px solid #ccc;
height:33px;
margin:0px 0px 0px 0px;

}
#genericArea a {
display:block;
text-decoration:none;
padding:0px 0px 5px 5px;
font:Arial, Helvetica, sans-serif;
color:#00703c;
background-color:efeeee;
height: 28px;
font-size:12px;
}
#genericArea a:hover {
background-color:white;
}
#footer {
	position:relative;
	height:200px;
	margin: 0px auto;
	top: -16px;
	width: 100%;
	background-image:url(images/200h.gif);
}

#relatedSites {
	position:relative;
	top:0px;
	width:960px;
	height:100px;
	background-color:#FFFFFF;
	border-top: 1px solid #00703c;
	margin: 0px auto;
}

.relatedImages{
	margin: 5px 30px;

}

#subFooter {
position:relative;
width:960px;
margin:0px auto;
height:100px;
}
#bottomLinkBar{
	position:absolute;
	top:0px;
	left:0px;
	height:30px;
	width:390px;
	margin: 20px 20px 0px 0px;
}
#footerInfo {
	position: absolute;
	top: 0px;
	left: 410px;
	width: 540px;
	margin: 20px 10px 0px 0px;
	height: 30px;
	color:#FFFFFF;
	font-weight:bold;
}
#footerInfo a {
text-decoration:none;
color:#002D00;
}
#footerInfo a:hover {
text-decoration:underline;
}


h3 {
	margin:10px 10px 20px 10px;
	background-image: url(images/26h.gif);
	height: 26px;
	padding: 0px 0px 0px 10px;
	color: #FFFFFF;
}

h5 {
font-size:22px;
color:#00703c;
}
.category-description {
padding-top:10px;
}




.mainContentImg {
	float: left;
	height: 100px;
	border: 2px solid #00703c;
	padding: 2px;
	background-color: #3e936b;
}

.pageText {
	position: relative;
top:0px;
left:0px;
width:580px;
}

.pagemetadata {
position: relative;
top: 30px;
width: 400px;
font-size:12px;
}

#eventDetails {
position:relative;
float:left;
	width:160px;
	border:1px solid #00703c;
	margin-right:10px;
z-index:1;
}

h6 {
	background-image: url(images/26h.gif);
	height: 26px;
	color: #FFFFFF;
	text-align:center;
}

#eventDetails ul {
display:block;
list-style:none;
padding-top:5px;


}
#eventDetails li {
border-bottom:1px solid #ccc;
padding: 0px 5px;
min-height:24px;
}
.post-meta-key {
color:#00703c;
}

img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

.pageContentText {
	position: relative;
	top: 10px;
	width: 580px;
	left: 0px;
}


#humanismBox {
width:550px;
padding:5px;
border: 1px solid #00552d;
margin:10px;
}

.commentlist {
width:550px;
margin-left:30px;

}
#commentform {
margin-left:20px;
}
