diff --git a/css/main.css b/css/main.css
index a1aeaa79c7513e1f0a43e9a438d043cab8b7e9d5..4b9fad6387d79f810115623e5354f5f41bc2e5bb 100644
--- a/css/main.css
+++ b/css/main.css
@@ -304,7 +304,6 @@ input.intInput, input.floatInput{
 
 #navRibbon{
     height: 49px;
-    width: 400px;
     z-index: 1;
     display: block;
     position: absolute;
diff --git a/js/lattice/CompositeEditorLattice.js b/js/lattice/CompositeEditorLattice.js
index 58b9154f03229452e511b3514c49434c4dbd2306..a3f9e4df7124a8b850efed93c29ead67814df968 100644
--- a/js/lattice/CompositeEditorLattice.js
+++ b/js/lattice/CompositeEditorLattice.js
@@ -71,10 +71,7 @@ define(['underscore', 'backbone', 'appState', 'globals', 'plist', 'three', 'thre
                 cellsMax: this.get("cellsMax").clone(),
                 dimensions: dimensions
             };
-            if (!materials[id]) materials[id] = {};
-            _.extend(materials[id], data);//todo trigger change on all instances
-            if (materials[id].threeMaterial) materials[id].threeMaterial.color = new THREE.Color(this.get("color"));
-            else materials[id].threeMaterial = new THREE.MeshLambertMaterial({color:new THREE.Color(this.get("color")), shading:THREE.FlatShading})
+            materials.setMaterial(id, data);
         },
 
         deleteComposite: function(){
diff --git a/js/materials/DMAMaterials.js b/js/materials/DMAMaterials.js
index 0f662e1b48813baa34dc1058b2cb4c165962e7fc..b55e9d06cafb50b515d37bb0e61d635d5d05b079 100644
--- a/js/materials/DMAMaterials.js
+++ b/js/materials/DMAMaterials.js
@@ -9,6 +9,12 @@ define(['underscore', 'three', 'appState', 'lattice', 'plist', 'threeModel'], fu
         deleteMaterial: {
             color: "#ff0000",
             threeMaterial:new THREE.MeshLambertMaterial({color:"#ff0000", shading:THREE.FlatShading})
+        },
+        setMaterial: function(id, data){
+            if (!materials[id]) materials[id] = {};
+            var oldColor = materials[id].color;
+            _.extend(materials[id], data);//todo trigger change on all instances
+            if (materials[id].threeMaterial || oldColor != materials[id].color) changeSingleMaterialColorScheme(id);
         }
     };
 
@@ -44,14 +50,19 @@ define(['underscore', 'three', 'appState', 'lattice', 'plist', 'threeModel'], fu
     function changeColorScheme(){
         var state = appState.get("realisticColorScheme");
         _.each(_.keys(materials), function(name){
-            var materialInfo = materials[name];
-            var color = getMaterialColorForState(state, materialInfo, name);
-            if (materialInfo.threeMaterial) materialInfo.threeMaterial.color = new THREE.Color(color);
-            else materialInfo.threeMaterial = makeMaterialObject(color);
+            changeSingleMaterialColorScheme(name, state);
         });
         three.render();
     }
 
+    function changeSingleMaterialColorScheme(name, state){
+        if (!state) state = appState.get("realisticColorScheme");
+        var materialInfo = materials[name];
+        var color = getMaterialColorForState(state, materialInfo, name);
+        if (materialInfo.threeMaterial) materialInfo.threeMaterial.color = new THREE.Color(color);
+        else materialInfo.threeMaterial = makeMaterialObject(color);
+    }
+
     function getMaterialColorForState(state, definition, key){
         var color = definition.color;
         if (!color) console.warn("no color for material type " + key);
diff --git a/js/models/FileSaver.js b/js/models/FileSaver.js
index bcc6974222c54aea5b972262bda8eef273211b78..acbd8670393984bac34481e31cc81f6aed11585d 100644
--- a/js/models/FileSaver.js
+++ b/js/models/FileSaver.js
@@ -3,7 +3,7 @@
  */
 
 
-define(['underscore', 'fileSaverLib', 'lattice'], function(_, saveAs, lattice){
+define(['underscore', 'fileSaverLib', 'lattice', 'materials'], function(_, saveAs, lattice, materials){
 
     function _saveFile(data, name, extension){
         var blob = new Blob([data], {type: "text/plain;charset=utf-8"});
@@ -22,7 +22,8 @@ define(['underscore', 'fileSaverLib', 'lattice'], function(_, saveAs, lattice){
     function save(name){
         if (!name || name == "" || name == undefined) name = "DM Assembly";
         var data = JSON.stringify({
-            assembly:_getLatticeDataToSave()
+            assembly:_getLatticeDataToSave(),
+            materials:_getMaterialsDataToSave()
         });
         _saveFile(data, name, ".json");
     }
@@ -52,7 +53,25 @@ define(['underscore', 'fileSaverLib', 'lattice'], function(_, saveAs, lattice){
         return lattice.getSaveJSON();
     }
 
+    function _getMaterialsDataToSave(){
+        var data = {};
+        var compositeKeys = _.filter(_.keys(materials), function(key){
+            return key.substr(0,5) == "super";
+        });
+        _.each(compositeKeys, function(key){
+            data[key] = _.omit(materials[key], "threeMaterial");
+        });
+        return data;
+    }
+
     function loadFile(data){//parsed json todo make this better - load composite
+        if (!data.materials){
+            console.warn("no material definitions in this file")
+            return;
+        }
+        _.each(_.keys(data.materials), function(key){
+            materials.setMaterial(key, data.materials[key]);
+        });
         if (!data.assembly){
             console.warn("no assembly in this file");
             return;