/* centered fixed width */

html, body {
	font: 100% Arial, Helvetica, sans-serif;
}

body {
	margin:0 auto;padding:0;
	color: #000000;
	background:#fff /*url(images/bg-grid-100px-pink-blue.png)*/;
	font-size: 80%;	
	text-align:center;}

/* body IDs will switch headers, nav and footer*/
#caricature {} 
#fineart {} 

/* eliminate all default padding, margins, and borders - must declare some margin/padding for any ul or ol */
* {padding: 0;margin: 0;/*border: none;*/}

/* tables */
table {border-collapse: collapse;border-spacing:0;border: none;}
table, td, caption { font-size: inherit; font-weight: inherit; font-style: inherit; font-variant: inherit;}

/*** text format  ***/
pre, code { font-size:1em;}
strong, b {font-weight: bold;}
  
h1, h2, h3, h4, h5, h6 { 
	color: #60428c;margin-top: .3em;}
h1 { font-size: 1.5em;} 
h2 { font-size: 1.3em;}
h3 { font-size: 1.2em;}
h4 { font-size: 1.1em;}
h5 { font-size: 1.0em;}

/* stronger colors
a:link {color: #63c; text-decoration: underline}
a:visited {color: #339; text-decoration: underline}
a:hover {color: }
a:active {color: #c09;}
*/
a:link {color: /*#96c;#8855cc;*/#63c; text-decoration: underline;}
a:visited {color: /*#99c;#5a5ab5;*/ #8877cc; text-decoration: underline;}
a:hover {color: /*#93c;*/#c09;}
a:active {color: /*#93c;*/#c09;}

ol, ul, li { font-size: 1.0em; line-height: 130%; margin: .5em 0 1em 1.5em;}
li { margin: .5em 0 .5em 1.5em;}

blockquote {margin: .5em 0 .5em 2em;}
hr {height:0; border-bottom: 3px solid #60428c;margin:10px 0; color:white;background:white;}
input { font-size: 1.0em; padding: 2px; }

p { font-size: 1.0em;  line-height: 1.4em;  padding:.5em 0 .5em 0;}
li > p { margin-top: 0.2em;}

/***** layout *****/

#header {width:960px;height:100px;	text-align:left;
	margin: 0 auto 0 auto;
	position:relative;}
#headercontact {position:absolute;left:395px; top:70px;  z-index:100;  }
#headercontact a {text-decoration:none;}
#fineart #header {background: url(images/h-fineart-pic.jpg) no-repeat right top;}
#fineart #header .tagtext {position:relative;top:-40px;font: 18px Arial, Helvetica, sans-serif;}
#caricature #header {background: url(images/h-caricature-pic.jpg) no-repeat right top;}
#caricature #header a img {margin-left:-5px;}
#caricature #header .tagtext {position:relative;top:-40px;font: 18px Arial, Helvetica, sans-serif;}
#caricature #header #headercontact {position:absolute;left:380px; top:65px;  z-index:100;  }
#digitalpainting #header {background: url(images/h-digitalpainting-pic.jpg) no-repeat right top;}
#digitalpainting #header .tagtext {position:relative;top:-40px;font: 24px Impact, Arial, Helvetica, sans-serif;}
#digitalpainting #header .tagtext span {font-size:48px;color:#c03;}


#outer{	text-align:left;	margin: 0 auto;
    position:relative;/* ie6 needs this position relative and a width to show floated left contents */
	width:963px;/*960px; background:#ccc;*/ } /*IE6 requires extra 3 pixels or content goes below nav */

#left {
	position:relative; /* ie needs this to show float */
	float:left;
	width:220px;/*185px*/
	left:-1px;/* background:#ccc;*/}

/**** nav ****/
#button {
    position: relative; /*** IE6 needs this to display the div ***/  
	width: 200px;
	padding: 0;
	margin: 0 0 0 /*20px*/0; }
html>body #button { width: 180px;} /* IE/Windows ignores child selector“>” */

#button ul {
	position: relative;
	list-style: none;
	margin: 0 0 10px 0;
	padding: 0;}		
#button ul li { margin: 0;padding: 0; list-style: none;}

#button ul li ul li { margin: 0;padding: 0;}

#button li a {
	width: 100%;
	display: block;
    position: relative; /*** IE6 needs this to display the links ***/
	padding: 2px 2px 5px 5px;                      
	text-decoration: none; }
