/* Basic stuff */

body {
  background: #eee url('images/background.jpg') repeat-x;
	margin: 0 auto;
	padding: 0;
	width: 960px;
	text-align: center;
}

* { margin: 0; padding: 0; }
div.clear { clear: both; }
p { margin: 0 0 15px 0; }
img, a img { border: 0; }

a {
  text-decoration: underline;
	color: inherit;
}

a:hover {
  text-decoration: none;
	color: inherit;
}

a#omasaalem-link {
	display: block;
	text-indent: -9999px;
	position: absolute;
	top: 0;
	left: 0;
	width: 349px;
	height: 120px;
	background: transparent url('images/omasaalem-link.png') no-repeat top left;
}

a#omasaalem-link:hover { opacity: 0.9; }


/* Main text styles */

h2 {
  font: 48px/44px 'Graphik', Helvetica, Arial, Sans-serif;
	color: #fff;
	margin-bottom: 20px;
}

h3 {
  font: bold 18px/22px 'Graphik', Helvetica, Arial, Sans-serif;
	color: #fff;
	margin-bottom: 5px;
}

h4 {
  font: italic 14px/20px 'Locator', Helvetica, Arial, Sans-serif;
	color: #fff;
	margin-bottom: 5px;
}

.calendar h2, .calendar h3, .calendar h4, .contactus h2, .contactus h3, .contactus h4 { color: #000; }


/* Other styles */

#root {
  width: 960px;
	margin: 0 auto;
}

#container {
  margin-top: 75px;
	font-size: 0;
	line-height: 0;
}

#container #box-bg-top {
  width: 960px;
	height: 21px;
	background: transparent url('images/box-bg-top.png') no-repeat top center;
}

#container #box-bg-left {
  width: 28px;
	height: 480px;
	float: left;
	background: transparent url('images/box-bg-left.png') no-repeat top right;
}

#container #box-bg-right {
  width: 32px;
	height: 480px;
	float: left;
	background: transparent url('images/box-bg-right.png') no-repeat top left;
}

#container #box-bg-bottom {
  width: 960px;
	height: 29px;
	background: transparent url('images/box-bg-bottom.png') no-repeat top center;
}

#container #content {
  width: 900px;
	height: 480px;
	float: left;
	background: #fff;
	font: 12px/16px 'Helvetica', Arial, Sans-serif;
	color: #fff;
	position: relative;
}


#container #content.home { background: #fff url('images/container-bgs/bg-main.jpg') no-repeat top left; }
#container #content.church { background: #fff url('images/container-bgs/bg-church.jpg') no-repeat top left; }
#container #content.calendar { background: #fff url('images/container-bgs/bg-calendar.jpg') no-repeat top left; color: #000; }
#container #content.contactus { background: #fff url('images/container-bgs/bg-contactus.jpg') no-repeat top left; color: #000; }
#container #content.jesus { background: #fff url('images/container-bgs/bg-whoisjesus.jpg') no-repeat top left; }

#container #content.taiteiden-yo-2010 { background: #fff url('images/container-bgs/bg-ad-taiteidenyo2010.jpg') no-repeat top left; }
#container #content.alfa { background: #fff url('images/container-bgs/bg-ad-alfakurssi.jpg') no-repeat top left; text-shadow: 1px 2px 10px #000; }


#content #navi {
  position: absolute;
	bottom: 0px;
	left: 0;
	width: 900px;
	height: 85px;
	color: #fff !important;
}

#content #navi h1 {
  margin: 3px 0 14px 0;
}

#content #navi h1 a {
  width: 137px;
	height: 36px;
	margin: 0 auto;
	text-decoration: none;
	background: transparent url('images/saalem-logo.png') no-repeat top center;
  text-indent: -9999px;
	display: block;
}

#content #navi #links {
  font: bold 10px/16px 'Graphik', Helvetica, Arial, Sans-serif;
	text-decoration: none;
	text-transform: uppercase;
}

#content #navi #links a {
  margin-right: 12px;
	padding-bottom: 19px;
	text-decoration: none;
}

#content #navi #links a.last { margin-right: 0; }
#content #navi #links a.active { background: url('images/navi-active.png') no-repeat bottom center; }
#content #navi #links a.active:hover { opacity: 1; }
#content #navi #links a:hover { opacity: 0.7; }


#content-area {
	position: absolute !important;
	width: 780px;
	height: 310px;
  text-align: left;
	overflow: auto;
}

#content-area .smaller-width { width: 500px; }


#teasers {
  font-size: 0;
	padding-left: 3px;
	margin-bottom: 30px;
}

#teasers a {
  text-decoration: none;
	margin-right: 7px;
}

#teasers a:hover img { opacity: 0.75; }



#footer {
  background: #eee url('images/footer-balk.png') no-repeat top center;
	font: 11px/16px 'Helvetica', Arial, Sans-serif;
	color: #9e9e9e;
	padding: 20px 0 0 45px;
	text-align: left;
}

