﻿/* AylieM */
/* Geoff Pack, Feb 2009 */
/* last modified: Sep 2009 */

body {
	font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; 
	font-size:76%; /* ~12px based on 16px default font size */
	margin:0; padding:0;
	color:#ccc; background:#000 url(body_bg.jpg) top center no-repeat;
}

div {margin:0; padding:0;}
p {font-size:0.92em; margin:0 58px 1em 58px; padding:0; line-height:1.4em;} /* ~11px */

/* tables */
table {margin:0 58px 1em 58px; }
tr {vertical-align:top;}
th {text-align:left; font-size:0.92em; padding:3px;}
td {font-size:0.92em; padding:3px;}

/* lists */
ol {margin:0.5em 58px 1em 58px; padding:0;}
ul {margin:0.5em 58px 1em 58px; padding:0;}
ol ul, ul ol {margin:0;}
li {font-size:0.92em; margin:0 0 0 30px; padding:0 0 2px 0; line-height:1.3em;}
ul li {}
ol li {}
dl {margin:0.5em 58px 1em 58px; padding:0;}
dt {float:left; width:10em; margin:0 0 1em 0; font-weight:bold;}
dd {margin:1em 0 1em 10em; padding-bottom:1em; border-bottom: 1px dotted #333;;}
dl ol, dl ul {margin:0.3em 0;}
dl li {margin:0 0 0 15px; line-height:1.1em;}

/* misc */
img {border:0;}
small {font-size:0.75em;} /* ~8px */
.required {color:#d00;}
big {font-size:1.0em;} /* ~12px */

hr {clear:both; height:1px; margin:1.5em 58px; padding:0; border:1px dotted #333;}
form {font-size:0.833em;}

.hidden {visibility:hidden; display:none;}
.right {float:right;}
.center {text-align:center}
.clearer {clear:both;}


/* headings */
h1 {font-size:2em; font-weight:200; line-height:1.0; text-transform:uppercase; margin:0px 58px 0px 0px; padding:20px 0 11px 0;}
h2 {font-size:1.3em; font-weight:200; margin:1em 58px;}
h3 {font-size:1.0em; font-weight:normal; margin:1em 58px 1em 58px;}
h4 {font-size:0.92em; font-weight:normal; margin:1em 58px 0em 58px;}


/* default links */
a, a:link {text-decoration:none; color:#4d4d4d;}
a:visited {color:#4d4d4d;}
a:hover, a:focus, a:active {text-decoration:underline;}

a.pdf {padding:5px 28px 5px 0; background:url(pdf.gif) center right no-repeat;}


/* ------------------------------ */
/* layout */

#mainWrapper 	{width:1000px; margin:0 auto; background:#000; /* background:transparent; */}
#header 		{width:890px; margin:0 auto;}
#mainNav 		{width:890px; margin:10px 0 30px 67px; overflow:auto; color:#fff;}
#content		{width:888px; margin:0 auto; padding:0 0 20px 0; color:#000; background:#fff;}
#footer 		{width:890px; margin:0 auto; text-align:center; color:#808080;}

#header p {margin:0; padding:20px 0px 10px 24px;}
#footer p {margin:0; padding:2em 0; font-size:0.8333em;}


/* ------------------------------ */
/* main nav */

#mainNav {text-transform:uppercase;}
#mainNav a {display:block; margin:0; color:#fff; outline:0; opacity:0.4;}
#mainNav a:hover {text-decoration:none; opacity:1.0;}

#mainNav ul {margin:0; overflow:auto;}
#mainNav li {float:left; margin:0; padding:0; list-style-type:none; list-style-image:none; font-size:2em; font-weight:200; line-height:1.0; color:#4d4d4d;}
#mainNav li.profile 	{width:5em; margin-left:0;}
#mainNav li.portfolio 	{width:6.5em; margin-left:1em;}
#mainNav li.contact 	{float:right; width:5.5em;}

#mainNav ul ul {margin:5px 0 0 0;}
#mainNav li li {float:none; margin:2px 0; padding:2px 0; font-size:0.4em; font-weight:normal;}

/* headings */
body #mainNav li img {opacity:0.4;}
body #mainNav li li img {opacity:1.0;}

body.profile #mainNav li.profile img,
body.portfolio #mainNav li.portfolio img,
body.contact #mainNav li.contact img {opacity:1.0;}

/* on states */
body#home #mainNav li.home a,
body#about #mainNav li.about a,
body#cv #mainNav li.cv a,
body#shop #mainNav li.shop a,
body#news #mainNav li.news a,
body#exhibitions #mainNav li.exhibitions a,
body#illustration #mainNav li.illustration a,
body#fashion #mainNav li.fashion a,
body#web #mainNav li.web a,
body#artwork #mainNav li.artwork a,
body#sketch #mainNav li.sketch a,
body#email #mainNav li.email a,
body#blog #mainNav li.blog a,
body#client #mainNav li.client a {opacity:1.0;}


/* ------------------------------ */
/* home page */

body.home {height:101%; /*overflow:scroll;*/}
body.home #mainWrapper {background:transparent;}
body.home #content {color:#fff; background:transparent;}
body.home a {color:#df0a02;}
body.home strong {font-size:2em; font-weight:200;}

body.home h1 {margin-left:20px; padding-top:20px;}
body.home p {margin-left:50px;}
body.home p.first {margin-left:50px; margin-top:10em; margin-bottom:2em;}
body.home p.enter {margin-top:8em; margin-left:50px;}
body.home .smiley {position:relative; top:0.1em;}


/* ------------------------------ */
/* profile pages */

body.profile h1 {padding: 30px 0px 30px 58px; color:#333; background:#fff; }
body.profile #content img.feature {float:left; margin:0 12px 1.5em 0;}


/* ------------------------------ */
/* portfolio pages */

body.portfolio #content {color:#fff; background:#000;}
body.portfolio #content h1 {margin-left:12px;}
body.portfolio #content h2 {margin-left:12px;}
body.portfolio #content h3 {margin-left:12px; margin-top:0.6em;}
body.portfolio #content hr {margin:1.5em 12px 0.6em 12px; border-width:1px 0 0 0;}

/* thumbnails */
p.thumbs {margin:0 5px 1em 102px;}
p.thumbs img {margin:1px 1px;}

/* thumbnail rollovers */
p.thumbs img {opacity:1.0;}
p.thumbs a img, p.thumbs a:link img, p.thumbs a:visited img: {opacity:1.0;} /* no effect - remove after testing on IE */
p.thumbs a:hover img, p.thumbs a:focus img, p.thumbs a:active img {opacity:0.4;}


/* illustration page */
body#illustration p.thumbs {}
body#illustration p.thumbs img{}

/* fashion design page */
body#fashion p.thumbs {}
body#fashion p.thumbs img {}

/* web design page */
body#web p.thumbs {}
body#web p.thumbs img {}

/* artwork page */
body#artwork p.thumbs {}
body#artwork p.thumbs img {}

/* sketch page */
body#sketch h1 {display:none;}
body#sketch #content {padding-top:10px; color:#000; background:#fff;}
body#sketch p.thumbs {margin-left:5px;}
body#sketch p.thumbs img {}


/* ------------------------------ */
/* website and Fashion pages */

h3 {}
p.scrollerNav {margin-left:12px;}
div.panel h4  {margin-left:12px; color:#653;}
div.panel p   {margin-left:12px;}
div.scroller h3 {display:none;}

body.sideScroller div#scrollerFrame {width:870px; height:550px; margin-left:12px; overflow-x:scroll; overflow-y:hidden;}
body.sideScroller div.scroller {width:4500px; display:none; overflow:auto;}  /* =  450 x number of panels - 20px */
body.sideScroller div.panel {float:left; width:429px; margin:0 0 0 9px; padding:0 0 0 11px; border-left:1px dotted #999;}
body.sideScroller div.firstpanel {margin-left:-20px;}


/* web scrollers */
 /* width = (number of panels x 450 px) - 20 px */
div#BBDO		{width:6280px; display:block;} /* 14 - on by default */
div#Canon 		{width:2230px;} /* 5 */
div#TourismQld 	{width:4480px;} /* 10 */
div#UKOnline 	{width:2230px;} /* 5 */
div#Levis		{width:2230px;} /* 5 */
div#Mitre10 	{width:1330px;} /* 3 */
div#Elle 		{width:4480px;} /* 10 */
div#IsseyMiyake {width:880px;} /* 2 */
div#Toshiba 	{width:2230px;} /* 5 */
div#Spike 		{width:1780px;} /* 4 */
div#Coke 		{width:1780px;} /* 4 */
div#Elastoplast {width:2230px;} /* 5 */
div#Leuko 		{width:2230px;} /* 5 */
div#Assorted 	{width:1780px;} /* 4 */

/* fashion scrollers */
div#Levis_concept {width:880px; display:block;} /* 2 - on by default */
div#Flight 		{width:1330px;} /* 3 */