/*Style Sheet created for 333bw by Matthew Schriock (c) 2006 */


/* Overcome stupid 3px margin bug in IE/Win floats, 
   http://www.positioniseverything.net/explorer/threepxtest.html */
  * html #content, * html #col2, * html #col3,  * html #col1 {
    margin-right:-3px;
    }


body>div#warning {
	z-index:5; 
	/* \*/ display:none;/* */	
	width:400px; 
	height:100px; 
	position:fixed;
}

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 0px;
	width:800px;
	margin-left:auto;
	margin-right:auto;
	
}

#col1.noborder, #col2.noborder,#workbox.image a:hover, #textbox.image a:hover, #navigation a:hover, #gallery:hover, #bottom200 {
	border: none; 
	border-right: none; 
	border-left:none; 
	border-top:none; 
	border-bottom:none;
}

#col1, #col2 {font-size:11px; line-height:16px;}

.smaller {
	font-size: 10px;
	text-align:left;
	letter-spacing: normal;
}

.brief {
	font-size: 10px;
	font-variant: small-caps;
	text-align: left;
	letter-spacing: normal;
	display: block;
	margin-bottom: 5px;
}

#title200, #title400, #title {
	padding-top: 2px; padding-bottom:2px; font-size: 18px;
	font-variant: small-caps;
	text-indent:0px;
	z-index: 5;
	vertical-align: middle;
}
.smalltitle, .csmalltitle, .rsmalltitle {
	letter-spacing: 0.3em;
	line-height: 18px;
	z-index:5;
	text-align:center;
}

.smalltitle a {color:white;}
.smalltitle a:hover {color: #0099FF; text-decoration: none; border-bottom:none;}

.post {font-size:11px; padding-top: 5px; padding-bottom: 5px; width:180px;}

.rsmalltitle {text-align: right;}
.csmalltitle {text-align: center;}
.bigger {
	font-size: 14px;
	line-height: 16px;
}

a {text-decoration: none;}
li {list-style-type: square;}
/* #col1.gal li {list-style-image: url(images/glowerb.gif);} */

/* -------------------------------------------------------------------------------------------------------------------
		Header & Nav
	------------------------------------------------------------------------------------------------------------------*/
	
	
#navwrap {
	text-align: left;
	margin: auto;
	top: 0px;
	padding-left:-125px;
	width: 1075px;
	margin-left: -125px;	
}	
	
#logo {
	background-image: url(images/bg_01.jpg);
	height: 125px;
	width: 1075px;
	left: 0px;
	top: 0px;
	position: relative;
	z-index:4;
	
}
#navigation {
	min-width:220px;
	height:125px;
	z-index:1;
	top:0px;
	left: 450px;
	position: absolute;
}
#home, #news, #photo, #sketch, #other, #links{
	position:absolute;
	background-repeat: no-repeat;
	overflow:visible;
}

#home {background-image: url(images/home.png);top: 61px; left:0px; height:30px; width:70px;}
#news {background-image: url(images/nav_03.png); top:75px; left:34px; height:30px; width:110px;}
#photo {background-image: url(images/nav_05.png);top:59px; left:137px; height:30px; width:110px;}
#sketch {background-image: url(images/nav_07.png);top:41px; left:264px; height:30px; width:110px;}
#other {background-image: url(images/nav_09.png); top:47px; left: 85px; height:30px; width:80px;}
#links {background-image: url(images/nav_11.png);top:34px;left:175px; height:30px; width:80px;}

#home:hover, #news:hover, #photo:hover, #sketch:hover, #other:hover, #links:hover,#navigation.home #home,
#navigation.news #news,  #navigation.photo #photo, #navigation.sketch #sketch, #navigation.other #other, #navigation.links #links {top:;}
#home:active,#home:hover, #navigation.home #home {background-image:url(images/home2.png);}
#news:active, #news:hover, #navigation.news #news {background-image:url(images/navhigh_03.png);}
#photo:active,#photo:hover, #navigation.photo #photo {background-image:url(images/navhigh_05.png);}
#sketch:active,#sketch:hover, #navigation.sketch #sketch {background-image:url(images/navhigh_07.png);}
#other:active,#other:hover, #navigation.other #other {background-image:url(images/navhigh_09.png);}
#links:active,#links:hover, #navigation.links #links {background-image:url(images/navhigh_11.png);}

