/*global styles - don't change */
/*
 * *** Probably won't use these???????? *******
 *aside, article, section, header, footer, nav{
 * 	display:block;
 * }
 *  //** gradient's pink: #e474d1
 *
 */
/*
  Site Colors:
  #1A446C - blue grey
  #8D0D19 - bugundy
*/
// I have a "id=u44tab" in usufruct2015...not sure why I have it or if used??????????????
/* probably don't need these since I'm using Normalize.css
html, body{
	margin: 0;
	padding: 0;
}
*/
.clearfix:before, .clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

section.container img {
	float: left;
	width: auto;
	position: absolute;
}

/*
section.container img#mapBkgrnd {
	float: left;
	width: 80%;
	height: 80%;
}
*/

html{
	/* ?????? */
}

body {
	background-color: lime;
	max-width: 1024px;
	min-width: 640px;
	font: 100% 'Paddington LT W01', 'Combo', cursive;
}

header {
	height: 70px;
	margin: 0; padding: 0;
}

nav {
	float: left;
	width: 150px; height: 100%;
	margin: 0; padding: 0 2em;
	color: #8D0D19; background: #1A446C;
}

nav a {
	color: #D4E6F4;
	text-decoration: none;
}

nav a:hover {
	color: #FFFFFF;
}

nav ul {
	list-style-type: none;
}

.selected { font-weight: bold; background: gold; }

div.message {
    border: 2px solid #8D0D19;
    color: #8D0D19; font-weight: bold;
    margin: 1em 0 ; padding: 1em;
}

ul.dishes {
	list-style: none;
	font-weight: normal;
}

ul.name li {
	padding: 0em;
}

footer {
	clear: both;
	height: 2em; margin: 0; padding: 1em;
	text-align: center;
	background: #1A446C; color: #D4E6F4;
}


/* tab sections global ******** */
div#tabs, div#tabs div.tabContent {
	width: 100%;
	padding: 0;
	z-index: 1;
	position: relative;
}


div#tabs ul {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 3;
}

div#tabs div#tabs-1 div.tabContent section.container {
	float: left;
	width: 100%;
}

div#tabs div#tabs-1 div.tabContent section.container div h2 {
	line-height: 60%;
}

div.tabContent section.container div.backgroundImage {
		float: left;
		padding-top: 0;
		margin-bottom: 3%;
}

div#tabs div.tabContent section.container div.backgroundImage img {
 	z-index: 0;  /* was 0 which worked on tab 3 but NO OTHER why???????????? */
	height: 90%;
	width: auto;
	position: fixed;
}

div.tabContent section.container {
	float: left;
	width: 100%;
	position: absolute;
}

div.tabContent section.container div h1 {
	font: bold 130%/90% 'Paddington LT W01', 'Combo', cursive;
}

div.tabContent section.container div h2 {
	font: bold 110%/80% 'Paddington LT W01', 'Combo', cursive;
}

div.tabContent section.container div h3 {
	font: bold 100%/80% 'Paddington LT W01', 'Combo', cursive;
}

div.tabContent section.container div p {
	font: italic 90%/70% 'Paddington LT W01', 'Combo', cursive;
}

div.centerBox {
	text-align: center;
	display: block;
	margin: 20% 0 25% 40%;
	position: relative;
	float: left;
	z-index: 10;
}

div.bottomBox {
	text-align: center;
	margin-top: 10%;
	margin-left: 15%;
	position: relative;
	z-index: 10;
}

div.bottomBox p {
	line-height: 1%;
}

div.clear {
	clear:both;
}

div.titleBoxL {
	float: left;
	display: inline;
	margin-left: 10%;
	position: relative;
	z-index: 10;
}

div.titleBoxR {
	float: right;
	display: inline-block;
	margin-right: 3%;
	position: relative;
	z-index: 10;
}

/* END tab sections */


/* ****SCREEN TYPES **************************************************** */
/* mobile styles */
@media only screen and (max-width: 480px){
	body{
		width: 320px;
		font-size: 120%;
		line-height: 200%;
	}

	div#tabs, div#tabs div.tabContent {
		width: 100%;
		z-index: -2;
		position: absolute;
	}


	div.centerBox {
		width: 70%;
		margin-top: 40%;
		margin-left: 20%;
		position: relative;
		z-index: 10;
	}

	div.titleBoxL {
		float: left;
		display: block;
		width: 70%;
		text-align: center;
		position: relative;
		z-index: 10;
	}

	div.titleBoxR {
		float: left;
		display: block;
		width: 70%;
		text-align: center;
		clear: both;
		margin: 16%;
		position: relative;
		z-index: 10;
	}

	div.bottomBox {
		float: left;
		display: block;
		width: 70%;
		margin-left: 16%;
		text-align: center;
		position: relative;
		z-index: 10;
	}

	.container {
		height: 400px;
		position: relative;
		z-index: 0;
	}

	div.tabContent section.container div.backgroundImage {
		// position: relative;
		top: 10px;
		z-index: 2;
	}

	div#tabs div.tabContent section.container div.backgroundImage img {
		width: 100%;
		position: fixed;
		top: 25px;
		left: 0;
		z-index: 3;
	}


	div#tabs div.tabContent section.container div.centerBox h3 {
		font: bold 100%/90% 'Paddington LT W01', 'Combo', cursive;
	}

	div#tabs ul li a {
		font: bold 50%/50% Arial, Helvetica, sans-serif;
	}
}

/* tablet styles */
@media only screen and (min-width: 481px) and (max-width: 768px){
	body{
		width: 80%;
		font-size: 120%;
	}

	div.tabContent {
		width: 100%;
	}

	section.container div.backgroundImage img {
		width: 100%;
		position: fixed;
	}

	section.container div.backgroundImage {
		margin-top: 2em;
	}

	div.titleBoxL {
		margin-right: 8%;
		margin-left: 5%;
		padding-right: 5%;
	}

	div.titleBoxR {
		margin: 0 0 0 0%;
	}
}

/* desktop styles */
@media only screen and (min-width: 769px){
	body{
		width: 700px;
		font-size: 100%;
	}

	section.container {
		// background-color: rgb(237,228,214);
		margin: 2em 0;
		// height: 611px;
		position: relative;
		overflow: auto;
	}

	section.container p {
		line-height: .7px;
	}

	/*section.container div.inviteText p.endSection {
		font: normal .9em/.5em 'Paddington LT W01', 'Combo', cursive;
		margin-left: 3em;
		text-align:center;
	}*/


}     /* END DESKTOP ******* */
/* ****END - SCREEN TYPES **************************************************** */


/*  delete
@media only screen and (min-width: 25em) {
		body{font-size: 140%;}
}

@media only screen and (min-width: 700px) {
	body{font-size: 180%}
}
*/

/* style that change */

/*
 *
font-family:'Paddington LT W01';
 */