diff --git a/skyquake/plugins/composer/src/src/styles/EditConfigParameterMap.scss b/skyquake/plugins/composer/src/src/styles/EditConfigParameterMap.scss
new file mode 100644
index 0000000..ed16003
--- /dev/null
+++ b/skyquake/plugins/composer/src/src/styles/EditConfigParameterMap.scss
@@ -0,0 +1,328 @@
+/*
+ *
+ *   Copyright 2016 RIFT.IO Inc
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ *
+ */
+
+@import "main";
+@import "ColorGroups";
+
+.config-parameter-map {
+
+	$field-border-radius: 3px;
+	$field-background-color: white;
+	$child-indent-left-right-margin: 5px;
+
+	font-size: smaller;
+	display:-ms-flexbox;
+	display:flex;
+	-ms-flex-wrap: wrap;
+	    flex-wrap: wrap;
+
+
+
+	width: 600px;
+
+	.config-parameter {
+		-ms-flex: 1 1 50%;
+		    flex: 1 1 50%;
+		    &-source, &-request {
+				border-top:1px solid $vld-primary-color;
+		    }
+	}
+
+
+	h1 {
+		text-align: left;
+		span:last-child {
+			i {
+				display: none;
+			}
+		}
+	}
+
+	h2 {
+		@extend h1;
+
+	}
+
+	.basic-properties-group {
+		> h1 {
+			display: none;
+		}
+	}
+
+	.advanced-properties-group {
+	}
+
+	/* label is used as list item headers */
+	h3 {
+		@extend h2;
+		display: inline-block;
+		.name {
+			color: #586e75;
+		}
+		.value {
+			display: none;
+			color: #002b36;
+		}
+		.info {
+			margin: 4px;
+		}
+	}
+
+	val {
+		display: inline-block;
+		color: #073642;
+	}
+
+	a {
+		&.simple-list-item {
+			display: inline-block;
+			width: 230px;
+			padding: 4px 16px 4px 4px;
+			white-space: nowrap;
+		}
+		&.vld-list-item,
+		&.internal-vld-list-item{
+			border: 1px solid $vld-primary-color;
+			border-radius: 24px;
+			background: white linear-gradient(to right, $vld-primary-color 34px, white 34px);;
+		}
+		&.vnfd-list-item,
+		&.constituent-vnfd-list-item{
+			border: 1px solid $vnfd-primary-color;
+			border-radius: 11px;
+			background: white linear-gradient(to right, $vnfd-primary-color 34px, white 34px);;
+		}
+		&.vdu-list-item {
+			border: 1px solid $vdu-primary-color;
+			border-radius: 11px;
+			background: white linear-gradient(to right, $vdu-primary-color 34px, white 34px);;
+		}
+		&.vnffgd-list-item {
+			border: 1px solid $vnffgd-primary-color;
+			border-radius: 11px;
+			background: white linear-gradient(to right, $vnffgd-primary-color 34px, white 34px);;
+		}
+	}
+
+	&.-is-tree-view {
+		.property {
+
+			position: relative;
+			overflow: hidden;
+
+			margin: 8px 8px;
+
+			background-color: rgba(147, 161, 161, 0.5);
+			border-radius: $field-border-radius;
+
+			> h3 {
+				position: absolute;
+				top: 2px;
+				right: 18px;
+				height: 21px;
+				pointer-events: none;
+				border-radius: $field-border-radius;
+				padding: 3px 0;
+			}
+
+			> val {
+				width: 100%;
+				> .property-content {
+					width: 100%;
+				}
+
+			}
+
+			&.-is-focused {
+				> h3 {
+					/*z-index: -1;*/
+				}
+			}
+
+			&.leaf-property {
+				overflow: hidden;
+				min-height: 25px;
+				> h3 {
+					background: linear-gradient(to right, transparent, $field-background-color 21px);
+					padding-left: 25px;
+				}
+				> val {
+					border-radius: $field-border-radius;
+					> .property-content {
+						border-radius: $field-border-radius;
+					}
+				}
+			}
+
+			&.property:not(.leaf-property) {
+
+				padding: 7px $child-indent-left-right-margin 0 $child-indent-left-right-margin;
+
+				&.list-property {
+					> h3 {
+						padding: 4px 8px;
+					}
+				}
+
+				> h3 {
+					right: auto;
+					top: 0;
+					left: 0;
+					width: 100%;
+					height: 25px;
+					z-index: 1;
+					padding: 8px;
+					/*background: red;*/
+					pointer-events: all;
+				}
+				> val {
+					margin: 28px 0 8px 0;
+					> .property-content {
+						position: relative;
+						border-radius: $field-border-radius;
+						margin-top: 4px;
+						padding: 4px;
+						&:first-of-type {
+							margin-top: 0;
+						}
+						&.simple-list {
+							min-height: 15px;
+							margin: 11px;
+							.simple-list-item {
+								img,
+								span {
+									margin: 0 5px;
+									vertical-align: middle;
+								}
+							}
+						}
+					}
+					> .property-content:not(.simple-list) {
+						&:nth-of-type(odd) {
+							background-color: rgba(238, 232, 213, 0.33);
+						}
+						&:nth-of-type(even) {
+							background-color: rgba(147, 161, 161, 0.33);
+						}
+					}
+					.tip {
+						font-style: italic;
+						font-size: small;
+						color: #93a1a1;
+					}
+				}
+			}
+
+			.actions {
+				span {
+					vertical-align: middle;
+					padding: 0 5px;
+				}
+			}
+
+		}
+
+	}
+
+	.description {
+		display: none;
+	}
+
+	input,
+	select,
+	textarea {
+		height: 25px;
+		line-height: 25px;
+		max-width: 100%;
+		min-width: 100%;
+		margin: 0;
+		padding: 0 0px 4px 8px;
+		border: 1px solid $field-background-color;
+		border-radius: $field-border-radius;
+		color: #002b36;
+		background-color: $field-background-color;
+		vertical-align: top;
+		&:focus {
+			color: #002b36;
+			background-color: white !important;
+		}
+		&::-webkit-input-placeholder {
+			color: #eee8d5 !important;
+		}
+
+		&:-moz-placeholder { /* Firefox 18- */
+			color: #eee8d5 !important;
+		}
+
+		&::-moz-placeholder {  /* Firefox 19+ */
+			color: #eee8d5 !important;
+		}
+
+		&:-ms-input-placeholder {
+			color: #eee8d5 !important;
+		}
+	}
+
+	select {
+		padding-right: 0;
+		margin-right: 0;
+		-webkit-appearance: none;
+		-webkit-border-radius: $field-border-radius;
+		&.-value-not-set {
+			color: #eee8d5;
+		}
+	}
+
+	select {
+		-webkit-appearance: none;
+		   -moz-appearance: none;
+		        appearance: none; /* using -prefix-free http://leaverou.github.io/prefixfree/*/
+        background: $field-background-color url(../../../node_modules/open-iconic/svg/caret-bottom.svg) no-repeat right 8px center;
+		background-size: 10px;
+		border: {
+			color: $field-background-color;
+			radius: $field-border-radius;
+			style: solid;
+			width: 1px;
+		}
+	}
+
+	/* Removes default arrow for IE10+*/
+	/* IE 8/9 get dafault arrow which covers caret image*/
+	/* as long as caret image is small than and positioned*/
+	/* behind default arrow*/
+	select::-ms-expand {
+		display: none;
+	}
+
+	textarea {
+		height: 50px;
+	}
+
+	input {
+		padding: 0 20px 0 8px;
+		line-height: 25px;
+	}
+
+	input[name$="id"],
+	input.-is-guid {
+		font-size: 10px;
+		font-family: monospace;
+	}
+
+}