/* ======================================================================
 *
 * Filename:    rathke.css
 * Website:     www.innenarchitektur-rathke.de 
 *
 * Date created:    06/02/2013
 * Last modified:   26/02/2013
 *
 * Description: Standard CSS for pagelayout.
 *
 * ====================================================================== */


/* ########## OVERALL ################################################### */

* {
    margin:0;
    padding:0;
}

html, body {
    height: 100%;
    width: 100%;
    background: #252221;
    color: #fff;
    font-size: 12px;
    font-weight: normal;
	font-family: Helvetica, Arial, sans-serif;
}

a.div {
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
}

table {
    margin: 0;
    padding: 0;
    border-collapse: collapse;
}

tr {vertical-align: top;}



/* ########## TEXTFORMATS ############################################### */

/* Headline */
h1 {color: #776c66; font-size: 17px; font-weight: normal; margin: 0 0 20px 0;}

h1.white {color: #fff; font-size: 17px; font-weight: normal; margin: 0 0 20px 0;}

table.referenzen h1 {margin: 0 0 10px 0;}

/* Absatz */
p {margin: 0 0 12px 0;}

/* Schriftfarbe Braun */
span.brown {color: #776c66;}

span.hellertext, p.hellertext {color: #fff;}

/* Hyperlinks Braun (Standard) */
a:link {color: #776c66; text-decoration: none;}
a:active {color: #776c66; text-decoration: underline;}
a:hover {color: #776c66; text-decoration: underline;}
a:visited {color: #776c66; text-decoration: none;}

a.brown:link {color: #252221; text-decoration: none;}
a.brown:active {color: #252221; text-decoration: underline;}
a.brown:visited {color: #252221; text-decoration: none;}
a.brown:hover {color: #252221; text-decoration: underline;}

/* Hyperlinks Weiss */
a.white:link {color: #fff; text-decoration: none;}
a.white:active {color: #fff; text-decoration: underline;}
a.white:visited {color: #fff; text-decoration: none;}
a.white:hover {color: #fff; text-decoration: underline;}

#header a:link {color: #776c66; text-decoration: none;}
#header a:visited {color: #776c66; text-decoration: none;}
#header a:hover {color: #fff; text-decoration: none;}
#header a:active {color: #fff; text-decoration: none;}

#header a.white:link {color: #fff; text-decoration: none;}
#header a.white:visited {color: #fff; text-decoration: none;}
#header a.white:hover {color: #fff; text-decoration: none;}
#header a.white:active {color: #fff; text-decoration: none;}

#header a.whitepage:link {color: #776c66; text-decoration: none;}
#header a.whitepage:visited {color: #776c66; text-decoration: none;}
#header a.whitepage:hover {color: #252221; text-decoration: none;}
#header a.whitepage:active {color: #252221; text-decoration: none;}



/* ########## PAGESTRUCTURE ############################################# */

#distance {
    width: 10px;
    height: 50%;
    float: left;
    margin-bottom: -300px;
}

#container {
    margin: 0 auto;
    position: relative;
    height: 625px;
    width: 1000px;
    clear: left;
	/*overflow: hidden;*/
}
    
    #header {
		float: left;
        width: 100%;
        height: 35px;
        font-size: 23px;
        font-weight: normal;
    }
	
	#logo {
        float: left;
        width: 330px;
        height: 35px;
        margin: 0;
    }
	
#home {
		width: 200px;
        height: 35px;
        margin: 0 0 0 330px;
    }
    
    #mainblock {
        float: left;
        width: 100%;
        height: 565px;
        background: #000;
    }
    
        #grundriss_links {
            float: left;
            width: 500px;
            height: 565px;
            background: #fff;
        }
        
        #grundriss_rechts {
            float: right;
            width: 500px;
            height: 565px;
            background: #fff;
        }
        
        #grundriss2_links {
            float: left;
            width: 564px;
            height: 565px;
            background: #fff;
        }
        
        #grundriss2_rechts {
            float: right;
            width: 436px;
            height: 565px;
            background: #fff;
        }
    
        
        #beispiele {
            position: absolute;
            width: 180px;
            height: 65px;
            text-align: center;
            margin: 501px 0 0 400px;
            background: url(../img/template/button-beispiele.png) no-repeat;
            background-position: bottom; 
        }
        
            #beispiele a {
                color: #252221; 
                font-size: 16px; 
                font-weight: normal;
            }
        
            #beispiele a:hover {
                text-decoration: none;
            }
        
        #beispiele-close {
            position: absolute;
            width: 180px;
            height: 65px;
            text-align: center;
            margin: 501px 0 0 400px;
            background: url(../img/template/button-beispiele-close.png) no-repeat;
            background-position: bottom;
        }
        
        #beispiele-nav {
            position: absolute;
            width: 140px;
            height: 65px;
            margin: 502px 0 0 889px;
            background-position: bottom;			
        }
        
            #beispiele-nav span {
                float: left;
                display: block;
                width: 113px;
				height: 22px;
                color: #252221; 
                font-size: 16px; 
                font-weight: normal;
                text-align: center;
                padding: 0 0 5px 0;
            }
        
            #beispiele-nav div,
            #beispiele-nav div.on {
                float: left;
                width: 36px;
                height: 26px;
                font-size: 16px;
                font-weight: normal;
                padding: 10px 0 0 0;
                text-align: center;
                background: #776c66;
                margin: 0 0 0 1px;
            }
            
            #beispiele-nav div.on,
            #beispiele-nav div:hover {
                background: #252221;
				font-weight: normal;
            }
            
            #beispiele-nav div a,
            #beispiele-nav div a:hover {
                color: #fff;
                text-decoration: none;
            }
    
        #menu_image {
            float: left;
            width: 850px;
            height: 220px;
            margin: 50px 0 0 0;
        }
        
        #navigation_left {
            float: left;
            width: 200px;
            height: 150px;
            margin: 110px 0 0 50px;
        }
        
        #navigation_kontakt {
            float: left;
            width: 200px;
            height: 150px;
            margin: 370px 0 0 50px;
        }

        #navigation_right {
            float: right;
            margin: 50px 80px 0 0;
			width: 300px;
			text-align: right;
        }

		#navigation_button {
            float: right;
            margin: 50px 80px 0 0;
			width: 300px;
			text-align: right;
			padding-right: 40px;

        }
        
            #navigation_left a,
            #navigation_left a.active,
            #navigation_right a,
            #navigation_right a.active,
            #navigation_kontakt a,
            #navigation_kontakt a.active{
                color: #776c66;
                font-size: 23px;
                font-weight: normal;
                margin: 0 0 8px 0;
                display: block;
                text-decoration: none;
            }
            
            #navigation_left a:hover,
            #navigation_left a.active,
            #navigation_right a:hover,
            #navigation_right a.active,
            #navigation_kontakt a:hover,
            #navigation_kontakt a.active {
                color: #fff;
            }



            #footer a, {
                color: #776c66;
                font-size: 23px;
                font-weight: normal;
                margin: 0 0 8px 0;
                display: block;
                text-decoration: none;
            }
            
            #footer a:hover,
            #footer a.active {
                color: #fff;
            }
            
            
        #content_projects {
            position: absolute;
            width: 270px;
            padding: 15px;
            height: 420px;
            line-height: 140%;
            margin: 60px 0 0 330px;
            background: url(../img/template/trans-grey.png);
        }
		#content_ausstellung {
            position: absolute;
            width: 270px;
            padding: 15px;
            height: 260px;
            line-height: 140%;
            margin: 60px 0 0 330px;
            background: url(../img/template/trans-grey.png);
        }
		
		#content_wohnungen {
            position: absolute;
            width: 270px;
            padding: 15px;
            height: 320px;
            line-height: 140%;
            margin: 60px 0 0 330px;
            background: url(../img/template/trans-grey.png);
        }
		#content_grundriss {
            position: absolute;
            width: 260px;
            padding: 15px;
            height: 310px;
            line-height: 140%;
            margin: 60px 0 0 330px;
            background: url(../img/template/trans-grey.png);
        }	
        
        #content_kontakt {
            float: left;
            width: 670px;
            height: 465px;
            line-height: 150%;
            margin: 50px 0 0 80px;
            overflow: auto;
        } 
        
        
        #button_gallery {
            position: absolute;
            width: 40px;
            height: 75px;
            margin: 122px 0 0 810px;
            background: url(../img/template/button-gallery.png) no-repeat;
        }
        
        #kategorie {
            position: relative;
            font-size: 20px;
            font-weight: normal;
            width: 230px;
            margin: -95px 0 0 50px;
            z-index: 1100;
        }
        
        #slidecontrol {
            position: relative;
            width: 99px;
            height: 26px;
            background: url(../img/slider/control.png) no-repeat;
            margin: -21px 0 0 837px;
            z-index: 900;
        }
        
        #projekttabs {
            position: absolute;
            top: 36px;
            right: 29px;
            width: 20px;
        }

        #footer {
            float: right;
            padding: 4px 4px 0 0;
            text-align: right;
            width: 100%;
            height: 25px;
            font-size: 12px;
            font-weight: normal;
            color: #fff;
        }