/* ============================================================================
 == RESET =====
 =========================================================================== */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,textarea,p,blockquote,th,td { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset,img { border: 0; }
ol,ul { list-style: none; }
caption,th { text-align: left; }
q:before,q:after { content: ''; }
abbr,acronym { border: 0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style: normal; font-weight: normal; }
h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal; }
a:active, a:focus { outline: none; }

/* ============================================================================
 == LAYOUT =====
 =========================================================================== */

/* Top wrappers */
body { padding: 0; margin: 0; background: #D3D9E0 url('images/body-bg-top.png') repeat-x 0 234px; } /* #head (216px) + #navigation (17px+2px) = 216+19 = 235 */
    body { font-size: 16px; font-family: sans-serif; }
    #page { font-size: 62.5%; }

/* Head */
#head { height: 216px; background: url('images/head-bg.png') repeat-x top center; }
    #head .inside { max-width: 960px; margin: 0 auto; position: relative; }
    #head h2 { font-size: 5em; font-weight: bold; position: absolute; top: 20px; left: 20px; }
    #head h2 a { width: 386px; height: 148px; display: block; overflow: hidden; background: url('images/head-logo.png') no-repeat top center; text-indent: 3000px; }
    #head h5 { font-size: 1.5em; font-weight: bold; display: none; }
    #head .puppet { width: 145px; height: 201px; background: url('images/head-puppet.png') repeat-x top center; position: absolute; top: 15px; right: 20px;  }

/* Navigation */
#navigation h5 { display: none; }
    #navigation { background-color: #F2F2F2; border-bottom: 2px solid #D1CECE; height: 17px; position: relative; }
    #navigation ul { max-width: 900px; height: 40px; margin: 0 auto; position: relative; top: -40px; }
    #navigation ul li { height: 100%; float: left; margin-left: 12px; }
    #navigation ul li a { height: 100%; display: block; background: url('images/navigation-item-right-long.png') no-repeat top right;  }
    #navigation ul li a span { height: 100%; display: block; position: relative; top: 0; left: -7px; padding: 0 10px 0 17px; background: url('images/navigation-item-left-short.png') no-repeat top left; }
    #navigation ul li a { background-position: center right; }
    #navigation ul li a span { background-position: center left; }
    #navigation ul li a:hover { background-position: bottom right; }
    #navigation ul li a:hover span { background-position: bottom left; }
    #navigation ul li a.active, #navigation ul li a:focus { background-position: top right; }
    #navigation ul li a.active span, #navigation ul li a:focus span { background-position: top left; }
    #navigation ul li a { text-decoration: none; }
    #navigation ul li a span { color: black; font-size: 2em; font-family: Georgia, 'New York CE', utopia, serif; line-height: 43px; }

/* Content part */
#body { max-width: 860px; margin: 100px auto 10px; padding: 23px 30px; background: white; border-top: 2px solid #B3B3B3; border-bottom: 2px solid #B3B3B3; position: relative; }
    /* Basic font styles for body elements */
    #body p, #body li, #body dt, #body dd, #body address, #body blockquote,
    #body label, #body legend, #body input { font-size: 1.6em; line-height: 2.2em; }
    #body p, #body table, #body address, #body blockquote { margin: 0em 0 1em; }

    /* Headings */
    #body h1 { position: absolute; top: -100px; left: 30px;  }
    #body h1 { font-size: 5em; font-family: Georgia, 'New York CE', utopia, serif; line-height: 95px; color: #252240; letter-spacing: -0.06em; }
    #body h2 { font-size: 3.2em; height: 42px; line-height: 42px; font-weight: bold; color: #C74848; letter-spacing: -0.06em; }
    #body h2.ornament { background: url('images/body-button-line.png') no-repeat center right; }
    #body h2.ornament span { background-color: white; display: block; float: left; padding-right: 10px; }
    #body h3 { font-size: 2.1em; font-weight: bold; color: #333333; }
    #body h4 { font-size: 1.6em; font-weight: bold; }
    #body h5 { font-size: 1.6em; }
    #body h2, #body h3, #body h4, #body h5 { margin: 0.5em 0 0.3em;}
    #body strong { font-weight: bold; }

    /* Lists */
    #body ul, #body ol, #body dl { margin-left: 15px; }
    #body ul li { background: url('images/body-list-button.png') no-repeat 0 0.7em; padding-left: 25px; }

    #body dl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* clearfix */
    * html #body dl { height: 1%; } /* clearfix */
    #body dl dt { width: 170px; float: left; clear: left; padding: 0 7px 0 0; text-align: left; }
    #body dl dd { float: left;  }
    #body dl.basic dt { width: 75px; }
    #body dl dt, #body dl dd  { border-bottom: 2px dotted #D3D9E0; }

    /* Tables */
    #body table { margin: 0.5em 0; }
        #body table caption { font-size: 3.2em; height: 42px; line-height: 42px; font-weight: bold; color: #C74848; letter-spacing: -0.06em; margin: 0.5em 0 0; }
        #body table th, #body table td { font-size: 1.6em; color: #333333; padding: 10px 15px; }
        #body table thead th { background-color: #D2EAF1; border-top: 1px solid #4BACC6; border-bottom: 1px solid #4BACC6; font-weight: bold; }
        #body table td { border-bottom: 1px solid #4BACC6; }
        #body table tr.odd td { background-color: #E9F0F2; }
    
    /* Images */
    #body img { margin: 10px 0 10px 20px;  }
        #body img.right { float: right; }
        #body img.left { float: left; }

    /* Forms */
    #body form:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* clearfix */
    * html #body form { height: 1%; } /* clearfix */
        #body fieldset { clear: left; border: 4px dashed #D0D5DD; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 0px 30px 30px; }
        #body legend { font-size: 2.2em; font-weight: bold; color: #333333; padding: 0 10px 0 0; }
        #body input[type=submit], #body input.submit, #body input[type=reset], #body input.reset { width: auto; height: 70px; padding: 10px 30px; margin-top: 0.5em; }
        #body label { width: 100px; float: left; clear: left; margin-top: 3px; margin-right: 10px;  font-weight: bold; color: #333; }
        #body input { width: 300px; height: 24px; line-height: 100%; float: left; padding: 5px; margin-top: 5px; }
        #body select { width: auto; float: left; padding: 5px; margin-top: 7px; }
        #body textarea { width: 300px; height: 100px; float: left; font-family: sans-serif; padding: 5px; margin-top: 5px; }
        #body input[type=file] { font-size: 1em; }

    #body fieldset.inline { border: 2px solid #EDEFFA; padding-bottom: 10px; }
        #body fieldset.inline legend { font-size: 1.6em; padding: 0 10px; margin-left: -20px;}
        #body fieldset.inline:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* clearfix */
        * html #body fieldset.inline  { height: 1%; } /* clearfix */
        #body fieldset.inline label, #body fieldset.inline input { float: none; width: auto; }
        #body fieldset.inline input { margin-right: 15px; }
        #body label.long { width: auto; }
        
    /* Captcha */
    #body form .captcha label { line-height: 110%; }
    #body form .captcha img { float: left; margin: 10px 0; }
    #body form .captcha input { width: 239px; font-size: 14px; height: 17px; float: left; margin-top: 3px;  }

    #body .highlight { background-color: #F9EDED; border: 1px solid silver; }

    /* Comments */
    #body .comment { margin: 1em 0; padding: 1em 0; border-bottom: 2px dotted #D3D9E0; }
        #body .comment .author { margin: 0em; line-height: 1em; }
        #body .comment .author .name { margin-right: 0.4em; font-weight: bold; background: url('images/icons/comment.png') no-repeat center left; padding-left: 22px; padding-right: 0; }
        #body .comment .author .date { font-size: 0.7em; }
        #body .comment .author .date:before { content: "("; }
        #body .comment .author .date:after { content: ")"; }
        #body .comment .text { margin: 0em; }

    /* News */
    #body .news:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* clearfix */
    * html #body .news { height: 1%; } /* clearfix */
    #body .message { color: #333333; width: 260px; margin: 0 20px 30px 0; float: left; }
        #body .message h5 { font-size: 1.6em; font-weight: bold; margin: 0; }
        #body .message .date { font-size: 1.2em; color: #808080; font-weight: bold; margin: 0; }
        #body .message .text { font-size: 1.4em; }

    /* Videos */
    #body .videos:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* clearfix */
    * html #body .videos { height: 1%; } /* clearfix */
    #body .video { float: left; margin-right: 20px;  }

    /* Links */
    a { color: #3F75BF; }
    a:hover { text-decoration: none; }
    a[href^=http] { background: url('images/icons/link-external.png') no-repeat center right; padding-right: 15px; }
    a[href^=mailto] { background: url('images/icons/email.png') no-repeat center right; padding-right: 23px; }


/* Foot */
#foot { width: 890px; font-size: 1.2em; color: #333; margin: 10px auto 20px; line-height: 2em; }
#foot:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* clearfix */
* html #foot  { height: 1%; } /* clearfix */
    #foot .copyright { float: left; }
    #foot ul { float: right; }
    #foot ul li { float: left; padding: 0 7px; }


/* Error and notice message boxes */
.error, .notice { width: auto; padding: 10px; margin: 3px 0; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
.error { background-color: #FCDFDC; border: 1px solid #E0AEA9; }
.notice { background-color: #E4FCDC; border: 1px solid #B1E0A9; }

/* ============================================================================
 == HELPERS =====
 =========================================================================== */

/* clearfix pattern */
.clf:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html .clf { height: 1%; }
.clf { display: block; }

/* image replacer pattern */
.imr { position: relative; display: block; overflow: hidden; text-decoration: none; }
.imr span { width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; }