@charset "utf-8";

/* =Typography -----------------------------------------------------------------------------*/

/*
Colors: 
dark gold #696244 (105, 98, 68); 
light gold #948964 (148, 137, 100); 
burgandy #73030b (115, 3, 11); 
dark grey #323232 (50, 50, 50); 
light grey #b9b9b9 (185, 185, 185)
*/

body {
 font-size: 85%;
 line-height: 1.5; /*12/18*/
 font-family: 'Open Sans', sans-serif;
 background: #f6f7f1 url('/images/bg-pattern-full.jpg') repeat center center; 
 color: rgb(50,50,50);
}
h1, h2, h3, h4, h5, h6	{
 font-family: 'ovo', georgia, serif;
 color:#948964;
 font-weight:normal;
}

a 			{ text-decoration: none; color: rgb(115,3,11); }
a:hover 	{ text-decoration:underline; color: rgb(156,147,101); }


blockquote {
 font-family: 'ovo', georgia, serif;
 margin: 1.65em 0;
 border-top:1px dotted #b9b9b9; 
 border-bottom:1px dotted #b9b9b9; 
 border-left:none; 
 font-size:1.8em;
 color:#948964;
 padding: 0.65em 0 .65em 0;
}
blockquote p {
}
blockquote p[style="text-align: right;"] {
 margin-top:-0.8em;
 font-size:80%;
}


/* =Branding / =Header ---------------------------------------------------*/

#branding {
 position:relative;
 margin:0 auto;
 padding-top:40px;
}
#branding h1 {
 padding-left:190px;
 position:relative;
 margin:0;
}

/*
 Two different branding treatments, mobile vs. desktop?
 NOTE - THE BACKGROUND IMAGE IS OVERRIDEABLE IN THE HEAD OF THE CMS-GENREATED PAGE.
 Be sure if you change checkpoint sizes that you coordinate this change with the CMS as well! 
*/

/* ANYTHING SMALLER THAN 540...?  640??  */
@media only screen and (max-width: 640px) {
 #branding > h1 > a {
  display:block;
  padding-left:72px;
  height:72px;
  line-height:80px;
  background:transparent url('/images/st-francis-tower-64x64.png') no-repeat left top;
 }
 #branding > h1 > a img {
  max-height:60px;
  width:auto;
 }
}
/* ANYTHING BIGGER THAN 540...?? 640???? */
@media only screen and (min-width: 641px) {
 #branding h1:before {
  border: solid 2px #fff;
  content: url(/images/logo-bell-tower.gif);
  width: 175px;
  height:175px;
  position:absolute;
  z-index:3000;
  left:0px;
  top:-30px;
 }
}




/* =QuickNav - MOVED TO nav.css  ----------------------------------------------------------------------------- */


  
  
 
/* =Nav (SEE ALSO nav.css) ---------------------------------------------------*/


#nav-container { 
 position:relative; 
 display:block; 
 width:100%;
 height:40px;
 background-color:#E8E9E3;
 border-top:2px solid #fff;
 border-bottom:1px solid #DFE0DB;
 top:10px;
 z-index:1000; 
 font-family: 'ovo', georgia, serif;
}
#nav-container nav { 
 max-width:810px;
 margin:0 auto;
 padding-left:190px; 
}



/* =Page =Title ---------------------------------------------------*/

#page-title-container {
 zzzzzzzzmax-width:1000px;
 zzzoutline:1px solid red;
 background:transparent url('/images/page-title-decoration.png') repeat-x center center;
 margin:3em 0;
}
#page-title-inner{
}
h2#page-title {
 display:inline;
 font-size:2.1em; /* base is 1.714em; */
 margin-left:-0.5em;
 padding-left:0.5em;
 padding-right:0.5em;
 background-color:white; /* copy the bg from the body to cover up the deco! */
 background: #f6f7f1 url('/images/bg-pattern-full.jpg') repeat center center; 
}
h2#page-title a {
 color:#948964;
}



/* =Layout and =Content -----------------------------------------------------------------------------*/

/* CMS-specific? FOR TESTING ONLY: */
#zzzzzzzzzzpage-content { min-height:30em; }


/* WYSIWYG-INSERTED IMAGES: */
#page-content img { margin-bottom:0.5em; }
#page-content img[style="float:right;"],
#page-content img[style="float: right;"] {
 margin-left:1em;
}
@media only screen and (max-width: 420px) {
	body #page-content img { float:none !important; display:block; margin:0.5em auto !important; }
}


/** 
 * The "content-container" class is intended ONLY for constraining the width of inner page elements & blocks,
 * i.e., the majority of things that don't need to stretch full 100% width on very large monitors.
 * On smaller screens < 1000px, we should add some side margins...
 * Consider also this isn't so much a semantic name, as it is more like a "width-container" solely for styling.
 * "Content-Frame" acts similarly to content-container, but with slightly larger dimensions, and features a
 * white background and box shadow decorative "frame" (hence the name).
**/

