PetitTeton/public/styles.css

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: white;
	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;
}

/* 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_v1.png) no-repeat top center;
		background-size: 40px 40px;
	}
	.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: Arial, Helvetica, sans-serif;
		font-size: .8em;
		font-weight: 800;
	}
	#menu a {
		margin: 0 0 0 9px;
		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: 0px;
		height: 20px;
		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: 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+ */
	}
	#links a:hover {
		border-bottom: 1px solid red;
		opacity: .7;
	}
	#linkFacebook {
		background: url('images/Facebook_v2.png') no-repeat center center;
		background-size: auto 16px;
	}
	#linkGoogle {
		background: url('images/GooglePlus_v2.png') no-repeat center center;
		background-size: 20px auto;
	}
	#linkTwitter {
		background: url('images/Twitter_v2.png') no-repeat center center;
		background-size: 20px 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_v1.png) no-repeat top center;
		background-size: 120px 120px;
	}
	.page {
		margin: 0px auto;
		padding: 30px 20px;
		position: relative;
	}
	
	#menuBackground {
		height: 30px;
		max-width: 950px;
		background: #FFF;
	}
	#menu {
		white-space: nowrap;
		position: absolute;
		height: 30px;
		z-index: 200;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: 800;
		font-size: 1em;
	}
	#menu a {
		margin: 0 0 0 24px;
		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:hover {
		opacity: .7;
		color: black;
		border-bottom: 3px solid red;
	}

	#links {
		white-space: nowrap;
		position: absolute;
		right: 100px;
		height: 30px;
		width: 90px;
		text-align: left;
		z-index: 100;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: 800;
		font-size: 1em;
	}
	#links a {
		display: inline-block;
		width: 30px;
		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+ */
	}
	#links a:hover {
		border-bottom: 3px solid red;
		opacity: .7;
	}
	#linkFacebook {
		background: url('images/Facebook_v2.png') no-repeat center 5px;
		background-size: 7px auto;
	}
	#linkGoogle {
		background: url('images/GooglePlus_v2.png') no-repeat center 6px;
		background-size: 20px auto;
	}
	#linkTwitter {
		background: url('images/Twitter_v2.png') no-repeat center 7px;
		background-size: 19px auto;
	}
}

@media(max-width: 549px) {
	
}

@media(min-width: 550px) {
	
}


/* Homepage Title */

#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;
}

#content p {
	text-align: justify;
}

#content h1 {
	display: inline;
	color: #666;
	font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
	font-size: 1.6em;
	font-weight: 800;
	/* background: url(images/h8.gif) no-repeat 0px 4px; */
	padding-left: 0px;
	text-transform: uppercase;
}

#content h2 {
	display: inline;
	color: #333;
	font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
	font-size: 1.125em;
	font-weight: 800;
	/* background: url(images/h8.gif) no-repeat 0px 4px; */
	padding-left: 0px;
	text-transform: uppercase;
}

#content 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;
}

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

#content a {
	color: #00a55d;
	font-family: verdana, arial, helvetica, sans-serif;
	text-decoration: none;
}

#content a:hover {
	color: #dcdcdc;
	background-color: #666;
}

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

#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;
}


/* farm-made-fare.html */
@media(max-width: 509px) {
	#farm-made-fare .columned {
		width: 250px;
	}
}
@media(min-width: 510px) and (max-width: 769px) {
	#farm-made-fare .columned {
		width: 510px;
	}
}
@media(min-width: 770px) { /* and (max-width: 1029px)*/
	#farm-made-fare .columned {
		width: 770px;
	}
}
/*
@media(min-width: 1030px) {
	#farm-made-fare .columned {
		width: 1030px;
	}
}
*/
#farm-made-fare .columned {
	-webkit-columns: 250px auto; 
	-moz-columns: 250px auto; 
	columns: 250px auto; 
	-webkit-column-gap: 10px; 
	-moz-column-gap: 10px; 
	column-gap: 10px;
}
#farm-made-fare .columned div {
	display: inline-block;
	min-width: 250px;
}
@media(max-width: 549px) {
	#farm-made-fare #vapPicturesContainer img {
		width: 170px;
		height: 96px;
	}
	#farm-made-fare .vapPictures {
		width: 180px;
		height: 106px;
	}
}
@media(min-width: 550px) {
	#farm-made-fare #vapPicturesContainer img {
		width: 580px;
		height: 326px;
	}
	#farm-made-fare .vapPictures {
		width: 590px;
		height: 336px;
	}
}

/* Holidays.html */
#holidays {
	margin: 40px auto 0 auto;
	width: 880px;
}
#holidays #text {
	text-align: center;
}
#holidays p {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: .875em;
	color: black;
}