- Grunt configured

- first install the dependencies with 'sudo npm install'
- then run with 'grunt'

Gruntfile.js

@@ -0,0 +1,142 @@
+/*global module:false*/
+module.exports = function(grunt) {
+
+  // Project configuration.
+  grunt.initConfig({
+    // Metadata.
+    pkg: grunt.file.readJSON('package.json'),
+    banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' +
+      '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
+      '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' +
+      '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
+      ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */\n',
+    concat: {
+      options: {
+//         separator: ';'
+      },
+      dist: {
+        src: [
+          'www/js/SettingsWindow.js',
+          'www/js/d3dServerInterfacing.js',
+          'www/js/verticalShapes.js',
+          'www/js/buttonbehaviors.js',
+          'www/js/canvasDrawing.js',
+          'www/js/previewRendering.js',
+          'www/js/gcodeGenerating.js',
+          'www/js/init_layout.js',
+          'www/js/Printer.js',
+          'www/js/Progressbar.js',
+          'www/js/Thermometer.js',
+          'www/js/utils.js',
+          'www/js/sidebar.js',
+          'www/js/message.js',
+          'www/js/main.js'
+        ],
+        dest: 'www/js/<%= pkg.name %>.js'
+      }
+    },
+    uglify: {
+      options: {
+//        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
+        mangle: false,
+        beautify: false,
+        compress: {},
+        report: 'min',
+        preserveComments: 'false'
+      },
+      build: {
+        src: ['www/js/*.js', '!www/js/<%= pkg.name %>.min.js'],
+        dest: 'www/js/<%= pkg.name %>.min.js'
+      }
+    },
+    jshint: {
+      options: {
+        globals: {
+          jQuery: true
+        },
+        browser: true,
+        curly: true,
+        eqeqeq: true,
+        immed: true,
+        latedef: true,
+        newcap: true,
+        noarg: true,
+        sub: true,
+        undef: true,
+        unused: true,
+        boss: true,
+        eqnull: true
+      },
+//      gruntfile: {
+//        src: 'Gruntfile.js'
+//      },
+      lib_test: {
+        src: ['www/js/*.js', '!www/js/<%= pkg.name %>.js', '!www/js/<%= pkg.name %>.min.js']
+      }
+    },
+    less: {
+      development: {
+        options: {
+          paths: ["www/css"]
+        },
+        files: {
+          "www/css/styles.css": "less/styles.less"
+        }
+      }
+    },
+    watch: {
+//      javascript: {
+//        files: ["www/js/*", '!www/js/*.min.js'],
+//        //        tasks: ["less", "css_prefix"]
+//        tasks: ["uglify"]
+//      },
+      styles: {
+        files: ["less/*"],
+        tasks: ["less", "autoprefixer", "cssmin"]
+      }
+    },
+    autoprefixer: {
+      options: {
+        browsers: ['> 1%', 'last 2 versions', 'ie 8', 'ie 9', 'ff 17', 'opera 12.1']
+      },
+      // prefix all specified files and save them separately
+      single_file: {
+        options: {},
+        //        expand: true,
+        //        flatten: true,
+        src: 'www/css/styles.css', // -> src/css/file1.css, src/css/file2.css
+        dest: 'www/css/styles.css' // -> dest/css/file1.css, dest/css/file2.css
+      }
+    },
+    cssmin: {
+      minify: {
+        expand: true,
+        cwd: 'www/css/',
+        src: ['*.css', '!*.min.css'],
+        dest: 'www/css/',
+        ext: '.min.css'
+      }
+    }
+  });
+
+  // These plugins provide necessary tasks.
+  grunt.loadNpmTasks('grunt-contrib-less');
+  grunt.loadNpmTasks('grunt-contrib-concat');
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+  grunt.loadNpmTasks('grunt-contrib-jshint');
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-autoprefixer');
+  grunt.loadNpmTasks('grunt-contrib-cssmin');
+
+  // Default task.
+  grunt.registerTask('default', [
+    'less',
+    'autoprefixer',
+    'cssmin',
+//    'concat',
+//    'uglify',
+//    'jshint',
+    'watch'
+  ]);
+
+};