.content-frame {
 background: #ffffff;
 -webkit-box-shadow: 0px 0px 10px 5px rgba(100, 100, 100, .2);
 box-shadow: 0px 0px 10px 5px rgba(100, 100, 100, .2); 
 position:relative;
 max-width:1000px;
 padding:3em 5em;
 margin:0 auto 3em auto;
}
.content-container {
 max-width:1000px;
 margin:0 auto;
}

/* give a small margin on each side for smaller screens. Overflow hidden to prevent inner grid-wraps from over-using their allotted space? */
@media only screen and (max-width : 1100px) {
	.content-frame { max-width:95%; padding:3em 2.5%; zzzoverflow:hidden; }
	.content-container { max-width:95%; padding:0 2.5%; zzzoverflow:hidden; }
}
.hide-overflow {
 overflow:hidden
}
	
/* Note! The #content-container ID is a temporary name for a div on a testing page, not part of the site and not to be used. */
#content-container {
 position:relative;
 margin-bottom:3em;
}

@media only screen and (min-width: 960px) {
	#content-container .grid-col:first-child { width:70%; }
	#content-container .grid-col:last-child { width:30%; }
}

	

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

#footer {
 background-color:#202020;
 -webkit-box-shadow: 0px 0px 10px 5px rgba(100, 100, 100, .2);
 box-shadow: 0px 0px 10px 5px rgba(100, 100, 100, .2); 
 position:relative;
 color:#F6F7F1;
 margin-top:2em;
}
@media only screen and (min-width: 400px) {
	#footer { margin-top:5em; }
}
@media only screen and (min-width: 1000px) {
	#footer { margin-top:7em; }
}

/* Reset/Normalize/Base Typography */
#footer h4,
#footer ul,
#footer li,
#footer p {
 list-style-type:none; 
 margin:0;
 padding:0;
 font-size:13px;
}
#footer h4,
#footer li,
#footer p {
 font-family:Arial;
 line-height:1.5;
}
#footer ul,
#footer p {
 margin-bottom:1em;
}
#footer h4 {
 color:white;
 text-transform:uppercase;
 font-weight:bold;
 margin-top:1em;
 font-size:14px;
}
#footer h4:after {
 content:" :";
 color:#AAA;
 font-size:90%;
}
#footer a {
 color:#F2F2F2;
}

#footer-inner.content-container {
 padding-top:3em;
 background:transparent url('/images/footer-watermark.png') no-repeat right bottom;
 padding-bottom:140px;
}

/* Tigthen the grid's gutters */
#footer .grid-wrap {    
 margin:0 -1em; /* the same as your gutter */
}
#footer .grid-col {
 float: left;
 padding:0 1em; /* this is your gutter between columns */
}

/* FOOTER MAP */
#footer-map {
 width:25%;
}

/* FOOTER SOCIAL */
#footer-social.grid-col {
 float:right;
 width:75%;
 border:1px solid #777;
 border-width:1px 0;
}
#footer-social h4 {
 float:left;
 line-height:44px; 
 margin-top:0;
 margin-right:1em;
}
#footer-social ul {
 margin:0;
 padding:0;
 float:none;
 display:block;
 height:32px;
 line-height:32px;
}
#footer-social li {
 zzzfloat:none;
  zzzdisplay:inline-block;
   float:left;
 width:32px;
 height:32px;
 margin:6px 12px 6px 0;
}
#footer-social a {
 display:block;
 width:32px;
 height:32px;
 line-height:48px;
 zzzztext-indent:-9999px;
 zzzzbackground:transparent url('/images/footer-social-sprites.png') no-repeat left center;
}
#footer-social a:hover {
 opacity:0.8;
}

/* FOOTER PRIMARY COLUMNS (ONLY USE 75% TOTAL!) */
#footer-col-01 {
 width:22%;
}
#footer-col-02 {
 width:25%;
}
#footer-col-03 {
 width:14%;
}
#footer-col-04 {
 width:14%;
}

/* FOOTER FORM (FOOTER MAILING LIST) */
#zzzfooter form {
 padding-top:4px;
 padding-left:20px;
 background:transparent url('/images/footer-envelope-icon.png') no-repeat 0px 12px;
}
#zzzfooter input {
 font-size:12px;
 background-color:white;
 border:1px solid black;
}
#footer input[type="text"] {
 padding-top:4px;
 padding-left:20px;
 background:#161616 url('/images/footer-envelope-icon.png') no-repeat 3px 50%;



 border:1px solid #888;
 font-size:12px;
 color:white;
 width:60%;
}
#zzzfooter input {
 font-size:12px;
 background-color:white;
 border:1px solid black;
}

/* FOOTER BOTTOM*/
#footer {
 padding-bottom:0.6em;
}
#footer-bottom {
 color:#AAA;
  padding-bottom:1px;
}
#footer-bottom li {
 float:left;
 font-size:80%;
 margin-right:1em;
 padding-right:1em;
 border-right:1px solid #888;
 line-height:1em;
}
#footer-bottom li:last-child {
 border-right:0;
 margin-right:0;
 padding-right:0;
}
#footer-bottom li a {
 color:#BBB;
}
#footer-bottom li a:hover {
 color:#EEE;
}

