Revision 5bdb4b1c

b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/wizard.js
504 504 
				$(this).find('.radio_btn').trigger('click');
505 505 
			})
506 506 
		}
507 
		else if (wizardType == 'volume-wizard') {
508 
			// same with vm wizard -> make function
509 
			wizard.find('.volume_options .options a').hover(
510 
				function() {
511 
					console.log('hi-2')
512 
					var paragraph = $(this).parents('.options-bar').siblings('.title').find('p');
513 
					var text = $(this).data('help');
514 
					paragraph.html(text);
515 
					paragraph.css('visibility', 'visible');
516 
				}, function() {
517 
					var paragraph = $(this).parents('.options-bar').siblings('.title').find('p');
518 
					paragraph.css('visibility', 'hidden');
519 
				}
520 
			);
521 
		}
507 522 
	}
508 523 

  		





  509
  524
  
    
})


  		












  

    
      b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_settings.scss
    
  






  166
  166
  
    
//


  		





  167
  167
  
    

  		





  168
  168
  
    
$wizard-paragraph-font-size: 10px;


  		





  
  169
  
    
$wizard-paragraph-font-size-custom: 14px;


  		





  169
  170
  
    
// We use these to control header font styles


  		





  170
  171
  
    
$header-font-family: "Open Sans", "Helvetica", Helvetica, Arial, sans-serif;


  		





  171
  172
  
    
// $header-font-weight: bold;


  		












  

    
      b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_volumes.scss
    
  






  4
  4
  
    
.list-view .items-list .img-wrap .icon {


  		





  5
  5
  
    
  font-size: 34px;


  		





  6
  6
  
    
  color: #30c79e;


  		





  
  7
  
    
}


  		





  
  8
  
    

  		





  
  9
  
    
.step-2>ul>li {


  		





  
  10
  
    
	margin-bottom: 0.5em;


  		





  
  11
  
    
}


  		





  
  12
  
    

  		





  
  13
  
    
