/* PSYHVEL CSS */

/* Skin related */

#navigation {
    margin-bottom: -7px;
}

#navigation_content {
    
}

.horizontal_menu {
    
}

.horizontal_menu li {
    border: 1px solid #F2C968;  
    border-bottom: none;
    margin: 0px 3px 0px 0px;
    padding: 3px 5px 2px 5px;
}

.horizontal_menu li.current {
    background-color: #FFF;
    border-bottom: 1px solid white;
    font-weight: bold;
}

.horizontal_menu li:hover {
    background-color: #F2C968;
}

.horizontal_menu li a {
    color: black;
    text-decoration: none;
}

/* General */
h2 {
    margin-bottom: 10px;
}

div.required > label:after {
    color: red;
    content: " *"; 
}

/*  Test relted  */
.to_center {
	text-align:center;
}
	
.to_left {
    text-align:left;
}

.to_right {
	text-align:right;
}

.noline {
	text-decoration:none;
	color:black;
} 

.done_test_object {
	background-color: #99FF99;
	border: solid 1px #666666;
	width:150px;
	height:75px;
	padding-top:3px;
	padding-bottom:3px;
	text-align:center;
	font-size:24px;
	vertical-align:middle;
}
	
.current_test_object {
	background-color: #FFFF99;
	border: solid 1px #666666;
	width:150px;
	height:75px;
	padding-top:3px;
	padding-bottom:3px;
	text-align:center;
	font-size:24px;
	vertical-align:middle;
}
	
.locked_test_object {
	background-color: #EEEEEE;
	border: solid 1px #666666;
	width:150px;
	height:75px;
	padding-top:3px;
	padding-bottom:3px;
	text-align:center;
	font-size:24px;
	vertical-align:middle;
}

.form_help {
    color: #666666;
    font-size: 75%;
    cursor: help;
    margin-left: 20px;
}

.instructions {
    border-bottom: 1px solid #666666;
    border-top: 1px solid #666666;
    background-color:#EEEEEE;
    margin-top: 20px;
    margin-bottom:20px;
    padding-top: 10px;
    padding-bottom:10px;
}

.psyhvel_buttons {
    margin:10px 0px 5px 5px;
}

.psyhvel_buttons input[type="button"],
input[type="submit"] {
    background-color: #FFCE7B;
    border: 1px solid #FFA500;
    color: black;
    display: inline;
    cursor: pointer;
    font-family: "Comic Sans MS",Verdana,Lucida,Helvetica,Arial,sans-serif;
    font-size:12px;
    text-decoration:none;
    padding:1px 5px 1px 5px;
}

.psyhvel_buttons input[type="button"]:hover,
input[type="submit"]:hover {
    background-color: #eeb962;
    border: 1px solid #FFA500;
    color: black;
}

.not_saved {
    border: 1px solid #ff9999;
    background-color:#ffcccc;
    color: #333333;
}

.saved {
    border: 1px solid #99cc66;
    background-color:#ccff99;
    color: #333333;
}

.not_saved:hover {
    border: 1px solid #ff9999;
    background-color:#ffcccc;
    color: #333333;
}

.saved:hover {
    border: 1px solid #99cc66;
    background-color:#ccff99;
    color: #333333;
}

input[type="button"].reset ,
input[type="submit"].reset {
    border: 1px solid #cc0033;
    background-color:#ff6666;
    color: #333333;
}

input[type="button"].reset:hover,
input[type="submit"].reset:hover {
    border: 1px solid #cc0033;
    background-color:#ff6666;
    color: #333333;
}

.tmtNotificationMessage{
    border:2px solid #ffa500;
    background-color:#ffce7b;
    position:absolute;
    top:200px;
    width:446px;
    height:30px;
    font-size:20px;
    z-index:99;
    display:none;
}

.library_test {
    background-color: #EEEEEE;
    border: solid 1px #666666;
    width:90%;
    padding:5px 20px 5px 20px;
    margin-bottom:5px;
    text-align:left;
    list-style-type: none;
}

