@import url('https://fonts.googleapis.com/css?family=Inconsolata:400,700|Old+Standard+TT:400,400i,700|Open+Sans+Condensed:300,300i,700|Oswald:200,300,400,500,600,700|Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=greek,latin-ext');

html, body {
  min-height: 100%;
  font-family: 'Roboto', sans-serif;
}

#main {
	width: 1000px;
	margin: 0 auto;
}

#info {
	width: 1000px;
	margin: 17px auto;
}

#usage {
	font-size: 14px; 
	width: 1000px;
	margin: 0 auto;
	background-color: #eee;
	border: 1px solid #ccc;
	color: #333;
	border-radius: 1px;

	padding: 7px;
}

a {
	color: #336;
	font-weight: bold;
	text-decoration: none;
}

table {
  font-family:'Inconsolata';
  font-weight: bold;
  color: #333; /* Lighten up font color */
  min-width: 40%;
  margin: 0 auto;
  border-collapse: collapse;
  border-spacing: 0;
}

td, th {
  border: 1px solid #CCC;
  height: 30px;
  padding: 0 7px;
  text-align: center;
} /* Make cells a bit taller */

th {
  background: #F3F3F3; /* Light grey background */
  font-weight: bold; /* Make sure they're bold */
}

td {
  background: #FAFAFA; /* Lighter grey background */
  //text-align: center; /* Center our text */
}

svg * {
    font-family: 'Old Standard TT', sans-serif;
    font-size: 14px;
}

input {
    font-family: 'Old Standard TT', sans-serif;
    font-size: 16px;
    margin: 1em auto;
    padding: 3px;
    display: block;
    border: 1px solid #999;
    border-radius: 2px;
    border-left: 5px solid #336;

   /*position: fixed;
   bottom: 17px;
   right: 17px;*/
    outline:none;
}

.circ-selected {
	fill: #336;
	fill-opacity: 0.8;
}

.text-selected {
	fill: #fff;
}

.thead-all {
  color: #fff;
  border: 1px solid #333;
}

.fret-1 { stroke-width:4; }

/* position labels */

.pos-label, .pos-highlight
{
	fill-opacity: 0.4;
}

.pos-label-1, .pos-highlight-1
{
	fill: #336;
}

.pos-label-2, .pos-highlight-3
{
	fill: #363;
}

.pos-label-3, .pos-highlight-5
{
	fill: #f63;
}

.pos-label-4, .pos-highlight-7
{
	fill: #c33;
}

.pos-label-5, .pos-highlight-8
{
	fill: #6c6;
}

.pos-label-6, .pos-highlight-10
{
	fill: #66c;
}

.pos-label-7, .pos-highlight-12
{
	fill: #c36;
}

.pos-label-8, .pos-highlight-14
{
	fill: #996;
}

.pos-label-text
{
	fill: #fff;
}

/* chord intervals */

/* tonic */
.circ-int-0 {
	stroke: #000;
	fill: #336;
}
.circ-text-int-0 {
	fill: #fff;
}
.thead-int-0 {
	//stroke: #000;
	//fill: #336;
	background-color: #336;
}

/* minor 2nd */
.circ-int-1 {
	//stroke: #000;
	fill: #bcbc8d;
}
.circ-text-int-1 {
	fill: #000;
}
.thead-int-1 {
	//stroke: #000;
	//fill: #336;
	color: #000;
	background-color: #bcbc8d;
}

/* maj 2nd */
.circ-int-2 {
	stroke: #000;
	fill: #996;
}
.circ-text-int-2 {
	fill: #fff;
}
.thead-int-2 {
	//stroke: #000;
	//fill: #336;
	background-color: #996;
}

/* minor 3rd */
.circ-int-3 {
	//stroke: #000;
	fill: #74a974;
}
.circ-text-int-3 {
	fill: #000;
}
.thead-int-3 {
	//stroke: #000;
	//fill: #336;
	color: #000;
	background-color: #74a974;
}


/* major third */
.circ-int-4 {
	stroke: #000;
	fill: #363;
}
.circ-text-int-4 {
	fill: #fff;
}
.thead-int-4 {
	//stroke: #000;
	//fill: #336;
	background-color: #363;
}

/* perfect 4th */
.circ-int-5 {
	stroke: #000;
	fill: #66c;
}
.circ-text-int-5 {
	fill: #fff;
}
.thead-int-5 {
	//stroke: #000;
	//fill: #336;
	background-color: #66c;
}

/* tritone - augmented 4th/diminished 5th */
.circ-int-6 {
	stroke: #000;
	fill: #eeba1f;
}
.circ-text-int-6 {
	//fill: #fff;
	fill: #66c;
}
.thead-int-6 {
	//stroke: #000;
	//fill: #336;
	color: #66c;
	background-color: #eeba1f;
}

/* perfect 5th */
.circ-int-7 {
	stroke: #000;
	fill: #f63;
}
.circ-text-int-7 {
	fill: #fff;
}
.thead-int-7 {
	//stroke: #000;
	//fill: #336;
	background-color: #f63;
}

/* minor 6th */
.circ-int-8 {
	//stroke: #000;
	fill: #8c8ce0;
}
.circ-text-int-8 {
	//fill: #fff;
	fill: #000;
}
.thead-int-8 {
	//stroke: #000;
	//fill: #336;
	color: #000;
	background-color: #8c8ce0;
}

/* major 6th */
.circ-int-9 {
	//stroke: #000;
	fill: #66c;
}
.circ-text-int-9 {
	fill: #fff;
}
.thead-int-9 {
	//stroke: #000;
	//fill: #336;
	background-color: #66c;
}

/* minor seventh */
.circ-int-10 {
	//stroke: #000;
	fill: #ff8c8c;
}
.circ-text-int-10 {
	//fill: #fff;
	fill: #000;
}
.thead-int-10 {
	//stroke: #000;
	//fill: #336;
	color: #000;
	background-color: #ff8c8c;
}

/* major 7th */
.circ-int-11 {
	stroke: #000;
	fill: #c33;
	fill-opacity: 0.8; 
}
.circ-text-int-11 {
	fill: #fff;
}
.thead-int-11 {
	//stroke: #000;
	//fill: #336;
	background-color: #c33;
}