/*
	Specs:
	------
	thumbnails: 92x92
	
*/

html { min-height: 100%; margin-bottom: 1px; }

body {
	/* font: .85em/1.63em "Lucida Grande", Verdana, sans-serif; */
	font: .75em/1.5em Arial, Verdana, sans-serif;
	color: #595959;
	margin: 0;
	padding: 0;
	background: #fff;
}

h1, h2, h3, h4, h5, p, ul, ol, li, blockquote, form, img {
	margin-top: 0;
	padding: 0;
}

h1 {
	font-size: 1.4em;
	font-weight: normal;
	line-height: normal;
	margin: 0 0 4px 0;
	padding: 0 0 4px 0;
}

h2 {
	text-transform: uppercase;
	font-size: 1.1em;
	line-height: normal;
}

h3 {
	text-transform: uppercase;
	font-size: 1.0em;
	line-height: normal;
}

h4 {
	color: #002f65;
	color: #333;
	margin: 0 0 8px 0;
}

p {
	margin: 0 0 14px 0;
}

a {
	text-decoration: none;
	outline: 0;
	color: #8960a8;	
}

a:hover {
	text-decoration: underline;
}

a:visited {
	border: 0;
	outline: none;
}

a img {
	border: 0;
}


table {
	width: 100%;
	margin: 14px auto;
	border-collapse: collapse;
}

th {
	background: #eaeaea;
	text-align: left;
	line-height: normal;
	padding: 4px;
}

td {
	vertical-align: top;
	padding: 4px;
}

.clearboth {
	clear: both;
}

.redtext {
	color: #c00;
	font-weight: bold;
}


.smaller {
	font-size: 80%;
	display: block;
}


label input {
	display: block;
}

/*
	TEMPLATE
	--------
*/


#ow {
	width: 966px;
	margin: 24px auto;
	border: 1px solid #8960a8;
	position: relative;
}

#iw {
	width: 940px;
	margin: 18px 0 10px 4px;
}

#cw {
	/* content wrapper */

}

#l {
	width: 137px;
	float: left;
	margin: 0;
	padding: 0;
	border: 1px solid #8960a8;
	min-height: 510px;
	height: auto !important;
	height: 510px;
	position: relative;
	z-index: 150; /* check for ie */
	display: inline;
}

#l img {
	position: absolute;
	left: 3px;
	bottom: 3px;
	z-index: 100;
	border: 1px solid #8960a8;
}

#illustration #l img {
	border: 0;
}

#r {
	width: 795px;
	float: right;
	margin: 0;
	padding: 0;
	border: 1px solid #8960a8;
	min-height: 510px;
	height: auto !important;
	height: 510px;
}

/*
	TEMPLATE - INTERIOR VIEW
	-------------------------
*/

.contentarea {
	width: 631px;
	min-height: 420px;
	height: auto !important;
	height: 420px;
	float: left;
	border: 1px solid #8960a8;
	margin: 12px 8px 0 22px;
	display: inline;
}

.contentinner {
	width: 96%;
	padding: 10px 0;
	margin: 0 auto;
	position: relative;
}

.contentinner ul,
.contentinner ol {
	margin-left: 40px;
}

.content-right {
	width: 132px;
	float: right;
}



/*
	LOGOS
	--------
*/

#sitename {
	margin: 0;
	padding: 0;
	width: 162px;
	height: 162px;
	position: absolute;
	left: -7px;
	top: -4px;
	z-index: 200;
}

#sitename a {
	display: block;
	width: 162px;
	height: 162px;
	background: transparent url("/assets/i/logo-esdi-home.png") no-repeat left top;
	text-indent: -9999em;
}

#websites #sitename a {
	background: transparent url("/assets/i/logo-esdi-websites.png") no-repeat left top;
}

#packaging #sitename a {
	background: transparent url("/assets/i/logo-esdi-packaging.png") no-repeat left top;
}

