@font-face {
  font-family: 'Droid Arabic Naskh';
  font-display: auto;
  font-style: normal;
  font-weight: 400;
  src: url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Regular.eot);
  src: url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Regular.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Regular.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Regular.woff) format('woff'),
       url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'Droid Arabic Naskh';
  font-display: auto;
  font-style: normal;
  font-weight: 700;
  src: url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Bold.eot);
  src: url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Bold.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Bold.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Bold.woff) format('woff'),
       url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Bold.ttf) format('truetype');
}

body {
  margin: 1.0em;
  font-family: "Droid Arabic Naskh", Tahoma, Arial, sans-serif;
}

input, h1, h2, h3, h4 {
  font-family: "Droid Arabic Naskh", Tahoma, serif;
}

h1.title
{
    text-align: center;
    font-size: 24px;
}

h2.title
{
    text-align: center;
    font-size: 18px;
}

.p
{
    margin: auto;
    display: table;
    border: 0;
}

.b
{
    display: table-row;
    margin-left: auto;
    margin-right: auto;
}

.pr
{
    display: table;
    text-align: justify;
    border: 0;
    width: 100%;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.par
{
    display: table-row;
}

.note
{
    text-align: center;
    font-weight: bold;
}

.bm1
{
    display: block;
    width: auto;
    text-align: center;
}

.bm2
{
    display: block;
    width: auto;
    text-align: center;
    margin-bottom: 1.5em;
}

.bs-docs-draw1, .bs-docs-draw2, .bs-docs-draw3, .bs-docs-draw4, .bs-docs-draw5, .bs-docs-draw6, .bs-docs-draw7 {
  position: relative;
  margin: 15px 0;
  padding: 39px 19px 14px;
  *padding-top: 19px;
  background-color: #fff;
  border: 1px solid #ddd;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

/* Echo out a label for the example */
.bs-docs-draw1:after {
  content: "قرعه کشی روز اول";
  position: absolute;
  top: -1px;
  right: -1px;
  padding: 3px 7px;
  font-size: 14px;
  font-weight: bold;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  color: #9da0a4;
  -webkit-border-radius: 4px 0 4px 0;
     -moz-border-radius: 4px 0 4px 0;
          border-radius: 4px 0 4px 0;
}

/* Echo out a label for the example */
.bs-docs-draw2:after {
  content: "قرعه کشی روز دوم";
  position: absolute;
  top: -1px;
  right: -1px;
  padding: 3px 7px;
  font-size: 14px;
  font-weight: bold;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  color: #9da0a4;
  -webkit-border-radius: 4px 0 4px 0;
     -moz-border-radius: 4px 0 4px 0;
          border-radius: 4px 0 4px 0;
}

/* Echo out a label for the example */
.bs-docs-draw3:after {
  content: "قرعه کشی روز سوم";
  position: absolute;
  top: -1px;
  right: -1px;
  padding: 3px 7px;
  font-size: 14px;
  font-weight: bold;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  color: #9da0a4;
  -webkit-border-radius: 4px 0 4px 0;
     -moz-border-radius: 4px 0 4px 0;
          border-radius: 4px 0 4px 0;
}

/* Echo out a label for the example */
.bs-docs-draw4:after {
  content: "قرعه کشی روز چهارم";
  position: absolute;
  top: -1px;
  right: -1px;
  padding: 3px 7px;
  font-size: 14px;
  font-weight: bold;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  color: #9da0a4;
  -webkit-border-radius: 4px 0 4px 0;
     -moz-border-radius: 4px 0 4px 0;
          border-radius: 4px 0 4px 0;
}

/* Echo out a label for the example */
.bs-docs-draw5:after {
  content: "قرعه کشی روز پنجم";
  position: absolute;
  top: -1px;
  right: -1px;
  padding: 3px 7px;
  font-size: 14px;
  font-weight: bold;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  color: #9da0a4;
  -webkit-border-radius: 4px 0 4px 0;
     -moz-border-radius: 4px 0 4px 0;
          border-radius: 4px 0 4px 0;
}

/* Echo out a label for the example */
.bs-docs-draw6:after {
  content: "قرعه کشی روز ششم";
  position: absolute;
  top: -1px;
  right: -1px;
  padding: 3px 7px;
  font-size: 14px;
  font-weight: bold;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  color: #9da0a4;
  -webkit-border-radius: 4px 0 4px 0;
     -moz-border-radius: 4px 0 4px 0;
          border-radius: 4px 0 4px 0;
}

/* Echo out a label for the example */
.bs-docs-draw7:after {
  content: "قرعه کشی روز هفتم";
  position: absolute;
  top: -1px;
  right: -1px;
  padding: 3px 7px;
  font-size: 14px;
  font-weight: bold;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  color: #9da0a4;
  -webkit-border-radius: 4px 0 4px 0;
     -moz-border-radius: 4px 0 4px 0;
          border-radius: 4px 0 4px 0;
}

#amazingaudioplayer-2 {
  width:600px;
}

@media (min-width: 980px)
{

    #mySpan
    {
        margin-top:15px;
    }
    
    #header
    {
        padding-bottom: 0px;
        padding-top: 20px;
        margin-top: 40px;
    }

    #footer
    {
        padding-bottom: 0px;
        padding-top: 15px;
        margin-bottom: 0;
        margin-top: 20px;
    }

    #home2
    {
        margin-top: 110px;
    }

    .m1
    {
        display: table-cell;
        width: auto;
        text-align: justify;
        text-align-last: justify;
        padding-left: 2em;
    }

    .m2
    {
        display: table-cell;
        width: auto;
        text-align: justify;
        text-align-last: justify;
        padding-right: 2em;
        margin-bottom: 0px;
        padding-bottom: 1.0em;
    }
}

@media (max-width: 979px)
{

    #mySpan
    {
        margin-top:5px;
    }

    #header
    {
        padding-bottom: 0px;
        padding-top: 20px;
        margin-top: -20px;
    }

    #footer
    {
        padding-right: 0px;
        padding-left: 0px;
        padding-bottom: 0px;
        padding-top: 15px;
        margin-bottom: 1.0em;
        margin-top: 20px;
    }

    #home2
    {
    }

    .m1
    {
        display: block;
        width: auto;
        text-align: justify;
        text-align-last: justify;
        padding-left: 14em;
    }

    .m2
    {
        display: block;
        width: auto;
        text-align: left;
        text-align-last: left;
        padding-right: 14em;
        margin-bottom: 1.0em;
    }
}

@media (min-width: 480px) and (max-width: 767px)
{
    #amazingaudioplayer-2 {
      width:400px;
    }
    .m1
    {
        display: block;
        width: auto;
        text-align: justify;
        text-align-last: justify;
        padding-left: 7em;
    }

    .m2
    {
        display: block;
        width: auto;
        text-align: left;
        text-align-last: left; 
        padding-right: 7em;
        margin-bottom: 0.5em;
    }
}

@media (max-width: 480px)
{
    #amazingaudioplayer-2 {
      width:300px;
    }

    .m1
    {
        display: block;
        width: auto;
        text-align: center;
        text-align-last: initial;
        padding-left: 0px;
    }

    .m2
    {
        display: block;
        width: auto;
        text-align: center;
        text-align-last: initial;
        padding-right: 0px;
        margin-bottom: 1.0em;
    }

    .hero-unit
    {
        padding: 20px;
    }
}

img.displayed {
    display: block;
    margin-top:10px;
    margin-bottom:10px;
    margin-left: auto;
    margin-right: auto;
}

.link1
{
    display: table-cell;
    width: auto;
    text-align: right;
    text-align-last: right;
    padding-left: 2em;
    padding-top:2em;
}

.link2
{
    display: table-cell;
    width: auto;
    text-align: left;
    text-align-last: left;
    padding-right: 2em;
    margin-bottom: 0px;
    padding-bottom: 1.0em;
}