*
{
  box-sizing: border-box;
  font-weight:700;
  font-family:Arial,Helvetica,Sans-Serif;
  font-size:13px;
  color:#443;
}

body
{
  margin:0px auto;
  background-color:#998;
  max-width:1280px;
}

header, section, footer, aside, nav, main, article {display: block;}

#ad1x, #ad4x, #ad7x {display:none;}

a{text-decoration:none;overflow:hidden;}

.leftt{text-align:left;}
/*.rightt{text-align:right;}*/
.centert{text-align:center;}

h1.pagecap{text-align:right;padding:0px 5px;}

/*.flrclear {float:right;clear:both;}
.fll {float:left;}*/
.flr {float:right;}
.clrb {clear:both;display:block;}

#bigcon
{
  background-color:#ffe;
  overflow:hidden;
  overflow-wrap:break-word;
}

li a {display:inline-block;vertical-align:top;}
/* чтобы в column'ах не разбивались ссылки*/

.colscon li{margin-bottom:6px;}

#abc
{
  background-color:#eed;
  padding: 10px;
  text-align:center;
  margin-bottom:10px;
}

#abc a
{
  padding:0px 5px;
  font-size:1.2em;
  line-height:2em;
}

#abc a.home
{
  padding:0px;
  margin:10px;
}

#abc a.years
{
  padding:0px 10px;
}

#abc a.home img
{
  width:80px;
  height:40px;
  display:inline-block;
  vertical-align:middle;
}

#cse-search-box
{
  width:300px;
  margin:5px;
  display:inline-block;
}

input[type=text]
{
  border:2px;
  padding:4px;
  font-size:1.2em;
  background-color:#ffe;
  vertical-align:middle;
  width:50%;
  min-width:300px;
}

textarea
{
  border:2px;
  padding:4px;
  font-size:1.2em;
  background-color:#ffe;
  width:80%;
  min-width:300px;
  min-height:300px;
}

#cse-search-box input[type=text]
{
  width:210px;
  min-width:0px;
  border:0px;
}

input[type=submit],input[type=reset]
{
  padding:6px 15px;
  border:0px;
  background-color:#998;
  color:#eed;

  vertical-align:middle;
}

input[type=submit]:hover,input[type=reset]:hover
{
  cursor:pointer;
}

#subcor input[type=submit]
{
  margin-bottom:10px;
}

h1,h2
{
  padding:0px;
  margin:0px;
}

.con
{
  background-color:#f8f8e8;
  overflow:hidden;
  overflow-wrap:break-word;
  border:1px solid #eed;
}

div.con
{
  padding:10px;
/*  border:1px solid #eed;*/
}

/*
ul.con
{
  border:1px solid #eed;
}
*/

ul
{
  list-style-type:none;
  margin:0px; 
  padding:0px;
  text-align:left;
}

ol
{
  padding-left:20px;
  text-align:left;
}

.cap
{ 
  background-color:#998;
  color:#eed;

  padding:5px 10px;
}

a.nolyrics, a.nolyrics span
{
  color:#bba;
}

a:hover, a:active, a:hover span, a:active span
{
  color:#d30;
}

.cap span
{
  color:#eed;
}

.cap a, .cap a span
{
  color:#eed;
  text-decoration:underline;
}

#ad1, #ad2, #ad3, #ad5, #ad6, #video, #bigvideo
{
  background-color:#f8f8e8;
  margin:0px auto 10px;
  overflow:hidden;
  text-align:center;
}

#ad4, #ad7 /* может не быть, фон не надо */
{
  margin:0px auto 10px;
  overflow:hidden;
  text-align:center;
}

#ad7{vertical-align:middle;}

#ad2
{
  margin-top:10px;
}

#artistnav, #related/*, main*/
{
  margin-bottom:10px;
}

#adtf1, #adtf2
{
  margin:10px auto 20px;
  overflow:hidden;
  text-align:center;
}

#bookmark
{
  text-align:center;
}

