/* minimize ugly styling wobbles in e.g. Firefox during loading remote Javascript */
body > section.page { display:none; }
body.loaded > section.page { display:block; }
body:before { font-size: 400%; content: 'LOADING...'; }
body.loaded:before { content: none; }

body.scratch, body.cascade, body.dota { background-color: black; }
body.scratch.panels { background-color: #0e4603; }
body.sweet { background-color: #0707ec; font-family: Comic Sans MS; }

.panel.prose { background-color: #eeeeee; }
.scratch .panel.prose { background-color: #0e4603; }
.sweet .panel.prose { background-color: #14ff23; }
.cascade .panel.prose { background-color: #262626; }

.panel.log { background-color: #eeeeee; }

.sweet .panel.log { background-color: #14ff23; }
.cascade .panel.log { background-color: #262626; }

.page { background-color: #eeeeee; }
.scratch .page { background-color: #0e4603; }
.sweet .page { background-color: #14ff23; }
.cascade .page { background-color: #262626; }

.page.panels, .scratch .page.panels, .sweet .page.panels, .cascade .page.panels { background-color: inherit; }  /* avoid :not */
.scratch .page { color: white; }
.scratch .page a { color: #2cff4b; }
.cascade .page, .cascade .page a { color: #0066ff; }


body.scratch { margin-top: 175px; }
body.cascade { margin-top: 125px; }
.page img.banner { position: absolute; top: 2px; }
.scratch .page img.banner { margin-left: -144px; }


.scratch header nav, .sweet header nav { font-size: 9px; }
.sweet header nav { background-color: black; }
.cascade header nav { background-color: #535353; }
.dota header nav, .dota .page nav, .dota .page pre, .dota .page embed.suppress { display: none; }
.dota .page embed { display: inherit; }  /* avoid :not */
.scratch header nav ul:before { content: url(http://www.mspaintadventures.com/images/candycorn_scratch.png); }
.scratch header nav ul:first-child:before { content: none; } /* avoid :not */
.scratch header nav ul a, .scratch .page h1 a { color: white; }

.page { text-align: left; color: black; line-height: normal;
        max-width: 650px; margin-left: auto; margin-right: auto;
        border-style: solid; border-color: #c6c6c6;
        border-left-width: 150px; border-right-width: 150px;
        border-top-width: 7px; border-bottom-width: 20px; }
.page[id^="1/"] { max-width: 782px; border-left-width: 84px; border-right-width: 84px; }
.page[id^="ryanquest/"] { max-width: 750px; border-left-width: 100px; border-right-width: 100px; }
.scratch .page, .sweet .page { border-left-width: 144px; border-right-width: 145px; border-top-width: 0px; }
.scratch .page { border-color: #082a00; }
.sweet .page { border-color: #f400ec; color: black; }
.cascade .page { max-width: 950px; border: none 0px #262626; }
.dota .page { max-width: 950px; border: none 0px; }


.page header { display: table; }

.page header, .page p, .page footer { margin-left: 25px; margin-right: 25px; }
.page header { width: 600px; padding-top: 10px; padding-bottom: 10px; }
.page[id^="1/"] header { width: 732px; }
.page[id^="ryanquest/"] header { width: 700px; }
.page time { position: absolute; font-size: 14px; }
.page time p { margin: 0 5px 0 35px; }

.page time { text-align: center; white-space: nowrap; }
.page time p { text-shadow: 1px 1px white; }

.page h1, .prose > p { font-weight: bold; font-family: courier, monospace; text-align: center; }
.page h1 { display: table-cell; vertical-align: middle; font-size: 40px; min-height: 62px; }
.page h1 a { text-decoration: inherit; color: inherit; display: block; }
.cascade .page h1, .cascade .page h1 a, .cascade .page time { display: none; } 


.page .pic { width: 650px; }
.page[id^="1/"] .pic { width: 782px; }
.page[id^="ryanquest/"] .pic { width: 750px; }
.page[id^="1/"] .pic.reduce, .page[id^="ryanquest/"] .pic.reduce { width: auto; } /* avoid :not */
.scratch .page p { font-size: 12px; }
.page p { font-size: 14px; }

.page p { line-height: normal; margin-bottom: 1em; }
.scratch.hussie .page p { color: black; /* spans vs ps */ }

.page pre { margin: 1em; background-color: white; border: solid black 1px; padding: 1em 2em;
            white-space: pre-wrap; font-weight: normal; font-weight: bold; }
.page pre:before { display: block; color: gray; font-size: 80%;
                   margin: 0; padding: 0 0.5em; } 
.page pre.alt.flash:before { content: "(Flash transcript)"; }

nav { font-family: Verdana, Arial, Helvetica, sans-serif; }
.sweet nav { font-family: Comic Sans MS; }
.page nav { margin-top: 1em; }
.page nav p:before { content: "> "; }
.page nav p, .scratch .page nav p { font-weight: normal; font-size: 30px; }

.page footer { font-weight: bold; font-size: 75%; color: blue; padding-bottom: 1.5em; }
.scratch .page footer { color: #2cff4b; }
.page footer * { display: inline; }
.page footer ul:first-child:after { padding-right: 5em; content: '' }
.page footer li:before { content: '| '; }
.page footer li:first-child:before { content: ''; }
.page footer li.auto { display: none; }
.page .suppress, .page .pic.postlink, .page .flash.postlink { display: none; }

.panels { padding-bottom: 0; }
.panels .trigger { z-index: 10; width: 100%; height: 5px; }
nav.panels { width: 100%; }
nav.panels.upper { margin-top: 0.3em; margin-bottom: 0.3em; }
nav.panels.lower { margin-top: 0.5em; margin-bottom: 0.3em; }
nav.panels span { float: left; }
nav.panels span a { background-color: black; color: white; text-decoration: none; font-weight: 700;
  border: solid white 2px; border-radius: 1.2em; -moz-border-radius: 1.2em; -webkit-border-radius: 1.2em;
  margin: 0 0.25em; padding: 0.2em 0.5em; line-height: 1.5; cursor: pointer; }
nav.panels span a:hover, nav.panels span a.intent { background-color: #cc0000; }
nav.panels span a[href]:hover, nav.panels span a[href].intent { background-color: blue; } /* avoid :not */
nav.panels h1 { font-family: courier, monospace; font-size: 150%; color: white; 
  display: block; padding: 0 2em; text-align: center; cursor: default; }
nav.panels h1 a { text-decoration: inherit; color: inherit; }
nav.panels h1 + * { float: right; font-size: 50%; color: #cccccc; margin-top: -2em; text-align: right; }

.panel.reduce { display: none; }
img.panel.reduce { display: inline; width: 23.5%; margin: 1em 0.5% 0.5% 0; opacity: 0.7; }
.panel.prose, .panel.log { padding-top: 1em; }
.panel.prose { padding-bottom: 0.1em; }
.panel.log { padding-bottom: 1em; border: none; }
.panel.log button { font-size: 150%; text-shadow: 0px 1px 2px black; text-transform: capitalize;
  display: block; float: right; margin-top: -1.35em; background-color: transparent; color: white; }
.dota .page pre.panel { display: block; }
.dota .page pre.panel.suppress { display: none; } /* avoid :not */

.scratch div.log { background-color: black; }
.log section { text-align: left; font-family: courier, monospace; font-weight: bold; }

div.log { border: dashed gray 1px; margin: 1px 25px 28px; padding: 1px 35px; text-align: center; }
.log section { font-size: 14px; }
.scratch .log section { font-size: 12px; }


.log button { border: 2px outset buttonface; background-color: buttonface; text-transform: capitalize; }
.log.panel button { border: none; background-color: transparent; text-transform: none; } /* avoid :not */

/* Toggle button */
.log.show button:before { content: 'Hide '; }
.log.hide button:before { content: 'Show '; }
.log.hide button:hover { background-color: #777; }
.log.show section { display: show; }
.log.hide section { display: none; }
.log.show.panel button:before, .log.hide.panel button:before { content: ''; } /* avoid :not */
.log.hide.panel button:hover { background-color: transparent;; } /* avoid :not */
.log.panel section { display: inherit; } /* avoid :not */

.warning { padding: 2em; text-align: center; background-color: red; color: white; font-size: 150%; }

.ddimgtooltip { box-shadow: 0px 0px 0px #818181; /*shadow for CSS3 capable browsers.*/
  -webkit-box-shadow: 0px 0px 0px #818181; -moz-box-shadow: 0px 0px 0px #818181; display: none;
  position: absolute; border: 0px solid black; background: none; color: black; z-index:2000; padding: 4px;
}

.scratch .ad { background: #082a00 url(http://www.mspaintadventures.com/images/v2_mspalogo_scratch.gif) no-repeat; }
.scratch .ad, .sweet .ad { width: 941px; height: 102px; margin-top: 0; }
.scratch .ad a, .sweet .ad a { border: none; width: 729px; margin-right: 0; }
.sweet .ad { background: 0 url(http://www.mspaintadventures.com/images/mspalogo_sbahj.jpg) no-repeat; }
.dota .ad, .panels .ad { display: none; }