amber/css/amber.css

body.amberBody {
    margin-bottom: 350px;
}

#amberTabs, #amber .amber_tabs {
    margin: 0;
    padding: 0;
    background: url("../images/sprite.amber.png") #DBD9C9 0 -27px;
    height: 22px;
    width: 100%;
    list-style: none;
    font-weight: bold;
}

#amberTabs li, #amber .amber_tabs li {
    padding: 0 1px;
    cursor: pointer;
    color: #565656;
	max-width: 200px;
	float:left;
}
#amber li {
	line-height: 14px;

}
#amber .ltab, #amber .rtab, #amber .mtab {
    height: 22px;
    float: left;
}

#amber .ltab, #amber .rtab {
    width: 8px;
}

#amber .rtab {
    margin-right: 1px;
}

#amber .mtab {
    line-height: 20px;
}

#amberTabs li:hover .ltab,
#amber .amber_tabs li:hover .ltab {
    background: url("../images/sprite.amber.png") -16px -96px;
}

#amberTabs li:hover .mtab,
#amber .amber_tabs li:hover .mtab {
    background: url("../images/sprite.amber.png") 0 -73px;
}

#amberTabs li:hover .rtab,
#amber .amber_tabs li:hover .rtab {
    background: url("../images/sprite.amber.png") -24px -96px;
}

#amberTabs li.selected,
#amber .amber_tabs li.selected {
    color: #111;
}

#amberTabs li.selected .ltab,
#amber .amber_tabs li.selected .ltab {
    background: url("../images/sprite.amber.png") 0px -96px;
}

#amberTabs li.selected .mtab,
#amber .amber_tabs li.selected .mtab {
    background: url("../images/sprite.amber.png") 0 -50px;
}

#amberTabs li.selected .rtab,
#amber .amber_tabs li.selected .rtab {
    background: url("../images/sprite.amber.png") -8px -96px;
}

#amberTabs li .close {
    margin-right: 5px;
    color: #aaa;
}

#amber {
       position: fixed;
       bottom: 0;
       left: 0;
       right: 0;
       height: 350px;
       z-index: 1000;
}

#amber, #amber button, #amber input, #amber select {
       font-family: Lucida Grande, Tahoma, sans-serif;
       font-size: 11px;
}

#amber #logo {
    position: absolute;
    top: 3px;
    left: 8px;
    width: 22px;
    height: 20px;
    background: url("../images/tinylogo.amber.png") top left no-repeat;
}

#amber #amber_toolbar {
    height: 27px;
    background: url("../images/sprite.amber.png") 0 0;
}

#amber #amber_toolbar input {
    margin-left: 50px;
    width: 250px;
    margin-top: 5px;
}

#amber #amber_toolbar #amber_close {
    position: absolute;
    right: 4px;
    top: 6px;
    width: 16px;
    height: 16px;
    background: url('../images/off.amber.png');
    cursor: pointer;
}

#amber #amber_toolbar #amber_close:hover {
    background: url('../images/offHover.amber.png');
}


#amber .ui-resizable-handle {
    background-color: transparent;
    top: 0;
    cursor: row-resize;
    height: 5px;
    left: 0;
    position: absolute;
    right: 0;
    width: auto !important;
}

.amberTool {
    width: 100%;
    color: #333;
    line-height: 1.3em;
    padding: 0;
    margin: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    top: 49px;
    z-index: 1000;
    background: white;
}

.amberTool .amber_box {
    width: 100%;
    margin: 0;
    position: absolute;
    top: 0;
    bottom: 27px;
}

.amberTool .amber_buttons {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 27px;
    line-height: 27px;
    background: url("../images/sprite.amber.png") 0 0 repeat;
}

.amberTool .amber_buttons .right {
    float: right;
}

.amberTool .important {
    font-weight: bold;
}


.amberTool button {
    border: 1px solid transparent;
    background: transparent;
    padding: 2px 4px;
    margin-left: 4px;
    cursor: pointer;
}

.amberTool button:hover {
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
}

.amberTool  button:active {
    border-top: 1px solid #bbb;
    border-left: 1px solid #bbb;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    background: #ddd;
}

.amberTool select, #amber input {
    border-top: 1px solid #bbb;
    border-left: 1px solid #bbb;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    background: #fff;
    display: inline;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    height: 14px;
    line-height: normal;
    box-shadow: none;
    outline: none;
    vertical-align:baseline;
}
.amberTool select {
    height:18px;
    width: auto;
}




.amberTool li {
    margin: 0;
    padding: 0;
}
    
.amberTool .source {
    height: 100%;
}

.amberTool textarea,
.amberTool input {
    border: 0 none;
    font-family:  "DejaVu Sans", Helvetica, sans-serif;
    line-height: 1.3em;
    font-size: 11px;
    position: relative;
    padding: 0;
}

.amberTool .CodeMirror {
    border: 0 none;
    font-family:  "DejaVu Sans", Helvetica, sans-serif;
    font-size: 11px;
    line-height: 1.3em;
    height: 100%;
    background: white;
}

.amberTool .CodeMirror-scroll {
    height: 100%;
}

.amberTool .CodeMirror-scroll pre {
    font-family: "DejaVu Sans", Helvetica, sans-serif;
}

.amberTool .amber_clear {
    clear: both;
}

.amberTool .amber_transcript,
.amberTool .amber_workspace {
    width: 100%;
    height: 100%;
}

.amberTool .amber_packagesButtons {
    position: absolute;
    top: 149px;
    left: 0;
    z-index: 1;
}

