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

body {
    /*font-family: Impact, Charcoal, sans-serif;*/
    
    font-family: Lato;
    cursor: default;
	background-color:#d8f0e8;
}
@font-face {
    font-family: crayon;
    src: url(fonts/dk_crayon_crumble-webfont.woff);
}
/*Prevent Image Highlight*/

img {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}
/*Spalsh Page*/

#splash {
    width: 100%;
    height: 100%;
    background: #000;
    background: url('images/splash_screen.jpg') no-repeat center center;
    background-size: cover;
}
#mia_splash {
    background: url('images/mia.png') no-repeat center center;
    width: 8%;
    height: 26%;
    z-index: 2;
    position: absolute;
    background-size: cover;
    bottom: 1.5vh;
    left: 54%;
}
#splash_start_buttons {
    text-align: center;
    top: 75%;
    position: relative;
    font-size: 2vw;
    color: #333333;
    display: block;
    margin: 0 auto;
}
/*Menu*/

ul.form {
    position: relative;
    background: #fff;
    width: 16%;
    margin: auto;
    padding: 0;
    list-style: none;
    overflow: hidden;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
}
.form li a {
    padding-left: 0.5vw;
    line-height: 3.5;
    display: block;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 50%;
    color: #686868;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.form li a:hover {
    background: #efefef;
}
.form li a.profile {} .form li a.messages {} .form li a.settings {} .form li a.logout {} .form li:first-child a:hover,
.form li:first-child a {
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}
.form li:last-child a:hover,
.form li:last-child a {
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}
.form li a:hover i {
    color: #ea4f35;
}
.form i {
    margin-right: 15px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.form em {
    font-size: 10px;
    background: #ea4f35;
    padding: 3px 5px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    font-style: normal;
    color: #fff;
    margin-top: 17px;
    margin-right: 15px;
    line-height: 10px;
    height: 10px;
    float: right;
}
.form li.selected a {
    background: #efefef;
}
/*End Menu*/

#game_start {
    color: #333333;
}
#tutorial_start {
    color: #333333;
}
#about_start {
    color: #333333;
}
#gameArea {
    position: absolute;
    left: 50%;
    top: 50%;
}
#gameCanvas {
    position: relative;
    margin: 0px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: #000;
    background: url('images/chalkboard.jpg') no-repeat center center;
    background-size: cover;
    background-position: left center;
}
#tutSkip {
    margin: 0 auto;
    position: relative;
    text-align: center;
    font-size: 2vw;
    margin-top: 22vw;
    cursor: pointer;
}
/*Progress Page*/

#progress_container {
    position: absolute;
    display: none;
    top: 69.5%;
    height: 25%;
    width: 100%;
}
.post {
    height: 60%;
    width: 7%;
    background: url('images/progress_post_empty.png') no-repeat center center;
    background-size: cover;
    position: absolute;
}
#post_prev {
    cursor: pointer;
    left: 105%;
	background: none;
}
#post_next {
    cursor: pointer;
    left: 95%;
	background: none;
}
#post1 {
    cursor: pointer;
    left: 18%;
}
#post2 {
    cursor: default;
    left: 47%;
}
#post3 {
    cursor: default;
    left: 77%;
}
#post4 {
    cursor: default;
    left: 118%;
}
#post5 {
    cursor: default;
    left: 147%;
}
#post6 {
    cursor: default;
    left: 177%;
}
#post7 {
    cursor: default;
    left: 247%;
}
#progress_bar {
    background-color: #e74c3c;
    height: 7%;
    width: 0%;
    background-size: cover;
    position: absolute;
    top: 45%;
}
.post_num {
    text-align: center;
    font-size: 1.25vw;
    line-height: 2.75vw;
}
/*HUD*/

#HUD {
    position: absolute;
    width: 100%;
    height: 12%;
    top: 0;
    display: none;
}
#mia_icon {
    height: 87%;
    width: 6.5%;
    background: url('images/mia_icon.png') no-repeat center center;
    background-size: cover;
    left: 2%;
    top: 50%;
    position: absolute;
    cursor: pointer;
}
#well_being {
    height: 36%;
    width: 11%;
    left: 11%;
    top: 80%;
    position: absolute;
}
#well_being_meter {
    height: 50%;
    width: 100%;
    background-color: rgba(0, 0, 0, .4);
    left: 0%;
    top: 60%;
    position: absolute;
}
#well_being_title {
    margin-top: -5%;
    text-align: center;
    font-size: 1.25vw;
    color: #fff;
}
#well_being_current {
    height: 100%;
    width: 50%;
    background-color: rgba(255, 255, 255, 1);
    left: 0;
    top: 0;
    position: relative;
}
#dice_container {
    height: 80%;
    width: 80%;
    left: 10%;
    top: 35%;
    position: absolute;
	color: #fff;
}
#dice_safety {
    height: 65%;
    width: 5%;
    background: url('images/dice_safety.png') no-repeat center center;
    background-size: cover;
    left: 17%;
    top: 50%;
    position: absolute;
    display: block;
}
#dice_community {
    height: 65%;
    width: 5%;
    background: url('images/dice_community.png') no-repeat center center;
    background-size: cover;
    left: 25%;
    top: 50%;
    position: absolute;
}
#dice_support {
    height: 65%;
    width: 5%;
    background: url('images/dice_support.png') no-repeat center center;
    background-size: cover;
    left: 33%;
    top: 50%;
    position: absolute;
}
#dice_safety_count {
    font-size: 2vh;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: #000;
    top: 27%;
    left: 39.5%;
    position: absolute;
    display: block;
}
#dice_community_count {
    font-size: 2vh;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: #FFF;
    top: 27%;
    left: 39.5%;
    position: absolute;
    display: block;
}
#dice_support_count {
    font-size: 2vh;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: #FFF;
    top: 27%;
    left: 39.5%;
    position: absolute;
    display: block;
}
/*About*/