a#home:hover div, a#news:hover div, a#photo:hover div, a#sketch:hover div, a#other:hover div, a#links:hover div {
	visibility:visible;
}

#arrow, #arrowdown, #arrowup {
	background-repeat: no-repeat;
	height: 25px;
	width: 25px;
	top: 0px;
	float: left;
}

#arrow {position: relative;}

#arrowup {
	position: absolute;
	visibility: visible;
	left: 80px;
}

#navigation #bottom200 {position:relative;top:20px;}

/* -------------------------------------------------------------------------------------------------------------------
			Content
	------------------------------------------------------------------------------------------------------------------*/
	


#main {
	position: absolute;
	width: 1075px;
	height: 594px;
	background-image: url(images/bg_02.jpg);
	background-repeat: no-repeat;
	background-position: center;
	overflow: visible;
}

#main.blackbg {background-image: url(images/blackbg.jpg);}

#content {
	width: 800px;
	height: 540px;
	left: 125px;
	position: relative;
	margin-top:0px;
	margin-bottom: 10px;	
}

#content.top {
	height:300px;
	position: relative;
	clear: both;	
}

#col1 {
	width:400px;
	height:auto;
	z-index: 1;
	float: left;
	left: 0px; 
	/*\*//*/position: absolute;/**/
}

#col1.gal {position:relative;
	/*\*//*/position: absolute; left:200px;/**/
	}
	
#col1.other{position:relative;left:200px;}

#col1.slide {
	position:relative;
	min-width:700px;
	float:right;
}

#col1.hidden {visibility: hidden; position:absolute; left:200px; top:20px;}

#col2 {
	width:200px;
	position:relative;

	float: right;
	clear: none;
	/*\*//*/top: 0px;/**/	
}
/*\*//*/#content.about #col2 {position: absolute; left:600px;}/**/
/*\*//*/#content.about #col2.left {position: absolute; left:0px;}/**/

#col2.left{float:left; left:-400px;}

#col3 {
	width: 200px;
	height: 550px;
	float: left;
	background-position:0px 176px;
	background-repeat:no-repeat;
	/*\*//*/left:0px; position: absolute;/**/
}

#col3.slide {width:100px;}


#textbox, #newsbox, #beerbox, #workbox, #sitesbox {
	min-width: 190px;
	left:0px;
	
	padding-left:10px;
	padding-top:5px;
	padding-right:5px;
	padding-bottom:0px;
	float: left;
	position: relative;
	z-index:2;
}



#workbox,#newsbox, #beerbox, #sitesbox {height:auto;}

#textbox.c4, #newsbox.c4 {min-width:360px; padding-right:10px; padding-left:10px;}
#textbox.mypic {padding:5px;}
#col1.slide #textbox.c4 {min-width:580px;}
#textbox li, #newsbox li {list-style-position: inside;}
#textbox.gal {padding:0px;}
#textbox.c4 .post, #newsbox.c4 .post {width:375px;}
#top {width:200px; height: 25px; top:25px;}
#top.slide {width:100px;}
#bgfill {z-index:1;}

#xfade {position:absolute; top:25px; left: 601px;}
/* ------------------------------------------------------------------------------------------------------------
			MAIN PAGE
	------------------------------------------------------------------------------------------------------------*/

#gallery.mypica, #gallery.mypicb, #gallery.mypicc {width:190px; top:-20px; left:0px;}	
#gallery.mypica {background-image:url(images/mypic_01.png); height:28px;}
#gallery.mypicb {background-image:url(images/mypic_02.jpg);height:170px;}
#gallery.mypicc {background-image:url(images/mypic_03.png); height:32px;}
#content.about #col2 #textbox.mypic {height:195px;}
/*#content.about #col2, #content.about #col2.left, #navigation{opacity:0.6; -moz-opacity:.6;filter:alpha(opacity=60);}
#content.about #col2:hover,#content.about #col2.left:hover,#col3:hover, #col1, #navigation:hover {opacity:1.0; -moz-opacity:1.0;filter:alpha(opacity=100);}*/
	
