html {
  font-size: 16px;            /* base font size for the root element - all other sizes are in relation to this */
  -webkit-text-size-adjust: 100%; /* stop Samsung/old iOS from scaling text */
  text-size-adjust: 100%;         /* standard property */
}

@media (min-device-width: 600px) {
html {
	font-size: 12px; /* for wider screens - eg PC */
}
}



/* default margin and padding */
body {
    background-color: #0099FF;
	margin: 0.5em;
	height:  100%;
	display:  flex;
	flex-direction: column; 
	width:	  955px;   /* use for mobile view */
}

@media (min-device-width: 600px) {
body {
	width:    1600px;  /* use for PC view */
}
}


/* picture that I want Google and search engines to show along side the web site in search results */

#search-results-picture {
	display: none;
}




/* Apply styles to the header */

.titles-container {
	height:	  auto;
	position: relative;
	display:  flex;
	margin:	  0 0 0.5em 0;
	justify-content: flex-start;
}

	
/* Loudspeaker icons - either on or muted */
#speakerIcon {
	margin:   2.0em 0 2.0em 2.0em;
        } 

/* container to hold the main body of the page (incl keyboard) and then the featured video/audio                                     */
/* this allows the featured material to go either underneath the keyboard and main body (mobile version - use flex-direction column) */
/* or on the right (PC version - "normal" flex which puts things next to each other in a row)                                  */

/* For mobile screens  - columnar arrangement */
.body-and-features-container {
    display: flex;
    flex-direction: column;
}

/* Media query for wider screens  */

@media (min-device-width: 600px) {
    .body-and-features-container {
        flex-direction: row;
    }
}


/* container to chunk up the keyboard navigation and main body of the page as a single object so the features can go either underneath or on the right */

.keyboard-and-main-section-container {
	display:  flex;
	flex-direction: column;
}


/* Main navigation using piano keyboard */
.keyboard-nav-container {
	height:	  auto;
	position: relative;
	display:  flex;
	flex-direction: column;
	background-image: url('Keyboard/full-keyboard-short.jpg');
	background-repeat: no-repeat;
}

.keyboard-section {
    flex: 1; 
    display: flex;
	}

.key {
    position: relative; 
}

.key img {
    transition: transform 0.5s, translateY 0.5s;
}

.key:hover img {
    transform: translateY(6%);
	clip-path: polygon(0 0, 100% 0, 100% 94%, 0 94%);
}

.key img:not(:hover) {
    transition: transform 0s; /* Instantaneous transition for un-hover action */
}

		
/* h1 used for the menu navigation title at the top of the main area of each page */
h1  {
	display:     block;
	clear:       both;
	width: 		 100%;
	margin: 	 0 0 0 4em;
	padding: 	 1em 0 0 0;
	font-size:   1.7rem;
	color:       #000000;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
        } 

/* h2 for main headings on most pages */
h2  {
	display:     block;
	clear:       both;
	width: 		 100%;
	margin:      1.5em 1.5em 0 0.5em;
	padding:     0.5em 1.5em 0 0;
    font-size: 	 2.5rem;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	color:       #000000;
        } 


/* h3 for sub-heading on Review page - similar to captions for pictures */
h3 {
	display:     block;
	clear:       both;
	width: 		 100%;
	margin:      0.5em 0.5em 0.5em 0.7em;
	padding:     0 0 0 0;
	font-size:   1.7rem;
	line-height: 1.2;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color:       #7F7F7F;
	    } 
/* for some reason, the font is scaled up and the margins down on mobile phones, so adjust below */
@media (max-device-width: 599px) {
    h3 {
        font-size: 0.8rem;
		margin:    1.0em 1.0em 1.0em 1.4em;
    }
}

		
/* h4 for recordings page items (links to recording sub-pages) */
h4  {
    display:     block;
	clear:       both;
	width: 		 95%;             /* reduced to 95% to give right hand margin */
	font-size: 	 1.7rem;
	line-height: 1.2;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
    margin: 	 0.5em 1.0em 0 0.8em;
	} 

/* h5 for links page items */
h5  {
	font-size: 	 1.7rem;
	line-height: 1.2;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
    margin: 	 0.5em 1.5em 0 0.75em;
	} 

