@CHARSET "ISO-8859-1";

#lightbox-image-details-caption { text-transform: capitalize; }

/* Hide our accessibility options */
.nocss { display: none; }

body {
    background-color: #252a2d;
    margin-top: 19px;
    color: #fff;
    font-family: "Trebuchet MS", Helvetica, Jamrul, sans-serif;
}

div.clear {
    clear: both;
    font-size: 0.1em;
    line-height: 0.1em;
}

body div#canvas {
	width: 992px;
	border: 2px solid #fff;
	margin: 0 auto;
    background: #445b68 url('../images/body-bg.png') repeat-x scroll 0 200px;
}

body div#canvas div#head h1 {
    height: 180px;
    background: transparent url('../images/michael.png') no-repeat scroll bottom right;
}

body div#footer {
    padding: 5px;
    height: 50px;
    color: #3c4d55;
    width: 992px;
    margin: 0 auto;
    font-size: 0.8em;
    font-weight: bold;
    text-align: right;
}

body div#footer span a {
    color: #3c4d55;
}
body div#footer span a:hover {
    text-decoration: underline;
}

body div#signature {
	text-align: right;
	padding-top: 150px;
}


/*
 * ----------------------------------------------------------------------------
 * Navigation Menu
 * ----------------------------------------------------------------------------
 */
div#nav {
    height: 20px;
    background-color: #536974;
    border-top: 1px solid #f6f7f7;
    border-bottom: 1px solid #f6f7f7;
}

ul#menu {
    line-height: 1.0;
    margin-left: 117px;
}

ul#menu ul {
    position: absolute;
    top: -999em;
    width: 9em; /* left offset of submenus need to match */
}

ul#menu ul li {
    width: 100%;
}

ul#menu li:hover {
    visibility: inherit; /* Addresses IE7 'sticky' bug */
}

   /* Color & font Styles */
ul#menu li {
    font-weight: bold;
    font-size: 0.9em;
    float: left;
    position: relative;
}

    /* Normal State */
ul#menu a,
ul#menu li.currentTop ul li a,
ul#menu li.currentTopLast ul li a {
    color: #a7b3b8;
}

ul#menu a {
    display: block;
    position: relative;
    text-decoration: none;
    text-align: center;
    width: 125px;
    padding-top: 3px;
    height: 17px;
    border-left: 1px solid #d9dde0;
}

ul#menu li ul li a {
    background-color: #536974;
    border-top: 1px solid #d9dde0;
    border-left: 1px solid #d9dde0;
    border-right: 1px solid #d9dde0;
    text-align: center;
    width: 125px;
    margin: 0;
}

    /* Current/Last/Hover states */
ul#menu li.currentTop a,
ul#menu li.currentTopLast a,
ul#menu li.currentTop ul li.currentSub a,
ul#menu li.currentTop ul li.currentSubLast a,
ul#menu li.currentTopLast ul li.currentSub a,
ul#menu li.currentTopLast ul li.currentSubLast a {
        color: #3c4d55;
}

ul#menu li.currentTopLast a,
ul#menu li.TopLast a {
    border-right: 1px solid #d9dde0;
}

ul#menu li ul li.SubLast a,
ul#menu li ul li.currentSubLast a {
    border-bottom: 1px solid #d9dde0;
}

ul#menu a:hover, 
ul#menu li.currentTop a:hover, 
ul#menu li.currentTopLast a:hover,
ul#menu li.currentTop ul li.currentSub a:hover, 
ul#menu li.currentTop ul li.currentSubLast a:hover,
ul#menu li.currentTopLast ul li.currentSub a:hover, 
ul#menu li.currentTopLast ul li.currentSubLast a:hover {
            color: #fff;
}
    /* /Color & font styles */

ul#menu li:hover ul, ul#menu li.sfHover ul {
    left: 0;
    top: 20px; /* match height of top element */
    z-index: 99;
}

ul#menu li:hover li ul, ul#menu li.sfHover li ul {
    top: -999em;
}

ul#menu li li:hover ul, ul#menu li li.sfHover ul {
    left: 9em; /* match ul width */
    top: 0;
}

ul#menu li li:hover li ul, ul#menu li li.sfHover li ul {
    top: -999em;
}

