@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,700,600,600italic,700italic,800,800italic|Open+Sans+Condensed:300,300italic,700');
@import url('https://fonts.googleapis.com/css?family=Droid+Sans+Mono');
body { font:14px/22px "Open Sans", sans-serif; color:#333; background:#fff; margin:0; padding:0 }
p, div, h1, h2, h3, h4, h5, input, select, textarea, ul, li, a { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
::-webkit-input-placeholder { color:#aaa }
:-moz-placeholder { color:#aaa }
::-moz-placeholder { color:#aaa }
:-ms-input-placeholder { color:#aaa }
i { font-style:italic }
b { font-weight:bold }
input[type="button"], input[type="submit"], input[type="checkbox"] { -webkit-appearance: none; -webkit-border-radius: 0 }
input, select { padding:5px }
input[type="button"], input[type="submit"], a.button { text-decoration:none; background:#444; border:0; box-shadow:0 0 3px rgba(0,0,0,.3); padding:10px; color:#fff }
a.smbutton { text-decoration:none; background:#444; border:0; box-shadow:0 0 3px rgba(0,0,0,.3); padding:3px 10px; color:#fff }

p, h1, h2, h3, h4, h5 { margin:0 0 15px 0 }
h1 a { text-decoration:none; color:#444 }
h1 { font:bold 20px/26px "Open Sans", sans-serif; color:#444 }
h2 { font:bold 18px/24px "Open Sans", sans-serif; color:#444 }
h3 { font:bold 16px/22px "Open Sans", sans-serif; color:#444 }
h4 { font:16px/22px "Open Sans", sans-serif; color:#444 }
h5 { font:14px/20px "Open Sans", sans-serif; color:#444 }

#logged { width:100%; background:#eee; border-bottom:1px solid #ccc }
#logged div { text-align:right; padding:7px; margin:0 }
#logged input[type="submit"] { padding:4px 9px; border:0; background:#666; color:#fff; border-radius:3px }

input[type="checkbox"] { vertical-align:bottom; margin:0 5px 0 0; height:16px; width:16px; font-size:10px; border-radius:16px; position:relative; background-color:#900 }
input[type="checkbox"]:checked { background-color:green }
input[type="checkbox"]:before, input[type="checkbox"]:checked:before {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	line-height:16px;
	text-align:center;
	color:#fff;
	content: '✘';
}
input[type="checkbox"]:checked:before {
 content: '✔';
}
label { display:block; width:140px; float:left }
label.checkbox { line-height:35px; background:#fff; display:inline-block; cursor:pointer; padding:5px; border:1px solid #000; width:auto; margin:0 5px 5px 0; line-height:16px }
label.checkbox:hover { background:#ddd }

.red {color:red}

#pewsheetdate { float:left }
.dateselect { width:130px; padding:5px }

.info {background:url(/resources/images/info.png) 10px center no-repeat #cfc; margin:0 0 20px 0; border:1px solid #696; width:100%; padding:10px 10px 10px 50px }
.warning { background:url(/resources/images/warning.png) 10px center no-repeat #fcc; margin:0 0 20px 0; border:1px solid #966; width:100%; padding:10px 10px 10px 50px }
.errormessage { color:red }


.calendar { }
.monthouter { padding:0 0.6% 0 0 }
.month { font:18px/26px "Open Sans", sans-serif; background:#aaa; color:#fff; padding:10px; text-align:center; text-transform:uppercase; border-left:2px solid #f9f9f9; border-right:2px solid #f9f9f9 }
.days { font:18px/26px "Open Sans", sans-serif; color:#fff; border-left:2px solid #f9f9f9; border-right:2px solid #f9f9f9  }
.days div { display:inline-block; padding:8px; width:14.2%; background:#666; text-align:center }
.dates { font:14px/14px "Open Sans", sans-serif; color:#666; border:1px solid #f9f9f9 }
.dates a { text-decoration:none; position:relative; display:inline-block; color:#666; background:#ddd; padding:1px 0 32px 0; width:14.2%; text-align:center; border:1px solid #f9f9f9 }
.dates a.prevnext { background:#f0f0f0 }
.dates a.today { box-shadow:inset 0 0 10px #f00 }
.calendarevents { position:absolute; top:15px; left:1px; right:1px; bottom:1px }
.calendarevent { white-space:nowrap; font:7px "Open Sans", sans-serif; color:#fff; background:#666; overflow:hidden; text-align:left; width:100%; padding:1px; margin:0 0 1px 0 }
.upcoming { box-shadow:0 0 3px rgba(0,0,0,.3); padding:10px; background:#ddd }
.upcoming a { text-decoration:none }

.eventsdate { position:relative; background-color:#fff; border-radius:3px; padding:10px; box-shadow:0 0 5px rgba(0,0,0,.3); margin:0 0 20px 0 }
.event { margin:5px 0 5px 50px; padding:10px; box-shadow:0 0 3px rgba(0,0,0,.5) }
.event:hover { background:#f6f6f6 }
.dateiconouter { text-align:center; float:left; margin:0 10px 10px 0 }
.dateicon { box-shadow:0 0 5px rgba(0,0,0,.3); width:40px; margin:0 0 5px 0; background-color:#fff }
.dateday { font-weight:bold; color:#666 }
.datemonth { background-color:#666; font:12px/16px "Open Sans", sans-serif; color:#eee; padding:0 0 2px 0}
.datedd { font:bold 28px/28px "Open Sans", sans-serif }
.dateyear { font:14px/20px "Open Sans", sans-serif; color:#666 }
.date { font:bold 18px/18px "Open Sans", sans-serif; }
.eventname { font:bold 18px/24px "Open Sans", sans-serif; color:#666 }
.eventname a { text-decoration:none; color:#666 }
.eventvenue { font:bold 18px/24px "Open Sans", sans-serif; color:#666  }
.eventvenue a { text-decoration:none; color:#666 }
.eventdescription {  }
.holyday { margin:5px 0 5px 50px; background:#666; padding:10px; font:bold 18px/24px "Open Sans", sans-serif; color:#fff; box-shadow:0 0 3px rgba(0,0,0,.8) }
.servicehymn { padding-left:20px; color:#666; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.servicehymn img { width:16px; height:16px }

.gallery { background:#fff; box-shadow:0 0 5px rgba(0,0,0,.5); overflow:hidden; display:inline-block; height:235px; width:279px; max-width:100%; padding:5px 5px 0 5px; margin:5px }
.galleryphoto { text-align:center; height:205px }
.galleryphoto img { max-width:100%; max-height:197px }
.gallerytitle { float:left; font:bold 13px "Open Sans", sans-serif; color:#666; width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.gallerydate { float:right; text-align:right; font:13px "Open Sans Condensed", sans-serif; color:#666; width:80px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

.gallerysp { background:#fff }
.gallerysppic { text-align:center }
.gallerysppic img { max-width:100% }
.galleryspinfo { font:16px "Open Sans", sans-serif; color:#666; padding:10px }
.galleryspinfo p { margin:0 0 10px 0 }
.galleryspinfo label { font-weight:bold }
.gallerynav { background:#eee; position:relative; height:40px }
.galleryprev { position:absolute; top:5px; left:5px; font:30px/20px "Open Sans", sans-serif }
.gallerynext { position:absolute; top:5px; right:5px; font:30px/20px "Open Sans", sans-serif }
.gallerydel { position:absolute; top:5px; right:65px }
.gallerypub { position:absolute; top:5px; right:115px }
.galleryprev a { text-decoration:none; color:#888 }
.gallerynext a { text-decoration:none; color:#888 }
.disabled { color:#ddd; border-color:#ddd }

.showall { padding:10px 20px; background:#ffe; margin:0 0 20px 0; box-shadow:0 0 3px rgba(0,0,0,.3) }
.box { padding:10px 20px; background:#fff; margin:0 0 20px 0; box-shadow:0 0 3px rgba(0,0,0,.3) }

.mainnews { float:left; width:630px; margin:0 }
.globalnews { float:right; width:220px; margin:0 0 20px 0 }

.globalnewsarticle { box-shadow:0 0 3px rgba(0,0,0,.3); padding:20px; background:#f9f9f9; margin:0 0 20px 0 }
.globalnewsarticle img { height:100px; max-width:200px; margin:0 0 10px 0 }
.globalnewsby { font:14px/20px "Open Sans", sans-serif; color:#999 }
.globalnewsdesc { font:14px/20px "Open Sans", sans-serif }
.globalnewsmore { clear:both; text-align:right }

.newsarticle { padding:20px; background:#fff; border:1px solid #eee; box-shadow:0 0 3px rgba(0,0,0,.3); margin:0 0 20px 0 }
.newsarticle img { max-width:100%; cursor:pointer }
.newsarticle iframe { max-width:100% }
.newsedit { float:right; margin:0 0 10px 20px }
.newsdelete { float:right; margin:0 0 10px 20px }
.newscontent {}
.newssocial { margin:0 0 20px 0 }
.newsabout { clear:both }
.newsabout img { float:left; width:50px; height:50px; border-radius:50%; margin:0 10px 10px 0 }
.newscomments { clear:both; border-left:1px solid #ede; padding-left:20px }
.newscomment { background:#f3f3f3; padding:10px; margin:0 0 15px 0 }
textarea.addcomment { width:100%; height:200px }
.fb-like { float:left; margin:0 5px 0 0 }
.fbshare { float:left; margin:0 5px 0 0; background:#3B5998 url("/resources/images/fb.png") 5px 3px/20px 20px no-repeat; border-radius:5px; padding:3px 10px 3px 30px }
.twshare { float:left; margin:0 5px 0 0; background:#4099FF url("/resources/images/twitter.png") 0 0/28px 28px no-repeat; border-radius:5px; padding:3px 10px 3px 30px }
.fbshare a,.twshare a { text-decoration:none; color:#fff; font:bold 14px/20px sans-serif }
#siteloginregister { width:600px; padding:20px; text-align:center; margin:0 auto 15px auto; background:#fff; box-shadow:0 0 3px rgba(0,0,0,.3); border-radius:3px }
#fbloginbutton { margin:20px 0 0 0 }
#fbloginbutton a { text-decoration:none; color:#fff; font:bold 14px/20px sans-serif; background:#3B5998 url("/resources/images/fb.png") 5px 3px/20px 20px no-repeat; border-radius:5px; padding:6px 10px 6px 30px }
.strike { display:block; text-align:center; overflow:hidden; white-space:nowrap; color:#999; margin:20px 0 }
.strike > span { position: relative; display: inline-block }
.strike > span:before,
.strike > span:after { content: ""; position: absolute; top: 50%; width: 9999px; height: 1px; background:#aaa }
.strike > span:before { right: 100%; margin-right: 15px }
.strike > span:after { left: 100%; margin-left: 15px }

.unapproved { background:#fcc }
.unpublished { background:#ddd }

.sjaddress, .eaddress { border:solid 2px #e9e0e9; background:#fcfcfc; position:relative; margin:0 0 20px 0 }
.sjaddress iframe, .eaddress iframe { position:absolute; right:0; top:0; width:70%; padding:0 0 0 2px; background:#e9e0e9; height:100% }
.sjaddress a, .eaddress a { text-decoration:none }
.title { padding:10px; font-weight:bold }
.telephone { padding:0 0 0 40px; background:url("/images/telephone.png") 10px 3px no-repeat }
.email { padding:0 0 0 40px; background:url("/images/email.png") 10px 3px no-repeat }
.address { padding:0 0 0 40px; background:url("/images/location.png") 10px 3px no-repeat }


.fleft { float:left; margin:0 20px 20px 0 }
.fleft img { width:200px; padding:4px; background:#fff; border-radius:3px; box-shadow:0 0 4px rgba(0,0,0,.4) }
.fright { float:right; width:200px; max-width:30%; margin:0 0 20px 20px }
.fright img { width:200px; max-width:100%; padding:4px; background:#fff; border-radius:3px; box-shadow:0 0 4px rgba(0,0,0,.4) }
.clear { clear:both; height:0; line-height:0 }
.center { text-align:center }
.right { text-align:right }
input.purple { border:0; padding:9px; background:#737; color:#fef; margin:10px 0 }

#wait { display:none; position:fixed; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,.6) }
#waitmessage { margin:30px auto; width:300px; padding:30px 30px 30px 90px; background:#fff url("/resources/images/waiting.gif") 15px center no-repeat }

.fbback { background:#737; padding:10px; text-align:center; font:bold 20px/28px "Open Sans", sans-serif; margin:0 0 20px 0; color:#fff }
.fbback a { text-decoration:none; color:#fff }

.previousnext { text-align:center }
.previousnext a { text-decoration:none; display:inline-block; color:#c9c; font-weight:bold; width:30px; border:1px solid #c9c }

.tiny { height:200px; width:100%; max-width:100% }

.servicerotas { border:1px solid #ccc; border-bottom:0; width:100%; border-collapse:collapse }
.servicerotas tr { vertical-align:top }
.servicerotas th { border-bottom:1px solid #fff; padding:6px }
.servicerotas td { border-bottom:1px solid #ccc; padding:6px }
.servicerotas th { width:130px; background:#ccc; text-align:right }
.servicerotas table td { border:0 }

.video-container { clear:both; position: relative; padding-bottom: 56.25%; height: 0 }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100% }

/*
#presentation { display:none }
#presentation table { border-spacing:1px; width:100% }
#presentation table th { text-align:right; width:50px; padding:3px 6px; font:bold 12px/12px "Open Sans", sans-serif }
#presentation table td { padding:3px 6px; font:12px/12px "Open Sans", sans-serif }
#presentation table td.slide { font-weight:bold }
#presentation table td.subslide { padding:3px 6px 3px 40px; color:#666 }
#presentation table td.audio { padding:0; width:50px }
#presentation table tr.active td, #presentation table tr.active th { background:#666; color:#fff }
*/

.audio i { cursor:pointer }

#presentation { display:none }
#presentation fieldset { border:0; background:#fff; box-shadow:0 0 4px rgba(0,0,0,.4); margin:0 0 15px 0 }
#presentation legend { color:#fff; background:#000; padding:4px 10px }
#presentation .slidepreview { cursor:pointer; float:left; margin:0 5px 5px 0; width:260px; height:155px; padding:4px 4px 5px 4px; background:#ccc; border:1px solid #ccc }
#presentation .slidepreviewactive { cursor:pointer; float:left; margin:0 5px 5px 0; width:260px; height:155px; padding:4px 4px 5px 4px; background:#c00; border:1px solid #c00 }
#presentation .slide, #presentation .slide p, #presentation .slide div { text-align:center; font:9px "Arial", sans-serif; color:#fff; text-shadow:0 0 5px #000 }
#presentation .slide big, #presentation .slide p big, #presentation .slide div big { font:12px "Arial", sans-serif; text-shadow:0 0 5px #000 }
#presentation .slide small, #presentation .slide p small, #presentation .slide div small { font:7px "Arial", sans-serif; text-shadow:0 0 5px #000 }
#presentation .slide { border:1px solid #000; background:#000; height:145px; width:250px; padding:5px }
#presentation .text { position:relative; height:115px; text-align:center; width:240px; margin:0 0 10px 0 }
#presentation .middlealign { position:absolute; top:50%; transform:translateY(-50%); width:240px }
#presentation .bottomalign { position:absolute; bottom:0; width:240px }
#presentation .footer, #presentation .slide .footer { text-align:right; font:9px/9px "Arial", sans-serif }

#prespreview { display:none; position:fixed; top:0; right:0; z-index:999; background:#000; height:225px; width:400px }
#prespreview, #prespreview p, #prespreview div { text-align:center; font:bold 14px "Arial", sans-serif; color:#fff; text-shadow:0 0 5px #000 }
#prespreview big, #prespreview p big, #prespreview div big { font:bold 18px "Arial", sans-serif; text-shadow:0 0 5px #000 }
#prespreview small, #prespreview p small, #prespreview div small { font:12px "Arial", sans-serif; text-shadow:0 0 5px #000 }
#prespreview .slide { border:1px solid #000; padding:10px; height:225px; width:400px }
#prespreview .text { position:relative; height:180px; text-align:center; width:380px; margin:0 0 10px 0 }
#prespreview .middlealign { position:absolute; top:50%; transform:translateY(-50%); width:380px }
#prespreview .bottomalign { position:absolute; bottom:0; width:380px }
#prespreview .footer, #prespreview .slide .footer { text-align:right; font:14px/14px "Arial", sans-serif }

#preload { display:none }

@media screen and (max-width:900px) {
	.mainnews { width:100% }
	.globalnews { width:100%; margin:0 }
}

@media screen and (max-width:650px) {
	#siteloginregister { width:100%; padding:20px; text-align:center; margin:0 auto 15px auto; background:#fff; box-shadow:0 0 3px rgba(0,0,0,.3); border-radius:3px }
}