cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
              
<html lang="en">
  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="date=no">
    <meta name="format-detection" content="address=no">
    <meta name="format-detection" content="email=no">
    <!--[if !mso]>
      <!-->
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--<![endif]-->
   
    <!--[if mso]>
      <style type="text/css">
        h3 {
        font-family: Georgia, serif; font-style:italic; font-weight:600; font-size:46px line-height:48px;
        }
      </style>
    <![endif]-->
    <!--[if mso]>
      <style type="text/css">
        p {
        font-family: Trebuchet MS, Verdana, sans-serif;
        }
      </style>
    <![endif]-->
  </head>
  
  <body margintop="0" marginleft="0" marginright="0" style="min-width:100% !important; height:100% !important; Margin:0 auto; padding:0;">
    <table cellpadding="0" cellspacing="0" border="0" width="100%">
      <tbody>
        <tr>
          <td align="center" valign="top" background="http://i2.cmail19.com/ei/d/F2/B0C/2C8/045622/new_humbugs3.png"
          style="background-size:0px;">
            <table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#2C353E">
              <tbody>
                <tr>
                  <td align="center" valign="top" class="gradient">
                    <!--[if !mso]>
                      <!-->
                      <div style="display:none !important; font-size:1px; color:#f8f8f8; line-height:1px; max-width:0; max-height:0; opacity:0; overflow:hidden; mso-hide:all;">Merry Christmas from everyone at Two. Decorate the Christmas Tree online or in
                        webkit and share with us at #XmasHTreeMaiL</div>
                    <!--<![endif]-->
                    <center style="width:100% !important; height:100% !important; table-layout:fixed !important; text-size-adjust:none !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;">
                      <!--[if (gte mso 9)|(IE)]>
                        <table width="600" align="center" cellpadding="0" cellspacing="0" border="0" role="presentation"
                        style="width:600px">
                          <tr>
                            <td width="600" valign="top">
                            <![endif]-->
                            <div class="yho" role="document" style="min-width:300px; max-width:600px;">
                              <table width="100%" align="center" cellspacing="0" cellpadding="0" border="0"
                              role="presentation" style="max-width:600px;">
                                <tbody>
                                  <tr>
                                    <td class="pad_twenty_rlb" valign="top" style="padding:0px 60px 20px 60px;">
                                      <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
                                        <tbody>
                                          <tr>
                                            <td valign="top" style="padding:30px 0 0px 0; font-family:'Pacifico-regular', Pacifico , Georgia, serif; font-size:46px; color:#efefef; line-height:64px; text-align:center; font-style:italic;">
                                              
<h3 style="margin:0;"><span class="fontnorm" style="font-size:46px;">Merry Christmas</span>
</h3>

                                            </td>
                                          </tr>
                                          <tr>
                                            <td align="center" valign="top" style="padding:15px 0 15px 0;">
                                              <table align="center" cellspacing="0" cellpadding="0" border="0" role="presentation">
                                                <tbody>
                                                  <tr>
                                                    <td valign="middle" style="font-family:Trebuchet MS, Verdana, sans-serif; font-size:18px; color:#b2b1b6; line-height:24px; mso-line-height-rule: exactly; text-align:center;">from everyone at</td>
                                                    <td align="center" valign="middle">
                                                      <a href="http://www.two-uk.com/" target="_blank">
                                                        <img src="http://i5.cmail19.com/ei/d/F2/B0C/2C8/045622/two_two_t.png" width="100"
                                                        alt="TWO" border="0" style="display: block; font-size: 20px; line-height:24px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-style:italic; width:100px; height:64px;">
                                                      </a>
                                                    </td>
                                                  </tr>
                                                </tbody>
                                              </table>
                                            </td>
                                          </tr>
                                          <tr>
                                            <td align="center" valign="top" style=" font-family:Trebuchet MS, Verdana, sans-serif; font-size:16px; color:#efefef; line-height:22px; text-align:center;">
                                              <p style="margin:0;">We would like to take this opportunity to wish you a very Merry Christmas and
                                                a Happy New Year.
                                                <br>
                                                <br>Our interactive Christmas tree was made to be decorated, so get festive and send
                                                us your creation on Twitter using
<b>#XmasHTreeMaiL</b>.</p>
                                            </td>
                                          </tr>
                                          <tr>
                                            <td id="webkit-off" align="center" valign="top" style="font-family:Trebuchet MS, Verdana, sans-serif; font-size:16px; color:#efefef; line-height:22px; text-align:center;">
                                              <p style="margin:0;">
                                                <br>Unfortunately your inbox does not support WebKit.
                                                <br class="hide">Fear not,
                                                <a href="http://twouk.cmail20.com/t/ViewEmail/d/7BBAF227BB35BE3A/FA12A463E9E5A76B4E9AB52EF5D51DA2"
                                                style="color:#efefef; text-decoration:underline; font-weight:bold;">view this email online</a>and share your creations with us on Twitter using <strong>
