/* UChor multiple languages */
div.uclang {
    margin:.5ex auto;
    padding:.5ex .5em;
    background-color:#c8c8c8;
    width:42em;

    border:1px solid lightblue;
    border-radius:1em;

    transition-property:width background-color border-color;
    transition-duration:.75s;
}

td.overlap {
    text-align:left;
}

div.backwards {
    text-align:right;
    direction:rtl; 
    unicode-bidi:bidi-override;
}

td.overlap a {
    color:#c020a0;
}

td.overlap h2 {
    background-color:#f0c8e8;
    display:inline;
}

td.overlap a.accobutton {
    text-decoration:underline;
    color:#c020a0;
    font-size:150%;
    font-weight:bold;
    display:block;
    padding:0px;
    margin:0px;
}

div.uclang a {
    text-decoration:underline;
    color:#0000a0;
    cursor:pointer;
    font-weight:normal;
    font-size:115%;
}

*.nojs div.uclang a {
    cursor:initial;
}

div.ucbox {
    margin:0px 3em;
    padding:.5ex .5em;
    border:1px solid gray;
    background-color:#c0c0c0;
}

/* div directly after <a> changes when activated */
div.uclang a + div {
    transition-property:height;
    transition-duration:.75s;

    height:4ex;
    overflow:auto;
}
/* In non-JS surroundings make all languages slightly larger */
*.nojs div.uclang a+div {
    height:55ex;
}

/* Click on language to enlarge it */
div.uclang.open a+div {
    height:75ex;
}
/* Non-clicked language becomes even smaller */
div.uclang.close a+div {
    height:4ex;
}
div.uclang.open {
    width:55em;
    background-color:#f0f0f0;
    border-color:blue;
}

/* padding between text and scrollbar */
div.uclang a + div div {
    padding:0px .5ex;
}

div.uclang h3.first {
    text-align:left;
}

*.nojs a.accobutton + div {
    display:none;
}

a.accobutton + div {
    position:relative;
}

a.accobutton + div > div {
    position:absolute;
    /*    background-color:#ff0000;*/
    background-image:url(paper.gif);
    background-repeat:repeat-both;
    font-size:10pt;
    overflow:hidden;
    max-height:0ex;
    min-height:0ex;
    opacity:0;
    transition-duration:.85s;
    transition-property:opacity, max-height, min-height;
    z-index:200000;
}

a.accobutton.open + div > div {
    max-height:200ex;
    min-height:22em;
    opacity:1;
}

/* Klick on a colorpatch to make it fade away */
img.klecks { 
    transition-duration:1.5s; 
    transition-timing-function: linear;
    transition-property:opacity; 
    opacity:1; 
    width:8em;
    z-index:2;
}

img.klecks.hide { 
    opacity:.3; 
}

/* Heading changes, showing multiple languages */
td#ucheadings > div {
    position: relative;
    height: 7ex;
}

td#ucheadings h1 {
    position:absolute;
    overflow:hidden;
    background-color:#c020a0;
    padding:.1ex 0em .25ex 0em;

    max-height:0px;
    opacity:0;

    transition-property:max-height, opacity;
    transition-duration:.75s;

    width:100%;
    max-width:30em;
}
td#ucheadings h1.open {
    max-height:5ex;
    opacity:1;
}

/* Helping hands */
div.postit {
    position:relative;float:right;
}

div.postit.left {
    position:relative;float:left;
}

div.postit input, div.postit button {
    width:12em;
}

div.postit button {
    background-color:#c020a0;
}

div.postit > div {
    position:absolute;
    width:12em;
    z-index:-1;
    background-color:yellow;
    opacity:.65;
    border:2px solid black;
    border-radius:.5em;
    padding:.5ex;

    transition-duration:.3s;
    transition-property:opacity;
    transition-timing-function:linear;
}

div.postit > div.solid {
    opacity:1;
    z-index:2;
}

/* Audio player */
table.ucsong th {
    text-align:left;
}
table.ucsong td a {
    font-size:80%;
}

div.warning {  
    font-size:13pt; 
    font-weight:bold; 
    color:red; 
    background-color:yellow;
    padding:0px 1em .5ex 1em;
    border: 2px solid red;
    border-radius:.5em;
    width:50%;
    margin:0px auto;
    text-align:center;
}

@keyframes throb {
    from { background-color:yellow;}
    to { background-color:white;}
}

div.warning.throb {  
    animation-name:throb;
    animation-duration:.8s;
    animation-iteration-count:infinite;
}

div.mrplayer {
    margin-left:1em;
}

/* Audio elem can have child */
*.audiochild {
    opacity:0;
    transition-property:opacity;
    transition-duration:1.3s;
}
*.audiochild.open {
    opacity:1;
}
td.overlap *.audiochild dfn {
    font-weight:normal;
    font-size:80%;
    font-style: italic;
    margin:1ex 0em 0ex 0em;
}
*.audiochild div.postit > div {
    width:18em;
}

div.ucpapercoat {
    background-color:#d0d0d0;
    border:1px solid #a0a0a0;
    box-shadow:3px 3px 6px black;
    padding:.25ex .25em;
}

div.ucpaper {
    -webkit-column-count:4; 
    -moz-column-count:4; 
    column-count:4; 

    -webkit-column-gap:1.5em; 
    -moz-column-gap:1.5em; 
    column-gap:1.5em;

    text-align:justify;
    hyphens:auto;
    _moz-hyphens:auto;
}

div.ucindex {
    float:right; 
    background-color:#c020a0;
}
div.ucindex a {
    display:block;
    color:black;
    text-decoration:underline;
    padding: .25ex 1.5em .25ex 1em;
    background-image: url(rightarrow.gif);
    background-position: .25em;
    background-repeat: no-repeat;
}
div.ucindex div {
    display:none;
}