/* my.css */


/* USED
header:
div	page
div	banner
div	sub-page

top_menu:
div	nav-top /div
div	text

right_menu:
div	right-col \div

General:
body class=pink
dl class=oxford
ul class=plain




*/


/*  body (grey colour background)
    div structure
		page
			banner
			sub-page
				nav-top (horizontal bar) 
				nav-sub (horizontal bar) 
				text   (float center width=100%) 
					right-col   (float right width=25%)  <right>
					
			
*/		


html { min-height: 100%; margin-bottom: 1px;}   /* force persistent vertical scrollbar - minimum scroll is 1px */

* {
	margin: 0;
	padding: 0;}

body {
	text-align: center;
	background-color: #ccc;  /* grey background */
	color: #000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;}
    
/*  Page division - everything that is set on the grey background defined in body */

#page {
	text-align: left;
	background-color: #fff;
	color: #333;
	width: 95%;                           /* width of main part of page*/
	margin: 1em auto 1em auto;
	border: 1px solid #666;}

#page  ul.plain {         /* class plain - no item symbol */
	padding: 0;
	margin-top: 0.3em;
	margin-left: 3em;
	margin-right: 3em;
	margin-bottom: 0.1em;
	list-style-type: none;}

#page ul.plain li {      /* class plain - no item symbol */
	padding: 0;
	margin: 0;
    color: #a03333; }
       
#page  ul.normal {         /* class normal - circ item symbol */
	padding: 0em;
	margin-top: -0.3em;   /* remove padding from <p> above. */
	margin-left: 3em;
	margin-right: 3em;
	margin-bottom: -.3em;} /* remove padding from <p> that follows. */

#page ul.normal li {      /* class normal - circ item symbol */
	padding: 0em;
	margin-top: 0em;
	margin-left: 3em;
	margin-right: 3em;
	margin-bottom: 0em;}
    
#page  dl.plain {     /* class plain - no item symbol */
	padding: 0;
	margin-top: -0.4em;  /* remove padding from <p> above. */
	margin-left: 3em;
	margin-right: 3em;
	margin-bottom: -0.5em;  /* remove padding from <p> that follows. */
	list-style-type: none;}

#page dl.plain dt {     /* class plain - no item symbol */
	padding: 0;
	margin: 0;
    color: #a03333; 
	font-weight:normal;}

#page dl.plain dd {     /* class plain - no item symbol */
	padding: 0em;
	margin-left: 1.5em;
    color: #a03333; }

#page  dl.oxford {     /* class oxford - for oxford dictionary definition */
	padding: 0;
	margin-top: -0.4em;  /* remove padding from <p> above. */
	margin-left: 3em;
	margin-right: 3em;
	margin-bottom: -0.5em; /* remove padding from <p> that follows. */
	list-style-type: none;}

#page dl.oxford dt {     /* class oxford - for oxford dictionary definition */
	padding: 0;
	margin-top: -1.2em;  /* move up a line */
	text-align: right;
	font-size: 0.75em;
    color: #a03333; 
	font-weight:normal;}

#page dl.oxford dd {     /* class oxford - for oxford dictionary definition */
	padding: 0;
	margin-right: 15%em;
    color: #a03333; }
	
#page.h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.6em;   
	color: #333;background: #f1f1f1;
	font-weight: normal;
	padding: 0.3em 0;}

/* Banner */
#banner h2 {      
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.6em;   
	color: #fff;
	background: #a03333;
	padding: 0.1em 0.3;}


/* sub-page */
#sub-page {                                       /* no pink top border */
	position: relative; 
	background: #fff;
	clear: both;
    padding: 0px 15px 15px 5px;}

body.pink #sub-page {         /* over-ridden for mobile devices - see below */
	position: relative;
	background: #fff url(./img/pink-banner.jpg) repeat-x scroll top;
	background-size: 5%;
	clear: both;
    padding: 0px 25px 15px 0px;}


/* Local nav */

#nav-top {             /* over-ridden for mobile devices - see below */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	position: relative;
	float: left;
	width: 100%;}
#nav-top #block {
    width: fit-content; }	
#nav-top #sub-block {
    width: 100%; }	

