/* Reset CSS HTML5 */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

body {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: #555555;
}

* {
    outline: none;
}

a:hover {
    color: #819829;
}

a {
    color: #008dbe;
}

.loginwrapper {
    display: block;
    width: 400px;
    height: 400px;
    margin: 0 auto;
}

.loginwrapper h2 {
    display: block;
    text-align: center;
    font-size: 24px;
    height: : 30px;
    padding: 16px 0;
    color: #666;
}

.connectsuccess {
    height: 220px !important;
}
.connectsuccess h3 {
    display: block;
    text-align: center;
    font-size: 30px !important;
    line-height: 40px;
    padding: 24px 0 24px;
    height: 80px;
    color: #008dbe;
}

.errmsg {
    color: #cc0000;
    background: #fbeded;
    border: 1px solid #cc0000;
    padding: 8px;
    font-size: 14px;
    font-style: italic;
    margin-bottom: 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

form {
    padding: 0 30px;
}

form label {
    display: block;
    font-weight: 400;
    line-height: 32px;
    height: 32px;
    color: #008dbe;
    font-size: 16px;
}

form input {
    width: 322px;
    height: 32px;
    line-height: 32px;
    margin-bottom: 16px;
    font-size: 20px;
    padding: 0 8px;
    color: #555555;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

form input.ctabutton {
    font-size: 20px;
    color: white;
    display: block;
    width: 340px;
    height: 45px;
    line-height: 40px;
    padding-bottom: 3px;
    text-align: center;
    margin-top: 16px;
    font-family: 'Roboto Condensed', serif;
    font-weight: 400;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    text-shadow: 1px 1px 1px rgba(69, 69, 69, 0.4);
    -moz-box-shadow: 0 8px 6px -6px rgba(69, 69, 69, 0.7), inset 0 -3px 0 0 #bd6101;
    -webkit-box-shadow: 0 8px 6px -6px rgba(69, 69, 69, 0.7), inset 0 -3px 0 0 #bd6101;
    box-shadow: 0 8px 6px -6px rgba(69, 69, 69, 0.7), inset 0 -3px 0 0 #bd6101;
    border: 1px solid #ff9b44;
    background-color: #d2741d;
    background-image: -moz-linear-gradient(top, #ff9b44, #d2741d);
    background-image: -ms-linear-gradient(top, #ff9b44, #d2741d);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ff9b44), to(#d2741d));
    background-image: -webkit-linear-gradient(top, #ff9b44, #d2741d);
    background-image: -o-linear-gradient(top, #ff9b44, #d2741d);
    background-image: linear-gradient(top, #ff9b44, #d2741d);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@uppercolor', endColorstr='@lowercolor', GradientType=0);
}

form input.ctabutton:hover {
    cursor: pointer;
    -moz-box-shadow: 0 8px 6px -6px rgba(69, 69, 69, 0.7), inset 0 -3px 0 0 #728a18;
    -webkit-box-shadow: 0 8px 6px -6px rgba(69, 69, 69, 0.7), inset 0 -3px 0 0 #728a18;
    box-shadow: 0 8px 6px -6px rgba(69, 69, 69, 0.7), inset 0 -3px 0 0 #728a18;
    border: 1px solid #b9d245;
    background-color: #819829;
    background-image: -moz-linear-gradient(top, #b9d245, #819829);
    background-image: -ms-linear-gradient(top, #b9d245, #819829);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b9d245), to(#819829));
    background-image: -webkit-linear-gradient(top, #b9d245, #819829);
    background-image: -o-linear-gradient(top, #b9d245, #819829);
    background-image: linear-gradient(top, #b9d245, #819829);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@uppercolor', endColorstr='@lowercolor', GradientType=0);
}

form input[type="text"],
form input[type="password"] {
    width: 340px;
    height: 32px;
    line-height: 32px;
    margin-bottom: 16px;
    font-size: 20px;
    padding: 0 8px;
    color: #555555;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

form input.def {
    border: 1px solid #aaaaaa;
}

.forgotpass {
    text-align: right !important;
    font-size: 12px !important;
}

.noaccount {
    text-align: center;
    padding-top: 16px;
}

.haveproblem {
    text-align: center;
    padding-top: 16px;
    line-height: 18px;
    font-size: 12px;
}