/* Tullan Strand Surf School: the old site (c. 2014). System fonts only, fixed 960px, no JS. */
.ts-before {
  margin: 0;
  background: #00b7ff repeating-linear-gradient(45deg, #00b7ff 0, #00b7ff 14px, #29c6ff 14px, #29c6ff 28px);
  font: 12px/1.4 Verdana, Tahoma, Arial, sans-serif;
  color: #777;
}
.ts-before .b-page { width: 960px; margin: 0 auto; padding: 8px 0 30px; }
.ts-before .b-ticker { margin: 0 0 8px; padding: 4px; background: #ff0; color: #f0c; font: bold 13px/1.3 "Comic Sans MS", "Comic Sans", cursive; text-align: center; border: 2px dashed #f0c; }
.ts-before .b-box { background: #fff; border: 4px solid #ff00aa; padding: 10px; box-shadow: 6px 6px 0 #003366; }

.ts-before .b-header { background: linear-gradient(180deg, #0077cc, #00e5ff 55%, #ffffff); padding: 10px 14px 4px; text-align: center; border: 2px solid #003366; }
.ts-before .b-logo { margin: 0; font: bold 54px/1.0 Impact, "Arial Black", sans-serif; letter-spacing: 2px; text-transform: none;
  background: linear-gradient(90deg, #ff00cc, #fff200 40%, #00ff66 70%, #ff00cc); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 2px #003366; }
.ts-before .b-tag { margin: 4px 0 6px; font: italic bold 15px "Comic Sans MS", "Comic Sans", cursive; color: #c0007a; }

.ts-before .b-nav { list-style: none; margin: 6px 0; padding: 0; background: #003366; display: flex; }
.ts-before .b-nav li { flex: 1 1 auto; }
.ts-before .b-page .b-nav a { display: block; padding: 6px 4px; color: #ff0; font: bold 11px Verdana, sans-serif; text-align: center; text-decoration: none; border-right: 1px solid #00aaff; }
.ts-before .b-nav a:hover { background: #ff00aa; }

.ts-before .b-video { position: relative; height: 330px; margin: 6px 0; border: 2px solid #003366; background: linear-gradient(180deg, #002b55 0%, #006699 55%, #00a8d6 56%, #004d70 100%); text-align: center; }
.ts-before .b-play { position: absolute; left: 50%; top: 42%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: rgba(255, 255, 255, .85); border: 4px solid #fff; display: block; }
.ts-before .b-play span { position: absolute; left: 33px; top: 22px; border-left: 30px solid #003366; border-top: 20px solid transparent; border-bottom: 20px solid transparent; }
.ts-before .b-video__txt { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; color: #fff; font: bold 18px "Comic Sans MS", "Comic Sans", cursive; }
.ts-before .b-video__txt small { font: 11px Arial, sans-serif; color: #bcd; }

.ts-before .b-neon { margin: 14px 0 8px; font: bold 28px/1.15 Impact, "Arial Black", sans-serif; text-align: center;
  background: linear-gradient(90deg, #ff00cc, #3333ff 50%, #00ddff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.ts-before .b-neon--2 { background-image: linear-gradient(90deg, #ff7700, #ff0066, #cc00ff); font-size: 34px; }
.ts-before .b-neon--3 { background-image: linear-gradient(90deg, #00cc66, #00ccff, #3300ff); font-size: 26px; text-align: left; }

.ts-before .b-cols { display: flex; gap: 14px; }
.ts-before .b-left { width: 640px; }
.ts-before .b-right { width: 260px; }
.ts-before .b-just { text-align: justify; margin: 0 0 12px; font-size: 11px; line-height: 1.5; color: #999; }
.ts-before .b-page a { color: #cc0099; }
.ts-before .b-img { text-align: center; margin: 4px 0 12px; }
.ts-before .b-img img { border: 3px ridge #ff00aa; width: 300px; height: 380px; }
.ts-before .b-big { font: bold 20px "Comic Sans MS", cursive; color: #ff0066; text-align: center; margin: 10px 0; }
.ts-before .b-side { border: 2px dotted #ff00aa; background: #ffffcc; margin-bottom: 10px; padding: 6px; text-align: center; }
.ts-before .b-side__h { margin: 0 0 4px; font: bold 12px Verdana, sans-serif; color: #fff; background: #0099cc; padding: 3px; }
.ts-before .b-fb { margin: 0; height: 120px; border: 1px solid #3b5998; background: #fff; color: #aaa; padding-top: 50px; box-sizing: border-box; }
.ts-before .b-small { margin: 0; font-size: 10px; color: #999; }
.ts-before .b-counter { margin: 0; font: bold 22px "Courier New", monospace; color: #0f0; background: #000; letter-spacing: 3px; padding: 2px; }
.ts-before .b-footer { margin-top: 10px; padding-top: 8px; border-top: 2px solid #ff00aa; text-align: center; font-size: 10px; color: #aaa; }
.ts-before .b-footer p { margin: 2px 0; }