#about_text {
    color: #fff;
    text-align: center;
    font-size: 1em;
    padding: 2vw 4vw;
    position: absolute;
    width: 84%;
}
/*Tutorial HUD*/

#well_being_tut {
    height: 10%;
    width: 11%;
    left: 45%;
    position: absolute;
    top: 20%;
}
#well_being_meter_tut {
    height: 50%;
    width: 100%;
    background-color: rgba(0, 0, 0, .4);
    left: 0%;
    top: 60%;
    position: absolute;
}
#well_being_title_tut {
        position: relative;
    left: 8%;
    top: -4%;
    font-size: 1vw;
    color: #fff;
}
#well_being_current_tut {
    height: 100%;
    width: 50%;
    background-color: rgba(255, 255, 255, 1);
    left: 0;
    top: 0;
    position: relative;
}
.mia_icon_report {
    height: 4.4vw;
    width: 4vw;
    background: url('images/mia_icon.png') no-repeat center center;
    background-size: cover;
    position: absolute;
    left: 45%;
    top: 10%;
}
.mia_icon_tut {
    height: 27%;
    width: 10%;
    background: url('images/mia_icon.png') no-repeat center center;
    background-size: cover;
    position: relative;
    margin-left: 45%;
    margin-top: 4%;
}
#tutorial_text {
    color: #fff;
    text-align: center;
    font-size: 1.5vw;
    padding: 2vw 4vw;
    top: 35%;
    position: absolute;
    width: 84%;
}
#dice_container_tut {
    height: 25%;
    width: 20%;
    left: 55%;
    top: 20%;
    position: absolute;
}
#dice_safety_tut {
    height: 65%;
    width: 31%;
    background: url('images/dice_safety.png') no-repeat center center;
    background-size: cover;
    position: absolute;
    display: block;
}
#dice_community_tut {
    height: 65%;
    width: 31%;
    background: url('images/dice_community.png') no-repeat center center;
    background-size: cover;
    left: 35%;
    position: absolute;
}
#dice_support_tut {
    height: 65%;
    width: 31%;
    background: url('images/dice_support.png') no-repeat center center;
    background-size: cover;
    left: 70%;
    position: absolute;
}
#dice_safety_count_tut {
    font-size: 1em;
    font-size: 1vw;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: #000;
    top: 27%;
    left: 39.5%;
    position: absolute;
    display: block;
}
#dice_community_count_tut {
    font-size: 1em;
    font-size: 1vw;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: #FFF;
    top: 27%;
    left: 39.5%;
    position: absolute;
    display: block;
}
#dice_support_count_tut {
    font-size: 1em;
    font-size: 1vw;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: #FFF;
    top: 27%;
    left: 39.5%;
    position: absolute;
    display: block;
}
#objective_text {
    height: 65%;
    width: 45%;
    left: 52%;
    top: 85%;
    text-align: right;
    color: #fff;
    position: absolute;
    font-size: 2.5em;
    font-size: 1.6vw;
    display: none;
}
#level_start {
    position: absolute;
    width: 100%;
    color: #FFF;
    padding: 1vw 0 1vw 0;
    text-align: center;
    font-size: 4vw;
    display: none;
    margin: 0 auto;
    background: rgba(91, 193, 166, 1);
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}
/*Backpack*/

#backpack_container {
    position: relative;
    width: 40vw;
    height: 20vw;
    margin: 0 auto;
    background: rgb(91, 193, 166);
    border: 0.75vw solid;
    border-color: rgb(136, 220, 198);
    display: none;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}
#backpack_title {
    text-align: center;
    height: 15%;
    width: 100%;
    position: relative;
    color: #FFF;
    font-size: 2vw;
    margin: 0 auto;
    padding-top: 2vw;
    margin-bottom: -4vw;
}
#backpack_icon {
    float: left;
    height: 7vw;
    width: 7vw;
    position: relative;
    padding-left: 2.5vw;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    color: #FFF;
    font-size: 1.25vw;
}
#Draggable {
    float: left;
    width: 5vw;
    height: 6vw;
    cursor: pointer;
}
#Draggable1 {
    float: left;
    width: 5vw;
    height: 6vw;
    cursor: pointer;
}
#Draggable2 {
    float: left;
    width: 5vw;
    height: 6vw;
    cursor: pointer;
}
#Draggable3 {
    float: left;
    width: 5vw;
    height: 6vw;
    cursor: pointer;
}
#Draggable4 {
    float: left;
    width: 5vw;
    height: 6vw;
    cursor: pointer;
}
#Draggable5 {
    float: left;
    width: 5vw;
    height: 6vw;
    cursor: pointer;
}
#Droppable {
    float: right;
    width: 5vw;
    height: 6vw;
    position: relative;
    padding-right: 3.5vw;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    color: #FFF;
    font-size: 1.25vw;
}
#pile {
    width: 6vw;
    height: 5vw;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
/*Candy Sort*/

