.form_vocation_close {
    float: left;
}

#vocation_admin_content_box {
    height: 96%; 
    margin: 1% 1% 1% 1%;
    background-color: #FFFFFF;
    border: 1px solid #81BEF7;
    border-radius: 5px 5px 5px 5px;
    box-sizing: border-box;
}

.vocation_admin_group_wrapper {
    float: left;
    box-sizing: border-box;
    border-right: 1px solid #81BEF7;
    height: 100%;
}

.vocation_admin_group_wrapper:last-child {
    border: none;
}

.vocation_admin_group_wrapper h1 {
    background: linear-gradient(to bottom, #eaf7ff 0%,#c0d3ea 50%,#c0d3ea 100%,#7db9e8 100%); /* W3C */
    font-size: 1.25em;
    padding: 6px;
    color: #333333;
}

#vocation_admin_content_box .vocation_participant_container, 
#vocation_admin_content_box .vocation_vocation_container {
    overflow-y: scroll;
    overflow-x: hidden; 
    
    height:100%;
    width: 10%;
    float: left;
}

#vocation_admin_content_box li {
    display: inline-block;
    font-size: 1.2em;
    width: 100%;
    padding: 5px 5px;
    background-image: linear-gradient(#FAFAFA 0%,#F0F0F0  100%);
    box-sizing: border-box;
    max-width: 100%;
}


#vocation_admin_content_box li img {
    margin-top: 4px;
    margin-right: 5px;
    vertical-align: middle;
    display: inline-block;
    float: left;
}

#vocation_admin_content_box li button {
    padding: 3px 4px;
}

#vocation_admin_content_box li button img {
    margin-right: 3px;
    vertical-align: middle;
}

#vocation_admin_content_box li:first-child {
    border-radius: 5px 0px 0px 0px;
}

#vocation_admin_content_box li.selected {
    background-image: linear-gradient(#EFF5FB 0%, #CEECF5 100%);
}

#vocation_admin_content_box li:hover {
    background-image: linear-gradient(#FBF5EF 0%, #F5ECCE 100%);
    cursor: pointer;
}

.vocation_left_content {
    float: left;
    height: 96%; 
    width: 12%; 
    margin: 1% 1% 1% 1%;
    background-color: #FFFFFF;
    border: 1px solid #81BEF7;
    border-radius: 5px 0px 0px 0px;
    box-sizing: border-box;
}

.vocation_left_content .container {
    overflow-y: scroll;
    overflow-x: hidden; 
    
    height:100%;
}
.vocation_left_content li {
    display: inline-block;
    font-size: 1.5em;
    width: 100%;
    padding: 6%;
    background-image: linear-gradient(#FAFAFA 0%,#F0F0F0  100%);
    box-sizing: border-box;
}

.vocation_left_content li:first-child {
    border-radius: 5px 0px 0px 0px;
}

.vocation_left_content li.selected {
    background-image: linear-gradient(#EFF5FB 0%, #CEECF5 100%);
}

.vocation_left_content li:hover {
    background-image: linear-gradient(#FBF5EF 0%, #F5ECCE 100%);
    cursor: pointer;
}

.vocation_right_content {
    width: 85%;
    height: 97%;
}

.vocation_right_content #right_content_box #right_content {
    height: 100%
}

#tab_content > #right_content_box.vocation_right_content > #right_content {
    padding: 0;
    overflow: hidden;
}

.vocation_header_text {
    float: left;
}

.vocation_header_text h4 {
    float: left;
    padding: 10px 30px;
}

.vocation_right_content .form_row {
    margin: 0;
}

.vocation_right_content .form_row label {
    margin-top: 2%;
}

.vocation_bottom_border {
    border-bottom: 1px solid black;
}

#vocation_form_upper_left {
    float: left;
    width: 80%;
    border-right: 1px solid black;
    position: relative;
}

#vocation_form_upper_right {
    float: right;
    width: 18%;
    padding: 0.5% 0.5% 0.5% 0%;
    box-sizing: border-box;
}

#vocation_form_upper_right button {
    width: 100%;
    padding: 0.2em 0.5em 0.5em 0.2em;
    font-size: 1.3em;
}

#vocation_form_upper_right .lastedit {
    display: inline-block;
    padding-top: 3px;
}

#vocation_form_lower {
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
}

#vocation_form_lower_content table {
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    width:100%;
}

#vocation_form_lower_content table th {
  height: 140px;
  position: relative;
  vertical-align: bottom;
  padding: 0;
  font-size: 12px;
  line-height: 0.8;
}

#vocation_form_lower_content table th > div{
  position: relative;
  top: 0px;
  left: 70px; /* 80 * tan(45) / 2 = 40 where 80 is the height on the cell and 45 is the transform angle*/
  height: 100%;
  -ms-transform:skew(-45deg,0deg);
  -moz-transform:skew(-45deg,0deg);
  -webkit-transform:skew(-45deg,0deg);
  -o-transform:skew(-45deg,0deg);
  transform:skew(-45deg,0deg);
  overflow: hidden;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  border-top: 1px solid #dddddd;
}
  
