@import url("../Vendor/yaml/core/base.min.css");
/**
 *
 * SLIDE LINK
 *
 */
.CodeMirror {
  font-family: "Lucida Grande";
  font-size: 13px;
}

.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler {
  position: absolute !important;
}

@font-face {
  font-family: 'Microgramma';
  src: url("../WebFonts/Microgramma/microgramma.eot");
  src: url("../WebFonts/Microgramma/microgramma.eot") format("embedded-opentype"), url("../WebFonts/Microgramma/microgramma.woff") format("woff"), url("../WebFonts/Microgramma/microgramma.ttf") format("truetype"), url("../WebFonts/Microgramma/microgramma.svg#webfont") format("svg");
}

[draggable=true] {
  -khtml-user-drag: element;
}

html, body {
  height: 100%;
}

h1,
h2,
h3,
h4 {
  color: #99cc66;
  font-size: 26px;
  text-decoration: none;
  font-family: myriad-pro-semi-condensed, Arial, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
}

h2 {
  font-size: 22px;
}

h3 {
  font-size: 18px;
}

h4 {
  font-size: 16px;
}

a {
  color: #99cc66;
}
a:hover {
  text-decoration: none;
}

p {
  margin-bottom: 15px;
}

ul {
  margin: 0;
}

h1 {
  font-weight: bold;
  color: black;
}

.center {
  text-align: center;
}

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  color: #CCCCCC;
  background: url("../Images/backgroundNoise.png") black;
}

footer {
  color: #535353;
}

section#main {
  -webkit-perspective: 800;
  -moz-perspective: 800;
  -o-perspective: 800;
  perspective: 800;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  -o-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}

