/* #################################################################### */ /* --- | GLOBAL HTML STYLES | ----- */ /* #################################################################### */ * { margin: 0; padding: 0; } body { background: url(/_images/backgrounds/bg_body-wood.gif); color: #58636c; } p { } img { border: 0; } a { color: #57b0c6; } a:hover { } /* #################################################################### */ /* --- | MAIN LAYOUT CONTAINER | --- */ /* #################################################################### */ #container { position: relative; margin: 20px auto !important; width: 805px; background: #fff url(/_images/backgrounds/bg_container-fade.gif) repeat-x bottom; } /* #################################################################### */ /* --- | HEADER AND NAVIGATION LAYOUT | --- */ /* #################################################################### */ #header { background: url(../_images/backgrounds/bg_header.gif) repeat-x; margin-bottom: 8px; } h1 a { position: absolute; top: 20px; left: -15px; display: block; background: url(/_images/logo_miriam-rooney.gif) ; width: 260px; height: 50px; text-indent: -10000px; } h2 { background: url(/_images/backgrounds/bg_h2.gif) repeat-x bottom; margin: 0 10px; padding: 70px 0 6px 0; font: 15px georgia, times, serif; text-transform: uppercase; text-align: right; } /* Main navigational style and layout */ #mainNav { position: absolute; right: 0; top: 12px; width: 240px; background: url(/_images/backgrounds/bg_mainNav.gif); border-bottom: 1px solid #d9d9d9; list-style: none; } #mainNav li { margin: 8px 6px; float: left; } #mainNav li#navAbout a { display: block; background: url(/_images/nav/mainNavAbout.gif) no-repeat 0 0; width: 41px; height: 17px; text-indent: -10000px; } #mainNav li#navContact a { display: block; background: url(/_images/nav/mainNavContact.gif) no-repeat 0 0; width: 51px; height: 17px; text-indent: -10000px; } #mainNav li#navResume a { display: block; background: url(/_images/nav/mainNavResume.gif) no-repeat 0 0; width: 104px; height: 17px; text-indent: -10000px; } #mainNav li#navAbout a:hover { background: url(/_images/nav/mainNavAbout.gif) no-repeat 0 -17px; } #mainNav li#navContact a:hover { background: url(/_images/nav/mainNavContact.gif) no-repeat 0 -17px; } #mainNav li#navResume a:hover { background: url(/_images/nav/mainNavResume.gif) no-repeat 0 -17px; } /* Portfolio navigational style and layout */ #portfolio { float: right; width: 275px; padding-right: 10px; } #portfolioNav { list-style: none; } #portfolioNav ul { list-style: none; padding: 2px 0 10px 0; } /* Subsection navigation styles */ .sectionNav li a { display: block; font: 10px helvetica, arial, sans-serif; text-transform: lowercase; padding: 1px 5px 3px 15px; margin-bottom: 2px; color: #76828b; text-decoration: none; line-height: 13px; } .sectionNav li a:visited { background-color: #e4e9eb; } .sectionNav li a:hover { background: #e1f5fa url(/_images/backgrounds/bg_arrows-portfolio.gif) no-repeat 3px 50%; color: #414a51; } /* Main portfolio section navigation */ #portfolioNav li a.navDegree { display: block; width: 275px; height: 16px; padding: 0; margin-bottom: 2px; text-indent: -10000px; background: url(/_images/nav/nav_degree-project.gif) no-repeat 0 0; line-height: 0; } #portfolioNav li a.navProm { display: block; width: 275px; height: 16px; padding: 0; margin-bottom: 2px; text-indent: -10000px; background: url(/_images/nav/nav_project_prom.gif) no-repeat 0 0; line-height: 0; } #portfolioNav li a.navCFDA2007 { display: block; width: 275px; height: 16px; padding: 0; margin-bottom: 2px; text-indent: -10000px; background: url(/_images/nav/nav_cfda2007.gif) no-repeat 0 0; line-height: 0; } #portfolioNav li a.navCFDA2006 { display: block; width: 275px; height: 16px; padding: 0; margin-bottom: 2px; text-indent: -10000px; background: url(/_images/nav/nav_cfda2006.gif) no-repeat 0 0; line-height: 0; } #portfolioNav li a.navCostume { display: block; width: 275px; height: 16px; padding: 0; margin-bottom: 2px; text-indent: -10000px; background: url(/_images/nav/nav_costume.gif) no-repeat 0 0; line-height: 0; } #portfolioNav li a.navChildrens { display: block; width: 275px; height: 16px; padding: 0; margin-bottom: 2px; text-indent: -10000px; background: url(/_images/nav/nav_childrens.gif) no-repeat 0 0; line-height: 0; } #portfolioNav li a.navPersonal { display: block; width: 275px; height: 16px; padding: 0; margin-bottom: 2px; text-indent: -10000px; background: url(/_images/nav/nav_personal.gif) no-repeat 0 0; line-height: 0; } /* Main portfolio section navigation - Hover States */ #portfolioNav li a.navDegree:hover { background: url(/_images/nav/nav_degree-project.gif) no-repeat 0 -16px; } #portfolioNav li a.navProm:hover { background: url(/_images/nav/nav_project_prom.gif) no-repeat 0 -16px; } #portfolioNav li a.navCFDA2007:hover { background: url(/_images/nav/nav_cfda2007.gif) no-repeat 0 -16px; } #portfolioNav li a.navCFDA2006:hover { background: url(/_images/nav/nav_cfda2006.gif) no-repeat 0 -16px; } #portfolioNav li a.navCostume:hover { background: url(/_images/nav/nav_costume.gif) no-repeat 0 -16px; } #portfolioNav li a.navChildrens:hover { background: url(/_images/nav/nav_childrens.gif) no-repeat 0 -16px; } #portfolioNav li a.navPersonal:hover { background: url(/_images/nav/nav_personal.gif) no-repeat 0 -16px; } /* Menu on state when on portfolio pages */ body#srDegree li a.navDegree { background: url(/_images/nav/nav_degree-project.gif) no-repeat 0 -16px; } body#projectProm li a.navProm { background: url(/_images/nav/nav_project_prom.gif) no-repeat 0 -16px; } body#cfda2007 li a.navCFDA2007 { background: url(/_images/nav/nav_cfda2007.gif) no-repeat 0 -16px; } body#cfda2006 li a.navCFDA2006 { background: url(/_images/nav/nav_cfda2006.gif) no-repeat 0 -16px; } body#costume li a.navCostume { background: url(/_images/nav/nav_costume.gif) no-repeat 0 -16px; } body#childrens li a.navChildrens { background: url(/_images/nav/nav_childrens.gif) no-repeat 0 -16px; } body#personal li a.navPersonal { background: url(/_images/nav/nav_personal.gif) no-repeat 0 -16px; } /* #################################################################### */ /* --- | MAIN PAGE CONTENT AND LAYOUT | --- */ /* #################################################################### */ /* Page and project layout elements */ #bodyContent { width: 500px; margin-left: 10px; } /* Project header title */ h3 { background: url(/_images/backgrounds/bg_h3.gif); text-transform: uppercase; font-size: 11px; padding: 7px 0 5px 8px; margin: 3px 0; border-top: 1px solid #58636c; border-bottom: 1px solid #58636c; } h3 span { font-weight: bold; color: #454545; } /* Project copy */ #bodyCopy { background: #f8f6e5 url(/_images/backgrounds/bg_body-copy.gif) repeat-x bottom; padding: 10px 6px; } #bodyCopy p { font: 11px/16px verdana, arial, sans-serif; margin: 0 8px 10px 8px; } /* Slideshow layouts */ #slideShow { width: 500px; height: 400px; overflow: hidden; list-style: none; background: #fff; } #slideShow a img { display: block; border: 0; } /* #################################################################### */ /* --- | FOOTER LAYOUT AND STYLES | --- */ /* #################################################################### */ /* Layout and link styles */ #footer { clear: both; background:url(/_images/backgrounds/bg_footer.gif) repeat-x; margin: 8px 10px; } #footer p { float: left; padding: 8px 4px; font-size: 11px; } #footer p+p { float: right; } /* Linkback to Unstructure.com */ a.unstructure { display: block; background: url(http://www.unstructure.com/_linkbacks/shortinc/logo-unstructure.gif) no-repeat; width: 111px; height: 8px; text-indent: -10000px; } /* #################################################################### */ /* --- | CSS HACKS AND FIXES | --- */ /* #################################################################### */ /* Clear floats to extent background around floated elements */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } .clearfix { display: block; } /* Hide from IE Mac \*/ * html .clearfix { height:1px; } /* End hide from IE Mac */ /* IE HACK FOR CENTER ALIGN */ * html body {padding-left: 1px;} /* #################################################################### */ /* --- | CSS STYLES FOR LIGHTBOX | --- */ /* #################################################################### */ /* Main Lightbox positioning and styles */ #lightbox { position: absolute; top: 40px; left: 0; width: 100%; z-index: 100; text-align: center; } #lightbox a img { border: none; } #lightboxArray { display: none; } #outerImageContainer { position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; color: inherit; } #imageContainer { padding: 10px; } #loading { position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; } #hoverNav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #imageContainer>#hoverNav { left: 0; } #hoverNav a { outline: none;} /* Previous and Next controls for lightbox image*/ #prevLink, #nextLink { width: 49%; height: 100%; background: transparent url(/_images/blank.gif) no-repeat; display: block; } #prevLink { left: 0; float: left; } #nextLink { right: 0; float: right; } #prevLink:hover, #prevLink:visited:hover { background: url(/_images/01/prevlabel.gif) 0 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(/_images/01/nextlabel.gif) 100% 15% no-repeat; } /* Image description text for lightbox image */ #imageDataContainer { font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; color: inherit; } #imageData { padding:0 10px; } #imageData #imageDetails { width: 70%; float: left; text-align: left; } #imageData #caption { font-weight: bold; } #imageData #numberDisplay { display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose { width: 66px; float: right; padding-bottom: 0.7em; } /* Lightbox overlay for popup transparency */ #overlay { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; color: inherit; }