Fire JS Bin - macosx

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

$(document).ready(function() {
//-----------------------------------------------------------------------------------
//	0.	Modernizr test
//-----------------------------------------------------------------------------------
if (Modernizr.cssanimations) {
	$('#fail').remove();
}
else {
	$('#fail').addClass('visible');
}

//-----------------------------------------------------------------------------------
//	1.	Clock
//-----------------------------------------------------------------------------------

var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; 
var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]

var newDate = new Date();
newDate.setDate(newDate.getDate());
$('#DateAbbr').html(dayNames[newDate.getDay()].substr(0,3) + " ");

setInterval( function() {
	var minutes = new Date().getMinutes();
	$(".min, .mins").html(( minutes < 10 ? "0" : "" ) + minutes);
    },1000);
	
setInterval( function() {
	var hours = new Date().getHours();
	$(".hours, .hour").html(( hours < 10 ? "0" : "" ) + hours);
    }, 1000);
	
//-----------------------------------------------------------------------------------
//	2.	Fix Classes after Validate Login
//-----------------------------------------------------------------------------------

$('.submit').click(function() {
	var ValPassword = $('#password').val() === 'admin';
    if (ValPassword === true) {
		$('input[type=password]').addClass('valid');
		$('.tooltip-pass').hide();
		$('.submit').removeClass('submit').addClass('charge');
		$('#pageLogin').addClass('initLog').delay(1900).queue(function() { $(this).removeClass('initLog').addClass('initLogExit'); $(this).dequeue(); });;
		$('#page, #head').delay(2500).queue(function() { $(this).addClass('vis'); $(this).dequeue(); });
		$('.window').delay(3000).queue(function() { $(this).addClass('windows-vis'); $(this).dequeue(); });
		event.preventDefault();
    }
    else {
		$('.tooltip-pass').hide();
		$('input[type=password]').select();
    	$('.validate').addClass('error').delay(210).queue(function() { $(this).removeClass('error'); $(this).dequeue(); $('.tooltip-pass').show(); });
			return false;
    	}
});

//-----------------------------------------------------------------------------------
//	3.	Draggable Windows
//-----------------------------------------------------------------------------------

$('.content').remove();

//-----------------------------------------------------------------------------------
//	4.	Dock
//-----------------------------------------------------------------------------------

$('.dock ul li').hover(
	function(){
		$(this).addClass('ok').prev().addClass('prev').prev().addClass('prev-ancor');
		$(this).addClass('ok').next().addClass('next').next().addClass('next-ancor');
	},
	function(){
		$('.dock ul li').removeClass('ok prev next next-ancor prev-ancor');
	}
);

//-----------------------------------------------------------------------------------
//	5.	Hide and Close
//-----------------------------------------------------------------------------------
var left = 50 + '%';
var top = 15 + '%';
var item = $('<div class="fresh"></div>').hide();
var itemR = $('<div class="fresh"></div>').hide();

$("a[data-rel=close]").click(function(e) {
    e.preventDefault();
    $(this.hash).fadeOut(200, function() {
		$(this).css({ top: top, left: left });
	});
});

$("a[data-rel=show]").click(function(e) {
    e.preventDefault();
    $(this.hash).show();
});

$(".dock li a[data-rel=showOp]").click(function(e) {
    e.preventDefault();
	$(this).addClass('bounce').delay(1600).queue(function() { $(this).removeClass('bounce'); $(this).append(item); item.fadeIn(500); $(this).dequeue(); });
    $("#warning").delay(1630).queue(function() { $(this).show(); $(this).dequeue(); });
});

$("#warning a[data-rel=close]").click(function(e) {
    e.preventDefault();
	item.fadeOut(500);
    $(this.hash).hide();
});

$(".dock li a[data-rel=showOpTrash]").click(function(e) {
    e.preventDefault();
	$(this).addClass('bounce').delay(1600).queue(function() { $(this).removeClass('bounce'); $(this).append(itemR); itemR.fadeIn(500); $(this).dequeue(); });
    $("#trash").delay(1630).queue(function() { $(this).show(); $(this).dequeue(); });
});

$("#trash a[data-rel=close]").click(function(e) {
    e.preventDefault();
	itemR.fadeOut(500);
    $(this.hash).hide();
});

});

<!DOCTYPE HTML>
<html lang="en-US" class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Mac OS X Lion CSS3 by Alessio Atzeni</title>
<meta name="description" content="Mac Os X Lion with CSS3 Experiment - I wanted to create with only use of CSS3 the boot, the login page and finally the desktop of the Mac OS X Lion." />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script class="jsbin" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min.js"></script>
<script class="jsbin" src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script>
</head>

<body>

<div id="fail">
	<div class="fail-browser-logo">
    	<img src="/assets/macosx/apple-logo-login.png" alt="Mac OS X" />
    </div>
    <div class="fail-browser">
        <p><strong>I'm sorry to inform you that your browser don't support CSS3 Animations!</strong></p> 
        <p>This site uses features that <em>require</em> a modern browser - why not try <a href="http://www.mozilla.org/en-US/firefox/fx/" target="_blank" title="Download Firefox">Firefox</a> ?</p>
    </div>
</div>

<div id="pageLoading">
	<div class="loading">
		<div class="apple-logo"></div>
        <div class="spinner"></div>
	</div>
</div>

<div id="pageLogin">
	<header id="headlogin">
		<nav id="menu-dx-login">
    	<ul>
   			<li class="wireless"></li>
    		<li class="time">
    		<ul>
				<li class="hours"> </li>
    			<li class="point">:</li>
    			<li class="min"> </li>
        	</ul>
    		</li>
		</ul>
    	</nav>
    </header>
	<div class="new-apple-logo"></div>
    
    <div class="user-avatar">
        <div id="avatar">
        <a href="#hide" class="hide" id="hide"></a>
        <a href="#show" class="show" id="show"></a>
        <div id="cover"></div>
        <div class="ava-css">
        <img src="/assets/macosx/Firejune.jpg" />
        </div>
        <div class="logName">
        <p>Firejune</p>
        </div>
        <div id="switch">
        <div class="validate">
        <form action="#page">
        	<input type="password" id="password" placeholder="Password" />
            <input type="submit" class="submit" />
            <div class="tooltip-pass">
            <p>Password: admin</p>
            </div>
            </form>
        </div>
        </div>
        </div>
        </div>
    </div>

