/*notifyMe.js Styles*/

.notifyMeContainer {
    position: fixed;
    width: 320px;
}

.notification {
    background-color: #b2aeae;
    color: #333;
    padding: 5px 10px;
    margin: 10px 0;
    font-size: 13px;
    box-shadow: 1px 1px 3px rgba(188, 188, 188, 0.2);
	  animation-duration:  .5s;
    -webkit-animation-duration:  .5s;
	  animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

#notifyMeContainer-topLeft .notification, #notifyMeContainer-bottomLeft .notification {
	animation-name: NotifyMeLeft;
  -webkit-animation-name: NotifyMeLeft;
}

#notifyMeContainer-topRight .notification, #notifyMeContainer-bottomRight .notification {
	animation-name: NotifyMeRight;
  -webkit-animation-name: NotifyMeRight;
}

.notification.warning {
	border-bottom: 5px solid #f6ff00;
	box-shadow: 1px 1px 3px rgba(246,255,0,0.9);
}

.notification.success {
	border-bottom: 5px solid #17c900;
	box-shadow: 1px 1px 3px rgba(23,201,0,0.9);
}

.notification.error {
	border-bottom: 5px solid #ff0000;
	box-shadow: 1px 1px 3px rgba(255,0,0,0.9);
}

.notifyMeTitle {
    margin-top: 5px;
}

.notifyMeText {
	color: #000000;
	font-size: 15px;
}

.close {
    float: right;
    background: none;
    border: none;
    color: #000;
    cursor: pointer;
    position: relative;
}

@keyframes NotifyMeLeft {
  from {
    transform: translate3d(-400px, 0, 0);
    -webkit-transform: translate3d(-400px, 0, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@-webkit-keyframes NotifyMeLeft {
  from {
    transform: translate3d(-400px, 0, 0);
    -webkit-transform: translate3d(-400px, 0, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes NotifyMeRight {
  from {
    transform: translate3d(400px, 0, 0);
    -webkit-transform: translate3d(400px, 0, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@-webkit-keyframes NotifyMeRight {
  from {
    transform: translate3d(400px, 0, 0);
    -webkit-transform: translate3d(400px, 0, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}