/*Basic general rules
**********************/

*{ 
    margin: 0;
    padding: 0;
}

img	{
    border: 0;
}

html,body,#xn_main,#userContent {
	height: 100%;
    width:100%;
}

#userContent label {
    display: block;
}

/*Colors
**********************/

html,body,#xn_main,#userContent {
    background-color: #fff;
}

#userHeader {
    background-color: #666;
    color:#ccc;
}

#userHeader a{
    color:#ccc;
}

#userHeader a.selected{
    color:#ddd;
}
#userHeader a:hover{
    color:#fff;
}
#userContent {
    color: #444;
}
#userContent .error{
    color: red;
    background-color: yellow;
}

#userContent .success{
    color: green;
}

#userContent .warning{
    background-color: lightyellow;
    border: 1px solid orange;
}

#userContent .explicit{
    color: #900;
    background: white;
    border: 1px solid #900;;
    padding-left: .1em;
    padding-right: .1em;
}

#userContent .track, #userContent .user-profile, #userContent .comment-container {
    background-color: #fafafa;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

#userContent .track.private{
    opacity:0.5;
    border:2px dashed #ccc;
}
#userContent .track.hit{
    background-color: #ffe;
}
#userContent .hits-list .track.hit{
    background-color: #fafafa;
}

#userContent .track.slim{
    background-color: #fafafa;
    border:none;
}
#userContent .track.slim{
    background:none;
    border:none;
}
#userContent .track .track-vote-container{
    border:1px solid #999;
    background: #fff;
}

#userContent .track .track-image-container, #userContent .user-profile .user-avatar{
    border:1px solid #999;
}
#userContent .track .approve-button{
    /*border: 1px solid gray;*/
}
#userContent .track .track-tellafriend form{
    border:1px solid gray;
}
#userContent .track .track-tellafriend .track-html-preview{
    border:1px solid gray;
}
#userContent .track .track-tellafriend input{
    border:1px solid gray;
}
#userContent .track .track-tellafriend textarea{
    border:thin solid gray;
}
#userContent .intern-box{
    border:2px solid gray;
    border-top:1px solid #ccc;
    border-left:1px solid #ccc;
}
#userContent .user-private-tracks{
    opacity:0.5;
    border:2px dashed #ccc;
}

#userContent .flood-warning{
    border: 1px solid #999;
    font-size: small;
    padding: .5em;
    background-color: #ffe;
}
#userContent .flood-warning p{
    margin-top:.2em;
}
#userContent .flood-warning h2{
    font-size:1em;
}
#userContent #add-form {
    border: 1px solid #999;
}

#userContent #add-form input, #userContent #add-form select, #userContent #add-form textarea{
    border: 1px solid #999;
}

#userContent #add-form .has-description-value{
    color: #999;
}

#userContent .proceed-box blockquote{
    border-bottom:1px solid #ddd;
    border-top:1px solid #ddd;
    background-color: #fafafa;
}


#userContent #create-user-form{
    border: 1px solid #999;
}

#userContent #create-user-form input{
    border: 1px solid #999;
}

#userContent #create-user-form .freezed{
    border: none;
}
#userContent .track-plays .lt50-playtrack{
    color:#888;
}
#userContent .odd{
    background-color:#fafafa;
}

#userContent .edit-button{
    border:none;
    background-color:#ddd;
    color:#fff;
}
#userContent .edit-button:hover{
    background-color:#999;
}
#userContent .in-page-edit-field{
    border: 1px solid #ccc;
}

#userContent .page-nav-button{
    border: 1px solid #ccc;
    text-decoration: none;
    color: #666;
    padding: .2em;
    background-color:#eee;
}

#userContent .page-nav-button:hover{
    border-color:#666;
}
#userContent .selected .page-nav-button{
    color:#fff;
    background-color:#999;
    border-color:#666;
}

#userContent .tracks-count{
    margin-top:1em;
    color:#999;
}
#userContent .page-nav{
    text-align:center;
    font-size:small;
}

/* Fonts and text
*******************/

#userHeader {
    font-family: Arial;
    font-weight:bold;
    font-size:small;
}

#userHeader a{
    text-decoration:none;
}

#userHeader #alternate-links{
    font-size:xx-small;
}

