/*
 * HTML5 Boilerplate
 */

/* ==========================================================================
	Base styles
============================================================================= */
	html,button,input,select,textarea,table {
		color: #434143;
		font: normal 1.1em 'Harrington', Georgia, serif;
	}
	body {
		line-height: 1.4;
		overflow-x: hidden;
	}

	::-moz-selection { background: #b3d4fc; text-shadow: none; }
	::selection { background: #b3d4fc; text-shadow: none; }

	hr {
		display: block;
		height: 1px;
		border: 0;
		border-top: 1px solid #ccc;
		margin: 1em 0;
		padding: 0;
	}
	img {
	    vertical-align: middle;
	}
	fieldset {
		border: 0;
		margin: 0;
		padding: 0;
	}
	textarea {
		resize: vertical;
	}
	nav ul {
		margin: 0;
		padding: 0;
	}
	a {
		-webkit-transition: all 0.13s ease-out;
		-moz-transition: all 0.13s ease-out;
		-ms-transition: all 0.13s ease-out;
		-o-transition: all 0.13s ease-out;
		transition: all 0.13s ease-out;
		text-decoration: none;
		color: #ed1b2f;
	}
	a:hover {
		color: #8b8771;
	}
	h1, h2, h3, h4, h5, h6 {
		font-family: Harrington, serif;	
		color: #ed1b2f;
		font-weight: normal;
		margin: 0.6em 0;
		line-height: 1.1em;;
	}

	h1:first-child, h2:first-child, h3:first-child,
	h4:first-child, h5:first-child, h6:first-child {
		margin-top: 0;
	}
	h1 {
		position: relative;
		font-weight: normal;
		text-align: center;
		font-size: 1.7em;
		padding-top: 80px;
		line-height: 30px;
		margin-bottom: 40px;
	}
	h1 .icon {
		position: absolute;
		left: 50%;
		margin-left: -30px;
		bottom: 30px;
	}

	h2 { font-size:  1.5em; margin-top: 1.2em; }
	h3 { font-size:  1.3em; }
	h4 { font-size:  1.1em; }

	h2.drink {
		position: relative;
		padding-left: 60px;
	}
	h2.drink .icon {
		position: absolute;
		left: -10px;
		bottom: -5px;
	}
	p {
		margin: 1.5em 0;
	}
	button, input[type="button"], input[type="reset"], input[type="submit"], .button {
		border: 0;
		display: inline-block;
		zoom: 1;
		*display: inline;
		background: #ed1b2f;
		color: #fff;
		text-align: center;
		padding: 3px 20px;
		text-decoration: none;
		font-size: 0.9em;
		border-radius: 10px 10px 10px 0;
	}
	button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .button:hover {
		background: #3c413c;
		color: #fff;
	}


/* ==========================================================================
	Layout
============================================================================= */
	
	#background {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
	}
	#header, #main, #footer {
		position: relative;
		z-index: 2;
	}
	#header {
		padding-top: 10px;
		overflow: hidden;
	}
	#footer {
		padding: 10px 0 30px 0;
		margin: 0 50px;
		text-align: center;
	}
	.content-wrap {
		font-family: Georgia, serif;
		position: relative;
		margin: 0 20px;
		padding: 10px 0 40px 0;
		min-height: auto;
	}

	
	/*  Header
	===================================== */

		/* Logo
		================== */
		#logo {
			display: block;
			position: relative;
			margin: 0px 0 0px -20px;
			width: 350px;
			height: 160px;
			background: url(../img/sprites.png) no-repeat 0 -25px;
		}
		#flh_wrap {
			position: absolute;
			top: 48px;
			left: 90px;
		}
		#flh {
			width: 54px;
			height: 54px;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 100;
			background: url('../img/sprites.png') no-repeat -108px -200px;
		}

		/* Social
		================== */
		#social {
			display: none;
			margin: 0;
			padding: 0;
			list-style: none;
			line-height: 40px;
			position: absolute;
			top: 10px;
			right: 10px;
		}
		#social li {
			display: block;
			float: left;
		}
		#social li:first-child {
			padding-right: 10px;
		}
		#social a:hover {
			opacity: 0.7;
		}
		#social .twitter,
		#social .facebook {
			display: block;
			width: 40px;
			height: 40px;
			background: url(../img/sprites.png) no-repeat -350px -80px;
		}
		#social .facebook {
			background-position: -390px -80px;
		}

	/*  Navigation
	===================================== */
		.sitenav {
			position: relative;
			z-index: 10;
			top: 10px;
			left: 10px;
		}
		.sitenav.menu {
			position: relative;
			top: auto;
			left: auto;
			right: auto;
		}
		.sitenav ul {
			display: block;			
		}
		.sitenav li,
		.sitenav a {
			display: block;
			position: relative;
			font-size: 1.12em;
			color: #575459;
			text-decoration: none;
			font-family: Harrington, serif;
		}
		.sitenav li {
			float: left;
			margin-right: 10px;
		}
		.sitenav a {
			padding-left: 30px;
		}
		.sitenav a:before {
			position: absolute;
			top: 50%;
			left: 0;
			margin-top: -15px;
			content: '';
			display: block;
			width: 30px;
			height: 30px;
			background: url(../img/sprites.png) no-repeat -570px -80px;
		}
		.sitenav.menu a {

		}
		.sitenav .icon {
			display: none;
		}
		.sitenav a:hover {
			color: #ed1b2f;
		}
		/* ==== Backnav ==== */
		.backnav {
			display: block;
			position: absolute;
			top: 15px;
			left: -20px;
			text-decoration: none;
			line-height: 30px;
		}
		.backnav .arrow {
			display: block;
			width: 60px;
			height: 30px;
			float: left;
			background: url(../img/sprites.png) no-repeat -600px -80px;
		}

	/*  Frame
	===================================== */
		#main {
			background: url(../img/frame-top.png) no-repeat center top;
		}
		#frame {
			position: relative;
			padding: 38px 0;
			min-height: auto;
			background: url(../img/frame-bottom.png) no-repeat center bottom;
		}
		#frame .border-left {
			position: absolute;
			top: 245px;
			left: 50%;
			bottom: 356px;
			margin-left: -401px;
			width: 6px;
			height: auto;
			background: url(../img/frame-left.png) repeat-y;
		}
		#frame .border-right {
			position: absolute;
			top: 383px;
			left: 50%;
			bottom: 218px;
			margin-left: 387px;
			width: 10px;
			height: auto;
			background: url(../img/frame-right.png) repeat-y;
		}

