@charset "utf-8";


@media (max-width: 1200px)
{
    #userBar > .bg > .content > .anonymous { padding-left: 5px; }
}

@media (max-width: 1100px)
{
    #topBody { background-color: #000; }
	#topBody > div { left: 0px; margin-left: 0px; width: 100%; }
}

@media (max-width: 850px)
{
    
    #userBar > .bg > .content > a > .nInfo { position: absolute; display: block; top: 5px; right: 50%; margin-right: -22px; text-align: center; min-width: 12px; padding: 2px 3px; font-size: 11px; background-color: #F00; color: #FFF; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
	#userBar > .bg > .content > a > img.avatar { position: relative; top: 0px; left: 0px; width: 26px; height: 26px; margin: -6px -6px -7px -6px; }
    
    #mainTextPanel { width: 47px; background-image: none; background-color: #F6F6F6; }
    #mainTextPanel a.menuButton { display: block; }
    #mainTextPanel ul { width: 0px; overflow: hidden; }
    
    #mainTextPanel.active { width: 220px; margin-right: -180px; background-color: #EEE; background-image: URL(img/panel-lbg1b.png); border-right: 1px solid #999; }
    #mainTextPanel.active ul { width: 220px; }
    
	#gallery > div { top: 0px; width: 100%; height: 100%; }
    
}

@media (max-width: 600px)
{
    
    #confirmBox { background-color: #000; }
        #confirmBox > div { left: 0px; margin: 0 0 100px 0; width: 100%; }
}


@media (max-width: 500px)
{
    #userBar > .bg > .content > .anonymous > .text { display: none; }
    
    #notificationAlert { bottom: 45px; right: 30px; right: -300px; width: 100%; }
}