README.md

@@ -0,0 +1 @@
+Doodle3D client app

less/base.less

@@ -5,8 +5,9 @@
 */
 body {
   background-color: #fcfcfc;
-  -moz-user-select: none; /* disable cut copy paste */
+  user-select: none; /* disable cut copy paste */
-  -webkit-user-select: none; /* disable cut copy paste */
+//  -moz-user-select: none; /* disable cut copy paste */
+//  -webkit-user-select: none; /* disable cut copy paste */
   overflow:hidden; /* This chops off any overhanging divs */
 }
 img {

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "doodle3dclient",
+  "version": "0.9.0",
+  "description": "Doodle3D client app",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Doodle3D/doodle3d-client.git"
+  },
+  "author": "Peter Uithoven, Adriaan Wormgoor, Rick Companje",
+  "readmeFilename": "README.md",
+  "devDependencies": {
+    "grunt": "~0.4.1",
+    "grunt-cli": "~0.1.9",
+    "grunt-contrib-less": "~0.7.0",
+    "grunt-contrib-watch": "~0.5.3",
+    "grunt-contrib-uglify": "~0.2.4",
+    "grunt-contrib-jshint": "~0.6.4",
+    "grunt-autoprefixer": "~0.4.0",
+    "grunt-contrib-cssmin": "~0.6.2",
+    "grunt-contrib-concat": "~0.3.0"
+  }
+}

www/css/debug.min.css

@@ -0,0 +1 @@
+.debugContainer{position:absolute;top:0;left:0;z-index:500;background-color:#f0f;display:none}#debug_textArea{position:absolute;bottom:0;z-index:500;display:none}.debugBtn{width:25px;height:25px;background-color:#03b;float:left}.agentInfo{background:#fff;border:1px #333 solid;display:none;float:left;opacity:.7}.agentInfoToggle{display:block}#debug_display{position:absolute;top:0;left:0;display:none;background-color:#fff;opacity:.7;color:#000}

www/css/settings.min.css

@@ -0,0 +1 @@
+form{margin:10px;max-width:600px}form input{margin:1px}body,th,td{font-family:Helvetica,Arial,"Nimbus Sans L",sans-serif;font-size:13px}.settingsContainer{position:relative;width:100%;height:100%}form fieldset{max-width:600px;border:1px solid #bbb;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;margin-bottom:20px;padding:8px}form fieldset fieldset{max-width:580px;margin:15px 0 5px;clear:left;float:left}form fieldset legend{margin-left:10px;font-weight:700}form label{min-width:150px;display:block;float:left;margin:1px 0 0;clear:left}form div{float:left}form input[type=text],form input[type=number],form input[type=password]{border:1px solid #90c0ff;margin-right:5px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}form input[type=text].small,form input[type=number].small,form input[type=password].small{width:50px}form input[type=text].large,form input[type=number].large,form input[type=password].large{width:250px}form input[type=radio]{margin:4px 4px 0 0}form textarea{border:1px solid #90c0ff;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}form .startgcode_left{float:left;margin-right:20px}form textarea.gcode{width:252px;height:150px}form small{margin:3px 0 0;display:block;clear:left}form .button{display:inline-block}form #passwordLabel,form #password{display:none}form input.error,form textarea.error,form select.error{border:red solid 2px}form .errorMsg{color:red;margin:0 0 0 1em}

www/css/styles.css

@@ -1,35 +1,35 @@
 /*
 
-GLOBAL CONTAINER
+  GLOBAL CONTAINER
+
+*/
 
- */
 body {
   background-color: #fcfcfc;
-
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
-	user-select: none; /* disable cut copy paste */
+  user-select: none;
-/* disable cut copy paste */
+  /* disable cut copy paste */
-overflow: hidden; /* This chops off any overhanging divs */
+  overflow: hidden;
+  /* This chops off any overhanging divs */
 }
 
 img {
-	z-index: 5; /*pointer-events: none;
+  z-index: 5;
-	*/
+  /*pointer-events:none;*/
-/*-webkit-touch-callout:  none;
+  /*-webkit-touch-callout: none;               */
-	               */
+  /*disable callout, image save panel */
-/*disable callout, image save panel */
+  /*-webkit-tap-highlight-color: transparent; */
-/*-webkit-tap-highlight-color:  transparent;
+  /* "turn off" link highlight */
-	 */
-/* "turn off" link highlight */
 }
 
 /*  http://stackoverflow.com/questions/5348092/prevent-default-press-but-not-default-drag-in-ios-mobilesafari  */
+
 .btn {
-	background-repeat: no-repeat; /*	-webkit-user-select:  none;
+  background-repeat: no-repeat;
-	*/
+  /*	-webkit-user-select: none;*/
-cursor: pointer;
+  cursor: pointer;
 }
 
 #landscape {
@@ -46,7 +46,6 @@ cursor: pointer;
   overflow: hidden;
   margin: 0px auto;
   outline: 2px solid #5e8c71;
-
   -webkit-box-shadow: 0 0 8px rgba(8, 8, 8, 0.25);
   box-shadow: 0 0 8px rgba(8, 8, 8, 0.25);
 }
@@ -62,15 +61,11 @@ cursor: pointer;
   overflow: hidden;
 }
 
