/* Template für rito.ch */
/* Amport Webdesign 2013 */


/* Als Erstes eingie CSS Resets */

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font: inherit;
    	vertical-align: baseline;
    	outline: 0px;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    
    body, html {
        height: 100%;
    }
    body {
    	line-height: 1;
         
        font-family: 'Open Sans', Verdana, Sans-Serif;
        font-weight: normal;
        font-style: normal;
        font-size: 14px;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    
    .clear {float: none; clear: both;}
    
    a {
        transition: .2s color ease, .2s opacity ease, .2s background ease;
        -webkit-transition: .2s color ease, .2s opacity ease, .2s background ease;
        -moz-transition: .2s color ease, .2s opacity ease, .2s background ease;
    }


/* bg */
img.bg {
        min-height: 100%;
        min-width: 960px;

        width: 100%;
        height: auto;

        position: fixed;
        top: 0;
        left: 0;
        
        z-index: -10;
}

@media screen and (max-width: 960px) {
        img.bg {
                left: 50%;
                margin-left: -480px;
        }
        
}

/* Hauptboxen Styles */
    
    .pagewrapper {
        width: 100%;
        height: 100%;
        
        position: relative;
    }
    
    .middler {
        width:960px;
        margin: 0px auto;
        
        margin-top: 85px;
        
        position: relative;
        
        background: url(../images/schnider/schnider-main-bg2.jpg) repeat-y;
        background-position: 0 195px;
    }
    
    header {
        width: 100%;
        height: 195px;
        
        position: absolute;
        top: 0px;
        left: 0px;
        
        background: url(../images/schnider/header-bg2.jpg) no-repeat;
    }
        .logo {
            position: absolute;
            right: 85px;
            top: 26px;
            
            display: block;
            width: 297px;
            height: 110px;
            
            background: url(../images/schnider/logo-schnidermilch.png) no-repeat;
            background: none;
            text-indent: -99999em;
            
        }
            .logo:hover {
                opacity: .8;
            }
        
        .hm1 {
            position: absolute;
            left: -20px;
            top: -42px;
            z-index: 9;
            
           
            
            transform: rotate(-5deg);
            -webkit-transform: rotate(-5deg); 
            -moz-transform: rotate(-5deg);
            -ms-transform: rotate(-5deg);
            
            
        }
        
        .hm1 img {
             box-shadow: 3px 3px 5px #555;
            -webkit-box-shadow: 3px 3px 5px #555;
            -moz-box-shadow: 3px 3px 5px #555;
        }
        
        .overlay {
            width: 334px;
            height: 173px;
            display: block;
            
            position: absolute;
            left: 220px;
            top: 34px;
            z-index: 10;
            
            background: url(../images/schnider/headeroverlay.png) no-repeat;
           	
           	display: none; 
        }
        
        
    .spalte, .maintext {
        padding-top: 220px;
        padding-bottom: 30px;
    }
    
    .maintext img {
	    max-width: 100%;
    }
    
    .spalte {
        width: 195px;
        height: auto;
        
        margin-bottom: 50px;
            
        float: left;
    }
        .SPrechts {
            float: right;
            width: 195px;
            
            padding-left: 15px;
            padding-right: 15px; 
        }
    
        .mainNav {
            background: #86c3ec;
            
            margin-top: 40px;
            padding: 8px 0 8px 0;
        }
                .subNav {
                    padding:0px;
                }
            .mainNav ul li {
                border-bottom: 1px solid #fff;
                margin-left: -15px;
            }
            .mainNav ul li a {
                text-decoration: none;
                color: #fff;
                
                line-height: 33px;
                height: 33px;
                font-size: 15px;
                display: block;
                
                background: #038cd3;
                
                padding: 0 0 0 10px;
            }
                .mainNav ul li a.external {
                    font-size: 12px;
                    position: relative;
                }
                    .mainNav ul li a.external .externalPfeil {
                        position: absolute;
                        right: 8px;
                        top: 10px;
                        opacity: .7;
                    }
            .mainNav ul li a:hover,
            .mainNav ul li.active a {
                background: #18a2e9;
            }
                
                /* Sub Navigation */
                .mainNav ul ul {
                    padding: 2px 0 10px 0px;
                    display: none;
                    
                    border-top: 1px solid #fff;
                }
                    .mainNav ul li.active ul {
                        display: block;
                    }
                .mainNav ul ul li {
                    margin: 0px 0 0 15px;
                    border: 0px;
                }
                .mainNav ul ul li a,
                .mainNav ul li.active ul li a {
                    background: none;
                    line-height: 20px;
                    height: 20px;
                    margin: 0px;
                    
                    border: 0px;   
                    font-size: 14px;
                    
                    padding: 0 0 0 15px;
                }
                .mainNav ul ul li a:hover,
                .mainNav ul li.active ul li a:hover,
                .mainNav ul ul li.acitve a,
                .mainNav ul li.active ul li.active a {
                    background: #18a2e9;
                }
            .news article {
                margin-bottom: 30px;
            }
            .styled .news h3 a {
                text-decoration: none;
                color: #008bd2;
                margin: 0px;
                padding: 0px;
                font-weight: normal !important;
            }
            .styled .news .morelink {
                width: 100%;
                display:  block;
                text-align: right;
                
                font-style: italic;
                color: #008bd2;
                text-decoration: underline;
            }
            .styled .news .morelink:hover {
                color: #e94e25;
            }
            .styled .news p {
                margin: 0px !important;
            }
                


    .maintext {
        width: 460px;
        padding-right: 40px;
        padding-left: 40px;
        float: left;
    }
    
    
    
    footer {
        font-size: 12px; color: #86c3ec;
        
        position: absolute;
        bottom: -30px;
        
        background: #eef6fe;
        
        width: 940px;
        padding: 5px 10px 5px 10px;
        
        }
        footer address {
            font-style: normal;
        }


/* Styled Text */
    .styled {
        line-height: 17px;
        color: #038cd3;
    }    
    .styled p {
        margin-bottom: 30px;
    }
    
    .styled strong {
        font-weight: bold;
    }
    .styled em {
        font-style: italic;
    }
    
    .styled a {text-decoration: underline; color: #e94e25;}
    .styled a:hover {text-decoration: underline; color: #e94e25;}
    
    .styled h1 {
        font-weight: bold;
        font-size: 18px;
        line-height: 1.4em;
        
        margin-bottom: 20px;

    }
    .styled h2 {
        font-weight: bold;
        font-size: 18px;
        color: #e94e25;
        
        margin-bottom: 20px;
    }
    .styled h3 {
        font-weight: bold;
        font-size: 14px;
        margin: 0px;
    }
    
    .styled ul,
    .styled ol {margin: -20px 0px 10px 20px; list-style: square;}
 
    .styled ol {list-style: decimal; text-align: left;}
    
    .styled th,
    .styled td {vertical-align: top;}
    
    .styled th {font-weight: bold;}
    .styled td {padding-right: 15px; vertical-align: top;
    }
        
        .styled .produktetabelle {
            margin-left: -35px;
        }
        .styled .produktetabelle td {
            font-size: 11px;
            line-height: normal;
            padding: 0 0 10px 0;
            
            vertical-align: bottom;
        }

/* Google Maps*/
.googleMap {
    display: block;
    width: 100%;
    height: 300px;
}


/* Bestellformular */
/* Formular Style */

form fieldset {
    width: 400px;
    bottom: 0px;
    margin: 0 0 20px 0;
}
form fieldset legend {
    font-size:1.2em;
    font-weight: bold;
    padding: 0px 0 5px 0;
    
        }
form input[type=text], form input[type=email], form input[type=url], form input[type=password], form input[type=number], textarea, form .textarea textarea {
		-moz-border-radius: 3px; 
		-webkit-border-radius: 3px; 
		border-radius:2px; 
		height:18px; 
		margin-bottom:2px; 
		border:0px solid #fff; 
		padding:2px 5px 2px 5px;
		background: #d4e7f8;
		font-size: 14px;
		color: #04679a
		}
		form input#hung {display: none;}
		
form label {display:block; height:20px;}

form .textarea textarea {
    height: 55px;
    resize: none;}


/* special form styling */

.form div {height:18px; clear:both; margin-bottom:2px; padding:5px 0px;}
.form div label {float:left; width:auto;}
.form div input,
.form div select,
.form textarea {width:52%; float:right;}
.form div input.invalid {border-bottom:1px solid #f00;}

.form fieldset input.btn,
.form fieldset .btn {
    display: block;
    padding: 0px;
    border: 0px;
    
    cursor:pointer;
    border: 0px;
}

.form fieldset input.btn-blank {
    background: #038cd3;
    border-radius: 5px;
    border: 0px;
    
    color: #fff;
    
    padding: 10px 0px 10px 0px;
    
    font-weight: bold;
    font-size: 15px;
    
    width: 54%;
    float: right;
    
    text-shadow: 1px 1px #000;
        
    transition: all .2s;
   -moz-transition: all .2s;
   -webkit-transition: all .2s;
   -o-transition: all .2s;    	
}

.form fieldset input.btn-blank:hover {
    background: #1c6c91;
    cursor: pointer;
    
    box-shadow: 0px 0px 10px #297095;
}



/*Custom Styles */

.form div input.button { padding: 5px; font-weight: bold;}

.form .error {color: #ab0909; display: block; clear: both; float: right; padding-right: 15px; background: url(../images/schnider/up-arrow-red.png) center right no-repeat;}


/* Produkte Auflistung */
fieldset.kaesebestellung {
    
}

    .form fieldset div.prodRow {
        margin: 0px;
        padding: 0px;
        overflow: hidden;
        
        height: 26px;
        position: relative;
        
    }
    
        .prodName, .prodPreis, .prodBestellung {position: absolute; top: 0px;}
        
        .prodName {
            left: 0px;
            }
        
        .prodPreis {
            font-size: 0.8em;
            left: 220px;
        }
        .prodBestellung {
            color: #a2c0db;
            font-size: 0.8em;
            left: 315px;
        }
            .form .prodBestellung input {
                width: 50px;
                margin: 0px;
                float: none;
                text-align: right;
            }