<meta name="description" content="" />
  <meta name="keywords" content=", thought, idea, resources, concept, words, definition, zurbword, wiki, information, zurb, design strategy, inteaction design, UI" />
   
  <meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0; user-scalable=1;" />
  <link rel="apple-touch-icon" href="/iphone.png" />
   
  <meta name="author" content=" ZURB, inc." />
  <meta name="copyright" content="ZURB, inc. Copyright (c) 2012" />
  <meta name="verify-v1" content="FIGJ61mNGm8gsksgklVzG71j7+Q0u6zTDF+VE9vA/8k=" />
   
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <meta http-equiv="Content-Script-Type" content="text/javascript" />
  <meta http-equiv="imagetoolbar" content="no" />

   
  <script type="text/javascript" src="/javascripts/jquery.js"></script>
  <script type="text/javascript" src="/playground/osx-dock/jquery.tipsy.js"></script>

  <script type="text/javascript">
  // Place all Javascript code here

  $(document).ready(function(){
  $("a[rel=tipsy]").tipsy({fade: false, gravity: "s"});

  $("ul.osx-dock li").each(function (type) {
  $(this).hover(function () {
  $(this).prev("li").addClass("nearby");
  $(this).next("li").addClass("nearby");
  },
  function () {
  $(this).prev("li").removeClass("nearby");
  $(this).next("li").removeClass("nearby");
  });
  });
  });
   
  </script>

  <script src="/javascripts/jquery.reveal.js?1326997745" type="text/javascript"></script>
  <style media="print">
  /* --------------------------------------------------
  =ZURB Print Styles
  -------------------------------------------------- */
   
   
  /* --------------------------------------------------
  =Killing the Unneeded Sections
  -------------------------------------------------- */  
   
   
  #adminHeader,
  #ZURBar,  
  div#sidebar,
  ul.tabs li,  
  #site-info div#zurbword,  
  #site-info div#zurbnews,
  #site-info div#footer { display: none !important; }
   
  #site-info div#zurbcontact { border-top: 2px solid #e0e0e0; padding-top: 10px; width: 400px; }
   
  ul.tabs li.current { display: block !important; margin: -7px -30px 0 0; }
  li.current a span { color: #000; background-color: green; }
   
   
  /* Stripping the Blog --------- */
   
  div#content ul.options,
  div.post-header ul.admin,  
  div#pageHeader,
  div#content-sec div,
  div#content-main div.footer,
  div#content-main div#comments { display: none !important; };

  div.column-row div#content-main { width: 20%; }
   
  body#showPage div#content-main div.post { width: 120%; }
  div#content-sec div#aboutZURBlog { display: block !important; width: 70%; margin-left: 80px; }
   
  div.secondary.page-header { display: none !important; }
   
  div#content-main { font-size: 15px; line-height: 17px;}
   
  div.post-header h2 { font-size: 26px; }
  div.body { font-size: 16px; line-height: 19px; }

  body#showPage div#content-main blockquote,
  body#showPage div#content-main blockquote p { color: #555; }
   
  div.vcard ul. div.vcard address, div.vcard p { color: 000; }
   

   

  </style>
<link href="/stylesheets/cache/layouts/playground.css?1326997745" media="all" rel="stylesheet" type="text/css" /> <style media="all">.header-block { height: 246px;}

.ad-wrap { padding:17px 63px 15px !important;height: 130px;}

ul.nav li#ZURBmenu a { }
ul.nav li#ZURBmenu a img { display: none !important; }
ul.nav li#ZURBmenu strong { background: transparent url(/playground/zurb-nub.png); }
ul.nav li#ZURBmenu a:hover strong { background-color: none; }
ul.nav li#ZURBmenu a:hover strong img { display: block; }

div#header img { }
div#header h4 { margin: 0; }
div#header h4 a { float: left; margin: 20px 0 0 15px; padding: 5px 0 1px 14px; color: #777; font-weight: normal; border-left: 1px solid #ddd; }
a.follow-us { background: url(/images/icons/24px/twitter-inset.png) no-repeat 0 center; display: block; float: right; margin: 25px 0 0; padding-left: 30px; line-height: 24px; color: #333; font-size: 14px; }
a.follow-us:hover { color: #555; }
a#followUs { float: right; margin-top: 20px; }
a#getAJob { float: right; margin-top: 20px; margin-right: 20px; }
a#followUs span { background: url(/images/icons/16px/twitter-inset.png) no-repeat 10px 3px; padding-left: 30px; }

div.page-header h2 { letter-spacing: 0; }

div.page-header.playground{-moz-background-clip:border; -moz-background-origin:padding; -moz-background-size:auto auto; background-attachment:scroll; background-color:transparent; background-image:url("/images/playground/robot.jpg"); background-position:99% 40%; background-repeat:no-repeat; height: auto; margin-top:0px; }

/* Quick fix for the playground footer */
div#siteInfo div#aboutPlayground h4 { margin-bottom: 9px; }

div.awesome.box { background: #efefef; margin: 0 0 18px 0; padding: 12px 0; -webkit-border-radius: 6px; -moz-border-radius: 6px; border: 1px solid #ddd; border-top-color: #ccc; width:200px; }
div.awesome.box div.divider { height: 0; margin: 0 14px 5px 14px; background-color: #ccc; width: 172px; border-bottom: 1px solid #ddd; }

div.awesome.box h4 a { display: block; color: #333; padding: 3px 0 5px 0; width: 100%; font-size: 16px; }

div.awesome.box li { margin-bottom: 5px; color: #333; text-decoration: none; }
div.awesome.box li a { display: block; width: 100%; color: #333; }
div.awesome.box a:hover { background: #007d9a; color: white; }
div.awesome.box a span { display: block; margin: 0 14px; }

div.awesome.box form input[type="text"] { margin: 0 10px; width: 150px; }

div.currentdemo { color: #888; margin-top: -17px; margin-bottom: 15px; }

div.currentdemo h2 {margin-top: -14px;}

ul.photos.playground.slide li { float:left; height:100px; margin-bottom:0px; margin-left: 20px; margin-right:0; margin-top:0px; position:relative; width:300px;}
ul.photos.playground.slide li p { margin-left: 160px; margin-top: -90px; }
ul.photos.playground.slide li strong { display: block; }

div.currentdemo.right { color: #888; margin-bottom: 0; float: left; }

div.currentdemo.right h2 {margin-top: }

div.selectorleft {margin-left: -25px; top: 125px; position: absolute; z-index: 2}

div.selectorright {margin-left: 567px; top: 125px; position: absolute; z-index: 2}

div.indicator { position: absolute; margin-left: 545px; margin-top: 0px;}

div.indicator ul li {display: inline;}

p.slideinfo {width: 450px; margin-top: 5px; font-size: 15px;}</style>  

   
   
   
  <style type="text/css">
  /* Place all stylesheet code here */

   
  div#footer { padding: 0 0 36px; }
   
  div#pageHeader h1 { font-size: 45px; margin-bottom: 4px; color: #fff; text-shadow: 0px 2px 5px rgba(0,0,0,0.5); }
  div#pageHeader p { font-size: 18px; line-height: 24px; margin-right: 25%; margin-bottom: 20px; color: #ccc; text-shadow: 0px 1px 2px rgba(0,0,0,0.5); }
  div#pageHeader p small { font-size: 14px; line-height: 18px; color: #; opacity: .75; }

  div.zurb.divider { background-image: url(/playground/osx-dock/zurb-divider.png); }

  pre { background: #f5f5f5; margin: 0 0 18px; padding: 13px 18px 14px; -webkit-border-radius: 3px; -moz-border-radius: 3px; text-shadow: 0 1px 1px #fff; font-size: 11px; line-height: 16px; }
   
  code { background: rgba(0,0,0,.5); padding: 2px 3px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.75); -webkit-border-radius: 3px; -moz-border-radius: 3px; }
   
  ol.code { background: rgba(0,0,0,.75); margin-bottom: 18px; border: solid rgba(0,0,0,.75); border-width: 1px 1px 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-box-shadow: 0 1px 1px rgba(255,255,255,.5); }
  ol.code li, ol.code li code { font-size: 14px !important; }
  ol.code code { background: none; }

  /* -------------------------------------------------- */
   
  div.cap { display: block; height: 100px; width: 40px; background: url(/playground/osx-dock/dock-background-left.png) bottom left no-repeat; }
   
  div.cap.left { position: absolute; bottom: 0px; left: 0px; }
  div.cap.right { background-position: right bottom; position: absolute; top: 0px; right: 0px; }
  ul.osx-dock { display: inline-block; height: 130px; padding: 0 40px 0 0; background: url(/playground/osx-dock/dock-background-left.png) no-repeat right bottom; overflow: hidden; margin: 0 0 0 40px; }
  ul.osx-dock li { display: block; position: relative; float: left; width: 50px; height: 50px; margin: 60px 0 4px 0; -webkit-transition: 0.15s linear; -webkit-transition-property: -webkit-transform margin; text-align: center; }
   
  ul.osx-dock li a { display: block; height: 50px; padding: 0 1px; -webkit-transition: 0.15s linear; -webkit-transition-property: -webkit-transform margin; margin: 0;
  -webkit-box-reflect: below 2px
  -webkit-gradient(linear, left top, left bottom, from(transparent),
  color-stop(0.45, transparent), to(rgba(255, 255, 255, 0.25)));
  }
  ul.osx-dock li a img { width: 48px; }
   
  ul.osx-dock li:hover {  
  margin-left: 9px; margin-right: 9px;
  z-index: 200;
  }
  ul.osx-dock li:hover a {  
  -webkit-transform-origin: center bottom;
  -webkit-transform: scale(1.5);
  }
  ul.osx-dock li.nearby {  
  margin-left: 6px; margin-right: 6px;
  z-index: 100;
  }
  ul.osx-dock li.nearby a {  
  -webkit-transform-origin: center bottom;
  -webkit-transform: scale(1.25);
  }

  ul.osx-dock li span { background: rgba(0,0,0,0.75); position: absolute; bottom: 80px; margin: 0 auto; display: none; width: auto; font-size: 11px; font-weight: bold; padding: 3px 6px; -webkit-border-radius: 6px; color: #fff; }
  ul.osx-dock li:hover span { display: block; }
   
  div#dockContainer { position: fixed; bottom: 12px; height: 120px; padding: 50px 0 0; text-align: center; -webkit-border-radius: 6px; -moz-border-radius: 6px; width: 100%; line-height: 1; z-index: 100; }
  div#dockWrapper { width: auto; display: inline-block; position: relative; border-bottom: solid 2px rgba(255,255,255,.35); line-height: 0; }

  </style>

  <div id="dockContainer">
  <div id="dockWrapper">
   
  <div class="cap left"></div>
  <ul class="osx-dock">
  <li class="active">
  <span>ZURB</span>
  <a href="http://www.zurb.com" title="ZURB"><img src="http://www.zurb.com//playground/osx-dock/zurb-icon.png" /></a>
  </li>
  <li>
  <span>LinkedIn</span>
  <a href="http://www.linkedin.com" title="LinkedIn"><img src="http://www.zurb.com//playground/osx-dock/linkedin-icon.png" /></a>
  </li>
  <li>
  <span>Notable</span>
  <a href="http://www.notableapp.com" title="Notable"><img src="http://www.zurb.com//playground/osx-dock/notable-icon.png" /></a>
  </li>
  <li>
  <span>last.fm</span>
  <a href="http://www.last.fm" title="Last.fm"><img src="http://www.zurb.com//playground/osx-dock/lastfm-icon.png" /></a>
  </li>
  <li>
  <span>Facebook</span>
  <a href="http://www.facebook.com" title="Facebook"><img src="http://www.zurb.com//playground/osx-dock/facebook-icon.png" /></a>
  </li>
  <li>
  <span>Google</span>
  <a href="http://www.google.com" title="Google"><img src="http://www.zurb.com//playground/osx-dock/google-icon.png" /></a>
  </li>
  <li>
  <span>Notable</span>
  <a href="http://www.notableapp.com" title="Notable"><img src="http://www.zurb.com//playground/osx-dock/notable-icon.png" /></a>
  </li>
  <li>
  <span>last.fm</span>
  <a href="http://www.last.fm" title="Last.fm"><img src="http://www.zurb.com//playground/osx-dock/lastfm-icon.png" /></a>
  </li>
  <li>
  <span>Facebook</span>
  <a href="http://www.facebook.com" title="Facebook"><img src="http://www.zurb.com//playground/osx-dock/facebook-icon.png" /></a>
  </li>
  <li>
  <span>Google</span>
  <a href="http://www.google.com" title="Google"><img src="http://www.zurb.com//playground/osx-dock/google-icon.png" /></a>
  </li>
  </ul>
  </div>
  </div>