/*
*
*
*	When users are activated remove the TEMP dashboard styles
*
*
*/
.userContainer {
	margin-top: 90px;
	min-height: 80px;
	background-color: rgba(0,0,0,0.05);
	border-top: 1px solid #F5F5F5;
}

/* Make the user forms inline-blocks to give them a height */
.userContainer form {
	display: inline-block;
	width: 100%;
}
.userContainer .userLeft,
.userContainer .userRight {
	float: left;
	width: 50%;
}
.userContainer .userLeft p,
.userContainer .userRight p {
	margin-top: 28px;
	line-height: 20px;
}

/* Main action links */
.userContainer .userRight {
	text-align: right;
}
.userContainer .userRight a:first-child + a {
	margin-left: 24px;
}

/* User name or guest link */
.userContainer .userLeft p .icon {
	display: inline-block;
	float: left;
	width: 24px;
	height: 24px;
	overflow: hidden;
	background-image: url('../images/login-icon.png');
	background-position: top left;
}
.userContainer h3 {
	margin-top: 50px;
	margin-bottom: 50px;
}
body .userContainer .content .fullwidth.narrow img {
	margin-top: 60px;
	margin-bottom: 20px;
}
body .userContainer .content .fullwidth.narrow .button {
	margin: 60px 6px 0 6px;
}

/* User action hover */
.userContainer .userDetails {
	position: relative;
}
.userContainer .userAction {
	position: absolute;
	top: 30px;
	left: 0;
	width: 120px;
	height: 90px;
	background: #FFF;
	border: 1px solid #F5F5F5;
	box-shadow: 0px 3px 10px -1px rgba(0, 0, 0, 0.2);
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}
.userContainer .userAction .notch {
	position: absolute;
	top: -10px;
	left: 50px;
	width: 0; 
	height: 0; 
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #FFF;
}

/* UserAction hover */
.userContainer .userDetails.open .userAction,
.userContainer .userDetails:hover .userAction {
	opacity: 1;
	visibility: visible;
	z-index: 200;
}
.userContainer .userAction p {
	margin: 8px;
	width: 100%;
}
.userContainer .userAction p a:hover {
	color: #F58220;
	text-decoration: none;
}

/* USER FORM STYLES ARE IN STYLE.CSS */

/*
*
*
*	CSS USER STATE DISPLAY
*
*
*/

/* Turn off all user content containers */
body .userContainer .content .fullwidth {
	height: 0;
	opacity: 0;
	visibility: hidden;
	border: none;
	overflow: hidden;
	-webkit-transition: opacity 2s, height 1s;
	-moz-transition: opacity 2s, height 1s;
	-o-transition: opacity 2s, height 1s;
	transition: opacity 2s, height 1s;
}

/* Turn on content conatiners based on state */
body.joining .userContainer .content.joining .fullwidth,
body.joined .userContainer .content.joined .fullwidth,
body.authenticating .userContainer .content.authenticating .fullwidth,
body.authenticated .userContainer .content.authenticated .fullwidth,
body.setup .userContainer .content.setup .fullwidth,
body.changing .userContainer .content.changing .fullwidth,
body.changed .userContainer .content.changed .fullwidth,
body.resetting .userContainer .content.resetting .fullwidth,
body.resetted .userContainer .content.resetted .fullwidth,
body.editing .userContainer .content.editing .fullwidth,
body.edited .userContainer .content.edited .fullwidth,
body.identifying .userContainer .content.identifying .fullwidth,
body.identified .userContainer .content.identified .fullwidth,
body.helping .userContainer .content.helping .fullwidth,
body.helped .userContainer .content.helped .fullwidth,
body.leaving .userContainer .content.leaving .fullwidth,
body.left .userContainer .content.left .fullwidth {
	height: auto;
	opacity: 1;
	visibility: visible;
	overflow: visible;
	margin-top: 66px;
	margin-bottom: 66px;
	border-top: 1px solid #DCDDDE;
}

/*
*
*	Logged in user style
*
*/
body.userAuthenticated .userContainer .content.authenticating .fullwidth {
	height: 0;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	margin-bottom: 0;
}
.navigationRight li a .icon.loggedIn {
	display: inline-block;
	float: left;
	width: 24px;
	height: 24px;
	background-image: url('../images/login-icon.png');
	background-position: top left;
	overflow: hidden;
}

/* Any changes here need to be updated in devicestyles.css */

/* User heights */
body.joining .userContainer .content.joining .fullwidth {
	/*height: 880px;*/
}
body.joined .userContainer .content.joined .fullwidth {
	/*height: 606px;*/
}
body.authenticating .userContainer .content.authenticating .fullwidth {
	/*height: 430px;*/
}
body.authenticated .userContainer .content.authenticated .fullwidth {
	
}
body.changing .userContainer .content.changing .fullwidth {
	height: 532px;
}
body.changed .userContainer .content.changed .fullwidth {
	height: 556px;
}
body.resetting .userContainer .content.resetting .fullwidth {
	
}
body.resetted .userContainer .content.resetted .fullwidth {
	
}
body.editing .userContainer .content.editing .fullwidth {
	height: 1174px;
}
body.edited .userContainer .content.edited .fullwidth {
	height: 578px;
}
body.identifying .userContainer .content.identifying .fullwidth {
	height: 246px;
}
body.identified .userContainer .content.identified .fullwidth {
	
}
body.helped .userContainer .content.helped .fullwidth {
	
}
body.leaving .userContainer .content.leaving .fullwidth {
	height: 270px;
}
body.left .userContainer .content.left .fullwidth {
	height: 600px;
}

body.authenticated .userContainer .content.authenticated .fullwidth {
	margin-bottom: 0;
	height: 0;
	border-top: none;
}
body.left .userContainer .content.left .fullwidth h3,
body.edited .userContainer .content.edited .fullwidth h3,
body.authenticated .userContainer .content.authenticated .fullwidth h3 {
	margin-top: -60px;
}