#userContent {
    font-family: sans-serif;
    font-size:16px;
}

#userContent #add-form .has-description-value{
    font-style: italic;
}

#userContent #add-form .required{
    font-weight: bold;
}

#userContent #add-form .field-help{
    font-size:x-small;
    font-weight:normal;
} 

#userContent #create-user-form .success{
    font-size:small;
    font-style:italic;
}

#userContent .roles-list{
    font-size:small;
    height:10em;
    overflow:auto;
}
#userContent .roles-list ul{
    list-style:none;
}
#userContent .track.private{
    font-size:small;
}
#userContent .track .track-vote-container a{
    text-decoration:none;
}

#userContent .track .track-vote-container{
    font-size: .8em;
    text-align:center;
}
#userContent .track .track-vote-container .votes-count{
    font-weight: bold;
    font-size: large;
}
#userContent .track .track-submiter{
    font-size: small;
    font-style: italic;
}
#userContent .track .track-tellafriend h3{
    font-size:1em;
    font-style:italic;
}

.track .hit-notice img{
    height:.8em;
    width:.8em;
}
.track.slim .hit-notice img{
    height:.75em;
    width:.75em;
}
#userHeader .hit-notice img{
    opacity:.5;
}
#userHeader .hit-notice img:hover{
    opacity:.8;
}
#userHeader .selected .hit-notice img{
    color:#fff;
    opacity:1;
}
#userContent ol.track-list li{
    font-size: small;
}
#userContent .track-details dl{
    font-size:small;
}
#userContent .track-tags ul{
    font-size:small;
}
#userContent .track-votes ol{
    font-size:small;
}
#userContent .track-tags dl dt{
    font-weight:bold;
}
#userContent .track-plays ol{
    font-size:small;
}
#userContent .track-plays .full-playtrack{
    font-weight:bold;
}
#userContent .track-plays .lt50-playtrack{
    font-style:italic;
}
#userContent .user-profile .user-tagline{
    font-style:italic;
    font-weight:normal;
    font-size:1.2em;
}
#userContent .user-profile dl{
    font-size:small;
}
#userContent .user-profile dl dt{
    font-weight:bold;
}
#userContent .edit-button{
    text-decoration:none;
    font-size:x-small;
}

#userContent .filter-bar{
    font-size:small;
    background-color:#eee;
    color:#666;
}

#userContent .filter-bar a.selected{
    background-color:#aaa;
    color:#fff;
}

#userContent .filter-bar label{
    display:inline;
}
#userContent #search-form .field-help{
    font-size:x-small;
}
/* Size, position, alignment and spacing
*****************************************/

/*@TODO distribute the css into the specific files after finish testing*/

#userHeader {
    height:64px;
    position:relative;
    top:0px !important;
}

#userHeader #header-title {
    position: absolute;
    top:32px;
    left:27px;
    margin-top: -.5em;
}

#userHeader #header-title #app-logo{
    display:block;
    float:left;
}

#userHeader #header-title #app-name{
    margin-left:.2em;
}

#userHeader #nav-links{
    position:absolute;
    right:235px;
    top:64px;
    margin-top: -1.3em;
}

#userHeader #nav-links a{
    margin-left:1em;
}
#userHeader #alternate-links{
    position:absolute;
    right:1em;
    bottom:100%;
    margin-bottom: -60px;
}
#userHeader #user-box{
    position:absolute;
    left:100%;
    margin-left:-225px;
    top:64px;
    margin-top: -1.3em;
    width:200px;
}
#userHeader #user-box a{
    margin-right:1em;
}
#userHeader #alternate-links a{
    display:block;
}
#userContent{
    padding-left:10px;
}
#userContent hr{
    margin-top:1em;
    margin-bottom:1em;
}
#userContent .warning{
    margin-bottom:1em;
    padding:.5em;
}

#userContent .track-list{
    list-style:none;
    margin-bottom:1em;
}
#userContent .track{
    min-height:6.8em;
    padding-top:.4em;
    margin-bottom:.6em;
    clear:both;
    position:relative; /*IE sucks big time*/
}

#userContent .track.private{
    min-height:1em;
}

