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:40%; max-width:195px;}
#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:195px; height:50px;}
.nav-height-reflector{width:100%; height:10px;}
h1{font-size:2.2em; } h2{font-size:1.75em; } h2{font-size:1.3em; }
@media (max-width:720px){.logo-space-reserve{display:inherit!important;margin-bottom:0;}.nav-height-reflector{margin-top:0;} h1{font-size:1.5em} h2{font-size:1.2em} h3{font-size:1.0em}}
@media (min-width:721px) and (max-width:991px){.logo-space-reserve{display:inherit!important;margin-bottom:100px;}.nav-height-reflector{margin-top:100px;} h1{font-size:1.75em} h2{font-size:1.5em} h3{font-size:1.25em}}
@media (min-width:992px) and (max-width:1200px){.logo-space-reserve{display:inherit!important;margin-bottom:50px;}.nav-height-reflector{margin-top:50px;} h1{font-size:2.25em} h2{font-size:1.75em} h3{font-size:1.5em}}
	
/* 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}

/* 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;}

.countdown { font-weight:bold; color:#f73b09;}
.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); */	
}

.member-image { overflow: hidden; position: relative; float: left;}
.member-image .member-image-cover, .member-image .member-image-cover img { position:absolute; top:0px; left:0px; width:100%; height:100%;}

.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); margin:5px;	
}

.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;}

a{color:#0c89d4;text-decoration:none}a:hover,a:focus{color:#000;text-decoration:none;}
.pagination_gradient_bg {background: -webkit-linear-gradient(transparent, white, transparent); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(transparent, white, transparent); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(transparent, white, transparent); /* For Firefox 3.6 to 15 */ background: linear-gradient(transparent, white, transparent); /* Standard syntax */}

.navbar-default { background-color:rgba(147,26,29, 0.9);font-family:'Oswald',sans-serif;font-weight:400;letter-spacing:1px;font-size:0.95em;text-shadow:2px 2px 3px rgba(0,0,0,0.6);}
.navbar-default .navbar-nav>li>a{color:#ffffff;}
.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>li>a:focus{color:#cccccc;}
.navbar-default .navbar-toggle{ border-color:#052336; }
.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus{background-color:rgba(147,26,29, 0.9);}
.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:hover,.navbar-default .navbar-nav>.open>a:focus{background-color:rgba(147,26,29, 0.9);}
.dropdown-menu{background-color:rgba(147,26,29, 0.9);}
.dropdown-menu>li>a:hover{background-color:rgba(12,74,111, 0.6);}
.dropdown-menu>li>a{font-family:'Open Sans',sans-serif;font-weight:600;letter-spacing:0px;color:#fff;}
/*.btn-primary{color:#ffffff;background-color:#09476d;border-color:#09476d; }
.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active,.open>.dropdown-toggle.btn-primary{background-color:#07314b;}
*/
.page-header{padding-bottom:9.5px;margin:21px 0 21px;border-bottom:1px solid #cccccc;}
h1{color:#222222;}
h2{color:#436477;}
h3{color:#555555;text-shadow:1px 1px 1px rgba(255,255,255,0.6);}

.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)}

.badge{font-family:'Open Sans',sans-serif; letter-spacing:3px;}
.gradient_bg {border-radius:5px; background-color:rgba(243,243,243,1); margin-top:30px; margin-bottom:30px; padding:20px; color:#000;}
.gradient_yellow_bg {border-radius:20px; background-color:rgba(248,239,36,0.6); margin-top:30px; margin-bottom:30px; padding:20px; color:#000;}
.fade-in-out-bg {background-image:-webkit-linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,1),rgba(255,255,255,0.3));background-image:linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,1),rgba(255,255,255,0.3));background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff020202', endColorstr='#ff191b1d', GradientType=0);}


.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; }


/* ##### BEGIN - Slanted / colored tabs */
.slanted { 
height:38px; padding:7px 20px 15px 20px;
-webkit-transform: skew(-20deg) /* rotate(2deg) */;
-moz-transform: skew(-20deg) /* rotate(2deg) */;
transform: skew(-20deg) /* rotate(2deg) */;
margin-left:2px;margin-bottom:2px;
min-width:50px;
float:left;
color:#fff;
-khtml-opacity:1; 
-moz-opacity:1; 
-ms-filter:"alpha(opacity=1)";
filter:alpha(opacity=1);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=1);
opacity:1; 
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

.slanted:hover {
background:rbc(187,186,186);
-khtml-opacity:.50; 
-moz-opacity:.50; 
-ms-filter:"alpha(opacity=50)";
filter:alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
opacity:.50; 
}

.slanted > * { 
-webkit-transform: skew(20deg) /* rotate(2deg) */;
-moz-transform: skew(20deg) /* rotate(2deg) */;
transform: skew(20deg) /* rotate(2deg) */;
}

.slanted a { color:#fff; }


.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.5em;line-height:0;color:#931a1d;-webkit-border-radius:1.5em;-moz-border-radius:1.5em;border-radius:1.5em;border-color:#931a1d;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:#931a1d;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:#fff; padding-botom:10px;
}

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

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