@import url(//fonts.googleapis.com/earlyaccess/notonaskharabic.css);

html,body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Noto Naskh Arabic', serif;
  text-align: center;
  background-color: #eee;
}
h1 {
  margin: 0;
}
main {
  width: 640px;
  margin: 20px auto;
}

.top {
  background-color: black;
  padding: 20px;
  color: #eee;
}

nav li {
  display: inline-block;
  list-style: none;
}
nav a {
  font-weight: bold;
  text-decoration: none;;
}
nav a.at { text-decoration: underline; }
nav a:link { color: #F24E67; }
nav a:visited { color: #F24E67; }
nav a:hover { color: #ff8598; }
nav a:active { color: #942939; }


#input,#output{
  font-family: inherit;
  font-size: 12pt;
}
#input,.outputArea {
  border: 4px ridge rgba(41,160,158,.4);
  border-radius: 8px;
  width: 100%;
  min-height: 180px;
  text-align: start;
  background-color: #fafafa;
}
#input {
  direction: ltr;
  resize: vertical;
}
#output {
  white-space: pre-wrap;
  direction: rtl;
  max-height: 600px;
  overflow: scroll;
}

span.token:hover {
  background-color: #ccc;
  /* border: 1px solid #ccc; */
  border-radius: 4px;
  cursor: pointer;
}
span.multi {
  color: rgba(20,120,150,1.0);
  font-weight: bold;
}

.info {
  display: block;
  width: 100%;
  background-color: #ccc;
}
.label {
  font-size: smaller;
  color: #444;
  margin: 0 1em;
}
#conversions {
  display: inline;
}
.conversion {
  margin: 0 4pt;
  cursor: pointer;
}

#directionToggle {
  cursor: pointer;
  color: rgba(41,160,158,1.0);
  font-weight: bold;
}

figure {
  margin: 5px;
  padding: 5px;
  border: 4px ridge rgba(41,160,158,.4);
  border-radius: 8px;
}
figure table.chars { margin: 10px auto; }
figure table.chars td {
  font-size: 20pt;
  padding: 0 5px;
}
figure table.chars td span {
  padding: 0 8px;
}

p.justify { text-align: justify; }

article { text-align: left; }
article h3 a:link { color:initial; }
article h3 a:visited { color:initial; }
article h3 a:hover { color:initial; }
article h3 a:active { color:initial; }