/* MJMagee.com Layout and Presentation CSS Author: M. J. Magee (who else would be poking around in here?) Date: 29.05.10 Version: 1.0 www.mjmagee.co.uk Change Log: */ /* Standards */ * { margin: 0px; padding: 0px; } body { min-width: 1004px; background: url(../img/backgrounds/content_pattern-bg.jpg) #f5f5ea; font-family: Frutiger, "Frutiger Linotype", "Frutiger LT Std", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 62.5%; } a { color: #610d29; font-style: italic; text-decoration: none; outline: none; } a:hover { color: #350213; text-decoration: underline; } a img { border: 0px; } big, span, hr { display: none; } .clear { clear: both; height: 1px; display: block; } .left { float: left; } .right { float: right; } ::-moz-selection { background: #e182a1; color: #FFFFFF; } ::selection { background: #e182a1; color: #FFFFFF; } /* Wrapper */ #shadows { width: 100%; min-width: 1004px; height: 100%; background: url(../img/backgrounds/content_shadows.png) repeat-y 50% 0%; text-align: center; display: block; } .wrapper { width: 924px; margin: 0 auto; padding: 36px 40px 0 40px; text-align: left; } .content { width: 620px; position: relative; } .content h1 { width: 621px; height: 203px; background: url(../img/backgrounds/content_titles.png) no-repeat 0 0; margin-bottom: 15px; } .content p, .content li { text-align: justify; font-size: 1.5em; color: #88775d; } .content p { margin-bottom: 1.0em; } .content acronym { background: url(../img/backgrounds/content_help-icon.png) no-repeat 100% 3px; position: relative; padding-right: 14px; color: #655843; font-style: italic; border: 0px; cursor: help; } .content acronym span.hover { width: 11px; height: 11px; background: url(../img/backgrounds/content_help-icon.png) no-repeat; position: absolute; top: 0px; right: 0px; display: block; } .content acronym:hover, .content acronym span.hover { background-position: 100% -43px; color: #463d2f; } #overlay { width: 100%; height: 100%; min-height: 100%; background: none; margin: 0 auto; text-align: center; position: absolute; top: 0px; left: 0px; z-index: 0; } #overlay.visible { background: url(../img/backgrounds/content_overlay-bg.png); z-index: 800; } #full-image { width: 100%; margin: 0 auto; text-align: center; position: absolute; left: 0px; z-index: 1000; } #full-image img { border: 3px solid #88775d; cursor: pointer; } #portfolio { width: 100%; background: url(../img/backgrounds/content_paper-bg.jpg) repeat; position: relative; margin: 40px auto 0 auto; } #portfolio a#web-design-portfolio, #portfolio .bottom { width: 100%; height: 105px; background: url(../img/backgrounds/content_paper-edges.jpg) repeat-x 0 0; position: absolute; top: 0px; left: 0px; display: block; cursor: default; z-index: 1; } #portfolio .wrapper { margin-bottom: -200px; } #portfolio .bottom { height: 199px; background-position: 0 -105px; position: static; } #portfolio h2, dl { width: 620px; position: relative; z-index: 100; } #portfolio h2 { width: 266px; height: 55px; background: url(../img/backgrounds/content_titles.png) no-repeat 0 -203px; margin: 3px 0 25px 0; display: block; } #portfolio dl { clear: both; width: 624px; position: relative; right: 2px; } #portfolio dl dt { position: absolute; top: 323px; right: 2px; font-size: 3.0em; letter-spacing: -1px; z-index: 20; } #portfolio dl dt a { color: #822342; font-style: normal; text-decoration: none; } #portfolio dl dt a:hover { background: url(../img/backgrounds/content_dotted-line-bg.png) repeat-x bottom; padding-bottom: 4px; color: #631830; } #portfolio dl dd { width: 624px; } #portfolio dl dd p { width: 405px; float: right; margin-top: 9px; margin-right: 2px; text-align: right; font-size: 1.2em; color: #f9f7ef; font-style: italic; line-height: 1.4em; } #portfolio dl dd p a { color: #FFFFFF; font-style: normal; font-weight: bold; } #portfolio dl dd p a:hover { color: #f5f2e5; } #portfolio dl dd ul { width: 200px; list-style: none; float: left; margin: 10px 0 0 9px; } #portfolio dl dd ul li { background: url(../img/backgrounds/content_bullets.png) no-repeat 0 3px; margin-bottom: 4px; padding-left: 15px; font-size: 1.1em; color: #822342; } #portfolio dl dd.image { height: 344px; background: url(../img/backgrounds/content_divider.png) repeat-x bottom; position: relative; padding-bottom: 25px; } #portfolio dl dd.image a { position: absolute; top: 0px; left: 0px; } #portfolio dl dd.image a span { width: 620px; height: 344px; background: url(../img/backgrounds/content_thumbnail-frame.png) no-repeat; position: absolute; top: 0px; left: 2px; display: block; z-index: 10; cursor: pointer; } #portfolio dl dd.image a:hover span { background-position: 0 -344px; } #portfolio dl dd.image img { margin-left: 2px; } #portfolio dl dd.back { width: auto; position: absolute; top: 342px; left: 2px; z-index: 30; } #portfolio dl dd.back a { min-height: 20px; background: url(../img/backgrounds/content_arrows.png) no-repeat 0 4px; float: left; margin-right: 10px; padding-top: 4px; padding-left: 13px; font-size: 1.0em; color: #822342; font-style: normal; display: block; } #portfolio dl dd.back a:hover { background-position: 0 2px; color: #531428; } #portfolio dl dd.back a.forth { background-position: 0 -46px; } #portfolio dl dd.back a.forth:hover { background-position: 0 -44px; } #portfolio dl dd.url { clear: both; width: 310px; float: left; padding-top: 9px; padding-left: 2px; font-size: 1.5em; color: #610d29; font-weight: bold; } #portfolio dl dd.url a { color: #610d29; font-weight: bold; } #portfolio dl dd.url a:hover { color: #46091e } #portfolio dl dd.date { width: 310px; float: right; padding: 13px 2px 60px 0; text-align: right; font-size: 1.1em; color: #822342; } #about-mell { padding-bottom: 55px; } #about-mell h2 { width: 327px; height: 84px; background: url(../img/backgrounds/content_titles.png) no-repeat -294px -205px; float: right; margin-top: -2px; } #about-mell #polaroids { width: 299px; height: 564px; background: url(../img/backgrounds/content_polaroids.png) no-repeat; position: relative; bottom: 79px; right: 8%; float: left; margin-right: -4%; margin-bottom: -300px; display: block; } #about-mell #polaroids img { display: none; } #about-mell p { clear: right; padding-top: 35px; } #about-mell blockquote { width: 460px; padding-left: 160px; display: block; } #about-mell blockquote p { margin: 0 0 8px 0; padding: 0px; font-size: 2.6em; color: #726651; } #about-mell blockquote ul { list-style: none; margin-left: 10px; } #about-mell blockquote ul li { background: url(../img/backgrounds/content_bullets.png) no-repeat 0 -992px; margin-bottom: 6px; padding-left: 15px; line-height: normal; } #about-mell blockquote ul li ul { margin-bottom: 12px; } #about-mell blockquote ul li ul li { background-position: 0 -493px; margin-bottom: 0px; padding-left: 14px; font-size: 1.0em; } #about-mell blockquote ul.left, #about-mell blockquote ul.right { width: 210px; } #about-mell blockquote .clear { height: 45px; } /* Navigation */ #navigation { width: 308px; position: fixed; top: 30px; left: 68%; z-index: 500; } #navigation.absolute { position: relative; top: auto; left: 0px; float: right; } #navigation ul { width: 100%; height: 27px; list-style: none; } #navigation ul li { height: 27px; float: left; margin-right: 14px; } #navigation ul li a { height: 27px; background: url(../img/backgrounds/header_buttons.png) no-repeat; display: block; } #navigation ul li a span.hover { width: 100%; height: 27px; background: url(../img/backgrounds/header_buttons.png) no-repeat; display: block; cursor: pointer; } #navigation ul li#nav-portfolio a { width: 91px; background-position: 0 0; } #navigation ul li#nav-portfolio a:hover, #navigation ul li#nav-portfolio a:focus, #navigation ul li#nav-portfolio a span.hover { background-position: 0 -27px; } #navigation ul li#nav-portfolio a.selected { background-position: 0 -54px; } #navigation ul li#nav-about-me a { width: 88px; background-position: -91px 0; } #navigation ul li#nav-about-me a:hover, #navigation ul li#nav-about-me a:focus, #navigation ul li#nav-about-me a span.hover { background-position: -91px -27px; } #navigation ul li#nav-about-me a.selected { background-position: -91px -54px; } #navigation ul li#nav-resume a { width: 74px; background-position: -179px 0; } #navigation ul li#nav-resume a:hover, #navigation ul li#nav-resume a:focus, #navigation ul li#nav-resume a span.hover { background-position: -179px -27px; } #navigation form { clear: both; margin-top: 15px; display: block; } #navigation fieldset { width: 308px; position: relative; text-align: left; border: 0px; } #navigation fieldset legend { width: 90px; position: absolute; top: 0px; left: 0px; font-size: 1.2em; color: #57472e; font-weight: bold; text-transform: uppercase; line-height: 0.8em; overflow: hidden; } #navigation fieldset dl { width: 186px; position: absolute; top: 0px; left: 95px; font-size: 1.2em; color: #655843; } #navigation fieldset dl dd { width: 186px; background: url(../img/backgrounds/header_textfield-bottom.png) no-repeat 0 100%; position: relative; margin-bottom: 10px; padding-bottom: 15px; } #navigation fieldset dl dd.textfield { width: 119px; background-position: -187px 100%; float: left; padding-bottom: 5px; } #navigation fieldset dl dd label { position: absolute; bottom: 6px; left: -95px; } #navigation fieldset dl dd.textfield label { bottom: 5px; } #navigation fieldset dl dd.no-input label { left: 10px; } #navigation fieldset dl dd textarea, #navigation fieldset dl dd input { background: url(../img/backgrounds/header_textfield-bg.png) no-repeat; margin-bottom: -5px; padding: 10px 9px 0 9px; font-family: Frutiger, "Frutiger Linotype", "Frutiger LT Std", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.0em; color: #655843; vertical-align: bottom; border: 0px; outline: none; } #navigation fieldset dl dd textarea { width: 168px; height: 6.0em; scrollbar-base-color: #eae9dd; } #navigation fieldset dl dd input { width: 101px; background-position: -187px 0; margin-bottom: 0px; } #navigation fieldset dl dd.button { width: 57px; background: none; position: relative; float: left; margin-left: 10px; padding: 0px; } #navigation fieldset dl dd.button button { width: 57px; height: 27px; background: url(../img/backgrounds/header_buttons.png) no-repeat -253px 0 transparent; border: 0px; display: block; cursor: pointer; } #navigation fieldset dl dd.button button span.hover { width: 57px; height: 27px; background: url(../img/backgrounds/header_buttons.png) no-repeat; position: absolute; top: 0px; left: 0px; display: block; } #navigation fieldset dl dd.button button:hover, #navigation fieldset dl dd.button button:focus, #navigation fieldset dl dd.button button span.hover { background-position: -253px -27px; } #navigation fieldset dl dd.error { clear: both; width: 200px; background: none; float: none; bottom: auto; top: 25px; right: 95px; font-size: 0.9em; color: #4d0b23; } #navigation fieldset dl dd.full { clear: both; width: 200px; background: none; bottom: auto; top: 25px; right: 95px; } #navigation fieldset ul { height: 16px; padding-top: 2.0em; } #navigation fieldset ul li { height: 16px; margin-right: 6px; } #navigation fieldset ul li a , #navigation fieldset ul li a span.hover{ width: 16px; height: 16px; background: url(../img/backgrounds/header_social-icons.png) no-repeat; } #navigation fieldset ul li#linked-in a { background-position: 0 0; } #navigation fieldset ul li#linked-in a:hover, #navigation fieldset ul li#linked-in a span.hover { background-position: 0 -16px; } #navigation fieldset ul li#deviant-art a { background-position: -16px 0; } #navigation fieldset ul li#deviant-art a:hover, #navigation fieldset ul li#deviant-art a span.hover { background-position: -16px -16px; } #navigation fieldset ul li#delicious a { background-position: -32px 0; } #navigation fieldset ul li#delicious a:hover, #navigation fieldset ul li#delicious a span.hover { background-position: -32px -16px; } #navigation fieldset ul li#twitter a { background-position: -48px 0; } #navigation fieldset ul li#twitter a:hover, #navigation fieldset ul li#twitter a span.hover { background-position: -48px -16px; } #navigation fieldset p { width: 110px; height: 21px; background: url(../img/backgrounds/header_title-you-should.png) no-repeat; position: absolute; top: 14.0em; left: 195px; } #previous-design { width: 187px; height: 117px; position: fixed; top: 27.5em; right: 0px; z-index: 500; } #previous-design.hidden { display: none; } #previous-design a { width: 187px; height: 117px; background: url(../img/backgrounds/sidebar_previous-design.png) no-repeat; display: block; cursor: pointer; } #previous-design a:hover { background-position: 0 -119px; } /* Footer */ #footer { width: 100%; background: url(../img/backgrounds/content_footer-bg.jpg) repeat-x; padding: 23px 0 20px 0; text-align: left; font-size: 1.5em; color: #261b0a; } #footer p { width: 924px; margin: 0 auto; text-align: center; } #footer p strong { float: left; font-weight: normal; text-shadow: 0 1px 1px #80634c; display: block; } #footer p a { min-height: 20px; background: url(../img/backgrounds/content_arrows.png) no-repeat 0 -98px; position: relative; float: right; padding-top: 1px; padding-left: 18px; color: #261b0a; font-style: normal; text-shadow: 0 1px 1px #80634c; display: block; z-index: 100; } #footer p a:hover { background-position: 0 -100px; color: #100b04; text-decoration: underline; } /* Tooltips */ #tooltip { width: 205px; background: url(../img/backgrounds/content_tooltip-bg.png) no-repeat; position: absolute; top: 0px; left: 0px; padding: 30px 20px 0 20px; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; display: none; z-index: 1000; } #tooltip p { font-size: 1.4em; color: #f5f5ea; filter: alpha(opacity=100); -moz-opacity: 1.0; -khtml-opacity: 1.0; opacity: 1.0; } #tooltip-bottom { width: 275px; height: 10px; background: url(../img/backgrounds/content_tooltip-bg.png) no-repeat 0 100%; position: relative; top: 10px; right: 20px; display: block; } #tooltip.visible { display: block; }