/*----------------------------------------------------------*/
/* Si Senior												*/
/* CSS name: main.css										*/
/* Developer: MindPick Software LLC							*/
/* Date: 5/28/2017											*/
/*															*/
/* Description: Style sheet for elements common to all 	 	*/
/* 		pages and all media.								*/
/*----------------------------------------------------------*/


			/*-----------------------------------------*/
			/* Reset so all browsers format similarly. */
			/*-----------------------------------------*/
			
/*			
 * Prevent iOS and IE text size adjust after device orientation 
 * change, without disabling user zoom. Set initial font size for
 * rems. */
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-size: 100%;
}

/* Remove default margin on body. */
body {
	margin: 0;
}

/*
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 
 * 		10/11 and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/* Remove the gray background color from active links in IE 10. */
a {
  background-color: transparent;
}

/*
 * Improve readability of focused elements when they are also in an
 * active/hover state. */
a:active,
a:hover {
  outline: 0;
}

/*
 * Address variable `h1` font-size and margin within `section` and
 * `article` contexts in Firefox 4+, Safari, and Chrome. */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Address inconsistent and variable font size in all browsers. */
small {
  font-size: 80%;
}

/* Prevent `sub` and `sup` affecting `line-height` in all browsers. */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/*
 * Fixes dropdown arrow hidden in older Firefox when margin, 
 * padding 0 */
select {
	min-width: 1.5em;  
}

/* Make abbr consistent. */
abbr {
	border-bottom: 1px dotted #333;
	cursor: help;
}

/* Create a nicer hr. */
hr {
  	box-sizing: content-box;
	border-style: inset;
	border-width: 1px;
}

/*
 * Keeps Firefox and IE 8/9/10 inside `a` element from putting border
 * on images */
img {
	border: none;  
}

/* Address margins set differently in Firefox 4+, Safari, and Chrome. */
button,
input,
optgroup,
select,
textarea {
  margin: 0;
}

/* Address `overflow` set to `hidden` in IE 8/9/10/11. */
button {
  overflow: visible;
}

/*
 * Address inconsistent `text-transform` inheritance for `button` and 
 * `select`. All other form control elements do not inherit `
 * text-transform` values. Correct `button` style inheritance in
 * Firefox, IE 8/9/10/11, and Opera. Correct `select` style inheritance
 * in Firefox. */
button,
select {
  text-transform: none;
}

/*
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native 
 *    `audio` and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-
 *    type `input` and others.
 */
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/* Re-set default cursor for disabled elements. */
button[disabled],
html input[disabled] {
  cursor: default;
}

/* Remove inner padding and border in Firefox 4+. */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/*
 * Address Firefox 4+ setting `line-height` on `input` using `
 * !important` in the UA stylesheet. */
input {
  line-height: normal;
}


				/*--------------------------*/
				/*** Page template - body ***/
				/*--------------------------*/

/*------------------------------------------------------------------*/
/* Load the font for the navigation and titles.						*/
/*------------------------------------------------------------------*/
@font-face {
	font-family: 'Chianti XBd BT';
	src: url('ChiantiBT-ExtraBold.eot');
	src: url('ChiantiBT-ExtraBold.eot?#iefix') format('embedded-opentype'),
		url('ChiantiBT-ExtraBold.woff') format('woff'),
		url('ChiantiBT-ExtraBold.ttf') format('truetype'),
		url('ChiantiBT-ExtraBold.svg#ChiantiBT-ExtraBold') format('svg');
	font-weight: 800;
	font-style: normal;
}

/*------------------------------------------------------------------*/
/* Set overall background color and some font info.  				*/
/*------------------------------------------------------------------*/
body {
	background-color: #222;
	color: #ddd;
	line-height: 1;
	text-align: center;
}

