body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote, clipshead {
	margin: 0; padding: 0; border: 0; font-family: "Open Sans", sans-serif;
	text-rendering: optimizeLegibility;
}

body { /* Default font size and colour */
	margin-top: 50px; /* Makes a space between the top edge and the start of the main white text box */
	background-image: url('images/IMG_1365blue2.jpg');
	color:#757575;
	font-size: 14px;
	line-height: 1.714285714;
}

.site_title {
	padding-top: 10px;
}

.site_description {
	padding-top: 0px;
	padding-bottom: 10px;
}

p {
	-ms-word-break: break-all; /* Does auto hyphenation */
	word-break: break-all; /* Does auto hyphenation */
	word-break: break-word; /* Does auto hyphenation */
	-o-hyphens: auto; /* Does auto hyphenation */
	-ms-hyphens: auto; /* Does auto hyphenation */
	-moz-hyphens: auto; /* Does auto hyphenation */
	-webkit-hyphens: auto; /* Does auto hyphenation */
	hyphens: auto; /* Does auto hyphenation */
	margin: 0 0 14px; /* Bottom margin =  */
	/* margin: 0 0 1.714285714rem; */
	margin: 0 0 1.0rem; /* Bottom margin */
	/* margin-top: 0px;
	margin-right: 0px;
	margin: 0 0 0.5rem;
	margin-left: 0px; */
}

p.right
{
	text-align:right;
}

.main-image {
border-radius: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.small-image {
border-radius: 1px;
border-top-left-radius: 1px;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
border-bottom-left-radius: 1px;
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);
}

.image_caption {
	font-size: 12px;
	padding-top: 0px;
	padding-bottom: 0px;
}

/* ========= TABLE STUFF =========*/
table, th, td
{
	border:0px;
	padding:0px;
}

td.right
{
	text-align:right;
}

table.workslist
{
	width: 100%;
}

table.CDlist
{
	width: 100%;
	font-size: 12px;
}

hr {
	display: block; height: 1px;
    border: 0;
	border-top: 1px solid #eee;
    margin: -2px 0 3px 0px;
	padding: 0 0 0 0;
} 

h1 {
	font-size: 36px;
	margin: 0 0 -10px 0;
}

h2 {
	font-size: 24px;
	margin: 0 0 0 0;
}

h3 {
	background: #5f6975;
	font-size: 24px;
	color:#ffffff;
	padding-left: 10px
}

h4 {
	font-size: 18px;
	padding-top: 10px;
	padding-bottom: 10px;
	}
	
a {
	font-style:normal;
	text-decoration:inherit;
	color: inherit;
	background: inherit;
}

/* ================ LINKS ================ */
a:hover {
	font-style:normal;
	text-decoration:underline;
	color:#CC0033;
}

a[name]:hover { /* gets rid of hover style on named anchors. (But we're not using named anchors, as they're SO old-school) */
	text-decoration: inherit;
	color: inherit;
	background: inherit;
}


/* =========== Navigation menus =========== */

nav {
	margin: 0px auto; 
	text-align: left;
	color:#666666;
	font-size: 12px;
}

nav ul ul {
	display: none;
	text-align: left;
	color:#666666;
	font-size: 12px;
}

nav ul li:hover > ul {
	display: block;
}

nav ul {
	background: #ffffff; /* Background colour of the menu */
	/* --- Colour gradient of the menu  ---
	background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
	background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
	background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15); */
	padding: 0 0px;
	/* border-radius: 5px; */  
	list-style: none;
	position: relative;
	display: inline-table;
	z-index:1;/* Ensures menu drawn on top of audioplayer graphics on soundclips page */
}

nav ul:after {
		content: ""; clear: both; display: block;
}

nav ul li {
	float: left;
}

nav ul li:hover {
	background: #4b545f;
	/* background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
	background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
	background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); */
}
nav ul li:hover a { /* Hover style for main menu links - no change of colour or underline */
	color: #fff;
	text-decoration:none;
}
		
nav ul li a {
	display: block; padding: 5px 20px;
	color: #757575; text-decoration: none;
}
			
nav ul ul {
	background: #5f6975; border-radius: 0px; padding: 0;
	position: absolute; top: 100%;
}

nav ul ul li {
	float: none; 
	border-top: 1px solid #6b727c;
	border-bottom: 1px solid #575f6a; position: relative;
}

nav ul ul li a {
	padding: 5px 30px;
	color: #fff;
}	

nav ul ul li a:hover {
	background: #4b545f;
}
		
nav ul ul ul {}

/* ==== End of Navigation menus ==== */

/* ==== Navigation Sub-menus aka 'Tabs' (for example, for tabs on works list page) ==== */

.tab-on {
	background: #ffffff; /* Background colour of the menu */
	padding: 0 0px;
	list-style: none;
	position: relative;
	display: inline-table;
}

.tab-off {
		content: ""; clear: both; display: block;
}

tab ul li {
	float: left;
}

tab:hover {
	background: #4b545f;
	/* background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
	background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
	background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); */
}

.subnav-area { /* For navigation sub-menu tabs - on the right */
	position: static;
	float: right;
	width: 290px;
	font-size: 11px;
}

/* ==== End of Navigation Sub-menus aka 'Tabs' ==== */

/* ============== LAYOUT IDs ============== */

