Files
PetitTeton/public/_index.sass

555 lines
12 KiB
Sass

@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: #84916E
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: #DDE1D5
/* 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_v1test.jpg) no-repeat top center
background-size: 100%
background-position: bottom left
max-width: 950px
height: 171px
.head.tall
height: 342px
#logo
position: absolute
left: 10px
top: 90px
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: 5rem
max-width: 950px
background: #DDE1D5
.menu
white-space: nowrap
position: absolute
height: 2.5rem
width: 80%
z-index: 200
font-family: "Open Sans", Arial, Helvetica, sans-serif
font-weight: 600
font-size: 1.25rem
display: flex
justify-content: space-between
margin-left: 10%
.menu a
margin: 0 auto
margin-top: .325rem
white-space: nowrap
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: #9E8200
background: transparent
border-bottom: 3px solid #9E8200
#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
.pageBorder
background-color: blue
padding: 40px 10px 10px 10px
margin-bottom: 20px
margin-top: 10px
.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
height: 15rem
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
// The .scrollPage & .scrollViewport classes were only used in weddings.html which is no longer utilized. The shadow_130_90.png seems to be removed.
/* 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: 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: 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 //This page is no longer used. The background image is gone. (There is a png of the same name in the source material.)
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-family: 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-family: 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