#XmasHTreeMail</strong>.</p>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <center>
                                <div class="yhoohide notwebapp" id="webkit-only" role="document" style="min-width:300px; max-width:600px;max-height:0; overflow:hidden; mso-hide:all; display:none;">
                                  <table class="fluid" cellpadding="0" cellspacing="0" border="0" width="100%">
                                    <tbody>
                                      <tr>
                                        <td align="center" valign="top" style="padding:20px 0 0 0;">
                                          <!--[if mso]>
                                            <!-->
                                            <form>
                                              <input name="color" type="radio" id="lights" class="pallette">
                                              <input name="color" type="radio" id="glow" class="pallette">
                                              <input name="color" type="radio" id="humbug" class="pallette">
                                              <table cellpadding="0" cellspacing="0" border="0" align="center">
                                                <tbody>
                                                  <tr>
                                                    <td class="checkbox-star" align="center" valign="top" style="padding:0 0 12px 0;">
                                                      <input type="checkbox" id="star">
                                                      <label for="star"></label>
                                                    </td>
                                                  </tr>
                                                  <tr>
                                                    <td class="humbug" align="center" valign="top" style=" height:367px; display:none;max-height:0;overflow:hidden;mso-hide:all;"></td>
                                                  </tr>
                                                  <tr>
                                                    <td align="center" valign="top">
                                                      <table cellpadding="0" cellspacing="0" border="0">
                                                        <tbody>
                                                          <tr>
                                                            <td class="green-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g1">
                                                              <label for="g1">&nbsp;</label>
                                                            </td>
                                                            <td class="red-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g2">
                                                              <label for="g2">&nbsp;</label>
                                                            </td>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                    </td>
                                                  </tr>
                                                  <tr>
                                                    <td align="center" valign="top">
                                                      <table cellpadding="0" cellspacing="0" border="0">
                                                        <tbody>
                                                          <tr>
                                                            <td class="blue-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g3">
                                                              <label for="g3">&nbsp;</label>
                                                            </td>
                                                            <td class="white-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g4">
                                                              <label for="g4">&nbsp;</label>
                                                            </td>
                                                            <td class="pink-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g5">
                                                              <label for="g5">&nbsp;</label>
                                                            </td>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                    </td>
                                                  </tr>
                                                  <tr>
                                                    <td align="center" valign="top">
                                                      <table cellpadding="0" cellspacing="0" border="0">
                                                        <tbody>
                                                          <tr>
                                                            <td class="blue-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g6">
                                                              <label for="g6">&nbsp;</label>
                                                            </td>
                                                            <td class="pink-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g7">
                                                              <label for="g7">&nbsp;</label>
                                                            </td>
                                                            <td class="red-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g8">
                                                              <label for="g8">&nbsp;</label>
                                                            </td>
                                                            <td class="white-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g9">
                                                              <label for="g9">&nbsp;</label>
                                                            </td>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                    </td>
                                                  </tr>
                                                  <tr>
                                                    <td align="center" valign="top">
                                                      <table cellpadding="0" cellspacing="0" border="0">
                                                        <tbody>
                                                          <tr>
                                                            <td class="pink-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g10">
                                                              <label for="g10">&nbsp;</label>
                                                            </td>
                                                            <td class="red-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g11">
                                                              <label for="g11">&nbsp;</label>
                                                            </td>
                                                            <td class="blue-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g12">
                                                              <label for="g12">&nbsp;</label>
                                                            </td>
                                                            <td class="white-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g13">
                                                              <label for="g13">&nbsp;</label>
                                                            </td>
                                                            <td class="green-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g14">
                                                              <label for="g14">&nbsp;</label>
                                                            </td>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                    </td>
                                                  </tr>
                                                  <tr>
                                                    <td align="center" valign="top">
                                                      <table cellpadding="0" cellspacing="0" border="0">
                                                        <tbody>
                                                          <tr>
                                                            <td class="pink-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g15">
                                                              <label for="g15">&nbsp;</label>
                                                            </td>
                                                            <td class="green-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g16">
                                                              <label for="g16">&nbsp;</label>
                                                            </td>
                                                            <td class="blue-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g17">
                                                              <label for="g17">&nbsp;</label>
                                                            </td>
                                                            <td class="white-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g18">
                                                              <label for="g18">&nbsp;</label>
                                                            </td>
                                                            <td class="red-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g19">
                                                              <label for="g19">&nbsp;</label>
                                                            </td>
                                                            <td class="pink-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g20">
                                                              <label for="g20">&nbsp;</label>
                                                            </td>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                    </td>
                                                  </tr>
                                                  <tr>
                                                    <td align="center" valign="top">
                                                      <table cellpadding="0" cellspacing="0" border="0">
                                                        <tbody>
                                                          <tr>
                                                            <td class="green-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g21">
                                                              <label for="g21">&nbsp;</label>
                                                            </td>
                                                            <td class="white-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g22">
                                                              <label for="g22">&nbsp;</label>
                                                            </td>
                                                            <td class="red-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g23">
                                                              <label for="g23">&nbsp;</label>
                                                            </td>
                                                            <td class="pink-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g24">
                                                              <label for="g24">&nbsp;</label>
                                                            </td>
                                                            <td class="green-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g25">
                                                              <label for="g25">&nbsp;</label>
                                                            </td>
                                                            <td class="red-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g26">
                                                              <label for="g26">&nbsp;</label>
                                                            </td>
                                                            <td class="blue-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g27">
                                                              <label for="g27">&nbsp;</label>
                                                            </td>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                    </td>
                                                  </tr>
                                                  <tr>
                                                    <td align="center" valign="top">
                                                      <table cellpadding="0" cellspacing="0" border="0">
                                                        <tbody>
                                                          <tr>
                                                            <td class="red-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g28">
                                                              <label for="g28">&nbsp;</label>
                                                            </td>
                                                            <td class="pink-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g29">
                                                              <label for="g29">&nbsp;</label>
                                                            </td>
                                                            <td class="green-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g30">
                                                              <label for="g30">&nbsp;</label>
                                                            </td>
                                                            <td class="white-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g31">
                                                              <label for="g31">&nbsp;</label>
                                                            </td>
                                                            <td class="pink-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g32">
                                                              <label for="g32">&nbsp;</label>
                                                            </td>
                                                            <td class="red-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g33">
                                                              <label for="g33">&nbsp;</label>
                                                            </td>
                                                            <td class="green-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g34">
                                                              <label for="g34">&nbsp;</label>
                                                            </td>
                                                            <td class="white-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g35">
                                                              <label for="g35">&nbsp;</label>
                                                            </td>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                    </td>
                                                  </tr>
                                                  <tr>
                                                    <td align="center" valign="top">
                                                      <table cellpadding="0" cellspacing="0" border="0">
                                                        <tbody>
                                                          <tr>
                                                            <td class="green-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g36">
                                                              <label for="g36">&nbsp;</label>
                                                            </td>
                                                            <td class="blue-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g37">
                                                              <label for="g37">&nbsp;</label>
                                                            </td>
                                                            <td class="red-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g38">
                                                              <label for="g38">&nbsp;</label>
                                                            </td>
                                                            <td class="white-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g39">
                                                              <label for="g39">&nbsp;</label>
                                                            </td>
                                                            <td class="green-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g40">
                                                              <label for="g40">&nbsp;</label>
                                                            </td>
                                                            <td class="pink-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g41">
                                                              <label for="g41">&nbsp;</label>
                                                            </td>
                                                            <td class="blue-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g42">
                                                              <label for="g42">&nbsp;</label>
                                                            </td>
                                                            <td class="red-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g43">
                                                              <label for="g43">&nbsp;</label>
                                                            </td>
                                                            <td class="white-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g44">
                                                              <label for="g44">&nbsp;</label>
                                                            </td>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                    </td>
                                                  </tr>
                                                  <tr>
                                                    <td align="center" valign="top">
                                                      <table cellpadding="0" cellspacing="0" border="0">
                                                        <tbody>
                                                          <tr>
                                                            <td class="pink-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g45">
                                                              <label for="g45">&nbsp;</label>
                                                            </td>
                                                            <td class="white-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g46">
                                                              <label for="g46">&nbsp;</label>
                                                            </td>
                                                            <td class="blue-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g47">
                                                              <label for="g47">&nbsp;</label>
                                                            </td>
                                                            <td class="white-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g48">
                                                              <label for="g48">&nbsp;</label>
                                                            </td>
                                                            <td class="green-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g49">
                                                              <label for="g49">&nbsp;</label>
                                                            </td>
                                                            <td class="red-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g50">
                                                              <label for="g50">&nbsp;</label>
                                                            </td>
                                                            <td class="blue-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g51">
                                                              <label for="g51">&nbsp;</label>
                                                            </td>
                                                            <td class="white-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g52">
                                                              <label for="g52">&nbsp;</label>
                                                            </td>
                                                            <td class="pink-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g53">
                                                              <label for="g53">&nbsp;</label>
                                                            </td>
                                                            <td class="red-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g54">
                                                              <label for="g54">&nbsp;</label>
                                                            </td>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                    </td>
                                                  </tr>
                                                  <tr>
                                                    <td align="center" valign="top">
                                                      <table cellpadding="0" cellspacing="0" border="0">
                                                        <tbody>
                                                          <tr>
                                                            <td class="green-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g55">
                                                              <label for="g55">&nbsp;</label>
                                                            </td>
                                                            <td class="blue-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g56">
                                                              <label for="g56">&nbsp;</label>
                                                            </td>
                                                            <td class="white-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g57">
                                                              <label for="g57">&nbsp;</label>
                                                            </td>
                                                            <td class="red-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g58">
                                                              <label for="g58">&nbsp;</label>
                                                            </td>
                                                            <td class="pink-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g59">
                                                              <label for="g59">&nbsp;</label>
                                                            </td>
                                                            <td class="white-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g60">
                                                              <label for="g60">&nbsp;</label>
                                                            </td>
                                                            <td class="green-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g61">
                                                              <label for="g61">&nbsp;</label>
                                                            </td>
                                                            <td class="white-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g62">
                                                              <label for="g62">&nbsp;</label>
                                                            </td>
                                                            <td class="green-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g63">
                                                              <label for="g63">&nbsp;</label>
                                                            </td>
                                                            <td class="pink-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g64">
                                                              <label for="g64">&nbsp;</label>
                                                            </td>
                                                            <td class="blue-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g65">
                                                              <label for="g65">&nbsp;</label>
                                                            </td>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                    </td>
                                                  </tr>
                                                  <tr>
                                                    <td align="center" valign="top">
                                                      <table cellpadding="0" cellspacing="0" border="0">
                                                        <tbody>
                                                          <tr>
                                                            <td class="green-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g66">
                                                              <label for="g66">&nbsp;</label>
                                                            </td>
                                                            <td class="red-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g67">
                                                              <label for="g67">&nbsp;</label>
                                                            </td>
                                                            <td class="blue-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g68">
                                                              <label for="g68">&nbsp;</label>
                                                            </td>
                                                            <td class="pink-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g69">
                                                              <label for="g69">&nbsp;</label>
                                                            </td>
                                                            <td class="green-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g70">
                                                              <label for="g70">&nbsp;</label>
                                                            </td>
                                                            <td class="white-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g71">
                                                              <label for="g71">&nbsp;</label>
                                                            </td>
                                                            <td class="blue-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g72">
                                                              <label for="g72">&nbsp;</label>
                                                            </td>
                                                            <td class="white-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g73">
                                                              <label for="g73">&nbsp;</label>
                                                            </td>
                                                            <td class="green-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g74">
                                                              <label for="g74">&nbsp;</label>
                                                            </td>
                                                            <td class="red-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g75">
                                                              <label for="g75">&nbsp;</label>
                                                            </td>
                                                            <td class="pink-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g76">
                                                              <label for="g76">&nbsp;</label>
                                                            </td>
                                                            <td class="white-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g77">
                                                              <label for="g77">&nbsp;</label>
                                                            </td>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                    </td>
                                                  </tr>
                                                  <tr>
                                                    <td align="center" valign="top">
                                                      <table cellpadding="0" cellspacing="0" border="0">
                                                        <tbody>
                                                          <tr>
                                                            <td class="green-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g78">
                                                              <label for="g78">&nbsp;</label>
                                                            </td>
                                                            <td class="red-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g79">
                                                              <label for="g79">&nbsp;</label>
                                                            </td>
                                                            <td class="pink-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g80">
                                                              <label for="g80">&nbsp;</label>
                                                            </td>
                                                            <td class="white-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g81">
                                                              <label for="g81">&nbsp;</label>
                                                            </td>
                                                            <td class="pink-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g82">
                                                              <label for="g82">&nbsp;</label>
                                                            </td>
                                                            <td class="red-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g83">
                                                              <label for="g83">&nbsp;</label>
                                                            </td>
                                                            <td class="white-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g84">
                                                              <label for="g84">&nbsp;</label>
                                                            </td>
                                                            <td class="blue-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g85">
                                                              <label for="g85">&nbsp;</label>
                                                            </td>
                                                            <td class="green-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g86">
                                                              <label for="g86">&nbsp;</label>
                                                            </td>
                                                            <td class="pink-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g87">
                                                              <label for="g87">&nbsp;</label>
                                                            </td>
                                                            <td class="blue-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g88">
                                                              <label for="g88">&nbsp;</label>
                                                            </td>
                                                            <td class="white-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g89">
                                                              <label for="g89">&nbsp;</label>
                                                            </td>
                                                            <td class="green-bauble" align="center" valign="top" width="22">
                                                              <input type="checkbox" id="g90">
                                                              <label for="g90">&nbsp;</label>
                                                            </td>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                    </td>
                                                  </tr>
                                                  <tr>
                                                    <td class="bucket" align="center" valign="top">
                                                      <img src="http://i10.cmail19.com/ei/d/F2/B0C/2C8/045622/bucket2mm.png" style="display:block; width: 260px;  font-family: Arial, sans-serif; color: #000000; font-size: 14px;  font-style:normal; font-weight:bold;"
                                                      alt="" width="260" border="0">
                                                    </td>
                                                  </tr>
                                                  <tr>
                                                    <td class="blockit" align="center" valign="top">
                                                      <div style="display:block; height:5px; font-size:5px; line-height:5px;">&nbsp;</div>
                                                    </td>
                                                  </tr>
                                                  <tr>
                                                    <td align="center" valign="top" style="padding: 30px 0 10px 0;">
                                                      <table cellpadding="0" cellspacing="0" border="0">
                                                        <tbody>
                                                          <tr>
                                                            <td>
                                                              <table cellspacing="0" cellpadding="0" border="0" width="120">
                                                                <tbody>
                                                                  <tr>
                                                                    <td align="center">
                                                                      <label class="cta lights_button" for="lights" style="border: 1px solid #5baccc; mso-line-height-rule: exactly; font-size: 16px; line-height: 15px; text-align: center; font-family: Trebuchet MS, Verdana, sans-serif; color: #5baccc; padding:12px 7px;"><span>Blinking</span>
                                                                      </label>
                                                                    </td>
                                                                  </tr>
                                                                </tbody>
                                                              </table>
                                                            </td>
                                                            <td width="6" align="center" valign="top" style="padding: 20px 0;"></td>
                                                            <td>
                                                              <table cellspacing="0" cellpadding="0" border="0" width="120">
                                                                <tbody>
                                                                  <tr>
                                                                    <td align="center">
                                                                      <label class="cta glow_button" for="glow" style="border: 1px solid #5baccc; mso-line-height-rule: exactly; font-size: 16px; line-height: 15px; text-align: center; font-family: Trebuchet MS, Verdana, sans-serif; color: #5baccc; padding:12px 7px;"><span>Twinkling</span>
                                                                      </label>
                                                                    </td>
                                                                  </tr>
                                                                </tbody>
                                                              </table>
                                                            </td>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                    </td>
                                                  </tr>
                                                  <tr>
                                                    <td align="center" valign="top" style="padding: 10px 0;">
                                                      <input class="cta" type="reset" value="Redecorate Me" style="border: 1px solid #5baccc; background-color: rgba(44,53,62,0); border-radius:20px; mso-line-height-rule: exactly; font-size: 16px; line-height: 15px; text-align: center; font-family: Trebuchet MS, Verdana, sans-serif; color: #5baccc; padding:12px 10px; width:180px; -webkit-appearance:none;">
                                                    </td>
                                                  </tr>
                                                  <tr>
                                                    <td align="center" valign="top" style="padding: 10px 0 10px 0;">
                                                      <table cellspacing="0" cellpadding="0" border="0">
                                                        <tbody>
                                                          <tr>
                                                            <td align="center">
                                                              <label class="cta_hum colour_pallette" for="humbug" style="border: 1px solid #5baccc; mso-line-height-rule: exactly; font-size: 16px; line-height: 15px; text-align: center; font-family: Trebuchet MS, Verdana, sans-serif; color: #5baccc; padding:12px 0px; width:180px;"><span>BAH!
 HUMBUG!</span>
                                                              </label>
                                                            </td>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                    </td>
                                                  </tr>
                                                </tbody>
                                              </table>
                                            </form>
                                          <!--<![endif]-->
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </div>
                              </center>
                              <table width="100%" align="center" cellspacing="0" cellpadding="0" border="0"
                              role="presentation" style="max-width:600px;">
                                <tbody>
                                  <tr>
                                    <td class="footertop" valign="top" style="padding:30px 30px 0 30px; font-family: Trebuchet MS, Verdana, sans-serif; font-size:14px; color:#b2b1b6; line-height:23px; text-align:center;">
                                      <p style="margin:0;">
                                        <a class="button_press" href="http://twouk.cmail20.com/t/ViewEmail/d/7BBAF227BB35BE3A/FA12A463E9E5A76B4E9AB52EF5D51DA2"
                                        style="color:#b2b1b6; text-decoration:underline;">View online</a><span class="hide">&nbsp;&nbsp;|&nbsp;&nbsp;</span>

                                        <a href="http://twouk.forwardtomyfriend.com/d-nkdguujh-6A769378-dkjhujd-l-k"
                                        class="button_press" style="color:#b2b1b6; text-decoration:underline;">Forward to A Friend</a><span class="hide">&nbsp;&nbsp;|&nbsp;&nbsp;</span> 
                                        <a href="https://twitter.com/intent/tweet?url=http%3A%2F%2Fcampaign.two-uk.com%2Ft%2Fd-BDDA35F611DBB41E&text=%F0%9F%8E%84%20All%20of%20the%20lights%2C%20all%20of%20the%20lights%21%20%F0%9F%8E%84&original_referer=&related=joon82&via=TwoUkDigital"
                                        class="button_press" style="color:#b2b1b6; text-decoration:underline;" via="TwoUkDigital"
                                        recommend="joon82">Share on Twitter</a>
                                      </p>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td class="socialpad" valign="top" style="padding: 15px 60px 20px 60px;">
                                      <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
                                        <tbody>
                                          <tr>
                                            <td valign="top" style="padding:0 0 15px 0;">
                                              <p style="margin:0; font-family: Trebuchet MS, Verdana, sans-serif; font-size:14px; font-weight:normal; color:#b2b1b6; line-height:25px; text-align:center; mso-line-height-rule:exactly;">Follow us on social media</p>
                                            </td>
                                          </tr>
                                          <tr>
                                            <td align="center" valign="top">
                                              <table align="center" cellspacing="0" cellpadding="0" border="0" role="presentation">
                                                <tbody>
                                                  <tr>
                                                    <td valign="top">
                                                      <a href="https://www.facebook.com/TwoUkDigital/">
                                                        <img src="http://i1.cmail19.com/ei/d/F2/B0C/2C8/045622/facebook.png" width="40"
                                                        height="40" alt="Facebook" border="0" style="display:block; border:none; font-family: Trebuchet MS, Verdana, sans-serif; font-size:11px; font-weight:normal; color:#b2b1b6;">
                                                      </a>
                                                    </td>
                                                    <td width="20" style="font-size:1px; line-height:1px;">&nbsp;</td>
                                                    <td valign="top">
                                                      <a href="https://twitter.com/TwoUkDigital">
                                                        <img src="http://i3.cmail19.com/ei/d/F2/B0C/2C8/045622/twitter.png" width="50"
                                                        height="40" alt="Twitter" border="0" style="display:block; border:none; font-family: Trebuchet MS, Verdana, sans-serif; font-size:11px; font-weight:normal; color:#b2b1b6;">
                                                      </a>
                                                    </td>
                                                    <td width="20" style="font-size:1px; line-height:1px;">&nbsp;</td>
                                                    <td valign="top">
                                                      <a href="https://www.linkedin.com/company/5287972">
                                                        <img src="http://i6.cmail19.com/ei/d/F2/B0C/2C8/045622/linkedin.png" width="40"
                                                        height="40" alt="Linkedin" border="0" style="display:block; border:none; font-family: Trebuchet MS, Verdana, sans-serif; font-size:11px; font-weight:normal; color:#b2b1b6;">
                                                      </a>
                                                    </td>
                                                  </tr>
                                                </tbody>
                                              </table>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td align="center" valign="top" style="padding:0px 30px 0 30px; font-family: Trebuchet MS, Verdana, sans-serif; font-size:14px; color:#b2b1b6; line-height:23px; text-align:center;">
                                      <p style="margin:0;">Want to hear less from us?
                                        <a href="http://campaign.two-uk.com/t/d-u-dkjhujd-nkdguujh-o/"
                                        class="button_press" style="color:#b2b1b6; text-decoration:underline;">Unsubscribe here</a>
                                      </p>
                                      <p style="margin:0;">
                                        <a href="http://twouk.updatemyprofile.com/d-dkjhujd-6A769378-nkdguujh-b" class="button_press"
                                        style="color:#b2b1b6; text-decoration:underline;">Change your preferences</a>
                                      </p>
                                      <div style="display:block; height:10px; font-size:10px; line-height:10px;">&nbsp;</div>
                                      <hr class="line">
                                      <div style="display:block; height:10px; font-size:10px; line-height:10px;">&nbsp;</div>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td align="center" valign="top" style="padding: 2px 0 5px 0">
                                      <a href="http://www.two-uk.com/" target="_blank">
                                        <img src="http://i4.cmail19.com/ei/d/F2/B0C/2C8/045622/two.png" width="80" alt="TWO"
                                        border="0" style="display: block; font-size: 20px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; width:80px;">
                                      </a>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td align="center" valign="top" style="padding:15px 30px 60px 30px; font-family: Trebuchet MS, Verdana, sans-serif; font-size:14px; color:#b2b1b6; line-height:23px; text-align:center;">
                                      <p style="margin:0;">TWO UK</p>
                                      <p style="margin:0;">Two Associates Limited
                                        <br>3rd Floor, Manor house, The Crescent, Leatherhead, KT22 8DY</p>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                            </div>
                            <!--[if (gte mso 9)|(IE)]>
                            </td>
                          </tr>
                        </table>
                      <![endif]-->
                    </center>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
    <img src="https://twouk.cmail19.com/t/d-o-dkjhujd-nkdguujh/o.gif" style="visibility: hidden !important; display: block !important; height:1px !important; width:1px !important; border: 0 !important; margin: 0 !important; padding: 0 !important"
    width="1" height="1" border="0" alt="">
  </body>

