@import "/styles/cssmenu.css";
html,
body,
hi,
h2,
h3,
h4,
p,
li,
img {
    margin: 0;
    padding: 0;
    border: 0
}
html {
    min-height: 100%;
    margin-bottom: 1px
}
body {
    color: #000000;
background-color: #6699CC;
    font: 100.01% sans-serif
}
#headerbox {
    width: 100%;
    background-color: #000033 color: #FF0
}
#header {
    width: 100%;
    padding: 5px 0 0 0;
    margin: 0 0 15px 0;
    background-color: #000033;
    color: #FF0
}
#header h1 {
    padding: 0px
}
#header img {
    padding: 0 0 0 10px
}
#headlinks {
    float: right
}
#bodybox {
width:100%;
}
#body {
width: 700px;
background: #FFF;
/*background: url(../images/bg/bg_omniglot.gif) repeat-y scroll 0% 0%;*/
padding:2em;
margin: .8em;
border-radius: 10px;
    border: 1px solid #000033;
    background-color: #FFF;
    box-shadow: 10px 10px 5px #888888;
}
#body h1,
#bodybox h1 {
    font-size: x-large;
    color: #004747;
    padding: 0 0 5px 0;
    line-height: 1.3em
}
#body h2 {
    font-size: large;
    color: #003366;
    padding: 5px 0 4px 0
}
#body h3 {
    font-size: medium;
    color: #005C5C;
    padding: 0
}
#body h4 {
    font-size: medium;
    color: #336699;
    padding: 0
}
#body p,
#body td,
#body th,
#body dl,
#body dd {
    margin: 0px 0px 10px 0px;
    line-height: 1.37em
}
#body li {
    line-height: 1.37em
}
#body p,
#body ul,
#body ol,
#body li,
#body hr,
#body dl,
#body h1,
#body h2,
#body h3,
#body h4 {
    max-width: 600px
}
#body hr { 
margin: 20px 0 20px 0;
height: 8px;
    border: 1;
    box-shadow: inset 0 9px 9px -3px rgba(0,0,102,0.8);
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      -ms-border-radius: 5px;
      -o-border-radius: 5px;
      border-radius: 5px;
}
#body li {
    margin: 0px 0px 8px 0px;
    line-height: 1.34em
}
#body dl {
    margin: 0px 0px 10px 10px;
    line-height: 130%;
    font-weight: bold
}
#body dt {
    margin: 10px 0px 5px 10px;
    font-weight: bold
}
#body dd {
    margin: 0px 0px 5px 10px;
    font-weight: normal
}
#body img, table {
    margin: 6px 0px 6px 0px
}
#body a {
    text-decoration: none
}
#body a:hover {
    text-decoration: underline
}
#body blockquote {
    margin: 1.5em 0 1.5em 0;
    padding: 1em;
    border-left: 5px solid #FFCC00;
    background-color: #FFFFCC;
    width: 85%;
    box-shadow: 5px 5px 3px #888888;
    line-height: 1.7em;
}
#body blockquote p {
    margin: 0
}
#body img,
embed,
object,
video,
table {
    max-width: 100%;
    height: auto
}
.left {
    text-align: left;
}
.right {
    text-align: right;
}
.rightsmall {
     text-align: right;
   display:none;
}

