/* screen styles */ /* NOTE: any * > selector rules are for standards-compliant browsers. The rule before will have a style that works in IE6. */ /* Table of Contents Non-displaying Elements Layout Listings Page Specific Layout Typography and Inline Elements Main Menu and Buttons Top Menu and Buttons (About Us, Contact, Search Extra Buttons (Join Now, Trip Planner, Multi Media Viewer) Footer Buttons Content Menu (left hand menu) Home Page Buttons */ /* Non-displaying Elements*/ /* *************************************************************************************** */ #menu a, #topMenu a, #extraButtons a, #footerMenu a, #liveTheWestFooterBtn, #btn-translate, #nav-home, .home h1 {text-indent:-9999px; overflow:hidden} /* Push text in menu buttons off screen */ /* Layout */ /* *************************************************************************************** */ body { text-align:center; background: #ede4c7 url(images/topTile.gif) repeat-x; font-size: 16px; font-weight: bold; color: #83361C; } #container { height:auto; margin:0 auto; position:relative; text-align:left; width: 765px; } #logo{ display:block; position:absolute; left:0px; top:10px; width:212px; height:73px; clear: both; visibility: visible; } .home #logo { display:block; position:absolute; left:0px; top:10px; width:212px; height:73px; clear: both; visibility: visible; } #topImage { position:absolute; width:282px; height:95px; top:10px; left:212px; background-repeat:no-repeat; background-position:bottom center; } #cowboyLogo {display:none} /* Hide cowboy logo completely from IE6. Since cowboy logo is PNG 24 it won't work properly in IE6 */ * > #cowboyLogo { width:45px; height:73px; background:url(images/cowboyLogo.png) no-repeat left top; position: absolute; left: 810px; top: 30px; display:block; } #flash { position: absolute; height: 226px; width: 500px; left:0px; top:133px; } #content { position: relative; float: none; width: 590px; margin-left:155px; height: auto; clear: both; margin-top: 133px; padding: 0 10px 1em; height:500px; } * > #content {min-height:500px; height:auto;} * > #content {float:left} /*comment out this line to work in Dreamweaver */ .home #content /* content area for the home page. set the class of the tag to "home" */ { margin-top: 359px; margin-left:0; padding: 1em 0; border-top: 3px solid #83361b; min-height:inherit; width: 765px; } #content2 {width:580px; float:right} #e-brochure {width:180px; margin-top:-20px;} #content.noMenu {width:725px; margin-left:0} /* set the div with id="content" to class="noMenu" for those pages that won't use the #contentMenu */ #footer { clear: both; float: none; position: relative; width: 745px; padding: .5em 10px 1em; border-top: 1px solid #82361B; text-align:center; } * > #footer {float:left} /* Layout > Listings */ /* *************************************************************************************** */ .listing { border-bottom: 1px solid #F2A73C; padding-bottom: 0; margin-bottom: 0.5em; color:#000000; font-size: 0.9em; clear:both; float:none; position:relative; height: 130px; } * > .listing {float:left; height: auto; min-height:120px; margin-bottom:0; padding-bottom:0.5em; padding-top: 0.5em; border-bottom:none} .listing + .listing { border-top: 1px solid #6A471B; } /* first .listing will not have a border on top */ .listing img {margin: 0 10px 0 0; float:left; clear:both} .listing h3 {color:#82361B; text-transform:uppercase; font-size:1em; font-weight:bold} .listing p {width:auto; margin:0 0 .5em 230px} /* Layout > Page Specific Layout */ /* *************************************************************************************** */ #topImage { position:absolute; width:257px; height:105px; top:0px; left:218px; background-repeat:no-repeat; background-position:bottom center; } #pageTitle { position: absolute; height: 50px; width: 320px; top: 58px; left:462px; background-repeat:no-repeat; background-position:center left; } #signUpLink{ position: absolute; height: 50px; width: 320px; top: 34px; left:460px; background-repeat:no-repeat; background-position:center left; } /* class name should be applied to the tag on the page to change #pageTtile and #topImage */ .eventsCalendar #pageTitle {background-image:url(images/headingTextHappenings.gif)} .eventsCalendar #topImage {background-image:url(images/bannerImageshappenings.jpg)} .tripPlanner #pageTitle {background-image:url(images/headingTextTripPlanner.gif)} .tripPlanner #topImage {background-image:url(images/bannerImagesTripPlanner.png)} .lodging #pageTitle {background-image:url(images/headingTextLodging.gif)} .lodging #topImage {background-image:url(images/bannerImagesLodging.jpg)} .activities #pageTitle {background-image:url(images/headingTextActivities.gif)} .activities #topImage {background-image:url(images/bannerImagesActivities.jpg)} .dining #pageTitle {background-image:url(images/headingTextDining.gif)} .dining #topImage {background-image:url(images/bannerImagesDining.jpg)} .maps #pageTitle {background-image:url(images/headingTextMaps.gif)} .maps #topImage {background-image:url(images/bannerImagesMaps.jpg)} .webCams #pageTitle {background-image:url(images/headingTextWebCams.gif)} .webCams #topImage {background-image:url(images/bannerImagesWebCams.jpg)} .links #pageTitle {background-image:url(images/headingTextLinks.gif)} .links #topImage {background-image:url(images/bannerImagesLinks.jpg)} .vendorAdministration #pageTitle {background-image:url(images/headingTextVendorAdministration.gif)} .vendorAdministration #topImage {background-image:url(images/bannerImagesVendorAdmin.jpg)} .about #pageTitle {background-image:url(images/headingTextAbout.gif)} .about #topImage {background-image:url(images/bannerImagesAboutUs.jpg)} .media #pageTitle {background-image:url(images/headingTextVideo.gif)} .media #topImage {background-image:url(images/bannerImagesAboutUs.jpg)} .post #topImage {background-image:url(images/bannerImagesAboutUs.jpg)} .contact #pageTitle {background-image:url(images/headingTextContact.gif)} .contact #topImage {background-image:url(images/bannerImagesContactUs.jpg)} .search #pageTitle {background-image:url(images/headingTextSearch.gif)} .search #topImage {background-image:url(images/bannerImagesSearch.jpg)} .forms #pageTitle {background-image:url(images/headingTextdownloadForms.gif)} .forms #topImage {background-image:url(images/bannerImagesForms.jpg)} .brochure #pageTitle {background-image:url(images/headingTextBrochure.gif)} .brochure #topImage {background-image:url(images/bannerImagesBrochure.jpg)} .join #pageTitle {background-image:url(images/headingTextJoin.gif)} .join #topImage {background-image:url(images/bannerImagesJoin.jpg)} /* Typography and Inline Elements */ /* *************************************************************************************** */ h1 {font-size: 1.2em;} h2 {font-size:1.1em;} h3 {} p {} a { color: #82361B; } a:link, a:visited {text-decoration:underline;} a:hover, a:active {color: #82361B;} .home h1 { background: url(images/home_h1.gif); height: 52px; width: 551px; margin-bottom: 1em; } /* Main Menu and Buttons*/ /* *************************************************************************************** */ #menu { position: absolute; height: 22px; width: 765px; left: 0px; top: 104px; background: #82361B; z-index: 3; } #menu a { display:block; height:22px; background-position:top left; float:left; position:relative; border-left:1px solid #ffffff; background-repeat:no-repeat; } #menu a:hover, #menu a:active {background-position:bottom left} #menu ul {} #homeBtn{background-image:url(images/mainMenuHome.gif); width:55px} #eventsCalendarBtn{background-image:url(images/mainMenuEventsCalendar.gif); width:139px} #planYourTripBtn{background-image:url(images/mainMenuPlanYourTrip.gif); width:128px} #lodgingBtn{background-image:url(images/mainMenuLodging.gif); width:79px} #activitiesBtn{background-image:url(images/mainMenuActivities.gif); width:90px} #diningBtn{background-image:url(images/mainMenuDining.gif); width:69px} #videoBtn{background-image:url(images/mainMenuVideo.gif); width:63px;} #webCamsBtn{background-image:url(images/mainMenuWebCams.gif); width:89px; border-right:1px solid #ffffff;} #menu ul, #menu li, #topMenu ul, #topMenu li, #extraButtons ul, #extraButtons li, #signUpLink ul, #signUpLink li, #footer ul, #footer li, #contentMenu ul, #contentMenu li, #nav-home ul, #nav-home li { /* fix IE6 and IE7 List bug for all menus */ display: inline; } /* Top Menu and Buttons (About Us, Contact, Search */ /* *************************************************************************************** */ #topMenu { position:absolute; top: 10px; left:450px; width: auto; height: 15px; } .home #topMenu {left:492px} #topMenu a { font-size:5px; display:block; height:15px; float:left; position:relative; border-right:1px solid #82361B; background-repeat:no-repeat; padding:0 12px; overflow:hidden; } #topMenu a:link, #topMenu a:visited {background-color:transparent; background-position:center bottom;} #topMenu a:hover, #topMenu a:active {background-color:#82351b; background-position:center top;} #aboutUsBtn{background-image:url(images/topMenuAboutUs.gif); width:75px} #contactBtn{background-image:url(images/topMenuContact.gif); width:66px} #searchBtn{background-image:url(images/topMenuSearch.gif); width:58px; border-right:0px solid #82361B !important;} /* Extra Buttons (Join Now, Trip Planner, Multi Media Viewer) */ /* *************************************************************************************** */ #extraButtons { position:absolute; height: 324px; width: 266px; top: 35px; right: 0px; z-index: 2; } #extraButtons a:link, #extraButtons a:visited {background-position:left top; display:block;} #extraButtons a:hover, #extraButtons a:active {background-position:right top; display:block} a#joinNowBtn {background-image:url(images/buttonsJoinNow.png); width:265px; height:63px; margin:0 0 35px 3px} a#freeGuide {background-image:url(images/button_free_guide.png); width:195px; height:33px; margin-top:15px;} a#iBrochure {background-image:url(images/button_i_brochure.png); width:195px; height:33px; margin:0 0 35px 0px} #tripPlannerBtn {background-image:url(images/buttonsTripPlanner.png); width:266px; height:114px; top:96px; position:absolute} #multiMediaViewerBtn {background-image:url(images/buttonsMultiMediaViewer.png); width:266px; height:114px; top:210px; position:absolute} /* Footer Buttons */ /* *************************************************************************************** */ #footerMenu a {margin-right:60px} #footerMenu a:link, #footer a:visited { font-size:5px; /* for IE6. If the font is too high it makes the size of the block bigger */ float:left; position:relative; height:13px; background-image:url(images/nav-footer.png); background-repeat:no-repeat; } ul#footerMenu {position:relative;margin:0 auto; display:block !important;} #joinBtn {background-position: -515px 0; width:29px;} #downloadableFormsBtn {background-position: -339px 0; width:149px;} #listYourBusinessBtn {background-position: 0px 0; width:195px;} #vendorLoginBtn {background-position: -216px 0; width:95px;} a#linksBtn {background-position: -571px 0; width:35px; margin-right:0;} #joinBtn:hover {background-position: -515px -13px} #downloadableFormsBtn:hover {background-position: -339px -13px} #listYourBusinessBtn:hover {background-position: 0px -13px} #vendorLoginBtn:hover {background-position: -216px -13px} a#linksBtn:hover {background-position: -571px -13px} #footer a#liveTheWestFooterBtn { height:15px; margin:7em auto 1em ; width:507px; background-image: url(images/footerLiveTheWest.png); background-position:center inherit; background-repeat:no-repeat; clear:both; float:none; } /* Content Menu (left hand menu - content of menu is dynamically generated) */ /* *************************************************************************************** */ #contentMenu { position: absolute; height: auto; width: 150px; top: 135px; left: 0px; background: url(images/subMenu.png) repeat-x left top; text-align:right; padding-top: 0.125em; } #contentMenu ul { list-style: none inside;} #contentMenu h1 {padding:0 5px; font-size:1.2em; text-transform:uppercase} #contentMenu a {text-decoration:none; display:block;padding:0 5px} #contentMenu a:hover, #contentMenu a:active { background-color:#81361b; color:#ffffff; } /* Home Page Buttons (view visitor guide, photo contest...) */ /* *************************************************************************************** */ #nav-home { list-style: none; clear: both; float: none; margin-bottom: 1em; } #nav-home a:link, #nav-home a:visited, #btn-translate:link, #btn-translate:visited { display:block; background-image:url(images/nav-home.gif); background-repeat:no-repeat; height: 29px; float:left; margin-right:11px; } #btn-view_visitor_guide {background-position: 0px 0px; width: 152px;} #btn-photo_contest {background-position: -155px 0px; width: 138px;} #btn-ski_and_stay {background-position: -299px 0px; width: 99px;} #btn-brochures_and_tours {background-position: -402px 0px; width: 151px; margin-right:0;} #nav-home a#btn-whsaa_football {background-position: -743px 0px; width:141px; clear:right} a#btn-translate {background-position: -568px 0; width: 171px; margin-top:0.5em; margin-bottom:1em; clear:both} #btn-view_visitor_guide:hover {background-position: 0px -30px} #btn-photo_contest:hover {background-position: -155px -30px} #btn-ski_and_stay:hover {background-position: -299px -30px} #btn-brochures_and_tours:hover {background-position: -402px -30px} #nav-home a#btn-whsaa_football:hover {background-position:-743px -30px;} a#btn-translate:hover {background-position: -568px -30px; width: 171px; }