/******** FOOTER UNNUSED/ORIGINAL:
#footer dl {
}
#footer dt {
 float: left;
 clear: left;
 width: 100px;
 text-align: right;
 font-weight: bold;
} 
#footer dt:after {
 content: ":";
}
#footer dd {
 margin: 0 0 0 110px;
 padding: 0 0 0.5em 0;
}
#footer dl dt {
 font-size:.8em;
 text-transform:uppercase;
 font-weight:normal;
 color:#A06D3E;
 letter-spacing: .02em;
 font-family: arial,sans-serif;
}
#footer dl dd {
 font-size:.9em;
}
#footer li.icon a {  
 background:transparent url(/images/social-icons.png) 0 0 no-repeat;
 width: 40px;
 height: 40px;
 text-indent:-900em;
 display:block;
  -khtml-opacity:.70; 
 -moz-opacity:.70; 
 -ms-filter:"alpha(opacity=70)";
  opacity:.70; 
}
#footer li.icon a:hover {  
-khtml-opacity:1; 
 -moz-opacity:1; 
 -ms-filter:"alpha(opacity=1)";
  opacity:1; 
}
*********/




/* =ADD THIS / =SIDE SHARING ---------------------------------------------------*/

#side-sharing {
 position:fixed;
 right:0;
 top:200px;
 width:24px;
 z-index:1001;
}

#side-sharing .side-sharing-item {
 position:relative;
 background:transparent url('/images/side-sharing-spritemap.png') no-repeat 0 0;
 width:24px;
 opacity:0.75;
 margin-bottom:0.8em;
}
#side-sharing .side-sharing-item:hover {
 opacity:1;
}

/* Customize Sprites for each main item/rollover */
#side-sharing #side-sharing-facebook {
 height:24px;
 background-position:0 0;
}
#side-sharing #side-sharing-services {
 height:60px;
 background-position:0 -84px;
}
#side-sharing #side-sharing-print {
 height:60px;
 background-position:0 -24px;
}

/* Flyouts : Include custom sizing/positioning of each flyout */
#side-sharing .side-sharing-flyout {
 display:block;
 visibility:hidden;
 opacity:0;
 position:absolute;
 background-color:#FFF;
 border:4px solid #948964;
 top:0;
 right:24px;
 padding:0.5em 1em 2em;
 -webkit-transition:  all 0.2s ease-in-out;
 -moz-transition:  all 0.2s ease-in-out;
 -o-transition:  all 0.2s ease-in-out;
 -ms-transition:  all 0.2s ease-in-out;
 transition:  all 0.2s ease-in-out;
 box-shadow: 0px 0px 20px 1px rgba(255, 255, 255, .4); 
}

/* Flyouts, pure CSS? */
#side-sharing .side-sharing-item:hover .side-sharing-flyout {
 display:block;
 opacity:1;
 zzzright:24px;
   visibility:visible;
}

#side-sharing #side-sharing-facebook .side-sharing-flyout {
 width:140px;
}
#side-sharing #side-sharing-services .side-sharing-flyout {
  width:180px;
  /* umcomment the following so you can see what you're debugging */
   zzzvisibility:visible; 
   zzzopacity:0.7;
}
#side-sharing #side-sharing-print .side-sharing-flyout {
  width:220px;
}

#side-sharing #side-sharing-services a {
 display:block;
 float:none;
}
#side-sharing #side-sharing-services a span {
 display:inline;
 padding-left:10px;
}


#side-sharing .addthis_floating_style {
 border-radius:0;
 background-color:transparent;
}





/* =Slideshow ------------------------------------------*/

#hero-container  {
 padding-bottom:1px; /* margin-buster */
 margin-bottom:28px;
 border-bottom:0px solid #FFF;
}

@media only screen and (min-width: 960px) {
	#hero-container  { min-height:265px; }
	body.narrow #hero-container  { min-height:360px; }
}

/* Based on the default styles used in the Cycle2 demo pages. */