.center {
    text-align: center;
}
.leftfloat {
    float: left;
    margin: 0 10px 10px 0;
    padding: 0 10px 0 0
}
.rightfloat {
    float: right;
    margin: 0 0 10px 20px;
    padding: 0 0 5px 10px
}
#leftlinks,
#rightlinks {
    float: left;
    margin: 10px 20px 0 0;
    font-size: .75em;
    text-align: left;
    list-style-type: none;
    padding: 0;
    border: 1px solid #CCC;
    width: 170px;
    background-color: #F0F0F0
}
#leftlinks ul,
#rightlinks ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: none;
    width: 170px
}
#leftlinks a,
#rightlinks a {
    text-decoration: none;
    padding: 1px 1px;
    display: block;
    width: 170px
}
#leftlinks a:hover,
#rightlinks a:hover {
    text-decoration: none;
    background-color: #006666;
    color: #FF0;
    display: block;
    padding: 1px 1px;
    width: 170px
}
#leftlinks li,
#rightlinks li {
    border-bottom: 1px solid #CCC;
    line-height: 1.5em
}
#leftlinks h3,
#rightlinks h3 {
    font-weight: bold;
    font-size: .85em;
    border-bottom: 1px solid #CCC;
    padding: 2px 0 2px 2px;
    background-color: #006666;
    color: #FF0
}
#leftlinks h3 a,
#rightlinks h3 a {
    color: #FF0
}
#leftlinks h3 a:hover,
#rightlinks h3 a:hover {
    text-decoration: underline
}
#rightlinks {
    position: fixed;
    top: 160px;
    left: 640px;
    margin: 0 0 0 20px
}
#skyscraper {
    float: right;
    margin: 0 0 0 20px;
    text-align: center
}
#right {
    text-align: center;
    background-color: #FFF;
    padding: 10px 0 0 0
}
#skyscraper {
    float: right;
    margin: 20px 0 0 20px
}
#skyscraper h1,
#skyscraper h2,
#skyscraper h3,
#skyscraper p,
#skyscraper a,
{
    font-size: small
}
#chinesemenu ul {
    margin: 0;
    padding: 0
}
#chinesemenu ul li {
    list-style: none;
    display: inline
}
#content {
    width: 810px
}
#summary {
    width: 220px;
    float: left;
    border: 1px solid #060;
border-radius: 6px;
    padding: 4px;
    background-color: #FF9;
    margin: 5px 15px 5px 0;
    font-size: 80%
}
#summary h3,
#summary ul,
#summary li {
    width: auto;
    padding: 0;
    margin: 0
}
#summary ul {
    list-style-type: none
}
#langlinks {
    width: 600px;
    border: solid 1px #006;
    padding: 3px;
    margin: 0 0 10px 10px;
    background-color: #FFC
}
#langlinks p {
    padding: 0;
    margin: 0
}
.middle {
    vertical-align: middle
}
.tbd {
    float: right;
    margin: 10px 0 10px 10px;
    border: 0
}
#map {
    margin: 10px 0 10px 0;
    frameborder: 0;
    marginheight: 0;
    marginwidth: 0
}
#flex table { 
  width: 95%; 
  border-collapse: collapse; 
}
#flex tr:nth-of-type(odd) { 
  background: #FFC; 
}
#flex th { 
  background: #033; 
  color: #FF0;
  font-weight: bold; 
}
#flex th a { 
  color: #FF0;
  font-weight: bold; 
}
#flex td, #flex th { 
  padding: 3px; 
  text-align: left;
  border: 1px solid #699; 
}

#index table,
#index tr,
#index td {
    padding: 3px;
    border: 1px solid #669999;
    border-collapse: collapse
}
#index table {
    width: 600px;
    margin: 10px 0 10px 0
}
#unicode table {
    background: #FFF;
    width: 600px;
    border: 1px solid #699;
    border-collapse: collapse;
}
#unicode tr:nth-of-type(odd) {
    background: #FFC
}
#unicode th {
    background: #033;
    color: #FF0;
    font-weight: bold;
    text-align: left
}
#unicode th,
#unicode td {
    padding: 3px;
    border: 1px solid #699
}
#unicode th a {
    color: #FFFF00;
    text-decoration: none
}
#unicode th a:hover {
    color: #FFFF00;
    text-decoration: underline
}
.nastaliq {
font-family: 'Jameel Noori Nastaleeq', 'Urdu Typesetting', 'Noto Nastaliq Urdu', 'Noto Nastaliq Urdu Draft', 'Hussaini Nastaleeq', 'AlQalam Taj Nastaleeq', IranNastaliq, 'Awami Nastaliq', 'Awami Nastaliq Beta3', 'Awami Nastaliq Beta2', 'Awami Nastaliq Beta1', 'Nafees Nastaleeq', 'Nafees Nastaleeq v1.01', 'Pak Nastaleeq', 'PDMS_Jauhar', 'Alvi Lahori Nastaleeq';
}
#mutations table {
    width: 600px;
    margin-bottom: 10px;
    border: 1px solid #699;
    border-collapse: collapse;
    padding: 2px
}
#mutations th {
    font-weight: bold;
    text-align: left;
    border: 1px solid #699;
    border-collapse: collapse;
    padding: 2px
}
#mutations tr {
    padding: 2px;
    border: 1px solid #699;
    border-collapse: collapse
}
#mutations td {
    padding: 2px;
    border: 1px solid #699;
    border-collapse: collapse;
    text-align: center
}
.numbers table {
   width: 600px;
    margin-bottom: 10px;
    border: 1px solid #699;
    border-collapse: collapse;
    padding: 2px
}
.numbers tr,
.numbers td,
.numbers th {
    padding: 2px;
    border: 1px solid #699;
    border-collapse: collapse;
    text-align: center
}
.numbers tr:nth-of-type(odd) {
    background: #FFC
}
#scroll table {
    max-width: 100%;
    border: 0px
}
#scroll tr,
#scroll td {
    border: 0px
}
#scroll img {
    margin: 0 10px 0 0
}
#scroll p {
    width: 250px
}
#alphabet table {
    width: 600px;