/* h6 for Featured Audio/Video headings */
h6  {
	display:     block;
	clear:       both;
	width: 		 100%;
	margin:      1.0em 0 1.5em 0;
	padding:     0 0 0 0;
    font-size: 	 2.5rem;
	text-align:	 center;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	color:       #000000;
        } 

/* Styles for the main container - inludes introductory text. Paragraph style is used   */
/* for pages where the full width of the page is used.                                  */
/* The figure, image and figcaption styles are only used for pages where the full width */
/* of the page is used - biography, leadership, recordings, links and news/events       */

.mainPageContent {
/*	height:		 	  auto;   */
    display:          flex;        /* adding these three flex lines to extend the main section to the length of the featured video/audio column */
	flex-direction:   column;
	flex:             1;
	background-color: #CCFFCC;   
	color:            #000000;
	margin:			  0.5em 0.2em 0 0;
	width:			  955px; /* size of piano keyboard menu*/
	}

.mainPageContent p {
    font-size: 	 2.0rem;
	line-height: 1.4;
	font-family: Arial, Helvetica, sans-serif;
    margin:		 1.5em 1.0em 1.5em 0.5em;
	}

.mainPageContent figure {
    max-width:  100%;
    height:     auto;
    display:    block;
	margin:     0.5em 1.0em 0.5em 1.0em;
}

.mainPageContent img {
    width: 100%;  
    height: auto;
    display: block;
}

.mainPageContent figcaption {
	font-size: 	 1.7rem;
	line-height: 1.2;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color:       #7F7F7F;
	border-left: 0.25em solid #7F7F7F;
	margin:      0.5em 1.5em 0 0;
	padding:     0 0 0 0.5em;
}

/* bulleted list style just used in the introductory text of the leadership page */

.mainPageContent ul {
    list-style-type: disc;
	font-size: 		 2.0rem;
	line-height: 	 1.4;
	font-family: 	 Arial, Helvetica, sans-serif;
    margin: 		 0.5em 0.5em 0.5em 1.5em;
   }


/* featured content - key videos and audio  - will be placed either below the main content of the page (for mobile version) or on the right (PC version)*/

.featured-container {
	background-color: 	#0099FF;
    flex: 				1; 
    display: 			flex;
	height:				100%;
	justify-content: 	space-between;
	align-self:			stretch;  
	margin: 			2.0em 0 0 0;
}
@media (min-device-width: 600px) {
.featured-container {
	margin-top: 		0;   	/* use for PC view */
	margin-left: 		2em;    /* use for PC view */
	margin-right: 		0.5em;  /* use for PC view */
	}
}
/* slightly different version for the home page so that the bottom of the container lines up with the bottom of the home page */

.featured-container-home {
	background-color: 	#0099FF;
    flex: 				1; 
    display: 			flex;
/*	height:				100%;                remove this so height stretches to bottom of "body" container */
	justify-content: 	space-between;
	align-self:			stretch;  
	margin: 			2.0em 0 0 0;
}
@media (min-device-width: 600px) {
.featured-container-home {
	margin-top: 		0;   	/* use for PC view */
	margin-left: 		2em;    /* use for PC view */
	margin-right: 		0.5em;  /* use for PC view */
	}
}



.featured-video-list {
    display: flex;
    flex-direction: column;
	width:    48%;
	background-color: #CCFFCC;
}

.featured-audio-list {
    display: flex;
    flex-direction: column;
	width:    48%;
	background-color: #CCFFCC;
	}


.featured-item figure {
    width: 90%;
    height: auto;
	margin:      0 0.5em 2.0em 1.0em; 
	}

.featured-item img {
    width: 100%;   
	height: auto;  
	margin:      0 0 0 0;
	}

.featured-item figcaption {
	font-size:   1.7rem;
	line-height: 1.2;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	color:       #000000;
	padding:     0 0 0 0;
	border-left: none;
	margin:      0;
}

/* styles just for the home page - contains photo, main text, showreel and latest news section */

.home-page-photo-text-news-container {
	display:  		 flex;
	justify-content: flex-start;
}

