@import url(https://fonts.googleapis.com/css?family=Oswald:400,300|Open+Sans:400,600);

/* Eric Meyer CSS Reset */
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,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
/* CSS reset ends */

/*GLOBAL */

body {
    background: url(../img/outer-pages/office1600.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    height: 100%;
    font-size: 16px;
    font-family: Open Sans, Helvetica, arial, sans-serif;
    line-height: 1.388;
}

*:focus {
    outline: none;
}


.outer-page-container {
    padding-top: 40px;
    position: relative;
    float: right;
    margin-right: 5%;
    background-color: rgba(14, 30, 81, 0.8);
    width: 560px;
}

    /* clear after float so container wraps around everything */
.outer-page-container:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
    }

/*LAYOUT*/
.errors {
    color: red;
}

.confirmation-message {
    color: green;
}

.messages{
    color: #FFF;
}
/* Web Stop Shop Slogan */
h4 {
   font-size: 1.3em;
}
/* link to home page */
a { color: #fff;
    text-decoration: underline; 
}

/* adding logo on top center of the page */
.login-logo {
    background: url(../img/outer-pages/web-stop-shop-reverse.svg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    height: 200px;
    width:  222px;
    margin: 0 auto;
    margin-bottom: 20px;
}

/* text styling */
main div h4 {
    font-family: Oswald, Arial, helvetica, "sans-serif";
    font-siz: .9em;
    color: white;
    text-align: center;
}

label {
    font-family: Oswald, Arial, helvetica, "sans-serif";
    color: #fff;
    font-size: 1.2em;
    font-weight: 400;
}

input {
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    font-size: 1.2em;
    margin-bottom: 20px;
    margin-top: 5px;
    padding-left: 10px;
    -moz-border-radius:5px; /* Firefox */
    -webkit-border-radius: 5px; /* Safari, Chrome */
    -khtml-border-radius: 5px; /* KHTML */
    border-radius: 5px; /* CSS3 */
    behavior:url("border-radius.htc");
}

::-webkit-input-placeholder { /* safari & Chrome */
   padding-left: 5px;
}

:-moz-placeholder { /* Firefox 18- */
   padding-left: 5px;
}

::-moz-placeholder {  /* Firefox 19+ */
   padding-left: 5px;
}

:-ms-input-placeholder {  
   padding-left: 5px;
}

input[type="submit"] {
    width: 100%;
    height: 45px;
    margin: 10px 0px 10px 0px;
    background-color: #ddcd8d;
    cursor: pointer;
    color: #0e1e33;
}

input[type="radio"]{
    width: auto;
    height: auto;
    margin-right: 10px;
    display: inline-block;
    float: left;
    margin-top: 9px;
}

.signUpRadio label { float:left; clear:none; display:inline; padding: 2px 1em 0 0; } 


#login-form-div {
    padding: 50px 30px 50px 30px;
}

#login-sign-up password-sign-up {
    margin-top: 20px;
}

form ol li a {
    color: #fff;
}

.error-container {
    background-color: rgba(255,0,0,0.3);
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,0,0,0.75);
    margin: 10px 0 10px;
}

.errors {
    list-style-type: disc;
    list-style-position: inside;
}

.message-container {
    background-color: rgba(0,255,0,0.3);
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(0,255,0,0.75);
    margin: 10px 0 10px;
}

.confirmation-message {
    color:rgba(0,255,0,1);
}

/* Reusable Classes */
.clear { clear: both; }
.hide { display: hidden }
.fl { float: left; }
.fr { float: right; }
.center { margin: 0 auto;}
.width100 { width=100%; height: auto; }
.white { color: white; }


/* Media Queries for Tablet */

@media screen and ( max-width: 768px ) {
    .outer-page-container  {
        float: none;
        margin: 0 auto;
        box-sizing:border-box; 
        width: 90%;
    }
}