body { BACKGROUND-IMAGE: url(images/page_bg.jpg); BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: right bottom; BACKGROUND-FIX: fixed;}
/* The following 2 directives proportionally scale a logo image. It works like this. The container div starts at 20% of the available screen width with a max width of 185px, which is the width of the logo file. And the image file itself always fills the container div to 100%. */
#logo {z-index:1031; /* z-index for navbar-fixed-top is 1030 */ position:absolute; margin-top:10px;width:50%; max-width:333px;}
#logo img {display:block; width:100%;}

/* If the screensize is less than 1000px, then increase the logo space reserve image size height so that the nav bar does not wrap behind the logo div */
.logo-space-reserve{width:100%; min-width:333px; height:55px;}
.nav-height-reflector{width:100%; height:30px;}
h1{font-size:2.2em;font-weight:300;} 
h2{font-size:1.75em;font-weight:300;} 
h3{font-size:1.5em;font-weight:300;} 
h4{font-size:1.2em;font-weight:300;}
.register_donate_btn {font-size:2em; font-weight:bold;letter-spacing:3px;}

@media (max-width:767px){.logo-space-reserve{display:inherit!important;margin-bottom:0;}.nav-height-reflector{margin-top:0;} h1{font-size:1.5em;font-weight:300;} h2{font-size:1.2em;font-weight:300;} h3{font-size:1em;font-weight:300;}}
@media (min-width:768px) and (max-width:991px){.logo-space-reserve{display:inherit!important;margin-bottom:0;}.nav-height-reflector{margin-top:0;}  h1{font-size:1.75em;font-weight:300;} h2{font-size:1.5em;font-weight:300;} h3{font-size:1.25em;font-weight:300;} h4{font-size:1em;font-weight:300;}}
@media (min-width:992px) and (max-width:1200px){.logo-space-reserve{display:inherit!important;margin-bottom:0;}.nav-height-reflector{margin-top:0;}  h1{font-size:1.75em;font-weight:300;} h2{font-size:1.5em;font-weight:300;} h3{font-size:1.25em;font-weight:300;} h4{font-size:1em;font-weight:300;}}

/* remove border bottom styles for link tags that are linking to images... */
a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
text-decoration:none; border:0 none;
}