/* set border-box so that percents can be used for width, padding, etc (personal preference) */
.cycle-slideshow,
.cycle-slideshow * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#zzzzzzzzzzzzzzzhome-page .cycle-slideshow {
 margin: 10px auto;
 padding: 0;
 position: relative;
 background: url(http://malsup.github.com/images/spinner.gif) 50% 50% no-repeat;
}
.cycle-slideshow {
 zzzzzmax-width:1080px;
 margin: 10px auto;
   margin-bottom:45px;
     margin-bottom:18px;
       margin-bottom:0;
	     margin-top:0;
 padding: 0;
 position: relative;
 background: url(http://malsup.github.com/images/spinner.gif) 50% 50% no-repeat;
}

/**** DEFAULT IS TO HAVE A BUNCH OF SIBLING IMGs.  WE INSTEAD WANT A BUNCH OF SIBLING DIVs. **********/

/* slideshow images (for most of the demos, these are the actual "slides") */
.zzzzzzzzzcycle-slideshow img { 
 /* some of these styles will be set by the plugin (by default) but setting them here helps avoid flash-of-unstyled-content */
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 padding: 0;
 display: block;
 zzzzzmax-height:560px;
}
/* in case script does not load */
.zzzzzzzzzcycle-slideshow img:first-child {
 position: static;
 z-index: 100;
}

/* These are the actual "slides" */
.cycle-slideshow .kd-slide { 
 /* some of these styles will be set by the plugin (by default) but setting them here helps avoid flash-of-unstyled-content */
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 padding: 0;
 display: block;
 zzzzzmax-height:560px;
}
/* in case script does not load */
.cycle-slideshow .kd-slide:first-child {
 position: static;
 z-index: 100;
}
/* KD avoiding FOUC? */
.zzzkd-slide { display:none; }
.zzzkd-slide:first-child { display:block; }

.kd-slide a { display:block; }
.kd-slide img { display:block; width:100%; }

/* Slideshow Pager --------------- */
.cycle-pager { 
 text-align: center;
 width: 100%;
 z-index: 500;
 position: absolute;
 bottom: -20px;
 height:20px;
 overflow: hidden;
 background-color:transparent;
 background-image:none;
 border-bottom:0px solid white;
}
.cycle-pager span { 
 font-family: arial;
 font-size: 40px;
 width: 16px;
 height: 16px; 
 display: inline-block;
 color: #CCCCCC;
 cursor: pointer; 
 line-height:20px; /* line-height here should match height of container */
 margin:0;
}
.cycle-pager span.cycle-pager-active {
 color: #323232;
}
.cycle-pager > * {
 cursor: pointer;
}
/* Remove if not needed */
.slide-count-1 .cycle-pager {
 display:none;
}

/* Slideshow Caption (?? are we using ??) -------- */
.cycle-caption {
 position: absolute;
 color: white;
 bottom: 15px;
 right: 15px;
 z-index: 700;
}

/* Slideshow Overlay -------------*/
.cycle-overlay { 
 font-family: tahoma, arial;
 position: absolute;
 bottom: 0;
 width: 100%;
 z-index: 600;
 padding: 15px;
 color: black;
  color:#444443;
 background-color: white;
 background-color:#CCC;
 opacity: 0.6;
 /* ?? */
 background-color: rgba(255,255,255,0.7);
 opacity: 0.8;
 text-align:center;
}
.cycle-overlay {
 /* Yes, we are stacking multiple text-shadows to get ultra-glow! */
 text-shadow:
  0px 0px 14px rgba(255, 255, 255, 1),
  0px 0px 14px rgba(255, 255, 255, 1),
  0px 0px 14px rgba(255, 255, 255, 1),
  0px 0px 14px rgba(255, 255, 255, 1),
  0px 0px 14px rgba(255, 255, 255, 1),
  0px 0px 14px rgba(255, 255, 255, 1);
 opacity:1;
 font-family: 'ovo', georgia, serif;
 font-size:140%;
 color:#000;
 font-weight:bold;
}
/* Remove if not needed */
.non-captioned .cycle-overlay {
 display:none;
}

/* Slideshow prev/next links ------------ */
.cycle-prev, .cycle-next { position: absolute; top: 0; width: 30%; opacity: 0; filter: alpha(opacity=0); z-index: 800; height: 100%; cursor: pointer; }
.cycle-prev { left: 0;  background: url(http://malsup.github.com/images/left.png) 50% 50% no-repeat;}
.cycle-next { right: 0; background: url(http://malsup.github.com/images/right.png) 50% 50% no-repeat;}
.cycle-prev:hover, .cycle-next:hover { opacity: .7; filter: alpha(opacity=70) }

/* Slideshow Misc ------------- */
.disabled { opacity: .5; filter:alpha(opacity=50); }
/* display paused text on top of paused slideshow */
.cycle-paused:after {
	content: 'Paused'; color: white; background: black; padding: 10px;
	z-index: 500; position: absolute; top: 10px; right: 10px;
	border-radius: 10px;
	opacity: .5; filter: alpha(opacity=50);
}






/* =Accordion ---------------------------------------------------*/

#accordian-container  {
 position:relative;
 margin-bottom:3em;
}    
	/* Gridify */
	@media only screen and (min-width: 960px) {
		#accordian-container .grid-col:first-child { width:70%; } 
		#accordian-container .grid-col:last-child { width:30%; } 
	}


/* Flexible Slide-to-top Accordion Style*/
.st-accordion {
 width:100%;
 min-width:270px;
 margin: 0 auto;
}
.st-accordion > ul {
 margin:0;
 padding:0;
}
.st-accordion > ul > li {
 margin:0; 
 zzzheight: 100px; /* CB says CAUTION */
 height:auto;
 border-bottom: 1px solid #c7deef;
 border-top:1px solid #fff;
 overflow: hidden;
}
.st-accordion > ul > li:first-child {
 border-top:none;
}
.st-accordion > ul > li > a {
 text-shadow: 1px 1px 1px #fff;
 font-size:2em;
 display: block;
 position: relative;
 zzzline-height: 100px; /* CB says CAUTION*/
   line-height:1.2;
   padding:1em 0;
           padding:1em 4em 1em 0;
 outline:none;
 -webkit-transition:  color 0.2s ease-in-out;
 -moz-transition:  color 0.2s ease-in-out;
 -o-transition:  color 0.2s ease-in-out;
 -ms-transition:  color 0.2s ease-in-out;
 transition:  color 0.2s ease-in-out;
}
.st-accordion > ul > li > a span {
 zzzbackground: transparent url(../images/down.png) no-repeat center center;
 zzztext-indent:-9000px;
 zzzwidth: 26px;
 zzzheight: 14px;
 zzzposition: absolute;
 zzztop: 50%;
 zzzright: -26px;
 zzzmargin-top: -7px;
 zzzopacity:0;
 -webkit-transition:  all 0.2s ease-in-out;
 -moz-transition:  all 0.2s ease-in-out;
 -o-transition:  all 0.2s ease-in-out;
 -ms-transition:  all 0.2s ease-in-out;
 transition:  all 0.2s ease-in-out;

 font-size:14px;
 float:right;
 line-height:36px;
 margin-top:0px;
 background-color:#EEE;
 text-transform:uppercase;
 padding:0.1em 1.0em;


 float:none;
 position: absolute;
 right:0;
 bottom:1em;
}


@media only screen and (max-width: 480px) {
  body .st-accordion > ul > li > a { padding:0.5em 0; font-size:18px; }
   .st-accordion > ul > li > a span { position:static; zzzclear:left; display:block; text-align:left; margin:0.5em 0 1em; font-size:70%; text-transform:uppercase;  }
}
.st-accordion ul li > a:hover { color: #948964 ; }
.st-accordion ul li > a:hover span {
 opacity:1;
 zzzzzzzright: 10px;
}
.st-accordion ul li.st-open > a { color: #948964 ; }
.st-accordion ul li.st-open > a span {
 -webkit-transform:rotate(180deg);
 -moz-transform:rotate(180deg);
 transform:rotate(180deg);
 right:10px;
 opacity:1;
}
.OLDzzzzzzzst-content { 
 padding: 3em; 
 /* IE9 SVG, needs conditional override of 'filter' to 'none' */
 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y2ZjdmMSIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNmY3ZjEiIHN0b3Atb3BhY2l0eT0iMC42NSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
 background: -moz-linear-gradient(top,  rgba(246,247,241,0) 0%, rgba(246,247,241,0.65) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,247,241,0)), color-stop(100%,rgba(246,247,241,0.65))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  rgba(246,247,241,0) 0%,rgba(246,247,241,0.65) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  rgba(246,247,241,0) 0%,rgba(246,247,241,0.65) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  rgba(246,247,241,0) 0%,rgba(246,247,241,0.65) 100%); /* IE10+ */
 background: linear-gradient(to bottom,  rgba(246,247,241,0) 0%,rgba(246,247,241,0.65) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f6f7f1', endColorstr='#a6f6f7f1',GradientType=0 ); /* IE6-8 */
}

.st-content {
 padding:0 1em 1em;
}


.st-content h4 {

}
.st-content p {

}
.st-content img {
 max-width: 90%;
 height: auto;
}


/* --- Directory Pages, specifically. The directory-item sits inside the st-content div. */

.directory-item {
 margin-bottom:1.5em;
 border-top:1px dotted #ddd;
 padding-top:1.5em;
}
.directory-item h4 {
 margin:0 0 0.4em;
 font-weight:bold;
}
.directory-item h4 a {
 color:inherit;
}
.directory-item p {
 margin:0 0 0.2em;
}
.directory-item-image { float:right; margin-left:1em; margin-bottom:1em; }
.directory-item-details {
 margin-left:0em;
}
.directory-item-details strong {
 font-weight:normal;
 zzzcolor:#777;
 font-style:italic;
 margin-right:1em;
}
.directory-item-links {
 margin-top:0.2em;
}
.directory-item-links a {
 margin-right:4px;
}



/* --- Information Pages ... */

.information-section .st-content {
 position:relative;
 padding-top:1px; /* margin-buster!! */
}

.information-section dl,
.information-section dt,
.information-section dd {
 font-size:14px;
 line-height:21px;
 padding:0;
 margin:0;
}

.information-section dl {
 margin-bottom:1em;
}
.information-section dt { 
 display:inline;
 padding-right:1em;
}
.information-section dd {
 display:inline;
}
.information-section dd:after {
 display:block;
 content:"";
 clear:left; /* careful not both! Don't clear the Gallery-thang! */
}


.information-section .gallery-thang {
 float:right;
 margin-top:0.5em;
 position:relative;
}
.information-section .gallery-thang a {
 background-color:#948964;
 background-color:#555;
 padding:0.4em 1em;
 border-radius:7px;
 color:white;
}


.gallery-thang-contents {
	
	display:none;
	
 clear:both;
 background-color:#555;
 padding:2%;
 position:relative;
 z-index:999;
 margin-top:0em;
 margin-bottom:1em;
 clear:right;
}
.gallery-thang-contents::after {
 content:"";
 display:table;
 clear:both;
}
.gallery-thang-contents > a {
 float:left;
 width:19%;
 min-width:200px;
 margin-left:1%;
 margin-bottom:1em;
}




/* =MISC (SHARED/COMMON) ELEMENTS ---------------------------------------------------*/

a.back-button {
 display:inline-block;
 background-color:#EEE;
 text-transform:uppercase;
 padding:0.2em 1em;
 margin-bottom:1em;
}
a.back-button:after { 
 content: "";
 display: table;
 clear: both;
}
a.back-button:hover {
 text-decoration:none;
 background-color:#E2E2E2;
}






.navigation-selector-container span {
 text-transform:uppercase;
 color:#948964;
 font-weight:normal;
 font-size:130%;
 padding-right:1em;
 font-family:Ovo;
 display:block;
}
.navigation-selector-container select,
.navigation-selector-container input[type="text"] {
 background-color:#EEE;
 border:1px solid #DDD;
  color:#948964;
 border-radius:2px;
 padding:3px;
}
.navigation-selector-container select:hover {
 cursor:pointer;
}
.navigation-selector-container select option {
 color:#202020;
}







/* =HOMEPAGE =HIGHLIGHTS a.k.a. Quad Highlights (on homepage) ------------------------------------------------ */

#quad-highlights {
 padding-top:1em;
 padding-bottom:2em;
 margin-bottom:1em;
 background-color:#f6f7f1;
 background-color:#E8E9E3;
 border-top:3px solid #FFF;
 border-bottom:3px solid #FFF;
}
#quad-highlights-inner {
 padding-top:1em;
}

	/* Griddify - universal tightening of gutters */
	#quad-highlights .grid-wrap {
	 margin:0 -7px;
	}
	#quad-highlights .grid-col {
	 padding:0 7px;
	}
	/* Griddify - in quarters/quads! - Note the custom breakpoints, based on how close these get and look */
	@media only screen and (min-width: 320px) { #quad-highlights .grid-col { width:100%; } }
	@media only screen and (min-width: 560px) { #quad-highlights .grid-col { width:50%; } }
	@media only screen and (min-width: 960px) { #quad-highlights .grid-col { width:25%; } } 


#quad-highlights .highlight {
 margin-bottom:2em;
 text-align:center;
 height:28.5em;
 overflow:auto;
}
#quad-highlights .highlight h3 {
 text-transform:uppercase;
 margin:0.5em 0 0.5em;
 line-height:0.8;
}
#quad-highlights .highlight p {
 margin:0;
 font-size:0.9em;
 padding:0 2em;
}
#quad-highlights .highlight img {
 width:100%;
 max-width:240px;
}
#quad-highlights .highlight a {
 color:inherit;
}
#quad-highlights .highlight a:hover {
 color:#73030B;
 text-decoration:none;
}
#quad-highlights .highlight a:hover h3 {
 text-decoration:underline;
}




