@charset 'utf-8';
/**
 *Font style
 */
body {
    font: 12px "΢ÈíÑźÚ";
    *font-size: small;/*for IE*/
    *font-size: x-small;/*for IE in quirks mode*/
}

select,input,button,textarea {
    font: 99% sans-serif;
}

pre,code,kbd,samp,tt {
    font-family: monospace,sans-serif;
}

/*Headers(h1,h2,etc) have no default margin,you will want to define those yourself
*Set body font 13px
* PXtoEM conversion made simple:http://pxtoem.com
* */
h1 {
    font-size: 1.846em;/*per:184.6% pix:24px*/
}

h2 {
    font-size: 1.538em;/*Per:153.8% pix:20px*/
}

h3 {
    font-size: 1.231em;/*per:123.1% pix:16px*/
}

h4 {
    font-size: 1.154em;/*per:115.4% pix:15px*/
}

h5,h6 {
    font-size: 1em;/*per:100% pix: 13px*/
}

/**
 * minimal base styles
 */

html {
    font-size: 100.01%;/*To Prevent bugs in IE and Opera*/
    height: 100%;/*Using height 100% on html and body allows to style containers with a 100% height*/
    overflow-y: scroll;/*The overflow declaration is to make sure there is a gutter for the scollbar in all browsers regardless of content*/
}

body {
    background-color: #fff;/*Not all browsers set white as the default background color*/
    color: #222222;/*#444 looks better than black*/
    height: 100%;
    text-align: center;
}

/*Elements have bold*/
h1,h2,h3,h4,h5,h6,strong,th,dt,b {
    font-weight: bold;
}

/*Links
 *Styling for links and visited links as well as for links in a hovred,focus and active state
 * make sure to keep these rules in that order, with :active being last
 */

a,a:link {
    color: #858585;/*you will want to change the color*/
    outline: none;
    text-decoration: none;
}
a:link {
    -webkit-tap-highlight-color: #ff5e99;/*you will want to change the color*/
}
a:visited {
    text-decoration: none;
    outline: none;
}
a:hover {
    text-decoration: none;/*add a bottom line for text*/
}
a:focus,:focus {
    outline: thin dotted;
}
a:hover,a:active {
    outline: none;
}

/*This is to prevent border from showing around fieldset and images*/
fieldset,img {
    border: none 0;
}

/*This is to prevent a gap from showing below images in some browsers*/
img {
    -ms-interpolation-mode: bicubic;/*bicubic resizing for non-native sized IMG*/
}

pre {
    white-space: pre;/*CSS2*/
    white-space: pre-wrap;/*CSS2.1*/
    white-space: pre-line;/*CSS3*/
    word-wrap: break-word;/*IE*/
}

/*set sub,sup without affecting line-height*/
sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
}

sub {
    top: -0.5em;
}

sup {
    bottom: -0.25em;
}

small {
    font-size: 85%;
}

/*Clear floats
 *The Magnificent CLEARFIX:Updated fo prevent margin-collapsing on child elements
 */
.clearfix:before,.clearfix:after {
    content:"\0020";
    display: block;
    height: 0;
    visibility: hidden;
}

.clearfix {
    zoom: 1;/*IE<8*/
}

.clearfix:after {
    clear: both;
}
* html .clearfix {
    zoom: 1; /* IE6 */
}
*:first-child+html .clearfix {
    zoom: 1; /* IE7 */
}

/*Hide only visually,but have it available for screenreaders*/
.hidden {
    border: 0 !important;
    clip: rect(1px 1px 1px 1px);/*IE<8*/
    clip: rect(1px,1px,1px,1px);
    height: 1px !important;
    margin: -1px;
    overflow: hidden;
    padding: 0 !important;
    position: absolute !important;
    width: auto;
}

/*
 *Table
 **/

/*All th should be centered unless they are in tbody*/
th {
    text-align: center;
}

tbody th {
    text-align: left;
}

td {
    vertical-align: top;
}
/**
 * Form elements
 */
form {
    overflow: visible;
}

