* { /* Global Whitespace Reset - do not delete */
    margin: 0;
    padding: 0;
}

html {overflow-y: scroll;}

body {
	padding: 53px 0 0;
	font: 11px/17px Verdana, Arial, sans-serif;
	background: #9a5527;
}

img {border: 0;}

a:focus {outline: 0;}

br.clear {
    display: block;
    clear: both;
    height: 0;
    font: 0/0 sans-serif !important;
}

div.nav {
	margin: 0 auto;
	padding: 0 8px;
	width: 842px;
	height: 38px;
}

div.nav a.home-link:link,
div.nav a.home-link:visited {
	position: relative;
	float: left;
	width: 252px;
	height: 37px;
	background: url(images/bg-home-link.png) no-repeat 0 0;
	z-index: 10000;
}

div.nav ul.main-nav {
	list-style: none;
	float: left;
	margin: 10px 0 0 68px;
	width: 275px;
	background: url(images/bg-main-nav.gif) no-repeat 0 0;
}

div.nav ul.main-nav li {
	float: left;
	margin: 0 35px 0 0;
	height: 18px;
}

div.nav ul.main-nav li a:link,
div.nav ul.main-nav li a:visited {
	display: block;
	height: 8px;
	background-image: url(images/bg-main-nav-links.gif);
	background-repeat: no-repeat;
	text-indent: -10000em;
}

div.nav ul.main-nav li.about-us a:link,
div.nav ul.main-nav li.about-us a:visited {
	width: 61px;
	background-position: 0 0;
}
div.nav ul.main-nav li.about-us a:hover,
div.nav ul.main-nav li.about-us a.on:link,
div.nav ul.main-nav li.about-us a.on:visited,
div.nav ul.main-nav li.about-us a.active:link,
div.nav ul.main-nav li.about-us a.active:visited {background-position: 0 -18px;}

div.nav ul.main-nav li.contact {margin: 0 32px 0 0;}
div.nav ul.main-nav li.contact a:link,
div.nav ul.main-nav li.contact a:visited {
	width: 76px;
	background-position: -95px 0;
}
div.nav ul.main-nav li.contact a:hover,
div.nav ul.main-nav li.contact a.on:link,
div.nav ul.main-nav li.contact a.on:visited,
div.nav ul.main-nav li.contact a.active:link,
div.nav ul.main-nav li.contact a.active:visited {background-position: -95px -18px;}

div.nav ul.main-nav li.work {margin: 0;}
div.nav ul.main-nav li.work a:link,
div.nav ul.main-nav li.work a:visited {
	width: 66px;
	background-position: -204px 0;
}
div.nav ul.main-nav li.work a:hover,
div.nav ul.main-nav li.work a.on:link,
div.nav ul.main-nav li.work a.on:visited,
div.nav ul.main-nav li.work a.active:link,
div.nav ul.main-nav li.work a.active:visited {background-position: -204px -18px;}

div.nav ul.main-nav li ul {
	list-style: none;
	position: absolute;
	z-index: 10;
	margin: 4px 0 0 -23px;
	width: 95px;
	display: none;
}
div.nav ul.main-nav li ul.on {display: block;}

div.nav ul.main-nav li ul li {
	float: none;
	text-indent: 0;
	margin: 0;
	width: 95px;
	height: auto;
}

div.nav ul.main-nav li ul li a:link,
div.nav ul.main-nav li ul li a:visited {
	width: 95px !important;
	height: 23px;
	background-image: url(images/bg-main-nav-sub.png);
	background-repeat: no-repeat;
}

div.nav ul.main-nav li ul li.john a:link,
div.nav ul.main-nav li ul li.john a:visited {background-position: 0 0;}
div.nav ul.main-nav li ul li.john a:hover {background-position: -105px 0;}

div.nav ul.main-nav li ul li.bob a:link,
div.nav ul.main-nav li ul li.bob a:visited {background-position: 0 -23px;}
div.nav ul.main-nav li ul li.bob a:hover {background-position: -105px -23px;}

div.nav ul.main-nav li ul li.news a:link,
div.nav ul.main-nav li ul li.news a:visited {height: 25px; background-position: 0 -46px;}
div.nav ul.main-nav li ul li.news a:hover {height: 25px; background-position: -105px -46px;}

