PetitTeton/public/main.styl

@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: 0
.produceTable .listHeading
	font-weight: bold
	background: none
	text-indent: 0
.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_v2.jpg) no-repeat top center
		height: 171px*/
		height: 0
	#logo
		position: absolute
		right: 5px
		top: 0
		width: 40px
		height: 40px
		background: url(images/PetitTetonLogo_v2.png) no-repeat top center
		background-size: 40px 40px
		cursor: pointer
	.page
		margin: 0 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/HeaderTall_v1.jpg) no-repeat top center
		background-size: 100%
		background-position: bottom left
		max-width: 950px
		height: 171px
	#head.tall
		height: 342px
	#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: 0 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: 0
	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: 0
	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: 0
	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: 0
	text-transform: uppercase
	margin: 60px 0 0 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

	.columnContainer
		margin: 0 auto
	.columned
		-webkit-columns: 250px auto
		-moz-columns: 250px auto
		columns: 250px auto
		-webkit-column-gap: 0
		-moz-column-gap: 0
		column-gap: 0
		-webkit-column-fill: balance
		-moz-column-fill: balance
		column-fill: balance
	.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: normal
			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
	@media(max-width: 499px)
		.columnContainer
			width: 250px
		.columned
			column-count: 1 !important

	@media(min-width: 500px) and (max-width: 749px)
		.columnContainer
			width: 500px
		.columned
			column-count: 2 !important

	@media(min-width: 750px)
		.columnContainer
			width: 750px
		.columned
			column-count: 3 !important

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

/* Scrolls all five pictures one at a time from right to left. */
.scrollViewport
	margin: 0
	max-width: 568px
	width: 100%
	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: 0
	top: 0
.scrollPage a
	/*width: 161px
	height: 145px*/
	width: 142px
	height: 100px
	border: 0
	background: url('images/shadow_130_90.png') no-repeat scroll 0 0
.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 0 0

.shadow
	-webkit-box-shadow: 7px 7px 7px -3px rgba(0,0,0,0.67)
	-moz-box-shadow: 7px 7px 7px -3px rgba(0,0,0,0.67)
	box-shadow: 7px 7px 7px -3px rgba(0,0,0,0.67)

/* 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: 0
	position: absolute
	left: 0
	right: 0
	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: 0
	right: 0
	left: 0
	z-index: 600
	background: black
	color: white
	padding: 15px
	opacity: .8

.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 0
.miniSlideshowRight
	float: right
	margin: 4px 0 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 0 10px 10px
.floatLeft
	float: left
	margin: 4px 10px 10px 0
.blogLink
	color: #e40329 !important

@require "clearfix"
@require  "home"
@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  "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"