@charset "UTF-8";
/* CSS Document */
/* ver 6.11 */

/* Yeah - the code here is a gnarley mess sometimes ain't it? It works though. At first that's all I cared about. I think of it as experimentalism. Now that it works I'm gonna go back in there with a dust buster and clean th' place up for all you code inspectors. Seriously. if it's not done yet - its becuase I've been to involved with client work (the usual blah de blah that we creative interent types give as to why our personal projects ain't a finished. But it is the truth.). */


:focus
{
  -moz-outline-style: none;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;} /* borrowed from YUI Library */
body {font:13px/1.231 verdana, arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small; color: #3b3222;} 

a, a img {
	border: none;	
}

a:link, a:active, a:visited {
	/* color: #2f281c; */
	color: #422712;
	/* font-weight: bold; */
	/* text-decoration: none; */
}

a:hover {
	color: #715d54; 	
}

p {
	margin-top: .5em;	
}

html, body {
    height: 100%;
}

body {
	behavior: url(csshover3.htc);  /* let's IE machines use hover effects like other browsers */
    margin: 0px 0px;
    padding: 0px;
    text-align: center;
	/* background: #cccccc; */
	background-color:#666;
	
	/* background-image: url(images/bg-1.jpg); */
	background-image: url(images/burst.jpg);
	/* background-repeat: no-repeat; */
	background-repeat: repeat;
	background-attachment: fixed;
	background-position: bottom center;
}

#wrapper {
	margin: 0px auto;
    text-align: left;
	width: 900px;
	/* height: 300px; */
	/* border: 1px solid red; */
	/* background-color: blue; */
	/* min-height:5000px;
	height:auto !important;
	height:5000px; */
	padding-bottom: 0px;
	background-color: #fff;
	height: 100%;

}

#main {
	/*( height: 300px;
	overflow: auto; */
	/* border: 0px solid green; */
	/* padding: 10px 10px 200px 10px; */
	/* width: 100%; */
	height: 100%;
	/* background-image: url(images/bg-temp.gif) */
	
}

#main h1 {
	font-size: 20px;
	font-family: verdana, arial,helvetica,clean,sans-serif;
	/* font-family: georgia, verdana, serif; */
	/* border-top: 2px solid red; */
	/* backround-color: red; */
	width: 850px;
	_width: 830px;
	text-transform: uppercase;
	margin-top: 10px;
	margin-left: 10px;
	margin-bottom: 50px;
	/* background-image:url(images/navbar/navbar-main-current.gif); */
	background-image: url(images/nav-graphic/nav-footer-abstr-1.jpg);
	background-repeat: repeat-x;
	/* color: #d5d3d1; */
	color: #d1bda8;
	padding-top: 20px;
	padding-left: 20px;
	/* vertical-align: middle; */
	height: 50px;
}
#main h1#portfolio {
	margin-bottom: 20px;
}

#main .bg h2 {
	/* background-color: #8dc63f; */
	/* padding-left: 10px; */
	/* border: 1px solid blue; */
}
#main h2 {
	clear:both;
	font-size: 14px;
	font-family: verdana, arial, helvetica, clean,sans-serif;
	/* font-family: georgia, verdana, serif; */
	border-top: 2px solid #8dc63f;
	/* background-color: #8dc6sf; */
	width: 870px;
	/* *width: 870px; */
	_width: 850px; /* ie6 only */
	text-transform: uppercase;
	margin-top: 10px;
	margin-left: 10px;	
}

#main h3 {
	clear:both;
	font-size: 12px;
	font-family: verdana, arial, helvetica, clean, sans-serif;
	border-top: 2px solid /* #6f6146; */ #d5d3d1;
	/* border: 1px solid blue; */
	/* background-color: #8dc6sf; */
	/* width:350px;
	*width: 350px;
	_width: 320px; */
	width: 870px;
	_width: 850px; /* ie6 only */
	text-transform: uppercase;
	margin-top: 10px;
	margin-left: 10px;	
}

