body { 
	background-image: url('layout/spankys-bg.jpg');  /* important */
	background-color: #7d5748; /* important */ 
	margin: 0 auto; 
	font-family: trebuchet MS, verdana, sans-serif; 
	font-size: 16px; 
	color: #443322;
}
a { color: brown; } 
a:hover { color: #992222; text-decoration: underline; }
b { color: #222222; }
a img { border: 0; }

ul { padding-left: 30px; }
li { padding-bottom: 5px; text-align: justify; }

#sisters { 
	background-repeat: repeat-x; 
	background-image: url('layout/lownav-bg.png');  /* important */*important
	background-position:left; 
	width: 100%; 
	vertical-align: top; 
	background-repeat: no repeat; 
}
#sisters a img { opacity: 0.7; width:100%; height: auto; }
#sisters a:hover img { opacity: 1.0; }

#content { 
	background-color: #e9e4da; /* important */
	padding: 30px 30px 40px 30px; 
	margin: 0 20px 20px 20px; 
	border: 0px solid #880000; 
}
#content p { text-align: justify; margin-top: 2px; }
#content h1 { color: #333333; font-family: papyrus; font-size: 28px; line-height: 1.75em; margin: 0; padding: 0; }
#content h2 { color: #333333; font-family: papyrus; font-size: 1.125em; line-height: 20px ;margin: 0; padding: 0; padding-top: 20px; border-bottom: 1px solid #ccccaa; margin-bottom: 6px; }
#content h3 { color: #222222; font-size: 14px; margin: 0; padding: 0; }
#content p a { color: #440000; text-decoration: none; }
#content p a.hot { color: #992222; text-decoration: underline; }
#content p a:hover { color: #992222; text-decoration: underline; }
#content .top { text-align: right; }
a.hot b { color: #992222; font-size: 15px; text-decoration: underline; }
span.printable { color: #999999; }
#content span.printable a { color: #666666; text-decoration: underline; }
.press { font-size: 11px; margin-bottom: 6px; }

.menupics { padding: 0px 30px 0px 30px; margin: 0 20px 0px 20px; border: 0px solid #880000; }
.menupics table { width:100%; text-align:center; margin-left:auto; margin-right:auto; padding-left:12px; }
.menupics td { padding: 3px; }
.menupics a img { border:0; width:100%;height:auto; }
.cf { text-align: center; padding-top: 1.2em; padding-bottom: 1em; }
#mnt {padding-top: 2em; }
.gather-lead-button { cursor: hand; cursor: pointer; }

.highlight { border: 1px solid #880000; background-color: #ffffff; width: 90%; margin: 0 auto; padding: 10px;	color: #880000; text-align: center; line-height: 22px; margin-top: 20px; margin-bottom: 20px; }
.rms-item:hover { 
	background-color: #ddccbb; /* important */
} 
#co2rms-footer { text-align: left; } 

#credits { color: #ffffff; }
#credits a { color: #dddddd; }
.gather-lead-button {
        font-family: papyrus condensed;
        margin-top:1.2em;
        padding:1.0em;
        background-color: #666666;
        color:#ffffff;
        text-transform:uppercase;
        border:1px solid #333;
        border-radius: 1em;
}
.gather-lead-button:hover {
        font-family: papyrus condensed;
        text-transform:uppercase;
        text-decoration:none;
        color:#ffffff;
}
.photo-container { padding-top: 5%; margin: 0 auto; max-width: 960px; }
#photos { margin: 0 auto; max-width: 100%; position: relative; }
#photos a { display: inline-block; }
#photos img { position: relative; float: left; width: 100%; }
#photos div { position: absolute; top: 50%; left: 50%;  transform: translate(-50%, -50%); width: 90%; height: 50%; }
#photos p { max-width: 100%; color: #000000; font-size: 1em; text-align: center; position: absolute; top: 60%; left: 50%;  transform: translate(-50%, -50%); width:98%; padding:1em; 0; background-color: #ffffff; background-color: rgba(255, 255, 255, 0.7); }
#photos span { font-size: 1.2em; }


.imgborder { border: 1px solid #333333; width:100%; height: auto; margin: 0 auto; }
#form { 
	background-color: #ffffff; /* important */
	border: 1px solid #999999; 
	padding: 25px; 
}
#form table { width: 90%; border: none; color: #ffffdd; }
#form td  { 
	vertical-align:top; 
	text-align:right; 
	color: #333333; /* important */
}
#form b  { color: #333333; /* important */ }
#form input { width:100%; }
#form textarea { width:100%; }
.center { max-width:800px; margin: 0 auto; text-align: center; }

.orderonline { padding-top:1.5em; color: #990000; text-align: center; }
.orderonline a { color: #ffffff; padding: 5px 15px 5px 15px; background-color: brown; border: 1px solid #666666; border-width: 1px 2px 2px 1px; font-size: 14px; }
.orderonline b { color: #ffffff; }


.cell {margin:0 auto; padding-right:20px; display:table-cell; vertical-align: middle; white-space:nowrap;}

div#aside{ 
	width:170px; 
	border: 1px #000000 solid; 
	background-color: #ede9e1; /* important */
	box-shadow: 2px 3px 1px #333; 
	border-radius: 1em;}
div.hours{ 
	font-family: trebuchet MS,inherit; 
	text-transform:normal;text-align:center;
	margin-bottom: 1em;
	color:#000000; /* important */
}
div.section { padding: 1em; white-space:nowrap; }
h2.menu { 
	font-size: 1.125em; 
	text-transform:normal; 
	text-align:center; 
	line-height:0; 
	color:#000000; 
}
p.time { font-size: 12px; color:#000; font-family:trebuchet MS; text-transform:normal; text-align:center; white-space:nowrap; }

.cell img { width:100%; height: auto;}
.cell a {
	font-size: 1em;
	line-height: 1em;
	color: #ffffff; /* important */
	color: rgba(255, 255, 255, 0.7); /* important */
	text-align:right;
	white-space:nowrap;
	text-decoration: none;
}
#footer { margin:auto; text-align: center;}
#copyright, #copyright a { text-decoration: none; color: #555; opacity: 0.8; font-size: 0.75em; text-align:right; max-width: 100%; }

.iframe { position: relative; padding-bottom: 100.0%; padding-top: 34px; height: 0; overflow: hidden; }

/* STRUCTURE */
#pagewrap {
	padding: 5px;
	width: 960px;
	margin: 20px auto;
}
header {
        background-repeat: repeat-x;
        background-image: url('layout/header-bg.png'); /* important */
        background-position:left;
        width: 100%;
        vertical-align: top;
}
#nav {
	width: 170px;
	float: left;
	padding: 5px 15px;
	z-index: 9;
}
#middle {
	width: 576px; /* Account for margins + border values */
	float: left;
}
#sidebar {
	width: 120px;
	padding: 5px 15px;
	float: left;
}
footer {
        width: 100%;
        vertical-align: bottom;
        clear: both;
}

header, #nav, #middle, #sidebar {
	margin-bottom: 5px;
}

#pagewrap, header, #nav, #middle, #sidebar, footer {
	border: 1px solid inherit;
}