<div id="page">
<header id="head">
	<nav id="menu">
    	<ul>
        <li class="apple">
        	<a href="#all">Apple</a>
            <ul class="sublist">
            <li><a href="#about-this-mac" data-rel="show">About This Mac</a></li>
            <li>Software Updates...</li>
            <li>App Store...</li>
            <li class="divider"></li>
            <li>System Preferences...</li>
            <li>Dock
            	<span class="arrow"></span>
                <ul class="sublist-menu">
                <li>Turn Hiding Off</li>
                <li>Turn Magnification Off</li>
                <li class="divider"></li>
                <li>Position on Left</li>
                <li>Position on Bottom</li>
                <li>Position on Right</li>
                <li class="divider"></li>
                <li>Dock Preferences...</li>
                </ul>
            </li>
            <li class="divider"></li>
            <li>Recent Items
            	<span class="arrow"></span>
                <ul class="sublist-menu">
                <li class="disable">Applications</li>
                <li class="divider"></li>
                <li class="disable">Documents</li>
                <li class="divider"></li>
                <li class="disable">Servers</li>
                <li class="divider"></li>
                <li>Clear Menu</li>
                </ul>
            </li>
            <li class="divider"></li>
            <li>Force Quit...</li>
            <li class="divider"></li>
            <li>Sleep</li>
            <li>Restart...</li>
            <li>Shut Down...</li>
            <li class="divider"></li>
            <li>Log Out...</li>
            </ul>
        </li>
        <li class="here">
        	<a href="#all">Finder</a>
        	<ul class="sublist">
            <li><a href="#finder" data-rel="show">About Finder</a></li>
            <li class="divider"></li>
            <li>Preferences...</li>
            <li class="divider"></li>
            <li>Secure Empty Trash...</li>
            <li class="divider"></li>
            <li>Services
            	<span class="arrow"></span>
                <ul class="sublist-menu">
                <li class="disable">No Services Apply</li>
                <li>Services Preferences...</li>
                </ul>
            </li>
            <li class="divider"></li>
            <li>Hide Finder</li>
            <li>Hide Others</li>
            <li class="disable">Show All</li>
            </ul>
        </li>
        <li>
        	<a href="#all">File</a>   
            <ul class="sublist">
            <li>New Finder Window</li>
            <li>New Folder</li>
            <li class="disable">New Folder with Selection</li>
            <li>New Smart Folder</li>
            <li>New Burn Folder</li>
            <li class="disable">Open</li>
            <li class="disable">Open With
            	<span class="arrow"></span>
            </li>
            <li class="disable">Print</li>
            <li class="disable">Close Window</li>
            <li class="divider"></li>
            <li>Get Info</li>
            <li class="divider"></li>
            <li class="disable">Compress</li>
            <li class="divider"></li>
            <li class="disable">Duplicate</li>
            <li class="disable">Make Alias</li>
            <li class="disable">Quick Look</li>
            <li class="disable">Show Original</li>
            <li class="disable">Add to Sidebar</li>
            <li class="divider"></li>
            <li class="disable">Move to Trash</li>
            <li class="disable">Eject</li>
            <li>Burn "Desktop" to Disc...</li>
            <li class="divider"></li>
            <li>Find</li>
            <li class="divider"></li>
            <li class="disable">Label:</li>
            </ul> 
        </li>
        <li>
        	<a href="#all">Edit</a>
        	<ul class="sublist">
            <li class="disable">Undo</li>
            <li class="disable">Redo</li>
            <li class="divider"></li>
            <li class="disable">Cut</li>
            <li class="disable">Copy</li>
            <li class="disable">Paste</li>
            <li>Select All</li>
            <li class="divider"></li>
            <li>Show Clipboard</li>
            <li class="divider"></li>
            <li>Special Characters...</li>
            </ul>
        </li>
        <li>
        	<a href="#all">View</a>
        	<ul class="sublist">
            <li class="disable">as Icons</li>
            <li class="disable">as List</li>
            <li class="disable">as Columns</li>
            <li class="disable">as Cover Flow</li>
            <li class="divider"></li>
            <li>Clean Up</li>
            <li>Clean Up By
            	<span class="arrow"></span>
                <ul class="sublist-menu">
                <li>Name</li>
                <li>Kind</li>
                <li>Date Modified</li>
                <li>Date Created</li>
                <li>Size</li>
                <li>Label</li>
                </ul>
            </li>
            <li>Sort By
            	<span class="arrow"></span>
                <ul class="sublist-menu">
                <li>None</li>
                <li class="divider"></li>
                <li>Snap to Grid</li>
                <li class="divider"></li>
                <li>Name</li>
                <li>Kind</li>
                <li>Date Last Opened</li>
                <li>Date Added</li>
                <li>Date Modified</li>
                <li>Date Created</li>
                <li>Size</li>
                <li>Label</li>
                </ul>
            </li>
            <li class="divider"></li>
            <li class="disable">Hide Path Bar</li>
            <li class="disable">Hide Status Bar</li>
            <li class="disable">Hide Sidebar</li>
            <li class="divider"></li>
            <li class="disable">Toolbar</li>
            <li class="disable">Customize Toolbar...</li>
            <li class="divider"></li>
            <li>Show View Options...</li>
            </ul>    
        </li>
        <li>
        	<a href="#all">Go</a>
        	<ul class="sublist">
            <li class="disable">Back</li>
            <li class="disable">Forward</li>
            <li>Enclosing Folder</li>
            <li class="divider"></li>
            <li>All My Files</li>
            <li>Documents</li>
            <li>Desktop</li>
            <li>Downloads</li>
            <li>Home</li>
            <li>Computer</li>
            <li>AirDrop</li>
            <li>Network</li>
            <li>Applications</li>
            <li>Utilities</li>
            <li class="divider"></li>
            <li>Recent Folders
            	<span class="arrow"></span>
                <ul class="sublist-menu">
                <li>2012-01-10</li>
                <li>Archieves</li>
                <li>buildFiles</li>
                <li>MyProjects</li>
                <li>XCode_iPhone</li>
                <li class="divider"></li>
                <li>Clear Menu</li>
                </ul>
            </li>
            <li class="divider"></li>
            <li>Go to Folder...</li>
            <li>Connect to Server...</li>
            </ul>    
        </li>
        <li>
        	<a href="#all">Window</a>
         	<ul class="sublist">
            <li class="disable">Minimize</li>
            <li class="disable">Zoom</li>
            <li class="disable">Cycle Through Windows</li>
            <li class="divider"></li>
            <li>Bring All to Front</li>
            </ul>   
        </li>
        <li><a href="#all">Help</a></li>
        </ul>
	</nav>
    <nav id="menu-dx">
    	<ul>
        <li class="wireless">
        	<a href="#all">Wireless</a>
        </li>
        <li class="time">
        	<ul>
            <li id="DateAbbr"> </li>
            <li class="hour"> </li>
    		<li class="point">:</li>
    		<li class="mins"> </li>
            </ul>
        </li>
        <li class="username">
        	<a href="#all">Alessio Atzeni</a>
        </li>
		</ul>
    </nav>
