/*
	Name: Smashing HTML5
	Date: July 2009
	Description: Sample layout for HTML5 and CSS3 goodness.
	Version: 1.0
	Author: Enrique Ramírez
	Autor URI: http://enrique-ramirez.com
*/


@font-face {
    font-family:'BZar';/*تعریف یک نام برای فونت*/
    src:url('../img/font/BZar.eot');/*اکسپلورر 9 به بعد*/
    src:local('BZar'),/*بررسی نصب بودن فونت در سیستم کاربر*/
        local('b Zar'),/*برای برخی از مرورگرها مانند سافاری*/
        url('../img/font/BZar.eot?#iefix') format('embedded-opentype'),/*هک برای اکسپلورر 8 و ماقبل*/
        url('../img/font/BZar.woff') format('woff'),/*مرورگر های جدید*/
        url('../img/font/BZar.ttf') format('truetype'),/*تمام مرورگرها به جزء اکسپلورر*/
        url('../img/font/BZar.svg#BZar') format('svg');/*نسخه های قدیمی سیستم عامل iOS*/
    font-style:normal;
    font-weight:normal;

}




/* Body */
body {

    /*background: #7adecb url('../img/gonbad5.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;*/
    background-color:white;
    color: #000305;
    font-size: 100%; /* Base font size: 14px */
    font-family: BZar,Tahoma, Geneva, sans-serif;
    line-height: 1.129;
    margin: 0;
    padding: 0;
    text-align: right;
    height:100%;
}

img.bg {
    z-index:-1;
			/* Set rules to fill background */
			min-height: 100%;
			min-width: 1024px;
			
			/* Set up proportionate scaling */
			width: 100%;
			height: auto;
			
			/* Set up positioning */
			position: fixed;
			top: 0;
			left: 0;
		}
		
		@media screen and (max-width: 1024px){
			img.bg {
				left: 0;
				margin-left: 0px;
                height:100%;
			}
		}
		
/* Anchors */
a {
    outline: 0;
}

    a img {
        border: 0px;
        text-decoration: none;
    }

    a:link, a:visited {
        color: #333;
        padding: 0 1px;
        text-decoration: none;
    }

    a:hover, a:active {
        /*background-color: #C74350;*/
        color: #0088cc;
        text-decoration: none;
    }

/*the color of tabs (location, canendar, hours*/
.nav-tabs > .active > a, .nav-tabs > .active > a:hover {
    color: #0088cc;
}


/* Paragraphs */
p {
    margin-bottom: 0em;
}

* p:last-child {
    margin-bottom: 0;
}

strong, b {
    font-weight: bold;
}

em, i {
    font-style: italic;
}

/*::-moz-selection {background: #F6CF74; color: #fff;}*/
/*::selection {background: #F6CF74; color: #fff;}*/

/* Lists */
ul {
    list-style: outside disc;
    margin: 1em 0 1.5em 1.5em;
}

ol {
    list-style: outside decimal;
    margin: 1em 0 1.5em 1.5em;
}

dl {
    margin: 0 0 1.5em 0;
}

dt {
    font-weight: bold;
}

dd {
    margin-left: 1.5em;
}

/* Quotes */
blockquote {
    font-style: italic;
}

cite {
}

q {
}

/* Tables */
table {
    margin: .5em auto 1.5em auto;
    width: 98%;
}

/* Thead */
thead th {
    padding: .5em .4em;
    text-align: left;
}

thead td {
}

/* Tbody */
tbody td {
    padding: .5em .4em;
}

tbody th {
}

tbody .alt td {
}

tbody .alt th {
}

/* Tfoot */
tfoot th {
}

tfoot td {
}

/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
    display: block;
}

/***** Layout *****/
.body {
    clear: both;
    margin: 0 auto;
    width: 800px; /*1100px;*/
}

img.right figure.right {
    float: right;
    margin: 0 0 2em 2em;
}

img.left, figure.left {
    float: right;
    margin: 0 0 2em 2em;
}

