/* Style sheet for Doug Badger, Cellist */

html #container {
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	font-family: Verdana, sans-serif;
	height: 100%;
 	background-color: #443266;
}
#container {
	width: 960px;
	margin: 0 auto;
	padding: 0;
	background-color: #f1f0ff;
	min-height: 900px;
}
#bgContainer {
	min-height: 100%;
	background-color: #443266;
	width: 100%;
	margin: 0 auto;
	margin-bottom: -40px;
}

/* Formatting for footer */
footer {
	width: 960px;
	margin: 0 auto 0 auto;
	text-align: center;
	font-size: 12px;
	line-height: 18px;
	padding-bottom: 10px;
	height: 40px;
	background-color: #f1f0ff;
}

html {
	height: 100%;
	overflow-y: scroll;
}

/* Position decorative images outside the page area */
#sparklesLeft {
	display: block;
	margin: 0 auto 0 -750px;
	position: absolute;
	top: 450px;
	left: 50%;
}
	.starsLeft {
		width: 249px;
		height: 208px;
		padding: 0; 
	}

	img.sparkle-left {
		position: absolute;
		margin-left: -729px;
		top: 450px;
		left: 50%; 
		background: url(../images/stars-left.png);
	}
	
#sparklesRight {
		display: block;
		margin: 0 auto 0 490px;
		position: absolute;
		top: 0px;
		left: 50%;
	}
	.starsRight {
		width: 249px;
		height: 208px;
		padding: 0;
	}
	
	img.sparkle-right {
		position: absolute;
		margin-left: 490px;
		top: 0px;
		left: 50%;
		background: url(../images/stars-right.png);
	}

/* Headings */	
h1 {
	font-size: 24px;
	padding-top: 10px;
}

h2 {
	font-size: 20px;
	padding-top: 10px;
}

h3 {
	font-size: 16px;
	padding-top: 10px;
}

/* Paragraph font */
p, h1.index {
	font-size: 14px;
	margin-bottom: 14px;
	text-align: justify;
	line-height: 20px;
}

p.breadcrumbs {
	font-size: 12px;
}

/* Container for pages */
#container {
	width: 960px;
	margin: 0 auto;
	padding: 0;
	background-color: #f1f0ff;
	min-height: 900px;
}

/* Styling for HTML5 layout tags */
header, footer, nav, aside {
	display: block;
}

	header {
		height: 90px;
		background-color: #443266;
	}
	
/* Table, CV page */
table {
	border-collapse: collapse;
	margin: 14px auto 14px auto;
	width: 100%;
}
td {
	font-size: 14px;
	padding-bottom: 16px;
	vertical-align: top;
	text-align: left;
}
td.col1 {
	width: 100px;
}
td.col2 {
	width: 350px;
}
td.col3 {
	width: 182px;
}

table.active {
	margin: auto;
}
th.active {
	text-align: left;
	vertical-align: top;
}
td.active {
	text-align: left;
	margin-top: 0;
	padding-top: 0;
	padding-right: 50px;
}
.width20 {
	width: 36px;
}
.width100 {
	width: 100px;
}

/* Navigation */
nav {
	height: 30px;
	margin-top: 0px;
	clear: both;
}
	#navBottom {
		margin-top: 50px;
		margin-bottom: 30px;
	}

	/* Colours */
	.home {
		background-color: #8865c8;
	}
	
	.music {
		background-color: #a08dcf;
	}

	.media {
		background-color: #8c489f;
	}

	.about {
		background-color: #6f81c3;
	}		
	
	.contact {
		background-color: #b78fcb;
	}		

	.links {
		background-color: #c3c3e5;
	}		
	
/* Menu bar */
#menuTop, #menuBottom {
	position:relative;
}

ul {
	list-style: none;
	padding-bottom: 10px;
}

