body { background: url(/photos/images/bg.jpg); font-size: 16px; }
div, ul, li { position: relative; }
p.description { 
    margin: 1em 0; 
    text-align: center; 
    font-size: 120%; 
    font-style: italic; 
}
h1 { 
    text-align: center; 
}
a.backlink { 
    display: block;
    text-align: center;     
    margin: 0.5em 0;
}
ul.grid { 
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
    list-style: none;    
}
#wrapper {
    width: 100%;    
}
ul.grid li {
    display: block;
    float: left;
    text-align: center;
    width: 154px; 
    height: 154px; 
    padding: 10px;  
}
div.col { 
    width: 40%;
    display: block;
    float: left;
}
div.col ul li { margin: 0.5em 0;}
div.col-news { 
    width: 20%;
    display: block;
    float: right;
}
#photo {
max-width: 90%;
margin: 0 auto;
}
#photo img { max-height: 1000px; }
@media only screen and (min-width: 180px) {
    ul.grid { 
        width: 180px;    
    }    

    div.col, div.col-news { 
        width: 50%;
        display: block;
        float: left;
        margin-bottom: 20px;
    }
    div.col-news { 
        width: 100%;
        display: none;        
        margin-bottom: 0px;
        clear: both;
    }

}
@media only screen and (min-width: 320px) {
    ul.grid { 
        width: 320px;    
    }    
    ul.grid li {
        padding: 2px;
    }
    #photo img { max-width: 100%; display: block; margin: 0 auto;}
}

@media only screen and (min-width: 360px) {
    ul.grid { 
        width: 360px;    
    }        
}
@media only screen and (min-width: 480px) {
    ul.grid { 
        width: 480px;    
    }    
    ul.grid li {
        padding: 2px;
    }    
}
@media only screen and (min-width: 540px) {
    ul.grid { 
        width: 540px;    
    }
    div.col, div.col-news { 
        width: 40%;
        display: block;
        float: left;
        margin-bottom: 0px;
    }
    div.col-news { 
        width: 20%;
        display: block;
        float: right;
        clear: none;
        margin-bottom: 0px;
    }    
}
@media only screen and (min-width: 720px) {
    ul.grid {      
        width: 720px;    
    }    
    
}
@media only screen and (min-width: 800px) {
    ul.grid {      
        width: 800px;    
    }
    
}
@media only screen and (min-width: 1000px) {
    ul.grid {      
        width: 1000px;    
    }
    ul.grid li {
        padding: 10px 20px;
    }
}   
        
ul.grid li a { 
    display : block;
    margin: 0 auto;
}
img.new { 
    position: absolute;
    top: 0;
    right: 0;
}
.photo-nav {
    text-align:center;
    margin: 10px 0;
}
.photo-nav a { display: block; float: left;}
.photo-nav a:last-child { display: block; float: right;}
.links {
    text-align:center;
    margin: 10px 0;
}
h1, .h1 {font-family: Verdana,Arial; color: #8C3C1E; font-size:24px; font-weight: bold;}
h2, .h2 {font-family: Verdana,Arial; color: #8C3C1E; font-size:20px; font-weight: bold;}
h3, .h3 {font-family: Verdana, Arial; color: #8C3C1E; font-size:15px; font-weight: bold;}

body, td, .normal {font-family: Verdana, Arial; color: #8C3C1E; font-size:13px; font-weight: bold;}
a {font-size:13px; font-family: Verdana, Arial; color: #8C3C1E; text-decoration: none;  font-weight: bold;}
img {border-color:#8C3C1E;}
hr {color:#8C3C1E;height: 1px;}


a:visited { color: #78321E; }