/* =NEWS and =EVENTS (on homepage) ------------------------------------------------------ */

	/* Gridify */
	@media only screen and (min-width: 320px) {  }
	@media only screen and (min-width: 480px) { #news-and-events .grid-col { width:50%; } }
	@media only screen and (min-width: 768px) { }
	@media only screen and (min-width: 960px) { } 


#news-and-events h4 {
 font-family:'Open Sans',sans-serif;
 font-weight:bold;
 font-size:100%;
}
#news-and-events h4.subheader {
 font-weight:normal;
}
#news-and-events h4 a {
 text-transform:uppercase;
 text-decoration:underline;
 color:#323232;
}
#news-and-events h4 a:hover {
 color:#73030B;
}


p.read-more {
 text-align:right;
}
p.read-more a {
 text-decoration:underline;
}



/* =WINE HIGHLIGHTS (on homepage) ------------------------------------------------- */

#wine-highlights .wine-highlight-item {
 max-width:220px;
 margin:0 auto 1em;
}

	/* Gridify - universal gutters */
	#wine-highlights .grid-wrap {
	 margin:0 -7px;
	}
	#wine-highlights .grid-col {
	 padding:7px;
	}
	/* Gridify - widths */
	@media only screen and (min-width: 320px) { }
	@media only screen and (min-width: 560px) { #wine-highlights .grid-col { width:20%; } }
	@media only screen and (min-width: 768px) { }
	@media only screen and (min-width: 960px) { } 

/* Remember, the "item" is inside the grid-col, and gets the styling/padding/etc...*/
.wine-highlight-item {
 background-color:#FFF;
 padding:0.8em;
}
.wine-highlight-item img {
 display:block;
 margin:0 auto 1em;
 /* TEMPORARY!!! Need actual images here! */
 width:50%;
}
.wine-highlight-item h4 {
 line-height:1.4;
 font-size:90%;
 margin-bottom:1em;
 font-weight:bold;
 text-align:center;
 font-family: 'Open Sans', sans-serif;
}
.wine-highlight-item h4 a {
 color:#9C9365;
 color:#323232;
}
.wine-highlight-item h4 a:hover {
 color:#9C9365;
}
.wine-highlight-item p {
 line-height:1.2;
}




    
/* =Photo Gallery INDEX Page ---------------------------------------------------*/

#gallery-index-page .gallery-item {
 text-align:center;
}
#gallery-index-page .gallery-item img {
 display:block;
 margin:0 auto 1.5em;
}
#gallery-index-page .gallery-item a:hover {
 text-decoration:none;
}
#gallery-index-page .gallery-item a:hover h3 {
 text-decoration:underline;
}

	/* Gridify - adjust gutters */
	#gallery-index-page .grid-wrap {
	 zzzzmargin:0 -1em;
	}     
	#gallery-index-page .grid-col {
	 zzzpadding:0 1em;
	 margin-bottom:1.5em;
	}
	/* Gridify - set breakpoints */
	@media only screen and (min-width: 320px) {  }
	@media only screen and (min-width: 480px) {  }
	@media only screen and (min-width: 640px) {
	 #gallery-index-page .grid-col { width:50%; }
	 #gallery-index-page .gallery-teaser { height:6.5em; overflow:hidden; }

	}
	@media only screen and (min-width: 960px) {
	 #gallery-index-page .grid-col { width:33.333%; }
	} 
	



