/*--------------------------------------------- www.davidjoel.com March 2009 ----------------------------------------------- */ /* general html */ * { padding:0; margin:0; } html { font-size:100%; } body { min-width:728px; max-width:100%; margin:0 auto; padding:0; color:#fff; font:75%/1.5 "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Helvetica,Arial,sans-serif; background-color:#000; } /*--------------------------------------------- PAGE HEAD "FRAME" ----------------------------------------------- */ /* instead of frames, we're using css to keep the page head fixed when scrolling */ #frame-wrap { position:absolute; top:0; right:7px; width:100%; height:138px; } #frame-content { position:relative; width:900px; height:138px; margin:0 auto; text-align:left; background:url(../assets/sitewide/david-joel-logo.gif) no-repeat 0 18%; overflow:hidden; } #frame-content ul.brand { float:left; display:inline; list-style:none; margin:12px 0 0 0; border:none; } #frame-content ul.brand li { margin:0; } #frame-content ul.brand li a { display:block; width:75px; height:75px; text-decoration:none; } /* here we style the frame's typography */ #frame-content h1 { font-size:24px; font-weight:bold; float:left; display:inline; margin-left:15px; padding-top:30px; color:#fff; letter-spacing:-0.05em; } #frame-content h2 { font-size:12px; font-weight:bold; float:right; display:inline; padding-top:45px; } #frame-content h2 a { font-weight:normal; display:inline; padding-right:24px; } #frame-content h2 a:hover { color:#fff; } /*--------------------------------------------- NAVIGATION SYSTEMS ----------------------------------------------- */ /* our primary navigation system is a horizontal list */ #nav ul { width:100%; position:absolute; bottom:0; margin:0; padding:0; list-style:none; overflow:hidden; clear:both; border-right:1px solid #000; border-bottom:1px solid #ccc; } #nav ul li { float:left; margin:0; padding:0; } #nav ul li a { float:left; display:block; width:auto; line-height:13px; padding:6px 12px 6px 9px; margin:0; text-decoration:none; border:none; } #nav ul li a strong { display:block; font-size:12px; line-height:13px; font-weight:bold; text-transform:uppercase; letter-spacing:0.1em; } #nav li a:hover { color:#999; background-color:#333; } #nav li a.active { color:#222; background-color:#ccc; } #nav ul li a:hover strong { color:#fff; } #nav ul li a.active strong { color:#000; } /* our sub navigation system is a vertical list */ .section-left ul.subnav { text-align:left; margin:5px 0; padding:6px 0; border-top:1px solid #666; } .section-left ul.subnav li { list-style:none; padding:5px 0; margin:0 2px; } .section-left ul.subnav li a { text-decoration:none; border:none; display:block; } .section-left ul.subnav li a:hover { color:#0ff; border:none; text-decoration:underline; } .section-left ul.subnav li.active { font-weight:bold; color:#0ff; text-decoration:none; list-style:none; padding:5px 0; margin:0 2px; } * html body ul.subnav li { height:1%; } /*--------------------------------------------- PAGE CONTENT STYLES FOR ALL PAGES ----------------------------------------------- */ /* page-bkgrd and page-wrap seem duplicative, but needed to make the css frame work */ /* main content top setting will adjust space from frame to top of main content page. */ #main-content { position:fixed; top:145px; left:0; right:0; bottom:0; overflow:auto; height:auto; } #main-content h1 { font:normal 24px Georgia, "Times New Roman", Times, serif; letter-spacing:-0.035em; margin-bottom:9px; } #main-content h1 a, #main-content h1 a:visited { color:#eee; } #main-content h1 a:hover { color:#999; text-decoration:none; } #main-content h2 { font:normal 18px Georgia, "Times New Roman", Times, serif; text-transform:uppercase; letter-spacing:2px; margin:3px 0; color:#fff; } #main-content h3 { font-size:14px; line-height:14px; font-weight:bold; color:#f00; margin-bottom:9px; } #main-content p { margin-bottom:9px; } #page-bkgrd { position:relative; width:900px; margin:0 auto; text-align:left; } /* these are the styles for the home page */ .section-wrap-home { float:left; width:900px; display:block; text-align:center; } .section-wrap-home p { font-weight:bold; font-size:120%; } .section-wrap-home img { display:block; margin:24px auto; } .section-wrap-home .button a, .section-wrap-home .button a:visited { width:auto; font-size:100%; text-decoration:none; font-weight:bold; padding:2px 12px 4px 12px; } .section-wrap-home .special-button a, .section-wrap-home .special-button a:visited { width:auto; font-size:100%; text-decoration:none; font-weight:bold; padding:5px 12px; text-transform:uppercase; letter-spacing:1px; border:1px solid #ccc; } /* these are the divs that display text and links on the left and images on the right */ .section-wrap { float:left; width:900px; margin:14px 0 6px 0; padding:6px 0; } .section-head { float:left; width:900px; padding-top:12px; } .section-left { float:left; width:100px; padding-top:12px; } .section-right { float:right; width:790px; padding-top:12px; text-align:center; } /* in the portfolio sections, these style the thumbnail page layouts */ .section-thumbs { float:left; width:185px; height:185px; margin:0 5px 12px 5px; border:1px solid #333; padding:0; } .section-thumbs a img { border:1px solid #333; } .section-thumbs a:hover img { border:1px solid #999; } /* the footer is quite large to include the map, nav, images and legal */ #footer-wrap { clear:both; height:auto; width:900px; padding:24px 0 6px 0; text-align:center; border-top:1px solid #ccc; } #footer-left { float:left; width:270px; margin:102px 0; display:inline; } #footer-left img { width:250px; } #footer-map { float:left; width:360px; margin:6px 0 24px 0; display:inline; } #footer-right { float:right; width:260px; margin:102px 0; display:inline; } #footer-right img { width:250px; } #footer-nav { clear:both; margin:12px 12px; padding:12px 0; } #footer-nav a { text-decoration:none; padding:0 4px; } #footer-nav a:hover { color:#f00; text-decoration:underline; } #footer-nav a.active, #footer-nav .active { text-decoration:none; font-weight:bold; color:#f00; } #footer-legal { clear:both; width:100%; margin:12px auto 24px auto; padding:6px 12px; font-size:85%; text-align:center; } /*--------------------------------------------- SLIMBOX 2 - A JQUERY GALLERY VIEWER created by christophe beyls - www.digitalia.be ----------------------------------------------- */ /* our modified styles for the modal window gallery viewer */ #lbOverlay { position:fixed; z-index:9999; left:0; top:0; width:100%; height:100%; background-color:#000; cursor:pointer; } #lbCenter, #lbBottomContainer { position:absolute; z-index:9999; overflow:hidden; background-color:#fff; } .lbLoading { background:#fff url(../assets/slimbox/loading.gif) no-repeat center; } #lbImage { position:absolute; left:0; top:0; border-top:24px solid #fff; border-right:24px solid #fff; border-bottom:6px solid #fff; border-left:24px solid #fff; background-repeat:no-repeat; } #lbPrevLink, #lbNextLink { display:block; position:absolute; width:30%; outline:none; top:0; } #lbPrevLink { left:-25px; background:transparent url(../assets/slimbox/prev-label.gif) no-repeat 0 50%; } #lbPrevLink:hover { } #lbNextLink { right:-25px; background:transparent url(../assets/slimbox/next-label.gif) no-repeat 100% 50%; } #lbNextLink:hover { } #lbBottom { font-family:Verdana, Arial, Geneva, Helvetica, sans-serif; font-size:10px; color:#666; line-height:1.4em; text-align:left; border:20px solid #fff; border-top-style:none; border-bottom:6px solid #fff; } #lbBottom a { color:#483521; text-decoration:underline; } #lbBottom a:hover { color:#bfaf85; text-decoration:none; } #lbBottom a:visited { color:#483521; text-decoration:underline; } #lbCloseLink { font-size:120%; float:right; width:30%; text-align:right; font-weight:bold; margin:0; outline:none; } #lbCloseLink { display:block; float:right; width:66px; height:22px; background:transparent url(../assets/slimbox/close-label.gif) no-repeat center; margin:6px 0; outline:none; } #lbCaption { float:left; width:50%; margin:0; } #lbNumber { display:none; } #lbNumber { display:none; } #lbCaption { margin:9px 0 0 0; } /*--------------------------------------------- FORM ----------------------------------------------- */ /* contact */ .form-wrap { float:left; width:900px; margin:14px 0 6px 0; padding:6px 0; min-height:400px; height:auto !important; height:400px; background:transparent url(../assets/home/EYE.gif) no-repeat 100% 50%; } .formrequired { background-color:#ffc; } .formerror { font-weight:bold; color:#f00; background-color:#ebebeb; width:auto; padding:6px 0;} .formerror img { border:none; background-color:#ebebeb; } .errortext { font-weight:bold; color:#fff; background-color:#f00; padding:4px 6px 4px 0; } .errortext img { border:none; background-color:#f00; } .formtab { padding:4px 6px 4px 0; } .checkboxes { float:left; margin:5px 30px 15px 0; line-height:160%; } .entryfields { float:left; width:470px; height:auto; } .goaway { position:absolute; left:-500px; display: none; } /*--------------------------------------------- OTHER STYLES ETC ----------------------------------------------- */ /* styling tags for links and general typography */ a { font-weight:normal; color:#fff; text-decoration:underline; } a:hover { color:#f00; text-decoration:none; } a:visited { color:#fff; text-decoration:underline; } .bold { font-weight:bold; } .redbox { border:1px solid #f00; padding:6px 72px 18px 72px; margin:18px 0 72px 0; } /* and these are the obligatory ie6 hacks, sigh */ * html { font-size:80%; } /* ie text resize correction */ * html body { font-size:0.9em; padding:150px 0 0 0; text-align:center; /*Set value to (HeightOfFrameDiv 0 0 0)*/ } * html body .section-wrap { width:900px; } * html #main-content { height:100%; width:100%; } * html .section-thumbs a img.horz { width:90%; } * html .section-thumbs a img.vert { height:100%; }