-.bgTop,.bgMiddle,.bgBottom {
+.bgTop,
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+.bgMiddle,
-	filter: alpha(opacity=100);
+.bgBottom {
   opacity: 1.0;
-
   -webkit-transition: opacity .35s linear;
-	-moz-transition: opacity .35s linear;
-	-o-transition: opacity .35s linear;
-	-ms-transition: opacity .35s linear;
   transition: opacity .35s linear;
   position: absolute;
   left: 0px;
@@ -91,9 +86,10 @@ cursor: pointer;
 
 /*
 
-CENTER PANEL
+  CENTER PANEL
+
+*/
 
- */
 .centerpanel {
   position: absolute;
   left: 50%;
@@ -149,10 +145,8 @@ CENTER PANEL
   background-color: #fff;
   border: 4px solid #000;
   border-radius: 15px;
-
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
-	-ms-box-sizing: border-box;
   box-sizing: border-box;
   z-index: 15;
 }
@@ -202,6 +196,7 @@ CENTER PANEL
 }
 
 /* DEBUG THING */
+
 #preview_tmp {
   position: absolute;
   top: 0px;
@@ -219,8 +214,9 @@ CENTER PANEL
 }
 
 /*
-DOODLE UP/DOWN/LEFT/RIGHT buttons
+  DOODLE UP/DOWN/LEFT/RIGHT buttons
- */
+*/
+
 .manipulationBtns {
   margin: 2px 5px;
   position: absolute;
@@ -276,33 +272,30 @@ DOODLE UP/DOWN/LEFT/RIGHT buttons
 }
 
 /*
-HEIGHT-related RESPONSIVE STUFF
+	HEIGHT-related RESPONSIVE STUFF
- */
+*/
+
 @media screen and (max-height: 700px) {
   .logopanel {
     height: 22%;
-}
+  }
 
-.doodlecontainer {
+  .doodlecontainer {
     height: 68%;
-}
+  }
 
-.d3dlogo {
+  .d3dlogo {
     top: 25%;
     max-width: 399px;
     height: 74px;
     background-image: url('../img/logo/logo_small.png');
-}
+  }
-
 }
 
 @media screen and (max-height: 655px) {
   .bgMiddle {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-	filter: alpha(opacity=0);
     opacity: 0;
-}
+  }
-
 }
 
 @media screen and (max-height: 525px) {
@@ -311,8 +304,7 @@ HEIGHT-related RESPONSIVE STUFF
     height: 57px;
     max-width: 307px;
     background-image: url('../img/logo/logo_smaller.png');
-}
+  }
-
 }
 
 @media screen and (max-height: 375px) {
@@ -320,20 +312,20 @@ HEIGHT-related RESPONSIVE STUFF
     height: 40px;
     max-width: 216px;
     background-image: url('../img/logo/logo_smallest.png');
-}
+  }
-
 }
 
 /*
 
-LEFT PANEL
+  LEFT PANEL
+
+*/
 