.library_title {
    font-size:16px;
    font-wight:bold;
    color:black;
    text-decoration:none;
}

.library_cb {
    vertical-align: top;
    margin-top: 3px;
}

.library_info {
    font-size:10px;
    font-wight:bold;
    padding-left:30px;
    float: left;
    width: 215px;
}

.library_description {
    font-size:10px;
    font-wight:bold;
    float: left;
    width: 530px;
}

.library_description_content {
    background-color: white;
    min-height: 30px;
    padding: 5px;
}

.table_border {
    border:1px solid black;
    margin:0px;
    padding:5px;
    border-collapse:collapse;
    text-align:center;
}

.correct_answer {
    background-color: #99FF99;
    border:1px solid black;
    text-align:center;
}

.wrong_answer {
    background-color: #FF9999;
    border:1px solid black;
    text-align:center;
}

#choices_table {
    /*border-spacing: 2px 0px;*/
    border-collapse: collapse;
    border: none;
}

#choices_table td {
    padding:5px;
    vertical-align:middle;
}

#choices_table.black_border td {
    border:1px solid black;
}

#choices_table.black_border td.image {
    border-bottom:none;
}

#choices_table td.image_no {
    border-bottom:none;
    padding:0px;
}

#choices_table.black_border td.title {
    border-top:none;
    border-bottom:none;
}

#choices_table td.title_no {
    border-top:none;
    border-bottom:none;
    padding:0px;
}

#choices_table.black_border td.left_off {
    border-left: none;
    text-align: left;
}

#choices_table.black_border td.cb_left {
    border-right:none;
}

#choices_table.black_border td.cb_bottom {
    border-top: none;
}

.cb_bottom {
    text-align: center;    
}

.word_test_table {
    border-collapse:collapse;
}

.word_test_td {
    padding:5px;
    width:80px;
    height:80px;
    vertical-align:middle;
}

.word_test_div_wrapper {
    position:relative;
    float:left;
    left:50%;
}


.word_test_div {
    padding:5px;
    vertical-align:middle;
    position:relative;
    float:left;
    left:-50%;
    margin:1px;
}

.black_border {
    border:1px solid black;
}

.blue_bordered_div {
    text-align:center;
    border:1px solid blue;
    width:300px;
    margin:auto;
    margin-top:30px;
    padding:20px;
}

#hidden_notification_div {
    text-align:center;
    font-size:14px;
    border:1px solid white;
    width:300px;
    height:30px;
    margin:auto;
    margin-top:10px;
    margin-bottom:10px;
    padding-top:5px;
}

.hasObject {
    background-color:#FFFF99;
}

.error {
    background-color: #FFCE7B;
    border: 1px solid #FFA500;
    margin: 0 0 1em;
    padding: 1em;
    width: 95%;
}

/* KS TASK CSS */
#KS_TASK {
    width:100%;
    margin-left:auto;
    margin-right:auto;
}

#ks_test_area {
    width:100%;
    height:450px;
    border:solid black 1px;
    position:relative;
}

#ks_tool_box {
    position:absolute;
    border: 1px solid #333333;
    background-color: #EEEEEE;
    padding: 3px 3px 3px 3px;
    width: 150px;
    height: 450px;
}

#ks_tool_box .title {
    background-color: #999999;
    padding: 3px 3px 3px 3px;
    margin: -3px -3px 0px -3px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
}

#ks_tool_box .button {
    border: 1px solid #666666;
    background-color:#ffcc99;
    color: #666666;
    cursor: pointer;
    font-family: "Comic Sans MS",Verdana,Lucida,Helvetica,Arial,sans-serif;
    text-decoration:none;
    padding:1px 3px 1px 3px;
    border: 1px solid #333333;
    margin-top: 3px;
    width: 142px;
    height: 28px;
    font-size: 18px;
    text-align: center;
    -moz-border-radius: 3px 3px 3px 3px;
}

#ks_tool_box .button:hover {
    background-color: #cc9966;
}

#ks_edit_box {
    margin-top: 3px;
    border: 0px solid #333333;
    background-color: #EEEEEE;
    padding: 3px 3px 3px 3px;
}

