/* CONTENT */
#chords .pContent .wrapper { width:68.5em; font-size:.9em; `padding-bottom:40px; }

/*--------------
	COLUMN 1
----------------*/
#col1 { float:left; width:50em; padding-left:30px; }

/* NAME */
#name { float:left; margin: 1em 0; }
#name h2, #name h3 { margin:0 0 10px; }
#name h2 em { font-size:.6em; font-style:normal; font-weight:bold; line-height:0.4em; }
#name h3 { font-size:15px; font-weight:normal; color:#888; }

/* VOICINGS */
#voices { display: flex; gap:16px; justify-content: space-between; }
#voices .voice { position:relative; margin:0 0 3em; }
#voices .voice img { border:1px solid #F0E2DD; border-radius: 8px; }

#frmChordSearch {margin-bottom: 1.5rem;}
.pgChords #voices .col2 { margin-top:-202px; }

.pgChordFinder .pContent .wrapper { width:64.5em !important; }
.pgChordFinder h5 { margin-bottom:2rem; font-size: 1.2rem; }
.pgChordFinder #voices { padding:32px 16px; width:auto; margin-bottom: 1em; margin-top:2rem; border-top: 2px solid #F0E2DD; }
.pgChordFinder #voices .col1 {position:relative; margin:0 auto; flex-grow: 1; }
.pgChordFinder #voices h4 { padding-bottom:20px; }
.pgChordFinder #voices h4 em { font-size:.7em; }
.pgChordFinder #voices .col2 {  width:112px; margin-top:0; padding-top:0; padding-left: 60px; }
.pgChordFinder #voices .col3 { width:212px; margin:0; padding:0; }
.pgChordFinder #voices li { margin:0 0 1em 1em; list-style:disc; font-size:0.9rem; }
.pgChordFinder #chordPhoto { position:relative; padding:5px; border:1px solid #d4d4d4; background-color:#fff; height:150px; width: 200px; }
.pgChordFinder #chordPhoto span { position:absolute; top:35%; left:25%; width:50%; color:#d4d4d4; text-align:center; }
.pgChordFinder .chordFinderResults { padding:30px 16px 16px 16px; min-height:260px;  border-radius: 16px; background-color: #fff; box-shadow: 0px 1px 0px 0px #F0E2DD; }

#listDiagrams { padding-top:25px; padding-left:30px; width:635px; }
#listDiagrams .dia { position:relative; float:left; margin-right:25px; padding-bottom:60px; }
#listDiagrams .diaL b,#listDiagrams .diaM b,#listDiagrams .diaS b { cursor:default; }
#listDiagrams .matched { background: url(/img/share/chords/finder/chordFinderMatchArrows.png) no-repeat 35px 100%; margin-top:-25px; padding-bottom:75px; }
#listDiagrams .msg { width:200px; }

#chordFinder { margin-bottom:10px !important; }
.msgChordFinder { margin:0 auto; text-align:center; }
.matchedPhoto { position:absolute; top:-225px; right:-12px; padding:12px 15px 35px; background:url(/img/share/chords/finder/photoBalloon.png) no-repeat 0 0; z-index:50; }
.matchedPhoto .close { position:absolute; top:-4px; right:-4px; padding:4px; border-radius: 100%; background: #fff; }
.matchedPhoto .close:hover { background-color: #aaa; }
.matchedImg { position:absolute; top:-32px; right:45%; }
.matchedButton { position:absolute; bottom:10px; left:25%; background: url(/img/share/chords/finder/chordFinderMatchArrows.png) no-repeat -563px 50%; }

#chordFound { padding-left:30px; padding-bottom:20px; }
#chordFound strong { font-weight: bold; }
#chordFound a { text-decoration: none; }
.clearFretboard { position:relative; top:20px; clear:left; display:block; padding:4px; text-align:center; font-size:14px; }

/* Placeholder for printing diagrams, don't display in screen view. */
#voices .voice img.print { position:absolute; top:0; left:0; float:none; border:none; }

/*----------------
	COLUMN 2
------------------*/
#col2 { float:right; width:14.2em; padding-right:26px; }

/* CHORDS */
.chordsMenu	{ margin:5px;}
.chordsMenu h4 { text-align: center; font-weight: 400; }
.chordsMenuCase	{ position: relative; display: flex; flex-direction: row; align-items: stretch; justify-content: space-between; gap: 8px; }

/* MAYJORS  */
#majors { display: flex; flex-direction: column; justify-content:space-between; flex-shrink: 0; gap: 8px; }
#majors li { display: flex; align-items: center; }
#majors li a { display: flex;
		align-items: center;
		justify-content: center;
		padding: 16px;
		color: #666;
		font-size: 2rem;
		width: 24px;
		height: 24px;
		border-radius: 999px;
		background-color: #CFDACF; }
#majors li a:hover { background-color:#E7F3EA; }
#majors li a.sel   { background-color: #333; border: 1px solid #A6AEA7; color: #fff; }

/* CHORD TYPES */
#types,#typeA,#typeB,#typeC,#typeD,#typeE,#typeF,#typeG 
{ height: 540px; margin-top: 0; background-color: #CFD9D1; overflow: auto; border-radius: 8px; flex-grow: 1; }
#types li a,.types li a { display:block; padding:10px 10px; text-decoration:none; color:#666;
						  border-bottom:1pt solid #A6AEA7;}
#types li a:hover,.types li a:hover { background-color:#E7F3EA; }
#types li a.sel,.types li a.sel     { background-color:#fff; color:#333; }
.types { display:none; }


/*------------------------------------
	ADDING CHORDS - (song edit)
--------------------------------------*/
#addChordsModule { margin-bottom: 2rem; position:relative; overflow: hidden; }

#addChordsModule small.saveIndicator { position:absolute; bottom:-17px; left:-1px; display:none; width:100%; text-align:center; font-size:10px; color:#af0000; }

#addChordsModule #majors { float:left; margin:0; width:33px; height:181px; overflow:hidden; border-radius: 4px 0px 0px 4px; gap: 0;}
#addChordsModule #majors li { height:25px; margin:0 0 1px; }
#addChordsModule #majors li:first-child a { border-top:none; border-bottom:none; }
#addChordsModule #majors li a { padding:0px; font-size:12px; line-height:12px;}
#addChordsModule #majors li a.sel { }

#addChordsModule #types { float:left;width:86px; height:180px; overflow:auto; border-radius: 8px; }
#addChordsModule #types ul { right:0; top:0; display:none; height:auto; width:100%; overflow-y:visible; }
#addChordsModule #types ul#typeA { display:block; }
#addChordsModule #types li { }
#addChordsModule #types li:first-child a { border-top:none; }
#addChordsModule #types li a       { font-size:10px; line-height:7px; padding:6px; }

#addChordsModule #diagrams { float:right; overflow:hidden; width:132px; height:182px; background-color:#fff; border-radius: 0px 4px 4px 0px }
#addChordsModule #diagrams h6 { margin:0; padding:5px 0 5px 7px; font-size:12px; font-weight:bold; }
#addChordsModule #diagrams div.wrap { clear:right; overflow:auto; overflow-x:hidden; height:155px; }

#addChordsModule #diagrams div.chord { float:left; clear:left; position:relative; padding:15px 0 25px 25px; }
#addChordsModule #diagrams div.chord:first-child { padding-top:15px; }
#addChordsModule #diagrams div.chord:last-child  { padding-bottom:33px; }

#addChordsModule #diagrams strong.chordSymbol { position:relative; left:-11px; display:block; width:80px; margin:0 0 14px; font-size:14px; font-weight:bold; text-align:center; }
#addChordsModule #diagrams a.action { position:absolute; bottom:64px; right:3px; }
#addChordsModule #diagrams div.chord:first-child a.action { bottom:64px; }

#addChordsModule #formulas { position:absolute; bottom:0; right:0; }