@font-face {
	font-family: 'dejavu-sans_extralight';
	/*src: url('font/riesling_regular_macroman/riesling-webfont.eot');*/
	/*src: url('font/riesling_regular_macroman/riesling-webfont.eot?#iefix') format('embedded-opentype'),*/
 /*        url('font/riesling_regular_macroman/riesling-webfont.woff') format('woff'),*/
         src: url('font/dejavu-sans_extralight.ttf') format('truetype');
         /*url('font/riesling_regular_macroman/riesling-webfont.svg#rieslingregular') format('svg');*/
	font-weight: normal;
	font-style: normal;
}

body {
	margin: 0px;
	/*background-image: url('images/waterfall.jpg');*/
	/*background: rgb(204,241,252,1);*/
    /*background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(204,241,252,1) 19%, rgba(31,119,195,1) 100%) url('images/waterfall.jpg');*/
    
    background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(204,241,252,.5) 19%, rgba(25,159,170,.75) 100%), 
                url('images/waterfall.png');
                
	background-attachment: fixed;
	/*background-position: right top; */
	background-repeat: no-repeat;
    /*background-size: 800px 800px;*/
    background-size: cover;
	/*color: #1d4399;*/
	color: rgba(25,159,170,1);
	/*color: #199faa;*/
	font-family: 'dejavu-sans_extralight', 'Source Sans Pro', sans-serif;
	padding: 0px;
}

