@charset "UTF-8";
@import "compass/utilities/text/replacement";
@import "client/common.css.scss";

.header {
	height: 55px;
	width: 100%;
    z-index:5;
}

div[layout="header"] h1 {
    cursor:pointer;
    width: 247px;
    height:45px;
    @include replace-text(image-url("header/logo.png"));
    float:left;
}

#logo {
	float:left;
	width:247px;
}

#profile {
	width:auto;
	float:right;
	height:54px;
}

.avatar_large {
	float:left;
	padding:2px;
	width:54px;
	height:54px;
	background-color: $ColorScreenPrimary;
	-webkit-border-radius:28px;
	-moz-border-radius:28px;
	border-radius:28px;
}

.avatar_large img {
	width:54px;
	height:54px;
	-webkit-border-radius:26px;
	-moz-border-radius:26px;
	border-radius:26px;
}

#user {
	margin:18px 0px 0px 10px;
	font-size:20px;
	font-weight:200;
	color:#ccc;
	float:left;
}

.arrow-down {
	float:left;
	cursor:pointer;
	margin-left:16px;
	margin-top:26px;
	width: 0; 
	height: 0; 
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid #fff;
}

.userinfo {
    cursor:pointer;
}

.userinfo ul {
    clear:both;
    background: scale-lightness($ColorUIBackground, 10%);
    display:none;
}
.userinfo li {
    display:block;
    margin: 2px;
    padding: 2px;
    background: scale-lightness($ColorUIBackground, 20%);
}


/*
div[layout="header"] h1 {
    width: 252px;
    height:47px;
    @include replace-text(image-url("logo.png"));
}
*/

/*.header h1 {*/
    /*margin:22px;*/
    /*font-size:300%;*/
    /*font-family: 'LatoLight', Arial, sans-serif;*/
/*}*/

/*
.userinfo {
    position:absolute;
    right:0px;
    top:0px;
    width: 266px;
    z-index:5;
}
.userinfo img.avatar {
    float:left;
}
.userinfo .username {
    float:left;
    margin-top: 18px;
    cursor: pointer;
}
.userinfo h2 {
    font-size:120%;
    font-weight: bold;
    float:left;
    margin-right:4px;
}
.userinfo .profile-toggle {
    display:inline-block;
}
.userinfo ul {
    clear:both;
    background: $color7;
    display:none;
}
.userinfo li {
    display:block;
    margin: 2px;
    padding: 2px;
    background: scale-lightness($color7, 10%);
}
*/