#mattwashere {background-image:url(images/matt.gif);position:absolute; top: 202px; left:478px; width:25px; height:230px;}
#mattreflection {background-image:url(images/mattreflection.gif);position:absolute; top: 342px; left:482px; width:25px; height:100px;}
#blinker {background-image:url(images/blinker.gif);position:absolute; top: 33px; left:193px; width:28px; height:60px;}	

#about {
	background-image: url(images/about.png);
	background-repeat: no-repeat;
	height: 25px;
	width: 80px;
	position: absolute;
	left: 0px;
}
#popdown {
	position:absolute;
	left:20px;
	top:455px;
	height:25px;
	z-index:5;
	visibility: visible;
	clear:both;
	/*\*//*/ left: 120px; /**/
}

#popup {
	position:absolute;
	left:0px;
	top:455px;
	left:20px;
	height:25px;
	z-index:5;
	visibility: hidden;
	/*\*//*/ left: 120px; /**/
}

/* -------------------------------------------------------------------------------------------------------------------------------------
			Gallery
	------------------------------------------------------------------------------------------------------------------------------------*/
#gallery.slideshow {background-image: url(galleries/images/slideshow.png);top:25px; width:100px;}	
#gallery.back {background-image: url(galleries/images/back.png);top:25px; width:100px;}
.comment{position:relative;top:25px; text-align:right; display:block;right:10px;color:#3977A5;}
.comment:hover{border:none; color:white;}
#gallery.back:hover {background-image: url(galleries/images/back2.png);}

#col3 a#bottom200 { top:175px;position:relative;display: block;}
#col3 a#bottom200.short {top:250px;}
#col3.slide a#bottom200 {top:-25px;width:100px;}

#gallery {
	position:relative;
	display: block;
	width: 200px;
	height: 25px;
}

#filmstrip {
	position: absolute;
	width: 200px;
	height: 550px;
	z-index: 5;
	top: 25px;
	left:1px;
	/*\*//*/left:725px;/**/
}
#col3 a#gallery.blackwhite:hover div, #col3 a#gallery.digital:hover div, #col3 a#gallery.frisbee:hover div,
#col3 a#gallery.horse:hover div, #col3 a#gallery.lax:hover div, #col3 a#gallery.color:hover div, 
#col3 a#gallery.darkroom:hover div, #col3 a#gallery.phone:hover div, #col3 a#gallery.sketchbook:hover div,
#col3 a#gallery.digitalart:hover div, #col3 a#gallery.webart:hover div, #col3 a#gallery.c9times:hover div,
#col3 a#gallery.oldsites:hover div
 {left:0px; position:absolute; visibility: visible; height:150px; width: 200px;}

/* -------------------------------------------------------------------------------------------------------------------------------------
			Photo
	------------------------------------------------------------------------------------------------------------------------------------*/
	
#gallery.blackwhite {background-image: url(galleries/images/blackwhite.png);}
#content.blackwhite #gallery.blackwhite {background-image: url(galleries/images/blackwhite2.png);}
#gallery.blackwhite:hover {background-image: url(galleries/images/blackwhite2.png);}
#content.blackwhite #filmstrip {background-image: url(galleries/images/blackwhite3.jpg);}
#content.blackwhite #col3 {background-image: url(galleries/images/blackwhite4.jpg);}
#col3 a#gallery.blackwhite div{visibility:hidden;}
#col3 a#gallery.blackwhite:hover div {background-image: url(galleries/images/blackwhite4.jpg);top: 151px;}
	