- */
 .leftpanel {
   position: absolute;
-	width: 17%; /*  background-color:  rgba(67, 204, 67, 0.4);
+  width: 17%;
-	*/
+  /*  background-color: rgba(67, 204, 67, 0.4);*/
-top: 0px;
+  top: 0px;
   left: 0px;
   bottom: 0px;
 }
@@ -379,14 +371,15 @@ top: 0px;
 
 /*
 
-RIGHT PANEL
+  RIGHT PANEL
+
+*/
 
- */
 .rightpanel {
   position: absolute;
-	width: 17%; /*  background-color:  rgba(255, 0, 254, 0.4);
+  width: 17%;
-	*/
+  /*  background-color: rgba(255, 0, 254, 0.4);*/
-top: 0;
+  top: 0;
   right: 0;
   bottom: 0;
 }
@@ -431,26 +424,26 @@ top: 0;
 
 /*
 
-PROGRESSGUAGE AND THERMOMETER SHARED STYLES
+  PROGRESSGUAGE AND THERMOMETER SHARED STYLES
+
+*/
 
- */
 .progressbarAppear {
-	/*margin-right:  1.5% !important;
+  /*margin-right: 1.5% !important;*/
-	*/
+  right: -0.5% !important;
-right: -0.5% !important;
 }
 
 .thermometerAppear {
-	/*margin-right:  1.5% !important;
+  /*margin-right: 1.5% !important;*/
-	*/
+  right: -6.5% !important;
-right: -6.5% !important;
 }
 
 /*
 
-PROGRESS GUAGE
+  PROGRESS GUAGE
+
+*/
 
- */
 .progressbarCanvasContainerParent {
   position: relative;
   width: 100%;
@@ -462,18 +455,13 @@ PROGRESS GUAGE
   float: right;
   border: solid #000;
   border-width: 2px 0 2px 2px;
-	border-radius: 15px 0 0 15px; /*padding:  5px 0px 5px 5px;
+  border-radius: 15px 0 0 15px;
-	*/
+  /*padding: 5px 0px 5px 5px;*/
-padding: 5px;
+  padding: 5px;
   background-color: #fff;
-
   -webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
   box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
-
   -webkit-transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-	-moz-transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-	-o-transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-	-ms-transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   right: -60%;
   margin-top: 5%;
@@ -491,9 +479,10 @@ padding: 5px;
 
 /*
 
-THERMOMETER
+  THERMOMETER
+
+*/
 
- */
 .thermometerContainerParent {
   position: relative;
   width: 100%;
@@ -509,14 +498,9 @@ THERMOMETER
   border-width: 2px 0 2px 2px;
   border-radius: 15px 0 0 15px;
   padding: 5px;
-
   -webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
   box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
-
   -webkit-transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-	-moz-transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-	-o-transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-	-ms-transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   right: -55%;
 }
@@ -532,11 +516,10 @@ THERMOMETER
 }
 
 /*
-under all the above styles w.r.t. the cascading effect
+  under all the above styles w.r.t. the cascading effect
- */
+*/
+
 .disabled {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
-	filter: alpha(opacity=30);
   opacity: 0.3;
   cursor: default;
 }
@@ -547,14 +530,20 @@ under all the above styles w.r.t. the cascading effect
 
 /*
 
-REST
+  REST
+
+*/
 
- */
 /* CLEARFIX */
+
 /* http://nicolasgallagher.com/micro-clearfix-hack/ */
