html {
    position: relative;
    min-height: 100%;
    font-family: Arial, Helvetica, sans-serif;
}   

body {
    
}

#menu {
    position:fixed;
    top: 20px;
    right: 20px;
    text-align:center;
    font-size: 20px;
    /* background-color: rgba(255, 255, 255, 0.2); */
    padding: 10px 20px;
}

.page {
    border-bottom: 2px dashed grey;
    padding: 25px;
    text-align: center;
}

img#logo {
    width: 100%;
    margin-bottom: 20px;
}

h1 {
    
}

h2 {
    padding: 15px 0px;
}
h2 span {
    font-size: 24px;
    padding-left: 15px;
    color: #333;
}


/*h3 {
    color: #424242;
    font-family: Georgia, Garamond, Times, serif;
    letter-spacing:0.1em;
    text-align:center;
    margin: 10px auto;
    text-transform: lowercase;
    line-height: 145%;
    font-size: 14pt;
    font-variant: small-caps;
}*/

/*h4 {
    font-size: 22px;
    color:#623123;
    text-shadow: 0px 1px #fff;
    text-align:center;
    letter-spacing:0.1em;
    margin: 10px auto 30px;
}*/

a {
    text-decoration:none;
    color: #000;
}

a:hover, a:focus {
    text-decoration: none;
    color: #000;
    border-bottom: 2px dashed #333;
    outline: none;
}

a.nohover:focus,
a.nohover:hover {
    outline: none;
    border-bottom: none;
}

.menu .glyphicon {
    color:#ADADAD;
}

ul.menu li {
    font-size: 16px;
    padding: 3px;
    list-style-type: none;
}

img.social {
    max-width: 50px;
}

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

.bandpic {
    border: 1px solid #fff;
    margin-bottom: 10px;
}

.bandpic:hover {
    border: 1px dashed #333;
}

.bandpic img {
    padding: 5px;
}
.bandpic img:hover {
    cursor: pointer;
}

textarea.lyrics {
    width:100%;
    min-height: 300px;
    height:100%;
    max-height: 600px;
    background-color: #ddd;
    padding: 5px;
    text-align: center;
}

p.members {
    
}

p.members span {
    font-weight:bold;
}

footer {
    background-color: #1C1B1B;
    height: 200px;
    padding: 20px;
}

footer p {
    margin-top: 30px;
    border-top: 1px solid #383838;
    color: #383838;
}







/* RESPIONSIVE --------------------------------- */ 
/* --------------------------------------------- */ 

.highlight {border: 1px dotted white;}

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {    .highlight {border: 1px solid yellow;}  }
/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {    .highlight {border: 1px solid green;}   }
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {    .highlight {border: 1px solid blue;}    }
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {    .highlight {border: 1px solid pink;}    }
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {   .highlight {border: 1px solid red;}     }