@charset "UTF-8";
/* CSS Document */

/***** HEADER *****/
/*header {
	position: fixed;
	z-index: 99;
}*/

/****** SAME STYLES *****/
.intro-container, .intro-bg-container {
  width: 96%;
  margin-left: auto;
  margin-right: auto;
}

/*****------- INTRO -------*****/

/***** SELECT BACKGROUND *****/
.intro-bg {
  width: 100%;
  height: 200px;
  background: url(img/img2.jpg) center center no-repeat;
  background-size: cover;
  /* position fixed header */
  margin-top: 60px;
  display: inline-table;
}
.intro-container {
  height: auto;
  background-color: none;
  margin: 20px auto;
  display: flex;
}
.intro-container:after {
  content: '';
  display: block;
  clear: both;
}
.left-box {
  width: 100%;
  height: auto;
  background-color: none;
}
.intro-header {
  width: 100%;
  background-color: #f0f0f0;
  padding: 10px 20px;
}
.intro-title h1 {
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 600;
}
.intro-title, .addThisPanel {
    display: inline-block;
}
.addThisPanel {
    float: right;
}
.intro-article {
  width: 100%;
  height: auto;
  background: none;
}
.intro-article article {
  margin: 40px 0;
  background-color: #f0f0f0;
  padding: 25px;
}
article.theoryChords {
  background-color: #ffffff !important;
  margin: 10px 0 !important;	
}
.intro-article-imagen img {
  width: 100%;
}
.intro-number-article {
  font-size: 44px;
  color: #1c1c1c;
  padding: 0 15px 3px 0;
  font-weight: bold;
  float: left;
  line-height: 0.9;
}
.intro-article-info p a {
  color: #cc0000;
}
.intro-article-info p a:hover {
  text-decoration: underline;
}
.intro-article-info {
  background-color: none;
  /*padding-top: 10px;*/
}
.intro-article-info p span {
  font-weight: bold;
  font-size: 15px;
}
/*.intro-article-info ul {
  padding: 10px 0 10px 55px;
}*/
.intro-article-info ul.ul-terms li {
  list-style-type: disc;
  padding: 6px 0;
  /*background: #e8e8e8;*/
  margin-left: 30px;
}
.intro-article-info ul.ul-theoryChords li {
  /*list-style-type: disc;*/
  padding: 5px 0;
  /*background: #e8e8e8;*/
  margin-left: 30px;
}
.intro-article-info ul.ul-theoryChords li a {
  color: #666666;
  position: relative;
  /*display: block;*/
  padding-left: 22px;
}
.intro-article-info ul.ul-theoryChords li a:hover {
  color: #cc0000;
}
.intro-article-info ul.ul-theoryChords li a:before {
  content: "\f0f6";
  position: absolute;
  top: 0px;
  left: 0;
}
.intro-article-info ol.ol-theoryChords {
  margin-top: 15px;
}
.intro-article-info ol.ol-theoryChords li {
  margin-left: 30px;
}



/*arreglos para incluir el listado en la página de texto*/
 .intro-article .list-songs-container {
     width: 100% !important;
   }
 
 .intro-article .list-songs-container   .left-box {
      width: 100% !important;
   }


.intro-article .list-songs-container .playlist-chords {
    display: none;
    width: 0px !important;
}

.intro-article .list-songs-container  .playlist-difficulty {
    display: none;
    width: 0px !important;
}

.intro-article #listado .list-songs-container, .intro-article #listado article {
    /*border: 1px solid #000;*/
    padding: 10px 0px !important;
    margin: 10px 0px !important;
}


.intro-article #listado .list-songs-container:first-child, .intro-article #listado article:first-child {
  padding-top: 0px !important;
  margin-top: 0px !important;
}

.intro-article #listado .playlist-name {
    width: 40% !important;
}


.intro-article #listado .playlist-band {
    width: 40% !important;
}
.intro-article #listado .icono-capo {
    line-height: 1.6 !important;
}

.songExample .container-right {
	display: none;
}

/*fin de arreglos para incluir el listado en la página de texto*/




.intro-article #listado .playlist-name, .intro-article .AmCEmGSongsHyperlink, .intro-article .nextStepHyperLink, .intro-article #listado .youtubeHyperHyperlink {
	color: #444;
	padding-left: 22px;
	position: relative;
}
.intro-article #listado .youtubeHyperHyperlink {
	font-weight: 600;
}

#content_easierVersionHyperlink, #content_similarSongsHiperlink {
}
.intro-article #listado .playlist-name:hover, .intro-article .AmCEmGSongsHyperlink:hover, .intro-article #listado .youtubeHyperHyperlink:hover {
	color: #cc0000;
}
.intro-article .AmCEmGSongsHyperlink:hover {
	text-decoration: none;
}
.intro-article #listado .playlist-name:before {
	content: "\f0f6";
	/*margin-right: 6px;*/
	position: absolute;
	top: 0;
	left: 0;
} 
.intro-article #listado .youtubeHyperHyperlink:before {
	content: "\F16a";
	/*margin-right: 6px;*/
	position: absolute;
	top: 0;
	left: 0;
}
.intro-article .AmCEmGSongsHyperlink:before {
	content: "\f03a";
	/*margin-right: 6px;*/
	position: absolute;
	top: 0;
	left: 0;
}
.intro-article .nextStepHyperLink:before {
	content: "\f18e";
	/*margin-right: 6px;*/
	position: absolute;
	top: 0;
	left: 0;
}
.intro-article .nextStepHyperLink, .intro-article .nextStepHyperLink:visited {
    color: #cc0000;
}
.intro-article .nextStepHyperLink:hover {
    text-decoration: underline;
}

