/* General styles - www.sperling.ca
------------------------------------*/

body {color:#383838; background: url("gfx/body-bg.jpg") repeat; font: normal normal normal 12px/21px Verdana, Arial, Helvetica, sans-serif}

/*---------Header content-----------*/

#header {background: url("gfx/header-bg.png") repeat-x; height:36px}
#header-content {width:960px; margin:0 auto}

/*Search box*/
#search {float:right; width:255px; margin:3px 0 0 0}
#search #search-leftcap {float:left; width:4px; height:23px; background:url("gfx/search-leftcap.png") no-repeat}
#search input#search-text {float:left; width:141px; height:23px; background:url("gfx/search-bg.png") repeat-x; padding:0 4px 0px 4px; margin:0}
#search input#search-button {float:left; width:98px; height:23px; background:url("gfx/search-button.png"); margin:0; cursor:pointer} 
#search #search-rightcap {float:left; width:4px; height:23px; background:url("gfx/search-rightcap.png") no-repeat}

/*Header links*/
#header-links {float:right; padding:6px 10px 0 0}
#header-links a {color:#4b484d; padding:0 5px}
#header-links a:hover {color:#000;text-decoration:underline}

/*Title bar*/
#title-bar {width:960px; margin:0 auto; height:67px; overflow:visible;}
#title-bar #header-title {float:left; margin:9px 40px 0 216px}
#title-bar #header-wheat {float:left; margin:1px 0 0 41px}

/*Header photo*/
#header-photo {width:960px; margin:0 auto; position:relative; z-index:30}/*allows header photo to be position absolutely on the page width*/
#header-photo a {position:absolute; top:-36px; left:-10px; z-index:30}/*note: z-index only works on positioned elements*/

/*---------Nav Bar----------------*/

#nav-bar {width:986px; margin:0 auto; height:45px; z-index:20; position:relative; border:none}

/*---------Main content-----------*/

.right {float:right}
.left {float:left}
#main {width:960px; margin:0 auto; position:relative; top:-12px}
#main h1.section-title {font-size:22px; color:#753e0f; text-shadow: 1px 1px 2px #aaa; margin:4px 0 0 0;  font-weight:bold}
#main h1.section-title a {text-decoration:none;border:none;color:#753e0f}
#main h1 {text-shadow:none; color:#383838; font-weight:bold; font-size:19px; margin:16px 0 18px 0;}
#main h2 {color:#232323; font-size:17px; font-weight:bold; margin:20px 0 16px 0}
#main h3 {color:#232323; font-size:14px; font-weight:bold; line-height: 16px; margin:18px 0 11px 0}
#main p {margin:10px 0 14px 0; color:#232323}
#main a {color: #1c3dcc; border-bottom: 1px dotted #1c3dcc}
#main em {font-style:italic}
#main strong {font-weight:bold}
#main a:hover {color:#5d2d03; border-bottom: 1px solid #5d2d03}
#main ul {margin:0}
#main ul li {background:url("gfx/list-bullet1.png") no-repeat 0 5px; padding:0 0 7px 22px; margin: 0 0 0 22px}
#main ul li ul li {background:url("gfx/list-bullet2.png") no-repeat 10px 11px; margin: 4px 0 0 22px; padding: 0 0 0 21px}
#main ul.program li {background:none}
#main ol {list-style:decimal outside; margin:0 0 0 25px}
#main ol li {padding: 0 0 14px 8px}
#main hr {background: #929D85; height:1px;border:none; margin:10px 0 10px 0}
#main blockquote {font-style:italic;margin:0 80px 0 80px}
#main .address {margin: 0 0 0 26px}

/*sitemap*/
#main a#sperlingca {color: #565656; border-bottom: 0; font-size:14px} /*sitmap www.sperling.ca link*/
#main a#home {font-size:14px;margin-left:12px} /*sitemap homepage link*/
#main a#sperlingca:hover {color: #000000; text-decoration:underline}/*sitmap www.sperling.ca link*/
.column {float: left; margin: 20px; width: 355px}

/*Breadcrumbs*/
#breadcrumb a {background:url("gfx/right-chevron.png") no-repeat right 3px; border: medium none; color: #6a7261; font-size: 11px; padding: 0 20px 0 11px}	
#breadcrumb a.last {background:none}/*remove chevron on the last link*/
#breadcrumb a:first-child {padding:0 19px 0 0}
#breadcrumb a:hover {color:#000; border:none; text-decoration:underline}


/*Panels*/
.panel {overflow: hidden; background: #eff0f0; z-index:4; border:1px solid #b1b4b5; padding: 16px 24px; margin: 0 0 12px 0;
	-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
	-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);}
	