/* =Photo (INDIVIDUAL) Page ---------------------------------------------------*/

#gallery-page {}
#gallery-page .grid-col img {
 max-width:95%;
}

	/* Gridify - adjust gutters */
	#gallery-page .grid-wrap {
	 margin:0 -0.5em;
	}     
	#gallery-page .grid-col {
	 padding:0 0.5em;
	 margin-bottom:1.5em;
         text-align:center;
	}
	/* Gridify - set breakpoints */
	@media only screen and (min-width: 320px) {
	}

	@media only screen and (min-width: 480px) {
	 #gallery-page .grid-col { width:50%; }
	}
	@media only screen and (min-width: 640px) {
	 #gallery-page .grid-col { width:33.3333%; }
	}
	@media only screen and (min-width: 768px) {
	 #gallery-page .grid-col { width:25%; }
	}
	@media only screen and (min-width: 960px) {
	 #gallery-page .grid-col { width:20%; }
	} 
    


/* =Video ---------------------------------------------------*/


	/* Gridify - adjust gutters */
	#video-gallery-page .grid-wrap {
	 margin:0 -1em;
	}     
	#video-gallery-page .grid-col {
	 padding:0 1em;
	 margin-bottom:1.5em;
	}
	/* Gridify - set breakpoints */
    @media only screen and (min-width: 320px) { #video-gallery-page .grid-col { }  #video-gallery-page figcaption { text-align:center; } }
    @media only screen and (min-width: 480px) {  }
    @media only screen and (min-width: 640px) { #video-gallery-page .grid-col { width:50%; }  }
    @media only screen and (min-width: 960px) { #video-gallery-page .grid-col { width:25%; } #video-gallery-page figcaption { text-align:left; }} 
	
	
#video-gallery-page figure {
 text-align:center;
}
#video-gallery-page figcaption {
 font-style:normal;
 zzzzzztext-align:left;
 font-weight:normal;
 font-size:90%;
 line-height:1.2;
 height:4em;
 overflow:hidden;
}


/* =Recipes---------------------------------------------------*/


#recipe-top-navigation {
 margin-bottom:2.5em;
}

