Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
  <meta name="x-apple-disable-message-reformatting">
  <meta name="color-scheme" content="light dark">
  <meta name="supported-color-schemes" content="light dark">
  <title>Rickenbacker 4001 email drawing</title>
  <!--[if mso]>
  <xml>
  <o:OfficeDocumentSettings>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
  </xml>
  <![endif]-->
  <style>
    :root {
      color-scheme: light dark;
      supported-color-schemes: light dark;
    }
    body,.body{margin:0;}
    .rick{
      background:url('https://cdn.shopify.com/s/files/1/0008/4276/0252/products/2_c732f595-2d8a-467a-a77e-0863b4dc238a.jpg') center;
      background-size:cover;
    }
    .rick:hover u{
      opacity:0;
    }
    @media screen and (max-width:650px){
      .rick{font-size:9vw !important;}
    }
  </style>
</head>
<body class="body">
  <div role="article" aria-roledescription="email" aria-label="Rickenbacker 4001 email drawing" lang="en" style="font-size:1rem;font-family:Georgia, serif;text-align:center;">
  <h1 style="margin:1em;font-size:2rem">Rickenbacker 4001
  <div style="font-size:.5em">Drawn in CSS & VML to work in email clients</div></h1>
  <div class="rick" style="border:1px solid #000;display:inline-block;height:5em;width:10em;overflow:hidden;font-size:60px;line-height:1;mso-hide:all" role="img" aria-label="Rickenbacker 4001">
    <div class="floor">
      <div style="max-height:0;max-width:0">
        <u style="display:inline-block;background:#96846e;width:10em;height:5em;">
          <u style="display:block;width:0;border-left:10em solid #2c2720;border-top:.03em solid transparent;margin-top:.4em;"></u>
          <u style="display:block;width:0;border-right:10em solid #2c2720;border-bottom:.03em solid transparent;"></u>
          <u style="display:block;width:0;border-left:10em solid #2c2720;border-top:.03em solid transparent;margin-top:1.2em;"></u>
          <u style="display:block;width:0;border-right:10em solid #2c2720;border-bottom:.03em solid transparent;"></u>
          <u style="display:block;width:0;border-left:10em solid #2c2720;border-top:.03em solid transparent;margin-top:1.2em;"></u>
          <u style="display:block;width:0;border-right:10em solid #2c2720;border-bottom:.03em solid transparent;"></u>
          <u style="display:block;width:0;border-left:10em solid #2c2720;border-top:.03em solid transparent;margin-top:1.2em;"></u>
          <u style="display:block;width:0;border-right:10em solid #2c2720;border-bottom:.03em solid transparent;"></u>
        </u>
      </div>
    </div>
    <!-- Body -->
    <div class="body">
      <div style="max-height:0;max-width:0">
        <u style="display:inline-block;height:3em;width:1.75em;background:#ddddc5;border-radius:50%;margin-top: 1.1em;margin-left:.05em;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height: 2.5em;width: 2.2em;background: #ddddc5;border-radius: 0 0 61% 32%;margin-top: 1.61em;margin-left: 0.3em;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height: 2em;width: 1.8em;border: .5em solid transparent;border-left: .3em solid transparent;border-bottom: none;border-top: .2em solid #ddddc5;border-radius: 53% 50% 0 0;margin-left: 1.33em;margin-top: 3.35em;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height: .09em;width: .6em;border-radius: 0 79% 61% 114%;margin-left: 2.96em;margin-top: 3.32em;border-bottom: .37em solid #ddddc5;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height: .59em;width: .37em;border-radius: 0 0 0 84%;margin-left: 2.95em;margin-top: 2.82em;border-bottom: .2em solid #ddddc5;border-left: .2em solid #ddddc5;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height: .9em;width: .87em;border-radius: 100% 0 0 0;margin-left: 2.95em;margin-top: 1.25em;border-left:.3em solid #ddddc5;border-top:.3em solid #ddddc5;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.44em;width:.55em;border-radius: 20% 60% 60% 30%;margin-left: 3.94em;margin-top:1.11em;background:#ddddc5;"></u>
      </div>

      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height: 0;width: 0;margin-left: 3.93em;margin-top: 1.48em;border-top: .1em solid #ddddc5;border-left: .33em solid transparent;border-right: .15em solid transparent;"></u>
      </div>

      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height: 1.52em;width: 2.53em;border-radius: 0 0 42% 58%;margin-left: 0.67em;margin-top: 0;border-left: .3em solid transparent;border-right: .3em solid transparent;border-bottom: .3em solid #ddddc5;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height: .9em;width: 1.4em;border-radius: 96% 0 0 0;margin-left: 2.75em;margin-top: 1.11em;border-top: .3em solid #ddddc5;"></u></div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.9em;width: 1.05em;margin-left: 2.2em;margin-top: 1.65em;background:#ddddc5;vertical-align:top"></u>
        <u style="display: inline-block;height:.9em;width: 1em;margin-left: 2.15em;margin-top:0;background:#ddddc5;"></u>
      </div>

    </div>

    <!-- Scratch place -->
    <div class="scratch-plate">
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:1.32em;width:.88em;background:#111;margin-left: 2.19em;margin-top: 2.04em;border-radius:.05em .05em .15em "></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.3em;width:1.85em;background:#111;margin-left:.41em;margin-top: 3.28em;border-radius:1em 0 1em 0"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.45em;width:.7em;background:#111;margin-left:.41em;margin-top: 3.58em;border-radius:0 0 0 100%"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.45em;width:.7em;background:#111;margin-left:1.11em;margin-top: 3.58em;border-radius:0 0 100% 0"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.1em;width:.09em;margin-left:2.1em;margin-top: 3.18em;border-radius:0 0 100% 0;border-right:.1em solid #111;border-bottom:.1em solid #111;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:0;width:0;margin-left: 1.55em;margin-top: 3.33em;border-top: .23em solid #111;border-right: .8em solid transparent;border-bottom: .37em solid transparent;border-left: .55em solid #111;"></u>
      </div>

      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height: 0.4em;width: .9em;margin-left: 1.92em;margin-top: 3.36em;border-radius: 100% 10% 0 0;border-top: .15em solid #ddddc5;border-left: .1em solid transparent;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.25em;width:.9em;background:#ddddc5;margin-left:2.17em;margin-top: 1.84em;border-radius: 0 0 55% 45% "></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.3em;width:.1em;background:#ddddc5;margin-left: 3.05em;margin-top: 2.04em;border-radius:100% 0 0 0 "></u>
      </div>

      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.01em;width:.01em;margin-left: 2.23em;margin-top: 2.09em;border-radius:50%;background:#333;border:.02em solid #eee;border-color:#ddd #999 #ccc #666"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.01em;width:.01em;margin-left: 3em;margin-top: 2.08em;border-radius:50%;background:#333;border:.02em solid #eee;border-color:#ddd #999 #ccc #666"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.01em;width:.01em;margin-left: 2.94em;margin-top: 3.25em;border-radius:50%;background:#333;border:.02em solid #eee;border-color:#ddd #999 #ccc #666"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.01em;width:.01em;margin-left: 1.49em;margin-top: 3.29em;border-radius:50%;background:#333;border:.02em solid #eee;border-color:#ddd #999 #ccc #666"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.01em;width:.01em;margin-left: .83em;margin-top: 3.3em;border-radius:50%;background:#333;border:.02em solid #eee;border-color:#ddd #999 #ccc #666"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.01em;width:.01em;margin-left: .48em;margin-top: 3.65em;border-radius:50%;background:#333;border:.02em solid #eee;border-color:#ddd #999 #ccc #666"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.01em;width:.01em;margin-left: 1.08em;margin-top: 3.95em;border-radius:50%;background:#333;border:.02em solid #eee;border-color:#ddd #999 #ccc #666"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.01em;width:.01em;margin-left: 2.09em;margin-top: 3.47em;border-radius:50%;background:#333;border:.02em solid #eee;border-color:#ddd #999 #ccc #666"></u>
      </div>

    </div>

    <!--  Hardware -->
    <div class="hardware">
      <div style="max-height:0;max-width:0;">
        <u style="display:inline-block;width:.21em;height:.21em;margin-left:.7em;margin-top:3.43em;border-radius:50%;background:#333;border:.01em solid #000">
          <u style="display:block;height:0.02em;width:0.01em;background:#ccc;margin:.01em auto 0;"></u>
          <u style="display:block;width:0;margin-left:.03em;background:#eee;border-radius:50%;border:.07em solid #999;border-color:#eee #777"></u>
        </u>
      </div>
      <div style="max-height:0;max-width:0;">
        <u style="display:inline-block;width:.21em;height:.21em;margin-left:1.14em;margin-top:3.41em;border-radius:50%;background:#333;border:.01em solid #000">
          <u style="display:block;height:0.02em;width:0.01em;background:#ccc;margin:.01em auto 0;"></u>
          <u style="display:block;width:0;margin-left:.03em;background:#eee;border-radius:50%;border:.07em solid #999;border-color:#eee #777"></u>
        </u>
      </div>
      <div style="max-height:0;max-width:0;">
        <u style="display:inline-block;width:.21em;height:.21em;margin-left:.93em;margin-top:3.66em;border-radius:50%;background:#333;border:.01em solid #000">
          <u style="display:block;height:0.02em;width:0.01em;background:#ccc;margin:.01em auto 0;"></u>
          <u style="display:block;width:0;margin-left:.03em;background:#eee;border-radius:50%;border:.07em solid #999;border-color:#eee #777"></u>
        </u>
      </div>
      <div style="max-height:0;max-width:0;">
        <u style="display:inline-block;width:.21em;height:.21em;margin-left:1.35em;margin-top:3.63em;border-radius:50%;background:#333;border:.01em solid #000">
          <u style="display:block;height:0.02em;width:0.01em;background:#ccc;margin:.01em auto 0;"></u>
          <u style="display:block;width:0;margin-left:.03em;background:#eee;border-radius:50%;border:.07em solid #999;border-color:#eee #777"></u>
        </u>
      </div>

      <div style="max-height:0;max-width:0;">
        <u style="display:inline-block;width:.08em;height:.08em;margin-left:1.72em;margin-top:3.43em;border-radius:50%;background: #111;border:.03em solid #999;border-color:#999 #888"><u style="display:block;width:.01em;height:.02em;margin-top:.01em;margin-left:.01em;border-radius:50%;border:.02em solid #555;border-width:.02em .02em .02em .03em;background:#ccc"></u></u>
      </div>
      <div style="max-height:0;max-width:0;">
        <u style="display:inline-block;width:.04em;height:0;margin-left:1.75em;margin-top:3.5em;border-radius:0 0 50% 50%;border-bottom:.15em solid #222;border-left:.02em solid transparent;border-right:.02em solid transparent;">
        </u>
      </div>
      <div style="max-height:0;max-width:0;">
        <u style="display:inline-block;width:.02em;height:.03em;margin-left:1.76em;margin-top:3.59em;border-radius:50%;background:#777;border:.01em solid #333;border-width:0 .04em .03em 0">
        </u>
      </div>

    </div>

    <!--  Pickups -->
    <div class="pickups">
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.55em;width:.21em;margin-left: 2.58em;margin-top: 2.26em;border-radius:.08em;background:#222;border-style: ridge solid groove;border-color:#aaa #999 #aaa #666;border-width:.05em .02em;">
          <u style="display:block;width:0;height:.02em;border-radius:50%;border-style:solid;border-color:#999 #333 #333 #111;border-width:.02em .04em .04em .04em;margin:.03em 0 0 .06em"></u>
          <u style="display:block;width:0;height:.02em;border-radius:50%;border-style:solid;border-color:#999 #333 #333 #111;border-width:.02em .04em .04em .04em;margin:.05em 0 0 .06em"></u>
          <u style="display:block;width:0;height:.02em;border-radius:50%;border-style:solid;border-color:#999 #333 #333 #111;border-width:.02em .04em .04em .04em;margin:.06em 0 0 .06em"></u>
          <u style="display:block;width:0;height:.02em;border-radius:50%;border-style:solid;border-color:#999 #333 #333 #111;border-width:.02em .04em .04em .04em;margin:.05em 0 0 .06em"></u>
        </u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.01em;width:.01em;margin-left: 2.69em;margin-top: 2.19em;border-radius:50%;background:#666;border:.01em solid #eee;border-color:#ddd #999 #ccc #666"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.01em;width:.01em;margin-left: 2.69em;margin-top: 2.94em;border-radius:50%;background:#666;border:.01em solid #eee;border-color:#ddd #999 #ccc #666"></u>
      </div>

      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:1.3em;width:.62em;margin-left: 1.4em;margin-top: 1.9em;border-radius:.07em;background:#40404a;border:.01em ridge #999;border-width:.01em 0"></u>
      </div>

      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:1.29em;width:.42em;margin-left: 1.51em;margin-top: 1.9em;border-radius:.07em;background:#5f5f6d;border:.01em solid #777;border-right-color:#aaa"> </u>
      </div>

      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:1.29em;width:.34em;margin-left: 1.54em;margin-top: 1.9em;border-radius:.13em;background:#40404a;border-style:solid ridge solid ridge;border-width:.01em .03em .01em .03em;border-color:#999 #bbb #ccc #999">
          <u style="display:block;height:.7em;width:.3em;
