/* ------------------------- RESET DEFAULT STYLES ------------------------- */

body,div,dl,dt,dd,ul,li,h1,h2,h3,h4,p,table,td,img { margin:0;padding:0;border:none } 
ul {list-style:none}
a {outline:none;display:block;position:relative;cursor:pointer/* to make the links clickable in IE with alpha transparency applied */}
h1, h2 {font-size:0} 
h2 span,img {display:block}
div,ul,li,dl,a,b,p {position:absolute;text-indent:-9999px}

/* ------------------------- RESET DEFAULT STYLES ------------------------- */

body {
	background:#243329;
	text-align:center
	}
	#container {
		position:relative;
		margin:0 auto;
		width:1005px;
		height:666px;
		overflow:hidden
		}
		#mainStage {
			top:-58px;
			left:0;
			width:1005px;
			height:808px;
			background:#243329 url(../img/body.png) 0 0 repeat;
			border-top:4px solid #9AEC1B;
			z-index:100
			}
			.lip {
				position:absolute;
				margin:0 auto;
				width:1005px;
				height:90px;
				background:#243329 url(../img/body.png) 0 0 repeat;
				z-index:200
			}
			.lip .grid {height:90px
			}
			.grid {
				position:relative;
				margin:0 auto;
				width:1005px;
				height:720px;
				background:url(../img/grid.png) 0 0 repeat
			}
			#illustrationContainer .lip {top:-90px;left:0}
			#animationContainer .lip {top:572px;left:-4px;background:#243329;border-top:4px solid #9AEC1B}
			#animationContainer .grid {background:url(../img/grid.png) 0 4px;background:#243329}
			#bioContainer .lip {top:-90px;left:0}


/* -------------------------------------------------- NAVIGATION TABS -------------------------------------------------------*/

			ul#navigation {
				top:90px;
				left:0;
				width:1005px;
				height:626px;
				background:transparent url(../img/stage.png) no-repeat 0 0
				}
				ul#navigation li {
				width:139px;
				height:86px;
				background-repeat:no-repeat
				}
				ul#navigation li#logo {top:90px;left:147px;width:282px;background:url(../img/logo.png)}
				li#illustration {top:0;left:576px;background:#3A9FD2}
				li#animation {top:90px;left:719px;background:#243329}
				li#contact {top:270px;left:290px;background:#FF3263}
				li#bio {top:360px;left:147px;background:#FF3263}
				li#blog {top:450px;left:433px;background:#2C1E12}
				ul#navigation li#welcome {
					top:180px;
					left:576px;
					width:282px;
					height:266px;
					background:url(../img/welcome.jpg) no-repeat 0 0;
					text-indent:0;
					z-index:101
					}#flashContent {position:relative;text-indent:0}
					
					ul#navigation li a {left:0;width:139px;height:86px}
				
						ul#navigation li a b { 
								position:absolute; 
								top:30px;
								display:block; 
								background:url(../img/navigation.png); 
								background-repeat:no-repeat;
								}
								ul#navigation li#illustration a b {left:10px; width:118px; height:20px; background-position:0 0}
								ul#navigation li#animation a b {left:16px; width:106px; height:20px; background-position:0 -20px}
								ul#navigation li#contact a b {left:28px; width:83px; height:20px; background-position:0 -40px}
								ul#navigation li#bio a b {left:52px; width:34px; height:20px; background-position:0 -60px}
								ul#navigation li#blog a b {left:44px; width:50px; height:22px; background-position:0 -140px}

/* -------------------------------------------------- NAVIGATION CLOSE TABS -------------------------------------------------------*/

	.closeTab {
		width:223px;
		height:61px;
		background:url(../img/navigationCloseTab.png) no-repeat 0 0;
		}
		#illustrationContainer .closeTab {top:540px;right:32px}
		#animationContainer .closeTab {z-index:2000;top:576px;right:387px}
		#contactContainer .closeTab {bottom:118px;right:383px;background:url(../img/contactClose.png) no-repeat 0 0 !important}
		#bioContainer .closeTab {top:0;right:176px}

			.closeTab a {
				top:25px;
				left:0;
				width:223px;
				height:36px
				}

				.closeTab a:hover {background:url(../img/navigationCloseTab.png) no-repeat 0 -61px }
			
				#contactContainer .closeTab a:hover {background:url(../img/contactClose.png) no-repeat 0 -61px }
			
			
			.closeTab a b,.closeTab a:hover b {
				position:absolute;
				top:10px;
				display:block;
				height:15px;
				line-height:0; /* IE chokes again */
				background-repeat:no-repeat;
				background-image:url(../img/navigation.png)
				} 
				#illustrationContainer .closeTab a b {
					left:26px;
					width:136px;
					background-position:0 -80px;
					} #illustrationContainer .closeTab a:hover b {background-position:-136px -80px}
				
				#animationContainer .closeTab a b {
					left:26px;
					width:129px;
					background-position:0 -95px
					} #animationContainer .closeTab a:hover b {background-position:-136px -95px}
				
				#contactContainer .closeTab a b {
					left:49px;
					width:110px;
					background-position:0 -110px
					} #contactContainer .closeTab a:hover b {background-position:-136px -110px}
				
				#bioContainer .closeTab a b {
					left:61px;
					width:72px;
					background-position:0 -125px
					} #bioContainer .closeTab a:hover b {background-position:-136px -125px}


