/* --- Allgmeines ---------------------------------------- */
* {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Trebuchet MS', Arial, Verdana, Helvetica, sans-serif;
    text-align: left;
    color: #33c;
    background-color: #cf0;
    background-image: url(/img/uitmuntend/body_bg.gif);
}

p {
    margin: 0.4em;
}



/* --- Seitenunterteilung -------------------------------- */
#page {
    /* von 60em auf 59em reduziert, damit Angelika keinen Scrollbalken erhält [martin 28.10.2007] */
    width: 59em;
    margin: 10px auto 10px 10px;
    border: 1px solid #33c;
    -moz-border-radius: 20px;
    padding: 15px;
    text-align: left;
    color: #33c;
    background-color: #fff;
}

#header {
    text-align: center;
}
#home {
    z-index: 10;
    visibility: visible;
    position: relative;
    top:-15px;
    left:-130px;
    margin: 0;
    padding: 0;
}

#nav {
    float: right;
    width: 12em;
    color: #33c;
}
#dict {
    margin-bottom: 1em;
    border: 1px solid #33c;
    border-top: 0;
    text-align: center;
}
#mainnav {
    border: 1px solid #33c;
    border-top: 0;
}
#community {
    margin: 0.5em 0;
    padding: 4px;
    border: 1px solid #33c;
    text-align: center;
    font-weight: bold;
    background-color: #cf3;
}
#navadd {
    margin-top: 1em;
    font-size: 0.8em;
    text-align: center;
}

#main {
    float: left;
    width: 45em;
    margin-bottom: 1em;
    background-color: #fff;
}
#title {
    margin-bottom: 0;
    border: 3px solid #33c;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
    padding: 0.5em;
    color: #cf0;
    background-color: #33c;
    text-align: center;
}
#title h1 {
    margin: 0.2em 0 0 0;
    border: 0;
    padding: 0;
}
#title p {
    margin: 0;
    font-weight:normal;
}
#title h1.de {
    margin: 0;
    font-size: 1.0em;
    font-weight:normal;
}

#content {
    margin-top: 0;
    border: 3px solid #33c;
    -moz-border-radius-bottomleft: 20px;
    -moz-border-radius-bottomright: 20px;
    padding: 1em;
}

/* Link-Boxen unter dem Content */
#add_intern, #add_extern {
    float: left;
    display: inline;
    width: 22em;
    margin: 1em 0;
    border: 2px solid #cf0;
    -moz-border-radius: 20px;
    padding: 0 0.2em 0.2em 0.2em;
}
#add_intern {
    margin-right: 0.9em;
}

#footer {
    clear: both;
    margin: 1em 0;
    border-top: 3px solid #33c;
    padding-top: 1em;
    text-align: center;
}
#print {
    display: none;
}



/* --- Navigation ---------------------------------------- */
#prentenboek, #grammatica, #zinvol, #nederactief, #extras, #aanbevelingen {
    list-style: none;
    margin:0;
    padding:0;
    display: none;
}
ul.dropdown ul {
    list-style: none;
    margin:0;
    padding: 0;
    width:100%;
}
ul.dropdown li {
    position: relative;
    padding:1px 0px 1px 0px; /* helps Opera with hover - do not remove! */
}
ul.dropdown ul, ul.dropdown ul ul {
    display:none;
    position:absolute;
    top:0;
    left:-99%;
}
ul.dropdown { z-index: 1; }
ul.dropdown ul { z-index: 2; }
ul.dropdown ul ul { z-index: 3; }

ul.dropdown li:hover ul ul, ul.dropdown li:hover ul ul ul {
    display:none;
}
ul.dropdown li:hover ul, ul.dropdown ul li:hover ul {
    display:block;
}


h1.kat, h1.dict {
    display: block;
    margin: 0;
    border-top: 1px solid #33c;
    border-left: 0;
    font-size: 1.0em;
    color: #33c;
    background-color: #cf0;
}
h1.kat {
    z-index: 1;
    padding: 4px 4px 4px 18px;
    color: #33c;
    background:url(/img/uitmuntend/linkkat.gif) no-repeat left;
    background-color: #cf0;
}
h1.kat:hover {
    color: #f60;
}
#mainnav ul {
    border: 1px solid #f60;
    background-color:#f60;   /* faerbt die Zwischenraeume innerhalb der aufgeklappten Liste */
}

ul.dropdown li {
    background:url(/img/uitmuntend/linknav.gif) no-repeat left;
}

#mainnav ul a {
    display: block;
    border: 0;
    padding:4px 4px 4px 18px;
    color:#f60;
	background: none;
    background-color: #fff;
}
#mainnav ul a:hover {
    border: 0;
    color:#fff;
    background-color:#f60;
}



/* --- Links  -------------------------------------------- */
a:link, a:visited {
    padding: 0 0.1em 0 14px;
    text-decoration: none;
    color: #f60;
	background: url(/img/uitmuntend/linkintern.gif) no-repeat center left;
}
a:hover, a:active {
    border: none;
    color: #fff;
    background-color: #f60;
}

a.extern:link, a.extern:visited, #navadd a:link, #navadd a:visited {
    border-bottom: 1px dashed #33c;
    color: #33c;
	background: url(/img/uitmuntend/linkextern.gif) no-repeat center left;	
}
a.extern:hover, #navadd a:hover {
    border: none;
    color: #fff;
    background-color: #33c;
}

