/* styles */
body {
    min-width: 1200px;
}

#menuwrapper {
    position: fixed;
    width: 100%;
    min-height: 9px;
    border-bottom: 1px solid #888;
    margin: 0;
    background-color: #dfdfdf;
    opacity: 0.98;
    z-index: 150;
    background: #dfdfdf url(../images/grippy.png) no-repeat bottom center;
}

#menubar {
    background: #dfdfdf url(../images/grippy-close.png) no-repeat bottom center;
}

.intro {
    padding: 10px 4em 0 0;
}
.intro p, .concept-container p {
    padding-top: 10px;
}

a.openswitch {
    display: block;
}

a.openswitch.selected {
    font-weight: bold;
}

.command-list, .example-list {
    padding: 10px 0;
}

.command-list a.openswitch {
    font-family: Courier New;
}

.concept-area {
    padding-bottom: 20px;
    min-height: 525px;
}

.concept-container {
    display: none;
}

.playground-container {
    height: 550px;
    margin-top: 20px;
    position: relative;
}

span.cmd {
    background-color: #222222;
    color: #FFFFFF;
    font-family: Courier New;
    padding: 0 0.2em;
}

#footer {
  border-top: 2px dashed #888;
  padding-top: 1em;
}
.svg-container {
    display: inline-block;
    border: 1px dotted #AAA;
}

.svg-container.remote-container {
    position: absolute;
    top: 0px; right: 0px;
    background-color: #EFF1FF;
    border-left: 1px dotted #AAA;
    border-bottom: 1px dotted #AAA;
}

.remote-name-display {
    font-weight: bold;
    text-align: right;
}

.control-box {
    display: inline-block;
    width: 250px;
    vertical-align: bottom;
    background-color: #000;
    border: 1px dotted #AAA;
}

.control-box button {
    font-family: Courier New;
    font-size: 12px;
    margin-right: 5px;
    margin-bottom: 5px;
}

.control-box .log {
    overflow-y: auto;
    border-bottom: 1px solid #AAA;
}

.control-box .log,
.control-box input[type="text"] {
    font-family: Courier New;
    font-size: 14px;
}

.control-box .log .command-entry,
.control-box input[type="text"] {
    padding-left: 15px;
    color: #FFF;
    line-height: 14px;
    background: url(../images/prompt.gif) no-repeat left center transparent;
}

.control-box .log .info,
.control-box .log .error {
    font-size: 12px;
    padding: 5px;
}

.control-box .log .info {
    color: #FFC;
}

.control-box .log .error {
    color: #FCC;
}

.control-box input[type="text"] {
    width: 235px;
    border: none;
}

circle.commit {
    fill: #EEEEEE;
    stroke: #888888;
    stroke-width: 3;
}

circle.commit.checked-out {
    fill: #CCFFCC !important;
    stroke: #339900;
}

circle.commit.merge-commit {
    stroke: #663300;
    fill: #FFFFCC;
}

circle.commit.reverted {
    fill: #FFC;
    stroke: #933;
}

circle.commit.rebased {
    stroke: #3300CC;
    fill: #CCCCFF;
}

circle.commit.branchless {
    fill: #FEFEFE;
    stroke: #DDD;
}

.commit-pointer {
	stroke: #666;
	stroke-width: 4;
}

.merge-pointer {
    stroke: #663300;
    stroke-width: 4;
}

.commit-pointer.branchless,
.merge-pointer.branchless {
    stroke: #DDD;
    stroke-width: 2;
}

text.id-label {
	text-anchor: middle;
	font-family: Courier New;
	fill: #666;
	font-size: 10px;
}

g.branch-tag > rect {
	fill: #FFCC66;
	stroke: #CC9900;
	stroke-width: 2;
}

g.branch-tag.remote-branch > rect {
	fill: #CCC;
	stroke: #888;
}

g.branch-tag > text {
	text-anchor: middle;
	fill: #000;
	font-size: 11px;
	font-family: Arial;
}

g.head-tag > rect {
	fill: #CCFFCC;
	stroke: #339900;
	stroke-width: 2;
}

g.head-tag > text {
	text-anchor: middle;
	fill: #000;
	font-size: 11px;
	font-family: Arial;
	font-weight: bold;
	text-transform: uppercase;
}