#main h4 {
	clear:both;
	font-size: 12px;
	font-family: verdana, arial, helvetica, clean, sans-serif;
	/* border-top: 1px dotted #d5d3d1; */
	/* color: #666; */
	width: 870px;
	_width: 850px; /* ie6 only */
	text-transform: uppercase;
	margin-top: 10px;
	margin-left: 10px;
}

.main-text h4 {
	font-size: 12px;
	font-family: verdana, arial, helvetica, clean, sans-serif;
	border-top: 1px dotted /* #6f6146; */ #d5d3d1;
	/* color: #666; */
}

#logos .main-thumbs {
	text-align:center;
	margin-bottom: 30px;
}

#info .main-thumbs img,
#illo .main-thumbs img {
	margin: 0 -5px;	
}

#contact .main-text {
	border-right: 2px solid #cccccc;
	margin-bottom: 10px;
}

#contact .main-thumbs {
	/* margin-left: 5px; */
	/* border-left: 2px solid #cccccc; */
	width: 350px;
	float: left;
	margin-left: 10px;
}

#main table {
	height: 100%;
	width: 100%;
	background: #ffffff;
	vertical-align: text-top;
	/* border: 1px solid blue; */
	margin: 0px;
	padding: 0px;
	/* border: 1px solid white; */
}

#home #main table {
	background-image: url(images/splash-v0.5a.jpg);
	background-repeat: no-repeat;
	/* background-position: 0 10%; */
	/*background-position: 0 -300px; */
}

#main table td {
	/* border: 1px solid white; */
	vertical-align: top;
	margin: 0px;
	padding: 0px;
}

.main-text {
	float: left;
	/* width: 350; */
	width:350px;
	*width: 350px;
	_width: 320px;
	padding: 10px;
	margin: 0px; /* 0px 0px 200px 0px; */
	/* border: 1px solid red; */
	/* background: #ffffff; */
}

.main-text br {
	margin-bottom: 10px;	
}

.thumbs-blank img {
	/* border: 2px solid #fff; */ 
	float: left;
	width: auto;
	padding: 2px 2px 2px 8px;	
}

.main-thumbs {
	float: right;
	width: 500px;
	/* padding: 10px; */
	padding: 10px;
	margin: 0px;
	/* border: 1px solid green; */
	/* background: #ffffff; */
	
}

.main-thumbs div.thumbs {
	float: left;
	width: auto;
	/* height: auto; */
	/* border: 1px solid green; */
	margin: 0px 6px 12px 6px;
	padding: 0px;
	height: 100px;
}

.main-thumbs .thumbs a {
	margin: 0px;
	padding: 0px;
	/* padding-right: 10px; !important
	padding-bottom: 10px; !important */
	/* border: 1px solid red; !important */
}

.main-thumbs .thumbs a img {
	border: 2px solid #ffffff;
	/* border: 2px solid blue; */
	margin: 0px;
	padding: 0px;
	height: auto;
	/* padding-bottom: 50px; */
	/* border: none; */
}

.main-thumbs .thumbs a:hover img {
	border: 2px solid #4f4532;
}

/* -------------- END THUNBS AREA ------------ */

#table-footer {
	display: none;
	margin-bottom: 200px;	
}

#main-footer {
	/* display: none; */
	clear: both;
	/* padding-bottom: 120px;
	*padding-bottom: 160px; */ /* measurements for ~150px height nav graphic */
	padding-bottom: 100px;
	
	background-color: #ffffff;
	text-align: center;
}

#home #main-footer {
	display: none;	
}

#nav-area {
	/* padding-top: 300px; */
	width: 900px;
	_width: 900px;
	position: fixed; /* !important */ /* remove is stuff section no workee */
    top: auto;
	bottom: 0px; !important
}


/* ------- sub nav ---------- */


