/*
 *  tomstyle - CSS - visual styling of elements
 */

body, html
{
    top:0px;
    height:100%;
    width:100%;
    margin:0px;
    padding:0px;
    background-color:black;
    color:white;
}

/* wrapper */

div.wrapper
{
    position:relative;
    min-height:100%;
    width:800px;
    margin:0px auto 256px auto;
    padding:0px;
}

/*  banner */
div.banner
{
    top:0px;
    width:825px;
    height:160px;
    background-image:url("../graphics/banner1.jpg");
    background-repeat:no-repeat;
    background-position:center;
}

.banner h3
{
    position:relative;
    top:164px;
    right:0px;
    margin:0px;
    font-family:sans-serif;
    text-align:right;
}

.banner a
{
    color:teal;
}
/*  sidebar */

div.sidebar
{
    position:absolute;
    top:192px;
    padding:2px;
    border:2px solid rgb(20, 71, 20);
    font-family:monospace;
    font-weight:bold;
    text-align:center;
    background-image:url("../graphics/navbar.jpg");
    background-position:-12px -12px;
}

.sidebar h2
{
    text-decoration:underline;
}

div.sidebarbutton
{
    padding:2px;
    border:2px solid rgb(0, 51, 0);
    background-color:rgb(25,25,25);
}

.sidebarbutton a
{
    display:block;
    width:116px;
    padding-top:8px;
    padding-bottom:8px;
    
    text-decoration:none;
    color:white;
    
}

.sidebarbutton a:hover
{
    background-color:rgb(2,104,104);
}

.sidebarbutton a:active
{
    background-color:white;
}


/*  greybox */

.greybox
{
    position:relative;
    left:116px;
    width:600px;
    margin:32px auto 0px 28px;
    padding-top:8px;
    padding-bottom:32px;
    background-color:rgb(15,16,15);
    border:3px solid rgb(0, 37, 0);
}

.greybox h1
{
    text-align:center;
    font-family:sans-serif;
    font-weight:100;
    letter-spacing:4px;
}

.greybox h2
{
    padding:16px;
    font-family:sans-serif;
    font-weight:100;
    letter-spacing:4px;
}

.greybox h3
{
    padding:16px;
    font-family:sans-serif;
    font-weight:100;
    letter-spacing:4px;
    text-decoration:underline;
}

.greybox h4
{
    padding:0px 16px 8px 16px;
    font-size:larger;
}

.greybox h5
{
    position:relative;
    top:-48px;
    padding:16px;
    margin-bottom:-64px;
    font-weight:100;
}

.greybox p
{
    padding:8px 16px 8px 16px;
    font-family:sans-serif;
    font-size:small;
}

.greybox a
{
    color:teal;
}

table
{
    width:100%;
    padding:16px;
}

.greybox td
{
    width:33%;
    padding-right:32px;
    padding-bottom:48px;
    text-align:left;
    vertical-align:top;
    font-family:sans-serif;
    font-size:small;
}

.greybox th
{
    width:33%;
    padding-bottom:16px;
    text-align:left;
    font-size:medium;
    text-decoration:underline;
}

/*  image styleing */

.thumbnail
{
    display:inline;
    vertical-align:middle;
    width:75%;
    
    padding:2px;
    background-color:white;
    cursor:pointer
}

.thumbnail-small
{
    display:inline;
    width:180px;
    vertical-align:middle;
    
    padding:2px;
    background-color:white;
    cursor:pointer
}

/*  general */