/*
	Header
*****************/
#banner {
    margin: 0 auto;
    padding: 2.5em 0 0 0;
    font-family:BZar, Tahoma, Geneva, sans-serif;
}

    /* Banner */
    #banner h1 {
        font-size: 3.571em;
        line-height: .6;
    }

        #banner h1 a:link, #banner h1 a:visited {
            color: #000305;
            display: block;
            font-weight: bold;
            margin: 0 0 .6em .2em;
            text-decoration: none;
            width: 400px;
        }

        #banner h1 a:hover, #banner h1 a:active {
            background: none;
            color: #C74350;
            text-shadow: none;
        }

        #banner h1 strong {
            font-size: 0.36em;
            font-weight: normal;
        }

    /* Main Nav */
    #banner nav {
        /*background: #000305;*/
        background-image: url('../img/Firuze.jpg');
        font-size: 1.143em;
        height: 40px;
        line-height: 30px;
        margin: 0 auto 0 auto;
        padding: 0;
        text-align: center;
        width: 800px; /*1100px;*/
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
    }

        #banner nav ul {
            list-style: none;
            margin: 0 auto;
            width: 800px; /*1100px;*/
            float: right;
        }

        #banner nav li {
            float: inherit;
            display: inline;
            margin: 0;
        }

        #banner nav a:link, #banner nav a:visited {
            color: #fff;
            display: inline-block;
            height: 30px;
            padding: 5px 1.5em;
            text-decoration: none;
        }

        #banner nav a:hover, #banner nav a:active,
        #banner nav .active a:link, #banner nav .active a:visited {
            /*background: #C74451;*/
            background-image: url('../img/firuze_Nav4.jpg');
            color: #fff;
            text-shadow: none !important;
        }

        #banner nav li:first-child a {
            border-top-right-radius: 10px;
            -moz-border-radius-topright: 10px;
            -webkit-border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            -moz-border-radius-bottomright: 10px;
            -webkit-border-bottom-right-radius: 10px;
        }

/*
	Featured
*****************/
#featured {
    background: #fff;
    margin-bottom: 2em;
    padding: 20px;
    width: 760px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    font-family:BZar, Tahoma, Geneva, sans-serif;
    font-size:large

}

    #featured > #navigator {
        background: #fff;
        margin-bottom: 2em;
        padding: 20px;
        width: 760px;
    }

    #featured h3 a:link, #featured h3 a:visited {
        color: #000305;
        text-decoration: none;
    }
#featured h3 a:hover, #featured h3 a:active {color: #fff;}


.dropdown-menu > li > a {
    text-align: right;
}

/*Change the box of dropdown button to right*/
.dropdown-menu {
    left: auto;
    right: 0;
}

/*Dropdown comes down automatically on hover*/
ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
    margin: -1px;
}

/*Dropdown hides automatically in the lack of hover*/
a.menu:after, .dropdown-toggle:after {
    content: none;
}
/*
	Body
*****************/
#content {
    background: #fff;
    margin-bottom: 2em;
    /*overflow: hidden;*/
    padding: 20px 20px;
    width: 760px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

/***** Sections *****/
/* Blog */
.hentry {
    /* border-bottom: 1px solid #eee; Commented by Hamid */
    padding: 1.5em 0;
}

li:last-child .hentry, #content > .hentry {
    border: 0;
    margin: 0;
}

#content > .hentry {
    padding: 1em 0;
}

.entry-title {
    font-size: 1.429em;
    margin-bottom: 0;
}

    .entry-title a:link, .entry-title a:visited {
        text-decoration: none;
    }

.hentry .post-info * {
    font-style: normal;
}

/* Content */
.hentry footer {
    margin-bottom: 2em;
}

    .hentry footer address {
        display: inline;
    }

#posts-list footer address {
    display: block;
}

/* Blog Index */
#posts-list {
    list-style: none;
    margin: 0;
}

    #posts-list .hentry {
        position: relative;
    }

    #posts-list footer {
        left: 10px;
        position: absolute;
        top: 1.5em;
        width: 190px;
    }

/***** Google Map *****/



#map_canvas {
    height: 370px;
    width: inherit;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-color: #ccc #ccc #999 #ccc;
    -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
    -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}




