@import url('//fonts.googleapis.com/css?family=PT+Sans|Grand+Hotel|Open+Sans:400,600');

html {
	scrollbar-face-color: #808080;
	scrollbar-highlight-color: #808080;
	scrollbar-3dlight-color: #707070;
	scrollbar-darkshadow-color: #808080;
	scrollbar-shadow-color: #7e7e7e;
	scrollbar-arrow-color: #ffffff;
	scrollbar-track-color: #505050;
}

html, body, #archives ul, #overall-footer, #content ul {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

body {
	background: #F6F6F6;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 1.0em;
}

/* These three styles are to allow for the produce table which spans three columns. */
.produceTable .list {
	list-style-type: none;
	background: none;
	text-indent: 0px;
}
.produceTable .listHeading {
	font-weight: bold;
	background: none;
	text-indent: 0px;
}
.produceTable .listItem {
	font-weight: normal;
	background: none;
	text-indent: 15px;
}

/* Container Formats */

#overall {
	position: relative;
	max-width: 950px;
	min-width: 250px;
	margin: 0 auto;
}

#page {
	/*background: url('images/GrassBackground_v1.jpg') repeat;
	background: #F6F6F6;*/
	background: #FDFDFD;
}

/* Small Devices (phones) */
@media(max-width: 549px) {
	#head {
		margin: 0 auto;
		/*background: url(images/Header_v1.jpg) no-repeat top center;
		height: 171px;*/
		height: 0px;
	}
	#logo {
		position: absolute;
		right: 5px;
		top: 0px;
		width: 40px;
		height: 40px;
		background: url(images/PetitTetonLogo_v2.png) no-repeat top center;
		background-size: 40px 40px;
		cursor: pointer;
	}
	.page {
		margin: 0px auto;
		padding: 6px 4px;
		position: relative;
	}
	
	#menuBackground {
		height: 20px;
		max-width: 950px;
		background: #FFF;
	}
	#menu {
		white-space: nowrap;
		position: absolute;
		height: 20px;
		z-index: 200;
		font-family: "Open Sans", Arial, Helvetica, sans-serif;
		font-weight: 600;
		font-size: .8em;
	}
	#menu a {
		margin: 0 0 0 5px;
		text-decoration: none;
		color: black;
		line-height: 20px;
		display: inline-block;
		height: 20px;
		border-bottom: 1px solid transparent;
		/* Force the browser to include padding and border as part of the size of the block. */
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;         /* Opera/IE 8+ */
	}
	#menu a:hover {
		opacity: .7;
		color: black;
		border-bottom: 1px solid red;
	}

	#links {
		white-space: nowrap;
		position: absolute;
		right: 50px;
		top: 26px;
		height: 15px;
		width: 60px;
		text-align: left;
		z-index: 100;
		font-family: Arial, Helvetica, sans-serif;
		font-size: .8em;
		font-weight: 800;
	}
	#links a {
		display: inline-block;
		width: 20px;
		height: 15px;
		border-bottom: 1px solid transparent;
		/* Force the browser to include padding and border as part of the size of the block. */
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;         /* Opera/IE 8+ */
	}
	#links a:hover {
		border-bottom: 1px solid red;
		opacity: .7;
	}
	#linkFacebook {
		background: url('images/Facebook_v2.png') no-repeat center center;
		background-size: auto 9px;
	}
	#linkGoogle {
		background: url('images/GooglePlus_v2.png') no-repeat center center;
		background-size: 12px auto;
	}
	#linkTwitter {
		background: url('images/Twitter_v2.png') no-repeat center center;
		background-size: 12px auto;
	}
}

