/*
  Eric Mattei's Unpredictable Productions
  copyright (C) (P) 2018 Eric Mattei
*/

body { 
color:#ffff00; 
font-family:Arial, Helvetica, sans-serif; 
font-size:12pt;
}
/*
#autoplayAudio {cursor: pointer;}
#audio {cursor: pointer;}
*/
div.copy { font-size: 10pt; text-align: center;}
address { font-size: 10pt; text-align: center;}

br.s {
  line-height:60%;
  display: block;
  margin-top: 6px;
  content: '';
}

.smallText {font-size: 8pt;}

td { color:#ffff00; font-size:12pt; }

p {margin: 2px 3px 6px 3px; letter-spacing:0.08ex; text-indent:20px;}

a.un { text-decoration:none }

a:link {color:#ffff00; text-decoration: underline;} /* unvisited link */
a:visited {color:#ffff00;} /* visited link */
a:hover {color:#ffcc66; text-decoration: none; } /* mouse over link */
a:active {color:#ffff00;} /* selected link */ 


a.button:link, a.button:visited,a.button:hover{
font-family:Arial, Helvetica, sans-serif; 
cursor:pointer;
text-decoration:none;
font-weight:bold;
text-align:center;
white-space:nowrap;
padding-left:4px;
padding-right:4px;
margin:2px;
border-width:6px;
border-style:double;
line-height:200%;
padding-top:2px;
padding-bottom:2px;
font-size:16px;
background:#7f7f7f;
color:#c3c3c3;
border-color: #c3c3c3 #2f2f2f #2f2f2f #c3c3c3 ;
}
a.button:active {
background:#4f4f4f;
color:#7f7f7f;
padding-top:3px;
padding-bottom:3px;
font-size:16px;
border-color: #2f2f2f #c3c3c3 #c3c3c3 #2f2f2f ;
}

/****************************/
button.play_pause_button {
font-family:Arial, Helvetica, sans-serif; 
cursor:pointer;
width:47px;
text-decoration:none;
font-weight:bold;
text-align:center;
white-space:nowrap;
padding-left:1px;
padding-right:2px;
padding-top:0px;
padding-bottom:0px;
margin:0px;
border-width:4px;
border-style:double;
line-height:150%;
font-size:10px;
background:#7f7f7f;
color:#c3c3c3;
border-color: #c3c3c3 #2f2f2f #2f2f2f #c3c3c3 ;
}

h1 
{ font-size:32pt; font-weight:bold; text-align: center; 
text-decoration:none;
margin: 20px 3px 20px 3px; 
}

h2 { font-size: 28pt; font-weight:bold; 
text-decoration:none;
margin: 2px 3px 2px 3px;
}

h3 {font-size: 24pt; font-weight:bold;  
text-decoration:none;
margin: 2px 3px 2px 3px; 
}

h4 {font-size:20pt; font-weight:bold;  
text-decoration:none;
margin: 1px 3px 2px 3px;
}

h5 {font-size: 16pt; font-weight:bold;  
text-decoration:none;
margin: 6px 3px 2px 3px; 
}

h6 {font-size: 12pt; font-weight:bold;  
text-decoration:none;
margin: 6px 3px 2px 3px; 
}

.home-menu {
font-size: 14pt; font-weight:bold;  
text-decoration:none;
white-space: nowrap;
line-height:160%; 
}

.main {
background:#cedeff; font-size: 10pt; color: #800080; padding:3px;
}


/* floating top-of-page button */
a.float{
        font-size:17px;
        font-weight: 700;
	position:fixed;
	width:34px;
	height:46px;
	bottom:14px;
	right:14px;
	background-color:#000000;
	color:#0000ff;
	text-align:center;
	box-shadow: 6px 6px 3px #7f7f7f;
        text-decoration: none;
        border-width:3px;
        border-style:solid;
        border-color:#0000ff;
}
a.float:link    {color:#00f; text-decoration: none;} 
a.float:visited {color:#00f; text-decoration: none;} 
a.float:hover   {color:#00f; text-decoration: none;} 
a.float:active  {color:#00f; text-decoration: none;} 
.my-float{
	margin-top:22px;
}




/* Last Update - Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 170px;
    margin-left: -85px; /* Use half the width (170/2 = 85), to center the tooltip */
    top: 0%;
    left: 50%;
    background-color: black;
    color: #00f;
    text-align: center;
    padding: 5px 0px;
    border: 3px solid #0000ff; 
    box-shadow: 6px 6px 3px #7f7f7f;
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 0;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}


/* used in copyright function */
td.small-fish-black {
background-image: url('images/fish_black.png'); 
background-repeat: no-repeat;
background-size: 99px 38px
}
td.small-fish-white {
background-image: url('images/fish.png'); 
background-repeat: no-repeat;
background-size: 99px 38px
}



/* floating menu in header */

  .floating-menu-main {
/*    margin-bottom: 200%; */
  }
  .floating-menu {
    width: 530px;
    font-family: Arial, Helvetica, sans-serif;
    background: black;
    border: 3px solid #00f; 
    padding: 5px;;
    z-index: 100;
    position: fixed;
    top: 8px;
    right: 8px;
    box-shadow: 6px 6px 3px #7f7f7f;
  }

  .floating-menu a {
    font-size: 13px;
    display: block;
    margin: 0px 12px;
    color: #00f;
  }
  span.floating-menu-link {
    font-size: 13px;
    margin: 0px 12px;
    color: #00f;
  }
  a.floating-menu-link:link {color:#00f; text-decoration: none; } 
  a.floating-menu-link:visited {color:#00f; text-decoration: none; } 
  a.floating-menu-link:hover {color:#00f; text-decoration: underline;  } 
  a.floating-menu-link:active {color:#ff0; text-decoration: none; } 

  .floating-menu-header {
    font-size: 16px;
    display: block;
    margin: auto;
    color: #00f;
    font-weight: 700;
  }

  a.floating-menu-header-link {
    font-size: 16px;
    display: block;
    margin: 2px 8px 4px 10px;
    font-weight: 700;
/*
    width: 70px;
    height: 20px; */
  }
  a.floating-menu-header-link:link {color:#00f; text-decoration: none;} 
  a.floating-menu-header-link:visited {color:#00f; text-decoration: none; } 
  a.floating-menu-header-link:hover {color:#00f; text-decoration: none; } 
  a.floating-menu-header-link:active {color:#00f; text-decoration: none; } 


span.now_playing {
    width: 84px;
    height: 13px;
    margin-top:0px;
    font-style:oblique;
    font-size:11px; 
    text-align: center;
    vertical-align: middle;
    font-weight: 700;
    white-space: nowrap
    background-color: black; color: yellow;
    -webkit-animation-name: now_playing; /* Safari 4.0 - 8.0 */
    -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    animation-name: now_playing;
    animation-iteration-count: infinite;
    animation-duration: 1s;
}
@-webkit-keyframes now_playing { /* Safari 4.0 - 8.0 */
    0%   {background-color: black; color: yellow;}
    50%  {background-color: yellow; color: black;}
    100%  {background-color: black; color: yellow;}
}
@keyframes now_playing { /* Standard syntax */
    0%   {background-color: black; color: yellow;}
    50%  {background-color: yellow; color: black;}
    100%  {background-color: black; color: yellow;}
}