/* See Scotty's CSS */
/*       2008       */

/* RESET */
@import url("reset.css");

body {
/*	text-align: center;*/
	font: 62.5%/1 Georgia, Times, "Times New Roman", serif;
	color: #333;
	background: #c3e6e7 url("../i/bg.jpg");
}

	#wrap {
		width: 870px;
		margin: 2em auto 0;
		background: transparent url("../i/bg_wrap.gif") repeat-y top left;
		overflow: hidden;
	}

	#wrap.three-col {
		background-image: url("../i/bg_wrap-3-col.gif") !important;
	}

	#wrap.two-col {
		background-image: url("../i/bg_wrap-2-col.gif") !important;
	}

	#head {
		background: transparent url("../i/bg_head.gif") no-repeat top left;
		height: 98px;
		position: relative;
	}

		h1 a {
			float: left;
			display: block;
			text-indent: -10001px;
			width: 133px;
			height: 82px;
			margin: 7px 0 0 14px;
			background: #d6cdc4 url("../i/logo_scotty.gif") no-repeat top left;
		}
		h1 a:hover { background-position: 0 -82px; }
		
	h2 {
		color: #7b0021;
		padding: 0 10px;
		height: 25px;
		font: 1.2em Futura, sans-serif;
		text-transform: lowercase;
/*		margin: 0 0 1.5em;*/
	}
	
	h3 {
		color: #a0a0a0;
		border-top: 1px solid #bdbdbd;
		border-bottom: 1px dotted #a0a0a0;
		height: 10px;
		font: 1.2em Clarendon, Georgia, Times, "Times New Roman", serif;
		letter-spacing: .12em;
		text-transform: lowercase;
		margin: 0 0 20px;
		padding: 12px 10px 8px;
	}
	
	p, dl, ul {
		padding: 0 10px;
		margin: 0 0 1.5em;
		font-size: 1.1em;
		line-height: 1.8em;
	}
	
	dl dd { margin: 0 0 1.5em;}
	
	a, a:link, :link, :visited { color: #666; font-weight:bold; background-color: #f9f7f6; text-decoration: none;}
	a:hover {
		background-color: #f0ede9;
		color: #333;
	}
	
	em { font-style: italic; }

		/* MAIN NAV */
		ul#mainnav {
			position: absolute;
			left: 148px;
			top: 7px;
			padding: 0;
			margin: 0;
		}

		ul#mainnav li {
			float: left;
		}

			ul#mainnav li a { display: block; height: 35px; text-indent: -10001px; }

				ul#mainnav li#work a { width: 365px;  background-image: url("../i/nav_work.gif"); margin-right: 1px; }
				ul#mainnav li#sketchbook a { width: 209px;  background-image: url("../i/nav_sketchbook.gif"); }
				ul#mainnav li#about-contact a { width: 346px;  background-image: url("../i/nav_about-contact.gif"); }
				
				ul#mainnav li#work a:hover, ul#mainnav li#sketchbook a:hover, ul#mainnav li#about-contact a:hover { background-position: 0px -35px; }
				
				/* SECTION HIGHLIGHTS */
				body#about ul#mainnav li#about-contact a, body.work ul#mainnav li#work a, body#sktchbk ul#mainnav li#sketchbook a { background-position: 0px -70px; }

		ul#mainnav li ul {
			position: absolute;
			top: 39px;
			left: 4px;
		}

		ul#mainnav li ul li {
			
		}
		
		ul#mainnav li ul li#illustration { clear: both; }

		ul#mainnav li ul li a {
			height: 19px;
			width: 114px !important;
			background-position: 0 0 !important;
		}

		ul#mainnav li ul li#print a { background-image: url("../i/nav-sub_print.gif"); }
		ul#mainnav li ul li#posters a { background-image: url("../i/nav-sub_posters.gif"); }
		ul#mainnav li ul li#identities a { background-image: url("../i/nav-sub_identities.gif"); }
		ul#mainnav li ul li#illustration a { background-image: url("../i/nav-sub_illustration.gif"); }
		ul#mainnav li ul li#interactive a { background-image: url("../i/nav-sub_interactive.gif"); }
		ul#mainnav li ul li#packaging a { background-image: url("../i/nav-sub_packaging.gif"); }

		ul#mainnav li ul li a:hover { background-position: 0px -19px !important; }
		
		/* SECTION HIGHLIGHTS */
		body#prnt.work ul#mainnav li ul li#print a, body#intrctv.work ul#mainnav li ul li#interactive a, body#illstrtn.work ul#mainnav li ul li#illustration a, body#pstrs.work ul#mainnav li ul li#posters a, body#idntts.work ul#mainnav li ul li#identities a, body#pckgng.work ul#mainnav li ul li#packaging a { background-position: 0px -38px !important; }

		p#overview{
			display: block;
			width: 346px;
			height: 46px;
			padding: 0;
			margin: 0;
			text-indent: -100001px;
			position: absolute;
			bottom: 9px;
			right: 10px;
			background:  url("../i/overview.gif") no-repeat 0 0;
		}

	/* COL 1 */
	#col1 {
