#note {
        position: absolute;
        z-index: 1000;
        top: 150px;
        left: 30%;
        right: 30%;
        background: #fde073;
        text-align: center;
        width:auto;
		font-size:18px;
		
	color:var(--font-color);
        -webkit-box-shadow: 0 0 5px black;
        -moz-box-shadow:    0 0 5px black;
        box-shadow:         0 0 5px black;
			text-shadow:var(--text-shadow);
			
				    border-radius: 15px;        
	
	padding: 15px 3px 15px 3px;
	border-width: 1px;
	border: 2px solid grey;
    border-style: solid;
	 border-color:#66afe9;
	outline:0;
	-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
	box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
	background-color:#36454f;
	background-color:red;
	background:#2B3840;
	background:var(--bg-stronger);
    background-image: linear-gradient(top, #f6f6f6, #eae8e8);
    }

	
    .cssanimations.csstransforms #note {
        -webkit-transform: translateY(-50px);
        -webkit-animation: slideDown 3.0s 0.25s 1 ease forwards;
        -moz-transform:    translateY(-50px);
        -moz-animation:    slideDown 3.0s 0.25s 1 ease forwards;
    }

    #close {
      position: absolute;
      right: 10px;
      top: 9px;
      text-indent: -9999px;
      background: url(images/close.png);
      height: 16px;
      width: 16px;
      cursor: pointer;
    }
    .cssanimations.csstransforms #close {
      display: none;
    }

    
    @-webkit-keyframes slideDown {
        0%, 100% { -webkit-transform: translateY(-250px); }
        10%, 90% { -webkit-transform: translateY(150px); }
    }
    @-moz-keyframes slideDown {
        0%, 100% { -moz-transform: translateY(-250px); }
        10%, 90% { -moz-transform: translateY(150px); }
    }