﻿/* BASIC STYLINGS
============================================================================= */
body                            { padding-top:20px; }
pre                             { margin-bottom:20px; }
input[type="text"]#website { display: none; }
.container-section {padding-top: 0px;}
/* form styling */
#form-container                { 
    /*background:#2f2f2f; */
    /*background: #f0f0f0;*/
    background-color: #eee; 
    color: #333;
    margin-bottom:20px;
    border-radius:5px; 
}
#form-container .page-header   { 
    /*background:#151515; */
    background: #2f2f2f;
    margin:0; 
     padding:30px;
    border-top-left-radius:5px; border-top-right-radius:5px; 
    /*color: #f0f0f0;*/
}
.step-description {padding: 10px; background-color: #d2d2d2;}
.step-form {padding:30px;}
.org-checkbox {
    vertical-align: text-top;
}
#signup-form > .form-group {
    background-color: #d2d2d2;
}
/* numbered buttons */
#status-buttons                 { margin: 0px -20px }
#status-buttons a               { color: #333; min-width: 65px;  display:inline-block; font-size:12px; margin-right:10px; text-align:center; text-transform:uppercase; }
#status-buttons a:hover         { text-decoration:none; }
#status-buttons span            { border: 1px #333 solid ; display:block; height:30px; margin:0 auto 10px; padding-top:7px; width:30px; border-radius:50%; }
#view-container                 { min-height: 500px; overflow-y: auto; overflow-x: hidden; margin-top: -15px;}
/* active buttons */
#status-buttons a.active span   { background:#333; color: #2f2f2f; }
#status-buttons .overlay {position: absolute; height: 60px;width:90%}
@media (max-width: 500px) {
  .orgName h2 {
    font-size: 1.4em;
    margin-top: 5px;
    margin-bottom: 15px;
  }
  #form-container .page-header .logo {
    background-size: 100%;
    margin: auto;
  }
  #form-container .page-header .orgName {
    margin-left: 0px;
  }
}
/* ANIMATION STYLINGS
============================================================================= */
#signup-form {
    position: relative;
    min-height: 300px;
    overflow: hidden;
    border-radius: 0px 0px 5px 5px;
}

/* basic styling for entering and leaving */
/* left and right added to ensure full width */
#form-views.ng-enter,
#form-views.ng-leave      { position:absolute; left:30px; right:30px;
    transition:0.5s all ease; -moz-transition:0.5s all ease; -webkit-transition:0.5s all ease; 
}
    
/* enter animation */
#form-views.ng-enter            { 
    -webkit-animation:slideInRight 0.5s both ease;
	-moz-animation:slideInRight 0.5s both ease;
	animation:slideInRight 0.5s both ease; 
}

/* leave animation */
#form-views.ng-leave            { 
    -webkit-animation:slideOutLeft 0.5s both ease;
	-moz-animation:slideOutLeft 0.5s both ease;
	animation:slideOutLeft 0.5s both ease;   
}

/* ANIMATIONS
============================================================================= */
/* slide out to the left */
@keyframes slideOutLeft {
	to 		{ transform: translateX(-200%); }
}
@-moz-keyframes slideOutLeft {	
	to 		{ -moz-transform: translateX(-200%); }
}
@-webkit-keyframes slideOutLeft {
	to 		{ -webkit-transform: translateX(-200%); }
}

/* slide in from the right */
@keyframes slideInRight {
	from 	{ transform:translateX(200%); }
	to 		{ transform: translateX(0); }
}
@-moz-keyframes slideInRight {
	from 	{ -moz-transform:translateX(200%); }
	to 		{ -moz-transform: translateX(0); }
}
@-webkit-keyframes slideInRight {
	from 	{ -webkit-transform:translateX(200%); }
	to 		{ -webkit-transform: translateX(0); }
}