#sub-nav {
	/* width: 890px; */
	/*  background: yellow; */
	/* background-image: url(images/nav-graphic/nav-footer-abstr-1.jpg); */
	/* height: 100%; */
	/* padding: 5px; */
	text-align: center;
}



#sub-nav #sn-content {
	margin: 0;
	padding: 0;
	padding-left: 140px;
	
	/* list-style-type: none; */
	width: 760px;
	/* height:33px; */
	float: left; /* Contain floated list items */
	background: #3b3222;
	background-image:url(images/navbar/subnav.gif);
}

#sub-nav #sn-content ul {
	list-style-type: none;
	/* width: 100%; */
	margin: 0;
	padding: 0;
	text-align:center;
}

#sub-nav #sn-content li {
	display: inline;
	list-style: none;
	margin: 0;
	padding: 0;	
}

#sub-nav li a {
	float: left;
	/* width: 50px; */
	height: auto;;
	vertical-align: middle;
	/* height: 33px; */
	text-align: center;
	/* display: block; /* to increase clickable area as a’s default to inline */
	color: #ffffff;
	text-decoration: none;
	padding: 3px 15px;
	/* line-height: 2.5; */
	width: 150px;
}

#home #sub-nav li a,
#contact #sub-nav li a,
#mailer #sub-nav li a {
	width: 0px;
	padding: 3px 0px;
}

/* #hide {
	display: none;	
} */

#sub-nav #sn-content a:hover {
	/* background: #6F6146; */ 	
	/* background: #CC6; */
	background: #6F6146;
	background-image: url(images/navbar/subnav-hover-2.gif); !important
	background-repeat: repeat-x;
}

#web li#sub-nav-1 a, 
#banners #sn-content li#sub-nav-2 a,
#icons #sn-content li#sub-nav-3 a,
#design #sn-content li#sub-nav-1 a,
#logos #sn-content li#sub-nav-2 a,
#posters #sn-content li#sub-nav-3 a,
#illo #sn-content li#sub-nav-1 a,
#comics #sn-content li#sub-nav-2 a,
#fine-art #sn-content li#sub-nav-3 a,
#sketchbook #sn-content li#sub-nav-4 a,
#bio #sn-content li#sub-nav-1 a, 
#ties #sn-content li#sub-nav-2 a,
#links #sn-content li#sub-nav-3 a {
	background-image: url(images/navbar/subnav-hover-2.gif);
	background-repeat: repeat-x;
	background: #3b3222;	
}


#home #sub-nav #sn-content #nav-one a,
#contact #sub-nav #sn-content #nav-one a,
#contact #sub-nav #sn-content #nav-two a,
#contact #sub-nav #sn-content #nav-three a,
#mailer #sub-nav #sn-content #mav-one a {
/* moves dummy text for "empty" sub nav bars */
	text-indent: -10000px;

}
/* ------------ end sub nav ----------------- */

#main-nav {
	
}


#footer {
	
}



#main-nav #mn-content {
	margin: 0;
	padding: 0;
	/* list-style-type: none; */
	width: 100%;
	/* height:33px; */
	float: left; /* Contain floated list items */
	/* background: #4F4532; */
	background: #3b3222;
	/* border: 1px solid blue; */
	/* border-top: 1px solid #ffffff; */
	/* background-image:url(images/1px-horiz-line-white.gif); */
	background-image: url(images/navbar/navbar-main-2.gif);
	background-repeat: repeat-x;
}

/*
#nav ul {
	list-style: none;
} */

#main-nav #mn-content ul {
	list-style-type: none;
	width: 100%;
	/* height: 33px; */
	margin: 0;
	padding: 0;
}
#main-nav #mn-content li {
	display: inline;
	list-style: none;
	margin: 0;
	padding: 0;
	/* float: left; /* This corrects the */
	/* width: 100%; /* IE whitespace bug */
	/* border: 1px solid red; */
}

