﻿        <style  type="text/css">
        

.dummy 
{
float:left;
padding:5px;
}

.mixed-blend
{
	color: white;
	mix-blend-mode: difference;
}

.textured_background
{
	background:url('../../../Temp_textures.png');
	
}

.plainquote
{
	font-size:medium;
}

      
figure {
  border: 1px #cccccc solid;

  margin: 2px;
}

figcaption {
  
  color: rgb(99, 122, 201);
  font-style: italic;
  font-size:small;
  text-align: center;
}

.square {
    width: 100vw;
    height: 50vw;
}

.clearfix_hack::after {
  content: "";
  display: block;
  clear: both;
}

.text_centre
{
	text-align: center
}

.text_right
{
	text-align: right
}


.text_blue
{
	color: rgba(120,174,246,0.90);
}

.text_green
{
	color: #008000;
}


.red_alert {
	color: red;
}

.clickable
{
    margin-bottom : 10px;
}

ul.hat {
list-style-image: url('../../../images/HatVS.gif');
}

.spaced>li
{
    margin-bottom : 20px;
}

.large_font li{
font-size:large;
}

.spaced>dd
{
    margin-bottom : 20px;
}

table.WHTable {
  border: 1px solid #1C6EA4;
  background-color: #EEEEEE;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
table.WHTable td, table.WHTable th {
  border: 1px solid #AAAAAA;
  padding: 6px 6px;
}
table.WHTable tr:nth-child(even) {
  background: #D0E4F5;
}
table.WHTable thead {
  background: #1C6EA4;
  border-bottom: 2px solid #444444;
}
table.WHTable thead th {
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
  border-left: 2px solid #D0E4F5;
}
table.WHTable thead th:first-child {
  border-left: none;
}

.sheet_Music  {
	font-size: x-small;
}

.first_par {
	min-width: 350px;
}

table.CalLegend {
  margin-left: auto;
  margin-right: auto;
  border: 1px solid black;
  text-align: left;
  border-collapse: collapse;
}
table.CalLegend td, table.CalLegend th {
  border: 1px solid black;
  padding: 3px 6px;
}

.month{

	margin-left:auto; 
    margin-right:auto;
	width: 350px;
	border: 5px solid black;
	text-align: center;	
}

.month_cell {
border: 1px solid #000000;
}

.month_day_row{
	width: 14.2%;
	border: 1px solid #000000;

}

.weekend{
	
	width: 14.2%;
	border: 1px solid #000000;
	background-color: #C0C0C0;
	padding-top: 6%;
	padding-bottom: 6%;
	
}

.holiday_public{
	
	border: 1px solid #000000;
	background-color: #00FF00;
	padding-top: 6%;
	padding-bottom: 6%;

}

.holiday_school{
	
	border: 1px solid #000000;
	background-color: #00FFFF;
	padding-top: 6%;
	padding-bottom: 6%;

}

.holiday_other{
	
	border: 1px solid #000000;
	background-color: #CCCCFF;
	padding-top: 6%;
	padding-bottom: 6%;
}


.small_hat_align
{
	border-width: 0px;
	vertical-align: sub;
}

composer {

    color: yellow;
}

musicwork {

    color: green;
}


img
{  border-style: none;
}

div.half
{
max-width:290px;
padding: 10px;
margin: auto;
float:left;
}

.float_box_left
{
float:left;
padding:5px;
margin-right:12px
}

.float_box_right
{
float:right;
padding:5px;
}

.backgroundbox
{
padding: 10px;
background-color: #E9E9E9;
}

.person_box
{
	padding: 10px;
	background-color: #E9E9E9;
	max-width: 400px;
}

.roundcorners { display:inline-block; -moz-border-radius:0 5px 5px 5px; -webkit-border-radius:0 5px 5px 5px; border-radius:0 5px 5px 5px; }

.buttonLink {
    background-color  : #0000ff;
    border            : 2px solid  #000099;
    color             : #ffffff;
    font-weight       : bold;
    padding           : 10px;
}

.listLink {
    display: inline-block;
    padding: 10px 0px 10px 0px;
    border-bottom: 1px solid #cccccc;
}
.listLinkFirstItem {
    border-top: 1px solid #cccccc;
}

.info_box
{
	background-color: #DDDDDD;
	text-align:center;
	float: right;
	margin: 10px;
	padding: 7px;	
}

.event_heading
{

}

.event_description
{
	
}


.event_footer
{
	text-align:center;
	padding: 10px;
	background-color: #DDDDDD;
}

.listing_large
{
	padding: 10px;
	border: 1px solid rgba(120,174,246,0.90);
	margin-bottom: 10px;
	margin-top: 8px;
	font-size: large;
}

.listing_small
{
	padding: 10px;
	border: 1px solid rgba(120,174,246,0.90);
	background: rgba(0,0,0,0.02);
	margin-bottom: 10px;
	font-size: small;
}


.venues_list_box
{
	text-align:right;
}


.listing_one_third_box 
{
float:left;
width:192px;
padding:7px;

margin-bottom:10px;
-moz-box-shadow: 3px 7px 15px #333333;
-webkit-box-shadow: 3px 7px 15px #333333;
box-shadow: 3px 7px 15px #333333;
}

.listing_left_image 
{
display: block;
max-width:100%;
height:auto;
float:left;
margin-right:15px;
margin-bottom:10px;
-moz-box-shadow: 3px 7px 15px #333333;
-webkit-box-shadow: 3px 7px 15px #333333;
box-shadow: 3px 7px 15px #333333;
}

.listing_right_image 
{
display: block;
max-width:100%;
height:auto;
float:right;
margin-left:8px;
margin-right:15px;
margin-bottom:10px;
-moz-box-shadow: 3px 7px 15px #333333;
-webkit-box-shadow: 3px 7px 15px #333333;
box-shadow: 3px 7px 15px #333333;
}

.listing_right_image_no_shadow 
{
display: block;
max-width:100%;
height:auto;
float:right;
margin-left:8px;
margin-right:15px;
margin-bottom:10px;
}

.listing_centre_image 
{
display: block;
max-width:100%;
height:auto;
margin-left:8px;
margin-right:15px;
margin-bottom:10px;
-moz-box-shadow: 3px 7px 15px #333333;
-webkit-box-shadow: 3px 7px 15px #333333;
box-shadow: 3px 7px 15px #333333;
}

.listing_centre_image_no_shadow 
{
display: block;
max-width:100%;
height:auto;
margin-left:auto;
margin-right:auto;
margin-bottom:auto;
}

.listing_centre_master_page 
{
display: block;
max-width:100%;
height:auto;
margin-left:auto;
margin-right:auto;
margin-bottom:auto;
-moz-box-shadow: 3px 7px 15px #333333;
-webkit-box-shadow: 3px 7px 15px #333333;
box-shadow: 3px 7px 15px #333333;
}



.listing_centre_text 
{
padding: 10px;
-moz-box-shadow: 3px 7px 15px #333333;
-webkit-box-shadow: 3px 7px 15px #333333;
box-shadow: 3px 7px 15px #333333;
}


.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	margin-bottom:15px;
	height: 0;
	overflow: hidden;
	-moz-box-shadow: 3px 7px 15px #333333;
	-webkit-box-shadow: 3px 7px 15px #333333;
	box-shadow: 3px 7px 15px #333333;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.rtable {
  /*!
  // IE needs inline-block to position scrolling shadows otherwise use:
  // display: block;
  // max-width: min-content;
  */
  display: inline-block;
  vertical-align: top;
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  border-collapse: collapse;
  border-spacing: 0;
}

