/**
 * User Widget Styling
 *
 * Define UI styling for the User Widget
 *
 * @package    Nemo Framework
 * @author     Neonfire Development <webmaster@neonfire.co.za>
 * @copyright  2009-2020 Neonfire Development
 * @version    1.00.00
 */
.slideout-tab, .slideout-inner {
	position: fixed;
	background: #cfc;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.slideout-tab {
	padding: 6px;
	text-align: center;
	border-radius: 0 0 5px 5px;
	border-left: 1px #090 solid;
	border-right: 1px #090 solid;
	border-bottom: 1px #090 solid;
	z-index:10;
	right: 5px;
}

.slideout-label {
	font-weight: bold;
	padding: 0 10px;
}

.slideout-inner {
	width: 300px;
	padding: 10px;
	text-align: left;
	border-left: 1px #090 solid;
	border-right: 1px #090 solid;
	border-bottom: 1px #090 solid;
	border-radius: 0 0 0 5px;
	right: 5px;
}


.slideable-top {
	opacity: 0.8;
}

.expanded-top {
	border: none;
}

.slideable-top:hover {
	opacity: 1;
	/*border: none;*/
	background-color: #090;
}

.slideable-top .ui-icon-triangle-1-n {
	display: none;
}

.slideable-top:hover .ui-icon-triangle-1-s {
	display: none;
}

.slideable-top:hover .ui-icon-triangle-1-n {
	display: inline-block;
}

/* User widget height - allow user switch */
.slideable-top.switch-user .slideout-inner {
	height: 200px;
}

.slideable-top.switch-user .slideout-inner {
	top: -200px;
}

.expanded-top.switch-user,
.slideable-top.switch-user:hover {
	top: 200px;
}

.slideable-top.switch-user,
.slideable-top.switch-user:hover .slideout-inner,
.expanded-top.switch-user .slideout-inner {
	top: 0;
}

/* User widget height - no user switch */
.slideable-top.switch-none .slideout-inner {
	height: 120px;
}

.slideable-top.switch-none .slideout-inner {
	top: -120px;
}

.expanded-top.switch-none,
.slideable-top.switch-none:hover {
	top: 120px;
}

.slideable-top.switch-none,
.slideable-top.switch-none:hover .slideout-inner,
.expanded-top.switch-none .slideout-inner {
	top: 0;
}

/*
	Expanded styling for devices over 800 pixels in width
*/
@media only screen and (max-width: 799px)
{
	.slideout-tab {
		right: 60px;
	}
}