/* -------------------------------------------------- STAGES/CONTAINERS -------------------------------------------------------*/

/* ----------///////////// ILLUSTRATION \\\\\\\\\\\\\\---------------*/

	#illustrationContainer {
		top:808px;
		left:0;
		width:1005px;
		height:626px;
		background:#243329;
		visibility:hidden
		}
		
		#illustrationStage {
			position:absolute;
			top:0;
			left:0;
			width:719px;
			height:626px;
			background:#fff url(../illustration/img/ajax-loader.gif) no-repeat 50% 50%;
			border-right:4px solid #ccc
			}
			
			#illustrationStage p {position:relative} 	
			
			#illustrationGallery {
				top:0;
				right:0;
				border-right:4px solid #9AEC1B
				}
				
				ul#illustrationGemsContainer {
					position:relative;
					top:0;
					width:282px;
					height:404px;
					background:#242d33;
					overflow:hidden
					}
					
					ul#illustrationGemsContainer li
						{
						width:282px;height:355px;
						}	
						li#childrensGems {top:0;left:0}
						li#commercialGems {top:0;left:282px}
						li#miscGems {top:0;left:564px
						}
						li#childrenHover,li#advertisingHover,li#miscHover {width:282px !important;height:355px !important;opacity:0}
						li#childrenHover p {width:282px;height:355px;background:url(../illustration/img/ulHover/children.jpg)}
						li#advertisingHover p {width:282px;height:355px;background:url(../illustration/img/ulHover/advertising.jpg)}
						li#miscHover p {width:282px;height:355px;background:url(../illustration/img/ulHover/misc.jpg)
						}
						
						ul.gallery
							{
							position:absolute;
							top:0;
							left:0;
							width:282px;
							height:355px;
							}
							li.gem1 {top:0;left:0;background-position:0 0}
							li.gem2 {top:0;left:57px;background-position:-57px 0}
							li.gem3 {top:0;left:114px;width:54px !important;background-position:-114px 0}
							li.gem4 {top:0;right:57px;background-position:-169px 0}
							li.gem5 {top:0;right:0;background-position:-226px 0}
							li.gem6 {top:51px;left:0;background-position:0 -51px}
							li.gem7 {top:51px;left:57px;background-position:-57px -51px}
							li.gem8 {top:51px;left:114px;background-position:-114px -51px}
							li.gem9 {top:51px;right:57px;background-position:-169px -51px}
							li.gem10 {top:51px;right:0;background-position:-226px -51px}
							li.gem11 {top:102px;left:0;background-position:0 -102px}
							li.gem12 {top:102px;left:57px;background-position:-57px -102px}
							li.gem13 {top:102px;left:114px;width:54px !important;background-position:-114px -102px}
							li.gem14 {top:102px;right:57px;background-position:-169px -102px}
							li.gem15 {top:102px;right:0;background-position:-226px -102px}
							li.gem16 {top:153px;left:0;background-position:0 -153px}
							li.gem17 {top:153px;left:57px;background-position:-57px -153px}
							li.gem18 {top:153px;left:114px;width:54px !important;background-position:-114px -153px}
							li.gem19 {top:153px;right:57px;background-position:-169px -153px}
							li.gem20 {top:153px;right:0;background-position:-226px -153px}
							li.gem21 {top:204px;left:0;background-position:0 -204px}
							li.gem22 {top:204px;left:57px;background-position:-57px -204px}
							li.gem23 {top:204px;left:114px;width:54px !important;background-position:-114px -204px}
							li.gem24 {top:204px;right:57px;background-position:-169px -204px}
							li.gem25 {top:204px;right:0;background-position:-226px -204px}
							li.gem26 {top:255px;left:0;background-position:0 -255px}
							li.gem27 {top:255px;left:57px;background-position:-57px -255px}
							li.gem28 {top:255px;left:114px;width:54px !important;background-position:-114px -255px}
							li.gem29 {top:255px;right:57px;background-position:-169px -255px}
							li.gem30 {top:255px;right:0;background-position:-226px -255px}
							li.gem31 {top:306px;left:0;background-position:0 -306px}
							li.gem32 {top:306px;left:57px;background-position:-57px -306px}
							li.gem33 {top:306px;left:114px;width:54px !important;background-position:-114px -306px}
							li.gem34 {top:306px;right:57px;background-position:-169px -306px}
							li.gem35 {top:306px;right:0;background-position:-226px -306px}
							
							li.gem3 a, li.gem3 b,
							li.gem8 a, li.gem8 a b,
							li.gem13 a, li.gem13 a b,
							li.gem18 a, li.gem18 a b,
							li.gem23 a, li.gem23 a b,
							li.gem28 a, li.gem28 a b,
							li.gem33 a, li.gem33 a b {width:54px !important}
						
							li.gem1 a:hover, li.gem1 a.active {background-position:0 -356px}
							li.gem2 a:hover, li.gem2 a.active {background-position:-57px -356px}
							li.gem3 a:hover, li.gem3 a.active {background-position:-114px -356px}
							li.gem4 a:hover, li.gem4 a.active {background-position:-169px -356px}
							li.gem5 a:hover, li.gem5 a.active {background-position:-226px -356px}
							li.gem6 a:hover, li.gem6 a.active {background-position:0 -407px}
							li.gem7 a:hover, li.gem7 a.active {background-position:-57px -407px}
							li.gem8 a:hover, li.gem8 a.active {background-position:-114px -407px}
							li.gem9 a:hover, li.gem9 a.active {background-position:-169px -407px}
							li.gem10 a:hover, li.gem10 a.active {background-position:-226px -407px}
							li.gem11 a:hover, li.gem11 a.active {background-position:0 -458px}
							li.gem12 a:hover, li.gem12 a.active {background-position:-57px -458px}
							li.gem13 a:hover, li.gem13 a.active {background-position:-114px -458px}
							li.gem14 a:hover, li.gem14 a.active {background-position:-169px -458px}
							li.gem15 a:hover, li.gem15 a.active {background-position:-226px -458px}
							li.gem16 a:hover, li.gem16 a.active {background-position:0 -509px}
							li.gem17 a:hover, li.gem17 a.active {background-position:-57px -509px}
							li.gem18 a:hover, li.gem18 a.active {background-position:-114px -509px}
							li.gem19 a:hover, li.gem19 a.active {background-position:-169px -509px}
							li.gem20 a:hover, li.gem20 a.active {background-position:-226px -509px}
							li.gem21 a:hover, li.gem21 a.active {background-position:0 -560px}
							li.gem22 a:hover, li.gem22 a.active {background-position:-57px -560px}
							li.gem23 a:hover, li.gem23 a.active {background-position:-114px -560px}
							li.gem24 a:hover, li.gem24 a.active {background-position:-169px -560px}
							li.gem25 a:hover, li.gem25 a.active {background-position:-226px -560px}
							li.gem26 a:hover, li.gem26 a.active {background-position:0 -611px}
							li.gem27 a:hover, li.gem27 a.active {background-position:-57px -611px}
							li.gem28 a:hover, li.gem28 a.active {background-position:-114px -611px}
							li.gem29 a:hover, li.gem29 a.active {background-position:-169px -611px}
							li.gem30 a:hover, li.gem30 a.active {background-position:-226px -611px}
							li.gem31 a:hover, li.gem31 a.active {background-position:0 -662px}
							li.gem32 a:hover, li.gem32 a.active {background-position:-57px -662px}
							li.gem33 a:hover, li.gem33 a.active {background-position:-114px -662px}
							li.gem34 a:hover, li.gem34 a.active {background-position:-169px -662px}
							li.gem35 a:hover, li.gem35 a.active {background-position:-226px -662px
						}
						li#childrensGems ul li,li#commercialGems ul li,li#miscGems ul li {width:56px;height:50px}
						li#childrensGems ul li a,li#commercialGems ul li a,li#miscGems ul li a {position:relative;width:56px;height:50px}
						
						li#childrensGems ul li, li#childrensGems ul li a:hover {background-image:url(../illustration/img/thumbs/children.png)}
						li#commercialGems ul li, li#commercialGems ul li a:hover {background-image:url(../illustration/img/thumbs/advertising.png)}
						li#miscGems ul li, li#miscGems ul li a:hover {background-image:url(../illustration/img/thumbs/misc.png)}
							

							b {position:absolute;display:none;top:0;left:0;width:56px;height:50px;
								} b.visited {
									display:block;
									background:transparent url(../illustration/img/checkDark.png) no-repeat center center;
								} b.active, b.initial {
									display:block;
									background:url(../illustration/img/star.png) no-repeat center center;
								} li a:hover b {
									background:url(../illustration/img/check.png) no-repeat center center
								}
	