background:#2f2f37;border:.01em solid #222;border-top:.01em solid #bbb;border-bottom:.31em solid #222;margin-top:.15em;margin-left:.01em"></u>
        </u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.72em;width:.22em;margin-left: 1.62em;margin-top: 2.18em;border-radius:.02em;background:#222;border:.01em solid #555;border-bottom-color:#999"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.61em;width:.26em;margin-left: 1.6em;margin-top: 2.25em;border-radius:.07em;background:#111;border:.01em ridge #999;border-width:.01em 0">
          <u style="display:block;width:0;height:.02em;border-radius:50%;border-style:solid;border-color:#999 #333 #333 #111;border-width:.02em .04em .04em .04em;margin:.04em 0 0 .09em"></u>
          <u style="display:block;width:0;height:.02em;border-radius:50%;border-style:solid;border-color:#999 #333 #333 #111;border-width:.02em .04em .04em .04em;margin:.08em 0 0 .09em"></u>
          <u style="display:block;width:0;height:.02em;border-radius:50%;border-style:solid;border-color:#999 #333 #333 #111;border-width:.02em .04em .04em .04em;margin:.08em 0 0 .09em"></u>
          <u style="display:block;width:0;height:.02em;border-radius:50%;border-style:solid;border-color:#999 #333 #333 #111;border-width:.02em .04em .04em .04em;margin:.08em 0 0 .09em"></u>
        </u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.01em;width:.01em;margin-left: 1.43em;margin-top: 2.13em;border-radius:50%;background:#111;border:.02em solid #eee;border-color:#aaa #999 #bbb #666"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.01em;width:.01em;margin-left: 1.43em;margin-top: 2.94em;border-radius:50%;background:#111;border:.02em solid #eee;border-color:#aaa #999 #bbb #666"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.01em;width:.01em;margin-left: 1.96em;margin-top: 2.18em;border-radius:50%;background:#111;border:.02em solid #eee;border-color:#aaa #999 #bbb #666"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.01em;width:.01em;margin-left: 1.96em;margin-top: 2.91em;border-radius:50%;background:#111;border:.02em solid #eee;border-color:#aaa #999 #bbb #666"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.03em;width:.03em;margin-left: 1.69em;margin-top: 1.95em;border-radius:50%;background:#333;border:.03em solid #eee;border-color:#888 #999 #bbb #666"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.03em;width:.03em;margin-left: 1.69em;margin-top: 3.09em;border-radius:50%;background:#333;border:.03em solid #eee;border-color:#888 #999 #bbb #666"></u>
      </div>
    </div>

    <!-- Bridge -->
    <div class="bridge">
      <div style="max-height:0;max-width:0">
        <u style="display:inline-block;margin:2.23em 0 0 .15em;background:#212126;height:.65em;width:.9em;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display:inline-block;margin:2.23em 0 0 .08em;background:#212126;height:.65em;width:.08em;border-radius:70% 0 0 70%;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display:inline-block;margin:2.12em 0 0 .78em;background:#40404a;height:.88em;width:.23em;border-radius:0 .02em .02em 0;border-right:.04em solid #999;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display:inline-block;margin:2.12em 0 0 .11em;border-left:.67em solid transparent;border-bottom:.12em solid #2f2f37;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display:inline-block;margin:2.88em 0 0 .11em;border-left:.67em solid transparent;border-top:.12em solid #2f2f37;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display:inline-block;margin:2.2em 0 0 .35em;background:#5f5f6d;height:.71em;width:.07em;border-radius:70% .03em .03em 70%;border-style:solid;border-width:.01em .02em .01em .01em;border-color:#ccd #aab #ccd #aab"><u style="display:block;height:0.03em;width:.03em;background:#3f3b27;margin:.08em 0 0 .01em;border-right:.05em solid #a99d5e;border-bottom:.05em solid #867d4d;border-radius:.01em"></u><u style="display:block;height:0.03em;width:.03em;background:#3f3b27;margin:.08em 0 0 .01em;border-right:.05em solid #a99d5e;border-bottom:.05em solid #867d4d;border-radius:.01em"></u><u style="display:block;height:0.03em;width:.03em;background:#3f3b27;margin:.08em 0 0 .01em;border-right:.05em solid #a99d5e;border-bottom:.05em solid #867d4d;border-radius:.01em"></u><u style="display:block;height:0.03em;width:.03em;background:#3f3b27;margin:.08em 0 0 .01em;border-right:.05em solid #a99d5e;border-bottom:.05em solid #867d4d;border-radius:.01em"></u>
        </u>
      </div>

      <div style="max-height:0;max-width:0">
        <u style="display:inline-block;margin:2.18em 0 0 .44em;background:#eef;height:.77em;width:.39em;border-radius:30% .01em .07em 20%;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display:inline-block;margin:2.2em 0 0 .45em;background:#5f5f6d;height:.63em;width:.28em;border-radius:.17em .17em 0 .1em;border:.02em solid #778;border-width:.02em 0;overflow:hidden;">
          <u style="display:block;height:.3em;width:.3em;background:#40404a;border-radius:0 0 0 100%;"></u>
        </u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display:inline-block;margin:2.15em 0 0 .64em;background:#40404a;height:.6em;width:.21em;border-radius:.1em 40% .1em 70%;border-top:.03em solid #eef"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display:inline-block;margin:2.16em 0 0 .64em;height:.78em;width:.18em;border-radius:.1em;border-style:solid;border-width:.01em;border-color:#2f2f37;overflow:hidden;">
          <u style="display:block;height:0.03em;width:.1em;background:#112;margin:.1em 0 0 .01em;border-bottom:.03em solid #aab;border-top:.06em solid #aab"></u>
          <u style="display:block;height:0.03em;width:.1em;background:#112;margin:.03em 0 0 .02em;border-bottom:.03em solid #aab;border-top:.07em solid #aab"></u>
          <u style="display:block;height:0.03em;width:.1em;background:#112;margin:.03em 0 0 .04em;border-bottom:.05em solid #aab;border-top:.05em solid #aab"></u>
          <u style="display:block;height:0.03em;width:.1em;background:#112;margin:.03em 0 0 .05em;border-bottom:.04em solid #aab;border-top:.06em solid #aab"></u>
        </u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display:inline-block;margin:2.14em 0 0 .84em;height:.82em;width:.16em;border-radius:.1em;border-style:solid;border-width:.01em .04em .01em .01em;border-color:#aaa #aaa #aaa #2f2f37;background:#50505a">
          <u style="display:block;height:.08em;width:.08em;border-radius:50%;background:#334;margin-left:0.02em;border-style:solid;border-width:0 0 .01em .01em;border-color:#223 #334 #ccd #223"></u><u style="display:block;height:.09em;width:.14em;margin-top:.04em;background:#333;border-style:solid;border-color:#cce #3f3b27 #cce #778;border-width:.01em .03em 0 .01em;border-radius:0 20% 20% 0"></u><u style="display:block;height:.09em;width:.14em;margin-top:.04em;background:#333;border-style:solid;border-color:#cce #3f3b27 #cce #778;border-width:.01em .03em 0 .01em;border-radius:0 20% 20% 0"></u><u style="display:block;height:.09em;width:.14em;margin-top:.06em;background:#333;border-style:solid;border-color:#cce #3f3b27 #cce #778;border-width:.01em .03em 0 .01em;border-radius:0 20% 20% 0"></u><u style="display:block;height:.1em;width:.14em;margin-top:.06em;background:#333;border-style:solid;border-color:#cce #3f3b27 #cce #778;border-width:.01em .03em .01em .01em;border-radius:0 20% 20% 0"></u><u style="display:block;height:.08em;width:.08em;border-radius:50%;background:#334;margin:.03em 0 0 0.02em;border-style:solid;border-width:0 0 .01em .01em;border-color:#223 #334 #ccd #223"></u>
        </u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.03em;width:.03em;margin-left: .47em;margin-top: 2.29em;border-radius:50%;background:#888;border:.02em solid #eee;border-color:#ddd #ccc #eee #888"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.03em;width:.03em;margin-left: .47em;margin-top: 2.78em;border-radius:50%;background:#888;border:.02em solid #eee;border-color:#ddd #ccc #eee #888"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.02em;width:.02em;margin-left:.74em;margin-top: 2.9em;border-radius:50%;background:#222;"></u>
      </div>
    </div>

    <!-- Neck -->
    <div class="neck">
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:0;width:0;border:.1em solid transparent;border-bottom:.01em solid #ddddc5;border-left:5.17em solid #ddddc5;margin-left: 3.07em;margin-top: 2.33em;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:0;width:0;border:.1em solid transparent;border-top:.01em solid #ddddc5;border-left:5.17em solid #ddddc5;margin-left: 3.07em;margin-top: 2.77em;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.55em;width:.01em;background:#ddddc5;margin-left: 3.06em;margin-top: 2.33em;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.32em;width:5.17em;background:#77462c;margin-left: 3.07em;margin-top: 2.44em;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:0;width:0;border:.1em solid transparent;border-bottom:.01em solid #77462c;border-left:5.17em solid #77462c;margin-left: 3.07em;margin-top: 2.34em;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:0;width:0;border:.1em solid transparent;border-top:.01em solid #77462c;border-left:5.17em solid #77462c;margin-left: 3.07em;margin-top: 2.76em;"></u>
      </div>

    </div>

    <!-- Frets -->
    <div class="frets">
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.5em;width:.01em;margin-left: 3.17em;margin-top: 2.35em;background:#aaa;border:.01em solid #666;border-radius:40%;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.49em;width:.01em;margin-left: 3.31em;margin-top: 2.35em;background:#aaa;border:.01em solid #666;border-radius:40%;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.49em;width:.01em;margin-left: 3.46em;margin-top: 2.35em;background:#aaa;border:.01em solid #666;border-radius:40%;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.49em;width:.01em;margin-left: 3.62em;margin-top: 2.35em;background:#aaa;border:.01em solid #666;border-radius:40%;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.47em;width:.01em;margin-left: 3.79em;margin-top: 2.36em;background:#aaa;border:.01em solid #666;border-radius:40%;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.47em;width:.01em;margin-left: 3.97em;margin-top: 2.36em;background:#aaa;border:.01em solid #666;border-radius:40%;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.45em;width:.01em;margin-left: 4.16em;margin-top: 2.365em;background:#aaa;border:.01em solid #666;border-radius:40%;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.45em;width:.01em;margin-left: 4.36em;margin-top: 2.37em;background:#aaa;border:.01em solid #666;border-radius:40%;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.45em;width:.01em;margin-left: 4.57em;margin-top: 2.37em;background:#aaa;border:.01em solid #666;border-radius:40%;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.44em;width:.01em;margin-left: 4.79em;margin-top: 2.37em;background:#aaa;border:.01em solid #666;border-radius:40%;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.43em;width:.01em;margin-left: 5.03em;margin-top: 2.38em;background:#aaa;border:.01em solid #666;border-radius:40%;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.42em;width:.01em;margin-left: 5.28em;margin-top: 2.38em;background:#aaa;border:.01em solid #666;border-radius:40%;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.4em;width:.01em;margin-left: 5.54em;margin-top: 2.39em;background:#aaa;border:.01em solid #666;border-radius:40%;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.4em;width:.01em;margin-left: 5.82em;margin-top: 2.39em;background:#aaa;border:.01em solid #666;border-radius:40%;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.38em;width:.01em;margin-left: 6.11em;margin-top: 2.40em;background:#aaa;border:.01em solid #666;border-radius:40%;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.38em;width:.01em;margin-left: 6.41em;margin-top: 2.4em;background:#aaa;border:.01em solid #666;border-radius:40%;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.37em;width:.01em;margin-left: 6.75em;margin-top: 2.41em;background:#aaa;border:.01em solid #666;border-radius:40%;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.35em;width:.01em;margin-left: 7.09em;margin-top: 2.42em;background:#aaa;border:.01em solid #666;border-radius:40%;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.34em;width:.01em;margin-left: 7.45em;margin-top: 2.42em;background:#aaa;border:.01em solid #666;border-radius:40%;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.33em;width:.01em;margin-left: 7.84em;margin-top: 2.43em;background:#aaa;border:.01em solid #666;border-radius:40%;"></u>
      </div>

      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;width:.01em;margin-left: 3.36em;margin-top: 2.37em;border-top:.47em solid #92925d;border-right:.08em solid transparent;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;width:.01em;margin-left: 3.67em;margin-top: 2.38em;border-top:.45em solid #92925d;border-right:.1em solid transparent;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;width:.01em;margin-left: 4.02em;margin-top: 2.38em;border-top:.45em solid #92925d;border-right:.12em solid transparent;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;width:.01em;margin-left: 4.62em;margin-top: 2.4em;border-top:.41em solid #92925d;border-right:.14em solid transparent;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;width:.01em;margin-left: 5.33em;margin-top: 2.42em;border-top:.38em solid #92925d;border-right:.17em solid transparent;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;width:.01em;margin-left: 5.86em;margin-top: 2.43em;border-top:.36em solid #92925d;border-right:.21em solid transparent;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;width:.01em;margin-left: 6.46em;margin-top: 2.44em;border-top:.34em solid #92925d;border-right:.24em solid transparent;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;width:.01em;margin-left: 7.14em;margin-top: 2.45em;border-top:.32em solid #92925d;border-right:.27em solid transparent;"></u>
      </div>
    </div>

    <!--  Machine heads -->
    <div class="machine-heads">
      <div style="max-height:0;max-width:0;">
        <u style="display:inline-block;width:.12em;height:.14em;margin-left:8.97em;margin-top:2.05em;border-radius:60% 50% 0 80%;background:#999;border-top:.01em solid #777;border-left:.01em solid #555;border-bottom:.01em solid #555;"></u>
      </div>
      <div style="max-height:0;max-width:0;">
        <u style="display:inline-block;width:.13em;height:.14em;margin-left:9.16em;margin-top:2.05em;border-radius:50% 60% 80% 0;background:#999;border-top:.01em solid #a1a1a1;border-right:.01em solid #aaa"></u>
      </div>
      <div style="max-height:0;max-width:0;">
        <u style="display:inline-block;width:.16em;height:.2em;margin-left:9.05em;margin-top:2.01em;border-radius:50%;background:#999;border-top:.01em solid #aaa;"></u>
      </div>
      <div style="max-height:0;max-width:0;">
        <u style="display:inline-block;width:0;border-top:#999 solid .1em;margin-top:2.18em;margin-left:8.99em;border-left:.14em solid transparent;border-right:.14em solid transparent;"></u>
      </div>
      <div style="max-height:0;max-width:0;"><u style="display:inline-block;background:#929292;height:.18em;width:.21em;margin-left:8.98em;margin-top:2.06em;border-radius:30% 80% 0 80%;"></u>
      </div>
      <div style="max-height:0;max-width:0;">
        <u style="display:inline-block;width:.06em;height:.1em;margin-top:2.18em;margin-left:9.09em;background:#777;border:.001em solid #666;border-color:#666 #aaa #666 #666;border-radius:.05em;"></u>
      </div>

      <div style="max-height:0;max-width:0;">
        <u style="display:inline-block;width:.12em;height:.14em;margin-left:9.34em;margin-top:2.05em;border-radius:60% 50% 0 80%;background:#999;border-top:.01em solid #777;border-left:.01em solid #555;border-bottom:.01em solid #555;"></u>
      </div>
      <div style="max-height:0;max-width:0;">
        <u style="display:inline-block;width:.13em;height:.14em;margin-left:9.52em;margin-top:2.05em;border-radius:50% 60% 80% 0;background:#999;border-top:.01em solid #a1a1a1;border-right:.01em solid #aaa"></u>
      </div>
      <div style="max-height:0;max-width:0;">
        <u style="display:inline-block;width:.16em;height:.2em;margin-left:9.42em;margin-top:2.01em;border-radius:50%;background:#999;border-top:.01em solid #aaa;"></u>
      </div>
      <div style="max-height:0;max-width:0;">
        <u style="display:inline-block;width:0;border-top:#999 solid .1em;margin-top:2.18em;margin-left:9.36em;border-left:.14em solid transparent;border-right:.14em solid transparent;"></u>
      </div>
      <div style="max-height:0;max-width:0;"><u style="display:inline-block;background:#929292;height:.18em;width:.21em;margin-left:9.35em;margin-top:2.06em;border-radius:30% 80% 0 80%;"></u>
      </div>
      <div style="max-height:0;max-width:0;">
        <u style="display:inline-block;width:.06em;height:.1em;margin-top:2.18em;margin-left:9.46em;background:#777;border:.001em solid #666;border-color:#666 #aaa #666 #666;border-radius:.05em;"></u>
      </div>

      <div style="max-height:0;max-width:0;">
        <u style="display:inline-block;width:.13em;height:.16em;margin-left:9.52em;margin-top:3.01em;border-radius:0 80% 60% 50% ;background:#929292;border-bottom:.01em solid #a1a1a1;border-right:.01em solid #aaa"></u>
      </div>
      <div style="max-height:0;max-width:0;">
        <u style="display:inline-block;width:.13em;height:.16em;margin-left:9.34em;margin-top:3.01em;border-radius:80% 0 50% 60%;background:#929292;border-bottom:.01em solid #666;border-left:.01em solid #555"></u>
      </div>
      <div style="max-height:0;max-width:0;">
        <u style="display:inline-block;width:.16em;height:.2em;margin-left:9.42em;margin-top:3.01em;border-radius:50%;background:#929292;border-bottom:.01em solid #666;"></u>
      </div>
      <div style="max-height:0;max-width:0;">
        <u style="display:inline-block;width:0;border-bottom:#929292 solid .1em;margin-top:2.93em;margin-left:9.36em;border-left:.14em solid transparent;border-right:.14em solid transparent;"></u>
      </div>
      <div style="max-height:0;max-width:0;"><u style="display:inline-block;background:#9c9c9c;height:.2em;width:.2em;margin-left:9.45em;margin-top:2.97em;border-radius:0 80% 30% 80%;"></u>
      </div>
      <div style="max-height:0;max-width:0;">
        <u style="display:inline-block;width:.06em;height:.1em;margin-top:2.92em;margin-left:9.46em;background:#888;border:.001em solid #666;border-color:#666 #aaa #666 #666;border-radius:.05em;"></u>
      </div>

      <div style="max-height:0;max-width:0;">
        <u style="display:inline-block;width:.13em;height:.16em;margin-left:9.52em;margin-top:2.53em;border-radius:0 80% 60% 50% ;background:#929292;border-bottom:.01em solid #a1a1a1;border-right:.01em solid #aaa"></u>
      </div>
      <div style="max-height:0;max-width:0;">
        <u style="display:inline-block;width:.13em;height:.16em;margin-left:8.84em;margin-top:3.03em;border-radius:80% 0 50% 60%;background:#929292;border-bottom:.01em solid #666;border-left:.01em solid #555"></u>
      </div>
      <div style="max-height:0;max-width:0;">
        <u style="display:inline-block;width:.16em;height:.2em;margin-left:8.92em;margin-top:3.03em;border-radius:50%;background:#929292;border-bottom:.01em solid #666;"></u>
      </div>
      <div style="max-height:0;max-width:0;">
        <u style="display:inline-block;width:0;border-bottom:#929292 solid .1em;margin-top:2.95em;margin-left:8.86em;border-left:.14em solid transparent;border-right:.14em solid transparent;"></u>
      </div>
      <div style="max-height:0;max-width:0;"><u style="display:inline-block;background:#9c9c9c;height:.2em;width:.2em;margin-left:8.95em;margin-top:2.99em;border-radius:0 80% 30% 80%;"></u>
      </div>
      <div style="max-height:0;max-width:0;">
        <u style="display:inline-block;width:.06em;height:.1em;margin-top:2.94em;margin-left:8.96em;background:#888;border:.001em solid #666;border-color:#666 #aaa #666 #666;border-radius:.05em;"></u>
      </div>

    </div>

    <!-- Head -->
    <div class="head">
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height: 0.5em;width: 1.05em;background: #ddddc5;margin-left: 8.65em;margin-top: 2.4em;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.31em;width:.18em;background:#ddddc5;margin-left: 9.79em;margin-top: 2.24em;border-radius:3% 100% 50% 100%"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.18em;width:.19em;margin-left:9.6em;margin-top: 2.41em;border-radius:50% 50% 50% 0;border:.1em solid transparent;border-color:#ddddc5 transparent transparent #ddddc5"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height: .7em;width: 0.82em;margin-left: 8.25em;margin-top: 1.74em;border-radius: 0 0 100% 0;border-bottom: .3em solid #ddddc5;border-right: .3em solid transparent;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height: 1.3em;width: 0.75em;margin-left: 8.25em;margin-top: 2.47em;border-radius: 0 100% 0 0;border-top: .3em solid #ddddc5;border-right: .3em solid transparent;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height: .5em;width: 1.1em;margin-left: 8.55em;margin-top: 2.73em;border-radius: 100% 60% 0 0;border-top: .22em solid #ddddc5;border-right: .05em solid transparent;border-left: .1em solid transparent;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:0;width:0;margin-left: 9.7em;margin-top: 2.59em;border-top: .37em solid transparent;border-right: .05em solid transparent;border-left: .09em solid #ddddc5;vertical-align:top"></u>
        <u style="display: inline-block;height:0;width:0;margin-left: 9.68em;border-radius: 0;border-bottom: .05em solid transparent;border-right: .1em solid #ddddc5;vertical-align: top;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height: 0;width: 0;margin-left: 9.78em;margin-top: 2.95em;border-top: .06em solid transparent;border-left: .02em solid #ddddc5;border-radius: 0 0 50% 0;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height: .09em;width: .96em;margin-left: 8.73em;margin-top: 2.17em;border-radius: 0 0 10% 100%;border-bottom: .22em solid #ddddc5;border-right: .05em solid transparent;border-left: .1em solid transparent;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height: .09em;width: .96em;margin-left: 8.74em;margin-top: 2.17em;border-radius: 0 0 65% 0;border-bottom: .1em solid #ddddc5;border-right: .05em solid transparent;border-left: .1em solid transparent;"></u>
      </div>
    </div>

    <!-- Head plate -->
    <div class="head-plate">
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.32em;width:1.3em;background:#111;margin-left:8.25em;margin-top: 2.45em;border-radius:0% 100% 0 0"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height: .07em;width: .7em;background: #ddddc5;margin-left: 8.36em;margin-top: 2.72em;border-radius: 100% 0% 0 0;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height: .07em;width: .65em;background: #ddddc5;margin-left: 8.92em;margin-top: 2.72em;border-radius: 0 100% 0 0;"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height: .06em;width: .06em;margin-left: 9.42em;margin-top: 2.65em;border-radius:50%;border:.05em solid transparent;border-color:transparent #ddddc5 #ddddc5 transparent"></u>
      </div>
      <div style="max-height:0;max-width:0">
        <u style="display: inline-block;height:.37em;width:.04em;background:#111;margin-left:8.24em;margin-top: 2.42em;"></u>
      </div>
    </div>

    <!-- Machine heads front-->
    <div class="machine-heads-front">
      <div style="max-height:0;max-width:0;">
        <u style="display:inline-block;width:.16em;height:.16em;margin-left:9.01em;margin-top:2.35em;border-radius:50%;background:#222;">
          <u style="display:block;width:.09em;height:.01em;margin:.03em 0 0 .05em; background:#111;border-radius:50%;border-top:.04em solid #888;border-bottom:.04em solid #888;"></u>
        </u>
      </div>
      <div style="max-height:0;max-width:0;">
        <u style="display:inline-block;width:.16em;height:.16em;margin-left:9.4em;margin-top:2.35em;border-radius:50%;background:#222;">
          <u style="display:block;width:.01em;height:.09em;margin:.03em 0 0 .05em; background:#111;border-radius:50%;border-left:.04em solid #888;border-right:.04em solid #888;"></u>
        </u>
      </div>

      <div style="max-height:0;max-width:0;">
        <u style="display:inline-block;width:.16em;height:.16em;margin-left:9.37em;margin-top:2.74em;border-radius:50%;background:#222;">
          <u style="display:block;width:.01em;height:.09em;margin:.03em 0 0 .05em; background:#111;border-radius:50%;border-left:.04em solid #888;border-right:.04em solid #888;"></u>
        </u>
      </div>
      <div style="max-height:0;max-width:0;">
        <u style="display:inline-block;width:.16em;height:.16em;margin-left:8.86em;margin-top:2.74em;border-radius:50%;background:#222;">
          <u style="display:block;width:.09em;height:.01em;margin:.03em 0 0 .05em; background:#111;border-radius:50%;border-top:.04em solid #888;border-bottom:.04em solid #888;"></u>
        </u>
      </div>
    </div>

    <!-- Strings -->
    <div class="strings">
      <div class="e">
        <div style="max-height:0;max-width:0;">
          <u style="margin:2.33em 0 0 .4em;display:inline-block;">
            <u style="display:block;border-top:.02em solid transparent;border-left:1.6em solid #999;vertical-align:top;"></u>
            <u style="display:block;border-bottom:.02em solid transparent;border-right:1.6em solid #888;vertical-align:top;"></u>
          </u>
        </div>
        <div style="max-height:0;max-width:0;">
          <u style="margin:2.35em 0 0 2em;display:inline-block;">
            <u style="display:block;border-top:.02em solid transparent;border-left:1.6em solid #999;vertical-align:top;"></u>
            <u style="display:block;border-bottom:.02em solid transparent;border-right:1.6em solid #888;vertical-align:top;"></u>
          </u>
        </div>
        <div style="max-height:0;max-width:0;">
          <u style="margin:2.38em 0 0 3.6em;display:inline-block;">
            <u style="display:block;border-top:.02em solid transparent;border-left:1.6em solid #999;vertical-align:top;"></u>
            <u style="display:block;border-bottom:.02em solid transparent;border-right:1.6em solid #888;vertical-align:top;"></u>
          </u>
        </div>
        <div style="max-height:0;max-width:0;">
          <u style="margin:2.40em 0 0 5.2em;display:inline-block;">
            <u style="display:block;border-top:.02em solid transparent;border-left:1.6em solid #999;vertical-align:top;"></u>
            <u style="display:block;border-bottom:.02em solid transparent;border-right:1.6em solid #888;vertical-align:top;"></u>
          </u>
        </div>
        <div style="max-height:0;max-width:0;">
          <u style="margin:2.43em 0 0 6.8em;display:inline-block;">
            <u style="display:block;border-top:.02em solid transparent;border-left:2.28em solid #999;vertical-align:top;"></u>
            <u style="display:block;border-bottom:.02em solid transparent;border-right:2.28em solid #888;vertical-align:top;"></u>
          </u>
        </div>
      </div>

      <div class="a">
        <div style="max-height:0;max-width:0;">
          <u style="margin:2.49em 0 0 .4em;display:inline-block;">
            <u style="display:block;border-top:.02em solid transparent;border-left:2.3em solid #999;vertical-align:top;"></u>
            <u style="display:block;border-bottom:.01em solid transparent;border-right:2.3em solid #888;vertical-align:top;"></u>
          </u>
        </div>
        <div style="max-height:0;max-width:0;">
          <u style="margin:2.51em 0 0 2.7em;display:inline-block;">
            <u style="display:block;border-top:.02em solid transparent;border-left:2.8em solid #999;vertical-align:top;"></u>
            <u style="display:block;border-bottom:.01em solid transparent;border-right:2.8em solid #888;vertical-align:top;"></u>
          </u>
        </div>
        <div style="max-height:0;max-width:0;">
          <u style="margin:2.53em 0 0 5.5em;display:inline-block;">
            <u style="display:block;border-top:.02em solid transparent;border-left:2.78em solid #999;vertical-align:top;"></u>
            <u style="display:block;border-bottom:.01em solid transparent;border-right:2.78em solid #888;vertical-align:top;"></u>
          </u>
        </div>

        <div style="max-height:0;max-width:0;">
          <u style="margin:2.53em 0 0 8.28em;display:inline-block;">
            <u style="display:block;border-top:.01em solid transparent;border-right:.2em solid #999;vertical-align:top;"></u>
            <u style="display:block;border-bottom:.01em solid transparent;border-left:.2em solid #888;vertical-align:top;"></u>
          </u>
        </div>
        <div style="max-height:0;max-width:0;">
          <u style="margin:2.52em 0 0 8.48em;display:inline-block;">
            <u style="display:block;border-top:.01em solid transparent;border-right:.2em solid #999;vertical-align:top;"></u>
            <u style="display:block;border-bottom:.01em solid transparent;border-left:.2em solid #888;vertical-align:top;"></u>
          </u>
        </div>
        <div style="max-height:0;max-width:0;">
          <u style="margin:2.5em 0 0 8.68em;display:inline-block;">
            <u style="display:block;border-top:.01em solid transparent;border-right:.2em solid #999;vertical-align:top;"></u>
            <u style="display:block;border-bottom:.01em solid transparent;border-left:.2em solid #888;vertical-align:top;"></u>
          </u>
        </div>
        <div style="max-height:0;max-width:0;">
          <u style="margin:2.49em 0 0 8.88em;display:inline-block;">
            <u style="display:block;border-top:.01em solid transparent;border-right:.2em solid #999;vertical-align:top;"></u>
            <u style="display:block;border-bottom:.01em solid transparent;border-left:.2em solid #888;vertical-align:top;"></u>
          </u>
        </div>
        <div style="max-height:0;max-width:0;">
          <u style="margin:2.48em 0 0 9.08em;display:inline-block;">
            <u style="display:block;border-top:.01em solid transparent;border-right:.2em solid #999;vertical-align:top;"></u>
            <u style="display:block;border-bottom:.01em solid transparent;border-left:.2em solid #888;vertical-align:top;"></u>
          </u>
        </div>
        <div style="max-height:0;max-width:0;">
          <u style="margin:2.47em 0 0 9.28em;display:inline-block;">
            <u style="display:block;border-top:.01em solid transparent;border-right:.2em solid #999;vertical-align:top;"></u>
            <u style="display:block;border-bottom:.01em solid transparent;border-left:.2em solid #888;vertical-align:top;"></u>
          </u>
        </div>
      </div>

      <div class="d">
        <div style="max-height:0;max-width:0;">
          <u style="margin:2.64em 0 0 .4em;display:inline-block;">
            <u style="display:block;border-top:.01em solid transparent;border-left:7.88em solid #999;vertical-align:top;"></u>
            <u style="display:block;border-bottom:.01em solid transparent;border-right:7.88em solid #888;vertical-align:top;"></u>
          </u>
        </div>
        <div style="max-height:0;max-width:0;">
          <u style="margin:2.66em 0 0 8.28em;display:inline-block;">
            <u style="display:block;border-top:.01em solid transparent;border-left:.2em solid #999;vertical-align:top;"></u>
            <u style="display:block;border-bottom:.01em solid transparent;border-right:.2em solid #888;vertical-align:top;"></u>
          </u>
        </div>
        <div style="max-height:0;max-width:0;">
          <u style="margin:2.67em 0 0 8.48em;display:inline-block;">
            <u style="display:block;border-top:.01em solid transparent;border-left:.21em solid #999;vertical-align:top;"></u>
            <u style="display:block;border-bottom:.01em solid transparent;border-right:.21em solid #888;vertical-align:top;"></u>
          </u>
        </div>
        <div style="max-height:0;max-width:0;">
          <u style="margin:2.7em 0 0 8.68em;display:inline-block;">
            <u style="display:block;border-top:.01em solid transparent;border-left:.21em solid #999;vertical-align:top;"></u>
            <u style="display:block;border-bottom:.01em solid transparent;border-right:.21em solid #888;vertical-align:top;"></u>
          </u>
        </div>
        <div style="max-height:0;max-width:0;">
          <u style="margin:2.71em 0 0 8.88em;display:inline-block;">
            <u style="display:block;border-top:.01em solid transparent;border-left:.21em solid #999;vertical-align:top;"></u>
            <u style="display:block;border-bottom:.01em solid transparent;border-right:.21em solid #888;vertical-align:top;"></u>
          </u>
        </div>
        <div style="max-height:0;max-width:0;">
          <u style="margin:2.74em 0 0 9.08em;display:inline-block;">
            <u style="display:block;border-top:.01em solid transparent;border-left:.2em solid #999;vertical-align:top;"></u>
            <u style="display:block;border-bottom:.01em solid transparent;border-right:.2em solid #888;vertical-align:top;"></u>
          </u>
        </div>
        <div style="max-height:0;max-width:0;">
          <u style="margin:2.75em 0 0 9.28em;display:inline-block;">
            <u style="display:block;border-top:.01em solid transparent;border-left:.18em solid #999;vertical-align:top;"></u>
            <u style="display:block;border-bottom:.01em solid transparent;border-right:.18em solid #888;vertical-align:top;"></u>
          </u>
        </div>

      </div>

      <div class="g">
        <div style="max-height:0;max-width:0;">
          <u style="margin:2.8em 0 0 .4em;display:inline-block;">
            <u style="display:block;border-top:.01em solid transparent;border-right:2.4em solid #999;vertical-align:top;"></u>
            <u style="display:block;border-bottom:.01em solid transparent;border-left:2.4em solid #888;vertical-align:top;"></u>
          </u>
        </div>
        <div style="max-height:0;max-width:0;">
          <u style="margin:2.79em 0 0 2.8em;display:inline-block;">
            <u style="display:block;border-top:.01em solid transparent;border-left:2.2em solid #999;vertical-align:top;"></u>
            <u style="display:block;border-bottom:.01em solid transparent;border-right:2.2em solid #888;vertical-align:top;"></u>
          </u>
        </div>
        <div style="max-height:0;max-width:0;">
          <u style="margin:2.77em 0 0 5em;display:inline-block;">
            <u style="display:block;border-top:.01em solid transparent;border-right:2em solid #999;vertical-align:top;"></u>
            <u style="display:block;border-bottom:.01em solid transparent;border-left:2em solid #888;vertical-align:top;"></u>
          </u>
        </div>
        <div style="max-height:0;max-width:0;">
          <u style="margin:2.75em 0 0 7em;display:inline-block;">
            <u style="display:block;border-top:.01em solid transparent;border-right:1.28em solid #999;vertical-align:top;"></u>
            <u style="display:block;border-bottom:.01em solid transparent;border-left:1.28em solid #888;vertical-align:top;"></u>
          </u>
        </div>
        <div style="max-height:0;max-width:0;">
          <u style="margin:2.75em 0 0 8.28em;display:inline-block;">
            <u style="display:block;border-top:.01em solid transparent;border-left:.35em solid #999;vertical-align:top;"></u>
            <u style="display:block;border-bottom:.01em solid transparent;border-right:.35em solid #888;vertical-align:top;"></u>
          </u>
        </div>
        <div style="max-height:0;max-width:0;">
          <u style="margin:2.76em 0 0 8.63em;display:inline-block;">
            <u style="display:block;border-top:.01em solid transparent;border-left:.34em solid #999;vertical-align:top;"></u>
            <u style="display:block;border-bottom:.01em solid transparent;border-right:.34em solid #888;vertical-align:top;"></u>
          </u>
        </div>

      </div>
    </div>
  </div>

  <!-- VML  -->
	  <v:group style="width:1000;height:500" coordsize="1000 500" class="rick">
    <v:shape class="floor" fillcolor="#96846e" stroked="f" path="M, L1000 0 1000 500 0 500 xe"/>

    <v:shape class="body" fillcolor="#DDDDC5" stroked="f" path="M416 112 l C464 116 449 145 429 160 C410 155 383 146 354 180 C335 201 313 253 313 283 C313 309 322 342 350 342 C359 342 365 380 330 376 C311 371 290 352 258 352 C193 370 183 411 101 410 C46 410 6 342 6 259 C6 168 48 108 101 108 C117 108 168 153 222 153 C319 153 368 107 416 112xe"/>
      
    <v:shape class="scratch-plate" fillcolor="#111111" stroked="f" path="M83 327L211 326C219 326 219 315 219 315C219 256 219 209 219 209 C219 197 246 209 261 209 C275 209 305 200 307 205C310 211 305 227 305 227L304 324C300 342 284 333 251 338C218 343 158 405 112 405C67 405 42 378 42 359C42 340 52 327 83 327 xe"/>

    <v:shape class="pickup-f" fillcolor="#888D8C" stroked="f" path="M259 233 C259 229 263 225 267 225 L275 225 C279 225 283 229 283 233 L283 283 C283 287 279 291 275 291 L267 291 C263 291 259 287 259 283 L259 233 xe"/>
    <v:shape class="pickup-f" fillcolor="#111111" stroked="f" path="M261 236 C261 238 263 232 265 232 L277 232 C279 232 281 234 281 236 L281 282 C281 284 279 286 277 286 L265 286 C263 286 261 284 261 282 L261 236 xe"/>
      
    <v:shape class="pickup-b" fillcolor="#888D8C" stroked="f" path="M140 198 C140 194 144 190 148 190 L195 190 C199 190 203 194 203 198 L203 315 C203 319 199 323 195 323 L148 323 C144 323 140 319 140 315 L140 198xe"/>
    <v:shape class="pickup-b" fillcolor="#111111" stroked="f" path="M160 227 C160 225 162 223 164 223 L181 223 C183 223 185 228 185 227 L185 283 C185 285 183 287 181 287 L164 287 C162 287 160 285 160 283 L160 227xe"/>
			
		<v:shape class="bridge" fillcolor="#888D8C" stroked="f" path="M101 212 C103 212 104 214 104 216 l104 296 C104 298 103 300 100 300 L71 300 L10 290 C6 260 6 252 10 222 L71 212 100 212 xe"/>
			
    <v:shape class="neck" fillcolor="#77462c" strokecolor="#DDDDC5" strokeweight="2" path="M308 232 L828 244 828 280 308 292 xe"/>
      
    <v:shape class="head" fillcolor="#DDDDC5" stroked="f" path="M828 243 l C874 243 886 219 886 219 C911 228 922 223 977 223 C1003 223 1000 255 990 253 C946 244 986 302 977 301 C897 292 867 312 867 312 C867 312 861 281 828 281 xe"/>
      
    <v:shape class="head-plate" fillcolor="#111111" stroked="f" path="M955 276 C955 276 924 273 887 274C872 274 828 280 828 280 l828 281 826 281 826 243 828 243 828 246 C828 246 953 250 955 276 xe"/>

    <v:shape class="mashine-head" fillcolor="#999" stroked="f" path="M929 211 C929 211 927 224 913 224 C899 224 897 211 897 211 C897 211 897 205 906 205 C906 200 913 200 913 200 C913 200 921 200 921 205 C929 205 929 211 929 211 xe"/>
    <v:shape class="mashine-head" fillcolor="#999" stroked="f" path="M934 210 C934 210 936 223 950 223 C964 223 967 210 966 210 C966 210 967 204 958 204 C958 199 950 199 950 199 C950 199 943 199 943 204 C934 204 934 210 934 210 xe"/>
    <v:shape class="mashine-head" fillcolor="#999" stroked="f" path="M933 312 C933 312 935 299 949 299 C963 299 966 312 966 312 C966 312 966 319 957 319 C957 323 949 323 949 323 C949 323 942 323 942 319 C933 319 933 312 933 312 xe"/>
    <v:shape class="mashine-head" fillcolor="#999" stroked="f" path="M882 317 C882 317 884 304 898 304 C912 304 915 317 915 317 C915 317 915 324 906 324 C906 328 898 328 898 328 C898 328 891 328 891 324 C882 324 882 317 882 317 xe"/>
      
  </v:group>
    
    </div>
