@charset "UTF-8";
/* CSS Document */


/* ----------------------------------------------- CSS Reset ------------------------------------------ */


html, body, div, span,   
h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
a, abbr, acronym, address, big, cite, code,  
img, ins, kbd, q, s, samp,  
small, strike, strong,   
dl, dt, dd, ol, ul, li,  
fieldset, form, label, legend,  
table, caption, tbody, tfoot, thead, tr, th, td {  
     margin: 0;  
     padding: 0;  
     border: 0;   
     font-size: 100%;  
     vertical-align: baseline;  
     background: transparent;
	
}  

body {  
	background-color:#1A1A1A;
	font-family:Arial, Helvetica, sans-serif;  
}  

h1, h2, h3, h4, h5, h6, p {
	font-weight:100;
}

h1, h2 {
	color:#1A1A1A;
}


p {
	font-size: 10px;
	line-height: 15px;
	color:#808080;
}

h3 {
	font-size:12px;
	line-height:21px;
	color:#FFFFFF;
}

ol, ul {  
    list-style:disc;
	font-size: 10px;
	line-height: 15px;
	color:#808080;
	padding-left:14px;
} 

ul {
	margin-top: 30px;
	margin-bottom: 20px;
}

#container {
	width:800px;
	height: auto;
	margin:0 auto;  
	position: relative;
} 

#start { 
	position: absolute; top: 0%; left: auto; 
	width: 460px; height: 200px; 
	top: 50%; left: 50%; 
	margin: -100px 0 0 -220px; }

.intro {
	padding: 0px;
	border: 0px;
	position: absolute; top: 220px; left: 0px;
}

a:link {
	color:#808080;
	text-decoration: none;
}

a:visited {
	color:#808080;
	text-decoration: none;
}

a:hover {
	color:#FFFFFF;
	text-decoration: none;
}

/* -------------------------------------------------- Styling ------------------------------------------ */

.paragraph {
	padding: 0px;
	border: 0px;
	margin-top: 30px;
	margin-bottom: 20px;
}

.white {
	color:#FFFFFF;
}

.grey {
	color:#808080;
}

hr {
	color:#808080;
	
}


/* -------------------------------------------------- Navigation ------------------------------------------ */


#nav { padding: 0px; border: 0px; width:324px; height: 18px; }

.nav_who   { width:31px; height:18px; float:left; margin-right:18px; background-image:url(images/nav_who.png);   }
.nav_what  { width:38px; height:18px; float:left; margin-right:18px; background-image:url(images/nav_what.png);  }
.nav_how   { width:31px; height:18px; float:left; margin-right:18px; background-image:url(images/nav_how.png);   }
.nav_why   { width:31px; height:18px; float:left; margin-right:18px; background-image:url(images/nav_why.png);   }
.nav_where { width:45px; height:18px; float:left; margin-right:18px; background-image:url(images/nav_where.png); }

.nav_who:hover   { width:31px; height:18px; float:left; margin-right:18px; background-image:url(images/nav_who_hover.png);   }
.nav_what:hover  { width:38px; height:18px; float:left; margin-right:18px; background-image:url(images/nav_what_hover.png);  }
.nav_how:hover   { width:31px; height:18px; float:left; margin-right:18px; background-image:url(images/nav_how_hover.png);   }
.nav_why:hover   { width:31px; height:18px; float:left; margin-right:18px; background-image:url(images/nav_why_hover.png);   }
.nav_where:hover { width:45px; height:18px; float:left; margin-right:18px; background-image:url(images/nav_where_hover.png); }




/* -------------------------------------------------- Titles --------------------------------------------- */


.title {
	padding: 0px;
	border: 0px;
	height: 72px; 
	position: absolute; top: 120px; left: 0px;
}


#title_who {
	margin:0; padding:0;
	width:390px; height: 72px;
	overflow:hidden;
	position: absolute;
	top: 0;
	left: 0;
}

#title_who span { display:block; position:absolute; left:0; top:0; z-index:1; width:390px; height: 72px; margin:0; padding:0; background:url(images/title_who.png) top left no-repeat;
}

#title_what {
	margin:0; padding:0;
	width:388px; height: 72px;
	overflow:hidden;
	position: absolute;
	top: 0;
	left: 0;
}

