/* general site-wide styling */

body {
	font-family: 'Source Sans Pro', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	font-weight: 300; /* light weight. Normal is 400 */
}

h3 { /* minor headings. h2 is reserved for cover-img text (see below) */
	color: #613131;
	margin-top: 0px;
	margin-bottom: 13px;
	font-size: 1.17em;
}

h4 { /* even more headings, used underneath h3 for sub-level information */
	color: #613131;
	font-weight: 400;
	margin-top: 0px;
	margin-bottom: 13px;
	font-size: 1em;
}

p {
	margin-top: 0;
}

img {
	max-width: 100%; /* makes all images scale with page */
}

a[href^="downloads/lulus_1"],
a[href="http://goo.gl/maps/oxF0A"],
a[href^="https://maps.google.com.au/maps?f"] { /* gives a bit of space for links displayed horizontally (not all links). New horizontal link sections need to be linked here */
	margin-right: 26px;
}

#inset { /* divs that can be used throughout the website */
	background: #fbf7f7;
	border-bottom: 2px solid #e2c4c4;
	border-radius: 1px;
	margin-bottom: 26px;
}

	#padding-wrapper { /* stops text from hugging sides of div whilst retaining div size */
	padding: 26px;
	}

	#inset h3 { /* reduces font sizing and margins to make text in #inset divs smaller than rest of page */
		font-size: 1em;
		margin-bottom: 6.5px;
	}

	#inset a { /* reduces font sizing and margins to make text in #inset divs smaller than rest of page */
		font-size: 0.875em;
	}

#strip { /* section divider */
	width: 100%; /* slightly shorter than containing div, aligned left. For full length, change to 100% */
	height: 1px;
	margin: 13px 0 19.5px;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAH0lEQVQIW2NM1Nf3mX/x4hYGIEBmM4IEsAHcEtQzCgBTrRAHKjQWUwAAAABJRU5ErkJggg==) repeat;
}

#strip2 { /* section divider used only for media queries */
	width: 100%; /* slightly shorter than containing div, aligned left. For full length, change to 100% */
	height: 1px;
	margin: 13px 0 19.5px;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAH0lEQVQIW2NM1Nf3mX/x4hYGIEBmM4IEsAHcEtQzCgBTrRAHKjQWUwAAAABJRU5ErkJggg==) repeat;
	display: none;
}
/* ------------------------- */




/* site-wide header */

#strip-top {
	width: 100%;
	height: 12px;
	margin: auto;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAH0lEQVQIW2NM1Nf3mX/x4hYGIEBmM4IEsAHcEtQzCgBTrRAHKjQWUwAAAABJRU5ErkJggg==) repeat;
}

h1 { /* logotype */
	font-family: 'Emblema One', Palatino, serif;
	font-size: 3.625em;
	color: #613131;
	padding: 0;
	text-decoration: none;
	font-style: italic;
}

	h1 a:link {
		text-decoration: none;
		color: #613131;
	}

		h1 a:visited {
		text-decoration: none;
		color: #613131;
	}

.nav { /* navigation panel block div */
	float: right;
	width: 80%
}

	ul.nav { /* navigation panel list block */
		list-style: none;
		/* text-transform: uppercase; */
		font-size: 0.875em;
	}

	ul.nav a { /* navigation panel list link blocks */
		text-decoration: none;
		color: black;
	}

	ul.nav a li { /* navigation panel list link text and surroundings */
		padding-top: 5px;
		min-height: 23px;
		border-bottom: 1px solid #bbb;
		padding-left: 4px; /* gives a bit of space between the hover rectangle and text on the left side */
	}

		ul.nav a li:hover { /* hover pseudo-class, allowing a hover colour for link blocks */
			background-color: #fbf7f7;
		}

#strip-body { /* header and body divider */
	width: 100%;
	height: 1px;
	margin-bottom: 26px;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAH0lEQVQIW2NM1Nf3mX/x4hYGIEBmM4IEsAHcEtQzCgBTrRAHKjQWUwAAAABJRU5ErkJggg==) repeat;
}
/* ------------------------- */




