/* simple reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
/* Poe Styles */
@font-face{
	font-family: Caslon;

	src: url('../fonts/caslon-antique.ttf')
}

@font-face {
	font-family: Caslon Antique;
	src: url('../fonts/caslon-antique.ttf')
}

@font-face {
	font-family: Courier;
	src: url('../fonts/courier.ttf')
}

@font-face {
	font-family: Comic Sans MS;
	src: url('../fonts/comic-sans-ms.ttf')
}
ul {
	margin: 0;
	padding: 0;
}
body{
    height: 100%;
    width: 100%;
}
#fauxbody {
    height: 100%;
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0; 
    background-image: url('../images/bigbg.png');
    background-position: center;
    min-height: 730px;/*prevents cards and files from coming up with android keyboard.*/
	overflow: hidden;
}
#wrapper {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    text-align: center;
}
@-webkit-keyframes opacityIn {
    from { opacity: 0.0; }
      to { opacity: 0.7; }
}
@keyframes opacityIn {
    from { opacity: 0.0; }
      to { opacity: 0.7; }
}
@-webkit-keyframes opacityOut {
    from { opacity: 0.7; }
      to { opacity: 0.0; }
 }
@keyframes opacityOut {
    from { opacity: 0.7; }
      to { opacity: 0.0; }
}
#greyout.show{
 
}
#greyout.hide{
    opacity: 0.0;
}
#greyout {
/*-webkit-transform: translateZ(0);*/
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}
.hide {
    z-index: -1;
}
.show {
    z-index: 199;
}

.greyshade {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background-color: #000;
	opacity: 0.8;
	position: absolute;
	top: 0px;
	left: 0px;
}

.hide {
	display: none;
}

.show {
	display: block;
}



.topnav {
	height: 18px;
	padding: 6px 20px 12px 20px;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #fff;
	position: absolute;
	opacity: 0.6;
}

.topnav span, .topnav img {
	vertical-align: top;
}

.topnav img {
	margin-top: -2px;
	margin-right: 2px;
}

.topnav:hover {
	opacity: 1.0;
}

#teamname { top: 0px; left: 0px; cursor: pointer;}
#nextchapter { top: 0px; right: 0; cursor: pointer;}

a {
	cursor: pointer;
}

#titlescreen {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background-color: #000;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 500;
	/*
		background-image: url('../images/titlescreen.png');
		background-repeat: no-repeat;
		background-position: center;
		*/
}

#start, #fpo-choices {
	margin-top: 250px;
}



#cardselection {
	position: absolute;
	z-index: 600;
	width: 100%;
	height: 100%;
}

#cardselected {
	position: absolute;
	z-index: 600;
	width: 100%;
	height: 100%;
}

.selection {
	width: 460px;
	height: 688px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -344px;
	margin-left: -230px;
	z-index: 601;
}	

.haveselected {
	position: absolute;
	width: 170px;
	height: 100px;
	top: 50%;
	left: 9%;
	margin-top: -45px;
	z-index: 601;
	text-align: right;
	font-size: 40px;
	font-family: Caslon;
	line-height: 36px;
	color: #fff;
}

.confirmButton {
	display: block;
	position: absolute;
	width: 175px;
	height: 50px;
	top: 50%;
	right: 10%;
	margin-top: -25px;
	z-index: 601;
	text-align: center;
	font-size: 24px;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 50px;
	color: #000;
	background-color: #ddd;
	border-radius: 6px;
}

.selectedcard{
    display: none;
}
.selectcard {
	width: 192px;
	height: 287px;
	position: absolute;
}

#sm-selecttext {
	width: 180px;
	left: 4%;
	bottom: 52%;
}

#sm-raven {
	/* background-image: url('../images/sm-card-raven.png'); */
	left: 22%;
	bottom: 52%;
}

#sm-lenore {
	/* background-image: url('../images/sm-card-lenore.png'); */
	left: 41%;
	bottom: 52%;
}

#sm-annabellee {
	/* background-image: url('../images/sm-card-annabellee.png'); */
	left: 60%;
	bottom: 52%;
}

#sm-telltaleheart {
	/* background-image: url('../images/sm-card-telltaleheart.png'); */
	left: 79%;
	bottom: 52%;
}

#sm-montresor {
	/* background-image: url('../images/sm-card-montresor.png'); */
	left: 3%;
	top: 50%;
}

#sm-reddeath {
	/* background-image: url('../images/sm-card-reddeath.png'); */
	left: 22%;
	top: 50%;
}