#sub-page #nav-top h2 {     /* over-ridden for mobile devices - see below */
    position: relative;
    margin-left: 2em; 
    margin-top: 2em; 
	font-family: Arial, Helvetica, sans-serif;
	white-space: nowrap; /* prevents text wrapping */
	font-size: 50%;   /* 1.2em;  */
	font-weight: bold;
    padding: 0.2em 0.5em 0em 0em;
	color: #eee;
	background-color: #a11; /*#c02424;*/
    border-style: solid;
    border-color:  #500;
	border-width: 0.6em 0 0em 0;}

#nav-top ul {                /* over-ridden for mobile devices - see below */
	list-style-type: none;
    margin-top: -0.3em; 
    margin-left: -3em; 
    border-style: none;
    border-color: #ccc;}
#nav-top ul li {
	display: inline-block;}
#nav-top ul li a {
	text-decoration: none;
	color: #fff;
	background-color:  #e05050;
    padding: 0.3em 0.5em 0.3em 0.5em;
 	border-top: 0.3em solid #e05050;}
#nav-top ul li a:hover, #nav-top ul li a:focus {
	color: #111;
	border-top: 0.3em  solid #999;
	background-color: #c0d0d0;}
#nav-top ul li a:active {	
	color: #111;
	border-top: 0.3em x solid #555;
	background-color: #c02424;}
#nav-top ul li.selected a {	
	color: #111;
	border-top: 0.3em  solid #e05050;
	background-color: #ffe0e0;}
#nav-top ul li.selected a:hover, #nav-top ul li.selected a:focus {	
	color: #111;
	border-top: 0.3em  solid #999;
	background-color: #ccc;}


#nav-sub {             /* over-ridden for mobile devices - see below */
	font-family: Arial, Helvetica, sans-serif;
	position: relative;
	float: left;
	width: 100%;}

#nav-sub ul {
	padding: 0px;
	list-style-type: none;
    border-style: none;
    border-color: #ccc;}
#nav-sub ul li {
	display: inline-block;
	padding: 0;}
#nav-sub ul li a {
	text-decoration: none;
	color: #fff;
	background-color:  #5050e0;
    padding: 0.45em 0.5em 0.3em 0.5em;
 	border-top: 3px solid #5050e0;}
#nav-sub ul li a:hover, #nav-sub ul li a:focus {
	color: #111;
	border-top: 3px solid #999;
	background-color: #d0d0c0;}
#nav-sub ul li a:active {	
	color: #111;
	border-top: 3px solid #555;
	background-color: #2424c0;}
#nav-sub ul li.selected a {	
	color: #111;
	border-top: 3px solid #5050e0;
	background-color: #e0e0ff;}
#nav-sub ul li.selected a:hover, #nav-sub ul li.selected a:focus {	
	color: #111;
	border-top: 3px solid #999;
	background-color: #ccc;}
	
#text {
	position: relative;
	font-size: 100%;
	float: center;
	width: 100%;
	padding-left: 20px;	
	padding-right: 20px;
	overflow: hidden;}

#right-col {                 /* right hand column - over-ridden for mobile devices - see below */
	position: relative;
	float: right;
	width: 25%;
	padding-top: 0px;	
	padding-bottom: 0px;
	padding-left: 0px;	
	padding-right: 20px;
	overflow: hidden;}

/* Right Hand Navigation */
#sub-page #right-col ul, #sub-page  #right-col ol {
	padding: 0em 0 0.5em 1.5em;}

#sub-page #right-col h2 {
    position: relative;
    margin-left: 2em; 
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.75em;   /* 1.2em;  */
	font-weight: bold;
	padding: 0em; /*0.4em 0.5em 0.4em 0.5em;*/
	color: #eee;
	background-color: #a11; /*#c02424;*/
    border-style: solid;
    border-color:  #500;
	border-width: 0.4em 0 0 0;}
#right-col ul    {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	margin: 0em 0 3em 0;
	border-width: 0px; 
	display: block;
	color: #fff;
	background-color: #fff;
    border-style: solid;
    border-color:  #111;
	padding: 0;}
	
#sub-page #right-col ul li {
	margin: 2px;
	padding: 0px;}
	
#right-col ul li a {
	display: block;
	text-decoration: none;
	padding: 0.4em 0.5em 0.4em 1em;
	color: #fff;
	background-color: #e05050;}