</header>

<div id="finder" class="window finder">
	<nav class="control-window">
    <a href="#finder" class="close" data-rel="close">close</a>
    <a href="#" class="minimize">minimize</a>
    <a href="#" class="deactivate">deactivate</a>
    </nav>
    <h1 class="titleInside">About Finder</h1>
    <div class="container">
    	<div class="container-inside">
        <img src="/assets/macosx/FinderIcon.png" alt="Finder"/>
        <div class="about-this">
        <h2>Finder</h2>
        <p>The Macintosh Desktop Experience</p>
        <p class="small">Finder version 10.7.1</p>
        </div>
        <div class="copyright">
        <p>TM and © 1983-2011 Apple Inc</p>
        <p>All Rights Reserved</p>
        </div>
        </div>
    </div>
</div>

<div id="about-this-mac" class="window mac">
	<nav class="control-window">
    <a href="#about-this-mac" class="close" data-rel="close">close</a>
    <a href="#" class="deactivate">deactivate</a>
    <a href="#" class="deactivate">deactivate</a>
    </nav>
    <h1 class="title-mac">About This Mac</h1>
    <div class="container">
    	<div class="container-inside">
    	<img src="/assets/macosx/MacOSX.png" alt="Mac OS X"/>
    	<div class="about-this">
    	<p>Version 10.7.2</p>
        <p><a class="button about" href="#">Software Update...</a></p>
        <ul class="hardware">
        <li><strong>Processor</strong> 2 Ghz Intel Core 2 Duo</li>
        <li><strong>Memory</strong> 4 GB 1067 Mhz DDR3</li>
        <li><strong>Startup Disk</strong> Macintosh HD</li>
        </ul>
        <p><a class="button about" href="#">More Info...</a></p>
    	<div class="copyright">
    	<p>TM and © 1983-2011 Apple Inc</p>
        <p>All Rights Reserved</p>
    	</div>
    	</div>
    	</div>
    </div>
</div>

<div id="warning" class="window warning">
	<div class="tab"></div>
    <div class="container">
    	<div class="container-alert">
        <img src="/assets/macosx/Alert.png" alt="alert"/>
        <div class="about-alert">
        <h2>Alert</h2>
        <p>This application cannot be used in this version</p>
        <a href="#warning" class="button blink" data-rel="close">Close</a>
        </div>
        </div>
    </div>
</div>

<div id="trash" class="window warning">
	<div class="tab"></div>
    <div class="container">
    	<div class="container-alert">
        <img src="/assets/macosx/FinderIcon.png" width="48px" height="48px" alt="alert"/>
        <div class="about-alert">
        <h2>Secure Empty Trash permanently erases the items in the Trash. Are you sure you want to permanently erase them?</h2>
        <p>If you choose Secure Empty Trash, you can't recover the items unless you've backed them up using Time Machine or another backup program.</p>
        <a href="#warning" class="button blink" data-rel="">Secure Empty Trash</a>
        <a href="#trash" class="button simple" data-rel="close">Cancel</a>
        </div>
        </div>
    </div>
</div>

<div id="project" class="window project">
	<nav class="control-window">
    <a href="#" class="deactivate">deactivate</a>
    <a href="#" class="deactivate">deactivate</a>
    <a href="#" class="deactivate">deactivate</a>
    </nav>
    <h1 class="titleInside">About This Project</h1>
    <div class="container">
    	<div class="container-inside">
        <img src="/assets/macosx/alessio-atzeni-logo.png" alt="Alessio Atzeni Logo" />
        <div class="about-this">
    	<p class="vers">Version 1.1</p>
    	<p><a class="button about" href="http://www.alessioatzeni.com" title="Alessio Atzeni Web Designer & Front-end Developer">By Alessio Atzeni...</a></p>
    	<p>In this project I tried to maximize the use of CSS3.</p>
    	<p>For the <strong>clock</strong> and the <strong>fake login</strong> I used javascript. (knowing the limitations of CSS3).</p>
    	<p>To fix a limitation of the pseudo-class <strong>:target</strong> after login via javascript i added a some classes so 
    	that the <strong>desktop page</strong> remin visible even clicking on other links</p>
    	<p>For more information about this project please visit the link</p>
    	<p><a class="button about" href="http://www.alessioatzeni.com/blog/mac-os-x-lion-with-css3/" title="Mac OS X with CSS3">More Info...</a></p>
        </div>
        </div>
    </div>
</div>

