/** general **/
body {padding:0px; margin:0px 0px 0px 0px; background:#f4f2eb url(images/bkgd.jpg) center top; background-repeat:repeat-x; font-family:Arial,Helvetica; font-size:12px; line-height: 16px; color:#4b4a4a;}
img{border:0px;}
h1{font-family:Arial,Helvetica; font-size:25px; padding:0px; margin:0px; line-height:35px; color:#715a40; font-weight:normal;}
h2{font-family:Arial,Helvetica; font-weight:bold; font-size:16px; padding:0px 0px 10px 0px; margin:0px; line-height:25px; color:#715a40;}
h3{font-family:Arial,Helvetica; font-weight:bold; font-size:16px; padding:0px 0px 0px 0px; margin:0px; line-height:20px; color:#715a40;}
h4{font-family:Arial,Helvetica; font-weight:bold; font-size:12px; padding:0px 0px 0px 0px; margin:0px; line-height:20px; color:#715a40;}
h5{font-family:Arial,Helvetica; font-weight:normal; font-size:16px; padding:0px 0px 0px 0px; margin:0px; line-height:20px; color:#715a40;}
p{margin:0px; padding:0px 0px 20px 0px;}
ul{list-style:disc; padding-left:0px; padding:0px; margin:0px 0px 0px 15px;}
ul li{padding-left:0px;}

a{color:#b60000;}

/** structure **/
#website{width:1000px; margin:0px auto 0px auto; padding:0px 0px 50px 0px; background:#ffffff;}


/** header **/
#header {width:1000px; padding:0px; height:170px; background:url(images/red-bkgd.gif) no-repeat right top; position: relative; z-index: 9000;}
#header .logo {margin:0px 0px 0px 0px; padding: 13px 0px 0px 24px; height:88px; width:160px;}
#header .address {margin:0px 0px 0px 0px; font-size:10px; font-weight:normal; color:#857561; padding: 5px 0px 0px 24px; height:60px; width:160px;}

#donateicon {display:block; width:80px; padding:0px; height:38px; position: absolute; left:350px; top:48px;}
#donateicon a {position: absolute;left:0px; top:0px; color:#feea86; text-decoration:none;}
#donateicon .text {width:40px; font-size:11px; font-weight:bold; color:#feea86; position:absolute; top:5px; left:40px; display:block;}
#donateicon .go {position:absolute; top:5px; left:90px;}


#calendaricon {display:block; width:150px; padding:0px; height:38px; position: absolute; left:520px; top:48px;}
#calendaricon a {position: absolute;left:0px; top:0px; color:#feea86; text-decoration:none;}
#calendaricon .text {width:40px; font-size:11px; font-weight:bold; color:#feea86; position:absolute; top:5px; left:40px; display:block;}
#calendaricon .go {position:absolute; top:5px; left:107px;}

#emailupdates {display:block; width:300px; padding:0px; height:38px; position:absolute; left:700px; top:48px;}
#emailupdates .text {width:80px; font-size:11px; font-weight:bold; color:#feea86; position:absolute; top:5px; left:0px; display:block;}
#emailupdates .go {position:absolute; top:5px; left:90px;}

#socialmedia {display:block; width:110px; padding:0px; height:38px; position: absolute; left:865px; top:53px;}
#socialmedia .fb {width:37px; height:32px; position:absolute; top:0px; left:0px;}
#socialmedia .tw {width:37px; height:32px; position:absolute; top:0px; left:37px;}
#socialmedia .yt {width:32px; height:32px; position:absolute; top:0px; left:74px;}

#cssdropdown, #cssdropdown ul {padding:0; margin:0; list-style:none; z-index:7000;}
#cssdropdown li {float:left; position:relative; z-index:6000;}
.mainitems {border:0px; background:none; color:#ffe01a; font-size:14px; padding:0px 5px 28px 5px;}
.mainitems a {color:#ffffff; font-size:11px; font-weight:bold; width:100%; text-decoration:none;}
.mainitems a:hover {color:#feea86; font-size:11px; font-weight:bold; width:100%; text-decoration:none;}

.subuls {display:none; width:120px; position:absolute; left:0px; top:30px; padding: 0px 0px 0px 0px; background-color: #7e392a; z-index:100;}
.subuls li{width:100px; padding: 5px 10px 5px 10px; border-top: 1px solid #ba2a17;}
.subuls li:hover {background-color:#67291c;}
.subuls li a{text-decoration: none; font-weight:normal;}
.subuls li a:hover {color:#feea86; font-size:11px; font-weight:normal; width:100%; text-decoration:none; background-color:#67291c;}

.nav-divider {color:#ba2a17; margin:0px 2px 0px 2px;}

#cssdropdown li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top:28px; left:-7px; z-index:5000; padding: 0px 0px 0px 0px; }

#cssdropdown li:hover ul, li.over ul { /* lists nested under hovered list items */ display: block;}
#nav {display:block; width:748px; height:48px; padding:0px; position:absolute; top:108px; left: 250px; z-index: 8000;}


.subnav {display:inline; position:relative; left:-12px; top:0px; padding: 0px 0px 0px 0px;}
.subnav li{display:inline; width:100px; padding: 5px 10px 5px 10px; }
.subnav li a{text-decoration: none; font-weight:bold;}
.subnav li a:hover {color:#cbb44e; font-size:12px; font-weight:bold; width:100%; text-decoration:none;}


/** content **/
#content {display:block; width:1000px; padding:0px; background:#ffffff; position:relative;}
#content .leftquote {float:left; font-family:Arial,Helvetica; font-size:15px; line-height:25px; font-style:italic; color:#857561; display:block; width:160px; background:url(images/tower-bkgd.gif) no-repeat left top #ffffff; padding:310px 0px 0px 20px;}
#content .quotename {font-family:Arial,Helvetica; font-size:11px; line-height:25px; font-weight:bold; font-style:normal; text-align:right; color:#857561; display:block;}
#content .main {display:block; width:733px; padding:0px 50px 0px 0px; float:right; }
#content .homecopy {font-family:Arial,Helvetica; font-size:11px; line-height:14px; display:block; width:340px; position:relative; padding:20px 20px 20px 9px; }
#content .whatsnew {display:block; font-size:11px; width:205px; position:absolute; left:570px; top:295px; padding:20px 20px 20px 9px;}

font.needquote {font-family:Arial,Helvetica; font-size:15px; line-height:20px; font-style:italic; color:#857561;}
font.needname {font-family:Arial,Helvetica; font-size:11px; line-height:25px; font-weight:bold; font-style:normal; text-align:right; color:#857561;}


#content .indent {padding:20px 20px 20px 50px;}
#content .rsvpform {padding:20px 20px 20px 20px; background: #f3e59e;}
#content .newsarchive {float:right; font-family:Arial,Helvetica; font-size:11px; display:block; width:250px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 20px; }
#content .rightbox {float:right; font-family:Arial,Helvetica; background:#e3d48d; font-size:11px; display:block; width:220px; margin: 0px 0px 20px 20px; padding:20px 20px 20px 20px; }
#content .instructor {float:right; font-family:Arial,Helvetica; background:#e3d48d; font-size:11px; display:block; width:220px; margin: 0px 0px 20px 20px; padding:20px 20px 20px 20px; }
#content .small {font-family:Arial,Helvetica; font-size:10px; line-height:12px;}
#content .img {padding: 0px 0px 20px 50px;}
#content .opening {padding: 0px 0px 0px 0px;}
#content .ssfs {padding: 0px 30px 30px 0px; width: 33%;}
#content .ssfs3 {padding: 0px 0px 30px 0px; width: 33%;}
#content .secondsunday {padding: 20px 20px 0px 20px; background-color: #000000;}
#content .ssfs-date { color: #e5d794; font-family:Arial,Helvetica; font-size:20px; line-height:22px;}
#content .ssfs-date-small { color: #e5d794; font-family:Arial,Helvetica; font-size:10px; line-height:20px;}
#content .ssfs-feature { color: #ffffff; font-family:Arial,Helvetica; font-size:12px; line-height:15px;}

 .calendar {display:block; width:180px; position:absolute; left:807px; top:300px; padding:20px 20px 20px 9px; }
font.trisec {
	font-family: arial, helvetica, sans-serif;
	font-size: 14px;
	line-height: 16px;
	color: #8a7a67; 
}
font.date {
	font-family: arial, helvetica, sans-serif;
	font-size: 17px;
	line-height: 19px;
	color: #ba2a17; 
	font-weight: bold;
}
font.invited {
	font-family: arial, helvetica, sans-serif;
	font-size: 11px;
	line-height: 14px;
	color: #7e6d58; 
	font-weight: bold;
}



font.medium {
	font-family: arial, helvetica, sans-serif;
	font-size: 11px;
	line-height: 14px;
	color: #000000; 
}

/** footer **/

#footer{display:block; width:1000px; padding:20px; margin:30px auto 30px auto; position:relative;}
#footer .footer-links{text-align:center; color:#4f0303; font-size:10px; line-height:17px;}
#footer .footer-links li {display:inline; padding:0px;}
#footer .footer-links li span {padding:0px 4px;}
#footer .footer-links li span.copyright{padding:0px 0px 0px 15px;}
#footer .footer-links li a {color:#4f0303; font-size:10px;}

#horizon {display:block; position:relative; top:0px; left:10px; width:765px; height:267px; overflow:hidden;}

#yellowline {display:block; width:783px; padding:0px; height:38px; position: relative; left:0px; top:270px;}
#yellowline2 {display:inline; width:783px; padding:50px 0px 0px 0px; height:38px; position:relative; }

a.white {color:#ffffff; text-decoration:none;}
a.white:hover {color:#ffe35e; text-decoration:none;}

/*
 *
 *	upcoming events 
 *	
 */

#upcoming-slider							{ height: 267px; overflow: hidden; position: relative; }
#upcoming-slider .upcoming-slider-wrap		{ overflow: hidden; margin: 0 33px; position: relative; height: 267px; }

#upcoming-slider .slider-nav				{ position: absolute; display: block; top: 0; width: 33px; height: 267px;  cursor: pointer; display: none; }
#upcoming-slider .slider-nav.unbound		{ cursor: default; zoom: 1; filter: alpha(opacity=25); opacity: 0.25; }
#upcoming-slider .prev						{ left: 0; background: url(images/prev.png) center 90px no-repeat; }
#upcoming-slider .next						{ right: 0; background: url(images/next.png) center 90px no-repeat; }

#upcoming-slider .slider					{ padding: 0; margin: 0; overflow: hidden; position: absolute; top: 0; left: 0; }
#upcoming-slider .slider li					{ width: 166px; height: 267px; list-style: none; float: left; margin: 0 11px 0 0; }

#upcoming-slider .slider li a				{ position: relative; display: block; width: 166px; height: 170px; }
#upcoming-slider .slider li a .border		{ background: #dcc971; display: none; position: absolute; }
#upcoming-slider .slider li a .top			{ width: 156px; height: 5px; top: 0; left: 5px; }
#upcoming-slider .slider li a .right		{ width: 5px; height: 170px; top: 0; right: 0; }
#upcoming-slider .slider li a .bottom		{ width: 156px; height: 5px; bottom: 0; left: 5px; }
#upcoming-slider .slider li a .left			{ width: 5px; height: 170px; top: 0; left: 0; }

#upcoming-slider .slider li .event			{ display: block; color: #b60000; font-size: 18px; padding: 10px 15px 5px; }
#upcoming-slider .slider li .date			{ display: block; color: #857561; font-size: 14px; padding: 0px 15px; }

/*
 *
 *	flickr gallery
 *	
 */
 
 .flickr-gallery							{ border: 1px solid #F4F2EB; }
 .flickr-gallery .thumbnails				{ position: relative; overflow: hidden; padding: 0 50px; position: relative; height: 100px; }
 
 .flickr-gallery .gallery-nav				{ position: absolute; display: block; top: 0; width: 50px; height: 100px; z-index: 2; cursor: pointer }
 .flickr-gallery .prev						{ background: url(images/prev.png) center center no-repeat #fff; left: 0; }
 .flickr-gallery .next						{ background: url(images/next.png) center center no-repeat #fff; right: 0; }
 .flickr-gallery .gallery-nav.unbound		{ cursor: default; background-image:none; }
 
 .flickr-gallery .thumbnails .track			{ height: 100px; position: absolute; top: 0; left: 50px; }
 .flickr-gallery .thumbnails .track a		{ display: block; width: 75px; height: 75px; margin: 10px 5px 15px!important; float: left!important; background: url(images/loading.gif) center center no-repeat; }
 .flickr-gallery .thumbnails .track img		{ width: 75px; height: 75px; display: block; }
 
 .flickr-gallery .main-image				{ height: 640px; padding: 0 0 30px; position: relative; }
 .flickr-gallery .main-image img			{ display: block; visibility: hidden; position: absolute; top: 50%; left: 50%; }
 .flickr-gallery .main-image img.active		{ visibility: visible; }
 
 
 
 
 
 
 
 
 @media screen and (max-width: 480px){
 
	body										{ background: none; }
	#website									{ width: auto; overflow: hidden; }
	
	/* header */
	#header										{ background: url(images/mobile/header-bg.jpg) center bottom no-repeat;  width: auto; height: 398px; margin: 0 0 20px; }
	#header .logo								{ padding: 0; margin: 10px 0 10px 10px; float: left; }
	#header .address							{ padding: 0; margin: 40px 10px 0 0; width: 110px; float: right; }
	
	#nav										{ position: absolute; bottom: 40px; left: 0; top: auto; background: #564b3e; background: rgba(86, 75, 62, 0.5); width: auto; height: auto; padding: 10px; }
	#nav #cssdropdown > li						{ display: none; }
	#nav #cssdropdown li.mainitems				{ width: 50%; padding: 0; display: block; position: inherit; }
	#nav #cssdropdown li.mainitems a			{ display: block; padding: 2px 10px; width: auto; }
	#nav #cssdropdown li.mainitems a:hover		{ width: auto; }
	#nav #cssdropdown .subuls					{ width: 100%; left: 0; top: 120px; border-top: 1px solid #BA2A17; padding: 0px; background: #f4f2eb; box-shadow: 0 10px 10px rgba(0,0,0,0.5); }
	#nav #cssdropdown .subuls:before			{ content: ""; display: block; border: 10px solid transparent; border-bottom: 10px solid #f4f2eb; position: absolute; left: 50%; top: -20px; width: 0; height: 0; margin: 0 0 0 -10px; }
	#nav #cssdropdown .subuls li				{ float: left; width: 50%; border-top: 0; background: #f4f2eb; padding: 0; }
	#nav #cssdropdown .subuls li a				{ width: auto; color: #B60000; font-size: 12px; padding: 10px 20px; }
	#nav #cssdropdown .subuls li a:hover		{ width: auto; color: #B60000; background: none; }
	
	.subnav .subnav								{ display: block; position: inherit; left: auto; top: auto; margin: 0; }
	.subnav .subnav li							{ display: block; width: auto; padding: 5px 0; }
	
	
	#donateicon									{ position: absolute; top: 132px; left: 10px; }
	#donateicon a img							{ display: block; margin: 0 0 0 -9px; }
	#donateicon .text							{ margin: 0 0 0 -6px; }
	#donateicon .go								{ left: 98px; }
	#calendaricon								{ position: absolute; top: 132px; left: 160px; }
	#emailupdates								{ position: absolute; top: 180px; left: 10px; }
	#socialmedia								{ position: absolute; top: 185px; left: 160px; }
	
	
	/* content */
	#content									{ width: auto; }
	#content .leftquote							{ display: none; }
	#content .main								{ width: auto; float: none; padding: 0; }
	#content .main img							{ width: 100%; float: none; display: block; margin: 0 auto; padding: 0; }
	#content .main img.full-width				{ width: 100%; }
	#content .main table img					{ width: auto; float: left; }
	
	#horizon									{ width: auto; left: auto; }
	#yellowline2								{ display: block; width: 480px; overflow: hidden; background: url(images/mobile/tan-distressed-border.jpg) bottom center no-repeat; margin: 0 0 0 -15px; padding: 0; }
	#yellowline2 img							{ display: none!important; }
	
	#content .main								{ padding: 0 15px; }
	#content .homecopy							{ width: auto; padding: 0; }
	#content .whatsnew							{ position: relative; top: auto; left: auto; width: auto; padding: 0; }

	#content .rightbox,
	#content .instructor						{ float: none; margin: 0 0 20px; width: auto; }
	
	iframe										{ width: 100%!important; }
	
	table										{ width: 100%; }
	tr, td										{ display: block; width: 100%; }
	
	.donors,
	.donors tr,
	.donors td									{ display: block; }
	.donors ul									{ margin-bottom: 20px; }
	
	.whatsnew table tr,
	.whatsnew table td							{ display: block; width: auto; }
	
	/* footer */
	#footer										{ width: auto; background: url(images/mobile/footer-nav-bg.jpg) center top no-repeat #f4f2eb; margin-bottom: 0; }

}

 @media screen and (-webkit-min-device-pixel-ratio: 1.5){
 
 	
	body										{ background: none; line-height: 32px; font-size: 24px; }
	#website									{ width: auto; overflow: hidden; }
	
	/* general type */
	h1											{ font-size:50px; line-height:70px; }
	h2											{ font-size:32px; line-height:50px; }
	h3											{ font-size:32px; line-height:40px; }
	h4											{ font-size:24px; line-height:40px; }
	h5											{ font-size:32px; line-height:40px; }
	p											{ padding:0px 0px 40px 0px; }
	ul											{ margin:0px 0px 0px 30px; }
	ul li										{}
	
	
	/* header */
	#header										{ background: url(images/mobile/header-bg.jpg) center bottom no-repeat; background-size: 100%;  width: auto; height: 796px; margin: 0 0 20px; }
	#header .logo								{ padding: 0; margin: 20px 0 20px 20px; float: left; width: 320px; height: 176px; }
	#header .logo img							{ width: 100%; }
	#header .address							{ padding: 0; margin: 80px 20px 0 0; width: 220px; height: 120px; float: right; font-size: 20px; }
	
	#nav										{ position: absolute; bottom: 80px; left: 0; top: auto; background: #564b3e; background: rgba(86, 75, 62, 0.5); width: auto; height: auto; padding: 20px; }
	#nav #cssdropdown > li						{ display: none; }
	#nav #cssdropdown li.mainitems				{ width: 50%; padding: 0; display: block; position: inherit; }
	#nav #cssdropdown li.mainitems a			{ display: block; padding: 4px 20px; width: auto; font-size: 22px; }
	#nav #cssdropdown li.mainitems a:hover		{ width: auto; }
	#nav #cssdropdown .subuls					{ width: 100%; left: 0; top: 240px; border-top: 1px solid #BA2A17; padding: 0px; background: #f4f2eb; box-shadow: 0 20px 20px rgba(0,0,0,0.5); }
	#nav #cssdropdown .subuls:before			{ content: ""; display: block; border: 20px solid transparent; border-bottom: 20px solid #f4f2eb; position: absolute; left: 50%; top: -40px; width: 0; height: 0; margin: 0 0 0 -20px; }
	#nav #cssdropdown .subuls li				{ float: left; width: 50%; border-top: 0; background: #f4f2eb; padding: 0; }
	#nav #cssdropdown .subuls li a				{ width: auto; color: #B60000; font-size: 24px; padding: 20px 40px; }
	#nav #cssdropdown .subuls li a:hover		{ width: auto; color: #B60000; background: none; }
	
	.subnav .subnav								{ display: block; position: inherit; left: auto; top: auto; margin: 0; }
	.subnav .subnav li							{ display: block; width: auto; padding: 10px 0; }
	
	
	#donateicon									{ position: absolute; top: 264px; left: 20px; width: 160px; height: 76px; }
	#donateicon a img							{ display: block; margin: 0 0 0 -18px; width: 82px; }
	#donateicon .text							{ top: 10px; left: 65px; font-size: 22px; }
	#donateicon .go								{ left: 196px; top: 10px; width: 64px; }
	
	#calendaricon								{ position: absolute; top: 264px; left: 320px; width: 300px; height: 76px; }
	#calendaricon .text							{ font-size: 22px; width: 80px; top: 10; left: 80px; }
	#calendaricon a img							{ width: 76px; }
	#calendaricon .go							{ width: 64px; top: 10px; left: 214px; }
	
	#emailupdates								{ position: absolute; top: 360px; left: 20px; height: 76px;  }
	#emailupdates .text							{ width: 160px; font-size: 22px; top: 10px; }
	#emailupdates .go							{ width: 64px; top: 10px; left: 180px; }
	
	#socialmedia								{ position: absolute; top: 375px; left: 320px; }
	#socialmedia img							{ width: 64px; height: 64px; }
	#socialmedia .fb							{ width: 64px; height: 64px; }
	#socialmedia .tw							{ width: 74px; height: 64px; left: 74px; }
	#socialmedia .yt							{ width: 64px; height: 64px; left: 148px; }
	
	
	/* content */
	#content									{ width: auto; }
	#content .leftquote							{ display: none; }
	#content .main								{ width: auto; float: none; padding: 0 30px;}
	#content .main img							{ width: 100%; float: none; display: block; margin: 0 auto; padding: 0; }
	#content .main img.full-width				{ width: 100%; }
	#content .main table img					{ width: auto; float: left; }
	
	#horizon									{ width: auto; left: auto; height: 534px; }
	#yellowline2								{ display: block; width: 960px; height: 76px; overflow: hidden; background: url(images/mobile/tan-distressed-border.jpg) bottom center no-repeat; background-size: 100%; margin: 0 0 0 -30px; padding: 0; }
	#yellowline2 img							{ display: none!important; }
	
	#upcoming-slider							{ height: 534px; }
	#upcoming-slider .slider-nav				{ width: 66px; height: 534px; }
	#upcoming-slider .prev,
	#upcoming-slider .next						{ background-position: center 180px; background-size: 22px 40px; }
	#upcoming-slider .upcoming-slider-wrap		{ margin: 0 66px; height: 534px; }
	#upcoming-slider .slider li					{ width: 332px; height: 534px; margin: 0 22px 0 0; }
	#upcoming-slider .slider li a				{ width: 332px; height: 340px; }
	#upcoming-slider .slider li img				{ width: 332px; height: 340px; }
	#upcoming-slider .slider li .event			{ font-size: 36px; padding: 20px 30px 10px; }
	#upcoming-slider .slider li .date			{ font-size: 28px; padding: 0 30px; }
	
	#content .homecopy							{ width: auto; padding: 0; font-size: 22px; line-height: 28px; }
	#content .whatsnew							{ position: relative; top: auto; left: auto; width: auto; padding: 0; font-size: 22px; }
	#content .whatsnew img						{ width: 436px!important; }
	#content .rightbox,
	#content .instructor						{ float: none; margin: 0 0 40px; width: auto; font-size: 22px; padding: 40px; }
	
	iframe										{ width: 100%!important; height: 600px; }
	
	table										{ width: 100%; }
	tr, td										{ display: block; width: 100%; }
	
	.donors,
	.donors tr,
	.donors td									{ display: block; }
	.donors ul									{ margin-bottom: 40px; }
	
	.whatsnew table tr,
	.whatsnew table td							{ display: block; width: auto; }
	
	/* footer */
	#footer										{ width: auto; background: url(images/mobile/footer-nav-bg.jpg) center top no-repeat #f4f2eb; padding: 40px; margin: 60px auto 0; }
	#footer .footer-links						{ font-size: 20px; line-height: 34px; }
	#footer .footer-links li a					{ font-size: 20px; }
	
	
	/*
	 *
	 *	flickr gallery
	 *	
	 */
	 
	 .flickr-gallery							{ border: 2px solid #F4F2EB; }
	 .flickr-gallery .thumbnails				{ padding: 0 100px; height: 200px; overflow }
	 
	 .flickr-gallery .gallery-nav				{ width: 100px; height: 200px; }
	 .flickr-gallery .prev						{ background: url(images/prev.png) center center no-repeat #fff; left: 0; background-size: 22px 40px; }
	 .flickr-gallery .next						{ background: url(images/next.png) center center no-repeat #fff; right: 0; background-size: 22px 40px; }
	 .flickr-gallery .gallery-nav.unbound		{ cursor: default; background-image:none; }
	 
	 .flickr-gallery .thumbnails .track			{ height: 200px; left: 100px; }
	 .flickr-gallery .thumbnails .track a		{ width: 150px; height: 150px; margin: 20px 10px 30px!important; }
	 .flickr-gallery .thumbnails .track img		{ width: 150px; height: 150px; }
	 
	 .flickr-gallery .main-image				{ height: 640px; padding: 0 0 60px; }
	 .flickr-gallery .main-image img			{  }
	 .flickr-gallery .main-image img.active		{  }

}
	




