@CHARSET "UTF-8";
@IMPORT url(../common/albums-list.css);
@IMPORT url(../common/playlist.css);
@IMPORT url(../common/user-panel.css);
/**
 * @gogoyoko // Go
 *
 * @Common Forms / Styles
 * =Wire
 * =Info
 *
 -------------------------------------------------------------*/



        /**
         * @user-head
         */
        ul.user-head{ display: block; padding: 0 }
        ul.user-head #userheadDisplayName{padding: 2px 0px;}
        ul.user-head li.follow-action{ margin: 0px 10px 10px 20px; }
        ul.user-head li.follow-hint{ color: #ff0000; }


            /* user recommendation */
            div#user-album-recommendation{ margin: 1px 0px;  padding: 0px 0px 30px 0px; border-bottom: 1px solid rgb(30, 30, 30); }
            div#user-artist-recommendation{ margin: 0px 0px 5px 0px;  padding: 5px 0px 30px 0px; border-bottom: 1px solid rgb(30, 30, 30); }

            .recommend-heading{ float: left; font-size: 108%; font-weight: bold; padding: 0px 0px 6px 0px; border-bottom: 1px solid rgb(30, 30, 30); width: 100%; margin-bottom: 7px; }
            .recommended-list{  clear: both; display: inline; line-height: 14px; font-size: 93%; padding: 5px 0px;  list-style-type: none; }
            .recommended-item{ border-bottom: 1px solid rgb(20, 20, 20); padding: 5px 0px 5px 0px; }
            .recommended-thumb{ float: left; padding: 0px 10px 0px 0px; height: 35px; width: 35px; }
            .recommended-metadata{ float: left; width: 105px; margin-top: -2px; }
            .recommended-action{ float: right; padding: 1px 0px;}
            a.recommended-following { color: #666666 !important; line-height: 18px;}
            a:hover.recommended-following { color: rgb(255,255,255) !important;}

                    
            /**
             * =Recommendation action
             */
            a.close-rec{
                display:block;
                height:9px;
                width:9px;
                text-indent:-9999px;/*Hide Text, keep for SEO*/
                overflow: hidden;
                background-image: url(/gfx/icon-rec.png);
                background-repeat:no-repeat;
            }
            a.close-rec{ background-position: -0px -0px; }
            a:hover.close-rec{ background-position:  -0px -19px; }


            div#user-followers-collage{ margin: 0px;  padding: 0px 0px 30px 0px; border-bottom: 1px solid rgb(30, 30, 30);  }
            div#user-followers-collage .followers-heading{ float: left; font-size: 108%; font-weight: bold; }
            div#user-followers-collage .followers-count{ float: left; font-size: 85%; margin: 1px 0px 7px 5px; }

            div#user-followings-collage{ margin: 5px 0px; padding: 0px 0px 20px 0px;  border-bottom: 1px solid rgb(30, 30, 30); }
            div#user-followings-collage .followings-heading{ float: left; font-size: 108%; font-weight: bold; }
            div#user-followings-collage .followings-count{ float: left; font-size: 85%;  margin: 2px 0px 7px 5px; }

                
            ul.follow-collage{ padding: 5px 0px;  margin: 0px 0px 10px 0px; list-style-type: none; clear: both;  border-top: 1px solid rgb(30, 30, 30); }
            ul.follow-collage li{ float: left; padding: 5px 13px 5px 0px;  }
            ul.follow-collage li img{ height: 30px; width: 30px; }
            ul.follow-collage .lastCollage{ float: left; padding: 5px 0px 5px 0px; }
            .following-link, .follower-link{ font-size: 93%; }


        /**
        * Profile Tab container
        */
        .tabContainer{ margin: 10px; }

	/**
	 * @tab-view-seperator
	 */
	.tab .view-seperator{ border-bottom: 1px solid rgb(40,40,40); margin: 10px 0px 10px 0px; }

	/**
	 * @i-like
	 */
	a.i-like{ margin-top: 5px; margin-left: 10px; }

        /* quick style for album tab */
        .album-list{ margin: 10px 0px !important;}
        .album-list li{ margin: 10px 10px 40px 11px !important;}

    /**
    * = Profile-Information
    -------------------------------------------------------------*/

        .info-age{ margin: 5px 0px 5px 0px; }
        .info-location{ margin: 5px 0px 20px 0px; }
        .info-email{ margin: 0px 0px 20px 0px;}
        .info-websites{ font-size: 108%; line-height: 20px;  }

        .info-favmusic-heading{ font-weight: bold; line-height: 20px; }
        .info-favmusic-list{ font-size: 85%; line-height: 20px; }


        div#info-edit-settings{ position: absolute; z-index: 999; opacity: 0.8; filter: alpha(opacity=80); background: rgb(0,0,0); height: 30px; width: 110px;  cursor: pointer;  margin-left: 272px; margin-top: -13px; }
        div#info-edit-settings a{ margin: 0px; display: block; padding: 8px 5px 0px 5px; cursor: pointer; font-size: 93%;  }
        div#info-edit-settings a:hover{color: rgb(255,255,255) !important;  }
        div#info-edit-settings .edit-settings{ margin: 0px 0px 0px 5px; }


    /**
    * = Profile-Wire
    -------------------------------------------------------------*/

        /**
         * @filter
         */
        div#filter-section{ background: rgb(22,22,22); border-top: 1px solid rgb(38,38,38); border-bottom: 1px solid rgb(25,25,25); padding: 8px 0px 6px 5px; clear: both; margin: 0px 0px 10px 0px; font-size: 93%; }
        div#filter-section .filter-list{  list-style-type: none; }
        div#filter-section .filter-list li { display: inline; }
        div#filter-section .filter-list a { color: rgb(204,204,204); padding: 2px 7px 3px 7px; }
        div#filter-section .filter-list a:hover { color: rgb(255,255,255); background-color: #000000; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; }
        div#filter-section .filter-selected { color: rgb(255,255,255); background-color: #000000; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; }


	.tab #wire{ }
        .tab #wire div span{ display: inline-block; margin: 0 2px; }
        .tab #wire form textarea{  width: 330px; margin: 0 20px 5px 0px; -moz-border-radius:5px; -webkit-border-radius:5px; font-family: Helvetica, Arial, sans-serif; font-size: 93%;}
        .tab #wire form .comment-char-counter {  margin: 0px 20px 0 0px; color: rgb(102,102,102); font-size: 85%; font-style: italic; float: left; }
        .tab #wire form .charcounter {  display: none; }
        .tab #wire form .comment-submit {  float: right; }
        .tab #wire div input { float: right; margin: 10px 0; }

            /**
            *@wire-listing
            */
            .tab #wire ul{ margin: 0; padding: 0; list-style-type: none;  line-height: 16px;  }
                .tab .wire-avatar{ float: left;  display: block; width: 40px; }
                .tab #wire .your-comment{color:rgb(244,140,36);}


		/**
		 * @comments and status update
		 */
                .tab #wire ul li.comment-item{ margin-top: 10px; padding: 0px; border-bottom: 1px solid rgb( 30, 30, 30 );  }
                .tab #wire ul ul.content{ float: left; margin: 0; padding: 0 0 10px 0px; width: 290px; }
                .tab #wire ul ul.content li.status{ padding: 5px 0; width: 275px; font-size: 93%; word-wrap: break-word; }
                .tab #wire ul ul.content li.timespan{ color: rgb(102,102,102); font-size: 85%; }
                .tab #wire ul ul.controls { float: right; margin: 0; padding: 0; }
                .tab #wire ul ul.controls li{ float: left; }
                .tab #wire ul ul.controls li.hint-delete{ color: rgb(102,102,102); margin: -2px 5px 0; display: none;}
                .tab #wire ul ul.controls li.hint-delete-show{ color: rgb(102,102,102); margin: -2px 5px 0; display: inline; }



            #wire .song-heart-heading{ margin: 5px 0px 5px 0px; }

            #wire .songs{  list-style-type:none; font-size: 85%; margin: 0px;padding: 10px; background: #171717; float: right; }
            #wire .song{ background: rgb(0,0,0); }
            #wire .song:hover { background: #1f2420 !important; color: rgb(255,255,255); }
            
            #wire .playlist-text{ width: 210px;  }
            .sub-follow-list{ font-size: 93%; }

	/**
	 * @follwings
	 */
        #wire .follow-notification{ margin-top: 10px; padding: 0px; border-bottom: 1px solid rgb( 30, 30, 30 );  }

        .follow-icon{ 
        	float: left; width: 40px; 
        	background: url(../../gfx/icon_plus.png) no-repeat 13px center;
        	text-indent: -9999px;
        	overflow: hidden;
        }
        .follow-content{ float: left; width: 320px; }
        

	/**
	 * @album review
	 */
	.tab #wire ul li.albumreview-item{ margin-top: 10px; padding: 0px; border-bottom: 1px solid rgb( 30, 30, 30 );  }
	.tab #wire ul li.albumreview-item .status{ }
	.tab #wire ul li.albumreview-item .status .albumreview-album{ float: left; width: 60px; text-align: center; }
	.tab #wire ul li.albumreview-item .status .albumreview-album span{ 
		display: inline-block;
		border-radius:7px;
		-moz-border-radius:7px;
		-webkit-border-radius:7px;
		padding: 2px 5px;
		margin: 5px 0;
		color: white;
		text-shadow: rgb(70,70,70) 1px 1px;
	}
	.tab #wire ul li.albumreview-item .status .albumreview-review{ float: right; width: 205px; }
	.tab #wire ul li.albumreview-item .status .albumreview-review blockquote{ margin:0 ; padding: 0; color: rgb(102,102,102); }
	.tab #wire ul li.albumreview-item .status .albumreview-review blockquote:before{ content: '"';}
	.tab #wire ul li.albumreview-item .status .albumreview-review blockquote:after{ content: '"';}


	.tab #wire ul li.albumreview-item .status .albumreview-album span.albumreview10{ background-color: rgb(79,186,98); }
	.tab #wire ul li.albumreview-item .status .albumreview-album span.albumreview9{ background-color: rgb(88,182,96); }
	.tab #wire ul li.albumreview-item .status .albumreview-album span.albumreview8{ background-color: rgb(100,177,89); }
	.tab #wire ul li.albumreview-item .status .albumreview-album span.albumreview7{ background-color: rgb(116,171,82); }
	.tab #wire ul li.albumreview-item .status .albumreview-album span.albumreview6{ background-color: rgb(135,165,74); }
	.tab #wire ul li.albumreview-item .status .albumreview-album span.albumreview5{ background-color: rgb(154,157,66); }
	.tab #wire ul li.albumreview-item .status .albumreview-album span.albumreview4{ background-color: rgb(172,151,58); }
	.tab #wire ul li.albumreview-item .status .albumreview-album span.albumreview3{ background-color: rgb(191,145,51); }
	.tab #wire ul li.albumreview-item .status .albumreview-album span.albumreview2{ background-color: rgb(207,139,43); }
	.tab #wire ul li.albumreview-item .status .albumreview-album span.albumreview1{ background-color: rgb(219,135,37); }
	.tab #wire ul li.albumreview-item .status .albumreview-album span.albumreview0{ background-color: rgb(204,204,204); }



        /**
        * @wire-more
        */
	a.wire-more{
		display: block;
		width: 100px;
		margin: 20px auto;
                background: rgb(25,25,25);
                padding:10px 35px 10px 35px;
		padding: 10px;
		border-radius:5px;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
		text-align: center;
	}
        .wire-more:hover{
            background: rgb(35,35,35);
            color: rgb(255,255,255) !important;
        }
	a.wire-more-loading{
		display: block;
		width: 100px;
		margin: 20px auto;
		background-color: #121212;
		background-image:url(../../gfx/icon-loading.gif);
		background-repeat: no-repeat;
		background-position: center 1px;
                text-indent:-9999px;/*Hide Text, keep for SEO*/
		padding: 10px;
		border-radius:5px;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
		text-align: center;
	}

    /**
    * = Profile-People
    -------------------------------------------------------------*/

         /**
	 * @people menu
	 */
	ul.people-type-select{ display: block; margin: 20px 0px 30px 0px ; }
        ul.people-type-select a { color: rgb(153,153,153); background: rgb(0,0,0); padding: 10px 20px 10px 20px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; }
        ul.people-type-select a:hover { color: rgb(255,255,255); padding: 10px;  padding: 10px 20px 10px 20px; }
            
        ul.people-type-select .separator{ padding: 0 5px; }
        ul.people-type-select .selected { color: rgb(255,255,255); background: rgb(27,47,27); }


         /**
         * @view selection
         */
         div#option-box{ background: rgb(22,22,22); border-top: 1px solid rgb(38,38,38); padding: 8px 0px 20px 15px; clear: both; }
         div#option-box .view-select{ float: right; }


        /**
        * @people List View
        */
        ul.display{  margin: 0px; padding: 0px; font-size: 93%; list-style-type: none;}
        ul.display li.people-item {  border-bottom: 1px solid rgb(30,30,30); padding: 10px 0px; }
        /* People List View */
        ul.display li .people-avatar{ float: left; position: relative; padding: 0px; margin: 0px; width: 60px;  }
        ul.display li .people-content{ float: left; width: 270px; margin: 0px 0px 0px 10px; padding: 0px; line-height: 16px; }
        ul.display li .people-content .user-status { margin: 0; padding: 5px 5px 5px 0px; font-size: 93%; word-wrap: break-word; }
        ul.display li .people-content .user-status-time { color: rgb(102,102,102); font-size: 93%; margin: 5px 0px 0px 0px;}
        ul.display li .people-action{ float: right; padding-right: 10px; }

        /* People Thumb View */
        ul.thumb_view li.people-item{ width: 60px; float: left; padding: 7px 14px 7px 0px; border: none;  }
        ul.thumb_view li.lastAvatar{ width: 60px; float: left; padding: 6px 2px 6px 0px !important; }
        ul.thumb_view li .people-content{ display: none; }
        ul.thumb_view li .people-action{ display: none; }

        /* People Empty States */
        ul.display li.people-empty-state{ border: none; }
        ul.display li.people-empty-state .people-empty-heading{ font-size: 116%; text-align: center;}
        ul.display li.people-empty-state .people-empty-text{ font-size: 100%; text-align: center; line-height: 20px; padding: 5px 40px 10px 40px; }
        ul.display li.people-empty-state .people-empty-search-heading { text-align: center; }
        ul.display li.people-empty-state .people-empty-search-body{ text-align: center; }
        /* search for the empty states */
        ul.display li.people-empty-state div#gogoyoko_people_search{ padding: 0px 0px 0px 61px; }
        ul.display li.people-empty-state div#gogoyoko_people_search input { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:transparent url(/../gfx/search-people.png) no-repeat scroll center top; border:medium none; font-size:11px; height:16px; line-height:16px; margin:0px -11px 0px 7px; padding:4px 8px 5px 22px; width:202px; outline-style:none; outline-width:0px; }


        /**
         * Views Icon
         *
	 * =tabular-view
	 * =collage-view
	 */
	a.tabular,
	a.collage,
        a.collage-set,
        a.tabular-set{
            display:block;
            height:11px;
            text-indent:-9999px;/*Hide Text, keep for SEO*/
            width:11px;
            background-image: url(/../gfx/icon-view.png);
            background-repeat:no-repeat;
            float: right;
            padding: 0px 5px 0px 5px;
	}
	a.tabular{ background-position: -6px -6px; }
	a:hover.tabular{ background-position: -6px -28px; }
	a.collage{ background-position: -6px -94px; }
	a:hover.collage{ background-position: -6px -116px; }
        a.collage-set{ background-position: -6px -116px; }
	a.tabular-set{ background-position: -6px -28px; }



        /**
        *@profile-tabs
        */
        body.theme-default .ui-tabs .ui-tabs-nav li {
            position: relative;
            float: left;
            border-bottom-width: 0 !important;
            margin: 0px .2em -1px 0;
            padding: 8px 12px 0px 12px; 
            border-radius:0px;
            -moz-border-radius:0px;
            -webkit-border-top-left-radius:0px;
            -webkit-border-top-right-radius:0px;
       }
      
       
    /**
     * @albums-list specific stuff
     */
    div#albums li.albums-list-item{ height: 100px;width: 115px;text-align: center; }
    div#albums li.albums-list-item ul.albums-info{ text-align: left; left: 77px; } 



	/**
	 * The dialog signup-form that is used for fb-connect
	 *
	 * @loginform
	 */

        /**@wrapper for footer pages */
        div#fb-wrapper {
            background-color:#0C0C0C !important;
            background-repeat:repeat-x;
            border:1px solid #272727;
            border-radius:10px;
            -moz-border-radius:10px;
            -webkit-border-radius:10px;
            padding: 10px 30px 10px 30px;
        }

	#modal-dialog-fbconnect{
		margin: auto;
	}
	#modal-dialog-fbconnect:after{
		content: ".";
		display: block;
		clear: both;
		visibility: hidden;
		line-height: 0;
		height: 0;
	}
	#modal-dialog-fbconnect{display: inline-block;}
	html[xmlns] #modal-dialog-fbconnect{display: block;}
	* html 	#modal-dialog-fbconnect{height: 1%;}

	#modal-dialog-fbconnect hr{
		background:none;
		border:none;
		border-bottom:1px solid rgb(42,42,42);
		margin: 20px 0px 0px 0px !important;
		padding: 0;
	}
	#modal-dialog-fbconnect p{
		margin-bottom: 25px;
	}
        #modal-dialog-fbconnect h1{ float: left; font-size: 16px; }
        #modal-dialog-fbconnect .fb-icon{ float: right; }
        #modal-dialog-fbconnect .fb-proceed-section{ margin: 15px 0px 5px 0px; font-weight: bold; }
        #modal-dialog-fbconnect .fb-proceed-section a{ color: #81CCB5; }
        #modal-dialog-fbconnect .fb-proceed-section a:hover{ color: #FFFfff; }
        #modal-dialog-fbconnect #fb-validation{ color: rgb(191,0,44); }
        #modal-dialog-fbconnect .errorConsole{ border: 1px solid rgb(191,0,44) !important; }
	#modal-dialog-fbconnect form{
		margin: 20px 10px 0 20px;
		padding: 0;
		color:rgb(102,102,102);
	}
	#modal-dialog-fbconnect form a{ color:rgb(102,102,102); }
	#modal-dialog-fbconnect form input.btn{ margin: 10px 5px 0 0; width: 90px; font-size: 100%; }



	#modal-dialog-fbconnect form input[type=checkbox]{
		margin: 0 5px 0 0;
	}

	#modal-dialog-fbconnect form input[type=text],
	#modal-dialog-fbconnect form input[type=password]{
		border-radius:5px;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
		background: rgb(30,30,30);
		border:1px solid rgb(50,50,50);
		padding: 5px; width: 200px;
		color: rgb(204,204,204);
		width: 165px;
	}
	#modal-dialog-fbconnect form.error input[type=text].error,
	#modal-dialog-fbconnect form.error input[type=password].error{
		border: 1px solid rgb(191,0,44) !important;
	}
	#modal-dialog-fbconnect form.error .info,
	#modal-dialog-fbconnect form.error .info{
		color: rgb(255,255,255);
	}
	#modal-dialog-fbconnect form.error .error,
	#modal-dialog-fbconnect form.error .error{
		color: rgb(255,255,255);
	}
	#modal-dialog-fbconnect form.error dd.error{ margin: -6px 0px 0px 4px ; }
	#modal-dialog-fbconnect form.error dd.error span{ color: rgb(191,0,44); }
	#modal-dialog-fbconnect form.error dd.error a{ color: rgb(187,144,100); }

        #modal-dialog-fbconnect form dl{ margin: 0; padding: 10px 0px 10px 30px;}
        #modal-dialog-fbconnect form dl:after{
                content: ".";
                display: block;
                clear: both;
                visibility: hidden;
                line-height: 0;
                height: 0;
        }
        #modal-dialog-fbconnect form dl{display: inline-block;}
        html[xmlns] #modal-dialog-fbconnect form dl{display: block;}
        * html 	#modal-dialog-fbconnect form dl{height: 1%;}
        #modal-dialog-fbconnect form dl dt,
        #modal-dialog-fbconnect form dl dd{ margin: 5px 5px; padding: 0; float: left; }
        #modal-dialog-fbconnect form dl dt{ clear: both; width: 170px; padding-top: 5px; text-align: right; color: #C1C1C1; font-size: 93%;  }