@charset "utf-8";
/* CSS Document */

@font-face {
  font-family: 'Euphorigenic';
  src: url('../font/Euphorigenic.svg#Euphorigenic') format('svg'), url('../font/Euphorigenic.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'euphorig';
  src: url('../font/euphorig.eot');
  src: url('../font/euphorig.eot?#iefix') format('embedded-opentype'), url('../font/euphorig.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
    font-family: 'Museo-Sans';
    src: url('../fonts/MuseoSans/MuseoSans-900.eot'); /* IE9 Compat Modes */
    src: url('../fonts/MuseoSans/MuseoSans-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/MuseoSans/MuseoSans-900.woff') format('woff'), /* IE 9-11 & Modern Browsers */
         url('../fonts/MuseoSans/MuseoSans-900.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('../fonts/MuseoSans/MuseoSans-900.svg#svgFontName') format('svg'); /* Legacy iOS */
    }



#title_font{ 
	position:absolute;
	font-family: Euphorigenic, euphorig;
	text-align: center;
	font-size: 800%;
	color: #fff;
	margin: 0 auto;
	top: 240px;
	left: 0;
	right: 0;
	
}

#results_font{ 
	position:absolute;
	width: 571px;
	font-family: Euphorigenic, euphorig;
	font-size: 500%;
	color: #fff;
	margin: 0;
	top: 0;
	left: 0;
	text-align: center;
	
}

#welcome_font{ 
	position:absolute;
	font-family: Euphorigenic, euphorig;
	font-size: 180%;
	color: #44362e;
	margin: -13px 0 0 -159px;
	left: 50%;
	top: 0;
}

#scenario_font{ 
	position:absolute;
	font-family: Euphorigenic, euphorig;
	font-size: 180%;
	color: #44362e;
	margin: -13px 0 0 -52px;
	left: 50%;
	top: 0;
}

#details_font{ 
	position:absolute;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 120%;
	color: #fff;
	margin: 50px 0 0 13px;
	left: 50%;
	top: 4px;
	font-weight: normal;
}


.font_style1{
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:87.50%;
}

.font_style2{
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:100%;
	text-decoration: underline;
}

.font_style3{
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:120%;
}

body {
	background-color: #133f63;
}

.center_text {
	text-align: center;
}

.bold_text{
	font-weight:bold;
}

.white_text {
	color: #ffffff; 
}

.green_text {
	color:#288722;
}
.gray_text{
	color:#333;
}

.red_text {
	color:#DF5052;
}

.green_button{
	background-color: #60A451;
	border: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 93.75%;
	font-weight: bold;
	color: #fff;
	width: 148px;
	height: 34px;
	cursor: pointer;
}

.green_button:hover{
	background-color: #69AD5A;
}



.blue_button{
	background-color: #0176D0;
	border:1px solid #0176D0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 93.75%;
	font-weight: bold;
	color: #fff;
	width: 148px;
	height: 34px;
	cursor: pointer;
}

.blue_button:hover{
	background-color: #017EDF;
}


.red_button {
	background-color: #E77265;
	border: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 93.75%;
	font-weight: bold;
	color: #fff;
	width: 148px;
	height: 34px;
	cursor: pointer;
}

.red_button:hover {
	background-color: #E97F73;
}


#disable_screen{
	position:absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #003366;
	opacity: .8;
	z-index: 99;
}

.main_div{
	position:absolute;
	width: 1366px !important;
	height:768px;
	top: 50%;
  	left: 50%;
 	margin: -384px 0 0 -683px;
	overflow-y:hidden;
	background-image: url("../img/background_img.svg");
	background-size: 1366px 768px;
	background-repeat: no-repeat;
	z-index: 1;
}

.main_div_repeat{
	position:absolute;
	width: 100% !important;
	height:768px;
	top: 0;
  	left: 0;
	overflow-y:hidden;
	background-image: url("../img/repeat_background.svg");
/*	background-size: 30px 1425px;*/
	background-repeat: repeat-x;
	z-index: 1;
}