#right-col ul li a:hover, #right-col ul li a:focus{
	color: #111;
	border-right: 4px solid #999;
	background-color: #c0d0d0;}
#right-col ul li.selected a {   /* selected is the selected menu item  */
	color: #111;
	border-right: 4px solid #e05050;
	background-color: #ffe0e0;}
#right-col ul li.selected a:hover, #right-col ul li.selected a:focus {   /* selected is the selected menu item  */
	color: #111;
	border-right: 4px solid #999;
	background-color: #c0d0d0;}
#right-col ul li a:active {
	color: #111;
	border-right: 4px solid #555;
	background-color: #c02424;}
/* /Right Hand Navigation */



/* Headings */
#sub-page h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.8em;
	color: #222;
	font-weight: normal;
	padding-bottom: 0.7em;}
#sub-page h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.6em;
	color: #333;
	font-weight: bold;
	padding: 0.3em 0;}
#sub-page h3 {
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: 0.05em;
	font-size: 1.4em;
	color: #111;
	font-weight: bold;
	padding: 0.3em 0;}
#sub-page h3.divider {
	display: block;
	letter-spacing: 0.05em;
	font-size: 1.35em;
	color: #333;
	background-color: #eee;
	font-weight: normal;
	margin: 0.4em 0;
	padding: 0.1em 0.7em;}
#sub-page h4 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.25em;
	color: #444;
	font-weight: bold;
	padding: 0.4em 0;}
#sub-page h5 {
	letter-spacing: 0.1em;
	font-size: 1.0em;
	color: #444;
	font-weight: normal;
	font-style: italic;
	padding: 0.4em 0;}
#sub-page h6 {
	font-style: oblique;
	letter-spacing: 0.1em;
	font-size: 1.1em;
	font-weight: normal;
	padding: 0.4em 0;}
/* /Headings */


/* iframe  */
#sub-page div.iframe-container {
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;   /* Centers vertically (if container has a defined height) */
  /* Optional: Add a height to the container if you want vertical centering */
  /* height: 100vh; */ 
}


/* Text styling  */
#sub-page blockquote {
	padding: 2em 3em 0em 4em;
	font-style: italic;
	background: url(./img/blockquote.gif) 2em 1em no-repeat;}
#sub-page p {
	padding: 0.5em 0.5em;}
#sub-page p.center {
	padding: 0.5em 0.5em;
	text-align: center;}
#sub-page dl {
	padding: 0.5em 0;}
#sub-page dt {
	font-weight: bold;
	padding: 0.6em 0 0 2em;}
#sub-page dd {
	padding: 0.5em 0 0.5em 4em;}
#sub-page ul, #sub-page ol {
	padding: 0.5em 0 0.5em 4em;}
#sub-page ul {
	list-style-type: circle;}
#sub-page ul li, #sub-page ol li {
	padding: 0.5em 0;}
#sub-page ul.plain {     /* class plain - no item symbol */
	list-style-type: none;
	padding: 0 0;
	margin-top: -0.5em;  /* remove padding of <p> above */
	margin-bottom: -0.5em;}  /* remove padding of <p> below */
#sub-page ul.plain li {  /* class plain - no item symbol */
	padding: 0 0;}
#sub-page p.leading {
	font-style: oblique;
	letter-spacing: 0.1em;
	font-size: 1.2em;
	padding: 0.5em 0;}
#sub-page p.leading:first-letter {
	font-weight: bold;
	font-size: 1.4em;}
#sub-page code {
	font-size: 1.1em;
	padding: 0.5em;
	color: #555;
	display: block;
	border: 1px solid #ddd;
	max-height: 15em;
	overflow: auto;}
/* /text styling */


/* Link styling */
a {
	text-decoration: underline;}
a img {
	border: 0;}
#sub-page a {
	color: #c02424;
	text-decoration: underline;}

/* /Link styling */


/* Image Styling */
#sub-page img {   /* over-ridden for mobile devices - see below */
	position: relative;
	border: 0px solid #cc3333;
	padding: 3px;
	margin: 0.5em;}
	
#sub-page img.left {
	clear: left;
	float: left;}
	
#sub-page img.right {    /* over-ridden for mobile devices - see below */
	border: 1px solid #cc3333;
	clear: right;
	float: right;}

