*{
	margin: 0;
	padding: 0;
	outline: none;
}

body{
	font-family: verdana, arial, sans serif;
	font-size: 10px;
	line-height: 16px;
	color: #333333;
}

/***********************
	UNIVERSAL TAGS
***********************/
a{}
a:hover{}

a img{border: none;}

/***********************
	FRAMEWORK
***********************/
#mainContainer{
	position: relative;
	width: 954px;
	height: 540px;
	margin: 0 auto 0 auto;
	background: url("/lib/img/bground-main.gif") top left no-repeat;
}

h2{	/* Graphic Design | Art Direction */
	width: 201px;
	height: 6px;
	position: absolute;
	top: 24px;
	left: 374px;
}

/***********************
	NAVIGATION
***********************/

#navigation{
	position: absolute;
	z-index: 10;
}

#navigation ul{
	list-style: none;
}

#navigation ul li{
	position: absolute;
	width: 88px;
	left: 14px;
	overflow: hidden;
	top: 0;
	left: 0;
}

#navigation ul li a{
	display: block;
	width: 88px;
	left: 14px;
	line-height: 14px;
	overflow: hidden;
	text-indent: -9999px;
	background: url("/lib/img/nav.gif") top left no-repeat;
}

#navigation ul li#karinsoukup{ top: 471px; left: 433px;}
#navigation ul li#karinsoukup a{background-position: -264px 0;}
#navigation ul li#karinsoukup a:hover{background-position: -264px -14px;}

#navigation ul li#about{ top: 434px; left: 322px;}
#navigation ul li#about a{background-position: 0 0;}
#navigation ul li#about a:hover{background-position: 0 -14px;}

#navigation ul li#portfolio{ top: 434px; left: 433px;}
#navigation ul li#portfolio a{background-position: -88px 0;}
#navigation ul li#portfolio a:hover{background-position: -88px -14px;}

#navigation ul li#contact{ top: 434px; left: 544px;}
#navigation ul li#contact a{background-position: -176px 0;}
#navigation ul li#contact a:hover{background-position: -176px -14px;}

/***********************
	HOME
***********************/

h1{ /* LOGO */
	width: 377px;
	height: 256px;
	position: absolute;
	top: 83px;
	left: 288px;
}

h3#capabilities{ /* Capabilities */
	width: 372px;
	height: 236px;
	position: absolute;
	top: 363px;
	left: 290px;
}

h3#banner{ /* Red Banner */
	width: 151px;
	height: 264px;
	position: absolute;
	top: 0px;
	left: 26px;
}

/***********************
	CONTACT
***********************/

h3#contact1{
	width: 486px;
	height: 300px;
	position: absolute;
	top: 99px;
	left: 235px;
	z-index: 1;
}

#contactEmail{
	display: block;
	width: 404px;
	height: 11px;
	position: absolute;
	z-index: 2;
	top: 377px;
	left: 275px;
	overflow: hidden;
}

/***********************
	ABOUT
***********************/

h3#about1{
	width: 512px;
	height: 304px;
	position: absolute;
	top: 73px;
	left: 219px;
	z-index: 1;
}

#downloadResume{
	display: block;
	width: 66px;
	height: 24px;
	position: absolute;
	z-index: 2;
	top: 241px;
	left: 665px;
	overflow: hidden;
	text-indent: -9999px;
	background: url("/lib/img/btn-downloadResume.gif") top left no-repeat;
}
#downloadResume:hover{background-position: 0 -24px;}

#email{
	display: block;
	width: 38px;
	height: 26px;
	position: absolute;
	z-index: 2;
	top: 351px;
	left: 693px;
	overflow: hidden;
	text-indent: -9999px;
	background: url("/lib/img/btn-email.gif") top left no-repeat;
}
#email:hover{background-position: 0 -26px;}

#easteregg{
	display: block;
	position: absolute;
	top: 71px;
	left: 219px;
	z-index: 3;
	height: 54px;
	width: 54px;
	background: url("/lib/img/about-pic.gif") 0 54px no-repeat;
}