/* ==========================================================================
	Contents
============================================================================= */

	/*  Welcome
	===================================== */
		.welcome {
			text-align: center;
			font-family: Harrington, serif;
			padding: 50px 0 30px;
		}
		.welcome .msg {
			font-size: 2.1em;
			line-height: 1em;
		}

	/*  Location
	===================================== */
		.map-wrap {
			margin-bottom: 30px;
		}
		.map-wrap .address {
			float: left;
			font-size: 0.9em;
			margin-top: 10px;
			margin-bottom: 0;
		}
		.map-wrap #map_canvas {
			float: left;
			width: 90%;
			height: 200px;
			box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
			border: 1px solid #fff;
			margin-right: 20px;
		}

	/*  Tabs
	===================================== */
		.tabs li {
			padding: 0 10px;
		}
		.tabs li,
		.tabs a {
			display: inline-block;
			*display: inline;
			zoom: 1;
		}
		.tabs a {
			position: relative;
			color: #8d8a8f;
			text-decoration: none;
		}
		.tabs a:hover,
		.tabs a.active {
			color: #ed1b2f;
		}
		.tab-contents {
			position: relative;
		}

	/*  Tabs Submenu
	===================================== */
		.submenu {
			text-align: left;
			margin: 30px 0 10px;
		}
		.submenu li {
			padding: 4px 10px 4px 32px;
			float: left;
			position: relative;
		}
		.submenu li:before {
			position: absolute;
			top: -2px;
			left: 0;
			content: '';
			display: block;
			width: 30px;
			height: 30px;
			background: url(../img/sprites.png) no-repeat -570px -80px;
		}
		.submenu a {
			font: normal 1.24em/1em Harrington, serif;
		}
		.submenu a.active:after {
			display: none;
			position: absolute;
			bottom: 0;
			left: 50%;
			margin-left: -15px;
			content: '';
			width: 30px;
			height: 30px;
			background: url(../img/sprites.png) no-repeat -510px -80px;
		}

	/*  Flavor lists, descriptions
	===================================== */
		.flavors {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		.flavors li {
			position: relative;
			padding-left: 35px;
			padding-top: 1px;
			padding-bottom: 5px;
		}
		.flavors .licon {
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			width: 30px;
			height: 30px;
			background: url(../img/sprites.png) no-repeat -570px -80px;
		}
		.flavors.spread li {
			float: left;
			width: 29%;
			margin-left: 4%;
			line-height: 1.1em;
			padding-top: 4px;
			font-size: 0.9em;
			padding-bottom: 10px;
			padding-left: 0;
		}
		.flavors.spread .licon {
			display: none;
		}
		.flavors.spread.c2 li {
			width: 28%;
			margin-left: 14%;
		}
		.flavors.spread li.col1 {
			clear: left;
			margin-left: 0;
		}
		.flavors.spread.c2 li.col1 {
			margin-left: 14%;
		}
		.subdesc {
			padding-top: 15px;
			border-top: 1px dotted #ed1b2f;
		}
		.subdesc p:first-child {
			margin-top: 0;
		}
		.subdesc .price {
			margin: 15px 0;
			text-align: right;
			color: #ed1b2f;
		}
		.subdesc .price.lists {
			text-align: center;
		}
		.subdesc .prices {
			display: inline-block;
			margin: 0;
			padding: 0;
			list-style: none;
		}
		.subdesc .prices:first-child {
			margin-right: 40px;
		}
		.subdesc .prices li {
			text-align: left;
		}

		/* Drinks
		================== */
		.drink-desc {
			padding-top: 20px;
			width: 46%;
			float: left;
		}
		.drink-desc .flavors .licon {
			background-position: -570px -80px;
		}
		#cold {
			float: right;
		}

