@charset "UTF-8";
/*** fRJc CSS DOC ***/
	

		BODY {
			background-image:  url('../images/bkgd.jpg');
			background-repeat: attribute; 
			background-attachment: fixed;
			margin-top: 0px;
			}


/*** IDS  ***/

		#encase {
			width: 1080px;
			height: 1750px;
			margin: 0 auto;
			text-align: center;
			position: relative;
			line-height: 10px;
			top: 0px;
			}

    	#dencase {
			width: 1080px;
			height: 1820px;
			margin: 0 auto;
			text-align: center;
			position: relative;
			line-height: 10px;
			top: 0px;
			}
		
		#bannerad	{
			float: none;
			width: 670px;
			height: 52px;
			position: absolute;
			top: 0px;
			left: 487px;
			display: block;
			clear: both;
			text-align: center;
			line-height: auto;
			z-index: 2;
			}

		#booknote	{
			float: none;
			width: 670px;
			height: 52px;
			position: absolute;
			top: 0px;
			left: 478px;
			display: block;
			clear: both;
			text-align: center;
			line-height: auto;
			z-index: 2;
			}

		#header {
			text-align: left;
			width: 960px;
			height: 132px;
			position: absolute;
			display: block;
			left: 41px;
			top: 35px;
			clear: both;
			line-height: 10px;
			}

		#official	{
			float: none;
			width: 245px;
			height: 52px;
			position: absolute;
			top: 145px;
			left: 101px;
			display: block;
			clear: both;
			text-align: left;
			line-height: auto;
			}

		#messages	{
			float: none;
			width: 670px;
			height: 52px;
			position: absolute;
			top: 200px;
			left: 205px;
			display: block;
			clear: both;
			text-align: left;
			line-height: auto;
			}

		#welcome	{
			float: none;
			width: 960px;
			height: 421px;
			position: absolute;
			top: 159px;
			left: 30px;
			display: block;
			clear: both;
			text-align: left;
			line-height: 10px;
			z-index: -1;
			}

		#main	{
			float: none;
			width: 505px;
			height: 296px;
			position: absolute;
			top: 320px;
			left: 129px;
			display: block;
			clear: both;
			text-align: left;
			line-height: 100%;
			}

		#psidoc	{
			float: none;
			max-width: 760px;
			height: auto;
			position: absolute;
			top: 560px;
			left: 129px;
			display: block;
			clear: both;
			line-height: 100%;
			}

		#note	{
			float: none;
			width: 200px;
			height: 100px;
			position: absolute;
			top: 490px;
			left: 380px;
			display: block;
			clear: both;
			text-align: left;
			line-height: 100%;
			}

		#tokayerimg	{
			float: none;
			width: 505px;
			height: 296px;
			position: absolute;
			top: 320px;
			left: 660px;
			display: block;
			clear: both;
			text-align: left;
			line-height: 100%;
			}

		#jewisheyes{
			float: none;
			width: 551px;
			height: 31px;
			position: absolute;
			top: 912px;
			left: 252px;
			display: block;
			clear: both;
			text-align: left;
			line-height: 10px;
			}

		#frjc{
			float: none;
			width: 551px;
			height: 31px;
			position: absolute;
			top: 120px;
			left: 525px;
			display: block;
			clear: both;
			text-align: left;
			line-height: 10px;
			}


    	#mtext3	{
			float: none;
			width: 960px;
			height: 150px;
			position: absolute;
			top: 1500px;
			left: 21px;
			display: block;
			clear: both;
			text-align: left;
			line-height: 10px;
			z-index: 4;
			}