div.nav ul.main-nav li ul li.about a:link,
div.nav ul.main-nav li ul li.about a:visited {height: 48px; background-position: 0 -71px;}
div.nav ul.main-nav li ul li.about a:hover {height: 48px; background-position: -105px -71px;}

div.nav ul.main-nav li ul li.clients a:link,
div.nav ul.main-nav li ul li.clients a:visited {height: 39px; background-position: 0 -119px;}
div.nav ul.main-nav li ul li.clients a:hover {height: 39px; background-position: -105px -119px;}

div.nav ul.main-nav li.work ul li a:link,
div.nav ul.main-nav li.work ul li a:visited {
	width: 94px !important;
	height: 23px;
	background-image: url(images/nav-our-work.png);
	background-repeat: no-repeat;
}

div.nav ul.main-nav li.work ul li.music a:link,
div.nav ul.main-nav li.work ul li.music a:visited {background-position: 0 0;}
div.nav ul.main-nav li.work ul li.music a:hover {background-position: -104px 0;}

div.nav ul.main-nav li.work ul li.picture a:link,
div.nav ul.main-nav li.work ul li.picture a:visited {background-position: 0 -23px;}
div.nav ul.main-nav li.work ul li.picture a:hover {background-position: -104px -23px;}

div.nav ul.main-nav li.work ul li.post a:link,
div.nav ul.main-nav li.work ul li.post a:visited {height: 35px; background-position: 0 -46px;}
div.nav ul.main-nav li.work ul li.post a:hover {height: 35px; background-position: -104px -46px;}
	
div.nav ul.work-nav {
	list-style: none;
	float: right;
	margin: 6px 0 0;
	padding: 0 0 0 4px;
	width: 175px;
	background: url(images/bg-work-nav.gif) no-repeat 0 0;
}

div.nav ul.work-nav li {
	float: left;
	margin: 0 16px 0 0;
}

div.nav ul.work-nav li a:link,
div.nav ul.work-nav li a:visited {
	display: block;
	height: 15px;
	background-image: url(images/bg-work-nav-links.gif);
	background-repeat: no-repeat;
	text-indent: -10000em;
}

div.nav ul.work-nav li.music a:link,
div.nav ul.work-nav li.music a:visited {
	width: 46px;
	background-position: -4px 0;
}

div.nav ul.work-nav li.picture a:link,
div.nav ul.work-nav li.picture a:visited {
	width: 55px;
	background-position: -66px 0;
}

div.nav ul.work-nav li.post {margin: 0;}
div.nav ul.work-nav li.post a:link,
div.nav ul.work-nav li.post a:visited {
	width: 35px;
	background-position: -137px 0;
}

div.main-top {
    margin: 0 auto;
    width: 858px;
    background: url(images/bg-main-int.gif) repeat-y 0 0;
}

div.main-btm {
    width: 858px;
    background: url(images/bg-main-top.gif) no-repeat left top;
}

div.main-int {
    padding: 0 0 11px;
    width: 858px;
    background: url(images/bg-main-btm.gif) no-repeat left bottom;
}


div.main {
	position: relative;
	margin: 0 auto;
	width: 858px;
	background: url(images/bg-main.jpg) no-repeat 8px 7px;
}

div.main div.logo {
	position: absolute;
	top: 28px;
	left: -66px;
	width: 197px;
	height: 365px;
	background: url(images/bg-logo.png) no-repeat 0 0;
	z-index: 2;
}

div.main div.bottom {
	position: absolute;
	bottom: 0;
	left: 8px;
	width: 840px;
	height: 45px;
	background: url(images/bg-bottom.png) no-repeat 0 0;
	z-index: 1;
}

div.main div.bottom img.phone {
	float: left;
	margin: 19px 0 0 9px;
}

div.main div.bottom img.address {
	float: right;
	margin: 18px 56px 0 0;
}

div.main div.home {
	float: right;
	margin: 7px 10px 0 0;
	width: 717px;
	height: 399px;
	background: url(images/bg-home.jpg) no-repeat 0 0;
}

div.main div.home p {text-indent: -1000em;}

div.footer {
	margin: 0 auto;
	padding: 0 8px;
	width: 842px;
	height: 38px;
}


/* About Us Styles */

div.about-container {
	float: right;
	margin: 7px 10px 0 0;
	width: 717px;
	height: 399px;
	overflow: hidden;
}

