/*==== TABLE OF CONTENTS ====*/
/* --------- Links ---------- */
/* ------- Typography ------- */
/* ----- Site Structure ----- */
/* --------- Header --------- */
/* ------- Navigation ------- */
/* --------- Footer --------- */
/* --- Elements (General) --- */
/*  Elements (Page Specific)  */
/* --------- Forms ---------- */
/* ------ Replacements ------ */
/* ---------- Misc ---------- */

body {
	background: #ffffff;
	font: 62.5% Arial, Verdana, sans-serif;
	color: #8c8c8c;
	}
	
a:hover {
	text-decoration: none;
	}
	
sup {
	font-size: smaller;
	}
	
/*========================= LINKS ========================*/

body#abl a, #content a.plus_bl {
	color: #1ea2bf;
	}
	
body#abl a.plus, #content a.plus_bl {
	background: url(../images/plus_bl.gif) left center no-repeat;
	padding-left: 15px;
	}
	
body#aor a {
	color: #dc6d36;
	}
	
body#aor a.plus {
	background: url(../images/plus_or.gif) left center no-repeat;
	padding-left: 15px;
	}
	
body#agr a, #content a.plus_gr {
	color: #7cb01e;
	}
	
body#agr a.plus, #content a.plus_gr {
	background: url(../images/plus_gr.gif) left center no-repeat;
	padding-left: 15px;
	}
	
#content #sidebar_sl a.button {
	display: block;
	color: #afafaf;
	padding-top: 40px;
	text-align: right;
	text-decoration: none;
	width: 145px;
	}
	
#content #sidebar_sl a.button:hover {
	background-position: 0 -40px;
	text-decoration: underline;
	}
	
#content #sidebar_sl a.active {
	background-position: 0 -40px;
	}
	
#wrap #footer a {
	color: #979696;
	text-decoration: none;
	}
	
#wrap #footer a:hover {
	color: #999999;
	}
		
/*====================== TYPOGRAPHY ======================*/
	
h1, h2, h3, h4, h5, h6 {
	
	}

h1 {
	
	}
	
h2 {
	margin: 5px 0 10px 0;
	}
	
p, ul {
	font-size: 1.1em;
	line-height: 1.3em;
	}
	
#sidebar_sl p, #sidebar p, #lf_col p, #rt_col p {
	text-align: right;
	margin-bottom: 10px;
	}
	
#sidebar .hl_box p {
	padding: 0 35px 0 20px;
	}
	
#lf_col_wd p {
	font-size: 1.2em;
	line-height: 1.6em;
	padding-left: 3px;
	margin-bottom: 10px;
	}
	
.box_pod p,
.box_table p,
.box_art p,
.box_clock p {
	margin-bottom: 10px;
	padding: 0 4px;
	}
	
#lf_col p, #rt_col p {
	padding-left: 80px;
	}
		
/*==================== SITE STRUCTURE ===================*/

#wrap {
	margin: 0 auto;
	width: 885px;
	}
	
#content {
	background: url(../images/bg_eye.jpg) right top no-repeat;
	margin-bottom: 10px;
	width: 100%;
	}
	
#rt_col {
	float: right;
	width: 441px;
	}
	
#lf_col {
	float: left;
	width: 441px;
	}
	
#lf_col_wd {
	width:650px;
	}
	
#sidebar {
	float: right;
	width: 195px;
	}
	
#sidebar_sl {
	float: right;
	width: 145px;
	}

/*======================= HEADER ===========================*/

#header {
	position: relative;
	background: url(../images/logo.jpg) 0 0 no-repeat;
	height: 99px;
	width: 100%;
	}
	
#header a#logo {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 60px;
	width: 290px;
	}
	

/*===================== NAVIGATION =========================*/

#nav {
	background: black;
	text-align: center;
	margin-bottom: 10px;
	height: 32px;
	width: 100%;
	}
	
#nav ul li {
	float: left;
	margin-right: 105px;
	}
	
#nav a {
	display: block;
	height: 32px;
	outline: none;
	}
	
#nav a#live {
	background: url(../images/menu/live.gif) no-repeat;
	width: 20px;
	}
	
#nav a#work {
	background: url(../images/menu/work.gif) no-repeat;
	width: 29px;
	}
	
#nav a#stuff {
	background: url(../images/menu/stuff.gif) no-repeat;
	width: 27px;
	}
	
#nav a#learn {
	background: url(../images/menu/learn.gif) no-repeat;
	width: 30px;
	}	
	
#nav a#profile {
	background: url(../images/menu/profile.gif) no-repeat;
	width: 37px;
	}
	
#nav a#contact {
	background: url(../images/menu/contact.gif) no-repeat;
	width: 43px;
	}
	
#nav a:hover#live,
#nav a:hover#work,
#nav a:hover#stuff,
#nav a:hover#learn,
#nav a:hover#profile,
#nav a:hover#contact,
#nav #live.active,
#nav #work.active,
#nav #stuff.active,
#nav #learn.active,
#nav #profile.active,
#nav #contact.active {
	background-position: 0 -32px;
	}
		
