body {
    background : #fee7c7 url(images/cream_and_sugar.jpg) center top repeat;
    font : normal 86% Georgia, "Times New Roman", serif;
    color : black;
    text-align : center;
}
div#wrapper {
    margin : 50px auto;
    padding : 0 0 20px 0;
    text-align : left;
    width : 800px;
    min-height : 400px;
    height : auto !important;
    height : 400px; /* min-height fast hack */
    background : #fee7c7;
    border : 4px solid #fff; /*#282828; */
    font-family : Lucida Grande, Helvetica, sans-serif;
}
a {
    text-decoration : none;
    color : #374894; /*282828; #8c9f9c; */
    border-bottom : 1px dotted #8c9f9c;
    font-size : 1.1em;
    font-weight : normal;
}
a:hover {
    color : #747efa; /*d9573d; */
}
ul {
    list-style : none;
}

/* ----- home page */
div#headers {
    height : 100px;
    width : 300px;
    margin : 40px 0 10px 10px;
    float : left;
    color : #333;
    display : inline; /* css mastery pg 178 / IE 6 etc double-margin-float bug fix */
}
h1 {
    margin : 0 auto;
    padding : 40px 0 0 0;
    width : 375px;
    height : 68px;
    position : relative;
    float : left;
    /* hide image replaced text */
    font-size : 1px;
    color : #fee7c7;
}
h1 span {
    background : #fee7c7 url(images/SylviaEmard.gif) left top no-repeat;
    position : absolute;
    width : 100%;
    height : 100%;
}

h2, h3 {
    text-align : center;
    margin : 0;
    padding : 5px;
    font-size : 1.5em;
}
h3 {
    font-size : 1em;
}
h4 {
    margin : 0 60px;
    padding : 0 0 10px 0;
}
p {
    margin : 0 60px;
    padding : 0 0 20px 0;
}


/* ----- all pages */

ul#nav {
    width : 400px;
    height : 35px;
    background : #fee7c7 url(images/nav.gif) top left no-repeat;
    margin :  0 150px;
    padding : 0;
    position : relative;
    clear : both;
}
ul#nav li {
    margin : 0;
    padding : 0;
    position : absolute;
    top : 0;
}
ul#nav li, ul#nav a {
    height : 35px;
    padding : 0;
    display : block;
    border-bottom : none;
    overflow : hidden; /* hide the dotted box when clicking, that goes out to browser edge */
    /* hide image-replaced text */
    color : #fee7c7;
    font-size : 1px;
    text-indent : -9999px;
}
li#nav_about   { left :   0px; width : 100px;}
li#nav_contact { left : 100px; width : 100px;}
li#nav_gallery { left : 200px; width : 100px;}
li#nav_events  { left : 300px; width : 100px;}
li#nav_about   a:hover { background : transparent url(images/nav.gif)    0px -35px no-repeat;}
li#nav_contact a:hover { background : transparent url(images/nav.gif) -100px -35px no-repeat;}
li#nav_gallery a:hover { background : transparent url(images/nav.gif) -200px -35px no-repeat;}
li#nav_events  a:hover { background : transparent url(images/nav.gif) -300px -35px no-repeat;}
/* highlight the current tab */
body.about   li#nav_about   a { background : transparent url(images/nav.gif)    0px -35px no-repeat;}
body.contact li#nav_contact a { background : transparent url(images/nav.gif) -100px -35px no-repeat;}
body.gallery li#nav_gallery a { background : transparent url(images/nav.gif) -200px -35px no-repeat;}
body.events  li#nav_events  a { background : transparent url(images/nav.gif) -300px -35px no-repeat;}

div#gallery a {
    border-bottom : none;
}
/* overrides for smooth gallery */
body.gallery div#gallery {
    position : relative;
    margin : 0 auto;
}
div#smooth_gallery_set {
    background : #fee7c7;
    min-height : 600px;
    height : auto !important;
    height : 600px; /* min-height fast hack */
    padding : 0;
    position : relative;
}
div#gallery .slideInfoZone {
    height: 70px;
    color : #000;
    background : transparent;
}
div#gallery .slideInfoZone h2 {
    font-size: 100%;
    text-align : left;
}
div#gallery .slideInfoZone p {
    font-size: 100%;
    color : #000;
}
div#gallery .slideElement {
    height : 420px;  /* height of gallery minus height of carouselMinimizedHeight (see jd.gallery.js) , approx; originally was 100% */
    background-color : transparent;
}
div#gallery .carouselInner {
    margin : 0 auto;
}
div#gallery a.carouselBtn {
    display : none;
}
div#gallery .carousel .label {
    bottom : 10px;
}
div#gallery .number {
    color : #333;
}
div#gallery .gallerySelector {
    background : #fee7c7;
    top : -20px;
}
div#gallery .gallerySelectorWrapper {
    background : #fee7c7;
}
div#gallery .gallerySelector h2 {
    color : #000;
    margin : 0 0 0 660px;
    padding : 0;
}
div#gallery a.gallerySelectorBtn {
    visibility : hidden;
}
div#gallery a.gallerySelectorBtn:hover {
    opacity : 1;
}
div#gallery div.galleryButton h3 {
    color : #000;
    font-size : 1em;
    font-weight : bold;
}
div#gallery .gallerySelector .gallerySelectorInner div.hover {
    background: #fff;
}
div#gallery .gallerySelector .gallerySelectorInner div.selected {
    background: #fff;
}
div#gallery div.galleryButton p.info {
    color : #000;
}
div#gallery .gallerySelector .gallerySelectorInner {
    margin : 0;
}
div#gallery div.galleryButton {
    float : right;
    display : inline; /* css mastery pg 178 / IE 6 etc double-margin-float bug fix */
    clear : both;
    visibility: visible;
    opacity : 1;
    width : 100px;
    height : auto;
    background : #fee7c7;
}

div.section {
    width : 800px;
    /* settings when no javascript */
    position : relative;
    margin : 0;
}
/* show the section headings unless javascript is on */
h4.nojs { display : block; }
/* hide gallery elements unless javascript is on */
img.thumbnail { display : none; }
div#about { margin : 10px 0 0 0; }
div#gallery { display : none; }

#events h4 {
    padding : 0;
}