/*
 * CSS Layout for www.sarah-schumann.de
 *
 * (C) 2008 Sarah Schumann
 * All rights reserved.
 *
 */

/* ==================== overall layout  ==================== */

body {
    background-image: url(/images/verlauf.png);
    background-repeat: repeat-x;
    background-color: #eae3dc;
    margin: 0;
    border: 0 none;
    padding: 0 20px 0 20px;
    text-align: center;
    font: 12pt Arial,Helvetica,sans-serif;
}

#outer_box {
    display: inline-block;
    background: #6B3332;
    border: 1px solid white;
    width: 860px;
    margin: 34px 0 0 0;
    padding: 0;
}

#bottom_space {
    height: 20px;
}

/* ==================== banner ==================== */

#banner {
    background: #4B1312;
    margin: 0;
    border: 0 none;
    padding: 10px;
    text-align: right;
    color: white;
    font-weight: bold;
}

#banner_img {
    padding: 0;
    border: 0 none;
    margin: 0;
    height: 80px;
    overflow: hidden;
}

/* ==================== menu ==================== */

#menu {
    background: #222222;
    margin: 0;
    border: 0 none;
    padding: 0 1em 0 1em;
    text-align: left;
    color: #FFFFFF;
    font-weight: bold;
}

#menu a {
    display: inline-block;
    border: 0 none;
    margin: 0;
    padding: 2px 1em 2px 1em;
    color: white;
    text-decoration: none;
}

#menu a:hover {
    color: #BFD1F0;
}

#menu a:active {
    color: #ABA8A8;
}

/* ==================== content ==================== */

#content {
    padding: 2em 2em 1em 2em;
    text-align: justify;
    color: #CCCCCC;
    font-size: 11pt;
    
    min-height: 450px;
}

#content h1 {
    font-size: 160%;
}

#content h2 {
    font-size: 130%;
}

#content h3 {
    font-size: 115%;
}

#content a {
    color: #BC5252;
    text-decoration: none;
    font-weight: bold;
}

#content a:hover {
    border-bottom: 1px dotted #BC5252;
}

#content a:active {
    color: black;
    border-color: black;
}

#content a.img_link img {
    border: 0 none;
}

#guestbook a.img_link:hover {
    border: 0 none;
}

#content hr {
    color: #CCCCCC;
    height: 1px;
}

#content ul.circle_symbol {
    list-style-type: circle;
}

#content .link_description {
    margin: .4em;
    font-size: 80%;
}

#content .news_item .date {
    float: left;
    padding: 0;
    color: #BC5252;
    font-style: italic;
}

#content .news_item p {
    padding-left: 8em;
}

#content .fine_print {
    margin: .4em;
    font-size: 80%;
}

/* ==================== footer ==================== */

#footer {
    text-align: left;
    margin: 0;
    padding: 0;
    border: 0 none;
    border-top: 1px solid #BC5252;
    color: #BC5252;
    font-size: 9px;
}

#hit_counter {
    float: left;
    height: 11px;
}

#online_since {
    float: left;
    height: 11px;
    padding-left: .4em;
}

/* ==================== album ==================== */

#backward_links {
    color: black;
    font-size: 80%;
}

#album_overview {
    text-align: left;
    padding: 0 6px 0 6px;
}

#album_overview h1, #album_overview h3 {
    text-align: center;
}

#album_overview #description {
    text-align: center;
}

#album_overview #description p {
    display: inline-block;
    width: 600px;
    text-align: justify;
    margin: 0;
    padding: .5em 0 2em 0;
}

#album_overview span {
    display: inline-block;
    width: 74px;
    height: 74px;
    padding: 2px 5px 2px 5px;
    margin: 0;
    text-align: left;
    vertical-align: middle;
}

#album_overview img {
    border: 2px solid #6B3332; 
    padding: 3px;
}

#album_overview img:hover {
    border: 2px solid #BC5252; 
}

#album_overview a, #album_overview a:hover, #album_overview a:active, #album_overview a:visited {
    border: 0 none;
}

#album_single {
    text-align: center;
    padding: 1em 0 1em 0;
}

#album_single #picture {
    padding: 1em;
}

#album_single #pic_description {
    text-align: center;
    padding: 0 6em 1em 6em;
}

#album_single #pic_navigation {
    font-size: 80%;
}

#album_single #pic_navigation #previous {
    float: left;
}

#album_single #pic_navigation #next {
    float: right;
}

/* ==================== guestbook ==================== */

#gb_error {
    border: 1px solid white;
    background: #BC5252;
    padding: 2em;
    margin-bottom: 2em;
}

#gb_error span {
    font-size: 120%;
    font-weight: bold;
}

#new_entry legend {
    color: #CCCCCC;
}

#new_entry div {
    margin: .5em 0 0 0;
}

#new_entry label {
    display: block;
    width: 100px;
    float: left;
    text-align: right;
    margin-right: 10px;
}

#new_entry textarea {
    font: 90% Arial,Helvetica,sans-serif;
}

#new_entry #description {
    padding: 2em 0 0 110px;
}

#new_entry img {
    margin-left: 110px;
}

#submit {
    padding: 2em 0 0 110px;
}

#guestbook {
    border: 1px solid #BC5252;
    margin: 2em 2em 1em 2em;
    padding: 5px;
}

#guestbook .entry {
    margin: 1em 1px 1em 1px;
    border: 1px solid #222222;
    padding: 0;
}

#guestbook .entry .header {
    background: #222222;
    padding: 2px .5em 2px .5em;
}

#guestbook .entry .header img {
    margin: 1px 5px 0 5px;
}

#guestbook .label {
    font-weight: bold;
    color: #666666;
}

#guestbook .contact {
    float: right;
    padding: 0;
    margin: 0;
    border: 0 none;
}

#guestbook .message {
    padding: 0;
}

#guestbook .message .title {
    display: block;
    font-weight: bold;
    margin: 0 0 .5em 0;
    border: 0 none;
    padding: 2px .5em 2px .5em;
    background: #5B3332;
}

#guestbook .message .value {
    font: 100% Arial,Helvetica,sans-serif;
    padding: .5em;
    margin: 0;
    overflow: hidden;
}

#guestbook .date {
    text-align: right;
    color: #BC5252;
    font-size: 80%;
    margin-right: .5em;
}

#guestbook .navbar {
    text-align: center;
    font-size: 80%;
}

#guestbook .navbar img {
    vertical-align: middle;
}

#guestbook .navbar .newer {
    float: left;
    text-align: left;
    display: inline-block;
    width: 200px;
    padding: 0;
    margin: 0;
}

#guestbook .navbar .older {
    float: right;
    text-align: right;
    display: inline-block;
    width: 200px;
    padding: 0;
    margin: 0;
}

#guestbook .navbar .total {
    font-weight: bold;
}

/* ==================== title page ==================== */
#title_page_img {
    text-align: center;
    padding: 1em;
}