html, body {
    margin:0;
    padding:0;
    height:100%;
}
html {overflow-y:scroll}

body {  
    background:#CCC url(images/barnboards.jpg) repeat fixed;
    font:100%/1.3  arial, helvetica, sans-serif;

}
img {
    border:none;
    vertical-align:bottom;
}
a {text-decoration:none;}

/*=== Misc Typography ===*/
h2 {
    margin:0 1em .6em;
    font:bold 1.1em/1.2 arial;
}
p {
    margin:0 1em .6em;
}
.bold {font-weight:bold;}
.center {text-align:center;}
.mt40 {margin-top:40px}

p.contact { /*text on contact page*/
    margin-top:30px;
    font:bold 16px/1.2 arial;
    color:#2A1A1A;
    text-align:center;
}
    p.contact b { /*headings on contact page*/
        display:inline-block;
        padding-bottom:5px;
        font-style:normal;
        color:#000;
        text-decoration:underline;
    }
    p.contact a {/*email text on contact page*/
        display:inline-block;
        padding:2px 4px;
        font:bold 1em/1.2 arial;
    }

p.shop { /*home page text above shop img*/
    padding-top:10px;
    font:bold italic 17px/1.2 "Script MT Bold";
    color:#2A1A1A;
    text-align:center;
}
p.shop img {
    margin:15px auto;
    box-shadow: 0 0 5px 5px #888;
}

/*=== Float Containment and Min-Height:100% Bug Fixes ===*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/*Opera fix*/
}
#wrapper:after,  /* #wrapper:after for IE8*/
#inner:after { /* #inner:after for Floats*/
    clear:both;
    content:"";
    display:block;
    height:1%;/*IE8 fix*/
    font-size:0;
}

/*===  Begin Layout Structure ===*/
#wrapper {
    position:relative;   
    min-height:100%; /*height is determined from parent's height (html & body)*/
    width:800px;/*840px w/ padding*/
    margin:0 auto;
    padding:0 20px;      
    background:url(images/bg-faux.png) repeat-y;
}
* html #wrapper {height:100%;} /*IE6 treats height as min-height*/ 

#header{
    position:relative;
    height:130px;
    background:#CCC url(images/head.jpg) repeat-y 0 0;
    border-bottom:1px solid #000;
    text-align:left;
}
h1 {
    position:relative; /*for h1 span*/
    float:right;
    width:620px;
    height:70px;/*72px total*/
    padding-top:2px;
    margin:0;
    font:bold 26px/1.2 arial;
    background: url(images/h1-bg.jpg) repeat-x 0 100%;
    color:#2A1A1A;
    overflow:hidden;
    text-shadow: 3px 3px 3px #777;
}
    h1 b {
        display:block;
        margin-top:-2px;
        font:bold 19px/1.2 arial;
    }
    h1 span { /*h1-image text replacement*/
        position:absolute;
        width:620px;
        height:72px;
        top:0;left:0;
        background: url(images/h1-shdw.jpg) no-repeat;
        font-size:0;
    }
#logo {
    float:left;
    width:180px;
    height:130px;
}
    #logo a {
        position:relative;
        display:block;
        width:180px;
        height:131px;
        background: url(images/logo.png) no-repeat 0 0;
        text-decoration:none;
        outline:0;
    }
    * html #logo a {height:130px}/*reset for expanding box bug*/
    
    #logo a:active,
    #logo a:focus,
    #logo a:hover {background-position:0 -130px;}
    
    #logo a span {
         display:none;
        /*position:absolute;
        top:100%;
        left:0;
        cursor:pointer;
        /*width/padding is grouped with (#nav a) rules*/
    }
    /* * html #logo a span {top:131px}/*reset for expanding box bug*/