#candy_container {
    position: relative;
    width: 40vw;
    height: 20vw;
    margin: 0 auto;
    background: #602748;
    border: 0.75vw solid;
    border-color: #3e1c34;    
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
	display:none;
}
#candy_title {
    text-align: center;
    height: 2vw;
    width: 90%;
    position: relative;
    color: #FFF;
    font-size: 2vw;
    margin: 0 auto;
    padding-top: 2vw;
    margin-bottom: -4vw;
}
#candy_count {
    margin-top: 115%;
}
#next_house{
    text-align: center;
    height: 2vw;
    width: 90%;
    position: relative;
    color: #FFF;
    font-size: 2vw;
    margin: 0 auto;
	margin-top:5%;
    padding-top: 2vw;
    margin-bottom: -4vw;
	cursor:pointer;
}
#candy_icon {
    float: left;
    height: 35%;
    width: 20%;
    position: relative;
    padding-left: 2.5vw;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    color: #FFF;
    font-size: 1.25vw;
}
#Candy1 {
    float: left;
    width: 5vw;
    height: 6vw;
    cursor: pointer;
}
#Candy2 {
    float: left;
    width: 5vw;
    height: 6vw;
    cursor: pointer;
}
#Candy3 {
    float: left;
    width: 5vw;
    height: 6vw;
    cursor: pointer;
}
#Candy4 {
    float: left;
    width: 5vw;
    height: 6vw;
    cursor: pointer;
}
#Candy5 {
    float: left;
    width: 5vw;
    height: 6vw;
    cursor: pointer;
}
#Candy6 {
    float: left;
    width: 5vw;
    height: 6vw;
    cursor: pointer;
}
#candy_bucket {
    float: right;
    width: 16%;
    height: 36%;
    position: relative;
    margin-right: 6%;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    color: #FFF;
    font-size: 1.25vw;
    background: url('images/candy_bucket.png') no-repeat center center;
    background-size: cover;
}
#candy_pile {
    width: 100%;
    height: 60%;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}


.item_image {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}
#level_title {
    width: 60%;
    color: #000;
    font-size: 3vw;
    margin: 0 auto;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}
#dialogue_container {
    height: 41%;
    width: 68%;
    left: 15.5%;
    top: 30%;
    position: absolute;
    background-color: rgba(0, 114, 188, 0.9);
    border: 10px solid;

    border-color: rgba(109, 207, 246, 0.9);
    z-index: 2;
}
#reportcard_container {
    height: 84%;
    width: 45%;
    left: 50%;
    margin-left: -22.5%;
    box-shadow: 3px 8px 4px #464646;
    top: 12%;
    position: absolute;
    background: #ffffff;
    font: 1.25vw "Courier New", Courier, monospace;
    z-index: 2;
	outline: solid #322c18 2px;
    outline-offset: -15px;
}
.reportcard_heading {
    padding: 1.5vw 0 1vw 0;
}
#report_comments 
{
	font-size:1.20vw;
}
#reportcard_text {
    color: #000;
    text-align: center;
    font-size: 1.25vw;
    padding: 2vw 2vw;
    position: absolute;
}
#ingredients_container {
    height: 68%;
    width: 41%;
    left: 50%;
    top: 20%;
    position: absolute;
    background-color: rgba(255, 255, 255, 1);
	font: 1.25vw "Courier New", Courier, monospace;    
    z-index: 2;
}
.ingredients_list {
overflow:auto; height:60%; margin-top:4%; position: absolute;
}
#vanilla_list {display:block;}
#chocolate_list {display:none;}
#caramel_list {display:none;}
#marble_list {display:none;}

#ingredients_text {
    color: #000;
    text-align: center;
    font-size: 1.25vw;
    margin: 2vw 2vw;
    position: absolute;
    width: 84%;
	height:100%;
}
#ingredients_prev{
    cursor:pointer;
}
#ingredients_next{
    cursor:pointer;
}
#ingredients_done{
    cursor:pointer;
}
#vanilla_peanut{ display:inline;}
#caramel_peanut{ display:inline;}
#marble_peanut1{ display:inline;}
#marble_peanut2{ display:inline;}

#checklist_container {
    width: 20%;
    left: 20%;
	padding:0vw 2vw 2vw 2vw;
    top: 20%;    
    position: absolute;
    background-color: rgba(255, 255, 255, 1);    
    z-index: 2;
    font: 2vw 'Just Another Hand', Helvetica, sans-serif;
	background: #ffffff url('images/linedpaper.png') center center;
}

/*Prevent text highlighting*/
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/*Scrollbar*/
::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

#ingredients_text {
    color: #000;
    text-align: center;
    font-size: 1.25vw;
    margin: 2vw 2vw;
    position: absolute;
    width: 84%;
	height:100%;
}
#about_container {
    height: 41%;
    width: 68%;
    left: 15.5%;
    top: 30%;
    position: absolute;
    background-color: rgba(0, 114, 188, 0.9);
    border: 10px solid;
    border-color: rgba(109, 207, 246, 0.9);
    z-index: 2;
}
#dialogue_container_tut {
    height: 41%;
    width: 60%;
    left: 20%;
    top: 30%;
    position: absolute;
    display: block;
    font-family: crayon;
}
.speech_balloon {
    color: #fff;
    border: #FFF solid 1vw;
    border-radius: 1vw;
    background: #fff;    
}
.balloon_text {
    color: #000;
    padding: 1vw 1vw;
    font-size: 1.6vw;
    text-align: center;
}
#dialogue_solo{
	height: 100%;
    width: 100%;
}

#dialogue_solo .speech_balloon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 22%;
	width: 65%;
}

#dialogue_double {
	height: 100%;
    width: 100%;
}

#dialogue_double .speech_balloon {
    position: absolute;
    top: 30%;
    transform: translateY(-50%);
    margin-left: 22%;
    width: 65%;
}

#dialogue_quiz {
	height: 100%;
    width: 100%;
}

