body {
margin: 0;
font-family: arial, sans-serif;
height: 100%;
}
h2 {
text-align: center;
}
h3 {
text-align: center;
}
h4 {
text-align: center;
}
/* ensures the padding and border are included in the total width and height of the elements */
* {
box-sizing: border-box;
}
a {
text-decoration: none;
color: #f7ca16;
}
a:hover {
color: #ffffff;
text-decoration: underline;
}
/* the hash (#) references the id of the unique element in the html code | id="myVideo"
vh, vw = viewport height/width
object-fit: cover - retains its aspect ratio and fills the given dimension. The image will be clipped to fit.
*/
#myVideo {
position: fixed;
right: 0;
top: 0;
object-fit: cover;
width: 100vw;
height: 100vh;
display: block;
}
#myImage {
position: fixed;
right: 0;
top: 0;
object-fit: cover;
width: 100vw;
height: 100vh;
}
.myFlipbook {
position: fixed;
right: 0;
/* top: 0; */
top: 50px; /* this starts it below the menu bar */
object-fit: contain;
width: 100vw;
height: 100vh;
visibility: hidden;
}
.close_button_holder {
position: fixed;
top:60px;
right: 10px;
width:140px;
height:30px;
text-align:right;
visibility: hidden;
z-index:1;
}
#flip_msg_holder {
position: fixed;
top:60px;
left: 10px;
width:150px;
height:56px;
text-align:left;
font-size:8pt;
color:#a0a0a0;
visibility: hidden;
z-index:1;
}
.flipbook_holder {
text-align:left;
width:100%;
height:100%;
}
.video_score_holder {
text-align:left;
width:100%;
height:100%;
display:none;
}
#closeMyFlipper {
width:140px;
height:30px;
border:2px solid black;
border-radius:4px;
padding-top:4px;
padding-bottom:4px;
text-align:center;
/* margin:auto; */
float:right;
color:#000000;
}
.commentbox {
width:250px;
/* border:1px solid #d0d0d0; */
border-radius:5px;
padding:4px;
margin:4px;
color:#d0d0d0;
background-color:#363636;
font-size:11pt;
float:left;
}
.buy-now {
width:100px;
float:left;
text-align:center;
border-radius:8px;
border:2px solid #0a17cc;
padding: 8px 8px;
margin:4px;
font-size:8pt;
background-color: #010150;
}
a.sheetmusavail-link {
margin:4px;
font-size:8pt;
text-decoration:none;
color: #d0d0d0;
}
a.sheetmusavail-link:hover {
background-color: #040470;
}
a.smp-link {
width:90px;
font-size:8pt;
color:#d8d4d2;
text-decoration:none;
margin:6px;
}
a.smp-link:hover {
color: #f7ca16;
}
/* home page content block */
.content_home {
position: absolute;
top: 250px;
left: 120px;
color: #d0d0d0;
background: rgba(0, 0, 0, 1);
width: 70%;
font-size;20pt;
border-radius: 25px;
opacity: 0;
-webkit-animation: fadein 7s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 7s; /* Firefox < 16 */
-ms-animation: fadein 7s; /* Internet Explorer */
-o-animation: fadein 7s; /* Opera < 12.1 */
animation: fadein 7s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* home page footer */
.home_footer {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0);
color: #f1f1f1;
width: 100%;
padding: 20px;
font-size;16pt;
}
/* standard pages content block */
.content {
position: fixed;
top: 50px;
bottom: 50px;
left: 0px;
padding-left:50px;
padding-right:50px;
color: #d0d0d0;
background: rgba(0, 0, 2, 0.8);
width: 100%;
/* min-width:500px; */
height:100%-50px; /* -50px finishes it above the footer */
font-size:14pt;
overflow-x: hidden;
overflow-y: auto;
}
/* standard pages inner content block */
.inner_content {
width: 70%;
margin: auto;
padding: 10px;
}
/* standard pages footer */
.footer {
position: fixed;
bottom: 0px;
left: 0px;
background: linear-gradient(to right, #a0a0a0, #000000);
color: #f1f1f1;
width: 100%;
height: 50px;
font-size: 8pt;
padding-top:10px;
}
.title_with_divider {
margin-top:30px;
padding-left:10px;
padding-top:5px;
border-left:1px solid #f4d755;
border-top:1px solid #f4d755;
border-radius:7px;
color:#f4d755;
/* color:#d30202; */
width:90%;
}
.video_size {
width:560px;
height:315px;
}
.audio_score_size {
width:720px;
height:480px;
}
.show_or_hide {
display:block;
}
@media screen and (max-width: 768px) {
.content {
padding-left:5px;
padding-right:0px;
}
.inner_content {
width: 100%;
padding: 5px;
}
.content_home {
top:400px; /* allows room for menu dropdown */
left:20px;
padding:5px;
font-size:11pt;
}
.video_size {
width:420px;
height:236px;
}
.show_or_hide {
display:none;
}
/*
#myImage {
display:block;
}
#myVideo {
display:none;
}
*/
}