@font-face
{
font-family: "curse";
src: url("fonts/curse.eot");
}

@font-face
{
font-family: "curse";
src: url("fonts/curse.ttf");
}

body
{
width:800px;
height:500px;
padding:0px;
margin:0px;
overflow:hidden;
font-family:curse;
font-size:20px;
}

#main_div
{
position:absolute;
top:0px;
left:0px;
width:800px;
height:500px;
overflow:hidden;
padding:0;
margin:0;
}

#frontpage_div
{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background-image:url(images/frontpage_background.png);
display:none;
}

#info_div
{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background-image:url(images/info_background.png);
display:none;
}

#game_div
{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
display:none;
background:url(images/game_background.png);
}

#game_over_div
{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background-image:url(images/game_background.png);
display:none;
color:#fff;
z-index:10;
}

.button
{
position:absolute;
cursor:pointer;
background-image:url(images/blank.gif);
}

#menu_popup
{
position:absolute;
top:150px;
left:50%;
margin-left:-151px;
width:302px;
height:166px;
background-image:url(images/menu_popup.png);
display:none;
z-index:12;
}

#greyout
{
background-color: #fff;
filter:alpha(opacity=40);
opacity: 0.4;
-moz-opacity:0.4;
z-index: 12;
height: 100%;
width: 100%;
background-repeat:no-repeat;
background-position:center;
position:absolute;
top: 0px;
left: 0px;
display:none;
}

.bean
{
position:absolute;
width:18px;
height:33px;
background-size:18px 33px;
cursor:pointer;
z-index:11;
}

.bean_green
{
background-image:url(images/bean_green.png);
}

.bean_orange
{
background-image:url(images/bean_orange.png);
}

.bean_purple
{
background-image:url(images/bean_purple.png);
}

.bean_yellow
{
background-image:url(images/bean_yellow.png);
}

.bean_red
{
background-image:url(images/bean_red.png);
}

.color_box
{
position:absolute;
width:30px;
height:30px;
}

.color_box_highlight
{
border:1px solid #fff;
}

#bar_bg
{
position:absolute;
top:161px;
left:428px;
width:353px;
height:285px;
background-image:url(images/bar_bg.png);
z-index:11;
}

#pie_bg
{
position:absolute;
top:161px;
left:428px;
width:353px;
height:285px;
background-image:url(images/pie_bg.png);
z-index:11;
display:none;
}

.bar
{
position:absolute;
bottom:2px;
width:51px;
height:0px;
background-size:51px 15px;
}

#bar_red
{
left:27px;
background-image:url(images/bar_red.png);
}

#bar_orange
{
left:88px;
background-image:url(images/bar_orange.png);
}

#bar_yellow
{
left:149px;
background-image:url(images/bar_yellow.png);
}

#bar_green
{
left:210px;
background-image:url(images/bar_green.png);
}

#bar_purple
{
left:271px;
background-image:url(images/bar_purple.png);
}

#bean_count_bg
{
position:absolute;
top:116px;
left:435px;
width:336px;
height:46px;
background-image:url(images/bean_count_bg.png);
display:none;
}

.total
{
position:absolute;
top:14px;
font-size:23px;
color:#fff;
}

#total_red
{
left:31px;
}

#total_orange
{
left:92px;
}

#total_yellow
{
left:145px;
}

#total_green
{
left:205px;
}

#total_purple
{
left:267px;
}

#total_all
{
left:306px;
}

#pie_canvas
{
position:absolute;
top:19px;
left:99px;
}

#form_div
{
position:absolute;
top:21px;
left:1px;
width:417px;
height:492px;
background-repeat:no-repeat;
background-size:393px 457px;
background-image:url(images/form_bg.png);
display:none;
}

.question
{
position:absolute;
left:34px;
width:313px;
height:30px;
color:#402e13;
}

#question_1
{
top:22px;
}

#question_2
{
top:103px;
}

#question_3
{
top:171px;
}

#question_4
{
top:261px;
}

#question_5
{
top:346px;
}

#check_button
{
position:absolute;
top:408px;
left:278px;
width:113px;
height:44px;
cursor:pointer;
}

.answer
{
position:absolute;
left:50px;
width:84px;
text-align:center;
border:none;
outline:none;
font-family:curse;
font-size:20px;
color:#ffff01;
background:none;
}

#answer_0
{
top:74px;
}

#answer_1
{
top:138px;
}

#answer_2
{
top:229px;
}

#answer_3
{
top:313px;
}

#answer_4
{
top:398px;
}

.result
{
position:absolute;
left:155px;
}

#result_0
{
top:73px;
}

#result_1
{
top:138px;
}

#result_2
{
top:230px;
}

#result_3
{
top:314px;
}

#result_4
{
top:398px;
}

#result_big
{
position:absolute;
top:150px;
left:385px;
font-size:40px;
color:#ff0000;
width:416px;
text-align:center;
z-index:12;
text-shadow: -1px -1px 0 #ffff00, 1px -1px 0 #ffff00, -1px 1px 0 #ffff00, 1px 1px 0 #ffff00;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=1, OffY=1, Color=#ffff00);
display:none;
}

.delete
{
position:absolute;
left:145px;
cursor:pointer;
}

#delete_0
{
top:73px;
}

#delete_1
{
top:138px;
}

#delete_2
{
top:230px;
}

#delete_3
{
top:314px;
}

#delete_4
{
top:398px;
}