input:focus,textarea:focus,select:focus {
    outline-width: 0;/*No outline border for Safary*/
}

input[type="text"],input[type="password"],
input[type="select"],input[type="search"],
input[type="file"],textarea,select {
    padding: 0;
    color: #777;
    font-size: 14px;
}

input:focus,textarea:focus {
    -webkit-box-shadow:0 0 2px rgba(196,196,196,0.5);
    box-shadow:0 0 2px rgba(196,196,196,0.5);
    -webkit-focus-ring-color:none;
    border-color:#c4c4c4;
    background-color:#FFFFF0;
}

label {
    font-weight: normal;
}

label.required:after {
    content:"*";
    color:red;
    font-family:"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
}

fieldset {
    line-height: 1;/*line height helps to set the vertical alignment of radio buttons and check boxes*/
}

input[type="checkbox"] {
    vertical-align: bottom;/*Vertical alignment of checkboxes*/
    *vertical-align: baseline;/*IE7*/
}

input[type="radio"] {
    vertical-align: text-bottom;/*Vertical alignment of radio buttons*/
}

input {
    _vertical-align: text-bottom;/*Vertical alignment of input fields for IE6*/
}

select {
    background-color: transparent;/*In Webkit/Mac, select fails to inherit color,font-*,etc if there is no other styling like background for example(border will do to)*/
}

/* Make button nice in IE
 *This is to fix IE6 and IE7 which create extra right/left padding on buttons
 * IMPORTANT: because IE6 does not understand the selector like input[type="button"],so you need to apply the class "form-btn" to all input of tpye="button" in your documents
 */
button,input[type="submit"],input[type="reset"],
input[type="button"],.form-btn {
    width: auto;
    *width: 0;
    overflow: visible;
}

/*Hand cursor on clickable input elements*/
label,input[type="button"],input[type="submit"],
input[type="reset"],input[type="image"],button {
    cursor: pointer;
}

/*Webkit browsers add a 2px margin outside the chrome of form elements*/
button,input,select,textarea {
    margin: 0;
}

/* colors for form validity */
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid {
  border-radius: 1px;
  -webkit-border-radius: 1px;
    -webkit-box-shadow: 0px 0px 5px red;
  box-shadow: 0px 0px 5px red;
}

/*Remove Textarea Scrollbars in IE*/
textarea {
    overflow: auto;
}

legend {
    *margin-left: -7px; /*IE<8, thnx ivannikolic*/
}

/**
 *Messages && Error && Warning
 */
.error {
    color: #666;
}

.warning {
    color: #e09010;
}

.ok,
.status {
    color: #008000;
}

input.error,textarea.error,select.error {
    border: 1px solid #e5e5e5;
}

div.ok,span.ok,div.status,span.status,div.error,span.error,
div.warning,span.warning,div.messages {
    border: 1px dotted #2d6ea8;
    border-width: 1px 0;
    margin: 0 0 15px;
    padding: 5px 10px;
    position: relative;
}

div.ok,span.ok,div.status,span.status,
div.messages.ok,div.messages.status {
    background: #f0f5fb;
}

div.error,span.error,div.messages.error {
    background: #ffc4c1;
}

div.warning,span.warning,div.messages.warning {
    background: #fdfed2;
}

.messages h2 {
    border: 0 !important;
    clip: rect(1px 1px 1px 1px);/*IE<8*/
    clip: rect(1px,1px,1px,1px);
    height: 1px !important;
    margin: -1px;
    overflow: hidden;
    padding: 0 !important;
    position: absolute !important;
    width: auto;
}

.messages li {
    list-style-type: disc;
    list-style-position: inside;
}

/*
 *Layout
 */

/*float left*/
.fl {
    float:left;
}

/*float right*/
.fr {
    float:right;
}

.img-fl {
    float:left;
    margin:4px 10px 4px 0;
}

.img-fr {
    float:right;
    margin:4px 0 4px 10px;
}

.nopadding {
    padding:0;
}

.nomargin {
    margin: 0;
}