/* remove dotted outline on link focus */
a:focus{outline:none;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}
a{color:#558EBA;text-decoration:none}a:hover,a:focus{color:#828488;text-decoration:none;}
.link_url_field {font-size:14pt;font-weight:bold;color:#666666;height:50px;}

.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>li>a:focus{color:#cccccc;}
.dropdown-menu{background-color:#000;}
.dropdown-menu>li>a{font-family:'Open Sans',sans-serif;font-weight:600;letter-spacing:0px;color:#fff;}

/* remove border bottom styling from image links */
.img-link:hover {
text-decoration:none; border:0 none; border-bottom:#000 0px dotted;	 
}

p {line-height:170%; padding-bottom:30px;}

.img-shadow {
width:100%;/* -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0, 0.5); -moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0, 0.5); box-shadow: 0px 0px 12px 0px rgba(0,0,0, 0.5);*/	
}

.btn, .badge {
-webkit-box-shadow: 0px 0px 12px 0px rgba(10,71,76, 0.5); -moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0, 0.5); box-shadow: 0px 0px 12px 0px rgba(0,0,0, 0.5);	
}

/* .pager li>a,.pager li>span{background-color:#558EBA;} 
.pager li>a:hover,.pager li>a:focus{background-color:#828488;} */

.reservedTimeSlots {
background-color: rgb(255,255,0); padding-left: 4px; padding-right: 4px; 
}

.img-wrapper {
margin-right:20px; margin-bottom:20px; margin-top:20px; text-align:center;	
}

#youtube-play-button img:hover {
opacity:0.7; filter:alpha(opacity=70);
}

body{font-size:12pt;}

.page-header{padding-bottom:9.5px;margin:21px 0 21px;border-bottom:1px solid #cccccc;}

h1{color:#000;}
h2{color:#e5972a;}
h3{color:#000;}

.landing-fee-text { color:#666666;}

.list-group-item{background-color:#ebf6fa;-webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0, 0.3); -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0, 0.3); box-shadow: 3px 3px 5px 0px rgba(0,0,0, 0.3);overflow:auto;}

.popover-title{font-size:13pt;color:#7b99ac;letter-spacing:2px;text-shadow:-1px -1px 1px rgba(122,122,122,0.5)}
.popover{max-width:450px;padding:1px;font-family:'Open Sans',sans-serif;font-size:11pt;font-weight:normal;line-height:1;}


.badge{font-family:'Open Sans',sans-serif; letter-spacing:3px;}

.gradient_bg {/*border-radius:20px; background-color:rgba(123,153,172,0.1); */ margin-top:30px; margin-bottom:30px; padding:20px;}

.square-photo-tile {position:relative;overflow:hidden;/*padding-top:10px;padding-bottom:10px;margin-bottom:15px;*/text-align:center;}
.square-photo-tile-caption {position:absolute; bottom:0;right:0;background:rgba(0,0,0,0.55);/*border-radius:10px;*/width:100%;padding:15px;display:none;color:#fff !important; text-shadow:-1px -1px 1px rgba(0,0,0,0.5); z-index:2; text-align:right;}

#out-of-stock-tag { position:absolute; width:139px; heigt:78px; top:0px; right:0px; z-index:4; }
#new-item-tag { position:absolute; width:55px; heigt:85px; top:0px; left:0px; z-index:4; }
#special-item-tag { position:absolute; width:55px; heigt:95px; top:0px; left:0px; z-index:4; }
#sale-item-tag { position:absolute; width:110px; heigt:100px; top:0px; left:0px; z-index:4; }

.pipe {padding-left:20px; padding-right:20px; color:#818181;}

.tag9 {font-size:9pt; font-weight:bold;}
.tag10 {font-size:10pt; font-weight:bold;}
.tag11 {font-size:11pt; font-weight:bold;}
.tag12 {font-size:12pt; font-weight:bold;}
.tag13 {font-size:13pt; font-weight:bold;}
.tag14 {font-size:14pt; font-weight:bold;}
.tag15 {font-size:15pt; font-weight:bold;}
.tag16 {font-size:16pt; font-weight:bold;}
.tag17 {font-size:17pt; font-weight:bold;}
.tag18 {font-size:18pt; font-weight:bold;}
.tag19 {font-size:19pt; font-weight:bold;}
.tag20 {font-size:20pt; font-weight:bold;}
.tag21 {font-size:21pt; font-weight:bold;}
.tag22 {font-size:22pt; font-weight:bold;}
.tag23 {font-size:23pt; font-weight:bold;}

/* 
+++++++++++++++++++++++++++++++++++++
START - Circle Rollovers */
/*uncomment the directive below to hide circle rollovers on screens less than 1200px (smartphones and iPad, etc.) and pull the social media DIV to the right */
@media (max-width:1200px){.visible-action{display:inherit!important;text-align:right;/*max-width:250px;min-width:250px;*/float:right;}.hidden-action{display:none!important; /*min-width:400px;float:right;*/}}
ul.unstyled{margin-left:0;list-style:none}
ul.inline{margin-left:0;list-style:none}
ul.inline>li{display:inline-block;*display:inline;*zoom:1;padding-left:5px;padding-right:5px}
.nav-circles{margin:0;}
.nav-circles>li{padding:0!important;margin:0 .5em;}
.nav-circles>li>a{display:block;text-decoration:none;font-size:2.0em;line-height:0;color:#e5972a;-webkit-border-radius:1.5em;-moz-border-radius:1.5em;border-radius:1.5em;border-color:#e5972a;border-style:solid;border-width:2px;-webkit-box-shadow:0px 0px 15px 0px rgba(102,102,102, 0.5); -moz-box-shadow:0px 0px 15px 0px rgba(102,102,102, 0.5); box-shadow:0px 0px 15px 0px rgba(102,102,102, 0.5);}
.nav-circles>li>a:hover{background-color:#e5972a;color:#ffffff}
.nav-circles>li>a>div{padding:.5em}

/* Usage: include the following div inside the circle icon element with appropriate html value, like this:

	<ul class="inline unstyled nav-circles hidden-action">
	<li><a href="test.php" data-toggle="popover" data-container="body" title="Photo Albums" data-content="Checkout photos organized in albums by topic.">		    <div aria-hidden="true" data-icon="&#x1f4f7;"></div>
	</a>
	</li>
	</ul>
*/

@font-face {
  font-family: 'pcicons';
  src: url('js/pcicons.eot');
  src: url('js/pcicons.eot?#iefix') format('embedded-opentype'), url('js/pcicons.woff') format('woff'), url('js/pcicons.ttf') format('truetype'), url('js/pcicons.svg#pcicons') format('svg');
  font-weight: normal;
  font-style: normal;
}[data-icon]:before{font-family:'pcicons';content:attr(data-icon);speak:none;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased}

/* 
+++++++++++++++++++++++++++++++++++++
END - Circle Rollovers */

.goonline {
font-family:'Open Sans', sans-serif; font-size:9pt; color:#333333; padding-botom:10px;
}

.goonline-link, .goonline-link:visited {
font-family:'Open Sans', sans-serif; font-size:9pt; color:#333333; text-decoration:none;
}

.goonline-link:hover {
font-family:'Open Sans', sans-serif; font-size:9pt; color:#000000; text-decoration:none;
}