/*
 * Style tweaks
 * --------------------------------------------------
 */
html,
body { overflow-x: hidden; /* Prevent scroll on narrow devices */}
body {padding-top: 54px; background-color:white}
footer { padding: 30px 0;}
/* my css for background */
.jumbotron{padding:0.1rem 1rem;margin-bottom:0rem;background-color: white;border-radius:.3rem}
@media (min-width:576px){.jumbotron{padding:1rem 2rem}}
/* my css */
   /* banner */
.banner{color:  #FFDFB0; background-color:#258;}
.banner-text{}
.banner-images{  }
.banner a{color: white; text-decoration:none; font-size:21px;text-align:center}
/* top nav */
 .bg-light{ background-color:#258}
.bg-light a{color:navy}	 	 
	.googlesearch{ width:200px; visibility:hidden}
		
	
	
	.nav-donate {color: #FFFF99; text-decoration:none}	
	.nav-link-donate {color:#FFFF99;text-decoration:none }
	
	
	.navbar-light .navbar-nav .nav-link{color: rgb(255, 255, 255)}
.navbar-light .navbar-nav .nav-link:focus,.navbar-light .navbar-nav .nav-link:hover{color: rgb(255, 153, 0)}	
.navbar-light .navbar-toggler{border-color: rgb(0, 51, 0);background-color: #FFFFFF;}		
 /* footer */	
footer { }
footer a{color: #303030;}
footer p{margin:0 12px;}
p.copy{ text-align:center}
.footer-extra {  min-height:40px; background-image: url('../footer/images/footer.jpg')}
/* Side Nav */
#sidebar{ overflow: hidden; background-color:white}
.nav-box{color: #008000;font-weight:bold; background-color:white } 
.navclear{}  
 #box-contact { border:1px solid  silver; background-color:#e68200}
 #box-pages, #box-topics, #box-quick, #box-stories,#box-o-religions { border:1px solid silver; background-color:#258}
 
#contact, #pages, #topics, #quick, #stories,#o-religions {}
#pages-t, #topics-t, #quick-t, #stories-t,#o-religions-t {font-size: 15px; font-weight:bold; color:#FFFFCC  }

#contact a, #pages a, #topics a, #quick a, #stories a,#o-religions a,#contact a:visited, 
#pages a:visited, #topics a:visited, #quick a:visited, #stories a:visited,#o-religions a:visited  {color: white; }
  
#contact a:hover { border-bottom:1px solid yellow;color: green;}
 #pages a:hover, #topics a:hover, #quick a:hover,#stories a:hover,#o-religions a:hover
 { border-bottom:1px solid   yellow; color:  lime;}

/* ===================
   side Nav list
====================== */
dl { margin: 0;  padding: 0;}
dt { margin:0;  padding:0.4em;  text-align:center; }
dd { margin:0;  padding:0;  text-align:left;}
  
 .side-navlist{ padding:1px;}
#box-contact 
{ border-radius: 1em; box-shadow:rgba(0,0,0,0.1)1px 1px;   padding-left: 11px; padding-right: 11px; padding-bottom:9px}
 
 #box-pages, #box-topics, #box-quick, #box-stories,#box-o-religions
{ border-radius: 1em; box-shadow:rgba(0,0,0,0.1)1px 1px;    padding-left: 11px; padding-right: 11px; padding-bottom:9px}
 
/* font sizes */

h1{font-size:2em;margin:.67em 0}
h1.sisters{ color:#FF66CC}
 p, pre,  figure, figcaption, table, fieldset {}
p{ color: black; font-family: 'Open Sans',sans-serif; padding :0 0 0px 2px;}  
p.annhead{font-weight:bold; color: yellow; }
blockquoute.ayat {  font-family: 'Open Sans',sans-serif; padding :0 0 0px 2px;font-weight:bold; color: #008000;}
 blockquote.hadith { font-family: 'Open Sans',sans-serif; padding :0 0 0px 2px;font-weight:bold; color: #008000;} 
blockquote{  font-family: 'Open Sans',sans-serif; padding :0 0 0px 2px;font-weight:bold;color: #008000;}
a { color: navy;font-family:'Open Sans',sans-serif; font-weight:bold; text-decoration:none;}
a:hover,a:focus {color:#825; border-bottom:1px solid #c9a3a9; text-decoration:underline}
   
h1.header{ letter-spacing:-1px;}
h1.c-title,h1.contenttitle{ color: #008000; text-align:center; font-weight: bold; }
h2.c-subtitle{  font-weight: bold; letter-spacing:-1px; color: #008000; text-align:left;}
p.ayat{font-size:1.077em; font-family: 'Open Sans',sans-serif; padding :0 0 0px 2px; font-weight:bold; color: #008000}
p.hadith{font-size:1.077em; font-family: 'Open Sans',sans-serif; padding :0 0 0px 2px;font-weight:bold; color: #008000;}
   
/* end of my css */


/*
 * Off Canvas
 * --------------------------------------------------
 */
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all .25s ease-out;
         -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
  }

  .row-offcanvas-right {
    right: 0;
  }

  .row-offcanvas-left {
    left: 0;
  }

  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -100%; /* 12 columns */
  }

  .row-offcanvas-right.active
  .sidebar-offcanvas {
    right: -50%; /* 6 columns */
  }

  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -100%; /* 12 columns */
  }

  .row-offcanvas-left.active
  .sidebar-offcanvas {
    left: -50%; /* 6 columns */
  }

  .row-offcanvas-right.active {
    right: 50%; /* 6 columns */
  }

  .row-offcanvas-left.active {
    left: 50%; /* 6 columns */
  }

  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 50%; /* 6 columns */
  }
}