body {
	margin:auto;
	padding-bottom:5px;
	width:900px;
	background:#eee;
	font-family:Georgia, serif;
}

header, footer, nav, section, article, aside { display:block; } /* HTML5 */

/* ********** */

p { margin:0; line-height:1.2em; }
p + p { margin-top:0.6em; }

/* ********** */

:focus { outline:thin inset #C00; outline-offset:1px; }

section a,
footer a { color:#F66; }

section a:hover, active a:focus,
footer a:hover, footer a:focus { color:#F99; }

section a:active,
footer a:active { color:#C00; }

a img { border:0; }

/* ********** */

a.feed::after { padding:0 0 0 0.2em; content:url(images/feed.png); }

/* ********** */

dt {
	margin:0 0 0.1em 0;
	padding:0 0 0.1em 0.2em;
	border-bottom:thin solid #fcc;
	border-left:thin solid #fcc;
	border-bottom-left-radius:5px;
	color:#666;
	
	-moz-border-radius-bottomleft:5px;
}

dd + dt { margin-top:0.2em; }

dd { margin-left:1em; }

/* Main body
******************************************* */

body > header {
	margin:0;
	width:900px;
}

body > header h1 {
	margin:0;
	padding:0;
	background:url(images/logo_bg.png) center no-repeat;
}

body > header h1 img { display:block; }

/* ********** */

section {
	margin:5px 0;
	padding:5px;
	background:white;
	border:thin solid #9cf;
}

section h1 {
	margin:0 0 0.5em 0;
	padding:0 0 0.1em 0;
	border-bottom:thin solid #9cf;
	font-size:xx-large;
	text-align:center;
	color:#666;
	white-space:nowrap;
	overflow:hidden;
	overflow-style:marquee-line;
}

section h2 {
	margin:0.8em 0 0.4em 0;
	padding:0.1em 0 0.1em 0.2em;
	border-bottom:thin solid #f99;
	border-left:thin solid #f99;
	border-bottom-left-radius:5px;
	font-size:x-large;
	color:#666;
	
	-moz-border-radius-bottomleft:5px;
}

section h3 {
	margin:0.8em 0 0.4em 0;
	padding:0.1em 0 0.1em 0.2em;
	border-bottom:thin solid #f99;
	border-left:thin solid #f99;
	border-bottom-left-radius:5px;
	font-size:large;
	font-weight:normal;
	color:#666;
	
	-moz-border-radius-bottomleft:5px;
}

/* ********** */

section h1 small::before,
section h2 small::before,
section h3 small::before {
	content:"(";
}

section h1 small::after,
section h2 small::after,
section h3 small::after {
	content:")";
}

/* ********** */

article {
	position:relative;
	margin:1em 0 0 0;
	padding:5px;
	border:thin solid #9cf;
	border-radius:5px;
	
	-moz-border-radius:5px;
}

article h1 {
	font-size:large;
	font-weight:normal;
}

article time[pubdate] {
	position:absolute;
	top:5px;
	right:5px;
	padding:2px;
	font-size:medium;
	background:#9cf;
	color:black;
	
	background:-moz-linear-gradient(top, #def, #9cf);
	-moz-border-radius:3px;
}

/* ********** */

section aside {
	padding:5px;
	border:thin solid #f99;
	border-radius:5px;
	
	-moz-border-radius:5px;
}

aside > h1 {
	font-size:medium;
	font-variant:small-caps;
	border-color:#f99;
}

/* ********** */

footer {
	margin:0;
	padding:5px;
	background:white;
	border:thin solid #9cf;
	border-radius:0 0 10px 10px;
	font-size:small;
	text-align:center;
	
	-moz-border-radius:0 0 10px 10px;
}

/* ********** */

ul#contentcontrols { display:block; padding:0; text-align:center; }
ul#contentcontrols li { display:inline-block; }

#valid a { display:inline-block; }

#contentcontrols a, #valid a {
	padding:3px 8px;
	background:#f99;
	background:linear-gradient(top,#f99,#f66) #f99;
	border-radius:5px;
	font-size:large;
	text-decoration:none;
	color:white;
	transition:0.2s;
	
	background:-moz-linear-gradient(top, #f99, #f66);
	-moz-border-radius:5px;
	-moz-transition:0.2s;
}

#contentcontrols a:hover,
#valid a:hover,
#contentcontrols a:focus,
#valid a:focus { background:#f99; background:linear-gradient(top, #fcc, #f99) #f99; background:-moz-linear-gradient(top, #fcc, #f99); }
#contentcontrols a:active,
#valid a:active { background:#c00; background:linear-gradient(top, #c00, #c00) #c00; background:-moz-linear-gradient(top, #c00, #c00); outline:none; }

/* Navigation
******************************************* */
header > nav {
	margin:0;
	padding:5px;
	background:white;
	border:thin solid #9cf;
	border-radius:10px 10px 0 0;
	
	-moz-border-radius:10px 10px 0 0;
}

header > nav > ul {
	margin:0;
	padding:0;
	text-align:center;
}

header > nav > ul > li { display:inline-block; }

header > nav > ul li a {
	display:block;
	color:white;
	text-decoration:none;
	transition:0.2s;
	
	-moz-transition:0.2s;
}

header > nav > ul > li > a {
	padding:3px 8px;
	background:#f99;
	background:linear-gradient(top,#f99,#f66) #f99;
	border-radius:5px;
	font-size:large;
	
	background:-moz-linear-gradient(top, #f99, #f66);
	-moz-border-radius:5px;
}

header > nav > ul li > a:hover,
header > nav > ul li > a:focus { background:#fcc; background:linear-gradient(top,#fcc,#f99) #fcc; background:-moz-linear-gradient(top, #fcc, #f99); }

header > nav > ul li > a:active { background:#c00; background:linear-gradient(top,#c00,#c00) #c00; outline:none; background:-moz-linear-gradient(top, #c00, #c00); }

header > nav > ul li:hover ul {
	display:block;
	position:absolute;
	margin:0;
	padding:0;
	border-radius:5px;
	
	-moz-border-radius:5px;
}

/* ********** */

header > nav > ul > li > ul {
	display:none;
	border:thin solid #f99;
	width:450px;
	background:white;
	text-align:left;
	
	-moz-box-shadow:grey 5px 5px 5px;
}

header > nav > ul > li > ul > li { display:block; width:100%; }

header > nav > ul > li > ul > li a {
	display:block;
	padding:5px;
	color:black;
	white-space:nowrap;
	overflow:hidden;
}

header > nav > ul > li > ul > li a:hover,
header > nav > ul > li > ul > li a:focus { background:#def; }
header > nav > ul > li > ul > li a:active { background:#9cf; }

/* ********** */

nav > ul > li.special > a {
	background:#9cf!important;
	background:linear-gradient(top, #def, #9cf) #9cf!important;
	
	background:-moz-linear-gradient(top, #def, #9cf)!important;
}

nav > ul > li.special > a:hover,
nav > ul > li.special > a:focus {
	background:#def!important;
	background:linear-gradient(top, #def, #def) #def!important;
	
	background:-moz-linear-gradient(top, #def, #def)!important;
}

nav > ul > li.special > a:active {
	background:#39F!important;
	background:linear-gradient(top, #39F, #39F) #39F!important;
	
	background:-moz-linear-gradient(top, #39F, #39F)!important;
}

/* ********** */

li#nav-pwaa a:hover {
	height:50px;
	background-image:url(images/nav/pwaa.png);
	background-position:right bottom;
	background-repeat:no-repeat;
}

li#nav-pwaajfa a:hover {
	height:50px;
	background-image:url(images/nav/pwaajfa.png);
	background-position:right bottom;
	background-repeat:no-repeat;
}

li#nav-pwaatt a:hover {
	height:50px;
	background-image:url(images/nav/pwaatt.png);
	background-position:right bottom;
	background-repeat:no-repeat;
}

li#nav-ajaa a:hover {
	height:50px;
	background-image:url(images/nav/ajaa.png);
	background-position:right bottom;
	background-repeat:no-repeat;
}

li#nav-aaime a:hover {
	height:50px;
	background-image:url(images/nav/aaime.png);
	background-position:right bottom;
	background-repeat:no-repeat;
}

/* News
******************************************* */
div#news-articles { position:relative; }
div#news-articles article { width:610px; }
div#news-articles aside { position:absolute; top:0; right:0; width:250px; }

/* Sheets
******************************************* */

a.download {
	display:block;
	padding:3px 8px;
	height:1.2em;
	border-radius:5px;
	text-decoration:none;
	transition:0.2s;
	
	-moz-border-radius:5px;
	-moz-transition:0.2s;
}

a.download:hover {
	background:#f99;
	background:linear-gradient(top, #f99, #f66) #f99;
	color:white;
	
	background:-moz-linear-gradient(top, #f99, #f66);
}

a.download:active { background:#c00; background:-moz-linear-gradient(top, #c00, #c00); }

/* ********** */

a.download::before {
	display:inline-block;
	margin-right:0.2em;
	height:1em;
	vertical-align:middle;
	content:url(images/icon_download.png);
}

a.download.midi::before { content:url(images/icon_midi.png); }
a.download.nwc::before { content:url(images/icon_nwc.png); }
a.download.sheet::before { content:url(images/icon_sheet.png); }
a.download.tabs::before { content:url(images/icon_tabs.png); }
a.download.piano::before { content:url(images/icon_piano.png); }

/* ********** */

div.note {
	padding:5px;
	background:#def;
	border-radius:5px;
	font-size:small;
	
	-moz-border-radius:5px;
}

div.note::before {
	font-weight:bold;
	content:"Note: ";
}