div.bob-m {background: url(images/bg-bob.jpg) no-repeat 0 0;}

div.john-t {background: url(images/bg-john.jpg) no-repeat 0 0;}

div.about-container div.expander {width: 3000px;}

div.about-container div.john-container {
	float: left;
	width: 133px;
	/*width: 719px;*/
	height: 399px;
	overflow: hidden;
}

div.about-container div.john-container img.expand {
	position: absolute;
	top: 317px;
	left: 183px;
}

div.about-container div.john-container div.john {
	float: left;
	margin-left: -386px;
	width: 717px;
	height: 399px;
	background: url(images/bg-john.jpg) no-repeat 0 0;
}

div.about-container div.john-container div.john h1 {display: none;}

div.about-container div.john-container div.john p {
	width: 428px;
	height: 340px;
	font-size: 13px;
	color: #fff;
	text-shadow: black 0.2em 0.3em 0.2em; /* for Safari */
}

div.about-container div.john-container div.john ul {
	list-style: none;
	float: right;
	clear: both;
	margin: 230px 0 0;
	width: 189px;
	display: none;
}
div.about-container div.john-container div.john ul.on {display: block;}

div.about-container div.john-container div.john ul li {height: 27px;}

div.about-container div.john-container div.john ul li a:link,
div.about-container div.john-container div.john ul li a:visited {
	float: right;
	height: 26px;
	background-image: url(images/bg-john-nav.jpg);
	background-repeat: no-repeat;
	text-indent: -10000em;
}

div.about-container div.john-container div.john ul li.bob a:link,
div.about-container div.john-container div.john ul li.bob a:visited {
	width: 81px;
	background-position: -108px 0;
}

div.about-container div.john-container div.john ul li.news a:link,
div.about-container div.john-container div.john ul li.news a:visited {
	width: 70px;
	height: 27px;
	background-position: -119px -26px;
}

div.about-container div.john-container div.john ul li.about a:link,
div.about-container div.john-container div.john ul li.about a:visited {
	width: 189px;
	height: 27px;
	background-position: 0 -53px;
}

div.about-container div.john-container div.john ul li.clients a:link,
div.about-container div.john-container div.john ul li.clients a:visited {
	width: 115px;
	height: 27px;
	background-position: -74px -80px;
}

div.about-container div.bob-container {
	float: left;
	width: 135px;
	/*width: 717px;*/
	height: 399px;
	overflow: hidden;
}

div.about-container div.bob-container img.expand {
	position: absolute;
	top: 318px;
	left: 317px;
}

div.about-container div.bob-container div.bob {
	float: left;
	margin-left: -97px;
	width: 717px;
	height: 399px;
	background: url(images/bg-bob.jpg) no-repeat 0 0;
}

div.about-container div.bob-container div.bob h1 {display: none;}

div.about-container div.bob-container div.bob p {
	width: 356px;
	height: 240px;
	font-size: 13px;
	color: #fff;
	text-shadow: black 0.2em 0.3em 0.2em; /* for Safari */
}

div.about-container div.bob-container div.bob ul {
	list-style: none;
	float: left;
	clear: both;
	margin: 230px 0 0;
	width: 189px;
	display: none;
}
div.about-container div.bob-container div.bob ul.on {display: block;}

div.about-container div.bob-container div.bob ul li {height: 27px;}

div.about-container div.bob-container div.bob ul li a:link,
div.about-container div.bob-container div.bob ul li a:visited {
	float: right;
	height: 26px;
	background-image: url(images/bg-bob-nav.jpg);
	background-repeat: no-repeat;
	text-indent: -10000em;
}

div.about-container div.bob-container div.bob ul li.john a:link,
div.about-container div.bob-container div.bob ul li.john a:visited {
	width: 81px;
	background-position: -108px 0;
}

div.about-container div.bob-container div.bob ul li.news a:link,
div.about-container div.bob-container div.bob ul li.news a:visited {
	width: 70px;
	height: 27px;
	background-position: -119px -26px;
}

div.about-container div.bob-container div.bob ul li.about a:link,
div.about-container div.bob-container div.bob ul li.about a:visited {
	width: 189px;
	height: 27px;
	background-position: 0 -53px;
}

div.about-container div.bob-container div.bob ul li.clients a:link,
div.about-container div.bob-container div.bob ul li.clients a:visited {
	width: 115px;
	height: 27px;
	background-position: -74px -80px;
}