max-width:100%;
    margin: 10px 0 10px 0
}
#alphabet table,
#alphabet th,
#alphabet td {
    border: 0;
    border-collapse: collapse
}
#alphabet th,
#alphabet td {
    padding: 3px;
    text-align: center
}
#index table {
    padding: 3px
}
#index tr,
#index td {
    padding: 3px;
    text-align: center
}
#index td {
    width: 33%
}
#index img {
    border: 0
}
#list2 { width:600px; }
#list2 ol { font-family:serif; font-size:1.3em; font-style: italic; }
#list2 ol li { }
#list2 ol li p { padding: 0 0 0 8px; font-family: sans-serif; font-style: normal; font-size:medium; }
#list2 ol li p em { display:block; }
#list2 ol {list-style-type: upper-alpha;}

#circles ol {
    list-style-type: upper-alpha;
    margin: 0;
margin-left: 2.5em;
    padding: 0;
counter-reset: li-counter;
}
#circles ol > li{
    position: relative;
    margin-bottom: 20px;
    padding-left: 0.5em;
    min-height: 2.5em;
}
#circles ol > li:before {
    position: absolute;
    top: 0;
    left: -1.33em;
    width: 1.2em;
    height: 1.2em;
    font-size: 2em;
    line-height: 1.2;
    text-align: center;
    color: #FFFF00;
    border: 1px solid #003;
    border-radius: 50%;
    background-color: #6699CC;
    content: counter(li-counter);
    counter-increment: li-counter;
}

#homebox p {
    width: 80%
}
.index1 {
    width: 25%;
    float: left;
    margin: 20px;
    padding: 10px;
    border: 1px solid #699
}
.index2 {
    width: 25%;
    float: left;
    margin: 20px;
    padding: 10px;
    border: 1px solid #699
}
.index3 {
    width: 25%;
    float: right;
    margin: 20px 0 20px 0;
    padding: 10px;
    border: 1px solid #699
}
.index4 {
    width: 50%;
    float: left
}
.index5 {
    width: 50%;
    float: right
}
.column1,
.ad1 {
    float: left;
    width: 33%
}
.column2,
.ad2 {
    float: left;
    width: 33%
}
.column3,
.ad3 {
    float: left;
    width: 34%
}
.content,
adcontent {
    padding: 10px
}
.column1 img,
.column2 img,
.column3 img {
    float: left;
    padding: 0 10px 10px 0
}
.copyright {
    width: 100%;
    margin: 10px 0 10px 10px
}
.copyright p {
    line-height: .7em
}
.redtext { color: #FF0000; }

.greentext { color: #00FF00; }

.bluetext { color: #0000FF; }

#homeads {
    clear: both;
    width: 60%
}
.adcontent p {
    padding: 10px;
    margin: 0;
    line-height: 1.3em;
    font-size: .8em;
    text-align: left
}
.adcontent a {
    text-decoration: none
}
.adcontent a:hover {
    text-decoration: underline
}
.col1 {
    width: 20%;
    float: left;
    text-align: left
}
.col2 {
    width: 20%;
    float: left;
    text-align: center
}
.col3 {
    width: 20%;
    float: right;
    text-align: right
}
#newspage {
    width: 150px;
    float: right;
    margin: 0 0 0 15px
}
#langlinks {
    width: 130px;
    border: solid 1px #000;
    float: right;
    padding: 3px;
    background-color: #FFC;
    text-align: center
}
#langlinks p,
#langlinks a {
    padding: 0;
    margin: 0
}
#books img {
    margin: 0 20px 5px 0
}
.info {
    background: #FFFFCC;
    border: 1px solid #066;
border-radius: 6px;
    padding: 6px;
margin: 5px 5px 5px 0;
}
.info a {
padding: 0 0 5px 0;
}

