body
{
    margin: 0;
    padding: 0;
    font-family: 'Times New Roman', Times, serif, Arial;
    font-size: 1em;
    background-color: Black;
    color: Black;
}
        
    /* Body of Home */
    .b1
    {
    }

        /* (body b1) Hide sub navigation */
        .b1 .sn2, .b1 .sn3, .b1 .sn4, .b1 .sn5, .b1 .sn6
        {
            display: none;
            visibility: collapse;
        }

    /* Body of Hobby */
    .b2
    {
    }
        /* (body b2) Hide sub navigation */
        .b2 .sn1, .b2 .sn3, .b2 .sn4, .b2 .sn5, .b2 .sn6
        {
            display: none;
            visibility: collapse;
        }

    /* Body of Pictures */
    .b3
    {
    }
        /* (body b3) Hide sub navigation */
        .b3 .sn1, .b3 .sn2, .b3 .sn4, .b3 .sn5, .b3 .sn6
        {
            display: none;
            visibility: collapse;
        }

    /* Body of Movies */
    .b4
    {
    }
        /* (body b4) Hide sub navigation */
        .b4 .sn1, .b4 .sn2, .b4 .sn3, .b4 .sn5, .b4 .sn6
        {
            display: none;
            visibility: collapse;
        }
    /* Body of CV */
    .b5
    {
    }
        /* (body b5) Hide sub navigation */
        .b5 .sn1, .b5 .sn2, .b5 .sn3, .b5 .sn4, .b5 .sn6
        {
            display: none;
            visibility: collapse;
        }

    /* Body of Contact */
    .b6
    {
    }
        /* (body b6) Hide sub navigation */
        .b6 .sn1, .b6 .sn2, .b6 .sn3, .b6 .sn4, .b6 .sn5
        {
            display: none;
            visibility: collapse;
        }

/* Banner shows when not loged in */
.banner
{
    margin: 0 auto;
    padding: 0.5em 0;
    width: 866px;
    background-color: Black;
    text-align: center;
}

/* Page header */
.header
{
    margin: 0 auto;
    padding: 0.5em 0.5em 0 0.5em;
    height: 60px;
    width: 866px;
    background-color: #FFFFCC;
}

    /*  Header links
     *------------------------------------
     * Move links more to the right.
     */
    .header ul, .header li
    {
        display: inline;
        list-style-type: none;
    }
        .header a:link, .header a:visited
        {
            text-decoration: none;
            color: Blue;
        }
        .header a:hover
        {   
            text-decoration: underline;
        }

/* Main navigation */
/* ---- Home ----- */
.header #a1
{
    float: left;
    position: relative;
    top: 12px;
    background-image: url('Images/Buttons_Blue.png');
    background-position: 0px 0px;
    width: 111px; height: 25px;
    text-align: center;
    text-decoration: none;
    color: White;
    font-weight: bold;
    margin-left: 5px;
}
    .header #a1:hover
    {
        background-position: 0px -25px;
    }
    .b1 #a1, .b1 #a1:hover, .header #a1:active, .header #a1:focus
    {
        background-position: 0px -50px;
    }
    
/* ---- Hobby ---- */
.header #a2
{
    float: left;
    position: relative;
    top: 12px;
    background-image: url('Images/Buttons_Green.png');
    background-position: 0px 0px;
    width: 111px; height: 25px;
    text-align: center;
    text-decoration: none;
    color: White;
    font-weight: bold;
    margin-left: 5px;
}
    .header #a2:hover
    {
        background-position: 0px -25px;
    }
    .b2 #a2, .b2 #a2:hover, .header #a2:active, .header #a2:focus
{
    background-position: 0px -50px;
}

/* --- Pictures -- */
.header #a3
{
    float: left;
    position: relative;
    top: 12px;
    background-image: url('Images/Buttons_Yellow.png');
    background-position: 0px 0px;
    width: 111px; height: 25px;
    text-align: center;
    text-decoration: none;
    color: White;
    font-weight: bold;
    margin-left: 5px;
}
    .header #a3:hover
    {
        background-position: 0px -25px;
    }
    .b3 #a3, .b3 #a3:hover, .header #a3:active, .header #a3:focus
    {
        background-position: 0px -50px;
    }