#vocation_form_lower_content table th span {
  -ms-transform:skew(45deg,0deg) rotate(315deg);
  -moz-transform:skew(45deg,0deg) rotate(315deg);
  -webkit-transform:skew(45deg,0deg) rotate(315deg);
  -o-transform:skew(45deg,0deg) rotate(315deg);
  transform:skew(45deg,0deg) rotate(315deg);
  position: absolute;
  bottom: 55px; /* 40 cos(45) = 28 with an additional 2px margin*/
  left: -45px; /*Because it looked good, but there is probably a mathematical link here as well*/
  display: inline-block;
  // width: 100%;
  width: 150px; /* 80 / cos(45) - 40 cos (45) = 85 where 80 is the height of the cell, 40 the width of the cell and 45 the transform angle*/
  text-align: left;
  // white-space: nowrap; /*whether to display in one line or not*/
}
  
#vocation_form_lower_content table th:first-child {
    border-left: none;
}

#vocation_form_lower_content table th:last-child {
    border-right: none;
}

#vocation_form_lower_content table td {
    border: 1px solid #CCC;
    font-size: 1.5em;
}

#vocation_form_lower_content table td:first-child {
    border-left: none;
    padding: 5px;
}

#vocation_form_lower_content table td:last-child {
    border-right: none;
}

#vocation_form_lower_content table td select {
    margin: 0px;
    width:100%;
    
    display: inline-block;
    font-size: 1em;
   
    padding: 0.6em;

    border-radius: 5px;
    border: 1px solid #A9E2F3;
    box-sizing: border-box;
    
    background-color: #FFFFFF;
}

#vocation_form_lower_content td input {
    margin: 0px;
    width:100%;
    
    display: inline-block;
    font-size: 1em;
   
    padding: 0.6em;

    border-radius: 5px;
    border: 1px solid #A9E2F3;
    box-sizing: border-box;
    
    background-color: #FFFFFF;
    width: 100%;
}
form[name=vocation_view] > ul.errors {
    display: inline-block;
    padding: 1% 0 0 2%;
    background-image: linear-gradient(#FAFAFA 0%,#F0F0F0  100%);
    border-radius: 5px;
    color: #F78181;
    
    font-size: 1.2em;
    font-weight: bold;
}

.vocation_admin_group_wrapper .vocation_group {
    overflow-x: hidden;
    overflow-y: scroll;
}

button#vocation_admin_save {
    float: right;
}

.form_vocation_admin_participant {
    margin-left: 20px;
    margin-right: 10px;
}

.form_vocation_admin_child {
    margin-left: 10px;
    margin-right: 20px;
}

#vocation_group_child_form {
    width: 100%;
}

/*

#vocation_admin_content_box .vocation_vocation_container li:hover {
    background-image: linear-gradient(#FBF5EF 0%, #F5ECCE 100%);

}*/
#vocation_admin_content_box .vocation_vocation_container li {
    cursor: pointer;
    font-size: 1.5em;
    padding: 10px;
}
#vocation_group_child_form table tr:first-child {
    background: linear-gradient(to bottom, #eaf7ff 0%,#c0d3ea 50%,#c0d3ea 100%,#7db9e8 100%); /* W3C */
}

#vocation_group_child_form table tr:first-child td h1 {
    font-size: 1.25em;
    padding: 6px;
    color: #333333;
}

#vocation_group_child_form table {
    width: 100%;
}

#vocation_group_child_form table td.group_field {
    border: 1px solid #DDDDDD;
    height: 49px;
    vertical-align: top;
}

.vocation_admin_assignment {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100%;
    width: 90%;
}

#vocation_group_child_form td.vocation_day_index,
#vocation_group_child_form td.vocation_day_date {
    font-size: 1.25em;
    padding: 6px;
    color: #333333;
    background: linear-gradient(to bottom, #f7f9fa 0%,#f6fcff 50%,#e8eff4 51%,#f6f8fA 100%); /* W3C */
}

#vocation_group_child_form td.vocation_day_index {
    width: 5%;
}

#vocation_group_child_form td.vocation_day_date {
    width: 10%;
}

#vocation_group_child_form td.vocation_day_date input {
    display: inline-block;
    min-height: 3em;
   
    padding: 0.6em;

    border-radius: 5px;
    border: 1px solid #A9E2F3;
    box-sizing: border-box;
    
    background-color: #FFFFFF;
    width: 100%;
}

.droppable-active {
    background-image: linear-gradient(#FBF5EF 0%, #F5ECCE 100%);
}

.dropped-vocation {
    position: relative;
    background: linear-gradient(#EFFBFB 0%, #CEF5EC 100%);
    display:block;
    font-size: 1.2em;
    height: 100%;
    padding: 5px 5px;
}

.dropped-vocation img {
    position: absolute;
    top: 2px;
    right: 2px;
    cursor: pointer;
}

#dropped-vocation-img-template {
    display: none;
}

#vocation_form_lower_add select,
#vocation_form_lower_add input {
    margin: 0px;
    
    display: inline-block;
    font-size: 1em;
   
    padding: 0.6em;

    border-radius: 5px;
    border: 1px solid #A9E2F3;
    box-sizing: border-box;
    
    background-color: #FFFFFF;
    width: 20%;
}

#vocation_form_lower_add h1 {
    display: inline-block;
    padding: 0.5em;
    font-size: 1.5em;
}