</html>
            
          
!
            
               <style type="text/css">
      #outlook a { padding: 0;}
      .ReadMsgBody { width: 100%;}
      .ExternalClass { width: 100%;}
      .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
      body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
      table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
      img { -ms-interpolation-mode: bicubic; }
      body { height: 100% !important; margin: 0 auto; padding: 0; width: 100% !important; }
      img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none;}
      table { border-collapse: collapse !important;}
      a[x-apple-data-detectors] {color: inherit !important; text-decoration: none !important; font-size: inherit !important;
      font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important;}
    </style>
    <style type="text/css">
      .gradient {
      background: url('http://i9.cmail19.com/ei/d/F2/B0C/2C8/045622/snowflakes3.png'),linear-gradient(-25deg, #374149 0%, #2C353E 90%);}
      .line { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(91, 172, 204, 1), rgba(0, 0, 0, 0)); }
      .cta { border-radius: 25px; width: 100px; display: inline-block; padding: 10px 0; font-size: 16px; transition:transform .4s; -webkit-transition: .4s linear; }
      .cta:hover{ border-color: #ffffff !important; border-radius: 0px; background: rgba(24, 28, 33, .3); }
      .cta:hover span{ color:#ffffff !important; }
       .cta_hum { border-radius: 25px; width: 100px; display: inline-block; padding: 10px 0; font-size: 16px; transition:transform .4s; -webkit-transition: .4s linear; }
      .cta_hum:hover{ border-color: #d8403d !important; background: rgba(24, 28, 33, .8); transition:transform .2s, box-shadow .2s;
        box-shadow:0 4px 10px 1px rgba(0,0,0,0.5) !important; }
      .cta_hum:hover span{ color:#d8403d !important; }
       .cta_hum:active {background:linear-gradient(-180deg, #760301 0%, #4a0100 95%, #000001 10%);
        transform:scale(0.98,0.98);
        box-shadow:0 4px 300px 0px rgba(0,0,0,0.9) !important; border:none !important;}
       .cta_hum:active span{ color:#ffffff !important; }
    </style>
    <style type="text/css">
      @media screen and (-webkit-min-device-pixel-ratio: 0) {
      #webkit-only {
      display: inline !important; max-height: none !important;
      }
       
       .fontnorm {font-style:normal !important; font-size:58px !important;}
      }
       
      @media screen and (-webkit-min-device-pixel-ratio: 0) {
      #webkit-off {
      display: none !important; max-height:0 !important; overflow:hidden !important; mso-hide:all !important; height:0 !important;
      }
      }
       
      @media screen yahoo {
      .yhoohide {
      display: none; max-height:0; overflow:hidden; mso-hide:all;
      }
       
       .yho {table-layout:fixed !important; margin:0 auto !important; width:600px !important;
      }
    </style>
    <style type="text/css">
      @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
      .fluid {
      width: 100% !important;
      }
       .hide { 
       display:none !important; 
       }
       .footertop { 
       padding: 30px 0px 0px 0px !important
       }
       .pad_twenty_rlb {
      padding: 0px 20px 20px 20px !important
      }
       .socialpad { 
       padding: 50px 20px 50px 20px !important
       }
       .button_press {
      border: 1px solid #b2b1b6;
      width: 70%;
      display: inline-block;
      font-size: 18px;
      color: #b2b1b6 !important;
      border-radius: 25px;
      display: inline-block;
      padding: 4px 0;
      font-size: 14px;
      text-decoration: none !important;
      margin-top: 10px;
      transition:transform .4s; -webkit-transition: .4s linear;
      }
      .button_press:hover{
      border-color: #ffffff !important;
      background: rgba(24, 28, 33, .3);
      border-radius: 0px;
      color: #ffffff !important;
      }
      .button_press:hover span{
      color:#ffffff !important;
      }
       }
    </style>
    <style type="text/css">
      label { cursor: pointer;
      }
      [owa] .notwebapp { display:none !important; max-height:0 !important; overflow:hidden !important; mso-hide:all !important;}
      .checkbox-star input[type="checkbox"] {
      display:none; 
      }
      .checkbox-star label {
      display:inline-block;
      background-color:#b2b1b6;
      width: 22px;
      height: 22px;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      -webkit-transform-origin: 0 100%;
      transform-origin: 0 100%;
      margin: 9px 0 0 7%;
      }
      .checkbox-star input[type="checkbox"]:checked + label { 
      background: #f1da36;
      background: -webkit-linear-gradient(45deg,rgba(241,218,54,1) 0%,rgba(252,243,159,1) 73%,rgba(254,252,234,1) 100%);
      background: linear-gradient(45deg,rgba(241,218,54,1) 0%,rgba(252,243,159,1) 73%,rgba(254,252,234,1) 100%);
      -webkit-animation: star 6000ms infinite;
      animation: star 6000ms infinite;}
       
      @-webkit-keyframes star {
      0% { background: linear-gradient(45deg,rgba(241,218,54,1) 0%,rgba(252,243,159,1) 73%,rgba(254,252,234,1) 100%); box-shadow: 0 0 2px #f1da36;}
      50% { background: linear-gradient(45deg,rgba(241,218,54,1) 0%,rgba(252,243,159,1) 73%,rgba(254,252,234,1) 100%); box-shadow: 0 0 30px #f1da36;}
      100% { background: linear-gradient(45deg,rgba(241,218,54,1) 0%,rgba(252,243,159,1) 73%,rgba(254,252,234,1) 100%); box-shadow: 0 0 2px #ef1da36;}
      }
      @keyframes star {
      0% { background: linear-gradient(45deg,rgba(241,218,54,1) 0%,rgba(252,243,159,1) 73%,rgba(254,252,234,1) 100%); box-shadow: 0 0 2px #f1da36;}
      50% { background: linear-gradient(45deg,rgba(241,218,54,1) 0%,rgba(252,243,159,1) 73%,rgba(254,252,234,1) 100%); box-shadow: 0 0 30px #f1da36;}
      100% { background: linear-gradient(45deg,rgba(241,218,54,1) 0%,rgba(252,243,159,1) 73%,rgba(254,252,234,1) 100%); box-shadow: 0 0 2px #ef1da36;}
      }
      .green-bauble input[type="checkbox"] {
      display:none; 
      }
      .green-bauble label {
      display:inline-block;
      background-color:#77BF2B;
      width: 18px;
      height: 18px;
      border-radius: 100%;
      }
      .green-bauble input[type="checkbox"]:checked + label { 
      -webkit-animation: bauble1 3000ms infinite;
      animation: bauble1 3000ms infinite;
      -webkit-transform: rotate(-50deg) skewX(-25deg) scale(.8);
      transform: rotate(-50deg) skewX(-25deg) scale(.8);}
       
       @-webkit-keyframes bauble1 {
      0% { background: #004A7F; box-shadow: 0 0 3px #004A7F; }
      12% { background: #0094FF; box-shadow: 0 0 10px #0094FF; }
      23% { background: #004A7F; box-shadow: 0 0 3px #004A7F; }
      26% { background: #004A7F; box-shadow: 0 0 3px #004A7F; }
      38% { background: #e7868f; box-shadow: 0 0 10px #e7868f; }
      50% { background: #e60217; box-shadow: 0 0 3px #e60217; }
      52% { background: #e7868f; box-shadow: 0 0 10px #e7868f; }
      62% { background: #ff7800; box-shadow: 0 0 3px #ff7800; }
      73% { background: #ffea00; box-shadow: 0 0 10px #ffea00; }
      76% { background: #519600; box-shadow: 0 0 3px #519600; }
      88% { background: #bafa6f; box-shadow: 0 0 10px #bafa6f; }
      100% { background: #e7868f; box-shadow: 0 0 3px #e7868f; }
      }
      
      
       .red-bauble input[type="checkbox"] {
      display:none; 
      }
      .red-bauble label {
      display:inline-block;
      background:#77BF2B;
      width: 18px;
      height: 18px;
      border-radius: 100%;
      }
      .red-bauble input[type="checkbox"]:checked + label { 
      -webkit-animation: bauble1 3000ms infinite;
      animation: bauble1 3000ms infinite;
      -webkit-transform: rotate(-50deg) skewX(-25deg) scale(.8);;
      transform: rotate(-50deg) skewX(-25deg) scale(.8);}
       
       @-webkit-keyframes bauble1 {
      0% { background: #004A7F; box-shadow: 0 0 3px #004A7F; }
      12% { background: #0094FF; box-shadow: 0 0 10px #0094FF; }
      23% { background: #004A7F; box-shadow: 0 0 3px #004A7F; }
      26% { background: #004A7F; box-shadow: 0 0 3px #004A7F; }
      38% { background: #e7868f; box-shadow: 0 0 10px #e7868f; }
      50% { background: #e60217; box-shadow: 0 0 3px #e60217; }
      52% { background: #e7868f; box-shadow: 0 0 10px #e7868f; }
      62% { background: #ff7800; box-shadow: 0 0 3px #ff7800; }
      73% { background: #ffea00; box-shadow: 0 0 10px #ffea00; }
      76% { background: #519600; box-shadow: 0 0 3px #519600; }
      88% { background: #bafa6f; box-shadow: 0 0 10px #bafa6f; }
      100% { background: #e7868f; box-shadow: 0 0 3px #e7868f; }
      }
       
      .blue-bauble input[type="checkbox"] {
      display:none; 
      }
      .blue-bauble label {
      display:inline-block;
      background:#77BF2B;
      width: 18px;
      height: 18px;
      border-radius: 100%;
      }
      .blue-bauble input[type="checkbox"]:checked + label { 
      -webkit-animation: bauble1 3000ms infinite;
      animation: bauble1 3000ms infinite;
      -webkit-transform: rotate(-50deg) skewX(-25deg) scale(.8);
      transform: rotate(-50deg) skewX(-25deg) scale(.8);}
       
       @-webkit-keyframes bauble1 {
      0% { background: #004A7F; box-shadow: 0 0 3px #004A7F; }
      12% { background: #0094FF; box-shadow: 0 0 10px #0094FF; }
      23% { background: #004A7F; box-shadow: 0 0 3px #004A7F; }
      26% { background: #004A7F; box-shadow: 0 0 3px #004A7F; }
      38% { background: #e7868f; box-shadow: 0 0 10px #e7868f; }
      50% { background: #e60217; box-shadow: 0 0 3px #e60217; }
      52% { background: #e7868f; box-shadow: 0 0 10px #e7868f; }
      62% { background: #ff7800; box-shadow: 0 0 3px #ff7800; }
      73% { background: #ffea00; box-shadow: 0 0 10px #ffea00; }
      76% { background: #519600; box-shadow: 0 0 3px #519600; }
      88% { background: #bafa6f; box-shadow: 0 0 10px #bafa6f; }
      100% { background: #e7868f; box-shadow: 0 0 3px #e7868f; }
      }
      .white-bauble input[type="checkbox"] {
      display:none; 
      }
      .white-bauble label {
      display:inline-block;
      background:#77BF2B;
      width: 18px;
      height: 18px;
      border-radius: 100%;
      }
      .white-bauble input[type="checkbox"]:checked + label { 
      -webkit-animation: bauble1 3000ms infinite;
      animation: bauble1 3000ms infinite;
      -webkit-transform: rotate(-50deg) skewX(-25deg) scale(.8);
      transform: rotate(-50deg) skewX(-25deg) scale(.8);}
       
       @-webkit-keyframes bauble1 {
      0% { background: #004A7F; box-shadow: 0 0 3px #004A7F; }
      12% { background: #0094FF; box-shadow: 0 0 10px #0094FF; }
      23% { background: #004A7F; box-shadow: 0 0 3px #004A7F; }
      26% { background: #004A7F; box-shadow: 0 0 3px #004A7F; }
      38% { background: #e7868f; box-shadow: 0 0 10px #e7868f; }
      50% { background: #e60217; box-shadow: 0 0 3px #e60217; }
      52% { background: #e7868f; box-shadow: 0 0 10px #e7868f; }
      62% { background: #ff7800; box-shadow: 0 0 3px #ff7800; }
      73% { background: #ffea00; box-shadow: 0 0 10px #ffea00; }
      76% { background: #519600; box-shadow: 0 0 3px #519600; }
      88% { background: #bafa6f; box-shadow: 0 0 10px #bafa6f; }
      100% { background: #e7868f; box-shadow: 0 0 3px #e7868f; }
      }
       
      .pink-bauble input[type="checkbox"] {
      display:none; 
      }
      .pink-bauble label {
      display:inline-block;
      background:#77BF2B;
      width: 18px;
      height: 18px;
      border-radius: 100%;
      }
      .pink-bauble input[type="checkbox"]:checked + label { 
      -webkit-animation: bauble1 3000ms infinite;
      animation: bauble1 3000ms infinite;
      -webkit-transform: rotate(-50deg) skewX(-25deg) scale(.8);
      transform: rotate(-50deg) skewX(-25deg) scale(.8);}
       
       @-webkit-keyframes bauble1 {
      0% { background: #004A7F; box-shadow: 0 0 3px #004A7F; }
      12% { background: #0094FF; box-shadow: 0 0 10px #0094FF; }
      23% { background: #004A7F; box-shadow: 0 0 3px #004A7F; }
      26% { background: #004A7F; box-shadow: 0 0 3px #004A7F; }
      38% { background: #e7868f; box-shadow: 0 0 10px #e7868f; }
      50% { background: #e60217; box-shadow: 0 0 3px #e60217; }
      52% { background: #e7868f; box-shadow: 0 0 10px #e7868f; }
      62% { background: #ff7800; box-shadow: 0 0 3px #ff7800; }
      73% { background: #ffea00; box-shadow: 0 0 10px #ffea00; }
      76% { background: #519600; box-shadow: 0 0 3px #519600; }
      88% { background: #bafa6f; box-shadow: 0 0 10px #bafa6f; }
      100% { background: #e7868f; box-shadow: 0 0 3px #e7868f; }
      }
       
       #lights:checked ~ * .lights_button
      {background-color: #000000 !important;}
      #lights:checked ~ * .green-bauble input[type="checkbox"]:checked + label {
      -webkit-animation: lights1 7s infinite;
      animation: lights1 7s infinite;
      -webkit-transform: rotate(-50deg) skewX(-25deg) scale(.8);
      transform: rotate(-50deg) skewX(-25deg) scale(.8);
      }
      #lights:checked ~ * .blue-bauble input[type="checkbox"]:checked + label {
      -webkit-animation: lights2 7s infinite;
      animation: lights2 7s infinite;
      -webkit-transform: rotate(-50deg) skewX(-25deg) scale(.8);
      transform: rotate(-50deg) skewX(-25deg) scale(.8);
      }
      #lights:checked ~ * .red-bauble input[type="checkbox"]:checked + label {
      -webkit-animation: lights3 7s infinite;
      animation: lights3 7s infinite;
      -webkit-transform: rotate(-50deg) skewX(-25deg) scale(.8);
      transform: rotate(-50deg) skewX(-25deg) scale(.8);
      }
      #lights:checked ~ * .pink-bauble input[type="checkbox"]:checked + label {
      -webkit-animation: lights3 12s infinite;
      animation: lights3 12s infinite;
      -webkit-transform: rotate(-50deg) skewX(-25deg) scale(.8);
      transform: rotate(-50deg) skewX(-25deg) scale(.8);
      }
      #lights:checked ~ * .white-bauble input[type="checkbox"]:checked + label {
      -webkit-animation: lights3 9s infinite;
      animation: lights3 9s infinite;
      -webkit-transform: rotate(-50deg) skewX(-25deg) scale(.8);
      transform: rotate(-50deg) skewX(-25deg) scale(.8);
      }
      @-webkit-keyframes lights1 {
      0% { background: linear-gradient(45deg,rgba(241,218,54,1) 0%,rgba(252,243,159,1) 73%,rgba(254,252,234,1) 100%); box-shadow: 0 0 2px #f1da36;}
      50% { background: linear-gradient(45deg,rgba(241,218,54,1) 0%,rgba(252,243,159,1) 73%,rgba(254,252,234,1) 100%); box-shadow: 0 0 30px #f1da36;}
      100% { background: linear-gradient(45deg,rgba(241,218,54,1) 0%,rgba(252,243,159,1) 73%,rgba(254,252,234,1) 100%); box-shadow: 0 0 2px #f1da36;}
       }
       @-webkit-keyframes lights2 {
       0% { background: linear-gradient(45deg,rgba(241,218,54,1) 0%,rgba(252,243,159,1) 73%,rgba(254,252,234,1) 100%); box-shadow: 0 0 2px #f1da36;}
      20% { background: linear-gradient(45deg,rgba(241,218,54,1) 0%,rgba(252,243,159,1) 73%,rgba(254,252,234,1) 100%); box-shadow: 0 0 30px #f1da36;}
      40% { background: linear-gradient(45deg,rgba(241,218,54,1) 0%,rgba(252,243,159,1) 73%,rgba(254,252,234,1) 100%); box-shadow: 0 0 2px #f1da36;}       
      60% { background: linear-gradient(45deg,rgba(241,54,54,1) 0%,rgba(238,133,133,1) 73%,rgba(254,252,234,1) 100%); box-shadow: 0 0 2px #f13636;}
      80% { background: linear-gradient(45deg,rgba(241,54,54,1) 0%,rgba(238,133,133,1) 73%,rgba(254,252,234,1) 100%); box-shadow: 0 0 30px #f13636;}
      100% { background: linear-gradient(45deg,rgba(241,54,54,1) 0%,rgba(238,133,133,1) 73%,rgba(254,252,234,1) 100%); box-shadow: 0 0 2px #f13636;}
       }
       @-webkit-keyframes lights3 {
       0% { background: linear-gradient(45deg,rgba(241,218,54,1) 0%,rgba(252,243,159,1) 73%,rgba(254,252,234,1) 100%); box-shadow: 0 0 2px #f1da36;}
      7% { background: linear-gradient(45deg,rgba(241,218,54,1) 0%,rgba(252,243,159,1) 73%,rgba(254,252,234,1) 100%); box-shadow: 0 0 30px #f1da36;}
      14% { background: linear-gradient(45deg,rgba(241,218,54,1) 0%,rgba(252,243,159,1) 73%,rgba(254,252,234,1) 100%); box-shadow: 0 0 2px #f1da36;}       
      21% { background: linear-gradient(45deg,rgba(241,54,54,1) 0%,rgba(238,133,133,1) 73%,rgba(254,252,234,1) 100%); box-shadow: 0 0 2px #fa4e4e;}
      28% { background: linear-gradient(45deg,rgba(241,54,54,1) 0%,rgba(238,133,133,1) 73%,rgba(254,252,234,1) 100%); box-shadow: 0 0 30px #fa4e4e;}
      35% { background: linear-gradient(45deg,rgba(241,54,54,1) 0%,rgba(238,133,133,1) 73%,rgba(254,252,234,1) 100%); box-shadow: 0 0 2px #fa4e4e;}
       42% { background: linear-gradient(45deg,rgba(241,218,54,1) 0%,rgba(252,243,159,1) 73%,rgba(254,252,234,1) 100%); box-shadow: 0 0 2px #ac63af;}
      49% { background: linear-gradient(45deg,rgba(210,3,210,1) 0%,rgba(172,99,175,1) 30%,rgba(254,252,234,1) 100%); box-shadow: 0 0 30px #ac63af;}
      56% { background: linear-gradient(45deg,rgba(210,3,210,1) 0%,rgba(172,99,175,1) 30%,rgba(254,252,234,1) 100%); box-shadow: 0 0 2px #ac63af;}       
      63% { background: linear-gradient(45deg,rgba(210,3,210,1) 0%,rgba(172,99,175,1) 30%,rgba(254,252,234,1) 100%); box-shadow: 0 0 2px #ac63af;}
       69% { background: linear-gradient(45deg,rgba(210,3,210,1) 0%,rgba(172,99,175,1) 30%,rgba(254,252,234,1) 100%); box-shadow: 0 0 30px #ac63af;}
      76% { background: linear-gradient(45deg,rgba(3,154,210,1) 0%,rgba(105,204,241,1) 30%,rgba(254,252,234,1) 100%); box-shadow: 0 0 2px #57b8dc;}       
      83% { background: linear-gradient(45deg,rgba(3,154,210,1) 0%,rgba(105,204,241,1) 30%,rgba(254,252,234,1) 100%); box-shadow: 0 0 2px #57b8dc;}
      90% { background: linear-gradient(45deg,rgba(3,154,210,1) 0%,rgba(105,204,241,1) 30%,rgba(254,252,234,1) 100%); box-shadow: 0 0 30px #57b8dc;}
       100% { background: linear-gradient(45deg,rgba(3,154,210,1) 0%,rgba(105,204,241,1) 30%,rgba(254,252,234,1) 100%); box-shadow: 0 0 30px #57b8dc;}
      }
       
       #glow:checked ~ * .glow_button
      {background-color: #000000 !important;}
      #glow:checked ~ * .green-bauble input[type="checkbox"]:checked + label {
      -webkit-animation: glow 1.2s infinite;
      animation: glow 1.2s infinite;
      -webkit-transform: rotate(-50deg) skewX(-20deg) scale(.75);
      transform: rotate(-50deg) skewX(-20deg) scale(.75);
      }
      #glow:checked ~ * .blue-bauble input[type="checkbox"]:checked + label {
      -webkit-animation: glow 1.8s infinite;
      animation: glow 1.8s infinite;
      -webkit-transform: rotate(-50deg) skewX(-20deg) scale(.75);
      transform: rotate(-50deg) skewX(-20deg) scale(.75);
      }
      #glow:checked ~ * .red-bauble input[type="checkbox"]:checked + label {
      -webkit-animation: glow 1.5s infinite;
      animation: glow 1.5s infinite;
      -webkit-transform: rotate(-50deg) skewX(-20deg) scale(.75);
      transform: rotate(-50deg) skewX(-20deg) scale(.75);
      }
      #glow:checked ~ * .pink-bauble input[type="checkbox"]:checked + label {
      -webkit-animation: glow 1s infinite;
      animation: glow 1s infinite;
      -webkit-transform: rotate(-50deg) skewX(-20deg) scale(.75);
      transform: rotate(-50deg) skewX(-20deg) scale(.75);
      }
      #glow:checked ~ * .white-bauble input[type="checkbox"]:checked + label {
      -webkit-animation: glow 2s infinite;
      animation: glow 2s infinite;
      -webkit-transform: rotate(-50deg) skewX(-20deg) scale(.75);
      transform: rotate(-50deg) skewX(-20deg) scale(.75);
      }
      @-webkit-keyframes glow {
      0% { background: linear-gradient(45deg,rgba(241,218,54,1) 0%,rgba(252,243,159,1) 73%,rgba(254,252,234,1) 100%); box-shadow: 0 0 2px #ffed6e;}
      50% { background: linear-gradient(45deg,rgba(241,218,54,1) 0%,rgba(252,243,159,1) 73%,rgba(254,252,234,1) 100%); box-shadow: 0 0 20px #ffed6e;}
      100% { background: linear-gradient(45deg,rgba(241,218,54,1) 0%,rgba(252,243,159,1) 73%,rgba(254,252,234,1) 100%); box-shadow: 0 0 2px #ffed6e;}
       }
       
       
      .pallette {
      display:none; 
      }
      #humbug:checked ~ * .green-bauble label
      { display: none;}
      #humbug:checked ~ * .pink-bauble label
      { display: none;}
      #humbug:checked ~ * .red-bauble label
      { display: none;}
      #humbug:checked ~ * .blue-bauble label
      { display: none; }
      #humbug:checked ~ * .white-bauble label
      { display: none; }
      #humbug:checked ~ * .checkbox-star
      { display: none; } 
      #humbug:checked ~ * .bucket
      { display: none; } 
      #humbug:checked ~ * .colour_pallette
      { display: none; }
      #humbug:checked ~ * .xmas_lights
      { display: none; }
      #humbug:checked ~ * .lights_button
      { display: none; }
       #humbug:checked ~ * .glow
      { display: none; }
      #humbug:checked ~ * .glow_button
      { display: none; }
       #humbug:checked ~ * .blockit
      { display: none; }
       
      @keyframes humbug {
      0% { background-position-y: 0%; }
      100% { background-position-y: 100%;}
      }
       
      #humbug:checked ~ * .humbug 
      {background-image: url(http://i2.cmail19.com/ei/d/F2/B0C/2C8/045622/new_humbugs3.png) !important; background-repeat:no-repeat !important; display:block !important; overflow:hidden !important; width:310px; height: 368px !important; min-height: 368px; 
      animation: humbug 1.5s steps(20) 1 forwards; margin-top:-3px;}
    </style>
    <style type="text/css">
      @media screen {
      @font-face {
      font-family: 'Pacifico';
      src: local('Pacifico Regular'),
      local('Pacifico-regular'),
      url('http://fonts.gstatic.com/s/pacifico/v7/yunJt0R8tCvMyj_V4xSjaXYhjbSpvc47ee6xR_80Hnw.woff') format('woff'),
      url('http://fonts.gstatic.com/s/pacifico/v7/fKnfV28XkldRW297cFLeqfesZW2xOQ-xsNqO47m55DA.ttf') format('truetype');
      font-weight: 400;
      font-style: normal;
      }
      }
    </style>
            
          
!
            
               /*
These have been made for email clients, and some of the creations may feature some fallback, or code for other clients


*/
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console