/* CSS References http://www.w3.org/TR/css3-selectors/#selectors http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(CSS) http://developer.mozilla.org/en/docs/Writing_Efficient_CSS http://www.dustindiaz.com/css-shorthand/ http://www.tanfa.co.uk/css/examples/ Browser Hacks http://www.nealgrosskopf.com/tech/thread.asp?pid=20 IE Bugs http://css-class.com/articles/explorer/guillotine/ http://www.satzansatz.de/cssd/onhavinglayout.html http://csscreator.com/node/472 http://jszen.blogspot.com/2005/04/ie-bold-text-opacity-problem.html */ /** CSS Variables - Spec: http://disruptive-innovations.com/zoo/cssvariables/ **/ /** Reset and General Styles - Thank You Eric Meyer - http://meyerweb.com/eric/tools/css/reset/ **/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0px; padding: 0px; border: none; outline: none; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; } address { font-style: normal; } acronym, abbr { border-bottom: 1px #cccccc dashed; cursor: help; } img { display: block; } /* http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps */ ol, ul { list-style: none; } table { border-collapse: separate; border-spacing: 0; } /* tables still need 'cellspacing="0"' in the markup */ caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } :focus { outline: 0; } /* remember to define focus styles where possible! */ blockquote { margin: 1.5em; color: #666; font-style: italic;} del { color: #666; } dfn { font-weight: bold; } em, dfn { font-style: italic; } pre { margin: 1.5em 0; white-space: pre; } pre, code, tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5;} strong { font-weight: bold; } sup, sub { line-height: 0; } /** General Classes **/ .top { vertical-align: top; } .bottom { vertical-align: bottom; } .middle { vertical-align: middle; } .sub { vertical-align: sub; } .sup { vertical-align: super; } .left { text-align: left; } .right { text-align: right; } .center { text-align: center; } .justify { text-align: justify; } .smallcaps { font-variant: small-caps; } .bold { font-weight: bold; } .italic { font-style: italic; } .underline { text-decoration: underline; } .nounderline { text-decoration: none; } .strikethrough { text-decoration: line-through; } .lowercase { text-transform: lowercase; } .uppercase { text-transform: uppercase; } .indent { text-indent: 1em; } .pre { white-space: pre; } .clear { clear: both; } .clearfix { overflow:auto; } .clearfix_hidden { overflow: hidden; } .block { display: block; } .inline { display: inline; } .inline-block { display: inline-block } .none { display: none; } .visible { visibility: visible; } .hidden { visibility: hidden; } .collapse { visibility: collapse; } .highlight { color: #990000; font-weight: bold; } .notice { background: #ffffcc; border: 1px solid #a2a282; } .error { color: #990000; font-weight: bold; } .imagereplacement { overflow: hidden; text-indent: -1000em; } .last { margin-right: 0px; } /** General Element Styles **/ html { background: #ffffff url(/images/bgMain.jpg) repeat-x 0 0; } body { padding: 0px 0px 40px 0px; text-align: center; } /* center things in <= IE6 */ #container { margin: 0px auto; position: relative; text-align: left; width: 950px; } #screenreader { position: absolute; top:-1000em; left:-1000em; } body { color: #6f6f6f; font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif; font-size: 62.5%; line-height: 1; } /* Default of 16px 62.5% = 10px */ h1 { font-size: 3.60em; line-height: 1.20em; margin: 0px 0px 18px 0px; } h2 { font-size: 1.80em; line-height: 1.25em; margin: 0px 0px 12px 0px; } h3 { font-size: 1.40em; line-height: 1.30em; margin: 0px 0px 10px 0px; } h4 { font-size: 1.40em; line-height: 1.30em; margin: 0px 0px 10px 0px; } h5 { font-size: 1.40em; line-height: 1.30em; margin: 0px 0px 5px 0px; } h6 { font-size: 1.20em; line-height: 1.33em; margin: 0px 0px 5px 0px; } p { font-size: 1.20em; line-height: 1.33em; margin: 0px 0px 10px 0px; } a { color: #a11e22; text-decoration: none; } a:link { color: #a11e22; } a:visited { color: #a11e22; } a:hover { color: #a11e22; text-decoration: underline; } a:focus { color: #a11e22; text-decoration: underline; } a:active { color: #a11e22; text-decoration: underline; } a.active { text-decoration: underline; } h1, h2, h3, h4, h5, h6 { font-weight: bold; } /** Form Styles **/ fieldset { margin: 15px 0px 0px 0px; } fieldset ul { list-style-type: none; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; } fieldset ul li { font-size: 1.00em; margin: 0px 0px 12px 0px; } fieldset ul li.checkboxes { margin-bottom: 15px; } fieldset ul li.checkboxes input { position: relative; top: 2px; } legend { color: #a11e22; display: block; font-size: 1.20em; font-weight: bold; margin: 0px 0px 0px 0px; padding: 10px 0px 8px 0px; } label { display: block; font-size: 1.00em; font-weight: bold; margin: 0px 0px 3px 0px; } label.error { color: #6f6f6f; } label em { color: #a11e22; font-weight: bold; font-style: normal; } em.error { display: block; padding: 5px 0px 10px 0px; } input.text, textarea { margin: 0px 0px 0px 0px; width: 300px; } input.error, textarea.error { background: #ffdfdf; border: 1px solid #a11e22; font-weight: normal; padding-top: 3px; padding-bottom: 3px; } input.partial { float: left; margin: 0px 5px 12px 0px; width: 45px; } input.date { float: left; margin: 0px 5px 0px 0px; width: 100px; } input.bttnSubmit { background: transparent url(/images/bttnSubmit.gif) no-repeat 0 0; border: none; cursor: pointer; height: 26px; margin: 0px; padding: 0px; width: 126px; } input.bttnSubmit:hover { background: transparent url(/images/bttnSubmit.gif) no-repeat 0px -26px; } textarea { width: 395px; } div.submit em { color: #a11e22; display: block; font-size: 1.20em; line-height: 1.33em; padding: 3px 0px 34px 44px; } div.submit em.success { background: transparent url(/images/mailsuccess.jpg) no-repeat 0 0; } div.submit em.warning { background: transparent url(/images/mailwarning.jpg) no-repeat 0 0; } /** Header Styles **/ #header { padding: 0px 0px 60px 0px; position: relative; } #header #logo { padding: 84px 0px 0px 18px; } #header ul { height: 60px; left: 0px; position: absolute; top: 0px; width: 519px; } #header ul li { float: left; height: 60px; } #header ul li a { display: block; height: 100%; overflow: hidden; text-indent: -1000em; } #header ul li.navHome a { background: transparent url(/images/mainnavigation.gif) no-repeat 0 0; width: 82px; } #header ul li.navHome a.active { background: transparent url(/images/mainnavigation.gif) no-repeat 0px -120px; } #header ul li.navHome a:hover, #header ul li.navHome a:focus, #header ul li.navHome a:active { background: transparent url(/images/mainnavigation.gif) no-repeat 0px -60px; } #header ul li.navAbout a { background: transparent url(/images/mainnavigation.gif) no-repeat -83px 0px; width: 108px; } #header ul li.navAbout a.active { background: transparent url(/images/mainnavigation.gif) no-repeat -83px -120px; } #header ul li.navAbout a:hover, #header ul li.navAbout a:focus, #header ul li.navAbout a:active { background: transparent url(/images/mainnavigation.gif) no-repeat -83px -60px; } #header ul li.navServices a { background: transparent url(/images/mainnavigation.gif) no-repeat -191px 0px; width: 99px; } #header ul li.navServices a.active { background: transparent url(/images/mainnavigation.gif) no-repeat -191px -120px; } #header ul li.navServices a:hover, #header ul li.navServices a:focus, #header ul li.navServices a:active { background: transparent url(/images/mainnavigation.gif) no-repeat -191px -60px; } #header ul li.navGallery a { background: transparent url(/images/mainnavigation.gif) no-repeat -290px 0px; width: 134px; } #header ul li.navGallery a.active { background: transparent url(/images/mainnavigation.gif) no-repeat -290px -120px; } #header ul li.navGallery a:hover, #header ul li.navGallery a:focus, #header ul li.navGallery a:active { background: transparent url(/images/mainnavigation.gif) no-repeat -290px -60px; } #header ul li.navContact a { background: transparent url(/images/mainnavigation.gif) no-repeat -424px 0px; width: 96px; } #header ul li.navContact a.active { background: transparent url(/images/mainnavigation.gif) no-repeat -424px -120px; } #header ul li.navContact a:hover, #header ul li.navContact a:focus, #header ul li.navContact a:active { background: transparent url(/images/mainnavigation.gif) no-repeat -424px -60px; } /** Main Content Styles **/ #content { border-right: 1px solid #c7787a; float: left; margin: 0px 17px 30px 0px; padding: 0px 17px 10px 0px; position: relative; width: 594px; z-index: 50; } #content h2, #content h3 { margin-top: 25px; } #content ul.defaultList { list-style-type: disc; padding: 0px 0px 0px 20px; margin: 10px 0px 10px 0px; } #content ul.defaultList li { font-size: 1.20em; line-height: 1.33em; margin: 0px 0px 5px 0px; } #content #contact-quickform { margin: 50px 0px 40px 0px; } .noSideBar #content { border: none; float: none; margin: 0px 0px 30px 0px; padding: 0px; width: 950px; } .photogallery #content { border: none; margin: 0px 0px 0px 0px; padding: 0px 10px 100px 0px; width: 310px; } /** Secondary Content Styles **/ #secondary-content { float: left; position: relative; width: 320px; } .photogallery #secondary-content { border-left: 1px solid #c7787a; padding: 5px 0px 0px 32px; width: 590px; } #thumbnails { float: left; position: relative; } #thumbnails img { background: url(/images/ajax-loader.gif) no-repeat 37px 40px; border: 2px solid #c7787a; float: left; margin: 0px 2px 2px 0px; width: 98px; } #thumbnails img:hover { border: 2px solid #a11e22; } #thumbnails span { color: #a11e22; display: block; float: left; margin: 5px 0px 5px 0px; padding: 0px 0px 5px 0px; text-align: right; width: 312px; } .photogallery #secondary-content #thumbnails img { margin: 0px 15px 15px 0px; } #services { padding: 2px 0px 0px 0px; } #services h2 { background: transparent url(/images/hdrFeaturedServices.gif) no-repeat 0 0; height: 14px; margin: 0px 0px 15px 0px; width: 161px; } #services ul { border-top: 1px dotted #c7787a; } #services ul li { border-bottom: 1px dotted #c7787a; } #services ul li a { background: transparent url(/images/serviceslink.gif) no-repeat 0px -43px; display: block; font-size: 1.60em; font-weight: normal; padding: 15px 0px 12px 70px; } #services ul li a:hover { background: transparent url(/images/serviceslink.gif) no-repeat 0px 0px; } #services ul li a span { position: relative; top: -2px; } /** Additional Content Styles **/ #additional-content #thumbnails { width: 497px; } #additional-content #thumbnails img { margin: 0px 15px 15px 0px; } #additional-content #thumbnails span { color: #a11e22; display: block; float: left; text-align: right; width: 451px; } #additional-content #contact-quickform { float: left; padding: 0px 0px 0px 0px; position: relative; width: 453px; } /** Footer Styles **/ #footer { background: transparent url(/images/bgFooter.jpg) repeat-x 0 0; clear: both; padding: 67px 0px 20px 0px; } #footer-container { position: relative; margin: 0px auto; width: 950px; } #footer ul { float: left; position: relative; text-align: left; width: 530px; } #footer ul li { float: left; font-size: 1.10em; margin: 0px 20px 0px 0px; padding: 0px 0px 5px 0px; position: relative; z-index: 50; } #footer p { float: left; font-size: 1.10em; position: relative; text-align: right; width: 420px; } /** Other Page Specific Styles **/ .home #content p { margin: 0px 0px 30px 0px; width: 525px; } .home #content div.featureService { background: transparent url(/images/bgHomepageFeature.jpg) no-repeat bottom left; float: left; margin: 0px 10px 0px 0px; min-height: 230px; position: relative; width: 310px; } .home #content div.last { margin-right: 0px; } .home #content div.featureService h2 { height: 76px; margin: 0px 0px 12px 0px; overflow: hidden; text-indent: -1000em; width: 310px; } .home #content div.featureService h2#hdrWeddings { background: transparent url(/images/hdrWeddingsFeature.jpg) no-repeat 0 0; } .home #content div.featureService h2#hdrFamilies { background: transparent url(/images/hdrFamiliesFeature.jpg) no-repeat 0 0; } .home #content div.featureService h2#hdrSeniors { background: transparent url(/images/hdrSeniorsFeature.jpg) no-repeat 0 0; } .home #content div.featureService p { padding: 0px 30px 0px 17px; width: 263px; } .home #content div.featureService a.bttnLearnMore { background: transparent url(/images/bttnLearnMore.gif) no-repeat 0 0; bottom: 28px; display: block; height: 26px; left: 162px; overflow: hidden; position: absolute; text-indent: -1000em; width: 126px; } .home #content div.featureService a.bttnLearnMore:hover { background: transparent url(/images/bttnLearnMore.gif) no-repeat 0px -26px; } .home h1 { background: transparent url(/images/hdrPhotographerEveryOccasion.gif) no-repeat 0 0; height: 20px; width: 406px; } .about h1 { background: transparent url(/images/hdrAboutAlexOeyPhotography.gif) no-repeat 0 0; height: 20px; width: 313px; } .services h1 { background: transparent url(/images/hdrPhotographyServicesMain.gif) no-repeat 0 0; height: 20px; width: 231px; } .weddings h1 { background: transparent url(/images/hdrWeddingPhotography.gif) no-repeat 0 0; height: 20px; width: 238px; } .families h1 { background: transparent url(/images/hdrFamilyPhotography.gif) no-repeat 0 0; height: 20px; width: 214px; } .seniors h1 { background: transparent url(/images/hdrSeniorPhotography.gif) no-repeat 0 0; height: 20px; width: 359px; } .sportsandevents h1 { background: transparent url(/images/hdrSportsandEventsPhotography.gif) no-repeat 0 0; height: 20px; width: 338px; } .photogallery h1 { background: transparent url(/images/hdrPhotoGallery.gif) no-repeat 0 0; height: 20px; width: 144px; } .contact h1 { background: transparent url(/images/hdrContactAlexOeyPhotography.gif) no-repeat 0 0; height: 20px; width: 329px; } .privacy h1 { background: transparent url(/images/hdrPrivacyandLegal.gif) no-repeat 0 0; height: 20px; width: 186px; } #mainphoto { height: 293px; left: 519px; position: absolute; top: 0px; width: 456px; z-index: 1; } .home #mainphoto { background: transparent url(/images/mainphotofeatureHome.jpg) no-repeat 0 0; height: 360px; } .about #mainphoto { background: transparent url(/images/mainphotofeature2.jpg) no-repeat 0 0; } .services #mainphoto { background: transparent url(/images/mainphotofeature3.jpg) no-repeat 0 0; } .weddings #mainphoto { background: transparent url(/images/mainphotofeatureWeddings.jpg) no-repeat 0 0; } .families #mainphoto { background: transparent url(/images/mainphotofeatureFamilies.jpg) no-repeat 0 0; } .seniors #mainphoto { background: transparent url(/images/mainphotofeatureSeniors.jpg) no-repeat 0 0; } .sportsandevents #mainphoto { background: transparent url(/images/mainphotofeatureSports.jpg) no-repeat 0 0; } .photogallery #mainphoto { background: transparent url(/images/mainphotofeatureGallery.jpg) no-repeat 0 0; } .contact #mainphoto { background: transparent url(/images/mainphotofeatureContact.jpg) no-repeat 0 0; } .privacy #mainphoto { background: transparent url(/images/mainphotofeatureWeddings.jpg) no-repeat 0 0; }