/*** ORDER FORM ***/

		#messages2	{
			float: none;
			width: 470px;
			height: 52px;
			position: absolute;
			top: 190px;
			left: 290px;
			display: block;
			clear: both;
			text-align: left;
			line-height: auto;
			}

		#messages3	{
			float: none;
			width: 470px;
			height: 52px;
			position: absolute;
			top: 965px;
			left: 290px;
			display: block;
			clear: both;
			text-align: left;
			line-height: auto;
			z-index: 10;
			}

		#bookart	{
			float: none;
			width: 418px;
			height: 300px;
			position: absolute;
			top: 240px;
			left: 150px;
			display: block;
			clear: both;
			text-align: left;
			line-height: auto;
			}

		#authors	{
			float: none;
			width: 360px;
			height: 300px;
			position: absolute;
			top: 240px;
			left: 600px;
			display: block;
			clear: both;
			text-align: left;
			line-height: 110%;
			text-wrap: normal;
			}

		#headshots	{
			float: none;
			width: 66px;
			height: 75px;
			position: absolute;
			top: 240px;
			left: 600px;
			display: block;
			clear: both;
			text-align: left;
			line-height: 110%;
			text-wrap: normal;
			}

		#bookstory	{
			float: none;
			width: 760px;
			height: 400px;
			position: absolute;
			top: 550px;
			left: 150px;
			display: block;
			clear: both;
			text-align: left;
			line-height: 110%;
			text-wrap: normal;
			}

		#jewisheyes2{
			float: none;
			width: 551px;
			height: 31px;
			position: absolute;
			top: 1013px;
			left: 252px;
			display: block;
			clear: both;
			text-align: left;
			line-height: 10px;
			}

		#frjc2{
			float: none;
			width: 551px;
			height: 31px;
			position: absolute;
			top: 995px;
			left: 525px;
			display: block;
			clear: both;
			text-align: left;
			line-height: 10px;
			}

		#mtext4	{
			float: none;
			width: 960px;
			height: 150px;
			position: absolute;
			top: 1073px;
			left: 41px;
			display: block;
			clear: both;
			text-align: left;
			line-height: 10px;
			z-index: 4;
			}

/*** ABOUT PAGE ***/


		#donatestory	{
			float: none;
			width: 760px;
			height: 400px;
			position: absolute;
			top: 230px;
			left: 129px;
			display: block;
			clear: both;
			text-align: left;
			line-height: 120%;
			text-wrap: normal;
			}

		#messages4	{
			float: none;
			width: 470px;
			height: 52px;
			position: absolute;
			top: 215px;
			left: 198px;
			display: block;
			clear: both;
			text-align: left;
			line-height: auto;
			}

		#messages5	{
			float: none;
			width: 470px;
			height: 52px;
			position: absolute;
			top: 800px;
			left: 220px;
			display: block;
			clear: both;
			text-align: left;
			line-height: auto;
			z-index: 10;
			}

		#frjc3	{
			float: none;
			width: 551px;
			height: 31px;
			position: absolute;
			top: 1295px;
			left: 525px;
			display: block;
			clear: both;
			text-align: left;
			line-height: 10px;
			}

		#mtext5	{
			float: none;
			width: 960px;
			height: 150px;
			position: absolute;
			top: 1600px;
			left: 41px;
			display: block;
			clear: both;
			text-align: left;
			line-height: 10px;
			z-index: 4;
			}

/*** THANKS ***/

		#encase2 {
			width: 1080px;
			height: 580px;
			margin: 0 auto;
			text-align: center;
			position: relative;
			line-height: 10px;
			top: 0px;
			}

		#frjc4	{
			float: none;
			width: 551px;
			height: 31px;
			position: absolute;
			top: 455px;
			left: 525px;
			display: block;
			clear: both;
			text-align: left;
			line-height: 10px;
			}

		#mtext6	{
			float: none;
			width: 960px;
			height: 150px;
			position: absolute;
			top: 460px;
			left: 41px;
			display: block;
			clear: both;
			text-align: left;
			line-height: 10px;
			z-index: 4;
			}



/*** TEXT ***/

		.subhead 	{
			color: #0d3253;
			font-size: 26px;
			font-family: times;
			font-weight: ;
			}

		.quote 	{
			color: #4c4d4f;
			font-size: 20px;
			font-family: times;
			text-align: left;
			line-height: 150%;
			}

		.quoteauthor 	{
			color: #4c4d4f;
			font-size: 14px;
			font-family: times;
			text-align: right;
			}

		.notetip 	{
			color: #4c4d4f;
			font-size: 12px;
			font-family: times;
			text-align: right;
			}

    	.indents 	{
			color: #4c4d4f;
			font-size: 20px;
			font-family: times;
			text-align: left;
			line-height: 170%;
            padding-left: 5%;
			}

		.maintext 	{
			color: #4c4d4f;
			font-size: 20px;
			font-family: times;
			text-align: left;
			line-height: 140%;
			}

		.maintext-h1 	{
			color: #0d3253;
			font-size: 28px;
			font-family: times;
			text-align: center;
			line-height: 140%;
            padding: 0 80px 0;
			}

		.audiotext a{
			color: #0d3253; /* Override default link color */
			font-size: 26px;
			font-family: times;
			text-align: center;
			line-height: 140%;
			padding: 0 40px Important;
			text-decoration: none; /* Remove underline */
			}
			
		.audiotext:hover {
			text-decoration: underline; /* Add underline on hover */
			color: #073695; /* Slightly darker blue for hover */
			}

		.visit 	{
			color: #4c4d4f;
			font-size: 20px;
			font-family: times;
			text-align: center;
			line-height: 10px;
			}

		.main 	{
			color: #000;
			font-size: 18px;
			font-family: times;
			font-weight: ;
			}

		.footnote 	{
			color: #bcbec0;
			font-size: 9px;
			font-family: times;
			font-weight: ;
			}

		.bkd {
			color: #e6e7e8;
			font-size: 10px;
			font-family: times;
			font-weight: ;
			}

		.centered-list {
   		 list-style: none;
  		  padding: 0;
  		  margin: 0;
   		 text-align: center;
		}

		.centered-list li { margin: 6px 0; }