.wizard .vms-list {


  		





  
  14
  
    
	margin-top: 1em;


  		





  
  15
  
    
	&>li {


  		





  
  16
  
    
		margin-bottom: 0.5em;


  		





  
  17
  
    
		&>div, &>a {


  		





  
  18
  
    
			display: inline-block;


  		





  
  19
  
    
			margin-right: 15px;


  		





  
  20
  
    
		}


  		





  
  21
  
    
		.img-wrap {


  		





  
  22
  
    
			position: relative;


  		





  
  23
  
    
			width: 30px;


  		





  
  24
  
    
			.icon {


  		





  
  25
  
    
				font-size: 30px;


  		





  
  26
  
    
			}


  		





  
  27
  
    
			.os{


  		





  
  28
  
    
				background-size: 14px;


  		





  
  29
  
    
				top: -2px;


  		





  
  30
  
    
			}


  		





  
  31
  
    
		}


  		





  
  32
  
    
	}


  		





  7
  33
  
    
}


  		












  

    
      b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_wizards.scss
    
  






  780
  780
  
    
		font-size: 1.3em;


  		





  781
  781
  
    
	}


  		





  782
  782
  
    
	.step {


  		





  783
  
  
    
		a {	color: $wizard-base-font-color;}


  		





  
  783
  
    
		a {


  		





  
  784
  
    
			color: $wizard-base-font-color;


  		





  
  785
  
    
		}


  		





  
  786
  
    
		p {


  		





  
  787
  
    
			font-size: $wizard-paragraph-font-size-custom;


  		





  
  788
  
    
			line-height: 1;


  		





  
  789
  
    
		}


  		





  784
  790
  
    
		.volume_options {


  		





  785
  
  
    
			li{


  		





  
  791
  
    
			&>li{


  		





  786
  792
  
    
				display: block;


  		





  787
  
  
    
				width: 360px;


  		





  788
  793
  
    
				&.volume-name { //same with network-name and vm-name


  		





  789
  
  
    
				margin: 40px 0;


  		





  790
  
  
    
				h2 {


  		





  791
  
  
    
					color:white;


  		





  792
  
  
    
					font-size: emCalc(16px);


  		





  
  794
  
    
					margin: 40px 0;


  		





  
  795
  
    
					h2 {


  		





  
  796
  
    
						color:white;


  		





  
  797
  
    
						font-size: emCalc(16px);


  		





  
  798
  
    
					}


  		





  793
  799
  
    
				}


  		





  794
  
  
    
			}


  		





  795
  
  
    
			&.volume-size {


  		





  796
  800
  
    
				list-style: none outside none;


  		





  797
  
  
    
				li {


  		





  798
  
  
    
					list-style:none outside none;


  		





  799
  
  
    
					margin-bottom:30px;


  		





  800
  
  
    
					.title {


  		





  801
  
  
    
						@extend .clearfix;


  		





  802
  
  
    
						height:40px;


  		





  803
  
  
    
						overflow:hidden;


  		





  804
  
  
    
						margin-bottom:emCalc(8px);


  		





  
  801
  
    
				margin-bottom:30px;


  		





  
  802
  
    
				.title {


  		





  
  803
  
    
					@extend .clearfix;


  		





  
  804
  
    
					height:40px;


  		





  
  805
  
    
					overflow:hidden;


  		





  
  806
  
    
					margin-bottom:emCalc(8px);


  		





  
  807
  
    
					color:white;


  		





  
  808
  
    
					vertical-align: top;


  		





  
  809
  
    
					.icon {


  		





  
  810
  
    
						display: block;


  		





  
  811
  
    
						width:60px;


  		





  
  812
  
    
						font-size:38px;


  		





  
  813
  
    
						float: left;


  		





  
  814
  
    
					}


  		





  
  815
  
    
					h2 {


  		





  
  816
  
    
						font-size:emCalc(14px);


  		





  
  817
  
    
						span {


  		





  
  818
  
    
							font-weight:normal;


  		





  
  819
  
    
						}


  		





  
  820
  
    
						float:left;


  		





  
  821
  
    
						width: 140px;


  		





  805
  822
  
    
						color:white;


  		





  806
  
  
    
						vertical-align: top;


  		





  807
  
  
    
						.icon {


  		





  
  823
  
    
						margin-right:60px;


  		





  
  824
  
    
						padding-left:emCalc(10px);


  		





  
  825
  
    
						em {


  		





  808
  826
  
    
							display: block;


  		





  809
  
  
    
							width:60px;


  		





  810
  
  
    
							font-size:38px;


  		





  811
  
  
    
							float: left;


  		





  812
  
  
    
						}


  		





  813
  
  
    
						h2 {


  		





  814
  
  
    
							font-size:emCalc(14px);


  		





  815
  
  
    
							span {


  		





  816
  
  
    
								font-weight:normal;


  		





  817
  
  
    
							}


  		





  818
  
  
    
							float:left;


  		





  819
  
  
    
							width: 140px;


  		





  820
  
  
    
							color:white;


  		





  821
  
  
    
							margin-right:60px;


  		





  822
  
  
    
							padding-left:emCalc(10px);


  		





  823
  
  
    
							em {


  		





  824
  
  
    
								display: block;


  		





  825
  
  
    
								margin-top:4px;


  		





  826
  
  
    
								font-size:11px;


  		





  827
  
  
    
								font-style:normal;


  		





  828
  
  
    
								font-weight:normal;


  		





  829
  
  
    
								white-space: nowrap;


  		





  830
  
  
    
								line-height: 13px;


  		





  831
  
  
    
							}


  		





  832
  
  
    
						}


  		





  833
  
  
    
						p {


  		





  834
  
  
    
							visibility: hidden;


  		





  835
  
  
    
							overflow:hidden;


  		





  836
  
  
    
							min-height:40px;


  		





  
  827
  
    
							margin-top:4px;


  		





  837
  828
  
    
							font-size:11px;


  		





  838
  
  
    
							line-height:11px;


  		





  
  829
  
    
							font-style:normal;


  		





  
  830
  
    
							font-weight:normal;


  		





  
  831
  
    
							white-space: nowrap;


  		





  
  832
  
    
							line-height: 13px;


  		





  839
  833
  
    
						}


  		





  840
  834
  
    
					}


  		





  841
  
  
    
					.options-bar {


  		





  842
  
  
    
						@extend .clearfix;


  		





  843
  
  
    
						.bar {


  		





  844
  
  
    
							width:200px;


  		





  845
  
  
    
							float:left;


  		





  846
  
  
    
							margin-right:60px;


  		





  847
  
  
    
							height: 20px;


  		





  848
  
  
    
							position: relative;


  		





  849
  
  
    
							top:10px;


  		





  850
  
  
    
							.wrap {


  		





  851
  
  
    
								border:1px solid white;


  		





  852
  
  
    
								padding:1px;


  		





  853
  
  
    
								height: 100%;


  		





  854
  
  
    
								&.disabled-progress-bar {


  		





  855
  
  
    
									border-color: $disabled-resource-color;


  		





  856
  
  
    
									.container{


  		





  857
  
  
    
										.total {


  		





  858
  
  
    
											background-color: $disabled-resource-color;


  		





  859
  
  
    
										}


  		





  
  835
  
    
					p {


  		





  
  836
  
    
						visibility: hidden;


  		





  
  837
  
    
						overflow:hidden;


  		





  
  838
  
    
						min-height:40px;


  		





  
  839
  
    
						font-size:11px;


  		





  
  840
  
    
						line-height:11px;


  		





  
  841
  
    
					}


  		





  
  842
  
    
				}


  		





  
  843
  
    
				.options-bar {


  		





  
  844
  
    
					@extend .clearfix;


  		





  
  845
  
    
					.bar {


  		





  
  846
  
    
						width:200px;


  		





  
  847
  
    
						float:left;


  		





  
  848
  
    
						margin-right:60px;


  		





  
  849
  
    
						height: 20px;


  		





  
  850
  
    
						position: relative;


  		





  
  851
  
    
						top:10px;


  		





  
  852
  
    
						.wrap {


  		





  
  853
  
    
							border:1px solid white;


  		





  
  854
  
    
							padding:1px;


  		





  
  855
  
    
							height: 100%;


  		





  
  856
  
    
							&.disabled-progress-bar {


  		





  
  857
  
    
								border-color: $disabled-resource-color;


  		





  
  858
  
    
								.container{


  		





  
  859
  
    
									.total {


  		





  
  860
  
    
										background-color: $disabled-resource-color;


  		





  860
  861
  
    
									}


  		





  861
  862
  
    
								}


  		





  862
  
  
    
								.container {


  		





  
  863
  
    
							}


  		





  
  864
  
    
							.container {


  		





  
  865
  
    
								height: 100%;


  		





  
  866
  
    
								.total {


  		





  
  867
  
    
									background:$primary-color;


  		





  863
  868
  
    
									height: 100%;


  		





  864
  
  
    
									.total {


  		





  865
  
  
    
										background:$primary-color;


  		





  
  869
  
    
									float:left;


  		





  
  870
  
    
									position: relative;


  		





  
  871
  
    
									.current {


  		





  
  872
  
    
										background:white;


  		





  866
  873
  
    
										height: 100%;


  		





  867
  874
  
    
										float:left;


  		





  868
  
  
    
										position: relative;


  		





  869
  
  
    
										.current {


  		





  870
  
  
    
											background:white;


  		





  871
  
  
    
											height: 100%;


  		





  872
  
  
    
											float:left;


  		





  873
  
  
    
										}


  		





  
  875
  
    
									}


  		





  
  876
  
    
									span {


  		





  
  877
  
    
										position:absolute;


  		





  
  878
  
    
										right:10px;


  		





  
  879
  
    
										font-size: emCalc(9px);


  		





  
  880
  
    
										top:2px;


  		





  
  881
  
    
									}


  		





  
  882
  
    
									&.low {


  		





  874
  883
  
    
										span {


  		





  875
  
  
    
											position:absolute;


  		





  876
  
  
    
											right:10px;


  		





  877
  
  
    
											font-size: emCalc(9px);


  		





  878
  
  
    
											top:2px;


  		





  879
  
  
    
										}


  		





  880
  
  
    
										&.low {


  		





  881
  
  
    
											span {


  		





  882
  
  
    
												right:-30px;


  		





  883
  
  
    
												color:white;


  		





  884
  
  
    
											}


  		





  
  884
  
    
											right:-30px;


  		





  
  885
  
    
											color:white;


  		





  885
  886
  
    
										}


  		





  886
  887
  
    
									}


  		





  887
  888
  
    
								}


  		





  888
  
  
    

  		





  889
  889
  
    
							}


  		





  890
  890
  
    
						}


  		





  891
  
  
    
						.options {


  		





  892
  
  
    
							overflow:hidden;


  		





  
  891
  
    
					}


  		





  
  892
  
    
					.options {


  		





  
  893
  
    
						overflow:hidden;


  		





  
  894
  
    
						list-style: none outside none;


  		





  
  895
  
    
						li {


  		





  893
  896
  
    
							list-style: none outside none;


  		





  894
  
  
    
							li {


  		





  895
  
  
    
								list-style: none outside none;


  		





  896
  
  
    
								display: inline-block;


  		





  897
  
  
    
								margin-right: 10px;


  		





  898
  
  
    
								margin-bottom:0;


  		





  899
  
  
    
								a {


  		





  900
  
  
    
									@extend .btn5;


  		





  901
  
  
    
									min-width: 60px;


  		





  902
  
  
    
									&.current {


  		





  903
  
  
    
										color:$overlay-bg-color;


  		





  904
  
  
    
									}


  		





  905
  
  
    
									&.disabled {


  		





  906
  
  
    
										border-color: $disabled-resource-color;


  		





  907
  
  
    
										color: $disabled-resource-color;


  		





  908
  
  
    
										&:hover, &:active {


  		





  909
  
  
    
											cursor: default;


  		





  910
  
  
    
											border-width: 1px;


  		





  911
  
  
    
											line-height: 28px;


  		





  
  897
  
    
							display: inline-block;


  		





  
  898
  
    
							margin-right: 10px;


  		





  
  899
  
    
							margin-bottom:0;


  		





  
  900
  
    
							a {


  		





  
  901
  
    
								@extend .btn5;


  		





  
  902
  
    
								min-width: 60px;


  		





  
  903
  
    
								&.current {


  		





  
  904
  
    
									color:$overlay-bg-color;


  		





  
  905
  
    
								}


  		





  
  906
  
    
								&.disabled {


  		





  
  907
  
    
									border-color: $disabled-resource-color;


  		





  
  908
  
    
									color: $disabled-resource-color;


  		





  
  909
  
    
									&:hover, &:active {


  		





  
  910
  
    
										cursor: default;


  		





  
  911
  
    
										border-width: 1px;


  		





  
  912
  
    
										line-height: 28px;


  		





  912
  913
  
    

  		





  913
  
  
    
										}


  		





  914
  914
  
    
									}


  		





  915
  915
  
    
								}


  		





  916
  916
  
    
							}


  		





  ......




  918
  918
  
    
					}


  		





  919
  919
  
    
				}


  		





  920
  920
  
    
			}


  		





  921
  
  
    
			}


  		





  
  921
  
    
		}


  		





  
  922
  
    
		.explain {


  		





  
  923
  
    
			margin-bottom: 1em;


  		





  922
  924
  
    
		}


  		





  923
  925
  
    
	}


  		





  924
  926
  
    
}


  		












  

    
      b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
    
  






  6819
  6819
  
    
 */


  		





  6820
  6820
  
    
/* Clearfix -------------------------------------------- */


  		





  6821
  6821
  
    
/* line 18, ../sass/_common.scss */


  		





  6822
  
  
    
.clearfix, .list-view .items-list > li, .details .top, .storage .files li, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .details dl, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .title, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar, #volume-wizard .step .volume_options li.volume-size li .title, #volume-wizard .step .volume_options li.volume-size li .options-bar, .connected .item .what, .connected .item .connections > li {


  		





  
  6822
  
    
.clearfix, .list-view .items-list > li, .details .top, .storage .files li, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .details dl, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .title, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar, #volume-wizard .step .volume_options > li .title, #volume-wizard .step .volume_options > li .options-bar, .connected .item .what, .connected .item .connections > li {


  		





  6823
  6823
  
    
  zoom: 1;


  		





  6824
  6824
  
    
}


  		





  6825
  6825
  
    
/* line 20, ../sass/_common.scss */


  		





  6826
  
  
    
.clearfix:before, .list-view .items-list > li:before, .details .top:before, .storage .files li:before, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li:before, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .details dl:before, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .title:before, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar:before, #volume-wizard .step .volume_options li.volume-size li .title:before, #volume-wizard .step .volume_options li.volume-size li .options-bar:before, .connected .item .what:before, .connected .item .connections > li:before, .clearfix:after, .list-view .items-list > li:after, .details .top:after, .storage .files li:after, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li:after, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .details dl:after, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .title:after, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar:after, #volume-wizard .step .volume_options li.volume-size li .title:after, #volume-wizard .step .volume_options li.volume-size li .options-bar:after, .connected .item .what:after, .connected .item .connections > li:after {


  		





  
  6826
  
    
.clearfix:before, .list-view .items-list > li:before, .details .top:before, .storage .files li:before, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li:before, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .details dl:before, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .title:before, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar:before, #volume-wizard .step .volume_options > li .title:before, #volume-wizard .step .volume_options > li .options-bar:before, .connected .item .what:before, .connected .item .connections > li:before, .clearfix:after, .list-view .items-list > li:after, .details .top:after, .storage .files li:after, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li:after, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .details dl:after, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .title:after, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar:after, #volume-wizard .step .volume_options > li .title:after, #volume-wizard .step .volume_options > li .options-bar:after, .connected .item .what:after, .connected .item .connections > li:after {


  		





  6827
  6827
  
    
  content: "\0020";


  		





  6828
  6828
  
    
  display: block;


  		





  6829
  6829
  
    
  height: 0;


  		





  6830
  6830
  
    
  overflow: hidden;


  		





  6831
  6831
  
    
}


  		





  6832
  6832
  
    
/* line 26, ../sass/_common.scss */


  		





  6833
  
  
    
.clearfix:after, .list-view .items-list > li:after, .details .top:after, .storage .files li:after, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li:after, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .details dl:after, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .title:after, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar:after, #volume-wizard .step .volume_options li.volume-size li .title:after, #volume-wizard .step .volume_options li.volume-size li .options-bar:after, .connected .item .what:after, .connected .item .connections > li:after {


  		





  
  6833
  
    
.clearfix:after, .list-view .items-list > li:after, .details .top:after, .storage .files li:after, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li:after, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .details dl:after, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .title:after, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar:after, #volume-wizard .step .volume_options > li .title:after, #volume-wizard .step .volume_options > li .options-bar:after, .connected .item .what:after, .connected .item .connections > li:after {


  		





  6834
  6834
  
    
  clear: both;


  		





  6835
  6835
  
    
}


  		





  6836
  6836
  
    

  		





  ......




  6976
  6976
  
    
}


  		





  6977
  6977
  
    

  		





  6978
  6978
  
    
/* line 226, ../sass/_common.scss */


  		





  6979
  
  
    
.btn5, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li a, #volume-wizard .step .volume_options li.volume-size li .options-bar .options li a {


  		





  
  6979
  
    
.btn5, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li a, #volume-wizard .step .volume_options > li .options-bar .options li a {


  		





  6980
  6980
  
    
  border: 1px solid white;


  		





  6981
  6981
  
    
  color: white;


  		





  6982
  6982
  
    
  display: inline-block;


  		





  ......




  6987
  6987
  
    
  font-size: 0.75em;


  		





  6988
  6988
  
    
}


  		





  6989
  6989
  
    
/* line 236, ../sass/_common.scss */


  		





  6990
  
  
    
.btn5:hover, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col a:hover, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li a:hover, #volume-wizard .step .volume_options li.volume-size li .options-bar .options li a:hover, .btn5:focus, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col a:focus, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li a:focus, #volume-wizard .step .volume_options li.volume-size li .options-bar .options li a:focus {


  		





  
  6990
  
    
.btn5:hover, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col a:hover, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li a:hover, #volume-wizard .step .volume_options > li .options-bar .options li a:hover, .btn5:focus, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col a:focus, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li a:focus, #volume-wizard .step .volume_options > li .options-bar .options li a:focus {


  		





  6991
  6991
  
    
  border-width: 2px;


  		





  6992
  6992
  
    
  line-height: 26px;


  		





  6993
  6993
  
    
  padding: 0 19px;


  		





  6994
  6994
  
    
  color: white;


  		





  6995
  6995
  
    
}


  		





  6996
  6996
  
    
/* line 242, ../sass/_common.scss */


  		





  6997
  
  
    
.btn5.current, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col a.current, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li a.current, #volume-wizard .step .volume_options li.volume-size li .options-bar .options li a.current {


  		





  
  6997
  
    
.btn5.current, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col a.current, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li a.current, #volume-wizard .step .volume_options > li .options-bar .options li a.current {


  		





  6998
  6998
  
    
  background: white;


  		





  6999
  6999
  
    
  color: #30c79e;


  		





  7000
  7000
  
    
}


  		





  ......




  7635
  7635
  
    
}


  		





  7636
  7636
  
    

  		





  7637
  7637
  
    
/* line 165, ../sass/_items-list.scss */


  		





  7638
  
  
    
.list-view .btn5, .list-view .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col .list-view a, .list-view .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li .list-view a, .list-view #volume-wizard .step .volume_options li.volume-size li .options-bar .options li a, #volume-wizard .step .volume_options li.volume-size li .options-bar .options li .list-view a {


  		





  
  7638
  
    
.list-view .btn5, .list-view .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col .list-view a, .list-view .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li .list-view a, .list-view #volume-wizard .step .volume_options > li .options-bar .options li a, #volume-wizard .step .volume_options > li .options-bar .options li .list-view a {


  		





  7639
  7639
  
    
  display: none;


  		





  7640
  7640
  
    
}


  		





  7641
  7641
  
    
/* line 168, ../sass/_items-list.scss */


  		





  ......




  8496
  8496
  
    
}


  		





  8497
  8497
  
    

  		





  8498
  8498
  
    
/* line 84, ../sass/_machines.scss */


  		





  8499
  
  
    
.btn5.temp, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col a.temp, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li a.temp, #volume-wizard .step .volume_options li.volume-size li .options-bar .options li a.temp {


  		





  
  8499
  
    
.btn5.temp, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col a.temp, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li a.temp, #volume-wizard .step .volume_options > li .options-bar .options li a.temp {


  		





  8500
  8500
  
    
  color: blue;


  		





  8501
  8501
  
    
  padding: 0 4px;


  		





  8502
  8502
  
    
  position: absolute;


  		





  ......




  8504
  8504
  
    
}


  		





  8505
  8505
  
    

  		





  8506
  8506
  
    
/* line 92, ../sass/_machines.scss */


  		





  8507
  
  
    
.temp-for-btns .btn5.temp, .temp-for-btns .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col a.temp, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col .temp-for-btns a.temp, .temp-for-btns .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li a.temp, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li .temp-for-btns a.temp, .temp-for-btns #volume-wizard .step .volume_options li.volume-size li .options-bar .options li a.temp, #volume-wizard .step .volume_options li.volume-size li .options-bar .options li .temp-for-btns a.temp {


  		





  
  8507
  
    
.temp-for-btns .btn5.temp, .temp-for-btns .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col a.temp, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col .temp-for-btns a.temp, .temp-for-btns .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li a.temp, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li .temp-for-btns a.temp, .temp-for-btns #volume-wizard .step .volume_options > li .options-bar .options li a.temp, #volume-wizard .step .volume_options > li .options-bar .options li .temp-for-btns a.temp {


  		





  8508
  8508
  
    
  position: static;


  		





  8509
  8509
  
    
}


  		





  8510
  8510
  
    

  		





  ......




  9336
  9336
  
    
  margin-bottom: 0.5em;


  		





  9337
  9337
  
    
}


  		





  9338
  9338
  
    
/* line 446, ../sass/_wizards.scss */


  		





  9339
  
  
    
.overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .btn5:hover, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .os li .btn-col a:hover, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col .advanced-conf-step a:hover, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .flavor li .options-bar .options li a:hover, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li .advanced-conf-step a:hover, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle #volume-wizard .step .advanced-conf-step .volume_options li.volume-size li .options-bar .options li a:hover, #volume-wizard .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .volume_options li.volume-size li .options-bar .options li a:hover, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle #volume-wizard .step .volume_options li.volume-size li .options-bar .options li .advanced-conf-step a:hover, #volume-wizard .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .volume_options li.volume-size li .options-bar .options li .advanced-conf-step a:hover {


  		





  
  9339
  
    
.overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .btn5:hover, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .os li .btn-col a:hover, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col .advanced-conf-step a:hover, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .flavor li .options-bar .options li a:hover, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li .advanced-conf-step a:hover, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle #volume-wizard .step .advanced-conf-step .volume_options > li .options-bar .options li a:hover, #volume-wizard .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .volume_options > li .options-bar .options li a:hover, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle #volume-wizard .step .volume_options > li .options-bar .options li .advanced-conf-step a:hover, #volume-wizard .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .volume_options > li .options-bar .options li .advanced-conf-step a:hover {


  		





  9340
  9340
  
    
  color: white;


  		





  9341
  9341
  
    
}


  		





  9342
  9342
  
    
/* line 449, ../sass/_wizards.scss */


  		





  9343
  
  
    
.overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .btn5.current, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .os li .btn-col a.current, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col .advanced-conf-step a.current, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .flavor li .options-bar .options li a.current, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li .advanced-conf-step a.current, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle #volume-wizard .step .advanced-conf-step .volume_options li.volume-size li .options-bar .options li a.current, #volume-wizard .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .volume_options li.volume-size li .options-bar .options li a.current, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle #volume-wizard .step .volume_options li.volume-size li .options-bar .options li .advanced-conf-step a.current, #volume-wizard .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .volume_options li.volume-size li .options-bar .options li .advanced-conf-step a.current, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .btn5.current:hover, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .os li .btn-col a.current:hover, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col .advanced-conf-step a.current:hover, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .flavor li .options-bar .options li a.current:hover, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li .advanced-conf-step a.current:hover, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle #volume-wizard .step .advanced-conf-step .volume_options li.volume-size li .options-bar .options li a.current:hover, #volume-wizard .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .volume_options li.volume-size li .options-bar .options li a.current:hover, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle #volume-wizard .step .volume_options li.volume-size li .options-bar .options li .advanced-conf-step a.current:hover, #volume-wizard .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .volume_options li.volume-size li .options-bar .options li .advanced-conf-step a.current:hover {


  		





  
  9343
  
    
.overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .btn5.current, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .os li .btn-col a.current, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col .advanced-conf-step a.current, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .flavor li .options-bar .options li a.current, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li .advanced-conf-step a.current, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle #volume-wizard .step .advanced-conf-step .volume_options > li .options-bar .options li a.current, #volume-wizard .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .volume_options > li .options-bar .options li a.current, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle #volume-wizard .step .volume_options > li .options-bar .options li .advanced-conf-step a.current, #volume-wizard .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .volume_options > li .options-bar .options li .advanced-conf-step a.current, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .btn5.current:hover, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .os li .btn-col a.current:hover, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col .advanced-conf-step a.current:hover, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .flavor li .options-bar .options li a.current:hover, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li .advanced-conf-step a.current:hover, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle #volume-wizard .step .advanced-conf-step .volume_options > li .options-bar .options li a.current:hover, #volume-wizard .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .volume_options > li .options-bar .options li a.current:hover, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle #volume-wizard .step .volume_options > li .options-bar .options li .advanced-conf-step a.current:hover, #volume-wizard .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .volume_options > li .options-bar .options li .advanced-conf-step a.current:hover {


  		





  9344
  9344
  
    
  color: #485057;


  		





  9345
  9345
  
    
}


  		





  9346
  9346
  
    
/* line 453, ../sass/_wizards.scss */


  		





  ......




  9384
  9384
  
    
  background-color: #ff7049;


  		





  9385
  9385
  
    
}


  		





  9386
  9386
  
    
/* line 490, ../sass/_wizards.scss */


  		





  9387
  
  
    
.overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .ssh-keys-area .btn5, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .ssh-keys-area .os li .btn-col a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col .advanced-conf-step .advanced-conf-options .ssh-keys-area a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .ssh-keys-area .flavor li .options-bar .options li a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li .advanced-conf-step .advanced-conf-options .ssh-keys-area a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle #volume-wizard .step .advanced-conf-step .advanced-conf-options .ssh-keys-area .volume_options li.volume-size li .options-bar .options li a, #volume-wizard .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .ssh-keys-area .volume_options li.volume-size li .options-bar .options li a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle #volume-wizard .step .volume_options li.volume-size li .options-bar .options li .advanced-conf-step .advanced-conf-options .ssh-keys-area a, #volume-wizard .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .volume_options li.volume-size li .options-bar .options li .advanced-conf-step .advanced-conf-options .ssh-keys-area a {


  		





  
  9387
  
    
.overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .ssh-keys-area .btn5, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .ssh-keys-area .os li .btn-col a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col .advanced-conf-step .advanced-conf-options .ssh-keys-area a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .ssh-keys-area .flavor li .options-bar .options li a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li .advanced-conf-step .advanced-conf-options .ssh-keys-area a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle #volume-wizard .step .advanced-conf-step .advanced-conf-options .ssh-keys-area .volume_options > li .options-bar .options li a, #volume-wizard .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .ssh-keys-area .volume_options > li .options-bar .options li a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle #volume-wizard .step .volume_options > li .options-bar .options li .advanced-conf-step .advanced-conf-options .ssh-keys-area a, #volume-wizard .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .volume_options > li .options-bar .options li .advanced-conf-step .advanced-conf-options .ssh-keys-area a {


  		





  9388
  9388
  
    
  margin-top: 3px;


  		





  9389
  9389
  
    
}


  		





  9390
  9390
  
    
/* line 495, ../sass/_wizards.scss */


  		





  ......




  9456
  9456
  
    
  cursor: pointer;


  		





  9457
  9457
  
    
}


  		





  9458
  9458
  
    
/* line 547, ../sass/_wizards.scss */


  		





  9459
  
  
    
.overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .networks-area li.more .btn5, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .networks-area .os li.more .btn-col a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os .advanced-conf-step .advanced-conf-options .networks-area li.more .btn-col a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .networks-area .flavor li.more .options-bar .options li a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor .advanced-conf-step .advanced-conf-options .networks-area li.more .options-bar .options li a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle #volume-wizard .step .advanced-conf-step .advanced-conf-options .networks-area .volume_options li.volume-size li.more .options-bar .options li a, #volume-wizard .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .networks-area .volume_options li.volume-size li.more .options-bar .options li a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle #volume-wizard .step .volume_options li.volume-size .advanced-conf-step .advanced-conf-options .networks-area li.more .options-bar .options li a, #volume-wizard .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .volume_options li.volume-size .advanced-conf-step .advanced-conf-options .networks-area li.more .options-bar .options li a {


  		





  
  9459
  
    
.overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .networks-area li.more .btn5, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .networks-area .os li.more .btn-col a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os .advanced-conf-step .advanced-conf-options .networks-area li.more .btn-col a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .networks-area .flavor li.more .options-bar .options li a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor .advanced-conf-step .advanced-conf-options .networks-area li.more .options-bar .options li a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle #volume-wizard .step .advanced-conf-step .advanced-conf-options .networks-area .volume_options > li .options-bar .options li.more a, #volume-wizard .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .networks-area .volume_options > li .options-bar .options li.more a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle #volume-wizard .step .volume_options > li .options-bar .options .advanced-conf-step .advanced-conf-options .networks-area li.more a, #volume-wizard .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .volume_options > li .options-bar .options .advanced-conf-step .advanced-conf-options .networks-area li.more a {


  		





  9460
  9460
  
    
  margin-top: 20px;


  		





  9461
  9461
  
    
  border-color: #fff;


  		





  9462
  9462
  
    
  color: #fff;


  		





  ......




  9487
  9487
  
    
  margin-bottom: 30px;


  		





  9488
  9488
  
    
}


  		





  9489
  9489
  
    
/* line 579, ../sass/_wizards.scss */


  		





  9490
  
  
    
.overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area .btn5, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area .os li .btn-col a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col .advanced-conf-step .advanced-conf-options .tags-area a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area .flavor li .options-bar .options li a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li .advanced-conf-step .advanced-conf-options .tags-area a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle #volume-wizard .step .advanced-conf-step .advanced-conf-options .tags-area .volume_options li.volume-size li .options-bar .options li a, #volume-wizard .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area .volume_options li.volume-size li .options-bar .options li a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle #volume-wizard .step .volume_options li.volume-size li .options-bar .options li .advanced-conf-step .advanced-conf-options .tags-area a, #volume-wizard .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .volume_options li.volume-size li .options-bar .options li .advanced-conf-step .advanced-conf-options .tags-area a {


  		





  
  9490
  
    
.overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area .btn5, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area .os li .btn-col a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .btn-col .advanced-conf-step .advanced-conf-options .tags-area a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area .flavor li .options-bar .options li a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar .options li .advanced-conf-step .advanced-conf-options .tags-area a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle #volume-wizard .step .advanced-conf-step .advanced-conf-options .tags-area .volume_options > li .options-bar .options li a, #volume-wizard .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .advanced-conf-step .advanced-conf-options .tags-area .volume_options > li .options-bar .options li a, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle #volume-wizard .step .volume_options > li .options-bar .options li .advanced-conf-step .advanced-conf-options .tags-area a, #volume-wizard .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .volume_options > li .options-bar .options li .advanced-conf-step .advanced-conf-options .tags-area a {


  		





  9491
  9491
  
    
  margin-right: 20px;


  		





  9492
  9492
  
    
}


  		





  9493
  9493
  
    
/* line 582, ../sass/_wizards.scss */


  		





  ......




  9707
  9707
  
    
#volume-wizard .step a {


  		





  9708
  9708
  
    
  color: white;


  		





  9709
  9709
  
    
}


  		





  9710
  
  
    
/* line 785, ../sass/_wizards.scss */


  		





  9711
  
  
    
#volume-wizard .step .volume_options li {


  		





  
  9710
  
    
/* line 786, ../sass/_wizards.scss */


  		





  
  9711
  
    
#volume-wizard .step p {


  		





  
  9712
  
    
  font-size: 14px;


  		





  
  9713
  
    
  line-height: 1;


  		





  
  9714
  
    
}


  		





  
  9715
  
    
/* line 791, ../sass/_wizards.scss */


  		





  
  9716
  
    
#volume-wizard .step .volume_options > li {


  		





  9712
  9717
  
    
  display: block;


  		





  9713
  
  
    
  width: 360px;


  		





  
  9718
  
    
  list-style: none outside none;


  		





  
  9719
  
    
  margin-bottom: 30px;


  		





  9714
  9720
  
    
}


  		





  9715
  
  
    
/* line 788, ../sass/_wizards.scss */


  		





  9716
  
  
    
#volume-wizard .step .volume_options li.volume-name {


  		





  
  9721
  
    
/* line 793, ../sass/_wizards.scss */


  		





  
  9722
  
    
#volume-wizard .step .volume_options > li.volume-name {


  		





  9717
  9723
  
    
  margin: 40px 0;


  		





  9718
  9724
  
    
}


  		





  9719
  
  
    
/* line 790, ../sass/_wizards.scss */


  		





  9720
  
  
    
#volume-wizard .step .volume_options li.volume-name h2 {


  		





  
  9725
  
    
/* line 795, ../sass/_wizards.scss */


  		





  
  9726
  
    
#volume-wizard .step .volume_options > li.volume-name h2 {


  		





  9721
  9727
  
    
  color: white;


  		





  9722
  9728
  
    
  font-size: 1em;


  		





  9723
  9729
  
    
}


  		





  9724
  
  
    
/* line 795, ../sass/_wizards.scss */


  		





  9725
  
  
    
#volume-wizard .step .volume_options li.volume-size {


  		





  9726
  
  
    
  list-style: none outside none;


  		





  9727
  
  
    
}


  		





  9728
  
  
    
/* line 797, ../sass/_wizards.scss */


  		





  9729
  
  
    
#volume-wizard .step .volume_options li.volume-size li {


  		





  9730
  
  
    
  list-style: none outside none;


  		





  9731
  
  
    
  margin-bottom: 30px;


  		





  9732
  
  
    
}


  		





  9733
  
  
    
/* line 800, ../sass/_wizards.scss */


  		





  9734
  
  
    
#volume-wizard .step .volume_options li.volume-size li .title {


  		





  
  9730
  
    
/* line 802, ../sass/_wizards.scss */


  		





  
  9731
  
    
#volume-wizard .step .volume_options > li .title {


  		





  9735
  9732
  
    
  height: 40px;


  		





  9736
  9733
  
    
  overflow: hidden;


  		





  9737
  9734
  
    
  margin-bottom: 0.5em;


  		





  9738
  9735
  
    
  color: white;


  		





  9739
  9736
  
    
  vertical-align: top;


  		





  9740
  9737
  
    
}


  		





  9741
  
  
    
/* line 807, ../sass/_wizards.scss */


  		





  9742
  
  
    
#volume-wizard .step .volume_options li.volume-size li .title .icon {


  		





  
  9738
  
    
/* line 809, ../sass/_wizards.scss */


  		





  
  9739
  
    
#volume-wizard .step .volume_options > li .title .icon {


  		





  9743
  9740
  
    
  display: block;


  		





  9744
  9741
  
    
  width: 60px;


  		





  9745
  9742
  
    
  font-size: 38px;


  		





  9746
  9743
  
    
  float: left;


  		





  9747
  9744
  
    
}


  		





  9748
  
  
    
/* line 813, ../sass/_wizards.scss */


  		





  9749
  
  
    
#volume-wizard .step .volume_options li.volume-size li .title h2 {


  		





  
  9745
  
    
/* line 815, ../sass/_wizards.scss */


  		





  
  9746
  
    
#volume-wizard .step .volume_options > li .title h2 {


  		





  9750
  9747
  
    
  font-size: 0.875em;


  		





  9751
  9748
  
    
  float: left;


  		





  9752
  9749
  
    
  width: 140px;


  		





  ......




  9754
  9751
  
    
  margin-right: 60px;


  		





  9755
  9752
  
    
  padding-left: 0.625em;


  		





  9756
  9753
  
    
}


  		





  9757
  
  
    
/* line 815, ../sass/_wizards.scss */


  		





  9758
  
  
    
#volume-wizard .step .volume_options li.volume-size li .title h2 span {


  		





  
  9754
  
    
/* line 817, ../sass/_wizards.scss */


  		





  
  9755
  
    
#volume-wizard .step .volume_options > li .title h2 span {


  		





  9759
  9756
  
    
  font-weight: normal;


  		





  9760
  9757
  
    
}


  		





  9761
  
  
    
/* line 823, ../sass/_wizards.scss */


  		





  9762
  
  
    
#volume-wizard .step .volume_options li.volume-size li .title h2 em {


  		





  
  9758
  
    
/* line 825, ../sass/_wizards.scss */


  		





  
  9759
  
    
#volume-wizard .step .volume_options > li .title h2 em {


  		





  9763
  9760
  
    
  display: block;


  		





  9764
  9761
  
    
  margin-top: 4px;


  		





  9765
  9762
  
    
  font-size: 11px;


  		





  ......




  9768
  9765
  
    
  white-space: nowrap;


  		





  9769
  9766
  
    
  line-height: 13px;


  		





  9770
  9767
  
    
}


  		





  9771
  
  
    
/* line 833, ../sass/_wizards.scss */


  		





  9772
  
  
    
#volume-wizard .step .volume_options li.volume-size li .title p {


  		





  
  9768
  
    
/* line 835, ../sass/_wizards.scss */


  		





  
  9769
  
    
#volume-wizard .step .volume_options > li .title p {


  		





  9773
  9770
  
    
  visibility: hidden;


  		





  9774
  9771
  
    
  overflow: hidden;


  		





  9775
  9772
  
    
  min-height: 40px;


  		





  9776
  9773
  
    
  font-size: 11px;


  		





  9777
  9774
  
    
  line-height: 11px;


  		





  9778
  9775
  
    
}


  		





  9779
  
  
    
/* line 843, ../sass/_wizards.scss */


  		





  9780
  
  
    
#volume-wizard .step .volume_options li.volume-size li .options-bar .bar {


  		





  
  9776
  
    
/* line 845, ../sass/_wizards.scss */


  		





  
  9777
  
    
#volume-wizard .step .volume_options > li .options-bar .bar {


  		





  9781
  9778
  
    
  width: 200px;


  		





  9782
  9779
  
    
  float: left;


  		





  9783
  9780
  
    
  margin-right: 60px;


  		





  ......




  9785
  9782
  
    
  position: relative;


  		





  9786
  9783
  
    
  top: 10px;


  		





  9787
  9784
  
    
}


  		





  9788
  
  
    
/* line 850, ../sass/_wizards.scss */


  		





  9789
  
  
    
#volume-wizard .step .volume_options li.volume-size li .options-bar .bar .wrap {


  		





  
  9785
  
    
/* line 852, ../sass/_wizards.scss */


  		





  
  9786
  
    
#volume-wizard .step .volume_options > li .options-bar .bar .wrap {


  		





  9790
  9787
  
    
  border: 1px solid white;


  		





  9791
  9788
  
    
  padding: 1px;


  		





  9792
  9789
  
    
  height: 100%;


  		





  9793
  9790
  
    
}


  		





  9794
  
  
    
/* line 854, ../sass/_wizards.scss */


  		





  9795
  
  
    
#volume-wizard .step .volume_options li.volume-size li .options-bar .bar .wrap.disabled-progress-bar {


  		





  
  9791
  
    
/* line 856, ../sass/_wizards.scss */


  		





  
  9792
  
    
#volume-wizard .step .volume_options > li .options-bar .bar .wrap.disabled-progress-bar {


  		





  9796
  9793
  
    
  border-color: #3a4046;


  		





  9797
  9794
  
    
}


  		





  9798
  
  
    
/* line 857, ../sass/_wizards.scss */


  		





  9799
  
  
    
#volume-wizard .step .volume_options li.volume-size li .options-bar .bar .wrap.disabled-progress-bar .container .total {


  		





  
  9795
  
    
/* line 859, ../sass/_wizards.scss */


  		





  
  9796
  
    
#volume-wizard .step .volume_options > li .options-bar .bar .wrap.disabled-progress-bar .container .total {


  		





  9800
  9797
  
    
  background-color: #3a4046;


  		





  9801
  9798
  
    
}


  		





  9802
  
  
    
/* line 862, ../sass/_wizards.scss */


  		





  9803
  
  
    
#volume-wizard .step .volume_options li.volume-size li .options-bar .bar .wrap .container {


  		





  
  9799
  
    
/* line 864, ../sass/_wizards.scss */


  		





  
  9800
  
    
#volume-wizard .step .volume_options > li .options-bar .bar .wrap .container {


  		





  9804
  9801
  
    
  height: 100%;


  		





  9805
  9802
  
    
}


  		





  9806
  
  
    
/* line 864, ../sass/_wizards.scss */


  		





  9807
  
  
    
#volume-wizard .step .volume_options li.volume-size li .options-bar .bar .wrap .container .total {


  		





  
  9803
  
    
/* line 866, ../sass/_wizards.scss */


  		





  
  9804
  
    
#volume-wizard .step .volume_options > li .options-bar .bar .wrap .container .total {


  		





  9808
  9805
  
    
  background: #919194;


  		





  9809
  9806
  
    
  height: 100%;


  		





  9810
  9807
  
    
  float: left;


  		





  9811
  9808
  
    
  position: relative;


  		





  9812
  9809
  
    
}


  		





  9813
  
  
    
/* line 869, ../sass/_wizards.scss */


  		





  9814
  
  
    
#volume-wizard .step .volume_options li.volume-size li .options-bar .bar .wrap .container .total .current {


  		





  
  9810
  
    
/* line 871, ../sass/_wizards.scss */


  		





  
  9811
  
    
#volume-wizard .step .volume_options > li .options-bar .bar .wrap .container .total .current {


  		





  9815
  9812
  
    
  background: white;


  		





  9816
  9813
  
    
  height: 100%;


  		





  9817
  9814
  
    
  float: left;


  		





  9818
  9815
  
    
}


  		





  9819
  
  
    
/* line 874, ../sass/_wizards.scss */


  		





  9820
  
  
    
#volume-wizard .step .volume_options li.volume-size li .options-bar .bar .wrap .container .total span {


  		





  
  9816
  
    
/* line 876, ../sass/_wizards.scss */


  		





  
  9817
  
    
#volume-wizard .step .volume_options > li .options-bar .bar .wrap .container .total span {


  		





  9821
  9818
  
    
  position: absolute;


  		





  9822
  9819
  
    
  right: 10px;


  		





  9823
  9820
  
    
  font-size: 0.5625em;


  		





  9824
  9821
  
    
  top: 2px;


  		





  9825
  9822
  
    
}


  		





  9826
  
  
    
/* line 881, ../sass/_wizards.scss */


  		





  9827
  
  
    
#volume-wizard .step .volume_options li.volume-size li .options-bar .bar .wrap .container .total.low span {


  		





  
  9823
  
    
/* line 883, ../sass/_wizards.scss */


  		





  
  9824
  
    
#volume-wizard .step .volume_options > li .options-bar .bar .wrap .container .total.low span {


  		





  9828
  9825
  
    
  right: -30px;


  		





  9829
  9826
  
    
  color: white;


  		





  9830
  9827
  
    
}


  		





  9831
  
  
    
/* line 891, ../sass/_wizards.scss */


  		





  9832
  
  
    
#volume-wizard .step .volume_options li.volume-size li .options-bar .options {


  		





  
  9828
  
    
/* line 892, ../sass/_wizards.scss */


  		





  
  9829
  
    
#volume-wizard .step .volume_options > li .options-bar .options {


  		





  9833
  9830
  
    
  overflow: hidden;


  		





  9834
  9831
  
    
  list-style: none outside none;


  		





  9835
  9832
  
    
}


  		





  9836
  
  
    
/* line 894, ../sass/_wizards.scss */


  		





  9837
  
  
    
#volume-wizard .step .volume_options li.volume-size li .options-bar .options li {


  		





  
  9833
  
    
/* line 895, ../sass/_wizards.scss */


  		





  
  9834
  
    
#volume-wizard .step .volume_options > li .options-bar .options li {


  		





  9838
  9835
  
    
  list-style: none outside none;


  		





  9839
  9836
  
    
  display: inline-block;


  		





  9840
  9837
  
    
  margin-right: 10px;


  		





  9841
  9838
  
    
  margin-bottom: 0;


  		





  9842
  9839
  
    
}


  		





  9843
  
  
    
/* line 899, ../sass/_wizards.scss */


  		





  9844
  
  
    
#volume-wizard .step .volume_options li.volume-size li .options-bar .options li a {


  		





  
  9840
  
    
/* line 900, ../sass/_wizards.scss */


  		





  
  9841
  
    
#volume-wizard .step .volume_options > li .options-bar .options li a {


  		





  9845
  9842
  
    
  min-width: 60px;


  		





  9846
  9843
  
    
}


  		





  9847
  
  
    
/* line 902, ../sass/_wizards.scss */


  		





  9848
  
  
    
#volume-wizard .step .volume_options li.volume-size li .options-bar .options li a.current {


  		





  
  9844
  
    
/* line 903, ../sass/_wizards.scss */


  		





  
  9845
  
    
#volume-wizard .step .volume_options > li .options-bar .options li a.current {


  		





  9849
  9846
  
    
  color: #485057;


  		





  9850
  9847
  
    
}


  		





  9851
  
  
    
/* line 905, ../sass/_wizards.scss */


  		





  9852
  
  
    
#volume-wizard .step .volume_options li.volume-size li .options-bar .options li a.disabled {


  		





  
  9848
  
    
/* line 906, ../sass/_wizards.scss */


  		





  
  9849
  
    
#volume-wizard .step .volume_options > li .options-bar .options li a.disabled {


  		





  9853
  9850
  
    
  border-color: #3a4046;


  		





  9854
  9851
  
    
  color: #3a4046;


  		





  9855
  9852
  
    
}


  		





  9856
  
  
    
/* line 908, ../sass/_wizards.scss */


  		





  9857
  
  
    
#volume-wizard .step .volume_options li.volume-size li .options-bar .options li a.disabled:hover, #volume-wizard .step .volume_options li.volume-size li .options-bar .options li a.disabled:active {


  		





  
  9853
  
    
/* line 909, ../sass/_wizards.scss */


  		





  
  9854
  
    
#volume-wizard .step .volume_options > li .options-bar .options li a.disabled:hover, #volume-wizard .step .volume_options > li .options-bar .options li a.disabled:active {


  		





  9858
  9855
  
    
  cursor: default;


  		





  9859
  9856
  
    
  border-width: 1px;


  		





  9860
  9857
  
    
  line-height: 28px;


  		





  9861
  9858
  
    
}


  		





  
  9859
  
    
/* line 922, ../sass/_wizards.scss */


  		





  
  9860
  
    
#volume-wizard .step .explain {


  		





  
  9861
  
    
  margin-bottom: 1em;


  		





  
  9862
  
    
}


  		





  9862
  9863
  
    

  		





  9863
  9864
  
    
/*


  		





  9864
  9865
  
    

  		





  ......




  10272
  10273
  
    
  color: #30c79e;


  		





  10273
  10274
  
    
}


  		





  10274
  10275
  
    

  		





  
  10276
  
    
/* line 9, ../sass/_volumes.scss */


  		





  
  10277
  
    