<div id="spec" class="window spec">
	<nav class="control-window">
    <a href="#" class="deactivate">deactivate</a>
    <a href="#" class="deactivate">deactivate</a>
    <a href="#" class="deactivate">deactivate</a>
    </nav>
    <h1 class="titleInside">Project Specifics</h1>
    <div class="container">
    	<div class="container-inside">
        <img src="/assets/macosx/folder.png" alt="Project Specifics" />
        <div class="about-this">
    	<p class="vers">Version 1.1</p>
        <p><strong>New Version Featured</strong></p>
        <p>Replace some image elements with CSS3, Dock, hide and show window, fix and optimize the code</p>
		<p><strong>Modern Browser Supported</strong></p>
    	<p>Firefox, Safari and Chrome</p>
        <p><strong>HTML 5 and CSS3</strong></p>
    	<p>Intensive use of the CSS3 Keyframes Animations and :target pseudo-class and for GUI</p>
        <p><strong>Javascript</strong></p>
        <p>Clock, Fake Login and add special classes after login to remove animations and fix the desktop, hide and show window and and added classes for the dock</p>
        <p><strong>Draggable Window</strong></p>
        <p>Use a jQuery UI Draggable plugin</p>
        <p><strong>Images</strong></p>
        <p>Use images for logos, user-avatar, spinner loading, cursors, background images, icons</p>
        </div>
        </div>
    </div>
</div>

<div id="share" class="window share">
	<nav class="control-window">
	<a href="#" class="close">close</a>
    <a href="#" class="minimize">minimize</a>
    <a href="#" class="maximize">maximize</a>
    </nav>
    <h1 class="titleInside">Share This</h1>
    <div class="container">
    	<div class="container-inside">
        <ul>
        <li>
        <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.alessioatzeni.com/mac-osx-lion-css3/" data-via="Bluxart" data-related="Bluxart">Tweet</a>
		<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}
		(document,"script","twitter-wjs");</script>
        </li>
        <li>
        <div id="fb-root"></div>
		<script>(function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/it_IT/all.js#xfbml=1&appId=312294205481553";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>
        <div class="fb-like" data-href="http://www.alessioatzeni.com/mac-osx-lion-css3/" data-send="false" data-layout="button_count" data-width="140" data-show-faces="false" data-font="lucida grande"></div>
        </li>
        <li>
        <div class="g-plusone" data-size="medium" data-href="http://www.alessioatzeni.com/mac-osx-lion-css3/"></div>
        <script type="text/javascript">
          (function() {
            var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
            po.src = 'https://apis.google.com/js/plusone.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
          })();
        </script>
        </li>
        </ul>
        </div>
    </div>
</div>

<div class="dock">
	<ul>
    	<li id="finderr">
        	<a href="#warning" data-rel="showOp">
            	<em><span>Finder</span></em>
                <img src="/assets/macosx/FinderIcon.png" alt="Finder"/>
            </a>
        </li>
        <li id="launchPad">
        	<a href="#warning" data-rel="showOp">
            	<em><span>Launchpad</span></em>
                <img src="/assets/macosx/launchPad.png" alt="Launchpad"/>
            </a>
        </li>
        <li id="expose">
        	<a href="#warning" data-rel="showOp">
            	<em><span>Mission Control</span></em>
                <img src="/assets/macosx/expose.png" alt="Mission Control"/>
            </a>
        </li>
        <li id="appStore">
        	<a href="#warning" data-rel="showOp">
            	<em><span>App Store</span></em>
                <img src="/assets/macosx/appstore.png" alt="App Store"/>
            </a>
        </li>
        <li id="safari">
        	<a href="#warning" data-rel="showOp">
            	<em><span>Safari</span></em>
                <img src="/assets/macosx/Safari.png" alt="Safari"/>
            </a>
        </li>
        <li id="iChat">
        	<a href="#warning" data-rel="showOp">
            	<em><span>iChat</span></em>
            <img src="/assets/macosx/ichat.png" alt="iChat"/>
            </a>
        </li>
        <li id="facetime">
        	<a href="#warning" data-rel="showOp">
            	<em><span>FaceTime</span></em>
                <img src="/assets/macosx/facetime.png" alt="Facetime"/>
            </a>
        </li>
        <li id="addressBook">
        	<a href="#warning" data-rel="showOp">
            	<em><span>Address Book</span></em>
                <img src="/assets/macosx/address.png" alt="Address Book"/>
            </a>
        </li>
        <li id="preview">
        	<a href="#warning" data-rel="showOp">
            	<em><span>Preview</span></em>
                <img src="/assets/macosx/preview.png" alt="Preview"/>
            </a>
        </li>
        <li id="iTunes">
        	<a href="#warning" data-rel="showOp">
            	<em><span>iTunes</span></em>
                <img src="/assets/macosx/iTunes.png" alt="iTunes"/>
            </a>
        </li>
        <li id="preferences">
        	<a href="#warning" data-rel="showOp">
            	<em><span>System Preferences</span></em>
                <img src="/assets/macosx/preferences.png" alt="System Preferences"/>
            </a>
        </li>
        <li id="trash">
        	<a href="#trash" data-rel="showOpTrash">
            	<em><span>Trash</span></em>
                <img src="/assets/macosx/trash.png" alt="Trash"/>
            </a>
        </li>
    </ul>
</div>

</div>

</body>
</html>

@import url("/assets/macosx/animation-webkit.css") screen;
@import url("/assets/macosx/animation-moz.css") screen;
@import url("/assets/macosx/dock.css") screen;
@import url("/assets/macosx/window.css") screen;

/*-----------------------------------------------------------------------------------*/
/*	0.	CSS Reset
/*-----------------------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; }

::-moz-selection { background:rgba(124,196,255,0.7); }
::selection      { background:rgba(124,196,255,0.7); }

html, body {
	font-family: "Lucida Grande", "Lucida Sans Unicode", sans-serif;
	font-size:12px;
	width:100%;
	height:100%;
	overflow:hidden;
	margin:0;
	padding:0;
	background:#000;
	-webkit-user-select:none;
	-moz-user-select:none;
	user-select:none;
}

/*-----------------------------------------------------------------------------------*/
/*	01.	Boot
/*-----------------------------------------------------------------------------------*/

#pageLoading {
	background:#000;
	width:100%;
	height:100%;
	visibility:hidden;
	position:absolute;
	z-index:0;
	-webkit-user-select:none;
	-moz-user-select:none;
	user-select:none;
	-webkit-animation:init 14s linear forwards;
	-moz-animation:init 14s linear forwards;
}

#pageLoading .apple-logo {
	position:absolute;
	width:120px;
	height:120px;
	left:50%;
	top:50%;
	margin-left:-60px;
	margin-top:-60px;
	background:url(/assets/macosx/apple-logo-boot.png) center no-repeat;
	visibility:hidden;
	-webkit-animation:initApple 0.3s 2s linear forwards;
	-moz-animation:initApple 0.3s 2s linear forwards;
}