/* Large(r) Devices (tablets and full computers) */
@media(min-width: 550px) {
	#head {
		margin: 0 auto;
		background: url(images/Header_v1.jpg) no-repeat top center;
		max-width: 950px;
		height: 171px;
	}
	#logo {
		position: absolute;
		right: 10px;
		top: 10px;
		width: 120px;
		height: 120px;
		background: url(images/PetitTetonLogo_v2.png) no-repeat top center;
		background-size: 120px 120px;
		cursor: pointer;
	}
	.page {
		margin: 0px auto;
		padding: 30px 20px;
		position: relative;
	}
	
	#menuBackground {
		height: 31px;
		max-width: 950px;
		background: #FFF;
	}
	#menu {
		white-space: nowrap;
		position: absolute;
		height: 30px;
		margin-bottom: 1px;
		z-index: 200;
		font-family: "Open Sans", Arial, Helvetica, sans-serif;
		font-weight: 600;
		font-size: 1em;
	}
	#menu a {
		margin: 0 0 0 16px;
		text-decoration: none;
		color: black;
		line-height: 30px;
		display: inline-block;
		height: 30px;
		border-bottom: 3px solid transparent;
		/* Force the browser to include padding and border as part of the size of the block. */
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;         /* Opera/IE 8+ */
	}
	#menu a.holidayMenuItem {
		font-family: "Grand Hotel", "Open Sans", Arial, Helvetica, sans-serif;
		font-weight: 400;
		font-size: 1.3em;
		letter-spacing: 1px;
		vertical-align: top;
	}
	#menu a.shippingMenuItem {
		font-family: "Grand Hotel", "Open Sans", Arial, Helvetica, sans-serif;
		font-weight: 400;
		font-size: 1.3em;
		letter-spacing: 1px;
		vertical-align: top;
	}
	#menu a:hover {
		opacity: 1;
		color: black;
		background: transparent;
		border-bottom: 3px solid #a20010;
	}

	#links {
		white-space: nowrap;
		position: absolute;
		right: 10px;
		top: 130px;
		height: 30px;
		width: 120px;
		text-align: center;
		z-index: 200;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: 800;
		font-size: 1em;
	}
	#links a {
		display: inline-block;
		width: 30px;
		height: 30px;
		border-bottom: 2px solid transparent;
		/* Force the browser to include padding and border as part of the size of the block. */
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;         /* Opera/IE 8+ */
	}
	#links a:hover {
		border-bottom: 2px solid rgb(200, 146, 186); /*#a20010;*/
		opacity: 1;
	}
	#linkFacebook {
		background: url('images/Facebook_white_v2.png') no-repeat center 5px;
		background-size: 20px auto;
	}
	#linkGoogle {
		background: url('images/GooglePlus_white_v2.png') no-repeat center 6px;
		background-size: 20px auto;
	}
	#linkTwitter {
		background: url('images/Twitter_white_v2.png') no-repeat center 7px;
		background-size: 20px auto;
	}
}

#title-shadow {
	position: absolute;
	top: 227px;
	left: 106px;
	width: auto;
	height: auto;
	color: #cacaca;
	font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
	font-size: 3.6em;
	font-weight: bold;
	z-index: 6;
}

#title {
	position: absolute;
	top: 225px;
	left: 104px;
	width: auto;
	height: auto;
	color: #77b145;
	font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
	font-size: 3.6em;
	font-weight: bold;
	z-index: 7;
}

#content {
	min-height: 700px;
}

p {
	text-align: justify;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1 {
	/* bar in the middle
	display: table;
	width: 100%;
	margin-bottom: 10px;
	*/
	white-space: nowrap;
	color: black;
	font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
	font-size: 1.6em;
	font-weight: 800;
	padding-left: 0px;
	text-transform: uppercase;
}
h1:after {
	border-bottom: 2px solid #222; 
	width: 100%;
	margin-bottom: 10px;
	content: "";
	display: block;
/* bar in the middle
	content: "";
	display: table-cell;
	width: 100%;
	border-left: 100% solid black;
	background-image: linear-gradient(transparent 47%, #dddddd 48%, #dddddd 52%, transparent 52%);
*/
}

h2 {
	display: inline;
	color: #333;
	font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
	font-size: 1.125em;
	font-weight: 800;
	padding-left: 0px;
	text-transform: uppercase;
}

h3 {
	display: inline;
	color: #333;
	font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
	font-size: 1em;
	font-weight: 800;
	padding-left: 0px;
	text-transform: uppercase;
}

h5 {
	display: block;
	color: #333;
	font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
	font-size: .875em;
	font-weight: 400;
	font-style: oblique;
	padding-left: 0px;
	text-transform: uppercase;
	margin: 60px 0 0px 0;
}

li {
	list-style-type: none;
	background: url(images/Bullet3_v1.jpg) no-repeat 10px 5px;
	text-indent: 26px;
}

sup, sub {
	line-height: 0.1em;
}

.submenu {
	h2:after {
		border-bottom: 1px solid gray; 
		width: 100%; 
		margin-bottom: 10px;
		content: "";
		display: block;
	}
	
	@media(max-width: 499px) {
		.columnContainer {
			width: 250px;
		}
		.columned {
			column-count: 1;
		}
	}
	@media(min-width: 500px) and (max-width: 749px) {
		.columnContainer {
			width: 500px;
		}
		.columned {
			column-count: 2;
		}
	}
	@media(min-width: 750px) {
		.columnContainer {
			width: 750px;
		}
		.columned {
			column-count: 3;
		}
	}
	.columnContainer {
		margin: 0 auto;
	}
	.columned {
		-webkit-columns: 250px auto; 
		-moz-columns: 250px auto; 
		columns: 250px auto; 
		-webkit-column-gap: 0px; 
		-moz-column-gap: 0px; 
		column-gap: 0px;
	}
	.columnContent {
		text-align: center;
		cursor: pointer;
		margin: 4px 15px 4px 15px;
		width: 220px;
		display: inline-block;
	}
	.columnContent:hover {
		background: #EEE;
	}
	.columnContent {
		h2 {
			font-size: 1.1em;
			font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
			font-weight: 400;
			font-style: oblique;
			text-transform: uppercase;
			color: #333;
			margin: 0;
			padding: 0;
		}
		img {
			width: 220px;
		}
		a:hover {
			background: transparent;
			color: gray;
		}
		img {
			float: none;
			display: block;
		}
		p {
			text-align: left;
			/*font-family: Georgia, serif;*/
			font-family: 'PT Sans', sans-serif;
			font-size: .8em;
			color: black;
			text-decoration: none;
		}
		p:hover {
			color: black;
			text-decoration: none;
		}
	}
}

#slideDiv img {
	border: 4px solid black;
}
.hidden {
	display: none;
}

