@charset "utf-8";
/* CSS Document */


/*CALENDAR PAGE*/

	.calendar {
    border: 1px dashed #CCC;
    background-color: #FFF;
    margin-top: 15px;
}
	.calendar thead tr td h3 {
	font-size: 	clamp(1rem, 1.5vw, 1.25rem);
	font-weight: bold;
	color: #000;
	text-transform: uppercase;
	vertical-align: top;
	margin-top: 0px;
	margin-bottom: 0px;
}
	.calendar tr td {
	font-size: 1.025rem;
	font-weight: normal;
	margin-top: 15px;
	border: 1px dashed #CCC;
	vertical-align: top;
}    
    .calendar tr .long {
	font-size: 9pt;
}
    .calendar tr td h4 {
	text-align: center;
	font-size: 8pt;
	font-weight: normal;
	text-transform: capitalize;
	margin-top: 0px;
	margin-bottom: 0px;
}
	.calendar thead tr th h3 {
	font-size: 1rem;
	font-family: Roboto;
	font-weight: bold;
	color: #000;
	text-transform: uppercase;
	vertical-align: top;
	margin-top: 0px;
	margin-bottom: 0px;
	text-align: left;
}
    .calendar tr td .cancelled {
	text-transform: uppercase;
	background-color: #FF9;
	color: #BD0000;
	font-weight: bold;
}

	.calendar thead tr th {
	border: 1px dashed #ccc;
}

	p.dtype {
	font-size: 1rem;
	text-align: left;
}
	#TabbedPanels1 .TabbedPanelsContentGroup .TabbedPanelsContent.TabbedPanelsContentVisible h2 {
	font-size: 1.5rem;
	font-weight: bold;
	text-transform: uppercase;
	color: #d14949;
	margin-top: 0px;
	margin-bottom: 20px;
	margin-left: 20px;
}

s {
  text-decoration-line: line-through;
  text-decoration-color: black;
  text-decoration-style: wavy;
  text-decoration-thickness: 1px;
}


/* LINKS =============================================================================  */

.calendar tr td a { 
color: #0099FF;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
text-decoration: none;
}

.calendar tr td a:visited { 
color: #0099FF; }

.calendar tr td a:focus { 
color: rgb(0,0,0); }

.calendar tr td a:hover, 
a:active {
	outline: 0;
	color: #666666;
	transition: color .5s;
}



/*TABLES*/
.calendar {
	border: 1px dashed #ccc;
}


/*
	Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
	*/
	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

	.calendar {
	background-color: #FFF;
	margin-top: 15px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}


	.calendar tr td {
	font-family: Roboto;
	font-weight: normal;
	margin-top: 0px;
	border: none;
	vertical-align: top;
}    

	.calendar thead tr td h3 {
	font-size: 16px;
	font-family: Roboto;
	font-weight: bold;
	color: #000;
	text-transform: uppercase;
	vertical-align: top;
	margin-top: 0px;
	margin-bottom: 0px;
}

		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    tr {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 1;
	margin-left: rem;
	padding-top: 5px;
	padding-bottom: 5px;
    }
      
    tr:nth-child(odd) {
	background: #fff;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #fbcb09;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #fbcb09;
	padding-top: 5px;
	padding-bottom: 5px;
    }
    
		td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 5%;
		}

		td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 0;
			left: 6px;
			width: 45%;
			padding-right: 6px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		td:nth-of-type(1):before { content: ""; }
		td:nth-of-type(2):before { content: ""; }
		td:nth-of-type(3):before { content: ""; }
		td:nth-of-type(4):before { content: ""; }
		td:nth-of-type(5):before { content: ""; }
	}


/*  MEDIA  ============================================================================= */
/* Portrait phones and smaller */

@media (max-width: 480px) {
	.calendar {
	background-color: #FFF;
	margin-top: 15px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

}