/*@import url(http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css);*/
@font-face {
  font-family:ColoredTashkeelFont;
  font-style:normal;
  font-weight:400;
  src:url(fonts/DroidNaskh-Regular-Colored.ttf) format("truetype");
}

body {
  direction:rtl;
  font-family:ColoredTashkeelFont,  'Droid Arabic Naskh', Amiri,'Traditional Arabic',Sans,Arial;
  font-size:14pt;
  padding:1cm;
  padding-top:.25cm;
  margin-left:2%;
  margin-right:2%
}
#statusbox {
  overflow:hidden;
  width:100%;
  height:48px;
  font-size:24px
}
#contributeSection {
    /*position : relative;*/
    height : 20px;
    margin-bottom : auto;
    margin-left : auto;
    margin-right : auto;
  }
footer{
    /*position : relative;*/
    height : 20px;
    margin-bottom : auto;
    margin-left : auto;
    margin-right : auto;
    text-align: center;
  }
progress,#loading {
  display:none;
  position:absolute;
  left:48px;
  width:10em;
  height:48px;
  padding:8px 48px 8px 8px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  vertical-align:middle;
  opacity:.7
}
#container {
  background:#fff;
  margin:32px;
  border:3px solid #fff
}
.feedback{
color:red;
 margin-bottom:5px; 
}
#resultsbox {
  padding:2px;
  position:relative;
  bottom:0;
  left:0
}
#result {
  height: 100%;
  width: 100%;

  display:block;
  position:relative;
  height: auto;
  margin-bottom:20px;
  border:0.5px solid #cccccc;
  border-radius:10px;
  padding:20px;
}
#small_hint {
  font-family: ColoredTashkeelFont, 'Droid Arabic Naskh', Amiri,"Traditional Arabic",Sans, Arial
  text-align:right;
  font-size:20px;
  border:0px;
  padding: 2px;
  display:none;
  border-radius: 10px;
  box-shadow: 10px 10px 5px #888888;
}
#hint {
  font-family: ColoredTashkeelFont, 'Droid Arabic Naskh', Amiri,"Traditional Arabic",Sans, Arial
  text-align:right;
  font-size:20px;
  border:0px;
  padding: 2px;
  position:fixed;
  border-radius: 10px;
  box-shadow: 10px 10px 5px #888888;
}
table,th,td {
  border:none;
  border-collapse:collapse
}
table {
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  width:80%;
  border:3px solid #ccc
}
.moresection {
  display:none;
  float: left;
}
th,td {
  padding:3px 24px;
  background-color:#fff;
  border:3px solid #ccc;
  border-top:0 none;
  border-bottom:0 none
}
th {
  font-size:150%;
  color:#008
}
td {
  text-align:left
}
td:first-child {
  text-align:right
}
tbody:nth-child(odd) td {
  background-color:#fff;
  color:#000
}
tbody:nth-child(even) td {
  background-color:#fdffdd;
  color:#000
}
.verb2  {color:red}
.v,.verb,.arabic{background-color:#c2f7b9}
.v1,.verbcontext{background-color:#91f080}
.v2,.verbBicontext {background-color:#91f078}
.n,.noun {background-color:#eadc5e}
.n1,.nouncontext{background-color:#ffff6c}
.n2,.nounBicontext{background-color:#ffff60}
.nv,.vn,.vn1,.latin {background-color:#fff}
.t,.tool {background-color:#ffb9b9}
.diff-all, .named{color:#4BADD1}  /* the word and the last mark*/
.diff-word, .number{color:#a52a2a}  /* the word is different*/
.diff-mark, .coll, .collocation{color:#45A8A2;}/* the last mark is different*/
.tashkeel, .txkl, .vocalized {
  font-family:ColoredTashkeelFont,  'Droid Arabic Naskh', Amiri,'Traditional Arabic',Sans,Arial;
 font-size:30px
}
/*
.vocalized {
  font-family:ColoredTashkeelFont,  'Droid Arabic Naskh', Amiri,'Traditional Arabic',Sans,Arial;
 font-size:30px
}
.txkl{
  background-color:#e2e2e2;
}
*/

.spld{
  background-color:#e2e2e2
}
.spellStyle {font-size:30px}
.spelled-incorrect {
  color:red;
  cursor:pointer;
  border-bottom:1px dotted red
}
.spelled-incorrect:hover,.vo :hover {
  background-color:#fafcda
}
.poetryJustifyCSS3 td {
    text-align: justify;
}
.poetryJustifyCSS3 td::after{
    content: "";
    display: inline-block;
    width: 100%;
}
.poetryJustifyCSS3 td:nth-child(2n+1) { padding-left: 1.5em; }
.poetryJustifyCSS3 td:nth-child(2n+0) { padding-right: 1.5em; }

table.poem  {
  direction: rtl;
  margin: auto;
  width: auto;
}

table.poem td {
    padding-left: 3ex;
    padding-right: 3ex;
    text-align: justify;
    text-align-last: justify;
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify;
}
