/*
Original design: andreas02 (v3.5 - Sep 11, 2012) - A free xhtml/css website template by Andreas Viklund.
For more information, see http://andreasviklund.com/templates/andreas02/
*/

/* General layout */
body {background:#e0e0e0; color:#303030; font:76% tahoma, verdana, sans-serif; margin:0; padding:15px 0 0;}
#container {background:#fff; margin:0 auto 20px; padding:5px 20px 20px; width:730px;}
#container-wide {background:#fff; margin:0 auto 20px; padding:5px 20px 20px; width:1200px;}

/* Full-width area at top of screen for score page */
#score-container {background:#fff; margin:0 auto 20px; padding:5px 20px 20px; width:950px;}

/*///CSS ADAPTED FOR FADE TRANSITIONS  V.1.0 ///*/
#spwrap {box-shadow: 10px 10px 5px #888; border-style:solid; border-width:1px; padding:0px 50px 0px 50px;}
#score-page {width:850px;}
#spo{background-color:#fff; position:absolute; z-index:1; top:21px; visibility:hidden}
#score-page-overlay{width:850px; }
/*////////////////////////////////////////////////*/

/* Full-width area at top of screen for St Nicholas score page */
#score-container-2 {background:#fff; margin:0 auto 20px; padding:5px 20px 20px; width:1200px;}
#score-page-2 {border-style:solid; border-width:1px; box-shadow: 10px 10px 5px #888; padding:0px 50px 0px 50px; width:1100px;}

/* Narrower borders at edges of screen for St Nicholas video score page */
#score-container-3 {background:#fff; margin:0 auto 10px; padding:5px 10px 10px; width:1500px;}
#score-page-3 {border-style:solid; border-width:1px; box-shadow: 10px 10px 5px #888; padding:0px 50px 0px 50px; width:1400px;}

/* Site title */
#logo {margin:15px 0 0;}
#logo h1 a {border:none; color:#505050;}
#logo h1 a:hover {border:none; color:#303030; text-decoration:none;}
#logo p {font-size:1.3em;  color:#505050; margin:0 0 20px 0;}

/* Dropshadow for multiple images <img /> on a single HTML page */
#dropshadow1 {box-shadow: 10px 10px 5px #888;}
#dropshadow2 {box-shadow: 10px 10px 5px #888;}
#dropshadow3 {box-shadow: 10px 10px 5px #888;}
#dropshadow4 {box-shadow: 10px 10px 5px #888;}
#dropshadow5 {box-shadow: 10px 10px 5px #888;}
#dropshadow6 {box-shadow: 10px 10px 5px #888;}
#dropshadow7 {box-shadow: 10px 10px 5px #888;}
#dropshadow8 {box-shadow: 10px 10px 5px #888;}

/* Tags */
a {border-bottom:1px dotted #505050; color:#303030; text-decoration:none;}
a:hover {border-bottom:1px solid #505050; color:#303030; text-decoration:none;}
a img {border:0;}

/* Tag colours for the photo gallery */
a.gallery:link {color:#ffffff;}
a.gallery:visited {color:#ffffff;}
a.gallery:hover {color:#ffff00;}

h1 {font-size:2.2em; font-weight:400; margin:0 0 5px; padding:0;} 
h2 {font-size:1.8em; font-weight:400; margin:0 0 10px;}
h3 {font-size:1.4em; font-weight:400; margin:0 0 10px;}
h4 {font-size:1.3em; font-weight:400; margin:0 0 10px;}
h5 {font-size:1.1em; font-weight:400; margin:0 0 10px;}
p {line-height:1.5em; margin:0 0 15px; text-align:left;}
ul,ol {margin:0 0 15px 15px; padding:0;}
li {margin:0 0 3px 0;}

/* Toptabs menu */
#toptabs {font-size:.8em; margin:10px auto -13px; width:760px;}
#toptabs p {color:gray; text-align:right;}
.toptab {background:#f0f0f0 url(images/corner2.gif) top right no-repeat; border-bottom:1px solid #e0e0e0; color:gray; margin:0 0 0 4px; padding:4px 5px 3px; text-decoration:none;}
.toptab:hover {background:#fafafa url(images/corner2.gif) top right no-repeat; border-bottom:1px solid #eaeaea; color:#505050; text-decoration:none;}
.activetoptab {background:#fff url(images/corner2.gif) top right no-repeat; border-bottom:1px solid #fff; color:#505050; margin:0 0 0 4px; padding:4px 5px 3px; text-decoration:none;}
.activetoptab:hover {border-bottom:1px solid #fff; text-decoration:none;}

/* Navitabs menu */
#navitabs {clear:both;}
.navitab {background:#e0e0e0 url(images/corner.gif) top right no-repeat; border-bottom:1px solid #fff; border-left:1px solid #fff; font-size:1.1em; margin:0 0 4px; padding:4px 8px; text-decoration:none;}
.navitab:hover {background:#d0d0d0 url(images/corner.gif) top right no-repeat; border-bottom:1px solid #fff; text-decoration:none;}
.activenavitab {background:#505050 url(images/corner.gif) top right no-repeat; color:#fff; font-size:1.1em; margin:0 0 5px; padding:4px 8px 5px; text-decoration:none;}
.activenavitab:hover {color:#fff; text-decoration:none;}

/* Header description area */
#desc {background:#505050 url(images/front.jpg) bottom left repeat-y; clear:both; color:#fff; /* height:200px; */ margin:5px 0 15px; padding:0 0 5px 0;}
#desc p {font-size:1em; line-height:1.3em; padding:0 0 0 15px; width:290px;}
#desc h2 {color:#fff; padding:15px 15px 0;}
#desc a {border-color:#fff; color:#fff; text-decoration:none;}

#desc-wide {background:#505050 url(images/front-wide.jpg) bottom left repeat-y; clear:both; color:#fff; /* height:200px; */ margin:5px 0 15px; padding:0 0 5px 0;}
#desc-wide p {font-size:1em; line-height:1.3em; padding:0 0 0 15px; width:480px;}
#desc-wide h2 {color:#fff; padding:15px 15px 0;}
#desc-wide a {border-color:#fff; color:#fff; text-decoration:none;}

#desc-wider {background:#505050 url(images/front-wider.jpg) bottom left repeat-y; clear:both; color:#fff; /* height:200px; */ margin:5px 0 15px; padding:0 0 5px 0;}
#desc-wider p {font-size:1em; line-height:1.3em; padding:0 0 0 15px; width:700px;}
#desc-wider h2 {color:#fff; padding:15px 15px 0;}
#desc-wider a {border-color:#fff; color:#fff; text-decoration:none;}

/* Main content */
#main {border-right:1px solid #d8d8d8; float:left; margin:0; padding:0 15px 0 0; width:550px;}
#main-wide {float:left; margin:0; padding:0 15px 0 0; width:730px;}
#main-wide-2 {border-right:1px solid #d8d8d8; float:left; margin:0; padding:0 20px 0 0; width:750px;}
#main-wide-3 {border-right:1px solid #d8d8d8; float:left; margin:0; padding:0 20px 0 0; width:750px;}
#main-wider {float:left; margin:0; padding:0 15px 0 0; width:1500px;}
#main-wider-2 {float:left; margin:0; padding:0 15px 0 0; width:1500px;}
#main-score {float:left; margin:0; padding:0 15px 0 0; width:460px;}
#main-score-2 {float:left; margin:0; padding:0 15px 0 0; width:300px;}
#main-half {border-right:1px solid #d8d8d8; float:left; margin:0; padding:0 15px 0 0; width:345px;}
#main-half-2 {border-right:1px solid #d8d8d8; float:left; margin:0; padding:0 15px 0 0; width:345px;}
#main-twothirds {border-right:1px solid #d8d8d8; float:left; margin:0; padding:0 15px 0 0; width:460px;}
#main-twothirds-2 {float:left; margin:0; padding:0 15px 0 0; width:460px;}
#main-narrow {border-right:1px solid #d8d8d8; float:left; margin:0; padding:0 15px 0 0; width:300px;}
#main-v-narrow {border-right:1px solid #d8d8d8; float:left; margin:0; padding:0 15px 0 0; width:200px;}
#main-middle {float:left; margin:30px; padding:0 0 0 0; width:325px;}
#main-mid-narrow {float:left; margin:30px; padding:0 0 0 0; width:250px;}

/* Sidebar */
#sidebar-wide {float:right; margin:10px; width:600px;}
#sidebar-wider {float:right; margin:5px; width:700px;}
#sidebar-half {float:right; margin:10px; width:400px; padding-left:30px; border-left:1px solid LightGray;}
#sidebar-demi {float:right; margin:10px; width:400px; padding-left:30px; border-left:1px solid LightGray;}
#sidebar-third {float:right; margin:10px; width:300px; padding-left:30px; }
#sidebar-third-wide {float:right; margin:10px; width:350px; padding-left:30px; border-left:1px solid LightGray;}
#sidebar-works {float:right; margin:0px; width:300px; padding-left:30px; }
#sidebar-works-2 {float:right; margin:0px; width:400px; padding-left:10px; }
#sidebar-score {float:right; margin:10px; width:364px; padding-left:65px; border-left:1px solid LightGray;}
#sidebar-score-2 {float:right; margin:10px; width:364px; padding-left:65px; border-left:1px solid LightGray;}
#sidebar {float:right; width:150px;}
#sidebar p {font-size:0.9em; line-height:1.3em; margin:0 0 15px;}
#sidebar ul {margin:0 0 15px 0; padding:0;}		
#sidebar li {list-style:none;}
ul.sidelink li {list-style:none; margin:0 0 3px; padding:0;}
ul.sidelink li a{background:#f0f0f0 url(images/corner.gif) top right no-repeat; border:none; display:block; margin:5px 10px 5px 0; padding:3px 4px 3px 8px; text-align:left; width:140px;}
ul.sidelink li a:hover {background:#e0e0e0 url(images/corner.gif) top right no-repeat; border:none; text-decoration:none;}

/* Footer */
#footer {background:#fff; border-top:1px solid #d8d8d8; clear:both; margin:0; padding:0;}
#footer a {color:gray;}
#footer a:hover {color:#303030;}
#footer p {color:gray; font-size:1.1em; line-height:1.3em; margin:15px 0 0; padding:0;}

/* Additional classes */
.photo {background-color:#f0f0f0; border:1px solid #d8d8d8; margin:0 0 15px; padding:2px;}
.timestamp {font-size:1.2em; color:#606060; margin:-12px 0 12px 0;}
.right {margin:-8px 0 8px 0; text-align:right;}
.block {background:#f0f0f0; padding:10px;}
.block-wide {background:#f0f0f0; padding:10px; width: 1182px;}
.hide {display:none;}

/* Floating images to allow text wrapping */
img.floatLeft { 
    float: left; 
    margin-top:4px;
    margin-bottom:2px;
    margin-right:10px;
    margin-left:0px;
}
img.floatRight { 
    float: right; 
    margin-top:4px;
    margin-bottom:2px;
    margin-right:0px;
    margin-left:10px;
}

/* CSS alternative to <small> tag, for photo captions */
#caption {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}

/* Sortable table: list of works */
#works-table {
	border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	width:80%;
/*	border-collapse:collapse; */
}
#works-table td {
	padding: 4px;
	margin: 3px;
	font-size:1em;
	border: 1px solid #CCC;   
	background-color:#CEE3F6;
}
#works-table th {
/*	background-color: #003399; */
	background-color: #4061A3; 
	color: #FFF;
	font-weight: bold;
	font-size:1.1em;
	margin: 3px;
	text-align:left;
	padding-top:5px;
	padding-bottom:4px;
	padding-left: 4px;
	padding-right: 4px;
}

/* Sortable table: list of first performances */
#firstperf-table {
	border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	width:80%;
/*	border-collapse:collapse; */
}
#firstperf-table td {
	padding: 4px;
	margin: 3px;
	font-size:1em;
	border: 1px solid #CCC;   
	background-color:#F8C471;
}
#firstperf-table th {
	background-color: #7E5109; 
	color: #FFF;
	font-weight: bold;
	font-size:1.1em;
	margin: 3px;
	text-align:left;
	padding-top:5px;
	padding-bottom:4px;
	padding-left: 4px; 
	padding-right: 4px;
}

/* Sortable table: list of works at St John's College*/
#sjc-table {
	border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	width:80%;
/*	border-collapse:collapse; */
}
#sjc-table td {
	padding: 4px;
	margin: 3px;
	font-size:1em;
	border: 1px solid #CCC;   
	background-color:#FAD396;
}
#sjc-table th {
	background-color: #523404; 
	color: #FFF;
	font-weight: bold;
	font-size:1.1em;
	margin: 3px;
	text-align:left;
	padding-top:5px;
	padding-bottom:4px;
	padding-left: 4px; 
	padding-right: 4px;
}	
/* Sortable table: list of manuscripts */
#manuscripts-table {
	border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	width:80%;
/*	border-collapse:collapse; */
}
#manuscripts-table td {
	padding: 4px;
	margin: 3px;
	font-size:1em;
	border: 1px solid #CCC;   
	background-color:#C2FFD6;
}
#manuscripts-table th {
	background-color: #00663D; 
	color: #FFF;
	font-weight: bold;
	font-size:1.1em;
	padding-top:5px;
	padding-bottom:4px;
	padding-left: 4px; 
	padding-right: 4px;
}	

/* Sortable table: sacred works: anthems, hymns */
#sacred-table {
	border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	width:80%;
/*	border-collapse:collapse; */
}
#sacred-table td {
	padding: 4px;
	margin: 3px;
	font-size:1em;
	border: 1px solid #CCC;   
	background-color:#99E699;
}
#sacred-table th 
{
	background-color: #006600; 
	color: #FFF;
	font-weight: bold;
	font-size:1.1em;
	text-align:left;
	padding-left: 4px;
	padding-right: 4px;
	padding-top:5px;
	padding-bottom:4px;
}

/* Sortable table: carols for Advent and Christmas from "100 Carols for Choirs*/
#carols-table {
	border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	width:80%;
/*	border-collapse:collapse;  */
}
#carols-table td {
	padding: 4px;
	margin: 3px;
	font-size:1em;
	border: 1px solid #CCC;   
	background-color:#F8C471;
}
#carols-table th 
{
	background-color: #7E5109; 
	color: #FFF;
	font-weight: bold;
	font-size:1.1em;
	margin: 3px;
	text-align:left;
	padding-top:5px;
	padding-bottom:4px;
	padding-left: 4px; 
	padding-right: 4px;
}


/* Sortable table: carols for Advent and Christmas from other editions */
#carols2-table {
	border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	width:80%;
}
#carols2-table td {
	padding: 4px;
	margin: 3px;
	font-size:1em;
	border: 1px solid #CCC;   
	background-color:#FAD396;
}
#carols2-table th 
{
	background-color: #523404; 
	color: #FFF;
	font-weight: bold;
	font-size:1.1em;
	margin: 3px;
	text-align:left;
	padding-top:5px;
	padding-bottom:4px;
	padding-left: 4px; 
	padding-right: 4px;
}

/* Sortable table: Church Anthem Book*/
#anthem-table {
	border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	width:100%;
/*	width:80%;  */
/*	border-collapse:collapse; */
}
#anthem-table td {
	padding: 4px;
	margin: 3px;
	font-size:1em;
	border: 1px solid #CCC;   
	background-color:#FAD396;
}
#anthem-table th {
	background-color: #523404; 
	color: #FFF;
	font-weight: bold;
	font-size:1.1em;
	margin: 3px;
	text-align:left;
	padding-top:5px;
	padding-bottom:4px;
	padding-left: 4px; 
	padding-right: 4px;
}	

