* {
    margin: 0px;
    padding: 0px;
}	

html {
    height: 100%;
    width: 100%;
    overflow: auto;
}
	
body {
    height: 100%;
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #333333;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    word-spacing: normal;
    margin: 0px;
    padding: 0px;
    background-color: #FFFFFF;
}

a {
    text-decoration: none;
    color: #333333;
}	
a:hover {
    color: #E77817;
}

img {
    border: 0px;
}

#container {
    height: 100%;
    Margin-right: auto; 
    margin-left: auto; 
    text-align: center; 
    vertical-align: middle;
}

#top, #bottom {
    width: 978px;
    text-align: left;
    margin-top: 2px;
    font-size: 10px;
    color: #336666;
}


#wrapper {
    height: 558px;
    width: 978px;
    margin: 0px;
    padding: 0px;
    text-align: left;
    border: 1px solid #9DB5B7;
}

#content {
    height: 514px;
    width: 717px;
    margin-top: 22px;
    margin-bottom: 22px;
    border-left: 2px solid #9DB5B7;
    text-align: center;
    float: right;
}
#content #painting {
    width: 100%;
    height: 485px;
}

#panel {
    width: 217px;
    margin-top: 22px;
    margin-left: 22px;
}

#heading {
    width: 100%;
    height: 365px;
}
#heading #info {
    width: 100%;
    height: 283px;
}


/* This is the correct settings to define all #menu items.
   However, Google Chrome does not interpret "display: block" properly,
   therefor use the settings below this instead.
   And in every html page, add 2   to play the trick.
#menu #phoenix a {
    width: 217px;
    height: 20px;
    background-image: url(Assets/Phoenix.gif);
    background-repeat: no-repeat;
    display: block;
}
#menu #phoenix a:hover {
    background-image: url(Assets/PhoenixHover.gif);
}
#menu #phoenix a.active {
    background-image: url(Assets/PhoenixActive.gif);
}
#menu #aboutCharlieSheard a {
    width: 217px;
    height: 20px;
    background-image: url(Assets/AboutCharlieSheard.gif);
    background-repeat: no-repeat;
    display: block;
}
#menu #aboutCharlieSheard a:hover {
    background-image: url(Assets/AboutCharlieSheardHover.gif);
}
#menu #aboutCharlieSheard a.active {
    background-image: url(Assets/AboutCharlieSheardActive.gif);
}
#menu #charlieSheardsWork a {
    width: 217px;
    height: 20px;
    background-image: url(Assets/CharlieSheardsWork.gif);
    background-repeat: no-repeat;
    display: block;
}
#menu #charlieSheardsWork a:hover {
    background-image: url(Assets/CharlieSheardsWorkHover.gif);
}
#menu #charlieSheardsWork a.active {
    background-image: url(Assets/CharlieSheardsWorkActive.gif);
}
#menu #charlieSheardsDrawings a {
    width: 217px;
    height: 20px;
    background-image: url(Assets/CharlieSheardsDrawings.gif);
    background-repeat: no-repeat;
    display: block;
}
#menu #charlieSheardsDrawings a:hover {
    background-image: url(Assets/CharlieSheardsDrawingsHover.gif);
}
#menu #charlieSheardsDrawings a.active {
    background-image: url(Assets/CharlieSheardsDrawingsActive.gif);
}
#menu #fourSydneyAbstractionists a {
    width: 217px;
    height: 20px;
    background-image: url(Assets/FourSydneyAbstractionists.gif);
    background-repeat: no-repeat;
    display: block;
}
#menu #fourSydneyAbstractionists a:hover {
    background-image: url(Assets/FourSydneyAbstractionistsHover.gif);
}
#menu #fourSydneyAbstractionists a.active {
    background-image: url(Assets/FourSydneyAbstractionistsActive.gif);
}
#menu #essaysAndCatalogues a {
    width: 217px;
    height: 20px;
    background-image: url(Assets/EssaysAndCatalogues.gif);
    background-repeat: no-repeat;
    display: block;
}
#menu #essaysAndCatalogues a:hover {
    background-image: url(Assets/EssaysAndCataloguesHover.gif);
}
#menu #essaysAndCatalogues a.active {
    background-image: url(Assets/EssaysAndCataloguesActive.gif);
}
#menu #teaching a {
    width: 217px;
    height: 20px;
    background-image: url(Assets/Teaching.gif);
    background-repeat: no-repeat;
    display: block;
}
#menu #teaching a:hover {
    background-image: url(Assets/TeachingHover.gif);
}
#menu #teaching a.active {
    background-image: url(Assets/TeachingActive.gif);
}
#menu #charlieSheardStudioSchool a {
    width: 217px;
    height: 20px;
    background-image: url(Assets/CharlieSheardStudioSchool.gif);
    background-repeat: no-repeat;
    display: block;
}
#menu #charlieSheardStudioSchool a:hover {
    background-image: url(Assets/CharlieSheardStudioSchoolHover.gif);
}
#menu #charlieSheardStudioSchool a.active {
    background-image: url(Assets/CharlieSheardStudioSchoolActive.gif);
}
*/