.home-page-photo-and-text {
	display:  		flex;
	flex:     		7;             /* this takes 70% of the width */
	flex-direction: column;
	padding:        2.0em 1.5em;   /* 2.0 top and bottom, 1.5 left and right */
}


#homePagePhoto {
	width:        100%;
	height:		  auto;
	max-width:    100%;
	display:      block;
	}


.home-page-text {
	width:		 100%;
	height: 	 auto;
	margin-top:  2.0em; 
	}

.home-page-text p {
	margin:      0 0 1.5em 0; /*only bottom spacing - force text to left/right edges */
	font-weight: normal;
	font-size:   2.0rem;
	line-height: 1.4;
	text-align: justify;
	font-family: Arial, Helvetica, sans-serif;        
	}
	

	
.home-page-news-and-showreel-container {
	display:  			flex;
	flex:     			3;             /* this takes 30% of the width */
	flex-direction: 	column;
	justify-content:    flex-start;
	height:				auto;
	margin:				2.0em 1.5em 4.0em 0.8em;
	}

.showreel {
	margin:      0 0 2.0em 0;
	padding:     0 0 0 0;
	width:       100%;
	height:		 auto;
}


/* latest news box */

.news-outer-box {
	display:  			flex;
	background-color:	#000000;
	height:				100%;
	align-self:			stretch; 
	margin:				0 0 0 0;
}


/* 26/08/2025 - comment out this bit as news box is now quite large so don't want to push it down further  */

/* @media (min-device-width: 600px) {                      */
/* .news-outer-box {                                       */
/* 	margin-top:			13.0em;  /* use for PC view */   /**/ 
/* }                                                       */
/* }                                                       */


.news-box {
	display:  			flex;
	flex-direction: 	column;
	height:				auto;
	justify-content:    space-between;
	align-self:			stretch; 
	color:       		#FFFFFF;
	background-color:	#000000;
	text-align: 		center;
	border-left: 		1.3em dashed #CCFFCC;
	border-right: 		1.3em dashed #CCFFCC;
	margin:      		0.8em;
	padding:     		0.8em;
}

.news-box a:link {
  color: #CCFFCC;   /* unvisited */
}

.news-box a:visited {
  color: #CCFFCC;   /* visited */
}

.news-box a:hover {
  color: #55FF55;   /* hover */
}

.news-box a:active {
  color: #55FF55;   /* active */
}


.news-title {
	font-size: 		2.0rem;
	font-weight: 	bold;
	font-family:    Arial, Helvetica, sans-serif;
	margin-bottom:  1em;	
	}
	
.news-text {
	font-size: 		1.7rem;
	line-height: 	1.2;
	white-space: 	normal; 
	font-family:    Arial, Helvetica, sans-serif;
	}
	
@media (min-device-width: 600px) {      /* use for PC view - larger text */
.news-text p {
	font-size: 		1.9rem;
	line-height: 	1.3;
	white-space: 	normal; 
	font-family:    Arial, Helvetica, sans-serif;
	}
}
	
	
	
.news-footer {
	font-size: 		1.9rem;
	line-height: 	1.3;
	white-space: 	normal; 
	font-family:    Arial, Helvetica, sans-serif;
	font-weight: 	bold;
	margin-top:     1em;
	}



/* styles for "video to a whole page" featured videos and audio */

.featured-recording-item {
    max-width: 100%;
	height:  663px;
    padding: 10px;
    box-sizing: border-box;
	overflow: hidden;
}
.featured-recording-video {
    width: 100%;
    box-sizing: border-box;
}

.featured-video-container {
            position: relative;
			width: 928px;
			height: 516px;
            margin: 0 auto;
			overflow: hidden;
        }

.featured-video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

/* Any text under the video */
.featured-recording-video p{
	clear:       both;
	font-size:   1.7rem;
	line-height: 1.2;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	color:       #000000;
	margin:      20px 0 0 0px;
	} 