#recipes-nav { margin-bottom:2em;}
#recipes-quote blockquote { margin-top:0.5em; padding-top:1em;}

/* ROOT INDEX PAGE */
#recipe-index-page > h3 {
 margin-top:1em;
}

/* CATEGORY/RESULTS PAGES */
#recipe-items {
 clear:both;
}

.recipe-item {
 border-bottom:1px dotted #b9b9b9;
 padding-top:1.0em;
 padding-bottom:1.5em;
}
.recipe-item:first-child {
 border-top:1px dotted #b9b9b9;
}
.zzzzrecipe-item h3 a {
 color:inherit;
}
.recipe-item p {
 margin-bottom:0.5em;
}

.recipe-photo {
 margin-bottom:1em;
}


/* RECIPE DETAIL/INDIVIDUAL PAGE */

#recipe-page {
}
#recipe-page h2 {
 margin-bottom:0.8em;
}
#recipe-page > h3 {
 border-top:2px solid #ccc;
}
#recipe-page h5 {
 margin-bottom:0.6em;
}
#recipe-page p {
 margin-bottom:1em;
}

#recipe-page .wine-pairings ul,
#recipe-page .wine-pairings li {
 margin-left:0;
 padding:0;
 list-style-type:none;
}
#recipe-page .wine-pairings ul {
 zzzmargin-bottom:1.65em;
}


	@media only screen and (min-width: 320px) { 
	}
	@media only screen and (min-width: 480px) { 
		#recipes-nav .grid-col,
		#recipes-intro .grid-col { width:50%; }
	}
	@media only screen and (min-width: 768px) { 

		/* For the Index  page... */
		#recipe-feature-section blockquote { width:45%; margin-left:5%; float:right; margin-top:0; text-align:center;  }

		/* For any results, category pages, etc... */
		#recipe-items .recipe-item h3 { float:left; width:70%; }
		#recipe-items .recipe-item img { float:right; width:25%; margin-left:5%;}
		#recipe-items .recipe-item .recipe-teaser { clear:left; width:70%; }

		/* For a detail page... */
		#recipe-page .grid-col:first-child { width:50%; }
		#recipe-page .grid-col:last-child { width:50%; }


	}
	@media only screen and (min-width: 960px) {

		/* Recipe Top Navigation... */
		#recipe-top-navigation .grid-wrap {
		 margin:0 -1em; /* the same as your gutter: must match the padding of the grid-col. */
		}
		#recipe-top-navigation .grid-col { 
		 padding:0 1em; /* this is your gutter between columns: must match the negative margin of the grid-wrap. */ 
		}
				#recipe-top-navigation .grid-col:nth-child(1) { width:40%; }
				#recipe-top-navigation .grid-col:nth-child(2) { width:30%; }
				#recipe-top-navigation .grid-col:nth-child(3) { width:30%; }

	} 





    

