/* This is the home_page.css */
/*   */


/* I need to change #header h1 if necessary  */
#header h1 {
	padding-left:32%;
	text-align:right;
	color: white;     /* chage the color of the IAWV text  */
	position: absolute;
	top: 64px;            /* this property is ONLY for Mobile  */ 
	z-index: -1;
	font-size: 19px;    /* this property is ONLY for Mobile  */
	
}

#toplinks .toplinks-pagelink {        /* this property is ONLY for Mobile  */
	display:none;           /* this is to make sure that WV Majid or Schedule a Visit donot appear in the Mobile  */
	color: blue;
	text-decoration: none;
}


#toplinks a {
	color: blue;
	text-decoration: none;
}

/* This is for Daily Hadith portion  */
#dailyhadith a {            
	text-decoration: none;
}

/* This is for Daily quran portion  */
#dailyquran a {            
	text-decoration: none;
}


#logo {
	width: 15%;
	position:absolute;
	max-width: 150px;
	min-width: 100px;
	top:15px;
	left:15px;
	
	}

/* I need to change #bannerdiv if necessary  */

#bannerdiv {
	width: 100%;
	/* height: 100%; */
	position:absolute;
	/*top:15px;
	left:15px;
	overflow: hidden; */
	z-index: -10;
}	
	
#annoucementtextdiv {
        position:absolute;
	z-index: 0;
        left: 20%;
        top: 370px;
}

#annoucementtextdiv a {            
	text-decoration: none;
        color: khaki;
}


#homepagemain6 {
    display: none;
}
	
#header {
	/* background-color: #CCC; */  /* restore this line if the banner area donot work */
	padding: 0px;  /* original was 15px */
	height:400px;  /* I need to make sure that the same height is used at <img name="bannerslide" src="img/image1.jpg" width="100%" height="400px">  */
}

#leftdiv {
	/* float: left; */      /* original property; NOT of mobile */
	display:none;
	width: 22.5%;
	margin: 0 0 0 2.5%;
	outline: 2px dashed #dd0009;
}
#main {
	/* float: left; */      /* original property; NOT of mobile */
	width: 100%;            /* original property; 45% */    
	margin: 0 2.5%;
/*	outline: 2px dashed #0053ae; NOT of mobile*/
	 }
	 
#rightdiv {
	/* float: left; */      /* original property; NOT of mobile */
	width: 100%;            /* original property; 22.5% */
	margin: 0 2.5% 0 0;
/*	outline: 2px dashed #009554; NOT of mobile*/
}

#prayertimecontainer p {
	padding: 0px 0px 0px 0px;
	margin:2px 2px 0px 0px;
	
}

#prayertimeheader {    /* this is to style the p tag for the text "Prayer Time Fasting Time" */
	color:red; 
	background:green;
}

#prayertimedate {    /* this is to style the p tag for the date, day and year */
	font-size:11px;
	color:green; 
	background:none;
}

#prayertable {    /* this is to style the division  */
	color:green; 
	background:none;
	
}

#prayertable table, tr, th, td {    /* this is to style the table itself  */
	border: 1px solid red;
	border-collapse:collapse;
	padding:0px;
	
}

#prayertable th {    /* this is to style the table heading itself  */
	font-size:11px;
	
}

#footer {
	clear: left; /* starts the footer below the floated content */
	padding: 15px;
/*	background: #CCC;*/
}

body {
	font-family: verdana, sans-serif; 
	/* font-size: small; */
	margin: 0;
	padding: 0;
}




/* Try to see if I can align #myTopnav to right   */
#myTopnav {
    z-index: 5;
  /* padding-left: 15%; */
  

}

/* Add a black background color to the top navigation */
.topnav {
  	
  /* background-color: #333;  */  /* This is the original line */
  background-color:none; 
  overflow: hidden;
  padding-left: 45%;  /* Towhid - This is for the menu bar to starting point */
  /* position: relative; */  /* to make sure the menu bar stay at the position top:200px */
  /* top: 200px; */ /* chage it if necessary */
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Add an active class to highlight the current page */
.active {
  background-color: #4CAF50;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 17px; 
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  /* background-color: inherit; */  /* This is the original line */
  background-color: cadetblue;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 550px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
	display: none;
  }
  .topnav a.icon {
	float: right;
	display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 550px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
	position: absolute;
	right: 0;
	top: 0;
  }
  .topnav.responsive a {
	float: none;
	display: block;
	text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
	display: block;
	width: 100%;
	text-align: left;
  }
}