* {
margin: 0;
padding: 0;
font-size: 14px;
font-family: arial, verdana, sans-serif;
}

body 	{
background: silver;		/*color body */
}

p, h2, h3, h4, h5, ul {
display: block;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}

h3 {
background: #f4eade;				/* color bg headers*/
padding: 20px;
}

ul li {
list-style-type: square;
}

li {
list-style: disc outside none;
display: list-item;
margin-left: 1em;
}

.topnav {
overflow: hidden;
background: #2f496e; 				/* color bg navigation*/
}

.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
transition: 0.3s;
}

.topnav a:hover {
background: #f4eade;			/* color bg hover navigation*/
transition-duration: 0.5s;
color: #2f496e;
}

.link {
width:11.6%;
}


.active {
background: #ed8c72;				/* color bg active button*/
width:11.6%;			
}


.topnav .icon {
display: none;
}

div.bgimagecolor {
background: #2f496e; 				/*color filter bgimage */
background: linear-gradient(100deg, black, #f4eade);
width: 100%;
height: 60%;
position: absolute;
z-index: 2;
opacity:0.3;
}

div.bgimage {
position: absolute;
z-index:1;
}

div.bgimagetxt {
padding: 15px;
position: absolute;
width:50%;
height:auto;
z-index:3;
text-align: left;
}

p.bgimagetxt01 {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-variant: small-caps;
font-size: 2.4em;
letter-spacing: 0px;
text-align: center;
font-style: normal;
color: white;
padding: 12px;
background:black;
border: 1px inset grey;
} 


p.bgimagetxt02, p.bgimagetxt02 i {
font-size: 3em;
font-style: normal;
text-shadow: 5px 6px 11px rgba(0,0,0,0.64);
color: white;
} 

p.bgimagetxt03 {
font-size: 1.1em;
font-style: normal;
color: white;
width: 60%;
position: absolute;
top:130%;

} 


div.bgimagetxt img {				/* logo */
max-width: 20%;
max-height: 20%;
width: auto;
height: auto;
float: left;
}


div.bgimagetxt p span {
font-family: Noto Sans, sans-serif;
font-variant: small-caps;
font-style: normal;
}


div.bgimagetxt i {
font-style: italic;
}

img.bgimage {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}


.sub {
text-align: left;
line-height: 1.3em;
background: white;			/* color bg text area */
margin: 0;
padding:2%;
position: relative;
z-index:4;
margin-top:42%;
}


button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.accordion:hover {
    background-color: #ccc;
}

.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

button.active:after {
    content: "\2212";
}

.panel {
margin-top:1em;    
background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}


table {
border: 0;
border-collapse: collapse;
width: 100%;
}


td {
padding: 0px 15px 0px 15px;
text-align: left;
vertical-align: top;
width:50%;
}

table.supportus, table.supportus1, table.supportus2, table.rbp  { 
width: 100%; 
border-collapse: collapse; 
}

/* Zebra striping */
table.supportus tr:nth-of-type(odd), 
table.supportus1 tr:nth-of-type(odd), 
table.supportus2 tr:nth-of-type(odd), 
table.rbp tr:nth-of-type(odd)     { 
background: #eee; 			/* color bg td*/
}

table.supportus th, 
table.supportus1 th, 
table.supportus2 th, 
table.rbp th    { 
background: #2f496e; 			/* color bg th*/
color: white; 
font-weight: bold;
}

table.supportus td, 
table.supportus th, 
table.supportus1 td, 
table.supportus1 th, 
table.supportus2 td, 
table.supportus2 th, 
table.rbp td, 
table.rbp th    { 
padding: 6px; 
border: 1px solid #ccc; 
text-align: left; 
width:20%; 
}


.fluidMedia {
position: relative;
padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
padding-top: 0px;
height: auto;
overflow: hidden;
}

.fluidMedia iframe {
position: absolute;
top: 0; 
left: 0;
width: 100%;
height: 100%;
}


p.citation {
text-align: right;
margin-left: 10%;
background: #ed8c72; 			/* color bg citation */
color: white;				/* font color citation */
padding:10px;
}

p.citation img {
height: 70px;
width: 70px;
float: left;
margin: 0px 0px -10px -25px;
}


span.citation {
font-family: arial;
font-style: italic;
font-size: 1.3em;
}

.notices {
background: #2f496e; 			/*color bg notices*/
text-align : center;
padding: 20px;
position: relative;
}
	
.notices p, .notices p a	{
text-decoration: none;
font-size: 12px;
color: white;				/* font color notices*/
text-decoration: none;
padding: 3px;
}

.notices p a:hover {
transition-duration: 0.5s;
color: #2f496e;
background: #f4eade;			/*color bg links notices */
padding: 4px 6px 4px 6px;
text-decoration: underline;
}

@media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */

.desktop-only {
display: block !important;
position: relative;
}
.mobile-only {
display: none !important;
}
	
.canvas {
max-width: 1251px; /* max width of bg image */
margin:auto;
text-align: center;
position:relative;
z-index:5;
}

table { 
display: table; 
}

tr {
display: table-row; 
}

td { 
display: table-cell;
}

}

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

