kaci.css

body {
    background-color: #aff;
}
section {
    border: 3px solid rgba(127,127,255,.4);
    border-radius: .5em;
    margin: 2em 1em;
    padding: 1.2em 1em .5em;
    position: relative;
	background-image: -webkit-linear-gradient(left bottom, rgba(0,0,0,.1), rgba(0,0,0,0));
	background-color: rgba(2,0,127,.3);
	display: inline-block;
}

section h1,
fieldset h2 {
	background-color: #aff;
    border: 3px solid rgba(127,127,255,.4);
    border-radius: .5em;
    color: rgba(127,127,255,.8);
    font-size: 100%;
    left: 1em;
    margin: 0;
    padding: .1em 2em .1em;
    position: absolute;
    text-transform: uppercase;
    top: -1em;
}
fieldset {
    border: 3px solid rgba(127,127,255,.4);
    border-radius: .5em;
    display: inline-block;
    margin: 1.6em 1em .5em 0;
    padding: 1.2em .2em .2em;
    position: relative;
}
.lfo .waveform-selector {
	max-width: 21em;
}
/*
fieldset h2 {
    top: -2.2em;
}
*/
fieldset canvas {
/*
    box-shadow: -.6em .6em .7em -.7em #aaa inset, .6em -.6em .7em -.8em #aaa inset;
    background: rgba(30,229,200, 0.6);
*/
}
.controller {
    display: inline-block;
}
.controller svg {
	background: rgba(255,255,255,0.2);
}
#pdo > canvas {
    max-width: 100%;
}

.waveform-selector label {
    border-radius: .5em;
    display: inline-block;
    text-align: center;
    background-color: #eef;
    margin: .3em;
    box-shadow: 4px 4px 12px 1px rgba(255,255,255,1) inset, 0 0 9px 1px rgba(0,0,0,0.5) inset, 2px 2px 8px rgba(0,0,0,.4);
}
.waveform-selector canvas {
    margin: .2em;
}
.frequency-indicator .active {
    background: red;
}
.frequency-indicator div {
    display: inline-block;
    height: 20px;
    width: 20px;
}
.key {
	stroke: #000;
}
.black {
	fill: #000;
}
.white {
	fill: #fff;
}
.pressed {
	fill: #afe;
}
.dropped {
	fill: #888;
}
.circles,
line,
.sustain .bar {
    fill: #d0af0a;
    stroke: #d0af0a;
}
line {
    stroke-width: 2;
}
.transparentBg {
	fill: #000;
}
.development-code {
    position: absolute;
    top: 1em;
    right: 1em;
    display: inline-block;
}
nav {
	display: none;
}


@media screen and (max-width: 480px) {
	body,
    section h1,
    fieldset h2 {
		background-color: orange;
		-moz-transition-property: background-color;
		-moz-transition-duration: 1s;
	}
	nav {
		display: block;
		position: absolute;
		bottom: 0;
		right: 0;
	}
	.section-navigation a {
		display: block;
		height: 20px;
		width: 20px;
		background-color: pink;
		border-radius: 5px;
	}
	section {
		display: none;
		margin: 5px;
		overflow: hidden;
	}
	section:target {
		display: block;
	}
	[id^='pdo']:target ~ section[id^='pdo'] {
		display: block;
	}
	section > fieldset {
		display: none;
	}
	section > fieldset:target {
		display: block;
	}
/*		.controller {
		display: none;
	}
*/		:target .controller {
		display: block;
	}
	#pdo {
		padding-bottom: 70px;	
	}
	#pdo-waveform-selector,
	#waveform + .controller {
		position: absolute;
		top: 1em;
		left: 1em;
	}
	#waveform + .controller + .controller {
		position: absolute;
		top: 380px;
		left: 1em;
		-moz-transform: rotate(-90deg);
		-moz-transform-origin: top left;
		-webkit-transform: rotate(-90deg);
		-webkit-transform-origin: top left;
		-o-transform: rotate(-90deg);
		-o-transform-origin: top left;
/*
		transform: rotate(-90deg);
		transform-origin: top left;
*/
	}
	a[id|='pdo-waveforms']:target ~ section [id|='pdo-waveform'],
	a[id|='pdo-waveforms']:target ~ section [id|='pdo-wrapper'] {
		display: block;
	}
	[id|='pdo-phase']:target ~ section  a[href^='#pdo-phase'],
	[id|='pdo-waveforms']:target ~ section a[href^='#pdo-waveforms'],
	[id|='pdo-modulation']:target ~ section a[href^='#pdo-modulation'] {
		display: none;
	}
	section[id^='pdo'] .controller {
	    display: none;
	}
	[id|='pdo-phase']:target ~ section .controller {
	    display: block;
	}


	/* waveform selectors */
	
	#pdo-waveform-selector {
		border: none;
		padding: 10px 0 0;
		margin: 10px 0 0;
		max-width: 300px;
		text-align: center;
/*			background-image: -moz-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.7), rgba(255,255,255,0));
*/		}
    #pdo-wrapper-selector {
        border: none;
        max-width: 315px;
        top: 300px;
        background: transparent;
        height: auto;
        position: absolute;
        padding: 0;
    }
	#pdo-wrapper-selector h2,
	#pdo-waveform-selector h2 {
		display: none;
	}
	#pdo-wrapper-selector label,
	#pdo-waveform-selector label {
		background: transparent;
		border: none;
		margin: 0;
	}
	#pdo-wrapper-selector canvas,
	#pdo-waveform-selector canvas {
		border-radius: 5px;
		border-width: 2px;
	}
	#pdo-wrapper-selector br,
	#pdo-wrapper-selector input,
	#pdo-waveform-selector br,
	#pdo-waveform-selector input {
		display: none;
	}
	#pdo-wrapper-selector :checked ~ canvas,
	#pdo-waveform-selector :checked ~ canvas {
		box-shadow: -0.6em 1em 0.7em -0.7em #fff inset, 1em -0.6em 0.7em -0.8em #fff inset;
		background: rgba(30,249,256, 0.9);
	}
}