/*------------------------------------------------------------------*/
/* page_body is the section of the page between the header and		*/
/* the footer. Set margins to center the content. Also, set default */
/* content font info, including font size. Set minimum display		*/
/* width for small screens and maximum for all.						*/
/*------------------------------------------------------------------*/
#page_body {
	width: 100%;
	min-width: 320px;
	max-width: 1100px;
	margin: 0 auto;
	font-size: 1rem;
	line-height: 1.3;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
}



				/*----------------------------*/
				/*** Page template - header ***/
				/*----------------------------*/

/*----------------------------------------------------------*/
/* Newsletter link in upper right corner of the page. 		*/
/*----------------------------------------------------------*/
#newslink {
	color: #ac358f;
	position: absolute;
	right: 0px;
	pointer-events: auto;
}

/*----------------------------------------------------------*/
/* Make the header section span the page up to the maximum.	*/
/* Fix its position so it's always visible, even on scroll.	*/
/* header is transparent so content can be seen when page	*/
/* is scrolled.												*/
/*----------------------------------------------------------*/
#header {
	position: fixed;
	top: 0;
	width: 100%;
	min-width: 320px;
	max-width: 1100px;
	border-top: 5px solid #fefde8;
	z-index: 100;	/* needed or content scrolls on top of header */
	font-size: 1rem;
	line-height: 1.2;
	text-align: left;
	background-color: transparent;
	color: #ac358f;
	pointer-events: none;
}

/*----------------------------------------------------------*/
/* Put the logo at the left edge of the header. Make  its	*/
/* image fill the div, even on resizing.					*/
/*----------------------------------------------------------*/
#header #logo {
	float: left;
	height: 130px;
	width: 158px;
	padding: 0 3px 10px;
	background-color: #fefde8;
	pointer-events: auto;
}

#header.small #logo {
	height: 120px;
	width: 146px;
}

#header #logo img {
	height: 100%;
	width: 100%;
}

/*----------------------------------------------------------*/
/* Give most of the header the same background color as for	*/	
/* the logo. header-right encompasses the address and the	*/
/* navigation menu bar. Set overflow hidden so right side	*/
/* fills the width after the logo and so it contains all	*/
/* sub-elements.											*/
/*----------------------------------------------------------*/
#header-right {
	background-color: #fefde8;
	overflow: hidden;
}

/*----------------------------------------------------------*/
/* The address height is smaller on small devices. It 		*/
/* pushes the navigation menu bar down below it.			*/
/*----------------------------------------------------------*/
#header #address {
	height: 44px;
	padding: 2em 0 0 25px;
	overflow: hidden;	/* keeps address p margin inside div */
	font-size: 1rem;
	font-family: TimesNewRoman, 'Times New Roman', Times, Baskerville, Georgia, serif;
	font-style: italic;
	font-variant: normal;
	font-weight: bold;
	pointer-events: auto;
}

#header.small #address {
	height: 32px;
}

#address p {
	margin: 0;	/* no margins on small devices */
	font-weight: bold;
}

/* street address disappears on scroll */
#header.small #address .street {
	display: none;
}

/*------------------------------------------------------------------*/
/* Set up the navigation menu across the top of the page just		*/
/* below the address. On small devices, the navigation menu is		*/
/* collapsed into a "hamburger" (three horizontal lines). The		*/
/* hamburger is actually the label for a hidden checkbox input. 	*/
/* Clicking on it checks and unchecks the input. When checked, 		*/
/* display the navigation menu below (or next to, depending on 		*/
/* available space) the hamburger by changing its height from 0 	*/
/* to a maximum. So, this is a CSS-only action - no JavaScript.		*/
/* Note: The absolutely positioned nav-items is positioned at its	*/
/* static position by default.										*/
/*------------------------------------------------------------------*/
#nav-check {
	display: none;
}

#nav-check:checked ~ #nav-items {
	position: absolute;	/* Overrides hidden overflow */
	display: block;
	max-height: 500px;	/* Changing the height reveals the items */
	background-color: #0cd93e;
	padding-bottom: .5em;
	margin-left: -4.5em;	/* move dropdown slightly to left */	
	z-index: 110;	/* Put it on top */
	}