#sub-page img.right_nb {    /* over-ridden for mobile devices - see below */
	clear: right;
	float: right;}
	
#sub-page img.center {
	display: block;
	margin: 1em auto 1em auto;}
#sub-page div.image {
	position: relative;
	text-align: center;
	margin: 0.5em 0;
	background-color: #eee;
	font-size: 80%;}
#sub-page div.image img {
	padding: 0;
	float: left;
	margin: 0;
	margin-right: 1em;
	border: 1px solid #888;}
#sub-page div.image p {
	text-align: left;
	padding: 1em;
	font-style: italic;}
#sub-page div.bottom {
	text-align: center;}
#sub-page div.bottom img {
	float: none;
	margin: 0;}
#sub-page div.bottom p {
	padding: 0.5em;}
#sub-page table img {
	padding: 0;
	margin: 0.2em;
	border: 0;}
/* /Image Styling */

/* Objects */
#sub-page div.object {
	position: relative;
	text-align: center;
	margin: 0.5em 0;
	background-color: #eee;}
#sub-page div.object object {
	padding: 0;
	float: left;
	margin: 0;
	margin-right: 1em;
	border: 0;}
#sub-page div.object h2 {
	padding-left: 1%;
	text-align: left;}
#sub-page div.object h3 {
	padding-left: 1%;
	text-align: left;}
#sub-page div.object h4 {
	padding-left: 1%;
	text-align: left;}
#sub-page div.object h5 {
	padding-left: 1%;
	padding: 1em;
	text-align: left;}
#sub-page div.object p {
	text-align: left;
	padding: 1em;
	padding-left: 1%;
	font-style: italic;}

/* Table Styling */
#sub-page table.note {
	border-collapse: collapse;
	border: 2px solid #f0d0d0;
	background-color: #f0e5e5;
	padding: 10px;
	margin: 0px;}
#sub-page table.note td {
	padding: 0.25em 0.4em;
	border: 0px solid #ddd;}
#sub-page table.note th {
	color: #100;
	font-size: 100%;
	font-weight: bold;
	background-color: #f0d0d0;
	padding: 0.5em 0.4em;
	border: 0px solid #ddd;
	border-bottom: 0px solid #e05050;}
#sub-page table {
	margin: 1em 0em;
	border-collapse: collapse;}
#sub-page table caption {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-align: left;
	font-size: 0.9em;
	padding: 0.5em 0;}
#sub-page table td {
	padding: 0.25em 0.4em;
	border: 0px solid #ddd;}
#sub-page table th {
	font-weight: bold;
	background-color: #eee;
	padding: 0.5em 0.4em;
	border: 1px solid #ddd;
	border-bottom: 3px solid #ccc;}
/* /Table Styling */


#sub-page {
	padding: 1em 1em 1em 0em;}

#sub-page h1 {
	margin-left: 24%;}

#sub-page ul, #sub-page ol {
	padding: 0.5em 0 0.5em 4em;}
	
/* re-definitions for mobile devices ******************************************************************************* */	

	@media only screen and (max-width: 600px){

body {
        font-size: 100%;
      }	#page {
	text-align: left;
	background-color: #fff;
	color: #333;
	width: 100%;                           /* width of main part of page - full*/
	margin: 0;
	border: 1px solid #666;}
	

#breadcrumbs {     
	position: relative;
	font-size: 0.9em;
    font-weight: normal;
	background: #f0c0c0;
	color: #000;
    border-style: solid;
    border-color: #a03333;
    border-width: 0px 0px 1px 0;
	padding: 0em 0em 0.2em 2em;}

/* sub-page */
#sub-page {                                       /* no pink top border */
	position: relative; 
	background: #fff;
	clear: both;
    padding: 0px 15px 15px 5px;}


body.pink #sub-page {
	position: relative;
	background: #fff url(./img/pink-banner.jpg) repeat-x scroll top;
	clear: both;
    padding: 0px 25px 15px 0px;}


#sub-page img.right {    
	width: 25%;
	height: auto%;
	clear: right;
	float: right;}
	

#sub-page #nav-top h2 {
    margin-left: 4em; 
	font-size: 50%;   /* 1.2em;  */
}

#nav-top ul {             
    margin-left: -2em;}
	
body.pink #sub-page {
	background-size: 5%;}
	
}
	
	
	/*


*/