Website data from existing child tables, layout, images
diff --git a/erpnext/public/css/website.css b/erpnext/public/css/website.css
index 1617ea7..1d30e78 100644
--- a/erpnext/public/css/website.css
+++ b/erpnext/public/css/website.css
@@ -250,3 +250,27 @@
 .product-image-wrapper {
   padding-bottom: 40px;
 }
+.duration-bar {
+  display: inline-block;
+  color: white;
+  /* border-right: 2px solid green; */
+  background: #8FD288;
+  padding: 3px;
+}
+.duration-invisible {
+  visibility: hidden;
+}
+.duration-value {
+  float: right;
+}
+.bar-outer-text {
+  color: #8FD288;
+  background: none;
+  float: none;
+  border: none;
+}
+.thumbsize {
+	width: 200px;
+	height: 200px;
+  padding: 0;
+}
\ No newline at end of file
diff --git a/erpnext/public/less/website.less b/erpnext/public/less/website.less
index a645f28..b816354 100644
--- a/erpnext/public/less/website.less
+++ b/erpnext/public/less/website.less
@@ -320,4 +320,33 @@
 
 .product-image-wrapper {
 	padding-bottom: 40px;
+}
+
+.duration-bar {
+  display: inline-block;
+  color: white;
+  /* border-right: 2px solid green; */
+  background: #8FD288;
+  padding: 3px;
+}
+
+.duration-invisible {
+  visibility: hidden;
+}
+
+.duration-value {
+  float: right;
+}
+
+.bar-outer-text {
+  color: #8FD288;
+  background: none;
+  float: none;
+  border: none;
+}
+
+.thumbsize {
+	width: 200px;
+	height: 200px;
+	padding: 0;
 }
\ No newline at end of file