#userContent .track.slim{
    min-height:1em;
    margin-bottom: 0px;
}
#userContent .track.slim .date{
    margin-left:1em;
}
#userContent .track .track-left{
    text-align:center;
    width:7.5em;
    margin-right:.4em;
    float:left;
    position:relative; /*IE sucks big time*/
}

#userContent .track .track-vote-container{
    width:4em;
    height:3.8em;
    margin:0.2em;;
    float:left;
    overflow:hidden;
}

#userContent .track .track-vote-container .votes-count{
    margin-top: .3em;
}

#userContent .track .track-image-container{
    width:3em;
    height:3em;
    margin:0.2em;;
    float:left;
    overflow:hidden;
}

#userContent .track .track-image{
    width:100%;
    height:100%;
}

#userContent .track .button-player{
    width:14px;
    height:14px;
    /*position:relative; /*IE sucks big time*/
}

#userContent .track .play_btn{
    width:14px;
    height:14px;
}

#userContent .track .track-license-icons{
    clear:both;
    height:2em;
    margin-bottom:.2em;
    margin:auto;
}
#userContent .track.slim .track-license-icons{
    height:1.5em;
    float:right;
    clear:none;
}
#userContent .track.slim .post-reference{
    float:left;
}
#userContent .track .track-license-icons .track-license-image{
    height:100%;
}

#userContent .track .approve-button,
#userContent .track .notlogged-approve{
    clear:both;
    height:2em;
    margin-top: .5em;
    margin-bottom:.3em;
    width:6.7em;
    text-align:center;
}
#userContent .track-left a{
    text-decoration:none;
    text-align:center;
}
#userContent .track .approve-button,
#userContent .track .notlogged-approve{
    cursor:pointer;
}
#userContent .track .approve-button:hover,
#userContent .track .notlogged-approve:hover{
    font-weight:bold;
    height:2em;
    margin-bottom:.3em;
}
#userContent .track .approve-button[disabled]:hover{
    font-weight:normal;
}
#userContent .track .track-submiter{
    margin-bottom:.5em;
}
#userContent .track-footer{
    clear:both;
    float:none;
    text-align:right;
    font-size:x-small;
}
#userContent .track-footer a, #userContent .comment-anchor{
    color:#666;
    background-color:#eee;
    text-decoration:none;
    padding-left:1em;
    padding-right:1em;
}
#userContent .track-footer a:hover, #userContent .comment-anchor:hover{
    color:#fff;
    background-color:#999;
}

#userContent .track .track-tellafriend,
#userContent .send-a-message
{
    margin-top:.5em;
    position:relative;
}
#userContent .track .track-tellafriend h4{
    margin:.2em;
}
#userContent .track .track-tellafriend form,
#userContent .send-a-message
{
    width:25%;
    min-width:104px;
    float:left;
    margin:.2em;
    position:relative;
}
#userContent .send-a-message{
    float:right;
    border:1px solid #ccc;
    width:75%;
}
#userContent .track .track-tellafriend .track-html-preview{
    width:45%;
    float:left;
    margin:.2em;
    position:relative;
}
#userContent .track .track-tellafriend .track-html-preview .track-image-container{
    position:relative;
}
#userContent .track .track-tellafriend input,
#userContent .send-a-message input
{
    width:90%;
    margin:.2em;
}
#userContent .track .track-tellafriend input.embed-check{
    width:auto;
}
#userContent .track .track-tellafriend textarea,
#userContent .send-a-message textarea
{
    width:90%;
    margin:.2em;
    height:5em;
}
#userContent .track .track-tellafriend .captcha-input{
    width:90%;
    margin:0px;
    display:block;
}
#userContent .send-a-message .captcha-input{
    float:left;
    width:auto;
}
#userContent .track .track-tellafriend .captcha,
#userContent .send-a-message .captcha
{
    width:100px;
    height:50px;
    position:relative;
}




#userContent #add-form {
    padding: 1em;
    margin: 1em;
    width: 70%;
}
#userContent #add-form fieldset{
    padding: 1em;
}

#userContent #add-form textarea{
    height: 10em;
}

#userContent #add-form h2 {
    margin-bottom: .2em;
}

#userContent #add-form input, #userContent #add-form select, #userContent #add-form textarea{
    width: 60%;
}

#userContent #add-form input.checkbox{
    width:auto;
}

#userContent #add-form label {
    text-align: right;
    margin: .2em;
}

