@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed);
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font: 100%/1.5 Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
	color: #333;
	background-color: #b6def2;
	-webkit-font-smoothing: antialiased;

}

#wrapper {
}

#wrapper {
  position: fixed; 
  top: 0; 
  left: 0; 
	
  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100%;
}

#wrapper #bg {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 100%;
    width: auto;
    height: auto;
  min-height: 50%;
}

body {
    width: 100%;
    height: 100%;
    position: fixed;
}

.promo {
    margin: 0px;
    width: 480px;
	text-align: center;
    background-color:rgb(255,255,255);
    background-color:rgba(255,255,255,0.8);
    padding: 30px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    top: -30px;
    margin-left: 50%;
    left: -240px;
    position: relative;
    -moz-box-shadow: 0px 0px 40px #000000;
    -webkit-box-shadow: 0px 0px 40px #000000;
    box-shadow: 0px 0px 40px #000000;
}

.hidden {
    display: none;
}

p {
    background: rgba(255,255,255,0.3);
    color: #333;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #666;
}

#credentialsTable {
    text-align: left;
    width: 400px;
}
input[type="text"]:focus,input[type="password"]:focus {
    outline: none;
}

.promo em {
	font-family: "Segoe UI Light";
	display: inline-block;
	background-color: #b6def2;
	color: #194c66;
	width: 4.5em;
	height: 4.5em;
	padding: 1.5em;
	border-radius: 50%;
	position: relative;
	
	margin: -1.5em -1em;
}

.logo {
    margin-left: -20px;
}

h1 {
    font-family: "Segoe UI Light";
    color: #333;
}

.butt {
	padding: 1em 3em;
	background-color: #f6f6f6;
	border-radius: 4px;
	color: #222;
	text-decoration: none;
	font-weight: 700;
	text-transform: uppercase;
	font-size: .75em;
	line-height: 2;
	display: inline-block;
	letter-spacing: .1em;
}

.promo .butt {
	min-width: 245px;
}

	.primary.butt {
		background-color: #eb7966;
		color: #fff;
	}

		.primary.butt:hover {
			background-color: #d15a45;
		}

	.secondary.butt {
		background-color: #194c66;
		color: #fff;
	}

		.secondary.butt:hover {
			background-color: #0b374d;
		}


body:before 
{ 
   content: "";
   position: fixed;
   top: -10px;
   left: 0;
   width: 100%;
   height: 10px;
   
   -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   }

    #input {
        position: relative;
        background: white;
        border: 1px solid #666;
        color: green;
        width: 300px;
    }

    .letterContainer {
        display: inline;
        white-space: nowrap;
    }

    .letterStatic {
        display: inline;
    }

    .letterAnimTop {
        display: inline;
        position: absolute;
        -webkit-animation: dropTop .1s ease;
        -moz-animation: dropTop .1s ease;

    }

    .letterAnimBottom {
        display: inline;
        position: absolute;
        -webkit-animation: dropBottom .1s ease;
        -moz-animation: dropBottom .1s ease;
    }

    .blink {
        position: static;
        top: -5px;
        -webkit-animation: blink 0.3s ease 0 infinite alternate;
        -moz-animation: blink 0.3s ease 0 infinite alternate;
    }

    @-moz-keyframes blink {
        from { opacity: 0 }
        to { opacity: 1 }
    }

    @-webkit-keyframes blink {
        from { opacity: 0 }
        to { opacity: 1 }
    }

    @-moz-keyframes dropTop {
        from {
            -moz-transform: translateX(0) translateY(-20px) translateZ(20px) rotateX(90deg);
            transform: translateX(0) translateY(-20px) translateZ(20px) rotateX(90deg);
        }

        to {
            -moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg);
            transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg);
        }
    }

    @-moz-keyframes dropBottom {
        from {
            -moz-transform: translateY(20px) translateZ(20px) rotateX(-90deg);
            transform: translateY(20px) translateZ(20px) rotateX(-90deg);
        }

        to {
            -moz-transform: rotateX(0deg);
            transform: rotateX(0deg);
        }
    }

    @-webkit-keyframes dropTop {
        from { -webkit-transform: translateX(0) translateY(-20px) translateZ(20px) rotateX(90deg); }
        to { -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg); }
}

    @-webkit-keyframes dropBottom {
        from { -webkit-transform: translateY(20px) translateZ(20px) rotateX(-90deg); }
        to { -webkit-transform: rotateX(0deg); }
    }

    #errorBox {
        background: rgba(215, 44, 44, 0.4);
        border: 1px dashed #333;
        padding: 3px 6px;
        color: #333;
    }

    button {
	position:relative;
	border:0;
	margin:0;
	padding:0;
	cursor:pointer;
	font-size:1rem;
	font-weight:bold;
	color:rgba(0,0,0,0);
	background:transparent;
	border-radius:.25rem;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
}
    #wrapper {display:table;width: 100%;height: 100%;}
    #cell {display:table-cell; vertical-align:middle;text-align: center;}