/*** LINKS ***/

		a:link { color: #073695; text-decoration: none; font-size: 22px; font-family: times; }
		a:active { color: #073695; text-decoration: none; font-size: 22px; font-family: times }
		a:visited { color: #073695; text-decoration: none; font-size: 22px; font-family: times }
		a:hover { color: #0d3253; text-decoration: none; font-size: 22px; font-family: times }

		a:link.kongtact { color: #e6e7e8; text-decoration: none; font-size: 10px; font-family: times; }
		a:active.kongtact { color: #e6e7e8; text-decoration: none; font-size: 10px; font-family: times; }
		a:visited.kongtact { color: #e6e7e8; text-decoration: none; font-size: 10px; font-family: times; }
		a:hover.kongtact { color: #44fd04; text-decoration: none; font-size: 10px; font-family: times; }

		a:link.high { color: #bcbec0; text-decoration: none; font-size: 9px; font-family: times; }
		a:active.high { color: #bcbec0; text-decoration: none; font-size: 9px; font-family: times; }
		a:visited.high { color: #bcbec0; text-decoration: none; font-size: 9px; font-family: times; }
		a:hover.high { color: #939598; text-decoration: none; font-size: 9px; font-family: times; }


		a:link.nav { -moz-outline-style: none; }
		a:active.nav { -moz-outline-style: none; }
		a:visited.nav { -moz-outline-style: none; }
		a:hover.nav { -moz-outline-style: none; }
		a:focus.nav { -moz-outline-style: none; }

		a:link.book { color: #073695; text-decoration: none; font-size: 17px; font-family: times }
		a:active.book { color: #073695; text-decoration: none; font-size: 17px; font-family: times }
		a:visited.book { color: #073695; text-decoration: none; font-size: 17px; font-family: times }
		a:hover.book { color: #0d3253; text-decoration: none; font-size: 17px; font-family: times }

		a:link.donate { color: #073695; text-decoration: none; font-size: 28px; font-family: times }
		a:active.donate { color: #073695; text-decoration: none; font-size: 28px; font-family: times }
		a:visited.donate { color: #073695; text-decoration: none; font-size: 28px; font-family: times }
		a:hover.donate { color: #0d3253; text-decoration: none; font-size: 28px; font-family: times }


		a:link.psi { color: #073695; text-decoration: none; font-size: 28px; font-family: times }
		a:active.psi { color: #073695; text-decoration: none; font-size: 28px; font-family: times }
		a:visited.psi { color: #073695; text-decoration: none; font-size: 28px; font-family: times }
		a:hover.psi { color: #0d3253; text-decoration: none; font-size: 28px; font-family: times }

		/* Audio Modal Styles */
		#audioModal {
			display: none; /* Hidden by default */
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
			justify-content: center;
			align-items: center;
			z-index: 1000; /* Ensure it appears above other elements */
		}
		
		#audioModal .modal-content {
			background: #fff;
			padding: 20px;
			border-radius: 8px;
			text-align: center;
			position: relative;
			width: 80%;
			max-width: 500px;
		}
		
		#audioModal .modal-content span {
			position: absolute;
			top: 10px;
			right: 15px;
			cursor: pointer;
			font-size: 20px;
			font-weight: bold;
		}
		
		#audioModal audio {
			width: 100%; /* Make the audio player responsive */
		}