/* Sortable table: list of future anthems */
#future-table {
	border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	width:80%;
/*	border-collapse:collapse; */
}
#future-table td {
	padding: 4px;
	margin: 3px;
	font-size:1em;
	border: 1px solid #CCC;   
	background-color:#CEE3F6;
}
#future-table th {
	background-color: #4061A3; 
	color: #FFF;
	font-weight: bold;
	font-size:1.1em;
	margin: 3px;
	text-align:left;
	padding-top:5px;
	padding-bottom:4px;
	padding-left: 4px;
	padding-right: 4px;
}

/* Sortable table: list of progress so far */
#progress-table {
	border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	width:80%;
/*	border-collapse:collapse; */
}
#progress-table td {
	padding: 4px;
	margin: 3px;
	font-size:1em;
	border: 1px solid #CCC;   
	background-color:#FFCCCC;
}
#progress-table th {
	background-color: #800000; 
	color: #FFF;
	font-weight: bold;
	font-size:1.1em;
	margin: 3px;
	text-align:left;
	padding-top:5px;
	padding-bottom:4px;
	padding-left: 4px;
	padding-right: 4px;
}

/* use this class to hide <table> table border and <td> cell borders */
#no-border-table {
border: 1px solid #CCC;
border-collapse: collapse;
}
td {
border: none;
}

