span.placeholder{
    position:absolute;
    font-size:75%;
    color:#999;
    font-family:sans-serif;
    padding:4px 3px;
    z-index:1;
    cursor:text;
}

span.placeholder-hide-except-screenreader {
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    padding:0 !important;
    border:0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
}

span.placeholder-hide{
	display:none;
}

/* overwrite for the HTML5 Boilerplate way to hide labels */
label.visuallyhidden-with-placeholder{
    /*clip: auto !important;*/
    height:auto !important;
    overflow: visible !important;
    position:absolute !important;
    left:-999em;
}

/* Example how to style the placeholder itself */
::-webkit-input-placeholder, /* Chrome/Opera/Safari */
::-moz-placeholder, /* Firefox 19+ */
:-ms-input-placeholder, /* IE 10+ */
:-moz-placeholder, /* Firefox 18- */
::placeholder, /* standard */
label .placeholder  /* this polyfill */
{
    /* your awesome style for the the placeholder text */
}

/* Example how to style the :placeholder-shown pseudo class so it works with this polyfill: */
input:placeholder-shown,
input.placeholder-shown  /* just duplicate the selector and change the :peudo selector to a .class selector */
{
    /* your awesome style for the input element when the placeholder is visible */
}