#intro_div{
	position:absolute;
	width: 800px !important;
	height:950px;
	top: 50%;
  	left: 50%;
 	margin: -475px 0 0 -400px;
	overflow-y:hidden;
	z-index: 2;
	opacity: 0;
}

#folder_page_container{
	position:absolute;
	width: 350px;
	height:498px;
	top: 260px;
  	left: 425px;
}


#folder_page_container:focus { 
	outline: none; 
}


.folder_pages{
	position:absolute;
	width: 335px;
	height:498px;
	text-align: center;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 93.75%;
}

#folder_page1{
	z-index: 2;
}

#folder_page2{
	z-index: 1;
}

#folder_title{
	position:absolute;
	width: 318px;
	height:26px;
  	left: 50%;
 	margin: -13px 0 0 -159px;
	top: 0;

}

#scenario_title{
	position:absolute;
	width: 113px;
  	left: 50%;
 	margin: -13px 0 0 -49.5px;
	top: 0;
}

.folder_arrows{
	position:absolute;
	width: 80px;
	height:72px;
	z-index: 3;
	cursor: pointer;
}

#folder_back_arrow{
	top: 388.5px;
	left: -22px;
}

#folder_next_arrow{
	top: 388.5px;
	right: -11px;
}

#preloader_screen{
	position:absolute;
	width: 1366px !important;
	height:768px;
	top: 45%;
  	left: 50%;
 	margin: -384px 0 0 -683px;
	z-index: 3;
}



#launch_screen{
	position:absolute;
	width: 1040px !important;
	height:535px;
	top: 50%;
  	left: 50%;
 	margin: -267.5px 0 0 -520px;
	z-index: 3;
}

#launch_container{
	position:absolute;
	width: 424px;
	top: 50%;
  	left: 50%;
	margin: -75px 0 0 -180px;
	z-index: 2;
	border: 1px #288722 solid;
	background-color: #fff; 
}

#launch_header{
	position:relative;
	width: 425px;
	height: 25px;
	padding-top: 5px;
	padding-bottom: 4px;
	top: -13px;
  	left: 0;
	text-align: center;
	background-color: #288722;
}

#launch_title{
	position:absolute;
	margin: 0 auto;
	top: 0;
	left:0;
	right:0;
}

#launch_image{
	width: 175px;
	transform: rotate(-5deg);
	float: left;
	margin-top: -23px;
	
}

#launch_text{
	width: 240px;
	float: left;
	margin-top: -19px;
	margin-left: 5px;
}

#launch_button{
	z-index: 2;
}

#launch_background_image{
	position:absolute;
	margin: 0 auto;
	top: 0;
	left:0;
	right:0;
	width: 1000px;
	height: 535px;
	opacity: 0.05;
}

#title_image{
	position:absolute;
	margin: 0 auto;
	top: 240px;
	left:465px;
	width: 440px;
	height: 125px;
}

#loader{
	position:absolute;
	margin: 0 auto;
	top: 400px;
}

#start_div{
	position:absolute;
	width: 430px !important;
	height:230px;
	top: 50%;
  	left: 50%;
 	margin: -115px 0 0 -215px;
	overflow-y:hidden;
	z-index: 2;
	opacity: 0;
}

#start_image_div{
	position:absolute;
	margin: 0 auto;
	top: 395px;
	left: 465px;
	width: 430px;
	height: 230px;
	opacity: 0;
}

#preloader_image{
	position:absolute;
	margin: 0 auto;
	top: 100px;
	left:0;
	right:0;
	width: 1000px;
	height: 535px;
	opacity: 0.05;
}

#loading_text{
	position:absolute;
	margin: 0 auto;
	top: 440px;
	left: 29px;
	right:0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 87.50%;
	color: #ffffff; 
	text-align: center;
}
#asset_text{
	position:absolute;
	margin: 0 auto;
	top: 460px;
	left: 29px;
	right:0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 87.50%;
	color: #ffffff; 
	text-align: center;
}


#start_button{
	position: absolute;
	margin: 0 auto;
	top: 650px;
	left:0;
	right:0;
	z-index: 2;
}