/* use this class to indent a <cite> or <p> tag by 22px */
.hangingindent {
  margin-left: 22px;
  font-style: italic; 
}

table {
    border: 2px solid gray;
    padding: 10px;
}
th.noBorder th {
  border: 0;
}
tr.noBorder td {
  border: 0;
}
td.topAlign{
    vertical-align: top;
}
td { 
    border: 1px solid gray;
    border-width: thin; 
    border-style: outset; 
    padding: 10px;
}
table.biopic {
    border-collapse: collapse;
    border: none;
    width: 100%;
}
table.noborder {
    border-collapse: collapse;
	border-style: hidden;
}
table.noborder td, table.norborder th {
    border: 1px solid gray;
}
table.ensemble {
    border-collapse: collapse;
    width: 100%;
}
table.sortable thead {
        cursor: default;
} 

/* Sortable table: playlist */
#playlist-table {
	border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	width:100%;
/*	border-collapse:collapse; */
}
#playlist-table td {
	padding: 4px;
	margin: 3px;
	font-size:1em;
	border: 1px solid #CCC;   
	background-color:#99E699;
}
#playlist-table th 
{
	background-color: #006600; 
	color: #FFF;
	font-weight: bold;
	font-size:1.1em;
	text-align:left;
	padding-left: 4px;
	padding-right: 4px;
	padding-top:5px;
	padding-bottom:4px;
}

