/*---------------------------------------- Name: global.css Developed by: Jason Sweet Date Created: Last Updated: Copyright: ----------------------------------------*/ /* Imports ----------------------------------------*/ @import url("http://www.carlciarfalio.com/assets/css/reset.css"); html { } body { background-color:#EBEBEB; margin: 0px; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; color:#000000; background-image: url(../images/common/page-background.gif); background-repeat: repeat-x; background-position: 0px 0px; font-size: 13px; } /* Main Layout ----------------------------------------*/ #container { width:950px; margin-right: auto; margin-bottom: 0px; margin-left: auto; position: relative; } /* Standard Definitions ----------------------------------------*/ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } a { color: #7E5230; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #563D35; font-weight: bold; text-decoration: none; } p { margin-top: 0; margin-right: 0; margin-bottom: 6px; margin-left: 0; } h1 { background-repeat: no-repeat; text-indent: -999px; margin-bottom: 30px; height: 30px; } h2 { color: #35221D; font-size: 16px; font-weight: bold; margin-bottom: 15px; } h3 { font-size:medium; color: #000; font-weight: bold; margin-bottom: 0px; margin-top: 15px; } blockquote { margin: 0 0 18px 18px; color:#666666; font-style: italic; } .strong { font-weight:bold; } em { font-style:italic; } /* Header ----------------------------------------*/ #header { height:90px; margin-left: auto; margin-right: auto; } #header #contact-block { background-image: url(../images/common/contact.gif); background-repeat: no-repeat; height: 61px; width: 239px; margin-right: 25px; background-position: right; position: absolute; float: right; left: 680px; top: 3px; } #header #logo #home-nav { width: 55px; } #header #logo #contact-nav { width: 180px; margin-left: 15px; } #header #navigate { float: left; padding-left: 25px; margin-top: 25px; } /* Nav ----------------------------------------*/ ul#nav li { float:left; list-style-type:none; color: #FFF; padding-right: 35px; } ul#nav li a { height:11px; display:block; text-indent:-9999px; } li#nav-home a { background-image: url(../images/navigate/nav-home.png); width: 41px; } li#nav-about a { background-image: url(../images/navigate/nav-about.png); width: 48px; } li#nav-reels a { background-image: url(../images/navigate/nav-reels.png); width: 120px; } li#nav-photos a { background-image: url(../images/navigate/nav-photos.png); width: 55px; } /* Sub-Nav ----------------------------------------*/ #sub-navigate a { text-decoration: none; outline:none; } #sub-navigate a:hover { background-position: 0 -9px; } ul#sub-nav { float: left; } ul#sub-nav li { float:left; list-style-type:none; color: #FFF; margin: 0; padding-top: 1px; padding-right: 25px; padding-bottom: 0px; } ul#sub-nav li a { display: block; text-indent: -999px; border-bottom-style: none; height: 9px;} li#nav-credits a { background-image: url(../images/navigate/nav-credits.png); width: 49px; } li#nav-new a { background-image: url(../images/navigate/nav-new.png); width: 76px; } li#nav-links a { background-image: url(../images/navigate/nav-links.png); width: 34px; } li#nav-shop a { background-image: url(../images/navigate/nav-shop.png); width: 33px; } li#nav-contact a { background-image: url(../images/navigate/nav-contact.png); width: 56px; } /* CSS Rollover ----------------------------------------*/ li#nav-about a:hover, li#nav-home a:hover, li#nav-photos a:hover { background-position:0 -11px; } ul#nav-sidebar { padding-left: 20px; } ul#nav-sidebar li { padding-bottom: 13px; } ul#nav-sidebar li a {/*Set to height of image*/ height:14px; display:block; text-indent:-9999px; background-repeat: no-repeat; width: 100%; border-bottom-style: none; } li#nav-coordinator a { background-image: url(../images/navigate/nav-coordinator.png); } li#nav-stuntman a { background-image: url(../images/navigate/nav-stuntman.png); } li#nav-actor a { background-image: url(../images/navigate/nav-actor.png); } li#nav-coordinator a:hover, li#nav-stuntman a:hover, li#nav-actor a:hover { background-position:0 -14px; } #sub-navigate { float: left; margin-top: 34px; margin-left: 250px; } /* Main Content ----------------------------------------*/ #wrapper { background-color: #FFF; height: auto; min-height: 100%; padding-bottom: 25px; background-image: url(../images/common/content-background.jpg); background-repeat: repeat-x; overflow: hidden; } #wrapper-footer { background-image: url(../images/common/content-footer.gif); background-repeat: no-repeat; background-position: center top; position: relative; height: 22px; } #copyright { margin-top: 5px; background-image: url(../images/common/copyright.gif); background-position: center top; height: 8px; background-repeat: no-repeat; margin-bottom: 10px; } #page #carousel { margin-top: 10px; height: 100px; width: 900px; margin-left: auto; margin-right: auto; padding-bottom: 10px; } /* Footer ----------------------------------------*/ #footer { height:6em; background-color:#001342; color: #FFF; padding-right: 30px; margin-top: -6em; position: relative; width: 920px; margin-right: auto; margin-left: auto; } #footer a { color: #5B9CFF; text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #787878; } #footer p { color: #CCC; text-align: right; margin-top: 0px; margin-right: 0px; margin-bottom: 3px; margin-left: 0px; font-size: 12px; } #footer #contactBox { float: left; height: 22px; margin-top: 16px; margin-left: 35px; } #footer #contactBox a { border-bottom-style: none; } #footer #links { float: right; width: 400px; margin-top: 14px; overflow: hidden; margin-bottom: 10px; text-align: right; } #footer #links #navWrapper { float: right; } #footer ul#navFooter li { float:left; list-style-type:none; margin-right: 8px; } #footer ul#navFooter li a { font-size: 13px; display:block; text-decoration: none; color: #5B9CFF; } #footer #copyright { padding-right: 9px; padding-top: 3px; } #sidebar-left { width: 200px; margin-top: 275px; float: left; background-image: url(../images/navigate/bottom-rounded.png); background-position: bottom; background-repeat: no-repeat; height: 90px; padding-top: 25px; } #sidebar-left a { color: #35221D; text-decoration: underline; } #sidebar-right { float: right; text-align: left; background-repeat: no-repeat; width: 190px; } #sidebar-right li { margin-bottom: 12px; font-size: 13px; padding: 5px; } #sidebar-right li a { font-weight: normal; } #portrait-interior { background-image: url(../images/portraits/portrait.jpg); background-repeat: no-repeat; height: 300px; width: 200px; position: absolute; top: 65px; left: 0px; } #page { margin-left: 250px; background-repeat: no-repeat; background-position: 4px 84px; padding-top: 45px;} #content { float: left; position: relative; width: 435px; min-height: 450px; } #content p { margin-bottom: 16px; line-height: 22px; } #bottom-panel { height: 100px; width: 900px; margin-right: auto; margin-left: auto; background-color: #7E5230; } #title { background-image: url(../images/common/name-background.png); background-repeat: no-repeat; height: 35px; float: left; width: 100%; margin-top: 45px; margin-bottom: 65px; } #title h1 { text-indent: -999px; } #title div { background-repeat: no-repeat; margin-top: 25px; height: 40px; margin-left: 12px; } #title div p { text-indent: -999px; } /* Page Specific Navigation States ----------------------------------------*/ #contact #nav-contact a { color: #7ED5F5; } #new #nav-new a { color: #7ED5F5; } #links #nav-links a { color: #7ED5F5; } #actor li#nav-about a { background-position: 0 -11px; } #stuntman li#nav-about a { background-position: 0 -11px; } #photos li#nav-photos a { background-position: 0 -11px; } /* home ----------------------------------------*/ #home li#nav-home a { background-position: 0 -11px; } #about li#nav-about a { background-position: 0 -11px; } #home #wrapper { height: auto; } #home #page { margin-left: 0px; padding-top: 82px; } #home #page h1 { background-image: url(../images/home/title.png); background-repeat: no-repeat; height: 61px; width: 472px; margin-bottom: 10px; margin-left: 55px; } #home #page #contact-info { width: 319px; padding-left: 133px; height: 31px; } #home #page #contact-info span { float: left; text-indent: -999px; } #home #page #contact-info #phone { width: 122px; background-color: #FFF; height: 31px; background-image: url(../images/home/phone.gif); background-repeat: no-repeat; background-position: center center; } #home #page #contact-info #e-mail { width: 197px; background-color: #35221D; height: 31px; background-image: url(../images/home/e-mail.gif); background-repeat: no-repeat; background-position: center center; } #home #page #contact-info span a { text-indent: -999px; } #home #wrapper-photo-stacks { height: 222px; background-image: url(../images/home/photo-stack-background.png); background-repeat: no-repeat; background-position: 20px 0px; margin-top: 76px; } #home #photo-stacks { background-image: url(../images/home/photo-stacks.jpg); background-repeat: no-repeat; height: 220px; width: 100%; background-position: 33px 10px; } #home #portrait { background-image: url(../images/home/carl-ciarfalio-pic.jpg); background-repeat: no-repeat; width: 343px; height: 517px; position: absolute; left: 582px; top: 65px; z-index: 10; } #home #content { float: left; margin-left: 325px; position: relative; } #home #sub-navigate { margin-left: 30px; } #home #photo-stacks div.hot-spot { float: left; height: 20px; width: 150px; margin-left: 50px; padding-top: 190px; } #home #photo-stacks div.hot-spot a { width: 150px; display: block; height: 20px; border-bottom-style: none; } #home #photo-stacks div.hot-spot a span { visibility: hidden; } /* about ----------------------------------------*/ #about h1 { background-image: url(../images/interior/title-bio.png); height: 36px; } #about #sidebar-right { width: 200px; float: right; text-align: left; margin-left: 20px; padding-top: 50px; background-repeat: no-repeat; background-image: url(../images/about/lifeography.png); } #about #portrait-interior { background-image: url(../images/portraits/portrait-about.jpg); } /* coordinator ----------------------------------------*/ #coordinator h1 { background-image: url(../images/interior/title-coordinator.png); } #coordinator li#nav-about a { background-position: 0 -11px; } #coordinator li#nav-coordinator a { background-position: 0 -14px; } #coordinator #content { padding-bottom: 25px; width: 480px; } #coordinator #content img { margin-right: 20px; margin-left: 20px; margin-bottom: 30px; } #coordinator #content ul { margin-top: 30px; } #coordinator #content li { float: left; list-style-type: none; margin-right: 50px; } #facebox h2 { font-size:1.15em; color: #666666; border-bottom-width: 1px; width: 580px; border-bottom-style: solid; border-bottom-color: #EFEEEC; font-weight: bold; margin-bottom: 25px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-left: 0px; } #facebox p { margin-bottom: 15px; font-weight: bold; margin-left: 15px; } #facebox span { font-size: 11px; font-weight: normal; } #facebox .quote-block { font-style: italic; font-weight: normal; margin-left: 0px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; } #facebox .col { float: left; margin-right: 25px; width: 250px; } /* photos ----------------------------------------*/ #photos #content { width: 525px; } #photos #portrait-interior { background-image: url(../images/portraits/portrait-photos.jpg); } #photos #gallery { height: 500px; } #photos h1 { background-image: url(../images/interior/title-photos-work.png); height: 27px; } #photos #navigate-photos li { padding-left: 20px; } .work #wrapper li#nav-work a { font-weight: bold; border-bottom-style: none; } .headshots #wrapper li#nav-headshots a { font-weight: bold; border-bottom-style: none; } .work #wrapper li#nav-work, .favorites #wrapper li#nav-favorites, .headshots #wrapper li#nav-headshots{ background-image: url(../images/common/arrow-icon.png); background-repeat: no-repeat; background-position: left center; } .favorites #wrapper li#nav-favorites a { font-weight: bold; border-bottom-style: none; } #photos .favorites h1 { background-image: url(../images/interior/title-photos-fav.png); height: 26px; } #photos .headshots h1 { background-image: url(../images/interior/title-photos-head.png); height: 26px; } /* stuntman ----------------------------------------*/ #stuntman #content { width: 480px; } #stuntman h1 { background-image: url(../images/interior/title-stuntman.png); height: 27px; } #stuntman #portrait-interior { background-image: url(../images/portraits/portrait-stuntman.jpg); } #actor #portrait-interior { background-image: url(../images/portraits/portrait-actor.jpg); } #stuntman li#nav-stuntman a { background-position: 0 -14px; } /* actor ----------------------------------------*/ #actor h1 { background-image: url(../images/interior/title-actor.png); height: 27px; width: 88px; } #actor li#nav-actor a { background-position: 0 -14px; } /* links ----------------------------------------*/ #links h1 { background-image: url(../images/interior/title-links.png); } #links #portrait-interior { background-image: url(../images/portraits/portrait-links.jpg); } #links #content { width: 100%; } #links #content li { background-image: url(../images/interior/bullet.png); background-repeat: no-repeat; background-position: left top; padding-left: 25px; margin-bottom: 15px; height: 16px; } #links #content li a { border-bottom-style: none; padding: 2px; } #links #content li a:hover { font-weight: bold; background-color: #7E5230; color: #FFF; } #links #content li span { color: #666666; margin-left: 3px; font-size: 10px; } #links li#nav-links a { background-position: 0 -9px; } /* contact ----------------------------------------*/ #contact h1 { background-image: url(../images/interior/title-contact.png); } #contact #portrait-interior { background-image: url(../images/portraits/portrait-contact.jpg); } #contact #content ul { margin-left: 40px; margin-bottom: 20px; } #contact #content li { margin-bottom: 5px; } #contact h2 { background-repeat: no-repeat; height: 12px; margin-bottom: 20px; width: 151px; text-indent: -999px; } #contact h2#mgt { background-image: url(../images/interior/subhead-mgt.png); } #contact h2#as { background-image: url(../images/interior/subhead-answering.png); } #contact li#nav-contact a { background-position: 0 -9px; } /* More sidebar ----------------------------------------*/ #coordinator #sidebar-right, #new #sidebar-right, #actor #sidebar-right, #stuntman #sidebar-right, #photos #sidebar-right { width: 140px; background-image: url(../images/interior/photos-sidebar-bkg.png); background-repeat: no-repeat; background-position: left top; height: 111px; padding-left: 18px; padding-top: 17px; } #coordinator #sidebar-right li, #new #sidebar-right li, #actor #sidebar-right li, #stuntman #sidebar-right li, #photos #sidebar-right li { margin-bottom: 5px; font-size: 12px; } #coordinator #sidebar-right a, #new #sidebar-right a, #actor #sidebar-right a, #stuntman #sidebar-right a, #photos #sidebar-right a { color: #FFF; border-bottom-color: #FFF; } /* what's new ----------------------------------------*/ #new #portrait-interior { background-image: url(../images/portraits/portrait-whats-new.jpg); } #new h1 { background-image: url(../images/interior/title-whats-new.png); } #new #content { min-height: 500px; width: 525px; } #new h2 { border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } #new .footnote { font-size: 10px; margin-right: 60px; text-align: right; color: #666; } #new .footnote a { font-size: 9px; } #new h4 { background-image: url(../images/interior/bullet.png); background-repeat: no-repeat; background-position: left center; text-indent: 25px; font-size: 1.1em; } #new #feed p { text-indent: 25px; line-height: 11px; } #new #sidebar-right .strong { color: #FFF; } #new li#nav-new a { background-position: 0 -9px; } /* credits ----------------------------------------*/ #credits li#nav-credits a { background-position: 0 -9px; } #credits h1 { background-image: url(../images/interior/title-credits.png); }