/*Vertical scrollbar - set width and height of a div you want to add a scrollbar to*/
        #vertical-scrollbar-demo {
	height: 320px;
	width: 830px;
	text-align: left;
        }
		        #vertical-scrollbar-demo2 {
	height: 350px;
	width: 720px;
	text-align: left;
        }
				        #vertical-scrollbar-demo3 {
	height: 350px;
	width: 720px;
	text-align: left;
        }
		



*{
padding:auto;
margin:auto;
text-align:center;
}
#topGraphic {
	position:relative;
	width:1024px;
	height:396px;
	z-index:1;
	left: 0px;
}
#bottomGraphic {
	position:absolute;
	width:1024px;
	height:750px;
	z-index:1;
	top: 518px;
	left: 0px;
	background-image: url(../images/footerGraphic1.gif);
}
#logo {
	position:absolute;
	width:171px;
	height:165px;
	z-index:2;
	left: 100px;
	top: 20px;
}
#Layer1 {
	position:absolute;
	width:1px;
	height:1px;
	z-index:3;
	left: 320px;
	top: 45px;
}
#Layer2 {
	position:absolute;
	width:355px;
	height:39px;
	z-index:4;
	left: 585px;
	top: 4px;
}
body {

	background-repeat: repeat;
	
}
#Layer3 {
	position:absolute;
	width:618px;
	height:60px;
	z-index:5;
	left: 335px;
	top: 130px;
}
#home {
	position:absolute;
	width:108px;
	height:56px;
	z-index:1;
	left: -43px;
}
#mtg {
	position:absolute;
	width:106px;
	height:56px;
	z-index:2;
	left: 55px;
}
#bn {
	position:absolute;
	width:105px;
	height:56px;
	z-index:3;
	left: 266px;
}
#adv {
	position:absolute;
	width:106px;
	height:56px;
	z-index:4;
	left: 384px;
}
#quiz {
	position:absolute;
	width:106px;
	height:56px;
	z-index:5;
	left: 502px;
}
#lc {
	position:absolute;
	width:106px;
	height:56px;
	z-index:6;
	left: 157px;
}
#video {
	position:absolute;
	width:829px;
	height:652px;
	z-index:6;
	top: 520px;
	left: 110px;
	background-image: url(../images/advBackground2.gif);
}
#banner1 {
	position:absolute;
	width:406px;
	height:179px;
	z-index:7;
	left: 540px;
	top: 540px;
}
#banner2 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:8;
	left: 540px;
	top: 735px;
}
#banner3 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:9;
	left: 540px;
	top: 1055px;
}
#mainTxt {
	position:absolute;
	width:400px;
	height:880px;
	z-index:10;
	left: 105px;
	top: 540px;
}


      html,body {
				position: relative;
				width:100%;
				height:100%;
        font-family: 'Boogaloo', serif;
        font-size: 28px;
      }
#tag1 {
	position:absolute;
	width:257px;
	height:140px;
	z-index:2;
	left: 15px;
	top: 10px;
}
#tag2 {
	position:absolute;
	width:257px;
	height:140px;
	z-index:3;
	left: 287px;
	top: 10px;
}
#tag3 {
	position:absolute;
	width:257px;
	height:140px;
	z-index:4;
	top: 10px;
	left: 560px;
}
#tag4 {
	position:absolute;
	width:257px;
	height:140px;
	z-index:5;
	left: 15px;
	top: 154px;
}
#tag5 {
	position:absolute;
	width:257px;
	height:140px;
	z-index:6;
	top: 154px;
	left: 287px;
}
#tag6 {
	position:absolute;
	width:257px;
	height:140px;
	z-index:7;
	top: 154px;
	left: 560px;
}
#tag7 {
	position:absolute;
	width:257px;
	height:140px;
	z-index:8;
	left: 15px;
	top: 300px;
}
#tag8 {
	position:absolute;
	width:257px;
	height:140px;
	z-index:9;
	left: 287px;
	top: 300px;
}
#tag9 {
	position:absolute;
	width:257px;
	height:140px;
	z-index:10;
	left: 560px;
	top: 300px;
}
#img1 {
	position:absolute;
	width:840px;
	height:320px;
	z-index:2;
	left: 110px;
	top: 196px;
	overflow: visible;
	visibility: visible;
}
#advBanner {
	position:absolute;
	width:835px;
	height:210px;
	z-index:7;
	left: 110px;
	top: 980px;
}
#bookPop1 {
	position:absolute;
	width:803px;
	height:427px;
	z-index:34;
	left: 122px;
	top: 532px;
	background-image: url(../images/advPopUpBkg.gif);
	visibility: hidden;
}

