#container
{
    margin: 0 auto;
    width: 100%;
    background: #fff;
}

#below { clear:both; }

table td.shrink {
    white-space:nowrap;
    width: 0%;
    text-align: right
}


ol.lower-alpha {list-style-type: lower-alpha;}

  .TFtable{
    width:100%; 
    border-collapse:collapse; 
  }
  .TFtable td{ 
    padding:7px; border:#4e95f4 1px solid;
  }
  /* provide some minimal visual accomodation for IE8 and below */
  .TFtable tr{
    background: #b8d1f3;
  }
  /*  Define the background color for all the ODD background rows  */
  .TFtable tr:nth-child(odd){ 
    background: #b8d1f3;
  }
  /*  Define the background color for all the EVEN background rows  */
  .TFtable tr:nth-child(even){
    background: #dae5f4;
  }

#search_match { color: blue; }

a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;} 
a.tooltip span {
    z-index:10;display:none; padding:14px 20px;
    margin-top:-30px; margin-left:28px;
    width:300px; line-height:16px;
}
a.tooltip:hover span{
    display:inline; position:absolute; color:#111;
    border:1px solid #DCA; background:#fffAF0;}
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
    
/*CSS3 extras*/
a.tooltip span
{
    border-radius:4px;
    box-shadow: 5px 5px 8px #CCC;
}

.pdeflink { 
  color: black; 
  text-decoration:none;

}
.pdeflink:hover{
  text-decoration:underline;
  color: blue;
}

#dekaingeseu-choice   { background-color: #e0ffff; }
#dekaingeseu-progress { background-color: #F0E68C; }

#quiz-progress  { background-color: #e0ffff; }
#quiz-question  { background-color: #F0E68C; }
#quiz-correct   { background-color: #7CFC00; }
#quiz-incorrect { background-color: #ff8080; }
#quiz-almost    { background-color: #FACC2E; }

#shadow-font {
  color: white;
  text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;

}

#shadow-font a.visited {
   text-decoration:none;
}

textarea.kerresel {
  font-size: 18px;
}

/*HOVER POPUP LINKS*/

/*hoverpopups type 1*/

#popup { color: #000; background-color: #c0c0c0; }

#popup a, #popup a:visited {
  position: relative;
  display: block;
  width: 130px;
  line-height: 30px;
  text-align: right;
  padding: 0 10px;
  margin: 0;
  border: 1px solid #666;
  text-decoration: none;
  font-size: 1em;
  font-weight: bold;
}

#popup a span {
  display: none;
}

#popup a:hover { 
  background-color: #e9e9e2; 
}

/* the IE correction rule */
#popup a:hover  {
  color: #f00; 
  background-color: #e9e9e2;
  text-indent: 0; /* added the default value */
}

#popup a:hover span {
  display: block;
  position: absolute;
  top: 0px;
  left: 100px;
  width: 100px;
  margin: 0px;
  padding: 10px;
  color: #335500;
  font-weight: normal;
  background: #e5e5e5;
  text-align: left;
  border: 1px solid #666;
}

.bookcover a img { display:none; }
.bookcover a:hover span { display:block; }

.bookcover a span { display:none; }
.bookcover a:hover img {
  display: block;
  position: relative;
  width: 100px;
  margin: 0px;
  padding: 0px;
  color: #335500;
  font-weight: normal;
  background: #e5e5e5;
  text-align: left;
  border: 1px solid #666;
}

/* for vertically centering the images in the book purchase page */
/* doesn't work... */
.buybook li {
  list-style-type:none;
  width:100px;
  height:100px;
  border:1px solid #000;
  text-align:center;
  float:left;
}

.buybook a {
  line-height:100px;
}

.buybook img {
  vertical-align:middle;
}