/* style used for pages which have two-column - pictures on left, text on right. */
/* used for solo, chamber, accompanying, teaching, groups and reviews pages.     */
.main-text-container {
	max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.standard-text-item {
    width: 100%;
    box-sizing: border-box;
	overflow: hidden;
	margin-bottom: 1.5em;
	margin-right: 1.5em;
	}

.standard-photo-and-caption {
    float: left;
    width: 40%;
}

.standard-photo-and-caption figure {
    width: 100%;
    height: auto;
}

.standard-photo-and-caption img {
    width: 100%;   
	height: auto;  
}

.standard-photo-and-caption figcaption {
	font-size:   1.7rem;
	line-height: 1.2;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color:       #7F7F7F;
	border-left: 0.25em solid #7F7F7F;
	margin:      0.5em 0 0 0;
	padding:     0 0 0 0.5em;
}

.standard-text {
    margin-left: 43%;

/*    box-sizing: border-box; */
}

.standard-text p {
    font-size:   2.0rem;
	line-height: 1.4;
    font-family: Arial, Helvetica, sans-serif;
    margin: 	 0 0.5em 0.5em 0.5em;
}


/* used in the solo artist page to list UK towns where Lora has played */
#small-font {
    font-size: 	 1.5rem;
	line-height: 1.2;
    font-family: Arial, Helvetica, sans-serif;
    margin: 	 0.5em 0.5em 0.5em 0.5em;
}



/* items for the individual recording pages (with embedded YouTube videos) */

.recording-item {
    max-width: 100%;
    padding: 0.5em;
    box-sizing: border-box;
	overflow: hidden;
}
.recording-video {
    float: left;
    width: 680px;
    box-sizing: border-box;
}

.video-container {
            position: relative;
			float: left;
			width: 680px;
			height: 378px;
            margin: 0 auto;
			overflow: hidden;
        }

.video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

/* "captions" under videos - show timings etc - used on live tv/radio page */
.recording-video p{
	clear:       both;
	font-size:   1.7rem;
	line-height: 1.2;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color:       #7F7F7F;
	border-left: 0.25em solid #7F7F7F;
	margin:      1.5em 0 0 0;
	padding:     0 0 0 0.5em;
	} 


.recording-text {
    margin-left: 690px;
    box-sizing: border-box;
}

.recording-text p {
    font-size: 2.0rem;
	line-height: 1.4;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0.5em 0.5em 0.5em 0.5em;
	}


/* styles for the tables on the recordings page */

.performance-table {
  display: flex;
  flex-direction: column;
  border-collapse: collapse;
  border-bottom: 1px solid #ddd;
  max-width: 900px;
  margin: 1em 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.6rem;
}

.performance-row {
  display: flex;
  border-top: 1px solid #ddd;
  padding: 0.5em 0;
}

.performance-row.header {
  font-weight: bold;
  background-color: #f4f4f4;
}

.performance-col {
  flex: 1;
  padding: 0.5em 1em;
  overflow-wrap: break-word;  /* newer standard */
  word-wrap: break-word;      /* fallback for old browsers */
  hyphens: auto;              /* allow browser to add hyphens */
}

.performance-col:first-child {
  flex: 1;              /* width of available space allocates 1 part to column 1 */ 
  min-width: 0;         /* allow flexbox to shrink below content size if needed */
  white-space: normal;  /* wrap text instead of forcing one long line */
  word-break: break-word; /* break long words if necessary */
}
.performance-col:last-child {
  flex: 3;              /* width of available space allocates 3 parts to column 1 */
  min-width: 0;         /* same trick for safety */
}

.performance-row:nth-child(even):not(.header) {
  background-color: #99FF99;
}



/* enquiries and copyright line at the foot of each page */

.footer {
	background-color:	#0099FF;
	height:				100%;  
    text-align: 		center;
	}

@media (min-device-width: 600px) {
.footer {
	width:    950px;  /* use for PC view */
}
}


.footer p {
	font-weight: 		bold;
	font-size:   		1.7rem;       
	line-height: 		0.5;
	font-family: 		Arial, Helvetica, sans-serif;
	color:       		#000000;
	}

/* slightly different styling for home page footer to centre on whole width including featured section on the right */

.footer-home {
	background-color:	#0099FF;
	height:				100%;  
    text-align: 		center;
	}

.footer-home p {
	font-weight: 		bold;
	font-size:   		1.7rem;       
	line-height: 		0.5;
	font-family: 		Arial, Helvetica, sans-serif;
	color:       		#000000;
	}