/* ----------///////////// ILLUSTRATION MASTER NAVIGATION CHILDREN, COMMERCIAL, MISC \\\\\\\\\\\\\\---------------*/


	ul#illustrationGalleryNavigation {
		top:355px;
		left:719px;
		width:282px;
		height:49px;
		background-image:url(../illustration/img/navigation/transparent.png);
		z-index:3001
		}
		#illustrationGalleryNavigation li {height:49px
		}
		#illustrationGalleryNavigation li#childrensTab {left:0;width:101px}
		#illustrationGalleryNavigation li#commercialTab {left:101px;width:117px}
		#illustrationGalleryNavigation li#miscTab {left:218px;width:64px
			}
			#illustrationGalleryNavigation li a {bottom:0;height:49px;background:url(../illustration/img/navigation/transparent.png) no-repeat 0 0
			}
			li#childrensTab a {left:0;width:101px}
			li#commercialTab a {left:0;width:117px;background-position:-102px 0}
			li#miscTab a {right:0;width:64px;background-position:-219px 0
			}
			li#childrensTab a:hover,li#childrensTab a.active {background-position:0 -49px}
			li#commercialTab a:hover,li#commercialTab a.active {background-position:-102px -49px}
			li#miscTab a:hover,li#miscTab a.active {background-position:-219px -49px}


	ul#navigationDescription {
		top:404px;
		left:719px;
		width:250px;
		height:92px;
		padding:25px 16px 15px;
		color:#fff;
		text-align:left;
		font:11px/145% helvetica, arial, verdana, sans-serif;
		background:#243329 url(../img/body.png) 0 0 repeat;
		border-right:4px solid #9AEC1B;
		border-bottom:4px solid #9AEC1B;
		color:#fff
		}
		#navigationDescription li {
			position:relative;
			border-bottom:1px solid #ccc;
			letter-spacing:1px;
			padding:3px 0 2px;
			text-indent:0;
			}
			#navigationDescription li#title {padding:0 0 2px;font-weight:bold;font-size:13px}


