/**
 * Definições gerais para tudo no site. Cor de fundo, tipo e tamanho de letra, etc.
 */
html, body {
    margin: 0;
    padding: 0;
    background: #fff;
    color: #000;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 1em;
    letter-spacing: 0.1em;
}

body {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3.5em;
}

h3 {
    color: #7F040C; /* Vermelho */
    font-size: 100%;
    margin-top: 2em;
}

h4 {
    color: #a8a8a8; /* Cinzento */
    margin-bottom: 0;
    font-size: 95%;
}

a, a:link {
    transition: background-color 0.8s ease;
    color: rgb(30, 30, 30); /* Cor base para todos os links e dizer que não os queres sublinhados */
    text-decoration: none;
}
a:hover {
    background-color: #ddd;
    color: #000; /* Cor dos links quando pões o rato por cima deles */
}
/*
 * Fim de definições gerais do site
 */


#sidebar {
    float: left;
}



/**
 * Definições gerais para o cabeçalho do site
 * ("RICARDO GUERREIRO \n photographer / filmmaker")
 */
#header h1 {
    margin: 0;
    font-size: 84%;
    font-weight: normal;
}

#header h1 span#header-surname {
    color: #6b6b6b;
}

#header h2 {
    margin: 0;
    font-size: 72%;
    font-weight: normal;
    color: #7F040C;
}
/*
 * Fim do cabeçalho do site
 */



/**
 * Menu de navegação
 */
ul#navigation {
    font-size:74%;
    list-style: none;
    margin: 0;
    margin-top: 3em;
    padding: 0;
}

ul#navigation li {
    list-style: none;
    margin: 0;
    padding: 0 0.8em 0 0.1em; /* Espaçamento "interno" de cada item do menu; permite ajustar a distância da barrinha vertical. Valores na seguinte ordem: TOP RIGHT BOTTOM LEFT */
}

ul#navigation li a {
    transition: background-color 0.8s ease;
    color: #a8a8a8;
    padding: 0.2em;
}

ul#navigation li a:hover {
    background: #ddd;
}

ul#navigation li a.active {
    color: #000;
}


ul#work-navigation {
    padding-left: 1em;
}
/*
 * Fim da navegação
 **/


#content {
    position: relative;
}

#galleria {
    width: 650px;
    height: 433px;
    background: #fff;
}

#thumbnails {
    margin-top: 2.5em;
    margin-left: -5px;
}

#thumbnails img.thumbnail {
    margin-left: 7px;
    margin-bottom: 3px;
    cursor: pointer;
}

#film-2, #film-3, #film-4 {
    display: none;
}



/** Para tudo o que precisa de ser posicionado encostado ao canto superior direito */
.top-right-corner {
    position: absolute;
    top: 0;
    right: 0;
}

.right-width {
    width: 662px;
}

.text-below-sidebar {
    clear: both;
    float: left;
    width: 270px;
    font-size: 70%;
    margin-top: 2em;
}

.text-below-sidebar p {
    margin-top: 0;
}

p.long-description {
    margin-top: 2em;
    width: 240px;
}


#about-photos {
    width: 651px;
}

#about-photos img {
    margin-left: 6px;
    margin-bottom: 8px;
}

#contact-photos img {
    margin-left: 9px;
    margin-bottom: 10px;
}

#contact-photos img.wider-gap {
    margin-left: 19px;
}