.ks_information_note {
    width:100%;
    margin-left: 1px;
}

.ks_base_element {
    position:absolute !important;
    font-size:30px;
    text-align:center;
    border: 1px solid #333333;
    background-color: #EEEEEE;
    padding: 3px 3px 3px 3px;
}

.ks_image {
    width:65px;
    height: 56px;
    background-size: 65px 56px;
    background-repeat: no-repeat;
    padding: 0px 0px 0px 0px;
}

.ks_element_size_8 {
    font-size: 8pt;
}

.ks_element_size_10 {
    font-size: 10pt;
}

.ks_element_size_12 {
    font-size: 12pt;
}

.ks_element_size_14 {
    font-size: 14pt;
}

.ks_element_size_16 {
    font-size: 16pt;
}

.ks_element_size_18 {
    font-size: 18pt;
}

.ks_element_size_20 {
    font-size: 22pt;
}

.ks_element_size_22 {
    font-size: 22pt;
}

.ks_element_size_24 {
    font-size: 24pt;
}

.ks_selected_element {
    border: 2px solid red !important;
}

.ks_rectangle_element {

}

.ks_start_element {
    border: 1px solid #669966;
    background-color: #ccffcc;
}

.ks_end_element {
    border: 1px solid #996666;
    background-color: #ffcccc;
}

.ks_oval_element {
    -moz-border-radius: 25px 25px 25px 25px;
}

#ks_edit_field {
    background-color: #FFFFFF;
    border: 1px solid #999999;
    width: 139px;
    height: 100px;
    margin-bottom: 1px;
}

#ks_set_text_size {
    background-color: #FFFFFF;
    border: 1px solid #999999;
    width: 139px;
    margin-bottom: 1px;
}

.ksp_clicked_element {
    margin-top: -2px;
    margin-left: -2px;
    border: 3px solid red !important;
}

.ksp_selected_element {
    margin-top: -1px;
    margin-left: -1px;
    border: 2px solid blue !important;
}

.ksp_start_title {
    font-size: 50%;
    color: green;
}

.ksp_end_title {
    font-size: 50%;
    color: red;
}

/* DRAG TASK CSS */
#DRAG_TASK {
    width:100%;
    margin-left:auto;
    margin-right:auto;
    display:table;
}

#drag_test_area {
    width:100%;
    height:450px;
    border:solid black 1px;
    position:relative;    
}

#drag_tool_box {
    position:absolute;
    border: 1px solid #333333;
    background-color: #EEEEEE;
    padding: 3px 3px 3px 3px;
    width: 150px;
    height: 450px;
}

#drag_tool_box .title {
    background-color: #999999;
    padding: 3px 3px 3px 3px;
    margin: -3px -3px 0px -3px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
}

#drag_tool_box .button {
    border: 1px solid #666666;
    background-color:#ffcc99;
    color: #666666;
    cursor: pointer;
    font-family: "Comic Sans MS",Verdana,Lucida,Helvetica,Arial,sans-serif;
    text-decoration:none;
    padding:1px 3px 1px 3px;
    border: 1px solid #333333;
    margin-top: 3px;
    width: 142px;
    height: 28px;
    font-size: 18px;
    text-align: center;
    -moz-border-radius: 3px 3px 3px 3px;
}

#drag_tool_box .button:hover {
    background-color: #cc9966;
}

#drag_edit_box {
    margin-top: 3px;
    border: 0px solid #333333;
    background-color: #EEEEEE;
    padding: 3px 3px 3px 3px;
}

.drag_information_note {
    width:100%;
    margin-left: 1px;
}

.drag_play_element {
    position:absolute !important;
    border: 2px solid transparent;
}

.drag_base_element {
    position:absolute !important;
    border: 2px solid transparent;
}

.drag_selected_element {
    border: 2px solid red !important;
}

.drag_rectangle_element {
    width: 30px;
    height: 30px;
    background: black;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
}

