/*  -------------------------------------------
    CSS RESET
    ------------------------------------------- */    
    body,menu,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
      margin:0; padding:0; 
      }
      
    table { border-collapse:collapse; border-spacing:0; }
    fieldset,img { border:0; }
    address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
    em { font-style: italic; }
    strong { font-weight: bold; }
    ol,ul { list-style:none; }
    caption,th { text-align:left; }
    h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
    q:before,q:after { content:''; }
    abbr,acronym { border:0; }
    a { color: #ce1b1b; text-decoration: none; }
    a:hover { color: #000; border-bottom: 1px solid #f00; }
    a:active  {text-decoration: none; border-bottom: 1px solid #ebebeb}
    /*a:visited {text-decoration: none; border-bottom: 1px solid #ebebeb}*/

    
    
    /* Keep our sup's in line */
    sup,
    sub {
    	height: 0;
    	line-height: 1;
    	vertical-align: baseline;
    	position: relative;
      }
    
    sup {
    	bottom: 1ex;
      }


/*  GENERAL
    ------------------------------------------- */
    
      
    body { 
      background-image: url('../images/paper_tile.gif'); 
      background-repeat: repeat;
      font-size: 100%;  
      }
      
      /* SERIF / SANS */
      body.georgia    { font-family: Georgia; }
      body.helvetica  { font-family: Helvetica; }

      /* CONTRAST */
      /*body.high { background-color: #ffffff; color: #444; }
      body.low  { background-color: #e5e0d4; color: #333; }*/

      /* JUSTIFICATION */
      body.justified .body_text p  { text-align: justify; z-index: 100;}
      body.ragged .body_text p     { text-align: left; z-index: 100;}

        /* Don't justify the closing fleuron */
        body.ragged p.closing, body.justified p.closing { text-align: center !important; }

    
    #content_container, #menu_wrap { margin: 0 auto; border: 0px; }
      #menu_wrap { width: 600px; top:0; }


    /* FIRST PARAGRAPH */
    .fp               { text-indent: 0em !important; }
    .fp:first-letter  { float: left; display: block; }
    
      /*  Potentially more effecient (no class necessary) 
          markup for first paragraph drop caps styling      */
      /*
      .body_text p:first-child { text-index: 0em !important; }
      .body_text p:first-child:first-letter { float: left; display: inline; }
      */
    
    /* TITLE BLOCK */ 
    .alert {display: inline; float: left; width: 100%; margin-left: -.75em; margin-top: 10px; margin-bottom: 20px; text-align: center; color: #999; font-size: .5em; text-transform:uppercase; text-shadow:1px 1px 1px #fcfcfc; }

    
    #title_block { text-align: center !important; }
      .fleuron                  { text-indent: 0 !important; }

    
    /* SMALL CAPS */
    /* We do small caps this way because not every font has real small caps — and the computed
       small caps is often too thin. Tnis is a hack and eventually, once opentype fonts and typekit
       become more pervasive, we'll be able to drop back to using real, CSS defined small caps. 
       Can't wait! For now, this: */
    .sc { font-size: .9em; text-transform: uppercase; letter-spacing: .1em; }
    
    p.date_added				{ text-align: center; font-weight: normal; font-size: .7em; color:#999;}
    
    .header_center { 
      text-align: center; 
      padding-top: 2em; 
      font-family: Helvetica; 
      font-size: .7em; 
      text-transform: uppercase; 
      color: #999; 
      letter-spacing: 1px; 
      text-shadow: 1px 1px 1px #efefef; 
      padding-bottom: 2em; 
      border-bottom: 1px solid #cfcfcf; 
      }
      
      .header_center a { color: #999; text-decoration: none; }
      
    .footnotes { font-size: .7em; border-top: 1px dotted #ccc; padding-top: 2em; margin-top: 2em; color: #666; font-family: Helvetica; }
      .footnotes li { margin-bottom: 1em; }
        .footnotes li p:first-child { text-indent: 0; }
        .footnotes li p:first-child:before { content: '¶ '; font-size: .8em; float: left; width: 10px; margin-left: 0px; }
      .footnotes li:last-child { margin-bottom: 0px; } 
      .footnotes h1 { text-transform: uppercase; font-family: Georgia; display: inline; font-size: .8em; letter-spacing: 1px; font-weight: normal; margin-bottom: 0px; padding-bottom: 0px; line-height: 1em; }
      .footnotes h4 { font-weight: bold; float: left; display: inline; }
      
      .notes { font-size: .7em; border-top: 1px dotted #ccc;}
      
    .toptitle {color: #999;}
    
    .footer_center { 
      text-align: center;
      font-family: Georgia;
      font-style: italic;
      text-shadow: 1px 1px 1px #efefef; 
      font-size: 12px;
      padding-top: 2em;
      margin-bottom: 2em;
      color: #999;
      margin-top: 8em; 
      border-top: 1px solid #cfcfcf; 
      }

    p.closing { 
      text-align: center; 
      margin-top: 1em; 
      text-indent: 0px !important; 
      font-size: 1.6em;
      color: #777;
      text-shadow: 1px 1px 1px #efefef; 
      }
      
    img.shadow { 
    background-color: #ffffff;
    padding: 8px;
    color: #fff;
    -webkit-box-shadow: 0px 5px 7px #626262;
    -moz-box-shadow: 0px 5px 7px #626262;
    box-shadow: 0px 5px 7px #626262;
    max-width: 95%;
    /*display:block;
    margin:0 auto;
    text-align:center; */
    margin-top: .3em;
    margin-bottom: 1em;
    }
    
    h3.date_added { font-weight: normal; font-style:normal; font-size: 0.7em; color:#999; text-transform: uppercase; }
    
    #disqus_thread {padding-top: 2em; 
      border-top: 1px solid #cfcfcf;}
      
      .author {font-size: .7em;}
      .author_link {color: #999; text-decoration: none;}
      
    h2.toc {font-size: 1em; font-style:normal; color: #000; text-decoration: none; text-align: left; text-transform: uppercase;}
    
    h3.toc {font-size: 1em; font-style:italic; color: #363535; text-decoration: none; text-align: left; text-transform: none; margin-top: .5em; margin-bottom: .5em;}
    
    .tocHover{display: block;}
   
   
    .listing {display:block;
    border-bottom-color: #CCCCCC;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    padding-bottom: 15px;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 15px;}
    
    h3.date_added_toc { font-weight: normal; font-style:normal; text-align: left; font-size: 0.6em; color:#999; text-transform: uppercase; }
    
    h4.toc {font-size: .9em; font-style: italic; color: #747272; text-decoration: none; text-align: left; text-transform: none; margin-top: .5em; margin-bottom: .5em;}
   
   
/*Slideout menu styling*/
	#menutext {display: none;
		width: 70%;
		margin: 0 auto;
		text-align: center;
		font-family: Georgia;
		font-size: .7em;
		text-transform: uppercase;
		text-decoration: none;
		background-color: #ffffff;
		padding-top: .8em;
		padding-bottom: 1em;
		-webkit-box-shadow: 0px 3px 5px #626262;
		-moz-box-shadow: 0px 3px 5px #626262;
		box-shadow: 0px 3px 5px #626262;
		max-width: 95%;
	}
	
	.menulist a {color: #5f5757; 
	}
	
	li.menulist  {padding: .5em;}
	
	#slideout {
	text-align: center;
	margin-bottom: 1em;
	}
	
	#slideout img {text-decoration: none;
	width: 10%;
	}
/*End slideout menu styling*/


	#about p {font-size: .7em; text-indent: 0em; margin-top: 1.5em;}
    
    
/*  Computer / non-tablet specifications 
    ------------------------------------------- */
    @media screen and (min-device-width: 1025px) {
      
      .header_center                  { text-align: center !important; margin-top: 10px; font-size: 1em; }

      /*body {background-image: url("../images/paper_tile.gif"); 
      background-repeat: repeat;}*/

      h3                      { font-weight: normal; font-style: italic; font-size: 1.3em;}
      h2                      { font-size: 1.5em; letter-spacing: 1px; text-transform: uppercase; }
      
      


      .knee                    { width: 560px; } 
      .georgia .knee           { font-size: 1em; }
      .georgia .knee p         { text-indent: 1.5em; line-height: 1.45em; margin-top: .6em; margin-bottom: 1em;}
      .helvetica .knee         { font-size: 1.7em; }
      .helvetica .knee p       { text-indent: 1.5em; line-height: 1.35em; }
      .knee #title_block       { margin-bottom: 3em; margin-top: 3em; }
      .knee #title_block img   { margin-top: 1.8em; width: 300px; }
      .georgia .knee .fp:first-letter   { font-size: 3.5em; line-height: .95em; margin-top: -.02em; margin-right: .15em; }
      .helvetica .knee .fp:first-letter { font-size: 3.1em; line-height: .95em; margin-right: .15em; }
      .knee blockquote         { margin-top: 1.5em; margin-bottom: 1.5em; margin-left: 1.5em; margin-right: 1.5em; font-style: italic; color: #666; line-height: 1.45em;}
      
.alert {display: inline; float: left; width: 100%; margin-left: -.75em; margin-top: 10px; margin-bottom: 20px; text-align: center; color: #999; font-size: .5em; text-transform:uppercase; text-shadow:1px 1px 1px #fcfcfc; }

        h3.date_added { font-weight: normal; font-style:normal; font-size: 0.6em; color:#999; text-transform: uppercase; }
        
        .notes { font-size: .72em; border-top: 1px dotted #ccc;}
        
    }
    
    
    
/*  Portrait Specifications tablet
    ------------------------------------------- */
    @media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      
      body {background-image: url("../images/paper_tile.gif"); 
      background-repeat: repeat;}


      .toptitle {color: #999; font-size: .5em;}
      
      .header_center     {text-align: center !important; margin-top: 10px; font-size: .8em; }

      p						{font-size: .7em;}


      .knee                    { width: 580px; } 
      .georgia .knee           { font-size: 2.0em; }
      .georgia .knee p         { text-indent: 1.5em; line-height: 1.45em; margin-top: .5em; margin-bottom: .5em; }
      .helvetica .knee         { font-size: 1.9em; }
      .helvetica .knee p       { text-indent: 1.5em; line-height: 1.35em; }
      .knee h2                 { line-height: 1.2em; font-size: 1.5em; letter-spacing: .1em; }
      .knee h3                 { font-weight: normal; font-size: 1.2em; font-style: italic; }
      .knee #title_block       { margin-bottom: 1.5em; margin-top: 2em; }
      .knee #title_block img   { margin-top: .7em; width: 250px; }
      .knee blockquote         { margin-top: 1.5em; margin-bottom: 1.5em; margin-left: 1.5em; margin-right: 1.5em; font-size: .8em; font-style: italic; color: #666; }
      .georgia .knee .fp:first-letter   { font-size: 3.4em; line-height: .95em; margin-top: -.02em; margin-right: .15em; }
      .helvetica .knee .fp:first-letter { font-size: 3.05em; line-height: .95em; margin-right: .15em; }

.alert {float: left; width: 100%; margin-top: 10px; margin-left: -.75em; margin-bottom: 20px; text-align: center; color: #999; font-size: .3em; text-transform:uppercase; text-shadow:1px 1px 1px #fcfcfc;}

    h3.date_added { font-weight: normal; font-style:normal; font-size: 0.4em; color:#999; text-transform: uppercase; }
    
    /* TOC styles*/
    h2.toc {font-size: .7em; font-style:normal; color: #000; text-decoration: none; text-align: left; text-transform: uppercase;}
    
    h3.toc {font-size: .6em; font-style:italic; color: #363535; text-decoration: none; text-align: left; text-transform: none; margin-top: .5em; margin-bottom: .5em;}
    
    .tocHover{display: block;}
   
   
    .listing {display:block;
    border-bottom-color: #CCCCCC;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    padding-bottom: 15px;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 15px;}
    
    h3.date_added_toc { font-weight: normal; font-style:normal; text-align: left; font-size: 0.35em; color:#999; text-transform: uppercase; }
    
    h4.toc {font-size: .55em; font-style: italic; color: #747272; text-decoration: none; text-align: left; text-transform: none; margin-top: .5em; margin-bottom: .5em;}
    
    .notes { font-size: .4em; border-top: 1px dotted #ccc;}
    
/*Slideout menu styling changes for tablet*/
	#menutext {
		font-size: .5em;
		padding-top: .7em;
		padding-bottom: .9em;
		max-width: 95%;
	}	
/*End slideout menu styling changes for tablet*/
    
    #about p {font-size: .5em; text-indent: 0em; margin-top: 1.5em;}
    
    .author {font-size: .5em;}
    
    
    
    }


/*  Landscape Specifications tablet
    ------------------------------------------- */
    @media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {

      body {background-image: url("../images/paper_tile.gif"); 
      background-repeat: repeat;}

      .toptitle {color: #999; font-size: .5em;}
      
      .header_center     {text-align: center !important; margin-top: 10px; font-size: .8em; }
      
      
      p						{font-size: .7em;}

      .knee                    { width: 660px; } 
      .georgia .knee           { font-size: 2.0em; }
      .georgia .knee p         { text-indent: 1.5em; line-height: 1.45em; margin-top: .5em; margin-bottom: .5em; }
      .helvetica .knee         { font-size: 1.9em; }
      .helvetica .knee p       { text-indent: 1.5em; line-height: 1.3em; }
      .knee h2                 { line-height: 1.4em; letter-spacing: .1em; font-size: 1.5em; }
      .knee h3                 { line-height: 1.2em; font-style: italic; font-weight: normal; font-size: 1.2em;}
      .knee #title_block       { margin-bottom: 1.5em; margin-top: 2em; }
      .knee #title_block img   { margin-top: 1.2em; width: 250px; }
      .knee .body              { margin-bottom: 9em; }
      .knee blockquote         { margin-top: 1.5em; margin-bottom: 1.5em; margin-left: 1.5em; margin-right: 1.5em; font-size: .8em; font-style: italic; color: #666; }
      .georgia .knee .fp:first-letter   { font-size: 3.3em; line-height: .95em; margin-top: -.02em; margin-right: .15em; }
      .helvetica .knee .fp:first-letter { font-size: 3em; line-height: .95em; margin-right: .15em; }

.alert {display: inline; float: left; width: 100%; margin-left: -.75em; margin-top: 10px; margin-bottom: 20px; text-align: center; color: #999; font-size: .3em; text-transform:uppercase; text-shadow:1px 1px 1px #fcfcfc; text-indent: 0;}

        h3.date_added { font-weight: normal; font-style:normal; font-size: 0.3em; color:#999; text-transform: uppercase; }
        
            /* TOC styles*/
    h2.toc {font-size: .7em; font-style:normal; color: #000; text-decoration: none; text-align: left; text-transform: uppercase;}
    
    h3.toc {font-size: .6em; font-style:italic; color: #363535; text-decoration: none; text-align: left; text-transform: none; margin-top: .5em; margin-bottom: .5em;}
    
    .tocHover{display: block;}
   
   
    .listing {display:block;
    border-bottom-color: #CCCCCC;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    padding-bottom: 15px;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 15px;}
    
    h3.date_added_toc { font-weight: normal; font-style:normal; text-align: left; font-size: 0.35em; color:#999; text-transform: uppercase; }
    
    h4.toc {font-size: .55em; font-style: italic; color: #747272; text-decoration: none; text-align: left; text-transform: none; margin-top: .5em; margin-bottom: .5em;}
    
    .notes { font-size: .4em; border-top: 1px dotted #ccc;}

/*Slideout menu styling changes for tablet*/
	#menutext {
		font-size: .5em;
		padding-top: .7em;
		padding-bottom: .9em;
		max-width: 95%;
	}	
/*End slideout menu styling changes for tablet*/     

	#about p {font-size: .5em; text-indent: 0em; margin-top: 1.5em;}  
	
	.author {font-size: .5em;} 
	
	
        
    }
    


/*  Portrait Specifications iPhone
    ------------------------------------------- */
    @media screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation:portrait) {

      body {background-image: url("../images/paper_tile.gif"); 
      background-repeat: repeat;}

      .toptitle {color: #999; font-size: .5em;}
      
      .header_center     {text-align: center !important; margin-top: 10px; font-size: .6em; }


      p						{font-size: .5em;}


      .knee                    { width: 300px; } 
      .georgia .knee           { font-size: 2.0em; }
      .georgia .knee p         { text-indent: 1.5em; line-height: 1.4em; margin-top: .5em; margin-bottom: .5em; }
      .helvetica .knee         { font-size: 1.9em; }
      .helvetica .knee p       { text-indent: 1.5em; line-height: 1.35em; }
      .knee h2                 { line-height: 1.2em; font-size: 1em; letter-spacing: .1em; }
      .knee h3                 { font-weight: normal; font-size: .9em; font-style: italic; }
      .knee #title_block       { margin-bottom: .8em; margin-top: 1em; }
      .knee #title_block img   { margin-top: .7em; width: 250px; }
      .knee blockquote         { margin-top: 1.5em; margin-bottom: 1.5em; margin-left: 1.5em; margin-right: 1.5em; font-size: .6em; font-style: italic; color: #666; }
      .georgia .knee .fp:first-letter   { font-size: 3.4em; line-height: .95em; margin-top: -.02em; margin-right: .15em; }
      .helvetica .knee .fp:first-letter { font-size: 3.05em; line-height: .95em; margin-right: .15em; }

.alert {display: inline; float: left; width: 100%; margin-left: -.75em; margin-top: 10px; margin-bottom: 20px; text-align: center; color: #999; font-size: .25em; text-transform:uppercase; text-shadow:1px 1px 1px #fcfcfc;}

        h3.date_added { font-weight: normal; font-style:normal; font-size: 0.4em; color:#999; text-transform: uppercase; }
        
      .author {font-size: .4em;}
      .author_link {color: #999; text-decoration: none;}
      
    /* TOC styles*/
    h2.toc {font-size: .5em; font-style:normal; color: #000; text-decoration: none; text-align: left; text-transform: uppercase;}
    
    h3.toc {font-size: .48em; font-style:italic; color: #363535; text-decoration: none; text-align: left; text-transform: none; margin-top: .5em; margin-bottom: .5em;}
    
    .tocHover{display: block;}
   
   
    .listing {display:block;
    border-bottom-color: #CCCCCC;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    padding-bottom: 15px;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 15px;}
    
    h3.date_added_toc { font-weight: normal; font-style:normal; text-align: left; font-size: 0.35em; color:#999; text-transform: uppercase; }
    
    h4.toc {font-size: .48em; font-style: italic; color: #747272; text-decoration: none; text-align: left; text-transform: none; margin-top: .5em; margin-bottom: .5em;}
    
    .notes { font-size: .4em; border-top: 1px dotted #ccc;}


/*Slideout menu styling*/
	#menutext {
		font-size: .3em;
		padding-top: .7em;
		padding-bottom: .9em;
	}
	
	li.menulist  {padding: .5em;}
	
	#slideout {
	margin-top: -.47em;
	margin-bottom: .5em;
	}
	
	#slideout img {text-decoration: none;
	width: 10%;
	}
/*End slideout menu styling*/

	#about p {font-size: .4em; text-indent: 0em; margin-top: 1.5em;}
	
	
      
    }


/*  landscape Specifications iPhone
    ------------------------------------------- */
    @media screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation:landscape) {

      body {background-image: url("../images/paper_tile.gif"); 
      background-repeat: repeat;}

      .toptitle {color: #999; font-size: .5em;}
      
      .header_center     {text-align: center !important; margin-top: 10px; font-size: .6em; }

      p						{font-size: .5em;}


      .knee                    { width: 460px; } 
      .georgia .knee           { font-size: 2.0em; }
      .georgia .knee p         { text-indent: 1.5em; line-height: 1.4em; margin-top: .5em; margin-bottom: .5em; }
      .helvetica .knee         { font-size: 1.9em; }
      .helvetica .knee p       { text-indent: 1.5em; line-height: 1.35em; }
      .knee h2                 { line-height: 1.2em; font-size: 1.2em; letter-spacing: .1em; }
      .knee h3                 { font-weight: normal; font-size: 1em; font-style: italic; }
      .knee #title_block       { margin-bottom: .8em; margin-top: 1em; }
      .knee #title_block img   { margin-top: .7em; width: 250px; }
      .knee blockquote         { margin-top: 1.5em; margin-bottom: 1.5em; margin-left: 1.5em; margin-right: 1.5em; font-size: .6em; font-style: italic; color: #666; }
      .georgia .knee .fp:first-letter   { font-size: 3.4em; line-height: .95em; margin-top: -.02em; margin-right: .15em; }
      .helvetica .knee .fp:first-letter { font-size: 3.05em; line-height: .95em; margin-right: .15em; }

.alert {display: inline; float: left; width: 100%; margin-left: -.75em; margin-top: 10px; margin-bottom: 20px; text-align: center; color: #999; font-size: .25em; text-transform:uppercase; text-shadow:1px 1px 1px #fcfcfc;}

        h3.date_added { font-weight: normal; font-style:normal; font-size: 0.3em; color:#999; text-transform: uppercase; }
        
      .author {font-size: .4em;}
      .author_link {color: #999; text-decoration: none;}
      
    /* TOC styles*/
    h2.toc {font-size: .5em; font-style:normal; color: #000; text-decoration: none; text-align: left; text-transform: uppercase;}
    
    h3.toc {font-size: .4em; font-style:italic; color: #363535; text-decoration: none; text-align: left; text-transform: none; margin-top: .5em; margin-bottom: .5em;}
    
    .tocHover{display: block;}
   
   
    .listing {display:block;
    border-bottom-color: #CCCCCC;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    padding-bottom: 15px;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 15px;}
    
    h3.date_added_toc { font-weight: normal; font-style:normal; text-align: left; font-size: 0.25em; color:#999; text-transform: uppercase; }
    
    h4.toc {font-size: .35em; font-style: italic; color: #747272; text-decoration: none; text-align: left; text-transform: none; margin-top: .5em; margin-bottom: .5em;}
    
    .notes { font-size: .3em; border-top: 1px dotted #ccc;}

      
/*Slideout menu styling*/
	#menutext {
		font-size: .2em;
		padding-top: .7em;
		padding-bottom: .9em;
	}
	
	li.menulist  {padding: .5em;}
	
	#slideout {
	margin-top: -.21em;
	margin-bottom: .5em;
	}
	
	#slideout img {text-decoration: none;
	width: 10%;
	}
/*End slideout menu styling*/  

	#about p {font-size: .4em; text-indent: 0em; margin-top: 1.5em;}    
	
	
      
    }


/*  -------------------------------------------
I used Bibliotype as a starting point but heavily modified for my islam from inside website - removed or changed  features as well as added my own so if you want the original bibliotype go check out their website */

/*   ------------------------------------------  */
/*                 Bibliotype is            */
/*             copyright; 2011, Craig Mod */
 /*               http://craigmod.com  */
 /*              http://bibliotype.org  */
  
 /*            Released under MIT LICENSE  */
 
 /*All Islam From Inside content is copyright of Irshaad Hussain*/