#easteregg:hover{background: url("/lib/img/about-pic.gif") top left no-repeat;}

/* AWARD TOOLTIPS */
.easterEggTip{
	width: 254px;
	height: 20px;
	background: url("/lib/img/click-for-portrait.gif") top left no-repeat;
	text-indent: -9999px;
	overflow: auto;
	z-index: 25;
}

.easterEggTip .tip-top, .easterEggTip .tip-text, .easterEggTip .tip-bottom{display: none;}


/***********************
	PORTFOLIO
***********************/

	/* LEFT NAV */
#portfolioNav{
	position: absolute;
	top: 58px;
}

#portfolios{
	position: relative;
	height: 352px;
	width: 178px;
	overflow: hidden;
}

#portfolioNav ul{
	position: relative;
	list-style: none;
}

#portfolioNav ul li{
	margin-bottom: 4px;
}

#portfolioNav ul li a{
	display: block;
	font-size: 10px;
	line-height: 13px;
	color: #939393;
	text-transform: uppercase;
	text-decoration: none;
	text-align: right;
	padding: 2px 0 7px 0;
	letter-spacing: .05px;
}

#portfolioNav ul li.active a, #portfolioNav ul li a:hover{color: #000000;}
#portfolioNav ul li.active a.residential, #portfolioNav ul li a.residential:hover{background: url("/lib/img/portfolio-type-residential.gif") bottom right no-repeat;}
#portfolioNav ul li.active a.fashion, #portfolioNav ul li a.fashion:hover{background: url("/lib/img/portfolio-type-fashion.gif") bottom right no-repeat;}
#portfolioNav ul li.active a.theArts, #portfolioNav ul li a.theArts:hover{background: url("/lib/img/portfolio-type-theArts.gif") bottom right no-repeat;}
#portfolioNav ul li.active a.editorial, #portfolioNav ul li a.editorial:hover{background: url("/lib/img/portfolio-type-editorial.gif") bottom right no-repeat;}
#portfolioNav ul li.active a.education, #portfolioNav ul li a.education:hover{background: url("/lib/img/portfolio-type-education.gif") bottom right no-repeat;}
#portfolioNav ul li.active a.healthcare, #portfolioNav ul li a.healthcare:hover{background: url("/lib/img/portfolio-type-healthcare.gif") bottom right no-repeat;}
#portfolioNav ul li.active a.specialEvent, #portfolioNav ul li a.specialEvent:hover{background: url("/lib/img/portfolio-type-specialEvent.gif") bottom right no-repeat;}
#portfolioNav ul li.active a.nonProfit, #portfolioNav ul li a.nonProfit:hover{background: url("/lib/img/portfolio-type-nonProfit.gif") bottom right no-repeat;}
#portfolioNav ul li.active a.promotion, #portfolioNav ul li a.promotion:hover{background: url("/lib/img/portfolio-type-promotion.gif") bottom right no-repeat;}
#portfolioNav ul li.active a.furnitureDesign, #portfolioNav ul li a.furnitureDesign:hover{background: url("/lib/img/portfolio-type-furnitureDesign.gif") bottom right no-repeat;}
#portfolioNav ul li.active a.photography, #portfolioNav ul li a.photography:hover{background: url("/lib/img/portfolio-type-photography.gif") bottom right no-repeat;}
#portfolioNav ul li.active a.weddings, #portfolioNav ul li a.weddings:hover{background: url("/lib/img/portfolio-type-weddings.gif") bottom right no-repeat;}
#portfolioNav ul li.active a.conceptWork, #portfolioNav ul li a.conceptWork:hover{background: url("/lib/img/portfolio-type-conceptWork.gif") bottom right no-repeat;}
#portfolioNav ul li.active a.personalWork, #portfolioNav ul li a.personalWork:hover{background: url("/lib/img/portfolio-type-personalWork.gif") bottom right no-repeat;}

#moreProjects{
	font-style: italic;
	text-align: right;
	padding: 8px 0 0 0;
	font-size: 10px;
	color: #ff3333;
}

