body {
    color: black;
    font-family: Arial, Helvetica, sans-serif;    
}

h1, h2, h3, h4 {
    color: #8060f0;
}

div, table, tr, td{
    padding: 0px;
    margin:0px;
    border-width: 0px;
}

.main {
    padding: 20px;
}

.main p {
    max-width: 600px;
    line-height: 16pt;
}

.main p {    
    margin: 20px;
    padding: 5px;
    background-color: #ffffd0;
}

.grayBordered, .controls {
    border: 1px solid #dddddd;
    border-radius: 4px;
}

.prettyPresentation {    
    margin: 10px;
    padding: 5px;
}

.prettyPresentation span {
    padding: 10px;
    border: 2px solid #ffa0a0;
    border-radius: 4px;
    background-color: #ffe0e0;    
}

.controls {
    margin:20px;
    line-height: 24pt;    
}

.documentation {
    margin: 20px;
    border: 1px solid #e0e0c0;
    border-radius: 4px;
    background-color: #ffffd0;        
}

.documentation > div, .controls > div {
    padding: 5px;
}

.title {
    background-color: #8060f0;
    color:#ffffff;
    display:block;    
    padding:3px;
    font-weight: bold;
}

/** Dark blue style */
/* baseScroll */
.darkBlueBaseScroll {
    border: 1px solid #0000ff;
    background-color: #6565ff;        
}
/* bar */
.darkBlueBar {
    border: 1px solid #9595f0;
    background-color: #c0c0f0;
}

.darkBlueBar:hover {
    background-color: #e0e0ff;
}

.darkBlueButtons {
    border: 1px solid #909090;
    background-color: #808080;
}

.darkBlueButtons:hover {
    background-color: #b0b0b0;
}