{
		
.desktop-only {
display: none !important;
}

.mobile-only {
display: block !important;
}

.topnav a:not(:first-child) {
display: none;
}
 
.topnav a.icon {
float: right;
display: block;
}

.topnav.responsive {
position: relative;
}
  	
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}

.topnav.responsive a {
float: none;
display: block;
text-align: left;

}

div.bgimagetxt span {
font-family: Noto Sans, sans-serif;
font-variant: small-caps;
font-size: 2em;
font-style: normal;
} 



.sub {
line-height: 1.5em;
}

table, tr, td {
display: block;
width: 95%;
padding: 5px;
}

table.supportus, table.supportus thead, table.supportus tbody, table.supportus th, table.supportus td, table.supportus tr, table.supportus1, table.supportus1 thead, table.supportus1 tbody, table.supportus1 th, table.supportus1 td, table.supportus1 tr, table.supportus2, table.supportus2 thead, table.supportus2 tbody, table.supportus2 th, table.supportus2 td, table.supportus2 tr, table.rbp, table.rbp thead, table.rbp tbody, table.rbp th, table.rbp td, table.rbp tr  { 
display: block; 
}
	
/* Hide table headers (but not display: none;, for accessibility) */
table.supportus thead tr, 
table.supportus1 thead tr, 
table.supportus2 thead tr, 
table.rbp thead tr   { 
position: absolute;
top: -9999px;
left: -9999px;
}
	
table.supportus tr, 
table.supportus1 tr, 
table.supportus2 tr, 
table.rbp tr  {
border: 1px solid #ccc; 
}
	
table.supportus td, 
table.supportus1 td, 
table.supportus2 td, 
table.rbp td    { 
/* Behave  like a "row" */
border: none;
border-bottom: 1px solid #eee; 
position: relative;
padding-left: 50%;
width:50%;
}
	
table.supportus td:before, 
table.supportus1 td:before, 
table.supportus2 td:before, 
table.rbp  td:before    { 
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%; 
padding-right: 10px; 
white-space: nowrap;
}
	
/* Label the data */
table.supportus td:nth-of-type(1):before { content: "Terminology"; }
table.supportus td:nth-of-type(2):before { content: "Per year"; }
table.supportus td:nth-of-type(3):before { content: "Per half year"; }
table.supportus td:nth-of-type(4):before { content: "Per Quarter"; }
table.supportus td:nth-of-type(5):before { content: "Per Month"; }
	
table.supportus1 td:nth-of-type(1):before { content: "Format (px)"; }
table.supportus1 td:nth-of-type(2):before { content: "Per year"; }
table.supportus1 td:nth-of-type(3):before { content: "Per half year"; }
table.supportus1 td:nth-of-type(4):before { content: "Per Quarter"; }
table.supportus1 td:nth-of-type(5):before { content: "Per Month"; }

table.supportus2 td:nth-of-type(1):before { content: "Length"; }
table.supportus2 td:nth-of-type(2):before { content: "Per year"; }
table.supportus2 td:nth-of-type(3):before { content: "Per half year"; }
table.supportus2 td:nth-of-type(4):before { content: "Per Quarter"; }
table.supportus2 td:nth-of-type(5):before { content: "Per Month"; }

table.rbp td:nth-of-type(1):before { content: "Royalties"; }
table.rbp td:nth-of-type(2):before { content: "Per year"; }
table.rbp td:nth-of-type(3):before { content: "Per half year"; }



div.bgimagecolor {
display: none;
}


div.bgimagetxt {
position: absolute;
z-index:3;
text-align: left;
padding: 0px;
border:0;
width:100%;
}


p.bgimagetxt01 {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-variant: small-caps;
font-size: 1.3em;
font-style: normal;
color: white;
background: black;
border: none;
padding: 4px;

left: 0%;
top:0%;
} 

div.bgimagetxt img {				/* logo */
max-width: 20%;
max-height: 20%;
width: auto;
height: auto;
float: left;
}




}