/* Sortable table: list of works for Christmas carol service*/
#xmas-table {
	border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	width:80%;
/*	border-collapse:collapse; */
}
#xmas-table td {
	padding: 4px;
	margin: 3px;
	font-size:1em;
	border: 1px solid #CCC;   
	background-color:#FAD396;
}
#xmas-table th {
	background-color: #523404; 
	color: #FFF;
	font-weight: bold;
	font-size:1.1em;
	margin: 3px;
	text-align:left;
	padding-top:5px;
	padding-bottom:4px;
	padding-left: 4px; 
	padding-right: 4px;
}	

/* Tableizer table */
table.tableizer-table {
	border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
} 
.tableizer-table td {
	padding: 4px;
	margin: 3px;
	border: 1px solid #ccc;
}
.tableizer-table th {
	background-color: #104E8B; 
	color: #FFF;
	font-weight: bold;
}

/* image gallery style definitions */
div.img
  {
  margin:2px;
  border:1px solid #0000ff;
  height:auto;
  width:auto;
  float:left;
  text-align:center;
  }
div.img img
  {
  display:inline;
  margin:3px;
  border:1px solid #ffffff;
  }
div.img a:hover img
  {
  border:1px solid #0000ff;
  }
div.desc
  {
  text-align:center;
  font-weight:normal;
  width:120px;
  margin:2px;
  }
  
