Official Everybody Edits Forums

Kaslai

Official Caroler

From: SEAͩT̓͑TLͯͥͧͪ̽ͧE͑̚

Joined: 2015-02-17

Posts: 787

Re: Coding questions in website based languages

I own a FQDN and I wish I could setup a mail server. Does somebody know how?
P.S. The machine is running Raspbian as OS(a Debian but for arm processors). I tried Postfix and I managed to make it work locally. However real mail servers(Yahoo, Gmail etc.) are refusing my connections(? as it says in the log files).
Side-note: My ISP is currently blocking port 25 but I think Yahoo and Gmail also accepts connections on ports 465 and 587, right?

Most ISPs are blocking any outgoing SMTP these days. Many of them are even using DPI to block it. The only sanctioned way to send email from a non-business connection is IMAP; otherwise, you're out of luck.

You might be able to directly request the ability to use SMTP from your ISP, but that requires talking on the phone, and they might just say "upgrade to business class!"

Koya

Fabulous Member

From: The island with those Brits

Joined: 2015-02-18

Posts: 6,310

Re: Coding questions in website based languages

Please answer

Also, I did.

---

Thank you eleizibeth ^

I stack my signatures rather than delete them so I don't lose them

Different55

Forum Admin

Joined: 2015-02-07

Posts: 16,575

Re: Coding questions in website based languages

refusing my connections

That tends to happen. Forums ran into a ton of that when I tried to set up my own mail server. Instead we just go through sendgrid and everything's A-OK now.

---

"Sometimes failing a leap of faith is better than inching forward"
- ShinsukeIto

Zumza

Member

From: root

Joined: 2015-02-17

Posts: 4,658

Re: Coding questions in website based languages

Ok so I talked with my ISP and it was benevolent in unlocking port 25 without any additional costs. Eliminating all the "hacky" configurations to the standard ones had let me put my web mail on legs easily.
So I would like to thank you all again!

Now Im considering adding some encryption too. 
So I was wondering if there are free CAs... In my google research I found https://letsencrypt.org but I would want a second opinion about this.
Thanks in advance!

---

Everybody edits, but some edit more than others

Koya

Fabulous Member

From: The island with those Brits

Joined: 2015-02-18

Posts: 6,310

Re: Coding questions in website based languages

option[color] {
  color:attr(color);
}

I am trying to get the color attribute and make it color

<option> is a part of the <select> box. How to fix?

I didn't see this post, `attr(name)` can only be used for pseudo-elements (:before, :after).

HTML
<div class="currency" currency="$">250</div>

CSS
.currency:before {
  content: attr(currency);
}

Using the attribute allows for prefixes and suffixes to easily be changed, so for instance to change all curency codes you would use

jQuery
$("div.currency").attr("currency", "£");