#main-nav #mn-content li a {
	float: left;
	width: 151px;
	height: 33px;
	text-align: center;
	/* display: block; /* to increase clickable area as a’s default to inline */
	color: #FFF;
	text-decoration: none;
	padding: 0 0px;
	line-height: 2.5;
	/* border-top: 1px solid white; */
	/* border: 1px solid green; */
	/* border-top: 1px solid #ffffff; */
	border-right: 1px solid #3b3222;
	/* border-right: 1px solid #2c2519; */
}



#main-nav #mn-content a:hover {
	/* background: #6F6146; */ 
	/* background: #3b3222; */
	/* background-image: url(images/navbar/navbar-main-hover-2.gif); */
	background-image: url(images/navbar/navbar-main-hover-2.gif);
	/* background-image: none;
	background-color: green; */
	background-repeat: repeat-x;
}

/* ---------------------------------- */

#web li#nav-web a,
#banners li#nav-web a,
#icons li#nav-web a,
#design li#nav-design a,
#logos li#nav-design a,
#posters li#nav-design a,
#illo li#nav-illo a,
#comics li#nav-illo a,
#fine-art li#nav-illo a,
#sketchbook li#nav-illo a,
#bio li#nav-bio a, 
#ties li#nav-bio a,
#links li#nav-bio a,
#contact li#nav-contact a {
	/*background: #6F6146; !important */
	/* background: #443b29; */
	background: #3b3222;
	/* border: none; !Important */
	/* border-left: 1px solid #fff;
	border-right: 1px solid #fff; */
	/* border-top: 1px solid #3b3222; */
	background-image: url(images/navbar/navbar-main-current.gif);
}

#web li#nav-web a:hover,
#design li#nav-design a:hover, 
#illo li#nav-illo a:hover,
#about li#nav-about a:hover, #contact li#nav-contact a:hover {
	/* border-top: 1px solid #6F6146; !important */
	background: #3b3222;
	background-image: url(images/navbar/navbar-main-2.gif);
	background-repeat: repeat-x;
}

#main-nav #mn-content a#home { /* Roballoo logo hgoes here */
	text-indent: -10000px;
	width: 110px; /* NOT 140px - due to 15px padding in #nav a */
	/* background: green; */
	background-image:url(images/roballoo_written_orange.gif);
	background-repeat: no-repeat;
	border-top: none;
	border-right: none; /* not needed */
	padding: 0 15px;
	/* border: none; !important */
}

#main-nav #mn-content a#home:hover {
	background-image:url(images/roballoo_written_orange_hover.gif)
}

/* ---------------------------------- */



/* ----------- Nav-Gapghic ----------------- */

#nav-graphic {
	/* background-image: url(images/nav-graphic/nav-footer-abstr-1.jpg); */
	height: 75px;
	*height: 30px;
	/* height: 150px; */
	/* background-image: url(images/bg-1.jpg); */
	background-image: url(images/burst.jpg);
	/* background-repeat: no-repeat; */
	background-repeat:repeat;
	background-attachment: fixed;
	background-position: bottom center;
	bottom: 0px; !important
}

/* #nav-graphic a {
	text-indent: -10000px;	
} */

/* ------------- END nav Graphic -------------- */

.no-border {
	border: none;	
}

img .transparent {
	height: 200px;	
}

#portfolio-image {
	
	/* border: 1px solid red; */
	margin: 0px;
	/* margin-top: 40px; */
	text-align: center;
}

#portfolio-text {
	/* padding-bottom: 10px; */
	/* border-bottom: 2px solid #8dc63f; */
	margin-bottom: 20px;
}

/* #portfolo-text #arrow-left a:hover {
	background	
}

#portfolo-text #arrow-right a:hover {
	background-image	
} */

#arrow_left img, 
#arrow_right img {
	vertical-align: top;
	padding-top: 25px;
	/* border: 1px solid red; */
}

#arrow_left img {
	padding-right: 20px;	
}

#arrow_right img {
	padding-left: 20px;	
}