#title_what span {
	display:block;
	position:absolute; left:0; top:0; z-index:1;
	width:388px; height: 72px;
	margin:0; padding:0;
	background:url(images/title_what.png) top left no-repeat;
}

#title_how {
	margin:0; padding:0;
	width:460px; height: 72px;
	overflow:hidden;
	position: absolute;
	top: 0;
	left: 0;
}

#title_how span {
	display:block;
	position:absolute; left:0; top:0; z-index:1;
	width:460px; height: 72px;
	margin:0; padding:0;
	background:url(images/title_how.png) top left no-repeat;
}

#title_why {
	margin:0; padding:0;
	width:508px; height: 72px;
	overflow:hidden;
	position: absolute;
	top: 0;
	left: 0;
}

#title_why span {
	display:block;
	position:absolute; left:0; top:0; z-index:1;
	width:508px; height: 72px;
	margin:0; padding:0;
	background:url(images/title_why.png) top left no-repeat;
}

#title_where {
	margin:0; padding:0;
	width:677px; height: 72px;
	overflow:hidden;
	position: absolute;
	top: 0;
	left: 0;
}

#title_where span {
	display:block;
	position:absolute; left:0; top:0; z-index:1;
	width:677px; height: 72px;
	margin:0; padding:0;
	background:url(images/title_where.png) top left no-repeat;
}


/* -------------------------------------------------- page elements --------------------------------------------- */


/* -- who -- */

.photo {
	background:url(images/image_cat-townsend.png) top left no-repeat;
	width: 119px; height: 179px;	
}

/* -- what -- */

.project { height: 385px; margin:0px; padding: 0px; border-top:1px solid #808080;}
.project_image { width: 460px; height: 305px; position: absolute; top:40px;  }
.project_text { position: absolute; top:40px; } 
.project_nav { position: absolute; bottom:20px; height: 40px; }

#prev1, #prev2, #prev3, #prev4, #prev5, #prev6, #prev7, #prev8{
  	padding: 0px;
	border: 0px;
	position: absolute; top: 0px;
	cursor: pointer;	
    display: block;
    width: 50px;
    height: 20px;
    background: url("images/project_prev.png");
}

#prev1:hover, #prev2:hover, #prev3:hover, #prev4:hover, #prev5:hover, #prev6:hover, #prev7:hover, #prev8:hover {
	background: url("images/project_prev_hover.png");
}

#next1, #next2, #next3, #next4, #next5, #next6, #next7, #next8{
  	padding: 0px;
	border: 0px;
	position: absolute; top: 0px;
	cursor: pointer;	
    display: block;
    width: 50px;
    height: 20px;
    background: url("images/project_next.png");
}

#next1:hover, #next2:hover, #next3:hover, #next4:hover, #next5:hover, #next6:hover, #next7:hover, #next8:hover {
	background: url("images/project_next_hover.png");
}

/* -- how -- */
    
#how_number1 { background:url(images/how_number_1.png); }
#how_number2 { background:url(images/how_number_2.png); }
#how_number3 { background:url(images/how_number_3.png); }
#how_number4 { background:url(images/how_number_4.png); }

.how_number { width: 120px; height: 125px; }
.how_text { width: 134px; height: 125px; } 

/* -- why -- */
    
#quote {
	background:url(images/quotes_customer.gif) top left no-repeat;
	width: 596px; height: 180px;	
	margin-top: 30px; margin-bottom: 20px;
}

/* -- where -- */


#behance, #flickr, #twitter, #lastfm, #facebook {
  	padding: 0px;
	border: 0px;
	cursor: pointer;	
    display: block;
    width: 52px;
    height: 52px;
}

#behance  { background: url(images/icon_behance.png);}
#flickr   { background:url(images/icon_flickr.png); }
#twitter  { background:url(images/icon_twitter.png); }
#lastfm   { background:url(images/icon_lastfm.png); }
#facebook { background:url(images/icon_facebook.png); }

