/* NAVIGATION */
nav { margin-bottom: 30px; }
nav:before,
nav:after { content: " "; display: table; }
nav:after { clear: both; }

/* HEADER */
.figure h1, 
.figure h2 { display: inline-block; color: #666; }
.figure h1 { margin-right: 20px; text-transform: lowercase; }

/* TOGGLE */
.hint { position: absolute; border: #008080 solid 1px; border-radius: 5px; width: 25px; height: 25px; }
.trigger { position: absolute; top: -1px; left: -1px; border-radius: 5px; width: 27px; height: 27px; cursor: pointer; }
.togglebox { position: absolute; top: -1px; left: -1px; border-radius: 5px; width: 27px; height: 27px; background-color: #60baba; text-align: center; font-size: 0.6rem; color: #333; }

.hint.fill { background-color: #fff;  }
.hint span { position: absolute; padding: 4px; line-height: 16px; font-family: "Helvetica Neue"; font-size: 14px; color: #000; }
.hint span large { font-size: 16px; color: #333; }

.hint.c1 { width: 66px; height: 66px; border-radius: 33px; }
.hint.v2 { height: 50px; }
.hint.v3 { height: 70px; }
.hint.v4 { height: 90px; }
.hint.v5 { height: 160px; }
.hint.h1 { width: 100px; }
.hint.h2 { width: 150px; }
.hint.h3 { width: 200px; }
.hint.h4 { width: 250px; }
.hint.h5 { width: 300px; }

.c1 .trigger, 
.c1 .togglebox { width: 68px; height: 68px; border-radius: 34px; }
.v2 .trigger, 
.v2 .togglebox { height: 52px; }
.v3 .trigger, 
.v3 .togglebox { height: 72px; }
.v4 .trigger, 
.v4 .togglebox { height: 92px; }
.v5 .trigger, 
.v5 .togglebox { height: 162px; }
.h1 .trigger, 
.h1 .togglebox { width: 102px; }
.h2 .trigger, 
.h2 .togglebox { width: 152px; }
.h3 .trigger, 
.h3 .togglebox { width: 202px; }
.h4 .trigger, 
.h4 .togglebox { width: 252px; }
.h5 .trigger, 
.h5 .togglebox { width: 302px; }