#illustration #sitename a,
#contact #sitename a,
#about #sitename a {
	background: transparent url("/assets/i/logo-esdi-illustration.png") no-repeat left top;
}

#identity #sitename a {
	background: transparent url("/assets/i/logo-esdi-identity.png") no-repeat left top;
}


/*
	NAVBAR
	------
*/


#navbar {
	height: 35px;
	border: 1px solid #8960a8;
	margin: 0 0 6px 20px;
	padding: 0;
	list-style: none;
	position: relative;
}

#navbar li {
	margin: 0;
	padding: 0;
	position: absolute;
	height: 30px;
}

#navbar li a {
	display: block;
	height: 30px;
	background: transparent url("/assets/i/navbar.gif") no-repeat left top;
	text-indent: -999em;
}

/*<li id="nb3"><a href="/design/illustration/index/">Illustration</a></li>
<li id="nb1"><a href="/design/identity/index/">Identity</a></li>
<li id="nb2"><a href="/design/websites/index/">Websites</a></li>
<li id="nb0"><a href="/design/packaging/index/">Packaging Design</a></li>*/

li#nb0 { left: 145px; top: 5px; width: 173px; }
li#nb1 { left: 340px; top: 5px; width:113px; }
li#nb2 { left: 600px; top: 5px; width: 81px; }
li#nb3 { left: 787px; top: 5px; width: 87px; }


li#nb0 a { width:113px; background-position: -637px top; }
li#nb1 a { width: 173px; }
li#nb2 a { width: 81px; background-position: -272px top; }
li#nb3 a { width: 87px; background-position: -451px top; }


li#nb1 a:hover, body#packaging li#nb1 a { background-position: left bottom; }
li#nb2 a:hover, body#identity li#nb2 a { background-position: -272px bottom; }
li#nb3 a:hover, body#websites li#nb3 a { background-position: -451px bottom; }
li#nb0 a:hover, body#illustration li#nb0 a { background-position: -637px bottom; }


/*	
	FOOTER NAVIGATION
	-----------------
*/

.fnavbar {display:inline-block;}
.fnavbar {display:inline;}
.holder {display:table;}

.fnavbar {
	display:table-row;
	padding:0;
	margin:0;
	list-style-type:none;
	white-space:nowrap; 
}

.fnavbar li {display:inline;}

.fnavbar a, .fnavbar a:visited {
	display: block;
	display: inline;
	float: left;
	padding: 4px 16px;
	margin: 0 35px;
	border: 1px solid #fff; 
}

#fw { text-align:center; }

#fw .holder { margin:0 auto; }

.footer-contact {
	text-align: center;
	margin: 0;
	padding: 0;
	color: #8960a8;	
}


/*
	GALLERY THUMBNAILS INDEX
	------------------
*/

#gallery-thumbs {
	list-style: none;
	margin: 0;
	padding: 0;
}

#gallery-thumbs li {
	width: 120px;
	height: 120px;
	float: left;
	margin: 14px;
	border: 1px solid #50227b;
}

#gallery-thumbs li img {
	width: 120px;
	height: 120px;
}


/*
	GALLERY PAGE
	------------
*/
.portfolio-image {
	position: absolute;
	top: 0;
	left: -12px;
}

/*
	LARGE IMAGE DESCRIPTION
	-----------------------
*/

.large-image-description {
	font-weight: bold;
	color: #8960a8;
	margin: 0 0 20px 23px;
	padding: 0;
}

/*
	GALLERY THUMBNAIL NAVIGATION
	----------------------------
*/

h5#hdr-gallery-thumbs {
	color: #8960a8;
	margin: 0 0 0 23px;
	padding: 0;
	float: left;
}

#illustration h5#hdr-gallery-thumbs {
	background: #50227b;
	background: #76208a;
	color: #fff;
	padding: 1px 2px 1px 4px;
}

#packaging h5#hdr-gallery-thumbs {
	background: #273691;
	color: #fff;
	padding: 1px 2px 1px 4px;
}

