/*********************************************************/
/******************** FONTS ******************************/
/*********************************************************/

/* Regular font */
/* This format/syntax allows font to display in all browsers */
@font-face 
{
	font-family: 'KlinicSlab';
	src: url('../fonts/klinicslabbold.eot');
	src: url('../fonts/klinicslabbold.eot?#iefix') format('embedded-opentype'),  url('../fonts/klinicslabbold.woff') format('woff'),  url('../fonts/klinicslabbold.ttf') format('truetype');
}
/* Overloaded Italic font */
/* This format/syntax allows font to display in all browsers */
@font-face 
{
	font-family: 'KlinicSlab';
	font-style: italic;
	src: url('../fonts/klinicslabit.eot');
	src: url('../fonts/klinicslabit.eot?#iefix') format('embedded-opentype'),  url('../fonts/klinicslabit.woff') format('woff'),  url('../fonts/klinicslabit.ttf') format('truetype');
}

/*********************************************************/
/******************** SECTION STYLING ********************/
/*********************************************************/

/* NOTE: Children are tabbed under parent */
/* NOTE: DO NOT AUTO-FORMAT (!important) */

/* Everything inherits from body */
body 
{
	font-family: Goudy Old Style;
	background-color: #7b573e;
	color: #543136;
	margin: 20px;
	min-width: 424px; /* Don't go smaller than 424px wide (media queries not set up to handle any smaller)*/
}
	