#bookPop2 {
	position:absolute;
	width:803px;
	height:427px;
	z-index:35;
	left: 122px;
	top: 532px;
	background-image: url(../images/advPopUpBkg.gif);
	visibility: hidden;
}

#bookPop3 {
	position:absolute;
	width:803px;
	height:427px;
	z-index:36;
	left: 122px;
	top: 532px;
	background-image: url(../images/advPopUpBkg.gif);
	visibility: hidden;
}

#bookPic1 {
	position:absolute;
	width:200px;
	height:301px;
	z-index:2;
	left: 20px;
	top: 45px;
}
#bookTxt1 {
	position:absolute;
	width:400px;
	height:60px;
	z-index:40;
	left: 220px;
	top: -100px;
	background-color: #666666;
}
#bookTxt2 {
	position:absolute;
	width:400px;
	height:60px;
	z-index:2;
	left: 220px;
	top: -100px;
	background-color: #666666;
}

.style13 {font-family: Boogaloo; font-size: 12px; color: #0000FF; text-align: left; }
#DropScrollHolder {
	position:absolute;
	width:760px;
	height:360px;
	z-index:3;
	left: 25px;
	top: 45px;
	overflow: hidden;
}
#DropScrollHolder2 {
	position:absolute;
	width:550px;
	height:360px;
	z-index:3;
	left: 235px;
	top: 45px;
	overflow: hidden;
}

.style17 {
	font-size: 19px;
	text-align: left;
}
#crossStop {
	position:absolute;
	width:27px;
	height:26px;
	z-index:4;
	left: 756px;
	top: 12px;
}

#crossStop2 {
	position:absolute;
	width:27px;
	height:26px;
	z-index:4;
	left: 756px;
	top: 12px;
}

#crossStop3 {
	position:absolute;
	width:27px;
	height:26px;
	z-index:4;
	left: 756px;
	top: 12px;
}

.style21 {
	font-size: 17px;
	text-align: left;
	color: #FFFFFF;
	font-family: Boogaloo;
}
#Layer4 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:2;
}
#BIGscrollTxt {
	position:absolute;
	width:752px;
	height:594px;
	z-index:2;
	left: 40px;
	top: 40px;
	filter: Alpha(Opacity=30);
	visibility: visible;
}
#BSTxt1 {
	position:absolute;
	width:710px;
	height:115px;
	z-index:1;
	left: 25px;
	top: 60px;
	visibility: hidden;
}

#Book1a {
	position:absolute;
	width:710px;
	height:115px;
	z-index:1;
	left: 25px;
	top: 60px;
	visibility: hidden;
}

#Book2a {
	position:absolute;
	width:710px;
	height:115px;
	z-index:1;
	left: 25px;
	top: 60px;
	visibility: hidden;
}

#Book3a {
	position:absolute;
	width:710px;
	height:115px;
	z-index:1;
	left: 25px;
	top: 60px;
	visibility: hidden;
}


#BSTxt2 {
	position:absolute;
	width:710px;
	height:115px;
	z-index:1;
	left: 25px;
	top: 60px;
	visibility: hidden;
}

#BSTxt3 {
	position:absolute;
	width:710px;
	height:115px;
	z-index:1;
	left: 25px;
	top: 60px;
	visibility: hidden;
}

#BSTxt4 {
	position:absolute;
	width:710px;
	height:115px;
	z-index:1;
	left: 25px;
	top: 60px;
	visibility: hidden;
}

#BSTxt5 {
	position:absolute;
	width:710px;
	height:115px;
	z-index:1;
	left: 25px;
	top: 60px;
	visibility: hidden;
}

#BSTxt6 {
	position:absolute;
	width:710px;
	height:115px;
	z-index:1;
	left: 25px;
	top: 60px;
	visibility: hidden;
}

#BSTxt7 {
	position:absolute;
	width:710px;
	height:115px;
	z-index:1;
	left: 25px;
	top: 60px;
	visibility: hidden;
}

#BSTxt8 {
	position:absolute;
	width:710px;
	height:115px;
	z-index:1;
	left: 25px;
	top: 60px;
	visibility: hidden;
}
#BSTxt9 {
	position:absolute;
	width:710px;
	height:115px;
	z-index:1;
	left: 25px;
	top: 60px;
	visibility: hidden;
}