/*Bottom nav links*/
#bottomnav {margin: 4px 0 0 0; text-align:center}
#bottomnav a {text-decoration:underline; border:0; width:200px;}/*width allows 'back to top' to remain centered*/
#bottomnav a:hover {border:0}
#bottomnav #next {float:right; background: url("gfx/arrow-next.png") no-repeat right center; padding:0px 14px 2px 0; text-align:right}
#bottomnav #top {background: url("gfx/arrow-top.png") no-repeat right center; padding:0px 14px 2px 0}
#bottomnav #prev {float:left; background: url("gfx/arrow-prev.png") no-repeat left center; padding:0px 0px 2px 14px; text-align:left}	
#bottomnav .empty #next, #bottomnav .empty #top, #bottomnav .empty #prev {background:none}/*placeholder if no nav link*/
	
/*Home page*/
.layout-home .main-panel {width: 466px; height:400px; float:left}
.layout-home .right-panel {width: 372px; height:400px; float:right}
.layout-home #come-to-sperling {margin:11px 0; padding:6px 59px 18px 37px; text-align:center; background: url("gfx/green-ray-burst.png") no-repeat 13px 0}
.layout-home #come-to-sperling h2 {color: #5d2d03; text-shadow: 1px 1px 1px #bbb; margin: 14px 0 8px 0}
.layout-home #pass-on-word {font-size:14px; text-shadow: 1px 1px 1px #ddd}

/*Ancestors' day panel*/
#ancestors-day {background: #eff0f0 url("gfx/green-ray-burst-lg.jpg") no-repeat}
#ancestors-day h2 {color: #5D2D03; font-size: 18px; font-weight: bold; margin: 3px 0 16px; text-shadow: 1px 1px 1px #bbb}
#main #ancestors-day ul li {margin: 0 0 0 2px}
#ancestors-day strong {text-shadow: 1px 1px 1px #ddd}

/*About pages*/
.layout-about #left-panels {width: 245px; float:left}
.layout-about #left-panels .panel {margin:0 0 16px 0}
.layout-about #main-panels {width: 695px; float:right}
#main p.members {margin: 0 0 12px 24px;}
blockquote#cemetery-history {margin:0 45px 0 45px;}

/*Location map*/
#map {margin: 25px 0 15px 0; width:640px; height:390px; border:2px solid #939B78;
	-webkit-box-shadow:2px 2px 12px rgba(0, 0, 0, 0.3); -moz-box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.3); box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.3)}
#view-larger-map {text-align:center; margin: 0px 0 24px 0}

/*Photos layout*/
.layout-photos .panel h1.section-title {width:265px; float:left}
.layout-photos .panel #breadcrumb {width:400px; float:left; clear:right}
.layout-photos .panel #heading {margin: 0 0 30px 0}

/*Homecoming pages*/
p.thankyou {font-weight:bold; font-size:16px; font-style:italic; text-align:center}
p#letter-address {font-size:10px; line-height:16px}

/*news and events*/
.news #events {width:800px; margin:0 auto}
.news #events .event .date-added{float:left; width: 200px;}
.news #events .event .description{float:left; width:600px}
.news #events .event .description h3{margin: 14px 0 11px}

