novocss

body{
    background: #FFF1D6 url(images/noise.png);
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    line-height: 1.6;
    /*!o line-height diz que as linhas ficarão com 160% da altura da fonte*/
}
.container{
    margin: 0 auto;
    width: 960px;
}
/*! a propriedade width fixa a largura para 960 px,a margem superior e inferior está com 0 e a margens
laterais em auto cuidam de centralizar o elemento na página*/
.place{
    background-color: #FFF;
    border-color: #CCC #999 #999 #CCC;/*!a borda da direita e a de baixo terão um tom diferente*/
    border: 1px solid #CCC;
    margin-bottom: 20px;/*!coloca 20px abaixo de cada um dos elementos adicionando espaço entre eles e o
    final da lista,ele adiciona espaçamento no lado de fora dos elementos*/
    padding: 10px;/*!a propriedade padding adiciona o espaçamento dentro do elemento,que no caso é de
    10x em todos os lados -top/right/bottom/left o margin,padding e border segue essa idéia ai
    (sentido horário)
    o background-color é somente para mudar a cor dos elementos place,deferenciando assim do resto da página
    e ficar mais legível*/


}
.place h2{
    border-bottom: 1px dashed #7E9F19;
    margin: 0;
    /*!isso ae é pq a margem padrão do h2 somada com a margem do padding,fazia com que o espaçamento entre
    a borda e o título aparentasse ser maior do que os 10px do padding,para isso estou removendo a borda
    do h2.
    o border-bottom irá adicionar uma borda tracejada(dashed) de 1px com um tom de verde abaixo
    do h2*/
}
.place a{
    color: #2C88A7;
    font-weight: bold;
}
h1 a{
    color: #7E9F19;
    text-decoration: none;
    /*! o  text-decoration diz que o link não terá o sublinhado*/
}
h1 a:hover{
    /*!pseudo-seletor do estado hover,quando o mouse tocar no texto, a cor do texto ficará branca e o fundo ficará verde*/
    background-color:  #7E9F19;
    color: #FFF;
}
.place img{
    border: 1px solid #7E9F19;
    float: left;
    margin: 10px 10px 0 0;
    padding: 2px;
    /*!o float servirá para alinhar a imagem e o texto do parágrafo horizontalmente
    ele vai adicionar uma borda verde na imagem com um espaçamento entre a borda e os demais elementos*/
}
.clear{
    clear: both;
     /*!o float cria um problema em que a imagem vaza para fora da div por isso acrescentei uma elemento
     vazio,a classe clear logo após os parágráfos.Garantindo assim que a imagem fique dentro do seu div,tendo a
     altura adequada para conter todo o seu conteúdo*/
}
.footer{
    font-size: 12px;
    text-align: center;
    /*!o tamanho do texto será 12 px e será alinhado ao centro*/
}
.sidenote {
    background-color: #FFFBE4;
    border: 1px solid #C9BC8F;
    padding: 10px;
    float:right;
    width: 260px;

}
.sidenote h3 {
    font-size: 14px;
    margin-top: 0;
}
.sidenote ol {
    font-size: 12px;
}
.places{
    float: left;
    width: 660px;
}