#sm-twain {
	/* background-image: url('../images/sm-card-twain.png'); */
	left: 41%;
	top: 50%;
}

#sm-griswold {
	/* background-image: url('../images/sm-card-griswold.png'); */
	left: 60%;
	top: 50%;
}

#sm-dupin {
	/* background-image: url('../images/sm-card-dupin.png'); */
	left: 79%;
	top: 50%;
}




.title {
	position: absolute;
	width: 100%;
	height: 150px;
	top: 50%;
	margin-top: -85px;
	font-family: Caslon;
	text-transform: uppercase;
	font-size: 70px;
	line-height: 64px;
	text-align: center;
	color: #fff;
	z-index: 500;
}
@-webkit-keyframes fadeIn {
    from { opacity: 0.0; }
      to { opacity: 1.0; }
}
@keyframes fadeIn {
    from { opacity: 0.0; }
      to { opacity: 1.0; }
}
@-webkit-keyframes fadeOut {
    from { opacity: 1.0; }
      to { opacity: 0.0; }
 }
@keyframes fadeOut {
    from { opacity: 1.0; }
      to { opacity: 0.0; }
}
#title0,#title1,#title2,#title3,#title4,#title5{
    display: none;
}

.cover {
	background-image: url('../images/covers-inside.png');
}

.notebook {
	position: absolute;
	top: 44px;
	bottom: 52px;
	left: 20px;
	right: 20px;
	border-radius: 4px;
	min-width: 960px;
	min-height: 624px;
}

.notebookfront {
	position: absolute;
	top: 44px;
	bottom: 52px;
	left: 50%;
	right: 20px;
	border-radius: 4px;
	min-width: 480px;
	min-height: 624px;
	text-align: center;
}

.coverbutton {
	position: absolute;
	width: 100%;
	height: 100%;
}

#inscription {
	position: absolute;
	left: 50%;
	margin-left: -139px;
	margin-top: 100px;
	width: 278px;
	height: 142px;
	background-image: url(../images/cover-inscription.png); 
	z-index: 11;
}

.nametag {
    background-color: transparent;
    background-image: url('../images/line24.png');
    background-attachment: local;
    font-size: 18px;
    font-family: Comic Sans MS;
    line-height: 24px;
    resize: none;
    border: none;
    height: 32px;
    width: 250px;
    background-image: none;
    text-align: center;
    margin-top: 85px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.bigcaslon, .bigcaslon p {
	font-family: Caslon;
	font-size: 32px;
	line-height: 36px;
	color: #fff;
	text-align: left;
}

.bigcaslon p {
	padding-bottom: 30px;
}

#heresnotebook {
	position: absolute;
	top: 100px;
	bottom: 60px;
	left: 80px;
	right: 58%;
}

#heresCard0 {
	position: absolute;
	top: 150px;
	bottom: 60px;
	right: 80px;
	left: 58%;
	z-index: 200;
	display: none;
}




.backpage {
	background-image: url('../images/pages.png');
	background-position: bottom left;
	position: absolute;
	top: 13px;
	right: 43px;
	bottom: 13px;
	width: 200px;
	border: 1px solid #999;
	z-index: 5;
}

.spread {
	position: absolute;
	top: 12px;
	bottom: 12px;
	z-index: 10;
}

.suspects1 { left: 51px;  right: 103px; }
.suspects2 { left: 66px;  right: 88px; }
.suspects3 { left: 81px;  right: 73px; }
.suspects4 { left: 96px;  right: 58px; }
.suspects5 { left: 111px;  right: 43px; }

.shadow-l1 { left: 46px; }
.shadow-r1 { right: 98px; }

.shadow-l2 { left: 61px; }
.shadow-r2 { right: 83px; }

.shadow-l3 { left: 76px; }
.shadow-r3 { right: 68px; }

.shadow-l4 { left: 91px; }
.shadow-r4 { right: 53px; }

.shadow-l5 { left: 106px; }
.shadow-r5 { right: 38px; }


.evidence1 { left: 83px;  right: 96px; }
.evidence2 { left: 93px;  right: 86px; }
.evidence3 { left: 103px;  right: 75px; }

.map1, .timeline1, .accusation1 { left: 51px;  right: 43px; }

.shadow-l { left: 46px; }
.shadow-r { right: 38px; }





.page {
	position: absolute;
	border: 1px solid #999;
	padding: 30px;
	background-color: #fff;
	top: 0px;
	bottom: 0px;
}