</body>
</html>
              
            
!

CSS

              
                /* .rick{transform:scale(4)translate(1em,1em)} */
.rick{font-size:9vw !important;}

.floor{} 
.body{}
.scratch-plate{}
.hardware{}
.pickups{}
.bridge{}
.neck{}
.frets{}
.machine-heads{}
.head{}
.head-plate{}
.strings{}
.machine-heads-front{}


/* .rick div[style*="max-height:0"]{
  opacity:0;
  animation:appear 1s;
  animation-fill-mode: forwards; 
} */
.rick div[style*="max-height:0"]:nth-of-type(1){animation-delay:1s;}
.rick div[style*="max-height:0"]:nth-of-type(2){animation-delay:2s;}
.rick div[style*="max-height:0"]:nth-of-type(3){animation-delay:3s;}
.rick div[style*="max-height:0"]:nth-of-type(4){animation-delay:4s;}
.rick div[style*="max-height:0"]:nth-of-type(5){animation-delay:5s;}
.rick div[style*="max-height:0"]:nth-of-type(6){animation-delay:6s;}
.rick div[style*="max-height:0"]:nth-of-type(7){animation-delay:7s;}
.rick div[style*="max-height:0"]:nth-of-type(8){animation-delay:8s;}
.rick div[style*="max-height:0"]:nth-of-type(9){animation-delay:9s;}
.rick div[style*="max-height:0"]:nth-of-type(10){animation-delay:10s;}
.rick div[style*="max-height:0"]:nth-of-type(11){animation-delay:11s;}
.rick div[style*="max-height:0"]:nth-of-type(12){animation-delay:12s;}
.rick div[style*="max-height:0"]:nth-of-type(13){animation-delay:13s;}
.rick div[style*="max-height:0"]:nth-of-type(14){animation-delay:14s;}
.rick div[style*="max-height:0"]:nth-of-type(15){animation-delay:15s;}
.rick div[style*="max-height:0"]:nth-of-type(16){animation-delay:16s;}
.rick div[style*="max-height:0"]:nth-of-type(17){animation-delay:17s;}
.rick div[style*="max-height:0"]:nth-of-type(18){animation-delay:18s;}
.rick div[style*="max-height:0"]:nth-of-type(19){animation-delay:19s;}
.rick div[style*="max-height:0"]:nth-of-type(20){animation-delay:20s;}
.rick div[style*="max-height:0"]:nth-of-type(21){animation-delay:21s;}
.rick div[style*="max-height:0"]:nth-of-type(22){animation-delay:22s;}
.rick div[style*="max-height:0"]:nth-of-type(23){animation-delay:23s;}
.rick div[style*="max-height:0"]:nth-of-type(24){animation-delay:24s;}
.rick div[style*="max-height:0"]:nth-of-type(25){animation-delay:25s;}
.rick div[style*="max-height:0"]:nth-of-type(26){animation-delay:26s;}
.rick div[style*="max-height:0"]:nth-of-type(27){animation-delay:27s;}
.rick div[style*="max-height:0"]:nth-of-type(28){animation-delay:28s;}
.rick div[style*="max-height:0"]:nth-of-type(29){animation-delay:29s;}
.rick div[style*="max-height:0"]:nth-of-type(30),
.rick .floor div[style*="max-height:0"]{animation-delay:30s;}

@keyframes appear{
  100%{opacity:1}
}
              
            
!

JS

              
                // Original picture sourced from https://thebassgallery.com/products/rickenbacker-4001-1976

// I've changed this slightly to look more like mine, this one appears to have had an extra switch added.  I should have started with a pictue of my own bass but I wasn't really planning on doing the full image. This was meant to be a quick proof of concept but it got out of hand
              
            
!
999px

Console