/* =NEWS PAGE (dedicated module) ------------------------------------------------------ */

#news-page {
}
#news-page {
}

.news-item {
 border:1px solid #eee;
 padding:1em;
 height:32em;
 margin-bottom:1em;
 box-shadow: 0 0 10px 1px rgba(100, 100, 100, 0.1);
}
.news-item img {
 display:block;
 margin:0 auto 1em;
}
.news-item h3 {
 font-weight:bold;
 font-size:1.3em;
 line-height:1.2;
}
.news-item-content {
 font-size:0.9em;
}
.news-item ul,
.news-item li {
 margin:0;
 padding:0;
 list-style-type:none;
}
.news-item ul {
 text-align:center;
}
.news-item li {
 display:inline;
 padding:0 1em;
 text-transform:uppercase;
}
.news-item li a {
 text-decoration:underline;
}



	/* Gridify */
	@media only screen and (min-width: 320px) {  }
	@media only screen and (min-width: 480px) { #news-page .grid-col { width:50%; } }
	@media only screen and (min-width: 768px) { #news-page .grid-col { width:33.333%; } }
	@media only screen and (min-width: 960px) { } 




/* =ACCOLADES ------------------------------------------------------ */

#recent-accolades {
}

#recent-accolades h4 {
 margin-bottom:0;
 margin-top:1em;
 line-height:1.2;
 color:inherit;
 font-weight:bold;
}
#recent-accolades p {
 margin:0 0;
 line-height:1.2;
}

.accolade-wine h5,
.accolade-wine ul,
.accolade-wine li {
 font-size:15px;
 line-height:21px;
 margin:0;
 padding:0;
}

.accolade-wine h5 {
 float:left;
 clear:both;
 width:6em;
 text-align:left;
 text-indent:1em;
 font-weight:bold;
}
.accolade-wine ul,
.accolade-wine li {
 list-style-type:none;
}
.accolade-wine ul {
 float:left;
 margin-bottom:1em;
}


.purchase-option {
 margin-bottom:1em;
 padding-bottom:1em;
 margin-top:-1em;
}
.purchase-option a { 
 float:left;
 background-color:#CCC;
 border-radius:5px;
 padding:0.5em 1em;
 margin-bottom:1em;
 color:white;
}


/* NARROW BODY ? --------------------------------------- */
/* (The "Narrow" concept only applies when in desktop mode, i.e., when already larger than the existing 1000px containers)  */

@media only screen and (min-width: 1100px) {
	body.narrow #hero-container  {
	 max-width:1000px;
	 margin-top:50px;
	 margin-left:auto;
	 margin-right:auto;
	}
	body.narrow .content-frame {
	 padding:50px;
	 max-width:900px;
	}
	body.narrow .content-container {
	 padding-left:50px;
	 padding-right:50px;
	 max-width:900px;
	}
	body.narrow #branding,
	body.narrow #footer {
	 max-width:1000px;
	 padding-left:0;
	 padding-right:0;
	 margin-left:auto;
	 margin-right:auto;
	}
	body.narrow #footer-inner.content-container {
	 background-position:98% bottom;
	}
}




/* PRINTABLE ? --------------------------------------- */

@media only print {
 #quicknav { display:none; }
 #nav-container { display:none; }
 #hero-container { display:none; }
 #page-title-container { margin-top:100px; }
 #footer { display:none; }
 #side-sharing { display:none; }
 .grid-col { float:none; width:100% !important; }
}