#navigator {
    margin-top: 0px;
}

.setting_menu_icon {
    margin-left: 4px;
    margin-right: 2px;
}

.Label_Box {

    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 10px;
    direction: rtl;
    text-align: center;
    vertical-align: middle;
    background-color: #eee;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

#LatLogBox {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 10px 10px;
    margin-left: auto;
    margin-right: auto;
    /*direction: rtl;*/
    text-align: center;
    vertical-align: middle;
    background-color: #eee;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;

}



#latitude, #longitude {
    margin-left: 20px;
    text-align: left;
    direction: ltr;
}

#AutoFindLocation {
    font-size: 100%; /* Base font size: 14px */
    font-family: Tahoma, Geneva, sans-serif;
    line-height: 1.429;
    margin-right: 10px;
    margin-top: -17px;
}

/* Search Place*/
#Serach-Location-input {
    background-color: #fff;
    width: 300px;
    margin-bottom: 20px;
    direction: ltr;
    /*font-family:inherit;
        font-size: 50%;*/
}

   


#Search_Label {
    font-family: inherit;
    font-size: inherit;
    display: inline;
    vertical-align: top;
    margin-left:10px;
}


#myModal {
    font-size: 200%; /* Base font size: 14px */
    font-family: BZar,Tahoma, Geneva, sans-serif;
    line-height: 1.129;

  height: 25%; /* Set your own height: percents, ems, whatever! */
  width: 75%; /* Set your own width: percents, ems, whatever! */
  overflow: auto; /* Recommended in case content is larger than the container */
  margin: auto; /* Center the item vertically & horizontally */
  position: absolute; /* Break it out of the regular flow */
  top: 0; left: 0; bottom: 0; right: 0; /* Set the bounds in which to center it, relative to its parent/container */

    }

.modalFont {
    font-size: 120%; /* Base font size: 14px */
    font-family: BZar,Tahoma, Geneva, sans-serif;
    line-height: 1.129;
}



/*#Time_Table_Method {
    border: 1px solid;
    padding-left: 30px;
    padding-top:10px;
    padding-bottom:10px;
}*/



/* Hamid - Responsive */
#timetable-container{
    text-align: center; 
    width: 900px; 
    margin: auto auto;
    margin-bottom:30px;
    font-size: 22px
}

#banner nav{
    height: auto !important;
    overflow: hidden; /* fix height with floated content */
}

section#featured{
    width: 1100px;
}


div#Local_Time_Box{
    width: 100%; 
    float: right
}

div#local_live_time{
    width: 30%;
    text-align: center;
    float: right;
    direction: rtl;
    padding: 10px
}


a#time_is_link, span#UTC_za00{
    font-size: 22px; 
    float: right;
}
span#UTC_za00{
    margin-right: 10px;
}

span#Local_Time_Source {
    font-size: 22px; 
    margin-right: 5%;
    direction: rtl;
}

span#Local_Time{
    font-size: 22px; 
    display: inline-block; 
    direction: ltr; 
    margin-right: 10px;
}

div#Main_Div{
    direction: ltr; 
    height: 500px;
}

#shuffle-audio i{
    display: none;
}

#Play_Sahar_Eftar_text{
    float: right;
    width: 200px;
}

#Play_Sahar_Eftar_text .switch-handle{
    left: 10px;
    display: none;
}

#Play_Sahar_Eftar_text .switch-label{
    font-size: 20px;
}

img#ziyafat_logo_mobile{
    display: none;
}