(obviously you would need to change the values but I couldn't think of another reason people use attr)

You cannot use attr() for anything other than content.

---

Thank you eleizibeth ^

I stack my signatures rather than delete them so I don't lose them

Koya

Fabulous Member

From: The island with those Brits

Joined: 2015-02-18

Posts: 6,310

Re: Coding questions in website based languages

Can't even find a tutorial about SCSS. Why do you need it anyway?

Mixins, functions, variables, indentation and more - SCSS is a CSS pre-processor so when uploaded to a website it is in a CSS format.

Example: http://codepen.io/OfficialAntarctica/pe … itors=0100 | http://color.koya.io/
Depending on what you do SCSS may make code a little smaller or a lot smaller, in this case the size doesn't change a huge amount (width is way smaller) but it is more readable.

SCSS
//Note I am using an autoprefixer so I don't have to write -webkit or -ms etc.., it is shown in the CSS
$bg:#F0F2F5;
$shadow:#E6E9ED;

/*mixin by Dario Corsi
http://codepen.io/dariocorsi/pen/jqxERJ
*/
@function shadow-string($color1, $color2, $length){
  $total-length: $length;
  $string: $color1 0px 0px;
  @while $length > 0 {
    $mix-amount: 100 - (($length / $total-length) * 100);
    $mixed-color: mix($color1,$color2, $mix-amount);
    $string-addition: $length+px $length+px;
    $string: $mixed-color $string-addition, $string;
    $length: $length - 1;  
  }
  @return $string
}

@mixin longshadow($color1, $color2, $length) {  
  box-shadow: shadow-string($color1, $color2, $length);    
}
@mixin longshadowt($color1, $color2, $length) {  
  text-shadow: shadow-string($color1, $color2, $length);    
}

body {
   background-color:#F0F2F5;
   font-family:"arcon", sans-serif;
   overflow-x:hidden;
   overflow-y:scroll;
   display:flex;
   flex-direction:column;
   .error {
      z-index:1000000000;
      position: fixed;
      top:0px;
      left:0px;
      right:0px;
      bottom:0px;
      text-align:center;
      display:none;
      pointer-events:none;
      &.shown {
         display:block;
      }
      .overlay {
         pointer-events:auto;
         background-color:#ffffff;
         position: absolute;
         top:50%;
         left:50%;
         transform:translate(-50%,-50%);
         width:calc(100% - 120px);
         max-width:600px;
         padding:30px;
         display:flex;
         flex-direction:column;
         justify-content:center;
         border-radius:4px;
         @include longshadow(rgba(67,74,84,0.02), rgba(240,242,245,0), 120);
         .close {
            width:10px;
            height:10px;
            position: absolute;
            top:10px;
            right:10px;
            cursor: pointer;
            &:before, &:after {
               position: absolute;
               content: '';
               background-color:#E6E9ED;
               width:100%;
               height:20%;
               top:50%;
               left:50%;
               transform:translate(-50%,-50%) rotate(45deg);
            }
            &:after {
               transform:translate(-50%,-50%) rotate(-45deg);
            }
            &:hover {
               &:before, &:after {
                  background-color:#CCD1D9;
               }
            }
         }
         .colorcode {
            width:100%;
            input {
               width:calc(100% - 4px);
               font-family:"arcon", sans-serif;
               text-align:center;
               border:none;
               outline:none;
               padding:4px;
               background-color:#E6E9ED;
            }
         }
         .desc {
            pointer-events:auto;
            margin-top:10px;
         }
      }
      .catchment {
         pointer-events:auto;
         width:100%;
         height:100%;
         background-color:rgba(50,49,51,0.1);
      }
   }
   .dropdown {
      z-index:1000;
      position: relative;
      margin:auto;
      width:250px;
      border-radius:4px;
      @include longshadow(rgba(67,74,84,0.02), rgba(240,242,245,0), 60);
      .selection {
         position: relative;
         cursor: pointer;
         background-color:#434A54;
         color:#F5F7FA;
         padding: 10px;
         z-index:100;
         border-radius:4px;
         margin-top:20px;
         &:after {
            position: absolute;
            content: '';
            top:50%;
            right:8px;
            transform:translateY(-50%);
            border:8px solid transparent;
            border-bottom:0px solid #F5F7FA;
            border-top:8px solid #F5F7FA;
            width:0px;
         }
      }
      .options {
         border-bottom-left-radius:4px;
         border-bottom-right-radius:4px;
         position: absolute;
         top:100%;
         min-width:100%;
         background-color:#FFF;
         height:0px;
         //transition:.25s ease;
         overflow:hidden;
         @include longshadow(rgba(67,74,84,0.02), rgba(240,242,245,0), 60);
         div {
            padding: 0 10px;
            cursor: pointer;
            &:hover {
               background-color:#656D78;
               color:#F5F7FA;
            }
            &.selected {
               font-weight:bold; /*Don't add a bold font type so that adding bold keeps the same font size*/
            }
         }
      }
      &:hover {
         .options {
            height:auto;
            padding:10px 0;
         }
         .selection {
            border-bottom-left-radius:0px;
            border-bottom-right-radius:0px;
         }
         .selection:after {
            border:8px solid transparent;
            border-top:0px solid #F5F7FA;
            border-bottom:8px solid #F5F7FA;
         }
      }
   }
   .help {
      cursor: help;
      position: fixed;
      top:40px;
      right:30px;
      @include longshadow(rgba(67,74,84,0.02), rgba(240,242,245,0), 40);
      width:24px;
      height:24px;
      line-height:28px;
      text-align:center;
      background-color:#656D78;
      color:#F0F2F5;
      border-radius:100%;
      .container {
         display:none;
         line-height:18px;
         position: absolute;
         top:41px;
         right:-5px;
         color:#000;
         width:200px;
         z-index:10000000000;
         background-color:#fff;
         padding:0 20px;
         @include longshadow(rgba(67,74,84,0.02), rgba(240,242,245,0), 50);
         &:after {
            position: absolute;
            content: '';
            bottom:100%;
            right:0px;
            border:17px solid transparent;
            border-bottom-color:#fff;
         }
         a {
            color:#5D9CEC; 
            text-decoration:none;
         }
      }
      &:hover {
         .container {
            display:block;
         }
      }
   }
   .tweetthis {
      z-index:-10000000000;
      cursor: pointer;
      position: fixed;
      top:40px;
      right:60px;
      @include longshadow(rgba(67,74,84,0.02), rgba(240,242,245,0), 40);
      width:24px;
      height:24px;
      line-height:28px;
      text-align:center;
      background-color:#656D78;
      color:#F0F2F5;
      border-radius:100%;
      .fa-heart {
         margin-top:4px;
         display:none;
         transition:.25s ease;
         color:#F0F2F5;
      }
      &:active {
         .fa-twitter {
            display:none;
         }
         .fa-heart {
            display:block;
            color:#D8334A;
         }
      }
   }
   .palettes {
      padding:20px;
      display:flex;
      flex-direction:row;
      flex-wrap:wrap;
      justify-content:center;
      .palette {
         position: relative;
         width:140px;
         background-color:#fff;
         border-radius:4px;
         @include longshadow(rgba(67,74,84,0.02), rgba(240,242,245,0), 40);
         display:flex;
         flex-direction:column;
         margin:20px;
         .colours {
            height:50px;
            display:flex;
            flex-direction:row;
            >* {
               cursor: crosshair;
               flex-grow:1;
               transition:.25s ease;
               &:hover {
                  flex-grow:1.5;
               }
            }
            .c1 {
               border-top-left-radius:4px;
            }
            .c2 {
               border-top-right-radius:4px;
            }
         }
         .details {
            padding:6px 10px;
            .name {
               font-weight:bold;
            }
            .values {
               display:none;
               font-size:12px;
               color:#AAB2BD;
            }
         }
         &.add {
            position: relative;
            background-color:transparent;
            width:140px;
            height:102px;
            border:4px dotted #fff;
            box-shadow:none;
            .sign {
               position: absolute;
               top:50%;
               left:50%;
               transform:translate(-50%,-50%);
               width:50px;
               height:50px;
               background-color:#A0D468;
               border-radius:100%;
               @include longshadow(rgba(67,74,84,0.02), rgba(240,242,245,0), 30);
               cursor: pointer;
               &:before, &:after {
                  width:50%;
                  height:10%;
                  position: absolute;
                  content: '';
                  background-color:#fff;
                  top:50%;
                  left:50%;
                  transform:translate(-50%,-50%);
               }
               &:after {
                  transform:translate(-50%,-50%) rotate(90deg);
               }
            }
         }
      }
   }
   .individual {
      margin-bottom:40px;
      display:flex;
      justify-content:center;
      >* {
         position: relative;
         cursor: crosshair;
         width:50px;
         height:50px;
         border-radius:100%;
         margin:0 20px;
         @include longshadow(rgba(67,74,84,0.02), rgba(240,242,245,0), 40);
         border:4px solid #434A54;
         background-color:#F5F7FA;
      }
      .red {
         border-color:#ED5565;
      }
      .green {
         border-color:#A0D468;
      }
      .blue {
         border-color:#4FC1E9;
      }
   }
   .blast {
      z-index:-1000;
      position: absolute;
      top:50%;
      left:50%;
      transform:translate(-50%, -50%);
      opacity:0.1;
      border-radius:100%;
      animation: blast 1s ease-in;
   }
   .footnote {
      position: fixed;
      bottom:20px;
      left:20px;
      a {
         color:#5D9CEC;
      }
   }
   .hidden {
      position: fixed;
      top:-1000px;
   }
   .footer {
      z-index:-1000000;
      font-style:italic;
      color:#656D78;
      text-align:center;
      p {
         @include longshadowt($shadow, $bg, 20);
      }
   }
}

::-webkit-resizer {
    background-color: $bg;
}
::-webkit-scrollbar {
    background-color: $bg;
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-corner {
    background-color: $bg;
}
::-webkit-scrollbar-thumb {
    background-color: $shadow;
    border-radius: 5px;
}
@keyframes blast {
   0% {
      width:50px;
      height:50px;
      opacity:0.3;
   }
   100% {
      width:1000px;
      height:1000px;
      opacity:0;
   }
}

CSS
body {
  background-color: #F0F2F5;
  font-family: "arcon", sans-serif;
  overflow-x: hidden;
  overflow-y: scroll;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
body .error {
  z-index: 1000000000;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  text-align: center;
  display: none;
  pointer-events: none;
}
body .error.shown {
  display: block;
}
body .error .overlay {
  pointer-events: auto;
  background-color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: calc(100% - 120px);
  max-width: 600px;
  padding: 30px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 4px;
  box-shadow: rgba(68, 75, 85, 0.01983) 1px 1px, rgba(70, 77, 87, 0.01967) 2px 2px, rgba(71, 78, 88, 0.0195) 3px 3px, rgba(73, 79, 89, 0.01933) 4px 4px, rgba(74, 81, 90, 0.01917) 5px 5px, rgba(75, 82, 92, 0.019) 6px 6px, rgba(77, 83, 93, 0.01883) 7px 7px, rgba(78, 85, 94, 0.01867) 8px 8px, rgba(80, 86, 96, 0.0185) 9px 9px, rgba(81, 87, 97, 0.01833) 10px 10px, rgba(82, 89, 98, 0.01817) 11px 11px, rgba(84, 90, 100, 0.018) 12px 12px, rgba(85, 92, 101, 0.01783) 13px 13px, rgba(86, 93, 102, 0.01767) 14px 14px, rgba(88, 94, 103, 0.0175) 15px 15px, rgba(89, 96, 105, 0.01733) 16px 16px, rgba(91, 97, 106, 0.01717) 17px 17px, rgba(92, 98, 107, 0.017) 18px 18px, rgba(93, 100, 109, 0.01683) 19px 19px, rgba(95, 101, 110, 0.01667) 20px 20px, rgba(96, 102, 111, 0.0165) 21px 21px, rgba(98, 104, 113, 0.01633) 22px 22px, rgba(99, 105, 114, 0.01617) 23px 23px, rgba(101, 107, 115, 0.016) 24px 24px, rgba(102, 108, 116, 0.01583) 25px 25px, rgba(103, 109, 118, 0.01567) 26px 26px, rgba(105, 111, 119, 0.0155) 27px 27px, rgba(106, 112, 120, 0.01533) 28px 28px, rgba(108, 113, 122, 0.01517) 29px 29px, rgba(109, 115, 123, 0.015) 30px 30px, rgba(110, 116, 124, 0.01483) 31px 31px, rgba(112, 117, 126, 0.01467) 32px 32px, rgba(113, 119, 127, 0.0145) 33px 33px, rgba(115, 120, 128, 0.01433) 34px 34px, rgba(116, 122, 130, 0.01417) 35px 35px, rgba(117, 123, 131, 0.014) 36px 36px, rgba(119, 124, 132, 0.01383) 37px 37px, rgba(120, 126, 134, 0.01367) 38px 38px, rgba(122, 127, 135, 0.0135) 39px 39px, rgba(123, 129, 136, 0.01333) 40px 40px, rgba(125, 130, 138, 0.01317) 41px 41px, rgba(126, 131, 139, 0.013) 42px 42px, rgba(127, 133, 140, 0.01283) 43px 43px, rgba(129, 134, 142, 0.01267) 44px 44px, rgba(130, 135, 143, 0.0125) 45px 45px, rgba(132, 137, 144, 0.01233) 46px 46px, rgba(133, 138, 146, 0.01217) 47px 47px, rgba(135, 140, 147, 0.012) 48px 48px, rgba(136, 141, 148, 0.01183) 49px 49px, rgba(137, 142, 150, 0.01167) 50px 50px, rgba(139, 144, 151, 0.0115) 51px 51px, rgba(140, 145, 152, 0.01133) 52px 52px, rgba(142, 147, 154, 0.01117) 53px 53px, rgba(143, 148, 155, 0.011) 54px 54px, rgba(145, 149, 156, 0.01083) 55px 55px, rgba(146, 151, 158, 0.01067) 56px 56px, rgba(147, 152, 159, 0.0105) 57px 57px, rgba(149, 154, 160, 0.01033) 58px 58px, rgba(150, 155, 162, 0.01017) 59px 59px, rgba(152, 156, 163, 0.01) 60px 60px, rgba(153, 158, 164, 0.00983) 61px 61px, rgba(155, 159, 166, 0.00967) 62px 62px, rgba(156, 161, 167, 0.0095) 63px 63px, rgba(158, 162, 168, 0.00933) 64px 64px, rgba(159, 163, 170, 0.00917) 65px 65px, rgba(160, 165, 171, 0.009) 66px 66px, rgba(162, 166, 172, 0.00883) 67px 67px, rgba(163, 168, 174, 0.00867) 68px 68px, rgba(165, 169, 175, 0.0085) 69px 69px, rgba(166, 170, 176, 0.00833) 70px 70px, rgba(168, 172, 178, 0.00817) 71px 71px, rgba(169, 173, 179, 0.008) 72px 72px, rgba(171, 175, 180, 0.00783) 73px 73px, rgba(172, 176, 182, 0.00767) 74px 74px, rgba(173, 177, 183, 0.0075) 75px 75px, rgba(175, 179, 184, 0.00733) 76px 76px, rgba(176, 180, 186, 0.00717) 77px 77px, rgba(178, 182, 187, 0.007) 78px 78px, rgba(179, 183, 189, 0.00683) 79px 79px, rgba(181, 184, 190, 0.00667) 80px 80px, rgba(182, 186, 191, 0.0065) 81px 81px, rgba(184, 187, 193, 0.00633) 82px 82px, rgba(185, 189, 194, 0.00617) 83px 83px, rgba(187, 190, 195, 0.006) 84px 84px, rgba(188, 192, 197, 0.00583) 85px 85px, rgba(190, 193, 198, 0.00567) 86px 86px, rgba(191, 194, 199, 0.0055) 87px 87px, rgba(193, 196, 201, 0.00533) 88px 88px, rgba(194, 197, 202, 0.00517) 89px 89px, rgba(195, 199, 204, 0.005) 90px 90px, rgba(197, 200, 205, 0.00483) 91px 91px, rgba(198, 202, 206, 0.00467) 92px 92px, rgba(200, 203, 208, 0.0045) 93px 93px, rgba(201, 204, 209, 0.00433) 94px 94px, rgba(203, 206, 210, 0.00417) 95px 95px, rgba(204, 207, 212, 0.004) 96px 96px, rgba(206, 209, 213, 0.00383) 97px 97px, rgba(207, 210, 215, 0.00367) 98px 98px, rgba(209, 212, 216, 0.0035) 99px 99px, rgba(210, 213, 217, 0.00333) 100px 100px, rgba(212, 214, 219, 0.00317) 101px 101px, rgba(213, 216, 220, 0.003) 102px 102px, rgba(215, 217, 221, 0.00283) 103px 103px, rgba(216, 219, 223, 0.00267) 104px 104px, rgba(218, 220, 224, 0.0025) 105px 105px, rgba(219, 222, 226, 0.00233) 106px 106px, rgba(221, 223, 227, 0.00217) 107px 107px, rgba(222, 225, 228, 0.002) 108px 108px, rgba(224, 226, 230, 0.00183) 109px 109px, rgba(225, 227, 231, 0.00167) 110px 110px, rgba(227, 229, 232, 0.0015) 111px 111px, rgba(228, 230, 234, 0.00133) 112px 112px, rgba(230, 232, 235, 0.00117) 113px 113px, rgba(231, 233, 237, 0.001) 114px 114px, rgba(233, 235, 238, 0.00083) 115px 115px, rgba(234, 236, 239, 0.00067) 116px 116px, rgba(236, 238, 241, 0.0005) 117px 117px, rgba(237, 239, 242, 0.00033) 118px 118px, rgba(239, 241, 244, 0.00017) 119px 119px, rgba(240, 242, 245, 0) 120px 120px, rgba(67, 74, 84, 0.02) 0px 0px;
}
body .error .overlay .close {
  width: 10px;
  height: 10px;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
body .error .overlay .close:before, body .error .overlay .close:after {
  position: absolute;
  content: '';
  background-color: #E6E9ED;
  width: 100%;
  height: 20%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}
body .error .overlay .close:after {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}
body .error .overlay .close:hover:before, body .error .overlay .close:hover:after {
  background-color: #CCD1D9;
}
body .error .overlay .colorcode {
  width: 100%;
}
body .error .overlay .colorcode input {
  width: calc(100% - 4px);
  font-family: "arcon", sans-serif;
  text-align: center;
  border: none;
  outline: none;
  padding: 4px;
  background-color: #E6E9ED;
}
body .error .overlay .desc {
  pointer-events: auto;
  margin-top: 10px;
}
body .error .catchment {
  pointer-events: auto;
  width: 100%;
  height: 100%;
  background-color: rgba(50, 49, 51, 0.1);
}
body .dropdown {
  z-index: 1000;
  position: relative;
  margin: auto;
  width: 250px;
  border-radius: 4px;
  box-shadow: rgba(70, 77, 87, 0.01967) 1px 1px, rgba(73, 79, 89, 0.01933) 2px 2px, rgba(75, 82, 92, 0.019) 3px 3px, rgba(78, 85, 94, 0.01867) 4px 4px, rgba(81, 87, 97, 0.01833) 5px 5px, rgba(84, 90, 100, 0.018) 6px 6px, rgba(86, 93, 102, 0.01767) 7px 7px, rgba(89, 96, 105, 0.01733) 8px 8px, rgba(92, 98, 107, 0.017) 9px 9px, rgba(95, 101, 110, 0.01667) 10px 10px, rgba(98, 104, 113, 0.01633) 11px 11px, rgba(101, 107, 115, 0.016) 12px 12px, rgba(103, 109, 118, 0.01567) 13px 13px, rgba(106, 112, 120, 0.01533) 14px 14px, rgba(109, 115, 123, 0.015) 15px 15px, rgba(112, 117, 126, 0.01467) 16px 16px, rgba(115, 120, 128, 0.01433) 17px 17px, rgba(117, 123, 131, 0.014) 18px 18px, rgba(120, 126, 134, 0.01367) 19px 19px, rgba(123, 129, 136, 0.01333) 20px 20px, rgba(126, 131, 139, 0.013) 21px 21px, rgba(129, 134, 142, 0.01267) 22px 22px, rgba(132, 137, 144, 0.01233) 23px 23px, rgba(135, 140, 147, 0.012) 24px 24px, rgba(137, 142, 150, 0.01167) 25px 25px, rgba(140, 145, 152, 0.01133) 26px 26px, rgba(143, 148, 155, 0.011) 27px 27px, rgba(146, 151, 158, 0.01067) 28px 28px, rgba(149, 154, 160, 0.01033) 29px 29px, rgba(152, 156, 163, 0.01) 30px 30px, rgba(155, 159, 166, 0.00967) 31px 31px, rgba(158, 162, 168, 0.00933) 32px 32px, rgba(160, 165, 171, 0.009) 33px 33px, rgba(163, 168, 174, 0.00867) 34px 34px, rgba(166, 170, 176, 0.00833) 35px 35px, rgba(169, 173, 179, 0.008) 36px 36px, rgba(172, 176, 182, 0.00767) 37px 37px, rgba(175, 179, 184, 0.00733) 38px 38px, rgba(178, 182, 187, 0.007) 39px 39px, rgba(181, 184, 190, 0.00667) 40px 40px, rgba(184, 187, 193, 0.00633) 41px 41px, rgba(187, 190, 195, 0.006) 42px 42px, rgba(190, 193, 198, 0.00567) 43px 43px, rgba(193, 196, 201, 0.00533) 44px 44px, rgba(195, 199, 204, 0.005) 45px 45px, rgba(198, 202, 206, 0.00467) 46px 46px, rgba(201, 204, 209, 0.00433) 47px 47px, rgba(204, 207, 212, 0.004) 48px 48px, rgba(207, 210, 215, 0.00367) 49px 49px, rgba(210, 213, 217, 0.00333) 50px 50px, rgba(213, 216, 220, 0.003) 51px 51px, rgba(216, 219, 223, 0.00267) 52px 52px, rgba(219, 222, 226, 0.00233) 53px 53px, rgba(222, 225, 228, 0.002) 54px 54px, rgba(225, 227, 231, 0.00167) 55px 55px, rgba(228, 230, 234, 0.00133) 56px 56px, rgba(231, 233, 237, 0.001) 57px 57px, rgba(234, 236, 239, 0.00067) 58px 58px, rgba(237, 239, 242, 0.00033) 59px 59px, rgba(240, 242, 245, 0) 60px 60px, rgba(67, 74, 84, 0.02) 0px 0px;
}
body .dropdown .selection {
  position: relative;
  cursor: pointer;
  background-color: #434A54;
  color: #F5F7FA;
  padding: 10px;
  z-index: 100;
  border-radius: 4px;
  margin-top: 20px;
}
body .dropdown .selection:after {
  position: absolute;
  content: '';
  top: 50%;
  right: 8px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border: 8px solid transparent;
  border-bottom: 0px solid #F5F7FA;
  border-top: 8px solid #F5F7FA;
  width: 0px;
}
body .dropdown .options {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  position: absolute;
  top: 100%;
  min-width: 100%;
  background-color: #FFF;
  height: 0px;
  overflow: hidden;
  box-shadow: rgba(70, 77, 87, 0.01967) 1px 1px, rgba(73, 79, 89, 0.01933) 2px 2px, rgba(75, 82, 92, 0.019) 3px 3px, rgba(78, 85, 94, 0.01867) 4px 4px, rgba(81, 87, 97, 0.01833) 5px 5px, rgba(84, 90, 100, 0.018) 6px 6px, rgba(86, 93, 102, 0.01767) 7px 7px, rgba(89, 96, 105, 0.01733) 8px 8px, rgba(92, 98, 107, 0.017) 9px 9px, rgba(95, 101, 110, 0.01667) 10px 10px, rgba(98, 104, 113, 0.01633) 11px 11px, rgba(101, 107, 115, 0.016) 12px 12px, rgba(103, 109, 118, 0.01567) 13px 13px, rgba(106, 112, 120, 0.01533) 14px 14px, rgba(109, 115, 123, 0.015) 15px 15px, rgba(112, 117, 126, 0.01467) 16px 16px, rgba(115, 120, 128, 0.01433) 17px 17px, rgba(117, 123, 131, 0.014) 18px 18px, rgba(120, 126, 134, 0.01367) 19px 19px, rgba(123, 129, 136, 0.01333) 20px 20px, rgba(126, 131, 139, 0.013) 21px 21px, rgba(129, 134, 142, 0.01267) 22px 22px, rgba(132, 137, 144, 0.01233) 23px 23px, rgba(135, 140, 147, 0.012) 24px 24px, rgba(137, 142, 150, 0.01167) 25px 25px, rgba(140, 145, 152, 0.01133) 26px 26px, rgba(143, 148, 155, 0.011) 27px 27px, rgba(146, 151, 158, 0.01067) 28px 28px, rgba(149, 154, 160, 0.01033) 29px 29px, rgba(152, 156, 163, 0.01) 30px 30px, rgba(155, 159, 166, 0.00967) 31px 31px, rgba(158, 162, 168, 0.00933) 32px 32px, rgba(160, 165, 171, 0.009) 33px 33px, rgba(163, 168, 174, 0.00867) 34px 34px, rgba(166, 170, 176, 0.00833) 35px 35px, rgba(169, 173, 179, 0.008) 36px 36px, rgba(172, 176, 182, 0.00767) 37px 37px, rgba(175, 179, 184, 0.00733) 38px 38px, rgba(178, 182, 187, 0.007) 39px 39px, rgba(181, 184, 190, 0.00667) 40px 40px, rgba(184, 187, 193, 0.00633) 41px 41px, rgba(187, 190, 195, 0.006) 42px 42px, rgba(190, 193, 198, 0.00567) 43px 43px, rgba(193, 196, 201, 0.00533) 44px 44px, rgba(195, 199, 204, 0.005) 45px 45px, rgba(198, 202, 206, 0.00467) 46px 46px, rgba(201, 204, 209, 0.00433) 47px 47px, rgba(204, 207, 212, 0.004) 48px 48px, rgba(207, 210, 215, 0.00367) 49px 49px, rgba(210, 213, 217, 0.00333) 50px 50px, rgba(213, 216, 220, 0.003) 51px 51px, rgba(216, 219, 223, 0.00267) 52px 52px, rgba(219, 222, 226, 0.00233) 53px 53px, rgba(222, 225, 228, 0.002) 54px 54px, rgba(225, 227, 231, 0.00167) 55px 55px, rgba(228, 230, 234, 0.00133) 56px 56px, rgba(231, 233, 237, 0.001) 57px 57px, rgba(234, 236, 239, 0.00067) 58px 58px, rgba(237, 239, 242, 0.00033) 59px 59px, rgba(240, 242, 245, 0) 60px 60px, rgba(67, 74, 84, 0.02) 0px 0px;
}
body .dropdown .options div {
  padding: 0 10px;
  cursor: pointer;
}
body .dropdown .options div:hover {
  background-color: #656D78;
  color: #F5F7FA;
}
body .dropdown .options div.selected {
  font-weight: bold;
  /*Don't add a bold font type so that adding bold keeps the same font size*/
}
body .dropdown:hover .options {
  height: auto;
  padding: 10px 0;
}
body .dropdown:hover .selection {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
body .dropdown:hover .selection:after {
  border: 8px solid transparent;
  border-top: 0px solid #F5F7FA;
  border-bottom: 8px solid #F5F7FA;
}
body .help {
  cursor: help;
  position: fixed;
  top: 40px;
  right: 30px;
  box-shadow: rgba(71, 78, 88, 0.0195) 1px 1px, rgba(75, 82, 92, 0.019) 2px 2px, rgba(80, 86, 96, 0.0185) 3px 3px, rgba(84, 90, 100, 0.018) 4px 4px, rgba(88, 94, 103, 0.0175) 5px 5px, rgba(92, 98, 107, 0.017) 6px 6px, rgba(96, 102, 111, 0.0165) 7px 7px, rgba(101, 107, 115, 0.016) 8px 8px, rgba(105, 111, 119, 0.0155) 9px 9px, rgba(109, 115, 123, 0.015) 10px 10px, rgba(113, 119, 127, 0.0145) 11px 11px, rgba(117, 123, 131, 0.014) 12px 12px, rgba(122, 127, 135, 0.0135) 13px 13px, rgba(126, 131, 139, 0.013) 14px 14px, rgba(130, 135, 143, 0.0125) 15px 15px, rgba(135, 140, 147, 0.012) 16px 16px, rgba(139, 144, 151, 0.0115) 17px 17px, rgba(143, 148, 155, 0.011) 18px 18px, rgba(147, 152, 159, 0.0105) 19px 19px, rgba(152, 156, 163, 0.01) 20px 20px, rgba(156, 161, 167, 0.0095) 21px 21px, rgba(160, 165, 171, 0.009) 22px 22px, rgba(165, 169, 175, 0.0085) 23px 23px, rgba(169, 173, 179, 0.008) 24px 24px, rgba(173, 177, 183, 0.0075) 25px 25px, rgba(178, 182, 187, 0.007) 26px 26px, rgba(182, 186, 191, 0.0065) 27px 27px, rgba(187, 190, 195, 0.006) 28px 28px, rgba(191, 194, 199, 0.0055) 29px 29px, rgba(195, 199, 204, 0.005) 30px 30px, rgba(200, 203, 208, 0.0045) 31px 31px, rgba(204, 207, 212, 0.004) 32px 32px, rgba(209, 212, 216, 0.0035) 33px 33px, rgba(213, 216, 220, 0.003) 34px 34px, rgba(218, 220, 224, 0.0025) 35px 35px, rgba(222, 225, 228, 0.002) 36px 36px, rgba(227, 229, 232, 0.0015) 37px 37px, rgba(231, 233, 237, 0.001) 38px 38px, rgba(236, 238, 241, 0.0005) 39px 39px, rgba(240, 242, 245, 0) 40px 40px, rgba(67, 74, 84, 0.02) 0px 0px;
  width: 24px;
  height: 24px;
  line-height: 28px;
  text-align: center;
  background-color: #656D78;
  color: #F0F2F5;
  border-radius: 100%;
}
body .help .container {
  display: none;
  line-height: 18px;
  position: absolute;
  top: 41px;
  right: -5px;
  color: #000;
  width: 200px;
  z-index: 10000000000;
  background-color: #fff;
  padding: 0 20px;
  box-shadow: rgba(70, 77, 87, 0.0196) 1px 1px, rgba(74, 80, 90, 0.0192) 2px 2px, rgba(77, 84, 93, 0.0188) 3px 3px, rgba(80, 87, 96, 0.0184) 4px 4px, rgba(84, 90, 100, 0.018) 5px 5px, rgba(87, 93, 103, 0.0176) 6px 6px, rgba(90, 97, 106, 0.0172) 7px 7px, rgba(94, 100, 109, 0.0168) 8px 8px, rgba(97, 103, 112, 0.0164) 9px 9px, rgba(101, 107, 115, 0.016) 10px 10px, rgba(104, 110, 118, 0.0156) 11px 11px, rgba(107, 113, 121, 0.0152) 12px 12px, rgba(111, 116, 125, 0.0148) 13px 13px, rgba(114, 120, 128, 0.0144) 14px 14px, rgba(117, 123, 131, 0.014) 15px 15px, rgba(121, 126, 134, 0.0136) 16px 16px, rgba(124, 130, 137, 0.0132) 17px 17px, rgba(128, 133, 140, 0.0128) 18px 18px, rgba(131, 136, 144, 0.0124) 19px 19px, rgba(135, 140, 147, 0.012) 20px 20px, rgba(138, 143, 150, 0.0116) 21px 21px, rgba(141, 146, 153, 0.0112) 22px 22px, rgba(145, 150, 156, 0.0108) 23px 23px, rgba(148, 153, 160, 0.0104) 24px 24px, rgba(152, 156, 163, 0.01) 25px 25px, rgba(155, 160, 166, 0.0096) 26px 26px, rgba(159, 163, 169, 0.0092) 27px 27px, rgba(162, 166, 173, 0.0088) 28px 28px, rgba(166, 170, 176, 0.0084) 29px 29px, rgba(169, 173, 179, 0.008) 30px 30px, rgba(173, 177, 182, 0.0076) 31px 31px, rgba(176, 180, 186, 0.0072) 32px 32px, rgba(180, 183, 189, 0.0068) 33px 33px, rgba(183, 187, 192, 0.0064) 34px 34px, rgba(187, 190, 195, 0.006) 35px 35px, rgba(190, 194, 199, 0.0056) 36px 36px, rgba(194, 197, 202, 0.0052) 37px 37px, rgba(197, 200, 205, 0.0048) 38px 38px, rgba(201, 204, 208, 0.0044) 39px 39px, rgba(204, 207, 212, 0.004) 40px 40px, rgba(208, 211, 215, 0.0036) 41px 41px, rgba(211, 214, 218, 0.0032) 42px 42px, rgba(215, 218, 222, 0.0028) 43px 43px, rgba(218, 221, 225, 0.0024) 44px 44px, rgba(222, 225, 228, 0.002) 45px 45px, rgba(226, 228, 232, 0.0016) 46px 46px, rgba(229, 232, 235, 0.0012) 47px 47px, rgba(233, 235, 238, 0.0008) 48px 48px, rgba(236, 239, 242, 0.0004) 49px 49px, rgba(240, 242, 245, 0) 50px 50px, rgba(67, 74, 84, 0.02) 0px 0px;
}
body .help .container:after {
  position: absolute;
  content: '';
  bottom: 100%;
  right: 0px;
  border: 17px solid transparent;
  border-bottom-color: #fff;
}
body .help .container a {
  color: #5D9CEC;
  text-decoration: none;
}
body .help:hover .container {
  display: block;
}
body .tweetthis {
  z-index: -10000000000;
  cursor: pointer;
  position: fixed;
  top: 40px;
  right: 60px;
  box-shadow: rgba(71, 78, 88, 0.0195) 1px 1px, rgba(75, 82, 92, 0.019) 2px 2px, rgba(80, 86, 96, 0.0185) 3px 3px, rgba(84, 90, 100, 0.018) 4px 4px, rgba(88, 94, 103, 0.0175) 5px 5px, rgba(92, 98, 107, 0.017) 6px 6px, rgba(96, 102, 111, 0.0165) 7px 7px, rgba(101, 107, 115, 0.016) 8px 8px, rgba(105, 111, 119, 0.0155) 9px 9px, rgba(109, 115, 123, 0.015) 10px 10px, rgba(113, 119, 127, 0.0145) 11px 11px, rgba(117, 123, 131, 0.014) 12px 12px, rgba(122, 127, 135, 0.0135) 13px 13px, rgba(126, 131, 139, 0.013) 14px 14px, rgba(130, 135, 143, 0.0125) 15px 15px, rgba(135, 140, 147, 0.012) 16px 16px, rgba(139, 144, 151, 0.0115) 17px 17px, rgba(143, 148, 155, 0.011) 18px 18px, rgba(147, 152, 159, 0.0105) 19px 19px, rgba(152, 156, 163, 0.01) 20px 20px, rgba(156, 161, 167, 0.0095) 21px 21px, rgba(160, 165, 171, 0.009) 22px 22px, rgba(165, 169, 175, 0.0085) 23px 23px, rgba(169, 173, 179, 0.008) 24px 24px, rgba(173, 177, 183, 0.0075) 25px 25px, rgba(178, 182, 187, 0.007) 26px 26px, rgba(182, 186, 191, 0.0065) 27px 27px, rgba(187, 190, 195, 0.006) 28px 28px, rgba(191, 194, 199, 0.0055) 29px 29px, rgba(195, 199, 204, 0.005) 30px 30px, rgba(200, 203, 208, 0.0045) 31px 31px, rgba(204, 207, 212, 0.004) 32px 32px, rgba(209, 212, 216, 0.0035) 33px 33px, rgba(213, 216, 220, 0.003) 34px 34px, rgba(218, 220, 224, 0.0025) 35px 35px, rgba(222, 225, 228, 0.002) 36px 36px, rgba(227, 229, 232, 0.0015) 37px 37px, rgba(231, 233, 237, 0.001) 38px 38px, rgba(236, 238, 241, 0.0005) 39px 39px, rgba(240, 242, 245, 0) 40px 40px, rgba(67, 74, 84, 0.02) 0px 0px;
  width: 24px;
  height: 24px;
  line-height: 28px;
  text-align: center;
  background-color: #656D78;
  color: #F0F2F5;
  border-radius: 100%;
}
body .tweetthis .fa-heart {
  margin-top: 4px;
  display: none;
  -webkit-transition: .25s ease;
  transition: .25s ease;
  color: #F0F2F5;
}
body .tweetthis:active .fa-twitter {
  display: none;
}
body .tweetthis:active .fa-heart {
  display: block;
  color: #D8334A;
}
body .palettes {
  padding: 20px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
body .palettes .palette {
  position: relative;
  width: 140px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: rgba(71, 78, 88, 0.0195) 1px 1px, rgba(75, 82, 92, 0.019) 2px 2px, rgba(80, 86, 96, 0.0185) 3px 3px, rgba(84, 90, 100, 0.018) 4px 4px, rgba(88, 94, 103, 0.0175) 5px 5px, rgba(92, 98, 107, 0.017) 6px 6px, rgba(96, 102, 111, 0.0165) 7px 7px, rgba(101, 107, 115, 0.016) 8px 8px, rgba(105, 111, 119, 0.0155) 9px 9px, rgba(109, 115, 123, 0.015) 10px 10px, rgba(113, 119, 127, 0.0145) 11px 11px, rgba(117, 123, 131, 0.014) 12px 12px, rgba(122, 127, 135, 0.0135) 13px 13px, rgba(126, 131, 139, 0.013) 14px 14px, rgba(130, 135, 143, 0.0125) 15px 15px, rgba(135, 140, 147, 0.012) 16px 16px, rgba(139, 144, 151, 0.0115) 17px 17px, rgba(143, 148, 155, 0.011) 18px 18px, rgba(147, 152, 159, 0.0105) 19px 19px, rgba(152, 156, 163, 0.01) 20px 20px, rgba(156, 161, 167, 0.0095) 21px 21px, rgba(160, 165, 171, 0.009) 22px 22px, rgba(165, 169, 175, 0.0085) 23px 23px, rgba(169, 173, 179, 0.008) 24px 24px, rgba(173, 177, 183, 0.0075) 25px 25px, rgba(178, 182, 187, 0.007) 26px 26px, rgba(182, 186, 191, 0.0065) 27px 27px, rgba(187, 190, 195, 0.006) 28px 28px, rgba(191, 194, 199, 0.0055) 29px 29px, rgba(195, 199, 204, 0.005) 30px 30px, rgba(200, 203, 208, 0.0045) 31px 31px, rgba(204, 207, 212, 0.004) 32px 32px, rgba(209, 212, 216, 0.0035) 33px 33px, rgba(213, 216, 220, 0.003) 34px 34px, rgba(218, 220, 224, 0.0025) 35px 35px, rgba(222, 225, 228, 0.002) 36px 36px, rgba(227, 229, 232, 0.0015) 37px 37px, rgba(231, 233, 237, 0.001) 38px 38px, rgba(236, 238, 241, 0.0005) 39px 39px, rgba(240, 242, 245, 0) 40px 40px, rgba(67, 74, 84, 0.02) 0px 0px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 20px;
}
body .palettes .palette .colours {
  height: 50px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
}
body .palettes .palette .colours > * {
  cursor: crosshair;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-transition: .25s ease;
  transition: .25s ease;
}
body .palettes .palette .colours > *:hover {
  -webkit-box-flex: 1.5;
  -webkit-flex-grow: 1.5;
      -ms-flex-positive: 1.5;
          flex-grow: 1.5;
}
body .palettes .palette .colours .c1 {
  border-top-left-radius: 4px;
}
body .palettes .palette .colours .c2 {
  border-top-right-radius: 4px;
}
body .palettes .palette .details {
  padding: 6px 10px;
}
body .palettes .palette .details .name {
  font-weight: bold;
}
body .palettes .palette .details .values {
  display: none;
  font-size: 12px;
  color: #AAB2BD;
}
body .palettes .palette.add {
  position: relative;
  background-color: transparent;
  width: 140px;
  height: 102px;
  border: 4px dotted #fff;
  box-shadow: none;
}
body .palettes .palette.add .sign {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-color: #A0D468;
  border-radius: 100%;
  box-shadow: rgba(73, 79, 89, 0.01933) 1px 1px, rgba(78, 85, 94, 0.01867) 2px 2px, rgba(84, 90, 100, 0.018) 3px 3px, rgba(89, 96, 105, 0.01733) 4px 4px, rgba(95, 101, 110, 0.01667) 5px 5px, rgba(101, 107, 115, 0.016) 6px 6px, rgba(106, 112, 120, 0.01533) 7px 7px, rgba(112, 117, 126, 0.01467) 8px 8px, rgba(117, 123, 131, 0.014) 9px 9px, rgba(123, 129, 136, 0.01333) 10px 10px, rgba(129, 134, 142, 0.01267) 11px 11px, rgba(135, 140, 147, 0.012) 12px 12px, rgba(140, 145, 152, 0.01133) 13px 13px, rgba(146, 151, 158, 0.01067) 14px 14px, rgba(152, 156, 163, 0.01) 15px 15px, rgba(158, 162, 168, 0.00933) 16px 16px, rgba(163, 168, 174, 0.00867) 17px 17px, rgba(169, 173, 179, 0.008) 18px 18px, rgba(175, 179, 184, 0.00733) 19px 19px, rgba(181, 184, 190, 0.00667) 20px 20px, rgba(187, 190, 195, 0.006) 21px 21px, rgba(193, 196, 201, 0.00533) 22px 22px, rgba(198, 202, 206, 0.00467) 23px 23px, rgba(204, 207, 212, 0.004) 24px 24px, rgba(210, 213, 217, 0.00333) 25px 25px, rgba(216, 219, 223, 0.00267) 26px 26px, rgba(222, 225, 228, 0.002) 27px 27px, rgba(228, 230, 234, 0.00133) 28px 28px, rgba(234, 236, 239, 0.00067) 29px 29px, rgba(240, 242, 245, 0) 30px 30px, rgba(67, 74, 84, 0.02) 0px 0px;
  cursor: pointer;
}
body .palettes .palette.add .sign:before, body .palettes .palette.add .sign:after {
  width: 50%;
  height: 10%;
  position: absolute;
  content: '';
  background-color: #fff;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
body .palettes .palette.add .sign:after {
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
          transform: translate(-50%, -50%) rotate(90deg);
}
body .individual {
  margin-bottom: 40px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
body .individual > * {
  position: relative;
  cursor: crosshair;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  margin: 0 20px;
  box-shadow: rgba(71, 78, 88, 0.0195) 1px 1px, rgba(75, 82, 92, 0.019) 2px 2px, rgba(80, 86, 96, 0.0185) 3px 3px, rgba(84, 90, 100, 0.018) 4px 4px, rgba(88, 94, 103, 0.0175) 5px 5px, rgba(92, 98, 107, 0.017) 6px 6px, rgba(96, 102, 111, 0.0165) 7px 7px, rgba(101, 107, 115, 0.016) 8px 8px, rgba(105, 111, 119, 0.0155) 9px 9px, rgba(109, 115, 123, 0.015) 10px 10px, rgba(113, 119, 127, 0.0145) 11px 11px, rgba(117, 123, 131, 0.014) 12px 12px, rgba(122, 127, 135, 0.0135) 13px 13px, rgba(126, 131, 139, 0.013) 14px 14px, rgba(130, 135, 143, 0.0125) 15px 15px, rgba(135, 140, 147, 0.012) 16px 16px, rgba(139, 144, 151, 0.0115) 17px 17px, rgba(143, 148, 155, 0.011) 18px 18px, rgba(147, 152, 159, 0.0105) 19px 19px, rgba(152, 156, 163, 0.01) 20px 20px, rgba(156, 161, 167, 0.0095) 21px 21px, rgba(160, 165, 171, 0.009) 22px 22px, rgba(165, 169, 175, 0.0085) 23px 23px, rgba(169, 173, 179, 0.008) 24px 24px, rgba(173, 177, 183, 0.0075) 25px 25px, rgba(178, 182, 187, 0.007) 26px 26px, rgba(182, 186, 191, 0.0065) 27px 27px, rgba(187, 190, 195, 0.006) 28px 28px, rgba(191, 194, 199, 0.0055) 29px 29px, rgba(195, 199, 204, 0.005) 30px 30px, rgba(200, 203, 208, 0.0045) 31px 31px, rgba(204, 207, 212, 0.004) 32px 32px, rgba(209, 212, 216, 0.0035) 33px 33px, rgba(213, 216, 220, 0.003) 34px 34px, rgba(218, 220, 224, 0.0025) 35px 35px, rgba(222, 225, 228, 0.002) 36px 36px, rgba(227, 229, 232, 0.0015) 37px 37px, rgba(231, 233, 237, 0.001) 38px 38px, rgba(236, 238, 241, 0.0005) 39px 39px, rgba(240, 242, 245, 0) 40px 40px, rgba(67, 74, 84, 0.02) 0px 0px;
  border: 4px solid #434A54;
  background-color: #F5F7FA;
}
body .individual .red {
  border-color: #ED5565;
}
body .individual .green {
  border-color: #A0D468;
}
body .individual .blue {
  border-color: #4FC1E9;
}
body .blast {
  z-index: -1000;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0.1;
  border-radius: 100%;
  -webkit-animation: blast 1s ease-in;
          animation: blast 1s ease-in;
}
body .footnote {
  position: fixed;
  bottom: 20px;
  left: 20px;
}
body .footnote a {
  color: #5D9CEC;
}
body .hidden {
  position: fixed;
  top: -1000px;
}
body .footer {
  z-index: -1000000;
  font-style: italic;
  color: #656D78;
  text-align: center;
}
body .footer p {
  text-shadow: #e7e9ed 1px 1px, #e7eaee 2px 2px, #e8eaee 3px 3px, #e8ebef 4px 4px, #e9ebef 5px 5px, #e9ecef 6px 6px, #eaecf0 7px 7px, #eaedf0 8px 8px, #ebedf1 9px 9px, #ebeef1 10px 10px, #eceef1 11px 11px, #eceef2 12px 12px, #edeff2 13px 13px, #edeff3 14px 14px, #eef0f3 15px 15px, #eef0f3 16px 16px, #eff1f4 17px 17px, #eff1f4 18px 18px, #f0f2f5 19px 19px, #f0f2f5 20px 20px, #E6E9ED 0px 0px;
}

::-webkit-resizer {
  background-color: #F0F2F5;
}

::-webkit-scrollbar {
  background-color: #F0F2F5;
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-corner {
  background-color: #F0F2F5;
}

::-webkit-scrollbar-thumb {
  background-color: #E6E9ED;
  border-radius: 5px;
}

@-webkit-keyframes blast {
  0% {
    width: 50px;
    height: 50px;
    opacity: 0.3;
  }
  100% {
    width: 1000px;
    height: 1000px;
    opacity: 0;
  }
}

@keyframes blast {
  0% {
    width: 50px;
    height: 50px;
    opacity: 0.3;
  }
  100% {
    width: 1000px;
    height: 1000px;
    opacity: 0;
  }
}

Variables

Simplest improvement yet so useful, if I want to change a colour throughout a webpage I can change one variable and it updates for all instances.

SCSS
$bg:#F0F2F5;
...
background-color: $bg;

CSS
background-color: #F0F2F5;

Mixins and Functions

In the example I have some long shadows which would be a pain to manage and create, I can call a mixin to compile whatever style I want.
Edit: mixins return a style, functions return a string.
Mixins are called using

SCSS
@include mixin(var1, var2);

Functions are called using

SCSS
style-name: function(var1, var2);

SCSS
/*mixin by Dario Corsi
http://codepen.io/dariocorsi/pen/jqxERJ
*/
@function shadow-string($color1, $color2, $length){
  $total-length: $length;
  $string: $color1 0px 0px;
  @while $length > 0 {
    $mix-amount: 100 - (($length / $total-length) * 100);
    $mixed-color: mix($color1,$color2, $mix-amount);
    $string-addition: $length+px $length+px;
    $string: $mixed-color $string-addition, $string;
    $length: $length - 1;  
  }
  @return $string
}

@mixin longshadow($color1, $color2, $length) {  
  box-shadow: shadow-string($color1, $color2, $length);    
}
...
@include longshadow(rgba(67,74,84,0.02), rgba(240,242,245,0), 120);

CSS
box-shadow: rgba(68, 75, 85, 0.01983) 1px 1px, rgba(70, 77, 87, 0.01967) 2px 2px, rgba(71, 78, 88, 0.0195) 3px 3px, rgba(73, 79, 89, 0.01933) 4px 4px, rgba(74, 81, 90, 0.01917) 5px 5px, rgba(75, 82, 92, 0.019) 6px 6px, rgba(77, 83, 93, 0.01883) 7px 7px, rgba(78, 85, 94, 0.01867) 8px 8px, rgba(80, 86, 96, 0.0185) 9px 9px, rgba(81, 87, 97, 0.01833) 10px 10px, rgba(82, 89, 98, 0.01817) 11px 11px, rgba(84, 90, 100, 0.018) 12px 12px, rgba(85, 92, 101, 0.01783) 13px 13px, rgba(86, 93, 102, 0.01767) 14px 14px, rgba(88, 94, 103, 0.0175) 15px 15px, rgba(89, 96, 105, 0.01733) 16px 16px, rgba(91, 97, 106, 0.01717) 17px 17px, rgba(92, 98, 107, 0.017) 18px 18px, rgba(93, 100, 109, 0.01683) 19px 19px, rgba(95, 101, 110, 0.01667) 20px 20px, rgba(96, 102, 111, 0.0165) 21px 21px, rgba(98, 104, 113, 0.01633) 22px 22px, rgba(99, 105, 114, 0.01617) 23px 23px, rgba(101, 107, 115, 0.016) 24px 24px, rgba(102, 108, 116, 0.01583) 25px 25px, rgba(103, 109, 118, 0.01567) 26px 26px, rgba(105, 111, 119, 0.0155) 27px 27px, rgba(106, 112, 120, 0.01533) 28px 28px, rgba(108, 113, 122, 0.01517) 29px 29px, rgba(109, 115, 123, 0.015) 30px 30px, rgba(110, 116, 124, 0.01483) 31px 31px, rgba(112, 117, 126, 0.01467) 32px 32px, rgba(113, 119, 127, 0.0145) 33px 33px, rgba(115, 120, 128, 0.01433) 34px 34px, rgba(116, 122, 130, 0.01417) 35px 35px, rgba(117, 123, 131, 0.014) 36px 36px, rgba(119, 124, 132, 0.01383) 37px 37px, rgba(120, 126, 134, 0.01367) 38px 38px, rgba(122, 127, 135, 0.0135) 39px 39px, rgba(123, 129, 136, 0.01333) 40px 40px, rgba(125, 130, 138, 0.01317) 41px 41px, rgba(126, 131, 139, 0.013) 42px 42px, rgba(127, 133, 140, 0.01283) 43px 43px, rgba(129, 134, 142, 0.01267) 44px 44px, rgba(130, 135, 143, 0.0125) 45px 45px, rgba(132, 137, 144, 0.01233) 46px 46px, rgba(133, 138, 146, 0.01217) 47px 47px, rgba(135, 140, 147, 0.012) 48px 48px, rgba(136, 141, 148, 0.01183) 49px 49px, rgba(137, 142, 150, 0.01167) 50px 50px, rgba(139, 144, 151, 0.0115) 51px 51px, rgba(140, 145, 152, 0.01133) 52px 52px, rgba(142, 147, 154, 0.01117) 53px 53px, rgba(143, 148, 155, 0.011) 54px 54px, rgba(145, 149, 156, 0.01083) 55px 55px, rgba(146, 151, 158, 0.01067) 56px 56px, rgba(147, 152, 159, 0.0105) 57px 57px, rgba(149, 154, 160, 0.01033) 58px 58px, rgba(150, 155, 162, 0.01017) 59px 59px, rgba(152, 156, 163, 0.01) 60px 60px, rgba(153, 158, 164, 0.00983) 61px 61px, rgba(155, 159, 166, 0.00967) 62px 62px, rgba(156, 161, 167, 0.0095) 63px 63px, rgba(158, 162, 168, 0.00933) 64px 64px, rgba(159, 163, 170, 0.00917) 65px 65px, rgba(160, 165, 171, 0.009) 66px 66px, rgba(162, 166, 172, 0.00883) 67px 67px, rgba(163, 168, 174, 0.00867) 68px 68px, rgba(165, 169, 175, 0.0085) 69px 69px, rgba(166, 170, 176, 0.00833) 70px 70px, rgba(168, 172, 178, 0.00817) 71px 71px, rgba(169, 173, 179, 0.008) 72px 72px, rgba(171, 175, 180, 0.00783) 73px 73px, rgba(172, 176, 182, 0.00767) 74px 74px, rgba(173, 177, 183, 0.0075) 75px 75px, rgba(175, 179, 184, 0.00733) 76px 76px, rgba(176, 180, 186, 0.00717) 77px 77px, rgba(178, 182, 187, 0.007) 78px 78px, rgba(179, 183, 189, 0.00683) 79px 79px, rgba(181, 184, 190, 0.00667) 80px 80px, rgba(182, 186, 191, 0.0065) 81px 81px, rgba(184, 187, 193, 0.00633) 82px 82px, rgba(185, 189, 194, 0.00617) 83px 83px, rgba(187, 190, 195, 0.006) 84px 84px, rgba(188, 192, 197, 0.00583) 85px 85px, rgba(190, 193, 198, 0.00567) 86px 86px, rgba(191, 194, 199, 0.0055) 87px 87px, rgba(193, 196, 201, 0.00533) 88px 88px, rgba(194, 197, 202, 0.00517) 89px 89px, rgba(195, 199, 204, 0.005) 90px 90px, rgba(197, 200, 205, 0.00483) 91px 91px, rgba(198, 202, 206, 0.00467) 92px 92px, rgba(200, 203, 208, 0.0045) 93px 93px, rgba(201, 204, 209, 0.00433) 94px 94px, rgba(203, 206, 210, 0.00417) 95px 95px, rgba(204, 207, 212, 0.004) 96px 96px, rgba(206, 209, 213, 0.00383) 97px 97px, rgba(207, 210, 215, 0.00367) 98px 98px, rgba(209, 212, 216, 0.0035) 99px 99px, rgba(210, 213, 217, 0.00333) 100px 100px, rgba(212, 214, 219, 0.00317) 101px 101px, rgba(213, 216, 220, 0.003) 102px 102px, rgba(215, 217, 221, 0.00283) 103px 103px, rgba(216, 219, 223, 0.00267) 104px 104px, rgba(218, 220, 224, 0.0025) 105px 105px, rgba(219, 222, 226, 0.00233) 106px 106px, rgba(221, 223, 227, 0.00217) 107px 107px, rgba(222, 225, 228, 0.002) 108px 108px, rgba(224, 226, 230, 0.00183) 109px 109px, rgba(225, 227, 231, 0.00167) 110px 110px, rgba(227, 229, 232, 0.0015) 111px 111px, rgba(228, 230, 234, 0.00133) 112px 112px, rgba(230, 232, 235, 0.00117) 113px 113px, rgba(231, 233, 237, 0.001) 114px 114px, rgba(233, 235, 238, 0.00083) 115px 115px, rgba(234, 236, 239, 0.00067) 116px 116px, rgba(236, 238, 241, 0.0005) 117px 117px, rgba(237, 239, 242, 0.00033) 118px 118px, rgba(239, 241, 244, 0.00017) 119px 119px, rgba(240, 242, 245, 0) 120px 120px, rgba(67, 74, 84, 0.02) 0px 0px;

Indentation

A child element is encapsulated within a parent, if I have `.overlay` inside `.error` inside `body` I would nest the stylings.
Pracitcal example: http://codepen.io/OfficialAntarctica/pe … itors=0100

SCSS
body {
    //Stylings for body
   .error {
      //Stylings for .error as child of body
      .overlay {
         //Stylings for .overlay as a child of .error and child of body
         //Also, you can double slash note in SCSS while you have to /*note*/ in CSS
      }
      .exampleclass {
         //Stylings for .exampleclass as a child of .error and child of body
      }
   }
   .messagebox {
      //Stylings for .messagebox as child of body
      >.exampleclass {
         //Stylings for .exampleclass as a direct child of .messagebox and child of body
      }
   }
}

CSS
body {
    /*Stylings for body*/
}
body .error {
   /*Stylings for .error as child of body*/
}
body .error .overlay {
   /*Stylings for .overlay as a child of .error and child of body*/
}
body .messagebox {
   /*Stylings for .messagebox as child of body*/
}
body .messagebox >.exampleclass  {
   /*Stylings for .exampleclass as a direct child of .messagebox and child of body*/
}

This is also the same for self references, for instance if an element has a specific class, id or attribute

SCSS
div {
   &.class1 {
      //div with class `class1`
   }
   &#id1 {
      //div with ìd `id1`
   }
   &:before, &:after {
      //pseudo-elements of div
   }
   &:hover {
      //div being hovered on (works with all other selectors)
      &:before, &:after {
         //pseudo-elements of div while parent is being hovered on
      }
   }
}

Other things

You can use `for` and `while` loops, I took the following code from: http://codepen.io/pixelass/pen/RPLyyq (also check out some of the other things Gregor Adams has made)

SCSS
$levels: 30; //Play around with this value in the pen
...
div {
   ...
   @for $i from 1 through $levels {
    &:nth-child(#{$i}) {
      font-size: 1em - 1/($levels + 1)*$i;
      transform: rotate($i*10deg - pow($i,2)/3) translateY(-3em) rotate(-20deg*sin(20deg*$i));
      filter: hue-rotate(20deg*$i);
    }
  }
}

So this is an example of a `for` loop but also shows some of the maths functions `pow(,)` and `sin()`, rather than writing out all of the styles for each circle what compiles to 326 lines takes 74 SLOC to write.

Summery
I am a huge fan of SCSS because of its formatting and little extras; CSS formatting is valid in SCSS so if you do like writing your stylings in single blocks then you can still use that while including mixins and variables.
I learnt SCSS from looking at what other people have done on CodePen

---

Thank you eleizibeth ^

I stack my signatures rather than delete them so I don't lose them