div.about-container div.overview {
	float: left;
	width: 449px;
	height: 399px;
	background: url(images/bg-overview.jpg) no-repeat -147px 0;
}

div.about-container div.overview p {padding: 33px 0 2px 103px;}

div.about-container div.overview ul {
	list-style: none;
	float: right;
}

div.about-container div.overview ul li {height: 27px;}

div.about-container div.overview ul li a:link,
div.about-container div.overview ul li a:visited {
	float: right;
	height: 27px;
	background-image: url(images/bg-overview-nav.jpg);
	background-repeat: no-repeat;
	text-indent: -10000em;
}

div.about-container div.overview ul li.news a:link,
div.about-container div.overview ul li.news a:visited {
	width: 70px;
	background-position: -119px 0;
}

div.about-container div.overview ul li.about a:link,
div.about-container div.overview ul li.about a:visited {
	width: 189px;
	background-position: 0 -27px;
}

div.about-container div.overview ul li.clients a:link,
div.about-container div.overview ul li.clients a:visited {
	width: 115px;
	background-position: -74px -54px;
}

div.about-container div.news {
	width: 719px;
	height: 399px;
	background: url(images/bg-news.jpg) no-repeat 0 0;
}

div.about-container div.studio {
	padding: 0 0 60px;
	width: 717px;
	background: #000 url(images/bg-studio.jpg) no-repeat 0 0;
}

div.about-container div.clients {
	width: 717px;
	height: 399px;
	background: url(images/bg-clients.jpg) no-repeat 0 0;
}

div.about-container div.about h1 {
    width: 202px;
    height: 14px;
    text-indent: -10000em;
    background: url(images/h1-about.png) no-repeat 0 0;
}	

div.about-container div.about h2 {
	padding: 0 0 16px;
	font: bold 14px Times New Roman, Georgia, serif;
	text-transform: uppercase;
	color: #fff;
	text-shadow: black 0.2em 0.3em 0.2em; /* for Safari */
}	
	
div.about-container div.about p {
	width: 356px;
	height: 240px;
	font-size: 13px;
	color: #fff;
	text-shadow: black 0.2em 0.3em 0.2em; /* for Safari */
}

div.about-container ul.nav {
	list-style: none;
	float: left;
	margin: 204px 0 0;
	width: 196px;
}

div.about-container ul.nav li {
	float: right;
	height: 26px;
	clear: both;
}

div.about-container ul.nav li a {
	display: block;
	height: 26px;
	text-indent: -10000em;
	background-image: url(images/nav-about-us.png);
	background-repeat: no-repeat;
}

div.about-container ul.nav li.john a:link,
div.about-container ul.nav li.john a:visited {
	width: 87px;
	background-position: -109px 0;
}
div.about-container ul.nav li.john a:hover,
div.about-container ul.nav li.john a.on:link,
div.about-container ul.nav li.john a.on:visited {background-position: -315px 0;}

div.about-container ul.nav li.bob a:link,
div.about-container ul.nav li.bob a:visited {
	width: 87px;
	background-position: -109px -26px;
}
div.about-container ul.nav li.bob a:hover,
div.about-container ul.nav li.bob a.on:link,
div.about-container ul.nav li.bob a.on:visited {background-position: -315px -26px;}

div.about-container ul.nav li.news a:link,
div.about-container ul.nav li.news a:visited {
	width: 85px;
	background-position: -111px -52px;
}
div.about-container ul.nav li.news a:hover,
div.about-container ul.nav li.news a.on:link, 
div.about-container ul.nav li.news a.on:visited {background-position: -317px -52px;}

div.about-container ul.nav li.about {height: 28px;}
div.about-container ul.nav li.about a:link,
div.about-container ul.nav li.about a:visited {
	width: 196px;
	height: 28px;
	background-position: 1px -78px;
}
div.about-container ul.nav li.about a:hover,
div.about-container ul.nav li.about a.on:link,
div.about-container ul.nav li.about a.on:visited {background-position: -205px -78px;}

div.about-container ul.nav li.clients {height: 29px;}
div.about-container ul.nav li.clients a:link,
div.about-container ul.nav li.clients a:visited {
	width: 129px;
	height: 29px;
	background-position: -66px -106px;
}
div.about-container ul.nav li.clients a:hover,
div.about-container ul.nav li.clients a.on:link,
div.about-container ul.nav li.clients a.on:visited {background-position: -272px -106px;}