@media (max-width: 450px){

    .mobile-only{
        display: none;
    }

    p#next_azan{
        display: none;
    }

    img#ziyafat_logo_mobile{
        width: 25%;
        height: auto;
        z-index: 2;
        position: absolute;
        bottom: 2px;
        left: 2px;
        display: block;
    }

    #timetable-container + br, #timetable-container + br + br{
        display: none;
    }

    div#Digital_Clock + br {
        display: none;
    }

    html {
        height: 100%;
    }

    body{
        /* overflow: hidden; */
    }

    body img.bg{
        display: none;
    }

    #posts-list, article.hentry{
        height: 100%;
    }

    div#Main_Div{
        float: right;
        height: auto;
        /* height: 70vh !important; */
        padding-bottom: 10px;
        position: relative;
    }

    section#featured{
        width: 100%;
        overflow: none;
        box-sizing: border-box;
        height: 94.7vh;
        border-radius: 0;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        padding: 5px 15px;
    }

    header#banner{
        padding: 0;
    }

    #timetable-container{
        width: 99%;
        font-size: 4.5vw;
        direction: ltr;
        margin-bottom: 5px;
        /* display: none; */
    }

    div#local_live_time{
        display: none; /* will be enabled by JS on page load */
        width: 60%;
        float: left;
        font-size: 5vw;
        padding: 0;
        margin-bottom: 2px;
    }
    div#local_live_time:before{
        content: '(';
    }

    div#local_live_time:after{
        content: ')';
    }

    span#Local_Time_Source, span#Local_Time{
        margin: 0;
        font-size: inherit;
    }

    #timetable-container p#today_table_label{
        margin-bottom: 2px !important;
        width: 40%;
        float: right;
        font-size: 5vw;
    }

    #timetable-container tr{
        /* display: table-cell; */
    }
    #timetable-container td{
        /* display:table-row; */
        width: auto !important;
        /* border-style: none;
        border-bottom-style: inset;
        border-bottom-color: #CCCCCC; */
        line-height: 150%;
    }

    #Digital_Clock{
        /* position:relative;
        margin: 0 auto; */
        /* left:50vw; */
        /* margin-left:-50vw; */
        margin: 0 auto;
        margin-left:10vw;
        top: 0;

    }

    #upperHalf img{
        position:relative;
        height:11vw;
        vertical-align:bottom;
        visibility:visible;
    }
    
    #lowerHalf img{
        position:relative;
        height:11vw;
        vertical-align:top;
        visibility:visible;
    }

    #hoursUpLeft, #hoursUpRight, #hoursDownLeft, #hoursDownRight,
    #hoursUpLeftBack, #hoursUpRightBack, #hoursDownLeftBack, #hoursDownRightBack,
    #minutesUpLeft, #minutesUpRight, #minutesDownLeft, #minutesDownRight,
    #minutesUpLeftBack, #minutesUpRightBack, #minutesDownLeftBack, #minutesDownRightBack,
    #secondsUpLeft, #secondsUpRight, #secondsDownLeft, #secondsDownRight,
    #secondsUpLeftBack, #secondsUpRightBack, #secondsDownLeftBack, #secondsDownRightBack{
        width:11vw;
    }

    .date_time_information{
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    header#banner{
        width: 100vw;
        height: 5.3vh;
    }

    #banner nav{
        width: 100%;
        border-radius: 0;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
    }
    #banner nav ul{
        width: 100%;
    }

    #banner nav a:link, #banner nav a:visited{
        height: 5.3vh;        
        padding: 0 8vw;
    }

    #banner nav li a span {
        display: none;
    }

    #banner nav li a i{
        font-size: 8vw;
        padding: 0;
        line-height: 5.3vh;
    }

    #remain_time_txt{
        margin: 2vh 0 0;
        padding: 0;
        font-size: 10vw;
    }

    #Local_Time_Box{
        /* float: none !important; */
        width: 97% !important;
        margin-right: 1.2%;
    }

    #shuffle-audio{
        /* border: none !important;    */
        /* float: right !important; */
        padding: 5px !important;
        background-color: #fffc;
        display: block;
        float: right !important;
    }
    #shuffle-audio i{
        display: none;
        background: #fff;
        color: #9370DB;
        border: 2px solid #9370DB;
        border-radius: 50%;
        box-sizing: border-box;
        height: 7vh;
        width: 7vh;
        line-height: 7vh;
        text-align: center;
        font-size: 5.5vw;
        /* padding: 15px;
        background: blue;
        color: #fff;
        border:none;
        border-radius: 50%;
        padding: 15px; */
    }
    #shuffle-audio span{
        /* display: inline; */
    }

    #Play_Sahar_Eftar_text{
        width: 55vw;
        height: 5vh;
        float: right;
        margin: 0;
        display: none; /* ToDo: fix it to be displayed correctly outside Ramadan */
    }

    #Play_Sahar_Eftar_text .switch-handle{
        left: 10px;
        display: none;
    }

    #Play_Sahar_Eftar_text .switch-label{
        font-size: 5.5vw;
    }

    #Play_Sahar_Eftar_text .switch-light .switch-label:before,
    #Play_Sahar_Eftar_text .switch-light .switch-label:after{

    }

    article.hentry{
        padding:0;
    }

    div#Mute_Volume{
        padding: 0;
        position: inherit !important;
    }

    div#user_counter{
        width: auto !important;
        margin: auto !important;
    } 

    div#show_date br{
        display: none;
    }

    #day_of_weak, #day_of_weak_shamsi, #day_of_month{
        font-size: 10vw;
        text-align: center;
        margin-right:-10px;
    }

    div#reference_time_container{
        overflow: hidden; /* To accommodate floated content */
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
    }

    a#time_is_link, span#UTC_za00{
        font-size: 6.1vw;
        float: none;
    }

    #myModal{
        font-size: 6vw;
        width: 95%;
    }

}  /* End of @media (max-width: 450px) */