#pageLoading .spinner {
	background:url(/assets/macosx/spinnerSmall.gif) no-repeat;
	width:36px;
	height:39px;
	position:absolute;
	left:50%;
	top:75%;
	margin-left:-18px;
	margin-top:-19px;
	visibility:hidden;
	-webkit-animation:initLoading 8s 2s linear forwards;
	-moz-animation:initLoading 8s 2s linear forwards;
}

/*-----------------------------------------------------------------------------------*/
/*	02.	Login
/*-----------------------------------------------------------------------------------*/

#pageLogin {
	background: url(/assets/macosx/gradient.png) no-repeat center, url(/assets/macosx/background.png) repeat left top #000;
	width:100%;
	height:100%;
	position:absolute;
	z-index:0;
	visibility:hidden;
	opacity:1;
	-webkit-animation:initLoginWindow 0.5s 12s linear forwards;
	-moz-animation:initLoginWindow 0.5s 12s linear forwards;
}
#headlogin {
	background:transparent;
	width:100%;
	height:21px;
	position:fixed;
	z-index:1000;
	-webkit-user-select:none;
	-moz-user-select:none;
	user-select:none;
	font-family: "Lucida Grande", "Lucida Sans Unicode", sans-serif;
}
#headlogin nav#menu-dx-login {
	position:absolute;
	right:10px;
	top:0;
}
#headlogin nav#menu-dx-login ul { 
	margin:0; 
	padding:0;
}
#headlogin nav#menu-dx-login ul li {
	float:left;
	height:21px;
	line-height:25px;
	position:relative;
}
#headlogin nav#menu-dx-login ul li.time { 
	font-size:14px; 
	color:#969696;
	padding:0 10px;
}
#headlogin nav#menu-dx-login ul li.wireless {
	background:url(/assets/macosx/wireless-icon-login.png) 10px 2px no-repeat;
	width:22px;
	height:18px;
	top:3px;
	padding:0 5px;
}

#pageLogin .new-apple-logo {
	position:absolute;
	width:120px;
	height:120px;
	left:50%;
	top:50%;
	margin-left:-60px;
	margin-top:-60px;
	background:url(/assets/macosx/apple-logo-login.png) center no-repeat;
	-webkit-animation:initAppleLoginWindow 0.5s 13.5s linear forwards;
	-moz-animation:initAppleLoginWindow 0.5s 13.5s linear forwards;
}
#pageLogin .user-avatar {
	opacity:0;
	-webkit-animation:initUserAvatar 0.3s 13.7s linear forwards;
	-moz-animation:initUserAvatar 0.3s 13.7s linear forwards;
}
#pageLogin #avatar {
	position:absolute;
	width:98px;
	height:98px;
	left:50%;
	top:50%;
	margin-left:-49px;
	margin-top:-49px;
}
.ava-css {
	height:90px;
    width:90px;
	left: 50%;
	top: 50%;
    margin-left: -49px;
    margin-top: -49px;
    display: block;
    border-radius: 100%;
    padding: 4px;
    background: -moz-linear-gradient(#fdfdfd, #c9c9c9);
	background: -webkit-linear-gradient(#fdfdfd, #c9c9c9);
	border:1px solid #434448;
	position:absolute;
}
.ava-css img {
    display: block;
    border-radius: 100%;
	position:relative;
	width:91px;
	height:91px;
	left:-1px;
	top:-1px;
}
.ava-css:before, .ava-css:after {
    width: 90px;
    height: 90px;
    content: '';
    display: block;
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: 5;
    pointer-events: none;
    border-radius: 100%;
}
.ava-css:before {
	border:1px solid #434448;
}
.ava-css:after {
    background: -moz-linear-gradient(-45deg, rgba(255,255,255,.0), rgba(255,255,255,0.33) 50%, rgba(255,255,255,.0) 50%);
	background: -webkit-linear-gradient(-45deg, rgba(255,255,255,.0), rgba(255,255,255,0.33) 50%, rgba(255,255,255,.0) 50%);
}
#cover {
    background:rgba(0,0,0,0.35);
	box-shadow: 0 0 5px 2px rgba(0,0,0,0.3);
    border-radius: 100% 100% 100% 100%;
    height: 98px;
    left: 1px;
    position: absolute;
    top: 1px;
    width: 98px;
    z-index: 9;
	opacity:0;
}

.show {display: none; }
.hide:target + .show { display:inline; }
.hide:target {display: none; }
#switch { -webkit-animation:show 0.25s ease-in forwards; -moz-animation:show 0.25s ease-in forwards; }
.hide:target ~ #switch { -webkit-animation:delete 0.25s ease-in-out forwards; -moz-animation:delete 0.25s ease-in-out forwards; }
.hide:target ~ .logName { -moz-transform:translateX(10px); -moz-transition:all 0.3s linear; -webkit-transform:translateX(10px); -webkit-transition:all 0.3s linear; }
.show:target ~ .logName { -moz-transform:translateX(0px); -moz-transition:all 0.3s linear; -webkit-transform:translateX(0px); -webkit-transition:all 0.3s linear;}
.hide:active ~ #cover, .show:active ~ #cover { opacity:1; }
@media print { .hide, .show { display: none; } }

.hide {
	background:rgba(0,0,0,0);
	height:132px;
	width:190px;
	position:absolute;
	left:50%;
	top:80%;
	margin-left:-92px;
	margin-top:-69px;
	z-index:10;
}
.show {
	background:rgba(0,0,0,0);
	height:132px;
	width:190px;
	position:absolute;
	left:50%;
	top:80%;
	margin-left:-92px;
	margin-top:-69px;
	z-index:10;
}

#pageLogin .user-avatar .logName{
	position:absolute;
	left:50%;
	top:100%;
	margin:10px 0 0 -90px;
	width:184px;
	text-align:center;
	font-size:12px;
	color:#fff;
	letter-spacing:1px;
	text-shadow:1px 1px 2px #000;
	-webkit-user-select:none;
	-moz-user-select:none;
	user-select:none;
}
input[type=password]::-moz-selection { background:rgba(124,196,255,0.7); }
input[type=password]::selection      { background:rgba(124,196,255,0.7); }
input[type=password] {
	width:154px;
	height:24px;
	box-shadow:0 0 2px 3px #4189c3;
	border-radius:3px;
	border:1px solid rgba(0,0,0,0);
	padding:2px 26px 2px 5px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", sans-serif;
}
input[type=password].valid {
	box-shadow:none;
	color:#6d6d6d;
	border-top:1px solid #343434;
	border-left:1px solid #343434;
	border-right:1px solid #515151;
	border-bottom:1px solid #515151;
}
input[type=password]::-webkit-input-placeholder  {
	font-size:12px;
	color:#6d6d6d;
	letter-spacing:0;
}
input[type=password]:-moz-placeholder {
	font-size:12px; 
	color:#6d6d6d;
	letter-spacing:0;  
}
input[type=password]:focus ~ .tooltip-pass {
	opacity:1;
	-moz-transform:scale(1,1);
	-webkit-transform:scale(1,1);
	-moz-transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;	
}
.tooltip-pass {
	-moz-transform:scale(0,0);
	-webkit-transform:scale(0,0);
	-moz-transform-origin:top center;
	-webkit-transform-origin:top center;
	opacity:0;
	position:absolute;
	text-align:center;
	width:330px;
	height:90px;
	left:50%;
	margin-left:-165px;
	top:37px;
	background:#f2f0eb;
	border-radius:3px;
	border:1px solid rgba(52,52,52,0.35);
	box-shadow:0px 7px 25px rgba(0,0,0,0.65);
}
.tooltip-pass p {
	font-size:12px;
	color:#646464;
	margin-top:8px;
}
.tooltip-pass:before,
.tooltip-pass:after
{
  content: "";
  position: absolute;
  z-index: 1000;
  left: 50%;
  top:-14px;
  margin-left: -14px;
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 14px solid #f2f0eb;
}
.tooltip-pass:after
{
  border-top-color: #343434;
}
.tooltip-pass:before
{
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid rgba(52,52,52,0.35);
  top:-15px;
  margin-left:-15px;
}
#pageLogin .user-avatar #switch {
	position:absolute;
	left:50%;
	top:100%;
	margin-left:-90px;
	margin-top:45px;
}
.error {
	-moz-animation:error 0.35s linear;	
	-webkit-animation:error 0.35s linear;	
}
#pageLogin .user-avatar #switch .submit{
	position:absolute;
	top:3px;
	right:2px;
	background:url(/assets/macosx/submit.png) no-repeat;
	width:24px;
	height:24px;
	text-indent:-9999px;
	border:none;
	padding:0;
}
#pageLogin .user-avatar #switch .submit:active {
	background-position:0 -24px;
}

