3 files changed, 1405 insertions, 0 deletions

diff --git a/js/io/ui/file-picker/picker-navigator.reel/picker-navigator.css b/js/io/ui/file-picker/picker-navigator.reel/picker-navigator.css
new file mode 100644
index 00000000..796c283f
--- /dev/null
+++ b/js/io/ui/file-picker/picker-navigator.reel/picker-navigator.css
@@ -0,0 +1,253 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+
+.picker{
+    font-size:12px;
+    width:523px;
+    height:500px;
+    padding-top:15px;
+    padding-left:15px;
+    padding-bottom:15px;
+    color:#ffffff;
+    background-color:#494949;
+    font-family: 'Droid Sans', sans-serif;
+    border-radius: 8px;
+        box-shadow: 0px 0px 8px rgba(0, 0, 0, .8);
+        text-shadow: 1px 1px 1px #000;
+}
+
+.picker .pickerHeader{
+    margin-bottom: 10px;
+}
+
+.picker .container{
+    border: 1px solid #000000;
+    overflow: auto;
+    background-color:#5f5f5f;
+}
+
+.picker .left-nav{
+    float:left;
+    width:20%;
+    height:86%;
+    padding-top: 10px;
+    overflow-x:hidden;
+    overflow-y:auto
+}
+
+.picker .right-nav{
+    float:left;
+    width:75%;
+    height:88%;
+    overflow: hidden;
+    border-left: none;
+}
+
+.picker .right-top{
+    border-right: 1px solid #000000;
+    overflow: auto;
+    min-height:150px;
+    height:75%;
+    width:auto;
+    border-right: none;
+    margin: 8px 0px 0px 8px;
+}
+
+.picker .right-bottom{
+    border: 1px solid #000000;
+    border-left: none;
+    overflow: auto;
+    height:20%;
+    padding: 10px;
+    border-bottom: none;
+    border-right: none;
+}
+
+.picker .driversList{
+    padding: 3px;
+    text-align: center;
+}
+
+.picker .driversList:hover{
+    cursor:pointer;
+    background-color: #444444;
+}
+
+.picker .highlighted{
+    background-color: #343434;
+}
+
+
+.picker .buttons{
+    float:right;
+    margin-top: 7px;
+}
+
+.picker .historyArrows{
+    width:20px;
+    display:inline;
+    border-radius: 5px;
+    border: 1px solid #d1d1d1;
+}
+
+.picker .historyArrows span{
+    font-size: 0.7em;
+    cursor: pointer;
+}
+
+.picker .addressbar{
+    display:inline;
+    margin-left: 2px;
+    border-radius: 5px;
+    border: 1px solid #d1d1d1;
+    padding: 3px;
+    position:relative;
+}
+
+.picker .addressbar input{
+    width:320px;
+}
+
+.picker .dropdownArrow{
+    font-size: 0.7em;
+    cursor: pointer;
+}
+
+.picker .dropdown{
+    position:absolute;
+    z-index:10000;
+    border: 1px solid #d1d1d1;
+    background-color: #444;
+    opacity:0.9;
+}
+
+.picker .dropdown div{
+    padding: 3px;
+}
+
+.picker .dropdown div:hover{
+    cursor: pointer;
+    background-color: #343434;
+}
+
+.picker .addressbar .dropdown{
+    width:331px;
+    min-height:50px;
+}
+
+.picker .go{
+    margin-left: 5px;
+    cursor: pointer;
+}
+
+.picker .viewSwitcher{
+    display:inline;
+    margin-left: 30px;
+}
+
+.picker .viewSwitcher span{
+    margin-left: 5px;
+    border-radius: 5px;
+    border: 1px solid #d1d1d1;
+    padding: 3px;
+    cursor: pointer;
+}
+
+.picker .reload{
+    position:relative;
+    margin-left: 15px;
+    top:4px;
+    cursor: pointer;
+}
+
+.picker .filters{
+    display:inline;
+    float:left;
+    margin-left: 12px;
+    margin-top: 7px;
+    border-radius: 5px;
+    border: 1px solid #d1d1d1;
+    padding: 3px;
+    /*width:150px;*/
+    position:relative;
+    max-width: 65%;
+}
+
+.picker .filters .dropdown{
+    min-height:25px;
+    /*width:154px;*/
+    bottom:21px;
+    left:-1px;
+    white-space: nowrap;
+}
+
+.picker .filterVal{
+    width:120px;
+    margin-left: 5px;
+    background-color: #444;
+}
+
+.picker .disable{
+    color:#5f5f5f;
+    cursor:auto;
+}
+
+.picker .hide{
+    display: none;
+}
+
+.picker .viewSelected{
+    background-color:#6f6f6f;
+    pointer:auto;
+}
+
+.picker .buttons button {
+        float: left;
+        width: 100px;
+        margin-top: 3px;
+}
+
+.picker .okButton{
+        margin: 0px 22px 0px 8px; 
+    /*
+margin-right:25px;
+    -webkit-box-align: center;
+    text-align: center;
+    cursor: default;
+    padding: 0px 6px 0px;
+    border:2px solid #d1d1d1;