#gameboard_div{
	position:absolute;
	width: 900px !important;
	height: 612px;
	top: 50%;
  	left: 50%;
 	margin: -306px 0 0 -450px;
	z-index: 4;
	opacity: 0;
	display: inline-block;
}




.right_panel_titles{
	position: absolute;
	width: 267px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 110%;
	color: #fff;
	border-bottom: 1px solid #fff;
}

#right_panel{
	position: absolute;
	top: 5px;
	right: 0;
	width: 267px;
	height: 612px;
}

#left_panel{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 612px;
}


.right_panel_titles{
	position: absolute;
	width: 267px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 125%;
	color: #fff;
	border-bottom: 1px solid #fff;
  	left: 50%;
 	margin: -15px 0 0 -133.5px;
}

#accusation_button{
	position: absolute;
	width: 215px !important;
	height: 43px !important;
	margin: auto;
	left: 0;
	right: 0;
	bottom: 10px;
	cursor: pointer;
	background-color: #D2802D !important;
}

#accusation_button:hover{
	background-color: #D5893D !important;
}

#scenario_div{
	position:absolute;
	width: 267px;
  	height: 340px;
	top:20px;
	background-image: url("../img/main_panel_scenario_background_img.svg");
}

#scenario_div_text{
	position:absolute;
	top: 10px;
	left: 15px;
	width: 235px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 87.50%;
	text-align: center;
	
}

#selections_title{
	top: 395px;
}

#selections_div{
	position:absolute;
	width: 267px;
  	height: 114px;
	top: 415px;
}

.selection_divs{
	width: 83px;
  	height: 114px;
	display:inline-block;
}

.selection_images{
	width: 83px;
  	height: 114px;
	z-index: 2;
}

#selection_div1{
	
	background-image: url("../img/main_panel_suspect_background_img.svg");
	margin-right: 4px;
}

#selection_div2{
	background-image: url("../img/main_panel_location_background_img.svg");
	margin-right: 4px;
}

#selection_div3{
	background-image: url("../img/main_panel_method_background_img.svg");
}



#instructions_div{
	position:absolute;
	padding:5px;
	top: -16px;
  	left:0;
	right:0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 100%;
	color: #fff;
	font-weight: bold;
	text-align: center;
	background-color: #0e3149;
	border: 1px solid #082430;
	display: inline-block;
	width: 559px;
}

#suspect_cards_div{
	position:absolute;
	top:45px;
	left: 0;
	width: 100%;
	height: 524px;
	z-index: 1;
}

#location_cards_div{
	position:absolute;
	top:45px;
	left: 0;
	width: 100%;
	height: 524px;
	z-index: 2;
}

#method_cards_div{
	position:absolute;
	top:45px;
	left: 0;
	width: 100%;
	height: 524px;
	z-index: 3;
}

.cards_row1{
	position:absolute;
	width: 100%;
	height: 250px;
	top: 0;
	
}

.cards_row2{
	position:absolute;
	width: 100%;
	height: 250px;
	top: 270px;
	
}

.feedback_card_divs{
	pointer-events: none;
		position:relative;
	width: 175px;
	height: 250px;
	display: inline-block;
	border: 1px solid #082430;
	-webkit-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	font-smoothing: subpixel-antialiased;
}



#feedback_div{
	position:absolute;
	width: 585px !important;
	height: 500px;
	top: 40px;
  	left: 50%;
 	margin: 0 0 0 -292.5px;
	z-index: 4;
	opacity: 0;
}


#feedback_title_image_correct{
	position:absolute;
	width: 788px;
	left: 50%;
 	margin-left:  -394px;
	top: -18px;
}

#feedback_title_image_incorrect{
	position:absolute;
	width: 372px;
	left: 50%;
 	margin-left: -186px;
	top: -18px;
}

#feedback_instructions_div{
	position:absolute;
	padding:5px;
	top: 115px;
  	left:0;
	right:0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 100%;
	color: #fff;
	font-weight: bold;
	text-align: center;
	background-color: #0e3149;
	border: 1px solid #082430;
	display: inline-block;
	width: 561px;
}

#feedback_cards_div{
	position:absolute;
	top: 170px;
	width: 100%;
}

