/* Added support for :focus in IE via cssfocus.htc (added rule to "body")
   and took out :active selectors (which do not work too well).
*/

body {
color: #000;
background: #660000 no-repeat 0% 0%;
margin:0;
padding: 0;
text-align: center;
font: 100%/120% Verdana, arial, Helvetica;
background-image: url(images/butterfly.png);
}

html {
margin: 0;
padding: 0;
font: 100%/120% Verdana, arial, Helvetica;
}
h1, h2, h3, h4, h5, h6, p,
ul, ol, address{
margin: 1em 0;
padding: 0;
font: italic 100%/140%  Cambria, Georgia, serif;
}
h1 {position: relative; height:115px; margin: 0;}

h1 img {
position:absolute;
top:0;
left:0;
width:680px;
height:115px;
z-index: 1;
}

#florals h1 img{
background: transparent url(images/florals.gif) no-repeat;
}
#portraits h1 img{
background: transparent url(images/portraits.gif) no-repeat;
}
#stilllifes h1 img{
background: transparent url(images/stilllifes.gif) no-repeat;
}
#drawings h1 img{
background: transparent url(images/drawings.gif) no-repeat;
}
#about h1 img{
background: transparent url(images/about.gif) no-repeat;
}

#wrapper {
width: 1050px;
margin: 0 auto;
}

#portraits #wrapper {
background: url(images/bbee.png) no-repeat 98% 30%;
}

#banner {
	margin-top: 40px;
	margin-bottom: 1px;
	height: 30px;
	margin-right: 71px;

}
* html #banner {margin-bottom: 0px;}
#banner ul {

	margin: 0;
	padding: 0px;
	list-style: none;
}
#banner li {
	display: inline;
	float: right;
	margin-right: 5px;
	padding-bottom: 0em; /* to display bottom border on links in IE */
	border: 1px solid #ffffcc;

}
#sitetools li
{
list-style: none;
margin: 0 0 0 7px;
font-size: 34px;

}

#sitetools li a {

	display: block;
	font: bold 32px "Palace Script MT";
	text-decoration: none;
	color: #ffffcc;
	background: #162834 url(images/sitetoolsbtn.gif) no-repeat 0 -4px;
	padding: 0px 10px 0 10px;
	font-weight: bold;
	text-indent: -5000px; overflow: hidden;
	height: 30px;
}
/* no longer needed now we have fixed the italics bug ...
* html #banner {margin-right: 67px;}

*/


#sitetools .home a:focus,
#sitetools .home a:hover {
	background-position: 0 -41px;
}

#sitetools .contact a {background-position: -95px -4px;}

#sitetools .contact a:focus,
#sitetools .contact a:hover {background-position: -94px -41px;}

#sitetools a
{
voice-family: "\"}\"";
voice-family: inherit;
width: 70px;
/* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */
}


#content {
width: 901px;
margin: 0 auto 50px 78px;
padding: 1px 0;
text-align: justify;
background: #ffffcc;

}
#main {
clear: both;
margin: 15px 35px 10px 150px;
padding: 20px;
padding-bottom: 3px;
border: 1px solid black;
background: url(images/l.jpg) no-repeat 60% 50%;
}
* html #main p {
height: 1%;
overflow: visible;
}
#landscapes #main{
	background: url(images/l.jpg) no-repeat 60% 50%;
	
}
#florals #main{
	background: url(images/f.jpg) no-repeat 60% 75%;
	
}
#portraits #main{
	background: url(images/p.jpg) no-repeat 60% 40%;

}
#stilllifes #main{
	background: url(images/s.jpg) no-repeat 10% 60%;
	padding-bottom: 100px;
}
#drawings #main{
	background: url(images/d.jpg) no-repeat 5% 60%;
	
}
#about #main{
	background: url(images/a.jpg) no-repeat 5% 100%;
	
}
#sidebar {
padding: 0;
float: right;
margin-top: 5px;
margin-right: 35px;
display: inline;
}
* html #sidebar{margin-right: 30px;}

/*nav*/

#navlist
{
color: white;
font: bold 34px "Palace Script MT";
margin: 0px;

}

#navlist li
{
list-style: none;
margin: 0px;
font-size: 34px;
float: left;
}

#navlist a
{
float: left;
display: inline;
text-decoration: none;
text-align: center;
letter-spacing: 1px;
word-spacing: 3px;
margin-left: 7px;
margin-bottom: 7px;
color: black;
border-width: 1px;
border-style: solid;
border-color: black;

}

#navlist a#current {

color: black;
}

#navlist a
{
width: 99%;
/* only necessary for Internet Explorer */
height: 31px;
text-indent: -5000px; overflow: hidden;
background: transparent url(images/buttonlist.gif) no-repeat 0 0;
}
#navlist .florals a {background-position: -153px 0;}
#navlist .portraits a {background-position: -306px 0;}
#navlist .stilllifes a {background-position: -459px 0;}
#navlist .drawings a {background-position: -612px 0;}


#navlist .landscapes a:focus,
#navlist .landscapes a:hover {background-position: 0 -35px;}

#navlist .florals a:focus,
#navlist .florals a:hover {background-position: -153px -35px;}

