
/* -------------------  CALENDAR CONTAINER DIV  ------------------- */

#symfocal, #symfocal_admin {
    position:relative;
    margin:60px auto;
    padding:30px 36px 36px 36px;
    background:#fff;
    font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
    font-size:100%;
    line-height:1.5em;
    color:#333;
    text-shadow: none;
}

#symfocal:after, #symfocal_admin:after {
    display:block;
    position:absolute;
    height:15px;
    width: 960px;
    bottom:-15px;
    left:0;
    content: url('../images/separator.png');
}

.shadow_effect {
    position:relative;
    -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.1), 0 0 40px rgba(100, 100, 100, 0.1) inset;
       -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.1), 0 0 40px rgba(100, 100, 100, 0.1) inset;
            box-shadow:0 1px 3px rgba(0, 0, 0, 0.1), 0 0 40px rgba(100, 100, 100, 0.1) inset;
}

/* -------------------  CALENDAR  ------------------- */

#calendars_container {
    position:relative;
    float:left;
    margin-right:15px;
}

.calendar_wrapper {
    background:url(loading.gif) no-repeat 50% 50%;
    float: left;
    margin-right: 15px;
    width:240px;
    height:260px;
}

#calendars_container div.calendar_wrapper:last-child {
    margin-right:0;
}
    
.calendar {
    width:auto;
    background:#fff;
    padding:1px 0 0 1px;
}

.calendar td {
    padding:0;
}

.calendar .title_calendar span, .calendar .cell_jour span, .calendar a {
    display:block;
    height:28px;
    line-height:28px;
    margin: 0 1px 1px 0;
    text-align:center;
    color:#333;
    border:1px solid transparent;
    background:transparent;
}

.calendar .cell_jour span, .calendar a {
    width:28px;
}

.calendar .title_calendar span {
    text-transform:uppercase;
    font-size:.875em;
    border-bottom:1px solid #fff;
}

#calendars_container .calendar_wrapper:first-child .title_calendar span {
    text-align:right;
}

#calendars_container .calendar_wrapper:last-child .title_calendar span {
    text-align:left;
}

.calendar .cell_jour span {
    font-size:.625em;
}

.calendar a {
    font-size:.75em;
    border:1px solid #000;
    background:#fff;
}

#symfocal .calendar a, a.dates_preview {
    cursor: default;
}

.calendar a.dates_preview {
    filter: alpha(opacity=20);    /*Internet Explorer 5, 6, 7, 8 */
    opacity: 0.2;    /* Modern browsers */
}

.calendar a.booked {
    color:#fff;
    background:#595959;
    border:1px solid #000;
}

.calendar a.unica {
    color:#fff;
    background:#000;
    border:1px solid #000;
}
.calendar a.provisional {
    color:#000;
    background:#c8be96;
    border:1px solid #000;
}

.calendar a.transition {
    color:#fff;
    background:#31869b;
    border:1px solid #000;
}

.calendar a.available {
    color:#000;
    background:#ffc000;
    border:1px solid #000;
}

.calendar a.blue {
    color:#000;
    background:#92cddc;
    border:1px solid #000;
}
.calendar a.festius {
    color:#fff;
    background:#998b50;
    border:1px solid #000;
}
.calendar a.dijous {
    color:#fff;
    background:#595959;
    border:1px solid #000;
}

#symfocal_admin .cell_calendar a:not(.dates_preview):active {
    background:#bcada4;
    border:1px solid #bcada4;
}

/* -------------------  CALENDAR CONTROL LINKS  ------------------- */

#control_nav {
    position:absolute;
    padding:5px 10px;
    width:730px;
    z-index:10;
}

#control_nav a {
    display:block;
    color:#8a847e;
    font-size:.625em;
    text-transform:uppercase;
}

#control_nav #link_prev {
    float:left;
}

#control_nav #link_next {
    float:right;
}

#control_nav #link_prev:before, #control_nav #link_next:after {
    content:"";
    display:inline-block;
    position:relative;
    top:2px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

