Blue Help Box

dabblet.css

@import url(https://fonts.googleapis.com/css?family=Signika:400,600,700);

/**
 * Blue Help Box
 */
body {
    background: lightskyblue;
    color: darkblue;
    font-family: 'Signika', sans-serif;
}

h1 {
    text-align: center;
    font-size: 60px;
    margin: .25em;
}

section {
    max-width: 800px;
    min-width: 26em;
    margin: auto;
    left: 0;
    right: 0;
    background: lightblue;
    padding: .05em 1em 1em 1em;
    border-radius: 2em;
    box-shadow: 0 0 20px 1px rgba(0,0,0,.6);
}

section > .skills {
    font-size: 20px;
    background: white;    
    border-top: solid .3em;
    border-radius: 0 0 1em 1em;
}

.skill {
    margin: 0 10% .1em 20%;
    line-height: 1;
}

.imagination {
    padding-bottom: 1.5em;
}

.skill>h2{
    margin-bottom: -.3em;
}

@media (min-width: 620px) {
	.skill:before {
	    content: "";
	    position: absolute;
	    float: left;
	    margin-left: -110px;
	    margin-top: .25em;
	    background: currentColor;
	    width: 90px;
	    height: 90px;
    	border-radius: 45px;
	}
}

dabblet.html

<section>
    <h1>Developmental Benefits</h1>
    <div class="skills">
    <div class="skill motor">
        <h2>Motor Skills</h2>
        <p>Stunt ramp, elevator, movable gears and track switches strengthen fine motor skills.</p>
    </div>
    <div class="skill language">
        <h2>Language Development</h2>
        <p>SmartPoint<span class="trademark">&reg;</span> vehicles respond to SmartPoint<span class="trademark">&reg;</span> 
        locations with phrases that encourage first words and early vocabulary (each sold separately).</p>
    </div>
    <div class="skill imagination">
        <h2>Imaginative Play</h2>
        <p>Building the speedway enhances imaginative play.</p>
    </div>
    </div>
</section>
<!--<div>Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a>             is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0">CC BY 3.0</a></div>-->

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"1","prefixfree":"1","page":"result"}