#menu #phoenix {
    width: 217px;
    height: 20px;
    letter-spacing: 217px;
}	
#menu #phoenix a {
    background-image: url(Assets/Phoenix.gif);
    background-repeat: no-repeat;
}
#menu #phoenix a:hover {
    background-image: url(Assets/PhoenixHover.gif);
}
#menu #phoenix a.active {
    background-image: url(Assets/PhoenixActive.gif);
}
#menu #aboutCharlieSheard {
    width: 217px;
    height: 20px;
    letter-spacing: 217px;
}
#menu #aboutCharlieSheard a {
    background-image: url(Assets/AboutCharlieSheard.gif);
    background-repeat: no-repeat;
}
#menu #aboutCharlieSheard a:hover {
    background-image: url(Assets/AboutCharlieSheardHover.gif);
}
#menu #aboutCharlieSheard a.active {
    background-image: url(Assets/AboutCharlieSheardActive.gif);
}
#menu #charlieSheardsWork {
    width: 217px;
    height: 20px;
    letter-spacing: 217px;
}
#menu #charlieSheardsWork a {
    background-image: url(Assets/CharlieSheardsWork.gif);
    background-repeat: no-repeat;
}
#menu #charlieSheardsWork a:hover {
    background-image: url(Assets/CharlieSheardsWorkHover.gif);
}
#menu #charlieSheardsWork a.active {
    background-image: url(Assets/CharlieSheardsWorkActive.gif);
}
#menu #charlieSheardsDrawings {
    width: 217px;
    height: 20px;
    letter-spacing: 217px;
}
#menu #charlieSheardsDrawings a {
    background-image: url(Assets/CharlieSheardsDrawings.gif);
    background-repeat: no-repeat;
}
#menu #charlieSheardsDrawings a:hover {
    background-image: url(Assets/CharlieSheardsDrawingsHover.gif);
}
#menu #charlieSheardsDrawings a.active {
    background-image: url(Assets/CharlieSheardsDrawingsActive.gif);
}
#menu #fourSydneyAbstractionists {
    width: 217px;
    height: 20px;
    letter-spacing: 217px;
}
#menu #fourSydneyAbstractionists a {
    background-image: url(Assets/FourSydneyAbstractionists.gif);
    background-repeat: no-repeat;
}
#menu #fourSydneyAbstractionists a:hover {
    background-image: url(Assets/FourSydneyAbstractionistsHover.gif);
}
#menu #fourSydneyAbstractionists a.active {
    background-image: url(Assets/FourSydneyAbstractionistsActive.gif);
}
#menu #essaysAndCatalogues {
    width: 217px;
    height: 20px;
    letter-spacing: 217px;
}
#menu #essaysAndCatalogues a {
    background-image: url(Assets/EssaysAndCatalogues.gif);
    background-repeat: no-repeat;
}
#menu #essaysAndCatalogues a:hover {
    background-image: url(Assets/EssaysAndCataloguesHover.gif);
}
#menu #essaysAndCatalogues a.active {
    background-image: url(Assets/EssaysAndCataloguesActive.gif);
}
#menu #teaching {
    width: 217px;
    height: 20px;
    letter-spacing: 217px;
}
#menu #teaching a {
    background-image: url(Assets/Teaching.gif);
    background-repeat: no-repeat;
}
#menu #teaching a:hover {
    background-image: url(Assets/TeachingHover.gif);
}
#menu #teaching a.active {
    background-image: url(Assets/TeachingActive.gif);
}
#menu #charlieSheardStudioSchool {
    width: 217px;
    height: 20px;
    letter-spacing: 217px;
}
#menu #charlieSheardStudioSchool a {
    background-image: url(Assets/CharlieSheardStudioSchool.gif);
    background-repeat: no-repeat;
}
#menu #charlieSheardStudioSchool a:hover {
    background-image: url(Assets/CharlieSheardStudioSchoolHover.gif);
}
#menu #charlieSheardStudioSchool a.active {
    background-image: url(Assets/CharlieSheardStudioSchoolActive.gif);
}

.buttonNext {
    width: 44px;
    height: 33px;
    margin-left: 175px;
    background-image: url(Assets/ButtonNext.gif);
    background-repeat: no-repeat;
    display: block;
}
.buttonBack {
    width: 44px;
    height: 26px;
    margin-left: 170px;
    background-image: url(Assets/ButtonBack.gif);
    background-repeat: no-repeat;
    display: block;
}

.captionPhoto {
    font-size: 12px;
    margin-top: 5px;
}
.captionPainting {
    font-size: 13px;
    text-align: center;
}