/* nav-label is the hamburger. */
.nav-label {
	display: block;
	font-size: 3.5em;
	font-size: 3.5rem;
	line-height: 1;
	color: #ff0;
	cursor: pointer;
}

/* Size the navigation menu bar and give it a gradient */
#header #navigation {
	height: 3.5em;
	padding-left: 48px; /* cutout border proportion + 10 */
	background: #00bf39; /* Old browsers */
	background: -moz-linear-gradient(top, #00bf39 0%, #00ce3a 10%, #0cd93e 25%, #0cd93e 73%, #00ce3a 90%, #00bf39 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #00bf39 0%,#00ce3a 10%,#0cd93e 25%,#0cd93e 73%,#00ce3a 90%,#00bf39 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #00bf39 0%,#00ce3a 10%,#0cd93e 25%,#0cd93e 73%,#00ce3a 90%,#00bf39 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00bf39', endColorstr='#00bf39',GradientType=0 ); /* IE6-9 */
	pointer-events: auto;	
}

/*------------------------------------------------------------------*/
/* Put a triangle at the left edge of the navigation to pull it		*/
/* away from the logo. Use a border of a zero-sized div with two	*/
/* different colors to get a triangle.								*/
/*------------------------------------------------------------------*/
#header #nav-cutout {
	position: absolute;
	width: 0;
	height: 0;
	left: 163px; /* Position to right of logo -1px to overlap */
	top: 73px; /* Position at bottom of logo border -1px to overlap */
	border-top: 68px solid #fefde8;
	border-right: 34px solid transparent;	
}

#header.small #nav-cutout {
	left: 151px;
	top: 63px;
}

/*------------------------------------------------------------------*/
/* Small screens in landscape mode put the navigation menu next		*/
/* to the hamburger instead of below it. This is so the bottom		*/
/* of the list doesn't drop off the screen.							*/
/*------------------------------------------------------------------*/

@media screen and (min-width: 400px) and (orientation: landscape ) {
	#nav-check:checked ~ #nav-items {
		margin: -6.5em 0 0 3em;
	}
}

/*------------------------------------------------------------------*/
/* Large screens show a bigger header that shrinks on scroll with	*/
/* a transition. This is done by using JavaScript to apply a class	*/
/* with the name "small" to elements. The logo shrinks, as well. 	*/
/* Apply a minimum width for larger screens.						*/
/*------------------------------------------------------------------*/
@media screen and (min-width: 370px) { 
	/* Address was adjusted to fit on small screens. */
	#header #address {
		padding-left: 60px;
	}
}

@media screen and (min-width: 600px) {
	#header {
		height: 240px;
		min-width: 580px;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
	}
	
	#header.small {
		height: 170px;
	}
	
	#header #logo {
		height: 150px;
		width: 182px;
		padding: 0 0 20px 3px;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
	}
	
	#header.small #logo {
		height: 130px;
		width: 158px;
		padding-bottom: 10px;
	}
	
	#newslink {
		right: 20px;
	}
	
	#header #address {
		height: 100px;
		padding-top: 0;
		font-size: 1.25rem;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
	}

	#header #address p {
		margin: 1em 0;
	}

	#header.small #address {
		height: 60px;
		font-size: 1.1em;
		font-size: 1.1rem;
	}
	
	/*
	 * don't show hamburger on larger devices. Show the navigation
	 * items on the navigation menu bar instead. */
	.nav-label {
		display: none;
	}
	
	#header #navigation {
		padding-left: 65px; /* cutout border + 10 */
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
	}
	
	#header.small #navigation {
		padding-left: 48px; /* cutout border propo + 10 */
	}
	
	#header #nav-cutout {
		top: 100px;
		left: 184px;
		border-top: 90px solid #fefde8;
		border-right: 45px solid transparent;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
	}
	
	#header.small #nav-cutout {
		top: 50px;
		left: 160px;
	}
}

