background-image: -khtml-gradient( linear, left top, left bottom, from(#577632), to(#577632));

    background-image: -moz-linear-gradient(top, #577632, #577632);

    background-image: -ms-linear-gradient( top, #577632, #577632);

    background-image: -webkit-gradient( linear, left top, left bottom, color-stop( 0%, #577632), color-stop( 100%, #577632));

    background-image: -webkit-linear-gradient( top, #577632, #577632));

    background-image: -o-linear-gradient( top, #577632, #577632));

    background-image: linear-gradient(to bottom, #577632, #577632);

    filter: progid : DXImageTransform.Microsoft.gradient ( startColorstr = '#577632', endColorstr = '#577632', GradientType = 0);

    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);

    -webkit-border-radius: 4px 4px 4px 4px;

    -khtml-border-radius: 4px 4px 4px 4px;

    border-radius: 4px 4px 4px 4px;

}

#footer div#footer-inner p {

    padding: 15px 25px 15px 0;

    color: #FFF;

    font-weight: 700;

}

#footer div#footer-inner .footer-link {

    float: left;

    padding-left: 10px;

}

#footer div#footer-inner .footer-link a,

#footer div#footer-inner .footer-link-right a {

    color: #FFF;

}

#login div.title {

    clear: both;

    overflow: hidden;

    position: relative;

    background-color: #577632;

    background-repeat: repeat-x;

    background-image: -khtml-gradient( linear, left top, left bottom, from(#577632), to(#577632));

    background-image: -moz-linear-gradient( top, #577632, #577632);

    background-image: -ms-linear-gradient( top, #577632, #577632);

    background-image: -webkit-gradient( linear, left top, left bottom, color-stop( 0%, #577632), color-stop( 100%, #577632));

    background-image: -webkit-linear-gradient( top, #577632, #577632));

    background-image: -o-linear-gradient( top, #577632, #577632));

    background-image: linear-gradient(to bottom, #577632, #577632);

    filter: progid : DXImageTransform.Microsoft.gradient ( startColorstr = '#577632', endColorstr = '#577632', GradientType = 0);

    margin: 0 auto;

    padding: 0;

}

#login div.inner {

    border-top: none;

    border-bottom: none;

    margin: 0 auto;

    padding: 20px;

}

#login div.form div.fields div.field div.label {

    width: 173px;

    float: left;

    text-align: right;

    margin: 2px 10px 0 0;

    padding: 5px 0 0 5px;

}

#login div.form div.fields div.field div.input input {

    background: #FFF;

    border-top: 1px solid #b3b3b3;

    border-left: 1px solid #b3b3b3;

    border-right: 1px solid #eaeaea;

    border-bottom: 1px solid #eaeaea;

    color: #000;

    font-size: 11px;

    margin: 0;

    padding: 7px 7px 6px;

}

#login div.form div.fields div.buttons {

    clear: both;

    overflow: hidden;

    border-top: 1px solid #DDD;

    text-align: right;

    margin: 0;

    padding: 10px 0 0;

}

#login div.form div.links {

    clear: both;

    overflow: hidden;

    margin: 10px 0 0;

    padding: 0 0 2px;

}

.user-menu {

    margin: 0px !important;

    float: left;

}

.user-menu .container {

## -*- coding: utf-8 -*-

<%inherit file="base/root.html"/>

<%def name="title()">

    ${_('Log In')}

    %if c.site_name:

        · ${c.site_name}

    %endif

</%def>

<div id="header">

    <div id="header-inner" class="title">

        <div id="logo">

          <a href="${h.url('home')}" style="display: block;">

            <div class="header">

                <img src="${h.url('/images/kallithea-logo.svg')}" onerror="this.src='${h.url('/images/kallithea-logo.png')}'" alt="Kallithea"/>

            </div>

            %if c.site_name:

             <div class="branding">${c.site_name}</div>

            %endif

          </a>

        </div>

    </div>

</div>

<div id="login">

    <%include file="/base/flash_msg.html"/>

    <!-- login -->

    <div class="title withlogo">

        %if c.site_name:

            <h5>${_('Log In to %s') % c.site_name}</h5>

        %else:

            <h5>${_('Log In')}</h5>

        %endif

    </div>

    <div class="inner">

        ${h.form(h.url.current(came_from=c.came_from))}

        <div class="form">

            <!-- fields -->

            <div class="fields">

                <div class="field">

                    <div class="label">

                        <label for="username">${_('Username')}:</label>

                    </div>

                    <div class="input">

                        ${h.text('username',class_='focus large')}

                    </div>

                </div>

                <div class="field">

                    <div class="label">

                        <label for="password">${_('Password')}:</label>

                    </div>

                    <div class="input">

                        ${h.password('password',class_='focus large')}

                    </div>

                </div>

                <div class="field">

                    <div class="checkbox">

                        <input type="checkbox" id="remember" name="remember" />

                        <label for="remember">${_('Remember me')}</label>

                    </div>

                </div>

                <div class="buttons">

                    ${h.submit('sign_in',_('Sign In'),class_="btn")}

                </div>

            </div>

            <!-- end fields -->

            <!-- links -->

            <div class="links">

                ${h.link_to(_('Forgot your password ?'),h.url('reset_password'))}

                %if h.HasPermissionAny('hg.admin', 'hg.register.auto_activate', 'hg.register.manual_activate')():

                  /

                 ${h.link_to(_("Don't have an account ?"),h.url('register'))}

                %endif

            </div>

            <!-- end links -->

        </div>

        ${h.end_form()}

        <script type="text/javascript">

        $(document).ready(function(){

            $('#username').focus();

        });