/* General layout and style: */
body{
	font-size: 14px;
	/* font-family:        Palatino, Arial, Serif; */
	font-family: Palatino,
             "URW Palladio L",
             "Book Antiqua",
             Baskerville,
             "Bookman Old Style",
             "Bitstream Charter",
             "Nimbus Roman No9 L",
             Garamond,
             "New Century Schoolbook",
             "Century Schoolbook",
             "Century Schoolbook L",
             Georgia,
             serif;

    background:         #998568;
	text-align:         left;
    color:              #20201e;
}

.white {
    color:              #ffffff;
}

.copyright {
    color:              #ffffff;
	font-family:        Verdana, Arial, sans-serif;
}

a:link, a:visited {
    color:              #ffffff;
    font-weight:        bold;
    text-decoration:    none;
}

a:hover {
    color:              #c4d64d; 
    text-decoration:    underline;
}

ul{
	list-style:         none;
	padding:            0px;
	margin:             0;
}

li{
	padding:            10px 0 0 9px;
	margin:             0 0 2px 0;
}

li li{
	margin:             0 0 2px 20px;
}


/* These next two lines prevent the dashed outline that appears around
   links after they've been clicked: */
a { outline: none; }
a img { outline: none; }

img {
    border:             4px solid #5f8d8d;
}


/* The jujudef class is a CSS text popup in the top-right of the page */

#crowie {
	width: 225px;
	height: 180px;
	border: none;
}
 
div#jujudef {
	cursor: default;
}

div#jujudef a span{
   
    /* background-color:   #c4d64d;
    padding:            5px;
    right:              50px;
    left:               0px;
    visibility:         hidden;
    color:              black;
    text-decoration:    none; */
	display: none;
}

div#jujudef a:hover span{
    display:         block;
	/* position: absolute; */
	/* top: 175px; */
	/* left: 700px; */
	right: 5px;
	width: 125px;
	padding: 10px;
	margin: 0px 0px 0px 65px;
	z-index: 100;
	font-family: Times, serif
	font-size: medium;
	/* formatting: */
	color: black;
	text-decoration: none;
	background-color:   #c4d64d;
	border:             1px dashed gray;
	font-size: 12px;
	
/*    bottom:             15px;
    right:              10px;
    left:               10px; */
}


/* These button classes are for the front page's butons and their mouseovers.
   Eventually these should be modified to use the sliding image method, rather
   than loading a separate image for normal vs. moused-over */
#storebutton {
    background-image:   url(images/juju-button-store.png);
    display:            block;
    width:              200px;
    height:             75px;
}

#storebutton span {
    display:            none;
}

#storebutton:hover{
    background-image:   url(images/juju-button-store-mouseover.png);
}

#gallerybutton {
    background-image:   url(images/juju-button-gallery.png);
    display:            block;
    width:              200px;
    height:             75px;
}

#gallerybutton span {
    display:            none;
}

#gallerybutton:hover{
    background-image:   url(images/juju-button-gallery-mouseover.png);
}

#aboutbutton {
    background-image:   url(images/juju-button-about.png);
    display:            block;
    width:              200px;
    height:             75px;
}

#aboutbutton span {
    display:            none;
}

#aboutbutton:hover{
    background-image:   url(images/juju-button-about-mouseover.png);
}

#contactbutton {
    background-image:   url(images/juju-button-contact.png);
    display:            block;
    width:              200px;
    height:             75px;
}

#contactbutton span {
    display:            none;
}

#contactbutton:hover{
    background-image:   url(images/juju-button-contact-mouseover.png);
}


/* These define the main areas of the site: */
.main{
    width:              800px;
    height:             533px;
	border:             solid black medium; 
	margin:             2em auto;
	/* padding:            1em;*/
    background:         #8fbdbd;
}

.buttonbox{
    width:              200px;
    height:             333px;
    float:              left;
    padding:             10px;
    background-position: left bottom;
}
 
.branches{
    /* background-image: url(images/juju-branches-cropped.png); */
    width:              200px;
    height:             150px;
    background-position: left top;
	background-repeat: no-repeat;
    float:              left;
	margin: 15px 0 0 0;
}

.branches img {
	border: none;
}

.banner{
    /* background-image: url(images/juju-header-bigger.png); */
    width:              325px;
    height:             160px;
    background-position: left top; 
    float:              left;
	margin:				15px 0 0 30px;
}

.banner img {
	border: none;
}

.crowie{
    /* background-image:   url(images/juju-website2.png); */
    /* background-position: right bottom; */
    float:              right;
    width:              225px;
    height:             180px;
	margin:				0px 0 0 0;
}

/* Layouts for the sub-pages: */

.bottomrightcrow {
    width:              75px;
    height:             100px;
    position:           absolute;
    right:              0px;
    bottom:             0px;
    z-index:            1;
    display:            block;
    background-image:   url(images/juju-secondary-corner.png);
}

.bottomrightcrow span {
    display:            none;
}

.contact {
    background:         #8fbdbd;
    background-image:   url(images/rings_resize.jpg);
    width:              800px;
    height:             533px;
    position:           relative;
    border:             solid black medium;
    margin:             2em auto;
    color:              #abe3e3; 
}


.contact img {
	border: none;
}

.contactdetails {
	padding: 0 0 0 15px;
}

.about {
    background:         #8fbdbd;
    /* background-image:   url(images/pendant2.jpg); */
    width:              800px;
    height:             533px;
    position:           relative;
    border:             solid black medium;
    margin:             2em auto;
    color:              #bdfdfd; 
}

.about img {
	border: none;
}


#slidebox {
	/* border: 2px solid black; */
	margin: 182px  0 0 225px;
}

#aboutslidebox {
	margin: 0 0 0 450px;
	position: absolute;
	top: 75px;
	left: 0px;
}

#widebanner {
	margin: 15px 0px 15px 15px;
	width: 400px;
}

#abouttext {
	width: 400px;
	/*	font-size: 10pt; */
	margin: 0 15px;
	position: absolute;
	left: 5px;
	top: 105px;
}
#footer {
	font-size: 12px;
	text-align: center;
	color: white;
	font-style: italic;
}