#navlist .portraits a:focus,
#navlist .portraits a:hover {background-position: -306px -35px;}

#navlist .stilllifes a:focus,
#navlist .stilllifes a:hover {background-position: -459px -35px;}

#navlist .drawings a:focus,
#navlist .drawings a:hover {background-position: -612px -35px;}


#landscapes #navlist .landscapes a:focus,
#landscapes #navlist .landscapes a:hover {background-position: 0 0; cursor: default;}

#florals #navlist .florals a:focus,
#florals #navlist .florals a:hover {background-position: -153px 0; cursor: default;}

#portraits #navlist .portraits a:focus,
#portraits #navlist .portraits a:hover {background-position: -306px 0; cursor: default;}

#stilllifes #navlist .stilllifes a:focus,
#stilllifes #navlist .stilllifes a:hover {background-position: -459px 0; cursor: default;}

#drawings #navlist .drawings a:focus,
#drawings #navlist .drawings a:hover {background-position: -612px 0; cursor: default;}

#navlist a
{
voice-family: "\"}\"";
voice-family: inherit;
width: 150px;
/* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */
}

#sitebar>#navlist a
{
width: auto;
/* only necessary if you use the hacks above for the Internet Explorer */
}

.gallerycontainer {
position: relative;
margin-top: 20px;
margin-left: 5px;
text-align: left;
}

a.thumbnail img{
border: 1px solid black;
margin: 0 18px 20px 0;
}

a.thumbnail:hover { /* make IE take notice */
background-color: transparent;
}

a.thumbnail:focus img,
a.thumbnail:hover img {
-moz-outline: 0;
border: 1px solid blue;
}

a.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
left: -1000px;
visibility: hidden;
text-decoration: none;
}

a.thumbnail:focus {
-moz-outline: 0;
}

a.thumbnail:focus span,
a.thumbnail:hover span { /*CSS for enlarged image*/
visibility: visible;
top: 380px;
left: 375px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

a.upper:focus span,
a.upper:hover span {
top: 50px;
left: 375px;
}

#stilllifes a.upper:focus span,
#stilllifes a.upper:hover span {
top: 50px;
left: 325px;
}

#portraits a.upper:focus span,
#portraits a.upper:hover span {
top: 50px;
left: 300px;
}

#footer{
text-align: center;
color: white;
background: #162834;
padding: 5px;
margin: 0 1px;
clear: both;
}

.clearing {clear: both;}

/* ================================================== *
 *          miscellaneous adjustments                 *
 * ================================================== */

body { behavior:url("cssfocus.htc"); }

#preload {text-indent: -5000px;} /* hide preloaded images */

/* these hacks for IE 5.5 Win - */
* html #sitetools a {
width: 90px;
w\idth: 70px;
}
#navlist a {
width: 150px;
}
a.thumbnail:hover {
background-position: 0 0;
}

/* ensure space is big enough for full size pictures */
.gallerycontainer {
min-height: 700px;
margin-left: 0;
}
/* hide from IE5 Mac with this back-slash \*/
* html .gallerycontainer {height: 700px;}
/* end hide; height acts like min-height in IE 5/6 Win */

.gallerycontainer p { /* "Click to view full size" */
float: right;
margin: 0;
font-size: 75%;
color: #600;
}

a.thumbnail span img{ /*CSS for enlarged image - restore the border */
border-width: 1px;
padding: 0;
}

/* ================================================== *
 *       stuff for full size picture display          *
 * ================================================== */

#fs-display {
display: none;
background: #ffc url(images/ajax-loader.gif) no-repeat scroll 50% 40%;
text-align: center;
z-index: 51; /* must be higher than that of spanned thumbnails */
}
/*
	Close button
*/
#fs-display a {
display: block;
font-size: 87.5%;
font-style: normal;
line-height: 3;
text-decoration: none;
text-align: right;
color: #fff;
background: #600 url(images/button-bg.png) scroll repeat-x top;
}

#fs-display a:focus {
-moz-outline: 0;
}

#fs-display a span {
margin-left: 0.27em;
margin-right: 0.27em;
padding: 0 0.27em 0.06em;
font-size: 1.36em;
font-weight: bold;
line-height: 1;
vertical-align: middle;
background-color: #c61a1a;
border: 1px solid;
border-color: #faa #000 #000 #d99;
}

#fs-display img {
border: 1px solid #000;
}
/*
	alt text display
*/
#fs-display p {
float: none;
}

/*
	The picture box position and height are calculated by the script.
	Colors for the "shadow" are (darker to lighter) :
	    #8b8b6f; #9b9b7c; #b6b691; #d1d1a7; #dcdcaf; #ececbc;
	Technique from Stu Nicholls: http://www.cssplay.co.uk/menu/shadow.html
*/

#box1, #box2, #box3 {
border: 2px solid;
}

#box1 { /* picture holder */
background-color: #dcdcaf;
border-color: #ececbc;
}

#box2 {
background-color: #b6b691;
border-color: #d1d1a7;
}

#box3 {
background-color: #8b8b6f;
border-color: #9b9b7c;
}

/* DEBUG */