#moreProjects a{
	display: block;
	width: 11px;
	height: 9px;
	overflow: hidden;
	text-indent: -99999px;
	position: relative;
	left: 166px;
	margin-bottom: 4px;
}

#moreProjects a#up{background: url("/lib/img/btn-up.gif") top left no-repeat;}
#moreProjects a#up:hover{background: url("/lib/img/btn-up.gif") 0 -9px no-repeat;}

#moreProjects a#down{margin: 7px 0 0 0; background: url("/lib/img/btn-down.gif") top left no-repeat;}
#moreProjects a#down:hover{background: url("/lib/img/btn-down.gif") 0 -9px no-repeat;}

	/* PROJET INFO */
#projectInfo{
	position: absolute;
	top: 61px;
	right: 9px;
	width: 166px;
}

#projectInfo h3{
	font-size: 9px;
	line-height: 14px;
	font-weight: bold;
	text-transform: uppercase;
	color: #ff3333;
	letter-spacing: .4px;
	padding: 0 0 0 0;
}

#projDescriptions{
	font-size: 10px;
	line-height: 14px;
	letter-spacing: .05px;
	position: relative;
}

#projDescriptions p{
	padding: 6px 0 0 0;
}

#projDescriptions #longDesc{
	position: absolute;
	top: 0;
	visibility: hidden;
}

#projDescriptions a#readMore{
	color: #999999;
	letter-spacing: .05px;
	font-size: 9px;
	font-style: italic;
}

#projDescriptions a#backToThumbnails{
	display: block;
	letter-spacing: .4px;
	font-size: 9px;
	font-weight: bold;
	font-style: italic;
	color: #333333;
	height: 12px;
	line-height: 12px;
	background: url("/lib/img/bullet-close.gif") top left no-repeat;
	padding: 0 0 0 22px;
	margin: 7px 0 0 0;
	text-decoration: none;
}

#projDescriptions a#backToThumbnails:hover{
	background: url("/lib/img/bullet-close-o.gif") top left no-repeat;
}

#projThumbnails{
	padding: 20px 0 0 0;
}

#projThumbnails ul, #projThumbnails ol{list-style: none;}

#projThumbnails ul li{
	font-size: 9px;
	line-height: 12px;
	font-weight: normal;
	font-style: italic;
}

#projThumbnails ul li.web{color: #ff3333;}
#projThumbnails ul li.printCollateral{color: #46aea9;}
#projThumbnails ul li.environmentalDesign{color: #e28344;}
#projThumbnails ul li.photographyArtDirection{color: #b9bb20;}
#projThumbnails ul li.logoAndStationary {color: #8c8e8c;}
#projThumbnails ul li.retouching {color: #853470;}
#projThumbnails ul li.illustration {color: #81a9d0;}
#projThumbnails ul li.productDesign {color: #ca327e;}
#projThumbnails ul li.packaging {color: #76b428;}

#projThumbnails ol{
	overflow: auto;
	position: relative;
	width: 171px;
	_width: 160px;
	padding: 2px 0 0 0;
}
#projThumbnails ol li{
	width: 17px;
	height: 18px;
	float: left;
	margin: 6px 7px 0 0;
}

#projThumbnails ol li a{
	border: 1px solid #000;
	display: block;
	height: 16px;
	width: 15px;
	text-align: center;
	line-height: 15px;
	text-decoration: none;
	font-family: Georgia, Times New Roman, serif;
	color: #333;
}

#projThumbnails ol li.web a{border-color: #ff3333;}
#projThumbnails ol li.printCollateral a{border-color: #46aea9;}
#projThumbnails ol li.environmentalDesign a{border-color: #e28344;}
#projThumbnails ol li.photographyArtDirection a{border-color: #b9bb20;}
#projThumbnails ol li.logoAndStationary a{border-color: #8c8e8c;}
#projThumbnails ol li.retouching a{border-color: #853470;}
#projThumbnails ol li.illustration a{border-color: #81a9d0;}
#projThumbnails ol li.productDesign a{border-color: #ca327e;}
#projThumbnails ol li.packaging a{border-color: #76b428;}