html>body #button li a { width: auto; } /*IE/Windows ignores child selector“>” */

#button li a:visited { }
#button li a:hover { }
#button li a img {border:none;}

#button ul li ul li a {font-weight:bold;font-size:.9em;  }

/* match h2 and h2 a */
#button ul li h2 {font-size: 1.1em; font-variant: small-caps; margin-top: 0;
                           padding:3px 3px 3px 5px;color:#63c; background:#eee; border-bottom:1px solid #ccc;border-top:1px solid #ddd;}
#button ul li h2 a {       padding: 0;             color:#63c; background:#eee;}
#button ul li h2 a:hover { padding: 0;             color:#c09; background:#f7f7f7;}

/**** content ****/
div,p  {margin-top:0}/*clear top margin for mozilla*/

#content {position:relative;
	width:740px; 
	margin: 0 0 20px 220px; /*background: #fcfcfc;*/}
	
h2 a:link, h3 a:link, h4 a:link {text-decoration:none;}
h2 a:visited, h3 a:visited, h4 a:visited {text-decoration:none;}
h2 a:hover, h3 a:hover, h4 a:hover {text-decoration:underline;}
	
table.gallery {}
table.gallery td {vertical-align:top; padding:5px 20px 20px 0; width:100px;}/* cells expand to fit images but text lines break */
table.gallery td a img {text-decoration:none; margin: 0 0 2px 0;border:none;}
table.gallery td a img.cart {margin: 2px 0 2px 4px;vertical-align: middle;}
	
/* used table.gallery for gallery instead of floats - see index1 for float css */
	
.artcaption {font-size:1.1em;}
.artcaption a img {vertical-align:top;}
.arttitle {font-weight:bold;margin-right:5px;}
.artsize {white-space: nowrap;margin-right:5px;}

img.floatleft {float:left;margin:0 20px 20px 0;}

/**** footer ****/
#clearfooter {clear:both;}
* > html #clearfooter {float:left;}/*width:100%; height:1px; IEmac */

#footer {clear:both;width:960px;border-top: 5px solid /*#99c*/#ccc; margin: 0 auto; padding:0 0 0 0;/* background:#ccc;*/}

#footernav { width:960px; margin: 5px 0 10px 0;}
#footernav ul {text-align: center; list-style: none; margin: 10px 0; padding: 0; }
#footernav ul li { display: inline; list-style:none; margin: 0; padding:0;}

#footernav p { line-height:150%;}
#footernav ul li a {font-weight:bold; white-space: nowrap;text-decoration: none;margin:0;padding: 0.2em 0.75em 0.2em 0.5em;line-height:2em; border-right: 1px solid #ccc;}
 
#footernav ul li a:hover {text-decoration:underline;}
#footernav ul li a.last { border-right:none;}
#footernav a.email { border-right:none; text-decoration:underline;}
#footernav p { line-height:150%; color: #333;}
#footernav p.copyright { color: #777;}

/**** etc ****/
.sidebarrt {float:right; width:220px;margin:0 0 2em 0;/*background:#eee;*/}
.altcolor1 {color:#f30;}  /* #f36 hot pink */
.altcolor2 {color:#C0C;} /* hot lavender */ 
.subheadcolor {color: #60428c;}  
.grey {color:#888;}  
.floatleft {float:left;}
.nowrap {white-space: nowrap;}
.clear {clear:both;}
.smalltxt {font-size:.9em;}
.testimonial {color:#4d4d00;}

.clearfix:after { content: ".";  display: block; height: 0; clear: both; visibility: hidden;} /*p.i.e.*/
/*.clearfix {display: inline-table;} original clearfix replaced with below */
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */