diff --git a/codepot/src/codepot/views/login.php b/codepot/src/codepot/views/login.php
index bb5e2b61..7299da5f 100644
--- a/codepot/src/codepot/views/login.php
+++ b/codepot/src/codepot/views/login.php
@@ -41,7 +41,7 @@ $this->load->view (
 );
 ?>
 
-<div class="mainarea">
+<div class="mainarea" id="login_mainarea">
 
 <?php if ($message != "") print "<div id='project_create_message' class='form_message'>$message</div>"; ?>
 
@@ -50,20 +50,50 @@ $this->load->view (
 
 		<?=form_hidden('user_url', set_value ('user_url', $user_url))?>
 
-		<div class="textfield">
+		<div class="login_form_field_div">
+			<!--
 			<?=form_label($this->lang->line('Username'), 'user_name')?>
 			<?=form_input('user_name', set_value ('user_name', $user_name))?>
+			-->
+
+			<?php
+			print form_input (
+				'user_name', 
+				set_value ('user_name', $user_name), 
+				"size='30' id='login_user_name' placeholder={$this->lang->line('Username')}"
+			);
+			?>
+
 			<?=form_error('user_name')?>
 		</div>
 	
-		<div class="textfield">
+		<div class="login_form_field_div">
+			<!--
 			<?=form_label($this->lang->line('Password'), 'user_pass')?>
 			<?=form_password('user_pass')?>
+			-->
+			<?php
+			print form_password (
+				'user_pass',
+				set_value ('user_pass', $user_pass),
+				"size='30' id='login_user_pass' placeholder={$this->lang->line('Password')}"
+			);
+			?>
 			<?=form_error('user_pass')?>
 		</div>
 	
-		<div class="buttons">
+		<div class="login_form_field_div">
+			<!--
 			<?=form_submit('login', $this->lang->line('Sign in'))?>
+			-->
+
+			<?php
+			print form_submit (
+				'login', 
+				$this->lang->line('Sign in'), 
+				'class="button" id="login_signin_button"'
+			);
+			?>
 		</div>
 	<?=form_fieldset_close()?>
 
diff --git a/codepot/src/css/common.css b/codepot/src/css/common.css
index 9880110b..0db05678 100644
--- a/codepot/src/css/common.css
+++ b/codepot/src/css/common.css
@@ -103,40 +103,13 @@ body {
 .content .taskbar form input[type="text"] {
 	height: 1.8em; // lower than line-height of taskbar 
 	vertical-align: middle;
-
-	border: 1px solid #B9BDC1;
-	-moz-box-shadow: 0 2px 4px #bbb inset;
-	-webkit-box-shadow: 0 2px 4px #BBB inset;
-	box-shadow: 0 2px 4px #BBB inset;
-	-moz-border-radius: 3px;
-	-webkit-border-radius: 3px;
-	border-radius: 3px;
-}
-
-.content .taskbar form input[type="text"]:focus {
-	background-color: #E7E8E7;
-	outline: 0;
 }
 
 .content .taskbar form input[type="password"] {
 	height: 1.8em; // lower than line-height of taskbar 
 	vertical-align: middle;
-
-	border: 1px solid #B9BDC1;
-	-moz-box-shadow: 0 2px 4px #bbb inset;
-	-webkit-box-shadow: 0 2px 4px #BBB inset;
-	box-shadow: 0 2px 4px #BBB inset;
-	-moz-border-radius: 3px;
-	-webkit-border-radius: 3px;
-	border-radius: 3px;
 }
 
-.content .taskbar form input[type="password"]:focus {
-	background-color: #E7E8E7;
-	outline: 0;
-}
-
-/*
 .content .taskbar form input[type="submit"] {
 	cursor: pointer;
 	height: 1.8em; // lower than line-height of taskbar 
@@ -145,39 +118,6 @@ body {
 	padding-right: 5px;
 	text-transform: uppercase;
 }
-*/
-
-.content .taskbar .button {
-	cursor: pointer;
-	height: 1.8em; // lower than line-height of taskbar 
-	vertical-align: middle;
-	padding-left: 5px;
-	padding-right: 5px;
-	text-transform: uppercase;
-
-	background: #3498db;
-	background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
-	background-image: -moz-linear-gradient(top, #3498db, #2980b9);
-	background-image: -ms-linear-gradient(top, #3498db, #2980b9);
-	background-image: -o-linear-gradient(top, #3498db, #2980b9);
-	background-image: linear-gradient(to bottom, #3498db, #2980b9);
-	-webkit-border-radius: 28;
-	-moz-border-radius: 28;
-	border-radius: 5px;
-	text-shadow: 1px 1px 3px #666666;
-	color: #ffffff;
-	text-decoration: none;
-}
-
-.content .taskbar .button:hover {
-	background: #3cb0fd;
-	background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
-	background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
-	background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
-	background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
-	background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
-	text-decoration: none;
-}
 
 .content .projectbar {
 	/*margin: 0.1em 0em 0em 0em;*/
@@ -683,10 +623,204 @@ pre.prettyprint li.L9 { background: #eee }
 	background: url("images/username.png") no-repeat scroll 0% 0% rgb(234, 231, 231);
 	background-position: 0px 1px !important;
 	padding-left: 24px;
+
+	height: 1.8em; // lower than line-height of taskbar 
+	vertical-align: middle;
+
+	border: 1px solid #B9BDC1;
+	-moz-box-shadow: 0 2px 4px #bbb inset;
+	-webkit-box-shadow: 0 2px 4px #BBB inset;
+	box-shadow: 0 2px 4px #BBB inset;
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+}
+
+#taskbar_user_name:focus {
+	background-color: #E7E8E7;
+	outline: 0;
 }
 
 #taskbar_user_pass {
 	background: url("images/password.png") no-repeat scroll 0% 0% rgb(234, 231, 231);
 	background-position: 0px 1px !important;
 	padding-left: 24px;
+
+	height: 1.8em; // lower than line-height of taskbar 
+	vertical-align: middle;
+
+	border: 1px solid #B9BDC1;
+	-moz-box-shadow: 0 2px 4px #bbb inset;
+	-webkit-box-shadow: 0 2px 4px #BBB inset;
+	box-shadow: 0 2px 4px #BBB inset;
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+}
+
+#taskbar_user_pass:focus {
+	background-color: #E7E8E7;
+	outline: 0;
+}
+
+#taskbar_signin_button {
+	cursor: pointer;
+	height: 1.8em; // lower than line-height of taskbar 
+	vertical-align: middle;
+	padding-left: 5px;
+	padding-right: 5px;
+	text-transform: uppercase;
+
+	background: #3498db;
+	background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
+	background-image: -moz-linear-gradient(top, #3498db, #2980b9);
+	background-image: -ms-linear-gradient(top, #3498db, #2980b9);
+	background-image: -o-linear-gradient(top, #3498db, #2980b9);
+	background-image: linear-gradient(to bottom, #3498db, #2980b9);
+	-webkit-border-radius: 28;
+	-moz-border-radius: 28;
+	border-radius: 5px;
+	text-shadow: 1px 1px 3px #666666;
+	color: #ffffff;
+	text-decoration: none;
+}
+
+#taskbar_signin_button:hover {
+	background: #3cb0fd;
+	background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
+	background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
+	background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
+	background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
+	background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
+	text-decoration: none;
+}
+
+#taskbar_signout_button {
+	cursor: pointer;
+	height: 1.8em; // lower than line-height of taskbar 
+	vertical-align: middle;
+	padding-left: 5px;
+	padding-right: 5px;
+	text-transform: uppercase;
+
+	background: #3498db;
+	background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
+	background-image: -moz-linear-gradient(top, #3498db, #2980b9);
+	background-image: -ms-linear-gradient(top, #3498db, #2980b9);
+	background-image: -o-linear-gradient(top, #3498db, #2980b9);
+	background-image: linear-gradient(to bottom, #3498db, #2980b9);
+	-webkit-border-radius: 28;
+	-moz-border-radius: 28;
+	border-radius: 5px;
+	text-shadow: 1px 1px 3px #666666;
+	color: #ffffff;
+	text-decoration: none;
+}
+
+#taskbar_signout_button:hover {
+	background: #3cb0fd;
+	background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
+	background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
+	background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
+	background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
+	background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
+	text-decoration: none;
+}
+
+
+
+
+/* ================ login page =================== */
+
+#login_user_name {
+	background: url("images/username.png") no-repeat scroll 0% 0% rgb(234, 231, 231);
+	background-position: 0px 1px !important;
+	padding-left: 24px;
+	padding-top: 2px;
+	padding-bottom: 2px;
+
+	height: 2em; 
+	vertical-align: middle;
+
+	border: 1px solid #B9BDC1;
+	-moz-box-shadow: 0 2px 4px #bbb inset;
+	-webkit-box-shadow: 0 2px 4px #BBB inset;
+	box-shadow: 0 2px 4px #BBB inset;
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+
+	font-size: 1em;
+}
+
+#login_user_name:focus {
+	background-color: #E7E8E7;
+	outline: 0;
+}
+
+#login_user_pass {
+	background: url("images/password.png") no-repeat scroll 0% 0% rgb(234, 231, 231);
+	background-position: 0px 1px !important;
+	padding-left: 24px;
+
+	height: 2em; 
+	vertical-align: middle;
+
+	border: 1px solid #B9BDC1;
+	-moz-box-shadow: 0 2px 4px #bbb inset;
+	-webkit-box-shadow: 0 2px 4px #BBB inset;
+	box-shadow: 0 2px 4px #BBB inset;
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+
+	font-size: 1em;
+}
+
+#login_user_pass:focus {
+	background-color: #E7E8E7;
+	outline: 0;
+}
+
+#login_signin_button {
+	cursor: pointer;
+	height: 2em;
+	vertical-align: middle;
+	padding-left: 5px;
+	padding-right: 5px;
+	text-transform: uppercase;
+
+	background: #3498db;
+	background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
+	background-image: -moz-linear-gradient(top, #3498db, #2980b9);
+	background-image: -ms-linear-gradient(top, #3498db, #2980b9);
+	background-image: -o-linear-gradient(top, #3498db, #2980b9);
+	background-image: linear-gradient(to bottom, #3498db, #2980b9);
+	-webkit-border-radius: 28;
+	-moz-border-radius: 28;
+	border-radius: 5px;
+	text-shadow: 1px 1px 3px #666666;
+	color: #ffffff;
+	text-decoration: none;
+
+	font-size: 1em;
+}
+
+#login_signin_button:hover {
+	background: #3cb0fd;
+	background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
+	background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
+	background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
+	background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
+	background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
+	text-decoration: none;
+}
+
+
+#login_mainarea .login_form_field_div { // keep it similar to taskbar
+	text-transform: uppercase;
+	padding-top: 0.3em;
+	padding-bottom: 0.3em;
+	vertical-align: middle;
+	font-size: 1em;
 }