#behance:hover  { background:url(images/icon_behance_hover.png); }
#flickr:hover   { background:url(images/icon_flickr_hover.png); }
#twitter:hover  { background:url(images/icon_twitter_hover.png); }
#lastfm:hover   { background:url(images/icon_lastfm_hover.png); }
#facebook:hover { background:url(images/icon_facebook_hover.png); }

/* -- footer -- */

.footer { height: 80px; width: 800px; margin:0px; padding: 0px; border-top:1px solid #808080;}


/* -------------------------------------------------- statements --------------------------------------------- */


.statement_who {
	padding: 0px;
	border: 0px;
	height: 55px; 
	position: absolute; top: 340px; left: 0px;
}


#statement_who {
	margin:0; padding:0;
	width:544px; height: 55px;
	overflow:hidden;
	position: absolute;
	top: 0;
	left: 0;
}

#statement_who span {
	display:block;
	position:absolute; left:0; top:0; z-index:1;
	width:544px; height: 55px;
	margin:0; padding:0;
	background:url(images/statement_who.png) top left no-repeat;
}

.statement_how {
	padding: 0px;
	border: 0px;
	height: 55px; 
	position: absolute; left: 0px;
}


#statement_how {
	margin:0; padding:0;
	width:663px; height: 55px;
	overflow:hidden;
	position: absolute;
	top: 0;
	left: 0;
}

#statement_how span {
	display:block;
	position:absolute; left:0; top:0; z-index:1;
	width:663px; height: 55px;
	margin:0; padding:0;
	background:url(images/statement_how.png) top left no-repeat;
}

#statement_start {
	margin:0; padding:0;
	width:350px; height: 24px;
	overflow:hidden;
	position: absolute;
	top: 0;
	left: 0;
}

#statement_start span {
	display:block;
	position:absolute; left:0; top:0; z-index:1;
	width:350px; height: 24px;
	margin:0; padding:0;
	background:url(images/statement_this-website-is-not-pretty.png) top left no-repeat;
}


/* -------------------------------------------------- subtitles --------------------------------------------- */



.subtitle {
	padding: 0px;
	border: 0px;
	height: 13px; 
	position: absolute; top: 0px; left: 0px;
}




/* -- subtitle --*/

#subtitle_you-might-like-to,
#subtitle_can-i-help-you,
#subtitle_project-manager,
#subtitle_strategist,
#subtitle_creative,
#subtitle_why-not-pretty,
#subtitle_why1,
#subtitle_why2,
#subtitle_why3,
#subtitle_why4,
#subtitle_how1,
#subtitle_how2,
#subtitle_how3,
#subtitle_how4,
#subtitle_behance,
#subtitle_flickr,
#subtitle_twitter,
#subtitle_lastfm,
#subtitle_facebook,
#subtitle_your-name,
#subtitle_your-email-address,
#subtitle_your-message,
#subtitle_not-pretty-branding,
#subtitle_wedding-invitation,
#subtitle_birth-announcement {
	overflow:hidden;
	position: absolute; left: 0; top: 0;
	margin:0; padding:0;
	height: 13px;
}


#subtitle_you-might-like-to { width:129px; }
#subtitle_can-i-help-you { width:111px; }

#subtitle_project-manager { width:120px; }
#subtitle_strategist { width:74px; }
#subtitle_creative { width:61px; }
#subtitle_why-not-pretty { width: 155px; }

#subtitle_why1 { width:531px; }
#subtitle_why2 { width:531px; }
#subtitle_why3 { width:531px; }
#subtitle_why4 { width:205px; }

#subtitle_how1 { width:151px; }
#subtitle_how2 { width:149px; }
#subtitle_how3 { width:176px; }
#subtitle_how4 { width:174px; }

#subtitle_behance  { width:60px; }
#subtitle_flickr   { width:45px; }
#subtitle_twitter  { width:55px; }
#subtitle_lastfm   { width:56px; }
#subtitle_facebook { width:67px; }

#subtitle_your-name { width: 77px; }
#subtitle_your-email-address { width: 139px; }
#subtitle_your-message { width: 100px; }

#subtitle_not-pretty-branding { width: 148px; }
#subtitle_wedding-invitation  { width: 148px; }
#subtitle_birth-announcement  { width: 148px; }



/* -- subtitle span --*/

