/*-------------------------------------------
Style sheet for centred fixed width site layout
Version: 1
Author: Hannah Watkins | Clear Breeze Design
Email: enquiries@clearbreezedesign.com
Website: http://www.clearbreezedesign.com
-------------------------------------------*/


body 
{
    background-color: #ffffff;
    color: #000000;
    margin-top: 0;
    margin-left: 0;
    background-color: #965de8;
    background-image: url('../images/bodybg.jpg');
    background-repeat: repeat-x
}

div.clearleft   
{
    clear: left
}


/* creates centred fixed-width page */

div#page    
{
    width: 780px;
    margin: auto;
    background-color: #ffffff
}




/* creates banner for page */

div#page div#topbanner   
{
    height: 131px;
    width: 780px;
    background-image: url('../images/topbanner.jpg');
    background-repeat: no-repeat;
    background-position: top;
}



    /* top banner menu */



    div#page div#topbanner ul 
    {
        list-style: none;
        margin-top: 5px;
        margin-bottom: 0;
        padding-bottom: 0;
        margin-left: 0;
        padding-left: 0;
    }
    
        div#page div#topbanner ul li  
        {
            display: inline;
            margin-right: 20px
        }
        
            div#page div#topbanner ul li a    
            {
                color: #ffffff;
                text-decoration: none
            }
            
            div#page div#topbanner ul li a:hover    
            {
                text-decoration: underline
            }


/* Big Band top banner version */


div#topmenubigband  
{
    width: 780px;
    margin: auto;
}

    div#topmenubigband ul 
    {
        list-style: none;
        margin-top: 0;
        margin-bottom: 0;
        padding-bottom: 0;
        margin-left: 0;
        padding-left: 0;
    }
    
        div#topmenubigband ul li  
        {
            display: inline;
            margin-right: 20px
        }
        
            div#topmenubigband ul li a    
            {
                color: #ffffff;
                text-decoration: none
            }
            
            div#topmenubigband ul li a:hover    
            {
                text-decoration: underline
            }

div#page div#topbannerbigband   
{
    margin-top: 10px;
    height: 135px;
    width: 762px;
    background-image: url('../images/topbanner_bigband2.gif');
    background-repeat: no-repeat;
    background-position: bottom left;
    margin-left: 18px;
    border-bottom: 2px solid #965de8;
    margin-bottom: 10px
}

    




/* second level navigation */

div#page div#secondlevnav   
{
    float: right;
    width: 200px
}

div#page div#secondlevnav ul    
{
    margin-left: 0;
    margin-top: 10px;
    padding-top: 0;
    padding-left: 20px;
    border-left: 3px dotted #e587e5
}

div#page div#secondlevnav ul li 
{
    list-style: none;
    padding-bottom: 10px;
    background-repeat: repeat-x;
    background-position: bottom;
    padding-left: 5px
}

div#page div#secondlevnav ul a  
{
    text-decoration: none;
    color: #814ecc;
    padding-left: 25px;
    background-image: url('../images/menubullet.gif');
    background-position: center left;
    background-repeat: no-repeat
}

div#page div#secondlevnav ul a:hover
{
    background-image: url('../images/menubulleta.gif');
}

div#page div#secondlevnav ul a#selected 
{
    background-image: url('../images/menubulleta.gif');
    font-weight: bold
}


/* main text area */

div#page div#main   
{
    margin-right: 200px;
    padding-bottom: 15px;
    color: #333333;
    padding-left: 20px;
    width: 500px
}

    div#page div#main div#theory    
    {
        float: left
    }
    
    div#page div#main div#ensembles 
    {
        margin-left: 300px
    }






/* typo styles for main body of text */

div#page div#main h1    
{
    
}

div#page div#main h2    
{   
    color: #633e9a 
}

div#page div#main a 
{
    color: #78a8d8
}

div#page div#main a:hover   
{
    
}

div#page div#main div#intropanel    
{
    width: 429px;
    height: 159px;
    background-image: url('../images/intropanel.jpg');
    background-repeat: no-repeat;
    margin-top: 30px;
    text-align: right;
    padding-right: 20px;
    padding-top: 10px;
}

    div#page div#main div#intropanel p  
    {
        margin-top: 20px;
        padding-left: 170px
    }

div#page div#main p#intro   
{
    color: #633e9a   
}

div#page div#main p.callout 
{
    background-color: #fcf1fb;
    border-top: 1px solid #f3caf0;
    border-right: 1px solid #e3a6de;
    background-image: url('../images/calloutcurve.gif');
    background-repeat: no-repeat;
    background-position: bottom left;
    color: #c66fbf;
    padding-left: 10px;
    padding-bottom: 5px;
    padding-right: 5px
}

div#page div#main ul    
{
    list-style: url('../images/listbullet.gif');
}

    div#page div#main ul li 
    {
        padding-bottom: 3px
    }

div#page div#main em    
{
    color: #b864ab
}

div#page div#main table 
{
    background-color: #b6cace;
    color: #333333;
    padding-bottom: 10px;
}

    div#page div#main table td  
    {
        padding-left: 20px;
        padding-right: 20px;
        border-top: 1px solid #f1eafa;
        border-bottom: 1px solid #8fb7b4
    }
    
    div#page div#main table th  
    {
        padding-top: 10px
    }

div#page div#main dl dt 
{
    font-weight: bold;
    border-bottom: 1px solid #ffffff;
    margin-top: 10px;
}

div#page div#main ul.dates  
{
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

    div#page div#main ul.dates li   
    {
        display: block;
        float: left;
        width: 50px;
        border-bottom: 1px solid #8fb7b4;
        border-right: 1px solid #8fb7b4;
        margin-right: 10px;
        text-align: center;
        margin-bottom: 15px;
        background-color: #b6cace;
        color: #333333
    }
    
    div#page div#main ul.dates li.large 
    {
        width: 200px
    }
    
div#page div#main a.last  
{
    padding-left: 20px;
    background-image: url('../images/backarrow.gif');
    background-position: center left;
    background-repeat: no-repeat;
    margin-right: 30px;
    text-decoration: none
}

    div#page div#main a.last:hover  
    {
        text-decoration: underline
    }

div#page div#main a.next  
{
    padding-right: 20px;
    background-image: url('../images/forwardarrow.gif');
    background-position: center right;
    background-repeat: no-repeat;
    text-decoration: none;
}

    div#page div#main a.next:hover  
    {
        text-decoration: underline
    }
    
    
/* footer */

div#page div#footer 
{
    width: 770px;
    clear: both;
    color: #814ecc;
    border-top: 3px solid #9258e7;
    margin-top: 20px;
    padding-left: 10px;
    padding-bottom: 5px;
    background-color: #85baee;
    background-image: url('../images/footercurve.gif');
    background-repeat: no-repeat;
    background-position: bottom left
}

    div#page div#footer p   
    {
        margin-top: 0;
        margin-bottom: 0
    }
    
    div#page div#footer p a 
    {
        color: #ffffff
    }