Best Login Page Design in HTML, CSS with Source Code

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKdGkuU9GA03ShZvoy7sJvko4f0tWDkvxyJphyphenhyphentrLlDo_45Jv6-TBFfzFGSx08M6eAL3pdQZwXDHz2fs0ulwXaG2Djyuo-izt77yEZXyf1PNNKFvgAOyeLd9e2nCIVhGJ_4LShfQTzjl10/s1600/LoginPage.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKdGkuU9GA03ShZvoy7sJvko4f0tWDkvxyJphyphenhyphentrLlDo_45Jv6-TBFfzFGSx08M6eAL3pdQZwXDHz2fs0ulwXaG2Djyuo-izt77yEZXyf1PNNKFvgAOyeLd9e2nCIVhGJ_4LShfQTzjl10/s1600/LoginPage.png" width="130" /></a></div> <b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Introduction</span></u></b><b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">:</span></b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> </div> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Here I will explain how to create best login page design in html and css with source code or login page design in html and css with source code or simple login form with html and css</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">.</span><br /> <br /> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;"><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">To create login page design in html using css we need to write the code like as shown below</span> </span><br /> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> </div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> </div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">html</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">head</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">meta</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">charset</span><span style="color: blue;">="utf-8"></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">title</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">Best Login Page design in html and css<span style="color: blue;"></</span><span style="color: #a31515;">title</span><span style="color: blue;">></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">style</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">type</span><span style="color: blue;">="text/css"></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">body</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> {</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">background-color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#f4f4f4</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#5a5656</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">font-family</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">'Open Sans',</span> <span style="color: blue;">Arial,</span> <span style="color: blue;">Helvetica,</span> <span style="color: blue;">sans-serif</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">font-size</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">16px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">line-height</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">1.5em</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">}</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">a</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> { <span style="color: red;">text-decoration</span>: <span style="color: blue;">none</span>; }</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">h1</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> { <span style="color: red;">font-size</span>: <span style="color: blue;">1em</span>; }</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">h1</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">, <span style="color: #a31515;">p</span> {</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">margin-bottom</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">10px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">}</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">strong</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> {</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">font-weight</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">bold</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">}</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">.uppercase</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> { <span style="color: red;">text-transform</span>: <span style="color: blue;">uppercase</span>; }</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> </div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: green; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">/* ---------- LOGIN ---------- */</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">#login</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> {</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">margin</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50px</span> <span style="color: blue;">auto</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">width</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">300px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">}</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">form</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: #a31515;">fieldset</span> <span style="color: #a31515;">input[type="text"]</span>, <span style="color: #a31515;">input[type="password"]</span> {</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">background-color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#e5e5e5</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">border</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">none</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">3px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">-moz-border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">3px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">-webkit-border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">3px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#5a5656</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">font-family</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">'Open Sans',</span> <span style="color: blue;">Arial,</span> <span style="color: blue;">Helvetica,</span> <span style="color: blue;">sans-serif</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">font-size</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">14px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">height</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">outline</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">none</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">padding</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">0px</span> <span style="color: blue;">10px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">width</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">280px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">-webkit-appearance</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">:<span style="color: blue;">none</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">}</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">form</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: #a31515;">fieldset</span> <span style="color: #a31515;">input[type="submit"]</span> {</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">background-color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#008dde</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">border</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">none</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">3px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">-moz-border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">3px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">-webkit-border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">3px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#f4f4f4</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">cursor</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">pointer</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">font-family</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">'Open Sans',</span> <span style="color: blue;">Arial,</span> <span style="color: blue;">Helvetica,</span> <span style="color: blue;">sans-serif</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">height</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">text-transform</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">uppercase</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">width</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">300px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">-webkit-appearance</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">:<span style="color: blue;">none</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">}</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">form</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: #a31515;">fieldset</span> <span style="color: #a31515;">a</span> {</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#5a5656</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">font-size</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">10px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">}</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">form</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: #a31515;">fieldset</span> <span style="color: #a31515;">a:hover</span> { <span style="color: red;">text-decoration</span>: <span style="color: blue;">underline</span>; }</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">.btn-round</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> {</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">background-color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#5a5656</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50%</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">-moz-border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50%</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">-webkit-border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50%</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#f4f4f4</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">display</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">block</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">font-size</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">12px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">height</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">line-height</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">margin</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">30px</span> <span style="color: blue;">125px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">text-align</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">center</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">text-transform</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">uppercase</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">width</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">}</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">.facebook-before</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> {</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">background-color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#0064ab</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">3px</span> <span style="color: blue;">0px</span> <span style="color: blue;">0px</span> <span style="color: blue;">3px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">-moz-border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">3px</span> <span style="color: blue;">0px</span> <span style="color: blue;">0px</span> <span style="color: blue;">3px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">-webkit-border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">3px</span> <span style="color: blue;">0px</span> <span style="color: blue;">0px</span> <span style="color: blue;">3px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#f4f4f4</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">display</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">block</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">float</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">left</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">height</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">line-height</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">text-align</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">center</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">width</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">}</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">.facebook</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> {</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">background-color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#0079ce</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">border</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">none</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">0px</span> <span style="color: blue;">3px</span> <span style="color: blue;">3px</span> <span style="color: blue;">0px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">-moz-border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">0px</span> <span style="color: blue;">3px</span> <span style="color: blue;">3px</span> <span style="color: blue;">0px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">-webkit-border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">0px</span> <span style="color: blue;">3px</span> <span style="color: blue;">3px</span> <span style="color: blue;">0px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#f4f4f4</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">cursor</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">pointer</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">height</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">text-transform</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">uppercase</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">width</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">250px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">}</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">.twitter-before</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> {</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">background-color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#189bcb</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">3px</span> <span style="color: blue;">0px</span> <span style="color: blue;">0px</span> <span style="color: blue;">3px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">-moz-border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">3px</span> <span style="color: blue;">0px</span> <span style="color: blue;">0px</span> <span style="color: blue;">3px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">-webkit-border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">3px</span> <span style="color: blue;">0px</span> <span style="color: blue;">0px</span> <span style="color: blue;">3px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#f4f4f4</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">display</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">block</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">float</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">left</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">height</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">line-height</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">text-align</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">center</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">width</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">}</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">.twitter</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> {</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">background-color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#1bb2e9</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">border</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">none</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">0px</span> <span style="color: blue;">3px</span> <span style="color: blue;">3px</span> <span style="color: blue;">0px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">-moz-border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">0px</span> <span style="color: blue;">3px</span> <span style="color: blue;">3px</span> <span style="color: blue;">0px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">-webkit-border-radius</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">0px</span> <span style="color: blue;">3px</span> <span style="color: blue;">3px</span> <span style="color: blue;">0px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">color</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">#f4f4f4</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">cursor</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">pointer</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">height</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">50px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">text-transform</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">uppercase</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: red; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">width</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">: <span style="color: blue;">250px</span>;</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">}</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">style</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">head</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">body</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">div</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">id</span><span style="color: blue;">="login"></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">h1</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">strong</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">Welcome.<span style="color: blue;"></</span><span style="color: #a31515;">strong</span><span style="color: blue;">></span> Please login.<span style="color: blue;"></</span><span style="color: #a31515;">h1</span><span style="color: blue;">></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">form</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">action</span><span style="color: blue;">="javascript:void(0);"</span> <span style="color: red;">method</span><span style="color: blue;">="get"></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">fieldset</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">p</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">input</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">type</span><span style="color: blue;">="text"</span> <span style="color: red;">required</span> <span style="color: red;">value</span><span style="color: blue;">="Username"</span> <span style="color: red;">onBlur</span><span style="color: blue;">="if(this.value=='')this.value='Username'"</span> <span style="color: red;">onFocus</span><span style="color: blue;">="if(this.value=='Username')this.value='' "></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">p</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">input</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">type</span><span style="color: blue;">="password"</span> <span style="color: red;">required</span> <span style="color: red;">value</span><span style="color: blue;">="Password"</span> <span style="color: red;">onBlur</span><span style="color: blue;">="if(this.value=='')this.value='Password'"</span> <span style="color: red;">onFocus</span><span style="color: blue;">="if(this.value=='Password')this.value='' "></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">p</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">a</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">href</span><span style="color: blue;">="#"></span>Forgot Password?<span style="color: blue;"></</span><span style="color: #a31515;">a</span><span style="color: blue;">></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">p</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">input</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">type</span><span style="color: blue;">="submit"</span> <span style="color: red;">value</span><span style="color: blue;">="Login"></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">fieldset</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">form</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">p</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">span</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">class</span><span style="color: blue;">="btn-round"></span>or<span style="color: blue;"></</span><span style="color: #a31515;">span</span><span style="color: blue;">></</span><span style="color: #a31515;">p</span><span style="color: blue;">></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">p</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">a</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">class</span><span style="color: blue;">="facebook-before"></</span><span style="color: #a31515;">a</span><span style="color: blue;">></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">button</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">class</span><span style="color: blue;">="facebook"></span>Login Using Facbook<span style="color: blue;"></</span><span style="color: #a31515;">button</span><span style="color: blue;">></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">p</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">p</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">a</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">class</span><span style="color: blue;">="twitter-before"></</span><span style="color: #a31515;">a</span><span style="color: blue;">></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">button</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: red;">class</span><span style="color: blue;">="twitter"></span>Login Using Twitter<span style="color: blue;"></</span><span style="color: #a31515;">button</span><span style="color: blue;">></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">p</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">div</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"> <span style="color: green;"><!-- end login --></span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">body</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></span></div> <span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"></</span><span style="color: #a31515; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">html</span><span style="color: blue; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div>

