* { margin: 0; padding: 0; }

body, dl.keyboard dt { font: 100%/1.5 Geneva, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; color: #333; }

h1, h2, h3, h4, h5, h6, dt, #nav ul { font-family: "Futura Medium", "Century Gothic", AppleGothic, sans-serif; }
h1 { background: url(img/say_hello_to.png) no-repeat top left; height:146px; width:310px; margin-top: 10px; }
h1 span { display:none; }
h2 { display: none; }
h4 { margin: 24px 0 16px -16px; font-size: 18px; font-weight: normal; }

a:link, a:active, a:visited { color: #666; }

p img, li img { vertical-align: text-top; border: 1px solid #666; }
img.opaque { background-color: #000; }

p { margin: 12px 0; }
div.blurb {  font-size: 13px; margin: 16px 0 40px; width: 700px; }

pre, code { font-size:13px; font-family: Consolas, "Lucida Console", Monaco, monospace; color: #000; }
pre { background-color: #EEE; padding: 16px 24px; }
pre.exec { background-color: #333; color: #BBB; padding-left: 40px; border: 2px solid #181818; *line-height: 1; }

dl { margin-left: 330px; width: 700px; padding-top: 32px; }
dt { font-size: 22px; font-weight:bold; }
dd { font-size:13px; margin: 32px 0 32px 32px; }

dl.api { font-size: 13px; padding: 2px; margin: 0; width: auto; padding: 0; line-height: 1.5em; border-bottom: 1px solid #DDD; }
dl.api dt { font-weight:normal; width: 100%; float:left; border-top: 1px solid #DDD; margin:0 0 -2em; padding: 1em 0; *margin-bottom:-4em; _margin-bottom: -2em; }
dl.api dd { padding: 1em 0 1em 200px; margin: 0;  }
dl.api dd.params { font-style: italic; }

dl.keyboard { padding: 2px; margin: 0; width: auto; padding: 0; line-height: 1.5em; }
dl.keyboard dt { font-size: 13px; height: 70px; margin-bottom: -90px; padding-top: 20px; width: 100px; text-align: right; }
dl.keyboard dd { background: url(img/keyboard_shortcuts.png) no-repeat top right; height: 70px; margin: 0 0 0 120px; }
dl.keyboard dd span { display: none; }

dd div.exec { position:absolute; top: 10px; left: -25px; _left: -65px; background: url(img/exec_button.png) no-repeat 0 100%; _background-image: url(img/exec_button.gif); display:block; width: 50px; height: 50px; }
.clickable pre.exec { color: #FFF; }
.clickable div.exec { background-position: 0 0; }
p.click-to-exec { margin: -5px; padding-top: 20px; }
div.cursor { cursor: pointer; }

li span { clear:left; float: left; width: 150px; }

#header { padding-left: 330px; }
#nav { padding-left: 330px; background-color: #333; border-top:1px solid #666; border-bottom:1px solid #999; }
#nav ul { list-style: none; overflow: hidden; font-weight:bold; width: 710px; margin-left: -20px; padding-left: 1px; }
#nav ul li { float: left; padding:0; border-left: 1px solid #333; border-right: 1px solid #333; margin-left: -1px; }
#nav ul li a:link,
#nav ul li a:hover,
#nav ul li a:active,
#nav ul li a:visited { display:block; line-height:3; padding:0 20px; text-decoration: none; color: #DDD; }
#content { background: url(img/gray_gradient.gif) repeat-x 0 -3px; }
#content ul, #content ol { list-style-position: inside; margin: 8px 0 8px 8px; }

/* text-shadow */
h4, dt { text-shadow:#AAA 0 1px 0; }
#nav ul { text-shadow:#333 0 0 1px; }
#nav ul li a:hover,
div.blurb, 
dl.api dt { text-shadow:#CCC 0 0 1px; }