/* First, we configure the tag. Add a background, set the font for our entire site, etc. */ body { margin: 0; margin-bottom :10px; background: #616F86 url("images/pagebg.jpg") top repeat-x; font-family: Futura, "Trebuchet MS", Arial, sans-serif; font-size: 12px; color: #000; } td { font-size: 12px; } /* The H1 tag, by definition, is the main header of your site. Every part of your main header should go within the

tag In this case, we're just changing the text within our

tag. Color, Background, font-size, etc. */ h1 { width: 633px; font-size: 23px; background: #D8E0CF; color: #5B7042; border-top: 10px solid #9AA78C; padding: 5px; margin: 0px; font-weight: normal; text-align: left; letter-spacing: -0.5; word-spacing: -1.5; outline: solid 1px black; } * html h1 { position: relative; left: -30px; width: 640px; font-size: 22px; margin-right: -10px; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; float: right; } td#innLinks { font-size: 13px; } /* This is just the
-like thing under the header. It's actually a graphic (configuring
tags doesn't work the same in all browsers) */ #layoutHR { background: #616F86 url("images/layouthr.gif") no-repeat; display: block; width: 780px; height: 18px; } /* A bit of CSS mumbo jumbo to make the site be positioned correctly, have that cool rounded-corner footer, etc. */ #page { display: block; text-align: center; } #layout { width: 780px; margin-left: auto; margin-right: auto; text-align: left; padding-bottom: 19px; background: url("images/footer2.gif") bottom no-repeat; } .index #layout { background: url("images/footer.gif") bottom no-repeat; } a { color: #616F86; } /* This is the configuration for the green Featured Inns box on the index page. It does the following: Float right (so that it's at the right of the page) Is 224px wide, 657px heigh (just like in the psd) Is light green with that nifty dark green gradient up top is positioned correctly in all browsers (that's the position, z-index and margin-left parameters... stupid IE) */ #featuredInns { float: right; width: 224px; height: 1043px; background: #C7DEA7 url("images/featuredbg.jpg") top repeat-x; text-align: center; font-size: 14px; color: #56693C; border-left: 1px solid #fff; position: absolute; z-index: 500; margin-left: 555px; } #featuredInns h2 { font-size: 18px; font-weight: normal; margin: 0; padding: 5px 0 5px 0; } #featuredInns ul { margin: 0px; padding: 0px; list-style: none; width: 208px; text-align: center; } #featuredInns .featuredImg { position: absolute; z-index: 1; width: 192px; height: 150px; border: none; overflow: hidden; margin-left: 8px; margin-top: 8px; } #featuredInns .featuredFrame { position: absolute; z-index: 10; border: none; width: 208px; height :168px; } #featuredInns .innImage { position: relative; left: -104px; } #featuredInns .bbName { margin-bottom: 11px; } /* the html > body #featuredInns stuff is, again, to make it look right in IE. */ html > body #featuredInns ul { margin-left: auto; margin-right: auto; } #featuredInns .innImage a { display: block; width: 208px; height: 168px; background-repeat: no-repeat; background-position: 10px 9px; } #featuredInns a { color: #130; } /* ... and now we're onto the layout of the content. First, the header Image (Welcome to the Gorge, a magical...). We set the width and height here so that it's easier to read when search engines get a hold of it. */ #headerIMG { width: 555px; height: 212px; } .headerText { position: absolute; margin: 0; color: #fff; margin-left: 272px; margin-top: 192px; background: #374254; padding: 2px 4px 2px 4px; border: 1px solid #fff; } * html .headerText { position: absolute; margin: 0; color: #fff; margin-left: 287px; margin-top: 189px; background: #374254; padding: 2px 4px 2px 4px; border: 1px solid #fff; } /* The linkList object is the table that has the three columns in it: [Find Lodging] [About the Area] [Lodging Specials] etc. The .title objects are the titles of each column (Find Lodging, etc.) The .desc objects are the text and links within those columns. */ #linkList { border-top: 1px solid #fff; width: 780px; } .index #linkList { width: 555px; } #linkList td { width: 25%; } #linkList .title { background: #9B8966; color: #fff; font-size: 18px; text-align: center; padding: 5px; } #linkList .desc { color: #000; font-size: 12px; padding: 7px; } .index #linkList .desc { padding: 0px; } #linkList .desc ul { margin: 5px; padding: 0px; list-style: none; } #linkList .desc li { background: url("images/bullet.gif") left center no-repeat; padding-left: 15px; } #linkList .desc a { color: #000; text-decoration: none; } #linkList .desc a:hover { color: #616F86; } .menuSub { display: none; padding: 5px; position: absolute; z-index: 10; width: 184px; } .index .menuSub { display: none; padding: 5px; position: absolute; z-index: 10; width: 174px; } * html .menuSub { width: 194px; } * html .index .menuSub { width: 185px; } .menuSub ul { margin: 0; margin-top: 5px; } /* This is where the different shades of brown are specified. In each case, it's setup like this: .brown1 (color of the .title) .brown1b (color of the .desc) */ #linkList .brown1 { background: #9C8968; } #linkList .brown1b { background: #C4AD81; } #linkList .brown2 { background: #AB9975; } #linkList .brown2b { background: #D9C296; } #linkList .brown3 { background: #B3A985; } #linkList .brown3b { background: #E4D5AA; } #linkList .brown4 { background: #CCC3A4; } #linkList .brown4b { background: #F1E6C6; } .borderRight { border-right: 1px solid #fff; } /* This is all the configuration for the content area (with the text). #contentContainer is the containing
immediately around the content text. It's where the width, font-size, padding, etc. is set. #cBox is, again, a dumb thing we had to do in order ot make IE look right. This is the only place where you should specify padding. */ #contentContainer { background: #fff; font-size: 15px; font-family: Arial, sans-serif; } .index #contentContainer { width: 550px; height: 800px; } .index #content { display: block; background: #fff url("images/contentbg.gif") repeat-y; width: 770px; } #contentContainer #cBox { padding: 15px; width: 760px; } .index #contentContainer #cBox { width: 530px; } #contentContainer #cBox p:first-child { margin-top: 0; padding-top: 0; } /* .blueText is a misc. specficiation for the color of that blue phone number on the front page. */ .blueText { color: #2E34A1; } #rotatingImages { width: 224px; height: 212px; border-left: 1px solid #fff; } #copyright { width: 780px; text-align: right; font-weight: normal; font-size: 10px; padding-top: 3px; padding-right: 14px; margin-left: auto; margin-right: auto; } #copyright a { color: #000; text-decoration: none; } #copyright a:hover { text-decoration: underline; } #bottomNav ul { margin: 0; padding: 0; list-style: none; margin-top: 50px; } #bottomNav li { float: left; } #bottomNav a { display: block; padding-left: 5px; padding-right: 5px; text-decoration: none; color: #000; font-size: 12px; color: #616F86; } #bottomNav a:hover { text-decoration: underline; } h2 { font-size: 16px; } #breadcrumbs, #breadcrums { padding-left: 10px; } #breadcrumbs, #breadcrumbs a, #breadcrums, #breadcrums a { color: #afafaf; font-size: 12px; } #breadcrumbs a:hover, #breadcrums a:hover { color: #000; } #linkList .title { padding: 0; } #linkList .title a { display: block; color: #fff; text-decoration: none; padding: 3px; } #linkList .brown1 a:hover { background: #826D48; } #linkList .brown2 a:hover { background: #947D4E; } #linkList .brown3 a:hover { background: #9F9059; } #linkList .brown4 a:hover { background: #B7A770; } #flashMap { width: 500px; height: 364px; border: 1px solid #000; } #mileageTable { width: 600px; border-left: 1px solid #775F36; border-top: 1px solid #775F36; border-right: 1px solid #775F36; } #mileageTable td { background: #F1E6C6 url("images/databg.gif") bottom repeat-x; border-bottom: 1px solid #775F36; font-size: 14px; padding: 5px; } #mileageTable .title { border-left: none; background: #9C8968 url("images/titlebg.gif") bottom repeat-x; color: #fff; font-weight: bold; } #mileageTable .miles { width: 50px; text-align: right; border-left: 1px solid #775F36; background: #fff url("images/milesbg.gif") bottom repeat-x; } #availLink { display: block; width: 140px; text-align: center; float: right; margin: 0px; padding: 5px 0 6px 0; background: #761a11; border-top: 10px solid #9AA78C; color: white; } #availLink:hover { background-color: #b02719; } * html #availLink{ margin-left: -20px; } /* @group My Group */ /* @end */