.leftpage {
	background-image: url('../images/leftpage.png');
	background-repeat: repeat-y;
	background-position: right;
	right: 50%;
	left: 0px;	
}

.rightpage {
	background-color: #e6e7e8;
	background-image: url('../images/rightpage.png');
	background-repeat: repeat-y;
	background-position: left;
	right: 0px;
	left: 50%;	
}

.timelinepage {
	padding: 10px;
}

.text {
	width: 100%;
	height: 100%;
}

textarea {
    width: 100%;
    height: 82%;
    background-color: transparent;
    background-image: url('../images/line24.png');
    background-attachment: local;
    line-height: 24px;
    text-align: left;
    font-family: Comic Sans MS;
    font-size: 18px;
    border: 0;
    resize: none;
    border: none;
}

input:focus, textarea:focus {
    outline: none;
}


textarea::-webkit-scrollbar {
    width: 6px;
}
 
/* Track */
textarea::-webkit-scrollbar-track {
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background: rgba(187,187,187,1); 
    margin: 0px 0px 0px 10px;
}
 
/* Handle */
textarea::-webkit-scrollbar-thumb {
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background: rgba(153,153,153,1); 
}





/* NOTEBOOK ART */


/* Tabs */


.tabs {
	position: absolute;
	top: 13px;
	bottom: 13px;
	width: 40px;
	z-index: 1;
}

.tabsright { right: 7px; }
.tabsleft  { left:  7px; }

.tab {
	width: 40px;
	height: 114px;
	position: absolute;
	left: 0px;
	cursor: pointer;
}

.suspectstab   { top: 2%; }
.evidencetab   { top: 21.5%; }
.maptab        { top: 41%; }
.timelinetab   { top: 60.5%; }
.accusationtab { top: 80%; }

/* .suspectsleft  { background-image: url('../images/tab-left-suspects.png'); } */

/* .evidenceright { background-image: url('../images/tab-right-evidence.png'); }  */
/* .evidenceleft  { background-image: url('../images/tab-left-evidence.png'); } */

/* .mapright { background-image: url('../images/tab-right-map.png'); } */
/* .mapleft  { background-image: url('../images/tab-left-map.png'); } */

/* .timelineright { background-image: url('../images/tab-right-timeline.png'); } */
.timelineleft  { background-image: url('../images/tab-left-timeline.png'); }

/* .accusationright { background-image: url('../images/tab-right-accusation.png'); } */
/* .accusationleft { background-image: url('../images/tab-left-accusation.png'); } */



.tabbar {
	position: absolute;
	top: 13px;
	left:  44px;
	bottom: 13px;
	width: 10px;
	z-index: 2;
}

