/* Kochbuch-Formular */
.inputField { 
	/* wird in Seiten/style.css definiert; Abweichung müssen hier definiert werden */
} 

.errorField {
	/* wird in Seiten/style.css definiert; Abweichung müssen hier definiert werden */
} 

/************************* tables **********************************/
.registrierung {
	width:50%;
	background-color:#fff;
	border:1px solid #bbb;
	text-align:center;
	padding:10px 30px;
}
.registrierung  td{
	padding:2px;
}

.errorTable { /* error_Table (nicht errorTable !) wird in style.css definiert */
	border: 1px solid #9F0004;
	font-size: 12px;
	background-color: #E2E1E1;
	border-collapse: collapse;
	color: #ee0000;
} 
.ioTable {
	border: 1px solid #9F0004;
	font-size: 12px;
	background-color: #E2E1E1;
}
.login {
	background-color:#fff;
	width:auto; padding:10px 20px;
	border:1px solid #bbb;
	text-align:left;
}
/**********************eof tables **********************************/

div.info {
	width:auto; height:14px;
	background-image:url("../Grafiken/info.gif");
	background-repeat:no-repeat;
	background-position:left;
	padding:7px 0 0 23px;
	color:#000000;
	font-size:12px;
}
div.error {
	width:auto; height:14px;
	background-image:url("../Grafiken/info2.gif");
	background-repeat:no-repeat;
	background-position:left;
	padding:7px 0 0 23px;
	color:#e71700;
	font-size:12px;
}

.hr {
	margin:8px 0px;
	height:1px;
	width:100%;
	background-image:url("../Grafiken/1px.gif");
	background-repeat:repeat-x;
}
.hr_dotted {
	margin:8px 0px;
	height:1px;
	width:100%;
	background-image:url("../Grafiken/1.1px.gif");
	background-repeat:repeat-x;
}
.hr_light {
	margin:8px 0px;
	height:1px;
	width:100%;
	background-image:url("../Grafiken/1px_l.gif");
	background-repeat:repeat-x;
}

.size {
	width:100%; height:auto;
	border:0px;
}
.smallsize {
	width:50%; height:auto;
	border:0px;
}
.admsize {
	width:70%; height:auto;
	border:0px;
}
.cartsize {
	width:60%; height:auto;
	border:0px;
}
.verysmallsize {
	width:25%; height:auto;
	border:0px;
}

.question {
	font-style:italic;
	font-weight:bold;
	margin:15px 0px 5px 0px;
}
.answer {
	font-weight:normal;
}

.logout_button {
	background-image:url('../Grafiken/logout.gif');
	background-repeat:no-repeat;
	background-position:left;
	padding:3px 4px 5px 22px;
	margin-right:7px;
	width:auto; height:22px;
	background-color:#ccc;
	font-size: 11px;
	text-decoration:none;
	color:#000;
	line-height:21px;
	border-top: 1px solid #ddd;
	border-right: 1px solid #999;
	border-bottom:1px solid #999;
	border-left: 1px solid #ddd;
}

.msg {
	font-weight:bold;
	text-transform:uppercase;
	padding:0px 5px 0px 1px;
	text-shadow:#aaa 3px 2px 2px; font-size:14px; color:#444;
}

.go_arrow {
	background-image:url("../Grafiken/fwd.gif");
	background-repeat:no-repeat;
	background-position:left;
	padding-left:9px;
	text-decoration:none;
	color:#000;
	font-size:10px;
	font-style:italic;
	margin-left:3px;
}