ul#menu li li li:hover ul, ul#menu li li li.sfHover ul {
    left: 9em; /* match ul width */
    top: 0;
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
    background: url('../images/shadow.png') no-repeat bottom right;
    padding: 0 8px 9px 0;
    -moz-border-radius-bottomleft: 17px;
    -moz-border-radius-topright: 17px;
    -webkit-border-top-right-radius: 17px;
    -webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
    background: transparent;
}

/* /#Main Nav */
 
 
 
/*
 * ----------------------------------------------------------------------------
 * PER PAGE CONTENT STYLES
 * ----------------------------------------------------------------------------
 */
 
/* HOME PAGE */
body#home div#canvas div#content {
	text-align: center;
}

body#home div#canvas div#head {
    background: transparent url('../images/rabbit-topbg.jpg') no-repeat top left;
}

body#home div#content p {
    background-color: #81919a;
    padding: 133px 180px;
    color: #445c68;
    border-bottom: 1px solid #d4d9dc;
    font-weight: bold;
    text-align: left;
}


/*
 * REEL PAGE
 */
body#reel div#canvas div#head {
    background: transparent url('../images/reel-topbg.jpg') no-repeat top left;
}

body#reel div#reelList {
    background-color: #252a2d;
    border-bottom: 1px solid #ced2d4;
    padding-top: 53px;
    padding-bottom: 80px;
}

body#reel div#reelList h2 {
    text-indent: -9999px;
    height: 27px;
}

body#reel div#reelList h2.anim {
	background: transparent url('../images/animation_title.jpg') no-repeat 0 0;
	width: 212px;
	margin-left: 520px;
	display: none;
}

body#reel div#reelList h2.vfx {
	background: transparent url('../images/vfx_title.jpg') no-repeat 0 0 ;
	width: 125px;
	margin-left: 607px;
	display: none;
}

body#reel div#reelsContainer {
	position: relative;
	margin: 0 auto;
	width: 465px;
	height: 149px;
	border: 4px solid #777;
}

body#reel div#reelsContainer ul {
	background: transparent url('../images/reel-nav-bg.jpg') no-repeat 0 0;
    width: 177px;
    height: 149px;
    padding-left: 4px;
}

body#reel div#reelsContainer ul li {
    width: 177px;
    font-size: 85%;
    line-height: 1.2em;
    font-weight: bold;
    padding-top: 4px;
}

body#reel div#reelsContainer ul li.bumped {
	padding-top: 10px;
}

body#reel div#reelsContainer ul li a {
    color: #777;
}

body#reel div#reelsContainer ul li a:hover {
	color: #fff;
}

body#reel div#reelsContainer img.movieThumb {
    position: absolute;
    top: 0;
    right: 0;
    width: 285px;
    height: 149px;
    border-left: 3px solid #777;
}

/*
 * RESUME PAGE
 */
body#resume div#canvas div#head {
    background: transparent url('../images/resume-topbg.jpg') no-repeat top left;
}

body#resume div#content div#res {
    margin: 15px 30px 0 30px;
    border: 2px solid #000;
    background: transparent url('../images/resume-bg.jpg') repeat top left;
    color: #000;
}

body#resume table thead h1 {
    padding-top: 10px;
    font-size: 1.8em;
}

body#resume table p.email {
    padding-bottom: 20px;
}

body#resume table tr td {
    padding: 5px;
    vertical-align: middle;
    border: 2px solid #232421;
}

body#resume table tr td h2 {
    font-size: 1.2em;
    width: 175px;
}

body#resume table tbody dl {
    clear: both;
    padding: 10px;
}

body#resume table tbody dl dt, 
body#resume table tbody dl dd {
    float: left;
}

body#resume table tbody dl dt {
    width: 500px;
}
body#resume table tbody dl dd {
    width: 200px;
}
body#resume table div.clear {
    padding: 5px;
}

body#resume table td.exp ul {
    display: block;
    position: relative;
    padding-bottom: 30px;
}

body#resume table td.exp ul li {
    padding: 3px 0;
    margin-left: 20px;
    list-style: square outside;
}

body#resume table td.exp ul li.company {
    list-style: none;
    margin: 0;
}

body#resume table td.exp ul li.company ul {
    display: block;
    position: relative;
    width: 700px;
    padding-bottom: 0;
}

