body
{
  background: #ede7bc url("./backgrounds/background-tifinagh-256.png");
  background-repeat:x-repeat;
  background-position: left 70%;
  margin:0em 1em 0 1em;
  font-family:DejaVu Sans, Arial Unicode MS, sans-serif;
  font-size:12px;
  overflow:none;
}

div#title
{
  margin : 0 0 0.5em 0;
  /* background:  #f2efe2 url("logo.png") 99% center  no-repeat; */
  background: url("logo.png") 99% center  no-repeat;
  padding:0;
  font-size:2em;
  font-weight:bold;
  text-align:left;
}

div#title div.second_title
{
  margin:0px;
  font-weight:normal;
  font-size:0.5em
}

div.randompicture
{
  position:absolute;
  bottom:125px;
  width:228px;
  height:200px;
  background:url("dacuitebghidakeccini.png");
  background-repeat:no-repeat;
  background-position:top left;
}

div.toc
{
  float:left;
  width:20%;
  margin:0 0 1em 0;
  background: #f2efe2;
  border : 1px solid #5e4928;
  padding:0.1em;
  padding-left:0.2em;
  font-size:0.8em;
}

div.toc div.section
{
  margin:-0.1em -0.1em 0.5em -0.2em;
  padding:0.1em;
  padding-left:0.2em;
  font-weight:bold;
  background:  #c0b4a0; /*#5e4928; /*url("toc-section.png");*/
  background-repeat:repeat-x;
  border-bottom:1px solid #a69158;
}

div#mainbox
{
  float:right;
  width:75%;
  height:80%;
  margin:0 0 1em 0;
  margin-bottom:1em;
  background: #f2efe2;
  background-repeat:no-repeat;
  background-position:right bottom;
  border : 1px solid #5e4928;
  padding:5px;
  overflow:auto;
  font-size:0.8em;
}

div#mainbox h1
{
  margin-top:0;
  margin-bottom:1em;
  font-size:1.5em;
  font-style:italic;
  text-align:center;
}

div#mainbox h2.section
{
  margin:1.5em -5px 1em -5px;
  margin-bottom:1em;
  background:#c0b4a0;
  border: solid #5e4928;
  border-width:1px 0 1px 0;
  padding-left:1em;
  font-weight:bold;
  font-size:1.1em;
  text-align:left;
}

div#mainbox h3.section
{
  margin-bottom:1em;
  /*background:#c0b4a0;*/
  border-bottom: 1px solid #c0b4a0;
  font-weight:bold;
  font-size:1em;
  text-align:left;
}


div#mainbox h1.songtitle
{
  margin-bottom:0.1em;
}

div#mainbox h2.songtitle
{
  margin-top:0;
  margin-bottom:2em;
  font-size:1.2em;
  font-style:italic;
  text-align:center;
}

div#mainbox p
{
  text-align:justify;
  text-indent:1em;
}

div#mainbox p:first-letter
{
  font-weight:bold;
}

div#mainbox ul
{
  margin-left:1em;
  padding-left:1.1em;
  list-style-type:square;
}

div#mainbox a, div.toc a
{
  color:#3e2928;
  text-decoration:none;
}

div#mainbox a:hover, div.toc a:hover
{
  color:black;
  text-decoration:none;
}

div#mainbox  a:hover:first-letter
{
  color:red;
}

div#lyrics_preview
{
  height:20em;
  margin-bottom:2em;
  border:1px solid #af6840;
  padding:5px;
  overflow:auto;
}

div#aboutbox
{
  position:absolute;
  width:15em;
  margin: -5px 0 0 -5px;
  background: #c0b4a0/*#f0ede0*/;
  border : 0px ;
  border-right : 1px solid #5e4928;
  border-bottom : 1px solid #5e4928;
  -moz-border-radius-bottomright : 10px;
  padding : 0 0.1em 0.1em 0.1em;
  font-size:0.9em;
  color:#3e2928;
}

div#aboutbox div.title
{
  margin: 0 -0.1em -0.1em -0.1em;
  background:#604e48;
  font-weight:bold;
  font-style:italic;
  padding:0.1em;
  padding-left:0.2em;
  color:white;
}