.rotate {
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

.mce-path {display: none !important;}

.formlink {
    background: none;
    border: none;
    color: blue;
    cursor: pointer;
}

.formlink:hover{
         text-decoration:underline;
}

.dict {
  max-width: 100%;
}

button.link {
    background:none!important;
     border:none; 
     padding:0!important;
    /*border is optional*/
     border-bottom:1px solid #444; 
     cursor: pointer;
}

button.link:hover{
         text-decoration:underline;
}

img.playbutton {
  width:20;
  height:20px;
}

span.right {
  float: right;
}

span.left {
  float: left;
}

span.overlapoff {
  display:inline-block;
}

.divInfo { display:none; }

/*THUMBNAIL HOVERPOPUPS*/

.thumbnail  {
  /*
  position: relative;
  float: left;
  padding: 5px;
  */
  /*z-index: 0;*/
}

.thumbnail:hover {
  background-color: #e9e9e2;
  /*z-index: 50;*/
  color: #335500;
  text-decoration: none;
}

.thumbnail span { /*CSS for enlarged image*/
  position: fixed;
  background-color: #e5e5e5;
  padding: 5px;
  /*left: -1000px;*/
  border: 1px solid #666;
  visibility: hidden;
  color: black;
  text-decoration: none;
  z-index: 3;
  /* max-height: 50%; */
  max-width: 100%;
}

.thumbnail span img { /*CSS for enlarged image*/
  border-width: 0px; 
  max-width: 100%;
  /* max-height: 100%; */
  /*padding: 2px;*/
}

div.demo-container {
  display: inline;
}

div.dynamic_definition {
  display: inline-block;
}

.dynamic_definition span{
   width: 500px; 
}
.dynamic_definition span:hover{
   cursor: pointer;
}

.thumbnail:hover span { /*CSS for enlarged image on hover*/
  visibility: visible; 
  max-width: 100%;
  top: 5px; /* use IF IE6 style to correct IE6 positions of larger image relative to thumb */
  left: 30px;/*position where enlarged image should offset horizontally */
}


div.even {
  background-color: #e5e5e5;
  margin-top: 15px;
}

.wordpic {
    position: relative;
}
.wordpic:hover:after {
    content: ' ';
    /*background-image: url(http://www.gravatar.com/avatar/ca536e1d909e8d58cba0fdb55be0c6c5?s=32&d=identicon&r=PG);*/
    background-image: url(http://tekinged.com/pics/tutau.jpg);
    position: absolute;
    top: 10px;
    left: 10px;
}

#header
{
    background-image: url('/images/palau-flag.png');
    background-size: 100%;
    /* background: #ccc; */
    padding: 20px;
}

#header h1 { margin: 0; }

a.aheader { text-decoration: none}

#navigation
{
    float: left;
    width: 100%;
    background: #333;
}

#navigation ul
{
    margin: 0;
    padding: 0;
}

#navigation ul li
{
    list-style-type: none;
    display: inline;
    position: relative;
}

#navigation li a
{
    display: block;
    float: left;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #fff;
}

#navigation li a:hover { background: #383; }

#navigation ul ul                       
{ 
        display:none; /*initially menu item is hidden*/
        position: absolute; /*absolute positioning is important for menu to float*/
}

#navigation ul li:hover > ul {
        display: block; /* display the dropdown */
        position: relative; /*absolute positioning is important for menu to float*/
}

.col1 { 
  font-weight: bold;
  white-space: nowrap;
  width: 1%;
  vertical-align: top;
}

.col1-sub { 
  font-weight: bold;
  white-space: nowrap;
  width: 1%;
  vertical-align: top;
  border-top:1px dashed #494949;
}

.col2 {
  font-style: italic; 
  white-space: nowrap;
  width: 1%;
  vertical-align: top;
}
.col3 {
  width: 99%;
}

li#sub1 ul{
    display: none;
}
ul#menu li#sub1:hover ul{
    display: block;
}

#content-container
{
    float: left;
    width: 100%;
    /*background: #FFF url(layout-two-liquid-background.gif) repeat-y 68% 0;*/
}

#mydisqus {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.tab { margin-left: 20px; }
.bigtab { margin-left: 30px; }
div.bothtab {
  margin-left:30px; 
  margin-right:30px; 
}

table.pronouns {
    border:1px solid black;
/*    border-collapse: collapse;
*/
}

th {
    background: #BBB;
}

table {
  margin-top: 0px;
  margin-bottom: 0px;
}

.toc {
  margin-top: 0px;
  margin-bottom: 0px;
  border-collapse: collapse;
  border:0px;
}

