@charset 'utf-8';

/**********************************************************************/
/* 1. Global reset courtesy of Eric Meyer:                            */
/*    http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/    */
/*    (slightly modified version)                                     */
/**********************************************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

/* remember to define focus styles! */
:focus { outline: 0; }

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}

caption, th, td {
    text-align: left;
    font-weight: normal;
}


/**********************************************************************/
/* 2. Some very basic helper styles which always come in handy        */
/**********************************************************************/

/* Browser scroll bar always on */
/* html { height: 100%; }
body { height: 101%; } */

/* Hide elements the screen user doesn't need */
.invisible {
    position: absolute;
    left: -9999em;
}

a.invisible:focus {
    position: static;
    left: 0;
}

/* Easy clearing */
.clearfix { display: inline-block; }

.clearfix:after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}

/* Hides from IE-mac \*/ 
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

.no-border { border: 0 none; }


/**********************************************************************/
/* 3. Basic styles against the reset                                  */
/**********************************************************************/

body {
    background: #fff;
    color: #333;
    font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Arial, sans-serif;
    line-height: 1.5;
}

code, kbd, var,
tt, pre { font-family: Consolas, "Courier New", Courier, monospace; }

pre { font-size: .8125em; }

p code, p kbd,
p var, p tt { line-height: 1; }

a:link,
a:visited { text-decoration: underline; }

a:active,
a:focus { outline: 1px dotted #888; }

/* jQuery will take care of this for the time being */
/* a[href^="http:"]:after { content: "\2197"; }     */

strong, dt { font-weight: bold; }

em, cite { font-style: italic; }

abbr[title] {
    border-bottom: 1px dotted #888;
    cursor: help;
}

a abbr { cursor: pointer!important; }

del {
    color: #888;
    text-decoration: line-through;
}

ins {
    border-bottom: 1px dashed #888;
    text-decoration: none;
}

sub { vertical-align: text-bottom; }
sup { vertical-align: text-top; }

sub, sup {
    font-size: 75%;
    line-height: 1;
}

ol { list-style-type: decimal; }
ul { list-style-type: disc; }

ol, ul { padding-left: 2.5em; }

blockquote {
    margin: 1.5em 0 1.5em 2.5em;
    padding: 0;
    text-indent: -.3em;
    width: 80%;
}

/* text-indent doesn't make sense in IE6 + IE7  */
/* because it doesn't do :before or :after      */
* html blockquote { text-indent: 0em; }
*:first-child+html blockquote { text-indent: 0; }

blockquote { quotes: "\201E" "\201C" "\201A" "\2018"; }
blockquote:lang(de) { quotes: "\201E" "\201C" "\201A" "\2018"; }
blockquote:lang(en) { quotes: "\201C" "\201D" "\2018" "\2019"; }

blockquote p:before { content: open-quote; }
blockquote p:after { content: close-quote; }

/* Safari support */
blockquote * { quotes: none; }
blockquote > *:before { content: "\201E"; }
blockquote > *:after  { content: "\201C"; }

*[lang~='de'] blockquote > *:before,
blockquote[lang~='de'] > *:before { content: "\201E"; }
*[lang~='de'] blockquote > *:after,
blockquote[lang~='de'] > *:after { content: "\201C"; }

*[lang~='en'] blockquote > *:before,
blockquote[lang~='en'] > *:before { content: "\201C"; }
*[lang~='en'] blockquote > *:after,
blockquote[lang~='en'] > *:after { content: "\201D"; }

legend, label, select,
input, textarea { font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Arial, sans-serif; }

input, textarea, select { font-size: 1em; }

label { font-weight: normal; }

label, button,
input[type=button],
input[type=submit] { cursor: pointer; }

fieldset {
    display: block;
    margin: 0 0 1.5em;
}

input, textarea { padding: 2px; }

/* This positions an unstyled legend element */
/* correctly in IE6 + IE7                    */
* html legend,
*:first-child+html legend {
    position: relative;
    left: -10px;
}


/**********************************************************************/
/* 4. Screen styles                                                   */
/**********************************************************************/

/* Headings */

h1, h2, h3,
h4, h5, h6 { font-weight: bold; }

h1 {
    font-size: 2em; /* 32px */
    margin-bottom: .5em;
}

h2 {
    font-size: 1.5em; /* 24px */
    margin-bottom: .6667em;
}

h3 {
    font-size: 1.125em; /* 18px */
    margin-bottom: .8889em;
}

h4, h5, h6,
p, ol, ul, dl,
address, pre, table { margin-bottom: 1em; }

/* Code snippets */

/*
    <pre>
        <code class="...">
        ...
        </code>
    </pre>
*/

.code-html,
.code-css,
.code-php,
.code-smarty,
.code-jquery {
    background: #eee;
    border: .1em solid #ccc;
    display: block;
    overflow: auto;
    padding: .667em;
    width: 36em;
}

.code-html:before,
.code-css:before,
.code-php:before,
.code-smarty:before,
.code-jquery:before {
    color: #aaa;
    display: block;
    font-family: Georgia, serif;
    font-size: 1.6em;
    text-align: right;
}

.code-html:before { content: "HTML"; }
.code-css:before { content: "CSS"; }
.code-php:before { content: "PHP"; }
.code-smarty:before { content: "Smarty"; }
.code-jquery:before { content: "jQuery"; }