#gallery.digital {background-image: url(galleries/images/digital.png);}
#content.digital #gallery.digital {background-image: url(galleries/images/digital2.png);}
#gallery.digital:hover {background-image: url(galleries/images/digital2.png);}
#content.digital #filmstrip {background-image: url(galleries/images/digital3.jpg);}
#content.digital #col3 {background-image: url(galleries/images/digital4.jpg);}
#col3 a#gallery.digital div{visibility:hidden;}
#col3 a#gallery.digital:hover div {background-image: url(galleries/images/digital4.jpg);top: 126px;}

#gallery.frisbee {background-image: url(galleries/images/frisbee.png);}
#content.frisbee #gallery.frisbee {background-image: url(galleries/images/frisbee2.png);}
#gallery.frisbee:hover {background-image: url(galleries/images/frisbee2.png);}
#content.frisbee #filmstrip {background-image: url(galleries/images/frisbee3.jpg);}
#content.frisbee #col3 {background-image: url(galleries/images/frisbee4.jpg);}
#col3 a#gallery.frisbee div{visibility:hidden;}
#col3 a#gallery.frisbee:hover div {background-image: url(galleries/images/frisbee4.jpg);top: 101px;}
	
#gallery.horse {background-image: url(galleries/images/horse.png);}
#content.horse #gallery.horse {background-image: url(galleries/images/horse2.png);}
#gallery.horse:hover {background-image: url(galleries/images/horse2.png);}
#content.horse #filmstrip {background-image: url(galleries/images/horse3.jpg);}
#content.horse #col3 {background-image: url(galleries/images/horse4.jpg);}
#col3 a#gallery.horse div{visibility:hidden;}
#col3 a#gallery.horse:hover div {background-image: url(galleries/images/horse4.jpg);top: 76px;}

#gallery.lax {background-image: url(galleries/images/lax.png);}
#content.lax #gallery.lax {background-image: url(galleries/images/lax2.png);}
#gallery.lax:hover {background-image: url(galleries/images/lax2.png);}
#content.lax #filmstrip {background-image: url(galleries/images/lax3.jpg);}
#content.lax #col3 {background-image: url(galleries/images/lax4.jpg);}
#col3 a#gallery.lax div{visibility:hidden;}
#col3 a#gallery.lax:hover div {background-image: url(galleries/images/lax4.jpg);top: 51px;}

#gallery.color {background-image: url(galleries/images/color.png); top: 175px;}
#content.color #gallery.color {background-image: url(galleries/images/color2.png);}
#gallery.color:hover {background-image: url(galleries/images/color2.png);}
#content.color #filmstrip {background-image: url(galleries/images/color3.jpg);}
#content.color #col3 {background-image: url(galleries/images/color4.jpg);}
#col3 a#gallery.color div{visibility:hidden;}
#col3 a#gallery.color:hover div {background-image: url(galleries/images/color4.jpg); top: -149px;}

#gallery.darkroom {background-image: url(galleries/images/darkroom.png); top:175px;}
#content.darkroom #gallery.darkroom {background-image: url(galleries/images/darkroom2.png);}
#gallery.darkroom:hover {background-image: url(galleries/images/darkroom2.png);}
#content.darkroom #filmstrip {background-image: url(galleries/images/darkroom3.jpg);}
#content.darkroom #col3 {background-image: url(galleries/images/darkroom4.jpg);}
#col3 a#gallery.darkroom div{visibility:hidden;}
#col3 a#gallery.darkroom:hover div {background-image: url(galleries/images/darkroom4.jpg);top: -174px;}

#gallery.phone {background-image: url(galleries/images/phone.png); top:175px;}
#content.phone #gallery.phone {background-image: url(galleries/images/phone2.png);}
#gallery.phone:hover {background-image: url(galleries/images/phone2.png);}
#content.phone #filmstrip {background-image: url(galleries/images/phone3.jpg);}
#content.phone #col3 {background-image: url(galleries/images/phone4.jpg);}
#col3 a#gallery.phone div{visibility:hidden;}
#col3 a#gallery.phone:hover div {background-image: url(galleries/images/phone4.jpg);top: -199px;}

/* -------------------------------------------------------------------------------------------------------------------------------------
			Sketch
	------------------------------------------------------------------------------------------------------------------------------------*/
	
