/* ======================================================================
 *
 * Filename:    albene.css
 * Website:     www.albene.de
 * Author:      INTERPAGEmedia
 * Author URL:  http://www.interpage.de
 *
 * Date created:    10/10/2013
 * Last modified:   04/16/2014
 *
 * Description: Standard CSS for page layout
 *
 * ====================================================================== */





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

/* Google Font Import (Merriweather Sans) */
@import url(http://fonts.googleapis.com/css?family=Merriweather+Sans:400,300,300italic,400italic,700,700italic);

* {
    margin: 0;
    padding: 0;
}

body {
    background: url(../img/template/bg.png) repeat-y 50% 0;
    
    color: #000;
    font-size: 14px;
    font-weight: 400;
    font-family: 'Merriweather Sans', sans-serif;
}


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

a img {border: none;}

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

tr {vertical-align: top;}


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

/* Headlines */
h1 {color: #E21C17; font-size: 14px; font-weight: 700; margin: 0 0 18px 0;}

h1.yellow {color:#f4b600;}

h1.green {color:#93C01F;}

h1.blue {color:#0094E2;}

h1.purple {color:#6A28C1;}

h2 {color: #000; font-size: 14px; font-weight: 700; margin: -14px 0 18px 0;}

h3 {color: #000; font-size: 14px; font-weight: 700; margin:  0 0 18px 0;}

/* small font */
small {font-size: 12px;}

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

/* Auflistungen */
#white_stripe ul {margin: 0 0 18px 15px;}
#white_stripe li {margin: 0 0 0px 0;}

/* Hyperlinks */
a:link {color: #E21C17; text-decoration: none;}
a:hover {color: #E21C17; text-decoration: underline;}
a:active {color: #E21C17; text-decoration: underline;}
a:visited {color: #E21C17; text-decoration: none;}



/* ########## FORMULARE ################################################# */

fieldset {
    margin: 0;
    padding: 0;
    border: none;
    text-align: left;
}

    legend {display: none;}
    
    label {display: block;}
    
    
    /* Eingabefelder */
    select,
    textarea,
    input[type=text],
    input[type=email],
    input[type=password] {
        width: 96%;
        border: none;
        background: #eee;
        margin: 0 0 5px 0;
        padding: 3px 2% 3px 2%; 
        
        font-size: 14px;
        font-weight: 400;
        font-family: 'Merriweather Sans', sans-serif;
    }
    
    select {}
    
    textarea{
        height: 150px;
        overflow: auto;
    }
    
    select:focus,
    textarea:focus,
    input[type=text]:focus,
    input[type=email]:focus,
    input[type=password]:focus {
        background: #ddd;
    }
    
    input[type=checkbox] {
        margin: 10px 0 0 0;
    }
    
    /* Schaltflächen */
    input[type=submit],
    button[type=submit] {
        color: #000;
        border: none;
        background: none;
        text-align: left;
        padding: 2px 0 2px 0;
        
        font-size: 14px;
        font-weight: 400;
        font-family: 'Merriweather Sans', sans-serif;
    }
    
    input[type=submit]:hover,
    button[type=submit]:hover {
        cursor: pointer;
        text-decoration: underline;
    }
    
    input[type=submit]:active,
    button[type=submit]:active {
        color: #444;
    }



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

#header {
    width: 100%;
    min-height: 140px;
    background: #E21C17;
    padding: 0 0 10px 0;    
}

    #header .content {color: #fff;}
    
    
    #meta_navigation {
        float: left;
        margin: 85px 0 0 0;
    }
    
        /* An dieser Stelle wird die Meta-Navigation über navigation.css eingebunden! */
    
    
    #logo {
        float: right;
        width: 265px;
        height: 85px;
        margin: 35px 0 0 0;
        background: url(../img/template/albene-logo.png) no-repeat;
    }




#navigation {
    width: 100%;
    height: 35px;
    background: #000;
}

    /* An dieser Stelle wird die Hauptnavigation über navigation.css eingebunden! */
    



#white_stripe {
    width: 100%;
    background: #fff;
}

    #white_stripe .content {color: #000; background: #fff; padding: 25px 0 25px 0;}
    
    
    /* An dieser Stelle wird die Unternavigation über navigation.css eingebunden! */
    
    
    #basic-accordian{
    	width:100%;
    	z-index:2;
    }
    
    .accordion_headings{
    	cursor:pointer;
        background: #eee;
        margin: 0 0 20px 0;
        padding: 5px 10px 5px 10px;
    }
    
    .accordion_headings:hover {
        color: #fff;
    	background:#E21C17;
    }

    #acc-content{
        padding-top:  15px;
    }



#black_stripe {
    width: 100%;
    background: #000;
    margin: 20px 0 0 0;
}

    #black_stripe .content {color: #fff; background: #000; font-weight: 300; padding: 25px 0 25px 0;}
    
    
    
    
#footer {
    width: 100%;
    background: #000;
    margin: 0 0 50px 0;
    padding: 6px 0 6px 0;   
}

    #footer .content {color: #fff; background: #000; font-weight: bold; font-style: italic; font-family: arial, helvetica, sans-serif;}
    



.content {
    width: 960px;  
    line-height: 150%;
    margin: 0px auto;
    overflow: hidden;
}

    .content_column,
    .content_column_first {
        float: left;
        width: 269px;
        overflow: hidden;
        background: #fff;
        min-height: 320px;
        margin: 0 0 25px 0;
        padding: 0 25px 0 25px;
        border-right: 1px solid #B9B7B7;
    }
    
    .content_column_first {
        width: 268px;
        border-left: 1px solid #B9B7B7;
    }
    
        .content_column img,
        .content_column_first img {
            width: 75%;            
            height: auto;
            display: block;
            margin: 0 auto 0 auto;
            padding: 25px 0 25px 0;                                    
        }
        
        .content_column h1 {
            margin: 10px 0 18px 0;
        }
        
        
    #content_border {
        float: left;
        width: 958px;
        margin: 0 0 25px 0;
        border-left: 1px solid #B9B7B7;
        border-right: 1px solid #B9B7B7;   
    }
    
        .content_column_twothird {
            float: left;
            width: 588px;
            min-height: 320px;
            padding: 10px 25px 0 25px;
            border-left: 1px solid #B9B7B7;
        }
    
    
    
    
    
/* ########## RESPONSIVE ELEMENTS ####################################### */
    
    
/* ##### Darstellung ab 960 Pixel ##### */

@media only screen and (max-width: 960px) {
   
    
    body {background: #E21C17;}
    
    
    
        #meta_navigation {
            width: 100%;
            margin: 5px 0 0 0;
        }
        
        #logo {
            float: right;
            margin: 15px 0 0 0;
        }



        #navigation {
            height: auto;
            }
                
            #navigation ul {
                width: 100%;
                clear: both !important;
            }
            
                #navigation ul li {
                    width: 100%;
                    clear: both !important;
                }
            
                    #navigation ul li a,
                    #navigation ul li:first-child a,
                    #navigation ul li:last-child a {
                        width: 100%;
                        padding: 5px 0 5px !important;
                        background: none !important;
                        border-top: 1px solid #fff;
                    }
                    
                    #navigation ul li:first-child a {
                        border: none !important;
                    }
                    
                    #navigation ul li:hover ul {
                        display: none !important;
                    }
                    
                    
                    
        span#navtitle {display: none !important;}
        
        #subnav ul {
            float: left !important;
            width: 100% !important;
            margin: 0 0 0 -5% !important;
        }
        
            #subnav ul li a {
                padding: 1% 3% 1% 6% !important;
                width: 91% !important;
                background: none !important;
            }
            
            
            
        #white_stripe {background: #fff !important;}


        .content {
            width: 92%;
            margin: 0 0 0 4%;
        }
        
            #content_border {
                width: 100%;
                border: none;
            }
        
            .content_column,
            .content_column_first {
                width: 30.0%;
                padding: 0 1.5% 0 1.5%;
            }
            
                iframe {width: 100%;}
            
            .content_column_twothird {
                width: 62.0%;
                padding: 0 2% 0 2%;
            }
            
                .content_column_twothird img {
                    width: 50%;
                    height: auto;
                }

}



/* ##### Darstellung ab 480 Pixel ##### */

@media only screen and (max-width: 480px) {
    
    
    body {background: #E21C17;}
    
    
            
        #meta_navigation ul li a#home {
            display: none;
        }
        
        #meta_navigation ul li a#impressum {
            margin: 0 0 0 20px;
        }
        
        
        
        #subnav ul {
            float: left !important;
            width: 98% !important;
            margin: 0 1% 0 1% !important;
        }
        
            #subnav ul li a {
                padding: 1% 3% 1% 6% !important;
                width: 91% !important;
                background: none !important;
            }
        

        
        .content {
            width: 92%;
            padding: 0;
            margin: 0 4% 0 4%;
        }
        
            #content_border {border: none;}
        
            .content_column,
            .content_column_first {
                width: 100%;
                min-height: inherit;
                border-left: none;
                border-right: none;
                padding: 0 0 25px 0;
                border-bottom: 1px solid #000;
            }
            
            .content_column_twothird {
                width: 100%;
                padding: 0;
                border-left: none;
                border-right: none;
                min-height: inherit;
            }
    
}