/**
    * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
    * http://cssreset.com
    */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }
body {
    background-image:url('images/bg.jpg');
    background-position:center;
    background-attachment:fixed
} 
#music-play {
    background-color:#C0C0C0;
    position:fixed;
    border:1px #000000 solid;
    bottom:0;
    left:0
} 
#wrap {
    width:800px;
    border:1px #000000 solid;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:20px;
    margin-top:10px;
    box-shadow: 10px 10px 5px #000000;
    background-color:#0099CC
}
#nav-bar {
    width:800px;
    background:#000000;
}
#nav-bar li {
    color:#FFFFFF;
    display:inline;
    margin:.35em;
    font-size:2em
}
#nav-bar a:link { color:#FFFFFF; text-decoration:none }
#nav-bar a:visited { color:#FFFFFF; text-decoration:none}
#nav-bar a:hover {background-color:#FF3300; text-decoration:none}
/*gallery area styles begin */
#gallery {
    overflow:hidden;
    width:800px;
    height:450px;
    border:1px black solid
}
#title-overlay {
    position: absolute;
    font-size: 3em;
    color:#FFFFFF;
    text-shadow:1px 1px 2px #000000, 0 0 25px #0099ff, 0 0 5px #002e4d;
    z-index:2;
    padding:.25em
}
#picture1 {
    background-image: url('images/band NEW promo shot outsideSkylark2016.jpg');
}
#picture2 {
    background-image:url('images/band-ME with RED mic.jpg');
}
#picture3 {
    background-image:url('images/bandNEW promo Skylark Marque2016.jpg');
}
.show-picture {
    width:800px;
    height:450px;
    position:absolute;
    z-index:1;
    transition: width 2s;
}
.hide-picture {
    width:1px;
    height:450px;
    position:absolute;
    z-index:0;
    transition: width 2s;
    transition-delay: 2s;
}

/*gallery area end */
#main-area {
    width:480px;
    float:left;
    text-align:center;
}
#social-link li {
    display:inline
}
#twitter-feed {
    float:right;
    width:320px
}
#listen-music {
    float:right;
    width:318px;
}
#headed-baby {
    height:110px;
    width:318px;
    margin-top:10px;
    margin-bottom:10px;
    float:right;
    text-align:center
}
.quote {
    font-style:italic;
    font-weight:bolder;
    text-align:center;
    color:#FFFFFF;
    clear:both
}
#footer {
    clear:both;
    margin-top:10px;
    font-size:12px;
    text-align:center
}