#footer span.copyright { text-shadow: 1px 1px 0 #fff; }



/* Homepage */

.home #events {
  margin: 55px 0 0 75px;
	text-align: left;
	color: #000;
}

.home #events h3 {
  color: #000;
	text-transform: uppercase;
	margin-bottom: 2px;
}

.home #events h4 {
	color: #000;
}

.home #events .one-event {
	float: left;
	width: 265px;
}

.home #events hr {
  border: none;
	height: 1px;
	background: #000;
	width: 760px;
	margin-top: 15px;
}

.one-event h3 a {
  color: #00b9ca !important;
	text-decoration: none;
}

.one-event h3 a:hover { color: #dd2a00 !important; }


.home #welcome-home {
	margin: 95px auto 0 auto;
	border-bottom: 2px solid #000;
	width: 760px;
	padding-bottom: 60px;
}

.home #welcome-home h2 {
	color: #000;
  font: bold 48px 'Locator', 'Graphik', Helvetica, Arial, Sans-serif;
	text-transform: uppercase;
}


/* Calendar */

.calendar .one-event {
	width: 720px;
	background: #fff;
	padding: 10px;
	margin-bottom: 2px;
}

.one-event h3 {
  font-size: 14px;
	line-height: 14px;
}

.one-event h3, .one-event h4 {
	margin: 0;
}

.one-event .what-and-date {
  float: left;
	width: 240px;
}

.one-event .what-and-date p {
    margin-top: 0px;
    padding: 0px;
    margin-bottom: 3px;
}

.one-event .speaker {
  float: left;
  height: 20px;
  width: 215px;
	margin-top: 3px;
  margin-bottom: 3px;
}

.one-event .music {
  float: left;
	width: 215px;
	height: 20px;
	margin-top: 3px;
  margin-bottom: 3px;
	clear: right;
}

.one-event .host {
  float: left;
  height: 20px;
  width: 215px;
  margin-top: 3px;
  margin-bottom: 3px;
}


/* Contact us */

.contactus #basic-infos .one-box {
  background: #fff;
  width: 220px;
  padding: 12px;
  float: left;
  margin-right: 10px;
  height: 125px;
}

.contactus #basic-infos h3, #contacts .one-contact h3, #contacts #donations h4 {
  font-size: 14px;
  text-transform: uppercase;
  margin: 0;
}

.contactus #basic-infos h4, #contacts .one-contact h4, #contacts #donations h4 {
  font-size: 12px;
  margin: 0 0 15px 0;
  line-height: 18px;
}

.contactus #basic-infos p {
  color: #9e9e9e;
  font-size: 11px;
  margin: 0;
}

.contactus #donations {
  margin: 20px 0 0 0;
  padding: 0 0 0 10px;
}

.contactus #donations .one-box {
  background: #fff;
  width: 338px;
  padding: 12px;
  float: left;
  margin-right: 10px;
  height: 19em;
}

.contactus #donations div.data {
  color: #000;
  font-size: 11px;
  margin: 0px 0 0 0;
}

.contactus #donations p {
  color: #000;
  font-size: 11px;
  margin: 10px 0 0 0;
	font-weight: bold;
}

.contactus #donations table {
  border-collapse: collapse; 
  width: 314px;
  color: #000;
  font-size: 11px;
  margin: 0;
}

.contactus #donations .col1 {
  width: 200px;
}

.contactus #donations .col2 {
  width: 114px;
  text-align: right;
}

.contactus #pastor {
  margin: 20px 0 0 0;
  width: 740px;
  padding: 0 0 10px 10px;
  border-bottom: 1px solid #000;
}

.contactus #contacts {
  margin: 20px 0 0 0;
  padding: 0 0 30px 10px;
  border-bottom: 1px solid #000;
}

.contactus .one-group { margin-top: 15px; }
.contactus h3.header { font-size: 20px; margin-bottom: 20px; }

#contacts .one-contact {
  background: #fff;
  width: 160px;
  font-size: 11px;
  padding: 10px;
  float: left;
  margin: 0 5px 5px 0;
}

#contacts .one-contact h3 { line-height: 18px; margin-bottom: 3px; }
#contacts .one-contact h4 { margin-bottom: 5px; line-height: 14px; }
#contacts .one-contact p { margin-bottom: 0; }

.jScrollPaneContainer {
  position: absolute;
  top: 55px;
  left: 70px;
}

.jScrollPaneTrack {
  background: #000;
}
		
.jScrollPaneDrag {
  background: #fff;
}

.jScrollArrowDown {
  background:url("images/scrollbar_down.png") repeat-x scroll 0 0 transparent;
}

.jScrollArrowUp {
  background:url("images/scrollbar_up.png") repeat-x scroll 0 0 transparent;
}