html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    color: #000;
    background-color: #fff;
    font-family: Arial, sans-serif;
    text-align: center;
}


#outer {
    min-height: 100%;
    background-color: #ddd;
    max-width: 900px;
    margin: auto; /* center it */
    text-align: left;

}


#header {
    background-color: #999;
}


#content {
    padding: 0 2em;
    margin: 0 auto;
min-width: 800px;
}

h1 {
margin: 0 1em;
font-size: 1.5em;
}

select {
    margin: .5em 0;
    font-size: .8em;
}

label {
    display: block;
    padding: .2em .5em;
    background-color: #eee;
}

#dashboard {
    float: right;
    width: 195px;
    font-size: .8em;
}

#desktop {
    float: left;
    height: 100%;
}

pre {
    margin: 0 0 0 0;
    padding: 0;
    }
#predef {
    color: 222;
    }
#frame {
    border-left: 10px solid #000;
    border-right: 10px solid #000;
    background-color: #fff;
    line-height: 1.2;
}

#modeline {
    background-color: #666;
    color: #000;
}

#prompt {
    color: #7299ff;
}
.builtin {

}

.region {
    background-color: #999;
    }
.comment {

}

.constant {
}

.function {
}

.keyword {

}

.string {
}

.type {
}

.variable {
}

.warning {
}

#cursor {
    background-color: #333;
}

#config {
    position: absolute;
    z-index: 9000;
    width: 600px;
    background-color: #eee;
    border: 5px solid #000;
    display: none;
    padding: 10px;
    
}

.confarea {
    width: 500px;
    height: 400px;
    margin: 1em;
}

#close {
    margin: 5px;
    color: blue;
}

#generate {
margin: .5em 0;
width: 195px;
}

#configname {
    margin: .3em 0;
    padding: 0;
    width: 190px;
}

.farbtastic {
  position: relative;
}
.farbtastic * {
  position: absolute;
  cursor: crosshair;
}
.farbtastic, .farbtastic .wheel {
  width: 195px;
  height: 195px;
}
.farbtastic .color, .farbtastic .overlay {
  top: 47px;
  left: 47px;
  width: 101px;
  height: 101px;
}
.farbtastic .wheel {
  background: url(wheel.png) no-repeat;
  width: 195px;
  height: 195px;
}
.farbtastic .overlay {
  background: url(mask.png) no-repeat;
}
.farbtastic .marker {
  width: 17px;
  height: 17px;
  margin: -8px 0 0 -8px;
  overflow: hidden; 
  background: url(marker.png) no-repeat;
}



html, body, ul, ol, li, dl, dt, dd, p,
h1, h2, h3, h4, h5, h6, blockquote,
form, fieldset, legend, table, td, th {
    margin: 0;
    padding: 0;
}

body {
    background: #efede9;
    color:#505250;
    font-family:Helvetica,Arial,Sans-Serif;
    background:url(bar.gif) repeat-x #efede9;
}

pre {
    font-size: 1.1em;
}

.wrapper {
position: relative;
margin: 0 auto;
width: 980px;
}

.header {
    height: 100px;
    background: #343430;
}

.header h1 a {
text-decoration: none;
color: #696969;
font-size:1.5em;
font-weight:normal;
margin-left: -620px;
}

.nav-wrapper {
position: absolute;
height: 60px;
top: 50px;
}

ul.nav {
position: relative;
height:40px;
top: 20px;
}

ul.nav li {
position: relative;
list-style:none;
float:left;
margin-left: 10px;
background: #343430;
}

ul.nav li.selected {
background: #eee;
}

ul.nav li a {
display: block;
font-size: 16px;
height: 30px;
padding: 0 10px;
text-decoration: none;
color: #eee;
line-height: 30px;
}

ul.nav li.selected a {
color: #333;
}

ul.nav li.selected .tab-l {
position: absolute;
width: 10px;
height: 20px;
top: 0;
background-image: url(corners.png); 
background-repeat: no-repeat;
}

ul.nav li.selected  .tab-r {
position: absolute;
width: 10px;
height: 20px;
background-image: url(corners.png); 
background-position: -10px 0;
background-repeat: no-repeat;
right: 0;
top: 0;
}


.sidebar {
margin-top: 1em;
float: right;
width: 300px;
}

.clear {clear:both;}

.content {
margin-top: 1em;
margin-left: 80px;
float: left;
width: 550px;
}

.content a:hover, .sidebar a:hover {
    color:#505250;    
}
.content, .sidebar {
line-height: 1.6;
}

.content p, .sidebar p {
margin-top: 1em;
}

.content a, .sidebar a {
    color:#333;
}

.content h3 {
    margin: 1em 0;
}