/* Above, the asterisk selects all elements in the HTML document and rests the margin and padding. This ensures that any of the annoying "default" margin and paddings a browser might have will be reset to zero. */
#noti_Container {
    position: relative; /* This is crucial for the absolutely positioned element */
    /*width: 16px;
    height: 16px;*/
}

/*.noti_bubble {
    position: absolute;
    top: 2px;
    right: 105px;
    color: yellow;
    font-weight: bold;
    font-size: 0.55em;
    border-radius: 16px;
}*/
.noti_bubble {
    position: absolute; /* This breaks the div from the normal HTML document. */
    top: 0px;
    right: 0px;
    color: yellow;
    font-weight: bold;
    font-size: 0.85em;
    /* The following is CSS3, but isn't crucial for this technique to work. */
    /* Keep in mind that if a browser doesn't support CSS3, it's fine! They just won't have rounded borders and won't have a box shadow effect. */
    /* You can always use a background image to produce the same effect if you want to, and you can use both together so browsers without CSS3 still have the rounded/shadow look. */
    width: 16px;
    height: 16px;
    padding: 1px 1px 0px 3px;
}