@charset "UTF-8";
/* CSS Document */
@import url("../webfonts/texgyreadventor_regular/stylesheet.css");
@import url("../../webfonts/texgyreadventor_regular/stylesheet.css");
@import url("../webfonts/texgyreadventor_bold/stylesheet.css");
@import url("../../webfonts/texgyreadventor_bold/stylesheet.css");

@media all and (min-width: 481px) and (max-width: 768px) {

html, body { max-width: 768px; }

.img-left { min-width: 150px; max-width: 250px; }

#songlist { font:normal 16px/26px "texgyreadventor regular"; }
#songlist .feature { font-size: 12px; }

#information h1 { padding:0; margin:0; font:normal 35px/50px "texgyreadventor regular"; text-align: left; }
#information h2 { padding:25px 0 0 0; margin:0 0 0 0; font:normal 25px/35px "texgyreadventor regular"; text-align: center; }
#information h3 { padding:0; margin:0; font:normal 15px/25px "texgyreadventor regular"; text-align: left; }

#information .lyrics { -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ column-count: 2; }

#information .photo {
	width: 135px;
	display: inline-block;
	text-align: center;
	margin-left: 2%;
	margin-right: 2%;
}

table { width: 60%; margin: 0% 20%; font:normal 16px/24px "texgyreadventor regular"; }
table img { width: 16px; height: auto; vertical-align: middle; 
    opacity: 0.3;
    filter: alpha(opacity=30); /* For IE8 and earlier */
	-webkit-transition: opacity 500ms ease;
	-moz-transition: opacity 500ms ease;
	-ms-transition: opacity 500ms ease;
	-o-transition: opacity 500ms ease;
	transition: opacity 500ms ease; }
table img:hover { 
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
	-webkit-transition: opacity 500ms ease;
	-moz-transition: opacity 500ms ease;
	-ms-transition: opacity 500ms ease;
	-o-transition: opacity 500ms ease;
	transition: opacity 500ms ease; }
.number { width: 5%; }
.song { width: 35%; }
.length { width: 4%; }
.audio { width: 5%; text-align: center; }
.songlyrics { width: 5%; text-align: center; }
}