#dialogue_quiz .speech_balloon {
    position: absolute;
    top: 30%;
    transform: translateY(-50%);
    margin-left: 22%;
    width: 65%;
}

.npc_chat {
    position: relative;
    margin-top: 13%;
    height: 40%;
    width: 15%;
    float: left;
    margin-left: 5%;
    margin-right: 80%;
}
#dialogue_solo .npc_chat {
    margin-top: 13%;
}

#dialogue_double .npc_chat {
    margin-top: 6%;
}

#dialogue_prompt .npc_chat {
    margin-top: 6%;
}
#dialogue_results .npc_chat {
    margin-top: 6%;
}


.mia_chat {
	position: relative;   
    height: 40%;
    width: 15%;
    float: left;
    margin-left: 5%;
}
.npc_icon {
    height: 65%;
    width: 65%;
    background: url('images/mia_icon.png') no-repeat center center;
    background-size: cover;
    position: relative;
    float: left;
}
.mia_icon_chat {
    height: 65%;
    width: 65%;
    background: url('images/mia_icon.png') no-repeat center center;
    background-size: cover;
    position: relative;
    float: left;
}
.icon_chat_name {
    color: #FFF;
    font-size: 1.2vw;
    text-align: center;
    margin-top: 110%;
}
#dialogue_next {
    position: absolute;
    width: 9%;
    height: 22%;
    cursor: pointer;
    background: url('images/next_icon.png') no-repeat center center;
    background-size: cover;

    top: 50%;
    right: -5%;
    transform: translateY(-50%);
}
#dice_tip {
    color: #fff;
    font-size: 1.2vw;
    width: 20%;
    position: absolute;
    text-align: center;
    right: 0%;
    top: 65%;
    display: none;
}
#dialogue_title {
    margin-left: 10%;
    margin-right: 10%;
    position: relative;
    color: #fff;
    font-size: 2.5vw;
    text-align: center;
}
#dialogue_subtitle {
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 2%;
    margin-bottom: 2%;
    position: relative;
    color: #fff;
    font-size: 1.75vw;
    text-align: center;
}
#dialogue_req {
    margin-right: 10%;
    margin-left: 10%;
    position: relative;
    color: #fff;
    font-size: 1.2vw;
    text-align: center;
}
#well_being_score {
    position: absolute;
    left: 37%;
    top: 55%;
    color: #fff;
    font-size: 2.5vw;
    text-align: center;
    display: none;
    z-index: 1;
}
#results_text {
    color: #fff;
    text-align: center;
    font-size: 1.5vw;
    padding: 2vw 1vw;
    position: absolute;
    top: 30%;
    transform: translateY(-50%);
    margin-left: 22%;
    width: 65%;
}
#results_mia_container {
	height: 100%;
}
#results_1 {
    position: absolute;
    padding: 2vw 1vw;
    top: 120%;
    transform: translateY(-50%);
    width: 90%;
}
#results_2 {
    padding: 2vw 1vw;
    position: absolute;
    top: 100%;
    transform: translateY(-50%);
    width: 90%;
}
#dialogue_chat_results {
    color: #fff;
    text-align: center;
    font-size: 1.5vw;
    padding: 2vw 1vw;
    position: absolute;
    top: 70%;
    transform: translateY(-50%);
    margin-left: 22%;
    width: 65%;
}
.prompt_roll_blue {
    margin-bottom: -1%;
    width: 2vw;
    height: 5vh;
}
.prompt_roll_red {
    margin-bottom: -1%;
    width: 2vw;
    height: 5vh;
}
.prompt_roll_yellow {
    margin-bottom: -1%;
    width: 2vw;
    height: 5vh;
}
#prompt_text {
    color: #fff;
    text-align: center;
    font-size: 1.5vw;
    padding: 2vw 1vw;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 22%;
    width: 65%;
}
#prompt_mia_container{
	height: 100%;
}

#dialogue_options {
    padding: 1vw 1vw;
    color: #fff;    
    float: right;
    width: 60%;
    top: 20%;
    font-size: 1.8vw;
    position: absolute;
    top: 70%;
    transform: translateY(-50%);
    margin-left: 22%;
    width: 65%;
}
#dialogue_option_1 {
    position: relative;
    color: #FFF;
    cursor: pointer;
}
#dialogue_option_1:hover {
    color: #E6E6E6;
}
#dialogue_option_2 {
    position: relative;
    color: #FFF;
    cursor: pointer;
}
#dialogue_option_2:hover {
    color: #E6E6E6;
}
#dialogue_option_3 {
    height: 30%;
    width: 90%;
    left: 28%;
    top: 79%;
    position: absolute;
    color: #FFF;
    font-size: 1.8vw;
    cursor: pointer;
}

#dialogue_options_quiz {
    padding: 1vw 1vw;
    color: #fff;    
    float: right;
    width: 60%;
    top: 20%;
    font-size: 1.75vw;
    position: absolute;
    top: 70%;
    transform: translateY(-50%);
    margin-left: 22%;
    width: 65%;
}
#mia_icon_dialogue_quiz{
	background: url('images/mia_icon_costume.png') no-repeat center center;
	background-size: cover;
}
#dialogue_quiz .npc_chat {
    margin-top: 6%;
}
#npc_name_quiz {
    width: 150%;
    margin-left: -25%;
}
#dialogue_option_quiz_1 {
    position: relative;
    color: #FFF;
    cursor: pointer;
	width: 50%;
    float: left;
}
#dialogue_option_quiz_1:hover {
    color: #E6E6E6;
}
#dialogue_option_quiz_2 {
    position: relative;
    color: #FFF;
    cursor: pointer;
	width: 50%;
    float: left;
}
#dialogue_option_quiz_2:hover {
    color: #E6E6E6;
}
#dialogue_option_quiz_3 {
    position: relative;
    color: #FFF;
    cursor: pointer;
	width: 50%;
    float: left;
}
#dialogue_option_quiz_3:hover {
    color: #E6E6E6;
}
#dialogue_option_quiz_4 {
    position: relative;
    color: #FFF;
    cursor: pointer;
	width: 50%;
    float: left;
}
#dialogue_option_quiz_4:hover {
    color: #E6E6E6;
}