-.clearfix:before,.clearfix:after {
+
-	content: " "; /* 1 */
+.clearfix:before,
-display: table; /* 2 */
+.clearfix:after {
+  content: " ";
+  /* 1 */
+  display: table;
+  /* 2 */
 }
 
 .clearfix:after {
@@ -562,15 +551,17 @@ display: table; /* 2 */
 }
 
 /* For IE 6/7 only*/
+
 .clearfix {
   *zoom: 1;
 }
 
 /*
 
-SETTINGS POPUP
+  SETTINGS POPUP
+
+*/
 
- */
 #contentOverlay {
   background-color: rgba(255, 255, 255, 0.65);
   z-index: 20;
@@ -597,7 +588,6 @@ SETTINGS POPUP
   width: 80%;
   height: 75%;
   margin: 7% 8%;
-
   -webkit-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
   box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
   border: 2px solid #222;
@@ -631,9 +621,8 @@ SETTINGS POPUP
   width: 83%;
   height: 98%;
   margin: .5%;
-
-	-ms-overflow-y: scroll;
   overflow-y: scroll;
+  overflow-x: hidden;
   border: 1px solid #bbbbbb;
   border-radius: 5px;
 }
@@ -667,7 +656,6 @@ SETTINGS POPUP
   border: 2px solid #333;
   border-width: 0 0 2px 2px;
   font-weight: bold;
-
   -webkit-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
   box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
   color: #333;
@@ -692,201 +680,199 @@ SETTINGS POPUP
   background: #97DD8A;
 }
 