/*------------------------------------------------------------------*/
/* Format the navigation menu items into a vertical list to start.	*/
/*------------------------------------------------------------------*/
#nav-items {
	overflow: hidden;	/* Hides everything > max height */
	list-style-type: none;
	width: 10em;	/* Just wide enough to fit one per row */
	max-height: 0;	/* Hidden to start on small devices */
	padding: 0 0 0 1em;
	margin: 0;
	background-color: transparent;
}

#navigation li {
	float: left;
	width: 7.5em;
	margin: 0;
}

#navigation .firstitem {
	margin: 0;	/* Same as the others to start, indented if wide enough */
}

#nav-items a {
	font-family: "Chianti XBd BT", Tahoma, Verdana, Segoe, sans-serif;
	font-variant: small-caps;
	font-size: 1.7rem;
	line-height: 1.5;
	color: #006600;
	text-decoration: none;
}

#navigation a:hover {
	color: #fbff67;
}

/*
 * Set up formatting so menu item of current page is a different
 * color. */
body#home a#home_a,
body#about a#about_a,
body#info a#info_a,
body#menu a#menu_a,
body#specials a#specials_a,
body#margaritas a#margaritas_a {
	color: #ffff00;
}

/*
 * On larger devices, making the navigation area wider puts the
 * navigation items horizontally in two rows. */
@media screen and (min-width: 601px) {
	#nav-items {
		width: 25em;	/* Now can fit three per row */
		max-height: 500px;
		padding: .25em 0 0 0;
	}
	
	#nav-items a {
		font-size: 1.3rem;
		line-height: 1.2;
	}
	
	/* First item in second row indented. */
	#navigation .firstitem {
		margin-left: 1.5em;
	}
	
}



				/*-----------------------------*/
				/*** Page template - content ***/
				/*-----------------------------*/

/*------------------------------------------------------------------*/
/* Set up the actual content section.								*/
/*------------------------------------------------------------------*/                                         
#page_content {
	padding: 10px 20px 0 20px;
	margin: 145px 0 0;	/* to allow for header */
	background: transparent;
	color: #ddd;
}

#page_content a {
	color: #ee0;
}

/* Adjust for larger devices. */
@media screen and (min-width: 600px) {
	#page_body {
		min-width: 580px;
		font-size: 1rem;
		line-height: 1.4;
	}
	
	#page_content {
		padding: 10px 40px 0 40px;
		margin-top: 195px;
		font-size: .875rem;
	}
}



				/*----------------------------*/
				/*** Page template - footer ***/
				/*----------------------------*/

/*----------------------------------------------------------*/
/* Footer is a lime color with a gradient.	 				*/
/*----------------------------------------------------------*/
#footer {
	clear: both;	/* just in case */
	height: 3.25rem;
	padding: 0.2em 0;
	font-size: 1.25rem;
	font-family: "Chianti XBd BT", Tahoma, Verdana, Segoe, sans-serif;
	background: #00bf39; /* Old browsers */
	background: -moz-linear-gradient(top, #00bf39 0%, #00ce3a 10%, #0cd93e 25%, #0cd93e 73%, #00ce3a 90%, #00bf39 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #00bf39 0%,#00ce3a 10%,#0cd93e 25%,#0cd93e 73%,#00ce3a 90%,#00bf39 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #00bf39 0%,#00ce3a 10%,#0cd93e 25%,#0cd93e 73%,#00ce3a 90%,#00bf39 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00bf39', endColorstr='#00bf39',GradientType=0 ); /* IE6-9 */	
}

#footer a {
	color: #ffff00;
	text-decoration: none;
}

/*
 * Background of links to other restaurants. On small devices, 
 * links are on separate lines. On larger devices they cross
 * the page. */