li {
	font-size: 14px;
	padding-bottom: 3px;
}

	/* Top level menu */
	.menu ul {
		float: left;
		padding: 0;
		margin: 0;
		list-style: none;
		padding-bottom: 10px;
	}

	.menu li {
		position: relative;
		float: left;
		width: 160px;
		font-size: 12px;
		padding-bottom: 0px;
		white-space: nowrap;
		display: inline;
		margin-bottom: -10px;
	}
	.menu li.sub {
		text-indent: 20px;
	}
	
		/* Background colours */
		.menu ul li.liHome, .menu ul li.liHomeBottom {
			border-bottom: 4px solid #8865c8; z-index: 2; /*4c3681 5a2faa 8865c8*/
		}
		.menu ul li.liHome:hover{
			background-color: #8865c8; z-index: 2;
		}

		.menu ul li.liMusic, .menu ul li.liMusicBottom {
			border-bottom: 4px solid #a08dcf; z-index: 2;
		}
		.menu ul li.liMusic:hover{
			background-color: #a08dcf; z-index: 2;
		}

		.menu ul li.liMedia, .menu ul li.liMediaBottom {
			border-bottom: 4px solid #8c489f;
			z-index: 2;
		}
		.menu ul li.liMedia:hover{
			background-color: #8c489f;
			z-index: 2;
		}	

		.menu ul li.liAbout,  .menu ul li.liAboutBottom {
			border-bottom: 4px solid #6f81c3;
			z-index: 2;
		}
		.menu ul li.liAbout:hover{
			background-color: #6f81c3;
			z-index: 2;
		}
	
		.menu ul li.liContact,  .menu ul li.liContactBottom {
			border-bottom: 4px solid #b78fcb;
			z-index: 2;
		}
		.menu ul li.liContact:hover{
			background-color: #b78fcb;
			z-index: 2;
		}
	
		.menu ul li.liLinks, .menu ul li.liLinksBottom {
			border-bottom: 4px solid #c3c3e5;
			z-index: 2;
		}
		.menu ul li.liLinks:hover{
			background-color: #c3c3e5;
			z-index: 2;
		}
	
	/* Dropdown menu */
	.menu li ul {
		clear: both;
		position: absolute;
		top: 48px;
		left: -14000px;
	}
	.menu li ul li {
		clear: both;
	}
	.menu li:hover ul {
		left: 0;
	}
		/* Dropdown items */
		.menu a {
			display: block;
			width: 160px;
			margin: 10px;
		}
		/* Colours for dropdown items */
		.menu li ul.home {
			background-color: #a78bda;
			z-index: 1;
		}
		.menu li ul.home:hover {
			background-color: #a78bda;
			z-index: 1;
		}
		.menu li ul.music {
			background-color: #c3b7e2;
			z-index: 1;
		}
		.menu li ul.music:hover {
			background-color: #c3b7e2;
			z-index: 1;
		}
		.menu li ul.media {
			background-color: #a856bf;
			z-index: 1;
		}		
		.menu li ul.media:hover {
			background-color: #a856bf;
			z-index: 1;
		}
		.menu li ul.about {
			background-color: #93a5e5;
			z-index: 1;
		}		
		.menu li ul.about:hover {
			background-color: #93a5e5;
			z-index: 1;
		}
		.menu li ul.contact {
			background-color: #daafef;
			z-index: 1;
		}
		.menu li ul.contact:hover {
			background-color: #daafef;
			z-index: 1;
		}
		.menu li ul.links {
			background-color: #dadaf7;
			z-index: 1;
		}		
		.menu li ul.links:hover {
			background-color: #dadaf7;
			z-index: 1;
		}

/* Set up left and right aside columns */	
aside, aside.left, aside.right {
	width: 164px;
	margin-top: 30px;
	font-size: 14px;
	height: 700px;
}
	aside.left {
		float: left;
	}
	aside.right {
		float: right;
		margin-top: 16px;
	}
	aside.right p { /* right column navigation where needed */
		border-bottom: 1px solid #a08dcf;
		line-height: 20px;
		font-size: 12px;
	}
	div.img_right { /* Matthew Kam image on concerts_chamber page; note aside doesn't work in Opera */
		position: absolute;
		top: 950px;
		margin-left: 640px;
	}
	
/* Home page layout */
	#indexContent {
		background: url(../images/home_g.jpg);
		background-repeat: no-repeat;
		background-position: 0 0;
		width: 960px;
		min-height: 810px; 
	}
	div.transbox {
		position: relative;
		left: 30px;
		top: 30px;
		width: 479px;
		height: 480px;
		margin: 20px 0px;
		background-color: #f1f0ff;
		border: 1px solid #8865c8;
		border-radius: 48px;
		padding-top: 20px;
		z-index: 0;		
		/* for IE */
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
		filter:alpha(opacity=90);
		/* CSS3 standard */
		opacity:0.90;
		-moz-border-radius: 48px;
		-webkit-border-radius: 48px;
	}
	
	div.transbox p  {
		margin: 15px 30px;
		font-weight: bold;
		color: #000000;
		text-align: justify;
		line-height: normal;
	}
	object.playerHome {
		margin-top: 30px;
		margin-left: 56px;
	}
	/* Set up image block on main page above bottom nav and footer */
	#imgBlock {
		display: block;
		white-space: nowrap;
		width: 960px;
		margin: 0 auto 0 auto;
		position: absolute;
		top: 870px;
	} 
		/* Set up block for each image across bottom of home page */
		.block {
			width: 160px;
			height: 160px;
			float: left;
			margin-top: -30px;
			padding: 0;
		}
		/* Position images in boxes */
		.img-home {
			margin-left: 41px;
			margin-top: 4px;
		}
		.img-music {
			margin-left: 2px;
			margin-top: 26px;
		}
		.img-media {
			margin-left: 30px;
			margin-top: 6px;
		}
		.img-about {
			margin-left: 36px;
			margin-top: 8px;
		} 
		.img-contact {
			margin-left: 24px;
			margin-top: 2px;
		} 
		.img-links {
			margin-left: 30px;
			margin-top: 4px;
		}