#control_nav #link_prev:before {
    border-right: 10px solid #8a847e;
    margin-right:5px;
}

#control_nav #link_next:after {
    border-left: 10px solid #8a847e;
    margin-left:5px;
}

 #control_nav #link_prev:hover:before {
    border-right: 10px solid #333;
}

#control_nav #link_next:hover:after {
    border-left: 10px solid #333;
}

/* -------------------  LEGEND  ------------------- */

.calendar.legend {
    position:relative;
    overflow:auto;
    width: 100%;
    margin-bottom: 10px!important;
}
.calendar.legend .cell {
   margin-bottom: 10px!important;
}

.calendar.legend li {display:inline-block!important; margin: 6px 2px;}
.calendar.legend li.stateChange.white{ margin: 6px 2px;}

.calendar.legend .title_calendar {
    padding-bottom:6px;
}


.calendar.legend .legend_calendar {
    font-size:0.7rem;
    padding:0 5px;
}

.calendar.legend .copyright {
    font-size:.833em;
    padding:31px 0 0;
}

.calendar.legend .copyright a {
    background:transparent;
    border:1px solid transparent;
    width:100%;
    color:#8a847e;
}

.calendar.legend .copyright a:hover {
    color:#333;
}

.calendar.legend span {
    display:inline-block;
    height:28px;
    line-height:28px;
    margin: 0 1px 1px 0;
    text-align:center;
    color:#333;
    border:1px solid transparent;
    background:transparent;
    vertical-align: middle;
}
.calendar.legend a {
    display:inline-block;
    height:22px;
    width:22px;
    line-height:28px;
    margin: 0 1px 1px 0;
    text-align:center;
    color:#333;
    border:1px solid #000;
    vertical-align: middle;
}

#control_nav1.control_nav #link_next1, #control_nav2.control_nav #link_next2, #control_nav3.control_nav #link_next3{ float:right;}

/* -------------------  SELECTS  ------------------- */

#manager {
    height:30px;
    margin:0 0 5px;
}

#selects {
    font-size:.875em;
    float:left;
}

#items_select, #states_select {
    font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
    color:#333;
    margin-right:13px;
    float:left;
}

#items_select option, #states_select option {
    padding-left:7px;
}

/* -------------------  CALENDAR ADMIN MENU  ------------------- */

#symfocal_admin_menu {
    position:relative;
    top:-5px;
    height:30px;
    float:right;
}

#symfocal_admin_menu ul {
    float:right;
    white-space: nowrap;
}

#symfocal_admin_menu li {
    display:block;
    float:left;
    height:30px;
    font-size:.875em;
    line-height:30px;
    margin-left:25px;
    padding:0 !important;
}

#symfocal_admin_menu li a {
    text-decoration:none;
    color: #ccc;
    display:block;
    height:30px;
    text-shadow: none;
}

#symfocal_admin_menu li a:hover, #symfocal_admin_menu li a.admin_menu_selected {
    color: #333;
}

#symfocal_admin_menu li a.admin_menu_selected {
    cursor:default;
}

/* -------------------  CALENDAR ADMIN TABLE  ------------------- */

#symfocal_admin .records_list, #symfocal_admin .record_properties {
     border-collapse:collapse;
     font-size:.875em;
}

#symfocal_admin .records_list tr, #symfocal_admin .record_properties tr {
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;
}

#symfocal_admin .records_list th, #symfocal_admin .records_list td, #symfocal_admin .record_properties th, #symfocal_admin .record_properties td {
    padding:5px 25px;
    text-align:left;
    vertical-align:middle;
    width:auto;
}

#symfocal_admin .records_list ul, #symfocal_admin .records_list li, #symfocal_admin .record_properties ul, #symfocal_admin .record_properties li {
    list-style:none;
    padding:0;
    margin:0;
}

#symfocal_admin label, #symfocal_admin input {
    font-size:.875em;
    color:#333;
    margin-bottom:10px;
}

#symfocal_admin label {
    display:inline-block;
    width:80px;
}