.amberTool .amber_column {
    width: 25%;
    padding: 0;
    margin: 0;
    float: left;
    outline: 1px solid #aaa;
    border: 0 none;
    height: 150px;
    overflow-y: auto;
    background: #fff;
    color: #111;
    position: absolute;
    top: 0;
}

.amberTool .amber_column.classes {
    left: 25%
}

.amberTool .amber_column.classes ul {
    margin-left: 0;
}

.amberTool .amber_column.classes ul li {
    padding-left: 10px;
    margin-left: 0;
}

.amberTool .amber_column.protocols {
    left: 50%
}

.amberTool .amber_column.methods {
    left: 75%
}

.amberTool .amber_column li {
    list-style-type: none;
    padding-left: 5px;
    cursor: pointer;
    color: #111;
    font-weight: bold;
}

.amberTool .amber_column li.selected {
	background: #c5c5c5;
	color: #222;
}

.amberTool .amber_column li:hover {
    background: #08c;
    color: white;
}

#amber .amberTool .amber_tabs {
    top: 150px;
    position: absolute;
}

#amber .amberTool .amber_tabs.amber_browser {
    padding-left: 25%;
}

.amberTool .amber_sourceCode {
    position: absolute;
    top: 172px;
    bottom: 0;
    left: 0;
    right: 0;
}

.amberTool .amber_sourceCode textarea.source {
    width: 100%;
    height: 100%;
}

/* Debugger & inspector */

.amberTool .amber_box .label {
	width: 100%;
	font-weight: bold;
	text-align: center;
	position: absolute;
	line-height: 1.5em;
	font-size: 16px;
	color: red;
	background: url("../images/sprite.amber.png") top left repeat;
	height: 27px;
}

.amberTool .amber_box .amber_column.debugger {
    top: 178px;
}

.amberTool .amber_box .amber_column.debugger.contexts {
    top: 27px;
    width: 100%;
}

.amberTool .amber_sourceCode.debugger {
    width: 60%;
    top: 178px;
}

.amberTool .amber_box .amber_column.debugger.variables {
    width: 10%;
    left: 60%;
    bottom: 0;
    position: absolute;
    height: auto;
}

.amberTool .amber_box .amber_column.debugger.inspector {
    width: 30%;
    left: 70%;
    bottom: 0;
    position: absolute;
    height: auto;
}

.amberTool .amber_button.debugger.inspect {
    position: absolute;
    left: 60%;
}

.amberTool .amber_column.value {
    left: 25%;
    width: 75%;
}

.amberTool .amber_buttons.inspector {
    position: absolute;
    top: 150px;
}


/* ReferencesBrowser */

.amberTool .amber_box .implementors {
	width: 100%
}

.amberTool .amber_box .amber_column.implementors,
.amberTool .amber_box .amber_column.senders,
.amberTool .amber_box .amber_column.referenced_classes,
.amberTool .amber_box .amber_column.matches {
	top: 20px;
	height: auto;
	bottom: 0;
	width: 25%;
}

.amberTool .amber_box .amber_column.senders {
	left: 25%
}

.amberTool .amber_box .amber_column.referenced_classes {
        left: 50%
}

.amberTool .amber_box .amber_column.matches {
        left: 75%
}

.amberTool .amber_box .amber_column.implementors .column_label, 
.amberTool .amber_box .amber_column.senders .column_label,
.amberTool .amber_box .amber_column.referenced_classes .column_label,
.amberTool .amber_box .amber_column.matches .column_label {
	background: #dbdbdb
}

.amberTool .amber_box .amber_column.implementors .column_label:hover,
.amberTool .amber_box .amber_column.senders .column_label:hover,
.amberTool .amber_box .amber_column.referenced_classes .column_label:hover,
.amberTool .amber_box .amber_column.matches .column_label:hover {
	font-weight: bold;
	color: #000;
	cursor: default
}


.amberTool .classes .commented {
		color: #33337F;
}


/* SUnit TestRunner  */

.amberTool .amber_column.sunit.packages,
.amberTool .amber_column.sunit.classes {
	height: 100%
}

.amberTool .amber_column.sunit.classes li.all,
.amberTool .amber_column.sunit.categories li.all {
	background: #e3e3e3;
	font-weight: bold
}

.amberTool .amber_column.sunit.classes li.all:hover ,
.amberTool .amber_column.sunit.categories li.all:hover {
	background: #0088CC;
	font-weight: bold
}

.amberTool .sunit.status {
	position: absolute;
	left: 50%;
	width: 50%;
	outline: 1px solid #aaa;
	background: white;
	height: 40px
}


.amberTool .sunit.status.success {
	background: #43d443;
}


.amberTool .sunit.status.failure {
	background: #ecd443;
}


.amberTool .sunit.status.error {
	background: #e56f3b;
}

.amberTool .progress_bar {
	position: absolute;
	left: 50%;
	width: 50%;
	top: 40px;
	background: white;
	outline: 1px solid #aaa;
	min-height: 20px
}

.amberTool .progress_bar div {
	background: #0088CC;
	min-height: 20px;
}

.amberTool .amber_column.results.sunit {
	left: 50%;
	height: auto;
        width: 50%;
        top: 62px;
        bottom: 0;
}

.amberTool .amber_column.sunit.results .errors {
    color: red;
}

/*.amberTool .amber_column.sunit.results ul {padding: 0; margin: 0}*/

/* Code mirror overrides */
.CodeMirror pre {
	line-height: 14px;
}