div#aboutbox ul
{
  margin-left:0em;
  padding-left:1.1em;
  list-style-type:none;
  list-style-position:outside;
}

div#aboutbox ul li:first-letter
{
  font-weight:bold;
  color:black;
}

div#song_info_box
{
  position:absolute;
  width:12.5em;
  margin: 10em 0 0 -5px;
  padding : 0 0.1em 0.1em 0.5em;
  font-size:1em;
  font-style:italic;
}


div#quote
{
/*  height:5em; */
  position:absolute;
  top:94%;
  left:100%;
  height:5%;
  width:15em;
   margin:0 1em 0 -16em;
  background: #ede7bc;
  filter:alpha(opacity=70);   /* Internet Explorer 6     */
  -moz-opacity:0.9;           /* Mozilla 1.6 et infér.   */
  opacity: 0.9;               /* CSS3 et Mozilla récents */
  border : 1px solid #5e4928;
  font-size:0.8em;
}

div#footer
{
  position:absolute;
  top:89%;
  left:1em;
  height:10%;
  width:100%;
  margin: 0 -1em 0 -1em;
  background: url("./backgrounds/frise_arabe.png");
  background-position: left bottom;
  background-repeat:repeat-x;
  padding:0;
}

p.proverb,
div#mainbox p.verse,
div#lyrics_preview p.verse,
div#mainbox p.sentence
{
  text-align:center;
  font-weight:bold;
  text-indent:0;
}

div#mainbox p.verse:first-letter,
div#lyrics_preview p.verse:first-letter,
div#mainbox p.sentence:first-letter
{
  font-weight:inherit;
}

div#mainbox p.sentence
{
  margin-left:1em;
  text-align:left;
  text-indent:0;
  list-style-type : square;
}

div#mainbox p.verse span.translation_word,
div#lyrics_preview p.verse span.translation_word,
div#mainbox p.sentence span.translation_word
{
  color:#8e4948;
  cursor:help;
}

div#mainbox p.verse span.translation_word:hover,
div#lyrics_preview p.verse span.translation_word:hover,
p.sentence span.translation_word:hover
{
  color:#604040;
  cursor:help;
}

p.proverb
{
  margin:0px;
  text-align:center;
}

span.translation
{
  font-style:italic;
  font-weight:normal;
}

span.keyword
{
  color:#604040;
}

span.keyword:hover
{
  color:#804040;
  cursor:help;
}

input[type=text], textarea, select
{
  width:100%;
  background: #f4eedd;
  border:1px solid #6f6840;
  padding-left:0.1em;
  font-size:1em;
}

input[type=submit]
{
  width:100%;
  margin-top:0.2em;
  background: #c0b4a0;
  border:1px solid #6f6840;
  padding: 0.1em;
  font-size:1em;
}

textarea
{
  width:100%;
}

table.form
{
  border-collapse:collapse;
  font-family:DejaVu Sans, Arial, sans-serif;
  font-size:1em;
}

table.form th
{
  text-align:left;
}

table.form td, table.form th
{
  text-align:left;
  padding:0.1em 0.5em 0.1em 0.5em;
  vertical-align:top;
}

table.form th span.help
{
  cursor:help;
  border-bottom:1px dotted darkred;
}

table.form td.notify div
{
  margin-bottom:1em;
  background:#e0d4c0;
  border:1px solid #6f6840;
  padding:5px;

}

table.form td.notify div.title
{
  margin-bottom:0em;
  background:#d0c4b0;
  border:1px solid #6f6840;
  border-bottom:0px;
  padding:1px 5px 1px 5px;
  font-weight:bold;
}

table.list
{
  margin:auto;
  width:90%;
  border: 1px solid #5e4928;
  font-size:1em;
  border-collapse:collapse;
}



table.list tr th,
table.list tr td
{
  padding:1px 2px 1px 2px;
}

table.list th
{
  background:#c8bca4;
  border: 1px solid #5e4928;
  text-align:left;
}

table.list tr:hover
{
  background: #d0d8F0;
}