/* Switch */
.switch {
	position: relative;
	display: block;
	vertical-align: top;
	width: 100px;
	height: 30px;
	padding: 3px;
	margin: 0 10px 10px 0;
	background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
	background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
	border-radius: 18px;
	box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
	cursor: pointer;
	box-sizing:content-box;
}
.switch-input {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	box-sizing:content-box;
}
.switch-label {
	position: relative;
	display: block;
	height: inherit;
	font-size: 10px;
	text-transform: uppercase;
	background: #eceeef;
	border-radius: inherit;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
	box-sizing:content-box;
}
.switch-label:before, .switch-label:after {
	position: absolute;
	top: 50%;
	margin-top: -.5em;
	line-height: 1;
	-webkit-transition: inherit;
	-moz-transition: inherit;
	-o-transition: inherit;
	transition: inherit;
	box-sizing:content-box;
}
.switch-label:before {
	content: attr(data-off);
	right: 11px;
	color: #aaaaaa;
	text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
	content: attr(data-on);
	left: 11px;
	color: #FFFFFF;
	text-shadow: 0 1px rgba(0, 0, 0, 0.2);
	opacity: 0;
}
.switch-input:checked ~ .switch-label {
	background: #E1B42B;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
	opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
	opacity: 1;
}
.switch-handle {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 28px;
	height: 28px;
	background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
	background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
	border-radius: 100%;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -6px 0 0 -6px;
	width: 12px;
	height: 12px;
	background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
	background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
	border-radius: 6px;
	box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
	left: 74px;
	box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
 
/* Transition
========================== */
.switch-label, .switch-handle {
	transition: All 0.3s ease;
	-webkit-transition: All 0.3s ease;
	-moz-transition: All 0.3s ease;
	-o-transition: All 0.3s ease;
}

/* Switch Light
==========================*/
.switch-light {
	padding: 0;
	background: #FFF;
	background-image: none;
}
.switch-light .switch-label {
	background: #FFF;
	border: solid 2px #eceeef;
	box-shadow: none;
}
.switch-light .switch-label:after {
	color: #9370DB;
}
.switch-light .switch-label:before {
	right: inherit;
	left: 11px;
}
.switch-light .switch-handle {
	top: 6px;
	left: 72px;
	background: #dadada;
	width: 22px;
	height: 22px;
	box-shadow: none;
}
.switch-light .switch-handle:before {
	background: #eceeef;
}
.switch-light .switch-input:checked ~ .switch-label {
	background: #FFF;
	border-color: #9370DB;
}
.switch-light .switch-input:checked ~ .switch-handle {
	left: 72px;
	box-shadow: none;
	background: #9370DB
}
.switch-light .switch-input:checked ~ .switch-handle:before {
	background: rgba(255,255,255,0.7);
}