#projThumbnails ol li.web.active a, #projThumbnails ol li.web a:hover{background-color: #ff3333; color: #fff;}
#projThumbnails ol li.printCollateral.active a, #projThumbnails ol li.printCollateral a:hover{background-color: #46aea9; color: #fff;}
#projThumbnails ol li.environmentalDesign.active a, #projThumbnails ol li.environmentalDesign a:hover{background-color: #e28344; color: #fff;}
#projThumbnails ol li.photographyArtDirection.active a, #projThumbnails ol li.photographyArtDirection a:hover{background-color: #b9bb20; color: #fff;}
#projThumbnails ol li.logoAndStationary.active a, #projThumbnails ol li.logoAndStationary a:hover{background-color: #8c8e8c; color: #fff;}
#projThumbnails ol li.retouching.active a, #projThumbnails ol li.retouching a:hover{background-color: #853470; color: #fff;}
#projThumbnails ol li.illustration.active a, #projThumbnails ol li.illustration a:hover{background-color: #81a9d0; color: #fff;}
#projThumbnails ol li.productDesign.active a, #projThumbnails ol li.productDesign a:hover{background-color: #ca327e; color: #fff;}
#projThumbnails ol li.packaging.active a, #projThumbnails ol li.packaging a:hover{background-color: #76b428; color: #fff;}

#projAwards{padding: 20px 0 0 0;}
#projAwards h3{
	text-transform: none;
	font-style: italic;
	letter-spacing: 0;
}

#projAwards ul{
	list-style: none;
	line-height: 14px;
	padding: 1px 0 0 0;
}

#projAwards ul li a, #projAwards ul li{
	font-size: 9px;
	color: #666666;
	letter-spacing: .5px;
	font-style: italic;
}

#projMisc{
	font-size: 9px;
	line-height: 12px;
	letter-spacing: .2px;
	color: #000;
	padding: 20px 0 0 0;
}

/* AWARD TOOLTIPS */
.awardTooltip{
	width: 235px;
	background-color: #fff;
	border: 1px solid #ff1616;
	font-size: 9px;
	line-height: 12px;
	color: #333333;
	letter-spacing: .2px;
	font-style: italic;
	padding: 0 0 5px 0;
	overflow: auto;
	z-index: 20;
}

.awardTooltip .tip-top, .awardTooltip .tip-text, .awardTooltip .tip-bottom{display: none;}

.awardTooltip h3{
	font-size: 9px;
	line-height: 12px;
	color: #fff;
	font-weight: bold;
	font-style: italic;
	background-color: #ff1616;
	padding: 2px 7px 4px 14px;
	letter-spacing: .8px;
}

.awardTooltip h4{
	font-size: 9px;
	line-height: 12px;
	color: #ff1616;
	font-weight: bold;
	font-style: italic;
	padding: 9px 4px 2px 10px;
}

.awardTooltip p{
	padding: 0 4px 5px 10px;
}

.awardTooltip img{
	float: left;
	padding: 4px 6px 5px 8px;
}

/* PROJET PHOTOS */
#projPhotos{
	width: 537px;
	height: 347px;
	line-height: 347px;
	overflow: hidden;
	position: absolute;
	top: 65px;
	left: 209px;
	z-index: 1;
}

#projPhotos .photo{
	position: absolute;
	top: 0;
	visibility: hidden;
}

#projPhotos .photo.active{visibility: visible;}

#projPhotos #previous, #projPhotos #next{
	position: absolute;
	display: block;
	height: 347px;
	width: 268px;
	z-index: 2;
	text-indent: -9999px;
	overflow: hidden;
}
#projPhotos #previous:hover{
	background: url("/lib/img/btn-prev.png") center left no-repeat;
	_background: url("/lib/img/btn-prev.gif") center left no-repeat;
}

#projPhotos #next{left: 269px;}
#projPhotos #next:hover{
	background: url("/lib/img/btn-next.png") center right no-repeat;
	_background: url("/lib/img/btn-next.gif") center right no-repeat;
}