#pageLogin.initLog {
	-webkit-animation:initDesktopLogin 0.4s 1.5s linear forwards;
	-moz-animation:initDesktopLogin 0.4s 1.5s linear forwards;
	visibility:visible;
	opacity:1;
}
#pageLogin.initLogExit {
	visibility:hidden;
	opacity:0;
	-moz-animation:none;
	-webkit-animation:none;
}
.charge {
	background:url(/assets/macosx/loadinfologin.gif) no-repeat;
	position:absolute;
	top:3px;
	right:2px;
	width:24px;
	height:24px;
	text-indent:-9999px;
	border:none;
	padding:0;
	-webkit-animation:charge 1.2s linear forwards;
	-moz-animation:charge 1.2s linear forwards;
}
#page:target #head {
	-moz-animation:initDesktopHeader 0.5s 1.9s linear forwards;
	-webkit-animation:initDesktopHeader 0.5s 1.9s linear forwards;
}
#page:target .window {
	-moz-animation:initDesktopWindows 0.2s 2.8s linear;
	-webkit-animation:initDesktopWindows 0.2s 2.8s linear;
}
#page:target {
	-webkit-animation:initDesktop 0.3s 1.6s linear forwards;
	-moz-animation:initDesktop 0.3s 1.6s linear forwards;
}

/*-----------------------------------------------------------------------------------*/
/*	03.	Desktop
/*-----------------------------------------------------------------------------------*/

#page {
	background:url(/assets/macosx/Andromeda-Galaxy.jpg);
	background-size:100% 100%;
	background-repeat:no-repeat;
	width:100%;
	height:100%;
	position:absolute;
	z-index:-1;
	font-family: "Lucida Grande", "Lucida Sans Unicode", sans-serif;
}
#page.vis {
	visibility:visible;
	opacity:1;
	z-index:0;
	-moz-animation:none;
	-webkit-animation:none;
}
#head.vis {
	visibility:visible;
	opacity:1;
	z-index:1000;
	-moz-animation:none;
	-webkit-animation:none;
}
#head {
	visibility:hidden;
	opacity:0;
	background: #e9e9e9;
	background: -moz-linear-gradient(top,  #e9e9e9 0%, #bbbabb 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e9e9e9), color-stop(100%,#bbbabb));
	width:100%;
	height:21px;
	position:fixed;
	z-index:1000;
	border-bottom:1px solid #444444;
	box-shadow:0px 0px 10px #141414;
	-webkit-user-select:none;
	-moz-user-select:none;
	user-select:none;
}
#head nav#menu-dx{
	position:absolute;
	right:10px;
	top:0;
	line-height:21px;
}
#head nav#menu-dx ul {
	margin:0;
	padding:0;
}
#head nav#menu-dx ul li {
	float:left;
	position:relative;
	height:21px;
}
#head nav#menu-dx ul li.wireless a {
	background:url(/assets/macosx/wireless-icon.png) 6px 2px no-repeat;
    display: block;
    position: relative;
    text-indent: -9999px;
	width:25px;
	height:21px;
	top:0px;
	padding:0 5px;
}
#head nav#menu-dx ul li.username a {
	font-weight:bold;
}
#head nav#menu-dx ul li.time {
	font-size:13px; 
	color:#000;
	text-shadow: 0 1px 1px #dbdbdb;
	padding:0 5px;
}
#head nav#menu-dx ul li.time #DateAbbr {
	padding-right:5px;
}
#head nav#menu-dx ul li a {
	display:block;
	color:#000;
	font-size:13px;
	text-decoration:none;
	text-shadow: 0 1px 1px #dbdbdb;
	padding:0 5px;
	font-weight:400;
}