button,
button:after,
button:before {
	padding:4px 20px;
	-webkit-transition:-webkit-transform 0.75s,background-color .125s;
	-moz-transition:-moz-transform 0.75s,background-color .125s;
	-ms-transition:-ms-transform 0.75s,background-color .125s;
	transition:transform 0.75s,background-color .125s;
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	-ms-transform-style:preserve-3d;
	transform-style:preserve-3d;
}

button:after,
button:before {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	border-radius:.25rem;
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	backface-visibility:hidden;

}

button:before {
	
	color:#fff;
	background-color:#3e87ec;
	content:attr(data-label);
}

button:after {
	
	background-color:#999;
	background-repeat:no-repeat;
	background-position:center center;
	background-image:url(data:image/gif;base64,R0lGODlhEAAQAPIAAJmZmf///7CwsOPj4////9fX18rKysPDwyH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQACgABACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkEAAoAAgAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkEAAoAAwAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkEAAoABAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQACgAFACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQACgAGACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAAKAAcALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==);
	-webkit-transform:rotateX(180deg);
	-moz-transform:rotateX(180deg);
	-ms-transform:rotateX(180deg);
	transform:rotateX(180deg);
	content:'';
}

button:active:before {
	background-color:#3571c8;
}

button.loading {
	-webkit-transform:rotateX(180deg);
	-moz-transform:rotateX(180deg);
	-ms-transform:rotateX(180deg);
	transform:rotateX(180deg);
}

/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
  display: block;
  width: 32px;
  height: 32px;
  font-size: 32px;
  float: left;
}

.download {
  vertical-align: top;
  line-height: 28px;
  border-radius: 4px;
  box-shadow: #439230 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  text-align: center;
    padding: 10px;
  cursor: pointer;
  text-shadow: 0 1px 1px rgba(0,0,0,0.4);
  -webkit-transition: 0.1s linear;
  -moz-transition: 0.1s linear;
  -ms-transition: 0.1s linear;
  -o-transition: 0.1s linear;
  transition: 0.1s linear;

  background: #82cc5d;
  background: -moz-linear-gradient(top,  #82cc5d 0%, #53b73c 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82cc5d), color-stop(100%,#53b73c));
  background: -webkit-linear-gradient(top,  #82cc5d 0%,#53b73c 100%);
  background: -ms-linear-gradient(top,  #82cc5d 0%,#53b73c 100%);
  background: linear-gradient(to bottom,  #82cc5d 0%,#53b73c 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82cc5d', endColorstr='#53b73c',GradientType=0 );
  border: 1px solid #429E34;
}

.download:hover {
  box-shadow: #439230 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;

  background: #99cc80;
  background: -moz-linear-gradient(top,  #99cc80 0%, #53b73c 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#99cc80), color-stop(100%,#53b73c));
  background: -webkit-linear-gradient(top,  #99cc80 0%,#53b73c 100%);
  background: -ms-linear-gradient(top,  #99cc80 0%,#53b73c 100%);
  background: linear-gradient(to bottom,  #99cc80 0%,#53b73c 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cc80', endColorstr='#53b73c',GradientType=0 );
}

.download:active {
  box-shadow: #439230 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;

  position: relative;
  top: 5px;
}

.download span {
  margin-left: 5px;
  color: #f0f0f0;
  font-weight: normal;
  font-size: 12px;
  text-shadow: 0 none;
}

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

#notification {
    display: none;
    position: fixed;
    cursor: pointer;
    width: 100%;
    background: rgb(255,255,255);
    background: rgba(255,255,255,0.4);
    border: 1px solid #666;
    text-align: center;
    border-top: 2px solid #FFF;
    
    left: 0px;
    padding: 10px;
}

.validate_error {
    background: rgb(255, 118, 118) !IMPORTANT;
    background: rgba(255, 118, 118, 0.4) !IMPORTANT;
    color: white;
}

input { 
	width: 420px; 
	margin-bottom: 10px;
    background: rgb(230, 230, 230);
	background: rgba(170,170,170,0.3);
	border: none;
	outline: none;
	padding: 10px;
	font-size: 13px;
	color: #333;
    border: 1px solid rgb(0, 0, 0);
	border: 1px solid rgba(0,0,0,0.3);
	border-radius: 4px;
    box-shadow: inset 0 -5px 45px rgb(100,100,100), 0 1px 1px rgb(255,255,255);
	box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
	-webkit-transition: box-shadow .5s ease;
	-moz-transition: box-shadow .5s ease;
	-o-transition: box-shadow .5s ease;
	-ms-transition: box-shadow .5s ease;
	transition: box-shadow .5s ease;
}
input:focus {
    box-shadow: inset 0 -5px 45px rgb(255,255,255), 0 1px 1px rgb(255,255,255);
     box-shadow: inset 0 -5px 45px rgba(255,255,255,0.4), 0 1px 1px rgba(255,255,255,0.2);
}