@font-face {
    font-family: Raleway;
    src: url('../fonts/raleway_thin-webfont.ttf');
    src: local('☺'), url('../fonts/raleway_thin-webfont.woff') format('woff'), url('../fonts/raleway_thin-webfont.ttf') format('truetype'), url('../fonts/raleway_thin-webfont.svg#webfontX4pGz9fc') format('svg');
    font-style: normal;
}

html {
    background-color:   rgb(22,22,22);
}   

body {
    background-color:   rgb(22,22,22);
    font-family:        "Helvetica Neue", "Helvetica", sans-serif;
    text-align:         justify;
    -webkit-font-smoothing: antialiased;
    font-weight: 300;
    font-size:   15px;
}

a {
    color:              #666;
    text-decoration:    none;
}
a:hover {
    border-bottom:      1px solid #666;
}
div#page {
    width:      960px;
    margin:     0 auto;
    background-color:   #eee;
    border-left:    1px solid black;
    border-right:   1px solid black;
    border-bottom:  1px solid black;
}

header#header {
    display:    block;
    height:     539px;
    background-image:   url(../img/background_winter.png);
}
header#header.collapsed {
    margin-top:     -430px;
}

div#content {
    padding:        20px;
}

div#content h1, div#content h2 {
    font-family:    "Raleway";
    margin:         0 0 5px 0;
}
div#content h1 > a {
    color:          #000;
}
div#content h1 {
    font-size:      24px;
}
div#content h2 {
    font-size:      18px;
}

article > header > h1 {
    display:        inline-block;
}
article > header > h1 + time, span.time {
    font-size:      10px;
    font-weight:    200;
    color:          #666;
    font-family:    "Helvetiva Neue", "Helvetica", sans-serif;
    display:        inline-block;
}


article img {
    display:            block;
    float:              right;
    margin:             0 0 10px 10px;
    padding:            0;
    max-width:          175px;
}
img.full-width {
    display:            block;
    float:              none;
    margin:             5px 0;
    max-width:          inherit;
    -webkit-border-radius: 3px;
    border:             1px solid #ccc;
    text-align:         center;
}

article div.inline img {
    display:            inline;
    float:              none;
    margin:             2px;
    max-width:          150px;
}

div#left {
    display:        inline-block;
    width:          390px;
    vertical-align: top;
    margin:         0;
}

aside#right {
    display:        inline-block;
    width:          470px;
    vertical-align: top;
    padding:        19px;
    background-color:   rgba(255,255,255,0.56);
    margin:         10px 0 0 15px;
    font-size:      14px;
    border:         1px solid #ccc;
    -webkit-border-radius: 5px;
}

img.bullet {
    display:    block;
    margin:     0 auto;
}

ul#caroussel {
    margin:     0 0 15px 0;
}
div.lofi > ul#caroussel {
    opacity:    0.3;
}
div.lofi:hover > ul#caroussel {
    opacity:    1;
}
ul#caroussel > li {
    list-style-type:    none;
    position:           relative;
    text-align:         right;
    display:            none;
}
ul#caroussel > li:first-child {
    display:    block;
}

ul#caroussel > li img {
    -webkit-border-radius: 3px;
}
ul#caroussel > li a.caption {
    display:    block;
    position:   absolute;
    top:     10px;
    right:      10px;
    background: rgba(38,38,38,0.8);
    color:      white;
    padding:    10px;
    -webkit-border-radius: 3px;
}
ul#caroussel > li a.caption:hover {
    border:     none;
}

ul#caroussel > li a.caption > span.header {
    font-size:      18px;
    display:        block;
    font-family:    "Raleway";
}

ul#caroussel + div.bullets {
    margin-top:     -10px;
    font-size:      24px;
    color:          #ccc;
}
ul#caroussel + div.bullets > span {
    cursor:         pointer;
    padding:        0 1px;
}
ul#caroussel + div.bullets > span.selected {
    color:          #666;
}

footer#footer {
    background-color:   #ddd;
    padding:        10px 20px;
    border-top:     1px dashed #ccc;
    display:    block;
}

aside#right > h1 {
    text-align:     right;
}

img.left {
    float:          left;
    padding:        5px 10px 10px 0;
}
img.right {
    float:          right;
    padding:        0 10px 0 10px;
}


article > footer > ul {
    margin:         -10px 0 10px 0;
    text-align:     right;
}
ul.tags {
    display:        inline;
    margin:         0;
}
article > footer > ul > li, ul.tags > li {
    list-style-type:    none;
    display:            inline-block;
    border:             1px dashed #ccc;
    padding:            4px;
    -webkit-border-radius: 3px;
    font-size:          12px;
}

article > footer > ul > li > a:hover, ul.tags > li > a:hover {
    border:             none;
}
article > footer > ul > li:hover, ul.tags > li:hover {
    border-style:       solid;
}

ul#previous {
    margin:         0 0 15px 10px;
}
ul#previous > li  {
    color:          #666;
    list-style-type:   circle; 
    list-style-position: inside;
}
ul#previous > li > a {
    font-family:    "Raleway";
    color:          #000;
}

a.flickr {
    display:        inline-block;
    border:             5px #ccc solid;
    background-color:   #ccc;
    -webkit-border-radius:   7px;
    margin:         2px;
}
a.flickr:hover {
    border-color:       #666;
    background-color:   #666;
}
a.flickr > figure {
    position:       relative;
    display:        block;
    padding: 0;
    margin: 0;
}
a.flickr > figure > img {
    -webkit-border-radius:   3px;
    display:        block;
    width:          100px;
}
a.flickr > figure > figcaption {
    position:       absolute;
    background: rgba(38,38,38,0.8);
    color:      white;
    padding:    4px;
    -webkit-border-radius: 3px;
    right:      5px;
    bottom:     5px;
}

ul#archive, ul#archive > li > ul {
    margin:         0 0 10px 0;
    vertical-align: top;
    display:        block;
}
ul#archive > li > ul {
    display:            inline-block;
}
ul#archive li {
    list-style-type:    none;
    display:            inline-block;
    width:              90px;
    text-align:         left;
    font-size:          14px;
}

.hide {
    display:            none;
}

form.edit input[type="text"], form.edit textarea {
    width:              98%;
    margin-bottom:      10px;
}

form.edit textarea {
    height:             400px;
}

form.edit div.edit-tags ul {
    margin:             0;
    margin-bottom:      10px;
    text-align:         left;
}
form.edit div.edit-tags ul > li {
    list-style-type:    none;
    display:            inline-block;
    width:              110px;
}