#feedback_indicator_row{
	position:absolute;
	width: 571px;
	height: 42px;
	top: 650px;
	left: 353px;
	margin: -210px 0 0 -285.5px;
}

.feedback_indicators{
	position:relative;
	width: 40px;
	height: 40px;
	display: inline-block;
}

.indicator_text{
	position:relative;
	width: 175px;
	display: inline-block;
	text-align: center;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 93.75%;
	font-weight: bold;
	color: #fff;
}

#feedback_indicator_text_row{
	position:absolute;
	width: 571px;
	height: 30px;
	top: 493px;
}

#suspect_indicator_text, #location_indicator_text {
	margin-right: 19px;
}

#suspect_indicator_img, #location_indicator_img {
	margin-right: 157px;
}

#feedback_text_div{
	position:absolute;
	width: 100% !important;
	height: 500px;
	top: 650px;
  	left:0;
	z-index: 4;
	opacity: 0;
	background-color: #fff;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 93.75%;
	padding: 10px;
}


#feedback_text_container{
	position: absolute;
	width: 700px;
	height: auto;
	left: 50%;
	text-align: center;
	margin: 0 0 0 -350px;
}

#feedback_title{
	font-size: 100%;
	font-weight: bold;
	text-decoration: underline;
}

#try_again_button{
	position:absolute;
	margin: auto;
	top: 555px;
	right: 0 !important;
	bottom: 0;
	left: 0 !important;
}

#replay_button{

}

#mute_image {
	position:absolute;
	width: 59px !important;
	height:21px !important;
	top: 15px;
	right: 15px;
	z-index: 101;
	cursor:pointer;
}

.feedback_button{
	display: inline-block;
}

.div_focus{
	border-style: dotted !important;
	border-color: #FFFFFF !important;
	border-width: 1px !important;
}

.card_divs{
	position:relative;
	width: 175px;
	height: 250px;
	display: inline-block;
	border: 1px solid #082430;
	cursor:pointer;
	transition: transform .2s ease-in-out;
	-webkit-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	transform: translateZ(0) scale(1.0);
	font-smoothing: subpixel-antialiased;
}

.card_divs:hover{
	-ms-transform: scale(1.03); 
	-moz-transform: scale(1.03);
	-o-transform: scale(1.03);
	-webkit-transform: scale(1.03);
	transform: scale(1.03);
	font-smoothing: subpixel-antialiased;
}

.card_divs:focus, .selection_divs:focus,#mute_image:focus, .feedback_indicators:focus, .feedback_card_divs:focus {
outline-color: #fff;	
	
}

.div_center{
	display: table-cell; 
	vertical-align: middle;
	font-smoothing: subpixel-antialiased;
}

.cards_div0, .cards_div1, .cards_div3, .cards_div4 {
	margin-right: 16px;
}

.card_images{
	width: 175px;
	height: 250px;
	
}

.title_divs{
	position: absolute;
	display: table; 
	bottom:25px;
	background-color:#4078B0;
	width: 175px;
	height: 35px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 81.25%;
	font-weight: bold;
	text-align: center;
	color:#fff;
	z-index: 2;
}

.card_div_deselect_buttons{
	position: absolute;
	top: -1px;
	right: -1px;
	width: 54px;
	height: 48px;
	cursor: pointer;
	z-index: 3;
}


#buttons_div{
	position: absolute;
	width: 571px;
	height: 38;
	display:inline-block;
	bottom: -10px;
}

.category_buttons{
	width: 176px;
	height: 34px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 93.75%;
	font-weight: bold;
	display: inline-block;
}

.active_button{
	background-color: #60A451;
	border: none;
	color: #fff;
	cursor: pointer;
}

.active_button:hover{
	background-color: #69AD5A;
}

.inactive_button:hover {
	background-color: #e1b68d;
}

.inactive_button{
	background-color: #e1b68d;
	border: 1px solid #af8f74;
	color: #7a6351;
}

#suspects_button, #locations_button{
	margin-right: 17px;
}

#locations_button{
	
}

#methods_button{
	
}