#userContent #add-form .submit-button{
    width: auto;
}

#userContent #add-form input[type=button]{
    width: auto;
}

#userContent #add-form p{
    text-align: right;
    margin: .2em;
}

#userContent #create-user-form{
    width:50%;
    padding: 2%;
    float:left;
}
#userContent #create-user-form label{
    text-align:right;
}
#userContent #create-user-form input{
    width:50%;
    margin: 1%;
}

#userContent #create-user-form select{
    width:50%;
    margin: 1%;
}

#userContent #create-user-form .form-submit-container{
    width:100%;
    text-align:right;
}
#userContent #create-user-form .form-submit-container input,#userContent #create-user-form input[type=checkbox]{
    width:auto;
}
#userContent #config-score{
    float:left;
    border:1px solid #ccc;
    margin-top:1em;
    padding:1em;
}
#userContent #config-score label{
    text-align:right;
}
#userContent .proceed-box{
    padding:1em;
}

#userContent .proceed-box h2{
    margin-top:1em;
}
#userContent .proceed-box p{
    margin:1em;
}
#userContent .proceed-box blockquote{
    padding:.3em;
    display:inline;
    margin-left:4em;
}

#userContent .intern-box{
    float:left;
    margin-left:2%;
    min-width:8em;
    margin-bottom:2%;
    padding:.2em;
}
#userContent .intern-box h3{
    margin-bottom:1em;
}
#userContent .track-details{
    width:98%;
    margin-left:0px;
}
#userContent .track-details dl dd{
    text-align:right;
    margin-left:.5em;
}
#userContent .track-details dl div{
    padding:.2em;    
}

#userContent .track-event-details{
    width:40%;
    margin-left:0px;
}
#userContent .track-event-details dl{
    margin-top:1em;
    border:thin solid #eee;
    font-size:.8em;
    width:50%;
}
#userContent .track-event-details dl dd{
    margin-left:.5em;
}
#userContent .track-event-details dl div{
    padding:.2em;
}
#userContent .track-event-details .poweredby{
    text-align:right;
    font-size:x-small;
}
#userContent .track-event-details .poweredby a{
    text-decoration:none;
}
#userContent .track-plays{
}
#userContent .track-plays ol{
    list-style-position:inside;
    padding:.2em;    
}
#userContent .track-votes{
}
#userContent .track-votes ol{
    list-style-position:inside;
    padding:.2em;    
}
#userContent .track-tags ul{
    list-style-position:inside;
    padding:.2em;    
}
#userContent .track-tags{
    float:left;
    margin-bottom:2%;
    margin-left:2%;
    min-width:8em;
}
#userContent .track-tags .edit-button.add-tag-link{
    font-size:x-small;
    margin-top: 1em;
    color:#666;
    background-color:#eee;
}
#userContent .track-tags #submit-buttons{
    clear:left;
    display:none;
}

#userContent .user-profile{
    min-height:6.8em;
    padding:.4em;
    padding-bottom:0px;
    margin-bottom: .8em;
}
#userContent .user-profile .user-profile-left{
    float:left;
    padding:.4em;
}
#userContent .user-profile .user-profile-right{
    float:left;
}
#userContent .user-profile{
}
#userContent .user-profile .user-name{
    float:left;
    clear:left;
}
#userContent .user-profile .user-tagline{
    float:left;
    clear:left;
}
#userContent .user-profile .user-website{
    float:left;
    clear:left;
}
#userContent .user-profile .user-locale{
    float:left;
    clear:left;
    margin-top:.5em;
}
#userContent .user-profile .user-bookmark{
    float:left;
    clear:left;
}
#userContent .user-profile #user-bookmark-value{
    float:left;
}
#userContent .user-profile dl{
    clear:both;
    margin-top:1em;
}
#userContent .user-profile dl dt{
    float:left;
    clear:left;
}
#userContent .user-profile dl dd{
    float:left;
    margin-left:.2em;
}
#userContent .user-profile #submit-buttons{
    clear:left;
    display:none;
}

#userContent .edit-button{
    padding:.1em;
    float:left;
    margin-left:.2em;
}