/* ==========================================================================
   Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
============================================================================= */

@media only screen and (min-width: 480px) {
	.sitenav {
		position: absolute;
		z-index: 10;
		top: 20px;
		right: 3%;
		left: auto;
	}
	.sitenav li {
		float: none;
		margin-right: 0;
	}

	.backnav {
		top: 94px;
		left: 0;
	}

	.map-wrap #map_canvas {
		width: 70%;
	}
}

@media only screen and (min-width: 600px) {
	/* Header
	================== */
		#header {
			padding-top: 30px;
		}
	/* Social
	================== */
		#social {
			display: block;
		}
	/* Logo
	================== */
		#logo {
			margin: 10px auto 30px auto;
		}
		#flh_wrap {
			top: 78px;
			left: 50%;
			margin-left: -66px;
		}
	/*  Navigation
	===================================== */
		.sitenav {
			text-align: center;
			position: relative;
			top: auto;
			left: auto;
			right: auto;
		}
		.sitenav.menu {
			padding-top: 30px;
			margin-bottom: 60px; 
		}
		.sitenav li,
		.sitenav a {
			display: inline-block;
			*display: inline;
			zoom: 1;
			line-height: 30px;
			height: 30px;
			font-size: 1.2em;
		}
		.sitenav.menu li,
		.sitenav.menu a {
			font-size: 1.15em;
			
		}
		.sitenav a {
			padding: 10px;
		}
		.sitenav a:before {
			display: none;
		}
		.sitenav.menu a {
			padding: 60px 20px 0 20px;
			min-width: 70px;
		}
		.sitenav .icon {
			display: none;
			position: absolute;
			left: 50%;
			margin-left: -30px;
			bottom: 30px;

			-webkit-transition: all 0.15s ease-out;
			-moz-transition: all 0.15s ease-out;
			-ms-transition: all 0.15s ease-out;
			-o-transition: all 0.15s ease-out;
			transition: all 0.15s ease-out;
		}
		.sitenav.menu .icon {
			display: block;
		}
		.sitenav a:hover .icon {
			bottom: 35px;
		}

	/*  Tabs Submenu
	===================================== */
		.submenu {
			text-align: center;
		}
		.submenu li {
			padding: 0 15px;
			float: none;
		}
		.submenu li:before {
			display: none;
		}
		.submenu a {
			font: normal 1.5em/1em Harrington, serif;
			padding-bottom: 32px;
		}
		.submenu a.active:after {
			display: block;
			position: absolute;
			bottom: 0;
			left: 50%;
			margin-left: -15px;
			display: block;
			content: '';
			width: 30px;
			height: 30px;
			background: url(../img/sprites.png) no-repeat -510px -80px;
		}

	/*  Flavor lists, descriptions
	===================================== */
		.flavors.spread li {
			float: left;
			width: 24%;
			margin-left: 4%;
			line-height: 1.1em;
			padding-top: 4px;
			font-size: 0.9em;
			padding-bottom: 10px;
			padding-left: 35px;
		}
		.flavors.spread .licon {
			display: block;
		}
}