/* ----------///////////// ANIMATION \\\\\\\\\\\\\\---------------*/

	#animationContainer {
		top:0;
		left:0;
		width:997px;
		height:572px;
		border-left:4px solid #9AEC1B;
		border-right:4px solid #9AEC1B;
		visibility:hidden;
		z-index:1;
		background:#243329
		}
		#animationStage {
			top:0;
			left:0;
			width:997px;
			height:572px;
			background:#243329 url(../animation/img/background.png) -2px -2px repeat;
			}
			#character {
				bottom:0;
				left:290px;
				width:441px;
				height:418px;
				background:url(../animation/img/juggler.jpg) no-repeat 0 0
			}
			#flashAnimation {
				top:0;
				right:0;
				margin:0 auto;
				text-align:center;
				display:block
			}
			#animationStage ul {
				top:0;
				left:0;
				width:997px;
				height:572px
				}
				#animationStage ul li {
					display:block;
					width:77px;
					height:77px;
					font:bold 12px/1 arial, verdana, helvetica, sans-serif;
					background-repeat:no-repeat;
					background-image:url(../animation/img/gemSolo.png);
				}   #animationStage ul li#one  {top:73px;left:123px;background-position:0 0}
					#animationStage ul li#two {top:273px;left:198px;background-position:-77px 0}
					#animationStage ul li#three {top:98px;left:422px;background-position:-154px 0}
					#animationStage ul li#four {top:73px;left:673px;background-position:-231px 0}
					#animationStage ul li#five {top:273px;left:774px;background-position:-308px 0}
					#animationStage ul li#six {top:423px;left:273px;background-position:-231px 0}
					#animationStage ul li#seven {top:418px;left:704px;background-position:-77px 0}
					#animationStage ul li a {
						top:13px;
						left:13px;
						display:block;
						width:51px;
						height:51px;
						text-align:center;
						line-height:1.5;
						overflow:hidden;
						text-indent:-9999px;
						z-index:4000
						} #animationStage ul li a.hover {
							text-decoration:none;
							text-indent:0 !important;
							border:4px solid #fefefe;
							background-repeat:no-repeat;
							background-color:#000;
							background-position:center center
							}			
							a#oneLink.hover {background-image:url(../animation/img/mobile.jpg)}
							a#twoLink.hover {background-image:url(../animation/img/liptonText.jpg)}
							a#threeLink.hover {background-image:url(../animation/img/smartText.jpg)}
							a#fourLink.hover {background-image:url(../animation/img/mixText.jpg)}
							a#fiveLink.hover {background-image:url(../animation/img/eeko.jpg)}
							a#sixLink.hover {background-image:url(../animation/img/nwautos.jpg)}
							a#sevenLink.hover {background-image:url(../animation/img/fc_game.jpg)}

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

	#contactContainer { 
		left:0;
		width:997px;
		height:678px;
		background:#faffe7 url(../contact/img/body-dark.png) 0 10px;
		border-left:4px solid #9AEC1B;
		border-right:4px solid #9AEC1B;
		visibility:hidden
		}
		#contactStage {
			left:0;
			width:997px;
			height:620px;
			background:url(../contact/img/rays-trans.png) no-repeat 0 0;
			overflow: hidden
			}
			#envelope {
				top: 36px;
				left: 143px;
				width: 568px;
				height: 356px;
				background:#fff url(../contact/img/logo.png) no-repeat 0 0;
			}
			
			#hill {
				position:absolute;
				bottom:0 !important;
				left:0
			}
			
			a.kristinVarner {
				top:248px;
				left:220px;
				width:155px;
				height:18px
			}
			
			a.kristinVarner:hover {
				background:#f0b;
				opacity:.5;
				filter:alpha(opacity=50)
			}
			
			a.maggieByerSprinzeles {
				bottom:25px;
				right:7px;
				width:218px;
				height:16px
				} a.maggieByerSprinzeles:hover {border:1px solid #243329}
			
			ul#vcard {
				top:0;
				left:0;
				width:568px;
				height:356px;
				overflow: hidden;
				background:url(../contact/img/address.png) no-repeat 225px 130px;
			}
			
			a.download {
				bottom:15px;
				right:15px;
				/*width:163px;
				height:25px;
				background:#ccc;*/
				text-indent:0 !important;
				text-align:left;
				font:12px/1 helvetica, arial, verdana, sans-serif !important;
				color:#000
				} a.download:hover {
					color:#666;
					/*width:163px;
					height:25px;
					background:#000;*/
			}

