#container{ width:833px; margin:0px auto; background:rgba(255, 255, 255, .5);box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);}

#single-column{width:621px; float:left; background:rgba(255, 255, 255, .8); padding:10px; box-sizing:border-box;box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);}

#left-column{width:621px; float:left; background:url(Paper_brown.gif); padding:10px; box-sizing:border-box;box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);}

#right-column{width:212px; float:left; background:rgba(255, 255, 255, .5); padding:10px; box-sizing:border-box;box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);}

body {
background-image:url('newbacks/fono_bangha2.jpg');
background-repeat:repeat;
background-attachment:fixed;
font-family: Georgia, Times New Roman, serif;}

details { 
  display: inline;
  cursor: pointer;
}

div.fake-p {
  margin: 0 0 1rem 0;
}
div.details-content {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: 90%;
  padding: 1rem;
  font-size: 1rem;
  background: lightyellow;
  box-shadow: 0 0 100px black;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

nav ul ul {display:none;}
nav ul li:hover > ul {display:block;}

nav ul {
	padding: 0 20px;
	list-style: none;
	position: relative;
	display: inline-table;}

	nav ul:after {content: ""; clear: both; display: block;}

nav ul li {float: left;box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);}
	nav ul li:hover {
		background: #4b545f;
		background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);}
		nav ul li:hover a {color: #fff;}
	
	nav ul li a {
		display: block; padding: 20px 30px;
		color: #757575; text-decoration: none;}

nav ul ul {
	background: #5f6975; border-radius: 0px; padding: 0;
	position: absolute; top: 94%;}

	nav ul ul li {
		float: none; 
		border-top: 1px solid #6b727c;
		border-bottom: 1px solid #575f6a;
		position: relative;}

		nav ul ul li a {
			padding: 20px 30px;
			color: #fff;}

			nav ul ul li a:hover {background: #4b545f;}

    ul.nav2{
        padding: 0;
        list-style: none;
    }
    ul li.nav2{
        float: left;
        width: 190px;
        text-align: center;
    }
    ul li a.nav2{
        display: block;
        padding: 5px 10px;
        color: #333;
        background: #f2f2f2;
        text-decoration: none;
    }
    ul li a.nav2:hover{
        color: #fff;
        background: #939393;
    }
    ul li ul.nav2{
        display: none;
    }
    ul li.nav2:hover ul{
        display: block; /* display the dropdown */
    }


.nevidu {display:none;}

li a.hick {background:url(hick.gif);background-repeat:no-repeat;}
li a.hick:hover {background:url(hick2.gif);background-repeat:no-repeat;}
li a.it {background:url(it.gif);background-repeat:no-repeat;}
li a.it:hover {background:url(it2.gif);background-repeat:no-repeat;}
li a.zh {background:url(zh.gif);background-repeat:no-repeat;}
li a.zh:hover {background:url(zh2.gif);background-repeat:no-repeat;}
li a.eo {background:url(eo.png);background-repeat:no-repeat;}
li a.eo:hover {background:url(eo2.png);background-repeat:no-repeat;}
li a.ebonics {background:url(ebonics.png);background-repeat:no-repeat;}
li a.ebonics:hover {background:url(ebonics2.png);background-repeat:no-repeat;}

li.alt {margin: .3em 0}

a.cxef {
color: #000099;
text-decoration: none;
}
a.cxef:hover {
color: #0ff;
}

a.note {border-bottom: 1px dotted gray;}
a.note:hover {border-bottom: 1px solid darkgray;}

p.nota {font-size:11px;}
p.alt {margin: .3em 0}

figure.center {text-align: center;
    display: table; max-width: 30%;
    margin: 10px auto;}

figure.embed {float:left; margin: .2em 1em .2em 0;}
figure.embed-right {float:right; margin: .2em 1em .2em 0;}

figcaption.center {font-size:11px;text-align:center;}
figcaption.left {font-size:11px;text-align:left;}

img.flip {transform: scaleY(-1); filter: FlipH;}

span.alt {line-height: 150%;}

sup {font-size: 0.83em; vertical-align: super; line-height: 0;}

abbr {border-bottom: 1px dotted black;}

@media screen and (max-width:832px){
#container{width:100%;}
#left-column{width:70%;}
#right-column{width:30%;}
img{width:100%;}
}
@media screen and (max-width:640px){
#left-column{width:100%;}
#right-column{width:100%;}
}
@media screen and (max-width:320px){
#container{width:320px;}
}