@media only screen and (min-width: 670px) {
	
	/*  Layout
	===================================== */
		#frame {
			min-height: 524px;
		}
		.content-wrap {
			min-height: 474px;
			margin: 0 50px;
		}

	/* Social
	===================================== */
		#social {
			top: 25px;
			right: 35px;
		}
	/*  Navigation
	===================================== */
		.sitenav {
			height: 100px;
		}
		.sitenav.menu {
			padding-top: 120px;
		}
		.sitenav.menu li,
		.sitenav.menu a {
			font-size: 1.15em;
		}
		.sitenav a {
			padding: 60px 20px 0 20px;
		}
		.sitenav.menu a {
			padding: 60px 20px 0 20px;
		}
		.sitenav .icon {
			display: block;
		}
		.sitenav a:hover {
			color: #ed1b2f;
		}
		.sitenav a:hover .icon {
			bottom: 35px;
		}

	/*  Welcome
	===================================== */
		.welcome {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			padding: 0;
		}
		.welcome .msg {
			margin-top: 220px;
			font-size: 2.1em;
			line-height: 1em;
		}
}
@media only screen and (min-width: 800px) {
	/*  Layout
	===================================== */
		.content-wrap {
			margin: 0 100px;
		}
}
@media only screen and (min-width: 900px) {

	/*  Layout
	===================================== */
		.content-wrap {
			margin: 0 auto;
			padding: 10px 90px 40px 90px;
			max-width: 618px;
		}

	/*  Backnav
	===================================== */
		.backnav {
			top: 94px;
			left: 90px;
		}

	/*  Welcome
	===================================== */
		.welcome {
			background: url(../img/polka.png) no-repeat;
		}
}
@media only screen and (min-width: 1140px) {

	body {
		/*min-width: 1140px;*/
	}

}



@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	   only screen and (min-resolution: 144dpi) {
	/* Style adjustments for high resolution devices */
}


/* ==========================================================================
	Helper classes
============================================================================= */

/*	Icons
================= */
	.icon {
		display: block;
		height: 60px;
		width: 60px;
		background: url(../img/sprites.png) -360px -10px;
	}
	.icon.menu { background-position: -440px -10px; }
	.icon.contact { background-position: -520px -10px; }
	.icon.delivery {
		width: 130px !important;
		margin-left: -65px !important;
		background-position: -600px -10px;
	}
	.icon.offers { background-position: -750px -10px; }
	.icon.doughnuts { background-position: -360px -130px; }
	.icon.gelato {
		/*height: 100px !important;*/
		height: 80px !important;
		background-position: -440px -110px;
	}
	.icon.drinks {
		height: 80px !important;
		background-position: -520px -110px;
	}
	.icon.nibbles { background-position: -600px -130px; }
	.icon.hot-drink {
		height: 80px !important;
		background-position: -680px -110px;
	}
	.icon.cold-drink {
		height: 100px !important;
		background-position: -760px -90px;
	}

/*	Boilerplates
================= */
	.ir {
		background-color: transparent;
		border: 0;
		overflow: hidden;
		/* IE 6/7 fallback */
		*text-indent: -9999px;
	}
	.ir:before {
		content: "";
		display: block;
		width: 0;
		height: 100%;
	}
	.hidden {
		display: none !important;
		visibility: hidden;
	}
	.visuallyhidden {
		border: 0;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}
	.visuallyhidden.focusable:active,
	.visuallyhidden.focusable:focus {
		clip: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		position: static;
		width: auto;
	}
	.invisible {
		visibility: hidden;
	}
	.clearfix:before,
	.clearfix:after {
		content: " ";
		display: table;
	}
	.clearfix:after {
		clear: both;
	}
	.clearfix {
		*zoom: 1;
	}
	.chromeframe {
		margin: 0.2em 0;
		background: #ccc;
		color: #000;
		padding: 0.2em 0;
	}

/* ==========================================================================
	Print styles.
============================================================================= */
@media print {
	* {
		background: transparent !important;
		color: #000 !important;
		box-shadow:none !important;
		text-shadow: none !important;
	}
	a, a:visited {
		text-decoration: underline;
	}
	a[href]:after {
		content: " (" attr(href) ")";
	}
	abbr[title]:after {
		content: " (" attr(title) ")";
	}
	.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
		content: "";
	}
	pre, blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}
	thead {
		display: table-header-group; /* h5bp.com/t */
	}
	tr, img {
		page-break-inside: avoid;
	}
	img {
		max-width: 100% !important;
	}
	@page {
		margin: 0.5cm;
	}
	p, h2, h3 {
	    orphans: 3;
	    widows: 3;
	}
	h2, h3 {
	    page-break-after: avoid;
	}
}