/* ******************** */
/* www.officina-ludi.de */
/* ******************** */

body {
    margin:0;
    padding:5px;
    background-color:#CC9900;
    font-family:Arial, sans-serif;
    font-size:16px;
    font-style:normal;
    font-weight:normal;
    text-align:center;
    color:#FFFDCC;
}

div {
    margin:0;
    padding:0;
}

/*Text elements*/
h1 {
    margin:0 0 5px 0;
    padding:0;
}


h2 {}
h3 {}

p {
    margin:0 0 15px 0;
    padding:0;
}

.liste {
    line-height:18px;
}

.eingerueckt {
    padding-left:10px;
}

.zentriert {
    text-align:center;
    padding:0;
    margin:0;
}

em {
    font-weight:normal;
    font-style:italic;
}
strong{
    font-weight:bold;
    font-style:normal;
}


/*
The following positioning of the centered box
via divs will only work with smaller content areas
where negative margin won't reach out of he viewport.
Else use a workaround with ugly tables.
If you use the table workaround see that !DOCTYPE is set w/out the DTD link.
This will ensure (in)correct rendering of the table. Ha.
*/
/*See that top padding also shows in smaller viewports*/
/*
#topspacer {
    height:100%;
    width:100%;
    top:15%;
    left:15%;
    position:absolute;
}
*/
/*Use this for reference to center contents container*/
/*
#centerpoint {
    width:1px;
    height:1px;
    position:absolute;
    top:50%;
    left:50%;
    overflow: visible;
    background-color:black;
}
*/

table {
     width:100%;
     height:100%;
}


/*Actual container for page contents*/
#container {
    width:940px;
    height:570px;
    margin:0;
    padding:0;
    background-color:transparent;
    position:relative;
    font-size:11px;
    line-height:15px;
    letter-spacing:0;
    word-spacing:0;
    text-align:left;
    overflow:visible;
}

/*Left side container*/
#leftside {
    width:450px;
    height:570px;
    background:url('../images/bg-officina-ludi-logo.gif') top right no-repeat #FFFDCC;
    color:#000000;
    position: absolute;
    top:0;
    left:0;
    overflow:visible;
}

/*Right side container*/
#rightside {
    width:490px;
    height:570px;
    background-color:#000000;
    position: absolute;
    top:0;
    left:450px;
    overflow:visible;
}

/*Top navigation container*/
#navigation_top {
    width:490px;
    height:29px;
    background-color:#000000;
    position:absolute;
    top:0;
    left:0;
}

/*Bottom navigation container*/
#navigation_bottom {
    height:29px;
    background-color:#000000;
    position:absolute;
    bottom:0;
    right:6px;
}

/*Navigation images*/
#navigation_top img, #navigation_bottom img {
    padding:0;
    margin:0;
    border:0;
    display:block;
    float:left;
}

/*Wood cut box*/
#woodcut {
    width:219px;
    height:65px;
    position:absolute;
    right:-35px;
    bottom:42px;
    z-index:10;
}


/*Link box floatinmg left of wood cut box*/
#linkbox {
    width:280px;
    height:60px;
    position:absolute;
    left:32px;
    bottom:35px;
    z-index:11;
}


#content {
    /*height:486px;*/
    height:395px;
    margin:69px 0 0 0;
    padding:0 30px 0 30px;
    overflow:visible;
}

#content_leftside {
    height:460px;
    width:100%;
    margin:60px 0 0 0;
    padding:0;
    overflow:hidden;
    text-align:center;
}

#content_leftside_center {
    height:460px;
    width:100%;
    margin:110px 0 0 0;
    padding:0;
    overflow:hidden;
    text-align:center;
}

#content_leftside_center_start {
    height:460px;
    width:100%;
    margin:100px 0 0 0;
    padding:0;
    overflow:hidden;
    text-align:center;
}

#content_leftside.big
 {
     margin:35px 0 0 0;
    height:auto;
}


/*Container for thumbnailed images*/
#thumbbox {
    width:392px;
    height:42px;
    margin:0;
    padding:0;
    overflow:hidden;
    text-align:center;
    position:absolute;
    left:29px;
    bottom:35px;
}


/*Content area of home page*/
#startcontent {
    width:100%;
    margin:0;
    padding:90px 0 0 0;
    overflow:hidden;
    text-align:center;
}

/*Content area with centered divs*/
#centercontent {
    width:150px;
    margin:0 0 0 150px;
    padding:90px 0 0 0;
    overflow:hidden;
    text-align:justify;
    letter-spacing:1px;
}


/*Clear up floats*/
.clearer {
    clear:both;
}


/*Hyperlinks*/
a, a:link, a:focus, a:active, a:visited {
    color:#CC9900;
    text-decoration:none;
}
a:hover {
    color:#FFFDCC;
    text-decoration:none;
}

#content_leftside a:hover {
    color:#000000;
    text-decoration:none;
}

a img {
    border:0;
}

#thumbbox a img {
    border:1px solid #CC9900;
    margin:0;
    padding:0;
}


/*FOR AJAX POPUP*/
.big_popup {
    position:absolute;
    top:10;
    left:10;
    text-align:center;
    display:block;
    z-index:777;
    display:none;
    background:#CC9900;
    padding:10px;
    border:2px solid #000000;
}

.big_popup img {
    border:0;
}