Best Login Page Design in HTML, CSS with Source Code

Introduction : Here I will explain how to create best login page design in html and css with source code or login page design in html...

Read more »

Simple Tooltip Using HTML and CSS

<div dir="ltr" style="text-align: left;" trbidi="on"> <span style="font-family: Segoe UI; font-size: x-small;">A tooltip is a pop-up message that is shown when the user hovers the mouse over an element such as a TextBox or a Button etcetera.<br /><br />In this article I show you how to create a simple tooltip using HTML and CSS.<br /><br />Observe the following table. Here we have placed the Input (Text) controls (txtUsername, txtPassword) inside the anchor tag. </span><span style="font-family: 'Segoe UI'; font-size: x-small;">We have added a class name (tooltip) to the anchor tag and given some text to the the alt attribute. Using an alt attribute we will display a tooltip for the Input (Text) controls.</span><br /> <blockquote style="border: none; margin: 0 0 0 40px; padding: 0px;"> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">html</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">><br /><</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">head</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">><br /></</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">head</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">><br /><</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">body</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span><span style="font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><br />    <span style="color: blue;"><</span><span style="color: #a31515;">table</span> <span style="color: red;">style</span><span style="color: blue;">="</span><span style="color: red;">width</span>: <span style="color: blue;">270px</span>;<span style="color: blue;">"></span><br />        <span style="color: blue;"><</span><span style="color: #a31515;">tr</span><span style="color: blue;">></span><br />            <span style="color: blue;"><</span><span style="color: #a31515;">td</span><span style="color: blue;">></span><br />                Username:<br />            <span style="color: blue;"></</span><span style="color: #a31515;">td</span><span style="color: blue;">></span><br />            <span style="color: blue;"><</span><span style="color: #a31515;">td</span><span style="color: blue;">></span><br />                <span style="color: blue;"><</span><span style="color: #a31515;">a</span> <span style="color: red;">href</span><span style="color: blue;">="#"</span> <span style="color: red;">alt</span><span style="color: blue;">="Please enter username"</span> <span style="color: red;">class</span><span style="color: blue;">="tooltip"></span><br />                    <span style="color: blue;"><</span><span style="color: #a31515;">input</span> <span style="color: red;">id</span><span style="color: blue;">="txtUsername"</span> <span style="color: red;">type</span><span style="color: blue;">="text"</span> <span style="color: blue;">/></</span><span style="color: #a31515;">a</span><span style="color: blue;">></span><br />            <span style="color: blue;"></</span><span style="color: #a31515;">td</span><span style="color: blue;">></span><br />        <span style="color: blue;"></</span><span style="color: #a31515;">tr</span><span style="color: blue;">></span><br />        <span style="color: blue;"><</span><span style="color: #a31515;">tr</span><span style="color: blue;">></span><br />            <span style="color: blue;"><</span><span style="color: #a31515;">td</span><span style="color: blue;">></span><br />                Password:<br />            <span style="color: blue;"></</span><span style="color: #a31515;">td</span><span style="color: blue;">></span><br />            <span style="color: blue;"><</span><span style="color: #a31515;">td</span><span style="color: blue;">></span><br />                <span style="color: blue;"><</span><span style="color: #a31515;">a</span> <span style="color: red;">href</span><span style="color: blue;">="#"</span> <span style="color: red;">alt</span><span style="color: blue;">="Please enter password"</span> <span style="color: red;">class</span><span style="color: blue;">="tooltip"></span><br />                    <span style="color: blue;"><</span><span style="color: #a31515;">input</span> <span style="color: red;">id</span><span style="color: blue;">="txtPassword"</span> <span style="color: red;">type</span><span style="color: blue;">="text"</span> <span style="color: blue;">/></</span><span style="color: #a31515;">a</span><span style="color: blue;">></span><br />            <span style="color: blue;"></</span><span style="color: #a31515;">td</span><span style="color: blue;">></span><br />        <span style="color: blue;"></</span><span style="color: #a31515;">tr</span><span style="color: blue;">></span><br />        <span style="color: blue;"><</span><span style="color: #a31515;">tr</span><span style="color: blue;">></span><br />            <span style="color: blue;"><</span><span style="color: #a31515;">td</span><span style="color: blue;">></span><br />            <span style="color: blue;"></</span><span style="color: #a31515;">td</span><span style="color: blue;">></span><br />            <span style="color: blue;"><</span><span style="color: #a31515;">td</span><span style="color: blue;">></span><br />                <span style="color: blue;"><</span><span style="color: #a31515;">input</span> <span style="color: red;">id</span><span style="color: blue;">="Button1"</span> <span style="color: red;">type</span><span style="color: blue;">="button"</span> <span style="color: red;">value</span><span style="color: blue;">="Login"</span> <span style="color: blue;">/></span><br />            <span style="color: blue;"></</span><span style="color: #a31515;">td</span><span style="color: blue;">></span><br />        <span style="color: blue;"></</span><span style="color: #a31515;">tr</span><span style="color: blue;">></span><br />    <span style="color: blue;"></</span><span style="color: #a31515;">table</span><span style="color: blue;">></span></span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;"><br /></</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">body</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">><br /></</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">html</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Courier New"; mso-no-proof: yes;">></span></div> </blockquote> <div class="MsoNormal"> <span style="font-family: "Calibri","sans-serif"; font-size: 10.5pt; line-height: 115%;"> </span><span style="background-color: white; color: #333333; font-family: 'Segoe UI', sans-serif; font-size: 10pt; text-indent: -0.5in;">Now our page looks in browser as follows</span></div> <div class="csharpcorner" style="background: white; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .5in; margin-right: 0in; margin-top: 0in; text-indent: -.5in;"> <span style="color: #333333; font-family: "Segoe UI","sans-serif"; font-size: 10.0pt;"><br /></span></div> <div class="csharpcorner" style="background: white; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .5in; margin-right: 0in; margin-top: 0in; text-indent: -.5in;"> <span style="color: #333333; font-family: "Segoe UI","sans-serif"; font-size: 10.0pt;"> <img alt="1.png" border="0" height="101" src="http://www.c-sharpcorner.com/UploadFile/d40a40/simple-tooltip-using-html-and-css/Images/1.png" width="255" /></span></div> <span style="font-family: Segoe UI; font-size: x-small;">Now we will add some CSS style to the anchor tags; see:<br /><br />       .tooltip<br />        {<br />            <span style="color: red;">display</span>: <span style="color: blue;">inline</span>;<br />            <span style="color: red;">position</span>: <span style="color: blue;">relative</span>;<br />            <span style="color: red;">text-decoration</span>: <span style="color: blue;">none</span>;<br />            <span style="color: red;">top</span>: <span style="color: blue;">0px</span>;<br />            <span style="color: red;">left</span>: <span style="color: blue;">4px</span>;<br />        }</span><br /> <span style="font-family: Segoe UI; font-size: x-small;">Now by using the anchor tags we will display the tooltip for the Input (Text) controls.<br /><br />Observe the following style of the anchor tags:<br /><br />        .tooltip:hover:after<br />        {<br />            <span style="color: red;">background</span>: <span style="color: blue;">#333</span>;<br />            <span style="color: red;">background</span>: <span style="color: blue;">rgba(0,0,0,.8)</span>;<br />            <span style="color: red;">border-radius</span>: <span style="color: blue;">5px</span>;<br />            <span style="color: red;">top</span>: <span style="color: blue;">-5px</span>;<br />            <span style="color: red;">color</span>: <span style="color: blue;">#fff</span>;<br />            <span style="color: red;">content</span>: <span style="color: blue;">attr(alt)</span>;<br />            <span style="color: red;">left</span>: <span style="color: blue;">160px</span>;<br />            <span style="color: red;">padding</span>: <span style="color: blue;">5px</span> <span style="color: blue;">15px</span>;<br />            <span style="color: red;">position</span>: <span style="color: blue;">absolute</span>;<br />            <span style="color: red;">z-index</span>: <span style="color: blue;">98</span>;<br />            <span style="color: red;">width</span>: <span style="color: blue;">150px</span>;<br />        }</span><br /> <span style="font-family: Segoe UI; font-size: x-small;">Here we are providing a style whenever the user hover the mouse over the anchor tags.<br /><br />We are specifying some style using the :after selector. <br /><br />In the preceding style we have given a border and a border radius etcetera. <br /><br />Here we have set the content attribute to content: attr(alt); this property will display the tooltip by using the alt attribute of the anchor tag.<br /><br />Whatever you give to the alt tag of the anchor element it will be displayed as a tooltip.<br /><br />Now we will add one arrow to the tooltip as follows using the :before selector:<br /><br />       .tooltip:hover:before<br />        {<br />            <span style="color: red;">border</span>: <span style="color: blue;">solid</span>;<br />            <span style="color: red;">border-color</span>: <span style="color: blue;">transparent</span> <span style="color: blue;">black</span>;<br />            <span style="color: red;">border-width</span>: <span style="color: blue;">6px</span> <span style="color: blue;">6px</span> <span style="color: blue;">6px</span> <span style="color: blue;">0</span>;<br />            <span style="color: red;">bottom</span>: <span style="color: blue;">20px</span>;<br />            <span style="color: red;">content</span>: <span style="color: blue;">""</span>;<br />            <span style="color: red;">left</span>: <span style="color: blue;">155px</span>;<br />            <span style="color: red;">position</span>: <span style="color: blue;">absolute</span>;<br />            <span style="color: red;">z-index</span>: <span style="color: blue;">99</span>;<br />            <span style="color: red;">top</span>: <span style="color: blue;">3px</span>;<br />        } </span><br /> <div style="background: white;"> <span style="color: #333333; font-family: 'Segoe UI', sans-serif; font-size: 10pt;">Finally script of our page is:</span></div> <blockquote style="border: none; margin: 0 0 0 40px; padding: 0px;"> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">html</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">><br /><</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">head</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">></span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"><br />    </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">style</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"> </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">type</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">="text/css"></span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"><br />        </span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">.tooltip</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"><br />        {<br />            </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">display</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">: </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">inline</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">;<br />            </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">position</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">: </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">relative</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">;<br />            </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">text-decoration</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">: </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">none</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">;<br />            </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">top</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">: </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">0px</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">;<br />            </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">left</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">: </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">4px</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">;<br />        }<br />        </span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">.tooltip:hover:after</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"><br />        {<br />            </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">background</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">: </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">#333</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">;<br />            </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">background</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">: </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">rgba(0,0,0,.8)</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">;<br />            </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">border-radius</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">: </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">5px</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">;<br />            </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">top</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">: </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">-5px</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">;<br />            </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">color</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">: </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">#fff</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">;<br />            </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">content</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">: </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">attr(alt)</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">;<br />            </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">left</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">: </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">160px</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">;<br />            </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">padding</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">: </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">5px</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"> </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">15px</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">;<br />            </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">position</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">: </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">absolute</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">;<br />            </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">z-index</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">: </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">98</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">;<br />            </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">width</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">: </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">150px</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">;<br />        }<br />        </span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">.tooltip:hover:before</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"><br />        {<br />            </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">border</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">: </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">solid</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">;<br />            </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">border-color</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">: </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">transparent</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"> </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">black</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">;<br />            </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">border-width</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">: </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">6px</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"> </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">6px</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"> </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">6px</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"> </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">0</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">;<br />            </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">bottom</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">: </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">20px</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">;<br />            </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">content</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">: </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">""</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">;<br />            </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">left</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">: </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">155px</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">;<br />            </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">position</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">: </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">absolute</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">;<br />            </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">z-index</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">: </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">99</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">;<br />            </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">top</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">: </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">3px</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">;<br />        }<br />    </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"></</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">style</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">><br /></</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">head</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">><br /><</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">body</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">></span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"><br />    </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">table</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"> </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">style</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">="</span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">width</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">: </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">270px</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;">;</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">"></span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"><br />        </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">tr</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">></span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"><br />            </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">td</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">></span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"><br />                Username:<br />            </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"></</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">td</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">></span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"><br />            </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">td</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">></span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"><br />                </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">a</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"> </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">href</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">="#"</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"> </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">alt</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">="Please enter username"</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"> </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">class</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">="tooltip"></span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"><br />                    </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">input</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"> </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">id</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">="txtUsername"</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"> </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">type</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">="text"</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"> </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">/></</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">a</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">></span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"><br />            </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"></</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">td</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">></span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"><br />        </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"></</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">tr</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">></span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"><br />        </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">tr</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">></span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"><br />            </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">td</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">></span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"><br />                Password:<br />            </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"></</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">td</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">></span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"><br />            </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">td</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">></span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"><br />                </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">a</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"> </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">href</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">="#"</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"> </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">alt</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">="Please enter password"</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"> </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">class</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">="tooltip"></span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"><br />                    </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">input</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"> </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">id</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">="txtPassword"</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"> </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">type</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">="text"</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"> </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">/></</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">a</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">></span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"><br />            </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"></</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">td</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">></span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"><br />        </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"></</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">tr</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">></span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"><br />        </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">tr</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">></span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"><br />            </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">td</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">></span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"><br />            </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"></</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">td</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">></span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"><br />            </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">td</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">></span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"><br />                </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">input</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"> </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">id</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">="Button1"</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"> </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">type</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">="button"</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"> </span><span style="color: red; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">value</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">="Login"</span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"> </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">/></span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"><br />            </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"></</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">td</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">></span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"><br />        </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"></</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">tr</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">></span><span style="font-family: Calibri, sans-serif; font-size: 10.5pt;"><br />    </span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"></</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">table</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">><br /></</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">body</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">><br /></</span><span style="color: #a31515; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">html</span><span style="color: blue; font-family: "Calibri","sans-serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">></span></div> </blockquote> <div class="MsoNormal"> <span style="background-color: white;"><span style="color: #333333; font-family: Segoe UI, sans-serif; font-size: x-small;">Save this script as .html file or download the attachment and open in browser then mouse over on to the username and password Textboxes we will get the tooltip as follows.</span></span><span style="background-color: white; color: #333333; font-family: 'Segoe UI', sans-serif; font-size: 10pt;"> </span></div> <div style="background: white;"> <span style="color: #333333; font-family: "Segoe UI","sans-serif"; font-size: 10.0pt;">Mouse over on to the Username Textbox.</span></div> <div style="background: white;"> <span style="color: #333333; font-family: "Segoe UI","sans-serif"; font-size: 10.0pt;"><img alt="2.png" border="0" height="106" src="http://www.c-sharpcorner.com/UploadFile/d40a40/simple-tooltip-using-html-and-css/Images/2.png" width="442" /></span></div> <div style="background: white;"> <span style="color: #333333; font-family: "Segoe UI","sans-serif"; font-size: 10.0pt;">Mouse over on to the Password Textbox</span></div> <div style="background: white;"> <span style="color: #333333; font-family: "Segoe UI","sans-serif"; font-size: 10.0pt;"><img alt="3.png" border="0" height="100" src="http://www.c-sharpcorner.com/UploadFile/d40a40/simple-tooltip-using-html-and-css/Images/3.png" width="450" /></span></div> <span style="font-family: Segoe UI; font-size: x-small;">So this is the simple way to display the tooltip using HTML and CSS.<br /><br />We can use this tooltips procedure for images also.</span></div>

Simple Tooltip Using HTML and CSS

A tooltip is a pop-up message that is shown when the user hovers the mouse over an element such as a TextBox or a Button etcetera. In thi...

Read more »