.suspectscolor   { background-color: #b3b3b3; }
.evidencecolor   { background-color: #666; }
.mapcolor        { background-color: #999; }
.timelinecolor   { background-color: #ccc; }
.accusationcolor { background-color: #808080; }




/* Suspect Photos */


.photo {
	position: absolute;
	cursor: pointer;
}

.ravenphoto {
	/* background-image: url('../images/photo-raven.png'); */
	width: 113px;
	height: 141px;
	top: 365px;
	left: -29px;
}

.lenorephoto {
	/* background-image: url('../images/photo-lenore.png'); */
	width: 122px;
	height: 131px;
	top: -45px;
	right: 60px;
}

.redphoto {
	/* background-image: url('../images/photo-red.png'); */
	width: 114px;
	height: 148px;
	top: -13px;
	right: -39px;
}

.telltalephoto {
	/* background-image: url('../images/photo-telltale.png'); */
	width: 115px;
	height: 143px;
	top: 235px;
	right: -34px;
}

.griswoldphoto {
	/* background-image: url('../images/photo-griswold.png'); */
	width: 123px;
	height: 132px;
	top: -40px;
	right: 223px;
}

.dupinphoto {
	/* background-image: url('../images/photo-dupin.png'); */
	width: 120px;
	height: 131px;
	top: -47px;
	left: 306px;
	z-index: 6;
}

.aleephoto {
	/* background-image: url('../images/photo-alee.png'); */
	width: 130px;
	height: 131px;
	top: -35px;
	left: 0px;
	z-index: 6;
}

.montresorphoto {
	/* background-image: url('../images/photo-montresor.png'); */
	width: 110px;
	height: 146px;
	top: 107px;
	left: -24px;
	z-index: 6;
}

.twainphoto {
	/* background-image: url('../images/photo-twain.png'); */
	width: 112px;
	height: 145px;
	top: 453px;
	left: -46px;
	z-index: 6;
}





.lenorephotoback {
	/* background-image: url('../images/photo-back-lenore.png'); */
	width: 116px;
	height: 45px;
	top: -45px;
	left: 70px;
}

.redphotoback {
	/* background-image: url('../images/photo-back-red.png'); */
	width: 110px;
	height: 144px;
	top: -12px;
	left: -50px;
}

.telltalephotoback {
	/* background-image: url('../images/photo-back-telltale.png'); */
	width: 129px;
	height: 137px;
	top: 235px;
	left: -39px;
}

.griswoldphotoback {
	/* background-image: url('../images/photo-back-griswold.png'); */
	width: 115px;
	height: 38px;
	top: -40px;
	left: 239px;
}


.dupinphotoback {
	/* background-image: url('../images/photo-back-dupin.png'); */
	width: 114px;
	height: 47px;
	top: -47px;
	right: 321px;
	z-index: 6;
}

.aleephotoback {
	/* background-image: url('../images/photo-back-alee.png'); */
	width: 126px;
	height: 115px;
	top: -35px;
	right: -14px;
	z-index: 6;
}

.montresorphotoback {
	/* background-image: url('../images/photo-back-montresor.png'); */
	width: 102px;
	height: 137px;
	top: 107px;
	right: -28px;
	z-index: 6;
}

.twainphotoback {
	/* background-image: url('../images/photo-back-twain.png'); */
	width: 90px;
	height: 141px;
	top: 453px;
	right: -24px;
	z-index: 6;
}




.heading {
	position: relative;
	background-repeat: no-repeat;
	background-position: top center;
	width: 100%;
	height: 18%;
}

/* .ravenheading { background-image: url('../images/heading-raven.png'); } */
/* .lenoreheading { background-image: url('../images/heading-lenore.png'); } */
/* .aleeheading { background-image: url('../images/heading-alee.png'); } */
/* .telltaleheading { background-image: url('../images/heading-telltale.png'); } */
/* .montresorheading { background-image: url('../images/heading-montresor.png'); } */
/* .redheading { background-image: url('../images/heading-red.png'); } */
/* .twainheading { background-image: url('../images/heading-twain.png'); } */
/* .griswoldheading { background-image: url('../images/heading-griswold.png'); } */
/* .dupinheading { background-image: url('../images/heading-dupin.png'); } */
/* .notesheading { background-image: url('../images/heading-notes.png'); } */

.timelineheading {
	position:absolute;
	top: 10px;
	left: 10px;
	width: 810px;
	height: 16px;
	/* background-image: url(../images/heading-timeline.png); */
	z-index: 10;
}

/* .accusation1heading { background-image: url('../images/heading-accusation1.png'); } */
/* .accusation2heading { background-image: url('../images/heading-accusation2.png'); } */

/* .evidence1Lheading { background-image: url('../images/heading-evidence1L.png'); } */
/* .evidence1Rheading { background-image: url('../images/heading-evidence1R.png'); } */
/* .evidence2Lheading { background-image: url('../images/heading-evidence2L.png'); } */
/* .evidence2Rheading { background-image: url('../images/heading-evidence2R.png'); } */
/* .evidence3Lheading { background-image: url('../images/heading-evidence3L.png'); } */
/* .evidence3Rheading { background-image: url('../images/heading-evidence3R.png'); } */





.shadows {
	position: absolute;
	top: 12px;
	bottom: 12px;
	width: 17px;
	z-index: 6;
}

.shadowleft  { background-image: url(../images/slightshadow.png);  }
.shadowright { background-image: url(../images/slightshadow2.png); }













/* Evidence styles */

.evL {
	position: absolute;
	top: 12px;
	bottom: 12px;
	left: 52px;
	border-top: 1px solid #999;
	border-left: 1px solid #999;
	border-bottom: 1px solid #999;
	z-index: 11;
}

.evR {
	position: absolute;
	top: 12px;
	bottom: 12px;
	right: 44px;
	border-top: 1px solid #999px;
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
	z-index: 11;
}

.ev1L {
	width: 32px;
	background-image: url(../images/ev1L.png);
}

.ev1R {
	width: 53px;
	background-image: url(../images/ev1R.png);
}

.ev2L {
	width: 45px;
	background-image: url(../images/ev2L.png);
}

.ev2R {
	width: 42px;
	background-image: url(../images/ev2R.png);
}

.ev3L {
	width: 55px;
	background-image: url(../images/ev3L.png);
}

.ev3R {
	width: 31px;
	background-image: url(../images/ev3R.png);
}

.evtab {
	position: absolute;
	width: 42px;
	height: 190px;
	z-index: 12;
	cursor: pointer;
}

.evtab1  { top: 13px; }
.evtab1L { left: 40px; }
.evtab1R { right: 60px; }

.evtab2  { top: 230px; }
.evtab2L { left: 50px; }
.evtab2R { right: 40px; }

.evtab4  { top: 440px; }
.evtab4L { left: 60px; }
.evtab4R { right: 30px; }










/* Map styles */




.map1 {
	background-image: url('../images/mapgrounds.png');
	background-position: center top;
	left: 51px;
	right: 43px;
	border: 1px solid #999;
	text-align: center;
}

#residence {
	position: relative;
	margin: 0 auto;
	width: 872px;
	height: 609px;
	background-image: url(../images/mapbg.png);
}

.fliproom {
	width: 100%;
	height: 40px;
}

.fliproom1 {
	width: 100%;
	height: 57px;
}

.fliproom2 {
	width: 100%;
	height: 36px;
}

.fliproom3 {
	width: 100%;
	height: 33px;
}

.room1 {
	position: absolute;
	width: 294px;
	height: 162px;
}

.room1a {
	position: absolute;
	width: 251px;
	height: 220px;
}

.room2 {
	position: absolute;
	width: 202px;
	height: 197px;
}

.room2a {
	position: absolute;
	width: 432px;
	height: 193px;
}

.room3 {
	position: absolute;
	width: 290px;
	height: 154px;
}

#white {
	top: 72px;
	left: 11px;
	width: 294px;
	height: 162px;
}

#orange {
	top: 15px;
	left: 310px;
	width: 251px;
	height: 220px;
}

#green {
	top: 72px;
	right: 11px;
	width: 294px;
	height: 162px;
}

#violet {
	top: 240px;
	left: 11px;
	width: 202px;
	height: 197px;
}

