body {
    font: message-box;
}

.container {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
}

#mainContainer {
    top: 0;
    right: 0;
    bottom: 25px;
    left: 0;
    border-top: solid 1px;
}

#innerContainer {
    overflow: hidden;  
}

#sidebar {
    min-height: 100%;
    bottom: auto;
    width: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: rgb(214, 221, 229);
    border-right: solid 1px rgb(163, 163, 163);
}

.sidebarSection {
    margin-top: 2px;
    margin-bottom: 2px;
    list-style-type: none;
    padding: 0;
}

.sidebarHeader {
    height: 18px;
    padding: 4px 10px 0 10px;
    color: rgb(92, 110, 129);
    font-weight: bold;
    font-size: 12px;
    text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
    text-transform: uppercase;
}

.sidebarItem {
    padding: 0 5px 0 20px;
    margin-top: 1px;
    -webkit-user-select: none;
    -webkit-user-drag: element;
}

/* Imitating the SafariTheme rendering used for NativeBookmarksView. */
    
.sidebarItem.selected {
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(162, 177, 207)), to(rgb(120, 138, 177)));
	color: white;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: rgb(120, 138, 177);
}

/* Poorly imitating the SafariTheme rendering used for the NativeBookmarksView,
 * as I could not find the correct rgb values for the background-color.
 * FIXME: Find the right values for the background-color for the dragOver.
 */
.sidebarItem.dragOver {
    -webkit-border-radius: 5px;
    border-width: 2px;
    border-style: solid;
    border-color: blue;
    background-color: rgb(138, 210, 255);
}

.sidebarItemContent {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    -webkit-user-select: none;
}

.sidebarItemContent.editing {
    background-color: white;
    color: black;
    text-overflow: clip;
    -webkit-user-select: text;
}

#contentContainer {
    left: 200px;
    min-height: 100%;
}

#contentInnerContainer {
    overflow: hidden;
}

#flowViewContainer {
    background-color: black;
    bottom: 50%;
}

#listViewContainer {
    top: 50%;
    border-style: solid;
    border-width: 1px 0 0 1px;
}
    
.disclosureArrow {
    display: inline-block;
    margin-right: 2px;
    margin-top: 2px;
    width: 11px;
    height: 12px;
    background-image: url("disclosureTriangleSmallRight.png");
}

#sidebarResizerVertical {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 5px;
    z-index: 500;
    cursor: col-resize;
}

#contentResizerHorizontal {
    position: absolute;
    left: 0;
    right: 0;
    height: 20px;
    z-index: 500;
    cursor: row-resize;
}

#addbar {
	height: 25px;
	top: auto;
	background-color: threedface;
	margin: 0;
	padding: 0;
	border-top: solid 1px;
}

#addToSidebarContainer {
	float: left;
	width: 200px;
}

#addToListViewContainer {
    left: 200px;   
}

/* Imitating the SafariTheme rendering used for NativeBookmarksView, reusing
 * much of the CSS from WebCore\inspector\front-end\inspector.css.
 */

.data-grid {
    border-width: 1px;
    white-space: nowrap;
    /* The positioning here is to make the data-grid take up all of the space
       in its containing block, the listViewContainer, instead of just wrapping
       around the table. */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
}

/* Dependent on the size of the header table (the top: 17px) and assuming for
   now that the size of each div is also 17px. Eventually, we should be able
   to dynamically edit this CSS via JS if we need to add the option for the
   user to make the rows larger. */
.data-container {
    top: 17px;
    right: 0;
    left: 0;
    bottom: 0;
    position: absolute;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#F1F6FE), color-stop(0.5, #fff), color-stop(0.5, #F1F6FE));
    -webkit-background-size: 34px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.data-grid table {
    table-layout: fixed;
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
    font-size: 12px;
}

.data-grid th {
    text-align: left;
    border-right: 1px solid rgb(179, 179, 179);
    height: 17px;
    font-weight: normal;
    vertical-align: middle;
    padding: 0 4px;
}

.data-grid td > div, .data-grid th > div {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
}

.data-grid td > div.isBeingEdited {
    background-color: white;
    color: black;
    text-overflow: clip;
    -webkit-user-select: text;
}

.header {
    border-width: 0;
    border-top: solid 1px silver;
    border-bottom: solid 1px silver;
    background-image: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(0.5, rgb(220, 220, 220)), color-stop(0.5, rgb(220, 220, 220)), to(white));
}

.corner {
    display: none;
}

.resizer {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 5px;
    z-index: 500;
    cursor: col-resize;
}

.data-grid tr.parent td.disclosure::before {
    float: left;
    content: url(treeRightTriangleBlack.png);
    width: 8px;
    height: 8px;
    margin-right: 2px;
    -webkit-user-select: none;
}

.data-grid tr.expanded td.disclosure::before {
    content: url(treeDownTriangleBlack.png);
    width: 8px;
    height: 8px;
    margin-top: 1px;
}

.data-grid tr.selected {
    background-color: rgb(212, 212, 212);
    color: inherit;
}

.data-grid:focus tr.selected {
    background-color: rgb(56, 121, 217);
    color: white;
}

.data-grid:focus tr.parent.selected td.disclosure::before {
    content: url(treeRightTriangleWhite.png);
}

.data-grid:focus tr.expanded.selected td.disclosure::before {
    content: url(treeDownTriangleWhite.png);
}

.data-grid tr:not(.parent) td.disclosure {
    text-indent: 10px;
}