/* ----------///////////// BIO \\\\\\\\\\\\\\---------------*/

	#bioContainer {
		top:90px;
		left:-1005px;
		width:1005px;
		height:626px;
		background:#243329 url(../bio/img/bioStage.png) no-repeat 0 bottom;
		border-left:4px solid #243329;
		border-right:0px solid #c30;
		visibility:hidden;
		}
		
		#bioStage {
			top:0;
			left:0;
			width:997px;
			height:662px;
			background:url(../bio/img/cow.png) no-repeat 715px 281px
			}
			
			#cow {
			bottom:86px;
			right:10px;
			z-index:10000;
			}
			
			#kristin {
				position:absolute;
				top:130px;
				left:3px;
				}
			
			#bioText {
				top:86px;
				font:13px/163% helvetica, arial, verdana, sans-serif !important;
				color:#fff;
				width:470px;
				text-indent:0 !important;
				text-align:left;
				z-index:1000000;
				display:none
				}
				#bioText img {
				margin:5px 8px 5px 0;
				float:left;
				display:none
				}
			
			
			dl {
				top:98px;
				text-indent:0;
				text-align:left;
				display:none
			}

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

	#footer {
		position:relative;
		top:-4px;
		height:135px;
		width:100%;
		border-top:4px solid #9AEC1B;
		border-bottom:4px solid #9AEC1B;
		background:#243329 url(../img/body.png) -11px 6px repeat;
		z-index:200;
		text-align:center
	}

	#copyright {
		position:relative;
		width:1005px;
		height:75px;
		margin:0 auto;
		background:url(../img/copyright.png) no-repeat 862px 2px;
		bottom:0;
		right:0
	}

	#logo {
		cursor:pointer;
	}