html {
    zoom: reset;
}

body {
    font: message-box;
}

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

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

#innerContainer {
    overflow: hidden;  
}

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

.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;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebarItem {
    padding: 0 5px 0 20px;
    /* Match the height in the current Bookmarks View */
    height: 17px;
    margin-bottom: 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(82, 138, 241)), to(rgb(26, 87, 172)));
	color: white;
	text-shadow: rgb(0, 0, 90) 0 1px 1px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: rgb(26, 87, 172);
}

/* 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);
}

.icon {
    position: relative;
    float: left;
    margin-right: 4px;
}

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

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

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

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

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

#listViewContainer {
    top: 50%;
    border-style: solid;
    border-width: 1px 0 0 1px;
}  

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

#flowViewSplitter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 40%;
}

/* Style Rules for the Cover Flow View -------------------------------------- */

#flowViewContainer {
    top: 28px;
    bottom: 16px;
}

.flowViewHidden 
{
    height: 0;
    width: 0;
    position: absolute;
}

.flowViewVisible {
    min-width: 100%;
    min-height: 100%;
    position: absolute;
}

/* Style Rules for the Find Banner ----------------------------------------- */

#findBanner {
    height: 28px;
    position: absolute;
    left: 0;
    right: 0;
    color: rgb(191, 191, 191);
    background-color: black;
    font-size: 11px;
    padding: 3px 8px 2px 12px;
}

/* Style Rules for the Add Bar --------------------------------------------- */

#addbar {
	height: 22px;
	top: auto;
	background-color: rgb(214, 221, 229);
	margin: 0;
	padding: 0;
	border-top: solid 1px;
	overflow: hidden;
}

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

#addToListViewContainer {
    left: 200px;   
}

.addFolderButton {
    margin-top: 1px;
    padding: 0;
    height: 20px;
}

.addFolderButton > img {
    position: relative;
    top: -2px;
}

/* 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;
    outline: none;
}

/* 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: 36px;
    border-top: 1px solid rgb(179, 179, 179);
    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;
}

.disclosureArrow {
    display: inline-block;
    margin-right: 2px;
    margin-top: 2px;
    width: 11px;
    height: 12px;
    background-image: url("disclosureTriangleSmallRight.png");
}

.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;
    text-shadow: rgb(0, 0, 90) 0 1px 1px;
}

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

/* For those Bookmarks that are not Folders and hence cannot be parents, set
   the images a little further off to the right so that they line up with the
   Folders which are getting pushed to the right by their disclosure arrows. */
.data-grid tr:not(.parent) > td > img.icon {
    margin-left: 10px;
}