a.img:link, a.img:visited, a.img:hover a.img:active {
    border: 0;
    padding: 0;
    background-color: transparent;
	background: none;
}

#navadd a.img {
border:none;
background:none;
}

#header a:link, #header a:visited, #header a:hover, #header a:active {
    font-size: 10px;
    color: #33c;
}

#community a:link, #community a:visited {
    padding: 0 0.1em;
	background: none;
    border-bottom: 0;
    color: #33c;
}
#community a:hover, #community a:active {
    border-bottom: 0;
    color: #f60;
    background-color: transparent;
}



/* --- Ueberschriften ------------------------------------ */
h1, h2 {
    display: block;
    clear: both;
    margin: 0.8em 0 0.2em 0;
    border-left: 5px solid #f60;
    padding: 0.2em 0.8em;
}
h1 {
    border-top: 1px solid #f60;
    font-size: 1.4em;
}
h2 {
    font-size: 1.1em;
}
h3 {
    margin: 0.2em 0;
    font-size: 1.0em;
    font-weight: bolder;
}

h1.add {
    margin: 0 0.4em;
    border: 0;
    border-bottom: 1px solid #33c;
    padding: 0.2em 0;
    color: #f60;
    font-size: 1em;
    text-align: center;
}
#add_intern h3, #add_extern h3 {
    margin: 0.4em;
    border-top: 1px solid #f60;
    border-left: 5px solid #f60;
    padding-left: 0.2em;
}



/* --- Tabellen ------------------------------------------ */
table {
    width: 42em;
    margin-bottom: 1em;
    empty-cells: hide;
    border-collapse: collapse;
    border:0;
}
th {
    color: #fff;
    background-color: #33c;
    border-left:1px solid #33c;
    border-bottom:1px solid white;
}
td {
    border:1px solid #33c;
    padding: 0.1em 0.4em;
    vertical-align: top;
}
tbody tr:hover {
    color: #33c;
    background-color: #cf0;
}

/* t2: 2-spaltige Tabellen mit id=content-Weite -1em */
/* t4: 4-spaltige Tabellen mit id=content-Weite -1em */
.t2 td {
    width: 50%
}
.t4 td {
    width: 25%
}
/* t3: 3-spaltige Tabellen mit halber t2/t4-Weite */
.t3 {
    width: 21em;
}
.t3 td {
    width: 33%
}
div.t3ex {
    float: right;
    width: 20em;
}


/* --- Listen -------------------------------------------- */
ul {
    margin: 0.5em 2em;
}



/* --- Formulare ----------------------------------------- */
input, select {
    border: 1px solid #f60;
    color: #33c;
    background-color: #fff;
}
.img_link {
	border: none;
}


/* --- Medieneinbindung ---------------------------------- */
img {
    border: 0;
}

.img {
    text-align: center;
}
.medialeft {
    float: left;
    margin: 0.2em 0.8em 0.2em 0.2em;
}
.mediaright {
    float: right;
    margin: 0.2em 0.2em 0.2em 0.8em;
}
/* Galleriebilder */
.tn {
    width: 160px;
    height: 160px;
    margin: 0.5em;
}
/* Grossbild mit Beschriftungen */
img.prent {
	display: block;
    margin: 1em auto;
}



/* --- Dialoge ------------------------------------------- */
.interactie {
    margin: 1em 80px;
    -moz-border-radius: 20px;
    padding: 1em;
    background-color: #ffc;
}
.karakter1, .karakter2 {
    width: 60px;
    height: 60px;
}
.karakter1 {
    float: left;
    margin: 0 10px 10px 0;
}
.karakter2 {
    float: right;
    margin: 0 0 10px 10px;
}



/* --- zur besonderen Markierung: ------------------------ */
/* description = orange auf gruen, Einsatz in Tabellen */
.desc {
    padding: 0 0.2em;
    color: #f60;
    background-color: #cf0;
}
/* faerbt den Hintergrung (leerer Zellen in Tabellenkoepfen) weiss*/
.white {
    background-color: #fff;
}

/* Hervorhebung des ABCs */
.attentie {
    color: #f60;
    font-size: 1.2em;
}

/* let op! faerbt den Text orange */
.letop {
    color: #f60;
}

/* hinterlegt den Text grün */
.marker {
    padding: 0 0.2em;
    background-color: #ffc;
}

/* weniger wichtige Zusatzinfos, z.B. am unteren Rand der Navigation */
.info {
    font-size: 0.8em;
}

/* <span class="nieuw">nieuw</span> */
.nieuw {
    margin-right: 0.6em;
    padding: 0 0.6em;
    font-size: 0.6em;
    color: #f60;
    background-color: #cf0;
}

#clickLetters, #clickLetters p, #clickLetters ul, #clickLetters li, #clickLetters a {
	margin: 0;
	padding: 0;
}
#clickLetters {
	font-size: 0.8em;
	line-height: 1em;
	margin-bottom:8px;
}
#clickLetters ul {
	list-style:none;
}
#clickLetters p, #clickLetters ul, #clickLetters li {
	display: inline;
}
#clickLetters a {
    padding:2px 6px;
    border:1px solid white;
    border-collapse:collapse;
    border-spacing:0;
}

#clickLetters a:hover {
    color: #33c;
}

.google {
    text-align: center;
    padding: 0 0 10px 0;
}