/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* TABLET */
/* for 980px or less */
@media screen and (min-width:601px) and (max-width: 980px) {
#pagewrap {
	padding: 5px;
	width: 94%;
	margin: 1px auto;
}
#nav {
	width: 30%;
	padding: 0px;
}
#middle {
	width: 70%; /* Account for margins + border values */
	float: left;
}
	
#sidebar {
	clear: both;
        width: 100%;
        padding: 0;
	margin: 0 auto;
	}

.cell a { font-size: 0.75em; line-height: 0.75em; text-align:right; white-space:nowrap; text-decoration: none;}
div#aside {display: table; width;100%; border: 1px #000000 solid; box-shadow: 2px 3px 1px #333; border-radius: 1em; text-transform:normal;text-align:center; margin-bottom: 1em; color:#fff; }
div.hours {display:table-row; }
div.section { display:table-cell; }
section h2.menu { font-size: 0.75em; }
p.time { font-size: 0.75em; }
#reservations { display: none; }
#socialmedia { display: none; }
}



/*MOBILE */
/* for 700px or less */
@media screen and (max-width: 600px) {
#pagewrap {
        width: 100%;
        padding: 0;
        margin: 0;
}
#nav {
	position: absolute;
	top: 0;
	right: 0 ;
        width: 100%;
        padding: 0;
	margin:0;
}
#middle {
		width: 100%;
		padding: 0 0;
		margin: 0;
	}
#sidebar {
        width: 100%;
        margin: 0;
	padding: 0;
        }

.cell img { margin: 1em;width:115%;height:auto;}
div#aside{ width:90%;margin:0 auto;display:table;padding:0; margin: 0 auto;}
div.hours{ display: table;padding:1.2em;}
div.section {display:table-row; text-align:left}
h2.menu { font-size: 0.8em;display:table-cell;text-align:left;padding:1em; }
p.time { font-size: 0.8em;display:table-row;text-align:left;padding:1em; }
#reservations { display:none; }
#socialmedia { margin-top:1em;float:right; }
#socialmedia img { width:32px;height:auto; }
}