.privacy-bold {
    font-size: 15px;
	font-weight: 600;
}
.songExample .left-box {
	min-height: 0 !important;
}



/*Formateo de tablas de familias de acordes y acordes con clave*/


.scalesTable, .keyChordsTable{
    position: relative;
	text-align:center;
  	border-collapse: collapse; 
	font-size: 22px;
	background-color: #ffffff;
	border: 3px solid #777777;
}
.keyChordsTable .songExamples {
        font-size: 15px;
    }
.scalesTable td, .keyChordsTable td{
	padding: 5px 0px;
}
.scalesTable .columnTitle, .keyChordsTable .columnTitle{
	height: 40px;
	border-top: 2px solid #888888;
	border-right: 2px solid #888888;
	border-bottom: 2px solid #888888;
	border-left: 2px solid #888888;
	font-weight:600;	
}
.keyChordsTable .columnTitle {
	height: auto !important;
}
.scalesTable .midLayer1, .scalesTable .midLayer2, .scalesTable .midLayer3, .scalesTable .midLayer4, .scalesTable .midLayer5, .scalesTable .midLayer6, .scalesTable .midLayer7 {
   position: absolute;
   top: 25px;
   color: #cc0000; 
   font-size: 18px;
}
.scalesTable .midLayer1 {
   left: 29.5%;
}
.scalesTable .midLayer2 {
   left: 39.5%;
}
.scalesTable .midLayer3 {
   left: 49.5%;
}
.scalesTable .midLayer4 {
   left: 59.5%;
}
.scalesTable .midLayer5 {
   left: 69.2%;
}
.scalesTable .midLayer6 {
   left: 79.3%;
}
.scalesTable .midLayer7 {
   left: 89.5%;
}
.scalesTable .rowTitle, .scalesTable .rowTitle1 { 
	width: 20%;
}
.keyChordsTable .rowTitle, .keyChordsTable .rowTitle1{
	width: 40%;
}
.scalesTable .rowTitle1, .keyChordsTable .rowTitle1{
	border-right: 2px solid #888888;
}
.scalesTable .rowTitle, .keyChordsTable .rowTitle{
	font-weight:500;
	border-right: 2px solid #888888;
	border-bottom: 2px solid #888888;
	border-left: 2px solid #888888;
	text-align: left;
	padding-left: 2%;
}
.scalesTable .tableValue, .scalesTable .tableValue1, .keyChordsTable .tableValue, .keyChordsTable .tableValue1{
	width: 10%;
}
.scalesTable .tableValue, .keyChordsTable .tableValue{
	font-weight:400;
	border-left: 2px solid #888888;
	border-right: 2px solid #888888;
	border-bottom: 2px solid #888888;
}
.keyChordsTable .tableValue a{
	/*color: #006;*/
	color: blue;
	text-decoration:none;
}
.keyChordsTable .tableValue a:hover{
	/*color: #009;*/
	color: darkblue;
	text-decoration: underline;
}
.keyChordsTable .filaSostenido{
	display: none;
}

.keyChordsTable .diminishedChord{
	display: none;
}
.songExamples, .songExamples a {
	color: #cc0000;
}
.songExamples a:hover {
	text-decoration: underline;
}

/*Fin del formateo de tablas de familias de acordes*/



/***** RIGHT BOX *****/
.right-box {
  display: none;
}

.right-box .cuadroLateralAds {
  margin-bottom: 30px;
}


.songExample .right-box {
  display: none !important;
}








@media screen and (max-width: 1129px) and (min-width: 768px) {

   /********* SONGS **********/
 
       .ads_barraInferior01_970x90GenericaPanel {
        display: none;
    }
    
    #theoryAds .ads_barraInferior01_336x280x2GenericaPanel {
        margin: 0px auto;
        display: table;
        width: 336px;
    }
     .fixedDivforScrolling .animate {
        right: 20px;
    }

}






@media screen and (min-width: 970px) {


       .ads_barraInferior01_970x90GenericaPanel {
        margin: 20px auto;
        width: 970px;
        /*height: 90px;*/
        height: 250px;
        /*background-color: #ccc;*/
    }
    
    .ads_barraInferior01_336x280x2GenericaPanel {
        display: none;
    }
}






