/* #main td { border: 1px solid #ffff00; } /**/
/* #monsta object { border: 1px solid #ffffff; } /**/


body {
    margin: 0px;
    background-image: url("bg/website-bg-stuff.png");
    background-attachment: fixed;
    
    font-family: "Arial", "Helvetica", sans-serif;
    color: #5a2138;
}

a:link      { color: #1d7d51; }
a:hover     { color: #36bb43; }
a:active    { color: #fffd2f; }
a:visited   { color: #672ea7; }

img {
    border: none;
}

#page {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    
    z-index: 10;
}

#main-wrapper {
    margin-left: auto;
    margin-right: auto;
}

#main {
    border-collapse: collapse;
    
    /* Needed to sit in front of the tree branch */
    position: relative;
    z-index: 20;
}

#heading-title {
    margin-left: 300px;
}

td.left-heading {
    vertical-align: top;
    min-width: 230px;
}
td.left-heading>img { float: right; }

#content-anim {
    /*
    width: 500px;
    height: 100px;
    */
}

.popup-layer-hidden {
    display: none;
}

.popup-layer-bg {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    cursor: pointer;

    /* There are so many cross-browser issues with transparent backgrounds that it's just much simpler to use an image */    
    background-image: url("bg/fade.png");
    
    z-index: 51;
}

.popup-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    
    z-index: 50;
}

.layer-content {
    text-align: center;
    display: block;
}

.content-title-visible {
    z-index: 52;
}

.content-title, .content-desc {
    display: none;
}

.layer-content > div img, .layer-content > div iframe {
    display: block;
}

.layer-content > div {
    display: inline-block;
    position: relative;
    z-index: 52;
}

.layer-content-box-img {
    border: 10px #ff3333 solid;
    background-color: #ffb452;
}

.layer-content-box-ytembed, .layer-content-box-flash {
    border: 10px #af2455 solid;
    background-color: #ffb452;
}

.content-title-visible {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 30em;
    
    font-family: "Impact", "Charcoal", sans-serif;
    font-size: x-large;
    display: inline-block;
    text-align: center;
    padding: 0.5em;
}

.content-desc-visible {
    display: inline-block;
    text-align: left;
    padding: 0.5em;
    max-width: 30em;    
}

#layer-contact {
    display: none;
}

#layer-links {
    display: none;
}

#footer table {
    width: 100%;
}

#footer td {
    vertical-align: middle;  
}

#footer td > * {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#footer-background {
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 330px;
    
    z-index: 5;
    background-image: url("bg/website-new-island.png");
}

#monsta-tree-container {
    width: 0px;
    height: 0px;
    left: 0px;
    top: 10px;
    position: relative;
}

#monsta-tree {
    width: 330px;
    height: 186px;
    background-image: url("bg/tree.png");
    background-repeat: no-repeat;
}

#monsta {
    position: relative;
    left: 140px;
    top: 10px;
}

td {
    padding: 0px;
}

.border-c-ll { background-image: url("bg/website-border-c-ll.png"); background-repeat: no-repeat; }
.border-c-lr { background-image: url("bg/website-border-c-lr.png"); background-repeat: no-repeat; }
.border-c-ul { background-image: url("bg/website-border-c-ul.png"); background-repeat: no-repeat; }
.border-c-ur { background-image: url("bg/website-border-c-ur.png"); background-repeat: no-repeat; }
.border-tl { background-image: url("bg/website-border-tl.png"); background-repeat: no-repeat; }
.border-tr { background-image: url("bg/website-border-tr.png"); background-repeat: no-repeat; }
.border-v { background-image: url("bg/website-border-v.png"); background-repeat: repeat-y; }
.border-h { background-image: url("bg/website-border-h.png"); background-repeat: repeat-x; }

/* bp (border partial) names based on the numeric keypad */

.bp-8, .bp-4, .bp-7, .bp-5h, .bp-5v { background-position: 0px 0px; }
.bp-9, .bp-6                        { background-position: -21px 0px; }
.bp-1, .bp-2                        { background-position: 0px -21px; }
.bp-3                               { background-position: -21px -21px; }

.bp-1, .bp-3, .bp-4, .bp-6, .bp-7, .bp-9 {
    width: 21px;
    min-width: 21px;
    max-width: 21px;
}

.bp-1, .bp-2, .bp-3, .bp-7, .bp-8, .bp-9 {
    height: 21px;
    min-height: 21px;
    max-height: 21px;
}

.bp-5h {
    height: 42px;
    min-height: 42px;
    max-height: 42px;
}

.bp-5v {
    width: 42px;
    min-width: 42px;
    max-width: 42px;
}

.row-bg {
    background-color: #ffb452;
}

.thumbnail-img, .thumbnail-flash, .thumbnail-ytembed {
    display: inline;
}

h1 img {
    float: right;
}

/* Mouseovers */
#a-links > *, #a-comminfo > *, #a-home > * { display: none; }

#a-home {
    background-image: url("bg/jazaaboo-com-original.png");
    width: 387px;
    height: 116px;
    display: block;
}

#a-home:hover { background-image: url("bg/jazaaboo-com-mouseover.png"); }

#a-links {
    background-image: url("bg/links-original.png");
    width: 248px;
    height: 112px;
}

#a-links:hover { background-image: url("bg/links-mouseover.png"); }

#a-comminfo {
    background-image: url("bg/commission-info-original.png");
    width: 355px;
    height: 146px;
}

#a-comminfo:hover { background-image: url("bg/commission-info-mouseover.png"); }