* {margin:0; padding:0;font-family:Arial, Helvetica, sans-serif;font-size: 16px;  line-height: 1.5;}
html, body {position:relative;margin:0; padding:0;min-width:320px;scroll-padding-top: 70px;}

img {border: 0;}
a {color: blue;}
a:hover {color: #FFA405;}
h1,h2 {
    /*border-bottom:2px solid #3B5998;*/
    border-bottom-width: 2px;
    border-bottom-style: solid;
    color:#444;
    font-weight:bold;
    border-image: linear-gradient(to right, #3B5998, white) 1;
}
h1 {margin-top:20px;padding-top:10px;font-size:26px;margin-bottom: 20px;}
h2 {font-size: 22px;margin-top:5px;margin-bottom:5px;}
h3 {font-size: 16px;color:#003399;margin-top:5px;margin-bottom:5px;}
h1 small {font-size:20px;}

.paddedA {font-size:18px;text-decoration:none;padding:5px;display:inline-block;border:1px solid blue;margin:2px;border-radius:5px;background-color:blue;color:white;}

.clear {clear:both;}  


/* form with combos and selects for inputing notes (ex: chordid) */
.inputnotesform {}
.inputnotesform select {margin:10px;}
.inputnotesform input[type=checkbox] {
    width:20px;
    height:20px;
}
.inputnotesform table {text-align: left;}
.inputnotesform td {padding-right:10px;vertical-align: top;}

#topbar2{
    background-image: linear-gradient(to top, #f5f5f5, white);
    border-bottom:1px solid #eee;
    /*border-top:2px solid #3B5998;*/
    position:fixed;top:0;z-index:1000;min-height:61px;padding-top:0px;padding-bottom:0px;width:100%;display:block;
    box-sizing: border-box;
    padding-right: 290px; /* media adjustable when right col disapears: the right bar width is 336px, but because of the "GO" button the dropdown does not overlap */
}
#logo {padding-top:0px;padding-left:10px;height:55px;float:left;}
#logo a {display:inline-block;font-family:Impact,Charcoal, "DIN Condensed", sans-serif;font-size:38px;text-decoration:none;color:#3B5998;line-height:48px;}
#logo a:first-letter {color:#777;font-size:inherit;font-weight:inherit;font-family: inherit;}
#logo .logounderwriting {color:#777;font-size:8px;padding-top:-10px;margin-top:-5px;}


#breadcrumbs, #breadcrumbs a {text-transform: uppercase;font-size:9px;font-weight:bold;color:#777;}
#breadcrumbs {padding:5px;margin:0 auto;text-align:left;}

footer {
border-top:3px solid #CCC;text-align:left;font-size:10px;width:100%;color:#333;
background-image: linear-gradient(to bottom, #f5f5f5, #fcfcfc , white);
padding-bottom: 80px; /* because of footer sticky ad */
}
#footerinner {padding-right:336px;}

#vertbarright {
    /*position:absolute;*/
    position:fixed;
    top:85px;right:1px;float:right;display:block;z-index:1;margin-left:0px;margin-right:0px;width:336px;padding:0;padding-top:5px;margin-top:0;}
#vertbarleft {position:fixed;top:75px;left:1px;width:162px;z-index:1;padding:0;margin:0;}

.chlink {display:inline-block;}
.chlinkpad {display:inline-block;padding:7px;}

.tagsbox {width:316px;}
.tagsboxheader {width:316px;}
.tagsboxheader li {width:90px;background-color:#F9F9F9;cursor:pointer;height:25px;border-right:1px solid #EEE;display:inline;float:left;list-style:none;text-align:center;color:#444;padding:9px;padding-top:10px;font-size:14px;font-weight:bold;}
.tagsbox_container {overflow-y:auto;font-size:12px;color:#3B5998;font-weight:bold;height:180px;background-color:#F9F9F9;position:relative;top:0px;left:0px;border:3px solid #3B5998;border-right:none;width:313px;padding:10px;}
.tagsbox_container a {color:#555;font-size:12px;font-weight:bold;text-decoration:none;}
.tagsbox_container b {color:#555;font-size:12px;font-weight:normal;text-decoration:none;}

main {display:block;margin-left:170px;margin-right:345px;min-height:630px;padding-top:65px;padding-bottom:10px;padding-left:30px;padding-right:20px;}
main p {margin-top:10px;margin-bottom:10px;}
main ul li {margin-left:25px;margin-top:5px;}
main input {margin-left:10px;}

.maininner {width:100%;margin:0 auto; max-width:1200px;}


.article1 {border:1px solid #CCCCCC;margin-top:5px;padding:10px;max-width:708px;margin-left:auto;margin-right:auto;box-shadow:0 1px 0 0 rgba(0,0,0,.05),0 2px 4px 0 rgba(0,0,0,.06);}

.sharediv {text-align:center;}
.sharedivinner {margin-top:5px;padding-bottom:5px;text-align:center;font-size:16px;font-weight:bold;}

.hrr {margin:0 auto;height:1px;width:70%;border-width:0;color:gray;background-color:gray;}

.divcenter {margin:0 auto;text-align:center;}

#ddheaderfull {display:none;}



.rightbar_img_mod {float:left;margin-right:5px;}


/* select element of scale finder forms */
.scaleselect * {
          font-size:18px;
          margin:2px;
          height:24px;
          padding:2px;
      }
.scaleselect {
  text-align: center;
  font-size:18px;
  margin:2px;
  height:28px;
  padding:2px;
}



/* audio button for playing chords */
.playchord {border: none;background-color:white;background-image: url('/images/snd-play-green-2.png');background-size: 100%; height: 20px; width: 20px; cursor: pointer;}
.playchordlarge {border: none;background-color:white;background-image: url('/images/snd-play-green-2.png');background-size: 100%; height: 50px; width: 50px; cursor: pointer;}

/* for multiple speeds */
.playchordfast {border: none;background: url('/images/snd-play-green-2.png') no-repeat;background-size: 100%; height: 50px; width: 50px; cursor: pointer;}
.playchordfast:before {color:#333;content: "Fast";font-style: italic;font-weight: bold;}
.playchordslow {border: none;background: url('/images/snd-play-green-2.png') no-repeat;background-size: 100%; height: 50px; width: 50px; cursor: pointer;}
.playchordslow:before {color:#333;content: "Slow";font-style: italic;font-weight: bold;}
.playchordstrum {border: none;background: url('/images/snd-play-green-2.png') no-repeat;background-size: 100%; height: 50px; width: 50px; cursor: pointer;}
.playchordstrum:before {color:#333;content: "Strum";font-style: italic;font-weight: bold;}


.autocomplete-input { width:220px;font-size: 14px; padding: 10px; border: 1px solid #CCC; margin-top: 2px; border-radius: 5px; }
.autocomplete-input-large { width:60%; font-size: 14px; padding: 10px; border: 1px solid #CCC;  margin: 20px 0; border-radius: 5px; }

.scaleinfoinput {border:none;padding:12px 15px 15px 15px;color:white;font-weight:normal;font-size:16px;min-height:42px; background-color:#3b5998;cursor:pointer;border-radius:4px;}
.scaleinfoinput:hover {background-color:#3da1d1;}   

#cookiewarning {z-index:50;left: 0;position:fixed;bottom: 0;min-height: 30px;height:auto;width: 100%;background-color:black;color:#CCC;border:10px;padding:20px;overflow:hidden;display:none;font-size:15px;font-weight:bold;}


/* CSS for scales tables */

.scaleinfotable {font-size:12px;width:100%;border-collapse: collapse;}
.scaleinfotable tr {min-height:30px;}
.scaleinfotable th {font-weight:bold;padding:5px;border:1px #AAA solid;background-color:#CCC;min-height:30px;}
.scaleinfotable td {padding:5px;border:1px #AAA solid;min-height:30px;}
.scaleinfotable input[type=submit] {border:none;padding:15px 15px 15px 15px;color:white;font-weight:bold;font-size:14px;min-height:30px; background-color:#0099CC;cursor:pointer;border-radius:4px;}
.scaleinfotable input[type=submit]:hover {border:none;padding:15px 15px 15px 15px;color:white;font-weight:bold;font-size:14px;min-height:30px; background-color:#3da1d1;cursor:pointer;border-radius:4px;}

.tdheader {background-color:#C0C0C0; width:50%; text-align:center;}

.chordlinkdiv {display:inline-block;padding:10px;margin-right:20px;}
.chordlinkdiv a {font-size:18px;}

/* pagination */
.pag_navlink {cursor:pointer;padding:5px;padding-top:13px;border-top:1px solid #CCC;border-bottom:1px solid #CCC;border-right:1px solid #CCC; height:20px;width:30px;text-align:center;float:left;}
.pag_navlink a {text-decoration: none; color:#444;}
.pag_first {border-left:1px solid #CCC;} 
.pag_selected {background-color:#EEE;}

/* search appliance */
.sa_input {margin-left:0;vertical-align:top;width:160px;font-size: 14px; padding-left:10px; height:43px; border: 1px solid #CCC; border-radius: 5px;}
#chordlist {position:absolute;text-align:left;padding-left:10px;background-color:white;display:none;border-radius:5px;margin-left:16px;padding-right:0;width:160px;margin-top:-1px;z-index:10;border:1px solid #CCC;}
#chordlist a {border:none;text-decoration:none;font-weight:bold;font-size:16px;line-height:20px;} 

/* chord pages */
.chordinfobox {/*background-color:#F7F7F7;*/ float:left;padding:0;padding-left:3px;padding-top:3px;margin-right:5px;margin-bottom:7px;text-align:left;width:24%;min-width:152px;min-height:50px;}
.chordinfobox a {font-size:14px;}
.chordbox2 {width:44%;}
.chordboxfull {max-width:1000px;width:100%;}
.newchordinfotable td {vertical-align:top;padding:3px;text-align:center;}

/* chord info table */
.chordinfotable {border-collapse: collapse; border: 1px solid black;width:100%;max-width:100%;}
.chordinfotable td {background-color:#EEE;padding:4px;border-right:1px solid black;border-bottom:1px solid black;white-space: nowrap;width:100px;}
.chordinfotable td:last-child {width:100%;max-width:100%;background-color:#EEE;border-right:none;border-right:none;white-space:normal;}


/* tabular-input-specific */
@media screen and (max-width: 740px) {
    #guitar-fret-input {-moz-transform: rotate(90.0deg);
                -o-transform: rotate(90.0deg);  /* Opera 10.5 */
                -webkit-transform: rotate(90.0deg);  /* Saf3.1+, Chrome */
                filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=-0.083);  /* IE6,IE7 */
                -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=-0.083)";
                transform-origin: 12% 55%;
                -ms-transform-origin: 12% 55%; /* IE 9 */
                -webkit-transform-origin: 12% 55%; /* Safari and Chrome */
                -moz-transform-origin: 12% 55%; /* Firefox */
                -o-transform-origin: 12% 55%; /* Opera */
                }
    #guitar-fret-container {height:530px;width:110px;}                
}

/*guitar fret inputs */ 

#guitar-fret-container {margin:0 auto;text-align:center;}
#guitar-fret-input {width:510px;height:141px;margin:0 auto;}
#guitar-fret-input-inner {float:left;height:141px;width:20px;}

.guitar-fret-input-leftnotes-table td {height:21px;font-weight:bold;font-size:13px;}

.tab_note_choice {font-size:8px;border:0;margin:0;padding:0;width:490px;height:141px;background-image:url(/images/anyscale-full-nodots5.jpg);}
.tab_note_choice tr {border:0;margin:0;padding:0;font-size:10px;vertical-align: middle;}
.tab_note_choice td {font-size:12px; border:0;margin:0;padding:0;text-align:center;width:38px;}
.tab_note_choice tr td:first-child {cursor:pointer;width:8px;text-align:left;font-weight:bold;color:red;}
.tab_note_choice tr td:nth-child(2) {width:12px;text-align:right;}
.tab_note_choice tr td:nth-child(3) {width:43px;}
.tab_note_choice tr td:nth-child(4) {width:42px;}
.tab_note_choice tr td:nth-child(5) {width:41px;}
.tab_note_choice tr td:nth-child(6) {width:39px;}
.tab_note_choice input {vertical-align:middle;height:12px;width:12px;padding:0;margin:0 !important;}


/*piano kb input */
.piano_kb_input_div {color:white;padding-top:45px;height:50px;width:15px;text-align:center;float:left;}
.piano_kb_input_div input {vertical-align:middle;height:10px;width:10px;padding:0;margin:0 !important;}
.piano_kb_input_div2 {padding-top:30px;height:50px;width:30px;text-align:center;float:left;}
.piano_kb_input_div2 input {vertical-align:middle;height:10px;width:10px;padding:0;margin:0 !important;}

/* chordtable */
.chordtable { padding:1px; border-spacing: 1px; font-size: 12px; text-align: left; border-collapse: collapse; width:100%;}
.chordtable tr {border-top: 1px solid white;border-bottom: 1px solid white;/*background-color:#F6F6F6;*/}
.chordtable td {padding:5px; border: 1px solid #EEE;}
.chordtable_td1 {font-weight:bold;width:160px;border:none;}
.chordtable a {font-size:10px;}
.navlink {cursor:pointer;padding:5px;padding-top:13px;border-top:1px solid #CCC;border-bottom:1px solid #CCC;border-right:1px solid #CCC; height:20px;width:30px;text-align:center;float:left;}
.navlink a {text-decoration: none; color:#444;}
.first {border-left:1px solid #CCC;}
.selected {background-color:#EEE;}
/* this is not being used
.rotate90 {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    margin-top:-10px;
    height: 70px;
}
*/

/* completechordtable: used in /chord/ to list all important chords */
.completechordtable {width:100%; border: 1px solid black;border-collapse: collapse;}
.completechordtable th {font-weight:bold;text-align: left;border: 1px solid black;padding:3px;background-color: #EEE;}
.completechordtable td {border: 1px solid black;padding:3px;}
.completechordtable td:first-child {font-weight:bold;background-color: #EEE;}

/* new menus css */
.ddgroup {float:right;z-index:20;margin-top:3px;}

.ddmenu {
    font-size:16px;
    display:inline-block;
    border: none;
    vertical-align: top;
    margin:2px;  
    margin-top:5px;
    background-color: #3b5998;
    color: white;
    border-radius: 4px;
    font-weight:normal;
    padding:3px;
    padding-right:6px;
    padding-left:6px;
    z-index:20;
    height:39px;
}

.ddmenu:hover {background-color: black;cursor:pointer;}
.ddmenuheader {display:block;}

.ddmenu ul {
    z-index:20;
    font-size: 14px;
    line-height: 20px;
    list-style: none;
    display:none;
    margin:0;
    padding-top:5px;
    padding-left:15px;
    padding-right:25px;
    padding-bottom: 5px;
    position:absolute;
    background-color: white;
    margin-left:-10px; /* adjust position because of padding of top tittle of the dd menu */
    margin-top: 5px;
    border: 1px solid gray;
    min-width:200px;
}

.ddmenu ul li {font-size:16px;font-weigth:normal;color:black;background-color: white; list-style: none;margin:0;padding:5px;width:100%;white-space:nowrap;}
.ddmenu ul li::last-child {border-bottom: none; }
.ddmenu ul li ul {margin-left:16px;margin-top:-5px;}
.ddmenu ul li:hover {background-color:#bbb;}
.ddmenu a {color:black;text-decoration: none;font-weight:normal;font-size:16px;line-height:20px;
display: block;
     width: 100%;
     height: 100%;
}
.ddsep {border-bottom: 1px solid gray;background-color:gray;}

/* menu symbol */
.menusymbolbar {
  width: 25px;
  height: 3px;
  background-color: white;
  margin: 6px 0;
}
.menusymbolbar:first-of-type {
  margin-top:10px;
}

/* div for dd title */
.ddmenutitle {font-size:16px;padding-top:8px;margin-bottom:7px;}
.ddmenutitlesearch {font-size:36px;margin-top:-3px;padding-top:0px;margin-bottom:7px;padding-left:4px;padding-right:4px;line-height: 1.1;}


/* format placeholders */
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: gray;
  opacity: 0.5; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: gray;
}

::-ms-input-placeholder { /* Microsoft Edge */ 
  color: gray;
}

/* footer items */
.testbottomitem {float:right;padding:30px 70px 30px 70px;width:15%;}
.testbottomitem hr {width:50%;border:none;border-bottom: 1px solid white;height:0px;margin-bottom:5px;min-width: 80px;}
.testbottomitem b {font-size:16px;font-weight:bold;}
.testbottomitem a {color:#333;font-size:16px;text-decoration:none;line-height:48px;padding-top:16px;padding-bottom:16px;}

/* chord search appliance */
#sa_select {font-size:10px;width:70px;height:45px;padding-left:2px;padding-right:2px;}
#searchappbutton {height:44px;margin-left:0px;padding-top:11px;}
#searchcontainer {text-align:center;margin:0 auto;width:320px;}


/* ads */
.adcenterouter {width:100%;text-align:center;margin-top:40px;margin-bottom:30px;height:150px;}
.adcenterinner {display:inline-block;margin:0 auto;height:91px;}


/* share buttons */
.resp-sharing-button__link,
.resp-sharing-button__icon {
  display: inline-block
}

.resp-sharing-button__link {
  text-decoration: none;
  color: #fff;
  margin: 0.5em
}

.resp-sharing-button {
  border-radius: 5px;
  transition: 25ms ease-out;
  padding: 0.5em 0.75em;
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif
}

.resp-sharing-button__icon svg {
  width: 1em;
  height: 1em;
  margin-right: 0.4em;
  vertical-align: top
}

.resp-sharing-button--small svg {
  margin: 0;
  vertical-align: middle
}

/* Non solid icons get a stroke */
.resp-sharing-button__icon {
  stroke: #fff;
  fill: none
}

/* Solid icons get a fill */
.resp-sharing-button__icon--solid,
.resp-sharing-button__icon--solidcircle {
  fill: #fff;
  stroke: none
}

.resp-sharing-button--twitter {
  background-color: #55acee
}

.resp-sharing-button--twitter:hover {
  background-color: #2795e9
}

.resp-sharing-button--pinterest {
  background-color: #bd081c
}

.resp-sharing-button--pinterest:hover {
  background-color: #8c0615
}

.resp-sharing-button--facebook {
  background-color: #3b5998
}

.resp-sharing-button--facebook:hover {
  background-color: #2d4373
}

.resp-sharing-button--tumblr {
  background-color: #35465C
}

.resp-sharing-button--tumblr:hover {
  background-color: #222d3c
}

.resp-sharing-button--facebook {
  background-color: #3b5998;
  border-color: #3b5998;
}

.resp-sharing-button--facebook:hover,
.resp-sharing-button--facebook:active {
  background-color: #2d4373;
  border-color: #2d4373;
}

.resp-sharing-button--twitter {
  background-color: #55acee;
  border-color: #55acee;
}

.resp-sharing-button--twitter:hover,
.resp-sharing-button--twitter:active {
  background-color: #2795e9;
  border-color: #2795e9;
}

.resp-sharing-button--tumblr {
  background-color: #35465C;
  border-color: #35465C;
}

.resp-sharing-button--tumblr:hover,
.resp-sharing-button--tumblr:active {
  background-color: #222d3c;
  border-color: #222d3c;
}



.resp-sharing-button--pinterest {
  background-color: #bd081c;
  border-color: #bd081c;
}

.resp-sharing-button--pinterest:hover,
.resp-sharing-button--pinterest:active {
  background-color: #8c0615;
  border-color: #8c0615;
}


#div-insticator-ad-1, #div-insticator-ad-2, #div-insticator-ad-3, #div-insticator-ad-4, #div-insticator-ad-5, #div-insticator-ad-6, #div-insticator-ad-7 {
margin-top:20px!important;
margin-bottom:20px!important;
}

#div-insticator-ad-8 {
margin-top:20px!important;
}

.fretcanvasbutton, .fretcanvasbuttonactive {
    display: table-cell;
    vertical-align: middle;
    color:white;
    cursor:pointer;
    border-radius:4px;
    border-color: #3399ff; 
    height: 15vh;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 16px;
    min-width:40px;
    max-width:120px;
    max-height:40px;
    margin-bottom: 8px;
}
.fretcanvasbutton {background-color:#0099CC;}
.fretcanvasbutton:hover {background-color:#3da1d1;}
.fretcanvasbuttonactive {background-color:#009933;}
.fretcanvasbuttonactive:hover {background-color:#33cc33;} 
.fretbuttonspace {visibility:hidden;border:none;padding:12px 12px 12px 12px;color:white;font-size:14px;min-height:42px;cursor:default;background-color:white;}
.fretcanvasbuttonhalf {
    width:8vw;
    min-width:20px;
    max-width:40px;
}


/* adjustments when screen falls bellow X px */
@media screen and (max-width: 1260px) {
/* right bar disapears and related adjustments */
#vertbarright {display:none;} /* hide right bar */
#topbar2 {padding-right:0px;} /* adjust right spacing when right bar disappears */
main {margin-right:0;} /* adjust right margin */
#footerinner {padding-right:0px;} /* adjust right spacing when right bar disappears */
}

/* adjustements when screen falls bellow X px */
@media screen and (max-width: 970px) {
#logo a {font-size:30px;line-height:55px;}
#logo .logounderwriting {display:none;height:0;width:0;}
#ddheadersearch {display:none;}
}

@media screen and (max-width: 852px) {
#logo a {display:none;}
}

@media screen and (max-width: 667px) {
#ddheaderscales {display:none;}
#ddheaderchords {display:none;}
#ddheaderother {display:none;}
#ddheaderfull {display:block;position:fixed; left:0;} 
}

@media screen and (max-width: 935px) {
.adcenterinner {height:250px;}
.adcenterouter {height:250px;}
} 


@media screen and (max-width: 370px) {
nav #searchcontainer {display:none;} /* without nav this also hides the search containers not in the header */
}

@media screen and (max-width: 790px) { 
#vertbarleft {display:none;} 
.adcenterinner {height:250px;}
.adcenterouter {height:250px;}
main {margin-left:0;padding-left: 10px;padding-right: 10px;} 
#toprightad {display:none;}
.toprightad1 {display:none;}
#downrightad {display:none;}
.downrightad1 {display:none;}

}


@media print {
main {margin-left:0; margin-right:0;}
#vertbarleft {display:none;} 
#vertbarright {display:none;}
}