#wrapper { /* Container for the whole page - fixed width and centred */
width:1000px;
margin:0 auto 0 auto; /* Centres the block in a way that even IE6 can cope with */
padding-top: 24px;
padding-left: 36px;
padding-right: 36px;
background: #ffffff; 
}

#footer_wrapper {
	float: left;
	font-size: 10px;
	color: #FFFFFF;
	background-color: #FFFFFF;
	text-align: left;
	width: 1000px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-bottom: 20px;
}

.maincolumn {
	float: left;
	width:625px;
	/* font-size: 14px; */
	color: #444;
}

/* ================ WORKS ================ */

.worksleftcolumn {
	float: left;
	width:400px;
	font-size: 14px;
}

.worksrightcolumn {
	float: right;
	width:580px;
	font-size: 14px;
}

/* ================ SOUNDCLIPS ================== */
.soundclipsleftcolumn {
	float: left;
	width:540px;
	font-size: 14px;
}

.soundclipsrightcolumn {
	float: right;
	width:460px;
	font-size: 14px;
}

/* =============== PROGNOTES =============== */

#prognote-container {
	/*padding:10px;
	 border:1px solid gray;
	margin-bottm:10px; 
	width:90%;*/
	padding: 20px 20px 1px 20px; /* top right bottom left */
	box-shadow: 1px 1px 5px  #888888;
}

p.prognote { /* Main body of prognote */
	text-align:justify;
	font-size:12px;
}

p.prognote-quote { /* For quotations at top of programme notes */
	margin-left: 40px;
	margin-right: 40px;
	margin-bottom: 0px; /* No 'extra line' after this para */
	font-size:13px;
	text-align:justify;
}

p.prognote-attrib { /* For attribution at end of quotations */
	margin-right: 40px;
	margin-bottom: 10px; /* Smaller 'extra line' after this para */
	text-align: right;
	font-size:12px;
	font-style:italic;
}

.prognote-title {
	font-size:24px;
	text-align:center;
	margin-bottom: 10px; /* Smaller 'extra line' after this para */
}

.prognote-dedication {
	font-size:12px;
	font-style:italic;
	text-align:center;
}



/* =============== NEWS =============== */

newshead {
	font-size: 18px;
}

p.news {
	margin: 0 0 12px;
}

.news-area { /* For news items on main page - a right hand column */
	float: right;
	width: 320px;
	font-size: 11px;
}

div.stretch { /* A hack to make containers stretch around floated elements that they contain */
	clear: left; line-height: 0; height: 0;
}

th {  /*Table header style */
	text-align: left;
	font-size: 14px;
}

th.workslist {
font-size: 16pt;
}

/* ------------------- PERFORMANCES -------------------*/

.perflist {  /*For table of list of performances */
	font-size: 11px;
}

.recordingsleftcolumn
{
	float: left;
	width:300px;
	font-size: 14px;
}

.recordingrightcolumn {
	float: right;
	width:700px;
	font-size: 14px;
}


/* -------------- SOUNDCLIPS ----------------*/

clipsh2 { /* Special header for soundclips - needed so heading and small text on same line (see below) */
	font-size: 24px;
	font-weight: bold;
	}

clipshead span { margin-left: 10px; } /* Special arrangement for soundclips header so heading and small text on same line */

.play {
        background: url('images/b_play_small.png') no-repeat;
        width: 32px;
        height: 32px;
        padding: 24px 45px 3px 0px;
        margin: 0 0 0 5px;
    }
.pause {
        background: url('images/b_pause_small.png') no-repeat;
        width: 32px;
        height: 32px;
        padding: 24px 45px 3px 0px;
        margin: 0 0 0 5px;
    }
	
a.twitter-timeline {
	font: normal 10px/12px Arial, Helvetica, sans-serif;
	color:#757575;
	}
	
/* Audio player style*/
.audiojs { height: 22px; background: #404040;
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5f6975), color-stop(0.5, #69737f), color-stop(0.51, #56606b), color-stop(1, #5f6975));
        background-image: -moz-linear-gradient(center top, #5f6975 0%, #69737f 50%, #56606b 51%, #5f6975 100%);
        -webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
        -o-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); }
.audiojs .play-pause { width: 15px; height: 20px; padding: 0px 8px 0px 0px; }
.audiojs p { width: 25px; height: 20px; margin: -3px 0px 0px -1px; }
.audiojs .scrubber { background: #747e89; width: 310px; height: 10px; margin: 5px; }
.audiojs .progress { height: 10px; width: 0px; background: #cc;
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ccc), color-stop(0.5, #ddd), color-stop(0.51, #ccc), color-stop(1, #ccc));
        background-image: -moz-linear-gradient(center top, #ccc 0%, #ddd 50%, #ccc 51%, #ccc 100%); }
.audiojs .loaded { height: 10px; background: #000;
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #222), color-stop(0.5, #333), color-stop(0.51, #222), color-stop(1, #222));
        background-image: -moz-linear-gradient(center top, #222 0%, #333 50%, #222 51%, #222 100%); }
.audiojs .time { float: left; height: 25px; line-height: 25px; }
.audiojs .error-message { height: 24px;line-height: 24px; }

.track-details { clear: both; height: 20px; width: 448px; padding: 1px 6px; background: #eee; color: #222; font-family: monospace; font-size: 11px; line-height: 20px;
        -webkit-box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.15); }
.track-details:before { content: '♬ '; }
.track-details em { font-style: normal; color: #999; }