/* Layout */
body {margin:0;padding:0;border:0;width:100%;min-width:600px;}
.mainwrapper {width: 1050px;margin: 0 auto;}
#header {position:absolute;	width:1050px;top:0;height: 122px;}
.colmask {position:relative;clear:both;float:left;width:100%;overflow:hidden;}
.colright,.colmid,.colleft{float:left;width:100%;position:relative;}
.col1,.col2,.col3{float:left;position:relative;padding:1em 0 1em 0;overflow:hidden;}
.threecol{margin-top:122px;}
.threecol .colmid{right:23%;} /* From right to left side of col3 */
.threecol .colleft{right:54%;} /* From left side of col3 to left side of col1 (middle column) */
.threecol .col1 {width:50%;left:102%;}
.threecol .col2 {width:19%;left:29%;}
.threecol .col3 {width:19%;left:87%;}
#footer{clear:both;width:100%;text-align: center;}

/* Layout Corners*/
#header{border-radius: 20px 20px 0 0;}
#footer{border-radius: 0 0 20px 20px;}

/* Colors */
body{background:#cde;}
a{color:#369;}
a:hover{color:#47a;}
#header a:hover{color:#fff; background:#47d;}
#header{background:#fff url('../images/glwlogo.gif') no-repeat 15px 5px;}
.threecol, .threecol .colleft{background:#eee;}
.threecol .colmid{background:#fff;}
#footer{background:#005;color:#aaa;}
.col2 #mainmenu li a{color:#037;}
.col2 #mainmenu li a:hover,.col2 #mainmenu li:hover{background:#ddd;color:#333;}
#header ul{background:#005;color:#fff;}
#header ul li a {color:#fff;}
#header ul li:hover{background:#47d;}
#header ul li a:hover{color:#fff;}
#header ul li a.active,#header ul li a.active:hover{background:#000;color:#fff;}
#header a {text-decoration:none;}
h1,h2,h3,h4,h5{color: #5f5f5f;}
h1 span, h2 span, h3 span, h4 span, h5 span,.blocktitle span {color: #000;}
.bordered, .outerborder{background: #ccc;}
.innerborder{background: #fff;}
.blocktitle {color: #5f5f5f;}
.inset-left, .inset-right {color: #333;}
.inset-left-title, .inset-right-title{background: #fff;color: #000;}
.outlinedtitle {background: #fff;color: #000;}
.outlined {background: #eee;color: #000;}
.headline h1 {background: #fff;}
pre{background: #eee;color: #555;}
.yellownotice{background: #ffd;border-bottom: 1px solid #e4e4d5;border-right: 1px solid #e4e4d5;color: #e1b42f;}
.bluenotice{background: #ddf;border-bottom: 1px solid #c7cdda;border-right: 1px solid #c7cdda;color: #6187b3;}
.rednotice{background: #fdf;border-bottom: 1px solid #f8c9bb;border-right: 1px solid #f8c9bb;color: #d0583f;}
.greennotice{background: #dfd;border-bottom: 1px solid #c1cec1;border-right: 1px solid #c1cec1;color: #6cb656;}
.tooltip:hover{color:#f00;}

/* Menu Styles */
.col2 #mainmenu {margin: 0;padding: 0;}
.col2 #mainmenu li{list-style: none;border-bottom: 1px dotted #000;font-family: Helvetica, Arial, sans-serif;}
.col2 #mainmenu li a {display: block;padding: 4px 0 4px 20px;font-size: 90%;font-weight: normal;text-decoration: none;background: transparent url('../images/arrow_blue.gif') no-repeat scroll 8px 7px}
.col2 #mainmenu li a:hover {background: transparent url('../images/arrow_black.gif') no-repeat scroll 8px 7px;}
.col2 #mainmenu li a span em {display: block;font-size: 80%;font-style: normal;font-weight: normal;}
.col2 #mainmenu li ul {left:-999em;display:none;}
#header h1 {height: 54px;}
#header ul {font-family: Bebas,sans-serif;border-top: 1px solid #000;border-bottom: 1px solid #000;clear:left;float:left;width:100%;list-style:none;margin:0;padding:0;}
#header ul li {display:inline;list-style:none;margin:0;}
#header ul li a {display:block;float:left;padding:10px 10px;text-align:center;text-decoration:none;position:relative;left:15px;line-height:1.3em;}
#header ul li a.active,#header ul li a.active:hover {font-weight:bold;}
#header ul li a span {display:block;}

/* Index List Styles */
#indexlist ul {list-style: none;margin: 0;padding: 0;border: none;}
#indexlist li {border-bottom: 1px dotted #aaa;margin: 0;}
#indexlist li a {display: block;padding: 5px 5px 5px 0.5em;border-left: 10px solid #fff;border-right: 10px solid #fff;text-decoration: none;width: 100%;}
html>body #indexlist li a { width: auto; }
#indexlist li a:hover{border-left: 10px solid #1c64d1;border-right: 10px solid #5ba3e0;background-color: #2586d7;color: #fff;}

/* Fonts */
@font-face {font-family: 'Bebas';src: url('../type/bebasfnt.eot');src: local('Bebas Regular'), local('Bebas'), url('../type/bebasfnt.woff') format('woff'), url('../type/bebasfnt.ttf') format('truetype'), url('../type/bebasfnt.svg#Bebas') format('svg');}
@font-face {font-family: 'ScriptFont';src: url('../type/HoneyScript-Light.eot');src: local('ScriptFont'), url('../type/HoneyScript-Light.woff') format('woff'), url('../type/HoneyScript-Light.ttf') format('truetype'), url('../type/HoneyScript-Light.svg#HoneyScript-Light') format('svg');}

/* Block Styles */
a:hover {text-decoration:none;}
h1, h2, h3, h4, h5 {font-family: Bebas,sans-serif;font-weight: normal;text-transform: uppercase;margin:.8em 0 .2em 0;padding:0;}
h1{font-size:175%;}
h2{font-size:160%;}
h3{font-size:145%;}
h4{font-size:130%;}
h5{font-size:115%;}
p {margin:.4em 0 .8em 0;padding:0;}
img {margin:10px 0 5px;}
.bordered{padding: 10px;}
.outerborder{margin: 15px 25px 15px 0;padding: 10px;border-radius:20px;}
#header h1,#header h2{padding:25px 100px 0;margin:0;}
#header h1 span.script {font-family: ScriptFont, serif;text-transform: none;top: -10px;}
#footer {font-family: sans-serif; padding: 10px 0;}
.outerborder {width: 96%;} /* Full width for middle */
.fullwidth {width: 90%;} /* full width for sidebar */
.innerborder {padding: 15px;border-radius:15px;}
.centertext, .center{text-align:center;}
.right {float:right;}
.left {float:left;}
.innerborder .blockthumbnail {float: left;margin: 0 15px 5px 0;padding: 5px;position: relative;}
.blocktitle {display: block;font-size: 120%;font-weight: bold;font-family: Bebas,sans-serif;border-bottom: 1px dotted #333;padding-bottom: 5px;margin-bottom: 5px;}
.inset-left, .inset-right {border: 1px solid #E5E5E5;display: block;font-size: 100%;font-style: italic;padding: 12px 8px 8px;margin-top: 15px;margin-bottom: 20px;position: relative;text-align: center;width: 40%;}
.inset-left {float: left;margin-right: 20px;}
.inset-right {float: right;margin-left: 20px;}
.inset-left-title, .inset-right-title{font-family: Bebas,sans-serif;display: block;font-weight: bold;font-style: normal;left: 10px;padding: 3px 8px;position: absolute;top: -12px;}
.outlinedtitle {font-family: Bebas,sans-serif;display: block;left: 10px;top: -12px;position: absolute;padding: 0px 8px;font-weight: bold;border: 1px dotted #ccc;}
.outlined {display: block;border: 1px solid #ccc;font-size: 100%;padding: 12px 8px 8px;margin-top: 15px;margin-bottom: 20px;position: relative;}
.yellownotice, .bluenotice, .rednotice, .greennotice {display: block;margin: 15px 0;padding: 10px;border-radius:15px;}
pre {border: 1px solid #ddd;overflow: auto;padding: 10px;}
.headline {border-bottom: 1px dotted #aaa;margin: 15px 0;height: 35px;}
.headline a {text-decoration:none; color:#5f5f5f;}
.headline h1 {line-height: 1.1em;display: block;float: left;margin: -3px 0 -1px;padding-bottom: 6px;padding-right: 10px;}
.testimonial_signature {display:block;font-family:ScriptFont,serif;margin:20px 25px 0;font-size:200%;text-align:right;}
.tooltip{cursor: help;}
.video{text-align:center;} /* For Videos */

/* Tables */
.toprow {background-color:#E5E5E5; font-weight:bold;}
.shaded {background-color:#F5F5F5;}

/* Fonts */
.red {color:red;}
.bold {font-weight:bold;}

/* Fretboard Diagrams */
.fretboard {width:601px; position:relative; display:block; left:0px; height:160px; top:22px;}
.note12-0  {float:left; position: absolute; left:-12px;}
.note12-1  {float:left; position: absolute; left:33.68px;}
.note12-2  {float:left; position: absolute; left:99.12px;}
.note12-3  {float:left; position: absolute; left:160.88px;}
.note12-4  {float:left; position: absolute; left:219.15px;}
.note12-5  {float:left; position: absolute; left:274.19px;}
.note12-6  {float:left; position: absolute; left:326px;}
.note12-7  {float:left; position: absolute; left:375px;}
.note12-8  {float:left; position: absolute; left:422px;}
.note12-9  {float:left; position: absolute; left:465px;}
.note12-10 {float:left; position: absolute; left:506px;}
.note12-11 {float:left; position: absolute; left:545px;}
.note12-12 {float:left; position: absolute; left:582px;}
.fret12-0  {float:left; position: absolute; left:0px;}
.fret12-1  {float:left; position: absolute; left:67.36px;}
.fret12-2  {float:left; position: absolute; left:130.88px;}
.fret12-3  {float:left; position: absolute; left:190.88px;}
.fret12-4  {float:left; position: absolute; left:247.42px;}
.fret12-5  {float:left; position: absolute; left:300.96px;}
.fret12-6  {float:left; position: absolute; left:351.52px;}
.fret12-7  {float:left; position: absolute; left:399.2px;}
.fret12-8  {float:left; position: absolute; left:444px;}
.fret12-9  {float:left; position: absolute; left:486.56px;}
.fret12-10 {float:left; position: absolute; left:526.56px;}
.fret12-11 {float:left; position: absolute; left:564.32px;}
.fret12-12 {float:left; position: absolute; left:600px;}
.string1 {top:0;}
.string2 {top:25px;}
.string3 {top:50px;}
.string4 {top:75px;}
.string5 {top:100px;}
.string6 {top:125px;}
.fretnumber {top:155px; color:#888;}
.fretmarker {top:62.5px;}
.fretmarker12-1 {top:35px;}
.fretmarker12-2 {top:90px;}
.horizontalline {float:left; width:100%; position:absolute; font-size:1px; height:1px; background-color:#888; left:0;}
.verticalline {width:1px; height:125px; background-color:#888; font-size:1px;}
.verticalline-thick {width:5px;}
.circle-container {position:relative;}
.fretboard-wrapper {position:relative; left:40px;}

/* Shapes */
/*.circle {text-align: center; border-radius: 9000em; -webkit-border-radius: 9000em; -moz-border-radius: 9000em; font: normal normal bold 4em sans-serif; color: #CCC;}*/

.circle { background-color: #000; border-radius: 11px 11px 11px 11px; color: #FFF; font: bold 1em sans-serif; 
          height: 22px; left: -11px; position: relative; text-align: center; top: 11px; width: 22px; z-index:2;}
.widecircle {width: 50px; left:-25px;}	
.accidentalcircle {width: 34px; left:-17px;}
.rootcolor {background-color: #f00;}
.graycircle {background-color:#ccc; z-index:0;}

/* Chords */
.chordpattern {width:126px; position:relative; display:block; left:0px; height:147px; top:22px;}
.chordstring6 {float;left; position:absolute; left:0px;}
.chordstring5 {float;left; position:absolute; left:25px;}
.chordstring4 {float;left; position:absolute; left:50px;}
.chordstring3 {float;left; position:absolute; left:75px;}
.chordstring2 {float;left; position:absolute; left:100px;}
.chordstring1 {float;left; position:absolute; left:125px;}
.chordfret0 {top:0px;}
.chordfret1 {top:35px;}
.chordfret2 {top:70px;}
.chordfret3 {top:105px;}
.chordfret4 {top:140px;}
.chordhorizontalline {float:left; width:100%; position:absolute; font-size:1px; height:1px; background-color:black; left:0;}
.chordverticalline {width:1px; height:140px; background-color:#000; font-size:1px;}
.chord-wrapper {position:relative; left:15px;}
.chord-note-fret0 {top:-15px;}
.chord-note-fret1 {top:17.5px;}
.chord-note-fret2 {top:52.5px;}
.chord-note-fret3 {top:87.5px;}
.chord-note-fret4 {top:122.5px;}