body#resume table td.exp ul li.company ul li {
    float: left;
    width: 233px;
    padding: 0;
    margin: 0;
    list-style: none;
}

body#resume table td.exp ul li.title {
    clear: both;
    font-weight: bold;
    list-style: none;
    margin: 0;
}

body#resume table td.exp ul.hasCredits {
	padding-bottom: 15px;
}

body#resume table td.exp ul.filmCredits {
	margin-left: 40px;
}

body#resume table td.exp ul.filmCredits li {
	list-style: disc outside;
}

body#resume table td.exp ul.filmCredits li.c_title {
    list-style: none;
    font-weight: bold;
}

body#resume table ul.skills li,
body#resume table ul.fluent li {
    padding: 3px 0 5px 8px;
    height: 18px;
    float: left;
    width: 233px;
}

body#resume div.download {
	padding: 15px 40px 0 0;
	text-align: right;
	color: #ccc;
}

body#resume div.download a {
	color: #fff;
}
body#resume div.download a:hover {
	color: orange;
}


/*
 * ANIMATION PAGE
 */
body#animation div#canvas div#head {
    background: transparent url('../images/animation-topbg.jpg') no-repeat top left;
}

body#animation table {
    background-color: #252a2d;
    border-bottom: 1px solid #d4d9dc;
    font-weight: bold;
    text-align: center;
    color: #445c68;
	height: 316px;
	width: 100%;
}

body#animation table tr td {
	padding-top: 20px;
	vertical-align: middle;
	text-align: center;
}


/* Animation Lists */
body#animation h1#clipListH1 {
    padding: 40px 60px 10px 60px;
    letter-spacing: -2px;
    font-weight: normal;
    font-size: 1.8em;
}

body#animation div#clipListContainer {
    margin: 0 100px;
}

body#animation div.clipBox {
    position: relative;
    padding-top: 45px;
}

body#animation div#clipListContainer a {
    float: left;
    border: none;
    width: 181px;
    height: 107px;
    text-align: center;
    background-color: #000;
    padding: 2px;
}

body#animation div#clipListContainer a img {
    border: 3px solid #424242;
    width: 175px;
    height: 101px;
}

body#animation div#clipListContainer a:hover {
    padding: 1px;
    border: 1px solid #fff;
}

body#animation div#clipListContainer a:hover img {
    border: 3px solid #fff;
}

body#animation div#clipListContainer dl {
    float: left;
    height: 110px;
    width: 570px;
    padding-left: 30px;
    position: relative;
}

body#animation div#clipListContainer dt,
body#animation div#clipListContainer dd {
    float: left;
    padding: 5px;
}

body#animation div#clipListContainer dt {
    text-align: right;
    width: 70px;
    color: #B3B89A;
}

body#animation div#clipListContainer dd.clipTitle {
    width: 340px;
}

body#animation div#clipListContainer dd.clipYear {
    width: 50px;
}

body#animation div#clipListContainer dt.clipDescDT {
    height: 50px;
}

body#animation div#clipListContainer dd.clipDescDD {
    width: 480px;
    height: 50px;
}



/*
 * ARTWORK PAGE
 */
body#artwork div#canvas div#head {
    background: transparent url('../images/artwork-topbg.jpg') no-repeat top left;
}

body#artwork div#canvas div#content {
    text-align: center;
}

body#artwork div#artOptions {
    background-color: #252a2d;
    color: #445c68;
    border-bottom: 1px solid #d4d9dc;
    font-weight: bold;
}

body#artwork div#art-hovers {
	position: relative;
	height: 315px;
}

body#artwork div#art-hovers div#twodlink {
    position: absolute;
    top: 92px;
    left: 241px;
    height: 130px;
    width: 130px;
    text-align: right;
}

body#artwork div#art-hovers div#art-center {
    position: absolute;
    top: 137px;
    left: 475px; 
    height: 41px;
    width: 41px;
}

body#artwork div#art-hovers div#threedlink {
    position: absolute;
    top: 77px;
    left: 604px;
    height: 161px;
    width: 161px;
    text-align: left;
}

body#artwork div#art-hovers img {
    position: absolute;
    top: 0;
    left: 0;
}

body#artwork div#art-hovers div#twodlink img {
    position: absolute;
    top: 0;
    right: 0;
}