/* site-wide footer */
#strip-footer { /* body and footer divider */
	width: 100%;
	height: 1px;
	margin-top: 36px;
	margin-bottom: 0;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAH0lEQVQIW2NM1Nf3mX/x4hYGIEBmM4IEsAHcEtQzCgBTrRAHKjQWUwAAAABJRU5ErkJggg==) repeat;
}

#copyright {
	display: block;
	width: 100%;
	margin-top: 4px;
	margin-bottom: 0.75em;
	padding: 16px 0 0;
	text-align: center;
	font-size: 0.75em;
}
/* ------------------------- */




/* index.html */

#cover-img { /* cover image */
	background: url(img/cover3.jpg); 
	background-position: center; /* image is cropped on left and right when resizing browser window, allowing center of image to remain centered */
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 350px;
	margin: 0 auto 26px;
	max-width: 1200px;
}

	h2 { /* cover image text */
		color: #fff;
		position: relative;
		top: 30%;
		margin-left: 52px;
		width: 56%;
		font-size: 2.1em;
		line-height: 1.8em;
	}

	table {
		width: 100%;
	}

	td { /* table data general padding, stops text from hugging boundaries */
		padding: 5px 0;
	}

	td:nth-child(1) { /* specifies the first of two columns. */
		
	}

	td:nth-child(2), td:nth-child(3), td:nth-child(4) { /* specifies the even columns, which in this case is just the second of two. Width and padding is tweaked for spacing and legiblity respectively */
		float: right;
		font-weight: 400;
		text-align: right;
	}

	tr:nth-child(even) { /* specifies the even rows of the whole table and applies a background colour to each */
	background-color: #fbf7f7;
	}
/* ------------------------- */




/* menus.html */
	.subheading { /* subheadings under menu sections. E.g. 'Salads' under 'Lulu's All Day Meals'. Should be changed to a h5 or something else not taken already. */
		font-weight: 700;
	}

	.white-bg { /* a hack at forcing the description rows to pair in bg colour with those above. Should figure out how to use nth:child to pair these */
		background-color: #ffffff;
	}

	.maroon-bg { /* a hack at forcing the description rows to pair in bg colour with those above. Should figure out how to use nth:child to pair these */
		background-color: #fbf7f7;
	}

	.indented { /* indenting a few things within the menu */
		text-indent: 15px;
	}

/* ------------------------- */



/* media queries */
/* smaller than iPad portrait, bigger than iPhone landscape */
@media screen and (max-width: 767px) {
	.grid_1,
	.grid_2,
	.grid_3,
	.grid_4,
	.grid_5,
	.grid_6,
	.grid_7,
	.grid_8,
	.grid_9,
	.grid_10,
	.grid_11,
	.grid_12 {
		width: 100%;
	}

	#strip-top {
		height: 24px;
	}

	h1 { /* logotype */
		text-align: center;
	}

	.nav { /* navigation panel block div */
		width: 100%;
	}

	#strip-body {
		display: none;
	}

	#strip2 { /* section divider used only for media queries */
		display: inline-block;
	}

		h2 { /* cover image text on index.html */
		top: 25%;
		margin: auto;
		width: 80%;
		text-align: center;
	}
}


/* smaller than iPhone landscape */
@media screen and (max-width: 479px) {
	.grid_1,
	.grid_2,
	.grid_3,
	.grid_4,
	.grid_5,
	.grid_6,
	.grid_7,
	.grid_8,
	.grid_9,
	.grid_10,
	.grid_11,
	.grid_12 {
		width: 100%;
	}

	h1 { /* logotype */
		font-size: 2.65em; /* 2.85 */
	}

	#cover-img { /* cover image on index.html */
		background: url(img/cover3.jpg); 
		background-position: center; /* image is cropped on left and right when resizing browser window, allowing center of image to remain centered */
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		height: 200px;
		margin: 0 auto 26px;
		max-width: 1200px;
	}

	h2 { /* cover image text on index.html */
		top: 28%; /* was 16% before h2 font-size increase */
		font-size: 1.2em;
		line-height: 1.6em;
	}

	#inset { /* divs that can be used throughout the website */
		text-align: center;
	}

	a[href^="downloads/lulus"] { /* formats menu PDF links nicely */
		display: block;
		text-align: center;
		margin-right: 0;
		padding-bottom: 6px;
	}
}