div.contact-container {
	float: right;
	margin: 7px 10px 0 0;
	width: 717px;
}

div.contact-container div.contact {
	position: relative;
	float: left;
    padding: 50px 0 0 0;
	width: 717px;
	height: 349px;
	background: url(images/bg-contact.jpg) no-repeat right top;
}

div.contact-container div.contact h1 {
    float: right;
    width: 340px;
    height: 20px;
    text-indent: -10000em;
    background: transparent url(images/h1-contact.png) no-repeat 0 0;
}

div.contact-container div.contact p {
    float: right;
    clear: right;
    padding: 10px 50px 0 0;
    width: 290px;
    color: #fff;
}

div.contact-container div.contact a:link,
div.contact-container div.contact a:visited {color: #4e77a0;}

div.work-container {
	float: right;
	margin: 7px 10px 0 0;
	width: 717px;
	background: url(images/bg-our-work.jpg) no-repeat 110px 0;
}

div.work-container img.landing {float: left;}

div.work-container div.overview p {}

div.work-container div.expander {width: 3000px;}

div.work-container div.music-container img.expand {
	position: absolute;
	top: 317px;
	left: 188px;
}

div.work-container div.music {
	position: relative;
	float: left;
    padding: 50px 0 70px;
	width: 717px;
	background: url(images/bg-music.jpg) no-repeat 0 0;
}

div.work-container div.music h1 {
    float: right;
    width: 347px;
    height: 39px;
    text-indent: -10000em;
    background: url(images/h1-music.png) no-repeat 0 0;
}

div.work-container div.music p {
	float: right;
	clear: right;
	padding: 0 50px 0 0;
	width: 297px;
	color: #fff;
}

div.work-container div.picture-container {
	float: left;
	width: 133px;
	/*width: 719px;*/
	height: 399px;
	overflow: hidden;
}

div.work-container div.picture-container img.expand {
	position: absolute;
	top: 317px;
	left: 308px;
}

div.work-container div.picture {
	position: relative;
	float: left;
	padding: 50px 0 75px;
	width: 717px;
	background: url(images/bg-picture.jpg) no-repeat 0 0;
}

div.work-container div.picture h1 {
    float: right;
    width: 347px;
    height: 63px;
    text-indent: -10000em;
    background: url(images/h1-picture.png) no-repeat 0 0;
}

div.work-container div.picture p {
	float: right;
	clear: right;
	width: 297px;
	padding: 0 50px 0 0;
	color: #fff;
}

div.work-container div.post-container {
	float: left;
	width: 133px;
	/*width: 719px;*/
	height: 399px;
	overflow: hidden;
}

div.work-container div.post-container img.expand {
	position: absolute;
	top: 317px;
	left: 451px;
}

div.work-container div.post {
	position: relative;
	float: right;
	padding: 50px 0 70px;
	width: 717px;
	background: #000 url(images/bg-post.jpg) no-repeat 0 0;
}

div.work-container div.post h1 {
    float: right;
    width: 347px;
    height: 63px;
    background: url(images/h1-post.png) no-repeat 0 0;
    text-indent: -10000em;
}

div.work-container div.post p {
	float: right;
	clear: right;
	padding: 0 50px 0 0;
	width: 297px;
	color: #fff;
}

div.samples,
div.gallery {
    position: absolute;
    bottom: 60px;
    left: 25px;
    width: 330px;
}
div.music div.samples {height: 170px;}
div.picture div.samples {height: 170px;}
div.post div.samples {height: 92px;}
div.about div.gallery {height: 170px;}

div.samples h3 {
    width: 55px;
    height: 14px;
    text-indent: -10000em;
    background: transparent url(images/h3-samples.png) no-repeat 0 0;
}

div.samples img,
div.gallery img {
    float: left;
    margin: 0 10px 10px 0;
    border: 2px solid #b3b3b3;
}

div.flash-div {
    position: absolute;
    top: 50px;
    left: 50%;
    margin-left: -250px;
    padding-top: 10px;
    padding-left: 10px;
    width: 490px;
    height: 390px;
    font: 11px Verdana, Arial, sans-serif;
    color: #fff;
    background: #000;
    z-index: 100000;
}

div.flash-div p {padding: 10px 0 0;}