.red_msg {
	font-size:0.9em;
	font-style:italic;
	color:#cc0000;
}
/********************** navigation with transition **************************/

    /* Written by Kyle Hamilton of candpgeneration.com (http://candpgeneration.com/toys/CSS3-dropdown-tut.php)
       CSS3 transitions - animated dropdown menu without javascript that plays nice in IE7+, FF, CHROME, SAFARI
       The original bare bones version can be found at: http://candpgeneration.com/CSS-dropdowns/CSS3-dropdown.html
       You are free to use this code any way you like. 
       Please do not remove this comment. */

    /* the main menu */

	.navigation {
        display:block;
        position:absolute;
        width:340px;
        z-index:1000;
    }
    .navigation > ul{
        display: -webkit-box;
        -webkit-box-orient: horizontal;

        display: -moz-box;
        -moz-box-orient: horizontal;

        display: -box;
        -moz-box-orient: horizontal;
    }
    .navigation ul{
        list-style :none;
        margin:0; 
        padding:0; /* gets rid of any inherited margins and padding */
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-weight: normal;
        position:relative;
        z-index:1000;
        width:340px;
    }
    .navigation > ul > li { 
        position : relative;
        float : left;

        font-size: 11px; /* this is here and not above, so that the subs can be made smaller using a % if desired */

        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -box-flex: 1;
   }

    .navigation > ul > li + li{
        margin-left:5px;
    }
    .navigation > ul > li > a {
        background-color: #b5b5b5;
        display:block;
        padding:2px 12px 2px 12px; /*hb muss wegen Chrome mit 'width:134px; height:22px;' aus '.header_button' (s.oben) abgeglichen werden hb*/
        text-decoration:none;
        color:#111; 

		border-top: 1px solid #ddd;
		border-bottom:1px solid #ddd;
        font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px;

        /* make the background-color fade in on roll-over */
        -webkit-transition: background-color 0.5s ease;
        -moz-transition: background-color 0.5s ease;
        -o-transition: background-color 0.5s ease;
        -ms-transition: background-color 0.5s ease;
        transition: background-color 0.5s ease;
    }

			 /*hb Workaround fuer IE 10 und IE 11 hb*/
			@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
			.navigation > ul > li > a {width:110px; height:14px; padding-top:3px;} 
			}

    .navigation > ul > li > a:hover{
        color:#fff;
    }


    /* the show/hide effects */
    /* the drop-down box */

    .navigation ul ul{

        width:340px; /* you need a width to accomodate tertiary menus */
        position:absolute;
        z-index:1000;
		margin-top:-1px;

        height: 0;
        overflow: hidden;
        -webkit-transition: height 0.5s ease-in;
        -moz-transition: height 0.5s ease-in;
        -o-transition: height 0.5s ease-in;
        -ms-transition: height 0.5s ease-in;
        transition: height 0.5s ease-in;
    }


	.navigation ul ul li:first-child {
		border-top:1px solid #ddd;
	}


    /* don't display tertiary box yet */
    .navigation > ul > li:hover ul ul, .navigation > ul > li > a:hover ul ul{
        height:0;
    }

	/* tertiary drop-down box */
    .navigation ul ul ul{
        left:165px;
        width:167px;
    }

    .navigation > ul > li:hover ul, .navigation > ul > li > a:hover ul,
    .navigation ul ul li:hover > ul, .navigation ul ul li a:hover > ul{
        height:220px;
    }

    /* drop-down item styles */
    .navigation ul ul li{
        background-color:#b5b5b5; /* #ccc; */
        width:165px;

        /* make the background-color fade in on roll-over */
        -webkit-transition: background-color 0.5s ease;
        -moz-transition: background-color 0.5s ease;
        -o-transition: background-color 0.5s ease;
        -ms-transition: background-color 0.5s ease;
        transition: background-color 0.5s ease;
    }
    /* unfortunate ie7 gap fix */
    .ie7 .navigation ul ul li{
        margin-bottom:-3px;
    }
    .navigation ul ul li:hover {
        background-color:#b5b5b5;
    }


    .navigation ul ul li a {
        display:block;
        text-decoration:none;
        margin:0 12px;
        padding:3px 0;
        color:#111;
    }


	/* The following six rules set the lines in between menu items.
       To make this play nice in IE, we will not be using nth-child
       but the "+" sibling slector.
    */
    .navigation ul ul ul li a{
        border:none !important;
    }
    .navigation ul ul ul li + li a{
        border-top:1px dotted #dedede !important;
    }
    .navigation ul ul li + li a{
        border-top:1px dotted #dedede;
    }
    .navigation ul ul li:hover + li a{
        border-top:1px dotted #dedede;
   }
    .navigation ul ul ul li:hover + li a{
        border: 0 !important;
        border-top:1px dotted #dedede !important;
    }


    .navigation ul ul li a:hover, .navigation ul ul li:hover > a {
        color:#ffffff; /* white */
   }

	.navigation ul ul ul li {
		border-left:1px solid #999;
	}

    .arrow{background:url(../Grafiken/arrow.gif) right center no-repeat;}
    /*
	.header{width: 600px; height:50px; background-color: white;}
    .content{position:relative; width: 600px; height:500px; color:white; background-color: white; overflow:hidden;}
    .item{position:absolute; top:50px; left:20px; width: 400px; height:400px; background-color: grey;}
	*/

/********************** eof navigation with transition **************************/