#charms {
   background-color: #004D60;
   position: fixed;
   top: 0%;
   .DockItem("right", 0%);
   width: 320px;
   height: 100%;
   padding: 0;
   margin: 0;
   display: block;
   a.win-command {
      background-clip: border-box;
      display: inline-block;
      margin: 0;
      padding: 0;
      .border-radius(50%);
   }
   .charms-section {
      .SwapMargin(0, 40px, 40px, 40px);
   }
   a:hover {
      background-color: #216475;
   }
   .charms-header {
      position: relative;
      .SwapPadding(40px, 0, 30px, 0);
      a#pin-charms {
         color: #FFF;
         font-size: 11px;
         height: 20px;
         position: absolute;
         .DockItem("right", 2px);
         text-align: center;
         top: 2px;
         width: 20px;
         .MarginLeftOrRight("margin-right",-24px);
      }
      a#pin-charms.active {
         background-color: #FFF;
         .border-radius(50%);
         color: #000;
      }
      h2 {
         display: inline-block;
         color: #FFF;
         .MarginLeftOrRight("margin-left",10px);
      }
   }
   hr {
      border: 1px solid #357281;
   }
}
#charms h2,
#charms h3,
#charms h4,
#charms p,
#charms a,
#charms label {
   color: #19BFC9;
}
#charms .charms-header a.win-backbutton {
   font-size: 20px;
   width: 32px;
   height: 32px;
   line-height: 32px;
   vertical-align: top;
}
#charms-body {
   min-width: 350px;
}
#charms.slide {
   .DockItem("right", -320px);
   -webkit-transition: all 0.36s ease;
      -moz-transition: all 0.36s ease;
       -ms-transition: all 0.36s ease;
        -o-transition: all 0.36s ease;
           transition: all 0.36s ease;
}
#charms.slide.in {
   .DockItem("right", 0);
}
