/* CSS reikimaster.com.pk */

/* Body
-------------------------------------------------------------- */
body         { width: 100%; margin: 0 auto; padding: 0; font-family: Arial, Helvetica, sans-serif, verdana; font-size: 16px; color: #333;}
#top {;}

/* Structure
-------------------------------------------------------------- */
#wrapper     { width: 100%; margin: 0 auto; padding: 0;}
#main        { width: 78%; margin: 10px auto; padding: 0 20px; background: #fff;}
#content     { width: 100%; margin: 0 0 30px 0; padding: 0; line-height: 150%;}

/* Body Links
-------------------------------------------------------------- */
a             { color: #0066cc; text-decoration: none;}
a:hover       { color: #cc3300; text-decoration: none;}
a:active      { color: #0066cc; text-decoration: none;}

/* Header area
-------------------------------------------------------------- */
header        { width: 78%; margin: 0 auto; padding: 0;}
#site-title   { width: 38%; float: left; margin: 0; padding: 10px 0 5px 8px; font-size: 16px; line-height: 120%;}
.contact      { width: 90%; background: #0080cc; margin: 0; padding: 8px 140px 8px 0; text-align: right; font-size: 16px;
 line-height: 160%; color: #fff;} 
.contact a { color: #ffff00;}
.classchedule { width: 30%; float: right; margin: 10px 80px 15px 0; padding: 10px ; font-weight: normal; color: #000; text-align: center; font-size: 14px; line-height: 160%; letter-spacing: 1px;}
.about {font-size: 14px;}

/* Top navigation
-------------------------------------------------------------- */
#topmenu     { width: 100%; float: left; margin: 0 auto; border-top: #0080cc solid 2px; background: #f0f0f0;}
.topnav      { width: 78%; margin: 5px auto; padding: 0; letter-spacing: 1px;}
.topnav a { float: left; display: block; color: #333; text-align: center; padding: 9px 12px; text-decoration: none; font-size: 16px;}
.topnav .icon { display: none;  margin: 0; padding: 4px 10px;}
.dropdown { float: left; overflow: hidden;}
.dropdown .dropbtn { font-size: 16px;  border: none; outline: none; color: white; padding: 8px 12px; background-color: inherit;
                     font-family: inherit; margin: 0; color: #333;}
.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 180px;
                    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;}
.dropdown-content a { float: none; color: #444; padding: 8px 12px; text-decoration: none; display: block; text-align: left;
                      border-bottom: #ccc solid 1px;}
.topnav a:hover, .dropdown:hover .dropbtn { color: #cc3300;}
.dropdown-content a:hover { background-color: #d9e6ff; color: #000;}
.dropdown:hover .dropdown-content { display: block;}

/* Headings
-------------------------------------------------------------- */
h1, h2, h3, h4 { line-height: 130%;}
h1          { font-size: 28px; font-weight: bold; margin-bottom: 20px; padding: 0 0 4px 0; color: #222; border-bottom: dotted 2px #ccc;
              font-family: "Arial Narrow", Arial, sans-serif;}
h2          { font-size: 18px; margin: 10px 0 0 0; font-weight: bold;}
h3          { font-size: 16px; margin: 0; font-weight: bold;}

/* Generalities
-------------------------------------------------------------- */
#content ul, #content ol { margin: 0 0 10px 25px; padding: 0; float: none;}
#content ul li, #content ol li{ margin: 2px 0 0 0; padding: 0 0 5px 0; float: none;}
.urdu { width: 78%; margin: 0 auto;}
.urdubox ul li { font-size: 18px;}
.style1       { color: #cc3300;}
hr            { color: #ccc; height: 1px; border-style: solid; width: 100%; margin: 20px auto; text-align: left;}
.clear        { clear: both; display :block; overflow: hidden; visibility: hidden; width: 0; height: 0;}
.spacer       { margin: 10px;}
.aligncenter  { text-align: center; margin: 20px 0 10px 0;}
.sharethis-inline-share-buttons { margin: 20px 10px;}

/* Footer area
-------------------------------------------------------------- */
footer    { width: 100%; float: left; background: #004e9b; margin: 0;}
.footer   { width: 90%; margin: 0 auto; padding: 10px; text-align: center;}
.footer a { padding: 8px; margin: 4px; line-height: 40px; letter-spacing: 1px; font-size: 16px; outline: 0; color: #fff;
			text-decoration: none; font-family: arial; font-weight: normal;}
.footer a:hover { color: #cc3300;}

.copyright    { background: #333; width: 100%; float: left; text-align: center; line-height: 140%;
                margin: 0; padding: 20px 0 20px 0; color: #ccc;}
.meter        { width: 100%; float: left; height: 1px; text-align: left;}

/* Media queries for responsive design
--------------------------------------------- */

@media only screen and (max-width: 980px) {
body, #wrapper { background: none;}
#wrapper { width: 100%; margin: 0 auto; overflow: hidden;}
header      { width: 100%; }
#site-title { width: 100%; float: none; padding: 5px 0; text-align: center;}
  .topnav a:not(:first-child), .dropdown .dropbtn { display: none;}
  .topnav a.icon { float: right; display: block; background: #333; color: #fff;}
  .topnav.responsive { position: relative;}
  .topnav.responsive .icon { position: absolute; right: 0; top: 0;}
  .topnav.responsive a { float: none; display: block; text-align: left; border-bottom: #999 dashed 1px;}
  .topnav.responsive .dropdown {float: none; border-bottom: #999 dashed 1px;}
  .topnav.responsive .dropdown-content {position: relative; padding-left: 30px;}
  .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left;}

#content    { width: 100%; float: none; margin: 0 auto; padding: 0;}
h1          { font-size: 20px; margin-top: 0;}
h2          { font-size: 18px;}
.footer    { line-height: 25px;}
.copyright { padding: 10px;}
}

@media only screen and (max-width: 767px) {
body, #wrapper { background: none;}
#wrapper, #main { width: 100%; margin: 0 auto; overflow: hidden;}
#site-title { width: 100%; float: none; padding: 5px 0; text-align: center;}
.topnav     { width: 80%; margin: 0 auto;}
#content    { width: 100%; float: none; margin: 0 auto; padding: 0;}
h1          { font-size: 20px; margin-top: 0;}
h2          { font-size: 18px;}
.footer    { line-height: 25px;}
.copyright { padding: 10px;}
}

@media only screen and (max-width: 600px) {
body, #wrapper { background: none;}
#wrapper, #main { width: 100%; margin: 0 auto; overflow: hidden;}
.classchedule { width: 100%; float: none; margin: 0; padding: 5px; border-radius: 0; text-align: center; z-index: 1; font-size: 18px;}
#site-title { width: 100%; float: none; padding: 5px 0; text-align: center;}
.contact    { width: 100%; float: none; padding: 5px 0; font-size: 14px; text-align: center;}
  .topnav a:not(:first-child), .dropdown .dropbtn { display: none;}
  .topnav a.icon { float: right; display: block; background: #333; color: #fff;}
  .topnav.responsive { position: relative;}
  .topnav.responsive .icon { position: absolute; right: 0; top: 0;}
  .topnav.responsive a { float: none; display: block; text-align: left; border-bottom: #999 dashed 1px;}
  .topnav.responsive .dropdown {float: none; border-bottom: #999 dashed 1px;}
  .topnav.responsive .dropdown-content {position: relative; padding-left: 30px;}
  .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left;}

#main { width: 95%; padding: 5px; margin: 5px auto;}
#content    { width: 100%; float: none; margin: 0 auto; padding: 0;}
h1          { font-size: 20px; margin-top: 0;}
h2          { font-size: 18px;}
.imgright   { float: none; text-align: center;}
.footer    { line-height: 40px;}
.copyright { padding: 10px;}
}