3 -webkit-box-sizing: border-box;
4 -moz-box-sizing: border-box;
5 box-sizing: border-box; }
13 background-color: #ffee88;
14 pointer-events: none; }
21 background-color: #44ee99; }
22 .no-green .green-box {
27 border: 10px solid #eeeeee;
35 padding: 910px 809px; }
41 pre.pre-with-output code mark {
53 margin-bottom: 15px; }
54 output.scroll-page .scroll-box {
56 output.scroll-page:after {
57 content: "↕ scroll the page ↕"; }
59 content: "↕ scroll this area ↕";
65 font-variant: small-caps;
68 transition: opacity 0.2s; }
69 output.scrolled:after {
71 output[deactivated], output[activated] {
73 output[deactivated] .scroll-box, output[activated] .scroll-box {
74 pointer-events: none; }
75 output[deactivated]:after, output[activated]:after {
82 content: "Click To Show";
83 background-color: #aaaaaa;
84 border-left: 10px solid #eeeeee;
89 output[activated]:after {
90 content: "Click To Hide"; }
91 output[activated].visible-enabled:after {
95 .attachment-mark, .tether-marker-dot {
97 .attachment-mark:after, .tether-marker-dot:after {
101 background-color: red;
102 display: inline-block;
107 position: absolute; }
109 span.attachment-mark:after, span.tether-marker-dot:after {
115 position: absolute; }
116 .tether-marker-dot:after {
120 .tether-target-marker {
121 position: absolute; }
122 div.tether-target-attached-left .tether-target-marker {
124 div.tether-target-attached-top .tether-target-marker {
126 div.tether-target-attached-bottom .tether-target-marker {
128 div.tether-target-attached-right .tether-target-marker {
130 div.tether-target-attached-center .tether-target-marker {
133 .tether-element-marker {
134 position: absolute; }
135 div.tether-element-attached-left .tether-element-marker {
137 div.tether-element-attached-top .tether-element-marker {
139 div.tether-element-attached-bottom .tether-element-marker {
141 div.tether-element-attached-right .tether-element-marker {
143 div.tether-element-attached-center .tether-element-marker {
146 .tether-element-attached-middle .tether-element-marker {
149 .tether-target-attached-middle .tether-target-marker {
153 position: relative; }
154 .tether-element.tether-pinned-left {
155 box-shadow: inset 2px 0 0 0 red; }
156 .tether-element.tether-pinned-right {
157 box-shadow: inset -2px 0 0 0 red; }
158 .tether-element.tether-pinned-top {
159 box-shadow: inset 0 2px 0 0 red; }
160 .tether-element.tether-pinned-bottom {
161 box-shadow: inset 0 -2px 0 0 red; }
164 position: relative; }
166 .tether-element.tether-out-of-bounds[data-example="hide"] {
169 [data-example^="optimizer"].lang-javascript {
170 /* This should just be a `code` selector, but sass doesn't allow that with & */
172 [data-example^="optimizer"].tether-element:before {
176 content: "I'm in the body";
181 [data-example^="optimizer"] .scroll-box .tether-element:before {
182 content: "I'm in my scroll parent!"; }
184 .tether-element[data-example="scroll-visible"] {
186 .tether-element[data-example="scroll-visible"] .tether-marker-dot {
189 .hs-doc-content h2.projects-header {
193 .projects-paragraph {
194 text-align: center; }
195 .projects-paragraph a {
196 display: -moz-inline-stack;
197 display: inline-block;
198 vertical-align: middle;
199 *vertical-align: auto;
205 .projects-paragraph a span {
206 display: -moz-inline-stack;
207 display: inline-block;
208 vertical-align: middle;
209 *vertical-align: auto;
216 .projects-paragraph a img {