td.toc {
  padding-top: 0px;
  padding-bottom: 0px;
}

td {
    padding-left: 5px;
    padding-right: 5px;
}

tr.palauan {
    background: #00FFFF;
}

tr.palauan2 {
    background: #0099FF;
}

tr.english {
    background: #FFFF99; 
}

tr.words {
  border-bottom:1px dashed #494949;
}

p.example {
}

p.tabs {
    padding-top: 25px;
    padding-right: 50px;
    padding-bottom: 25px;
    padding-left: 50px;
}

div.bigtext 
{
    font-size: large;
}

div.definitions
{
    font-size: large;
    clear: left;
    float: left;
    padding: 10px 20px;
}

#content
{
    clear: left;
    float: left;
    width: 60%;
    padding: 20px 0;
    margin: 0 0 0 4%;
    display: inline;
    min-height: 200px;
}

#contentnomin
{
    clear: left;
    float: left;
    width: 60%;
    padding: 20px 0;
    margin: 0 0 0 4%;
}

#content h2 { margin: 0; }

/* Sortable tables */
/*
table.sortable thead {
    background-color:#eee;
    color:#666666;
    font-weight: bold;
    cursor: default;
}
*/

#aside
{
    float: right;
    width: 26%;
    padding: 20px 0;
    margin: 0 3% 0 0;
    display: inline;
    background: #C0C0C0;
    background-image: url('/images/palau-flag.png');
    background-size: cover; 
    min-height: 200px;
    color: #000080;
}

#aside a:link    { color: #000080; }
#aside a:visited { color: #000080; }
#aside a:hover   { color: #000080; }
#aside a:active  { color: #000080; }


#logo
{
    float: right;
    width: 26%;
    padding: 20px 0;
    margin: 0 3% 0 0;
    display: inline;
    min-height: 200px;
}



#aside h3 { margin: 0; }

#vizbreak
{
    clear: left;
    text-align: right;
    padding: 20px;
    height: 1%;
    background: #0099FF;
}

.ralign {
  text-align: right;
}

form,h2.inl {
  display: inline;
}

#disq_foot
{
    clear: left;
    background: #ccc;
    /*background: #BAE1F5;*/
    text-align: right;
    padding: 20px;
    height: 1%;
    max-width: 95%; 
    margin-left: auto;
    margin-right: auto;
}

#footer
{
    clear: left;
    background: #ccc;
    text-align: right;
    padding: 20px;
    height: 1%;
}

/* Define the body style */
body {
/*    font-family:Arial;
    font-size:12px;
*/
}

/* We remove the margin, padding, and list style of UL and LI components */
#menuwrapper ul, #menuwrapper ul li{
    margin:0;
    padding:0;
    list-style:none;
    font-family:Arial;
    font-size:12px;
}

/* We float the li list to the left and apply background color and border right white and set the height to 25px. Note you can ignore the height if you do not want
 * */
#menuwrapper ul li{
    float:left;
    background-color:#7f95db;
    border-right:solid 1px white;
    height:25px;
    line-height:25px;
}

/* We apply the background hover color when user hover the mouse over of the li component */
#menuwrapper ul li:hover{
    background-color:#6679e9;
    position:relative;
}

/* We apply the link style */
#menuwrapper ul li a{
    padding:0px 15px;
    color:#ffffff;
    display:inline-block;
    text-decoration:none;
}

/**** SECOND LEVEL MENU ****/
/* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */
#menuwrapper ul li ul{
    position:absolute;
    display:none;
}

/* When user has hovered the li item, we show the ul list by applying display:block, note: 25px is the menu height.  */
#menuwrapper ul li:hover ul{
    left:0;
    top:25px;
    display:block;
}

/* As the parent li has float:left property, we overwrite for the submenu (level 2) to float none (normal position)  */
#menuwrapper ul li ul li{
    float:none;
    width:150px;
    background-color:#cae25a;
}

/* We change the background color for the level 2 submenu when hovering the menu */
#menuwrapper ul li:hover ul li:hover{
    background-color:#b1b536;
}