#hall {
	top: 242px;
	left: 220px;
	width: 432px;
	height: 193px;
}

#purple {
	top: 240px;
	right: 11px;
	width: 202px;
	height: 197px;
}

#black {
	top: 443px;
	left: 11px;
	width: 290px;
	height: 154px;
}

#blue {
	top: 443px;
	right: 11px;
	width: 290px;
	height: 154px;
}

/* .white { background-image: url(../images/map-white.png); } */
.white-write { background-image: url(../images/map-white-write.png); }
.orange { background-image: url(../images/map-orange.png); }
.orange-alt { background-image: url(../images/map-orange-alt.png); }
.orange-write { background-image: url(../images/map-orange-write.png); }
/* .green { background-image: url(../images/map-green.png); } */
.green-write { background-image: url(../images/map-green-write.png); }
.violet { background-image: url(../images/map-violet.png); }
.violet-alt { background-image: url(../images/map-violet-alt.png); }
.violet-write { background-image: url(../images/map-violet-write.png); }
/* .hall { background-image: url(../images/map-hall.png); } */
.hall-write { background-image: url(../images/map-hall-write.png); }
/* .purple { background-image: url(../images/map-purple.png); } */
.purple-write { background-image: url(../images/map-purple-write.png); }
/* .black { background-image: url(../images/map-black.png); } */
.black-write { background-image: url(../images/map-black-write.png); }
/* .blue { background-image: url(../images/map-blue.png); } */
.blue-write { background-image: url(../images/map-blue-write.png); }


.backroom {
	width: 90%;
	background-image: url('../images/line.png');
	line-height: 20px;
	font-size: 16px;
}

.firsttier  { height: 65%; }
.secondtier { height: 74%; }
.thirdtier  { height: 68%; }

.boldirection {
    float: right;
    margin: 24px 0px 0px 0px;
    height: 17px;
    width: 270px;
    /* background-image: url('../images/clicktoaddnote.png'); */
}

/* Timeline styles */



.timeline1 {
	background-color: #fff;
	background-image: url('../images/bothpages.png');
	background-position: center;
	background-repeat: repeat-y;
}

.timetable {
	border-bottom: 1px solid #000;
	padding: 40px 10px 10px 10px;
	width: 100%;
}

.timetable td {
	border-left: 1px solid #000;
	border-top: 1px solid #000;
	padding: 6px;
}

.timetable td.halfpast {
	border-left: 1px dotted #000;
}

