/* styles */

.playground-container {
    margin-top: 20px;
	margin-bottom: 20px;
    position: relative;
    background-color: #FDF6E3;
}

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

.svg-container {
    /*margin-left:250px;*/
    /*display: block;*/
    /*overflow: auto;*/
    border: 1px dotted #AAA;
}

.svg-container.local-container {
    width: 100%;
}

.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;*/
    /*position: absolute;*/
    /*top: 0px; bottom: 0;*/
    /*width: 250px;*/
    width: 100%;
    /*vertical-align: bottom;*/
    background-color: #390;
    border: 1px dotted #AAA;
}

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

.control-box .log {
    display: none;
    overflow-y: auto;
    position: absolute;
    top: 0px; bottom: 20px; left: 0; right: 0;
    border-bottom: 1px solid #AAA;
}

.control-box .log,
.control-box input[type="text"] {
    /*font-family: Courier New;*/
    font-size: 100%;
}

.control-box .log .command-entry {
    padding: 5px 0 5px 15px;
    color: #FFF;
    line-height: 120%;
    /*background: url(../img/prompt.gif) no-repeat left center transparent;*/
    background: transparent;
    box-shadow: none;
}

.control-box input[type="text"] {
    /*position: absolute;*/
    /*bottom: 0;*/
    padding: 5px 0 5px 15px;
    color: #FFF;
    line-height: 120%;
    width: 100%;
    border: none;
    /*background: url(../img/prompt.gif) no-repeat left center transparent;*/
    background: transparent;
    box-shadow: none;
}

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

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

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

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;
	font-weight: bolder;
	fill: #666;
	font-size: 75%;
}

text.message-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.git-tag > rect {
	fill: #7FC9FF;
	stroke: #0026FF;
}

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;
}