.blue_option {
    margin-bottom: -1%;
    width: 6%;
    padding-right: 0.5%;
}
.blue_option_small {
    margin-bottom: -1%;
    width: 4%;
    padding-right: 0.5%;
}
.red_option {
    margin-bottom: -1%;
    width: 6%;
    padding-right: 0.5%;
}
.red_option_small {
    margin-bottom: -1%;
    width: 4%;
    padding-right: 0.5%;
}

.yellow_option {
    margin-bottom: -1%;
    width: 6%;
    padding-right: 0.5%;
}
.yellow_option_small {
    margin-bottom: -1%;
    width: 4%;
    padding-right: 0.5%;
}
#breq {
    margin-bottom: -1%;
    width: 8%;
    padding-right: 0.5%;
}
#rreq {
    margin-bottom: -1%;
    width: 8%;
    padding-right: 0.5%;
}
#yreq {
    margin-bottom: -1%;
    width: 8%;
    padding-right: 0.5%;
}
#tutorial_text_container {
    font-family: crayon;
    font-size: 2.5vw;
    color: #FFF;
    position: absolute;
    left: 20%;
    top: 30%;
    display: none;
    width: 60%;
    height: 40%;
    text-align: center;
}
#tutorial_next {
    position: absolute;
    top: 95%;
    left: 45%;
    z-index: 5;
}
#tutorial_subtitle {
    position: absolute;
    top: 35%;
    left: 0%;
    font-size: 5vw;
    width: 100%;
    display: none;
}
#dice_roll_yellow {
    display: inline-block;
}
#dice_roll_blue {
    display: inline-block;
}
#dice_roll_red {
    display: inline-block;
}
#dice_safety_roll {
    font-size: 3em;
    font-size: 3vw;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: #FFF;
    top: 27%;
    left: 39.5%;
    position: absolute;
    display: block;
}
/* Dice Roll Button*/

#playFancy {
    position: relative;
    width: 20%;    
    margin-left: 40%;
    margin-right: 40%;
	margin-top: 2%;
}