/* Styling for content div */	
#content {
	display: block;
	margin-top: 20px;
	margin-left: 158px;
	width: 610px;
	padding-left: 10px; 
	padding-bottom: 4px;
	padding-top: 10px;
	min-height: 700px;
}
	/* Set up left border on main content */	
	#content.borderHome {
		border-left: 2px solid #8865c8;
	}
	#content.borderMusic {
		border-left: 2px solid #a08dcf;
	}
	#content.borderMedia {
		border-left: 2px solid #8c489f;
	}
	#content.borderAbout {
		border-left: 2px solid #6f81c3;
	}		
	#content.borderContact {
		border-left: 2px solid #b78fcb;
	}		
	#content.borderLinks {
		border-left: 2px solid #c3c3e5;
	}	

/* Background images and special formatting for specific pages */
.musicpage {
	background: url(../images/musicpage_floor.png);
	background-position: 640px 270px;
	background-repeat: no-repeat;
}
.functionspage {
	background: url(../images/cellopiano2.png);
	background-position: 800px 240px;
	background-repeat: no-repeat;
}
.concertspage {
	background: url(../images/minerva-doug.png);
	background-position: 600px 220px;
	background-repeat: no-repeat;
}
.bibliopage {
	background: url(../images/scrollfront.png);
	background-position: 640px 230px;
	background-repeat: no-repeat;
}
.aboutpage {
	background: url(../images/scrollright.png);
	background-position: 710px 218px;
	background-repeat: no-repeat;
	margin-right: 58px;
}
.teachingpage {
	background: url(../images/youngme.png);
	background-position: 600px 280px;
	background-repeat: no-repeat;
}
.chamberpage {
	height: 1030px;	
}
.mediapage {
	background: url(../images/media-l.png);
	background-position: 660px 130px;
	background-repeat: no-repeat;
}
.mycello {
	background: url(../images/celloback.png);
	background-position: 300px 180px;
	background-repeat: no-repeat;
}

.sitemappage {
	background: url(../images/monkeycello-m.png);
	background-position: 420px 170px;
	background-repeat: no-repeat;
}

/* Special formatting for media audio page to push bottom beyond media player down */
#mediaAudioPage {
	margin-bottom: 750px;
}
.mediaAudio {
	width: 960px;
	margin-left: 0;
	padding-left: 10px;
	position: absolute;
	top: 300px;
}	
h1.audioPlaylist {
	padding-left: 18px;
}
p.audio {
	padding-left: 18px;
}
p.audioPlaylist {
	padding-left: 8px;
}
.figMedia { /* Images of composers on media audio page */
	float: left;
	margin: 10px 0 40px 0;
} 

/* General formatting */
em {
  font-style: italic;
}

strong {
  font-weight: bold;
}

.right {
	text-align: right;
}

.left {
	text-align: left;
}

.small {
	font-size: 12px;
}

.smcap {
	font-variant:  small-caps;
	font-size: 16px;
}

.mt0 {
	margin-top: 0px;
}
.mt3 {
	margin-top: 3px;
}
.mt20 {
	margin-top: 20px;
}
.mt40 {
	margin-top: 40px;
}
.mt50 {
	margin-top: 50px;
}
.mt75 {
	margin-top: 75px;
}
.mt120 {
	margin-top: 120px;
}
.mt150 {
	margin-top: 150px;
}
.mt250 {
	margin-top: 250px;
}

.mr80 {
	margin-right: 80px;
}

.mb0 {
	margin-bottom: 0px;
}

.mb50 {
	margin-bottom: 50px;
}
.mb130 {
	margin-bottom: 130px;
}

.pt0, .pb0 {
	padding-top: 0;
	padding-bottom: 0;
}
.pt16 {
	padding-top: 16px;
}
.pl6 {
	padding-left: 6px;
}

.pl10 {
	padding-left: 10px;
}

.pl40 {
	padding-left: 40px;
}

.txtspace {
	word-spacing: 1px;
	letter-spacing: .7px;
}

.indent {
	margin-left: 20px;
	margin-top: 0px;
} /* Events descriptions, Music images left aside text */

.clear {
	clear: left;
}

.readmore {
	font-size: 12px;
	font-weight: normal;
	font-style: italic;
}

.hang { /* Hanging indent on links page*/
    display: block;
    margin-left: 0em;
    padding-left: 28px;
    text-indent: -28px;
}

.journalDate {
	font-size: 16px;
}

.journalRef {
	font-size: 12px;
	font-weight: normal;
} /* Events reference no. */