.rtable,
.rtable--flip tbody {
  -webkit-overflow-scrolling: touch;
  background: -webkit-radial-gradient(left ellipse, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center, -webkit-radial-gradient(right ellipse, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
  background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center, radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
  background-size: 10px 100%, 10px 100%;
  background-attachment: scroll, scroll;
  background-repeat: no-repeat;
}

.rtable td:first-child,
.rtable--flip tbody tr:first-child {
  background-image: -webkit-linear-gradient(left, white 50%, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(to right, white 50%, rgba(255, 255, 255, 0) 100%);
  background-repeat: no-repeat;
  background-size: 20px 100%;
}

.rtable td:last-child,
.rtable--flip tbody tr:last-child {
  background-image: -webkit-linear-gradient(right, white 50%, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(to left, white 50%, rgba(255, 255, 255, 0) 100%);
  background-repeat: no-repeat;
  background-position: 100% 0;
  background-size: 20px 100%;
}

.rtable th {
  font-size: 11px;
  text-align: left;
  text-transform: uppercase;
  background: #f2f0e6;
}

.rtable th,
.rtable td {
  padding: 6px 12px;
  border: 1px solid #d9d7ce;
}

.rtable--flip {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  background: none;
}

.rtable--flip thead {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  min-width: -webkit-min-content;
  min-width: -moz-min-content;
  min-width: min-content;
}

.rtable--flip tbody {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
}

.rtable--flip tr {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  min-width: -webkit-min-content;
  min-width: -moz-min-content;
  min-width: min-content;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}

.rtable--flip td,
.rtable--flip th {
  display: block;
}

.rtable--flip td {
  background-image: none !important;
  border-left: 0;
}

.rtable--flip th:not(:last-child),
.rtable--flip td:not(:last-child) {
  border-bottom: 0;
}


          #header {
             margin-left:auto; 
             margin-right:auto; 
             width:1000px;  
          }

          #header img { 
             max-width:860px; 
             max-height:300px; 
          }

          #banner {
             margin-left:auto; 
             margin-right:auto; 
             width:1000px;  
          }

          #banner img { 
             max-width:1000px;
          }

 
          #main {
            margin-left:auto;
            margin-right:auto;
            width:1000px; 
          }    

          #main-content {
            padding:7px;
            width:650px; 
            float:left;
          }  

          .right-column-container {
            padding:15px;
            width:280px; 
            float:right;
          }   


          .widget-content {
             margin-top:20px; 
             margin-bottom:20px;
             padding:1px;
             
             background-color:#DDDDDD; 
          }    

          .widget-title {
             text-align:center;
             font-weight:bold;
             padding:10px;
             background-color:#EEEEEE;  
          }    

          .widget-text {
             padding:10px;
             background-color:#FCFCFC;   
          }

          .ad-text {
             padding:10px;
             background-color:#FCFCFC;   
          }

          
           #main img { 
             max-width:620px; 
             max-height:800px;  
          }    

          #footer {
             margin-left:auto; 
             margin-right:auto; 
             width:1000px;  
          }

          #footer img { 
             max-width:860px; 
             max-height:300px; 
          }


          @media (min-width: 481px) and (max-width: 768px) {
            #header { width:740px; }
            #header img { max-width:500px; max-height:222px; }
            #banner { width:740px; }
            #banner img { max-width:740px; }
            #main { width:740px; }            
            #main-content { width:450px; float:left; }
            #main img { max-width:420px; }
            .right-column-container { width:200px; float:right; }
                        
            .ad-text { display:none; }
            #footer { width:740px; }
            
          } 

          @media (min-width: 321px) and (max-width: 480px) {
            #header { width:450px; }
            #header img { max-width:320px; max-height:135px; }
            #banner { width:450px; }
            #banner img { max-width:450px; }
            #main { width:420px; }            
            #main-content { width:400px;}
            #main img { max-width:370px; }
            .right-column-container { width:400px; }
            .widget-content { width:120px; margin:5px; float:left;}
            .widget-text { display:none; }
            .ad-text { display:none; }            
            #footer { width:450px; }
 
          }

          @media (max-width: 320px) {
            #header { width:275px; }
            #header img { max-width:200px; max-height:83px; }
            #banner { width:275px; }
            #banner img { max-width:275px; }
            #main { width:250px; }            
            #main-content { width:250px;padding:0px;}
            #main img { max-width:220px; }
            .right-column-container { width:250px; padding:0px; }
                        
            .widget-text { display:none; }
            #footer { width:275px; } 
          }
          
			

	</style>