div.maincon
{
  display: -webkit-flex;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

main 
{
  width:100%;
  flex:none;
}

aside.left 
{
  width:100%;
  flex:none;
}

aside.right 
{
  width:100%;
  flex:none;
  text-align:center;
/*margin-bottom:0px;*/
}

.showdesk {display:none;}
.hidedesk {display:block;}

#ad1, #ad2
{
  width: 320px;
  height: 100px;
} 

#ad7
{
  width: 320px;
/*  height: 50px;*/ /* без height. т.к. cf/vc на мабиле часто оставляет пустое место*/
}

#ad3
{
  width: 300px;
  height: 250px;
  display:inline-block;
  vertical-align: bottom;
} 

#ad4
{ /* без height. т.к. cf/vc на мабиле часто оставляет пустое место*/
  width: 300px;
  display:inline-block;
  vertical-align: bottom;
} 

#videocon
{
  width: 300px;
  display:inline-block;
  vertical-align: bottom;
}

#video
{
  width: 300px;
  height: 250px;
  border:0px;
  display:inline-block;
  vertical-align: bottom;
} 

#bigvideocon
{
  width:100%;
  height:0px;
  position: relative;
  padding-bottom: 56.25%;
}

#bigvideo
{
  width:100%;
  height:100%;
  position:absolute;
  top:0px;
  left:0px;
  border:0px;
}

#song div.con
{
  text-align:center;
  background-color:#f8f8e8;
  line-height:1.667em;
}

#artistname span, #songname
{
  font-size:1.167em; /* 14/12 */
}

#songname span
{
  font-size:1em;
}

#songname
{
  padding-bottom:5px;
}

#authors, #authors span
{
  font-style:italic;
}

#authors, #feat, #original
{
  padding:3px;
}

#authors a, #feat a, #original a
{
  text-decoration:underline;
}

#lyrics
{
  padding-bottom:10px;
}

#lyrics p
{
  font-size:1.167em;
  font-weight:500;
}

.album
{
  display: inline-block;
  width:100%;
  margin-bottom:10px;
}

div.colscon
{
  -webkit-column-width: 160px;
  -moz-column-width: 160px;
  column-width: 160px;
/*
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
*/
}


div.coveral
{
/*
 display: inline-block; вроде бы справляется
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
*/

  display:inline-block;
}

.albumyear
{display: inline-block; margin:0px 3px 20px;width:140px;
/*border-width:1px;border-color:#443;border-style:solid;*/}
.albumyear h2
{
  width:140px;
  overflow:hidden; 
  overflow-wrap:break-word;
}

img.cover
{
  display:block;
  background-image:url("https://www.oldielyrics.com/noalbumcover.jpg");
  background-size:contain;
  margin:4px auto 10px;
}

.album img.cover
{
  width:160px;
  height:160px;
}

.albumyear img.cover
{
  width:120px;
  height:120px;
}

img.amazon
{
  width:90px;
  height:28px;

  display:block;
  margin:0px auto;
}

aside.left ul
{
  text-align:center;
}

aside.left ul li
{
  text-align:center;
  min-width:160px;
  padding:5px 10px;
  display:inline-block; /*если inline-block, плохо влазят длинные строки, если нет - все менюшки в своей строке :( */
}

#breadcrumbs
{
  padding:10px;
  text-align:center;
  font-weight:500;
}

#ribbon ul
{
  background-color:#eed;
  text-align:center;
}

#ribbon ul li
{
  min-width:160px;
  padding:10px;
  display:inline-block;
}

@media screen and (min-width: 768px){ 
*{font-size:12px;}

main
{
  width:540px; /*может быть что угодно*/
  flex:auto;
/* не знаю, почему так тоже работает... 
  min-width:540px; 
  flex:1;
*/
}

aside.left
{
  width:160px;
  -webkit-order: -1; 
  order: -1;
  margin:0px 10px;
}

aside.right{margin:0px 10px;}

.showdesk {display:block;}
.hidedesk {display:none;}

#song{margin-bottom:10px;}

#ad1
{
  width: 728px;
  height: 90px;
}

#ad3
{
  height:600px;
} 

#ad7
{
  width: 728px;
/*  height: 90px;*/ /*да и тут не надо, вероятно, пусто*/
}

#ad4
{
/*  height:250px; */ /*не указывали раньше - да и тут не надо, вероятно, пусто*/
}

#ad5
{
  width: 160px;
  height: 90px;
}

#ad6
{
  width: 160px;
  height: 600px;
}

aside.left ul li{text-align:left;}
}

@media screen and (min-width: 619px) and (max-width: 1060px){ 
/*правые квадратики внизу - их 2 или 3 в строку*/
#videocon .cap{display:none;}
main{margin:0px 10px 0px 0px;}
}

@media screen and (min-width: 1061px){ 
/*правые квадратики справа*/
aside.right{width:300px;}
#ad1, #ad7, #breadcrumbs{position:relative;left:-70px;} /*лиды посредине main'а*/
#artistname{margin-top:10px;}
main{margin:0px;}
/*#bookmark{margin-bottom:10px;}*/
}

@media screen and (min-width: 621px) and (max-width: 922px){ 
#ad4{display:none;} /*не показывать нижний rect, если ректы переносятся 2/1 */
}

@media print{
*{color:black !important;background-color:white !important;font-size:12px;}
div.maincon{display:block;}
a{text-decoration:none !important;}
.noprint {display:none !important;}
#song div.con {border:0px;}
main::after {content: "printed @ OldieLyrics.com";}
}