@charset "UTF-8";

/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
	color: #222;
	font-size: 1em;
	line-height: 1.4;
	height:100%;
	width:100%;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
	background: #b3d4fc;
	text-shadow: none;
}

::selection {
	background: #b3d4fc;
	text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
	vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
	resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
	margin: 0.2em 0;
	background: #ccc;
	color: #000;
	padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body {
	font: 100%/1.4 Arial, Verdana, Helvetica, sans-serif;
	background-color: #ffffff;
	margin: 0;
	padding: 0;
	color: #31363a;
	height:100%;
	width:100%;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { 
	padding: 0;
	margin: 0;
}
ul.nobull, .content ul.nobull {
	list-style:none;
	padding:0 15px 25px;
	margin: 0;
}
ul.nobull li {
	padding: 0;
	margin: 0;
	line-height: 2em;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 5px;
	padding-right: 15px;
	padding-left: 15px;
}
h1, h2 {
	font-family: 'Righteous', sans-serif;
}
a img {
	border: none;
}
a:link, a:visited {
	color:#414958;
	text-decoration: underline; 
}
a:hover, a:active, a:focus {
	text-decoration: none;
}
a:link.button, a:visited.button  {
	background-color: #c33a36;
	color: #ffffff;
	display: inline-block;
	font-size: 16px;
	padding: 10px 15px;
	text-align: center;
	text-decoration: none;
	border-color: #31363a;
	border-radius: 8px 8px 8px 8px;
	border-style: solid;
	border-width: 1px;
}
a:hover.button, a:active.button, a:focus.button {
	background-color: #31363a;
	border-color: #c33a36;
}
.containers {
	position:relative;
	width:auto;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	background-color: #FFF;
	margin: 0 auto;
}
.header {
	background-color: #6F7D94;
	width: 100%;
	height:10%;
}
.navbar {
	background:#ffffff;
	position:relative;
}
.navbar-collapse {
	position:relative;
}
.navbar-nav {
	position:absolute;
	bottom:0;
	right:0;
	margin:0;
	padding:0;
}
.navbar-nav li a:link, .navbar-nav li a:visited {
	color:#c33a36;
	text-decoration: none;
	padding: 0 0 0 27px;
	font-family: 'Righteous', sans-serif;
	font-size:16pt;
}
.navbar-nav li a:hover, .navbar-nav li a:active, .navbar-nav li a:focus {
	color:#969c92;
	text-decoration: underline;
}
.socialnav {
	position:absolute;
	top:0;
	right:0;
}
.socialnav li {
	list-style:none;
	float:left;
}
.socialnav li a {
	padding: 0 0 0 10px;
}
.tancolor {
	background-color:#e1e9db;
	margin:0;
	padding:0;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	width:100%;
}
.threecolumn {
	float:left;
	width: 33%;
	text-align: center;
	margin: 20px 0;
}
.threecolumn img {
	width:90%;
}
.threecolumn p {
	width:80%;
	text-align: left;
	margin: 20px auto;
}
.content {
	margin:0 auto;
	padding: 10px 0;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	width:auto;
	max-width: 1200px;
}
.content h1 {
	color:#969c92;
}
.content h2 {
	padding-top:15px;
}
#footpad {
	padding-bottom:288px;
}
.contained {
	margin:0 auto;
	padding: 10px 0;
	width:auto;
	max-width: 1200px;
}

/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol { 
	padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}

/* ~~ The footer ~~ */
.footer {
	margin:0;
	padding:0;
	background-color: #31363a;
	color: #ffffff;
	width:100%;
	min-height:151px;
	position:absolute;
	bottom:0;
}
.footer a:link, .footer a:visited {
	color:#ffffff;
	text-decoration: underline; 
}
.footer a:hover, .footer a:active, .footer a:focus {
	text-decoration: none;
}
.footcolumn {
	float:left;
	width: 33%;
}
.footcolumn h3 {
	color: #969c92;
	font-family: 'Righteous', sans-serif;
	margin:0 10px 10px;
	padding: 10px 0;
}
.footcolumn p {
	width: 95%;
	border-top:1px solid #882626; 
	margin:0 10px;
	padding: 10px 0;
}
#footred {
	width: 100%;
	background-color: #882626;
}
#footleft, #footright {
	margin:0;
	padding: 10px 0;
}
#footleft {
	float:left;
}
#footright {
	float:right;
}

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {
	float: right;
	margin-left: 8px;
}
.fltlft {
	float: left;
	margin-right: 8px;
}
.clearfloat {
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
.disclaimer {
	font-size:8pt;
	line-height: 1em;
}
.underline {
	text-decoration:underline;
}
.center	{
    width:100%;
    text-align:center;
}
/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
	display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
	visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *	`contenteditable` attribute is included anywhere else in the document.
 *	Otherwise it causes space to appear at the top and bottom of elements
 *	that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *	`:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
	content: " "; /* 1 */
	display: table; /* 2 */
}

.clearfix:after {
	clear: both;
}
/* --- Reviews --- */
ul#simpleQuote{
	list-style-type:none;
}

ul#simpleQuote li{
	
}
/* --- Homepage --- */
.mastbanner {
	width: 100%;
	background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    background-attachment: fixed;
	margin: 0;
	padding:10% 0;
}
.bannertext {
	with:64%;
	padding:1% 18%;
	background:rgba(150,156,146,0.65);
}
.bannertext h2 {
	color:#c33a36;
	font-size: 50pt;
	font-weight: normal;
	line-height: 1em;
}
.bannertext h3 {
	font-size: 45pt;
	font-weight: normal;
	line-height: 0.75em;
}
#happyhour {
	background-image: url("../img/sams-bar-drinks.jpg");
}
#homeleft {
	float: left;
	width: 60%;
}
#homeleft h1 {
	color:#969c92;
	line-height: 1.5em;
}
#homeleft p {
	line-height: 1.5em;
}
#homeright {
	float: left;
	width: 40%;
}
/* --- Food Menu Page --- */
#foodmenu {
	background-image: url("../img/sams-food-menu.jpg");
}
.bigleft {
	float: left;
	width:70%;
}
.smallright {
	float: left;
	width:30%;
	text-align: center;
}
.smallright img, .quarter img {
	width:90%;
}
.halfcolumn {
	float: left;
	width:50%;
}
.quarter {
	float: left;
	width:25%;
}
/* --- Directions Page --- */
#directions {
	background-image: url("../img/sams-wedge-inn-front-inside.jpg");
}
.map-responsive{
    overflow:hidden;
	margin:20px 0;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
/* --- Contact Us Page --- */
#contactus {
	background-image: url("../img/sams-wedge-inn-front-inside2.jpg");
}
.antispam {
    display:none;
}
/* --- Gallery Page --- */
#photogallery {
	background-image: url("../img/sams-bar-tvs.jpg");
}
#gallery {
	width:100%;
	margin:0 auto;
	padding:0;
	position:relative;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}
#gallery li {
	list-style:none;
	margin:0;
	padding:20px;
	text-align:center;
	float:left;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
	/* Style adjustments for viewports that meet the condition */
}

@media print,
	   (-webkit-min-device-pixel-ratio: 1.25),
	   (min-resolution: 1.25dppx),
	   (min-resolution: 120dpi) {
	/* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
	*,
	*:before,
	*:after,
	*:first-letter,
	*:first-line {
		background: transparent !important;
		color: #000 !important; /* Black prints faster:
								   http://www.sanbeiji.com/archives/953 */
		box-shadow: none !important;
		text-shadow: none !important;
	}

	a,
	a:visited {
		text-decoration: underline;
	}

	a[href]:after {
		content: " (" attr(href) ")";
	}

	abbr[title]:after {
		content: " (" attr(title) ")";
	}

	/*
	 * Don't show links that are fragment identifiers,
	 * or use the `javascript:` pseudo protocol
	 */

	a[href^="#"]:after,
	a[href^="javascript:"]:after {
		content: "";
	}

	pre,
	blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}

	/*
	 * Printing Tables:
	 * http://css-discuss.incutio.com/wiki/Printing_Tables
	 */

	thead {
		display: table-header-group;
	}

	tr,
	img {
		page-break-inside: avoid;
	}

	img {
		max-width: 100% !important;
	}

	p,
	h2,
	h3 {
		orphans: 3;
		widows: 3;
	}

	h2,
	h3 {
		page-break-after: avoid;
	}
}
@media only screen and (max-width: 1200px) {
	.navbar-brand img {
		width:80%;
	}
	.navbar-nav li a:link {
		font-size:14pt;
		padding:0 0 0 15px;
	}
	.bannertext h2 {
		font-size: 25pt;
	}
	.bannertext h3 {
		font-size: 22pt;
	}
}
@media only screen and (max-width: 1000px) {
	.navbar-brand img {
		width:75%;
	}
	.navbar-nav li a:link {
		font-size:12pt;
		padding:0 0 0 15px;
	}
}
@media only screen and (max-width: 767px) {
	.navbar-brand img {
		width:100%;
	}
	.navbar-nav, .socialnav {
		position:relative;
		text-align: center;
	}
	.navbar-nav li a:link {
		font-size:20pt;
		padding:25px 0 0;
	}
	.socialnav li {
		width:50%;
		padding:15px 0;
	}
	.socialnav li a {
		padding:50px 0 0;
	}
	.bannertext h3 {
		font-size: 16pt;
	}
	#doordash {
		text-align: center;
		width: 100%;
		float:none;
		margin-top: 15px;
	}
	#footpad {
		padding-bottom:0;
	}
	.footer {
		position: relative;
	}
	.bannertext {
	with:90%;
	padding:1% 5%;
	}
	.threecolumn, .footcolumn, #footleft, #footright, #homeleft, #homeright, .bigleft, .smallright, .halfcolumn, .quarter {
		float:none;
		width: 100%;
	}
	#footred {
		text-align: center;
	}
}