.step-2 > ul > li {


  		





  
  10278
  
    
  margin-bottom: 0.5em;


  		





  
  10279
  
    
}


  		





  
  10280
  
    

  		





  
  10281
  
    
/* line 13, ../sass/_volumes.scss */


  		





  
  10282
  
    
.wizard .vms-list {


  		





  
  10283
  
    
  margin-top: 1em;


  		





  
  10284
  
    
}


  		





  
  10285
  
    
/* line 15, ../sass/_volumes.scss */


  		





  
  10286
  
    
.wizard .vms-list > li {


  		





  
  10287
  
    
  margin-bottom: 0.5em;


  		





  
  10288
  
    
}


  		





  
  10289
  
    
/* line 17, ../sass/_volumes.scss */


  		





  
  10290
  
    
.wizard .vms-list > li > div, .wizard .vms-list > li > a {


  		





  
  10291
  
    
  display: inline-block;


  		





  
  10292
  
    
  margin-right: 15px;


  		





  
  10293
  
    
}


  		





  
  10294
  
    
/* line 21, ../sass/_volumes.scss */


  		





  
  10295
  
    
.wizard .vms-list > li .img-wrap {


  		





  
  10296
  
    
  position: relative;


  		





  
  10297
  
    
  width: 30px;


  		





  
  10298
  
    
}


  		





  
  10299
  
    
/* line 24, ../sass/_volumes.scss */


  		





  
  10300
  
    
.wizard .vms-list > li .img-wrap .icon {


  		





  
  10301
  
    
  font-size: 30px;


  		





  
  10302
  
    
}


  		





  
  10303
  
    
/* line 27, ../sass/_volumes.scss */


  		





  
  10304
  
    
.wizard .vms-list > li .img-wrap .os {


  		





  
  10305
  
    
  background-size: 14px;


  		





  
  10306
  
    
  top: -2px;


  		





  
  10307
  
    
}


  		





  
  10308
  
    

  		





  10275
  10309
  
    
/*


  		





  10276
  10310
  
    
* Used for connected elements in details page.


  		





  10277
  10311
  
    
* Each icon is unique and therefore, customization


  		





  ......




  10313
  10347
  
    
  font-size: 0.875em;


  		





  10314
  10348
  
    
}


  		





  10315
  10349
  
    
/* line 42, ../sass/_connected.scss */


  		





  10316
  
  
    
.connected .item .clearfix, .connected .item .list-view .items-list > li, .list-view .connected .item .items-list > li, .connected .item .details .top, .details .connected .item .top, .connected .item .storage .files li, .storage .files .connected .item li, .connected .item .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os .connected .item li, .connected .item .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .details dl, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .details .connected .item dl, .connected .item .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .title, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .connected .item .title, .connected .item .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .connected .item .options-bar, .connected .item #volume-wizard .step .volume_options li.volume-size li .title, #volume-wizard .step .volume_options li.volume-size li .connected .item .title, .connected .item #volume-wizard .step .volume_options li.volume-size li .options-bar, #volume-wizard .step .volume_options li.volume-size li .connected .item .options-bar, .connected .item .what, .connected .item .connections > li {


  		





  
  10350
  
    
.connected .item .clearfix, .connected .item .list-view .items-list > li, .list-view .connected .item .items-list > li, .connected .item .details .top, .details .connected .item .top, .connected .item .storage .files li, .storage .files .connected .item li, .connected .item .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os .connected .item li, .connected .item .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .details dl, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .os li .details .connected .item dl, .connected .item .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .title, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .connected .item .title, .connected .item .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .options-bar, .overlay-wrapper .overlay-area-custom .overlay-div.wizard .middle .step .flavor li .connected .item .options-bar, .connected .item #volume-wizard .step .volume_options > li .title, #volume-wizard .step .volume_options > li .connected .item .title, .connected .item #volume-wizard .step .volume_options > li .options-bar, #volume-wizard .step .volume_options > li .connected .item .options-bar, .connected .item .what, .connected .item .connections > li {


  		





  10317
  10351
  
    
  position: relative;


  		





  10318
  10352
  
    
}


  		





  10319
  10353
  
    
/* line 45, ../sass/_connected.scss */


  		












  

    
      /dev/null
    
  






  1
  
  
    

  		





  2
  
  
    

  		





  3
  
  
    
<!DOCTYPE html>


  		





  4
  
  
    
    <!--[if lte IE 7]><script src="javascripts/lte-ie7.js"></script><![endif]-->


  		





  5
  
  
    
<!--[if IE 8]> 				 <html class="no-js lt-ie9" lang="en"> <![endif]-->


  		





  6
  
  
    
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->


  		





  7
  
  
    

  		





  8
  
  
    
<head>


  		





  9
  
  
    
	<meta charset="utf-8" />


  		





  10
  
  
    
    <meta name="viewport" content="width=device-width" />


  		





  11
  
  
    
    <title>Volumes list</title>


  		





  12
  
  
    
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;subset=latin,greek-ext,greek' rel='stylesheet' type='text/css'>


  		





  13
  
  
    
    <link rel="stylesheet" href="stylesheets/normalize.css" />


  		





  14
  
  
    
    <link rel="stylesheet" href="stylesheets/app.css" />


  		





  15
  
  
    
    <link rel="stylesheet" href="stylesheets/font_custom.css" />


  		





  16
  
  
    
    <link rel="stylesheet" href="stylesheets/jquery.jscrollpane.css" media="all" />


  		





  17
  
  
    
    <link rel="stylesheet" href="stylesheets/magnific-popup.css" />


  		





  18
  
  
    
    <script src="javascripts/vendor/custom.modernizr.js"></script>


  		





  19
  
  
    
</head>


  		





  20
  
  
    
<body>


  		





  21
  
  
    
		<header class="header">


  		





  22
  
  
    
		<nav>


  		





  23
  
  
    
			<ul class="icons-nav">


  		





  24
  
  
    
				<li><a href="vm_list.html" data-tooltip class="has-tip" title="Machines"><span class="snf-PC"></span></a></li>


  		





  25
  
  
    
				<li><a href="network_list.html" data-tooltip class="has-tip" title="Networks"><span class="snf-network"></span></a></li>


  		





  26
  
  
    
				<li><a href="" data-tooltip class="has-tip current" title="Volumes"><span class="snf-HDD-full"></span></a></li>


  		





  27
  
  
    
				<li><a href="pithos_list.html" data-tooltip class="has-tip" title="Storage" ><span class="snf-Pithos"></span></a></li>


  		





  28
  
  
    
				<li><a href="" data-tooltip class="has-tip" title="Images" ><span class="snf-images"></span></a></li>


  		





  29
  
  
    
				<li><a href="" data-tooltip class="has-tip" title="Snapshots" ><span class="snf-snapshot"></span></a></li>


  		





  30
  
  
    
				<li><a href="" data-tooltip class="has-tip" title="More" ><span class="snf-plus"></span></a></li>


  		





  31
  
  
    
			</ul>


  		





  32
  
  
    
		</nav>


  		





  33
  
  
    
		<div class="login">


  		





  34
  
  
    
			<div class="wrap">


  		





  35
  
  
    
				<a href="">user1@synnefo.org</a>


  		





  36
  
  
    
				<ul>


  		





  37
  
  
    
					<li><a href="">dashboard</a></li>


  		





  38
  
  
    
					<li><a href="">sign out</a></li>


  		





  39
  
  
    
				</ul>


  		





  40
  
  
    
			</div>


  		





  41
  
  
    
		</div>


  		





  42
  
  
    
		<div class="logo">


  		





  43
  
  
    
			<a href="index.html"><img src="images/logo_01.png" alt="software logo"></a>


  		





  44
  
  
    
		</div>


  		





  45
  
  
    
	</header>


  		





  46
  
  
    
	


  		





  47
  
  
    
	<div class="overlay-wrapper">


  		





  48
  
  
    

  		





  49
  
  
    
	<!-- overlays start -->


  		





  50
  
  
    
	<div class="overlay-area-custom">


  		





  51
  
  
    
		


  		





  52
  
  
    
		<div id="overlay1" class="overlay-div">


  		





  53
  
  
    
			<a href="" class="close"><span class="snf-close"></span></a>


  		





  54
  
  
    
			<p>Are you sure you want to reboot your machine?</p>


  		





  55
  
  
    
			<p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p>


  		





  56
  
  
    
		</div>


  		





  57
  
  
    
		<div id="overlay2" class="overlay-div">


  		





  58
  
  
    
			<p>Are you sure you want to shutdown your machine?</p>


  		





  59
  
  
    
			<p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p>


  		





  60
  
  
    
		</div>


  		





  61
  
  
    
			<div id="volume-wizard" class="overlay-div wizard">


  		





  62
  
  
    
				<div class="top">


  		





  63
  
  
    
					<div class="numbers">


  		





  64
  
  
    
						<div class="menus row">


  		





  65
  
  
    
							<a href="" class="close"><span class="snf-close"></span></a>


  		





  66
  
  
    
							<ul class="nums">


  		





  67
  
  
    
								<li class="preselected current">


  		





  68
  
  
    
									<em><span>1</span></em>


  		





  69
  
  
    
									<p><strong>Create new volume</strong></p>


  		





  70
  
  
    
								</li>


  		





  71
  
  
    
							</ul>


  		





  72
  
  
    
						</div>


  		





  73
  
  
    
					</div>


  		





  74
  
  
    
					<div class="row">


  		





  75
  
  
    
						<nav class="sub-menu" data-step=1>


  		





  76
  
  
    
						</nav>


  		





  77
  
  
    
					</div>


  		





  78
  
  
    
				</div>


  		





  79
  
  
    
				<div class="middle">


  		





  80
  
  
    
				<div class="steps">


  		





  81
  
  
    
					<div class="step step-1 preselected current">


  		





  82
  
  
    
						<ul class="row volume_options">


  		





  83
  
  
    
								<li class="project-selection">


  		





  84
  
  
    
									<form class="custom">


  		





  85
  
  
    
									  <select class="medium">


  		





  86
  
  
    
									    <option class="el5">Basic Project</option>


  		





  87
  
  
    
									    <option>Project 2</option>


  		





  88
  
  
    
									    <option>Project 3</option>


  		





  89
  
  
    
									  </select>


  		





  90
  
  
    
									</form>


  		





  91
  
  
    
								</li>


  		





  92
  
  
    
								<li  class="volume-name">


  		





  93
  
  
    
									<h2>Volume name</h2>


  		





  94
  
  
    
									<span class="input"><input class="el1" type="text" placeholder="My Volume"></span>


  		





  95
  
  
    
								</li>


  		





  96
  
  
    
								<li class="volume-size">


  		





  97
  
  
    
									<div class="title">


  		





  98
  
  
    
												<span class="snf-HDD icon"></span>


  		





  99
  
  
    
												<h2>


  		





  100
  
  
    
													Disk Size<span> (GB)</span>


  		





  101
  
  
    
													<em>Choose disk size</em>


  		





  102
  
  
    
												</h2>


  		





  103
  
  
    
												<p>HOVER EXPLANATORY TEXT Volumes residing on our custom storage layer Archipelago, supporting fast VM spawning with cloning. Will also support Volume snapshotting really soon.</p>


  		





  104
  
  
    
											</div>


  		





  105
  
  
    
											<div class="options-bar">


  		





  106
  
  
    
												<div class="bar">


  		





  107
  
  
    
													<div class="wrap">


  		





  108
  
  
    
														<div class="container">


  		





  109
  
  
    
															<!-- width percentages do not correspond to actual mesurements -->


  		





  110
  
  
    
															<div class="total low" style="width:40%">


  		





  111
  
  
    
																<div class="current" style="width:80%"></div>


  		





  112
  
  
    
																<span>40%</span>


  		





  113
  
  
    
															</div>


  		





  114
  
  
    
														</div>


  		





  115
  
  
    
													</div>


  		





  116
  
  
    
												</div>


  		





  117
  
  
    
												<ul class="options with-flavor">


  		





  118
  
  
    
													<li><a href="" class="small current preselected">10</a></li>


  		





  119
  
  
    
													<li><a href="" class="medium">20</a></li>


  		





  120
  
  
    
													<li><a href="" class="large">30</a></li>


  		





  121
  
  
    
													<li><a href="">40</a></li>


  		





  122
  
  
    
												</ul>


  		





  123
  
  
    
											</div>


  		





  124
  
  
    
								</li>	


  		





  125
  
  
    
							</ul>


  		





  126
  
  
    
						</div>


  		





  127
  
  
    
					</div>


  		





  128
  
  
    
				</div>


  		





  129
  
  
    
<!-- new tba start -->


  		





  130
  
  
    
				<div class="bottom">


  		





  131
  
  
    
					<div class="row">


  		





  132
  
  
    
						<a href="" class="nav prev"><span>CANCEL</span></a>


  		





  133
  
  
    
						<a href="" class="nav next" data-next="el1"><span>CREATE</span></a>


  		





  134
  
  
    
						


  		





  135
  
  
    
					</div>


  		





  136
  
  
    
				</div>


  		





  137
  
  
    
<!-- new tba end -->


  		





  138
  
  
    

  		





  139
  
  
    
			</div>


  		





  140
  
  
    

  		





  141
  
  
    
	</div>


  		





  142
  
  
    
	<!-- overlays end -->


  		





  143
  
  
    
	


  		





  144
  
  
    
		<section class="actions-bar clearfix">


  		





  145
  
  
    
			<h2>Volumes</h2>


  		





  146
  
  
    
			<div class="view-type">


  		





  147
  
  
    
				<a href="" class="list"><span class="snf-listview "></span></a>


  		





  148
  
  
    
				<a href="" class="grid"><span class="snf-gridview current"></span></a>


  		





  149
  
  
    
			</div>


  		





  150
  
  
    
			<div class="filter-menu">


  		





  151
  
  
    
				<a class="filter" href="">Filter</a>


  		





  152
  
  
    
				<ul class="options">


  		





  153
  
  
    
					<li><a href=""> set an option</a></li>


  		





  154
  
  
    
					<li><a href=""> set an option</a></li>


  		





  155
  
  
    
					<li><a href=""> set an option</a></li>


  		





  156
  
  
    
					<li><a href=""> set an option</a></li>


  		





  157
  
  
    
				</ul>


  		





  158
  
  
    
			</div>


  		





  159
  
  
    
			<div id="hd-search" class="hd-search">


  		





  160
  
  
    
			    <form>


  		





  161
  
  
    
					<span class="hd-icon-search snf-search"></span>


  		





  162
  
  
    
			        <input class="hd-search-input" placeholder="Enter your search term..." type="search" value="" name="search" id="search">


  		





  163
  
  
    
			    </form>


  		





  164
  
  
    
			</div>


  		





  165
  
  
    
		</section>


  		





  166
  
  
    
		<section class="main row">


  		





  167
  
  
    
			<div class="volumes entities grid-view">


  		





  168
  
  
    
				<ul class="items-list">


  		





  169
  
  
    
					<li data-status="add-new" class="add-new">


  		





  170
  
  
    
						<div class="container" data-overlay-id="volume-wizard">


  		





  171
  
  
    
							<div class="check">


  		





  172
  
  
    
								<span class="snf-checkbox-unchecked"></span>


  		





  173
  
  
    
							</div>


  		





  174
  
  
    
							<div class="img-wrap">


  		





  175
  
  
    
									<span class="snf-HDD-full icon"></span>


  		





  176
  
  
    
							</div>


  		





  177
  
  
    
							<h4>New Volume</h4>


  		





  178
  
  
    
						</div>


  		





  179
  
  
    
						<div class="tags">


  		





  180
  
  
    
						</div>


  		





  181
  
  
    
						<div class= "status">


  		





  182
  
  
    
						</div>


  		





  183
  
  
    
					</li>


  		





  184
  
  
    
					<li data-status="available" class="running">


  		





  185
  
  
    
						<div class="more">


  		





  186
  
  
    
							<div class="clearfix">


  		





  187
  
  
    
								<div class="col lt">


  		





  188
  
  
    
									<ul>


  		





  189
  
  
    
										<li><a href="">Attach to Machine</a></li>


  		





  190
  
  
    
										<li><a href="">Destroy</a></li>


  		





  191
  
  
    
										<li><a href="">Details</a></li>


  		





  192
  
  
    
										<li><a href="">Option l</a></li>


  		





  193
  
  
    
										<li><a href="">Option m</a></li>


  		





  194
  
  
    
									</ul>


  		





  195
  
  
    
								</div>


  		





  196
  
  
    
								<div class="col rt">


  		





  197
  
  
    
								</div>


  		





  198
  
  
    
							</div>


  		





  199
  
  
    
							<div class="name">Volume Name</div>


  		





  200
  
  
    
						</div>


  		





  201
  
  
    
						<div class="container">


  		





  202
  
  
    
							<div class="check">


  		





  203
  
  
    
								<span class="snf-checkbox-unchecked"></span>


  		





  204
  
  
    
							</div>


  		





  205
  
  
    
							<div class="img-wrap">


  		





  206
  
  
    
								<span class="icon snf-HDD-full"></span>


  		





  207
  
  
    
							</div>


  		





  208
  
  
    
							<h4>Volume Name</h4>


  		





  209
  
  
    
							<div class="tags">


  		





  210
  
  
    
							</div>


  		





  211
  
  
    
							<div class= "status">


  		





  212
  
  
    
								<span class="state">Connected to Machine-i (img? what data?)</span>


  		





  213
  
  
    
								<span class="logs"></span>


  		





  214
  
  
    
							</div>


  		





  215
  
  
    
						</div>


  		





  216
  
  
    
					</li>


  		





  217
  
  
    
					<li data-status="active" class="off">


  		





  218
  
  
    
						<div class="more">


  		





  219
  
  
    
							<div class="clearfix">


  		





  220
  
  
    
								<div class="col lt">


  		





  221
  
  
    
									<ul>


  		





  222
  
  
    
										<li><a href="">Option i</a></li>


  		





  223
  
  
    
										<li><a href="">Option j</a></li>


  		





  224
  
  
    
										<li><a href="">Option k</a></li>


  		





  225
  
  
    
										<li><a href="">Option l</a></li>


  		





  226
  
  
    
										<li><a href="">Option m</a></li>


  		





  227
  
  
    
									</ul>


  		





  228
  
  
    
								</div>


  		





  229
  
  
    
								<div class="col rt">


  		





  230
  
  
    
									<ul>


  		





  231
  
  
    
										<li><a href="">Option i</a></li>


  		





  232
  
  
    
										<li><a href="">Option j</a></li>


  		





  233
  
  
    
									</ul>


  		





  234
  
  
    
								</div>


  		





  235
  
  
    
							</div>


  		





  236
  
  
    
							<div class="name">Volume Name</div>


  		





  237
  
  
    
						</div>


  		





  238
  
  
    
						<div class="container">


  		





  239
  
  
    
							<div class="check">


  		





  240
  
  
    
								<span class="snf-checkbox-unchecked"></span>


  		





  241
  
  
    
							</div>


  		





  242
  
  
    
							<div class="img-wrap">


  		





  243
  
  
    
								<span class="icon snf-HDD-full"></span>


  		





  244
  
  
    
							</div>


  		





  245
  
  
    
							<h4>Volume Name</h4>


  		





  246
  
  
    
							<div class="tags">


  		





  247
  
  
    
							</div>


  		





  248
  
  
    
							<div class= "status">


  		





  249
  
  
    
								<span class="state">Not in use -Available</span>


  		





  250
  
  
    
								<span class="logs"></span>


  		





  251
  
  
    
							</div>


  		





  252
  
  
    
						</div>


  		





  253
  
  
    
					</li>


  		





  254
  
  
    
				</ul>


  		





  255
  
  
    
				<div class="lt-bar">


  		





  256
  
  
    
					<ul>


  		





  257
  
  
    
						<li class="select"><span class="snf-checkbox-unchecked checkbox"></span><em>un</em>select all</li>


  		





  258
  
  
    
						<li class="running pernament"><a href="#" title="" class="active">Destroy</a></li>


  		





  259
  
  
    
						<li class="running"><a href="#" title="">Detach from Machine</a></li>


  		





  260
  
  
    
						<!-- in case we want an action always activated


  		





  261
  
  
    
						<li class="pernament"><a href="" class="active">Action</a></li> -->


  		





  262
  
  
    
					</ul>


  		





  263
  
  
    
				</div>


  		





  264
  
  
    
				<div class="welcome">It seems you have not yet created a VM! Go ahead!</div>


  		





  265
  
  
    
			</div>


  		





  266
  
  
    
		</section>


  		





  267
  
  
    
	</div>


  		





  268
  
  
    
	


  		





  269
  
  
    

  		





  270
  
  
    
  <script src="javascripts/vendor/jquery.js"></script>


  		





  271
  
  
    
	<script src="javascripts/jquery-ui-1.10.3.custom.min.js"></script>


  		





  272
  
  
    
	<script src="javascripts/foundation/foundation.js"></script>


  		





  273
  
  
    
	<script src="javascripts/foundation/foundation.alerts.js"></script>


  		





  274
  
  
    
	


  		





  275
  
  
    
	<script src="javascripts/foundation/foundation.clearing.js"></script>


  		





  276
  
  
    
	


  		





  277
  
  
    
	<script src="javascripts/foundation/foundation.cookie.js"></script>


  		





  278
  
  
    
	


  		





  279
  
  
    
	<script src="javascripts/foundation/foundation.dropdown.js"></script>


  		





  280
  
  
    
	


  		





  281
  
  
    
	<script src="javascripts/foundation/foundation.forms.js"></script>


  		





  282
  
  
    
	


  		





  283
  
  
    
	<script src="javascripts/foundation/foundation.joyride.js"></script>


  		





  284
  
  
    
	


  		





  285
  
  
    
	<script src="javascripts/foundation/foundation.magellan.js"></script>


  		





  286
  
  
    
	


  		





  287
  
  
    
	<script src="javascripts/foundation/foundation.orbit.js"></script>


  		





  288
  
  
    
	


  		





  289
  
  
    
	<script src="javascripts/foundation/foundation.placeholder.js"></script>


  		





  290
  
  
    
	


  		





  291
  
  
    
	<script src="javascripts/foundation/foundation.reveal.js"></script>


  		





  292
  
  
    
	


  		





  293
  
  
    
	<script src="javascripts/foundation/foundation.section.js"></script>


  		





  294
  
  
    
	


  		





  295
  
  
    
	<script src="javascripts/foundation/foundation.tooltips.js"></script>


  		





  296
  
  
    
	


  		





  297
  
  
    
	<script src="javascripts/foundation/foundation.topbar.js"></script>


  		





  298
  
  
    
	<script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script>


  		





  299
  
  
    
	<script type="text/javascript" src="javascripts/jquery.jscrollpane.js"></script>


  		





  300
  
  
    
	<!-- dropzone.js used for drag and drop files to upload them --> 


  		





  301
  
  
    
	<script type="text/javascript" src="javascripts/dropzone.js"></script>


  		





  302
  
  
    
	<script type="text/javascript" src="javascripts/jquery.magnific-popup.js"></script>


  		





  303
  
  
    
	


  		





  304
  
  
    

  		





  305
  
  
    
	<script type="text/javascript" src="javascripts/ExpandingSearchBar/modernizr.custom.js"></script>


  		





  306
  
  
    
	<script type="text/javascript" src="javascripts/ExpandingSearchBar/classie.js"></script>


  		





  307
  
  
    
	<script type="text/javascript" src="javascripts/ExpandingSearchBar/uisearch.js"></script>


  		





  308
  
  
    
	<script src="javascripts/common.js"></script>


  		





  309
  
  
    
	<script src="javascripts/wizard.js"></script>


  		





  310
  
  
    
	


  		





  311
  
  
    

  		





  312
  
  
    
  <script>


  		





  313
  
  
    
    $(document).foundation();


  		





  314
  
  
    
  </script>


  		





  315
  
  
    
</body>


  		





  316
  
  
    
</html>


  		












  

    
      b/snf-cyclades-app/synnefo/ui/new_ui/ui/volumes_list.html
    
  






  
  1
  
    

  		





  
  2
  
    

  		





  
  3
  
    
<!DOCTYPE html>


  		





  
  4
  
    
    <!--[if lte IE 7]><script src="javascripts/lte-ie7.js"></script><![endif]-->


  		





  
  5
  
    
<!--[if IE 8]> 				 <html class="no-js lt-ie9" lang="en"> <![endif]-->


  		





  
  6
  
    
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->


  		





  
  7
  
    

  		





  
  8
  
    
<head>


  		





  
  9
  
    
	<meta charset="utf-8" />


  		





  
  10
  
    
    <meta name="viewport" content="width=device-width" />


  		





  
  11
  
    
    <title>Volumes list</title>


  		





  
  12
  
    
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;subset=latin,greek-ext,greek' rel='stylesheet' type='text/css'>


  		





  
  13
  
    
    <link rel="stylesheet" href="stylesheets/normalize.css" />


  		





  
  14
  
    
    <link rel="stylesheet" href="stylesheets/app.css" />


  		





  
  15
  
    
    <link rel="stylesheet" href="stylesheets/farbtastic.css" />


  		





  
  16
  
    
    <link rel="stylesheet" href="stylesheets/font_custom.css" />


  		





  
  17
  
    
    <link rel="stylesheet" href="stylesheets/jquery.jscrollpane.css" media="all" />


  		





  
  18
  
    
    <link rel="stylesheet" href="stylesheets/magnific-popup.css" />


  		





  
  19
  
    

  		





  
  20
  
    
    <script src="javascripts/vendor/custom.modernizr.js"></script>


  		





  
  21
  
    
</head>


  		





  
  22
  
    
<body>


  		





  
  23
  
    
		<header class="header">


  		





  
  24
  
    
		<nav>


  		





  
  25
  
    
			<ul class="icons-nav">


  		





  
  26
  
    
				<li><a href="vm_list.html" data-tooltip class="has-tip" title="Machines"><span class="snf-PC"></span></a></li>


  		





  
  27
  
    
				<li><a href="network_list.html" data-tooltip class="has-tip" title="Networks"><span class="snf-network"></span></a></li>


  		





  
  28
  
    
				<li><a href="" data-tooltip class="has-tip current" title="Volumes"><span class="snf-HDD-full"></span></a></li>


  		





  
  29
  
    
				<li><a href="pithos_list.html" data-tooltip class="has-tip" title="Storage" ><span class="snf-Pithos"></span></a></li>


  		





  
  30
  
    
				<li><a href="" data-tooltip class="has-tip" title="Images" ><span class="snf-images"></span></a></li>


  		





  
  31
  
    
				<li><a href="" data-tooltip class="has-tip" title="Snapshots" ><span class="snf-snapshot"></span></a></li>


  		





  
  32
  
    
				<li><a href="" data-tooltip class="has-tip" title="More" ><span class="snf-plus"></span></a></li>


  		





  
  33
  
    
			</ul>


  		





  
  34
  
    
		</nav>


  		





  
  35
  
    
		<div class="login">


  		





  
  36
  
    
			<div class="wrap">


  		





  
  37
  
    
				<a href="">user1@synnefo.org</a>


  		





  
  38
  
    
				<ul>


  		





  
  39
  
    
					<li><a href="">dashboard</a></li>


  		





  
  40
  
    
					<li><a href="">sign out</a></li>


  		





  
  41
  
    
				</ul>


  		





  
  42
  
    
			</div>


  		





  
  43
  
    
		</div>


  		





  
  44
  
    
		<div class="logo">


  		





  
  45
  
    
			<a href="index.html"><img src="images/logo_01.png" alt="software logo"></a>


  		





  
  46
  
    
		</div>


  		





  
  47
  
    
	</header>


  		





  
  48
  
    
	


  		





  
  49
  
    
	<div class="overlay-wrapper">


  		





  
  50
  
    

  		





  
  51
  
    
	<!-- overlays start -->


  		





  
  52
  
    
	<div class="overlay-area-custom">


  		





  
  53
  
    
		


  		





  
  54
  
    
		<div id="overlay1" class="overlay-div">


  		





  
  55
  
    
			<a href="" class="close"><span class="snf-close"></span></a>


  		





  
  56
  
    
			<p>Are you sure you want to reboot your machine?</p>


  		





  
  57
  
    
			<p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p>


  		





  
  58
  
    
		</div>


  		





  
  59
  
    
		<div id="overlay2" class="overlay-div">


  		





  
  60
  
    
			<p>Are you sure you want to shutdown your machine?</p>


  		





  
  61
  
    
			<p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p>


  		





  
  62
  
    
		</div>


  		





  
  63
  
    
			<div id="volume-wizard" class="overlay-div wizard">


  		





  
  64
  
    
				<div class="top">


  		





  
  65
  
    
					<div class="numbers">


  		





  
  66
  
    
						<div class="menus row">


  		





  
  67
  
    
							<a href="" class="close"><span class="snf-close"></span></a>


  		





  
  68
  
    
							<ul class="nums">


  		





  
  69
  
    
								<li class="preselected current">


  		





  
  70
  
    
									<em><span>1</span></em>


  		





  
  71
  
    
									<p><strong>New Volume: Choose your configuration </strong></p>


  		





  
  72
  
    
								</li>


  		





  
  73
  
    
								<li>


  		





  
  74
  
    
									<em><span>2</span></em>


  		





  
  75
  
    
									<p><strong>New Volume: Connect to vm</strong></p>


  		





  
  76
  
    
								</li>


  		





  
  77
  
    
								<li>


  		





  
  78
  
    
									<em><span>3</span></em>


  		





  
  79
  
    
									<p><strong>New Volume: Summary</strong></p>


  		





  
  80
  
    
								</li>


  		





  
  81
  
    
							</ul>


  		





  
  82
  
    
						</div>


  		





  
  83
  
    
					</div>


  		





  
  84
  
    
					<div class="row">


  		





  
  85
  
    
						<nav class="sub-menu" data-step=1>


  		





  
  86
  
    
						</nav>


  		





  
  87
  
    
					</div>


  		





  
  88
  
    
				</div>


  		





  
  89
  
    
				<div class="middle">


  		





  
  90
  
    
				<div class="steps">


  		





  
  91
  
    
					<div class="step step-1 preselected current">


  		





  
  92
  
    
						<ul class="row volume_options">


  		





  
  93
  
    
								<li class="project-selection">


  		





  
  94
  
    
									<form class="custom">


  		





  
  95
  
    
									  <select class="medium">


  		





  
  96
  
    
									    <option class="el5">Basic Project</option>


  		





  
  97
  
    
									    <option>Project 2</option>


  		





  
  98
  
    
									    <option>Project 3</option>


  		





  
  99
  
    
									  </select>


  		





  
  100
  
    
									</form>


  		





  
  101
  
    
								</li>


  		





  
  102
  
    
								<li  class="volume-name">


  		





  
  103
  
    
									<h2>Volume name</h2>


  		





  
  104
  
    
									<span class="input"><input class="el1" type="text" placeholder="My Volume"></span>


  		





  
  105
  
    
								</li>


  		





  
  106
  
    
								<li class="volume-size">


  		





  
  107
  
    
									<div class="title">


  		





  
  108
  
    
												<span class="snf-HDD icon"></span>


  		





  
  109
  
    
												<h2>


  		





  
  110
  
    
													Disk Size<span> (GB)</span>


  		





  
  111
  
    
													<em>Choose disk size</em>


  		





  
  112
  
    
												</h2>


  		





  
  113
  
    
												<p>HOVER EXPLANATORY TEXT Volumes residing on our custom storage layer Archipelago, supporting fast VM spawning with cloning. Will also support Volume snapshotting really soon.</p>


  		





  
  114
  
    
											</div>


  		





  
  115
  
    
											<div class="options-bar">


  		





  
  116
  
    
												<div class="bar">


  		





  
  117
  
    
													<div class="wrap">


  		





  
  118
  
    
														<div class="container">


  		





  
  119
  
    
															<!-- width percentages do not correspond to actual mesurements -->


  		





  
  120
  
    
															<div class="total low" style="width:40%">


  		





  
  121
  
    
																<div class="current" style="width:80%"></div>


  		





  
  122
  
    
																<span>40%</span>


  		





  
  123
  
    
															</div>


  		





  
  124
  
    
														</div>


  		





  
  125
  
    
													</div>


  		





  
  126
  
    
												</div>


  		





  
  127
  
    
												<ul class="options">


  		





  
  128
  
    
													<li><a href="" class="small current preselected">10</a></li>


  		





  
  129
  
    
													<li><a href="" class="medium">20</a></li>


  		





  
  130
  
    
													<li><a href="" class="large">30</a></li>


  		





  
  131
  
    
													<li><a href="">40</a></li>


  		





  
  132
  
    
												</ul>


  		





  
  133
  
    
											</div>


  		





  
  134
  
    
								</li>


  		





  
  135
  
    
								<li class="volume-type">


  		





  
  136
  
    
									<div class="title">


  		





  
  137
  
    
										<span class="snf-HDD icon"></span>


  		





  
  138
  
    
										<h2>


  		





  
  139
  
    
											Storage


  		





  
  140
  
    
											<em>Select storage type</em>


  		





  
  141
  
    
										</h2>


  		





  
  142
  
    
										<p>HOVER EXPLANATORY TEXT Volumes residing on our custom storage layer Archipelago, supporting fast VM spawning with cloning. Will also support Volume snapshotting really soon.</p>


  		





  
  143
  
    
									</div>


  		





  
  144
  
    
									<div class="options-bar">


  		





  
  145
  
    
										<div class="bar">


  		





  
  146
  
    
											<div class="wrap  disabled-progress-bar">


  		





  
  147
  
    
												<div class="container">


  		





  
  148
  
    
													<!-- width percentages do not correspond to actual mesurements -->


  		





  
  149
  
    
													<div class="total" style="width:100%">


  		





  
  150
  
    
														<div class="current" style="width:0%"></div>


  		





  
  151
  
    
														<span></span>


  		





  
  152
  
    
													</div>


  		





  
  153
  
    
												</div>


  		





  
  154
  
    
											</div>


  		





  
  155
  
    
										</div>


  		





  
  156
  
    
										<ul class="options vm-storage-selection">


  		





  
  157
  
    
											<li><a href="" class="current preselected">DRBD</a></li>


  		





  
  158
  
    
											<li><a href="" data-next="el3">Archipelago</a></li>


  		





  
  159
  
    
										</ul>


  		





  
  160
  
    
									</div>


  		





  
  161
  
    
								</li>


  		





  
  162
  
    
							</ul>


  		





  
  163
  
    
						</div>


  		





  
  164
  
    
						<div class="step step-2">


  		





  
  165
  
    
						<div class="explain row">


  		





  
  166
  
    
							<p>In order to use your volume you need to attach it to a vm.</p>


  		





  
  167
  
    
							<p>Choose a machine and after the creation of the volume it will be attached automatically to this machine.</p>


  		





  
  168
  
    
							<p>If you don't attach it now, you will be able to do that in the future.</p>


  		





  
  169
  
    
							<p>Remember, you can always move your volume from one machine to another.</p>


  		





  
  170
  
    
						</div>


  		





  
  171
  
    
							<ul class="row">


  		





  
  172
  
    
								<li>


  		





  
  173
  
    
									<a href=""><span class="snf-radio-unchecked"></span></a>


  		





  
  174
  
    
									<span>Do not attach the volume to a machine now.</span>


  		





  
  175
  
    
								</li>


  		





  
  176
  
    
								<li>


  		





  
  177
  
    
									<a href=""><span class="snf-radio-checked"></span></a>


  		





  
  178
  
    
									<span>Attach the volume to:</span>


  		





  
  179
  
    
									<ul class="vms-list">


  		





  
  180
  
    
										<li><a href=""><span class="snf-radio-checked"></span></a>


  		





  
  181
  
    
											<div class="img-wrap">


  		





  
  182
  
    
												<span class="snf-PC_fill icon"></span>


  		





  
  183
  
    
												<span class="os">unknown</span>


  		





  
  184
  
    
											</div>


  		





  
  185
  
    
											<div>Machine Name</div>


  		





  
  186
  
    
											<div>Machine ID</div>


  		





  
  187
  
    
											<div>Created: 12/12/12</div>


  		





  
  188
  
    
											<div>Other data</div>


  		





  
  189
  
    
										</li>


  		





  
  190
  
    
										<li><a href=""><span class="snf-radio-unchecked"></span></a>


  		





  
  191
  
    
											<div class="img-wrap">


  		





  
  192
  
    
												<span class="snf-PC_fill icon"></span>


  		





  
  193
  
    
												<span class="os">unknown</span>


  		





  
  194
  
    
											</div>


  		





  
  195
  
    
											<div>Machine Name</div>


  		





  
  196
  
    
											<div>Machine ID</div>


  		





  
  197
  
    
											<div>Created: 12/12/12</div>


  		





  
  198
  
    
											<div>Other data</div>


  		





  
  199
  
    
										</li>


  		





  
  200
  
    
										<li><a href=""><span class="snf-radio-unchecked"></span></a>


  		





  
  201
  
    
											<div class="img-wrap">


  		





  
  202
  
    
												<span class="snf-PC_fill icon"></span>


  		





  
  203
  
    
												<span class="os">unknown</span>


  		





  
  204
  
    
											</div>


  		





  
  205
  
    
											<div>Machine Name</div>


  		





  
  206
  
    
											<div>Machine ID</div>


  		





  
  207
  
    
											<div>Created: 12/12/12</div>


  		





  
  208
  
    
											<div>Other data</div>


  		





  
  209
  
    
										</li>


  		





  
  210
  
    
									</ul>


  		





  
  211
  
    
								</li>


  		





  
  212
  
    
							</ul>


  		





  
  213
  
    
						</div>


  		





  
  214
  
    
						<div class="step step-3">


  		





  
  215
  
    
							<ul class="row">


  		





  
  216
  
    
							</ul>


  		





  
  217
  
    
						</div>


  		





  
  218
  
    
					</div>


  		





  
  219
  
    
				</div>


  		





  
  220
  
    
				<div class="bottom">


  		





  
  221
  
    
					<div class="row">


  		





  
  222
  
    
						<a href="" class="nav prev"><span>CANCEL</span></a>


  		





  
  223
  
    
						<a href="" class="nav next" data-next="el1"><span>CREATE</span></a>


  		





  
  224
  
    
						


  		





  
  225
  
    
					</div>


  		





  
  226
  
    
				</div>


  		





  
  227
  
    
			</div>


  		





  
  228
  
    
		</div>


  		





  
  229
  
    
		<section class="actions-bar clearfix">


  		





  
  230
  
    
			<h2>Volumes</h2>


  		





  
  231
  
    
			<div class="view-type">


  		





  
  232
  
    
				<a href="" class="list"><span class="snf-listview "></span></a>


  		





  
  233
  
    
				<a href="" class="grid"><span class="snf-gridview current"></span></a>


  		





  
  234
  
    
			</div>


  		





  
  235
  
    
			<div class="filter-menu">


  		





  
  236
  
    
				<a class="filter" href="">Filter</a>


  		





  
  237
  
    
				<ul class="options">


  		





  
  238
  
    
					<li><a href=""> set an option</a></li>


  		





  
  239
  
    
					<li><a href=""> set an option</a></li>


  		





  
  240
  
    
					<li><a href=""> set an option</a></li>


  		





  
  241
  
    
					<li><a href=""> set an option</a></li>


  		





  
  242
  
    
				</ul>


  		





  
  243
  
    
			</div>


  		





  
  244
  
    
			<div id="hd-search" class="hd-search">


  		





  
  245
  
    
			    <form>


  		





  
  246
  
    
					<span class="hd-icon-search snf-search"></span>


  		





  
  247
  
    
			        <input class="hd-search-input" placeholder="Enter your search term..." type="search" value="" name="search" id="search">


  		





  
  248
  
    
			    </form>


  		





  
  249
  
    
			</div>


  		





  
  250
  
    
		</section>


  		





  
  251
  
    
		<section class="main row">


  		





  
  252
  
    
			<div class="volumes entities grid-view">


  		





  
  253
  
    
				<ul class="items-list">


  		





  
  254
  
    
					<li data-status="add-new" class="add-new">


  		





  
  255
  
    
						<div class="container" data-overlay-id="volume-wizard">


  		





  
  256
  
    
							<div class="check">


  		





  
  257
  
    
								<span class="snf-checkbox-unchecked"></span>


  		





  
  258
  
    
							</div>


  		





  
  259
  
    
							<div class="img-wrap">


  		





  
  260
  
    
									<span class="snf-HDD-full icon"></span>


  		





  
  261
  
    
							</div>


  		





  
  262
  
    
							<h4>New Volume</h4>


  		





  
  263
  
    
						</div>


  		





  
  264
  
    
						<div class="tags">


  		





  
  265
  
    
						</div>


  		





  
  266
  
    
						<div class= "status">


  		





  
  267
  
    
						</div>


  		





  
  268
  
    
					</li>


  		





  
  269
  
    
					<li data-status="available" class="running">


  		





  
  270
  
    
						<div class="more">


  		





  
  271
  
    
							<div class="clearfix">


  		





  
  272
  
    
								<div class="col lt">


  		





  
  273
  
    
									<ul>


  		





  
  274
  
    
										<li><a href="">Attach to Machine</a></li>


  		





  
  275
  
    
										<li><a href="">Destroy</a></li>


  		





  
  276
  
    
										<li><a href="">Details</a></li>


  		





  
  277
  
    
										<li><a href="">Option l</a></li>


  		





  
  278
  
    
										<li><a href="">Option m</a></li>


  		





  
  279
  
    
									</ul>


  		





  
  280
  
    
								</div>


  		





  
  281
  
    
								<div class="col rt">


  		





  
  282
  
    
								</div>


  		





  
  283
  
    
							</div>


  		





  
  284
  
    
							<div class="name">Volume Name</div>


  		





  
  285
  
    
						</div>


  		





  
  286
  
    
						<div class="container">


  		





  
  287
  
    
							<div class="check">


  		





  
  288
  
    
								<span class="snf-checkbox-unchecked"></span>


  		





  
  289
  
    
							</div>


  		





  
  290
  
    
							<div class="img-wrap">


  		





  
  291
  
    
								<span class="icon snf-HDD-full"></span>


  		





  
  292
  
    
							</div>


  		





  
  293
  
    
							<h4>Volume Name</h4>


  		





  
  294
  
    
							<div class="tags">


  		





  
  295
  
    
							</div>


  		





  
  296
  
    
							<div class= "status">


  		





  
  297
  
    
								<span class="state">Connected to Machine-i (img? what data?)</span>


  		





  
  298
  
    
								<span class="logs"></span>


  		





  
  299
  
    
							</div>


  		





  
  300
  
    
						</div>


  		





  
  301
  
    
					</li>


  		





  
  302
  
    
					<li data-status="active" class="off">


  		





  
  303
  
    
						<div class="more">


  		





  
  304
  
    
							<div class="clearfix">


  		





  
  305
  
    
								<div class="col lt">


  		





  
  306
  
    
									<ul>


  		





  
  307
  
    
										<li><a href="">Option i</a></li>


  		





  
  308
  
    
										<li><a href="">Option j</a></li>


  		





  
  309
  
    
										<li><a href="">Option k</a></li>


  		





  
  310
  
    
										<li><a href="">Option l</a></li>


  		





  
  311
  
    
										<li><a href="">Option m</a></li>


  		





  
  312
  
    
									</ul>


  		





  
  313
  
    
								</div>


  		





  
  314
  
    
								<div class="col rt">


  		





  
  315
  
    
									<ul>


  		





  
  316
  
    
										<li><a href="">Option i</a></li>


  		





  
  317
  
    
										<li><a href="">Option j</a></li>


  		





  
  318
  
    
									</ul>


  		





  
  319
  
    
								</div>


  		





  
  320
  
    
							</div>


  		





  
  321
  
    
							<div class="name">Volume Name</div>


  		





  
  322
  
    
						</div>


  		





  
  323
  
    
						<div class="container">


  		





  
  324
  
    
							<div class="check">


  		





  
  325
  
    
								<span class="snf-checkbox-unchecked"></span>


  		





  
  326
  
    
							</div>


  		





  
  327
  
    
							<div class="img-wrap">


  		





  
  328
  
    
								<span class="icon snf-HDD-full"></span>


  		





  
  329
  
    
							</div>


  		





  
  330
  
    
							<h4>Volume Name</h4>


  		





  
  331
  
    
							<div class="tags">


  		





  
  332
  
    
							</div>


  		





  
  333
  
    
							<div class= "status">


  		





  
  334
  
    
								<span class="state">Not in use -Available</span>


  		





  
  335
  
    
								<span class="logs"></span>


  		





  
  336
  
    
							</div>


  		





  
  337
  
    
						</div>


  		





  
  338
  
    
					</li>


  		





  
  339
  
    
				</ul>


  		





  
  340
  
    
				<div class="lt-bar">


  		





  
  341
  
    
					<ul>


  		





  
  342
  
    
						<li class="select"><span class="snf-checkbox-unchecked checkbox"></span><em>un</em>select all</li>


  		





  
  343
  
    
						<li class="running pernament"><a href="#" title="" class="active">Destroy</a></li>


  		





  
  344
  
    
						<li class="running"><a href="#" title="">Detach from Machine</a></li>


  		





  
  345
  
    
						<!-- in case we want an action always activated


  		





  
  346
  
    
						<li class="pernament"><a href="" class="active">Action</a></li> -->


  		





  
  347
  
    
					</ul>


  		





  
  348
  
    
				</div>


  		





  
  349
  
    
				<div class="welcome">It seems you have not yet created a VM! Go ahead!</div>


  		





  
  350
  
    
			</div>


  		





  
  351
  
    
		</section>


  		





  
  352
  
    
	</div>


  		





  
  353
  
    
	


  		





  
  354
  
    
	<script src="javascripts/vendor/jquery.js"></script>


  		





  
  355
  
    
	<script src="javascripts/jquery-ui-1.10.3.custom.min.js"></script>


  		





  
  356
  
    
	<script src="javascripts/underscore-min.js"></script>


  		





  
  357
  
    
	<script src="javascripts/foundation/foundation.js"></script>


  		





  
  358
  
    
	<script src="javascripts/foundation/foundation.alerts.js"></script>


  		





  
  359
  
    
	


  		





  
  360
  
    
	<script src="javascripts/foundation/foundation.clearing.js"></script>


  		





  
  361
  
    
	


  		





  
  362
  
    
	<script src="javascripts/foundation/foundation.cookie.js"></script>


  		





  
  363
  
    
	


  		





  
  364
  
    
	<script src="javascripts/foundation/foundation.dropdown.js"></script>


  		





  
  365
  
    
	


  		





  
  366
  
    
	<script src="javascripts/foundation/foundation.forms.js"></script>


  		





  
  367
  
    
	


  		





  
  368
  
    
	<script src="javascripts/foundation/foundation.joyride.js"></script>


  		





  
  369
  
    
	


  		





  
  370
  
    
	<script src="javascripts/foundation/foundation.magellan.js"></script>


  		





  
  371
  
    
	


  		





  
  372
  
    
	<script src="javascripts/foundation/foundation.orbit.js"></script>


  		





  
  373
  
    
	


  		





  
  374
  
    
	<script src="javascripts/foundation/foundation.placeholder.js"></script>


  		





  
  375
  
    
	


  		





  
  376
  
    
	<script src="javascripts/foundation/foundation.reveal.js"></script>


  		





  
  377
  
    
	


  		





  
  378
  
    
	<script src="javascripts/foundation/foundation.section.js"></script>


  		





  
  379
  
    
	


  		





  
  380
  
    
	<script src="javascripts/foundation/foundation.tooltips.js"></script>


  		





  
  381
  
    
	<script src="javascripts/foundation/foundation.topbar.js"></script>


  		





  
  382
  
    
	<script type="text/javascript" src="javascripts/jquery.scrollTo.js"></script>


  		





  
  383
  
    
	<script type="text/javascript" src="javascripts/jquery.easing.1.3.js"></script>


  		





  
  384
  
    
	<script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script>


  		





  
  385
  
    
	<script type="text/javascript" src="javascripts/jquery.jscrollpane.js"></script>


  		





  
  386
  
    
	<!-- dropzone.js used for drag and drop files to upload them --> 


  		





  
  387
  
    
	<script type="text/javascript" src="javascripts/dropzone.js"></script>


  		





  
  388
  
    
	<script type="text/javascript" src="javascripts/jquery.magnific-popup.js"></script>


  		





  
  389
  
    
	<!-- fabrastic.js used for the color picker --> 


  		





  
  390
  
    
	<script type="text/javascript" src="javascripts/farbtastic.js"></script>


  		





  
  391
  
    
	<script type="text/javascript" src="javascripts/jquery.scrollintoview.js"></script>


  		





  
  392
  
    
	<script src="javascripts/common.js"></script>


  		





  
  393
  
    
	


  		





  
  394
  
    
	<script type="text/javascript" src="javascripts/wizard.js"></script>


  		





  
  395
  
    
	<script type="text/javascript" src="javascripts/sshkeys-wizard.js"></script>


  		





  
  396
  
    
  <script>


  		





  
  397
  
    
    $(document).foundation();


  		





  
  398
  
    
    $(document).ready(function() {


  		





  
  399
  
    

  		





  
  400
  
    
    })


  		





  
  401
  
    
  </script>


  		





  
  402
  
    
</body>


  		





  
  403
  
    
</html>


  		












Also available in:
  Unified diff