/***	Really Simple Slideshow -- CSS   ***/

.rs-slideshow {
	border: 12px solid #444;
	border-radius: 12px;
/*	height: 240px;  */
	height: 400px;
	margin: 24px auto;
	overflow: hidden;
	position: relative;
/*	width: 620px;   */
	width: 700px;
}

.rs-slideshow .slide-container {
	background-color: #444;
	position: absolute;
	height: 100%;
	left: 0;
	overflow: hidden;
	top: 0;
	width: 100%;
}

.rs-slideshow .slide-container img {
	position: relative;
}

.rs-slideshow .slide-container .slide-caption {
	background-color: #000;
	bottom: 0;
	color: #fff;
	display: block;
	left: 0;
	padding: 6px 12px;
	position: absolute;
	text-align: center;
	right: 0;
	opacity: 0.7;           /* fx, safari, opera */
}

.rs-slideshow .slides {
	display: none;
}

/*  This doesn't pass the W3C validator, so has been suppressed */
/*
.rs-slideshow .slide-container img,
.rs-slideshow .slide-container .slide-caption,
.rs-slideshow .slide-container a {
	filter: inherit;
}
*/

/**
*	These styles make the list of links to slide images visible to users
*	who don't have JavaScript enabled. By adding the 'no-js' class to 
*	the HTML element, and using Modernizr to remove this class for JS
*	users, we can style for both scenarios.
*	http://www.modernizr.com/
*/