#subtitle_you-might-like-to span,
#subtitle_can-i-help-you span,
#subtitle_project-manager span,
#subtitle_strategist span,
#subtitle_creative span,
#subtitle_why-not-pretty span,
#subtitle_why1 span,
#subtitle_why2 span,
#subtitle_why3 span,
#subtitle_why4 span,
#subtitle_how1 span,
#subtitle_how2 span,
#subtitle_how3 span,
#subtitle_how4 span,
#subtitle_behance span,
#subtitle_flickr span,
#subtitle_twitter span,
#subtitle_lastfm span,
#subtitle_facebook span,
#subtitle_your-name span,
#subtitle_your-email-address span,
#subtitle_your-message span,
#subtitle_not-pretty-branding span,
#subtitle_wedding-invitation span,
#subtitle_birth-announcement span {
	display:block;
	position:absolute; left:0; top:0; z-index:1;
	margin:0; padding:0;
	height: 13px;
}

#subtitle_you-might-like-to span { width:129px; background:url(images/subtitle_you-might-like-to.png) top left no-repeat; }
#subtitle_can-i-help-you span    { width:111px; background:url(images/subtitle_can-i-help-you.png) top left no-repeat; }

#subtitle_project-manager span { width:120px; background:url(images/subtitle_project-manager.png) top left no-repeat; }
#subtitle_strategist span      { width:74px;  background:url(images/subtitle_strategist.png) top left no-repeat; }
#subtitle_creative span        { width:61px;  background:url(images/subtitle_creative.png) top left no-repeat; }
#subtitle_why-not-pretty span  { width:155px; background:url(images/subtitle_why-not-pretty.png) top left no-repeat; }

#subtitle_why1 span { width:531px; background:url(images/subtitle_why1.png) top left no-repeat; }
#subtitle_why2 span { width:531px; background:url(images/subtitle_why2.png) top left no-repeat; }
#subtitle_why3 span { width:531px; background:url(images/subtitle_why3.png) top left no-repeat; }
#subtitle_why4 span { width:205px; background:url(images/subtitle_why4.png) top left no-repeat; }

#subtitle_how1 span { width:151px; background:url(images/subtitle_research.png) top left no-repeat; }
#subtitle_how2 span { width:149px; background:url(images/subtitle_strategy.png) top left no-repeat; }
#subtitle_how3 span { width:176px; background:url(images/subtitle_development.png) top left no-repeat; }
#subtitle_how4 span { width:174px; background:url(images/subtitle_measurement.png) top left no-repeat; }

#subtitle_behance span  { width:60px; background:url(images/subtitle_behance.png) top left no-repeat; }
#subtitle_flickr span   { width:45px; background:url(images/subtitle_flickr.png) top left no-repeat; }
#subtitle_twitter span  { width:55px; background:url(images/subtitle_twitter.png) top left no-repeat; }
#subtitle_lastfm span   { width:56px; background:url(images/subtitle_lastfm.png) top left no-repeat; }
#subtitle_facebook span { width:67px; background:url(images/subtitle_facebook.png) top left no-repeat; }

#subtitle_your-name span { width: 77px; background:url(images/subtitle_your-name.png) top left no-repeat; }
#subtitle_your-email-address span { width: 139px; background:url(images/subtitle_your-email-address.png) top left no-repeat; }
#subtitle_your-message span { width: 100px; background:url(images/subtitle_your-message.png) top left no-repeat; }

#subtitle_not-pretty-branding span { width: 148px; background:url(images/subtitle_not-pretty-branding.png) top left no-repeat; }
#subtitle_wedding-invitation span { width: 148px; background:url(images/subtitle_wedding-invitation.png) top left no-repeat; }
#subtitle_birth-announcement span { width: 148px; background:url(images/subtitle_birth-announcement.png) top left no-repeat; }


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

/* -- column width -- */

.width_1cols  { width: 52px; }
.width_2cols  { width: 120px; }
.width_3cols  { width: 188px; }
.width_4cols  { width: 256px; }
.width_5cols  { width: 324px; }
.width_6cols  { width: 392px; }
.width_7cols  { width: 460px; }
.width_8cols  { width: 528px; }
.width_9cols  { width: 596px; }
.width_10cols { width: 664px; }
.width_11cols { width: 732px; }
.width_12cols { width: 800px; }

