/*	
	MJMagee.com Layout and Presentation CSS
	Author: M. J. Magee (who else would be poking around in here?)
	Date: 03.08.08
	Version: 2.0
	www.mjmagee.co.uk

	Change Log:
    
    01.10.08 - MM - tweak to fix Safari spacing on thumb hovers
    07.01.09 - MM - amending acronym cursor
	20.05.10 - MM - creating sprites
*/



/* 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, big strong { 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: 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.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: 10px solid #000000; cursor: pointer; }

		
	
/* Header */
	#header { width: 1004px; height: 782px; background: url(../img/backgrounds/content-vines.png) no-repeat 0 0; 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; }
	
	
	
/* Intro */
	#content-container { text-align: left; }
	#intro { width: 535px; min-height: 525px; background: url(../img/backgrounds/content-bg.png) no-repeat bottom; float: left; padding: 5px 20px 9px 20px; position: relative; left: 80px; bottom: 245px; display: block; }
	#intro h1, #sidebar h2 { background: url(../img/titles/header-titles.png) no-repeat; display: block; }
	#intro h1 { width: 534px; height: 136px; background-position: 0 0; }
	#intro p { line-height: 1.4em; margin: 10px 2px 8px 2px; color: #55616b; position: relative; z-index: 20; }
	#intro p acronym { color: #7c8892; }
	#intro p a { color: #7c8892; text-decoration: none; }
	#intro p a:hover { text-decoration: underline; }

	
	
/* Sidebar */
	#sidebar { width: 232px; min-height: 502px; background: url(../img/backgrounds/sidebar-bg.png) no-repeat 0 100%; float: right; margin-right: 60px; padding: 1px 9px 7px 9px; position: relative; bottom: 238px; }
	#sidebar #sidebar-top { width: 250px; height: 7px; background: url(../img/backgrounds/sidebar-bg.png) no-repeat -250px 0; position: absolute; left: 0px; top: -7px; display: block; }
	#sidebar h2 { width: 211px; height: 26px; background-position: 0 -146px; }
	#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 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: -33px; right: -4px; display: block; }
	
	
	
/* Content */
	#content { margin-top: -212px; }
	#intro big#welcome, #wrapper #content h2 { height: 40px; background: url(../img/titles/h2-titles.png) no-repeat; position: relative; display: block; }
	#intro big#welcome { width: 239px; background-position: 0 0; position: absolute; top: -40px; right: -6px; display: block; }
	#wrapper #portfolio-section h2 { width: 229px; background-position: 0 -50px; left: 426px; bottom: 235px; }
	#wrapper #skillsets-section h2 { width: 207px; height: 41px; background-position: 0 -101px; left: 368px; bottom: 232px; }
	#wrapper #projects-section h2 { width: 222px; height: 42px; background-position: 0 -153px; left: 434px; bottom: 236px; }
	#wrapper #tutorials-section h2 { width: 223px; height: 41px; background-position: 0 -254px; left: 368px; bottom: 199px; }
	#wrapper #contact-section h2 { width: 278px; background-position: 0 -204px; left: 368px; bottom: 199px; }

	#content .header { background: url(../img/backgrounds/section-headers.png) no-repeat; position: relative; display: block; }
	#portfolio-section .header { width: 733px; height: 501px; background-position: 0 0; }
	#skillsets-section .header { width: 727px; height: 505px; background-position: 0 -501px; left: 277px; }
	#projects-section .header { width: 731px; height: 501px; background-position: 0 -1006px; }
	#contact-section .header { width: 728px; height: 607px; background-position: 0 -1507px; left: 277px; bottom: 10px; }
	
	.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 { width: 208px; float: right; position: relative; bottom: 206px; }
	#wrapper .left { float: left; bottom: 199px; text-align: right; }
	
	#wrapper .nav big { width: 208px; height: 28px; background: url(../img/titles/navigation.png) no-repeat 0 0; margin-bottom: 12px; display: block; }
	#wrapper .left big { width: 188px; background-position: -20px -28px; }
	#wrapper .nav ul { list-style: none; margin-left: 18px; }
	#wrapper .left ul { margin-left: 69px; text-align: left; }
	#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 .right p { margin-left: 98px; }
	#wrapper .left p { margin-right: 98px; }
	#wrapper .nav p a { color: #000000; text-decoration: none; }
	#wrapper .nav p a:hover { text-decoration: underline; }
	
	
	
/* Portfolio */
	#portfolio-section big { background: url(../img/titles/big-titles.png) no-repeat; display: block; }
	#portfolio-section big#e-scape { width: 409px; height: 35px; background-position: 0 0; margin: 38px 0 18px 0; }
	#portfolio-section big#personal { width: 248px; height: 30px; background-position: 0 -45px; margin: 60px 0 18px 0; }
	
	#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; cursor: pointer; }
	#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 dd div.more-info ul li, #portfolio-section .section dd .more-info-content p { font-size: 1.0em; }
	
	#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, #portfolio-section .section ul.js-enabled li a 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, #portfolio-section .section ul.js-enabled li a 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, #portfolio-section .section ul.js-enabled li a 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 p a { cursor: pointer; }	
		
	#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, #portfolio-section .section dd div.more-info { position: relative; 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 .section { float: right; right: 99px; bottom: 201px; }
	#skillsets-section .section ul { margin: -10px 0 20px 35px; }
	#skillsets-section .section ul li { margin-bottom: 8px; }
	#skillsets-section .section dl, #skillsets-section .section ul { 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 .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 .section { float: right; right: 99px; bottom: 166px; }
	#wrapper #tutorials-section .nav.left { bottom: 164px; }
	
	
	
/* Contact Me */
	#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/content-vines.png) no-repeat -1004px bottom; }
	#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; }