/* Scrolls all five pictures one at a time from right to left. */
.scrollViewport {
	margin: 0;
	/*
	width: 805px;
	height: 145px;
	*/
	width: 568px;
	height: 100px;
	overflow: hidden;
	position: relative;
}
.scrollPage {
	position: relative;
	left: 0;
	top: 0;
	white-space: nowrap;
}
.scrollPage img {
	width: 130px;
	height: 90px;
	border: 0;
	position: relative;
	left: 0px;
	top: 0px;
}
.scrollPage a {
	/*width: 161px;
	height: 145px;*/
	width: 142px;
	height: 100px;
	border: 0;
	background: url('images/shadow_130_90.png') no-repeat scroll 0px 0px;
}
.scrollPage a:hover {
	background-color: white;
	color: white;
}
.scrollPage div { /* In case it isn't clickable (substitute for <a>)/ */
	/*width: 161px;
	height: 145px;*/
	width: 142px;
	height: 100px;
	border: 0;
	float: left;
	background: url('images/shadow_130_90.png') no-repeat scroll 0px 0px;
}

/* Chicken */
#chicken {
	width: auto;
	height: 250px;
	background: url(images/Chicken-Egg.gif) no-repeat center top;
}

/* Footer Lines */

#footer {
	margin-top: 6px;
	color: #666;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 0.7em;
	text-align: left;
}

#footer a {
	color: #666;
	font-family: verdana, arial, helvetica, sans-serif;
	text-decoration: none;
}

#footer a:hover {
	color: #00a55d;
}

#designedBy {
	margin-top: 6px;
	font: Arial, san-serif;
	font-size: .5em;
	line-height: .525em;
	color: #777;
	white-space: nowrap;
	letter-spacing: 1px;
	text-transform: uppercase;
}

#designedBy a {
	color: #777;
	font: Arial, san-serif;
	font-size: .5em;
	line-height: .525em;
	text-decoration: none;
	font-weight: normal;
}

#designedBy a:hover {
	text-decoration: underline;
	color: #000;
}

#slideTitleDiv {
	font-variant: small-caps;
	font-weight: bold;
}

.cycle-pager {
    text-align: center; z-index: 500; position: absolute; left: 0px; right: 0px; bottom: 40px; overflow: hidden;
}
.cycle-pager span { 
    font-family: arial; font-size: 3.125em; width: 30px; height: 30px; 
    display: inline-block; color: #ddd; cursor: pointer; 
}
.cycle-pager span.cycle-pager-active { color: #ff6f00;}
.cycle-pager > * { cursor: pointer;}
.cycle-overlay { 
    font-family: tahoma, arial;
    position: absolute;
	bottom: 0px;
	right: 0px;
	left: 0px;
	z-index: 600;
    background: black; 
	color: white; 
	padding: 15px; 
	opacity: .8;
}
.visitSlideshowInstructions {
	color: #555;
	text-align: center;
	font-family: arial;
	font-size: .8em;
}

.vapList {
	list-style-type: none;
}
.vapList li {
	list-style-type: none;
	background: none;
	text-indent: 6px;
}

.basicList li {
	list-style-type: none;
	background: none;
}

.miniSlideshowLeft {
	float: left;
	margin: 4px 10px 10px 0px;
}

.miniSlideshowRight {
	float: right;
	margin: 4px 0px 10px 10px;
}

._160x120 img {
	width: 160px;
	height: 120px;
}

._560x398 img {
	width: 560px;
	height: 398px;
}

._300x200 img {
	width: 300px;
	height: 200px;
}

._260x200 img {
	width: 260px;
	height: 200px;
}

.floatRight {
	float: right;
	margin: 4px 0px 10px 10px;
}

.floatLeft {
	float: left;
	margin: 4px 10px 10px 0px;
}

@require  "farm"
@require  "food"
@require  "animals"
@require  "services"
@require  "holidays"
@require  "farm-made-fare"
@require  "grow-and-can"
@require  "eggs"
@require  "beef"
@require  "pigs"
@require  "chicken"
@require  "markets"
@require  "produce"
@require  "slideshow"
@require  "visiting"
@require  "weddings"
@require  "yaks"
@require  "community"
@require  "yaks"
@require  "us"
@require  "veggies"
@require  "aquaponics"
@require  "shipping"
@require  "ap/aphome"
@require  "ap/airlift"