#BSTx {
	position:absolute;
	width:54px;
	height:52px;
	z-index:2;
	left: 690px;
	top: 5px;
}
.style22 {
	font-family: Boogaloo;
	font-size: 28px;
	color: #CCCCCC;
	text-align: left;
	line-height: 37px;
	text-shadow: 1px 1px 1px #000; 
}
.style36 {color: #ffff00; font-size: 32px; font-family: Boogaloo; }
#book1 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
	left: 15px;
	top: 35px;
}
#book2 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:2;
	top: 35px;
	left: 287px;
}
#book3 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:3;
	top: 35px;
	left: 560px;
}
#Layer5 {
	position:absolute;
	width:538px;
	height:38px;
	z-index:4;
	left: 150px;
	top: -12px;
}
#Layer6 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:10;
}
#borderBox {
	position:absolute;
	width:200px;
	height:115px;
	z-index:37;
	left: 109px;
	top: 195px;
	visibility: hidden;
}

#footerBanner {
	position:relative;
	width:100%;
	
	z-index:2;
	background-color: #FFFFFF;

}
.style38 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	text-align: left;
	color: #666666;
	text-decoration: none;
}
.style39 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
	text-align: left;
	
}


#cross {
	position:absolute;
	width:54px;
	height:52px;
	z-index:2;
	left: 690px;
	visibility: hidden;
}



/* New css */

#container{width:100%;display:block;}

#header{width:100%;position: relative;background:#00FFAB}
#topGraphic{background:url(../images/topGraphic.jpg);position:relative;width:1024px;z-index:1;min-height:518px;margin:0 auto;}