.timetable td.timetd {
	border-top: none;
	height: 9px;
	font-family: Caslon;
}

.timetable td.timename {
	border-left: none;
	vertical-align: middle;
	width: 25%;
}

.timetable td.breaktd {
	border-left: none;
	border-top: none;
	width: 2%
}

.cell {
	width: 100%;
	height: 100%;
	background-image: url('../images/line.png');
	line-height: 20px;
	font-size: 16px;
}





/* Accusation styles */

.aquestion {
	width: 100%;
	height: 18px;
	background-repeat: no-repeat;
	background-position: bottom left;
}

.aq1 { background-image: url('../images/accusation-q1.png'); margin-top: 6px; }
.aq2 { background-image: url('../images/accusation-q2.png'); }
.aq3 { background-image: url('../images/accusation-q3.png'); }
.aq4 { background-image: url('../images/accusation-q4.png'); }
.aq5 { background-image: url('../images/accusation-q5.png'); }

.aanswer {
	width: 100%;
	height: 54px;
}

#submitButton {
    float: right;
}

#submitSpinner {
	height: 25px;
	width: 25px;
	margin-right: 5px;
	float: right;
}






/* Card Styles */

#characterCard0 {
    bottom: -648px;
    right: 78px;
    z-index: 400;
}

#characterCard1 {
	bottom: -648px;
	right: -20px;
	z-index: 410;
}

#characterCard2 {
    bottom: -648px;
    right: -104px;
    z-index: 420;
}

#characterCard3 {
    bottom: -648px;
    right: -188px;
    z-index: 430;
}

#characterCard4 {
    bottom: -648px;
    right: -272px;
    z-index: 440;
}

#characterCard5 {
    bottom: -648px;
    right: -356px;
    z-index: 450;
}


.cardfront {
	width: 460px;
	height: 688px;
	background-image: url('../images/card-blank.png');
	z-index: 0;
}


.close-button {
	position: absolute;
	top: -6px;
	right: 0px;
	z-index: 100000;
}

/*
#card-raven { background-image: url('../images/card-raven.png'); }
#card-lenore { background-image: url('../images/card-lenore.png'); }
#card-annabellee { background-image: url('../images/card-annabellee.png'); }
#card-telltaleheart { background-image: url('../images/card-telltaleheart.png'); }
#card-montresor { background-image: url('../images/card-montresor.png'); }
#card-reddeath { background-image: url('../images/card-reddeath.png'); }
#card-twain { background-image: url('../images/card-twain.png'); }
#card-griswold { background-image: url('../images/card-griswold.png'); }
#card-dupin { background-image: url('../images/card-dupin.png'); }
*/

#text-raven {
    padding-left: 55px;
}

#text-montresor {
    padding-left: 40px;
}

#text-twain {
    padding-left: 25px;
}

#text-telltale {
    padding-right: 35px;
}


.cardchapter {
	height: 20px;
	width: 404px;
	margin: 10px;
	padding: 8px 10px;
	color: #666;
	font-family: Times, Times New Roman, serif;
	font-weight: bold;
	font-size: 15px;
	text-align: left;
}

.frontbox {
	height: 618px;
	width: 424px;
	margin: 0 10px;
	position: absolute;
	top: 46px;
}


.cardback {
	width: 361px;
	height: 600px;
	padding: 40px 52px 50px 42px;
	background-image: url('../images/cardback-wide.png');
	position: absolute;
}

.xbox {
	width: 32px;
	height:32px;
	background-image: url('../images/xbox.png');
	position: absolute;
	top: 27px;
	right: 38px;
}

.introcard p {
	font-family: Times, Times New Roman, serif;
	font-size: 13px;
	line-height: 14px;
	text-align: left;
	padding: 0 0 6px 0;
}

.introcard p.actingnotes {
	text-align: center;
	font-style: italic;
	font-size: 14px;
}

.introcard h2 {
	font-family: Caslon;
	font-size: 18px;
	font-weight: normal;
	text-transform: uppercase;
	line-height: 18px;
	text-align: center;
	padding: 10px 0px 2px 0px;
	border-top: 1px solid #000px;
	margin-top: 0px;
}

.introcard h2.first {
	border-top: 0px;
	padding: 6px 0 4px 0;
}

.introcard h1 {
	font-family: Caslon;
	font-size: 36px;
	text-transform: uppercase;
	line-height: 36px;
	text-align: center;
	padding: 0;
}