#navbar-gallery-thumbs {
	list-style: none;
	margin: 0;
	padding: 0;
}
/*
#packaging #gallery-thumbs-wrapper {
	background: #273691;
}

#illustration #gallery-thumbs-wrapper {
	background: #7f3f98;
}
*/

#navbar-gallery-thumbs li {
	width: 8px;
	height: 8px;
	float: left;
	margin: 6px;
	padding: 0;
	border: 1px solid #50227b;
	position: relative;
}

#illustration #navbar-gallery-thumbs li {
	width: 8px;
	height: 8px;
	float: left;
	margin: 0;
	padding: 0;
	border: 6px solid #50227b;
	border: 6px solid #76208a;
	position: relative;
}

#packaging #navbar-gallery-thumbs li {
	width: 8px;
	height: 8px;
	float: left;
	margin: 0;
	padding: 0;
	border: 6px solid #273691;
	position: relative;
}

#navbar-gallery-thumbs li img {
	position: absolute;
	top: 0;
	left: -9999em;
	width: 80px;
	height: 80px;
	border: 1px solid #50227b;
}

#navbar-gallery-thumbs li a {
	display: block;
	width: 6px;
	height: 6px;
	position: absolute;
	left: 1px;
	top: 1px;
	background: #fff;
}

#navbar-gallery-thumbs li a:hover,
#navbar-gallery-thumbs li.selected a {
	background: #50227b;
}

#navbar-gallery-thumbs li a:hover span {
	background: transparent url("../i/dot-purple.gif") repeat-y center top;
	display: block;
	height: 5px;
	width: 85px;
	position: absolute;
	top: -8px;
	left: -37px;
}
#navbar-gallery-thumbs li a:hover img {
	left: -36px;
	top: -90px; 
}

/*
	NAVIGATOR NEXT PREVIOUS SLIDESHOW
	---------------------------------
*/

ul.navigator {
	list-style: none;
	margin: 10px 0 0 0;
	padding: 0;
	height: 60px;
}

ul.navigator li {
	font-size: .9em;
	float: left;
	margin: 0 3px 0 0;
}

li.thumbs {
	margin-left: 10px !important;
}

li.thumbs a {
	display: block;
	width: 15px;
	height: 11px;
	background: #fff url("/assets/i/navbar-thumbfull.png") no-repeat left top;
	text-indent: -999em;
}

li.full a {
	display: block;
	width: 15px;
	height: 11px;
	background: #fff url("/assets/i/navbar-thumbfull.png") no-repeat right top;
	text-indent: -999em;
}


/*
	CATEGORY MENU
	-------------
*/

.category-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.category-menu li {
	line-height: normal;
	margin: 0 8px 6px 0;
	padding: 0 2px;
}

.category-menu li.selected {
	font-weight: bold;
}

#packaging .category-menu li.selected {
	font-weight: normal;
	background: #273691;
}

#illustration .category-menu li.selected {
	font-weight: normal;
	background: #50227b;
	background: #76208a;
}

#packaging .category-menu li.selected a,
#illustration .category-menu li.selected a {
	color: #fff;
}

/*
	SLIDESHOW
	------------
*/

ul#slideshow {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	left: 0;
}

ul#slideshow li {
	margin: 0;
	padding: 0;
	
}


ul#slideshow li * {
/*	display: none;*/
}

ul#slideshow li img {
	position: absolute;
	top: 0;
	left: -12px;
}



/*
	ABOUT
	------------
*/

#hdr-about {
	width: 120px;
	height: 18px;
	text-indent: -999em;
	background: transparent url("/assets/i/hdr-pages.gif") no-repeat left bottom;
}

/*
	CONTACT
	------------
*/

#hdr-contactus {
	width: 120px;
	height: 18px;
	text-indent: -999em;
	background: transparent url("/assets/i/hdr-pages.gif") no-repeat left top;
}

.push {
	width: 90%;
	margin: 20px auto;
}