/* stylesheet: MARK TWAIN RETURNS site: marktwainreturns.com author: Mason Brown author site: maysundays.com CONTENTS: ---------------------- 1. RESET 2. GLOBAL 3. HEADER 4. HOME 5. ABOUT 6. PRIASE 7. CONTACT 8. FOOTER */ /* RESET CSS */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; } nav ul { list-style:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; outline: none; } ins { background-color:#ff9; color:#000; text-decoration:none; } mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } table { border-collapse:collapse; border-spacing:0; } hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; } /* END RESET CSS */ /**********/ /* GLOBAL */ /**********/ body, html { width:100%; height:100%; font-family: Georgia, serif; min-width:960px; background: #faf9f3;} .container { width: 100%; } .menu, .home-menu { width: 500px; height: 25px; margin: 15px auto 0 auto; list-style:none;position:relative; text-align: center} .menu { border-bottom: 1px solid #bfe1d4; } .menu li, .home-menu li{ height:35px; float:left; padding:0 27px; position:relative; z-index:2; font-family: Georgia; font-size: 12px; color: #856955; text-transform: uppercase; } .menu li a, .home-menu li a{ color:#856955; text-decoration: none; padding-bottom: 11px; } .menu li a:visited, .home-menu li a:visited {color: #856955;} .menu li a.selected, .home-menu li a.selected {color: #54a490; background: url(../img/menu-selected.png ) no-repeat 45% 20px;} .menu li a:hover, .home-menu li a:hover { color: #382114; } .menu li a.selected:hover, .home-menu li a.selected:hover {color: #54a490;} /**********/ /* HEADER */ /**********/ header {width: 100%; height: 68px; background: url(../img/header-bg.jpg) repeat-x; margin: 0; padding: 0;} .boat { width: 136px; height: 54px; background: url(../img/steamboat.png) no-repeat; text-indent: -900px; overflow: hidden; margin: 0 auto;} .header-accent { width:92px; height: 12px; margin: 7px auto; background: url(../img/header-accent.png) no-repeat;} /**********/ /* HOME */ /**********/ #home { position:relative; height:100%; min-height: 840px; max-height:1080px; background: url(../img/paper-home-bg.jpg) repeat; z-index: 1; } .paper-home-btm { height: 163px; background: url(../img/paper-home-btm.png) repeat-x; margin: -100px auto 10px auto; width: 100%; position: relative; z-index: 10;} .title-outter-container, .title-inner-container { width: 780px; margin: auto;} .title-outter-container { height: 180px; border-top: 1px solid #afa296; border-bottom: 1px solid #87cbb9; margin-top: -1px; } .title-inner-container { height: 176px; border-top: 1px solid #87cbb9; border-bottom: 1px solid #afa296; margin-top: 1px;} .title-mark-twain h1 { float: left; width: 783px; height: 144px; text-indent: -900px; overflow: hidden; margin: 6px 0 0 0; background: url(../img/title-mark-twain.gif) no-repeat; } .site-description h2 { width: 502px; margin: 0 auto; padding: 20px 0 34px 0; color: #756658; font-family: Georgia; font-size: 20px; font-weight: bold; font-style: italic; text-align: center; line-height: 24px; background: url(../img/spacer-description.gif) no-repeat bottom; } .hero { position: relative; width: 371px; height: 334px; margin: 10px auto; background: url(../img/hero-twain.png) no-repeat; } .hero h3 { position: absolute; bottom: 90px; left: 55px; font-size: 18px; color: #e2d6c1; font-family: Georgia; font-size: 18px; font-style: italic; text-align: center; text-shadow: #291d0e 1px 1px 2px; } /**********/ /* ABOUT */ /**********/ #about { height:1020px; position:relative; min-height:898px; min-width: 960px; background: url(../img/about-paper-bg.jpg) repeat-x; margin: -70px 0 0 0; z-index: 2; } .about-content { padding-top: 45px; } .about-title {width: 920px; margin: 30px auto; position: relative;} .about-title-top { position: absolute; left: 46%; top: 1px; color: #735d49; font-family: Georgia; font-size: 12px; font-style: italic; text-align: center; } .about-title-btm { position: absolute; left: 43%; top: 14px; color: #2a2524; font-family: Georgia; font-size: 23px; font-style: italic; text-align: center; font-weight: bold; } .about-title-spacer-left, .about-title-spacer-right { position: absolute; width:362px; height: 42px;} .about-title-spacer-left { left: 0; background: url(../img/about-title-spacer-left.png) no-repeat; } .about-title-spacer-right { right: 0; background: url(../img/about-title-spacer-right.png) no-repeat; } .about-photos { width: 886px; height: 444px; background: url(../img/about-photos.png) no-repeat; margin: 110px auto 0 auto; text-indent: -900px; overflow: hidden;} .about-accent-spacer {width: 152px; height: 17px; background: url(../img/about-accent-spacer.png) no-repeat; margin: 0 auto;} .about-body-text, .body-text, .body-text a { width: 870px; margin: 35px auto; color: #2a2524; font-family: Georgia; font-size: 14px; font-style: italic; text-align: center; font-weight: bold; position: relative; line-height: 22px; } .body-text a {text-decoration: none;} .body-text a:hover {opacity: .8;} .about-body-text-col-1 { position: absolute; left: 10px; width: 410px; text-align: left; } .about-body-text-col-2 { position: absolute; right: 10px; width: 420px; text-align: left; } .about-v { position: absolute; top: -34px; left:0; width: 64px; height: 53px; background: url(../img/about-v.png) no-repeat; text-indent: -900px; overflow: hidden;} /**************/ /* PRAISE */ /**************/ #praise { height:698px; position:relative; min-height:698px; min-width: 960px; margin: -130px 0 0 0; background: url(../img/praise-paper-bg.jpg); } .praise-menu {padding-top: 45px;} .praise-title {width: 920px; margin: 30px auto; position: relative;} .praise-title-top { position: absolute; left: 402px; top: 0px; color: #2a2524; font-family: Georgia; font-size: 26px; font-style: italic; text-align: center; font-weight: bold; letter-spacing: -1px; } .praise-title-btm { position: absolute; left: 411px; top: 30px; color: #785c32; font-family: Georgia; font-size: 16px; font-style: italic; text-align: center; font-weight: bold; letter-spacing: -1px;} .praise-title-spacer-left, .praise-title-spacer-right { position: absolute; width:404px; height: 67px;} .praise-title-spacer-left { left: 0; background: url(../img/prise-title-spacer-left.png) no-repeat;} .praise-title-spacer-right { right: 0; background: url(../img/prise-title-spacer-right.png) no-repeat;} .praise-quote-container { width: 820px; height: 211px; margin: 210px auto ; background-color: #f9faf5; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 1px solid #d9d4c4; } /* SLIDER STUFF */ .quoteSlide blockquote { width: 710px; margin: 30px 0 0 0;} .quoteSlide blockquote p .quote-text { width: 710px; margin-top: -16px; padding: 0 0 0 42px; display: block; color: #2a2524; font-family: Georgia; font-size: 22px; font-style: italic; text-align: center; line-height: 32px; display: block; } .quoteSlide blockquote p .quote-text-verbose { width: 710px; margin-top: -20px; padding: 0 0 0 42px; display: block; color: #2a2524; font-family: Georgia; font-size: 16px; font-style: italic; text-align: center; line-height: 22px; display: block; } .quoteSlide blockquote p .quotation-mark { background: url(../img/praise-quote-mark.png) no-repeat; width: 33px; height: 27px; text-indent: -400px; overflow: hidden; display:block; margin: 0 0 0 10px;} .quoteSlide blockquote p .quotation-mark-btm { background: url(../img/praise-quote-mark-btm.png) no-repeat; width: 33px; height: 27px; text-indent: -400px; overflow: hidden; display:block; margin: -20px 0 0 717px; padding: 0; } .quote-footer { width: 700px; margin: 0 0 0 15px; } .quote-spacer { background: url(../img/praise-quote-spacer.png) no-repeat; width: 152px; height: 17px; margin: 0 auto; text-indent: -500px; overflow: hidden;} .quote-signature, .quote-company { font-family: Georgia; text-align: center; font-style: italic; } .quote-signature { color: #a09c89; font-size: 18px; margin: 10px 0 5px 0; } .quote-company { color: #a09c89; font-size: 12px; } /* ANYTHING SLIDER STUFF */ div.anythingSlider { width: 800px; margin: 0 0 0 -20px; } div.anythingSlider .anythingWindow { width: 700px; height: 100%; } div.anythingSlider .start-stop { visibility: collapse; display: none; background-color: #040; color: #fff; } /* Active State */ div.anythingSlider.activeSlider .anythingWindow { width: 710px; height: 100%; padding: 0 40px 0 0; } div.anythingSlider.activeSlider .thumbNav a.cur, div.anythingSlider.activeSlider .thumbNav a { display: none; } div.anythingSlider .start-stop { background-color: #080; color: #fff; } div.anythingSlider .start-stop.playing { background-color: #d00;} div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover { color: #fff; } /* anythingSlider viewport window */ div.anythingSlider .anythingWindow { overflow: hidden; position: relative; height: 100%; } div.anythingSlider { position: relative; padding: 0 45px 28px 45px;} /* anythingSlider base UL */ ul.anythingBase { background: transparent; list-style: none; position: absolute; top: 0; left: 0; margin: 0; padding: 0;} ul.anythingBase li.panel { background: transparent; display: block; float: left; padding: 0; margin: 0; width: 170px; z-index: 5; } /* Navigation Arrows */ div.anythingSlider .arrow { width: 101px; height: 105px; position: absolute; top: 50px; display: block; margin: 0 0 0 0; } div.anythingSlider .arrow a { width: 101px; height: 105px; background: url(../img/praise-arrows.png) no-repeat; display: block; text-align: center; outline: 0; text-indent: -9999px; } div.anythingSlider .forward { right: -70px; } div.anythingSlider .back { left: -70px; } /* div.anythingSlider .forward a { background-position: 0 -40px; } */ div.anythingSlider .back a { background: url(../img/praise-arrows-left.png) no-repeat; } div.anythingSlider .forward a:hover, div.anythingSlider .forward a.hover { background-position: 0 -105px; } div.anythingSlider .back a:hover, div.anythingSlider .back a.hover { background-position: 0 -105px; } /* Navigation Links */ div.anythingSlider .anythingControls { outline: 0; } div.anythingSlider .thumbNav { margin: 0; } div.anythingSlider .thumbNav li { display: inline; } div.anythingSlider .thumbNav a:hover { background-position: -23px 0;} div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover { background-image: none; } div.anythingSlider, div.anythingSlider .anythingWindow, div.anythingSlider .thumbNav a, div.anythingSlider .arrow a, div.anythingSlider .start-stop { transition-duration: 0; -o-transition-duration: 0; -moz-transition-duration: 0; -webkit-transition-duration: 0; } /**************/ /* CONTACT */ /**************/ #contact { height:595px; position:relative; min-height:595px; min-width: 960px; background: url(../img/contact-paper-bg.jpg) repeat-x ; } .contact-content { padding: 25px 0 0 0;} .contact-title {width: 920px; margin: 30px auto; position: relative;} .contact-title-text { position: absolute; left: 44%; top: 10px; color: #2a2524; font-family: Georgia; font-size: 23px; font-style: italic; text-align: center; font-weight: bold; } .contact-title-spacer-left, .contact-title-spacer-right {width: 375px; height: 46px; position: absolute;} .contact-title-spacer-left { background: url(../img/contact-title-spacer-left.png) no-repeat; left: 0;} .contact-title-spacer-right { background: url(../img/contact-title-spacer-right.png) no-repeat; right: 0;} /* CONTACT FORM */ .contact-form-wrapper { width: 880px; margin: 80px auto; position: relative; padding: 20px;} .contact-body-text {float: left; width: 100%; text-align: center; margin: 0 0 5px 0; padding: 0;} #contact-form {width: 100%; float: left; margin: 20px 0 0 0;} .contact-form-btn { position: relative; display: block; width: 267px; height: 57px; background: url(../img/contact-form-btn.png) no-repeat; margin: 20px auto; font-family: Georgia; font-size: 22px; color: #e8e4d5; font-style: italic; text-decoration: none; text-indent: -10px; overflow: hidden; cursor: pointer; border: none; text-shadow: #291d0e 1px 1px 2px; outline: none;} .contact-form-btn:hover { background-position: 0 -57px; } form#contact-us fieldset { margin: 0 auto; border: 0; width: 835px; text-align: left; } .contact-col-1 { float: left; width: 410px; margin-right: 6px; } .contact-col-2 { float: left; width: 410px; margin-left: 6px; } .field-outline { width: 408px; height: 71px; background: url(../img/contact-field-outline.gif) no-repeat; padding: 7px 0 5px 7px; } .field-area-outline { width: 411px; height: 237px; background: url(../img/contact-field-area-outline.gif) no-repeat; padding: 7px; } form#contact-us input[type="text"], input[type="url"], input[type="email"], input[type="tel"] { width: 362px; height: 40px;} form#contact-us textarea { width: 365px; height: 206px; } form#contact-us input[type="text"], input[type="url"], input[type="email"], input[type="tel"], textarea { padding: 15px 15px 0 15px; background: #eae7d9; border: 1px solid #c2c2c2; border-radius: 8px; -webkit-border-radius: 6px; -moz-border-radius: 6px; font-family: Georgia; font-size: 22px; color: #a79677; font-style: italic; text-decoration: none; } form#contact-us label.error { width: 100%; margin: -15px 0 0 17px; display: block; color: #54A490; font-family: Georgia; font-style: italic; font-size: 11px; text-align: left; } .placeholder, form#contact-us .placeholder, placeholder, isindex::-webkit-input-placeholder, input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { font-family: Georgia; font-size: 22px; color: #a79677; font-style: italic; text-decoration: none;} #contact-form-thanks {width: 502px; margin: 0 auto; padding: 0 0 10px 0; color: #756658; font-family: Georgia; font-size: 20px; font-weight: bold; font-style: italic; text-align: center; } input:-webkit-autofill {background-color: #eae7d9; background-image: none; } textarea, input{ outline:none;} /**********/ /* FOOTER */ /**********/ .footer { width: 100%; height: 224px; background: url(../img/footer-bg.jpg) repeat; margin: 0 auto; } .footer-top { background: url(../img/footer-top-bg.jpg) repeat-x; height: 101px; width: 100%; } .footer-floureshes { width: 658px; height: 168px; background: url(../img/footer-floureshes.png) no-repeat; margin: 0 auto; } .footer-btm-wrapper { margin: -62px 0 0 0; } .footer-btm { position: relative; width: 720px; height: 47px; margin: auto; } .footer-banner-btn { width: 440px; height: 47px; background: url(../img/footer-banner.png) no-repeat; margin: 0 auto; } .footer-banner-btn:hover { background-position: 0 -47px;} .footer-banner-btn a { text-decoration: none; color: #e8e4d5; font-size: 22px; font-family: Georgia; font-style: italic; text-align: center; padding: 10px 95px 10px 80px; position: absolute; top: 0; left: 146px; } .footer-banner-btn a:hover { color: #fff; } .footer-tag-left, .footer-tag-right { font-family: Georgia; font-size: 10px; color: #686558; text-transform: uppercase; margin: 18px 0 0 0;} .footer-tag-left {float: left; width: 200px;} .footer-tag-right {float: right; width: 200px; text-align: right;} .footer-tag-btm-wrapper {margin: 3px 0 0 0;} .footer-tag-btm { width: 270px; margin: 0 auto; font-family: Georgia; font-size: 15px; color: #918e81; font-style: italic; text-align: center; background: url(../img/footer-bg.jpg) repeat;}