.dropcap {
    */font-size: x-large;
    font-weight: bold;
    float: left;
    margin: 0px 10px 0px 0px;
    color: #006
}
#apps {
    font-size: small;
    float: right;
    margin: 0 0px 10px 10px;
    background-color: #FF9;
    text-align: center;
    padding: 3px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: #FFCC99;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#FFCC99', endColorstr='#FFCC00');
    background: -webkit-gradient(linear, left top, left bottom, from(#FFCC99), to(#FFCC00));
    background: -moz-linear-gradient(top, #FFCC99, #FFCC00)
}
#apps p {
    width: 130px
}
#apps a {
    font-weight: bold
}
.lingos {
    width: 600px;
    margin: 10px 0 10px 0;
    padding: 3px;
    border: solid 1px #300;
    background-color: #F4F4F4
}
#fcs_div_56266e0340261 {
    max-width: 600px;
}
#footerads {
    max-width: 800px;
    margin: 5px 0 5px 10px;
    line-height: 1.5em;
}
#footerads p {
    margin: 10px 0 10px 0
}
#footerads ul {
    background-color: #CCFFCC;
    line-height: 1.6em;
border: 1px solid #000033;
  border-radius: 6pt;
padding: 10px 0 10px 30px;
}
#footerads a {
    color: #C06;
font-weight:bold;
text-decoration:none;
}
#footerads a:hover {
text-decoration:underline;
}
#footerbox {
    width: 100%;
    background-color: #000033;
    padding: 1.5em 1.5em 2em 2em
}
#footerbox p {
    padding: 1.5em 0 1.5em 0
}
.chinese {
    font-size: 0.9em;
    padding: 10px 0 10px 10px
}
.chinese a {
    text-decoration: none
}
.chinese a:hover {
    text-decoration: underline
}
#footer {
    clear: both;
    width: 98%;
    background-color: #000033;
    color: #FF0;
    display: block;
    margin: 4px;
    border-radius: 7pt;
    color: #FF0;
    background: #000033
}
#footer p {
    color: #FF0;
    padding: 10px;
    margin: 0;
    line-height: 1.7em
}
#footer a,
.copyright a {
    color: #FF0;
    text-decoration: none
}
#footer a:hover,
.copyright a:hover {
    color: #FF0;
    text-decoration: underline
}
#footer ul {
    padding: 15px 0 10px 10px;
    margin: 0;
    list-style-type: none;
    line-height: 1.7em;
}
#footer ul li {
    display: inline
}
#footer li {
    border-right: thin solid yellow;
    padding-right: 5px
}
.small, .langsoft {
    display: none
}
.nav {
    margin: 10px 0 10px 0
}
.nav ul,
.navmain ul,
.contents ul {
    padding: 0;
    margin: 0 0 15px 0;
    list-style-type: none;
    line-height: 1.7em
}
.nav ul li,
.navmain ul li,
.contents ul li {
    display: inline
}
.nav li a,
.contents li a {
    border-right: thin solid black;
    padding-right: 5px
}
.contents {
    margin: 0 0 10px 0
}
    nav {
      display: block;
    }
    nav ul {
      list-style: none;
padding:0;
margin:0;
    }
    nav li {
      display: inline-block;
    border-right: thin solid black;
    padding-right: 5px
    }
    nav a {
      display: inline-block;
      text-decoration: none;
    }
    nav a:hover {
      text-decoration: underline;
    }
    nav select {
      display: none;
    }