.drag_triangle_element {
    width:0px;
    height:0px;
    border-left:15px solid transparent;  /* left arrow slant */
    border-right:15px solid transparent; /* right arrow slant */
    border-bottom:30px solid black; /* bottom, add background color here */
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
}

.drag_oval_element {
    width: 30px;
    height: 30px;
    background: black;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
}

.drag_place_element {
    width: 90px;
    height: 90px;
    border: 2px solid black;
    -moz-border-radius: 45px;
    -webkit-border-radius: 45px;
    border-radius: 45px;
}

#drag_edit_preview_area {
    width: 100px;
    height: 100px;
    padding: 5px;
    margin-left: auto;
    margin-right: auto;
}

#drag_edit_preview {
    margin-left: auto;
    margin-right: auto;
}

#drag_set_width {
    background-color: #FFFFFF;
    border: 1px solid #999999;
    width: 139px;
    margin-bottom: 1px;
}
#drag_set_height {
    background-color: #FFFFFF;
    border: 1px solid #999999;
    width: 139px;
    margin-bottom: 1px;
}

#drag_set_place {
    background-color: #FFFFFF;
    border: 1px solid #999999;
    width: 139px;
    margin-bottom: 1px;
}

.dragp_clicked_element {
    margin-top: -2px;
    margin-left: -2px;
    border: 3px solid red !important;
}

.dragp_selected_element {
    margin-top: -1px;
    margin-left: -1px;
    border: 2px solid blue !important;
}

.drag_slide_value {
    margin: 3px;
    text-align: center;
}

/* IMG DRAG TASK CSS */
#IMG_DRAG_TASK {
    width: 98%;
    margin-left:auto;
    margin-right:auto;
    display:table;
    border-collapse:separate;
    border-spacing: 1px;
    border: 1px solid blue;
    padding: 5px;
}

#IMG_DRAG_TASK_INSTRUCTIONS {
    width: 98%;
    margin-left:auto;
    margin-right:auto;
    border: 1px solid blue;
    padding: 5px;
    margin-bottom: 5px;
}

#IMG_DRAG_TASK_INSTRUCTIONS textarea{
    width: 100%;
}

#IMG_DRAG_TASK .item_row {
    display: table-row;
}

#IMG_DRAG_TASK .drag_item {
    height: 180px;
    display: table-cell;
    border: 1px solid red;
    padding: 3px;
}

#IMG_DRAG_TASK .drop_item {
    height: 180px;
    display: table-cell;
    border: 1px solid green;
    padding: 3px;
}

#IMG_DRAG_TASK .drop_item_title {
    width: 95%;
    margin-left:auto;
    margin-right:auto;
}

#IMG_DRAG_TASK .drop_item_title input {
    width: 95%;
    border: 1px solid black;
}

#IMG_DRAG_TASK .drag_item_title {
    width: 95%;
    margin-left:auto;
    margin-right:auto;
}

#IMG_DRAG_TASK .drag_item_title input {
    width: 95%;
    border: 1px solid black;
}

#IMG_DRAG_TASK .drag_item_image {
    width: 95%;
    margin-left:auto;
    margin-right:auto;
}

#IMG_DRAG_TASK .drag_item_image input {
    border: 1px solid black;
    width: 95%;
}

#IMG_DRAG_TASK .drag_item_image_border {
    width: 95%;
    border: 1px solid #666666;
    height: 169px;
    margin-left:auto;
    margin-right:auto;
    margin-top:5px;
}

#IMG_DRAG_TASK .drag_item_img {
    width: 95%;
    height: 160px;
    border: 1px solid #666666;
    margin-left:auto;
    margin-right:auto;
    margin-top:5px;
}

#IMG_DRAG_TASK .drop_item_img {
    width: 95%;
    border: 1px solid #666666;
    height: 169px;
    margin-left:auto;
    margin-right:auto;
    margin-top:5px;
}

#IMG_DRAG_TASK .drop_item_image input {
    border: 1px solid black;
    width: 95%;
}