.centered
{
    display:block;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

.inlinepic
{
    float:left;
    margin:8px;
}

iframe
{
    border:1px solid;
    margin:16px;
}

ul
{
    font-family:sans-serif;
    font-size:small;
}
li
{
    padding:4px;
}

/*  footer  */


div.footer
{
    position:absolute;
    bottom:0px;
    right:0px;
    font-family:sans-serif;
    font-size:x-small;
    text-align:right;
}

/*

.pressquote
{
    font-size:small;
    border-spacing:0px 12px;
    background-color:black;
    padding:24px;
}

.formpage
{
    position:absolute;
    right:38%;
    top:30%;
}

.navtable
{
    width:100%;
}

.navtable .l
{
    padding-right:14px;
    float:left;
}

.navtable .r
{
    padding-left:14px;
    float:right;
}


/*  gallery and general img manipulation    

div.imgborder
{
    display:block;
    float:left;
    padding:8px;
    margin:8px;
    margin-right:16px;
}


.thumbnailicon td
{
    max-width:132px;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;
    text-align:center;
}

.galleryicon
{
    width:144px;
    max-width:144px;
    height:144px;
    max-height:144px;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;
    text-align:center;
    vertical-align:middle;
}

.gallerythumb
{
    margin-left:auto;
    margin-right:auto;
}

/*  record player   

div.recordplayer
{
    position:fixed;
    z-index:-3;
    right:0px;
    bottom:32px;
}

#record
{
    position:fixed;
    z-index:-2;
    right:90px;
    bottom:8px;
}

#needle
{
    position:fixed;
    z-index:-1;
    right:108px;
    bottom:74px;
}

#mutetext
{
    position:relative;
    width:68px;
    left:104px;
    top:-575px;
}

/* main body of page 

div.content
{
    position:absolute;
    left:220px;
    top:140px;
    width:80%;
    margin-right:2000px;
}

.content h3
{
    position:relative;
    top:-16px;
}

.content h4
{
    position:relative;
    top:-24px;
}


.mainsection
{
    margin-left:16px;
    margin-right:16px;
    margin-top:28px;
    margin-bottom:28px;
}

/* blog posts 

div.post
{
    padding-bottom:18px;
}

.post img
{
    display:block;
    margin-left:auto;
    margin-right:auto;
    max-width:80%;
    max-height:500px;
}

/* upcoming panel 

.rightbar
{
    position:inherit;
    width:60%;
    min-width:464px;
    max-width:832px;
    top:0px;
}

div.upcoming
{
    white-space:pre-wrap;
    position:inherit;
    left:100%;
    width:50%;
    min-width:200px;
    max-width:300px;
    padding:16px;
    margin-left:24px;
    margin-right:32px;
    margin-top:16px;
    margin-bottom:28px;
}

.upcoming img
{
    max-width:100%;
}

.upcoming form
{
    display:inline;
}

.upcoming .pressquote
{
    padding:12px;
    padding-top:4px;
}

/* individual sub-pages 

.discog p
{
    padding:8px;
}

.contacts
{
    padding:8px;
    padding-left:16px;
}

.links
{
    padding:8px;
    padding-left:16px;
    padding-bottom:16px;
}

.links img
{
    display:block;
    float:left;
    margin:6px;
}

.media table
{
    margin-left:auto;
    margin-right:auto;
    border-spacing:4px;
}












div.footer
{
    position:fixed;
    left:0px;
    bottom:0px;
    height:34px;
    width:100%;
    background-color:black;
}

.footer img
{
    padding:2px;
}

#copyright
{   
    position:absolute;
    right:100px;
    top:0px;
    font-size:small;
}

/*  general 

.big
{
    font-size:x-large;
}

.medium
{
    font-size:medium;
}

.navlinks
{
    cursor:pointer;
}

.navbuttons
{
    background-color:rgb(200, 200, 200);
    padding-bottom:4px;
    padding-top:6px;
    padding-left:7px;
    padding-right:9px;
    box-shadow: 2px 2px 6px black;
    font-family:monospace;
    font-size:small;
    font-weight:900;
    color:black;
    text-decoration:underline;
    border-radius:3px;
    cursor:pointer;
}

.navbuttons:hover
{
    background-color:white;
    color:DarkKhaki;
    text-shadow:3px 2px 3px black;
}

.warning
{
    color:red;
}

.pressquote
{
    font-size:small;
    background-color:black;
}

.pressquote .author
{
    float:right;
    font:message-box;
    color:Khaki;
}

.linkstyle
{
    color:Khaki;
    text-shadow:3px 2px 3px black;
}

.cleanlink
{
    text-decoration:none;
}

/*  gallery and images  

.galleryrow td
{
    background-color:black;
}

.galleryicon
{
    background-color:black;
}

.galleryicon img
{
    /*filter: gray; 
    /*filter: grayscale(100%) contrast(200%) brightness(10%);  IE5*/
    -ms-filter: grayscale(100%) contrast(200%) brightness(10%);
    -o-filter: grayscale(100%) contrast(200%) brightness(10%);
    -moz-filter: grayscale(100%) contrast(200%) brightness(10%);
    -webkit-filter: grayscale(100%) contrast(200%) brightness(10%);
}

.galleryicon img:hover
{
    /*filter: none;
    filter: grayscale(0) contrast(150%);
    -ms-filter: grayscale(0) contrast(150%);
    -moz-filter: grayscale(0) contrast(150%);
    -o-filter: grayscale(0) contrast(150%);
    -webkit-filter: grayscale(0) contrast(150%);
}

.gallerythumb
{
    background-color:white;
}

div.imgborder
{
    background-color:black;
}

/*  side bar 

#mutetext
{
    background-color:black;
    font-family:Courier New;
    font-size:70%;
    font-weight:lighter;
    color:rgb(0, 255, 0);
}

/*  main section of page    

body
{
    background-color:black;    
    color:white;
}

.content h1
{
    text-align:center;
    border-bottom-style:solid;
}

.content h2
{
    font-family:sans-serif;
    text-transform:uppercase;
    vertical-align:bottom;
    vertical-align:text-bottom;
    line-height:100%;
    text-align:left;
    color:Khaki;
    text-shadow:3px 2px 3px black;
}

.content h3
{
    line-height:100%;
    font-weight:100;
    font-size:small;
    vertical-align:top;
    vertical-align:text-top;
}

.content h4
{
    font-family:sans-serif;
    font-variant:small-caps;
    font-size:xx-small;
    font-style:italic;
    letter-spacing:2px;
    vertical-align:top;
    vertical-align:text-top;
    line-height:100%;
    color:rgb(192, 0, 0);
    text-shadow:0px 0px 3px black;
}

.content p
{
    max-width:100%;
    white-space:pre-wrap;
    font:message-box;
    font-size:small;
}

/*  blog posts  

div.post
{
    border-bottom-style:solid;
}

/*  upcoming bar    

div.upcoming
{
    background-color:rgba(65,65,65,0.95);
    border:1px solid gray;
}

/*  sub pages   

.media table
{
    border-color:rgb(0, 0, 0);
}

.contacts
{
    background-color:black;
}

.links
{
    background-color:black;
}