/* 2D Artwork Gallery */
body#artwork h1.twodh1 {
    padding: 30px 60px;
    letter-spacing: -2px;
    font-weight: normal;
    font-size: 1.8em;
    text-align: left;
}

body#artwork div#twdcontainer {
    margin: 30px auto 0 auto;
    width: 820px;
    padding-left: 20px;
}

body#artwork div#twdcontainer a {
    display: inline-block;
    border: none;
    width: 132px;
    height: 107px;
    text-align: center;
    margin: 0 20px 30px 35px;
    background-color: #000;
    padding: 2px;
}

body#artwork div#twdcontainer a img {
    border: 3px solid #424242;
    width: 126px;
    height: 101px;
}

body#artwork div#twdcontainer a:hover {
    padding: 1px;
    border: 1px solid #fff;
}

body#artwork div#twdcontainer a:hover img {
    border: 3px solid #fff;
}

/* 3D Artwork Gallery */
body#artwork div#threeDartwork h1 {
    padding: 30px 60px 10px 60px;
    letter-spacing: -2px;
    font-weight: normal;
    font-size: 1.8em;
    text-align: left;
}

body#artwork div.worksBox {
    margin: 0 50px 0 150px;
    position: relative;
    padding-top: 45px;
}

body#artwork div.worksBox a {
    float: left;
    border: none;
    width: 131px;
    height: 107px;
    text-align: center;
    background-color: #000;
    padding: 2px;
}

body#artwork div.worksBox a img {
    border: 3px solid #424242;
    width: 125px;
    height: 101px;
}

body#artwork div.worksBox a:hover {
    padding: 1px;
    border: 1px solid #fff;
}

body#artwork div.worksBox a:hover img {
    border: 3px solid #fff;
}

body#artwork div.worksBox dl {
    float: left;
    height: 110px;
    width: 600px;
    padding-left: 30px;
    position: relative;
}

body#artwork div.worksBox dt,
body#artwork div.worksBox dd {
    float: left;
    padding: 5px;
    text-align: left;
}

body#artwork div.worksBox dt {
    text-align: right;
    width: 70px;
    color: #B3B89A;
}

body#artwork div.worksBox dd.workTitle {
    width: 500px;
}

body#artwork div.worksBox dt.workDescDT {
    height: 70px;
}

body#artwork div.worksBox dd.workDescDD {
    width: 500px;
    height: 70px;
}

div#show3dArtwork {
    position: relative;
    background-color: transparent;
}

div#show3dArtwork object,
div#show3dArtwork embed {
    position: absolute;
    top: 0;
    left: 0;
}


/*
 * ABOUT PAGE
 */
body#about div#canvas div#head {
    background: transparent url('../images/about-topbg.jpg') no-repeat top left;
}

body#about div#aboutContainer {
	position: relative;
	padding-bottom: 25px;
}

body#about div#aboutContainer img.about {
    position: absolute;
    top: 64px;
    left: 74px;
}

body#about div#aboutContainer p {
    color: #7092a4;
    padding: 25px 69px 0 400px;
}

body#about div#aboutContainer p.first {
    padding-top: 70px;
}

body#about div#signature {
	padding-top: 0;
}


/*
 * CONTACT PAGE
 */
body#contact div#canvas div#head {
    background: transparent url('../images/contact-topbg.jpg') no-repeat top left;
}

body#contact div#canvas {
    background: #445b68 url('../images/contact-bodybg.jpg') no-repeat scroll 0 202px;
}

body#contact div#contactContainer {
	padding: 180px 0 160px 302px;
}

body#contact div#canvas div#content div#contact-box {
    width: 390px;
    height: 156px;
    background-color: #4e5a5f;
    border: 2px solid #000;
}

body#contact div#canvas div#content div#contact-box h2 {
    text-indent: -9999px;
    background: transparent url('../images/contact-me.png') no-repeat top center;
    height: 16px;
    margin-top: 40px;
}

body#contact div#canvas div#content div#contact-box h3 a {
    display: block;
    text-indent: -9999px;
    background: transparent url('../images/mike-email.png') no-repeat top center;
    height: 34px;
    margin-top: 30px;
}

body#contact div#signature {
    padding-top: 0;
}