#nav li#lft {
	margin-left: 85px;
	}
	
#nav li#rt {
	margin-right: 0;
	}
	
/*======================== FOOTER ===========================*/

#footer {
	border-top: 1px dotted #979696;
	color: #979696;
	margin-bottom: 25px;
	padding-top: 10px;
	text-align: center;
	}

#footer li {
	display: inline;
	margin-right: 7px;
	}
	
/*=================== ELEMENTS (General) ====================*/

.hl_box {
	background: #efefef url(../images/hl_bt.gif) bottom left no-repeat;
	padding-bottom: 15px;
	width: 195px;
	}
	
.hl_box .hl_hd {
	background: url(../images/hl_hd.gif) top left no-repeat;
	margin-bottom: 15px;
	height: 8px;
	width: 100%;
	}

/*=============== ELEMENTS (Page Specific) ================*/

/* Placeholder Page */

#placeholder {
	background: url(../images/placeholder.gif) 0 0 no-repeat;
	height: 469px;
	width: 100%;
	}

/* Contact Page */

#contact {
	background: url(../images/bg_contact.jpg) 0 0 no-repeat;
	position: relative;
	text-align: center;
	height: 469px;
	width: 100%;
	}
	
#contact_info {
	position: absolute;
	top: 95px;
	left: 125px;
	height: 160px;
	width: 150px;
	}
	
#contact_info p {
	margin-bottom: 25px;
	}
	
/* Live and Work Pages */

#sidebar_sl a.button span {
	background: white;
	display: block;
	padding: 5px;
	}
	
#sidebar_sl a#whimsy {
	background: url(../images/live/button_whimsy.jpg) 0 0 no-repeat;
	}
	
#sidebar_sl a#bohemian {
	background: url(../images/live/button_bohemian.jpg) 0 0 no-repeat;
	}
	
#sidebar_sl a#family {
	background: url(../images/live/button_family.jpg) 0 0 no-repeat;
	}
	
#sidebar_sl a#nest {
	background: url(../images/live/button_nest.jpg) 0 0 no-repeat;
	}
	
#sidebar_sl a#shui {
	background: url(../images/live/button_shui.jpg) 0 0 no-repeat;
	}
	
#sidebar_sl a#inspiration {
	background: url(../images/live/button_inspiration.jpg) 0 0 no-repeat;
	}
	
#sidebar_sl a#pear {
	background: url(../images/work/button_pear2.jpg) 0 0 no-repeat;
	}
	
#sidebar_sl a#swish {
	background: url(../images/work/button_swish2.jpg) 0 0 no-repeat;
	}
	
#sidebar_sl a#sandal {
	background: url(../images/work/button_sandal.jpg) 0 0 no-repeat;
	}
	
#sidebar_sl a#tower {
	background: url(../images/work/button_tower.jpg) 0 0 no-repeat;
	}
	
/* Stuff Page */

.stuff {
	height: 700px;
	text-align: right;
	width: 100%;
	}
	
.stuff h2 {
	text-align: left;
	}
	
#stuff_nav {
	text-align: left;
	margin-left: 16px;
	}
	
#stuff_nav li {
	margin-right: 5px;
	display: inline;
	}
	
/* Case Studies */

.case_wrap {
	position: relative;
	height: 545px;
	width: 885px;
	}
	
#lf_col p#inst_hd {
	font-weight: bold;
	margin: 20px 0 10px 0;
	padding-left: 40px;
	text-align: left;
	}
	
#lf_col p#inst {
	background: url(../images/icon_lt.gif) left center no-repeat;
	padding: 0 40px;
	text-align: left;
	}
	
#cs_whimsy {
	background: url(../images/learn/cs_whimsy.jpg) 0 0 no-repeat;
	}
	
#cs_swish {
	background: url(../images/learn/cs_swish.jpg) 0 0 no-repeat;
	}
	
.case_wrap #pod,
.case_wrap #table,
.case_wrap #clock,
.case_wrap #art {
	position: absolute;
	cursor: pointer;
	}
	
.case_wrap #pod {
	top: 195px;
	left: 240px;
	}
	
.case_wrap #table {
	top: 257px;
	right: 220px;
	}
	
.case_wrap #clock {
	top: 85px;
	right: 145px;
	}
	
.case_wrap #art {
	top: 80px;
	left: 180px;
	}
	
/*========================= FORMS ===========================*/
	
/*====================== REPLACEMENTS =======================*/

.rep {
	position: relative;
	overflow: hidden;
	height: 35px;
	width: 100%;
	}

.rep span {
	position: absolute;
	width: 100%;
	height: 100%;
	}
	
.rep span#about_jam {
	background: url(../images/rep/about_jam.gif) top left no-repeat;
	}	

.rep span#modern_whimsy {
	background: url(../images/rep/modern_whimsy.gif) top right no-repeat;
	}
	
.rep span#swish_room {
	background: url(../images/rep/swish_room.gif) top right no-repeat;
	}
	
