/*****************************************************************************
 * ESTILOS GLOBAIS
 *****************************************************************************/
body {
    background-color: #000000;
    color: #F0F0F0;
    font-family: "DejaVu Sans", sans-serif;
    font-size: 13px;
    margin: 0;
    padding: 0;
}

p {
    margin: 0 0 1em 0;
}

h3 {
    margin: .8em 0;
}

form {
    margin: 0;
    padding: 0;
}

fieldset {
    border: none;
}

form div {
    padding: .2em;
}


/*****************************************************************************
 * DIVS - LAYOUT ESTRUTURAL
 *****************************************************************************/
div#divRoot {
}

div#divContainer {
	width: 900px;
    margin: 2em auto;
}

div#divHeader {
}
div#divHeaderIcons {
	overflow: hidden;
}

div#divContent {
	overflow: hidden;	/* contains the floating child divs */
	clear: both;		/* clears the floated elements in the header div */
}

div#divContentLeft {
    color: #000000;
    clear: both;
    float: left;
    text-align: right;
    height: 900px;
    min-width: 350px;
}

div#divContentRight {
    float: left;
    min-width: 325px;
    padding-left: 2em;
}

div#divFooter {
	font-size: 90%;
    clear: both;
    padding-top: .5em;
}


/*****************************************************************************
 * MENU
 *****************************************************************************/
#mainMenu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#mainMenu li {
    display: inline;
    padding: .2em;
}

#mainMenu a {
	border-bottom: 1px dotted;
	text-decoration: none;
    font-weight: bold;
}


/*****************************************************************************
 * LINKS
 *****************************************************************************/
a:link {
    color: #F5B800;
}

a:visited {
    color: #F5B800;
}

a:hover {
}

a:active {
}

#mainMenu a:link,
#mainMenu a:visited {
    color: #F0F0F0;
}
#mainMenu a:hover {
    color: #F5B800;
}


/*****************************************************************************
 * IMAGENS E LOGO
 *****************************************************************************/
#logo {
    border: none;
    vertical-align: text-bottom;
    margin-right: 2em;
}

img.foto {
    border: 2px solid #F5B800;
    position: relative;
    left: 10px;
}

img.capaAlbum {
    border: 1px solid #999999;
}

#divHeaderIcons img {
	border: none;
}

/*****************************************************************************
 * TABELAS
 *****************************************************************************/
table {
    text-align: left;
}

table th {
    background-color: #666666;
}

table th, td {
    padding: .2em .4em;
    vertical-align: top;
}


/*****************************************************************************
 * TEXTO E TÍTULOS
 *****************************************************************************/
.allCaps {
    text-transform: uppercase;
}
.smallCaps {
    font-variant: small-caps;
}
.boldFont {
    font-weight: bold;
}
.textoDestaque {
    color: #F5B800;
    font-weight: bold;
}
.textoFraco {
    color: #BBBBBB;
}


/*****************************************************************************
 * CAIXAS - DIVs
 *****************************************************************************/
div.boxIntegrante {
    background-color: #404040;
    border: 1px solid #DDDDDD;
	font-size: 90%;
	padding: .2em;
    width: 220px;
    z-index: 10;
}

div.popupDiv {
    display: none;
    position: absolute;
    z-index: 100;
}

div.integranteDiv {
    width: 10px;
}
div.integranteDiv:hover .popupDiv {
    display: block;
}

div.boxRecado1 {
    background-color: #303030;
    border: 1px solid #DDDDDD;
    font-size: 95%;
    width: 410px;
    padding: .4em .4em 0 .4em;
    margin-bottom: .8em;
    text-align: left;
}
div.boxRecado2 {
    border: 1px solid #DDDDDD;
    font-size: 95%;
    width: 410px;
    padding: .4em .4em 0 .4em;
    margin-bottom: .8em;
    text-align: left;
}

.boxRelease {
	background-color: #E6E6E6;
	border: 2px solid #AA9988;
	color: #494949;
	padding: .4em 1em;
    width: 400px;
}
.boxRelease p {
	text-align: justify;
}
.boxRelease h1, .boxRelease h2, .boxRelease h3, .boxRelease h4, .boxRelease h5, .boxRelease h6 {
	text-align: center;
	color: #665544;
}

/*****************************************************************************
 * FORMULÁRIOS E ELEMENTOS DE FORMULÁRIO
 *****************************************************************************/
.labelTop {
    vertical-align: top;
}

.formButton {
    font-family: sans-serif;
    font-weight: bold;
    padding: 0 .5em;
}

form.formRecado {
    color: #404040;
}


/*****************************************************************************
 * LISTAS
 *****************************************************************************/
ol.leftList {
    margin-bottom: 2em;
    text-align: left;
}

ol.listaRepertorio {
    text-align: left;
}

ol.listaMusicasAlbum {
    text-align: left;
}
ol.listaMusicasAlbum li {
    margin: .4em 0;
    padding-left: .2em;
}

.fundoAlternadoLista {
    background-color: #303030;
}

li.itemYoutube {
    background-image: url( 'youtube_logo.gif' );
    background-repeat: no-repeat;
    background-position: 0 .2em;
    padding: .4em 0 .4em 55px;
}


/*****************************************************************************
 * RECADOS
 *****************************************************************************/
.recadoTitulo {
    color: #F5B800;
    font-weight: bold;
}
.recadoData {
    color: #AAAAAA;
}
.recadoTexto {
    font-style: italic;
}


/*****************************************************************************
 * REPERTÓRIO
 *****************************************************************************/
.musicaTocada {
	/*
    border: 1px solid #DDDDDD;
    background-color: #303030;
    color: #F5B800;
    */
    border: 1px solid #F5B800;
    background-color: #553C00;
}
.musicaNaoTocada {
	border: 1px solid #666666;
	background-color: #333333;
	color: #BBBBBB;
}