/* FRIEND LIST */

.profileFriendsList {
    display: inline-block;
    position: relative;
    width: 33.813em; /* 541px/16 = 33.813em */
    height: 17.188em; /* 275px/16 = 17.188em */
    background-color: #ffffff;
    border-radius: 0.375em; /* 6px/16 = 0.375em */
    -moz-border-radius: 0.375em; /* Old Firefox (3.6 to 15) */
    box-shadow: 0 0.063em 0.063em #888888; /* 1px/16 = 0.063em */
    overflow: hidden;
}

.friendListHeader {
    position: relative;
    height: 3.063em; /* 49px/16 = 3.063em */
    width: 100%;
    background-image: url('../img/web/common/friendsListHeadBar.png');
    background-repeat: repeat-x;
    background-position: left bottom;
    border-top-left-radius: 0.375em; /* 6px/16 = 0.375em */
    border-top-right-radius: 0.375em; /* 6px/16 = 0.375em */
    -moz-border-top-left-radius: 0.375em; /* Old Firefox (3.6 to 15) */
    -moz-border-top-right-radius: 0.375em; /* Old Firefox (3.6 to 15) */
}

.friendListTitle {
    float: left;
    font-family: futura_md_btmedium, Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 0.875em; /* 14px/16 = 0.875em */
    text-transform: uppercase;
    padding-left: 1.286em; /* 18px/14 = 1.286em */
    padding-top: 0.786em; /* 11px/14 = 0.786em */
}

#friendListPager {
    float: right;
    width: 3.75em; /* 60px/16 = 3.75em */
    height: 3.063em; /* 49px/16 = 3.063em */
}

#friendListPagerPrev, #friendListPagerNext {
    display: inline-block;
    position: relative;
    width: 0.688em; /* 11px/16 = 0.688em */
    height: 1em; /* 16px/16 = 1em */
    padding-top: 0.688em; /* 11px/16 = 0.688em */
    outline: none;
    cursor: pointer;
}

#friendListPagerPrev {
    background-image: url('../img/web/common/prevArrow.png');
    background-repeat: no-repeat;
    background-position: left bottom;
}

#friendListPagerNext {
    background-image: url('../img/web/common/nextArrow.png');
    background-repeat: no-repeat;
    background-position: left bottom;
    margin-left: 0.813em; /* 13px/16 = 0.813em */
}

.friendListContainer {
    overflow: hidden;
    margin-left: 1.25em; /* 20px/16 = 1.25em */
    height: 14.125em; /* 226px/16 = 14.125em */
}

.friendListScrollPane {
    display: block;
    width: 32em; /* 512px/16 = 32em */
    height: 14.125em; /* 226px/16 = 14.125em */
    overflow: hidden;
}

.noFriendList {
    font-family: futura_md_btmedium, Arial, Helvetica, sans-serif;
    color: #4a4a4a;
    font-size: 0.875em; /* 14px/16 = 0.875em */
    text-transform: uppercase;
    text-align: left;
}

.friendItem {
    display: inline-block;
    position: relative;
    float: left;
    text-align: center;
    padding-top: 0.625em; /* 10px/16 = 0.625em */
    padding-bottom: 0.625em; /* 10px/16 = 0.625em */
    margin-right: 1.25em; /* 20px/16 = 1.25em */
    width: 5em; /* 80px/16 = 5em */
    height: 4.5em; /* 72px/16 = 4.5em */
}

.friendItem img {
    width: 5em; /* 80px/16 = 5em */
    height: 4.188em; /* 67px/16 = 4.188em */
    border-radius: 0.375em; /* 6px/16 = 0.375em */
    -moz-border-radius: 0.375em; /* Old Firefox (3.6 to 15) */
    box-shadow: 0 0.063em 0.063em #888888; /* 1px/16 = 0.063em */
}

.friendInfo {
    display: block;
    position: absolute;
    /* width: 1.25em; /* 20px/16 = 1.25em */ 
    /* height: 1.313em; /* 21px/16 = 1.313em */
    width: 1.313em; /* 21px/16 = 1.313em */
    height: 1.375em; /* 22px/16 = 1.375em */
    bottom: 1.063em; /* 17px/16 = 1.063em */
    right: 0.188em; /* 3px/16 = 0.188em */
    /* background-image: url('../img/web/common/friendInfoIcon.png'); */
    background-image: url('../img/web/common/itemButtonUiFriendList.png');
    background-repeat: no-repeat;
    outline: none;
    cursor: pointer;
}

.friendMenu {
    display: inline-block;
    position: relative;
    width: 5em; /* 80px/16 = 5em */
    height: 1.375em; /* 22px/16 = 1.375em */
    text-align: center;
}