#userContent .in-page-edit-field{
    font-size:1em;
    float:left;
    display:none;
    clear:left;
    margin-bottom:.2em;
    margin-top:.5em;
}
#userContent #comments{
    clear:both;
}
#userContent .comment-list{
}
#userContent .comment-list ul{
    list-style:none;
}
#userContent .comment-anchor{
    
}
#userContent .comment-container .comment{
    float:left;
    width:80%
}
#userContent .comment-container{
    background-color:#fff;
}
#userContent .comment-container .comment-header{
    font-size:small;
    margin-bottom:.4em;
    background-color:#fafafa;
}
#userContent .comment-container .comment-footer{
    clear:both;
    margin-bottom:.4em;
}
#userContent .comment-container .user-icon{
    float:left;
    margin-left:.4em;
    margin-right:.2em;
}
#userContent .comment-form{
    clear:both;
}

#userContent #page-footer{
    float:none;
    left:0px;
    clear:both;
    border-top:1px dashed #ccc;
    height:1em;
    width:100%;
    margin-top:3em;
}

#userContent .non-contributor-message ul{
    list-style-position:inside;
    font-size:.85em;
    margin-left:2em;
    margin-top:.4em;
    margin-bottom:1em;
}

#userContent .non-contributor-message ul li{
    margin-bottom:.2em;
}

#userContent .non-contributor-message h1{
    font-size:1em;
    margin:1em;
}

#userContent .non-contributor-message h2{
    font-size:1em;
    margin-left:1em;
    color:#666;    
}
#userContent .non-contributor-message form{
    text-align:center;
}
#userContent .non-contributor-message form input{
    border: 1px solid #333;
    color: #333;
}
/* Visible and invisible elements
***********************************/
#userHeader #header-title {
    display: inline;
}
#userHeader #nav-links {
    display:inline;
}
#userContent .warning{
    display:block;
}
#userContent #add-form #hidden-select{
    display:none;
}
#userContent #add-form #more-advanced-fields{
    display:none;
}
#userContent #add-form #advanced-fields{
    display:none;
}

#userContent .track{
    list-style: none;
}

#userContent .track.private .track-left{
    display:none;
}
#userContent .track .track-tellafriend,
#userContent .send-a-message
{
    display:none;
}
#userContent .track-details{
    overflow:hidden;
}
#userContent .track-details dl dt{
    display:inline;
}
#userContent .track-details dl dd{
    display:inline;
}
#userContent .track-votes{
    overflow:auto;
}
#userContent .track-tags{
    overflow:auto;
}

#userContent .hidden-submit{
    display:none;
}


/* Custom Overlay
*******************/

#userHeader {
    background-color: #c00;
    background-image:url(/_app/lib/private_png.php?xn_auth=no&file=header_bg.png);
    background-repeat:repeat-x;
}

#userHeader #header-title #app-logo{
    background-image: url(/_app/lib/private_png.php?xn_auth=no&file=header_logo.png);
    background-repeat: no-repeat;
    width:70px;
    height:30px;
}

#userHeader #header-title {
    margin-top: -15px;    
}

#userHeader #header-title #app-name{
    visibility:hidden;
}

#userHeader a{
    color:#e8867f;
}
#userHeader a.selected{
    color:#fff;
}
#userHeader a:hover{
    color:#f6cecc;
}

#userContent #page-footer{
    font-size: small;
    color:#999;
    padding-bottom:1em;
    width:90%;
    margin:auto;
    margin-top:7em;
}
#userContent #page-footer a{
    color:#666;
    text-decoration:none;
}
#userContent #page-footer a:hover{
    color:#333;
}
#userContent #page-footer img{
    margin-top:1.5em;
}
#userContent .faq-list{
    font-size:.8em;
}
#userContent .faq-list{
    margin-top:2em;
}
#userContent .faq-list dt{
    font-weight:bold;
    border-bottom:1px solid #ccc;
    margin-top:2em;
}
#userContent .faq-list dd dt{
    border:none;
    margin-top:1em;
}
#userContent .faq-list dd li{
    margin-left:2em;
}
#userContent .faq-list dd{
    margin-left:2em;
}
#userContent .faq-list dd p{
    margin-top:.5em;
}
#userContent .faq-links{
    font-size:small;
    margin:1em;
}
#userContent .faq-subtitle{
    margin-top:1em;
}