#head nav#menu{
	position:absolute;
	left:10px;
	top:0;
	line-height:21px;
}
#head nav#menu ul {
	margin:0;
	padding:0;
}
#head nav#menu ul li {
	float:left;
	position:relative;
	height:21px;
}
#head nav#menu ul li.apple a {
	background:url(/assets/macosx/apple-logo.png) no-repeat 10px 1px;
    display: block;
    position: relative;
    text-indent: -9999px;
    top: 0;
	padding:0 10px 0 10px;
    width: 20px;
	height: 21px;
}
#head nav#menu ul li a {
	display:block;
	color:#000;
	font-size:13px;
	text-decoration:none;
	text-shadow: 0 1px 1px #dbdbdb;
	padding:0 10px;
	font-weight:400;
}
#head nav#menu ul li.here a {
	font-weight:bold;
}
#head nav#menu ul li:hover {
	background: #7793f5;
	background: -moz-linear-gradient(top,  #7793f5 0%, #406df2 50%, #275af1 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7793f5), color-stop(50%,#406df2), color-stop(100%,#275af1));
	border-bottom:1px solid #1746d7;
}
#head nav#menu ul li:hover a {
	color:#fff;
	text-shadow:none;
}
#head nav#menu ul li.apple:hover a {
	background-position:10px -19px;
}

#head nav#menu ul li ul.sublist {
	float: left;
    left: 0;
	top:22px;
	list-style:none;
    margin: 0;
    padding: 0;
    position: absolute;
	background:rgba(255,255,255,0.95);
	box-shadow:0 6px 12px rgba(0,0,0,0.7);
	border-radius:0 0 5px 5px;
	visibility:hidden;
}
#head nav#menu ul li ul.sublist li {
    clear: both;
    padding: 0;
	margin:0;
	padding:0 0 0 22px;
	width:200px;
	font-size:13px;
	line-height:20px;
}
#head nav#menu ul li:hover ul.sublist {
	visibility:visible;
}
#head nav#menu ul li ul.sublist li:hover {
	color:#fff;
}
#head nav#menu ul li ul.sublist li a {
	color:#000;
	text-indent:0;
    width: 200px;
	background-image:none;
	padding:0;
	font-weight:normal;
	display:block;
}
#head nav#menu ul li ul.sublist li:hover a {
	color:#fff;
}
#head nav#menu ul li ul.sublist li:first-child {
	margin:5px 0 0 0;
}
#head nav#menu ul li ul.sublist li:last-child {
	margin:0 0 5px 0;
}
#head nav#menu ul li ul.sublist li.divider {
	border-top:1px solid #e2e2e2;
	height:1px;
	background:none;
	margin:5px 0 4px 0;
}
#head nav#menu ul li ul.sublist li.divider:hover {
	border-top:1px solid #e2e2e2;
}
#head nav#menu ul li ul.sublist li:hover {
	border:none;
}
#head nav#menu ul li ul.sublist li.disable {
	color:#969696;
}
#head nav#menu ul li ul.sublist li.disable:hover {
	background:none;
}
#head nav#menu ul li ul.sublist li span.arrow {
	position:relative;
	display:inline-block;
	width:0;
	height:0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent; 
    border-left:9px solid rgba(0,0,0,0.5);
	top:5px;
	right:10px;
	text-indent:-9999px;
	float:right;
}
#head nav#menu ul li ul.sublist li:hover span.arrow {
	border-left-color:#fff;
}
#head nav#menu ul li ul.sublist li.disable span.arrow, #head nav#menu ul li ul.sublist li.disable:hover span.arrow {
	border-left-color:rgba(0,0,0,0.35);
}
#head nav#menu ul li ul.sublist li ul.sublist-menu {
	float: left;
    left: 100%;
	top:-5px;
	list-style:none;
    margin: 0;
    padding: 0;
    position: absolute;
	background:rgba(255,255,255,0.95);
	box-shadow:4px 9px 12px rgba(0,0,0,0.7);
	border-radius:0 5px 5px 5px;
	visibility:hidden;
	color:#000;
}
#head nav#menu ul li ul.sublist li ul.sublist-menu li {
    clear: both;
    padding: 0;
	margin:0;
	padding:0 0 0 22px;
	width:200px;
	font-size:13px;
	line-height:20px;
}
#head nav#menu ul li ul.sublist li:hover ul.sublist-menu {
	visibility:visible;
}
#head nav#menu ul li ul.sublist li ul.sublist-menu li:hover {
	color:#fff;
}
#head nav#menu ul li ul.sublist li ul.sublist-menu li:first-child {
	margin:5px 0 0 0;
}
#head nav#menu ul li ul.sublist li ul.sublist-menu li:last-child {
	margin:0 0 5px 0;
}
#head nav#menu ul li ul.sublist li ul.sublist-menu li.divider {
	border-top:1px solid #e2e2e2;
	height:1px;
	background:none;
	margin:5px 0 4px 0;
}
#head nav#menu ul li ul.sublist li ul.sublist-menu li.divider:hover {
	border-top:1px solid #e2e2e2;
}
#head nav#menu ul li ul.sublist li ul.sublist-menu li:hover {
	border:none;
}
#head nav#menu ul li ul.sublist li ul.sublist-menu li.disable {
	color:#969696;
}
#head nav#menu ul li ul.sublist li ul.sublist-menu li.disable:hover {
	background:none;
}

