@import "../../orion/editor/editor.css";

.diffNormal {
	background: #DDDDDD;
}

.diffConflict {
	background: #EEB4B4;
}

.diffNormalSelect {
	background: #BBBBBB;
}

.diffConflictSelect {
	background: #F08080;
}

.diffInlineAddedSelect {
	background: #00B400;
}

.diffInlineAdded {
	background: #99EE99;
}

.diffInlineRemovedSelect {
	background: #B44040;
}

.diffInlineRemoved {
	background: #EE9999;
}

.compareCanvas {
	background: white;
	border: 0;
}

.inlineRulerLeft {
	border-right: 1px solid #EAEAEA;
}

.compareEditorParent {
	clear: both;
	overflow: hidden;
    position: absolute;
    top: 30px;  /* $Editor title Height */
    bottom: 0;
    left: 0;
    width: 100%;
	margin-bottom: 30px;  /* $Editor line number div height */   
}

.compareEditorParentImageMode {
	overflow: auto !important;
}

.compareEditorParentWithCanvas {
	clear: both;
	overflow: hidden;
    position: absolute;
    left: 44px;
    right: 0;
	height:100%;
	border-left: 1px solid #eaeaea;
}

.canvasContainer {
	position: absolute;
	width:44px;
	height:100%;
	overflow: hidden;
}

.compareActionContainer {
	float: left;
	padding-top: 3px;
	padding-bottom: 3px;
	overflow: hidden;
}

.titleActionContainer {
	width:100%;
	height:30px;
	overflow: hidden;
	color: #707070;
	white-space: nowrap;
}

.titleContainer {
	padding-left: 5px;
	padding-top: 8px;
	overflow: hidden;
}

.statusContainer {
	position: absolute;
	bottom:0;
	width:100%;
	height:30px;
	overflow: hidden;
	text-align: center;  
	color: #707070;
}

.leftPanelLayout {
	display: block;
	position: absolute;
	left: 0;
    overflow: hidden;
	width: 50%;
	height: 100%;
}

.rightPanelLayout {
	display: block;
	position: absolute;
	right: 0;
    overflow: hidden;
	height: 100%;
}

.compareSplitLayout {
	position: absolute;
	left: 50%;  /* override this value if you want a different proportion of the two split panes */
	height: 100%;
	z-index: 50;
	width: 4px;
	cursor: e-resize;
	/*background: #dedede !important;*/
	visibility: hidden;  /* use visibility vs. display because we need a position in calculations */
}

/*** Styles for diff annotations ***/

/** Styles for normal diff blocks **/

/* The added block in the new file/left side, lightest green */
.annotationLine.addedBlockDiff {
	color: black !important;
	background-color: #E5FFCF;
}

/* The current added block in the new file/left side, 2nd lightest green */
.annotationLine.currentAddedBlockDiff {
	color: black !important;
	background-color: #CFFFCF;
}

/* The deleted block in the old file/right side, lightest red */
.annotationLine.deletedBlockDiff {
	color: black !important;
	background-color: #FAF0F0;
}

/* The current deleted block in the old file/right side, 2nd lightest red */
.annotationLine.currentDeletedBlockDiff {
	color: black !important;
	background-color: #FFE4E4;
}

/* Style for an empty block, which draws a lighter black line on top of a line to indicate an insertion or deletion */
/* diff-border.png */
.annotationLine.blockDiffTopOnly {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAABCAIAAAAuIQuDAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAPSURBVBhXY6yvr2cYHAAAzPsBf2hZ98wAAAAASUVORK5CYII=");
 	background-repeat: repeat-x;
 	background-position: left top
}

/* Style for the current empty block, which draws a darker black line on top of a line to indicate an insertion or deletion */
/* diff-border-sel.png */
.annotationLine.currentBlockDiffTopOnly {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAABCAIAAAAuIQuDAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAMSURBVBhXY2AYNAAAAIsAAR6L5FUAAAAASUVORK5CYII=");
 	background-repeat: repeat-x;
 	background-position: left top
}

/** Styles for conflicting diff blocks **/

/* The conflicting block in both the old file/right side and new file/left side, lighter yellow */
.annotationLine.blockDiffConflict {
	color: black !important;
	background-color: #FFFFCA;
}

/* The curent conflicting block in both the old file/right side and new file/left side, darker yellow */
.annotationLine.currentBlockDiffConflict {
	color: black !important;
	background-color: #FFFF5B;
}

/** Styles for diff words **/

/* The added word in the new file/left side, 3rd lightest green */
.annotationRange.addedWordDiff {
	color: black !important;
	background-color: #B8E8B8;
}

/* The current added word in the new file/left side, darkest green */
.annotationRange.currentAddedWordDiff {
	color: black !important;
	background-color: #93FF93;
}

/* The deleted word in the old file/right side, 3rd lightest red */
.annotationRange.deletedWordDiff {
	color: black !important;
	background-color: #F9BDBD;
}

/* The current deleted word in the old file/right side, darkest red */
.annotationRange.currentDeletedWordDiff {
	color: black !important;
	background-color: #FF8B8B;
}

/* The following 4 styles are for the special annotations when presenting a position between 2 characters, which looks like a caret cursor.
 * They are all using the same 18X2 PNG on either right or left side of a character.
 * diff-empty-word-border-black.png
 */

.annotationRange.emptyDeletedWordDiffLeft {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAASCAYAAABxYA+/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAAUSURBVBhXY2RgYPgPxAxMIGIwMgCpaAEjILHq8AAAAABJRU5ErkJggg==");
 	background-repeat: repeat-y;
 	background-position: left top
}

.annotationRange.emptyDeletedWordDiffRight {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAASCAYAAABxYA+/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAAUSURBVBhXY2RgYPgPxAxMIGIwMgCpaAEjILHq8AAAAABJRU5ErkJggg==");
 	background-repeat: repeat-y;
 	background-position: right top
}

.annotationRange.emptyAddedWordDiffLeft {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAASCAYAAABxYA+/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAAUSURBVBhXY2RgYPgPxAxMIGIwMgCpaAEjILHq8AAAAABJRU5ErkJggg==");
 	background-repeat: repeat-y;
 	background-position: left top
}

.annotationRange.emptyAddedWordDiffRight {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAASCAYAAABxYA+/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAAUSURBVBhXY2RgYPgPxAxMIGIwMgCpaAEjILHq8AAAAABJRU5ErkJggg==");
 	background-repeat: repeat-y;
 	background-position: right top
}

.compare-sprite-inline-2way{
	font-size: 16px;
	line-height: normal;
	vertical-align:middle;
	color: inherit;
	font-family: 'Orion Icon Font';	
	padding-right:5px;
	background: none;
	border: none;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.compare-sprite-inline-2way:before{ content: '\E04C'; }
.compare-sprite-inline-2way:after{ content: '\E04A'; }