/* ------ Movies ----- */
.header #a4
{
    float: left;
    position: relative;
    top: 12px;
    background-image: url('Images/Buttons_Orange.png');
    background-position: 0px 0px;
    width: 111px; height: 25px;
    text-align: center;
    text-decoration: none;
    color: White;
    font-weight: bold;
    margin-left: 5px;
}
    .header #a4:hover
    {
        background-position: 0px -25px;
    }
    .b4 #a4, .b4 #a4:hover, .header #a4:active, .header #a4:focus
    {
        background-position: 0px -50px;
    }

/* ------ CV ----- */
.header #a5
{
    float: left;
    position: relative;
    top: 12px;
    background-image: url('Images/Buttons_Purple.png');
    background-position: 0px 0px;
    width: 111px; height: 25px;
    text-align: center;
    text-decoration: none;
    color: White;
    font-weight: bold;
    margin-left: 5px;
}
    .header #a5:hover
    {
        background-position: 0px -25px;
    }
    .b5 #a5, .b5 #a5:hover, .header #a5:active, .header #a5:focus
    {
        background-position: 0px -50px;
    }

/* --- Contact --- */
.header #a6
{
    float: left;
    position: relative;
    top: 12px;
    background-image: url('Images/Buttons_Red.png');
    background-position: 0px 0px;
    width: 111px; height: 25px;
    text-align: center;
    text-decoration: none;
    color: White;
    font-weight: bold;
    margin-right: 4px;
    margin-left: 5px;
}
    .header #a6:hover
    {
        background-position: 0px -25px;
    }
    .b6 #a6, .b6 #a6:hover, .header #a6:active, .header #a6:focus
    {
        background-position: 0px -50px;
    }

/* Navigation Sub */
.subnav
{
    background: #3B22d2 url('Images/Footer.png') repeat-x 0 0;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    height: 26px;
    padding-top: 0.2em;
    color: White;
    font-weight: bold;
    text-align: center;
}
    .b2 .subnav
    {
        background-color: #038F03;
    }
    .b3 .subnav
    {
        background-color: #C69E00;
    }
    .b4 .subnav
    {
        background-color: #FF8C00;
    }
    .b5 .subnav
    {
        background-color: #A8086E;
    }
    .b6 .subnav
    {
        background-color: #B4020B;
    }
    
    /* Subnavigation links */
    .subnav a
    {
        color: White;
        font-weight: bold;
    }
        .subnav a:link, .subnav a:visited
        {
            text-decoration: none;
        }
        .subnav a:hover
        {
            text-decoration: underline;
        }
        
    .sn1, .sn2, .sn3, .sn4, .sn5, .sn6
    {
    }

/* custom area */
.CustomSidePanel
{
    width: 100%;
    height: 820px;
    background: #3B22d2 url('Images/SidePannels.png') repeat-x 0 0;
}
    .b2 .CustomSidePanel
    {
        background-color: #038F03
    }
    .b3 .CustomSidePanel
    {
        background-color: #C69E00
    }
    .b4 .CustomSidePanel
    {
        background-color: #FF8C00
    }
    .b5 .CustomSidePanel
    {
        background-color: #A8086E
    }
    .b6 .CustomSidePanel
    {
        background-color: #B4020B
    }
    
.MasterCustom
{
    margin: 0 auto;
    padding: 0.5em 0.5em 0 0.5em;
    width: 866px; height: 100%;
    background-color: #FFFFCC;
    color: Black;
    overflow: auto;
}

/* Page footer */
.footer
{
    margin-bottom: 1em;
    background: #3B22d2 url('Images/Footer.png') repeat-x 0 0;
    width: 100%;
    height: 26px;
    text-align: center;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;    
}
    .b2 .footer
    {
        background-color: #038F03;
    }
    .b3 .footer
    {
        background-color: #C69E00;
    }
    .b4 .footer
    {
        background-color: #FF8C00;
    }
    .b5 .footer
    {
        background-color: #A8086E;
    }
    .b6 .footer
    {
        background-color: #B4020B;
    }