/* We style the color of level 2 links */
#menuwrapper ul li ul li a{
    color:#454444;
    display:inline-block;
    width:120px;
}

/**** THIRD LEVEL MENU ****/
/* We need to hide the 3rd menu, when hovering the first level menu */
#menuwrapper ul li:hover ul li ul{
    position:absolute;
    display:none;
}

/* We show the third level menu only when they hover the second level menu parent */
#menuwrapper ul li:hover ul li:hover ul{
    display:block;
    left:150px;
    top:0;
}

/* We change the background color for the level 3 submenu*/
#menuwrapper ul li:hover ul li:hover ul li{
    background:#86d3fa;
}

/* We change the background color for the level 3 submenu when hovering the menu */
#menuwrapper ul li:hover ul li:hover ul li:hover{
    background:#358ebc;
}

/* We change the level 3 link color */
#menuwrapper ul li:hover ul li:hover ul li a{
    color:#ffffff;
}

/* Clear float */
.clear{
    clear:both;
}


/* --------------------------------------------------------------

   reset.css
   * Resets default browser CSS.

-------------------------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, section {
    display:block;
}

body {
  line-height: 1.5;
}

/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

/* Remove annoying border on linked images. */
a img { border: none; }

/* --------------------------------------------------------------

   typography.css
   * Sets up some sensible default typography.

-------------------------------------------------------------- */

/* Default font settings.
   The font-size percentage is of 16px. (0.75 * 16px = 12px) */
html { font-size:100.01%; }
body {
  font-size: 75%;
  color: #222;
  background: #fff;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}


/* Headings
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #111; }

h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 2em; margin-bottom: 0.75em; }
h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 1em; font-weight: bold; }

h1 img, h2 img, h3 img,
h4 img, h5 img, h6 img {
  margin: 0;
}


/* Text elements
-------------------------------------------------------------- */

p           { margin: 0 0 1.5em; }
p img.left  { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; }

a:focus,
a:hover     { color: #000; }
/*a           { color: #009; text-decoration: underline; }*/

blockquote  { margin: 1.5em; color: #666; font-style: italic; }
strong      { font-weight: bold; }
em,dfn      { font-style: italic; }
dfn         { font-weight: bold; }
sup, sub    { line-height: 0; }

abbr,
acronym     { border-bottom: 1px dotted #666; }
address     { margin: 0 0 1.5em; font-style: italic; }
del         { color:#666; }

pre         { margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }


/* Lists
-------------------------------------------------------------- */

li ul,
li ol       { margin: 0; }
ul, ol      { margin: 0 1.5em 1.5em 0; padding-left: 3.333em; }

ul          { list-style-type: disc; }
ol          { list-style-type: decimal; }

dl          { margin: 0 0 1.5em 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em;}


/* Tables
-------------------------------------------------------------- */

table       { margin-bottom: 1.4em; width:100%; }
th          { font-weight: bold; }
thead th    { background: #c3d9ff; }
th,td,caption { padding: 4px 10px 4px 5px; }
tr.even td  { background: #e5ecf9; }
tfoot       { font-style: italic; }
caption     { background: #eee; }


/* Misc classes
-------------------------------------------------------------- */

.small      { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large      { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.hide       { display: none; }

.quiet      { color: #666; }
.loud       { color: #000; }
.highlight  { background:#ff0; }
.added      { background:#060; color: #fff; }
.removed    { background:#900; color: #fff; }

.first      { margin-left:0; padding-left:0; }
.last       { margin-right:0; padding-right:0; }
.top        { margin-top:0; padding-top:0; }
.bottom     { margin-bottom:0; padding-bottom:0; }


/*
tr.even{
background-color:#fff;
}
tr.odd{
background-color:#dadada;
}
*/

th{white-space:nowrap;}

.pagination{
}
.page-link{
float:left;
background-color:darkgray;
border:1px solid black;
text-align:center;
color:#ffffff;
}
.page-link a,.page-link span{
padding:5px 8px 5px 8px;
display:block;
color:#ffffff;
}
.page-link span{
background-color:#ffffff;
color:#000000;
}
.page-link:hover{
background-color:#ffffff;
color:#000000;
}
.page-link:hover a{
color:#000000;
}