/* mac&mabel stylesheet */

body { color: #666; background: #fff; font-size: 100%; font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; font-weight: bold; line-height: 1.5; text-align: center; }

a {color: #5C6046; text-decoration: none; }
a:hover {text-decoration: underline;}

#template { width: 960px; margin: 0 auto; }

#header, #content, #footer { padding-top: 10px; }

#footer, .navigation, h1, h2 { text-transform: lowercase; }

.tweetdate { color: #ccc; }
a.twitter { padding-left: 26px; background: transparent url(images/tweet.png) left top no-repeat; }

h1, h2, #footer a { font-size: 180%; letter-spacing: -0.1em; margin: 0;}
h1, #footer a  { color: #B2E0FF; }
h2 { color: #99CC00; }

.logo { display: block; background: transparent url(images/macmabel.png); width: 600px; height: 195px; margin: 0 auto; }
.logo span { display: block; text-indent: -88888px; overflow: hidden; width: 600px; height: 195px; }

#footer span, #footer span a { color: #ccc; font-size: 100%; }

/* Coda Slider */

#slider {
  width: 920px;
  margin: 20px auto;
  position: relative;
}

ul.navigation { margin: 0; padding: 20px;}

.navigation li { display: inline-block; list-style-type: none;  background: transparent url(images/selected.png) center no-repeat; height: 2em; }

.navigation a { color: #fff; padding: 10px 20px; background: #99CC00; -moz-border-radius: 10px;
-webkit-border-radius: 10px;}

.navigation a:hover { text-decoration: none; color: #B2E0FF; background: #fff;  }

a.selected, a.selected:hover { color: #fff; visibility: hidden; }

.scroll {
  height: 400px;
  overflow: auto;
  position: relative; /* fix for IE to respect overflow */
  clear: left;
  background: #FFFFFF url(images/content_pane-gradient.gif) repeat-x scroll left bottom;
}

.scrollContainer div.panel {
  padding: 0 20px;
  height: 210px;
  width: 880px; /* change to 560px if not using JS to remove rh.scroll */
}

.scrollButtons {
  position: absolute;
  top: 150px;
  cursor: pointer;
}

.scrollButtons.left {
  left: -20px; 
}

.scrollButtons.right {
  right: -20px;  
}

.hide {
    display: none;
}