/* -- horizontal position -- */

.position_col1  { position:absolute; left: 0px; }
.position_col2  { position:absolute; left: 68px; }
.position_col3  { position:absolute; left: 136px; }
.position_col4  { position:absolute; left: 204px; }
.position_col5  { position:absolute; left: 272px; }
.position_col6  { position:absolute; left: 340px; }
.position_col7  { position:absolute; left: 408px; }
.position_col8  { position:absolute; left: 476px; } 
.position_col9  { position:absolute; left: 544px; }
.position_col10 { position:absolute; left: 612px; }
.position_col11 { position:absolute; left: 680px; }
.position_col12 { position:absolute; left: 748px; }

.position_nextcol { position:absolute; left: 16px; }

/* -- vertical position -- */

.vertical_position_0px   { position:absolute; margin-top: 0px; top: 0px;}
.vertical_position_10px  { position:absolute; margin-top: 0px; top: 10px;}
.vertical_position_20px  { position:absolute; margin-top: 0px; top: 20px;}
.vertical_position_30px  { position:absolute; margin-top: 0px; top: 30px;}
.vertical_position_40px  { position:absolute; margin-top: 0px; top: 40px;}
.vertical_position_50px  { position:absolute; margin-top: 0px; top: 50px;}
.vertical_position_60px  { position:absolute; margin-top: 0px; top: 60px;}
.vertical_position_70px  { position:absolute; margin-top: 0px; top: 70px;}
.vertical_position_80px  { position:absolute; margin-top: 0px; top: 80px;}
.vertical_position_90px  { position:absolute; margin-top: 0px; top: 90px;}
.vertical_position_100px { position:absolute; margin-top: 0px; top: 100px;}
.vertical_position_120px { position:absolute; margin-top: 0px; top: 120px;}
.vertical_position_140px { position:absolute; margin-top: 0px; top: 140px;}
.vertical_position_160px { position:absolute; margin-top: 0px; top: 160px;}
.vertical_position_180px { position:absolute; margin-top: 0px; top: 180px;}
.vertical_position_200px { position:absolute; margin-top: 0px; top: 200px;}
.vertical_position_210px { position:absolute; margin-top: 0px; top: 210px;}
.vertical_position_220px { position:absolute; margin-top: 0px; top: 220px;}
.vertical_position_240px { position:absolute; margin-top: 0px; top: 240px;}
.vertical_position_260px { position:absolute; margin-top: 0px; top: 260px;}
.vertical_position_280px { position:absolute; margin-top: 0px; top: 280px;}
.vertical_position_300px { position:absolute; margin-top: 0px; top: 300px;}
.vertical_position_320px { position:absolute; margin-top: 0px; top: 320px;}
.vertical_position_330px { position:absolute; margin-top: 0px; top: 330px;}
.vertical_position_340px { position:absolute; margin-top: 0px; top: 340px;}
.vertical_position_360px { position:absolute; margin-top: 0px; top: 360px;}
.vertical_position_380px { position:absolute; margin-top: 0px; top: 380px;}
.vertical_position_400px { position:absolute; margin-top: 0px; top: 400px;}
.vertical_position_420px { position:absolute; margin-top: 0px; top: 420px;}
.vertical_position_440px { position:absolute; margin-top: 0px; top: 440px;}
.vertical_position_460px { position:absolute; margin-top: 0px; top: 460px;}
.vertical_position_480px { position:absolute; margin-top: 0px; top: 480px;}
.vertical_position_500px { position:absolute; margin-top: 0px; top: 500px;}
.vertical_position_520px { position:absolute; margin-top: 0px; top: 520px;}
.vertical_position_540px { position:absolute; margin-top: 0px; top: 540px;}
.vertical_position_560px { position:absolute; margin-top: 0px; top: 560px;}
.vertical_position_580px { position:absolute; margin-top: 0px; top: 580px;}
.vertical_position_600px { position:absolute; margin-top: 0px; top: 600px;}
.vertical_position_620px { position:absolute; margin-top: 0px; top: 620px;}
.vertical_position_640px { position:absolute; margin-top: 0px; top: 640px;}
.vertical_position_660px { position:absolute; margin-top: 0px; top: 660px;}
.vertical_position_680px { position:absolute; margin-top: 0px; top: 680px;}
.vertical_position_700px { position:absolute; margin-top: 0px; top: 700px;}
.vertical_position_720px { position:absolute; margin-top: 0px; top: 720px;}
.vertical_position_740px { position:absolute; margin-top: 0px; top: 740px;}
.vertical_position_760px { position:absolute; margin-top: 0px; top: 760px;}
.vertical_position_780px { position:absolute; margin-top: 0px; top: 780px;}
.vertical_position_800px { position:absolute; margin-top: 0px; top: 800px;}
.vertical_position_820px { position:absolute; margin-top: 0px; top: 820px;}
.vertical_position_840px { position:absolute; margin-top: 0px; top: 840px;}
.vertical_position_860px { position:absolute; margin-top: 0px; top: 860px;}
.vertical_position_880px { position:absolute; margin-top: 0px; top: 880px;}
.vertical_position_900px { position:absolute; margin-top: 0px; top: 900px;}
.vertical_position_920px { position:absolute; margin-top: 0px; top: 920px;}
.vertical_position_940px { position:absolute; margin-top: 0px; top: 940px;}
.vertical_position_960px { position:absolute; margin-top: 0px; top: 960px;}
.vertical_position_980px { position:absolute; margin-top: 0px; top: 980px;}
.vertical_position_1000px { position:absolute; margin-top: 0px; top: 1000px;}
.vertical_position_1020px { position:absolute; margin-top: 0px; top: 1020px;}
.vertical_position_1040px { position:absolute; margin-top: 0px; top: 1040px;}
.vertical_position_1060px { position:absolute; margin-top: 0px; top: 1060px;}
.vertical_position_1080px { position:absolute; margin-top: 0px; top: 1080px;}
.vertical_position_1100px { position:absolute; margin-top: 0px; top: 1100px;}
.vertical_position_1120px { position:absolute; margin-top: 0px; top: 1120px;}
.vertical_position_1140px { position:absolute; margin-top: 0px; top: 1140px;}
.vertical_position_1160px { position:absolute; margin-top: 0px; top: 1160px;}
.vertical_position_1180px { position:absolute; margin-top: 0px; top: 1180px;}
.vertical_position_1200px { position:absolute; margin-top: 0px; top: 1200px;}
.vertical_position_1220px { position:absolute; margin-top: 0px; top: 1220px;}
.vertical_position_1240px { position:absolute; margin-top: 0px; top: 1240px;}
.vertical_position_1260px { position:absolute; margin-top: 0px; top: 1260px;}
.vertical_position_1280px { position:absolute; margin-top: 0px; top: 1280px;}
.vertical_position_1300px { position:absolute; margin-top: 0px; top: 1300px;}
.vertical_position_1320px { position:absolute; margin-top: 0px; top: 1320px;}
.vertical_position_1340px { position:absolute; margin-top: 0px; top: 1340px;}
.vertical_position_1360px { position:absolute; margin-top: 0px; top: 1360px;}
.vertical_position_1380px { position:absolute; margin-top: 0px; top: 1380px;}
.vertical_position_1400px { position:absolute; margin-top: 0px; top: 1400px;}
.vertical_position_1420px { position:absolute; margin-top: 0px; top: 1420px;}
.vertical_position_1440px { position:absolute; margin-top: 0px; top: 1440px;}
.vertical_position_1460px { position:absolute; margin-top: 0px; top: 1460px;}
.vertical_position_1480px { position:absolute; margin-top: 0px; top: 1480px;}
.vertical_position_1500px { position:absolute; margin-top: 0px; top: 1500px;}
.vertical_position_1520px { position:absolute; margin-top: 0px; top: 1520px;}
.vertical_position_1540px { position:absolute; margin-top: 0px; top: 1540px;}
.vertical_position_1560px { position:absolute; margin-top: 0px; top: 1560px;}
.vertical_position_1580px { position:absolute; margin-top: 0px; top: 1580px;}

.align_right { position:absolute; right: 0px; }