input[type="button"] {
    -moz-box-shadow:inset 0px 1px 3px 0px #fdb713;
	-webkit-box-shadow:inset 0px 1px 3px 0px #fdb713;
	box-shadow:inset 0px 1px 3px 0px #fdb713;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f68a1f), color-stop(1, #f27222));
	background:-moz-linear-gradient(top, #f68a1f 5%, #f27222 100%);
	background:-webkit-linear-gradient(top, #f68a1f 5%, #f27222 100%);
	background:-o-linear-gradient(top, #f68a1f 5%, #f27222 100%);
	background:-ms-linear-gradient(top, #f68a1f 5%, #f27222 100%);
	background:linear-gradient(to bottom, #f68a1f 5%, #f27222 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f68a1f', endColorstr='#f27222',GradientType=0);
	background-color:#f68a1f;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
    border-radius: 0.25vw;
    border: 0.1vw solid #d9661e;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 0.8vw;
    font-weight: bold;
    padding: 1.75% 4%;
    text-decoration: none;
    text-shadow: 0vw 0.1vw 0vw #d9661e;
}
input[type="button"]:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f27222), color-stop(1, #f68a1f));
	background:-moz-linear-gradient(top, #f27222 5%, #f68a1f 100%);
	background:-webkit-linear-gradient(top, #f27222 5%, #f68a1f 100%);
	background:-o-linear-gradient(top, #f27222 5%, #f68a1f 100%);
	background:-ms-linear-gradient(top, #f27222 5%, #f68a1f 100%);
	background:linear-gradient(to bottom, #f27222 5%, #f68a1f 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f27222', endColorstr='#f68a1f',GradientType=0);
	background-color:#f27222;
}
input[type="button"]:active {
    position: relative;
    top: 1px;
}
input[type="button"]:disabled {
    -moz-box-shadow:inset 0px 1px 3px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 3px 0px #ffffff;
	box-shadow:inset 0px 1px 3px 0px #ffffff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));
	background:-moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:-webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:-o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:-ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0);
	background-color:#ededed;
	-moz-border-radius:0.25vw;
	-webkit-border-radius:0.25vw;
	border-radius:0.25vw;
	border: 0.1vw solid #dcdcdc;
	display:inline-block;
	cursor:default;
	color:#777777;
	font-family:Arial;
    font-size: 0.8vw;
	font-weight:bold;
	padding: 1.75% 4%;
	text-decoration:none;
	text-shadow:0px -1px 0px #ffffff;
}
/*Grids for clickable characters*/

.npc_speech_bubble_text {
    font-size: 1.25vw;
    padding: 0.2vw 1vw;
    text-align: center;
    margin-top: -8%;
    border: #FFF solid 5px;
    border-radius: 0.5vw;
    display: inline-block;
    position: relative;
    border-radius: 10px;
    background: #fff;
    background: linear-gradient(top, #f9d835, #f3961c);
}
.npc_speech_bubble_text:after {
    content: "";
    display: block;
    /* reduce the damage in FF3.0 */
    
    position: absolute;
    bottom: -15px;
    left: 0.5vw;
    width: 0;
    border-width: 15px 15px 0;
    border-style: solid;
    border-color: #fff transparent;
}
.npc_grid_ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    height: 100%;
}
.npc_grid_ul li {
    float: left;    
    cursor: pointer;
}

/*Grid - Old School*/

#npc_OS_grid {
    height: 100%;
	display:none;
}
#npc_grid_OS1 {
    width: 45%;
    height: 100%;
    position: relative;
    margin-left: 27%;
    margin-top: 47%;
	
}
#npc_grid_OS2 {
    width: 22vw;
    height: 7vw;
    position: absolute;
    bottom: 15.5vw;
    right: 28.5vw;
}
#npc_speech_bubble_OS1 {
    display: none;
    position: relative;
}
#bubble_text_OS1 {} #npc_speech_bubble_OS2 {
    display: none;
    position: relative;
}
#npc_speech_OS1 {
    height: 20%;
    width: 12%;
    margin-left: 0%;
}
#npc_speech_OS2 {
    height: 20%;
    width: 12%;
    margin-left: 10%;
    margin-top: -6%;
}
#npc_speech_OS3 {
    height: 20%;
    width: 12%;
    margin-left: 10%;
    margin-top: 6%;
}
#npc_speech_OS4 {
    height: 20%;
    width: 12%;
    margin-left: 10%;
    margin-top: -6%;
}
#npc_speech_OS5 {
    height: 20%;
    width: 12%;
    margin-left: 8%;
    margin-top: -2%;
}
#npc_speech_OS6 {
    height: 8%;
    width: 12%;
    margin-left: 10%;
    margin-top: -12%;
}
#npc_speech_OS7 {
    height: 8%;
    width: 12%;
    margin-left: 3%;
    margin-top: -24%;
}
/*Grid - Cafeteria*/
#mia_standing {
    background: url('images/mia_backpack.png') no-repeat center center;
    width: 6%;
    height: 16%;
    z-index: 1;
    position: absolute;
    background-size: cover;
    bottom: 24%;
    left: 50%;
	display:none;
}
#mia_sitting_tom {
	background: url('images/mia_sitting_tom.png') no-repeat center center;
    width: 6.25%;
    height: 14.5%;
    z-index: 1;
    position: absolute;
    background-size: cover;
    bottom: 21.60%;
    left: 26%;
	display:none;
}
#mia_sitting_alone {
    background: url('images/mia_sitting.png') no-repeat center center;
    width: 6.25%;
    height: 14.5%;
    z-index: 1;
    position: absolute;
    background-size: cover;
    bottom: 14.20%;
    left: 62%;
	display:none;
}
#npc_cafeteria_grid {
    height:100%;
}
#npc_grid_1 {
    width: 28%;
    height: 100%;
    position: relative;
    margin-left: 15%;
    margin-top: 42%;
	float: left;
}
#npc_grid_2 {
    width: 25%;
    height: 100%;
    position: relative;
    margin-left: 16%;
    margin-top: 42%;
    float: left;
}
#npc_speech_1 {
    height: 10%;
    width: 12%;
    margin-left: 4%;
}
#npc_speech_2 {
    height: 10%;
    width: 12%;
    margin-left: 10%;
}
#npc_speech_3 {
    height: 10%;
    width: 12%;
    margin-left: 22%;
}
#npc_speech_4 {
    height: 10%;
    width: 12%;
    margin-left: 12%;
}
#npc_speech_5 {
    height: 10%;
    width: 14%;
    margin-left: 2%;
}
#npc_speech_6 {
    height: 10%;
    width: 14%;
    margin-left: 10%;
}
#npc_speech_7 {
    height: 10%;
    width: 14%;
    margin-left: 17%;
}
#npc_speech_8 {
    height: 10%;
    width: 14%;
    margin-left: 12%;
}
#npc_speech_bubble_1 {
    display: none;
    position: relative;
}
#npc_speech_bubble_class1 {
    display:none;
	position:relative;
}
#bubble_text1 {} 

#npc_speech_bubble_2 {
    display: none;
    position: relative;
}

/*Grid - Restuarant*/

#npc_restaurant_grid {
    height:100%;
}
#npc_grid_rest1 {
    width: 44%;
    height: 100%;
    position: relative;
    margin-left: 9%;
    margin-top: 46%;
    float: left;
}
#npc_grid_rest2 {
    width: 21%;
    height: 100%;
    position: relative;
    margin-left: 3%;
    margin-top: 46%;
    float: left;
}
#npc_speech_bubble_rest1 {
    display: none;
    position: relative;
}
#bubble_text_rest1 {} 
#npc_speech_bubble_rest2 {
    display: none;
    position: relative;
}
#npc_speech_rest0 {
    height: 20%;
    width: 12%;
    margin-left: 2%;
    margin-top: -8%;
}
#npc_speech_rest1 {
    height: 13%;
    width: 12%;
    margin-left: 18%;
}
#npc_speech_rest2 {
    height: 13%;
    width: 14%;
    margin-left: 4%;
}
#npc_speech_rest3 {
    height: 13%;
    width: 14%;
    margin-left: 3%;
}
#npc_speech_rest4 {
    height: 16%;
    width: 14%;
    margin-left: 7%;
    margin-top: -5%;
}
#npc_speech_rest5 {
    height: 13%;
    width: 24%;
    margin-left: 0%;
}
#npc_speech_rest6 {
    height: 13%;
    width: 24%;
    margin-left: 15%;
}
#npc_speech_rest7 {
    height: 13%;
    width: 24%;
    margin-left: 12%;
}
#waiter {
    background: url('images/waiter.png') no-repeat center center;
    width: 6.5%;
    height: 27%;
    z-index: 2;
    position: absolute;
    background-size: cover;
    bottom: 10%;
    left: 9%;
	display:none;
}