/* header */
header 
{
	background-color: #5e1211;
	color: #d7c5b7;
	padding: 20px;
	position: relative;
	border-top-right-radius: 15px;
	border-top-left-radius: 15px;
}
	/* Begin inherit from header */
	header #logo-norm
	{
		
	}

	header #slogan
	{
		float: right;
		font-style: italic;
		font-size: 30px;
		right: 5%;
		position: absolute;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	header #nav
	{
		margin-top: 12px;
		background-color: #0b9446;
		border-radius: 7px;
	}

		header #nav ul
		{
			list-style: none;
			padding: 0;
			margin: 0;
			text-align: center;
			height: auto;
			line-height: 50px;
		}

			header #nav ul li
			{
				display: inline;
				padding: 15px;
				vertical-align: middle;
			}
				/* Link style parent */
				header #nav ul li a
				{
					text-decoration: none;
					text-align: center;
					color: #3c1f1c;
					margin: 10px;
					padding: 0px 10px 0px 10px;
					font-size: 30px;
					border: 2px solid rgba(0,0,0,0);
					border-radius: 15px;
				}
				/* Link style of current page */
				header #nav ul li a.active
				{
					color: #0b9446;
					border-color: #5e1211;
					background-color: #5e1211;
				}
				/* Link style when mouse hovers */
				header #nav ul li a:hover
				{
					color: #d7c5b7;
					border-color: #d7c5b7;
				}
				/* Link style while being clicked (mouseDown) */
				header #nav ul li a:active
				{
					box-shadow: inset 0 0 20px rgba(0,0,0,0.7);
				}
	/* End inherit from header */

/*********************************************************/
/******************** HOME PAGE **************************/
/*********************************************************/

/* #home-content */
#home-content 
{
	/** It was suggested by professor to not have so many containers
	*	and 'browser noise' so I'm changing the content bg color
	*	to match the container bg color
	background-color: #7b573e; */
	background-color: #d7c5b7;
	height: 1400px;
	padding-bottom: 20px;
}
	/* Begin inherit from #home-content */
	#home-content #nav-panel 
	{
		background-color: #0b9446;
		float: left;
		width: 150px;
		height: inherit;
		padding: 10px;
	}
		#home-content #nav-panel ul
		{
			list-style: none;
			padding: 0;
			margin: auto;
		}
			#home-content #nav-panel ul li
			{
				
			}
				/* Link style parent */
				#home-content #nav-panel ul li a
				{
					text-decoration: none;
					text-align: center;
					color: #3c1f1c;
					display: block;
					width: 130px;
					margin-left: auto;
					margin-right: auto;
					margin-top: 5px;
					margin-bottom: 5px;
					padding: 5px;
					font-size: 30px;
					border: 2px solid #0b9446;
					border-radius: 15px;
					height: 40px; /* height and line-height must match to center vertically */
					line-height: 40px; /* height and line-height must match to center vertically */
				}
				/* Link style of current page */
				#home-content #nav-panel ul li a.active
				{
					color: #0b9446;
					border-color: #5e1211;
					background-color: #5e1211;
				}
				/* Link style when mouse hovers */
				#home-content #nav-panel ul li a:hover
				{
					color: #d7c5b7;
					border-color: #d7c5b7;
				}
				/* Link style while being clicked (mouseDown) */
				#home-content #nav-panel ul li a:active
				{
					box-shadow: inset 0 0 20px rgba(0,0,0,0.7);
				}

	#home-content #jumbotron
	{
		height: inherit;
		padding: 10px;
		margin: 0px 170px 0px 170px;
	}
		#home-content #jumbotron #showcase
		{
			background-color: #d7c5b7;
			text-align: center;
			padding: 10px 20px 10px 20px;
			margin-bottom: 10px;
			border-radius: 10px;
			font-size: 25px;
		}
			#home-content #jumbotron #showcase h1
			{
				margin: 0px;
			}

			#home-content #jumbotron #showcase #img_welcomingchef
			{
				padding: 0;
				max-width: 100%;
			}

			#home-content #jumbotron #showcase p
			{
				margin: auto;
			}
			
			#home-content #jumbotron #showcase #btn_findloc
			{
				-moz-box-shadow: 0px 10px 14px -7px #3e7327;
				-webkit-box-shadow: 0px 10px 14px -7px #3e7327;
				box-shadow: 0px 10px 14px -7px #3e7327;
				background-color: #0b9446;
				-moz-border-radius: 4px;
				-webkit-border-radius: 4px;
				border-radius: 10px;
				border: 2px solid #543136;
				display: inline-block;
				cursor: pointer;
				color: #d7c5b7;
				font-size: 20px;
				font-weight: bold;
				padding: 6px 12px;
				text-decoration: none;
				text-shadow: 1px 2px 3px #065B2A;
				margin: 10px auto;
				min-width: 25%;
			}
			#home-content #jumbotron #showcase #btn_findloc:hover {
				color: #0b9446;
				background-color: #5e1211;
				border: 2px solid #0b9446;
			}
			#home-content #jumbotron #showcase #btn_findloc:active {
				position:relative;
				top:1px;
			}

		#home-content #jumbotron #showcase2
		{
			background-color: #d7c5b7;
			float: left;
			width: 40%;
			padding: 0px 20px;
			border-radius: 10px;
		}
			#home-content #jumbotron #showcase2 h2
			{
				padding: 10px 0;
				margin: 0;
			}

			#home-content #jumbotron #showcase2 #img_sharingmeal
			{
				max-width: 100%;
			}

			#home-content #jumbotron #showcase2 p
			{
				margin: 0;
				padding-bottom: 15px;
			}

		#home-content #jumbotron #showcase3
		{
			background-color: #d7c5b7;
			float: right;
			text-align: right;
			width: 40%;
			padding: 0px 20px;
			border-radius: 10px;
		}
			#home-content #jumbotron #showcase3 h2
			{
				padding: 10px 0;
				margin: 0;
			}

			#home-content #jumbotron #showcase3 #img_restaurant
			{
				max-width: 100%;
			}

			#home-content #jumbotron #showcase3 p
			{
				margin: 0;
				padding-bottom: 15px;
			}

	#home-content #reviews-panel
	{
			float: right;
			width: 150px;
			text-align: center;
			background-color: #5e1211;
			color: #d7c5b7;
			height: inherit;
			padding: 10px;
	}
		#home-content #reviews-panel #reviews 
		{
			width: inherit;
		}

			#home-content #reviews-panel #reviews #img_seal
			{
			}
	/* End inherit from #home-content */