#IMG_DRAG_AREA  .draggable {
    display: inline-block;
    padding: 3px;
    margin: 5px 6px 5px 6px;
    border: 1px solid red;
    vertical-align: top;
}
#IMG_DRAG_AREA  .droppable {
    border: 1px solid #666666;
    margin: 3px 3px 3px 3px;
}

#IMG_DRAG_AREA  .drop_nest {
    display: inline-block;
    margin: 5px 5px 5px 0;
    border: 1px solid blue;
}

#IMG_DRAG_AREA  .drag_title {
    text-align: center;
    border: 1px solid #666666;
    margin: 0px 0px 3px 0px;
    font-size: 12pt;
    padding: 1px;
}

#IMG_DRAG_AREA  .drop_title {
    text-align: center;
    border: 1px solid #666666;
    margin: 3px 3px 3px 3px;
    font-size: 12pt;
    padding: 1px;
}

#IMG_DRAG_AREA .drag_image {
    margin-left:auto;
    margin-right:auto;
}

#IMG_DRAG_AREA .drag_image img {
    width: 100%;
}


#IMG_DRAG_AREA  .dropped {
    border: 1px solid red;
}

#drag_area {
    text-align: center;
}

#drop_area {
    text-align: center;
}

#IMG_DRAG_AREA  .drop_size_1 {
    width: 126px;
    height: 200px;
}

#IMG_DRAG_AREA  .drag_size_1 {
    width: 120px;
    height: 194px;
}

#IMG_DRAG_AREA  .drop_size_2 {
    width: 146px;
    height: 215px;
}

#IMG_DRAG_AREA  .drag_size_2 {
    width: 140px;
    height: 209px;
}

#IMG_DRAG_AREA  .drop_size_3 {
    width: 166px;
    height: 242px;
}

#IMG_DRAG_AREA  .drag_size_3 {
    width: 160px;
    height: 236px;
}

#IMG_DRAG_AREA  .drop_size_4 {
    width: 186px;
    height: 270px;
}

#IMG_DRAG_AREA  .drag_size_4 {
    width: 180px;
    height: 264px;
}

#IMG_DRAG_AREA  .drop_size_5 {
    width: 206px;
    height: 296px;
}

#IMG_DRAG_AREA  .drag_size_5 {
    width: 200px;
    height: 290px;
}

/* CHOICE TASK CSS */

.choice_object {
    border: 1px solid black;
    background-color:#FFFFFF;
    width: 169px;
    height: 155px;
    margin-right: 2px;
    margin-bottom: 2px;
    float: left;
}

.choice_object.exists {
    background-color:#FFFF99 !important;
}

.choice_object.zoom {
    width: 150%;
    height: 150%;
}

.choice_object input[type="text"]{
    width: 120px;
}

.choice_object {
    font-size: 75%;
    font-weight: bold;
}

.choice_object div {
    margin-top: 1px;
}

.choice_object .show_image_link {
    color: red;
    cursor: default;
}

#delete_question_form {
    position: absolute;
    width: 300px;
    height: 80px;
    border: 1px solid black;
    background-color: #EEEEEE;
    padding: 1px;
    display: none;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
#delete_question_form p {
    font-size: 14px;
    font-weight: bold;
    margin-top: 10px;
}

#new_question_form {
    border: 1px solid black;
    background-color: #EEEEEE;
    padding: 1px;
    display: none;
    margin: 10px 0px 10px 0px; 
}

.question_area {
    list-style-type: none;
}

.question_content {
    border: 1px solid black;
    background-color: #EEEEEE;
    padding: 1px;
    margin-bottom: 10px;
}

.question_button {
    background-color: #FFCE7B;
    border: 1px solid #FFA500;
    padding: 3px;
    width: 30px;
    text-align: center;
    margin: 5px;
    
}
.question_button:hover {
    background-color: #eeb962;
}

#questionnaire {
    font-family: "Arial";
    font-size: 14px;
}

#questionnaire .question{
    margin-bottom: 30px;
}

#questionnaire .question_title{
    font-weight: bold;
    margin: 10px;
    vertical-align: top;
}

#questionnaire .question_add_title, .text_input_area_title{
    font-style:italic;
    margin: 10px;
}