-@media only screen and (max-width: 480px),only screen and (max-width: 720px) and (min-device-pixel-ratio: 1.5),only screen and (max-width: 720px) and (-webkit-min-device-pixel-ratio: 1.5) {
+@media only screen and (max-width: 480px), only screen and (max-width: 720px) and (min-device-pixel-ratio: 1.5), only screen and (max-width: 720px) and (-webkit-min-device-pixel-ratio: 1.5) {
   /*
     TOP LOGO
   */
-.centerpanel {
+
+  .centerpanel {
     left: 0;
     margin-left: 0;
-	width: 100%; /*  background-color:  rgba(0, 135, 255, 0.4);
+    width: 100%;
-	*/
+    /*  background-color: rgba(0, 135, 255, 0.4);*/
-}
+  }
 
-.logopanel {
+  .logopanel {
     height: 40px;
-}
+  }
 
-.d3dlogo {
+  .d3dlogo {
     top: 0;
     height: 40px;
     max-width: 216px;
     background-image: url('../img/logo/logo_smallest.png');
-}
+  }
 
-.drawareacontainer {
+  .drawareacontainer {
-	/*	position:  absolute;
+    /*	position: absolute;*/
-	*/
+    height: 70%;
-height: 70%;
+  }
-}
 
-.bottompanel {
+  .bottompanel {
     height: 10%;
-}
+  }
 
-.bottompanel .manipulationBtns {
+  .bottompanel .manipulationBtns {
     margin: 2px -27;
     right: 22%;
     width: 38%;
-}
+  }
 
-/*
+  /*
     LEFT
   */
-.leftpanel {
+
+  .leftpanel {
     width: 100px;
     background-color: #fff;
     z-index: 50;
-
     -webkit-transition: left 0.3s ease-out;
-	-moz-transition: left 0.3s ease-out;
-	-o-transition: left 0.3s ease-out;
-	-ms-transition: left 0.3s ease-out;
     transition: left 0.3s ease-out;
-}
+  }
 
-.hideleft {
+  .hideleft {
     left: -101px;
-}
+  }
 
-.shadowright {
+  .shadowright {
     -webkit-box-shadow: 2px 0 4px rgba(42, 42, 41, 0.6);
     box-shadow: 2px 0 4px rgba(42, 42, 41, 0.6);
-}
+  }
 
-.btnNew {
+  .btnNew {
     margin: 5% 5% 1% 5%;
     width: 90%;
-}
+  }
 
-.btnSave {
+  .btnSave {
     margin-left: 9%;
     width: 75%;
-}
+  }
 
-.btnOops {
+  .btnOops {
     margin-left: 6%;
     width: 71%;
-}
+  }
 
-/*
+  /*
     RIGHT
   */
-.rightpanel {
+
+  .rightpanel {
     width: 100px;
     background-color: #fff;
     z-index: 50;
-
     -webkit-transition: right 0.3s ease-out;
-	-moz-transition: right 0.3s ease-out;
-	-o-transition: right 0.3s ease-out;
-	-ms-transition: right 0.3s ease-out;
     transition: right 0.3s ease-out;
-}
+  }
 
-.hideright {
+  .hideright {
     right: -101px;
-}
+  }
 
-.shadowleft {
+  .shadowleft {
     -webkit-box-shadow: -2px 0 4px rgba(42, 42, 41, 0.6);
     box-shadow: -2px 0 4px rgba(42, 42, 41, 0.6);
-}
+  }
 
-.btnPrint {
+  .btnPrint {
     margin: 1% 5% 5% 5%;
     width: 90%;
-}
+  }
 
-.btnStop {
+  .btnStop {
     margin: 5% 6% 1% 5%;
     width: 70%;
-}
+  }
 
-/*
+  /*
     REST
   */
-.sidebutton {
+
+  .sidebutton {
     display: block;
-	position: absolute; /*  top:  50%;
+    position: absolute;
-	*/
+    /*  top: 50%;*/
-/*  margin-top:  -20px;
+    /*  margin-top: -20px;*/
-	*/
+    top: 40px;
-top: 40px; /*float: right;
+    /*float:right;*/
-	*/
+    width: 25px;
-width: 25px;
     height: 38px;
     border: 1px solid #808;
     background: url('../img/arrows.png') no-repeat;
     background-color: #eee;
     cursor: pointer;
-}
+  }
 
-.sidebutton:active {
+  .sidebutton:active {
     background-color: #aaa;
-}
+  }
 
-.leftpanel .sidebutton {
+  .leftpanel .sidebutton {
     right: -27px;
     background-position: 0px 0px;
-}
+  }
 
-.rightpanel .sidebutton {
+  .rightpanel .sidebutton {
     left: -27px;
     background-position: -25px 0px;
-}
+  }
 
-.sidebuttonin:active {
+  .sidebuttonin:active {
     background-color: #888;
-}
+  }
 
-.leftpanel .sidebuttonin {
+  .leftpanel .sidebuttonin {
     background-color: #ccc;
     background-position: -25px 0px;
-}
+  }
 
-.rightpanel .sidebuttonin {
+  .rightpanel .sidebuttonin {
     background-color: #ccc;
     background-position: 0px 0px;
-}
+  }
 
-/*
+  /*
   
-	SETTINGS POPUP -MOBILE
+    SETTINGS POPUP - MOBILE
   
   */
-#contentOverlay {
-	z-index: 200;
-}
 
-#contentOverlay #settings {
+  #contentOverlay {
+    z-index: 200;
+  }
+
+  #contentOverlay #settings {
     width: 87%;
     height: 82%;
     margin: 6% 4%;
+  }
+
+  #contentOverlay #settings > .right {
+    width: 14%;
+  }
 }
 
-#contentOverlay #settings > .right {
+@media only screen and (min-width: 1000px) and (max-device-pixel-ratio: 1.5), only screen and (min-width: 1000px) and (-webkit-max-device-pixel-ratio: 1.5) {
-	width: 14%;
-}
 
 }
 
 @media only screen and (orientation: portrait) {
   #landscape {
     display: none;
-}
+  }
 
-#portrait {
+  #portrait {
     display: block;
-}
+  }
 
-.vertImage {
+  .vertImage {
     margin: 0px;
-	padding: 0px; /*border:  2px solid #f0f;
+    padding: 0px;
-	*/
+    /*border: 2px solid #f0f;*/
-max-width: 100%;
+    max-width: 100%;
     height: auto;
-	width: auto; /* for ie9 */
+    width: auto;
-}
+    /* for ie9 */
-
+  }
 }