.friendMenuLayer {
    display: inline-block;
    position: relative;
    min-width: 1.875em; /* 30px/16 = 1.875em */
    height: 1.125em; /* 18px/16 = 1.125em */
    padding-left: 0.438em; /* 7px/16 = 0.438em */
    padding-right: 0.438em; /* 7px/16 = 0.438em */
    text-align: center;
    background: #161616; /* Non-CSS3 browsers */
    background-image: -moz-linear-gradient(top, #292929, #000000); /* OLD Firefox (3.6 to 15) */
    background-image: -ms-linear-gradient(top, #292929, #000000); /* For pre-releases of IE 10 */
    background-image: -webkit-linear-gradient(top, #292929, #000000); /* Webkit browsers (Chrome and Safari) */
    background-image: -o-linear-gradient(top, #292929, #000000); /* OLD Opera (11.1 to 12.0) */
    background-image: linear-gradient(to bottom, #292929, #000000);
    border-bottom-left-radius: 0.25em; /* 4px/16 = 0.25em */
    border-bottom-right-radius: 0.25em; /* 4px/16 = 0.25em */
    -moz-border-bottom-left-radius: 0.25em; /* Old Firefox (3.6 to 15) */
    -moz-border-bottom-right-radius: 0.25em; /* Old Firefox (3.6 to 15) */
    box-shadow: 0 0.063em 0.063em #888888; /* 1px/16 = 0.063em */
}

.friendMenuProfile {
    display: inline-block;
    position: relative;
    top: -0.125em; /* -2px/16 = -0.125em */
    width: 0.625em; /* 10px/16 = 0.625em */
    height: 0.688em; /* 11px/16 = 0.688em */
    background-image: url('../img/web/common/profileButtonUiFriendList.png');
    background-repeat: no-repeat;
    background-position: center center;
    outline: none;
    cursor: pointer;
    margin-left: 0.188em; /* 3px/16 = 0.188em */
    margin-right: 0.188em; /* 3px/16 = 0.188em */
}

.friendMenuDelete {
    display: inline-block;
    position: relative;
    top: -0.063em; /* -1px/16 = -0.063em */
    width: 0.688em; /* 11px/16 = 0.688em */
    height: 0.875em; /* 14px/16 = 0.875em */
    background-image: url('../img/web/common/unfriendshipButtonUiFriendList.png');
    background-repeat: no-repeat;
    background-position: center center;
    outline: none;
    cursor: pointer;
    margin-left: 0.188em; /* 3px/16 = 0.188em */
    margin-right: 0.188em; /* 3px/16 = 0.188em */
}

.spacerBottom {
    display: inline-block;
    position: relative;
    float: left;
    width: 0.063em; /* 1px/16 = 0.063em */
    height: 0.625em; /* 10px/16 = 0.625em */
}

.friendListRequestLayer {
    display: none;
    position: relative;
    top: -16.571em; /* -232px/14 = -16.571em */
    height: 16.571em; /* 232px/14 = 16.571em */
    width: 38.643em; /* 541px/14 = 38.643em */
    background: url('../img/web/common/blackTrasparent.png');
    padding-top: 4.714em; /* 66px/14 = 4.714em */
    font-family: futura_md_btmedium, Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 0.875em; /* 14px/16 = 0.875em */
    text-transform: uppercase;
}

.friendListRequestButtons {
    font-size: 1.143em; /* 16px/14 = 1.143em */
    padding-top: 1.429em; /* 20px/14 = 1.429em */
}

/* jScrollPane for friendList */

.friendListScrollPane .jspScrollable {
    overflow: visible !important;
}

.friendListScrollPane .jspContainer {
    /* overflow: hidden; */
    position: relative;
}

.friendListScrollPane .jspPane {
    position: absolute;
}

.friendListScrollPane .jspVerticalBar {
    position: absolute;
    top: 0;
    right: 0;
    width: 1em; /* 16px/16 = 1em */
    height: 100%;
    background: #ffffff;
}

.friendListScrollPane .jspHorizontalBar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1em; /* 16px/16 = 1em */
    background: #ffffff;
}

.friendListScrollPane .jspVerticalBar *, .friendListScrollPane .jspHorizontalBar * {
    margin: 0;
    padding: 0;
}

.friendListScrollPane .jspCap {
    display: none;
}

.friendListScrollPane .jspHorizontalBar .jspCap {
    float: left;
}

.friendListScrollPane .jspTrack {
    background: #c6bfb0;
    position: relative;
}

.friendListScrollPane .jspDrag {
    background: #ffffff;
    position: relative;
    top: 0;
    left: 0;
    cursor: pointer;
}

.friendListScrollPane .jspHorizontalBar .jspTrack, .friendListScrollPane .jspHorizontalBar .jspDrag {
    float: left;
    height: 100%;
}

.friendListScrollPane .jspArrow {
    background: #50506d;
    text-indent: -1250em; /* -20000px/16 = -1250em */
    display: block;
    cursor: pointer;
}

.friendListScrollPane .jspArrow.jspDisabled {
    cursor: default;
}

.friendListScrollPane .jspVerticalBar .jspArrow {
    height: 1em; /* 16px/16 = 1em */
}

.friendListScrollPane .jspHorizontalBar .jspArrow {
    width: 1em; /* 16px/16 = 1em */
    float: left;
    height: 100%;
}

.friendListScrollPane .jspVerticalBar .jspArrow:focus {
    outline: none;
}

.friendListScrollPane .jspCorner {
    background: #eeeef4;
    float: left;
    height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .friendListScrollPane .jspCorner {
    margin: 0 -0.188em 0 0; /* -3px/16 = -0.188em */
}

/* jScrollPane for friendList - lozenge theme */

.friendListScrollPane .jspHorizontalBar, .friendListScrollPane .jspVerticalBar {
    background: #ffffff;
}

.friendListScrollPane .jspTrack {
    position: relative;
    background: #c6bfb0;
    width: 0.5em; /* 8px/16 = 0.5em */
    left: 50%;
    margin-left: -0.25em; /* -4px/16 = -0.25em */
    -moz-border-radius: 0.625em; /* 10px/16 = 0.625em */
    -webkit-border-radius: 0.625em;
    border-radius: 0.625em;
}

.friendListScrollPane .jspVerticalBar {
    border-style: none;
    border-width: 0;
    padding: 0;
    box-shadow: none;
}

.friendListScrollPane .jspDrag {
    position: relative;
    background: #ffffff;
    border-style: none;
    border-width: 0;
    width: 0.375em; /* 6px/16 = 0.375em */
    left: 50%;
    margin-left: -0.188em; /* -3px/16 = -0.188em */
    -moz-border-radius: 0.625em; /* 10px/16 = 0.625em */
    -webkit-border-radius: 0.625em;
    border-radius: 0.625em;
}

.friendListScrollPane .jspTrack .jspActive, .friendListScrollPane .jspTrack .jspHover, .friendListScrollPane .jspDrag:hover {
    background: #f8f6f6;
}

.friendListScrollPane .jspArrow {
    background: url(../img/web/addons/jScrollPane/ui-icons_222222_256x240.png) no-repeat;
}

.jspVerticalBar>.jspActive, .jspArrow:hover {
    background-image: url('../img/web/addons/jScrollPane/ui-icons_cd0a0a_256x240.png');
}

.jspVerticalBar>.jspDisabled, .jspVerticalBar>.jspDisabled:hover, .jspHorizontalBar>.jspDisabled, .jspHorizontalBar>.jspDisabled:hover {
    background-color: transparent;
    background-image: url('../img/web/addons/jScrollPane/ui-icons_888888_256x240.png');
}

.friendListScrollPane .jspVerticalBar .jspArrow {
    height: 1.063em; /* 17px/16 = 1.063em */
}

.friendListScrollPane .jspHorizontalBar .jspArrow {
    width: 0.938em; /* 15px/16 = 0.938em */
}

.friendListScrollPane .jspArrowUp {
    background-position: -7.938em -12.875em !important; /* -127px/16 = -7.938em  -206px/16 = -12.875em */
}

.friendListScrollPane .jspArrowDown {
    background-position: -8.938em -12.875em !important; /* -143px/16 = -8.938em  -206px/16 = -12.875em */
}

.friendListScrollPane .jspArrowLeft {
    background-position: -6em 0 !important; /* -96px/16 = -6em */
}

.friendListScrollPane .jspArrowRight {
    background-position: -2em 0 !important; /* -32px/16 = -2em */
}

@media all and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    /* iPad portrait */
    
    .profileFriendsList {
        height: 30.625em; /* 490px/16 = 30.625em */
    }
    
    .friendListContainer {
        margin-left: 1.625em; /* 26px/16 = 1.625em */
	    height: 27.5em /* 440px/16 = 27.5em */
	}

    .friendListScrollPane {
	    height: 27.5em /* 440px/16 = 27.5em */
	}
	
	.friendItem {
	    margin-right: 1.375em; /* 22px/16 = 1.375em */
	}
}

@media all and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    /* iPad landscape */
    
    .profileFriendsList {
        height: 30.625em; /* 490px/16 = 30.625em */
    }
    
    .friendListContainer {
        margin-left: 1.625em; /* 26px/16 = 1.625em */
        height: 27.5em /* 440px/16 = 27.5em */
    }

    .friendListScrollPane {
        height: 27.5em /* 440px/16 = 27.5em */
    }
    
    .friendItem {
        margin-right: 1.375em; /* 22px/16 = 1.375em */
    }
}

@media all and (min-device-width: 1536px) and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPad 3 */
    
    .profileFriendsList {
        height: 30.625em; /* 490px/16 = 30.625em */
    }
    
    .friendListContainer {
        margin-left: 1.625em; /* 26px/16 = 1.625em */
        height: 27.5em /* 440px/16 = 27.5em */
    }

    .friendListScrollPane {
        height: 27.5em /* 440px/16 = 27.5em */
    }
    
    .friendItem {
        margin-right: 1.375em; /* 22px/16 = 1.375em */
    }
}