/*Halloween*/
#halloween_costumes{
    background: url('images/halloween_costumes.png') no-repeat center center;
    width: 25%;
    height: 22%;
    z-index: 2;
    position: absolute;
    background-size: cover;
    bottom: 4%;
    left: 33%;
	display:none;
}

#npc_halloween_grid {
    position: absolute;
    display: none;
    top: 58.5%;
    height: 8%;
    width: 100%;
}
.door {
	width: 2.75%;
    height: 100%;
    top: 63.5%;
    position: absolute;	
}
#door1{
	left:20%;
}
#door2{
	left: 48.25%;
}
#door3 {
	left: 76.5%;
}
#door4 {
	left: 120%;
	display:none;
}
#door5 {
	left: 148.25%;
	display:none;
}
#door6 {
	left: 176.5%;
	display:none;
}

/*Grid - Classroom*/

#npc_classroom_grid {
    height: 100%;
}
#npc_grid_class1 {
    width: 45%;
    height: 100%;
    position: relative;
    margin-left: 25%;
    margin-top: 48%;
}
#npc_grid_class2 {
    width: 22vw;
    height: 7vw;
    position: absolute;
    bottom: 15.5vw;
    right: 28.5vw;
}
#bubble_text_class1 {
    position: relative;
}
#bubble_text_OS1 {} 

#bubble_text_class2 {
    display: none;
    position: relative;
}
#npc_speech_class1 {
    height: 20%;
    width: 12%;
    margin-left: 0%;
	margin-top:3%;
}
#npc_speech_class2 {
    height: 11%;
    width: 12%;
    margin-left: -5%;
    margin-top: -15%;
}
#npc_speech_class3 {
    height: 20%;
    width: 12%;
    margin-left: 6%;
    margin-top: 2%;    
}
#npc_speech_class4 {
    height: 18%;
    width: 12%;
    margin-left: 5%;
    margin-top: -11%;
}
#npc_speech_class5 {
    height: 20%;
    width: 12%;
    margin-left: 7%;
    margin-top: 2%;
}
#npc_speech_class6 {
    height: 11%;
    width: 12%;
    margin-left: -11%;
    margin-top: -16%;
}
#npc_speech_class7 {
    height: 20%;
    width: 12%;
    margin-left: 12%;
    margin-top: 6%;
}
#npc_speech_class8 {
    height: 11%;
    width: 12%;
    margin-left: -10%;
    margin-top: -12%;
}
/*Grid - Family Dinner*/

#npc_dinner_grid {
    height: 100%;
}
#npc_grid_dinner {
    width: 70%;
    height: 100%;
    position: relative;
    margin-left: 18%;
    margin-top: 40%;
	display:none;
}
#bubble_text_dinner {
    position: relative;
}
#npc_speech_bubble_dinner1 {
display:none;
position:relative;
}
#npc_speech_dinner1 {
    height: 20%;
    width: 12%;
    margin-left: 0%;
    margin-top: 3%;
}
#npc_speech_dinner2 {
    height: 20%;
    width: 12%;
    margin-left: 4%;
    margin-top: 0%;
}
#npc_speech_dinner3 {
    height: 4%;
    width: 16%;
    margin-left: 2%;
    margin-top: 10%;   
}
#npc_speech_dinner4 {
    height: 18%;
    width: 10%;
    margin-left: 4%;
    margin-top: 8%;
}
#npc_speech_dinner5 {
    height: 18%;
    width: 10%;
    margin-left: 92%;
    margin-top: -15%;
}

/*Grid - Potluck*/
#npc_potluck_grid {
    height:100%;
	display:none;
}
#npc_grid_potluck1 {
    width: 29%;
    height: 100%;
    position: relative;
    margin-left: 14%;
    margin-top: 43%;
    float: left;
}
#npc_grid_potluck2 {
    width: 25%;
    height: 100%;
    position: relative;
    margin-left: 16%;
    margin-top: 42%;
    float: left;
}
#npc_speech_potluck1 {
    height: 10%;
    width: 10%;
    margin-left: 0%;
}
#npc_speech_potluck2 {
    height: 10%;
    width: 10%;
    margin-left: 8%;
}
#npc_speech_potluck3 {
    height: 10%;
    width: 10%;
    margin-left: 13%;
}
#npc_speech_potluck4 {
    height: 10%;
    width: 14%;
    margin-left: -12%;
    margin-top: -36%;
}
#npc_speech_potluck5 {
    height: 10%;
    width: 10%;
    margin-left: 15%;
}
#npc_speech_potluck6 {
    height: 10%;
    width: 10%;
    margin-left: 11%;
}
#npc_speech_potluck7 {
    height: 10%;
    width: 12%;
    margin-left: 3%;
}
#npc_speech_potluck8 {
    height: 10%;
    width: 12%;
    margin-left: 12%;
}
#npc_speech_potluck9 {
    height: 10%;
    width: 12%;
    margin-left: 19%;
}
#npc_speech_potluck10 {
    height: 10%;
    width: 14%;
    margin-left: 12%;
}
#npc_speech_bubble_potluck1 {
    display: none;
    position: relative;
}
#npc_speech_bubble_potluck2 {
    display: none;
    position: relative;
}

