#wrapper {
}

#tools {
    position: relative;
    width: 500px;
    height: 100%;
    background-color: #86ae18;
}

#title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    margin-left: 5px;
}

#toolbox {
    display: block;
    position: absolute;
    height: auto;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}

#paper {
    height:100%;
    overflow:scroll;
    z-index:10;
    padding: 5px;
}

input {
    margin: 0;
}

.table_control_div {
    margin: 30px 0 15px 0;
}

.navigation_button.fixed_size {
    width: 200px;
}

.popupIcon {
    padding-bottom: 3px;
    width: 20px;
}

.popupHelp {
    padding-bottom: 6px;
    width: 20px;
}

.input_div span {
    float: left;
    font-family: inherit;
    font-weight: normal;
    font-size: 1rem;
    line-height: 36px;
    margin-right: 15px;
}

.input_div input,
.input_div select {
    float: left;
}

/***************/
/* Mode panels */
/***************/

.mode_panel {
    height: 100px;
    width: 100px;
    border: solid 5px;
    border-color: rgb(246,146,30);
    border-radius: 12px;

    margin-left: auto;
    margin-right: auto;

    background: #fbed21; /* Old browsers */
    background: -moz-linear-gradient(top, #fbed21 0%, #faaf3b 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbed21), color-stop(100%,#faaf3b)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #fbed21 0%,#faaf3b 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fbed21 0%,#faaf3b 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #fbed21 0%,#faaf3b 100%); /* IE10+ */
    background: linear-gradient(to bottom, #fbed21 0%,#faaf3b 100%); /* W3C */

    text-align: center;
}

.mode_panel.unselected{
    border-width: 0;
}

.mode_panel img {
    width: 70px;
    margin-left: 11px;
    margin-right: 11px;
}

.mode_panel image + span {
    color: #444444;
    font-size: 100%;
}

/************/
/* Trashcan */
/************/

#trashcanHolder {
    position: absolute;
    width: 50px;
    text-align: center;
}

#trashcanLidClosed {
    position: absolute;
    max-width: 100%;
    top: -15px;
    left: -0.5px;
    height: 16px;
}

#trashcanLidOpen {
    position: absolute;
    max-width: 95%;
    top: -36px;
    left: 0px;
    height: 38px;
}

#trashcan {
    max-width: 90%;
    height: 48px;
}

/********************/
/* Table  structure */
/********************/

.table {
    display: table;
}

.table_row {
    display: table-row;
}

.table_cell {
    display: table-cell;
}

.table_cell.field_label {
    width: 100px;
    margin: 0;
    vertical-align: middle;
    margin-bottom: 0;
}

.table_cell.field_value {
    width: 100px;
}


/*****************/
/* Tab structure */
/*****************/

#tabs {
    width: 120px;
    float: left;
}

#tabs .tab span {
    color: white;
}

#tabs .tab img {
    filter: invert(1);
}

#tab_panes_wrapper {
    margin-left: 120px;
    height: 100%;
    overflow: scroll;
    background: #FFFFFF;
}

.tab_pane_content_holder {
    text-align: center;
}

.tab_pane_content {
    display: inline-block;
}

.tab_pane p {
    text-align: justify;
}

.tab {
    margin-left: 5px;
}

#currentTool {
    margin-top: 22px;
}

/***********/
/* Map tab */
/***********/

#max_fuel {
    width: 100px;
}

#map_pane .input_div {
    display: inherit;
}

.table_cell .mode_panel {
    margin: 10px;
}

#map_pane .table {
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
}

/*************/
/* Decor tab */
/*************/

#theme_select {
    margin: 0px;
}

.decor_div {
    text-align: center;
}

#delete_caption {
    font-size: 0.79rem;
    visibility: hidden;
    line-height: 15px;
    width: 180px;
}

.decor_button,
#trafficLightRed,
#trafficLightGreen {
    cursor: pointer;
}

#trafficLightRed,
#trafficLightGreen {
    transform: scale(-1, 1);
}

#scenery_pane td:first-child {
    text-align: left;
    font-size: 1rem;
}

#scenery_pane tr:nth-of-type(even) {
    background: white;
}


/**************/
/* Blocks tab */
/**************/

.table_cell .block_image {
    vertical-align: top;
    width: 180px;
    height: 36px;
    cursor: pointer;
    margin-bottom: 20px;
}

.block_image.large {
    height: 66px;
    cursor: pointer;
}

input[type="checkbox"].block_checkbox {
    cursor: pointer;
    margin-right: 25px;
}

.block_image text {
    cursor: pointer;
}

#select_all_checkbox {
    margin-top: 10px;
}

#select_all_label {
    margin-left: 11px;
    margin-bottom: 30px;
    font-weight: bold;
    font-size: 20px;
    text-align: left;
}

.block_number {
    margin-left: 10px;
    width: 50px;
    padding-left: 12px;
}

#language_select {
    width: 100px;
    float: none;
}

#language_div span {
    float: none;
}


/******************/
/* Characters tab */
/******************/

#character_select {
    width: 100px;
    margin-left: 15px;
    margin-bottom: 0px;
}

#character_image  {
    height: 225px;
}

/************/
/* Generate */
/************/

#random_pane .table_cell.field_label {
    width: 150px;
}

/************/
/* Load tab */
/************/

#load_pane input[type='radio'] {
    margin: 0 0 0 11px;
}

#load_pane table {
    margin-bottom: 0px;
}

#load_pane select {
    width: 150px;
    margin: 0 0 0 15px;
}

#loading_tables {
    margin-top: 20px;
}

#deleteLevel {
    margin-right: 20px;
}

.scrolling-table {
    max-width: 100%;
}

/************/
/* Save tab */
/************/

#save_pane label {
    display: block;
    float: left;
    cursor: default;
    margin-left: 12px;
    line-height: 38px;
    font-family: inherit;
    font-weight: normal;
    font-size: 1rem
}

#save_pane #levelNameInput {
    width: 220px;
    float: left;
    margin-left: 20px;
}

#save_pane #saveLevel {
    float: left;
}

#save_pane table {
    margin-bottom: 0px;
}

/* Cow-specific elements in the level editor */

#cow_group_select, #cow_type_select {
    width: 80px;
    display: inline;
    padding: 0.1rem;
}

#remove_cow_group_button, #add_cow_group_button {
    width: 30px;
    height: 30px;

    border-width: 2px;
    border-radius: 8px;
}

#remove_cow_group_button img, #add_cow_group_button img {
    width: 22px;
    height: 22px;
    margin: 2px;
}