/*		margin: 0 0 0 -723px;*/
		margin: 0 0 0 -723px;
		width: 495px;
		float: left;
	}
	
	#wrap.two-col #col1 {
		margin: 0 0 0 -849px;
	}
	
	/* GALLERY */	
	#col1 #parentId {
		height: 466px;
		margin: 0 auto;
		text-align: center;
		position: relative;
	}

	#col1 #parentId img {
		margin: auto;
		position: absolute;
		left: 0;
	}
	/*END GALLERY*/
	
	/* COL 2 */
	#col2 {
		margin: 0 0 0 2px;
		margin: 0 0 0 514px;
		padding: 75px 0 1em;
		float: left;
		position: relative;
		width: 226px;
	}
	
	#col2 #thumbnailLinks, #col2 #aboutLinks {
		float: left;
		padding: 0;
		border-top: 1px solid #bdbdbd;
		border-bottom: 1px dotted #a0a0a0;
		width: 227px;
		display: block;
		margin: 0 0 20px;
	}
	
	
	#wrap.two-col #col2, #wrap.two-col #col2 #thumbnailLinks, #wrap.two-col #col2 #aboutLinks {
		width: 352px;
	}
	
	#col2 #thumbnailLinks li, #col2 #aboutLinks li { float: left; margin: 0; }
	
		#col2 #thumbnailLinks li a, #col2 #aboutLinks li a, #home #col2 #thumbnailLinks li, #col2 #thumbnailLinks.blank li {
			color: #666;
			font: 1.2em/2.3em Clarendon, Georgia, Times, "Times New Roman", serif;
			text-decoration: none;
			display: block;
			padding: 0 12px;
			height: 2.3em;
			background-color: transparent;
			outline: 0;
		}
		
		#home #col2 #thumbnailLinks li {
			font-size: 1.1em;
			padding: 4px 10px 8px;
			height: 18px;
			color: #a0a0a0;
			letter-spacing: .12em;
			text-transform: lowercase;
		}
		
		#wrap.two-col #col2 #thumbnailLinks li a, #wrap.two-col #col2 #aboutLinks li a { padding: 0 8px; }
		
		#col2 #thumbnailLinks li a:hover, #col2 #aboutLinks li a:hover { background-color: #f9f7f6; }
		#col2 #thumbnailLinks li a:active, #col2 #aboutLinks li a:active { color: #0ff; }
		/*#col2 #thumbnailLinks li a:focus, #col2 #aboutLinks li a:focus*/
		#col2 #thumbnailLinks li a.current, #col2 #aboutLinks li a.current {
			color: #7b0021;
/*			background-color: #ddd;*/
/*			padding: 0 7px;*/
			outline: 1px dotted #666;
		}
	
	/* COL 3 */
	#col3 {
		margin: 0 0 0 3px;
/*		background-color: #c9c;*/
		float: left;
		width: 124px;
		padding: 100px 0 0;
	}
	
	#col3 ul { padding: 0; margin: 0; }
	
	#col3 ul li {
		float: left;
		margin: 0 0 1em 8px;
	}
	
	#col3 ul li a { border:1px solid #fff; float: left; padding: 0; height: 43px; overflow: hidden; }
	#col3 ul li a:hover { border: 1px solid #7b0021;}
	#col3 ul li a.current {
		border: 1px solid #7b0021;
		opacity: 0.5;
		-moz-opacity: 0.5;
		filter:alpha(opacity=50);
	}
	/* about page */
	#about1, #about2, #about3, #about4, #about5 { display: none; position: absolute; top: 150px; left: 0; }
	#about1 { display: block; }
	
	/* OVERLAY */
	#overlayDiv {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 4;
		background-color: #000;
		text-align: center;
		display: none;
	}
	#flash-wrap {
		display: none;
		position: absolute;
		opacity: 1;
		z-index: 5;
	}
	#flash-wrap p {
		text-align: right;
		margin: 1em 0 0 0;
	}
	#flash-wrap p a { background-color: transparent; color: #999; }
	
	/* FOOTER */
	#foot {
		width: 870px;
		margin: 0 auto 1em;
		padding: 50px 0 0;
		clear: both;
		background: transparent url("../i/bg_foot.gif") no-repeat top left;
	}
	
		#foot p {
			text-indent: -10001px;
			background: url("../i/copyright.gif") no-repeat 0 7px;
			position: relative;
			}
			
		#foot p a {
			display: block;
			position: absolute;
			top: 0;
			right: 0;
			width: 262px;
			height: 26px;
/*			margin-top: -23px;*/
			background: transparent url("../i/logo_skybased.gif") no-repeat top left;
		}
		#foot p a:hover { background-position: 0px -26px; }