@extends('layouts/full')

@section('title') 
  Radioprogrammering
@endsection

@section('content')
  @parent

  <nav>
    <ul class="pager">
      <li class="previous-week"><a href="#">&larr; Week eerder</a></li>
      <li class="current-week"><a href="#">Deze week</a></li>
      <li class="next-week"><a href="#">Week later &rarr;</a></li>
    </ul>
  </nav>
  
  <div id="loading" style="display: none; height: 300px;">
    <div class="progress progress-striped active">
      <div class="progress-bar"  role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
        <b>Programmaschema ophalen...</b>
      </div>
    </div>
  </div>

  <div id='schedule'>
    @include('partial/radioscheduleweek', ['schedule' => $schedule])
  </div>

  <style type="text/css">
   .timetable_clearfix:after
{
    font-size: 0px;
    content: ".";
    display: block;
    height: 0px;
    visibility: hidden;
    clear: both;
}
div.rtl 
{
	direction: rtl;
}
.tt_hide
{
	display: none !important;
}
/* --- lists --- */
.tt_tabs_navigation,
.tt_items_list
{
	padding: 0;
	margin: 0;
	list-style: none;
}
div.tt_tabs
{
	border: none !important;
	position: static;
	padding: 0;
}
.tt_tabs .ui-tabs-panel
{
	padding: 0 !important;
	clear: both;
}
/* --- timetable --- */
table.tt_timetable
{
	width: 100%;
	font-size: 11px;
	color: #666;
	border: none;
	letter-spacing: normal;
	font-size: 11px;
	line-height: normal;
	font-family: 'Lato', Helvetica, Arial, sans-serif;
	border-collapse: separate !important;
	border-spacing: 2px !important;
	background: #FFF !important;
}
table.tt_timetable *
{
	box-sizing: content-box;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
}
.tt_timetable th,
.tt_timetable td
{
	font-size: 14px;
	font-weight: normal;
	font-style: normal;
	line-height: normal;
	color: #34495E;
	text-transform: none;
	border: none !important;
}
.tt_timetable th,
.tt_timetable td.tt_hours_column
{
	text-align: center;
	vertical-align: top;
	padding-top: 5px;
	height: 20px;
	text-overflow: ellipsis;
}
.tt_timetable th
{
	width: 12.5%;
	padding: 10px 15px 12px;
	letter-spacing: normal;
}
.tt_timetable .event_container
{
	padding: 7px 10px;
	position: relative;
}
/* Tooltips are handled differently in RTL mode. */
body.rtl .tt_timetable .event_container
{
	position: static;
}
.tt_timetable td
{
	width: 12.5%;
	vertical-align: top;
	height: 31px;
	border: none;
	padding: 0;
	position: relative;
}
/* On Firefox there are problems with RTL mode when table cell uses relative position. */
body.rtl .tt_timetable td
{
	position: static;
}
.tt_timetable td .event_hour_booking_wrapper,
.tt_timetable td .event_hour_booking_wrapper *,
.tt_event_hours .event_hour_booking_wrapper,
.tt_event_hours .event_hour_booking_wrapper *
{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	overflow: hidden;
}
.tt_timetable td .event_hour_booking_wrapper.always
{
	margin: 15px 0 3px;
}
.tt_timetable td.tt_single_event .event_hour_booking_wrapper.always
{
	padding: 0 10px;
	margin: 9px 0 10px;
}
.tt_timetable .event span.available_slots+.event_hour_booking_wrapper.always
{
	margin: 16px 0 3px 0;
}
.tt_timetable td .event_hour_booking_wrapper.on_hover
{
	position: absolute;
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
	height: 50px;
}
/* In RTL mode TD cell is static, so booking wrapper must be hidden.
** Otherwise it will overlap entire table. */ 
body.rtl .tt_timetable td.event .event_hour_booking_wrapper.on_hover
{
	right: auto;
	bottom: auto;
	left: auto;
	visibility: hidden;
	opacity: 0;
}
body.rtl .tt_timetable td.event .event_hour_booking_wrapper.on_hover
{
	visibility: visible;
	opacity: 1;
}
.tt_timetable .hours
{
	color: #FFF;
	font-weight: bold;
}
.tt_timetable .event
{
	background-color: #00A27C;
	color: #FFF;
	line-height: 140%;
	text-align: center;
	padding: 0 !important;
	vertical-align: top;
}
.tt_timetable .event a,
.tt_timetable .event .event_header
{
	display: block;
	color: #FFF !important;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 2px;
	text-decoration: none;
	outline: none;
	transition: none !important;
	border: none;
}
.tt_timetable .event a:hover,
.tt_timetable .event a.event_header:hover
{
	text-decoration: underline;
}
.tt_timetable .event span.available_slots
{
	display: block;
	color: #ffd544;
	margin-top: 3px;
}
.tt_event_hours .available_slots_wrapper
{
	padding-bottom: 0;
}
.tt_event_hours .available_slots_wrapper span.available_slots
{
	display: block;
	color: #34495E;
}
.tt_timetable .event a.event_hour_booking,
.tt_responsive .tt_timetable.small .tt_items_list .value a.event_hour_booking,
.tt_event_hours a.event_hour_booking
{
	display: block;
	margin: 0;
	padding: 11px 5px 11px;
	width: 100%;
	font-size: 14px;
	line-height: 18px;
	height: auto;
	font-weight: normal;
	text-decoration: none;
	-webkit-transition: background-color 0.2s, bottom 0.2s, top 0.2s !important; /* Safari and Chrome */
	-moz-transition: background-color 0.2s, bottom 0.2s, top 0.2s !important; /* Firefox */
	-o-transition: background-color 0.2s, bottom 0.2s, top 0.2s !important; /* Opera */
	transition: background-color 0.2s, bottom 0.2s, top 0.2s !important;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	text-align: center;
}
.tt_event_hours .event_hour_booking_wrapper
{
	margin-top: 1em;
}
.tt_responsive .tt_timetable.small .tt_items_list .value a.event_hour_booking
{
	margin-top: 10px;
	float: none;
}
.tt_timetable .event .event_hour_booking_wrapper.on_hover a.event_hour_booking
{
}
.tt_timetable .event a.event_hour_booking,
.tt_items_list .value a.event_hour_booking
{
	background-color: #05bb90;
}
.tt_timetable .event a.event_hour_booking:hover,
.tt_items_list .value a.event_hour_booking:hover
{
	background-color: #07b38a;
}
.tt_timetable .event a.event_hour_booking.unavailable,
.tt_timetable .event:hover a.event_hour_booking.unavailable,
.tt_timetable .event a.event_hour_booking.booked,
.tt_timetable .event:hover a.event_hour_booking.booked,
.tt_responsive .tt_timetable.small .tt_items_list .value a.event_hour_booking.unavailable,
.tt_responsive .tt_timetable.small .tt_items_list .value a:hover.event_hour_booking.unavailable,
.tt_responsive .tt_timetable.small .tt_items_list .value a.event_hour_booking.booked,
.tt_responsive .tt_timetable.small .tt_items_list .value a:hover.event_hour_booking.booked
/*,
.tt_responsive .tt_timetable.small .tt_items_list .value .event_hour_booking_wrapper.on_hover a.event_hour_booking,
.tt_responsive .tt_timetable.small .tt_items_list .value .event_hour_booking_wrapper.on_hover a:hover.event_hour_booking*/
{
	background-color: #eeeeee;
	color: #aaaaaa !important;
	cursor: default;
}
.tt_timetable .event .event_hour_booking_wrapper.on_hover a.event_hour_booking
{
	margin: 0;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -50px;
	top: auto;
	cursor: pointer;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	padding-top: 16px;
	padding-bottom: 16px;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tt_timetable .event.tt_single_event:hover .event_hour_booking_wrapper.on_hover a.event_hour_booking,
.tt_timetable .event_container:hover .event_hour_booking_wrapper.on_hover a.event_hour_booking
{
	bottom: 0;
} 
.tt_timetable .event a.tt_inactive
{
	opacity: 0.5;
}
.tt_timetable .event span.event_hour_places
{
	margin-left: 5px;
}
.tt_timetable .event .before_hour_text,
.tt_timetable .event .after_hour_text
{
	font-size: 13px;
}
.tt_timetable tr
{
	background-color: #FFF !important;
}
.tt_timetable .row_gray
{
	background-color: #F0F0F0 !important;
}
.tt_timetable .event:hover,
.tt_timetable .event .event_container.tt_tooltip:hover
{
	background-color: #1F736A;
}
.tt_timetable .event.tt_tooltip:hover .hours,
.tt_timetable .event .event_container.tt_tooltip:hover .hours
{
	color: #FFF;
}
.tt_timetable .event .hours_container
{
	margin: 15px 0;
}
.tt_timetable .event .top_hour
{
	margin-top: 15px;
}
.tt_timetable .event .bottom_hour,
.event_layout_4 .tt_timetable .event .top_hour
{
	margin-bottom: 15px;
}
.tt_timetable .event hr
{
	background: #FFFFFF;
    border: none;
    height: 1px;
    margin: 0;
    opacity: 0.4;
}
.tt_timetable.small
{
	display: none;
	font-size: 13px;
}
.tt_timetable.small.desktop
{
	display: block;
}
.tt_responsive .tt_timetable.small .box_header
{
	font-size: 16px !important;
	color: #34495E !important;
	font-family: 'Lato';
}
.rtl .tt_responsive .tt_timetable.small .box_header
{
	text-align: right;
}
.tt_responsive .tt_timetable.small .tt_items_list div.event_container
{
	width: 302px;
	padding: 0;
}
.tt_responsive .tt_timetable.small.use_colors .tt_items_list div.event_container
{
	width: 282px;
}
.tt_responsive .tt_timetable.small .tt_items_list div.value
{
	width: 120px;
}
.tt_responsive .tt_timetable.small .tt_items_list a,
.tt_responsive .tt_timetable.small .tt_items_list span
{
	font-family: 'Lato';
	color: #34495E !important;
	text-decoration: none;
	outline: none;
}
.tt_responsive .tt_timetable.small.use_colors .tt_items_list a,
.tt_responsive .tt_timetable.small.use_colors .tt_items_list span
{
	color: #FFFFFF !important;
}
.rtl .tt_responsive .tt_timetable.small .tt_items_list a,
.rtl .tt_responsive .tt_timetable.small .tt_items_list span
{
	text-align: right;
}
.tt_responsive .tt_timetable.small .tt_items_list span.event_description
{
	color: #6E7A87 !important;
}
.tt_responsive .tt_timetable.small.use_colors .tt_items_list span.event_description
{
	color: #FFFFFF !important;
}
.tt_responsive .tt_timetable.small .tt_items_list span.available_slots,
.tt_responsive .tt_timetable.small .tt_items_list span.available_slots span.count
{
	color: #FF8400 !important;
}
.tt_responsive .tt_timetable.small .tt_items_list a:hover
{
	text-decoration: underline;
}
.tt_responsive .tt_timetable.small .tt_items_list .value a.event_hour_booking
{
	color: #ffffff !important;
	padding-left: 5px;
	padding-right: 5px;
	width: auto;
}
.tt_responsive .tt_timetable.small .tt_items_list .value a.event_hour_booking:hover
{
	text-decoration: none;
}
.tt_timetable.small .box_header
{
	position: relative;
	cursor: pointer;
	margin: 30px 0 0 0;
}
.tt_timetable.small.use_colors .box_header
{
	margin-bottom: 30px;
}
.tt_timetable.small .box_header:first-child
{
	margin-top: 0;
}
.tt_timetable.small .box_header:after
{
	visibility: visible;
	position: absolute;
	right: 0;
	font-size: 20px;
	line-height: 1;
}
.rtl .tt_timetable.small .box_header:after
{
	visibility: visible;
	position: absolute;
	right: auto;
	left: 0;
	font-size: 20px;
	line-height: 1;
}
.tt_timetable.small .plus.box_header:after
{
	content: "+";
}
.tt_timetable.small .minus.box_header:after
{
	content: "-";
}
h3.box_header.plus+ul.tt_items_list
{
	display: none;
}
/* --- tip/tooltip/qtip --- */
.tt_tooltip
{
	cursor: pointer;
}
.tt_tooltip .tt_tooltip_text
{
	display: block;
	/*padding-bottom: 15px;*/
	visibility: hidden;
    opacity: 0;
	position: absolute;
	z-index: 1000;
	left: -19px;
	bottom: 100%;
	line-height: 1;
	text-align: center;
	/* CSS3 Transitions */
	-webkit-transition-duration: 0.25s;
	-moz-transition-duration: 0.25s;
	-o-transition-duration: 0.25s;
	-ms-transition-duration: 0.25s;
	transition-duration: 0.25s;
	-webkit-transition-timing-function: cubic-bezier(0.35,0,0.35,1);
	-moz-transition-timing-function: cubic-bezier(0.35,0,0.35,1);
	-o-transition-timing-function: cubic-bezier(0.35,0,0.35,1);
	-ms-transition-timing-function: cubic-bezier(0.35,0,0.35,1);
	transition-timing-function: cubic-bezier(0.35,0,0.35,1);
	/* CSS3 Transitions */
	-webkit-transition-property: opacity, visibility;
	-moz-transition-property: opacity, visibility;
	-o-transition-property: opacity, visibility;
	-ms-transition-property: opacity, visibility;
	transition-property: opacity, visibility;
	/*background: url('images/tooltip_arrow.png') no-repeat 15px bottom;*/
}
.rtl .tt_tooltip .tt_tooltip_text 
{
	left: auto;
	/*right: -19px;*/
}
.tt_tooltip .tt_tooltip_content
{
	background: #1F736A;
	color: #FFF;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	padding: 7px 10px 10px;
	line-height: 150%;
	font-size: 11px;
	text-align: left;
}
.rtl .tt_tooltip .tt_tooltip_content 
{
	text-align: right;
}
.tt_tooltip:hover .tt_tooltip_text
{	
	visibility: visible;
	opacity: 1;
}
.tt_tooltip .tt_tooltip_arrow
{
	content: '';
	position: relative;
	border-color: #1F736A transparent;
	border-style: solid;
	border-width: 5px 5px 0;
	bottom: -6px;
	left: 0;
	display: inline;
}
.rtl .tt_tooltip .tt_tooltip_arrow 
{
	left: auto;
	right: 0;
}
/* --- navigation wrapper --- */
.tt_navigation_wrapper
{
	width: 100%;
	display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
	display: -ms-flexbox;  /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
	display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	-moz-justify-content: space-between;
	justify-content: space-between;	
	-webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
	-webkit-align-items: flex-end;
	-ms-flex-align: end;	
	align-items: flex-end;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.tt_navigation_cell
{
	display: inline-block;
	max-width: 100%;
	margin: 0 30px 30px 0 !important;
}
.tt_navigation_cell:nth-child(2)
{
	margin-right: 0 !important;
}
.rtl .tt_navigation_cell
{
	margin: 0 0 30px 30px !important;
}
.tt_navigation_cell:nth-child(2)
{
	margin-left: 0 !important;
}
/* --- tabs box navigation --- */
.tabs_box_navigation.sf-timetable-menu
{
	float: none;
	clear: both;
}
.tabs_box_navigation li:after
{
	content: none !important;
}
.tabs_box_navigation.sf-timetable-menu *
{
	box-sizing: content-box;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	line-height: 1;
}
.tabs_box_navigation.sf-timetable-menu li.submenu:hover:after
{
	background: none;
}
.tabs_box_navigation.sf-timetable-menu .tabs_box_navigation_selected
{
	width: 256px;
	height: auto;
    padding: 13px 12px !important;
	background: #00A27C;
    color: #FFFFFF;
	cursor: pointer;
	margin: 0 !important;
}
.tabs_box_navigation.sf-timetable-menu .tabs_box_navigation_selected:hover
{
	background-color: #1F736A;
}
.tabs_box_navigation.sf-timetable-menu li:hover ul, .tabs_box_navigation.sf-timetable-menu li.sfHover ul
{
	top: 38px;
	border: 1px solid #1F736A;
}
.tabs_box_navigation_hidden
{
	display: none;
}
/* --- menu --- */
.sf-timetable-menu
{
	padding: 0 !important;
	margin: 0 30px 0 0 !important;
	list-style: none !important;
}
.rtl .sf-timetable-menu
{
	margin: 0 0 0 30px !important;
}
.sf-timetable-menu a
{
	text-decoration: none !important;
}
.sf-timetable-menu li, .sf-timetable-menu li:hover, .sf-timetable-menu li.sfHover, .sf-timetable-menu a:focus, .sf-timetable-menu a:hover, .sf-timetable-menu a:active
{
	background: none #fff;
}
.sf-timetable-menu li:hover a, .sf-timetable-menu li.selected a, .sf-timetable-menu li.current-menu-item a, .sf-timetable-menu li.current-menu-ancestor a
{
	color: #FFF;
	background: #1F736A;
}
.sf-timetable-menu li ul
{
	width: 228px;
	background: #FFF;
	border: 1px solid #E8E8E8;
	padding: 0 0 5px !important;
	list-style: none !important;
	margin: 0 !important;
}
.sf-timetable-menu li:hover ul, .sf-timetable-menu li.sfHover ul
{
	top: 44px;
}
.sf-timetable-menu li ul li
{
	width: 218px;
	height: auto;
	background-color: #fff;
	padding: 0 5px !important;
	list-style: none !important;
	margin: 0 !important;
}
.sf-timetable-menu li:hover ul a,
.sf-timetable-menu li.submenu:hover ul a
{
	border: none;
	color: #34495E !important;
	background: #FFF;
	padding: 12px 14px;
	font-size: 15px;
	font-family: 'Lato', Helvetica, Arial, sans-serif;
	transition: none !important;
}
.sf-timetable-menu li ul li a:hover, .sf-timetable-menu li ul li.selected a:hover
{
	background-color: #00A27C;
	color: #FFF !important;
	font-weight: normal;
}
.sf-timetable-menu li ul li.selected a
{
	background-color: #F0F0F0;
	color: #34495E;
	font-weight: normal;
}
/* --- items list --- */
.tt_items_list
{
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
}
.tt_items_list.margin_top
{
	margin-top: 8px;
}
.tt_items_list li
{
	padding: 12px 0 !important;
	margin: 0 !important;
	list-style: none !important;
	border-bottom: 1px solid #E0E0E0;
	background-position: left center;
	background-repeat: no-repeat;
	line-height: 120%;
}
.use_colors .tt_items_list li
{
	padding: 12px 10px !important;
	background-color: #00A27C;
}
.rtl .tt_items_list li 
{
	background-position: left center;
}
.tt_items_list li:first-child
{
	padding-top: 0;
}
.tt_items_list .event_container
{
	float: left;
}
.rtl .tt_items_list .event_container
{
	float: right;
}
.tt_items_list a,
.tt_items_list span
{
	outline: none;
}
.tt_items_list.thin a,
.tt_items_list.thin span
{
	font-weight: normal;
}
.tt_items_list.thin span.event_description
{
	display: block;
	margin-top: 10px;
}
.tt_items_list.thin span.available_slots
{
	display: block;
	margin-top: 9px;
	float: none;
}
.tt_items_list.thin a.event_hour_booking.tt_inactive
{
	opacity: 0.5;
}
.tt_items_list .value
{
	float: right;
	text-align: right;
	color: #34495E;
}
.use_colors .tt_items_list .value
{
	color: #FFFFFF;
}
.tt_items_list .value a.event_hour_booking
{
	display: block;
	text-align: center;
}
.rtl .tt_items_list .value 
{
	float: left;
}
.tt_items_list.opening_hours li span, .tt_items_list.opening_hours .value
{
	color: #FFF;
}
.tt_items_list.opening_hours li
{
	border-color: #4468B2;
}
.home_box .tt_items_list li:first-child
{
	padding-top: 12px;
}
.tt_items_list li a
{
	border: none;
}
.tt_items_list li a:hover
{
	text-decoration: underline;
}
/* --- tabs --- */
.tt-ui-tabs-hide
{
	display: none;
}
.tt_tabs .ui-tabs-panel p
{
	padding: 24px 0 25px;
}
/* --- tabs navigation --- */
.tt_tabs_navigation,
.ui-tabs .tt_tabs_navigation
{
	float: left !important;
	clear: both;
	vertical-align: bottom;
	width: auto !important;
	padding: 0;
	margin: 0;
	list-style: none !important;
	box-sizing: content-box;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	background: none !important;
	border: none !important;
}
.rtl .tt_tabs_navigation,
.rtl .ui-tabs .tt_tabs_navigation
{
	float: right !important;
}
.tt_tabs_navigation li,
.ui-tabs .tt_tabs_navigation li
{
	float: left;
	margin: 0 20px 0 0 !important;
	padding: 0 !important;
	font-size: 18px !important;
	background: none !important;
	border: none !important;
	list-style: none !important;
}
.rtl .tt_tabs_navigation li,
.rtl .ui-tabs .tt_tabs_navigation li 
{
	float: right;
	margin: 0 0 0 20px !important;
}
.tt_tabs_navigation li:last-child
{
	margin-right: 0 !important;
}
.rtl .tt_tabs_navigation li:last-child
{
	margin-left: 0 !important;
}
.tt_tabs_navigation li a
{
	width: auto !important;
	display: block;
	text-align: center;
	color: #666 !important;
	padding: 8px 0 !important;
	border: none !important;
	border-bottom: 1px solid #E5E5E5 !important;
	line-height: normal;
	outline: none;
	text-decoration: none;
	font-size: 15px !important;
	font-family: 'Lato', Helvetica, Arial, sans-serif;
	transition: none !important;
	margin-bottom: 1px;
}
.tt_tabs_navigation li a:hover,
.tt_tabs_navigation li a.selected,
.tt_tabs_navigation li.ui-tabs-active a
{
	border-bottom-width: 3px !important;
	padding-bottom: 7px !important;
	border-color: #00A27C !important;
	color: #000 !important;
	margin-bottom: 0;
}
.sf-timetable-menu a:hover,
.tt_tabs_navigation li a:hover,
.tt_tabs_navigation li a:focus,
.tt_tabs_navigation li a:active
{
	text-decoration: none;
}
/* --- tabs box navigation --- */
.tabs_box_navigation.sf-timetable-menu
{
	float: left;
	clear: none;
	font-family: 'Lato', Helvetica, Arial, sans-serif;
	font-size: 18px;
}
.rtl .tabs_box_navigation.sf-timetable-menu
{
	float: right;
}
.tabs_box_navigation.sf-timetable-menu li.submenu:hover:after
{
	background: none;
}
.tabs_box_navigation .tabs_box_navigation_icon
{
	float: right;
	background: url("../images/arrow_menu_expand.png") no-repeat scroll 0 0 transparent;
	width: 11px;
	height: 11px;
	margin-top: 3px;
}
.rtl .tabs_box_navigation .tabs_box_navigation_icon 
{
	float: left;
}
.tabs_box_navigation.sf-timetable-menu .tabs_box_navigation_selected
{
	width: 190px;
	height: auto;
    padding: 15px 19px !important;
	margin: 0 !important;
	list-style: none !important;
    color: #FFFFFF;
	cursor: pointer;
	border: 1px solid #00A27C;
}
.tabs_box_navigation.sf-timetable-menu .tabs_box_navigation_selected:hover
{
	background-color: #FFF;
	color: #34495E;
	box-shadow: 0px 6px 8px 0px rgba(0,0,0,0.1);
	border: 1px solid rgba(0,0,0,0.1);
}
.tabs_box_navigation.sf-timetable-menu .tabs_box_navigation_selected:hover .tabs_box_navigation_icon
{
	background-position: 0 -11px;
}
.rtl .tabs_box_navigation.sf-timetable-menu .tabs_box_navigation_selected:hover .tabs_box_navigation_icon
{
	background-position: 0 -11px;
}
.tabs_box_navigation.sf-timetable-menu li:hover ul,
.tabs_box_navigation.sf-timetable-menu li.sfHover ul
{
	top: 48px !important;
	left: -1px;
	box-shadow: 0px 6px 8px 0px rgba(0,0,0,0.1);
	border: 1px solid rgba(0,0,0,0.1);
	border-top: none;
}
.rtl .tabs_box_navigation.sf-timetable-menu li:hover ul,
.tabs_box_navigation.sf-timetable-menu li.sfHover ul 
{
	left: auto;
	right: -1px;
}
.tabs_box_navigation label
{
	display: inline !important;
	font-size: 18px !important;
	font-weight: normal !important;
}
.tabs_box_navigation_hidden
{
	display: none;
}
/* --- generate pdf --- */
form.tt_generate_pdf
{
	display: block;
	float: right;
}
form.tt_generate_pdf textarea.tt_pdf_html
{
	display: none;	
}
form.tt_generate_pdf input[type="submit"]
{
	background-image: none;
	background-color: #00A27C;
	color: #fff;
	font-size: 14px;
	line-height: 24px;
	font-family: 'Lato', Helvetica, Arial, sans-serif;
	padding: 13px 20px;
	-webkit-transition: background-color 0.2s, bottom 0.2s !important; /* Safari and Chrome */
	-moz-transition: background-color 0.2s, bottom 0.2s !important; /* Firefox */
	-o-transition: background-color 0.2s, bottom 0.2s !important; /* Opera */
	transition: background-color 0.2s, bottom 0.2s !important;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	border: none;
	cursor: pointer;
	-webkit-appearance: none;
}
form.tt_generate_pdf input[type="submit"]:hover
{
	background-color: #07b38a;
}
/* --- booking --- */
.tt_booking_overlay
{
	position: absolute;
	background-color: rgba(85,85,85,0.2);
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 999998;
}
.tt_booking
{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	position: absolute;
	z-index: 999999;
	width: 500px;
	background-color: #ffffff;
	margin: 0 50px;
	overflow: hidden;
	font-family: 'Lato', Helvetica, Arial, sans-serif;
	text-align: center;
	-webkit-box-shadow: 0px 20px 30px -5px rgba(0,0,0,0.15);
	-moz-box-shadow: 0px 20px 30px -5px rgba(0,0,0,0.15);
	box-shadow: 0px 20px 30px -5px rgba(0,0,0,0.15);
}
.tt_booking,
.tt_booking *
{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.tt_booking .tt_booking_message
{
	margin: 40px 20px 37px;
}
.tt_center
{
	text-align: center;
}
.tt_booking .tt_booking_message h2
{
	font-family: 'Lato', Helvetica, Arial, sans-serif;
	font-size: 24px;
	line-height: 36px;
	color: #111111;
	color: #333333;
	margin: 0 0 25px 0;
	font-weight: 400;
}
.tt_booking .tt_booking_message p
{
	color: #34495e;
	color: #666666;
	font-size: 16px;
	margin: 33px 10px 0;
	line-height: 24px;
	padding: 0;
	font-weight: 400;
}
.tt_booking .tt_booking_message p.error-info
{
	margin-top: 20px;
	margin-bottom: 0;
}
/* WP filter is adding empty <p> tag which needs to be hidden. */
.tt_booking p:empty
{
	display: none;
}
.tt_booking .event_details_wrapper
{
	padding: 14px 13px 15px;
	border: 1px solid #e9e9e9;
	margin: 0 10px;
}
.tt_booking p.event_details
{
	font-size: 16px;
	line-height: 24px;
	margin: 0;
	color: #333333;
	font-weight: 400;
}
.tt_booking p.event_details.bold
{
	font-weight: 700;
}
.tt_booking a
{
	font-size: 16px;
	font-weight: 400;
	color: #27AE61;
	text-decoration: none;
}
.tt_booking a:hover
{
	cursor: pointer;
	text-decoration: none;
	color: #27AE61;
}
.tt_booking .tt_btn_wrapper
{
	margin-top: 35px;
}
.tt_booking a.tt_btn
{
	display: inline-block;
	text-decoration: none;
	height: 50px;
	line-height: 50px;
	padding: 0 20px;
	font-size: 16px;
	min-width: 160px;
	margin: 0 10px 0;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	-webkit-transition: background-color 0.2s;
	-moz-transition: background-color 0.2s;
	-o-transition: background-color 0.2s;
	transition: background-color 0.2s;
}
.tt_booking a.tt_btn.book,
.tt_booking a.tt_btn.login,
.tt_booking a.tt_btn.continue
{
	background-color: #27ae61;
	color: #fff;
}
.tt_booking a.tt_btn:hover
{
	background-color: #239C57;
}
.tt_booking a.tt_btn.cancel
{
	background-color: #eeeeee;	
	color: #333;
}
.tt_booking a.tt_btn.cancel:hover
{
	background-color: #E5E5E5;
}
/* --- booking guest form --- */
.tt_booking form.tt_booking_form
{
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin: 35px 0 -15px;
}
.tt_booking form.tt_booking_form .tt_field_wrapper
{
	flex-grow: 1;
	flex-basis: 191px;
	text-align: left;
	border: none;
	border-bottom: 1px solid #e9e9e9;
	margin-bottom: 15px;
	margin: 0 10px 15px;
}
.tt_booking form.tt_booking_form .tt_field_wrapper.wide
{
	flex-basis: 100%;
}
.tt_booking form.tt_booking_form .tt_field_wrapper label
{
	text-transform: uppercase;
	color: #999;
	font-size: 12px;
	line-height: 18px;
	font-weight: 400;
	display: block;
	margin: 0;
	padding: 0;
}
.tt_booking form.tt_booking_form .tt_field_wrapper .tt_field
{
	width: 100%;
	border: 0;
	outline: none;
	font-family: 'Lato', Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 30px;
	color: #333;
	display: inline-block;
	padding: 8px 0 15px;
	margin: 0;
}
.tt_booking form.tt_booking_form .tt_field_wrapper textarea.tt_field
{
	resize: none;
	height: 83px;
}
.tt_booking form.tt_booking_form .tt_field_wrapper .tt_slots_number_wrapper
{
	width: 100%;
}
.tt_booking form.tt_booking_form .tt_field_wrapper .tt_slots_number_wrapper input[type="number"].tt_field
{
	width: 138px;
	appearance: textfield;
	-moz-appearance: textfield;
	-webkit-appearance: textfield;
	-webkit-appearance: none;
}
.tt_booking form.tt_booking_form .tt_field_wrapper .tt_slots_number_wrapper input[type="number"].tt_field::-webkit-inner-spin-button, 
.tt_booking form.tt_booking_form .tt_field_wrapper .tt_slots_number_wrapper input[type="number"].tt_field::-webkit-outer-spin-button
{ 
	-webkit-appearance: none;
}
.tt_booking form.tt_booking_form .tt_field_wrapper .tt_slots_number_wrapper 
{
	float: right;
}
.tt_booking form.tt_booking_form .tt_field_wrapper .tt_slots_number_wrapper input[type="button"]
{
	float: right;
	border: none;
	display: inline-block;
	width: 25px;
	background-color: #e9e9e9;
	cursor: pointer;
	margin-left: 5px;
	margin-top: 11px;
	padding: 0;
	color: #333;
	font-size: 17px;
	font-family: Arial;
	-webkit-appearance: none;
}
.tt_booking form.tt_booking_form .tt_field_wrapper .tt_slots_number_wrapper input[type="button"]:focus
{
	outline: none;
}
.tt_booking form.tt_booking_form .tt_field_wrapper .tt_slots_number_wrapper input[type="button"].tt_slots_number_minus
{
	margin-left: 0;
	padding-top: 11px;
	padding-bottom: 13px;
	line-height: 1px;
}
.tt_booking form.tt_booking_form .tt_field_wrapper .tt_slots_number_wrapper input[type="button"].tt_slots_number_plus
{
	padding-top: 10px;
	padding-bottom: 8px;
	line-height: 7px;
}
/* --- booking preloader --- */
.tt_preloader
{
	margin: 50px auto 50px;
	width: 70px;
	text-align: center;
}
.tt_preloader > div
{
	width: 18px;
	height: 18px;
	background-color: #E5E5E5;
	border-radius: 100%;
	display: inline-block;
	-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.tt_preloader .bounce1
{
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}
.tt_preloader .bounce2
{
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}
/* --- qTip2 --- */
.qtip.tt-qtip2
{
	z-index: 9999999 !important;
}
.qtip.tt-qtip2 .ui-tooltip-content
{
	border: none;
	padding: 7px 10px 10px 10px;
	line-height: 150%;
}
.qtip.tt-qtip2.ui-tooltip-success .ui-tooltip-content
{
	background-color: #00A27C;
}
.qtip.tt-qtip2.ui-tooltip-error .ui-tooltip-content
{
	background-color: #F0ACB0;
}
.qtip.tt-qtip2 .ui-tooltip-content h2,
.qtip.tt-qtip2 .ui-tooltip-content p
{
	color: #fff;
	margin: 0;
	padding: 0;
}
.qtip.tt-qtip2 .ui-tooltip-content h2
{
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 2px;
}
.qtip.tt-qtip2 .ui-tooltip-content p
{
	font-size: 11px;
}

@-webkit-keyframes sk-bouncedelay
{
	0%, 80%, 100%
	{
		-webkit-transform: scale(0);	
	}
	40%
	{
		-webkit-transform: scale(1.0);
	}
}
@keyframes sk-bouncedelay
{
	0%, 80%, 100%
	{ 
		-webkit-transform: scale(0);
		transform: scale(0);
	}	
	40%
	{ 
		-webkit-transform: scale(1.0);
		transform: scale(1.0);
	}
}
  </style>

  <nav>
    <ul class="pager">
      <li class="previous-week"><a href="#">&larr; Week eerder</a></li>
      <li class="current-week"><a href="#">Deze week</a></li>
      <li class="next-week"><a href="#">Week later &rarr;</a></li>
    </ul>
  </nav>
  
  <script type="text/javascript">
    var week = 0;
    var $loading = $("#loading");  
    var $schedule = $("#schedule");

    function gotoPage(week) {
      $loading.css('height', $schedule.height() + 'px').show();
      $schedule.hide();
      window.location.hash = (!week) ? "deze-week" 
                             : (week < 0) ? (week == -1 ? "1-week-geleden" : (-week) + "-weken-geleden")
                             : "over-" + (week == 1 ? "1-week" : week + "-weken");
      $.ajax({
        'url': '{{url('gids')}}/' + week,
        'success': function(html, status, xhr) { 
          $schedule.hide().html(html).fadeIn(); 
          scrollToMiddle($(".current-marker"));
        }
      }).done(function(data) { $loading.hide(); });
    }

    $(".pager .previous-week").click(function(e) { gotoPage(--week); e.preventDefault(); });
    $(".pager .current-week").click(function(e) { gotoPage(week = 0); e.preventDefault(); });
    $(".pager .next-week").click(function(e) { gotoPage(++week); e.preventDefault(); });

    window.onhashchange = function() { 
      if(window.location.hash == "#deze-week") { 
        newWeek = 0;
      } else if(window.location.hash.endsWith("1-week-geleden")) {
        newWeek = -1;
      } else if(window.location.hash.endsWith("over-1-week")) {
        newWeek = 1;
      } else if(window.location.hash.endsWith("weken-geleden")) {
        newWeek = -parseInt(window.location.hash.substr(1));
      } else if(window.location.hash.startsWith("#over-")) {
        newWeek = parseInt(window.location.hash.substr(6));
      }

      if(newWeek != week) { 
        gotoPage(newWeek); 
      }
    }

    function scrollToMiddle($elt) {
      if($elt.length == 0) { return; }
      var elem_position = $elt.offset().top;
      var window_height = $(window).height();
      var y = elem_position - window_height / 2;
      window.scrollTo(0,y);
    }

    scrollToMiddle($(".current-marker"));

  </script>
@endsection