p#since {
    clear:both;/*IE6*/
    overflow:hidden;/*IE7 italic bug*/
    /*protect logo on text zoom*/
    max-width:600px;
    max-height:50px;
    white-space:nowrap;
    position:absolute;
    right:20px;
    bottom:10px;
    margin:0;
    font:bold italic 24px/1.2 "Script MT Bold";
    color:#2A1A1A;
    text-shadow: 3px 3px 3px #777;
}
/*==== Begin Main Content ====*/
#inner {
    width:800px;/*haslayout*/
    padding:0 0 41px; /*51px to preserve footer space*/
}
#content {
    float:right;
    width:620px;
    padding:1em 0 0;
    text-align:justify; 
}
h3.thumbs { /*=== gallery heading ===*/
    margin: 20px 0 0;
    text-align:center;
    font:bold 1.085em/1.1 arial;
}
    .galnav {
        width:500px;
        margin:5px auto;
        padding:0;
        list-style:none;
        border:1px solid #333;
        border-bottom:0;
        box-shadow: 6px 6px 3px #555;
    }
    .galnav.last {margin-bottom:20px;}

    .galnav li, .galnav li a {
        display:inline-block;/*haslayout tripswitch for IE6/7*/
    }
    .galnav li, .galnav li a {
        display:block;/*tripswitch reset*/
    }
    .galnav li {border-bottom:1px solid #000;}
    
    .galnav li a {
        padding:4px 15px;
        color:#000099; 
        text-decoration:none;
        font:bold 14px/18px arial,helvetica,sans-serif;
        background: linear-gradient(to right, rgba(254,254,254,1) 0%, rgba(171,171,171,1) 100%);
    }
    .galnav li a:hover {
        /*background: linear-gradient(to left, rgba(254,254,254,1) 0%, rgba(171,171,171,1) 100%); */
        color:#006400;
    }
    .galnav li p {
      text-align:center;
      margin:0;
      padding:5px;
      font-weight:500;
    }

/*==== Begin Left Column ====*/
#left{
    float:left;
    width:180px;
    padding-bottom:90px;
}
* html #left {overflow:hidden;}/*IE6 italic bug*/
    
    #nav {
        width:180px;
        margin:0 0 10px;
        padding:0;
        list-style:none;
    }
    #nav li, #nav li a {
        display:inline-block;/*haslayout tripswitch for IE6/7*/
    }
    #nav li, #nav li a {
        display:block;/*tripswitch reset*/
    }
    #nav li {
        border-bottom:1px solid #000;
    }    
    #nav li a,
    #logo a span {
        width:149px; 
        padding:4px 15px;
        color:#000099; 
        text-decoration:none;
        font:bold 14px/18px arial,helvetica,sans-serif;
        background:#C3C3C3 url(images/nav-bg.jpg) no-repeat 0 0;
    } 
    #nav li a:hover,
    #logo a:hover span { 
        background:#E3E3E3 url(images/nav-bg.jpg) no-repeat 0 -50px;/*#E3E3E3*/
        color:#006400;
    }
    #nav li a.current {
        width:150px;/*increase width by 1px to hide right border*/
        background:#FFF url(images/nav-bg.jpg) no-repeat 0 -50px;
        color:#000;
        border-right:1px solid #FFF;/*increase width to 151px to hide right border (FF zoom bug)*/
    }
    /*prevent IE6 from needing !important in ruleset above*/
    #nav li a.current:hover {
        background:#FFF url(images/nav-bg.jpg) no-repeat 0 -50px;
    }

#left p {
    margin:0 1em 1em;
    font:bold italic 14px/1.2 arial;
    color:#2A1A1A;
    text-shadow: 2px 2px 2px #777;
}    
#bot-lt {
    position:absolute;
    width:180px;height:90px;
    left:20px;bottom:41px;
    background: url(images/cross.png) no-repeat 50% 0;
}

/*==== Begin Footer Stuff ====*/
#footer {
    position:relative;
    overflow:hidden;
    width:800px;
    height:40px;
    margin:-41px auto 0;/*pull footer back into viewport with negative top margin*/
    border-top:1px solid #000;
    background:#CCC url(images/head.jpg) repeat-y 0 0;
}
    #ft-lt,
    #ft-rt {
        float:left;
        width:140px;
        height:16px;
        margin:12px 0 0 12px;
        display:inline;/*ie6*/
        font-size:12px;
        overflow:hidden;
    }
    #ft-lt img {float:left;}
    
    #ft-rt {
        float:right;
        margin:12px 12px 0 0;
    }
    #ft-rt img {float:right;}

    #footer p {
        margin:0;
        padding-top:10px;
        font:bold 12px/1.3 arial;
        text-align:center;
    }