.to_row {
    float:left;
    margin-left: 5px;
    margin-top: 10px;
}

.videoEmbedTextarea{
    width: 500px;
    height: 100px;
}

/* FLOWER TASK */
#flower_table .right_choice {
   width: 43px;
   height: 43px;
   border: 2px solid green;
}

#flower_table .choice {
    width: 43px;
    height: 43px;
    border: 2px solid white;
}

#flower_table .chosen_pic {
    width: 43px;
    height: 43px;
    border: 2px solid blue;
}

/* HEDGEHOG TASK */
#hedgehog_table {
    border: 1px solid black;
    border-spacing: 0px;
}

#hedgehog_table img {
    width: 43px;
    height:43px;
    border: 1px solid black;
    vertical-align: middle;
}

.hedgehog_user_moves_count {
    padding: 5px !important;
}

.tool {
    width: 43px;
    height: 43px;
    border: 2px solid #666666;
}

.cached {
    font-size:12px;
    text-align:center;
    color:green;
}

.textarea_counter {
    color: #666666;
    font-size: 75%;
    text-align: center;
}

.test_header {
    top:30px;
    right:25px;
    position:absolute;
}
/*
input[type=radio].psyhvel-radio {
    display:none;
}

input[type=radio].psyhvel-radio + label.psyhvel-radio-label {
    padding-left:28px;
    height:23px;
    display:inline-block;
    line-height:23px;
    background-repeat:no-repeat;
    background-position: 0 0;
    font-size:23px;
    vertical-align:middle;
    cursor:pointer;

}

input[type=radio].psyhvel-radio:checked + label.psyhvel-radio-label {
    background-position: 0 -23px;
}
label.psyhvel-radio-label {
    background-image:url('../graphics/radio.png');
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


input[type=checkbox].psyhvel-checkbox {
    display:none;
}

input[type=checkbox].psyhvel-checkbox + label.psyhvel-checkbox-label {
    padding-left:30px;
    height:25px;
    display:inline-block;
    line-height:25px;
    background-repeat:no-repeat;
    background-position: 0 0;
    font-size:25px;
    vertical-align:middle;
    cursor:pointer;

}

input[type=checkbox].psyhvel-checkbox:checked + label.psyhvel-checkbox-label {
    background-position: 0 -25px;
}
label.psyhvel-checkbox-label {
    background-image:url('../graphics/csscheckbox.png');
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
*/

input[type=checkbox].psyhvel-checkbox {
    display:none;
}

input[type=checkbox].psyhvel-checkbox + label.psyhvel-checkbox-label {
    padding-left:18px;
    height:16px;
    display:inline-block;
    line-height:16px;
    background-repeat:no-repeat;
    background-position: 0 0;
    font-size:16px;
    vertical-align:middle;
    cursor:pointer;

}

input[type=checkbox].psyhvel-checkbox:checked + label.psyhvel-checkbox-label {
    background-position: 0 -16px;
}
label.psyhvel-checkbox-label {
    background-image:url('../graphics/checkbox_small_psyhvel.png');
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input[type=radio].psyhvel-radio {
    display:none;
}

input[type=radio].psyhvel-radio + label.psyhvel-radio-label {
    padding-left:20px;
    height:18px;
    display:inline-block;
    line-height:18px;
    background-repeat:no-repeat;
    background-position: 0 0;
    font-size:18px;
    vertical-align:middle;
    cursor:pointer;

}

input[type=radio].psyhvel-radio:checked + label.psyhvel-radio-label {
    background-position: 0 -18px;
}
label.psyhvel-radio-label {
    background-image:url('../graphics/radio_small_psyhvel.png');
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.bold {
    font-weight:bold;
}
.italic {
    font-style:italic;
}
.underline {
    text-decoration: underline;
}

div.drawline{
    transform-origin: 0 100%;
    height: 3px; /* Line width of 3 */
    background: #000; /* Black fill */
}

#SLIDER_TASK {
    margin-top: 100px;
    margin-bottom: 100px;
}