@media screen and (min-width: 1100px) {

   /********* INTRO  **********/
   .intro-container, .intro-bg-container {
      width: 1130px;
   }
   .left-box {
      width: 780px; /*desactivado por quitar la publicidad
      width: 100%;*/
      /*float: left;*/
      order: 2;
      float: none !important;
      margin-left: 20px;
   }
   .intro-article-imagen {
      margin-bottom: 10px;
   }   
   .right-box {
      width: 300px;
      height: auto !important; /* activado al poner la publicidad amazon en la derecha en la tablatura */
      /*background-color: #f0f0f0;*/
      float: left;
      margin-left: 20px;
      display: block; /*publicidad off*/
   }
   
}


@media screen and (max-width: 1100px) {

    .addThisPanel {
        display: none;
    }
}




@media screen and (max-width: 1099px) and (min-width: 768px) {

   /********* INTRO **********/
   .intro-container {
      /*width: 768px; desactivado por quitar la publicidad*/
      width: 96%;
   }
   .left-box {
      /*width: 548px; desactivado por quitar la publicidad*/
      width: 100%;
      float: left;
   }
   .right-box {
      width: 200px;
      height: auto !important; /* activado al poner la publicidad amazon en la derecha en la tablatura */
      /*background-color: #f0f0f0;*/
      float: left;
      margin-left: 20px;
      display: none;/* desactivado off*/
   }
   .intro-article-imagen {
      margin-bottom: 10px;
   }   
}






@media screen and (max-width: 767px) and (min-width: 481px) {

   /**** HEADER NO POSITION FIXED ****/
   header {
	   position: inherit;
   }
   .intro-bg {
       margin-top: 0;
   }
   
   /********* INTRO **********/
   .intro-number-article {
      font-size: 38px;
        line-height: 1;
   }   
   .intro-article #listado .icono-capo, .intro-article #listado .icono-noCapo {
      float: right;
      margin-right: 10px;
   }
   .intro-article #listado .youtubeHyperHyperlink {
   	  font-size: 15px;
   }
   .intro-article-imagen {
      margin-bottom: 10px;
   }


   /*Tablas*/
    .scalesTable, .keyChordsTable {
        font-size: 12px;
    }
    .keyChordsTable .songExamples {
        font-size: 10px;
    }
        .scalesTable .midLayer1, .scalesTable .midLayer2, .scalesTable .midLayer3, .scalesTable .midLayer4, .scalesTable .midLayer5, .scalesTable .midLayer6, .scalesTable .midLayer7 {
            font-size: 8px;
  			top: 25px; 
        }
         
    .scalesTable .rowTitle1, .keyChordsTable .rowTitle1{
	    border-right: 1px solid #888888;
    }    
    .scalesTable, .keyChordsTable{
     	border: 2px solid #777777;
    }
    .scalesTable .columnTitle, .keyChordsTable .columnTitle{
	    border-top: 1px solid #888888;
	    border-right: 1px solid #888888;
	    border-bottom: 1px solid #888888;
	    border-left: 1px solid #888888;
    }
    .scalesTable .rowTitle, .keyChordsTable .rowTitle, .scalesTable .tableValue, .keyChordsTable .tableValue {
	    border-right: 1px solid #888888;
	    border-bottom: 1px solid #888888;
	    border-left: 1px solid #888888;
    }
    
}






@media screen and (max-width: 480px) and (min-width: 320px) {
   

   /********* INTRO **********/
   .intro-number-article {
      font-size: 30px;
      line-height: 1.1;
   }
   .intro-article article {
      margin: 20px 0;
      padding: 0;
   }
   .intro-article-info {
      padding: 10px 15px 15px 15px;
   }  
   .intro-article-info ul li a {
      display: block;
   }
   .intro-article #listado .playlist-name {
      width: 100% !important;
   }
   .intro-article #listado .playlist-band {
      width: 70% !important;
      padding-left: 22px;
   }
   .intro-article #listado .icono-capo, .intro-article #listado .icono-noCapo {
      float: right;
      margin-right: 15px;
   }
   .intro-article #listado .youtubeHyperHyperlink {
   	  font-size: 15px;
   }     
   
   

   /*Tablas*/
     .scalesTable, .keyChordsTable {
        font-size: 12px;
    }
    .keyChordsTable .songExamples {
        font-size: 10px;
    }
        .scalesTable .midLayer1, .scalesTable .midLayer2, .scalesTable .midLayer3, .scalesTable .midLayer4, .scalesTable .midLayer5, .scalesTable .midLayer6, .scalesTable .midLayer7 {
            font-size: 8px;
        }
    .scalesTable .rowTitle1, .keyChordsTable .rowTitle1{
	    border-right: 1px solid #888888;
    }    
    .scalesTable, .keyChordsTable{
     	border: 2px solid #777777;
    }
    .scalesTable .columnTitle, .keyChordsTable .columnTitle{
	    border-top: 1px solid #888888;
	    border-right: 1px solid #888888;
	    border-bottom: 1px solid #888888;
	    border-left: 1px solid #888888;
    }
    .scalesTable .rowTitle, .keyChordsTable .rowTitle, .scalesTable .tableValue, .keyChordsTable .tableValue {
	    border-right: 1px solid #888888;
	    border-bottom: 1px solid #888888;
	    border-left: 1px solid #888888;
    }
    .keyChordsTable .rowTitle, .keyChordsTable .rowTitle1{
	    width: 30%;
    }               
}