/*********************************************************/
/******************** CONTENT PAGES **********************/
/*********************************************************/

/* #page-content */
#page-content 
{
	background-color: blue; /* Colored for layout testing purposes */
	
	border-left-width: 20px;
	border-left-style: solid;
	border-left-color: #5E1211;
	
	border-right-width: 20px;
	border-right-style: solid;
	border-right-color: #5E1211;
}
	/* Begin inherit from #page-content */
	#page-content #content
	{
		background-color: #7b573e;
		text-align: center;
		padding: 15px;
		display: flex;
		flex-direction: column;
	}

		#page-content #content #story
		{
			background-color: #d7c5b7;
			border-radius: 20px;
			margin-bottom: 15px;
			padding: 0 20px 20px;
		}
			#page-content #content #story #img_restaurant
			{
				max-width: 100%;
			}
			#page-content #content #story p
			{
				font-size: 20px;
				margin: auto;
				text-align: justify;
			}

		#page-content #content #about-us
		{
			display: flex;
			justify-content: space-between;
		}
			#page-content #content #mission
			{
				background-color: #d7c5b7;
				border-radius: 20px;
				padding: 0 15px;
				flex: 0 1 45%;
			}

			#page-content #content #vision
			{
				background-color: #d7c5b7;
				border-radius: 20px;
				padding: 0 15px;
				flex: 0 1 45%;
			}

		#page-content #content #news
		{
			display: flex;
			justify-content: space-between;

		}
			#page-content #content #news #recent-news, #events, #press-inq
			{
				flex: 0 1 30%;
				background-color: #d7c5b7;
				border-radius: 15px;
				padding: 15px;
			}

		#page-content #content #menus
		{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
		}
			#page-content #content .menu
			{
				background-color: #d7c5b7;
				border-radius: 15px;
				padding: 15px;
			}
				#pasta-menu, #wine-menu, #appetizers
				{
					flex-basis: 30%;
				}
					#img_pasta
					{
					}
					#img_wine
					{
					}
					#img_appetizers
					{
					}
				#dinner-menu, #lunch-menu
				{
					margin-top: 15px;
					flex-basis: 45%;
				}
					#img_dinner
					{
					}
					#img_lunch
					{
					}

		#page-content #content #locations
		{
			display: flex;
			justify-content: space-between;
		}
			#page-content #content .loc
			{
				background-color: #d7c5b7;
				flex-basis: 30%;
				border-radius: 20px;
				padding: 10px;
			}
			#page-content #content #loc-head
			{
				margin: 15px auto 0;
			}

		#page-content #content #sitemap-container
		{
			background-color: #d7c5b7;
			border-radius: 15px;
			padding: 20px;
		}
			#page-content #content #sitemap-container #sitemap
			{
				list-style: none;
				display: inline;
			}

/* footer */
footer 
{
	clear: both;
	background-color: #5e1211;
	color: #d7c5b7;
	padding: 20px;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
}
	/* Begin inherit from footer */
	footer #copyright
	{
	}

	footer #contactinfo
	{
	}

	footer #logo-horiz 
	{
		float: right;
	}
	/* End inherit from footer */

/*********************************************************/
/******************** HEADINGS ***************************/
/*********************************************************/

h1, h2, h3, h4, h5, h6 
{
	font-family: KlinicSlab;
}

/*********************************************************/
/******************** LINKS (ANCHORS) ********************/
/*********************************************************/

/** These rules catch anchors <a> that haven't been 
*	specifically styled */

a 
{
	font-family: KlinicSlab;
	color: #0B9446; /* Leafy Green */
}
a:visited
{
	color: #065B2A; /* Darker Leafy Green */
}
a:hover
{
	color: #7b573e; /* Cafe */
}
a:active
{
	color: #065B2A; /* Darker Leafy Green */
}