/*Adventure review*/
.layout-adventure #left-panels {width: 245px; float:left}
.layout-adventure #left-panels .panel {margin:0 0 16px 0}
.layout-adventure #main-panels {margin:0 20px 0 20px; width: 430px; float:left}
.layout-adventure #main-panels .panel {margin:0 0 16px 0; padding: 16px 24px 7px; min-height:762px}
.layout-adventure #right-panels {width: 245px; float:right;}
.layout-adventure #right-panels .panel {padding: 16px 0 9px; min-height: 760px}
.layout-adventure #bottom-panels {width:100%}
.layout-adventure #right-panels img {display:block; margin: 16px 0 32px 20px; border:2px solid #939B78; -webkit-box-shadow:2px 2px 12px rgba(0, 0, 0, 0.3); 
						     -moz-box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.3); box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.3)}
/*Adventure program*/							 
.adventure-program #program {font-style:italic}
.adventure-program #program h2 {font-style:normal}
.adventure-program #program #heading {text-align:center}
.adventure-program #program ul {list-style:none}
.adventure-program #program ul li {background:none; width:250px; display:inline-block}

/*Memorabilia*/
.memorabilia #memorabilia-images {margin:16px 0}
.memorabilia #memorabilia-images img {display:block; float:left; margin: 23px 0 6px 55px;}

/*Contacts*/
.contacts-info #main ul li {background:none;margin: 0 0 0 30px}
.contacts-info #main .address {margin:0 0 0 50px}
.locate-friend #main .fb-txt {float:left; width:150px; margin:10px 0 0 0}
.locate-friend #main .fb-img {float:left; margin: 6px 0 13px 0; -webkit-box-shadow:1px 1px 4px rgba(0, 0, 0, 0.3); 
						     -moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3)}
.locate-friend #main .fb-img:hover {-webkit-box-shadow:1px 1px 4px rgba(0, 0, 0, 0.7); 
						     -moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7)}
.locate-friend #main .fb-img a {border:none}
.locate-friend #main .fb-li {background: url("gfx/list-bullet1.png") no-repeat scroll 0 16px transparent}

/*Photo Gallery*/

#fancybox-title-over{color:#fff; font-size:16px}
.photos #main .gallery a {border:0}
.photos #main .gallery a .caption {border-bottom: 1px dotted #1c3dcc; color: #1c3dcc; font-size:10px; line-height:16px}
.photos #main .gallery a:hover .caption {border-bottom: 1px solid #5d2d03; color: #5d2d03;}
.photos #main .gallery img {margin:0 0 16px 0; border:2px solid #ffffff; 	
			 -moz-box-shadow: 3px 3px 12px 1px #B4B297; /* Firefox */
	         -webkit-box-shadow: 3px 3px 12px 1px #B4B297; /* Safari and Chrome */
	         box-shadow: 3px 3px 12px 1px #B4B297} /* Opera */
.photos #main .gallery div.imgcap {width:125px; height: 170px; margin:20px 51px; float:left; text-align:center}
.photos #main .gallery div.imgcap img {margin:0 0 8px 0}

/*---------Footer------------*/

#footer {width:960px; margin:11px auto 0 auto; padding:12px 0 0 0; border-top:1px solid #96a290;color:#4b484d}
#footer div, #footer a {color:#4b484d}
#footer a:hover {color:#000; text-decoration:underline}
#footer #footer-links {float:right; width:200px}
#footer #footer-links a {padding:0 0 0 7px}
#footer #footer-links a:first-child {padding:0 7px 0 0}
#footer #contacts-sitemap {float:right}
#footer #facebook {float:right; margin:7px 0 0 0}
#footer #facebook img:hover {padding-bottom:5px; border-bottom:1px solid #5C7697}
#footer #footer-info {float:left}
#footer #footer-info div {margin: 0 42px 0 0;float:left}

/*---------Utility-----------*/

/*clearfix*/
.clearfix:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0}
.clearfix {display: inline-block}
html[xmlns] .clearfix {display: block}
* html .clearfix {height: 1%;}