/*
Author: Jay Robinson
Author URI: http://jayrobinson.org/
Version: 1.0
Description: Make a regular web directory emulate Coda's Sites View
More information: http://jwr.cc/x/1i
*/

/* General Reset */
* { 
  margin: 0; 
  padding: 0; 
}

/* Keeps the vertical scroll bar from disappearing */
html {
  height: 100%;
  margin-bottom: 1px;
}

/* Some beautiful CSS3 gradients. Supposedly Mozilla is going to support 
   gradients, but not sure when. Also, we'll set Lucida Grande to make it 
   look more like Mac OS X. */
body {
  background-color: #7E7E7E;
  background: -moz-gradient(linear, left top, left bottom, from(#7E7E7E), to(#424242));
  background: -webkit-gradient(linear, left top, left bottom, from(#7E7E7E), to(#424242));
  background-attachment: fixed;
  font: 13px/18 "Lucida Grande";
  overflow-x: hidden;
  padding: 25px 25px 100px;
}

/* HTML5! The header is not really a valid use of the header tag. 
   It is simply the drop shadow that gives the viewport a nice depth effect. */
header {
  background: -moz-gradient(linear, left top, left bottom, from(#666), to(transparent));
  background: -webkit-gradient(linear, left top, left bottom, from(#999), to(transparent));
  display: block;
  height: 30px;
  position: fixed;
  top: -20px;
  left: 0;
  width: 100%;
  z-index: 10;
}

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The text-shadow property helps the white font pull off the dark background. 
   RGBA values: 0,0,0 means no color, so, black. The 0.9 designates 90% opacity. */
ul a:link, ul a:visited, ul a:hover, ul a:focus, ul a:active {
  color: white;
  float: left;
  font-weight: bold;
  line-height: 1.3em;
  margin: 0 50px 70px 0;
  outline: none;
  padding: 0 0 0 0;
  text-align: center;
  text-decoration: none;
  text-shadow: rgba(0,0,0,0.9) 1px 1px 0;
  -moz-text-shadow: rgba(0,0,0,0.9) 1px 1px 0;
  -webkit-text-shadow: rgba(0,0,0,0.9) 1px 1px 0;
  white-space: nowrap;
  height: 128px;
  width: 96px;
}

/* Remember that outline does not affect layout. These properties let us have 
   that pretty blue halo effect around the site. Looks better in Safari, obviously. */
ul a img:hover, ul a img:focus, ul a img:active {
  outline: auto 8px -webkit-focus-ring-color;
  outline-offset: -2px;
  -moz-outline: -moz-mac-focusring solid 5px;
  -moz-outline-offset: -3px;
}

/* Here we see the first use of a CSS3 transform. The transform merely rotates 
   the img element 3 degrees counter-clockwise. Box-shadow is also a lot of fun. */
ul a img {
  background-color: white;
  border: none;
  display: block;
  height: 128px;
  width: 96px;
  margin: 0 10px 12px 0;
  box-shadow: rgba(0,0,0,0.9) -1px 2px 5px;
  -moz-box-shadow: rgba(0,0,0,0.9) -1px 2px 5px;
  -webkit-box-shadow: rgba(0,0,0,0.9) -1px 2px 5px;
  transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
}

ul a img:active {
  opacity: .6;
  margin: 1px 0 11px 1px;
}

/* HTML5! Again, probably not a valid use, but still fun. Note that the position 
   is fixed so the footer attaches to the bottom of the viewport no matter how 
   you scroll. However, position:fixed is currently unsupported on iPhone. */
footer {
  background-color: #333;
  display: block;
  padding: 1px 0 0;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

/* Note how I put a single div inside the footer while the footer element has 
   1px for padding-top. This, in addition to the lighter border-top on this 
   element creates a bevel effect. */
footer>div {
  background-color: #7E7E7E;
  border-top: 1px solid rgba(255,255,255,0.33);
  height: 32px;
  padding: 10px 14px;
}

footer div input {
  background: #ddd;
  border: 1px solid #444;
  float: right;
  font-size: 13px;
  height: 28px;
  padding: 3px;
  width: 220px;
  box-shadow: rgba(255,255,255,0.9) 0 0 1px;
  -moz-box-shadow: rgba(255,255,255,0.9) 0 0 1px;
  -webkit-box-shadow: rgba(255,255,255,0.9) 0 0 1px;
}

footer div a:link, footer div a:visited, footer div a:hover, footer div a:focus, footer div a:active {
  background-color: #ccc;
  background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#ccc));
  border: 1px solid #444;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  color: black;
  display: block;
  float: left;
  font-weight: normal;
  height: 14px;
  line-height: 13px;
  outline: none;
  padding: 6px 10px;
  text-align: center;
  text-decoration: none;
  text-shadow: rgba(255,255,255,0.9) 1px 1px 0;
  -moz-text-shadow: rgba(255,255,255,0.9) 1px 1px 0;
  -webkit-text-shadow: rgba(255,255,255,0.9) 1px 1px 0;
  box-shadow: rgba(255,255,255,0.9) 0 0 1px;
  -moz-box-shadow: rgba(255,255,255,0.9) 0 0 1px;
  -webkit-box-shadow: rgba(255,255,255,0.9) 0 0 1px;
  width: 120px;
}

/* Should have used a button element, in hindsight. */
footer div a:hover, footer div a:focus {
  background-color: #bebebe;
  background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#bebebe));
  border: 1px solid #444;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  color: black;
  display: block;
  float: left;
  font-weight: normal;
  height: 14px;
  line-height: 13px;
  outline: none;
  padding: 6px 10px;
  text-align: center;
  text-decoration: none;
  text-shadow: rgba(255,255,255,0.9) 1px 1px 0;
  -moz-text-shadow: rgba(255,255,255,0.9) 1px 1px 0;
  -webkit-text-shadow: rgba(255,255,255,0.9) 1px 1px 0;
  box-shadow: rgba(255,255,255,0.9) 0 0 1px;
  -moz-box-shadow: rgba(255,255,255,0.9) 0 0 1px;
  -webkit-box-shadow: rgba(255,255,255,0.9) 0 0 1px;
  width: 120px;
}

footer div a:active {
  background-color: #bebebe;
  background: -webkit-gradient(linear, left top, left bottom, from(#bebebe), to(#f9f9f9));
  border: 1px solid #444;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  color: black;
  display: block;
  float: left;
  font-weight: normal;
  height: 14px;
  line-height: 13px;
  outline: none;
  padding: 6px 10px;
  text-align: center;
  text-decoration: none;
  text-shadow: rgba(255,255,255,0.9) 1px 1px 0;
  -moz-text-shadow: rgba(255,255,255,0.9) 1px 1px 0;
  -webkit-text-shadow: rgba(255,255,255,0.9) 1px 1px 0;
  box-shadow: rgba(255,255,255,0.9) 0 0 1px;
  -moz-box-shadow: rgba(255,255,255,0.9) 0 0 1px;
  -webkit-box-shadow: rgba(255,255,255,0.9) 0 0 1px;
  width: 120px;
}

/* A pretty little bar created with border-radius. */
#slider.ui-slider-horizontal {
  background: #444;
  border: 1px solid #000;
  border-color: #000 rgba(255,255,255,0.5) rgba(255,255,255,0.5) #000;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  float: right;
  height: 4px;
  margin: 14px 14px 0 0;
  padding: 0;
  position: relative;
  width: 140px;
}

/* A pretty little circle created with border-radius. */
#slider a.ui-slider-handle {
  background: #fff;
  background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#ddd));
  border: 1px solid rgba(0,0,0,0.9);
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  cursor: default;
  display: block;
  height: 2px;
  margin: 0;
  padding: 4px;
  position: absolute;
  top: -4px;
  width: 2px;
  z-index: 2;
}

#slider a.ui-slider-handle:focus {
  background: -webkit-gradient(linear, left top, left bottom, from(#78CAF4), to(#458DDF));
}

/* You are an ambitious young scholar. Thanks for reading this far. 
   Please tell your friends about this and bookmark my iPhone business card: http://jwr.cc/ */