/*
 *= require shoppe/reset
 *= require shoppe/elements
 *= require_self
 */


@import 'variables';

html { overflow-y: scroll; height:100%; background:#fff;}
body { font-family:$font; font-weight: normal; font-size: 100%; min-width:900px; height:100%; }
@import 'variables';

html.login {
  background:image-url('shoppe/logo.svg') #40454D no-repeat center 100px;
  background-size:70px;
	
	#flash-alert {
		background:#C17391;
		position:absolute;
		top:0;
		width:100%;
		text-align:center;
		color:#fff;
		padding:15px 0;
	}
	
	#flash-notice {
		background:#94C164;
		position:absolute;
		top:0;
		width:100%;
		text-align:center;
		color:#fff;
		padding:15px 0;
	}
	
	//
	// Error
	//
	div.error {
    background:#fff;
    width:400px;
    margin:auto;
    margin-top:200px;
		padding:25px;
		line-height:1.5;
		font-size:0.9em;
		font-weight:500;
		text-align:center;
		p.back { margin-top:25px;}
  }
	
  //
  // Primary login area
  //
  div.loginArea {
    background:#fff;
    width:400px;
    margin:auto;
    margin-top:200px;
		padding-top:50px;
		
		h2 {
			text-align:center;
			font-weight:300;
			font-size:1.4em;
			color:#40454D;
			margin-bottom:30px;
		}
    p.field {
      text-align:center;
      margin-bottom:15px;
      input {
        padding:7px;
        border:0;
        border-radius:4px;
        border:1px solid #c0c6ce;
        width:275px;
        font-family:$font;
        font-weight:600;
        background:#eef0f4;
        box-shadow:inset 1px 1px 1px rgba(42,51,61,0.1);
        text-align:center;
        &::-webkit-input-placeholder { color:#b7bfcb; font-weight:normal;}
        &:-moz-placeholder { color:#b7bfcb; font-weight:normal;}
        &::-moz-placeholder { color:#b7bfcb; font-weight:normal;}
        &:-ms-input-placeholder { color:#b7bfcb; font-weight:normal;}
      }
      &:last-child { margin-bottom:0;}
    }
    p.submit { 
      padding:15px 0 25px 0;
      text-align:center;
    }
    p.reset {
      background:#353A41;
      font-size:0.9em;
      padding:15px 0;
      text-align:center;
      a { color:rgba(255,255,255,0.5);}
    }
  }
  
}