/* basic formatting on the root element this is xhtml after all */
html
{
    margin: 0;
    padding: 0;
    background-color: #fffff9;
    color: #441;
   font-size: 90%
}

/* basic formatting for the body take off margins and padding for X browser consistency. */

body
{
        background-color: #fffff9;
        color: #441;
        font-family: 'gill sans', Tahoma,'Bitstream Vera Sans', sans-serif;
        padding: 0;
        margin:0;
        padding-top: 1em
        
}

h1, h2, h3, h4, h5, h6
{
    font-family: 'gill sans', Tahoma,'Bitstream Vera Sans', sans-serif;
    font-weight: normal;
    color: #610601;
    backgrorund-color: transprent
}

/*
 Skip to navigation slightly different on the detail pages hence the two definitions.
 */

#skiplinks
{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

#detail #skiplinks
{
    top: 50px;
    left: 50%;
}


/*
 Position the detail picture over the skip to nav link.
 */
#detail #detail-img
{
position: relative;
    z-index: 10
}

/*
 The banner at the top of all the pages except the detail page
 */
#banner
{
    margin: 0;
    position: relative;
    z-index:10;
}

/*
 Main container and home of the blue bar
 */
#box
{
    width: 765px;
    margin: 0 auto;
    position: relative;
    background-image:url(/image/bodyback.gif);
    background-repeat: repeat-y;
    background-position: 0 0;
    min-height: 400px;
} 

/*
 ie strikes again
 */
* html #box
{
    height: 400px;
}

/*
    Hide the bar on the detail page
 */
#detail #box
{
    background-image: none;
}

/*
 Navigation on the detail page
 */
#detail p#navigation
{
    position: absolute;
    top: 0;
    left: 0;
    width: 765px;
     
}

/*
 IE is just different.
 */
* html #detail p#navigation
{
top: 6px;

}

#detail p#navigation a
{
    display: block;
    width: 140px;
    text-decoration: none
    line-height: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-position: 0 0;
    color: #ffd;
    text-decoration: none;
    background-color: #610601;
}

/*
 IE is just different. and 6 is differnt from5 and 5.5 (this is a good thing)
 */
* html #detail p#navigation a
{
   
    width: 160px;
    w\idth: 140px;
}




#detail p#navigation a#back
{
    float: left;
    margin-left: 80px;
    background-image: url(/image/back.gif);
    padding-left:20px
}

* html #detail p#navigation a#back
{
    margin-left: 30px;
}

#detail p#navigation a#forward
{
    float: right;
    text-align:right;
    margin-right: 80px;
    padding-right:20px;
    background-image: url(/image/forward.gif);
}

* html #detail p#navigation a#forward
{
    margin-right: 30px;
}

#detail p#navigation a#gallery-detail
{
    text-align: center;
    width: 200px;
    margin-left: 285px;
    background-image: url(/image/top.gif);
}
* html #detail p#navigation a#gallery-detail
{
    w\idth: 10px;
    width/**/: 200px;
}
/*
 Nav box give it a background color so if someone has images off they can still see the nav
 */
ul#navigation
{
    position: absolute;
    top: 180px;
    left: 12px;
    width: 10em;
    margin: 0;
    padding:0;
    list-style-type: none;
    background-color: #0b62da  
}

ul#navigation li
{
border:0;
padding: 0;
margin:0
}

ul#navigation li a
{
    display: block;
    height: 1.6em;
    line-height: 1.6em;
    color: #ffffde;
    padding: 0 1em;
    text-decoration: none;
    background-image: url(../image/iefix.gif);
    border-left: 4px solid #004eb8;
}
/*
 Fix ie 5
 */
* html ul#navigation li a
{
    margin-top: -3px;
    margin-top/* */:0 
}


ul#navigation li a:visited
{
    color: #c0c4aa
}

ul#navigation li a:hover
{
   color: white;
   background-color:#00aeff;
   border-left: 4px solid #008eff;
  
}


/*
 Push the content over to the right so it is not over the blue bar
 */
#content
{
    margin-left: 200px;
    margin-right: 12px;
}

#content strong
{
color: #610601;
    background-color: transparent
}

/*
 format the content on the detail page, it does not need to be over to the right
 */
#detail #content
{
    margin: auto auto auto auto;
    text-align: center;
    padding-top: 35px;
    
}


/* 
    ie 5 is differnt and can take the same value as everybody else 5.5 and 6 need this value
*/
* html #detail #content
{
    padding-top/* */: 15px
    
}

/*
    Hay formt the paragraph fonts
 */
#content p
{
    font-family: "trebuchet ms", 'Bitstream Vera Sans', sans-serif;
    line-height: 1.6em;
    font-size: 0.9em;
}

/*
    sticky navigation $nav_selector is generated at the top of this document
 and is the reason why this is a php file and not just a plain text/css file
*/

#index #aindex,
 #garden #agarden, #photography #aphotography, #paintings #apaintings, #sculptures #asculptures, #public-art #apublic-art
{
    background-color: #002558;
    color: #005edc;
    border-left: 4px solid #001e88;
    
}

#index #aindex:hover
{
    cursor: default;
}
/*
    gallery lists
*/

#gallery-list,
#gallery
{
    list-style-type: none;
    padding: 0;
    margin:0;
    overflow:auto; /* cunning float clearing system using overflow auto discovered this at 
                    http://annevankesteren.nl/test/examples/css/clearing-floats/003.html 
                    need height for this to work in opera*/
    margin-left: 10px;
    text-align: center;
    
}

/*
 Ie needs this to make the float clearing thing work dont know why it's not working
 the same way as above sites example, but I'll live
 */
#gallery
{
    height: 320px /* need height for this to work in opera */
}

ul#gallery-list
{
    height: 4em /* need height for this to work in opera */
}

#gallery-list li,
#gallery li
{
    float: left;
}

#gallery li
{
    width: 128px;
    margin-bottom: 5px;
    height: 128px;
    margin: 15px;
}

#gallery-list li
{
    width:22px;
    line-height: 22px;
    margin-right: 10px;
    background-repeat: no-repeat;
    background-image: url(/image/circle_hollow.gif);
}

#gallery-list li a,
#gallery li a
{
    display: block;
    color: #ffd;
    text-decoration: none;

}

#gallery-list li a
{
    background-repeat: no-repeat;
    background-image: url(/image/circle.gif);
    background-color: #610601;
    background-position: 0 0;
    line-height: 22px;
    height: 22px
}

#gallery-list li a:hover
{
    background:none;
    color: #441;
}


#gallery li a
{
    line-height: 128px;
}

#gallery li a img
{
    border: none;
    margin: auto;
    vertical-align:middle
}

/*
 Finally generic link colors and hovers
 */

#content p a
{
    text-decoration: none;
    color: #123390;
    background-color: transparent;
    border-bottom: dotted 1px;
}


#content p a:visited
{
    color: #802240;
    border-bottom: 1px dashed #701130
}

#content address
{
    margin-bottom: 1em;
    font-style: normal
}

#content p a:hover
{
color: #2444ee;
    /* hide from ie mac  because cases stuf to move (Very odd) \*/
    border-bottom: 1px solid #2444ee;
    /* stop hiding from ie mac */
}