#share-buttons {
margin: 0 0 10px 30px;
}

#share-buttons img {
    width: 35px;
    padding: 5px;
    border: 0;
    box-shadow: 0;
    display: inline
}

.intrinsic-container iframe {
  width: 560px;
  height: 315px;
}
.icons {
float:right;
}
@media screen {
    .printheader {
        display: none
    }
}
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	#flex table, #flex thead, #flex tbody, #flex th, #flex td, #flex tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	#flex thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	#flex tr { border: 1px solid #699; }
	
	#flex td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #CCC; 
		position: relative;
		padding-left: 50%; 
	}
	
	#flex td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
  font-weight: bold; 	
}
}

@media all and (max-width: 760px) {
    #rightlinks,
    #skyscraper,
    #right,
    #cssmenu {
        display: none
    }
    .small {
        display: initial
    }
    .langsoft {
	display: initial;
	text-align:center;
    }
    .langsoft img {
	display: block;
	text-align:center;
	margin-left: auto;
 	margin-right: auto;
   }
    .large {
        display: none
    }
    #header img {
        padding: 5px 0 5px 0;
        max-width: 100%;
        height: auto
    }
    #headerbox p,
    #header p {
        color: #ffff00
    }
    #headerbox {
        padding: 0 0 10px 0
    }
    #headerbox a {
        font-weight: bold;
        text-decoration: none;
        color: #ffff00;
        padding: 5px
    }
    #headerbox a:hover {
        color: #FFF;
        text-decoration: none;
        padding: 5px
    }
    #header {
        padding: 0 0 0 5px;
        margin: 0 0 0 0
    }
    #body {
padding:10px;
margin: 5px;
width: 90%; 
    }
    #body p,
    #body li,
    #footerads,
    #index table,
    #mutations table,
    .numbers table,
    #scroll table,
    #alphabet table,
    #unicode table,
    #langlinks,
.info {
        width: 95%
    }
    #index img {
        width: 33%;
        height: auto
    }
    .chinese,
    .adcontent p {
        font-size: 1em
    }
#list2 { width:100%; }
#list2 ol { font-size:medium; }
#list2 ol li p { padding: 0 0 0 2px; font-family: sans-serif; font-style: normal; font-size:medium; }

.rightsmall {
    text-align: right;
        display: initial;
}
    .navmain ul {
        list-style-type: disc;
        margin-left: 0px;
        padding-left: 10px;
        line-height: 1.7em
    }
    .navmain li {
        border: 0
    }
      nav ul     { display: none; }
      nav select { display: inline-block; }
    #footer ul {
        list-style-type: disc;
        margin-left: 0px;
        width: 90%
    }
    #footer li {
        border: 0
    }
  #footer p {
    text-align: center;
  }
#summary {
    width: 93%;
    float: none;
}
.intrinsic-container {
  position: relative;
  height: 0;
  overflow: hidden;
}
.icons {
    float: none;
  }
 
/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
  padding-bottom: 56.25%;
}
 
/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
  padding-bottom: 75%;
}
.intrinsic-container iframe {
  max-width: 100%;
  max-height: 100%;
}
.intrinsic-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}
}
@media print {
    #footer,
    #footerads,
    .blurb,
    #skyscraper,
    #leftlinks,
    #paidlinks,
    #rightlinks,
    .chinese;
    #headlinks {
        display: none;
    }
    #body p,
    #body li,
    #body,
    #footerads,
    #index table,
    #mutations table,
    .numbers table,
    #scroll table,
    #alphabet table,
    #unicode table,
    #langlinks,
    #list2 {
        width: 100%
    }
    #header {
        width: 100%;
        padding: 2px;
        background-color: #FFF;
        font-family: Sans-Serif;
        text-align: center;
    }
    #header img {
        display: none;
    }
    #body {
        font-size: 12px;
        margin: 0 0 0 10px;
    }
    p a[href^="#"]:after {
        display: none;
    }
    #footerbox {
        background-color: #FFF;
    }
    .copyright,
    .copyright a {
        color: #000;
        text-decoration: none;
    }
}