diff --git a/js/SettingsWindow.js b/js/SettingsWindow.js
index f38c8b4..fdd516a 100644
--- a/js/SettingsWindow.js
+++ b/js/SettingsWindow.js
@@ -77,7 +77,7 @@ function SettingsWindow() {
 		this.btnOK = this.window.find(".btnOK");
 		enableButton(this.btnOK,this.submitwindow);
 
-		this.window.find(".settingsContainer").load("settings.html", function() {
+		this.window.find("#settingsContainer").load("settings.html", function() {
 			console.log("Settings:finished loading settings.html, now loading settings...");
 
 			self.form = self.window.find("form");
diff --git a/js/WordArt.js b/js/WordArt.js
index 72bf59c..85994ee 100644
--- a/js/WordArt.js
+++ b/js/WordArt.js
@@ -1,15 +1,15 @@
 function initWordArt() {
 	$("body").append('<div id="svgfont" style="display:none"></div>');
 	$("#svgfont").load("img/font.svg?");
-  $(".btnWordArtOk").on("onButtonClick",onWordArtOk);
-  $(".btnWordArtCancel").on("onButtonClick",onWordArtCancel);
+  $("#btnWordArtOk").on("onButtonClick",onWordArtOk);
+  $("#btnWordArtCancel").on("onButtonClick",onWordArtCancel);
 }
 
 function showWordArtDialog() {
   buttonGroupAdd.hide();
   showPopup(popupWordArt);
-  $(".txtWordArt").focus();
-  $(".txtWordArt").val(""); //clear textbox
+  $("#txtWordArt").focus();
+  $("#txtWordArt").val(""); //clear textbox
 }
 
 function onWordArtCancel() {
@@ -19,7 +19,7 @@ function onWordArtCancel() {
 function onWordArtOk() {
   hidePopup(popupWordArt);
 
-  var s = $(".txtWordArt").val();
+  var s = $("#txtWordArt").val();
 
   if (s!=undefined) {
     var points = getStringAsPoints(s);
diff --git a/js/buttonbehaviors.js b/js/buttonbehaviors.js
index dd96972..a97b9d5 100644
--- a/js/buttonbehaviors.js
+++ b/js/buttonbehaviors.js
@@ -16,36 +16,36 @@ function initButtonBehavior() {
 
   $(".btn").Button(); //initalizes all buttons
 
-  btnOops = $(".btnOops");
-  btnInfo = $(".btnInfo");
-  btnSettings = $(".btnSettings");
-  btnNew = $(".btnNew");
-  btnPrint= $(".btnPrint");
-  btnStop = $(".btnStop");
-  btnPrevious = $(".btnPrevious");
-  btnNext = $(".btnNext");
-  btnSave = $(".btnSave");
-  btnWordArt = $(".btnWordArt");
-  btnZoom = $(".btnZoom");
-  btnUp = $(".btnUp");
-  btnDown = $(".btnDown");
-  btnMove = $(".btnMove");
-  btnTwistLeft = $(".btnTwistLeft");
-  btnTwistRight = $(".btnTwistRight");
-  btnShape = $(".btnShape");
-  btnRotate = $(".btnRotate");
-  btnEditClosed = $(".btnEditClosed");
-  btnEditOpen = $(".btnEditOpen");
-  btnStraight = $(".btnStraight");
-  btnDiv = $(".btnDiv");
-  btnConv = $(".btnConv");
-  btnSine = $(".btnSine");
-  btnAdd = $(".btnAdd");
-  btnToggleVertical = $(".btnToggleVertical");
+  btnOops = $("#btnOops");
+  btnInfo = $("#btnInfo");
+  btnSettings = $("#btnSettings");
+  btnNew = $("#btnNew");
+  btnPrint= $("#btnPrint");
+  btnStop = $("#btnStop");
+  btnPrevious = $("#btnPrevious");
+  btnNext = $("#btnNext");
+  btnSave = $("#btnSave");
+  btnWordArt = $("#btnWordArt");
+  btnZoom = $("#btnZoom");
+  btnUp = $("#btnUp");
+  btnDown = $("#btnDown");
+  btnMove = $("#btnMove");
+  btnTwistLeft = $("#btnTwistLeft");
+  btnTwistRight = $("#btnTwistRight");
+  btnShape = $("#btnShape");
+  btnRotate = $("#btnRotate");
+  btnEditClosed = $("#btnEditClosed");
+  btnEditOpen = $("#btnEditOpen");
+  btnStraight = $("#btnStraight");
+  btnDiv = $("#btnDiv");
+  btnConv = $("#btnConv");
+  btnSine = $("#btnSine");
+  btnAdd = $("#btnAdd");
+  btnToggleVertical = $("#btnToggleVertical");
   buttonGroupAdd = $("#buttonGroupAdd");
-  buttonGroupVertical = $(".buttonGroupVertical");
-  popupWordArt = $(".popupWordArt");
-  popupShape = $(".popupShape");
+  buttonGroupVerticalShapes = $("#buttonGroupVerticalShapes");
+  popupWordArt = $("#popupWordArt");
+  popupShape = $("#popupShape");
 
   btnNew.on("onButtonClick", onBtnNew);
   btnWordArt.on("onButtonClick", onBtnWordArt);
@@ -74,7 +74,7 @@ function initButtonBehavior() {
   setSketchModified(false);
 
   function onBtnToggleVertical() {
-      buttonGroupVertical.toggle();
+  	buttonGroupVerticalShapes.toggle();
   }
 
   function onBtnAdd() {
@@ -198,7 +198,7 @@ function initButtonBehavior() {
 
   function onBtnShape(e) {
     showShapeDialog();
-    buttonGroupAdd.hide();
+    buttonGroupAdd.fadeOut();
   }
 
   enableButton(btnSettings, openSettingsWindow);
diff --git a/js/init_layout.js b/js/init_layout.js
index 34be0e0..9058274 100644
--- a/js/init_layout.js
+++ b/js/init_layout.js
@@ -27,7 +27,7 @@ function doOnResize() {
 function initLayouting() {
   console.log("f:initLayouting()");
 
-  $drawAreaContainer = $(".drawareacontainer");
+  $drawAreaContainer = $("#drawareacontainer");
 
   canvas.width = $canvas.width();
   canvas.height = $canvas.height(); // canvas.clientHeight;
diff --git a/js/sidebar.js b/js/sidebar.js
index aeefeed..8b61931 100644
--- a/js/sidebar.js
+++ b/js/sidebar.js
@@ -5,13 +5,13 @@ function initSidebars() {
   console.log("f:initSidebars()");
 
   sidebarLeft = new SideBar();
-  sidebarLeft.init(".leftpanel", "hideleft", function() {
-    $(".leftpanel").show();
+  sidebarLeft.init("#leftpanel", "hideleft", function() {
+    $("#leftpanel").show();
   });
 
   sidebarRight = new SideBar();
-  sidebarRight.init(".rightpanel", "hideright", function() {
-    $(".rightpanel").show();
+  sidebarRight.init("#rightpanel", "hideright", function() {
+    $("#rightpanel").show();
   });
 }
 
diff --git a/less/base.less b/less/base.less
index c7a64c7..843aedf 100644
--- a/less/base.less
+++ b/less/base.less
@@ -40,7 +40,7 @@ body {
   height: 100%;
   overflow: hidden;
 }
-.bgTop, .bgMiddle, .bgBottom {
+#bgTop, #bgMiddle, #bgBottom {
   opacity: 1.0;
   transition: opacity .35s linear;
   position: absolute;
@@ -48,15 +48,15 @@ body {
   z-index: -5;
 }
 
-.bgTop {
+#bgTop {
   top: 0px;
 }
 
-.bgMiddle {
+#bgMiddle {
   top: 30%;
 }
 
-.bgBottom {
+#bgBottom {
   bottom: 0px;
 }
 
diff --git a/less/base_centerpanel.less b/less/base_centerpanel.less
index fbfdfb6..eb29647 100644
--- a/less/base_centerpanel.less
+++ b/less/base_centerpanel.less
@@ -1,5 +1,5 @@
 //  CENTER PANEL
-.centerpanel {
+#centerpanel {
   position: absolute;
   left: 50%;
   margin-left: -@center-panel-width/2;
@@ -9,20 +9,20 @@
   border: 1px solid red;
 }
 
-.logopanel {
+#logopanel {
   height: 15%;
   text-align: center;
   width: 40%;
   margin-left: 30%;
   cursor: pointer;
 
-  img.pencil {
+  img#pencil {
     margin-top: 2%;
     max-width: 50%;
     max-height: 50%;
   }
 
-  img.logo {
+  img#logo {
     max-width: 90%;
     margin-bottom: 2%;
     max-height: 45%;
@@ -30,7 +30,7 @@
 }
 
 //  DRAW AREA
-.drawareacontainer {
+#drawareacontainer {
   position: relative;
   width: 100%;
   height: 79%;
@@ -99,20 +99,20 @@
 
 @media screen and (max-height: 655px) {
 
-  .logopanel {
+  #logopanel {
     height: 10%;
 
-    img.logo {
+    img#logo {
       margin-top: 1%;
       max-height: 90%;
     }
 
-    img.pencil {
+    img#pencil {
       display: none;
     }
   }
 
-  .drawareacontainer {
+  #drawareacontainer {
     height: 83%;
   }
 
diff --git a/less/base_leftpanel.less b/less/base_leftpanel.less
index c603280..7691c95 100644
--- a/less/base_leftpanel.less
+++ b/less/base_leftpanel.less
@@ -1,5 +1,5 @@
 // LEFT PANEL
-.leftpanel {
+#leftpanel {
   position: absolute;
   width: @left-panel-width;
   top: 0px;
diff --git a/less/base_rightpanel.less b/less/base_rightpanel.less
index 40f5bb6..81ffeac 100644
--- a/less/base_rightpanel.less
+++ b/less/base_rightpanel.less
@@ -1,5 +1,5 @@
 //  RIGHT PANEL
-.rightpanel {
+#rightpanel {
   position: absolute;
   width: @right-panel-width;
   top: 0;
diff --git a/less/buttons.less b/less/buttons.less
index 426773b..f8a1f34 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -9,7 +9,7 @@
   cursor: default;
 }
 
-.btnPrint {
+#btnPrint {
   margin: 1% 5% 5% 0%;
   width: 90%;
   max-width: 163px;
@@ -17,7 +17,7 @@
   float: right;
 }
 
-.btnStop {
+#btnStop {
   margin: 5% 5% 1% 5%;
   float: right;
   width: 80%;
@@ -25,7 +25,7 @@
   height: auto;
 }
 
-.btnsSettingsInfo {
+#btnsSettingsInfo {
   position: absolute;
   bottom: 4%; //25px;
   right: 5px;
@@ -34,58 +34,59 @@
   max-width:  160px;
 }
 
-.btnInfo {
+#btnInfo {
 	width: 40%;
 	max-width: 53px;
 	height: auto;
 }
 
-.btnSettings {
+#btnSettings {
 	width: 40%;
 	max-width: 53px;
 	height: auto;
 	float: right;
 }
 
-.btnNew {
+#btnNew {
   margin: 5% 0% 1% 5%;
   width: 90%;
   max-width: 130px;
   height: auto;
 }
 
-.btnsPrevNext {
+#btnsPrevNext {
   margin: 1% 7%;
   max-width: 100px;
+  text-align:center;
 }
 
-.btnPrevious {
+#btnPrevious {
   width: 40%;
   max-width: 56px;
   height: auto;
 }
 
-.btnNext {
+#btnNext {
   width: 40%;
   max-width: 56px;
   height: auto;
   float: right;
 }
-.btnSave {
+#btnSave {
   margin: 4% 5% 1% 5%;
   width: 90%;
   max-width: 100px;
   height: auto;
 }
 
-.btnOops {
+#btnOops {
   margin: 5% 5% 1% 5%;
   width: 90%;
   max-width: 100px;
   height: auto;
 }
 
-.btnAdd {
+#btnAdd {
   width: 90%;
   max-width: 100px;
   margin: 5% 5% 1% 5%;
@@ -117,14 +118,14 @@
   display: none;
 }
 
-.btnEditClosed {
+#btnEditClosed {
   top: 5px;
   left: 5px;
   width: .75*31px;
   position: absolute;
 }
 
-.btnEditOpen {
+#btnEditOpen {
   position: absolute;
   top: 5px;
   left: 5px;
@@ -132,14 +133,14 @@
   display: none;
 }
 
-.btnAddOpen {
+/*#btnAddOpen {
   position: absolute;
   top: 370px;
   left: 60px;
   z-index: 1000;
   width: 200%;
   display: none;
-}
+}*/
 
 .buttonGroup {
   background-color: white;
@@ -157,13 +158,13 @@
   left: 60px;
   width: 140px;    /*fixme: can this grow based on it's content?*/ 
 
-  .btnWordArt, .btnShape {
+  #btnWordArt, #btnShape {
     width: 60px; /* scaled down >50% */
     float: left;
   }
 }
 
-.buttonGroupVertical {
+#buttonGroupVerticalShapes {
   top: 10px;
   left: 10px;
   padding-top: 20px;
@@ -174,7 +175,7 @@
   }
 }
 
-.btnToggleVertical {
+#btnToggleVertical {
   position: absolute;
   top: 0;
   left: 10px;
diff --git a/less/mobile.less b/less/mobile.less
index e927259..27330a8 100644
--- a/less/mobile.less
+++ b/less/mobile.less
@@ -2,25 +2,25 @@
 /*
   LEFT
 */
-.leftpanel {
+#leftpanel {
   // width: @mobilePanelsWidth;
 
-  .btnNew {
+  #btnNew {
     margin: 5% 5% 1% 5%;
     width: 90%;
   }
 
-  .btnSave {
+  #btnSave {
     margin-left:  5%;
     width: 90%;
   }
 
-  .btnOops {
+  #btnOops {
     margin-left:  5%;
     width: 90%;
   }
 
-  .btnAdd {
+  #btnAdd {
     margin-left:  5%;
     width: 90%;
   }
@@ -29,15 +29,15 @@
 /*
   RIGHT
 */
-.rightpanel {
+#rightpanel {
   // width: @mobilePanelsWidth;
   // margin-top: 5%; /* reserve space for 'status message' in right top */
 
-  .btnPrint {
+  #btnPrint {
     margin: 1% 5% 5% 5%;
     width: 90%;
   }
-  .btnStop {
+  #btnStop {
     margin: 5% 6% 1% 5%;
     width: 70%;
   }
diff --git a/less/popup.less b/less/popup.less
index 5d30556..69a97ab 100644
--- a/less/popup.less
+++ b/less/popup.less
@@ -34,39 +34,39 @@
 	display: none;
 }
 
-.popup.popupWordArt {
+#popupWordArt {
   width: 50%;
 	margin-left: -50%/2;
+	
+	input[type="text"] {
+		width: 100%;
+	}
+	#btnWordArtOk {
+		float: right;
+		margin: 15px 0 18px 0;
+	}
 }
 
-.popup.popupShape {
-  width: 30%;
+#popupShape {
+	width: 30%;
 	margin-left: -30%/2;
-}
-
-.popupWordArt input[type="text"] {
-	width: 100%;
-}
-
-.popupShape {
-	// border: 2px solid black;
-}
-
-#shapePreview {
-	// width: 150px;
-	// height: 150px;
-	border: 1px solid black;
-	border-radius: 5px;
-}
-
-.lblShapeResolution {
-	display: inline-block;
-}
-
-#btnShapeOk {
-	position: absolute;
-	bottom: 5%;
-	right: 3%;
+	
+	#shapePreview {
+		// width: 150px;
+		// height: 150px;
+		border: 1px solid black;
+		border-radius: 5px;
+	}
+	
+	.lblShapeResolution {
+		display: inline-block;
+	}
+	
+	#btnShapeOk {
+		position: absolute;
+		bottom: 5%;
+		right: 3%;
+	}
 }
 
 .columnRight {
diff --git a/less/portrait.less b/less/portrait.less
index 78c8356..c21d977 100644
--- a/less/portrait.less
+++ b/less/portrait.less
@@ -6,7 +6,7 @@
   display: block;
 }
 
-.vertImage {
+#vertImage {
   margin:  0;
   padding: 0;
 /*border: 2px solid #f0f;*/
diff --git a/less/progressbar.less b/less/progressbar.less
index 828c8bd..6674da8 100644
--- a/less/progressbar.less
+++ b/less/progressbar.less
@@ -3,7 +3,7 @@
   PROGRESS GUAGE
 
 */
-.progressbarCanvasContainerParent {
+#progressbarCanvasContainerParent {
   position:relative;
   width:100%;
 }
diff --git a/less/settingsPopup.less b/less/settingsPopup.less
index 4497375..73260d8 100644
--- a/less/settingsPopup.less
+++ b/less/settingsPopup.less
@@ -37,12 +37,12 @@
     .toppanel {
       height: 10%;
 
-      .settingsLabelContainer {
+      #settingsLabelContainer {
         width: 100%;
         height: auto;
         margin-bottom: 1%;
 
-        .settingsLabelImg {
+        #settingsLabelImg {
           width: 45%;
           max-width: 373px;
           height: auto;
@@ -53,7 +53,7 @@
       width: 100%;
       height: 90%;
 
-      > .settingsContainer {
+      > #settingsContainer {
         float:left;
         width: 83%;
         height: 98%;
diff --git a/less/thermometer.less b/less/thermometer.less
index f10da95..7ef7c78 100644
--- a/less/thermometer.less
+++ b/less/thermometer.less
@@ -4,7 +4,7 @@
   THERMOMETER
 
 */
-.thermometerContainerParent {
+#thermometerContainerParent {
   position:relative;
   width:100%;
   padding-top: 10px;
diff --git a/www/index.html b/www/index.html
index c4464d0..a4a8423 100644
--- a/www/index.html
+++ b/www/index.html
@@ -18,41 +18,40 @@
 
   <!-- background images -->
   <div class="bgContainer">
-    <img class="bgTop"    src="img/bg_top.png" />
-    <img class="bgMiddle" src="img/bg_middle.png" />
-    <img class="bgBottom" src="img/bg_bottom.png" />
+    <img id="bgTop"    src="img/bg_top.png" />
+    <img id="bgMiddle" src="img/bg_middle.png" />
+    <img id="bgBottom" src="img/bg_bottom.png" />
   </div>
 
   <!-- left panel -->
-  <div class="leftpanel">
-    <!-- <div class='sidebutton shadowright'></div> -->
-    <img class="btnNew btn" src="img/buttons/btnNew.png" /><br/>
-    <div class="btnsPrevNext" style="text-align:center">
-      <img class="btnPrevious btn disabled" src="img/buttons/btnLeft.png">
-      <img class="btnNext btn disabled" src="img/buttons/btnRight.png">
+  <div id="leftpanel">
+    <img id="btnNew" class="btn" src="img/buttons/btnNew.png" /><br/>
+    <div id="btnsPrevNext">
+      <img id="btnPrevious" class="btn disabled" src="img/buttons/btnLeft.png">
+      <img id="btnNext" class="btn disabled" src="img/buttons/btnRight.png">
     </div>
-    <img class="btnSave btn" src="img/buttons/btnSave.png" /><br/>
-    <img class="btnOops btn" src="img/buttons/btnOops.png" /><br/>
-    <img class="btnAdd btn" src="img/buttons/btnAdd.png" /><br/>
+    <img id="btnSave" class="btn" src="img/buttons/btnSave.png" /><br/>
+    <img id="btnOops" class="btn" src="img/buttons/btnOops.png" /><br/>
+    <img id="btnAdd" class="btn" src="img/buttons/btnAdd.png" /><br/>
 
-    <div class="buttonGroup" id="buttonGroupAdd">
-      <img class="btnWordArt btn" src="img/buttons/btnWordArt.png" />
-      <img class="btnShape btn" src="img/buttons/btnShape.png" />    
+    <div id="buttonGroupAdd" class="buttonGroup">
+      <img id="btnWordArt" class="btn" src="img/buttons/btnWordArt.png" />
+      <img id="btnShape" class="btn" src="img/buttons/btnShape.png" />    
     </div>
 
   </div>
 
   <!-- right panel -->
-  <div class="rightpanel">
-    <img class="btnPrint btn clearfix" src="img/buttons/btnPrint.png" />
-    <img class="btnStop btn clearfix disabled" src="img/buttons/btnStop.png" />
+  <div id="rightpanel">
+    <img id="btnPrint" class="btn clearfix" src="img/buttons/btnPrint.png" />
+    <img id="btnStop" class="btn clearfix disabled" src="img/buttons/btnStop.png" />
 
-    <div class="progressbarCanvasContainerParent">
+    <div id="progressbarCanvasContainerParent">
       <div id="progressbarCanvasContainer">
         <canvas id="progressbarCanvas" width="93" height="82"></canvas>
       </div>
     </div>
-    <div class="thermometerContainerParent">
+    <div id="thermometerContainerParent">
       <div id="thermometerContainer">
         <canvas id="thermometerCanvas" width="90" height="120"></canvas>
       </div>
@@ -69,25 +68,24 @@
       <div><img class="verticalshape sinus" src="img/vertical_shape_icons/sinus.png" /></div>
     </div> -->
 
-    <div class="btnsSettingsInfo">
-      <img class="btnSettings btn" src="img/buttons/btnSettings.png">
-      <img class="btnInfo btn" src="img/buttons/btnInfo.png">
+    <div id="btnsSettingsInfo">
+      <img id="btnSettings" class="btn" src="img/buttons/btnSettings.png">
+      <img id="btnInfo" class="btn" src="img/buttons/btnInfo.png">
     </div>
 
-
   </div>
 
   <div id="message"></div>
 
   <!-- center panel -->
-  <div class="centerpanel">
+  <div id="centerpanel">
     
-    <div class="logopanel" onclick="location.reload()">
-      <img class="pencil" src="img/logo/pencil.png"/>
-      <img class="logo" src="img/logo/doodle3d.png"/>
+    <div id="logopanel" onclick="location.reload()">
+      <img id="pencil" src="img/logo/pencil.png"/>
+      <img id="logo" src="img/logo/doodle3d.png"/>
     </div>
 
-    <div class="drawareacontainer">
+    <div id="drawareacontainer">
       
       <div id="canvasContainers">
         <div id="mycanvasContainer">
@@ -96,25 +94,25 @@
 
         <div id="previewContainer">
           <canvas id="preview"></canvas>
-          <div class="buttonGroup buttonGroupVertical">
-            <img class="btn btnTwistLeft" src="img/buttons/btnTwistLeft.png" />
-            <img class="btn btnTwistRight" src="img/buttons/btnTwistRight.png" />
-            <img class="btn btnUp" src="img/buttons/btnUp.png" />
-            <img class="btn btnDown" src="img/buttons/btnDown.png" />
+          <div id="buttonGroupVerticalShapes" class="buttonGroup">
+            <img id="btnTwistLeft" class="btn" src="img/buttons/btnTwistLeft.png" />
+            <img id="btnTwistRight" class="btn" src="img/buttons/btnTwistRight.png" />
+            <img id="btnUp" class="btn" src="img/buttons/btnUp.png" />
+            <img id="btnDown" class="btn" src="img/buttons/btnDown.png" />
             <hr>
-            <img class="btn btnConv" src="img/buttons/btnConv.png" />
-            <img class="btn btnDiv" src="img/buttons/btnDiv.png" />
-            <img class="btn btnSine" src="img/buttons/btnSine.png" />
-            <img class="btn btnStraight" src="img/buttons/btnStraight.png" />
+            <img id="btnConv" class="btn" src="img/buttons/btnConv.png" />
+            <img id="btnDiv" class="btn" src="img/buttons/btnDiv.png" />
+            <img id="btnSine" class="btn" src="img/buttons/btnSine.png" />
+            <img id="btnStraight" class="btn" src="img/buttons/btnStraight.png" />
           </div>
-          <img class="btn btnToggleVertical" src="img/buttons/btnArrowOpen.png" />      
+          <img id="btnToggleVertical" class="btn" src="img/buttons/btnArrowOpen.png" />      
         </div>
       
       </div>
       <canvas id="preview_tmp"></canvas>
 
-      <img class="btnEditClosed btn" src="img/buttons/btnEditClosed.png" />
-      <img class="btnEditOpen btn" src="img/buttons/btnEditOpen.png" />
+      <img id="btnEditClosed" class="btn" src="img/buttons/btnEditClosed.png" />
+      <img id="btnEditOpen" class="btn" src="img/buttons/btnEditOpen.png" />
 
     </div>  
   </div>
@@ -127,16 +125,16 @@
 
   <div id="popupMask"></div>
 
-  <div class="popup popupWordArt">
+  <div class="popup" id="popupWordArt">
     <div class="content">
       <h1>Add WordArt</h1>
       Please enter your text:<br>
-      <input class="txtWordArt" type="text"/>
-      <img class="btn btnWordArtOk" src="img/buttons/btnOk.png">
+      <input id="txtWordArt" type="text"/>
+      <img id="btnWordArtOk" class="btn" src="img/buttons/btnOk.png">
     </div>
   </div>
 
-  <div class="popup popupShape">
+  <div class="popup" id="popupShape">
     <div class="content">
       <h1>Add a new shape</h1>
       <div class="columnRight">
@@ -152,12 +150,12 @@
   <div id="contentOverlay">
     <div id="settings">
       <div class="toppanel">
-        <div class="settingsLabelContainer">
-          <img class="settingsLabelImg" src="img/settings_lable.png" alt="settings" />
+        <div id="settingsLabelContainer">
+          <img id="settingsLabelImg" src="img/settings_lable.png" alt="settings" />
         </div>
       </div>
       <div class="bottompanel">
-        <div class="settingsContainer"></div>
+        <div id="settingsContainer"></div>
         <div class="right">
           <div class="btnContainer">
             <img src="img/buttons/btnOk.png" class="btn btnOK" alt="save"/>
@@ -169,7 +167,7 @@
 </div>
 
 <div id="portrait">
-  <img class="vertImage" src="img/bg_vertical.png"/>
+  <img id="vertImage" src="img/bg_vertical.png"/>
 </div>
 <div id="helpContainer"></div>