#container_demo{
    text-align:left;
    padding:0;
    margin:0 auto;
    font-family:"Trebuchet MS","Myriad Pro",Arial,sans-serif
}
@font-face{
    font-family:FontomasCustomRegular;
    src:url(fonts/fontomas-webfont.eot);
    src:url(fonts/fontomas-webfont.eot?#iefix) format('embedded-opentype'),url(fonts/fontomas-webfont.woff) format('woff'),url(fonts/fontomas-webfont.ttf) format('truetype'),url(fonts/fontomas-webfont.svg#FontomasCustomRegular) format('svg');
    font-weight:400;
    font-style:normal
}
@font-face{
    font-family:FranchiseRegular;
    src:url(fonts/franchise-bold-webfont.eot);
    src:url(fonts/franchise-bold-webfont.eot?#iefix) format('embedded-opentype'),url(fonts/franchise-bold-webfont.woff) format('woff'),url(fonts/franchise-bold-webfont.ttf) format('truetype'),url(fonts/franchise-bold-webfont.svg#FranchiseRegular) format('svg');
    font-weight:400;
    font-style:normal
}
a.hiddenanchor{
    display:none
}
#wrapper{
    right:0;
    min-height:560px;
    margin:0 auto;
    width:500px;
    position:relative
}
#wrapper a{
    color:#5f9bc6;
    text-decoration:underline
}
.login-header{
    font-size:48px;
    color:#066a75;
    padding:2px 0 10px;
    font-family:FranchiseRegular,'Arial Narrow',Arial,sans-serif;
    font-weight:700;
    text-align:center;
    padding-bottom:30px;
    background:-webkit-repeating-linear-gradient(-45deg,#12535d,#12535d 20px,#406f76 20px,#406f76 40px,#12535d 40px);
    -webkit-text-fill-color:transparent;
    -webkit-background-clip:text
}
.login-header:after{
    content:' ';
    display:block;
    width:100%;
    height:2px;
    margin-top:10px;
    background:-moz-linear-gradient(left,rgba(147,184,189,0)0,rgba(147,184,189,.8)20%,rgba(147,184,189,1)53%,rgba(147,184,189,.8)79%,rgba(147,184,189,0)100%);
    background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(147,184,189,0)),color-stop(20%,rgba(147,184,189,.8)),color-stop(53%,rgba(147,184,189,1)),color-stop(79%,rgba(147,184,189,.8)),color-stop(100%,rgba(147,184,189,0)));
    background:-webkit-linear-gradient(left,rgba(147,184,189,0)0,rgba(147,184,189,.8)20%,rgba(147,184,189,1)53%,rgba(147,184,189,.8)79%,rgba(147,184,189,0)100%);
    background:-o-linear-gradient(left,rgba(147,184,189,0)0,rgba(147,184,189,.8)20%,rgba(147,184,189,1)53%,rgba(147,184,189,.8)79%,rgba(147,184,189,0)100%);
    background:-ms-linear-gradient(left,rgba(147,184,189,0)0,rgba(147,184,189,.8)20%,rgba(147,184,189,1)53%,rgba(147,184,189,.8)79%,rgba(147,184,189,0)100%);
    background:linear-gradient(left,rgba(147,184,189,0)0,rgba(147,184,189,.8)20%,rgba(147,184,189,1)53%,rgba(147,184,189,.8)79%,rgba(147,184,189,0)100%)
}
#wrapper p{
    margin-bottom:15px
}
#wrapper p:first-child{
    margin:0
}
#wrapper label{
    color:#405c60;
    position:relative
}
::-webkit-input-placeholder{
    color:#bebcbc;
    font-style:italic
}
input:-moz-placeholder,textarea:-moz-placeholder{
    color:#bebcbc;
    font-style:italic
}
input{
    outline:0
}
#wrapper input:not([type=checkbox]){
    width:92%;
    margin-top:4px;
    padding:10px 5px 10px 32px;
    border:1px solid #b2b2b2;
    -webkit-appearance:textfield;
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    -webkit-box-shadow:0 1px 4px 0 rgba(168,168,168,.6)inset;
    -moz-box-shadow:0 1px 4px 0 rgba(168,168,168,.6)inset;
    box-shadow:0 1px 4px 0 rgba(168,168,168,.6)inset;
    -webkit-transition:all .2s linear;
    -moz-transition:all .2s linear;
    -o-transition:all .2s linear;
    transition:all .2s linear
}
#wrapper input:not([type=checkbox]):active,#wrapper input:not([type=checkbox]):focus{
    border:1px solid rgba(91,90,90,.7);
    background:rgba(238,236,240,.2);
    -webkit-box-shadow:0 1px 4px 0 rgba(168,168,168,.9)inset;
    -moz-box-shadow:0 1px 4px 0 rgba(168,168,168,.9)inset;
    box-shadow:0 1px 4px 0 rgba(168,168,168,.9)inset
}
[data-icon]:after{
    content:attr(data-icon);
    font-family:FontomasCustomRegular;
    color:#6a9fab;
    position:absolute;
    left:10px;
    top:35px;
    width:30px
}
#wrapper p.button input,button{
    cursor:pointer;
    background:#3d9db3;
    padding:8px 5px;
    font-family:BebasNeueRegular,'Arial Narrow',Arial,sans-serif;
    color:#fff;
    font-size:24px;
    border:1px solid #1c6c7a;
    margin-bottom:10px;
    text-shadow:0 1px 1px rgba(0,0,0,.5);
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    -webkit-box-shadow:0 1px 6px 4px rgba(0,0,0,.07)inset,0 0 0 3px #fefefe,0 5px 3px 3px #d2d2d2;
    -moz-box-shadow:0 1px 6px 4px rgba(0,0,0,.07)inset,0 0 0 3px #fefefe,0 5px 3px 3px #d2d2d2;
    box-shadow:0 1px 6px 4px rgba(0,0,0,.07)inset,0 0 0 3px #fefefe,0 5px 3px 3px #d2d2d2;
    -webkit-transition:all .2s linear;
    -moz-transition:all .2s linear;
    -o-transition:all .2s linear;
    transition:all .2s linear
}
#wrapper p.button input:hover{
    background:#4ab3c6
}
#wrapper p.button input:active,#wrapper p.button input:focus{
    background:#28899a;
    position:relative;
    top:1px;
    border:1px solid #0c4c57;
    -webkit-box-shadow:0 1px 6px 4px rgba(0,0,0,.2)inset;
    -moz-box-shadow:0 1px 6px 4px rgba(0,0,0,.2)inset;
    box-shadow:0 1px 6px 4px rgba(0,0,0,.2)inset
}
p.login.button,p.signin.button{
    text-align:right;
    margin:5px 0
}
.keeplogin{
    margin-top:-5px
}
.keeplogin input,.keeplogin label{
    display:inline-block;
    font-size:12px;
    font-style:italic
}
.keeplogin input#loginkeeping{
    margin-right:5px
}
.keeplogin label{
    width:80%
}
p.change_link{
    position:absolute;
    color:#7f7c7c;
    left:0;
    height:20px;
    width:440px;
    padding:17px 30px 20px;
    font-size:16px;
    text-align:right;
    border-top:1px solid #dbe5e8;
    -webkit-border-radius:0 0 5px 5px;
    -moz-border-radius:0 0 5px 5px;
    border-radius:0 0 5px 5px;
    background:#e1eaeb;
    background:-moz-repeating-linear-gradient(-45deg,#f7f7f7,#f7f7f7 15px,#e1eaeb 15px,#e1eaeb 30px,#f7f7f7 30px);
    background:-webkit-repeating-linear-gradient(-45deg,#f7f7f7,#f7f7f7 15px,#e1eaeb 15px,#e1eaeb 30px,#f7f7f7 30px);
    background:-o-repeating-linear-gradient(-45deg,#f7f7f7,#f7f7f7 15px,#e1eaeb 15px,#e1eaeb 30px,#f7f7f7 30px);
    background:repeating-linear-gradient(-45deg,#f7f7f7,#f7f7f7 15px,#e1eaeb 15px,#e1eaeb 30px,#f7f7f7 30px)
}
#wrapper p.change_link a{
    display:inline-block;
    font-weight:700;
    background:#f7f8f1;
    padding:2px 6px;
    color:#1da2c1;
    margin-left:10px;
    text-decoration:none;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    border:1px solid #cbd5d6;
    -webkit-transition:all .4s linear;
    -moz-transition:all .4s linear;
    -o-transition:all .4s linear;
    -ms-transition:all .4s linear;
    transition:all .4s linear
}
#wrapper p.change_link a:hover{
    color:#39bfd7;
    background:#f7f7f7;
    border:1px solid #4ab3c6
}
#wrapper p.change_link a:active{
    position:relative;
    top:1px
}
#login,#register{
    position:absolute;
    top:0;
    width:88%;
    padding:18px 6% 60px;
    margin:0 0 35px;
    background:#f7f7f7;
    border:1px solid rgba(147,184,189,.8);
    -moz-box-shadow:0 2px 5px rgba(105,108,109,.7),0 0 8px 5px rgba(208,223,226,.4)inset;
    box-shadow:0 2px 5px rgba(105,108,109,.7),0 0 8px 5px rgba(208,223,226,.4)inset;
    -webkit-box-shadow:5px;
    -moz-border-radius:5px;
    border-radius:5px
}
#register{
    z-index:21
}
#login{
    z-index:22
}
#tologin:target~#wrapper #login,#toregister:target~#wrapper #register{
    z-index:22;
    -webkit-animation-name:fadeInLeft;
    -moz-animation-name:fadeInLeft;
    -ms-animation-name:fadeInLeft;
    -o-animation-name:fadeInLeft;
    animation-name:fadeInLeft;
    -webkit-animation-delay:.1s;
    -moz-animation-delay:.1s;
    -o-animation-delay:.1s;
    -ms-animation-delay:.1s;
    animation-delay:.1s
}
#tologin:target~#wrapper #register,#toregister:target~#wrapper #login{
    -webkit-animation-name:fadeOutLeft;
    -moz-animation-name:fadeOutLeft;
    -ms-animation-name:fadeOutLeft;
    -o-animation-name:fadeOutLeft;
    animation-name:fadeOutLeft
}
.animate{
    -webkit-animation-duration:.5s;
    -webkit-animation-timing-function:ease;
    -webkit-animation-fill-mode:both;
    -moz-animation-duration:.5s;
    -moz-animation-timing-function:ease;
    -moz-animation-fill-mode:both;
    -o-animation-duration:.5s;
    -o-animation-timing-function:ease;
    -o-animation-fill-mode:both;
    -ms-animation-duration:.5s;
    -ms-animation-timing-function:ease;
    -ms-animation-fill-mode:both;
    animation-duration:.5s;
    animation-timing-function:ease;
    animation-fill-mode:both
}
.lt8 #wrapper input{
    padding:10px 5px 10px 32px;
    width:92%
}
.lt8 #wrapper input[type=checkbox]{
    width:10px;
    padding:0
}
.lt8 #wrapper h1{
    color:#066A75
}
.lt8 #register{
    display:none
}
.ie9 p.change_link,.lt8 p.change_link{
    position:absolute;
    height:90px;
    background:0 0
}


@media screen and (min-width:320px) and (max-width:640px){
    
    .login-header {
        font-size: 28px;
        padding: 2px 10px 10px;
        text-align: left;
    }
    
    #wrapper p.button input, button {
        font-size: 16px;
    }

    p.login.button, p.signin.button {
        text-align: left;
        margin-left: 70px;
        font-size:14px;
    }	
}