.introcard ul {
	font-family: Times, Times New Roman, serif;
	font-size: 13px;
	line-height: 14px;
	text-align: left;
	margin:0 0 0 18px;
	list-style-image: url('../images/point.png');
}

.introcard ul li {
	padding-bottom: 4px;
	margin-left: 6px;
}

.poecard {
	padding: 4px;
}

.poecard p {
	font-family: Times, Times New Roman, serif;
	font-size: 15px;
	line-height: 16px;
	text-align: left;
	padding: 0 0 6px 0;
}

.poecard p.actingnotes {
	text-align: center;
	font-style: italic;
	font-size: 15px;
}

.poecard h2 {
	font-family: Caslon;
	font-size: 20px;
	font-weight: normal;
	text-transform: uppercase;
	line-height: 22px;
	text-align: center;
	padding: 12px 0 4px 0;
	border-top: 1px solid #000px;
	margin-top: 6px;
}

.poecard h1 {
	font-family: Caslon;
	font-size: 36px;
	text-transform: uppercase;
	line-height: 36px;
	text-align: center;
	padding: 0;
}

.poecard h2.first {
	border-top: 0px;
}

.summarycard {
    background: white;
    boder-radius: 10px;
}

.summarycard p {
    font-size: 18px;
    line-height: 20px;
}

/* File Styles */

.file {
    background-repeat: no-repeat;
    width: 1008px;
    height: 754px;
    overflow: hidden;
    position: absolute;
    bottom: -698px;
    left: 12px;
    -webkit-transition: -webkit-transform 0.5s ease-out;
    transition: transform 0.5s ease-out;
    -webkit-transform: translate3d(0px,0px,0px);
    transform: translate3d(0px,0px,0px);
}

.fileTeacherBar {
	bottom: -668px !important;
}

span.directions {
	position: absolute;
	top: 64px;
	left: 32px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #999;
}
#file1 { 
	background-image: url(../images/file1.png);
	z-index: 210;
}

#file2 { 
	background-image: url(../images/file2.png);
	z-index: 220;
}

#file3 { 
	background-image: url(../images/file3.png);
	z-index: 230;
}

#file4 { 
	background-image: url(../images/file4.png);
	z-index: 240;
}

.filetab {
	height: 50px;
	width: 90px;
	position: absolute;
	top: 12px;
	cursor: pointer;
}

.file1tab {
	left: 56px;
}

.file2tab {
	left: 150px;
}

.file3tab {
	left: 244px;
}

.file4tab {
	left: 338px;
}

.fronttab {
	width: 170px;
}

#Report_1 {
	position: absolute;
	top: 104px;
	left: 18px;
	z-index: 213;
}

#Report_2 {
	position: absolute;
	top: 220px;
	left: 18px;
	z-index: 223;
}

#Report_3 {
	position: absolute;
	top: 128px;
	left: 18px;
	z-index: 233;
}

#Report_4 {
	position: absolute;
	top: 128px;
	left: 18px;
	z-index: 243;
}

.reportStudent {
	width: 710px;
	height: 530px;
	padding: 124px 75px 50px 70px;
	background-image: url('../images/report-bg.png');
	font-family: courier;
	font-size: 15px;
	line-height: 21px;
	text-align: left;
}
#police_4{
	font-size: 14px;
}
span.reportdateline {
	text-align: center;
	display: block;
	height: 72px;
}
span.reportlocation {
	display: block;
	height: 21px;
}

.document {
	width: 454px;
	height: 675px;
}

#crimescene {
	/* background-image: url('../images/crimescene.png'); */
	width: 928px;
	height: 671px;
	position: absolute;
	top: 78px;
	right: 20;
	z-index: 212;
}

#letter-twain {
	/* background-image: url('../images/letter-twain.png'); */
	position: absolute;
	top: 78px;
	right: 20px;
	z-index: 221;
}

#letter-griswold {
    /* background-image: url('../images/letter-griswold.png'); */
    position: absolute;
    width: 780px;
    height: 470px;
    top: 118px;
    right: 70;
    z-index: 222;
}

#letter-poe {
	/* background-image: url('../images/letter-poe.png'); */
	position: absolute;
	top: 78px;
	right: 280;
	z-index: 231;
}

#letter-dupin {
	/* background-image: url('../images/letter-dupin.png'); */
	position: absolute;
	top: 102px;
	right: 20;
	z-index: 232;
}

#letter-lenore {
	/* background-image: url('../images/letter-lenore.png'); */
	position: absolute;
	top: 78px;
	right: 280;
	z-index: 241;
}