#gallery.sketchbook {background-image: url(galleries/images/sketchbook.png);}
#content.sketchbook #gallery.sketchbook {background-image: url(galleries/images/sketchbook2.png);}
#gallery.sketchbook:hover {background-image: url(galleries/images/sketchbook2.png);}
#content.sketchbook #filmstrip {background-image: url(galleries/images/sketchbook3.jpg);}
#content.sketchbook #col3 {background-image: url(galleries/images/sketchbook4.jpg);}
#col3 a#gallery.sketchbook div{visibility:hidden;}
#col3 a#gallery.sketchbook:hover div {background-image: url(galleries/images/sketchbook4.jpg);top: 126px;}

#gallery.digitalart {background-image: url(galleries/images/digitalart.png);}
#content.digitalart #gallery.digitalart {background-image: url(galleries/images/digitalart2.png);}
#gallery.digitalart:hover {background-image: url(galleries/images/digitalart2.png);}
#content.digitalart #filmstrip {background-image: url(galleries/images/digitalart3.jpg);}
#content.digitalart #col3 {background-image: url(galleries/images/digitalart4.jpg);}
#col3 a#gallery.digitalart div{visibility:hidden;}
#col3 a#gallery.digitalart:hover div {background-image: url(galleries/images/digitalart4.jpg);top: 151px;}

#gallery.webart {background-image: url(galleries/images/webart.png);}
#content.webart #gallery.webart {background-image: url(galleries/images/webart2.png);}
#gallery.webart:hover {background-image: url(galleries/images/webart2.png);}
#content.webart #filmstrip {background-image: url(galleries/images/code.jpg);}
#content.webart #col3 {background-image: url(galleries/images/webart4.jpg);}
#col3 a#gallery.webart div{visibility:hidden;}
#col3 a#gallery.webart:hover div {background-image: url(galleries/images/webart4.jpg);top: 76px;}

#gallery.c9times {background-image: url(galleries/images/c9times.png);}
#content.c9times #gallery.c9times {background-image: url(galleries/images/c9times2.png);}
#gallery.c9times:hover {background-image: url(galleries/images/c9times2.png);}
#content.c9times #filmstrip {background-image: url(galleries/images/code.jpg);}
#content.c9times #col3 {background-image: url(galleries/images/c9times4.jpg);}
#col3 a#gallery.c9times div{visibility:hidden;}
#col3 a#gallery.c9times:hover div {background-image: url(galleries/images/c9times4.jpg);top: 51px;}

#gallery.oldsites {background-image: url(galleries/images/oldsites.png);}
#content.oldsites #gallery.oldsites {background-image: url(galleries/images/oldsites2.png);}
#gallery.oldsites:hover {background-image: url(galleries/images/oldsites2.png);}
#content.oldsites #filmstrip {background-image: url(galleries/images/code.jpg);}
#content.oldsites #col3 {background-image: url(galleries/images/oldsites4.jpg);}
#col3 a#gallery.oldsites div{visibility:hidden;}
#col3 a#gallery.oldsites:hover div {background-image: url(galleries/images/oldsites4.jpg);top: 101px;}

#content.blank #filmstrip {background-image: url(galleries/images/blank.jpg);}
#content.blank #col3 {background-image: url(galleries/images/blank4.jpg);}

/* -------------------------------------------------------------------------------------------------------------------------------------
			Footer
	------------------------------------------------------------------------------------------------------------------------------------*/
	
#footer {
	width:800px;
	height:auto;
	padding: 0px;
	margin: 0px;
	font-size: 9px;
	letter-spacing: 0.5em;
	clear: both;
	left: 125px;
	position: relative;	
}

#copyright {
	width:auto;
	height:auto;
	z-index:5;
	padding: 5px;
	margin: 0px;
	float: left;
	position: absolute;
	left: 0px;
}

#mail {
	width:auto;
	height:auto;
	z-index:105;
	padding: 5px;
	margin: 0px;
	float: right;
	position: relative;
}