/*********************************************************/
/******************** SCROLLBARS *************************/
/*********************************************************/

/**	Scrollbar modifications for Chrome only *
*	Other browsers will display default scrollbars */

.scroll::-webkit-scrollbar
{
	width: 10px;
	background-color: #7b573e;
}
	/* Just in case we go smaller than MinWidth */
	.scroll::-webkit-scrollbar:horizontal
	{
		height: 10px;
	}
	.scroll::-webkit-scrollbar-corner
	{
		background-color: #7b573e; /* Match body background color */
	}

.scroll::-webkit-scrollbar-thumb
{
	background-color: #0b9446;
	border-radius: 5px;
}
	/* Outline bar when hovered */
	.scroll::-webkit-scrollbar-thumb:hover
	{
		border: 1px solid #3c1f1c;
	}
	/* Add shadow when active (clicked) */
	.scroll::-webkit-scrollbar-thumb:active
	{
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.7);
		box-shadow: inset 0 0 6px rgba(0,0,0,0.7);
	}

.scroll::-webkit-scrollbar-track
{
	background-color: #7b573e; /* Match body background color */
}

.scroll::-webkit-scrollbar-button
{
	background-color: #5e1211;
	border-radius: 10px;
}
	/* Outline button when hovered */
	.scroll::-webkit-scrollbar-button:hover
	{
		border: 1px solid #0b9446;
	}
	/* Add shadow when active (clicked) */
	.scroll::-webkit-scrollbar-button:active
	{
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
		box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
	}


/*********************************************************/
/******************** MEDIA QUERIES **********************/
/*********************************************************/

@media (max-width: 1200px)
{
	header #slogan
	{
		font-size: 30px;
	}
	
	#page-content #content #menus
	{
		flex-flow: column nowrap;
	}
	#page-content #content #menus #pasta-menu, #wine-menu
	{
		margin-bottom: 15px;
	}
	#page-content #content #menus #dinner-menu, #lunch-menu
	{
		flex-basis: 30%;
	}
}

@media (max-width: 1060px)
{
	#page-content #content #news
	{
		flex-direction: column;
	}
		#page-content #content #news #recent-news, #events
		{
			margin-bottom: 15px;
		}
}

@media (max-width: 965px)
{
	header #slogan
	{
		font-size: 20px;
	}
}

@media (max-width : 880px)
{	
	footer
	{
		text-align: right;
	}
	footer #logo-horiz
	{
		float: none;
		right: 20px;
	}
	
	#home-content #jumbotron
	{
		overflow-y: scroll;
	}
	#home-content #jumbotron #showcase2
	{
		float: none;
		text-align: center;
		width: auto;
		margin-bottom: 10px;
	}
	#home-content #jumbotron #showcase3
	{
		float: none;
		text-align: center;
		width: auto;
	}
	
	#page-content #content #about-us
	{
		flex-direction: column;
	}
		#page-content #content #about-us #mission
		{
			margin-bottom: 15px;
		}
}

@media (max-width: 750px)
{
	header #slogan
	{
		display: none;
	}
	#home-content #reviews-panel
	{
		display: none;
	}
	#home-content #jumbotron
	{
		margin-right: 0;
	}
	
		#page-content #content #locations
		{
			flex-direction: column;
		}
			#page-content #content #locations #loc-1, #loc-2
			{
				margin-bottom: 15px;
			}
}

@media (min-width: 965px)
{
	#page-content #content #loc-head
	{
		width: 50%;
	}
	
	#page-content #content #story p
	{
		max-width: 80%;
	}
}


@media (min-width: 1400px)
{
	#home-content #jumbotron #showcase p
	{
		max-width: 80%;
	}
	
	#page-content #content #story p
	{
		max-width: 65%;
	}
}