/* BASIC RESET */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}

html, body{
	height: 100%;
	font:100% 'Didot','Arial', sans-serif; 
}

#list{
	overflow:scroll;
}

#songlist{
    margin: 2px 10px;
    background-color: #FFF;
	position: relative;
	margin-bottom: 15px;
}

#buffer{
	position: relative;
	height: 56px;
	width: 100%;
    background-color: #FFF;
}

#top{ 
	padding: 4px 10px;
	margin: -2px 0px;
	position: absolute;
	height: 50px;
	width: 100%;
	z-index: 12;
	background-color: white;
}



#topscroll{
	width: 100%;
}

#bubble{
	display: none;
	position: fixed;
	background-color: #DDD;
	margin: 0 auto;
	width: 772px;
	height: 200px;
	margin-left: calc(50% - 410px); 
	margin-top: 50px;
	padding: 10px;
	border-style: solid;
	border-width: 2px 2px;
	border-color: #000;	
}
#bubbleArtist, #bubbleName{
}

.bubble, .bubbleSong, #close{
	background-color: #FFF;
	float: left;
	width: 370px;
  margin: 1px 1px;
  border-style: solid;
	border-width: 2px 2px;
	border-color: #000;
	padding: 5px;
}

#bubbleSongs{
	height: 90px;
	overflow: hidden;
}

#bubbleKey, #close{
	float: left;
	width: 177px;
}

#bubbleLeft, #bubbleRight{
	float: left;
	width:300px;
}

.song, song, sorter, header, .info, .bubblesong{
  font-size: 18px;
  letter-spacing:-1.5px;
  margin: 1px 1px;
  border-style: solid;
	border-width: 2px 2px;
	border-color: #000;
	float: left;
	height: 24px;
	top: 2px;
	padding: 0px 5px;

}

.info{
	height: 120px;
	width: 358px;
}

.song, song{
	width: calc(33% - 13px);
	white-space: nowrap;
	overflow: hidden;
}

sorter{
	width: calc(8.333333% - 18px);
	text-align:center;
	background-color:#DDD;
	padding: 0px -6px;
	position: relative;
	float:left;
	height: 24px;
	padding-top:10px;
	padding-bottom:10px;
	margin:0px 1px 2px 1px;
}

#showD{
	color: grey;
}

break{
	width: 100%;
	float: none;
}
a:visited{
   color:blue;
}

.gradeR, .gradeS, .gradeD, .gradeX, header{
     display:none; 
}

song.clicked{
 height:300px;
}

.gradeC h1{
   opacity: 50%;
}

.A h1{
	color: #E86000;
}

.B h1{
	color: #B08;
}


#lyricpage, .lyrics{
display: none;}

a, a:visited{color:black;}
h1{color:blue;
	font-size: 18px;
	font-weight: normal;}

textarea{
font-family: Times New Roman;
}

#chartPage{
display:none;
height: 2000px;}

.lyric, .chord{
display:none;}

#pageturn{
width: 25px;
height: 100vh;
z-index: 99;
font-size:50px;
display: inline-flex;
align-items: center;
	padding: 12.5px;
	background-color: #CCC;
/*! position: absolute; */
}

#lyricsmain{
padding:50px 45px;
width: 678px;
}

#topbar{
	height:50px;
	width:100%;
	background-color: #CCC;
	position: fixed;
	z-index: 100;
	top: 0px;
}

#console{
position: sticky;
  z-index: 100;
  width: 100%;
  /*! height: 1080px; */
  background: transparent;
  top: 0px;
}

#list{
 overflow:scroll;
}

#title, select{
float: left;
font-size: 26px;
padding: 10;
}

#title{
	padding:5px 5px;
	font-size: 26px
}

select{
float: right;
font-size: 20px;
padding: 2px 2px;
margin: 10px;
background: none;
border-width: 1px;
border-color: #000;
border-radius: 0px;
border-style: solid;
color:#000;
}

.button{
height:50px;
width:50px;
font-size: 40px;
color: black;
text-decoration: none;
background-color: #888;
align-items: center;
display: flex;
text-indent: 10px;
}

#back{
text-indent: 5px;
}

.left{
float: left;
/*! position: absolute; */
}

.right{
float: right;
}
 
.page{
position: absolute;
width: 700px;
height: 1800px;
font-size: 22px;
line-height: 22px;
overflow: hidden; 
background: transparent;
border: none;
}

#chordChart1, #chordChart2{
font-family: 'Courier New';
text-shadow: #000 0px 0px .75px;
}

#lyricChart2, #chordChart2{
height: 1440px;
}

#light{
display:none;}

#dark{
display:inline-flex;}

#twopage, #onepageBtn {
display:none;}

#twopageBtn{
display:none;
}

@media screen and (max-width: 1000px){
.song{
	width: calc(50% - 17px);
    letter-spacing:-1px;
}
}

@media screen and (max-width: 699px){
.song{
	width: 360px;
    letter-spacing:-1px;
}
}

@media screen and (min-width: 900px){
 
.page{
width: 984px;
height: 2700px;
font-size: 30px;
line-height: 30px;
}

#title{
font-size: 32px;
}

#lyricsmain{
 padding:60px 40px;
 width: 944px;
 /*! overflow:hidden; */
 position: relative;
 margin: 0 auto;
}

#twopageBtn{
display:flex;
}

#onepageBtn{
display:none;}
}