.box, .login-box {
  background-color: #2c2c2c;
  border-radius: 10px;
  z-index: 2;
  box-shadow: 0 0 5px #212121 inset;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  margin: 0 auto;
  width: 400px;
}
.box:after, .login-box:after {
  content: '';
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5), 0 0 140px rgba(255, 255, 255, 0.25);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 10px;
  z-index: -1;
}
.box input, .login-box input,
.box textarea,
.login-box textarea,
.box button,
.login-box button,
.box a.button,
.login-box a.button {
  -webkit-transform: translateZ(10px);
  -moz-transform: translateZ(10px);
  -o-transform: translateZ(10px);
  transform: translateZ(10px);
}
.box > h1, .login-box > h1 {
  font-size: 20px;
  font-family: 'Microgramma';
  font-weight: normal;
  text-shadow: 0 1px 5px rgba(222, 222, 222, 0.75);
  background: #99cc66;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #70954b), color-stop(1, #99cc66));
  background: -ms-linear-gradient(bottom, #70954b, #99cc66);
  background: -moz-linear-gradient(center bottom, #70954b 0%, #99cc66 100%);
  background: -o-linear-gradient(#99cc66, #70954b);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='{$stop}', endColorstr='{$start}', GradientType=0);
  border: 1px solid #354f1c;
  border-radius: 10px 10px 0 0;
  padding: 5px 10px;
  box-shadow: 0 1px 4px rgba(255, 255, 255, 0.5) inset;
  text-transform: none;
}
.box > h1.cms:after, .login-box > h1.cms:after {
  content: 'CMS';
  text-shadow: none;
  position: absolute;
  right: 5px;
  border-radius: 5px;
  border: 1px solid #425f25;
  background-color: rgba(103, 163, 0, 0.5);
  color: #425f25;
  font-size: 12px;
  padding: 3px 5px;
  margin-top: 2px;
  box-shadow: 0 0 5px #99cc66;
  -webkit-transform: translateZ(10px);
  -moz-transform: translateZ(10px);
  -o-transform: translateZ(10px);
  transform: translateZ(10px);
}
.box .flash-messages, .login-box .flash-messages {
  width: 80%;
  margin: 0 auto;
}
.box > .content, .login-box > .content {
  padding: 10px 10px 50px;
}
.box > footer, .login-box > footer {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 32px;
  text-align: right;
  padding: 5px;
}
.box.message h2, .message.login-box h2 {
  text-align: center;
  padding: 10px;
}
.box.message .content, .message.login-box .content {
  text-align: center;
  padding: 10px;
}
.box.message > input[type=text], .message.login-box > input[type=text] {
  width: 90%;
  margin: 0 auto 10px;
  display: block;
}
.box.message footer, .message.login-box footer {
  position: static;
  text-align: center;
  height: auto;
  background-color: rgba(0, 0, 0, 0.3);
  border-top: 1px solid gray;
  padding: 5px 10px;
  border-radius: 0 0 10px 10px;
}

input[type=button],
input[type=submit],
button,
a.button {
  background: #99cc66;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #70954b), color-stop(1, #99cc66));
  background: -ms-linear-gradient(bottom, #70954b, #99cc66);
  background: -moz-linear-gradient(center bottom, #70954b 0%, #99cc66 100%);
  background: -o-linear-gradient(#99cc66, #70954b);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='{$stop}', endColorstr='{$start}', GradientType=0);
  border: 1px solid #354f1c;
  box-shadow: 0 1px 4px rgba(255, 255, 255, 0.5) inset;
  border-radius: 5px;
  padding: 5px 10px 2px;
  color: #354f1c;
  font-size: 18px;
  text-decoration: none;
  font-family: myriad-pro-semi-condensed, Arial, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}
input[type=button]:not(:disabled):hover,
input[type=submit]:not(:disabled):hover,
button:not(:disabled):hover,
a.button:not(:disabled):hover {
  box-shadow: 0 1px 4px rgba(255, 255, 255, 0.5) inset, 0 0 5px 3px #99cc66 inset;
}
input[type=button]:disabled,
input[type=submit]:disabled,
button:disabled,
a.button:disabled {
  cursor: default;
  background: #333333;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #262626), color-stop(1, #333333));
  background: -ms-linear-gradient(bottom, #262626, #333333);
  background: -moz-linear-gradient(center bottom, #262626 0%, #333333 100%);
  background: -o-linear-gradient(#333333, #262626);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='{$stop}', endColorstr='{$start}', GradientType=0);
  color: #354f1c;
  text-shadow: none;
  box-shadow: none;
}
input[type=button]:not(:disabled):active,
input[type=submit]:not(:disabled):active,
button:not(:disabled):active,
a.button:not(:disabled):active {
  background: #8cc653;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #638442), color-stop(1, #8cc653));
  background: -ms-linear-gradient(bottom, #638442, #8cc653);
  background: -moz-linear-gradient(center bottom, #638442 0%, #8cc653 100%);
  background: -o-linear-gradient(#8cc653, #638442);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='{$stop}', endColorstr='{$start}', GradientType=0);
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.5) inset, 0 0 3px rgba(0, 0, 0, 0.3) inset;
  text-shadow: 0 -1px 3px rgba(0, 0, 0, 0.3);
  border-color: #4e7529;
}
input[type=button].red,
input[type=submit].red,
button.red,
a.button.red {
  background: #cc0000;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #990000), color-stop(1, #cc0000));
  background: -ms-linear-gradient(bottom, #990000, #cc0000);
  background: -moz-linear-gradient(center bottom, #990000 0%, #cc0000 100%);
  background: -o-linear-gradient(#cc0000, #990000);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='{$stop}', endColorstr='{$start}', GradientType=0);
  color: #4d0000;
  box-shadow: 0 1px 4px red inset;
  text-shadow: 0 1px 1px #990000;
  border-color: #4d0000;
}
input[type=button].red:not(:disabled):hover, input[type=button].red:not(:disabled):active,
input[type=submit].red:not(:disabled):hover,
input[type=submit].red:not(:disabled):active,
button.red:not(:disabled):hover,
button.red:not(:disabled):active,
a.button.red:not(:disabled):hover,
a.button.red:not(:disabled):active {
  box-shadow: 0 1px 4px #660000 inset, 0 0 5px 3px #990000 inset;
}
input[type=button].red:not(:disabled):active,
input[type=submit].red:not(:disabled):active,
button.red:not(:disabled):active,
a.button.red:not(:disabled):active {
  background: #990000;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #660000), color-stop(1, #990000));
  background: -ms-linear-gradient(bottom, #660000, #990000);
  background: -moz-linear-gradient(center bottom, #660000 0%, #990000 100%);
  background: -o-linear-gradient(#990000, #660000);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='{$stop}', endColorstr='{$start}', GradientType=0);
  color: #cc0000;
  border-color: #4d0000;
}

input[type=text],
input[type=password],
input[type=number],
textarea,
select,
.aloha-editable {
  border-radius: 4px;
  border: 1px solid #99cc66 !important;
  background: white;
  padding: 8px;
  color: black;
  outline: none;
  font-family: myriad-pro-semi-condensed, Arial, sans-serif;
  font-size: 16px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: box-shadow 0.5s ease-in-out;
  -moz-transition: box-shadow 0.5s ease-in-out;
  -o-transition: box-shadow 0.5s ease-in-out;
  transition: box-shadow 0.5s ease-in-out;
}
input[type=text]:focus,
input[type=password]:focus,
input[type=number]:focus,
textarea:focus,
select:focus,
.aloha-editable:focus {
  box-shadow: 0 0 20px #99cc66;
}
input[type=text].red,
input[type=password].red,
input[type=number].red,
textarea.red,
select.red,
.aloha-editable.red {
  border-color: red !important;
}
input[type=text].red:focus,
input[type=password].red:focus,
input[type=number].red:focus,
textarea.red:focus,
select.red:focus,
.aloha-editable.red:focus {
  box-shadow: 0 0 20px red;
}

a.button {
  display: inline-block;
}

select {
  height: 38px;
}

.flash-messages {
  border: 1px solid #99cc66;
  background-color: rgba(153, 204, 102, 0.5);
  border-radius: 5px;
  list-style-type: none;
}
.flash-messages li {
  color: #99cc66;
  font-weight: bold;
  line-height: 20px;
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"] + label span {
  display: inline-block;
  width: 19px;
  height: 19px;
  margin: -1px 4px 0 0;
  vertical-align: middle;
  background: url("../Images/form/check-radio-sprite.png") left top no-repeat;
  cursor: pointer;
}

input[type="checkbox"]:checked + label span {
  background-position: -19px top;
}

body > footer {
  position: absolute;
  bottom: 10%;
  width: 100%;
}
body > footer .ym-wrapper {
  text-align: center;
}

#main {
  width: 100%;
  height: 100%;
}

@-webkit-keyframes loginBox {
  from {
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -o-transform: rotateX(90deg);
    transform: rotateX(90deg);
    box-shadow: none;
    opacity: 0;
  }

  to {
    -webkit-transform: rotateX(20deg);
    -moz-transform: rotateX(20deg);
    -o-transform: rotateX(20deg);
    transform: rotateX(20deg);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5), 0 0 140px rgba(255, 255, 255, 0.25);
    opacity: 1;
  }
}

@-moz-keyframes loginBox {
  from {
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -o-transform: rotateX(90deg);
    transform: rotateX(90deg);
    box-shadow: none;
    opacity: 0;
  }

  to {
    -webkit-transform: rotateX(20deg);
    -moz-transform: rotateX(20deg);
    -o-transform: rotateX(20deg);
    transform: rotateX(20deg);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5), 0 0 140px rgba(255, 255, 255, 0.25);
    opacity: 1;
  }
}

@-ms-keyframes loginBox {
  from {
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -o-transform: rotateX(90deg);
    transform: rotateX(90deg);
    box-shadow: none;
    opacity: 0;
  }

  to {
    -webkit-transform: rotateX(20deg);
    -moz-transform: rotateX(20deg);
    -o-transform: rotateX(20deg);
    transform: rotateX(20deg);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5), 0 0 140px rgba(255, 255, 255, 0.25);
    opacity: 1;
  }
}

@keyframes loginBox {
  from {
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -o-transform: rotateX(90deg);
    transform: rotateX(90deg);
    box-shadow: none;
    opacity: 0;
  }

  to {
    -webkit-transform: rotateX(20deg);
    -moz-transform: rotateX(20deg);
    -o-transform: rotateX(20deg);
    transform: rotateX(20deg);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5), 0 0 140px rgba(255, 255, 255, 0.25);
    opacity: 1;
  }
}

.login-box {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5), 0 0 140px rgba(255, 255, 255, 0.25);
  -webkit-animation-name: loginBox;
  -moz-animation-name: loginBox;
  -o-animation-name: loginBox;
  animation-name: loginBox;
  -webkit-animation-duration: 3s;
  -moz-animation-duration: 3s;
  -o-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
  opacity: 0;
  -webkit-transform: rotateX(20deg);
  -moz-transform: rotateX(20deg);
  -o-transform: rotateX(20deg);
  transform: rotateX(20deg);
  position: absolute;
  top: 50%;
  left: 50%;
  width: 450px;
  height: 250px;
  margin: -125px 0 0 -225px;
}
.login-box:after {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.login-box.animationStart {
  opacity: 1;
}
.login-box.animationEnd {
  -webkit-transition-property: -webkit-transform, -moz-transform, -o-transform, transform;
  -moz-transition-property: -webkit-transform, -moz-transform, -o-transform, transform;
  -o-transition-property: -webkit-transform, -moz-transform, -o-transform, transform;
  transition-property: -webkit-transform, -moz-transform, -o-transform, transform;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-timing-function: "ease-in-out";
  -moz-transition-timing-function: "ease-in-out";
  -o-transition-timing-function: "ease-in-out";
  transition-timing-function: "ease-in-out";
}
.login-box.animationEnd:hover {
  -webkit-transform: rotateX(0);
  -moz-transform: rotateX(0);
  -o-transform: rotateX(0);
  transform: rotateX(0);
}
.login-box input[type=text],
.login-box input[type=password] {
  width: 100%;
}
.login-box > .content {
  padding-top: 50px;
}
.login-box > .content > p {
  margin-top: 20px;
}
.login-box .ym-g50 {
  text-align: center;
  padding: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
.login-box .flash-messages {
  margin: -30px auto 10px;
}