/**
 * basics.css | basic styles
 *
 */

/*** floating ***/
.left  { float: left; }
.right { float: right; }

.content-image.right { float: left; }
.content-image.left  { float: right; }

/*** text-align ***/
.tleft   { text-align: left; }
.tright  { text-align: right; }
.tcenter { text-align: center; }

/*** vertical-align ***/
.vtop    { vertical-align: top; }
.vmiddle { vertical-align: middle; }
.vbottom { vertical-align: bottom; }

/*** margin ***/
.mr-20 { margin-right: 20px; }
.ml-20 { margin-left: 20px; }
.mb-20 { margin-bottom: 20px; }
.mt-20 { margin-top: 20px; }

/*** widths ***/
.p10  { width: 10%; }
.p15  { width: 15%; }
.p20  { width: 20%; }
.p25  { width: 25%; }
.p30  { width: 30%; }
.p32  { width: 32.6%; }
.p33  { width: 33%; }
.p35  { width: 35%; }
.p40  { width: 40%; }
.p45  { width: 45%; }
.p49  { width: 49%; }
.p50  { width: 49.99%; }
.p57  { width: 57%; }
.p60  { width: 60%; }
.p66  { width: 66%; }
.p70  { width: 60%; }
.p75  { width: 75%; }
.p80  { width: 80%; }
.p90  { width: 90%; }
.p100 { width: 100%; }

/*** helper classes ***/
.nowrap { white-space: nowrap; }

/* image replacement */
.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

nav ul,
nav ol {
    margin: 0;
    padding: 0;
    list-style: none none;
}

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.clear {
    clear: both;
}