/* MJMagee.com Layout and Presentation CSS Author: M. J. Magee Date: 03.08.08 Version: 1.0 www.mjmagee.co.uk Change Log: 01.10.08 - MM - tweak to fix Safari spacing on thumb hovers 07.01.08 - MM - amending acronym cursor */ /* Standards */ * { margin: 0px; padding: 0px; } body { height: 100%; background: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 62.5%; } a { outline: none; } a img { border: 0px; } span, hr { display: none; } .clear { clear: both; height: 1px; } span.clear { display: block; } acronym { cursor: help; } /* Wrapper */ #wrapper { width: 1004px; background: url(../img/backgrounds/sky-bg.png) repeat-x #eb6f33; margin: 0 auto; text-align: center; position: relative; } #wrapper p { font-size: 1.2em; } .overlay { width: 100%; height: 100%; min-height: 7000px; background: #000000; margin: 0 auto; text-align: center; opacity: 0.5; -moz-opacity: 0.50; filter: alpha(opacity=50); position: absolute; top: 0px; left: 0px; z-index: 100; } #full-image { width: 100%; margin: 0 auto; text-align: center; position: absolute; left: 0px; z-index: 200; } #full-image img { border: 10px solid #000000; } /* Header */ #header { width: 1004px; height: 782px; background: url(../img/backgrounds/top-vines.png) no-repeat; position: relative; z-index: 10; } #header ul { list-style: none; margin: 16px auto 0 auto; text-align: center; } #header ul li { margin: 0 29px; display: inline; } #header ul li a { font-size: 1.2em; color: #555656; text-decoration: none; } #header ul li a:hover { color: #808080; } a#melissa { width: 100%; height: 1px; position: absolute; left: 0px; top: 354px; } #cheshire-cat-head { width: 114px; height: 116px; background: url(../img/backgrounds/cat-head.gif) no-repeat; position: absolute; left: 158px; top: 355px; display: block; z-index: 5; } #cheshire-cat-body { width: 180px; height: 266px; background: url(../img/backgrounds/cat-body.png) no-repeat; position: absolute; left: 63px; top: 415px; display: block; z-index: 3; } /* Content */ #content-container { text-align: left; } #content { width: 535px; min-height: 502px; background: url(../img/backgrounds/content-bg.png) repeat-y; float: left; padding: 5px 20px; position: relative; left: 80px; bottom: 245px; display: block; } #content p#welcome { width: 239px; height: 40px; background: url(../img/titles/welcome.png) no-repeat; margin: 0px; position: absolute; top: -40px; right: -6px; display: block; } #content h1 { width: 534px; height: 136px; background: url(../img/titles/intro.png) no-repeat; display: block; } #content p { line-height: 1.4em; margin: 10px 2px 8px 2px; color: #55616b; position: relative; z-index: 20; } #content p acronym { color: #7c8892; } #content p a { color: #7c8892; text-decoration: none; } #content p a:hover { text-decoration: underline; } #content span.quotation-bottom { width: 82px; height: 59px; background: url(../img/backgrounds/quotation-bottom.png) no-repeat; position: absolute; right: 12px; bottom: 12px; display: block; } #content #content-bottom { width: 575px; height: 4px; background: url(../img/backgrounds/content-bottom.png) no-repeat; position: absolute; left: 0px; bottom: -4px; display: block; } /* Sidebar */ #sidebar { width: 232px; min-height: 502px; background: url(../img/backgrounds/sidebar-bg.png) repeat-y; float: right; margin-right: 60px; padding: 1px 9px 0 9px; position: relative; bottom: 238px; } #sidebar #sidebar-top { width: 250px; height: 7px; background: url(../img/backgrounds/sidebar-top.png) no-repeat; position: absolute; left: 0px; top: -7px; display: block; } #sidebar h2#about-me { width: 211px; height: 26px; background: url(../img/titles/about-me.png) no-repeat; display: block; } #sidebar p { line-height: 1.4em; margin: 13px 5px; color: #55616b; position: relative; display: block; z-index: 20; } #sidebar p a { color: #7c8892; text-decoration: none; } #sidebar p a:hover { text-decoration: underline; } #sidebar p.img { width: 115px; float: left; margin: 16px 10px 10px 5px; } #sidebar #sidebar-bottom { width: 250px; height: 7px; background: url(../img/backgrounds/sidebar-bottom.png) no-repeat; position: absolute; left: 0px; bottom: -7px; display: block; } #sidebar span.negative-space { width: 85px; height: 50px; float: right; display: inline; } #sidebar #frog { width: 138px; height: 89px; background: url(../img/backgrounds/frog.png) no-repeat; position: absolute; bottom: -40px; right: -4px; display: block; } #content-container .content-space-fix { margin-bottom: -212px; } /* Sections */ .section { width: 538px; position: relative; } .section p { margin-bottom: 20px; } .section a { color: #2e2e2e; font-weight: bold; text-decoration: underline; } .section a:hover { color: #3e3e3e; text-decoration: none; } #content-container .space-fix { margin-bottom: -50px; } /* Sidebar Navigation */ #wrapper .nav ul { list-style: none; } #wrapper .nav ul li { margin-bottom: 8px; font-size: 1.2em; } #wrapper .nav ul li a { color: #000000; text-decoration: none; } #wrapper .nav ul li a:hover { text-decoration: underline; } #wrapper .nav ul li.selected a, #wrapper .nav ul li.selected a:hover { font-style: italic; text-decoration: none; } #wrapper .nav p { margin-top: 25px; font-size: 1.0em; } #wrapper .nav p a { color: #000000; text-decoration: none; } #wrapper .nav p a:hover { text-decoration: underline; } #wrapper .nav.right { width: 208px; float: right; position: relative; bottom: 206px; } #wrapper .nav.right h2 { width: 208px; height: 28px; background: url(../img/titles/right-navigation.png) no-repeat; margin-bottom: 12px; display: block; } #wrapper .nav.right ul { margin-left: 18px; } #wrapper .nav.right p { margin-left: 98px; } #wrapper .nav.left { width: 208px; float: left; position: relative; bottom: 199px; text-align: right; } #wrapper .nav.left h2 { width: 188px; height: 28px; background: url(../img/titles/left-navigation.png) no-repeat; margin-bottom: 12px; display: block; } #wrapper .nav.left ul { margin-left: 69px; text-align: left; } #wrapper .nav.left p { margin-right: 98px; } /* Portfolio */ #portfolio-section .header { width: 733px; height: 501px; background: url(../img/backgrounds/portfolio.png) no-repeat; display: block; } #portfolio-section h2#portfolio-title { width: 229px; height: 40px; background: url(../img/titles/portfolio.png) no-repeat; position: relative; left: 426px; bottom: 235px; display: block; } #portfolio-section h2#e-scape { width: 409px; height: 35px; background: url(../img/titles/with-e-scape-interactive.png) no-repeat; margin: 38px 0 18px 0; display: block; } #portfolio-section h2#personal { width: 248px; height: 30px; background: url(../img/titles/personal-work.png) no-repeat; margin: 60px 0 18px 0; display: block; } #portfolio-section h2#image-work { width: 193px; height: 35px; background: url(../img/titles/image-work.png) no-repeat; margin: 60px 0 18px 0; display: block; } #portfolio-section .section { float: left; left: 117px; bottom: 204px; } #portfolio-section .section dl { clear: both; width: 538px; margin-top: 20px; } #portfolio-section .section dl dt { width: 236px; float: right; margin-right: 92px; font-size: 1.5em; color: #000000; font-weight: bold; } #portfolio-section .section dl dd { clear: right; width: 328px; float: right; font-size: 1.2em; } #portfolio-section .section dl dd.url { width: 236px; float: right; margin: 2px 92px 5px 0; text-align: right; font-size: 1.1em; } #portfolio-section .section dl dd.url a { color: #87949f; font-weight: normal; font-style: italic; text-decoration: none; } #portfolio-section .section dl dd.url a:hover { color: #9ba9b4; text-decoration: underline; } #portfolio-section .section dl dd.thumb { width: 185px; float: left; margin-right: 25px; position: relative; bottom: 35px; } #portfolio-section .section dl dd.thumb img { background: url(../img/backgrounds/thumb-bg.png) no-repeat; padding: 5px; } #portfolio-section .section dl dd.more { width: 328px; float: right; margin-top: 18px; text-align: right; } #portfolio-section .section dl dd.more a { color: #000000; font-weight: bold; text-decoration: underline; } #portfolio-section .section dl dd.more a:hover { text-decoration: none; } #portfolio-section .section div.more-info { clear: both; width: 538px; background: url(../img/backgrounds/tab-bg.png) no-repeat; margin-top: 30px; } #portfolio-section .section div.more-info ul { width: 538px; height: 34px; list-style: none; overflow: hidden; } #portfolio-section .section div.more-info ul li { float: left; font-size: 1.2em; } #portfolio-section .section div.more-info ul li a { padding: 10px 18px 10px 16px; color: #87949f; font-weight: normal; text-decoration: none; display: block; } #portfolio-section .section div.more-info ul li a:hover { color: #a0aeba; } #portfolio-section .section div.more-info ul li.selected { background: url(../img/backgrounds/tab-selected-left.png) no-repeat; position: relative; right: 2px; } #portfolio-section .section div.more-info ul li.selected a { background: url(../img/backgrounds/tab-selected-right.png) no-repeat 100% 0%; padding-right: 16px; } #portfolio-section .section .more-info-content { width: 492px; background: url(../img/backgrounds/tab-content-bg.png) repeat-y; padding: 1px 23px 25px 23px; } #portfolio-section .section .more-info-content p { margin-top: 23px; margin-bottom: 0px; font-size: 1.2em; color: #87949f; } #portfolio-section .section .more-info-content p a, #portfolio-section .section .more-info-content p acronym { color: #87949f; } #portfolio-section .section div.more-info .more-info-content ul { width: 422px; height: auto; list-style: disc; margin: 23px 35px; display: block; overflow: visible; } #portfolio-section .section div.more-info .more-info-content ul li { float: none; margin-bottom: 18px; color: #87949f; } #portfolio-section .section .more-info-bottom { width: 538px; height: 4px; background: url(../img/backgrounds/tab-content-bottom.png) no-repeat; display: block; } #portfolio-section .section ul.gallery { width: 733px; list-style: none; } #portfolio-section .section ul.gallery li { float: left; margin: 30px 15px 0 0; } #portfolio-section .section ul.gallery li img { background: url(../img/backgrounds/thumb-bg.png) no-repeat; padding: 5px; } #portfolio-section .section ul.gallery li a { position: relative; } #portfolio-section .section ul.gallery li a:hover span { width: 155px; height: 80px; background: url(../img/backgrounds/thumb-hover.png); position: absolute; bottom: 5px; left: 5px; padding: 10px; font-size: 1.2em; color: #FFFFFF; display: block; } #portfolio-section .section ul.gallery li a:hover span span { width: auto; height: auto; background: transparent; font-size: 0.9em; font-weight: normal; } #portfolio-section .section ul.gallery li a:hover span span br { margin-bottom: 10px; } #portfolio-section .section ul.gallery li p { margin: 8px auto 0 auto; text-align: center; } #portfolio-section .section ul.gallery li div.more-info { position: relative; top: 0px; z-index: 50; } #portfolio-section .section ul.gallery li.first, #portfolio-section .section ul.gallery li.second, #portfolio-section .section ul.gallery li.third { width: 185px; } #portfolio-section .section ul.gallery li.first div.more-info { left: 116px; } #portfolio-section .section ul.gallery li.second div.more-info { left: -85px; } #portfolio-section .section ul.gallery li.third div.more-info { left: -285px; } #portfolio-section .section ul.gallery li div.more-info ul li { width: auto; margin: 0; } #portfolio-section .section ul.gallery li .more-info-content p { margin-top: 23px; text-align: left; } #portfolio-section .section ul.gallery li .more-info-content p strong { font-size: 1.3em; } #portfolio-section .section ul.gallery li .more-info-content p.details { margin-top: 10px; font-size: 1.1em; line-height: 1.4em; } #portfolio-section .section ul.gallery li .more-info-content p span.url { display: inline; } #portfolio-section .section ul.gallery li .more-info-content p span.url a { font-weight: normal; font-style: italic; text-decoration: none; } #portfolio-section .section ul.gallery li .more-info-content p span.url a:hover { text-decoration: underline; } /* Skillsets */ #skillsets-section .header { width: 727px; height: 505px; background: url(../img/backgrounds/skillsets.png) no-repeat; position: relative; left: 277px; display: block; } #skillsets-section h2#skillsets-title { width: 207px; height: 41px; background: url(../img/titles/skillsets.png) no-repeat; position: relative; left: 368px; bottom: 232px; display: block; } #skillsets-section .section { float: right; right: 99px; bottom: 201px; } #skillsets-section .section dl { font-size: 1.2em; } #skillsets-section .section dl dt { font-weight: bold; } #skillsets-section .section dl dd { margin: 0 0 20px 15px; } /* Projects */ #projects-section .header { width: 731px; height: 501px; background: url(../img/backgrounds/projects.png) no-repeat; display: block; } #projects-section h2#projects-title { width: 222px; height: 42px; background: url(../img/titles/projects.png) no-repeat; position: relative; left: 434px; bottom: 236px; display: block; } #projects-section .section { float: left; left: 117px; bottom: 205px; } #projects-section .section p.left { float: left; margin: 0 20px 15px 0; } #projects-section .section p.right { float: right; margin: 0 0 15px 20px; } #projects-section .section p.img img { background: url(../img/backgrounds/thumb-bg.png) no-repeat; padding: 5px; } /* Tutorials */ #tutorials-section .header { width: 728px; height: 607px; background: url(../img/backgrounds/tutorials.png) no-repeat; position: relative; left: 277px; bottom: 10px; display: block; } #tutorials-section h2#tutorials-title { width: 223px; height: 41px; background: url(../img/titles/tutorials.png) no-repeat; position: relative; left: 368px; bottom: 199px; display: block; } #tutorials-section .section { float: right; right: 99px; bottom: 166px; } #wrapper #tutorials-section .nav.left { bottom: 164px; } /* Contact Me */ #contact-section .header { width: 728px; height: 607px; background: url(../img/backgrounds/tutorials.png) no-repeat; position: relative; left: 277px; bottom: 10px; display: block; } #contact-section h2#contact-title { width: 278px; height: 40px; background: url(../img/titles/contact-me.png) no-repeat; position: relative; left: 368px; bottom: 199px; display: block; } #contact-section .section { float: right; right: 99px; bottom: 166px; } #wrapper #contact-section .nav.left { bottom: 164px; } /* Footer */ #footer-wrapper { width: 1004px; height: 760px; background: url(../img/backgrounds/bottom-bg.png) repeat-x bottom; margin: -76px auto 0 auto; text-align: center; position: relative; } #footer { width: 1004px; height: 757px; background: url(../img/backgrounds/bottom-vines.png) no-repeat top; } #footer ul { list-style: none; position: absolute; left: 35px; bottom: 55px; } #footer ul li { background: url(../img/backgrounds/footer-div.png) no-repeat right; padding: 0 15px; font-size: 1.2em; display: inline; } #footer ul li a { color: #555656; text-decoration: none; } #footer ul li a:hover { color: #808080; } #footer ul li.last-item { background: none; padding-right: 15px; } #footer p { font-size: 1.0em; color: #555656; position: absolute; left: 50px; bottom: 30px; } #footer strong { width: 141px; height: 17px; background: url(../img/titles/mjmagee.png) no-repeat; position: absolute; right: 50px; bottom: 30px; display: block; }