#oosounds svg, #oosettings svg, #ootools svg {stroke:#FFF}
.blue #oosounds svg, .blue #oosettings svg, .blue #ootools svg, .blue #langbubble, .blue #suncircle {stroke:#EEE9D9;}
.blue main #cpBtnMan {fill:#EEE9D9; } 
.blue main #cpBtnManShadow {fill:none; stroke:#023;} 
.day #oosounds svg, .day #oosettings svg, .day #ootools svg, .day #langbubble, .day #suncircle {stroke:#221;} 

#svghandR  {stroke:#CF6}
#svghandL {stroke:#F6F}

.blue #svghandR {stroke:#480}
.blue #svghandL {stroke:#C0C}
.day #svghandR  {stroke:#480}
.day #svghandL  {stroke:#C0C}
#svghandsaiten {stroke:#CC9}
.blue #svghandsaiten, .day #svghandsaiten {stroke:#986}
#sundisk {fill:#FFF;}
.blue #sundisk, .day #sundisk {fill:#566;}

/* .blue #ootools .fbsquare, .day #ootools .fbsquare {fill:#BC0; stroke:#572}
.blue #ootools .fbdot, .day #ootools .fbdot { fill:#F90; stroke:#B50} */
.day #ootools .fbsquare {fill:#BC0; stroke:#572}
.day #ootools .fbdot { fill:#F90; stroke:#B50}

#legendSoundOn #svgsoundarrow, #legendSoundAlways #sound3arrows {stroke:#CF6}
.blue #legendSoundOn #svgsoundarrow, .blue #legendSoundAlways #sound3arrows,
.day #legendSoundOn #svgsoundarrow, .day #legendSoundAlways #sound3arrows {stroke:#7B0; stroke:#380}

#legendSoundOff #sound3arrows, #legendSoundOff #sound3trays,
#legendSoundOn #svgsoundline, #legendSoundOn #sound3trays, #legendSoundOn #sound3arrows, #legendSoundAlways #soundone {stroke:none}
#legendSoundOff #svgsoundarrow {stroke:#ACA7A0;}
#legendSoundOff #svgsoundline {stroke:#F20}

#legendSoundBtns.off #legendSoundOn, #legendSoundBtns.off #legendSoundAlways {opacity:0.6}
#legendSoundBtns.on #legendSoundOff, #legendSoundBtns.on #legendSoundAlways {opacity:0.6}
#legendSoundBtns.always #legendSoundOff, #legendSoundBtns.always #legendSoundOn {opacity:0.6}


.day #ootools a,  .day .oolessons a, .day #legendSoundBtns, .day #oosettings li {color:#221}
.blue #ootools a,  .blue .oolessons a, .blue #legendSoundBtns, .blue #oosettings li {color:#ECA}

h3 svg {stroke:#C96; fill:#C96}
.day h3 svg {stroke:#B56; fill:#B56;}
.blue h3 {color:#D67;}
.blue h3 svg {stroke:#D67; fill:#D67;}


.ooToolsBtn, .ooToolsBtn:hover { background:#393935; }
.day .ooToolsBtn, .day .ooToolsBtn:hover { background:#FFF; }
.blue .ooToolsBtn, .blue .ooToolsBtn:hover { background:#092835; }

#legendSoundOn, #legendSoundOff, #legendSoundAlways {cursor:pointer !important; }
#ootools a, .oolessons a, #oosettings li {color:inherit; cursor:pointer !important; }

/*#ootools, .oolessons, #oosounds, #oosettings {background:#F0F5F5; border-radius:5px}*/

#ootools svg, .oolegend svg {float:left;}
/* #ootools svg { width:45px; height:36px; margin-right:15px; } 
#ootools ul  {list-style-type:none; margin:0; padding:0; height:65px; }
#ootools li { float:left; width:24%; height:50px; line-height:2.3em;}
#ootools a {font-size:0.8em;}
#ootools a:hover,#oosettings li:hover { text-decoration:underline} */

.ooToolsBtn { position:relative; float:left; margin:5px 1% 20px 0; width:23.5%; height:80px; font-size:0.8em; }
.ooToolsBtn svg {position:absolute; width:30%; height:60%; top:20%; left:5%; }
.ooToolsBtn .btntxt {position:absolute; display:block; width:66%; height:30px; top:40%; left:31%; text-align:center; } 

.ooToolsBtn.stacked svg {width:80%; height:45%; top:15%; left:10%; }
.ooToolsBtn.stacked .btntxt {position:absolute; display:block; width:100%; height:20%; top:70%; left:0; } 


#oosounds svg, #oosettings svg {width:40px; height:30px; margin:3px 0 0 -50px}
#oosounds ul, #oosettings ul {list-style-type:none; margin:0; padding:0}
#oosounds li, #oosettings li {min-height:40px; margin:0 0 10px 50px; font-size:0.95em}

#legendLang {position:relative;}
#legendLang span {position:absolute; left:-38px; top:9px; font-size:0.74em}

/*
#legendHand #svghandR {display:none;}
#legendHand #svghandL {display:block;}
*/

.oolessons a {font-size:0.9em;display:block; margin:0 0 3px 0; padding:3px 0; background:none}
.oolessons a:hover {background:none; text-decoration:underline}
.oolessons a small { opacity:0.65; }

h2 {margin:20px 0 20px 0; clear:both}
h3 {margin:0 0 10px 0; font-size:19px}
h3 svg {width: 20px; height:18px; display:inline-block; margin-right:8px;}

#ootheory, #oochordtypes, #oopractice {width:32%; margin: 0 1% 0 0; float:left; padding:0;}
#ooquizzes {clear:both; width:100%; margin: 0; padding:0; }
#ooquizzes .oosubdiv {width:32%; margin: 0 1% 0 0; float:left}





@media screen and (max-width:1200px) {
    body {font-size:0.88em}
    h2  {font-size:1.4em} 
    h3 {font-size:1.2em}
    #oosounds svg, #oosettings svg {margin:3px 10px 8px 0px}
    #oosounds li, #oosettings li {margin:0 0 10px 0px; }
    #legendLang span {position:absolute; left:13px; top:11px}
}

 @media screen and (max-width:900px) {
    body {font-size:0.84em}
    /* h2  {font-size:1.4em} 
    h3 {font-size:1.2em} */
} 

/* ##### GOOGLE ADSENSE etc... #####  */
/* @media screen and (min-width:901px) {
	#adpagetop {display:none }
    #adprefacetop {display:block}
    #adaddendum  {display:none}
}
@media screen and (min-width:901px) and (max-width:1200px) {
    #adaddendum  {display:block}
} */