/*** banksidetraders.org.uk css by subtleasafish.com ***/

/*** global styles
    --------------------------------------------------------
    -------------------------------------------------------- ***/

html, body {
    padding: 0;
    margin: 0;
    }
    
body {
    font: 100% Verdana, Arial, sans-serif;
    color: #666;
    background-color: white;
    text-align: center; /* IE centering hack */
    margin-top: 10px;
    padding-top: 10px;
    }
    
p {
    font-size: 90%;
    }
    
h1, h2, h3, h4, h5 {
    font-family: Tahoma, Helvetica, sans-serif;
    margin: 0;
    }
    
h4 {
    padding-bottom: 10px;
    }
    
    
ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }
    
a {
    text-decoration: none;
    color: #666;
    font-weight: bold;
    }
    
a:hover {
    text-decoration: underline;
    }  
    
.bold {
    font-weight: bold;
    }          
    
/* The background image in .wrapper should be the width of the sidebar.
   Its purpose is to simulate a column of full height. */
       
#wrapper {
    position: relative;
    width: 800px;
    margin: 0 auto; /* proper centering */
    text-align: left; /* return to normalicy */
    border: 1px solid #333;
    background: white url(img/navcol999.jpg) top left repeat-y;
    } 
    
.banner {
    background-color: #ccccff;
    height: 6em;
    border-bottom: 1px solid #555;
    position: relative;
    padding: 1em;
    text-align: center;
    }
    
.banner img {
    text-decoration: none;
    border: 0;
    }    
    
.sidebar {
    float: left;
    width: 160px;
    padding: 1em 5px 0;
    border-right: 1px solid #555;
    }
    
    /* main menu in .sidebar */

.sidebar {
    background: #999;
    margin: 0 auto;
    padding: 1em 0;
    font-size: 13px;
    }
    
ul.navlist {
    text-align: left;
    padding: 0;
    margin-left: 15px;
    width: 60%;
    }
    
ul.navlist li {
    display: block;
    margin: 0;
    padding: 0;
    }
    
ul.navlist li a{
    display: block;
    width: 100%;
    padding: 0.5em 0 0.5em 2em;
    border-width: 1px;
    border-color: #ffe #aaab9c #ccc #fff;
    border-style: solid;
    color: #777;
    text-decoration: none;
    background: #f7f2ea;
    font-weight: normal;
    }
    
.navcontainer>ul.navlist li a {
    width: auto;
    }                
      
ul.navlist li a:hover {
    color: #fff;
    background: transparent;
    border-color: #aaab9c #fff #fff #ccc;
    }
    
    /* end of the main menu */ 
    
    /* current page */
    
body#index li.navlist_index a,
body#about li.navlist_about a,
body#members li.navlist_members a,
body#events li.navlist_events a,
body#downloads li.navlist_downloads a,
body#join li.navlist_join a,
body#links li.navlist_links a,
body#contact li.navlist_contact a
    {
    font-weight: bold;
    color: #696969;
    background: #ccc;
    cursor: default;
    border-color: #ccc;
    }      
    
.main {
    margin-left: 160px; /* adjust for overlap with sidebar */
    border-left: 1px solid #555;
    padding: 1em;
    }
    
    /* footer */    
    
.footer {
    font-size: 0.8em;
    text-align: center;
    margin: 5px 0 10px;
    color: #999
    }
    
.footer a {
    color: #999;
    }
    
.footer a:hover {
    color: #666;
    }        
    
    /* end of footer */    
    
/*** See http://www.positioniseverything.net/easyclearing.html
   for explanation of Tony Aslett's elegant hack ***/
   
.clearing:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
   
/* hides from IE-Mac \*/
/* Don't appear to need this
*html .clearing {
    height: 1%;
    }
*/    
    
.clearing {
    display: block;
    }
/* end hide from IE-Mac */     
/*** end of clearing hack ***/

.def {
    border-bottom: 1px dotted #666;
    cursor: help;
    }                      

/*** index.html/
    --------------------------------------------------------
    -------------------------------------------------------- ***/
    
#indexpic {
    text-align: center;
    padding: 15px 0;
    border: 2px solid #999;
    margin: 10px 0;
    background: #ccccff;
    }  
 
#indexpic img {
    padding: 0 5px;      
    }       
    
/*** about.html
    --------------------------------------------------------
    -------------------------------------------------------- ***/
    
ul#about_aims {
    font-size: 90%;
    padding-left: 50px;
    list-style: square;
    } 
    
div.main_photo_right {
    float: right;
    width: 133px;
    padding: 5px;
    border: 2px solid #999;
    margin: 3px 0 3px 10px;
    background: #ccccff;
    }      
    
div.main_photo_left {
    float: left;
    padding: 5px;
    border: 2px solid #999;
    margin: 3px 15px 3px 3px;
    background: #ccccff;
    }
       
#email_giles {
    font-weight: bold;
    }   
    
/*** events.html
    --------------------------------------------------------
    -------------------------------------------------------- ***/
    
#main-event {
    font-size: 75%;
    line-height: 1.5em;
    margin: 20px 0 10px 20px;
    }
    
#main-event td {
    padding-bottom: 15px;
    }    
        
#main-event .date {
    width: 150px;
    padding-right: 20px;
    vertical-align: text-top;
    }
    
#main-event .event {
    width: 300px;
    padding-left: 30px;
    } 
    
/*** contact.html 
    --------------------------------------------------------
    -------------------------------------------------------- ***/
    
.main-address {
    margin: 20px;
    }
    
/*** members.html
    --------------------------------------------------------
    -------------------------------------------------------- ***/
    
.table-members a, .table-members td {
    font-weight: normal;
    font-size: 85%;
    padding-bottom: 10px;
    }
    
.table-members {
        border-bottom: 1px solid #999;
        margin-bottom: 20px;
        }    
    
#members-left {
    padding-right: 20px;
    vertical-align: text-top;
    }
    
#members-right {
    padding-left: 20px;
    }     
             
/*link to top of the page*/    
a.top {
    background-color: #ccc;
    color: #999;
    padding: 5px;
    margin: 10px 0;
    font-size: 70%;
    } 
   
a.top a:hover {
    color: #666;
    text-decoration: underline;
    } 
    
.top {
    display: block;
    width: 100px;
    }         
    
/*addresses on the members page*/  
#address h4 a {
    text-decoration: none;
    color: #9999cc; 
    } 
     
address {
    font-size: 80%;
    font-style: normal;
    padding-bottom: 20px;    
    } 
    
#address h5 {
    font-style: normal;
    font-size: 95%;
    }    
    
.special {
    color: #9999cc;     
    }
    
.special a {
    color: #9999cc;
    text-decoration: none;
    }
    
.special a:hover {
    color: #666699;
    text-decoration: underline;
    }