a.button.about {
	width:118px;
}
a.button {
	display: inline-block;
	height: 16px;
	line-height: 16px;
	font-size: 11px;
	border-radius: 4px;
	border:1px solid #9a9a9a;
	text-decoration: none;
	font-family: "Lucida Grande", "Lucida Sans Unicode", sans-serif;
	font-weight:normal;
	color: #000;
	text-shadow: 0 1px 0 rgba(255,255,255,0.09);
	background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0, #EBEBEB),color-stop(0.5, #ECECEC),color-stop(0.5, #F3F3F3),color-stop(1, #FFFFFF));
	background-image:-moz-linear-gradient( center bottom, #EBEBEB 0%, #ECECEC 50%, #F3F3F3 50%, #FFFFFF 100%);
	box-shadow:inset 0 1px 0 rgba(255,255,255,1), 0 1px 0 rgba(0,0,0,0.09);	
}

a.button:active {
	box-shadow:inset 0 16px 0 rgba(0,115,215,0.3), inset 0 1px 0 rgba(255,255,255,1), 0 1px 0 rgba(0,0,0,0.09);
	background-image:-webkit-gradient( linear, left bottom, left top, color-stop(0, #D3F7FD), color-stop(0.5, #87C5FB), color-stop(0.5, #A1D1F9), color-stop(1, #D4E9FC));
	background-image:-moz-linear-gradient( center bottom, #D3F7FD 0%, #87C5FB 50%, #A1D1F9 50%, #D4E9FC 100% );
	border-top-color:#5a5caf;
	border-bottom-color:#52536f;
	border-left-color:#56578f;
	border-right-color:#56578f;
}

a.button.blink {
	height: 19px;
	line-height: 19px;
	font-size: 12px;
	text-align:center;
	float:right;
	margin:10px 0 10px 15px;
	padding:0 20px;
	box-shadow:inset 0 19px 0 rgba(0,115,215,0.3), inset 0 1px 0 rgba(255,255,255,1), 0 1px 0 rgba(0,0,0,0.09);
	background-image:-webkit-gradient( linear, left bottom, left top, color-stop(0, #D3F7FD), color-stop(0.5, #87C5FB), color-stop(0.5, #A1D1F9), color-stop(1, #D4E9FC));
	background-image:-moz-linear-gradient( center bottom, #D3F7FD 0%, #87C5FB 50%, #A1D1F9 50%, #D4E9FC 100% );
	border-top-color:#5a5caf;
	border-bottom-color:#52536f;
	border-left-color:#56578f;
	border-right-color:#56578f;
	-webkit-animation:blinking 1s infinite ease-in-out;
	-moz-animation:blinking 1s infinite ease-in-out;
}
a.button.simple {
	height: 19px;
	line-height: 19px;
	font-size: 12px;
	text-align:center;
	float:right;
	margin:10px 0 10px 15px;
	padding:0 20px;
	box-shadow:inset 0 1px 0 rgba(255,255,255,1), 0 1px 0 rgba(0,0,0,0.09);	
	background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0, #EBEBEB),color-stop(0.5, #ECECEC),color-stop(0.5, #F3F3F3),color-stop(1, #FFFFFF));
	background-image:-moz-linear-gradient( center bottom, #EBEBEB 0%, #ECECEC 50%, #F3F3F3 50%, #FFFFFF 100%);
}
a.button.blink:active, a.button.simple:active {
	box-shadow:inset 0 19px 0 rgba(0,115,215,0.3), inset 0 1px 0 rgba(255,255,255,1), 0 1px 0 rgba(0,0,0,0.09);
	background-image:-webkit-gradient( linear, left bottom, left top, color-stop(0, #D3F7FD), color-stop(0.5, #87C5FB), color-stop(0.5, #A1D1F9), color-stop(1, #D4E9FC));
	background-image:-moz-linear-gradient( center bottom, #D3F7FD 0%, #87C5FB 50%, #A1D1F9 50%, #D4E9FC 100% );
	border-top-color:#5a5caf;
	border-bottom-color:#52536f;
	border-left-color:#56578f;
	border-right-color:#56578f;
	-moz-animation:none;
	-webkit-animation:none;
}

@-webkit-keyframes blinking {
	0% { -webkit-box-shadow:inset 0 19px 0 rgba(0,115,215,0), inset 0 1px 0 rgba(255,255,255,1), 0 1px 0 rgba(0,0,0,0.09);}
	50% { -webkit-box-shadow:inset 0 19px 0 rgba(0,115,215,0.2), inset 0 1px 0 rgba(255,255,255,1), 0 1px 0 rgba(0,0,0,0.09);}
	100% { -webkit-box-shadow:inset 0 19px 0 rgba(0,115,215,0), inset 0 1px 0 rgba(255,255,255,1), 0 1px 0 rgba(0,0,0,0.09); }
}

@-moz-keyframes blinking {
	0% { -moz-box-shadow:inset 0 19px 0 rgba(0,115,215,0), inset 0 1px 0 rgba(255,255,255,1), 0 1px 0 rgba(0,0,0,0.09);}
	50% { -moz-box-shadow:inset 0 19px 0 rgba(0,115,215,0.2), inset 0 1px 0 rgba(255,255,255,1), 0 1px 0 rgba(0,0,0,0.09);}
	100% { -moz-box-shadow:inset 0 19px 0 rgba(0,115,215,0), inset 0 1px 0 rgba(255,255,255,1), 0 1px 0 rgba(0,0,0,0.09); }
}

/*-----------------------------------------------------------------------------------*/
/*	04.	Support Browser
/*-----------------------------------------------------------------------------------*/

#fail {
	background: url(/assets/macosx/gradient.png) no-repeat center, url(/assets/macosx/background.png) repeat left top #000;
	width:100%;
	height:100%;
	position:absolute;
	z-index:0;
	visibility:hidden;
}

#fail .fail-browser-logo {
	position:absolute;
	width:120px;
	height:120px;
	left:50%;
	top:50%;
	margin-left:-60px;
	margin-top:-60px;
	margin-bottom:60px;
}
#fail.visible {
	visibility:visible;
}
#fail .fail-browser {
	position:absolute;
	left:50%;
	top:70%;
	width:1100px;
	margin-left:-550px;
	text-align:center;
	font-size:24px;
	line-height:40px;
	color:rgba(0,0,0,0.69);
	text-shadow:0 1px 1px rgba(153,153,153,0.45);
}
#fail .fail-browser a {
	text-decoration:none;
	color:rgba(190,190,190,0.95);
	text-shadow:0 1px 1px rgba(153,153,153,0.45);
}
#fail .fail-browser a:hover {
	text-shadow:0 0px 5px rgba(153,153,153,0.95);
}

Pop out