#notification-1 { top: 10%;right: 1%; border-radius: 5px; box-shadow: 0 0 3px 3px #00aff0; } #notification-1 .notification-close { font-size: 40px; color: #ffffff; } #notification-1 .notification-img{ width: 80px; background: #00aff0; border-radius: 5px 0 0 5px; border-top: 1px none #00aff0; border-bottom: 1px none #00aff0; border-left: 1px none #00aff0; } #notification-1 .notification-img img { width: 70px; } #notification-1 .notification-img span { font-size: 70px; color: #ffffff; } #notification-1 .notification-text-block { background: #ffffff; width: 220px; height: 80px; border-radius: 0 5px 5px 0; border-top: 1px none #00aff0; border-bottom: 1px none #00aff0; border-right: 1px none #00aff0; } #notification-1 .notification-title { font-family: Comic Sans MS; font-size: 16px; font-weight: bolder; font-style: normal; line-height: 22px; text-align: left; color: #81d742; } #notification-1 .notification-text { font-family: Tahoma; font-size: 12px; line-height: 16px; color: #000000; }#notification-2 { top: 10%;left: 3%; border-radius: 5px; box-shadow: none; } #notification-2 .notification-close { font-size: 24px; color: #81d742; } #notification-2 .notification-img{ width: 80px; background: #81d742; border-radius: 5px 0 0 5px; border-top: 2px dotted #800000; border-bottom: 2px dotted #800000; border-left: 2px dotted #800000; } #notification-2 .notification-img img { width: 40px; } #notification-2 .notification-img span { font-size: 40px; color: #ffffff; } #notification-2 .notification-text-block { background: #f2f2f2; width: 220px; height: auto; border-radius: 0 5px 5px 0; border-top: 2px dotted #800000; border-bottom: 2px dotted #800000; border-right: 2px dotted #800000; } #notification-2 .notification-title { font-family: Comic Sans MS; font-size: 16px; font-weight: bolder; font-style: normal; line-height: 32px; text-align: center; color: #800000; } #notification-2 .notification-text { font-family: Lucida Grande; font-size: 13px; line-height: 18px; color: #383838; } @media only screen and (max-width: 480px){ #notification-2 { display:none !important; } }#notification-3 { bottom: 1%;left: 1%; border-radius: 0; box-shadow: none; } #notification-3 .notification-close { font-size: 24px; color: #ffffff; } #notification-3 .notification-img{ width: 70px; background: #ffd700; border-radius: 0 0 0 0; border-top: 2px solid #ffd700; border-bottom: 2px solid #ffd700; border-left: 2px solid #ffd700; } #notification-3 .notification-img img { width: 40px; } #notification-3 .notification-img span { font-size: 40px; color: #ffffff; } #notification-3 .notification-text-block { background: rgba(0,0,0,0.75); width: 200px; height: auto; border-radius: 0 0 0 0; border-top: 2px solid #ffd700; border-bottom: 2px solid #ffd700; border-right: 2px solid #ffd700; } #notification-3 .notification-title { font-family: Lucida Grande; font-size: 20px; font-weight: bolder; font-style: normal; line-height: 32px; text-align: center; color: #ffd700; } #notification-3 .notification-text { font-family: Georgia; font-size: 14px; line-height: 18px; color: #ffffff; }#notification-4 { bottom: 1%;right: 1%; border-radius: 5px; box-shadow: none; } #notification-4 .notification-close { font-size: 24px; color: #ffffff; } #notification-4 .notification-img{ width: 80px; background: #8cd9f0; border-radius: 5px 0 0 5px; border-top: 5px none #8cd9f0; border-bottom: 5px none #8cd9f0; border-left: 5px none #8cd9f0; } #notification-4 .notification-img img { width: 40px; } #notification-4 .notification-img span { font-size: 40px; color: #0000ff; } #notification-4 .notification-text-block { background: #0000ff; width: 240px; height: auto; border-radius: 0 5px 5px 0; border-top: 5px none #8cd9f0; border-bottom: 5px none #8cd9f0; border-right: 5px none #8cd9f0; } #notification-4 .notification-title { font-family: inherit; font-size: 20px; font-weight: bolder; font-style: normal; line-height: 32px; text-align: left; color: #ffffff; } #notification-4 .notification-text { font-family: Arial; font-size: 12px; line-height: 14px; color: #ffffff; } @media only screen and (max-width: 480px){ #notification-4 { display:none !important; } }