.pageWidth {
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin: 0px;
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.contentWidth {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  border-width: 3px;
  border-style: solid;
  /*border-color: rgba(204,241,252,1);*/
  border-color: rgba(rgba(25,159,170,.33));
  /*border-color: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(204,241,252,.5) 19%, rgba(54,176,186,.75) 100%);*/
	background-color: #fff;
}

div.navTab {
	position: fixed;
	top: 0px;
	right: 50%;
	transform: translateX(460px);
	background-color: #fff;
	background-size: 1px 140px;
	padding: 10px 20px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border: solid 4px #000;
	border-top: none;
	font-family: rieslingregular;
	font-style: underline;
	font-size: 36pt;
	font-weight: normal;
	text-align: center;
	color: #000;
	z-index: 10;
}

img {
	border: none;
}

div.mainLogo {
	position: fixed;
	top: 0px;
	left: 50%;
	transform: translateX(-460px);
	background-color: #fff;
	background-size: 1px 140px;
	padding: 0.5em 1em;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border: solid 4px #000;
	border-top: none;
	font-family: rieslingregular;
	font-style: underline;
	font-weight: normal;
	text-align: center;
	color: #000;
	z-index: 10;
}

a:link, a:visited {
	color: #000;
	text-decoration: underline;
}

a.emailLink {
	/*color: #000;*/
	text-decoration: underline;
}

a.hyperLink {
	/*color: #000;*/
	text-decoration: underline;
}

.phoneNumber {
	color: #000;
	/*text-decoration: underline;*/
}

.bannerImage {
	clear: both;
	height: 350px;
	margin: 1em;
	overflow: hidden;
}

img.bannerImg {
	height: 100%;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

div.bannerImg {
	height: 100%;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.bss-slides{
/* the container element needs to be 
   relatively positioned and display:
   block so that the slides can be 
   "stacked up" inside of it */ 
  position: relative; 
  display: block;    
}
.bss-slides figure{
/* these are the individual slides
   each containing an img and caption.
   they are positioned absolute at the
   top of the slideshow container, so they
   will be stacked up like a deck of cards */
  position: absolute;
  top: 0;
  width: 100%;
  margin: 0px;
}
.bss-slides figure:first-child{
/* the very first slide is relatively 
   positioned in order to give height 
   to the container element */
  position: relative;
}
.bss-slides figure img{
/* all slide images are made "invisible"
   with an opacity of 0, then we
   set the transition property so
   that later when we change it,
   it transitions over 1.2 seconds for a
   fade in/out effect instead of changing 
   instantly */   
  opacity: 0;
  transition: opacity 1.2s;
	height: 100%;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.bss-slides .bss-show img{
/* this is for the currently visible slide
   it's the only one that shows, with full
   opacity */
  opacity: 1;
}
.bss-slides figcaption{
/* the caption is positioned absolutely near
   the bottom right of the slide, then we hide it
   with an opacity of 0, and set the transition 
   property just like with the img element above */
  position: absolute;
  bottom: .75em;
  right: .35em;
  opacity: 0;
  transition: opacity 1.2s;
}
.bss-slides .bss-show figcaption{
/* this is for the currently visible slide caption
   it's the only one that shows, with full opacity, 
   just like the current img. the caption also
   has a z-index of 2 to ensure it always appears
   above the img */
  z-index: 2;
  opacity: 1;
}
.bss-next, .bss-prev{
/* for the next/prev buttons
   this positions them vertically
   in the middle of the slides,
   with a z-index to ensure they appear
   over the slides, an opacity of .5 
   so they are semi-transparent by default, 
   and the user-select none is so they don't
   accidentally get highlighted when clicking
   on them */
  position: absolute;
  top: 50%;
  z-index: 1;
  opacity: .5;
  user-select: none;
}
.bss-next:hover, .bss-prev:hover{
/* give the buttons a pointer/hand cursor
   and highlight them with full opacity
   when hovering */  
  cursor: pointer;
  opacity: 1;
}
.bss-next{
/* position 'next' button at right */  
  right: 0;
  display: none;
}
.bss-prev{
/* position 'previous' button at left */
  left: 0;
  display: none;
}

hr.bannerDivider {
    height: 12px;
    border: 0;
    /*box-shadow: inset 0 12px 12px -12px rgba(31,119,195,1);*/
    box-shadow: inset 4px 12px 12px -12px rgba(25,159,170,1);
}

.divCenter {
	text-align: center;
	margin: 1em;
}

.divVisitContent h2 {
	/*font-family: rieslingregular;*/
	font-style: underline;
	font-size: 24pt;
	font-weight: normal;
	margin: 2px;
	text-align: center;
}

.divVisitContent div {
    margin-bottom: 1em;   
}

.divVisitContent p {
	margin: 12px;
	text-align: left;
	/*font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;*/
	font-size: 12pt;
	font-style: italic;
}

.divVisitContent hr {
	width: 25%;
	margin-left: auto;
	margin-right: auto;
	margin: 0.25em auto;
}

.socialButton {
	margin: 0.5em;
}

img.logoImg {
	width: 256px;
}

img.secDivImg {
	height: 48px;
}

span.cafeHours {
	font-size: 12pt;
}

.mapContainer {
	text-align: center;
}

.googleMap {
	margin: 0.5em;
	border: solid 1px grey;
	background-color: lightgrey;
	box-shadow: 0px 1px 3px grey;
}

p.attention {
	text-align: center;
	font-size: 125%;
	text-decoration: underline;
}

img.socialShareImg {
  height: 40px;
}

.pageBody {
	padding: 0em 1em;
}

div.contentThumbnail {
	text-align: center;
}

.contentThumbnail img {
	margin: 1em;
	border: solid white 6px;
	box-shadow: 4px 3px 12px grey;
}

.thumb1up img {
	height: 160px;
	width: 420px;
}

.thumb2up img {
	height: 120px;
	width: 180px;
}

div.galleryThumbnail {
	padding-left: 2em;
	padding-right: 2em;
}

.galleryThumbnail img {
	margin: 1em;
	border: solid white 6px;
	box-shadow: 4px 3px 12px grey;
	height: 140px;
	width: 180px;
}

div.sidebarContent {
	position: relative;
	float: right;
	/*width: 50%;*/
	margin: 2px;
}

div.pageContent {
	padding: 0px;
	width: 60%;
	margin: 1em;
  text-align:justify;
	margin: 1em;
	text-align: justify;
	font-size: 12pt;
}

div.pageContent p {
	font-style: italic;
	margin: 2px;
}

div.thumbnailContent h1 {
	font-family: rieslingregular;
	font-size: 30pt;
}

p.moreThumbnails {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 16pt;
	font-style: italic;
	text-align: right;
	margin-right: 15%;
}

h1 {
	text-decoration: underline;
}

.site_nav {
	clear: both;
	padding-top: 1em;
	padding-bottom: 1em;
	text-align: center;
	/*font-family: Arial;*/
	font-size: 12pt;
	margin-left: auto;
	margin-right: auto;
}

.footer {
	clear: both;
	padding-top: 1em;
	padding-bottom: 1em;
	text-align: center;
	font-family: Arial;
	font-size: 8pt;
	margin-left: auto;
	margin-right: auto;
}

body.errorPage {
	margin: 1em;
	background: none;
	background-color: white;
	color: black;
}

.errorContent {
	padding: 1em 3em;
	background-color: white;
	width: 600px;
}