.story-wrapper{display: block;position: relative;width:100%;background: #009bff; padding:40px 0 150px;
background: -moz-linear-gradient(top,  #009bff 0%, #00ffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#009bff), color-stop(100%,#00ffff));
background: -webkit-linear-gradient(top,  #009bff 0%,#00ffff 100%);
background: -o-linear-gradient(top,  #009bff 0%,#00ffff 100%);
background: -ms-linear-gradient(top,  #009bff 0%,#00ffff 100%);
background: linear-gradient(to bottom,  #009bff 0%,#00ffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009bff', endColorstr='#00ffff',GradientType=0 );
}
.story-showcase{width:1000px; margin:0 auto;min-height:800px;background:#009AFF;  border-radius: 20px; padding:20px 10px;
	

}

.story{display:inline-block; min-height:180px;  width:304px; margin:6px 10px; background:#009AFF ;border-radius: 10px; padding:12px 8px; text-align: left; box-sizing: border-box; vertical-align:top; cursor: pointer; 

}

.story * {vertical-align: top;display: inline-block;}
.story:hover, .story.selected{background:#752FFF;}
.story:hover p, .story.selected p{color:#fff;}
.story:hover span, .story.selected span{color:#FFFF01;}
.img{display:block; height:auto; float:left;margin:0 10px 0 2px;border-radius:10px;overflow:hidden;width: 124px;height: 175px;}
.story img{height:auto;}
.story h3{color:#FFFF01;margin:0px 0 5px;display:block;text-align:left;font-size:24px; font-weight:normal;}
.story p{display:inline;font-size:18px;color:#023269;font-weight:normal;}
.story span{color:#345a87;}


.story-showcase,  .img{
	-webkit-box-shadow: inset -2px 2px 4px 0px rgba(255,255,255,0.65),
		inset 3px -2px 1px 0px rgba(0,52,91,0.9);
-moz-box-shadow: inset -2px 2px 4px 0px rgba(255,255,255,0.65),
	inset 3px -2px 1px 0px rgba(0,52,91,0.9);
box-shadow: inset -2px 2px 4px 0px rgba(255,255,255,0.65),
	inset 3px -2px 1px 0px rgba(0,52,91,0.9);
}
.story{background:#33aeff;
	box-shadow: inset -2px 2px 4px 0px rgba(255,255,255,1),
	inset 3px -4px 1px 0px rgba(0,52,91,0.9);}

#story1 .img{background: transparent url("../images/thumbs/1.jpg") no-repeat scroll 100% center;}
#story2 .img{background: transparent url("../images/thumbs/2.jpg") no-repeat scroll 100% center;}
#story3 .img{background: transparent url("../images/thumbs/3.jpg") no-repeat scroll 100% center;}
#story4 .img{background: transparent url("../images/thumbs/4.jpg") no-repeat scroll 100% center;}
#story5 .img{background: transparent url("../images/thumbs/5.jpg") no-repeat scroll 100% center;}
#story6 .img{background: transparent url("../images/thumbs/6.jpg") no-repeat scroll 100% center;}
#story7 .img{background: transparent url("../images/thumbs/7.jpg") no-repeat scroll 100% center;}
#story8 .img{background: transparent url("../images/thumbs/8.jpg") no-repeat scroll 100% center;}
#story9 .img{background: transparent url("../images/thumbs/9.jpg") no-repeat scroll 100% center;}
#story10 .img{background: transparent url("../images/thumbs/10.jpg") no-repeat scroll 100% center;}
#story11 .img{background: transparent url("../images/thumbs/11.jpg") no-repeat scroll 100% center;}
#story12 .img{background: transparent url("../images/thumbs/12.jpg") no-repeat scroll 100% center;}
#story13 .img{background: transparent url("../images/thumbs/13.jpg") no-repeat scroll 100% center;}
#story14 .img{background: transparent url("../images/thumbs/14.jpg") no-repeat scroll 100% center;}
#story15 .img{background: transparent url("../images/thumbs/15.jpg") no-repeat scroll 100% center;}
#story16 .img{background: transparent url("../images/thumbs/16.jpg") no-repeat scroll 100% center;}
#story17 .img{background: transparent url("../images/thumbs/17.jpg") no-repeat scroll 100% center;}
#story18 .img{background: transparent url("../images/thumbs/18.jpg") no-repeat scroll 100% center;}

#story19 .img{background: transparent url("../images/thumbs/19.jpg") no-repeat scroll 100% center;}
#story20 .img{background: transparent url("../images/thumbs/20.jpg") no-repeat scroll 100% center;}
#story21 .img{background: transparent url("../images/thumbs/21.jpg") no-repeat scroll 100% center;}


.overlay{position: fixed;display: none; width:100%; height:100%;background:rgba(0,0,0,0.8);z-index:10;text-align: left;overflow-y: scroll;}

.modal{display: block;position: relative;width:1000px;background:#fff;z-index:11;text-align: left; margin-top:50px;margin-bottom:50px;
-webkit-box-shadow: 0px 0px 16px 0px rgba(255,255,255,1);
-moz-box-shadow: 0px 0px 16px 0px rgba(255,255,255,1);
box-shadow: 0px 0px 16px 0px rgba(255,255,255,1);}
.close{display: block;position: absolute;right:15px;cursor:pointer;z-index:12;}
.modal *{text-align: left;}
.modal div{position: relative;display: inline-block;width:450px;vertical-align: top;}
.modal .image{margin-right: 20px;height:100%;}
.modal .image img{height:100%;width:100%;}
.modal .country img{vertical-align: top;margin: 13px 10px 10px;}
.modal .country{margin:0px 0 10px;display: block;}
.modal .description{width:510px;padding:10px;box-sizing: border-box;}
.description h2{color:#FF9A00;}
.description p{color:#1b4678;height:360px;overflow-y:scroll;}
.description .bookName{margin:20px 0 0px;display: block}
.description a{display: block;width:300px;height:125px;background: url(../images/amazon.png) no-repeat; margin-top: 0px;}

.overflowHidden{overflow:hidden;}
.visible{display: block;}
.swiper-container {
	top: 200px;
	width:800px;
	height:280px;
}
.swiper-slide{}
.book1{background:url(../images/books/book1.jpg);}
.book2{background:url(../images/books/book2.jpg);}
.book3{background:url(../images/books/book3.jpg);}
.book4{background:url(../images/books/book4.jpg);}
.swiper-button-next, .swiper-button-prev{top:64% !important;}

.atamazon{display: block;position: absolute;width:207px;height:100px;background:url(../images/atamazon.png);bottom:10px;right:0px;z-index: 20;}

h1.for-story{color: rgb(255, 155, 0);
text-shadow: 0px 0px 3px rgb(255, 0, 0), 0px 0px 5px rgb(0, 0, 255); margin-bottom: 10px;}

.full-story{background: #00CE00 !important;}
.full-story h3{color:#006CD4;}
.full-story p{color:#fff;}
.full-story span{color:#ccc;}

.for-full{color:#00FF00 !important;}

.bName{color:#0F0 !important;text-shadow: 0px 0px 2px #F00, 0px 0px 5px #00F;font-size:40px;}