/* Dice Roll */

#dice_roll_container {
    position: relative;
    white-space: nowrap;
    margin: 0 auto;
    margin-top: 2.5%;
    text-align: center;
}
.fancy {
    display: inline-block;
    /* to size correctly, can use float too, or width*/
    
    overflow: hidden;
}
.fancy .jSlots-wrapper {
    overflow: hidden;
    height: 4.4vw;
}
.jSlots-wrapper {
    overflow: hidden;
    height: 20px;
}
#yellow_req {
    color: #fff;
    float: right;
    font-size: 1.8vw;
    margin-right: -50px;
    margin-top: 15%;
    margin-left: 20px;
}
#red_req {
    color: #fff;
    float: right;
    font-size: 1.8vw;
    margin-right: -50px;
    margin-top: 15%;
    margin-left: 20px;
}
.slotYellow {} .slotBlue {} .slotRed {} ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.fancy .slotYellow li,
.fancy .slotBlue li,
.fancy .slotRed li {
    width: 5vw;
    line-height: 4.45vw;
    text-align: center;
    font-size: 1.5vw;
    font-weight: bold;
    color: #fff;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.fancy .slotYellow:first-child li {
    background: url('images/dice_safety.png') no-repeat;
    background-position: top;
    color: #000;
    background-size: 4.2vw;
}
.fancy .slotBlue:first-child li {
    background: url('images/dice_community.png') no-repeat;
    background-position: top;
    background-size: 4.2vw;
}
.fancy .slotRed:first-child li {
    background: url('images/dice_support.png') no-repeat;
    background-position: top;
    background-size: 4.2vw;
}
.fancy .slotYellow li:nth-child(7),
.fancy .slotBlue li:nth-child(7),
.fancy .slotRed li:nth-child(7) {} .fancy .slotYellow li:nth-child(6),
.fancy .slotBlue li:nth-child(6),
.fancy .slotRed li:nth-child(6) {} .fancy .slotYellow li:nth-child(5),
.fancy .slotBlue li:nth-child(5),
.fancy .slotRed li:nth-child(5) {} .fancy .slotYellow li:nth-child(4),
.fancy .slotBlue li:nth-child(4),
.fancy .slotRed li:nth-child(4) {} .fancy .slotYellow li:nth-child(3),
.fancy .slotBlue li:nth-child(3),
.fancy .slotRed li:nth-child(3) {} .fancy .slotYellow li:nth-child(2),
.fancy .slotBlue li:nth-child(2),
.fancy .slotRed li:nth-child(2) {} .fancy .slotYellow li:nth-child(1),
.fancy .slotYellow li:nth-child(8),
.fancy .slotBlue li:nth-child(1),
.fancy .slotBlue li:nth-child(8),
.fancy .slotRed li:nth-child(1),
.fancy .slotRed li:nth-child(8) {} .fancy .slotYellow li span,
.fancy .slotBlue li span,
.fancy .slotRed li span {
    display: block;
}
/* ---------------------------------------------------------------------
   ANIMATIONS
--------------------------------------------------------------------- */

@-webkit-keyframes winner {
    0%, 50%, 100% {
        -webkit-transform: rotate(0deg);
        font-size: 70px;
        color: #fff;
    }
    25% {
        -webkit-transform: rotate(20deg);
        font-size: 90px;
        color: #FF16D8;
    }
    75% {
        -webkit-transform: rotate(-20deg);
        font-size: 90px;
        color: #FF16D8;
    }
}
@-moz-keyframes winner {
    0%, 50%, 100% {
        -moz-transform: rotate(0deg);
        font-size: 70px;
        color: #fff;
    }
    25% {
        -moz-transform: rotate(20deg);
        font-size: 90px;
        color: #FF16D8;
    }
    75% {
        -moz-transform: rotate(-20deg);
        font-size: 90px;
        color: #FF16D8;
    }
}
@-ms-keyframes winner {
    0%, 50%, 100% {
        -ms-transform: rotate(0deg);
        font-size: 70px;
        color: #fff;
    }
    25% {
        -ms-transform: rotate(20deg);
        font-size: 90px;
        color: #FF16D8;
    }
    75% {
        -ms-transform: rotate(-20deg);
        font-size: 90px;
        color: #FF16D8;
    }
}
@-webkit-keyframes winnerBox {
    0%, 50%, 100% {
        box-shadow: inset 0 0 0px yellow;
        background-color: #FF0000;
    }
    25%,
    75% {
        box-shadow: inset 0 0 30px yellow;
        background-color: aqua;
    }
}
@-moz-keyframes winnerBox {
    0%, 50%, 100% {
        box-shadow: inset 0 0 0px yellow;
        background-color: #FF0000;
    }
    25%,
    75% {
        box-shadow: inset 0 0 30px yellow;
        background-color: aqua;
    }
}
@-ms-keyframes winnerBox {
    0%, 50%, 100% {
        box-shadow: inset 0 0 0px yellow;
        background-color: #FF0000;
    }
    25%,
    75% {
        box-shadow: inset 0 0 30px yellow;
        background-color: aqua;
    }
}
.winner li {
    -webkit-animation: winnerBox 2s infinite linear;
    -moz-animation: winnerBox 2s infinite linear;
    -ms-animation: winnerBox 2s infinite linear;
}
.winner li span {
    -webkit-animation: winner 2s infinite linear;
    -moz-animation: winner 2s infinite linear;
    -ms-animation: winner 2s infinite linear;
}
/* Syntax Highlighter, ignore */

.dp-highlighter ol {
    padding: 10px;
}