/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
body {line-height:1;}
ol, ul {list-style:none;}
:focus {outline:0;}

/*
**	Marco Aslan Portfolio
**	Description: Portfolio with the most recent work from filmmaker Marco Aslan.
**	Author: Pedro Ivo Hudson
**	Author URI: http://pedroivo.com/
**	Created: April, 2009
**	Updated: March, 2010
*/

html, body {background:#1E1E1E url(bg-body.png) repeat;}
body {background:url(bg-header.png) repeat-x;}

/***** Miscellaneous *****/
hr, h2 {display:none;}
h1, h3, h4, h5, h6, #menu li a, #nav li, .highslide-loading, .closebutton, .email span, .phone span, .vimeo-profile a, .printable-version a, .by-pedroivo a {text-indent:-9999px;}
p, li {font-family:Georgia, "Times New Roman", Times, serif; font-size:20px; color:#777;}
em {color:#444;}

/***** Links *****/
a {color:#777;}
em a {color:#444;}
a:hover, a:focus {color:#999;}

/***** Header *****/
#header {
	width:770px;
	height:120px;
	margin:0 auto;
	padding:55px 0 30px;
}
.demo-reel h1, h1 a {
	background:url(marco-aslan-logo.png) no-repeat 0 0;
	width:240px;
	height:122px;
	float:left;
	border-right:1px solid #333;
	margin-right:15px;
	padding-right:15px;
}
h1 a:hover, h1 a:focus {background-position:0 50%;}
h1 a:active {background-position:0 100%;}

/***** Menu *****/
#menu {width:496px; margin-top:-5px; float:left;}
#menu li {float:left; margin:0 0 10px;}
#menu li a {
	background:url(menu.png) no-repeat;
	display:block;
	height:25px;
	float:left;
}
#menu li span {
	background:url(menu.png) no-repeat 0 0;
	width:6px;
	height:25px;
	float:left;
	margin:0 6px 0 5px;
}

#menu li.m-demo-reel a {background-position:-6px 0; width:112px;}
#menu li.m-sergio-mendes a {background-position:-118px 0; width:308px;}
#menu li.m-voyage-journey a {background-position:-426px 0; width:182px;}
#menu li.m-brief-moment a {background-position:-608px 0; width:149px;}
#menu li.m-lisztomania a {background-position:-757px 0; width:130px;}
#menu li.m-jeremiah-johnston a {background-position:-887px 0; width:381px;}
#menu li.m-resume a {background-position:-1268px 0; width:77px;}
#menu li.m-naughty-list a {background-position:-1345px 0; width:140px;}
#menu li.m-doritos a {background-position:-1485px 0; width:225px;}

#menu li.m-demo-reel a:hover, #menu li.m-demo-reel a:focus {background-position:-6px 33%;}
#menu li.m-sergio-mendes a:hover, #menu li.m-sergio-mendes a:focus {background-position:-118px 33%;}
#menu li.m-voyage-journey a:hover, #menu li.m-voyage-journey a:focus {background-position:-426px 33%;}
#menu li.m-brief-moment a:hover, #menu li.m-brief-moment a:focus {background-position:-608px 33%;}
#menu li.m-lisztomania a:hover, #menu li.m-lisztomania a:focus {background-position:-757px 33%;}
#menu li.m-jeremiah-johnston a:hover, #menu li.m-jeremiah-johnston a:focus {background-position:-887px 33%;}
#menu li.m-resume a:hover, #menu li.m-resume a:focus {background-position:-1268px 33%;}
#menu li.m-naughty-list a:hover, #menu li.m-naughty-list a:focus {background-position:-1345px 33%;}
#menu li.m-doritos a:hover, #menu li.m-doritos a:focus {background-position:-1485px 33%;}

#menu li.m-demo-reel a:active {background-position:-6px 66%;}
#menu li.m-sergio-mendes a:active {background-position:-118px 66%;}
#menu li.m-voyage-journey a:active {background-position:-426px 66%;}
#menu li.m-brief-moment a:active {background-position:-608px 66%;}
#menu li.m-lisztomania a:active {background-position:-757px 66%;}
#menu li.m-jeremiah-johnston a:active {background-position:-887px 66%;}
#menu li.m-resume a:active {background-position:-1268px 66%;}
#menu li.m-naughty-list a:active {background-position:-1345px 66%;}
#menu li.m-doritos a:active {background-position:-1485px 66%;}

.demo-reel #menu li.m-demo-reel a {background-position:-6px 100%; cursor:default;}
.sergio-mendes #menu li.m-sergio-mendes a {background-position:-118px 100%; cursor:default;}
.voyage-journey #menu li.m-voyage-journey a {background-position:-426px 100%; cursor:default;}
.brief-moment #menu li.m-brief-moment a {background-position:-608px 100%; cursor:default;}
.lisztomania #menu li.m-lisztomania a {background-position:-757px 100%; cursor:default;}
.jeremiah-johnston #menu li.m-jeremiah-johnston a {background-position:-887px 100%; cursor:default;}
.resume #menu li.m-resume a {background-position:-1268px 100%; cursor:default;}
.naughty-list #menu li.m-naughty-list a {background-position:-1345px 100%; cursor:default;}
.doritos #menu li.m-doritos a {background-position:-1485px 100%; cursor:default;}

/***** Content *****/
#wrapper {background:#1C1C1C url(bg-wrapper.png) repeat; padding:25px 0; margin-bottom:46px; clear:both;}
#content {background:#232323 url(bg-content.png) repeat; padding:30px 0;}

.bg {background:#1C1C1C url(bg-work.png) repeat;}
.video, .gallery, .projects-list {padding:15px; margin:0 auto; position:relative;}
.video {width:504px; height:284px;}

.demo {height:386px;}
.gallery {width:804px; height:208px;}

/***** Titles *****/
h3, h6 {background:url(titles.png) no-repeat; width:450px; height:22px;}
h3 {margin:15px 0 5px;}
h6 {margin:5px 0;}

#demo-reel {background-position:0 0;}
#sergio-mendes {background-position:0 -22px;}
#voyage-journey {background-position:0 -44px;}
#brief-moment {background-position:0 -66px;}
#jeremiah-johnston {background-position:0 -88px;}
#lisztomania {background-position:0 -110px;}
#reminiscence {background-position:0 -132px;}
#self-portrait {background-position:0 -154px;}
#billy-rainwater {background-position:0 -176px;}
#leals-deals {background-position:0 -198px;}
#bottle-spuzz {background-position:0 -220px;}
#bitterness {background-position:0 -242px;}
#morphology {background-position:0 -264px;}
#phantasmagoria {background-position:0 -286px;}
#fatum-fatras {background-position:0 -308px;}
#songbirds {background-position:0 -330px;}
#cautionary-tale {background-position:0 -352px;}
#static-blue {background-position:0 -374px;}
#apertura {background-position:0 -396px;}
#blind-date {background-position:0 -418px;}
#doritos {background-position:0 -440px;}
#naughty-list {background-position:0 -462px;}
#first-blood {background-position:0 -484px;}

.resume-info h3#resume {background:url(resume.png) no-repeat -118px 0; width:128px; height:38px; margin:0 auto;}
#information, #portfolio {background:url(resume.png) no-repeat;}
#information {background-position:-118px -38px;}
#portfolio {background-position:-118px -57px;}

/***** Navigation *****/
#nav li {position:absolute; top:134px;}
#nav li, #nav li a {
	width:30px;
	height:46px;
	display:block;
}
li.prev, li.prev a, li.next, li.next a {background:url(nav.png) no-repeat;}
li.prev {background-position:0 100%; left:-50px;}
li.prev a {background-position:0 50%;}
li.prev a:hover, li.prev a:focus {background-position:0 0;}
li.next {background-position:-30px 100%; right:-50px;}
li.next a {background-position:-30px 50%;}
li.next a:hover, li.next a:focus {background-position:-30px 0;}

#nav li a:hover span, #nav li a:focus span {
	background:url(nav.png) no-repeat;
	width:47px;
	height:16px;
	display:block;
	position:absolute;
	top:15px;
	font-size:1px;
}
#nav li.prev a:hover span, #nav li.prev a:focus span {background-position:-60px -16px; left:-55px;}
#nav li.next a:hover span, #nav li.next a:focus span {background-position:-60px 0; left:40px;}

.demo #nav li {top:185px;}
.gallery #nav li {top:96px;}

/***** Info *****/
.video-info {width:536px; margin:0 auto;}
.gallery-info {width:838px; margin:0 auto;}
.resume-info {background:#1E1E1E url(bg-body.png) repeat;}
.resume-info div {width:320px; margin:0 auto 28px; padding:7px 0 15px; position:relative;}

/***** Gallery *****/
.gallery {position:relative;}
.gallery img {float:left; margin:2px;}

a.poster img, a.screen img {background:#181818 url(loading.gif) no-repeat center center; width:130px; color:#181818;}
a.poster img {height:204px;}
a.screen img {height:100px;}

/***** Lightbox *****/
.highslide-image {background:url(bg-content.png) repeat; padding:15px;}
.highslide-loading {
	background:#000 url(lb/loading.gif) no-repeat center center;
	display:block;
	width:30px;
	height:30px;
}
.highslide-dimming {background:#000; position:absolute;}
.highslide-overlay {display:none;}
.closebutton {
	background:url(lb/close.png) no-repeat;
	position:relative;
	top:-30px;
	right:30px;
	width:30px;
	height:30px;
	cursor:pointer;
}
.highslide-controls ul li {float:left;}
.highslide-controls ul li a {
	background:url(lb/controlbar.png);
	width:60px;
	height:50px;
	display:block;
	margin-bottom:20px;
}
.highslide-controls a.disabled {cursor:default;}
.highslide-controls a span, .highslide-play , .highslide-pause, .highslide-move, .highslide-close, .highslide-full-expand {display:none;}
.highslide-controls .highslide-previous a {background-position:left center;}
.highslide-controls .highslide-previous a:hover {background-position:left top;}
.highslide-controls .highslide-previous a.disabled {background-position:left bottom !important;}
.highslide-controls .highslide-next a {background-position:right center;}
.highslide-controls .highslide-next a:hover {background-position:right top;}
.highslide-controls .highslide-next a.disabled {background-position:right bottom !important;}

/***** Resumé *****/
.projects-list {width:600px; position:relative; top:0; left:62px; padding:20px;}
.projects-list ul li {clear:both;}

.year-box {position:relative; margin-bottom:50px;}
.year-box p {padding-bottom:30px; line-height:25px;}
.final, .final p {margin-bottom:0; padding-bottom:0;}

.mini-gallery {width:432px; height:77px; padding:8px 4px;}
.mini-gallery a {float:left; margin:0 4px; position:relative; text-decoration:none;}
.mini-gallery a.screen img {background:#181818 url(loading.gif) no-repeat center center; width:100px; height:77px; color:#181818;}
.mini-gallery a:hover span {background:url(lb/zoom.png) no-repeat center center; width:100px; height:77px; position:absolute; cursor:pointer;}

.resume-info #nav li {top:7px;}
.resume-info #nav li.prev {left:-80px;}
.resume-info #nav li.next {right:-80px;}

.info {width:500px;}
.info img {float:left; margin:0 10px 0 0; padding:8px;}
.info p {font-size:18px; line-height:25px; margin-bottom:22px; color:#777;}

.resume-topic {background:#1C1C1C url(bg-wrapper.png) repeat; padding:8px 0; clear:both;}
.resume-topic h4 {width:470px; height:19px; margin:0 auto;}

.email, .phone, .vimeo-profile a, .printable-version a {background:url(resume.png) no-repeat; height:23px;}
.email span, .phone span {display:none;}
.email {background-position:-118px -76px; padding-left:80px;}
.phone {background-position:-118px -99px; padding-left:94px; margin:10px 0 5px;}

.vimeo-profile, .printable-version {padding:5px 0;}
.vimeo-profile a, .printable-version a {display:block;}
.vimeo-profile a {background-position:-118px -145px; width:158px;}
.printable-version a {background-position:-118px -191px; width:278px;}
.vimeo-profile a:hover, .vimeo-profile a:focus {background-position:-118px -122px;}
.printable-version a:hover, .printable-version a:focus {background-position:-118px -168px;}

.year-box h5 {
	background:url(resume.png) no-repeat;
	width:118px;
	height:45px;
	position:absolute;
	top:0;
	left:-135px;
}
#year-10 {background-position:0 0;}
#year-09 {background-position:0 20%;}
#year-08 {background-position:0 40%;}
#year-07 {background-position:0 60%;}
#year-06 {background-position:0 80%;}
#year-05 {background-position:0 100%;}

/***** Designed & Developed by pedroivo.com *****/
.by-pedroivo a:hover, .by-pedroivo a:focus {background-position:top; width:166px;}
.by-pedroivo a {
	background:url(by-pedroivo.png) no-repeat bottom right;
	width:69px;
	height:25px;
	display:block;
	position:absolute;
	top:0;
	right:10px;
}