
.basictxt {
width: 240px;
padding: 4px 4px;
font-size: 1.2em;
color: #414141;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 2px solid #aaa;
}
.basictxt:focus {
border-color: #bbb;
}

a {color: #081631;font-weight: normal;text-decoration: none;}
a:hover { text-decoration: underline; }

.center { display: block; text-align: center; }

/** page structure **/
#w {
display: block;
width: 750px;
margin: 0 auto;
padding-top: 30px;
padding-bottom: 45px;
}

#content {
display: block;
width: 100%;
background: #fff;
padding: 25px 20px;
padding-bottom: 35px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}
a:hover.tooltip{
color:#fff !important;
text-decoration:blink !important;
}
a.tooltip{position: relative;display: inline;text-transform: capitalize;}
a.tooltip:after{display: block;visibility: hidden;position: absolute;bottom: 0;left: -31%;font-size: 12px;opacity: 0;content: attr(data-tool); /* might also use attr(title) */height: auto;min-width:150px;padding: 11px 8px;z-index: 999;color: #000;text-decoration: none;text-align: center;background:#fff;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 2px;}

a.tooltip:before {position: absolute;visibility: hidden;width: 0;height: 0;left: -7%;bottom: 0px;opacity: 0;content: "";border-style: solid;border-width: 6px 6px 0 6px;border-color: rgb(255, 255, 255) transparent transparent transparent;}
a.tooltip:hover:after{ visibility: visible; opacity: 1; bottom: 20px; }
a.tooltip:hover:before{ visibility: visible; opacity: 1; bottom: 14px; }
a.tooltip.animate:after, a.tooltip.animate:before {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

/* tips on bottom */
a.tooltip.bottom:after { bottom: auto; top: 0; }
a.tooltip.bottom:hover:after { top: 28px; }
a.tooltip.bottom:before {
border-width: 0 5px 8.7px 5px;
border-color: transparent transparent rgba(0,0,0,0.85) transparent;
top: 0px
}
a.tooltip.bottom:hover:before { top: 20px; }

/* tips on the right */
a.tooltip.right:after { left: 100%; bottom: -45%; }
a.tooltip.right:hover:after { color:#fff !important; left: 110%; bottom: -45%; }
a.tooltip.right:before {
border-width: 5px 10px 5px 0;
border-color: transparent rgba(0,0,0,0.85) transparent transparent;
left: 90%;
bottom: 2%;
}
a.tooltip.right:hover:before { left: 100%; bottom: 2%; }


/* tips on the left */
a.tooltip.left:after { left: auto; right: 100%; bottom: -45%; }
a.tooltip.left:hover:after { right: 110%; bottom: -45%; }
a.tooltip.left:before {
border-width: 5px 0 5px 10px;
border-color: transparent transparent transparent rgba(0,0,0,0.85);
left: auto;
right: 90%;
bottom: 2%;
}
a.tooltip.left:hover:before { right: 100%; bottom: 2%; }


/* tooltip colors (add your own!) */
a.tooltip.blue:after { background:#5f87c2; }
a.tooltip.blue:before { border-color: #5f87c2 transparent transparent transparent; }
a.tooltip.bottom.blue:before{ border-color: transparent transparent #5f87c2 transparent; }
a.tooltip.right.blue:before { border-color: transparent #5f87c2 transparent transparent; }
a.tooltip.left.blue:before { border-color: transparent transparent transparent #5f87c2; }



/* input field tooltips */
input + .fieldtip {
visibility: hidden;
position: relative;
bottom: 0;
left: 15px;
opacity: 0;
content: attr(data-tool);
height: auto;
min-width: 100px;
padding: 5px 8px;
z-index: 9999;
color: #fff;
font-size: 1.2em;
font-weight: bold;
text-decoration: none;
text-align: center;
background: rgba(0,0,0,0.85);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;

}

input + .fieldtip:after {
display: block;
position: absolute;
visibility: hidden;
content:'';
width: 0;
height: 0;
top: 8px;
left: -8px;
border-style: solid;
border-width: 4px 8px 4px 0;
border-color: transparent rgba(0,0,0,0.75) transparent transparent;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

input:focus + .fieldtip, input:focus + .fieldtip:after {
visibility: visible;
opacity: 1;
}


/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }

html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }