commit e5c8c3428c01e10a9c02cd0aae2d7609bee94a11
Author: Olga Brani <olgabrani@grnet.gr>
Date:   Wed Sep 18 16:18:24 2013 +0300

    new ui: vm creation wizard step 1 v.2

diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
index a0dec18..586e3f7 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
@@ -6836,31 +6836,32 @@ a.th {
   - Buttons and Links
   - Layout 
   - Header
+  - Actions Bar
   - Icon Navigation
   - Top Info
   - Progress Bar
   
  */
 /* Clearfix -------------------------------------------- */
-/* line 18, ../sass/_common.scss */
+/* line 19, ../sass/_common.scss */
 .clearfix, .storage .files li {
   zoom: 1;
 }
-/* line 20, ../sass/_common.scss */
+/* line 21, ../sass/_common.scss */
 .clearfix:before, .storage .files li:before, .clearfix:after, .storage .files li:after {
   content: "\0020";
   display: block;
   height: 0;
   overflow: hidden;
 }
-/* line 26, ../sass/_common.scss */
+/* line 27, ../sass/_common.scss */
 .clearfix:after, .storage .files li:after {
   clear: both;
 }
 
 /* Mixins ----------------------------------------------- */
 /* Circle and Tags ----------------------------------------------- */
-/* line 69, ../sass/_common.scss */
+/* line 70, ../sass/_common.scss */
 .circle, .tags a {
   display: inline-block;
   -webkit-border-radius: 999px;
@@ -6869,37 +6870,37 @@ a.th {
   behavior: url(PIE.htc);
 }
 
-/* line 77, ../sass/_common.scss */
+/* line 78, ../sass/_common.scss */
 .tags {
   text-align: center;
 }
-/* line 79, ../sass/_common.scss */
+/* line 80, ../sass/_common.scss */
 .tags a {
   width: 12px;
   height: 12px;
   margin: 0 3px;
 }
-/* line 84, ../sass/_common.scss */
+/* line 85, ../sass/_common.scss */
 .tags a.tag1 {
   background-color: #3582ac;
 }
-/* line 85, ../sass/_common.scss */
+/* line 86, ../sass/_common.scss */
 .tags a.tag2 {
-  background-color: #f24e53;
+  background-color: #30c79e;
 }
-/* line 86, ../sass/_common.scss */
+/* line 87, ../sass/_common.scss */
 .tags a.tag3 {
   background-color: #00a551;
 }
 
 /* Buttons and Links ----------------------------------------------- */
-/* line 95, ../sass/_common.scss */
+/* line 96, ../sass/_common.scss */
 a {
   color: #3582ac;
 }
-/* line 97, ../sass/_common.scss */
+/* line 98, ../sass/_common.scss */
 a:hover {
-  color: #f24e53;
+  color: #30c79e;
   -webkit-transition: background 300ms ease-out;
   -moz-transition: background 300ms ease-out;
   -ms-transition: background 300ms ease-out;
@@ -6907,8 +6908,8 @@ a:hover {
   transition: background 300ms ease-out;
 }
 
-/* line 104, ../sass/_common.scss */
-.btn1, .btn2, .btn3, .create-vm .select-flavor dl dt span, .upload-widget .btns a, .btn4, .btn-img, .header .new-btn a, .details .top .actions ul li a {
+/* line 105, ../sass/_common.scss */
+.btn1, .btn2, .btn3, .create-vm .select-flavor dl dt span, .upload-widget .btns a, .btn4, .btn-img, .new-btn a, .details .top .actions ul li a {
   border: 1px solid #919194;
   color: #919194;
   display: inline-block;
@@ -6916,189 +6917,195 @@ a:hover {
   line-height: 1em;
   text-align: center;
 }
-/* line 112, ../sass/_common.scss */
-.btn1:hover, .btn2:hover, .btn3:hover, .create-vm .select-flavor dl dt span:hover, .upload-widget .btns a:hover, .btn4:hover, .btn-img:hover, .header .new-btn a:hover, .details .top .actions ul li a:hover, .btn1.current, .current.btn2, .current.btn3, .create-vm .select-flavor dl dt span.current, .upload-widget .btns a.current, .current.btn4, .current.btn-img, .header .new-btn a.current, .details .top .actions ul li a.current {
+/* line 113, ../sass/_common.scss */
+.btn1:hover, .btn2:hover, .btn3:hover, .create-vm .select-flavor dl dt span:hover, .upload-widget .btns a:hover, .btn4:hover, .btn-img:hover, .new-btn a:hover, .details .top .actions ul li a:hover, .btn1.current, .current.btn2, .current.btn3, .create-vm .select-flavor dl dt span.current, .upload-widget .btns a.current, .current.btn4, .current.btn-img, .new-btn a.current, .details .top .actions ul li a.current {
   border-color: #3582ac;
   background: #3582ac;
   color: #fff;
 }
-/* line 117, ../sass/_common.scss */
-.btn1.current, .current.btn2, .current.btn3, .create-vm .select-flavor dl dt span.current, .upload-widget .btns a.current, .current.btn4, .current.btn-img, .header .new-btn a.current, .details .top .actions ul li a.current {
+/* line 118, ../sass/_common.scss */
+.btn1.current, .current.btn2, .current.btn3, .create-vm .select-flavor dl dt span.current, .upload-widget .btns a.current, .current.btn4, .current.btn-img, .new-btn a.current, .details .top .actions ul li a.current {
   cursor: default;
 }
 
-/* line 122, ../sass/_common.scss */
+/* line 123, ../sass/_common.scss */
 .btn2 {
   color: #3582ac;
   background: #fff;
   border-color: #3582ac;
 }
-/* line 128, ../sass/_common.scss */
+/* line 129, ../sass/_common.scss */
 .btn2:hover, .btn2.current {
   background: transparent;
   border-color: #fff;
 }
 
-/* line 134, ../sass/_common.scss */
+/* line 135, ../sass/_common.scss */
 .btn3, .create-vm .select-flavor dl dt span, .upload-widget .btns a {
   color: #fff;
   border-color: #fff;
 }
-/* line 139, ../sass/_common.scss */
+/* line 140, ../sass/_common.scss */
 .btn3:hover, .create-vm .select-flavor dl dt span:hover, .upload-widget .btns a:hover, .btn3.current, .create-vm .select-flavor dl dt span.current, .upload-widget .btns a.current {
   color: #3582ac;
   background: #fff;
   border-color: #fff;
 }
 
-/* line 146, ../sass/_common.scss */
+/* line 147, ../sass/_common.scss */
 .btn4 {
   color: #fff;
   border-color: #fff;
   background: #3582ac;
 }
-/* line 152, ../sass/_common.scss */
+/* line 153, ../sass/_common.scss */
 .btn4:hover, .btn4.current {
   color: #3582ac;
   border-color: #3582ac;
   background: #fff;
 }
 
-/* line 159, ../sass/_common.scss */
+/* line 160, ../sass/_common.scss */
 .btn-img {
   border-color: #3582ac;
 }
-/* line 162, ../sass/_common.scss */
+/* line 163, ../sass/_common.scss */
 .btn-img:hover {
   background: transparent;
 }
-/* line 166, ../sass/_common.scss */
+/* line 167, ../sass/_common.scss */
 .btn-img a img, .btn-img a span {
   margin-left: 5px;
 }
 
 /* Layout ----------------------------------------------- */
 /* line 175, ../sass/_common.scss */
+html, body, .overlay-wrapper {
+  height: 100%;
+}
+
+/* line 179, ../sass/_common.scss */
 .lt-sidebar {
   width: 250px;
   float: left;
 }
-/* line 178, ../sass/_common.scss */
+/* line 182, ../sass/_common.scss */
 .lt-sidebar.nav {
   margin-top: 0;
   font-size: 1em;
   overflow: auto;
 }
-/* line 183, ../sass/_common.scss */
+/* line 187, ../sass/_common.scss */
 .lt-sidebar + .main {
   overflow: hidden;
 }
 
-/* line 188, ../sass/_common.scss */
+/* line 192, ../sass/_common.scss */
 .main {
-  padding: 43px 40px;
+  padding: 0 40px;
   overflow: hidden;
 }
 
 /* Header ----------------------------------------------- */
-/* line 197, ../sass/_common.scss */
+/* line 201, ../sass/_common.scss */
 .header {
   position: relative;
   padding: 1.25em 2.5em;
   border-bottom: 1px solid #919194;
   background: #fff;
 }
-/* line 202, ../sass/_common.scss */
+/* line 206, ../sass/_common.scss */
 .header .icons-nav {
   position: absolute;
   left: 2.5em;
   top: 1.25em;
 }
-/* line 207, ../sass/_common.scss */
+/* line 211, ../sass/_common.scss */
 .header .logo {
   text-align: center;
 }
-/* line 209, ../sass/_common.scss */
+/* line 213, ../sass/_common.scss */
 .header .logo img {
   max-height: 30px;
 }
-/* line 212, ../sass/_common.scss */
+/* line 216, ../sass/_common.scss */
 .header .logo h2 {
+  display: none;
+  margin: 0;
   font-size: 1em;
   color: #919194;
   font-weight: normal;
 }
-/* line 218, ../sass/_common.scss */
+/* line 224, ../sass/_common.scss */
 .header .login {
   position: absolute;
   right: 2.5em;
   top: 1.25em;
 }
-/* line 223, ../sass/_common.scss */
-.header .actions {
+
+/* Actions Bar ----------------------------------------------- */
+/* line 234, ../sass/_common.scss */
+.actions-bar {
   text-align: center;
-  height: 45px;
-  line-height: 45px;
+  line-height: 40px;
   position: relative;
-  margin: 2.5em 0 1.25em;
+  padding: 0.625em 0;
+  border-bottom: 1px solid #919194;
 }
-/* line 229, ../sass/_common.scss */
-.header .actions .main-actions {
+/* line 240, ../sass/_common.scss */
+.actions-bar .row {
   position: relative;
-  top: 86px;
-  margin: 0 -40px;
-  border-bottom: 1px solid #c5c5c6;
-  z-index: 1;
 }
-/* line 236, ../sass/_common.scss */
-.header .actions ul {
+/* line 245, ../sass/_common.scss */
+.actions-bar ul {
   margin: 0;
 }
-/* line 238, ../sass/_common.scss */
-.header .actions ul li {
+/* line 247, ../sass/_common.scss */
+.actions-bar ul li {
   list-style: none outside none;
   display: inline-block;
   margin: 0 5px;
 }
-/* line 242, ../sass/_common.scss */
-.header .actions ul li a {
+/* line 251, ../sass/_common.scss */
+.actions-bar ul li a {
   display: block;
   color: #dfdfdf;
   width: 100%;
   padding: 8px 20px;
   border: 1px solid transparent;
 }
-/* line 248, ../sass/_common.scss */
-.header .actions ul li a.active, .header .actions ul .items-list li .container:hover a.check, .items-list .header .actions ul li .container:hover a.check {
+/* line 257, ../sass/_common.scss */
+.actions-bar ul li a.active, .actions-bar ul .items-list li .container:hover a.check, .items-list .actions-bar ul li .container:hover a.check {
   color: #919194;
 }
-/* line 250, ../sass/_common.scss */
-.header .actions ul li a.active:hover, .header .actions ul .items-list li .container:hover a.check:hover, .items-list .header .actions ul li .container:hover a.check:hover {
+/* line 259, ../sass/_common.scss */
+.actions-bar ul li a.active:hover, .actions-bar ul .items-list li .container:hover a.check:hover, .items-list .actions-bar ul li .container:hover a.check:hover {
   color: #3582ac;
   cursor: pointer;
 }
-/* line 255, ../sass/_common.scss */
-.header .actions ul li a:hover {
+/* line 264, ../sass/_common.scss */
+.actions-bar ul li a:hover {
   cursor: default;
 }
-/* line 263, ../sass/_common.scss */
-.header .new-btn {
+
+/* line 272, ../sass/_common.scss */
+.new-btn {
   position: absolute;
   left: 0;
   bottom: 0;
 }
-/* line 269, ../sass/_common.scss */
-.header .new-btn a span {
+/* line 278, ../sass/_common.scss */
+.new-btn a span {
   font-size: 1.25em;
 }
 
 /* Icons Navigation ----------------------------------------------- */
-/* line 279, ../sass/_common.scss */
+/* line 286, ../sass/_common.scss */
 .icons-nav {
   margin: 0;
   padding: 0;
 }
-/* line 281, ../sass/_common.scss */
+/* line 288, ../sass/_common.scss */
 .icons-nav li {
   display: inline-block;
   margin-right: 10px;
@@ -7108,25 +7115,25 @@ a:hover {
   width: 30px;
   overflow: hidden;
 }
-/* line 289, ../sass/_common.scss */
+/* line 296, ../sass/_common.scss */
 .icons-nav li a {
   color: #333333;
 }
-/* line 291, ../sass/_common.scss */
+/* line 298, ../sass/_common.scss */
 .icons-nav li a:hover, .icons-nav li a.current {
   font-size: 30px;
-  color: #f24e53;
+  color: #30c79e;
 }
 
 /* Top info  ----------------------------------------------- */
-/* line 304, ../sass/_common.scss */
+/* line 311, ../sass/_common.scss */
 .top-info {
   padding: 50px 100px;
   position: relative;
   z-index: 10;
   display: none;
 }
-/* line 309, ../sass/_common.scss */
+/* line 316, ../sass/_common.scss */
 .top-info .close {
   position: absolute;
   right: 2.5em;
@@ -7139,31 +7146,31 @@ a:hover {
   overflow: hidden;
 }
 
-/* line 318, ../sass/_common.scss */
+/* line 325, ../sass/_common.scss */
 .info.error {
   background: #ff5c58;
   color: #fff;
 }
 
-/* line 324, ../sass/_common.scss */
+/* line 331, ../sass/_common.scss */
 .info.alert {
   background: #3582ac;
   color: #fff;
 }
 
-/* line 329, ../sass/_common.scss */
+/* line 336, ../sass/_common.scss */
 .info.warning {
   background: #919194;
   color: #fff;
 }
 
-/* line 334, ../sass/_common.scss */
+/* line 341, ../sass/_common.scss */
 .info.success {
   background: #00a551;
   color: #fff;
 }
 
-/* line 339, ../sass/_common.scss */
+/* line 346, ../sass/_common.scss */
 .border-bottom-style1 {
   padding-bottom: 20px;
   margin-bottom: 20px;
@@ -7171,7 +7178,7 @@ a:hover {
 }
 
 /* Progress Bar ----------------------------------------------- */
-/* line 348, ../sass/_common.scss */
+/* line 355, ../sass/_common.scss */
 .progress-bar {
   position: fixed;
   bottom: 0;
@@ -7182,25 +7189,25 @@ a:hover {
   padding: 20px 0 20px 310px;
   color: #919194;
 }
-/* line 357, ../sass/_common.scss */
+/* line 364, ../sass/_common.scss */
 .progress-bar span.counter {
   display: inline-block;
   margin-right: 20px;
   float: left;
 }
-/* line 362, ../sass/_common.scss */
+/* line 369, ../sass/_common.scss */
 .progress-bar div.progress-wrap {
   display: inline-block;
   float: left;
   width: 40%;
   margin-right: 60px;
 }
-/* line 367, ../sass/_common.scss */
+/* line 374, ../sass/_common.scss */
 .progress-bar div.progress-wrap .progress {
   position: relative;
   top: 2px;
 }
-/* line 372, ../sass/_common.scss */
+/* line 379, ../sass/_common.scss */
 .progress-bar span.more {
   display: inline-block;
 }
@@ -7228,7 +7235,7 @@ a:hover {
 }
 /* line 21, ../sass/_items-list.scss */
 .items-list li .add-new a:hover {
-  border-color: #f24e53;
+  border-color: #30c79e;
 }
 /* line 26, ../sass/_items-list.scss */
 .items-list li .img-wrap {
@@ -8110,7 +8117,7 @@ body.with-overlay {
 .overlay-wrapper {
   position: relative;
 }
-/* line 42, ../sass/_overlays.scss */
+/* line 41, ../sass/_overlays.scss */
 .overlay-wrapper .overlay-area {
   display: none;
   position: absolute;
@@ -8119,10 +8126,10 @@ body.with-overlay {
   top: 0;
   width: 100%;
   height: 100%;
-  background: #3582ac;
+  background: #485057;
   z-index: 20;
 }
-/* line 53, ../sass/_overlays.scss */
+/* line 52, ../sass/_overlays.scss */
 .overlay-wrapper .close {
   position: absolute;
   right: 2.5em;
@@ -8134,7 +8141,7 @@ body.with-overlay {
   text-indent: -2000px;
   overflow: hidden;
 }
-/* line 59, ../sass/_overlays.scss */
+/* line 58, ../sass/_overlays.scss */
 .overlay-wrapper .overlay-div {
   display: none;
   z-index: 100;
@@ -8145,11 +8152,11 @@ body.with-overlay {
   width: 50%;
   padding: 25px;
 }
-/* line 69, ../sass/_overlays.scss */
+/* line 68, ../sass/_overlays.scss */
 .overlay-wrapper .overlay-div .buttons a {
   margin-right: 20px;
 }
-/* line 73, ../sass/_overlays.scss */
+/* line 72, ../sass/_overlays.scss */
 .overlay-wrapper .overlay-div.upload-widget {
   background: transparent;
   padding: 45px 0;
@@ -8157,51 +8164,59 @@ body.with-overlay {
   left: 10%;
   border: 1px solid white;
 }
+/* line 79, ../sass/_overlays.scss */
+.overlay-wrapper .overlay-div.wizard {
+  background: transparent;
+  padding: 0;
+  width: 100%;
+  top: 0;
+  left: 0;
+}
 
-/* line 87, ../sass/_overlays.scss */
+/* line 90, ../sass/_overlays.scss */
 .overlay {
   background: #3582ac;
   position: relative;
   z-index: 10;
 }
-/* line 92, ../sass/_overlays.scss */
+/* line 94, ../sass/_overlays.scss */
 .overlay .lt-sidebar {
   border-right: 1px solid #fff;
   color: #fff;
 }
-/* line 96, ../sass/_overlays.scss */
+/* line 98, ../sass/_overlays.scss */
 .overlay .lt-sidebar ul li {
   list-style: none outside none;
 }
-/* line 99, ../sass/_overlays.scss */
+/* line 101, ../sass/_overlays.scss */
 .overlay .lt-sidebar ul li a {
   display: block;
   color: #fff;
 }
-/* line 102, ../sass/_overlays.scss */
+/* line 104, ../sass/_overlays.scss */
 .overlay .lt-sidebar ul li a span {
   float: right;
   display: none;
 }
-/* line 104, ../sass/_overlays.scss */
+/* line 106, ../sass/_overlays.scss */
 .overlay .lt-sidebar ul li a:hover, .overlay .lt-sidebar ul li a.current {
   text-decoration: none;
 }
-/* line 107, ../sass/_overlays.scss */
+/* line 108, ../sass/_overlays.scss */
 .overlay .lt-sidebar ul li a:hover span, .overlay .lt-sidebar ul li a.current span {
   display: inline;
 }
-/* line 118, ../sass/_overlays.scss */
+/* line 119, ../sass/_overlays.scss */
 .overlay .lt-sidebar,
 .overlay .main {
   padding: 100px 2.5em;
   position: relative;
 }
-/* line 123, ../sass/_overlays.scss */
+/* line 124, ../sass/_overlays.scss */
 .overlay .navigation .rt {
   float: right;
 }
-/* line 127, ../sass/_overlays.scss */
+/* line 128, ../sass/_overlays.scss */
 .overlay .close {
   position: absolute;
   right: 2.5em;
@@ -8213,7 +8228,7 @@ body.with-overlay {
   text-indent: -2000px;
   overflow: hidden;
 }
-/* line 133, ../sass/_overlays.scss */
+/* line 134, ../sass/_overlays.scss */
 .overlay .close_char {
   background: none;
   text-indent: 0;
@@ -8221,3 +8236,142 @@ body.with-overlay {
   /* for the the character e (for d we can put 2em) */
   color: white;
 }
+
+/* line 142, ../sass/_overlays.scss */
+.wizard {
+  position: relative;
+  top: 0;
+  color: white;
+}
+/* line 146, ../sass/_overlays.scss */
+.wizard .top {
+  background: #636a70;
+}
+/* line 148, ../sass/_overlays.scss */
+.wizard .top .sub-menu {
+  padding: 10px 0;
+}
+/* line 150, ../sass/_overlays.scss */
+.wizard .top .sub-menu ul {
+  margin: 0;
+  padding: 0;
+  list-style: none outside none;
+}
+/* line 154, ../sass/_overlays.scss */
+.wizard .top .sub-menu ul li {
+  display: inline;
+  margin-right: 10px;
+  list-style: none outside none;
+}
+/* line 158, ../sass/_overlays.scss */
+.wizard .top .sub-menu ul li a {
+  color: #333333;
+}
+/* line 160, ../sass/_overlays.scss */
+.wizard .top .sub-menu ul li a:hover, .wizard .top .sub-menu ul li a.current {
+  color: white;
+  text-decoration: underline;
+}
+/* line 172, ../sass/_overlays.scss */
+.wizard .bottom {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-top: 1px solid #333333;
+  padding: 10px 0;
+}
+/* line 179, ../sass/_overlays.scss */
+.wizard .bottom .nav {
+  height: 30px;
+  line-height: 30px;
+  color: white;
+}
+/* line 183, ../sass/_overlays.scss */
+.wizard .bottom .nav span {
+  display: inline-block;
+  height: 30px;
+  line-height: 30px;
+}
+/* line 189, ../sass/_overlays.scss */
+.wizard .bottom .prev {
+  float: left;
+  display: inline-block;
+  padding-left: 11px;
+  background: url("../images/nav-edge-lt.png") no-repeat left center;
+}
+/* line 194, ../sass/_overlays.scss */
+.wizard .bottom .prev span {
+  padding: 0 12px 0 10px;
+  border: 1px solid white;
+  border-left: 0 none;
+  height: 30px;
+  line-height: 30px;
+}
+/* line 201, ../sass/_overlays.scss */
+.wizard .bottom .prev:hover {
+  background-image: url("../images/nav-edge-lt-hover.png");
+}
+/* line 203, ../sass/_overlays.scss */
+.wizard .bottom .prev:hover span {
+  border-width: 2px;
+  line-height: 28px;
+}
+/* line 209, ../sass/_overlays.scss */
+.wizard .bottom .next {
+  float: right;
+  display: inline-block;
+  padding-right: 11px;
+  background: url("../images/nav-edge-rt.png") no-repeat right center;
+}
+/* line 214, ../sass/_overlays.scss */
+.wizard .bottom .next span {
+  padding: 0 10px 0 12px;
+  border: 1px solid white;
+  border-right: 0 none;
+}
+/* line 219, ../sass/_overlays.scss */
+.wizard .bottom .next:hover {
+  background-image: url("../images/nav-edge-rt-hover.png");
+}
+/* line 221, ../sass/_overlays.scss */
+.wizard .bottom .next:hover span {
+  border-width: 2px;
+  line-height: 28px;
+}
+/* line 227, ../sass/_overlays.scss */
+.wizard .bottom .nums {
+  text-align: center;
+  list-style: none outside none;
+  margin: 0;
+}
+/* line 231, ../sass/_overlays.scss */
+.wizard .bottom .nums li {
+  list-style: none outside none;
+  display: inline-block;
+  border-radius: 50%;
+  border: 1px solid #919194;
+  width: 25px;
+  height: 25px;
+  line-height: 25px;
+  margin: 0 3px;
+}
+/* line 240, ../sass/_overlays.scss */
+.wizard .bottom .nums li a {
+  color: #919194;
+  display: block;
+}
+/* line 244, ../sass/_overlays.scss */
+.wizard .bottom .nums li:hover, .wizard .bottom .nums li.current {
+  border-color: white;
+}
+/* line 246, ../sass/_overlays.scss */
+.wizard .bottom .nums li:hover a, .wizard .bottom .nums li.current a {
+  color: white;
+}
+/* line 250, ../sass/_overlays.scss */
+.wizard .bottom .nums li.current {
+  font-size: 1.25em;
+  width: 30px;
+  height: 30px;
+}