.exit_button{
	position: absolute;
	top: 15px;
	right: 15px;
	width: 25px;
	height: 25px;
	padding:0px;
	z-index: 2;
	cursor: pointer;
}
.exit_button:hover{
	/*background-color: #a50505;*/
}

.popup_menu{
	position:absolute;
	width: 518px;
	height: 327px;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100;
	opacity: 0;
}


#next_category_popup_menu, #instruction_popup_menu, #make_accusation_menu{
	background-color: #fff;
}

.popup_menus_continue_button{
	position:absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	right: 10px; 
}

.popup_menus_cancel_button{
	position:absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 10px; 
}

#instructions_continue_button{
	position:absolute;
	margin: auto;
	top: 0;
	right: 0 !important;
	bottom: 0;
	left: 0 !important;
}

.popup_banner{
	position:absolute;
	margin: auto;
	top: 0;
	width: 512px;
	height: 27px;
	border-bottom: 1px solid #999;
	background-color: #6086C3;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 100%;
	color: #fff;
	padding-top:7px;
	padding-left:6px;
}

.popup_image{
	position:absolute;
	margin: auto;
	top:50px;
	right:10px;
}

.popup_text{
	position:absolute;
	margin: auto;
	left:10px;
	font-size: 93.75%;
}

.popup_footer{
	position:absolute;
	margin: auto;
	bottom: 0;
	width: 498px;
	height: 65px;
	padding:10px;
	background-color: #EBECED;
	display: inline-block;
}

.popup_body{
	position:absolute;
	margin: auto;
	top: 35px;
	width: 500px;
	height: 160px;
	padding-top:10px;
	font-size: 100%;
	font-family: Arial, Helvetica, sans-serif;
}

.popup_title{
	font-size: 93.75% !important;
	padding-top:10px;
	padding-left:10px;
	font-weight:bold;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#description_popup_menu{
	width: 400px !important;
	height: 520px !important;
	background-image: url("../img/pop_up_background.svg") !important;
	

}

#description_popup_menu:focus { 
	outline: none; 
}

#suspect_cards_div:focus { 
	outline: none; 
}

#location_cards_div:focus { 
	outline: none; 
}
#method_cards_div:focus { 
	outline: none; 
}
.popup_menu:focus { 
	outline: none; 
}


#description_popup_select_button{
	position: absolute;
	margin: 0 auto;
	left:0;
	right:0;
	bottom: 25px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	z-index: 2;
}

#description_images{
	position: absolute;
	width: 190px;
	height: 190px;
	top: 4px;
	left: 4px;
	z-index: 4;
}

#description_upper_text{
	position: absolute;
	width: 130px;
	height: 105px;
	top: 85px;
	left: 212px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 87.50%;
	z-index: 5;
}

#description_lower_text{
	position: absolute;
	width: 345px;
	height: 170px;
	top: 185px;
	left: 30px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 87.50%;
	z-index: 6;
	
}

#description_lower_text li {
	margin-left: -20px;
}

.description_popup_icons{
	position: absolute;
	bottom:20px;
	z-index: 3;
}

#description_popup_suspect_icon{
	width: 26px; 
	height: 28px;
	right: 20px;
}

#description_popup_location_icon{
	width: 21px;
	right: 20px;
}

#description_popup_method_icon{
	width: 34px;
	height: 24px;
	right: 20px;
}

progress[value] {
  width: 240px;
	height: 28px;
  height: 18px;
}

progress, progress[role]{
	position:relative;
	margin: 0 auto;
	top: 525px;
	left:575px;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	background-size: auto;
	z-index: 1;
    padding: 2px;
	border: 1px solid #fff;
}



/* No image in polyfill */
progress[role]:after {
	background-image: none; 
}

/* Hides text in polyfill */
progress[role] strong {
	display: none;
}

/* Progress Bar Colors */
progress { 
    color: #8abf80;
}

progress::-moz-progress-bar { 
    background: #8abf80;	
}

progress::-webkit-progress-value {
    background: #8abf80;
}

progress[aria-valuenow]:before  {
    background: #8abf80;
}