2 files changed, 49 insertions, 17 deletions

diff --git a/StoneIsland/www/css/nav.css b/StoneIsland/www/css/nav.css
index 05e4aedc..0b9ad123 100755
--- a/StoneIsland/www/css/nav.css
+++ b/StoneIsland/www/css/nav.css
@@ -321,7 +321,6 @@ padding-bottom:0px;
 #selector {
   display: none;
   position: absolute;
-  background: #fff;
   z-index: 2;
   box-sizing:border-box;
   min-width:100px;
@@ -338,7 +337,7 @@ padding-bottom:0px;
   } 
 } 
 
-#selector .options div {
+#selector:not(.selector-outer-wrap) .options div {
   background: white;
   text-align: center;
   padding: 7px 12px;
@@ -347,22 +346,54 @@ padding-bottom:0px;
   border-left:1px solid black;
   border-right:1px solid black;
   border-top:1px solid black;
-
 }
 
-#selector .options div:last-of-type {
+#selector:not(.selector-outer-wrap) .options div:last-of-type {
   border-bottom:1px solid black
 }
 
 .selector-full {
-    width: 100% !important;
-    box-sizing:border-box
+  width: 100% !important;
+  box-sizing:border-box
 }
 
 .selector-full > div > div {
-    padding: 12px 0 !important;
+  padding: 12px 0 !important;
+}
+
+.selector-outer-wrap {
+  max-width:250px!important;
+  min-width:250px!important;
+  box-sizing:border-box!important;
+  font-size: 0!important;
+}
+
+.selector-outer-wrap .options div {
+  width:120px!important;
+  border-bottom:1px solid black!important;
+  display:inline-block!important;
+  box-sizing:border-box!important;
+  margin:0!important; 
+  background: white;
+  text-align: center;
+  padding: 7px 12px;
+  font-size:14px!important;
+}
+
+.selector-outer-wrap .options div:nth-of-type(odd){
+  border-left:1px solid black!important;
+  border-right:1px solid black!important;
+}
+
+.selector-outer-wrap .options div:nth-of-type(even){
+ border-right:1px solid black!important;
+}
+
+.selector-outer-wrap .options div:nth-of-type(-n+2){
+  border-top:1px solid black!important;
 }
 
+
 /* CONTENT */
 
 #story, #hub, #archive, .page,
diff --git a/StoneIsland/www/js/lib/products/Selector.js b/StoneIsland/www/js/lib/products/Selector.js
index 4e0a5f04..6db33b68 100755
--- a/StoneIsland/www/js/lib/products/Selector.js
+++ b/StoneIsland/www/js/lib/products/Selector.js
@@ -27,22 +27,23 @@ var Selector = View.extend({
     this.$el.show()
     app.curtain.show("white")
     this.visible = true
+    $("#selector").removeClass("selector-outer-wrap")
     if ( origin == "wide") {
       $("#selector").addClass("selector-full")
     }
     else {
       $("#selector").removeClass("selector-full")
     }
-     var originXY = $("." + origin).offset()
-     var originWidth = $("." + origin).width()
-     var selectorHeight = $('#selector').height()
-     var originHeight = $("." + origin).height()
-     console.log(originXY.left)
-     console.log(originXY.top)
-     console.log(selectorHeight)
-     console.log(origin)
-
-       $("#selector").css({"top":(originXY.top - selectorHeight - originHeight + 20),"left":originXY.left})
+    var originXY = $("." + origin).offset()
+    var originWidth = $("." + origin).width()
+    var selectorHeight = $('#selector').height()
+    var originHeight = $("." + origin).height()
+    console.log(selectorHeight)
+    if ((selectorHeight > 250) && (!$("#selector").hasClass("selector-full"))) {
+      $("#selector").addClass("selector-outer-wrap")
+    }
+    var selectorHeight = $('#selector').height()
+    $("#selector").css({"top":(originXY.top - selectorHeight - originHeight + 20),"left":originXY.left})
     originXY = null;
     originWidth = null;
     originHeight = null;