.rep span#modern_whimsy2 {
	background: url(../images/rep/modern_whimsy2.gif) top right no-repeat;
	}
	
.rep span#swish_room2 {
	background: url(../images/rep/swish_room2.gif) top right no-repeat;
	}
	
.rep span#gary {
	background: url(../images/rep/gary.gif) top left no-repeat;
	}	

.rep span#jodi {
	background: url(../images/rep/jodi.gif) top right no-repeat;
	}
	
.rep span#jodi_advice {
	background: url(../images/rep/jodi_advice.gif) top right no-repeat;
	}
	
.rep span#iwondered {
	background: url(../images/rep/iwondered.gif) top right no-repeat;
	}
	
.rep span#iam {
	background: url(../images/rep/iam.gif) top right no-repeat;
	}
	
.rep span#what_inspires {
	background: url(../images/rep/what_inspires.gif) top right no-repeat;
	}
	
.rep span#who_inspires {
	background: url(../images/rep/who_inspires.gif) top right no-repeat;
	}
	
.rep span#gibbons {
	background: url(../images/rep/stuff/gibbons.gif) top right no-repeat;
	}
	
.rep span#maricich {
	background: url(../images/rep/stuff/maricich.gif) top right no-repeat;
	}
	
.rep span#art {
	background: url(../images/rep/stuff/art.gif) top right no-repeat;
	}
	
.rep span#link {
	background: url(../images/rep/stuff/link.gif) top right no-repeat;
	}
	
.rep span#jemmy {
	background: url(../images/rep/stuff/jemmy.gif) top right no-repeat;
	}
	
.rep span#floral {
	background: url(../images/rep/stuff/floral.gif) top right no-repeat;
	}
	
.rep span#fresco {
	background: url(../images/rep/stuff/fresco.gif) top right no-repeat;
	}
	
.rep span#bar_cafe {
	background: url(../images/rep/stuff/bar_cafe.gif) top right no-repeat;
	}
	
.rep span#milky {
	background: url(../images/rep/stuff/milky.gif) top right no-repeat;
	}
	
.rep span#love {
	background: url(../images/rep/stuff/love.gif) top right no-repeat;
	}
	
.rep span#booth {
	background: url(../images/rep/stuff/booth.gif) top right no-repeat;
	}

/*=========================== MISC ============================*/

.clear {
	clear: both;
	}
	
.center {
	text-align: center;
	}
	
.rt {
	float: right;
	}
	
.lft {
	float: left;
	}
	
.noscript {
	background-color: white;
	border: 1px solid #ccc;
	padding: 20px;	
	text-align: center;
	width: 250px;
}

div.noscript.gallery {
	margin: 0 0 -200px 245px;
}

div.noscript.center {
	margin: 40px auto;
}
	
.spacer {
	display: block;
	clear: both;
	height: 1px;
	width: 100%;
	}
	
.skip {
	height: 0;
	width: 0;
	overflow: hidden;
  	position: absolute; /* for the benefit of IE5 Mac */
	}
	
/* Styling */
	
.b {
	font-weight: bold;
	}
	
.b_it {
	font-weight: bold;
	font-style: italic;
	}
	
.or {
	color: #dc6d36;
	}
	
.gr {
	color: #7cb01e;
	}
	
.bl {
	color: #1ea2bf;
	}
	
.dk {
	color: #272727;
	}
	
.fs_14 {
	font-size: 1.4em;
	}
	
.fs_12 {
	font-size: 1.2em;
	}
	
.db {
	display: block;
	}
	
.it_un {
	font-style: italic;
	text-decoration: underline;
	}
	
.un {
	text-decoration: underline;
	}
		
/* Spacing */

.mb_5 {
	margin-bottom: 5px;
	}

.mb_10 {
	margin-bottom: 10px;
	}
	
.mb_20 {
	margin-bottom: 10px;
	}	

.mb_40 {
	margin-bottom: 40px;
	}
	
.mt_20 {
	margin-top: 20px;
	}
	
.mt_30 {
	margin-top: 30px;
	}
	
.mt_40 {
	margin-top: 40px;
	}
	
.mt_50 {
	margin-top: 50px;
	}

.mt_70 {
	margin-top: 70px;
	}
	
.mt_80 {
	margin-top: 80px;
	}
	
.mt_100 {
	margin-top: 100px;
	}
	
.mt_130 {
	margin-top: 130px;
	}
	
.mt_150 {
	margin-top: 150px;
	}
	
.mr_20 {
	margin-right: 20px;
	}
	
/* Specific Elements */

#content #lf_col .mb_40,
#content #rt_col .mb_40 {
	margin-bottom: 40px;
	}
	
#content #lf_col_wd p.mb_20 {
	margin-bottom: 20px;
	}
	
#content #rt_col .mb_n {
	margin-bottom: 0;
	}
	
#content.pr {
	position: relative;
	}
	
/* Accordian Index */

.sm {list-style:none; width:885px; height:466px; display:block; overflow:hidden}
.sm li {float:left; display:inline; overflow:hidden; margin: 0; padding: 0;}