* { font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; }
a { cursor: pointer !important; }
a img { border:none; }
body { background: #2C3336 url('../img/bg.gif'); background-repeat: repeat-x; padding: 0px; margin: 0px; }
#page { width:984px; margin: 0px auto 0px auto; _background: #2C373C; border: 0px; }
#dashboard { background: url('../img/bg.gif'); height: 80px; }

#dashboard #app_friends { border-collapse:collapse; _width:100%; height:52px; }
#dashboard #app_friends td { text-align:center; vertical-align:middle; padding:0;margin:0; height:50px; width:50px;}
#dashboard #app_friends div.empty { padding:0; margin:0 auto; border:1px dashed #999; -moz-border-radius:5px; border-radius:5px; -webkit-border-radius:5px; width:46px; height:46px; cursor:pointer; }
#dashboard #app_friends td.empty { padding:0; margin:0; }

#content_slot { _background: url('../img/content_slot_bg.gif'); background-repeat: repeat-x;  }
#content { position: relative; background: #2C373C; color: #999999; border: solid 7px #151515; -moz-border-radius: 7px; border-radius: 7px; -webkit-border-radius:7px; background: #222527 url('../img/content_bg.jpg'); background-repeat: repeat; height: 560px; padding: 20px; }

a { color:#3b5998; text-decoration:none; font-weight: bold; }
a:hover { color:#5b79b8; }

.rounded, .panel { padding: 0px; border: solid 1px #333; -moz-border-radius:7px; border-radius:7px; -webkit-border-radius:7px; }

.panel .title { background-color: #333333; color: white; padding: 5px; margin: 0px; -moz-border-radius-topleft:7px; -moz-border-radius-topright:7px; -webkit-border-top-left-radius:7px; -webkit-border-top-right-radius:7px; border-top-left-radius:7px; border-top-right-radius:7px; font-size: 14px; }
.panel .title .dialog_link { color: #5b79b8; font-size: 12px; float:right; cursor:pointer; }

#notifications_slot { margin:5px 0px 5px 0px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; padding:5px; background-image:url(/img/opacity_bg.png); color:#CCC; font-size:90%; text-align:center; font-weight:bold; }
#notifications_slot .warning { color: #c95a5a; }
#notifications_slot .preview_link { font-size:10px; background-color: #454444; border:1px solid #454444; color:#CCC; }
#notifications_slot img.fb_profile_pic_rendered { vertical-align:middle; }
#notifications_slot .user_created_mix { font-size:16px; }

#controls_slot { margin:5px 0px 5px 0px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; padding:5px; background-image:url(/img/opacity_bg.png); color:#CCC; font-size:90%; _text-align:center; _font-weight:bold; }
#controls_slot .warning { color: #c95a5a; }
#controls_slot .preview_link { font-size:10px; background-color: #454444; border:1px solid #454444; color:#CCC; }

#mix_slot .warning { color: #c95a5a; }

h2 { color:#eeeeee; margin:5px 5px 10px 10px;}
h3 { color:#99f; margin:5px; text-align:center;}

.graphs { width:450px; height:145px; margin-left:35px; margin-top:10px; font-size:10px; position:relative; }
.graph { width:145px;height:145px;margin:0 auto; float:left; margin-right:5px; }
.graphs span { position:absolute; bottom:0; left:0; font-size:11px; font-weight:bold; }
.graphs .label_users { left:55px; color:#89966B; }
.graphs .label_mixes { left:210px; color:#937C8A; }
.graphs .label_videos { left:360px; color:#6B8996; }


/* Buttons */
.fancy_button { position:absolute; background: url(/img/buttons2.png) ; cursor:pointer; width:16px; height:16px; margin:0; padding:0; display:block; }
.fancy_button.play { background-position:0 0; }
.fancy_button.play.pause { background-position:-16px 0; }
.fancy_button.remove, .fancy_button.nf2 { background-position:-32px 0; }
.fancy_button.add, .fancy_button.nf1 { background-position:-48px 0; }
.fancy_button.rename { background-position:-64px 0; }
.fancy_button.move, .fancy_button.nf4 { background-position:-80px 0; }
.fancy_button.shuffle, .fancy_button.nf3 { background-position:-96px 0; }
.fancy_button.next { background-position:-112px 0; }
.fancy_button.star, .fancy_button.nf0 { background-position:-128px 0; }

.fancy_button2 { position:absolute; background: no-repeat 3px 3px; cursor:pointer; margin:0; padding:3px 5px 4px 22px; color:#ccc; border-width:1px; border-color:#999; }
.fancy_button2.next { background-image:url(/img/action_next.png); }
.fancy_button2.shuffle { background-image:url(/img/action_shuffle.png); }


.action_button { display:inline-block; margin: auto; width: 200px; height: 45px; background: url(/img/action_buttons.png) no-repeat; }
.action_button.get_started { background-position:0 0; }
.action_button.see_your_mix { background-position:0 -45px; }
.action_button.start_new_mix { background-position:0 -90px; }
.action_button.about_youmixer { background-position:0 -135px; }
.action_button.add_songs_to_this_mix { background-position:0 -180px; width:300px; }
.action_button.import_playlist { background-position:0 -225px; }
.action_button.import_mix { background-position:0 -270px; }

#tooltip {
    display:none; 
    background:transparent url('../img/black_arrow.png'); 
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    height:55px; 
    width:160px; 
    padding: 15px 25px 0 25px; 
    color:#fff;     
}

#tooltip_big {
    display:none;
    background:transparent url('../img/white_big.png');
    background-position:center;
    background-repeat: no-repeat;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    height:140px;
    width:325px;
    padding: 10px;
    color:#333;
}

#mixer_msg_div { text-align:center; display:none; position:absolute; width:984px; z-index:999999; }
#mixer_msg { min-width:150px; display:inline-block; }

.fbgreybox
{
    background-color: #aaaabb;
    border: 1px solid #ccccdd;
    color: #333333;
    padding: 10px;
    font-size: 13px;
    font-weight: bold;
}
.fbbluebox
{
    background-color: #eceff6;
    border: 1px solid #d4dae8;
    color: #333333;
    padding: 10px;
    font-size: 13px;
    font-weight: bold;
}

#mixer_msg.info
{
    background-color: #fff9d7;
    border: 1px solid #e2c822;
    color: #333333;
    padding: 10px;
    font-size: 13px;
    font-weight: bold;
}
#mixer_msg.error
{
    background-color: #ffebe8;
    border: 1px solid #dd3c10;
    color: #333333;
    padding: 10px;
    font-size: 13px;
    font-weight: bold;
}