#letter-annabellee {
	/* background-image: url('../images/letter-annabellee.png'); */
	position: absolute;
	top: 102px;
	right: 20;
	z-index: 242;
}

.cardStudent {
	width: 460px;
	height: 688px;
	cursor: pointer;
	bottom: -648px;
}

.flippable {
	position: absolute;
	cursor: pointer;
}
/*password dialog*/
.ui-dialog{
    background-color: #000000;
    z-index: 1500;
    color: #C0C0C0;
    font-family: Arial;
    font-size: 10pt;
}

#dialog {
	z-index: 1000;
	height: 200px;
	font-family: Caslon;
	font-size: 16pt;
}

#dialog img{
    position: absolute;
    top: -20px;
    right: -20px;
}
#dialog input{
    display: block;
    font-size: 18pt;
}
#dialog button {
    display: block;
    background-color: #C0C0C0;
    border: none;
    padding: 7px 20px 5px 20px; 
    float: right;
    font-family: Caslon;
    font-size: 16pt;
}
.ui-button,.ui-dialog-titlebar{
    display: none;
}
.ui-widget-overlay{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    z-index: 499;
    opacity: 0.8;
    background-color: #000000;
}
#dialogOverlayParent{
    z-index: 499;
}
/*end password dialog*/

*{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

[role=button]
{
	cursor: pointer;
}

.logout-block {
	text-align:center;
	position:absolute;
	bottom:132px;
	left: 50%;
	right: 20px;
	border-radius: 4px;
	min-width: 480px;
}

.coverlink { opacity:0.6; }
.coverlink:hover { opacity:1.0; }

.copyright {
	position:absolute;
	width: 100%;
	text-align: center;
	bottom: 20px;
	color: #666;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

#accessible_link {
	position:absolute;
	width: 100%;
	text-align: center;
	bottom: 40px;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	z-index: 501;
}

#accessible_link a:visited{
	color: #fff;
}

/* Teacher Link from Student App */
#teacherLink {
  position: fixed;
  height: 37px;
  width: 100%;
  bottom: 0px;
  z-index: 999;
  color: white;
  background-color: #47b7ba;
  cursor: pointer;
  cursor: hand; }

#teacherLinkContent {
  display: table;
  height: 100%;
  margin: 0 auto; }

#teacherLinkContent span {
  display: table-cell;
  vertical-align: middle; }

#teacherLinkIcon {
  padding-right: 10px; }

#teacherLinkText {
  font-size: 16px;
  font-family: 'BentonSans-Book', Arial, sans-serif; }

  
  
  
  
.page-flip {
	width: 746px;
	min-height: 656px;
	height: auto;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: 0px;
	bottom: 64px;
	left: 50%;
	margin-left: -415px;
	z-index: 11;
	display: none;
}

#flip1 { background-image: url('../images/flip1.png'); }
#flip2 { background-image: url('../images/flip2.png'); }
#flip3 { background-image: url('../images/flip3.png'); }
#flips2 { background-image: url('../images/flips2.png'); }
#flips3 { background-image: url('../images/flips3.png'); }
#flip2-map { background-image: url('../images/flip2-map.png'); }
#flip3-map { background-image: url('../images/flip3-map.png'); }
#flips2-map { background-image: url('../images/flips2-map.png'); }
#flips3-map { background-image: url('../images/flips3-map.png'); }


/* Disable Portrait Mode in Mobile Browsers*/
@media only screen and (orientation: portrait) {
  .orientation-overlay {
    background-color: #f37321;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 999999;
    display: block;
    top: 0px;
    margin: 0px;
    bottom: 0px;
    padding: 0px;
    left: 0px;
    right: 0px;
  }
  .orientation-overlay .orientation-content {
    text-align: center;
    color: #fff;
    margin-top: 20%;
  }
  .orientation-overlay .orientation-content img svg path {
    fill: #fff;
  }
  .orientation-overlay .orientation-content h3 {
    color: #fff;
    font-family: 'BentonSans-Bold', Arial, sans-serif;
    font-size: 16px;
  }
  .orientation-overlay .orientation-content h1 {
    color: #fff;
    font-family: 'Amplify-Light', Arial, sans-serif;
    font-size: 16px;
  }
}
@media only screen and (orientation: landscape) {
  .orientation-overlay {
    display: none;
  }
}

.flippable, .front, .back{
    position: absolute;
}
.flippable{
-webkit-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;
}
.flippable.flipped .flipper{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
}
.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}