body {/* for media type width>480 */
   background:#C0DEED url(/images/hex_twitter_bg.png) no-repeat fixed 0 0;
}
 
body {
	font-family: Helvetica,arial,sans-serif;
}

a {
	color: #304a6e;
}
.container {/* for media type width<=480 */
	width: 620px;
}
 
.container h1 {
	margin: 0px;
	font-size: 1.5em;
	margin-top: 4px;
	text-transform: uppercase;
}

.container {
	background: #FFFFFF;
	margin: 1em auto;
	position: relative;
	padding: 10px 15px 10px 15px;
	margin: 10px auto;
	border-left: 1px solid #506a8e;
	border-top: 1px solid #506a8e;
}

.videos {
	width: 140px;
	background-color: #BBBBBB;
	clear: right;
	float: right;

	font-size: 13px;
	margin: 5px;
}
.videos > a {
	color: #FFFFFF;
	text-decoration: none;
}
.videos > a > div {
	background-color: #000000;	
	padding: 4px;
	margin-bottom: 5px;
	
}
.videos ul {
	list-style-type: none;
	line-height: 1;
	margin: 0;
	padding: 0;
	padding-left: 10px;
}
.videos ul li {
	position: relative;
	margin: 3px;
	margin-top: 10px;
}
.videos ul li a {
	text-decoration: none;
}
.videos ul li span {
	position: absolute;
	width: 100px;
	font-size: 12px;
	top: 50;
	left: -6;
	padding: 3px;
	color: #FFFFFF;
	background-color: #000000;	
}

.social {
	width: 140px;
	clear: right;
	float: right;

	font-size: 12px;
	margin: 5px;
}
.social ul {
	line-height: 1;
	margin: 0;
	padding: 0;
}

.logo {
	position: absolute;
	top: -10;
	left: -17;
}

.motto {
	font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2","Hoefler Text",Georgia,Times,serif;
	margin-left: 220px;
	color: #99AABB;
	font-style: italic;
	font-size: 16px;
}

nav {
	width: 150px;
	float: right;
}
 
nav ul {
	list-style-type: none;
	font-size: 0.875em;
	line-height: 1;
}

nav.news-on li.nav-news {
	background-color: #2f5e87;
}
nav.howto-on li.nav-howto {
	background-color: #2f5e87;
}
nav.scales-on li.nav-scales {
	background-color: #2f5e87;
}
nav.recordings-on li.nav-recordings {
	background-color: #2f5e87;
}
nav.support-on li.nav-support {
	background-color: #2f5e87;
}

img.howto {
	border: 5px solid #BBBBBB;
	margin: 10px;
}

nav a {
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 2px;
	display: block;
	padding: 0.35em 0.3em 0.2em 0.3em;
	line-height: 1;
}

nav a, nav a:visited {
	font-weight: 900;
}
 	
/* specific to screen: */
nav {
	top: 255px;
	bottom: 20px;
}
nav ul {
	margin: 0px;
	padding: 0px;
}
nav li {
	margin: 5px;
	padding: 5px;
	background-color: #333333;
}
nav a {
	color: #CCCCCC;
}
nav a:hover {
	color: #FFFFFF;
}
 
.share {
	float: right;
	padding-top: 5px;
}
 
 
h3 {
	margin: .6em 0 .5em 0;
	padding-top: 10px;
	font-size: 1.0em;
	text-transform: uppercase;
}

h3 a {
	text-decoration: none;
}

.intro {
	font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2","Hoefler Text",Georgia,Times,serif;
	color:#778899;
	font-size: 0.9em;
}

.intro table {
	margin: 0.3em 1.0em;
	font-size: 0.75em;
}
.intro table td {
	width: 80px;
}
.date {
	display: none;
}
.showdate .date {
	display: block;
	position: absolute;
	background-color: #FFFFFF;
	color: #96bedc;
	left: -60px;
	padding: 5px;
	text-align: center;
	text-transform: uppercase;
	font-size: 0.9em;
	font-weight: bold;
	width: 60px;
	border-left: 1px solid #506a8e;
	border-top: 1px solid #506a8e;
}


.article {
   /*margin: 1.5em 3em 1.5em 0;*/
   width: 420px;
}
.article h3 a {
	border-bottom: 2px dotted #96bedc;
}
a img {
	border: none;
}

.copy {
	font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2","Hoefler Text",Georgia,Times,serif;
	margin-left: 1.0em;
	margin-bottom: 1.0em;
	margin-top: 0.8em;
}
.copy embed {
	margin-top: 0.5em;
}
.copy li {
	margin: 0.4em 0;
}
 
.scale {
	position: relative;
	width: 420;
	height: 201;
	background-image: url(/images/scale.png);
	background-repeat: no-repeat;
	font-size: 0.8em;
	margin-bottom: 13px;
}
 

.scale div.key {
	position: absolute;
	color: #dbe5f0;
	width: 60px;
	height: 62px;
	text-align: center;
}
 
.scale div.key.root {
	color: #314a6e;
}
.scale div.key.border {
	color: #b0c5df;
}
 
.scale div div.note-num {
	font-size: 28px;
	font-weight: bold;
}
.scale div div.note-label {
	font-size: 11.5px;
}
 
.scale div.X5 { left: 21px; top: 121px; }
.scale div.X7 { left: 54px; top: 36px; }
.scale div.Y1 { left: 85px; top: 121px; }
.scale div.Y3 { left: 117px; top: 36px; }
.scale div.Y4 { left: 149px; top: 121px; }
.scale div.YT { left: 180px; top: 36px; }
.scale div.Y5 { left: 211px; top: 121px; }
.scale div.Y7 { left: 243px; top: 36px; }
.scale div.Z1 { left: 274px; top: 121px; }
.scale div.Z3 { left: 308px; top: 36px; }
.scale div.Z4 { left: 339px; top: 121px; }

.footer { font-size: 0.7em;}