.no-js .rs-slideshow {
	height: auto;
}
.no-js .rs-slideshow .slide-container, 
.no-js .rs-slideshow .slide-container img {
	position: relative;
}
.no-js .rs-slideshow .slides {
	display: block;
	margin: 24px 48px;
}
.no-js .rs-slideshow .slides li {
	margin: 0;
}



/**
*	The following styles are used in the demos with slideshow controls, 
*	such as play/pause and prev/next buttons.
*/

.rs-controls {
	clear: both;
	margin: 12px auto;
	width: 620px;
}
.rs-play-pause, .rs-prev, .rs-next {
	float: left;
	margin-right: 12px;
}
.rs-controls ul {
	float: left;
	list-style: none;
	margin: 0 6px 0 0;
	padding: 0;
}
.rs-index-list li {
	float: left;
	margin-right: 6px;
}
.rs-controls a {
	background-color: #eee;
	border: 1px solid #ddd;
	/*border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;*/
	color: #444;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	padding: 3px 5px;
	text-decoration: none;
}
.rs-controls a:hover {
	background-color: #ddd;
	color: #444;
}
.rs-controls .rs-active {
	background-color: #444;
	border: 1px solid #444;
	color: #eee;
}


#callback-messages,
#slide-class-message {
	margin: 48px auto;
	width: 620px;
}
.slide-container.some-custom-class .slide-caption {
	background-color: #890;
	font-size: 3em;
	font-style: italic;
	font-weight: bold;
	text-align: right;
	top: 0;
	width: 28%;
}



/*	Clearfix	*/
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; } /* Hides from IE-mac \*/
.clearfix { display: block; }
  
/*	<audio> element with preset width	*/
audio { width: 324px; display: block; margin:20px; }