/* Images */
img {
  border: 0;
  outline: none;
}

#lightbox {
  display: none;
  position: absolute;
  opacity:0.5;
  filter:alpha(opacity=50);
  -moz-opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  background-color: #443266;
  background-attachment: scroll; z-index: 1001;
}
#lightbox-image {
  display: none;
  position: absolute;
  top: 200px;
  left: 0;
  border: 0;
  padding: 0;
  z-index: 1002;
  overflow: auto;
}
.gallerylist {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.gallerylist li {
	float: left;
	margin: 0;
	padding: 5px;
}
.gallerylist img {
	display: block;
	margin: 0;
	padding: 2px;
}

.imgborder { /* Images of composers on media audio page */
	border: 4px ridge #8c489f;
}

/* Drop capital images */
.figleft {
	float: left;
	margin: -4px 4px 0 0px;
}

.hidden { /* Hide first letter of words using drop cap images */
	display: none;
}

/* Positioning images */
.figcentre {
	text-align: center;
	width: 400px;
	margin: auto;
}

.figright {
	float: right;
}

.leftfloat { 
	float: left;
	margin-left: 20px; /* Music stand on Concerts page */
}

.cellists { /* Casals and Rostropovich images on The Cello page; and spiderweb on Interests page */
	float: left;
	margin: 4px 15px 8px 0;
} 

/* Images left-aligned in content */
.figalign {
	text-align: left;
	margin: 30px auto 50px auto;
}

.caption, .caption2 {
	font-size: 12px;
	padding-left: 4px;
	font-style: italic;
	text-align: center;
}
.caption2 {
	padding-left: 34px;
}

/* Formatting for contact page form */
label {
	float: left;
	width:	610px;
	text-align: left;
	clear: left;
	font-weight: bold;
	margin-right: 20px;
}

#formContact {
	display: block;
	margin: 22px 100px 0 100px; 	
	padding-left: 10px;
	padding-top: 10px;
	padding-bottom: 4px;
	background: url(../images/contact.png);
	background-position: 610px 14px;
	background-repeat: no-repeat;
}
#txtFirstNameError, #txtLastNameError, #txtEmailError, #txtDayError , #txtMonthError, #txtYearError, #txtMessageError {
	background-color: #f1f0ff;
	border: none;
	color: #f00;
}

#formEditor {
	display: block;
	margin: 22px 100px 0 150px; 	
	padding-left: 10px;
	padding-top: 10px;
	border-left: 2px solid #8865c8;
}

/* Chess widget formatting */
#chesswidget {
	float: right;
	width: 100px;
	padding-left: 10px;
	padding-top: 0;
	margin-top: -10px;
}
#chesswidget a, a:link, a:visited  { 
    color: #f93;
    text-decoration: none; 
}
#chesswidget a:hover  {
    color: #f60;
    text-decoration: underline; 
}

/* Links */

a, a:link, a:visited, a:hover {
	color: #000;
	text-decoration: none;
}
a.bold {
	font-weight: bold;
	color: #351c73;
}
a.underlined {
	border-bottom: 1px solid #a08dcf;
}

/*New for html5 playlist*/
audio {
	margin-top: 0px;
	margin-left: 0px;
	background-color: transparent;
}
audio.playlisthome {
	margin-top: 24px;
}

#playlist, #playlisthome, #playlistmusic, #playlistconcerts, #playlistfunctions, #playlistmedia {
	width: 400px;
	position: relative;
	left: 0px;
	width: 350px;
	height: 90px;
	margin: 0px 0px;
	padding-top: 5px;
	background-color: #443266;
	font-family: Verdana, sans-serif;
	font-size: 11pt;
	border-radius: 10px;
	/* for IE */
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	filter:alpha(opacity=90);
	/* CSS3 standard */
	opacity:0.90;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

#playlisthome {
	height: 95px;
	margin-left: 50px;
}

#playlistmusic {
	height: 95px;
}

#playlistconcerts {
	height: 135px;
}

#playlistfunctions {
	height: 170px;
}

#playlistmedia {
	height: 450px;
	width: 900px;
	margin-top: 0px;
	margin-left: 0px;
}

ol li{
	font-family: Verdana, sans-serif;
	color: #ffffff;
	font-size: 12px;
}

#playlist.active a, #playlisthome.active a, #playlistmusic.active a, #playlistfunctions.active a, #playlistconcerts.active a, #playlistmedia.active a{
	color: #fff799;
}

#playlist li a, #playlisthome li a, #playlistmusic li a, #playlistfunctions li a, #playlistconcerts li a, #playlistmedia li a{
	color: #fff;
	display:block;
}

#playlist li a:hover, #playlistmusic li a:hover, #playlistfunctions li a:hover, #playlistconcerts li a:hover, #playlistmedia li a:hover{
	text-decoration: none;
	color: #fff799;
}