#sisters {
	position: relative;
	width: 100%;
	text-align: center;
	color: #ffff00;
}

.sister {
	float: left;
	width: 100%;
}

/* Copyright and author. */
#attribution {
	height: 2em;
	margin: 0.2rem 1rem;	
}

#attribution, #attribution a {
	font-size: .75rem;
	color: #ddd;	
	text-decoration: none;
}

#attribution a:hover, #footer a:hover {
	text-decoration: underline;
}

/* Adjust for larger devices. */
@media screen and (min-width: 500px) {
	#footer {
		height: 1.75rem;
	}
	
	.sister {
		width: 49%;
	}
	
	#attribtuion {
		margin: 0.2rem 2rem;	
	}
}



				/*--------------------------*/
				/*** General page formats ***/
				/*--------------------------*/
				
/*--------------------------*/
/* Format the page content. */
/*--------------------------*/
.info_title {
	margin: 0;
	color: #eee;
	font: bold 1.3em "Comic sans MS", cursive, sans-serif;
}

.info_content {
	color: black;
	font: 1.1em Arial, SunSans-Regular, sans-serif;
}

.content_title {
	font-family: "Chianti XBd BT", Tahoma, Verdana, Segoe, sans-serif;
	font-size: 2.5rem;
	text-align: center;
	color: #db43b5;
}

/* Chianti has a wide non-breaking space, so replace. */
.content_title .thinsp, .content_subtitle .thinsp {
	font-family: sans-serif;
}

@media screen and (min-width: 801px) {
	.content_title {
		font-size: 2em;
		font-size: 2rem;
	}
}

.content_subtitle {
	margin: 1.5em 0 1em;
	color: #eee;
	font-size: 1.4rem;
	font: "Chianti XBd BT", Tahoma, Verdana, Segoe, sans-serif;
}

#notice h2 {
	color: #db43b5;
	font: italic 1.5em "Chianti XBd BT", Tahoma, Verdana, Segoe, sans-serif;
	margin-top: 2em;
	text-align: center;
}


/* Chianti has a wide non-breaking space, so replace. */
.content_title .thinsp, .content_subtitle .thinsp, #notice h2 {
	font-family: sans-serif;
}

.captioned_photo {
	color: #ffc800;
	font-size: smaller;
	font-style: italic;
	text-align: center;
	font-weight: bold;
	line-height: 1.2;
}

/*
 * Photos are framed with a border. The photo itself is a background
 * image that fits the width of .photo_frame so different sized images
 * can be used for different device sizes. Captions are optional. 
 * inline-block forces caption to be the same width as photo. */
.photo_frame {
	display: inline-block;
}

.photo_frame .photo {
	background-size: cover;
	border: 8px solid #b4b4b4;
}

.photo_frame .caption {
	overflow: hidden;
	min-height: 8px;
	width: 100%;
	margin-top: -8px;
	background-color: #b4b4b4;
	text-align: center;
	font-size: .75rem;
	line-height: 1.4;
	font-style: italic;
	color: #84296d;
}



				/*-------------------------*/
				/*** Helper classes.	 ***/
				/*-------------------------*/

/* Text to display only in text-based browsers. */
.txt_browse {
	display: none; 
}

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


				/*---------------------------*/
				/*** Miscellaneous styles. ***/
				/*---------------------------*/

.float_left {
	float: left;
}

.float_right {
	float: right;
}

.clear {
	display: block;
	clear: both;
}
		
.ital {
	font-style: italic;
}

.bold {
	font-weight: bold;
}

.underline {
	text-decoration: underline;
}

.smaller {
	font-size: smaller;
}

.left {
	text-align: left;
}

.center {
	text-align: center;
}

.justify {
	text-align: justify;
}

.normal {
	font-weight: normal;
}

.hidesmall {
	display: none;
}

@media screen and (min-width: 600px) {
	.hidesmall {
		display: block;
	}
}