Revision 9fad921d

b/snf-cyclades-app/synnefo/ui/new_ui/ui/fonts/snf-font-1.dev.svg
1 
<?xml version="1.0" standalone="no"?>
2 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
3 
<svg xmlns="http://www.w3.org/2000/svg">
4 
<metadata>
5 
This is a custom SVG font generated by IcoMoon.
6 
<iconset grid="16"></iconset>
7 
</metadata>
8 
<defs>
9 
<font id="snf-font-1" horiz-adv-x="512" >
10 
<font-face units-per-em="512" ascent="480" descent="-32" />
11 
<missing-glyph horiz-adv-x="512" />
12 
<glyph class="hidden" unicode="&#xf000;" d="M0,480L 512 -32L0 -32 z" horiz-adv-x="0" />
13 
<glyph unicode="&#x67;" d="M 560,397.696c-20.528-9.104-42.736-15.344-65.92-18.080c 23.632,14.176, 41.952,36.736, 50.656,63.584 c-22.432-13.136-46.992-22.752-73.008-27.888C 450.656,437.632, 420.784,451.648, 387.872,451.648c-63.584,0-114.912-51.552-114.912-114.912 c0-9.008, 0.864-17.808, 2.912-26.208c-95.488,4.704-180.048,50.544-236.832,119.984C 29.168,413.584, 23.504,393.792, 23.504,372.8 c0-39.888, 20.304-75.072, 51.184-95.568C 55.76,277.712, 37.968,282.912, 22.512,291.568c0-0.576,0-0.928,0-1.52 c0-55.52, 39.68-102.096, 92.208-112.656C 105.056,174.784, 94.976,173.408, 84.4,173.408c-7.424,0-14.544,0.64-21.6,1.952 c 14.592-45.552, 57.040-78.8, 107.296-79.744c-39.2-30.912-88.768-49.104-142.704-49.104c-9.136,0-18.432,0.56-27.408,1.536 c 50.912-32.544, 111.36-51.744, 176.24-51.744c 211.264,0, 326.832,175.232, 326.832,327.040c0,5.008-0.176,9.904-0.336,14.8 C 525.2,354.464, 544.56,374.672, 560,397.696z" horiz-adv-x="560" data-tags="twitter-off-black" />
14 
<glyph unicode="&#x63;" d="M 327.763,159.488q0,7.68-5.632,12.8l-51.712,51.712 51.712,51.712q 5.632,5.632 5.632,12.8 0,7.68-5.632,13.312l-25.6,25.6q-5.632,5.632-13.312,5.632t-12.8-5.632l-51.712-51.712-51.712,51.712q-5.632,5.632-12.8,5.632-7.68,0-13.312-5.632l-25.6-25.6q-5.632-5.632-5.632-13.312t 5.632-12.8l 51.712-51.712-51.712-51.712q-5.632-5.632-5.632-12.8 0-7.68 5.632-13.312l 25.6-25.6q 5.632-5.632 13.312-5.632t 12.8,5.632l 51.712,51.712 51.712-51.712q 5.632-5.632 12.8-5.632 7.68,0 13.312,5.632l 25.6,25.6q 5.632,5.632 5.632,13.312z m 110.592,64.512q0-59.904-29.184-110.080t-79.872-79.872-110.080-29.184-110.080,29.184-79.872,79.872-29.184,110.080 29.184,110.080 79.872,79.872 110.080,29.184 110.080-29.184 79.872-79.872 29.184-110.080z" horiz-adv-x="438" data-tags="cancel-circled" />
15 
<glyph unicode="&#x62;" d="M0,480l0-512 l 512,0 L 512,480 L0,480 z M 480,0L 32,0 L 32,448 l 448,0 L 480,0 z M 384,368L 224,208l-96,96l-64-64l 160-160l 224,224L 384,368z" data-tags="checkbox-checked, tick, checked, selected" />
16 
<glyph unicode="&#x61;" d="M0,480l0-512 l 512,0 L 512,480 L0,480 z M 480,0L 32,0 L 32,448 l 448,0 L 480,0 z" data-tags="checkbox-unchecked, unchecked, square" />
17 
<glyph unicode="&#x64;" d="M 312.915,171.776l-41.472-41.472q-3.072-3.072-6.656-3.072t-6.656,3.072l-38.912,38.912-38.912-38.912q-3.072-3.072-6.656-3.072t-6.656,3.072l-41.472,41.472q-3.072,3.072-3.072,6.656t 3.072,6.656l 38.912,38.912-38.912,38.912q-3.072,3.072-3.072,6.656t 3.072,6.656l 41.472,41.472q 3.072,3.072 6.656,3.072t 6.656-3.072l 38.912-38.912 38.912,38.912q 3.072,3.072 6.656,3.072t 6.656-3.072l 41.472-41.472q 3.072-3.072 3.072-6.656t-3.072-6.656l-38.912-38.912 38.912-38.912q 3.072-3.072 3.072-6.656t-3.072-6.656z m 61.44,52.224q0,42.496-20.992,77.824t-56.32,56.32-77.824,20.992-77.824-20.992-56.32-56.32-20.992-77.824 20.992-77.824 56.32-56.32 77.824-20.992 77.824,20.992 56.32,56.32 20.992,77.824z m 64,0q0-59.904-29.184-110.080t-79.872-79.872-110.080-29.184-110.080,29.184-79.872,79.872-29.184,110.080 29.184,110.080 79.872,79.872 110.080,29.184 110.080-29.184 79.872-79.872 29.184-110.080z" horiz-adv-x="438" data-tags="cancel-circled2" />
18 
<glyph unicode="&#x65;" d="M 240,464.128q 99.328,0 169.472-70.656t 70.656-169.472-70.656-169.472-169.472-70.656-169.472,70.656-70.656,169.472 70.656,169.472 169.472,70.656z m0-427.008q 77.312,0 132.096,54.784t 54.784,132.096-54.784,132.096-132.096,54.784-132.096-54.784-54.784-132.096 54.784-132.096 132.096-54.784z m 18.432,186.88l 71.168-70.656q 6.656-6.656 2.56-14.848t-12.288-8.192q-5.632,0-9.728,4.096l-70.656,71.168-70.656-71.168q-4.096-4.096-9.728-4.096-8.192,0-12.288,8.192t 2.56,14.848l 71.168,70.656-71.168,70.656q-9.216,9.216 0.512,18.432t 18.432,0.512l 70.656-71.168 70.656,71.168q 9.216,9.216 18.432-0.512t 0.512-18.432z" horiz-adv-x="480" data-tags="cancel-circled-outline" />
19 
<glyph unicode="&#x66;" d="M 373.124,118.016q0-32.768-23.552-56.32t-56.32-23.552-56.32,23.552l-50.176,50.176-50.688-50.176q-22.528-22.528-56.32-22.528t-56.32,22.528q-23.552,23.552-23.552,56.32 0,33.28 23.552,56.832l 50.176,50.176-50.176,50.176q-23.552,23.552-23.552,56.832 0,32.768 23.552,56.32 22.528,22.528 56.32,22.528t 56.32-22.528l 50.688-50.176 50.176,50.176q 22.528,22.528 56.832,22.528t 56.832-22.528q 23.040-23.040 23.040-56.32 0-33.792-23.040-56.832l-50.688-50.176 50.688-50.176q 23.040-23.040 23.040-56.832z m-186.368,69.12l 87.552-87.552q 7.68-7.68 18.944-7.68t 18.944,7.68 7.68,18.432q0,11.776-7.68,19.456l-87.552,87.552 87.552,87.552q 7.68,7.68 7.68,19.456 0,10.752-7.68,18.432t-18.944,7.68-18.944-7.68l-87.552-87.552-88.576,87.552q-7.68,7.68-18.432,7.68t-18.432-7.68q-8.192-8.192-8.192-18.432 0-10.752 8.192-19.456l 87.552-87.552-87.552-87.552q-8.192-8.192-8.192-19.456 0-10.24 8.192-18.432 7.68-7.68 18.432-7.68t 18.432,7.68z" horiz-adv-x="373" data-tags="cancel-outline" />
20 
<glyph unicode="&#x20;" horiz-adv-x="256" />
21 
</font></defs></svg>
b/snf-cyclades-app/synnefo/ui/new_ui/ui/fonts/snf-font-1.svg
1 
<?xml version="1.0" standalone="no"?>
2 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
3 
<svg xmlns="http://www.w3.org/2000/svg">
4 
<metadata>
5 
This is a custom SVG font generated by IcoMoon.
6 
<iconset grid="16"></iconset>
7 
</metadata>
8 
<defs>
9 
<font id="snf-font-1" horiz-adv-x="512" >
10 
<font-face units-per-em="512" ascent="480" descent="-32" />
11 
<missing-glyph horiz-adv-x="512" />
12 
<glyph class="hidden" unicode="&#xf000;" d="M0,480L 512 -32L0 -32 z" horiz-adv-x="0" />
13 
<glyph unicode="&#x67;" d="M 560,397.696c-20.528-9.104-42.736-15.344-65.92-18.080c 23.632,14.176, 41.952,36.736, 50.656,63.584 c-22.432-13.136-46.992-22.752-73.008-27.888C 450.656,437.632, 420.784,451.648, 387.872,451.648c-63.584,0-114.912-51.552-114.912-114.912 c0-9.008, 0.864-17.808, 2.912-26.208c-95.488,4.704-180.048,50.544-236.832,119.984C 29.168,413.584, 23.504,393.792, 23.504,372.8 c0-39.888, 20.304-75.072, 51.184-95.568C 55.76,277.712, 37.968,282.912, 22.512,291.568c0-0.576,0-0.928,0-1.52 c0-55.52, 39.68-102.096, 92.208-112.656C 105.056,174.784, 94.976,173.408, 84.4,173.408c-7.424,0-14.544,0.64-21.6,1.952 c 14.592-45.552, 57.040-78.8, 107.296-79.744c-39.2-30.912-88.768-49.104-142.704-49.104c-9.136,0-18.432,0.56-27.408,1.536 c 50.912-32.544, 111.36-51.744, 176.24-51.744c 211.264,0, 326.832,175.232, 326.832,327.040c0,5.008-0.176,9.904-0.336,14.8 C 525.2,354.464, 544.56,374.672, 560,397.696z" horiz-adv-x="560"  />
14 
<glyph unicode="&#x63;" d="M 327.763,159.488q0,7.68-5.632,12.8l-51.712,51.712 51.712,51.712q 5.632,5.632 5.632,12.8 0,7.68-5.632,13.312l-25.6,25.6q-5.632,5.632-13.312,5.632t-12.8-5.632l-51.712-51.712-51.712,51.712q-5.632,5.632-12.8,5.632-7.68,0-13.312-5.632l-25.6-25.6q-5.632-5.632-5.632-13.312t 5.632-12.8l 51.712-51.712-51.712-51.712q-5.632-5.632-5.632-12.8 0-7.68 5.632-13.312l 25.6-25.6q 5.632-5.632 13.312-5.632t 12.8,5.632l 51.712,51.712 51.712-51.712q 5.632-5.632 12.8-5.632 7.68,0 13.312,5.632l 25.6,25.6q 5.632,5.632 5.632,13.312z m 110.592,64.512q0-59.904-29.184-110.080t-79.872-79.872-110.080-29.184-110.080,29.184-79.872,79.872-29.184,110.080 29.184,110.080 79.872,79.872 110.080,29.184 110.080-29.184 79.872-79.872 29.184-110.080z" horiz-adv-x="438"  />
15 
<glyph unicode="&#x62;" d="M0,480l0-512 l 512,0 L 512,480 L0,480 z M 480,0L 32,0 L 32,448 l 448,0 L 480,0 z M 384,368L 224,208l-96,96l-64-64l 160-160l 224,224L 384,368z"  />
16 
<glyph unicode="&#x61;" d="M0,480l0-512 l 512,0 L 512,480 L0,480 z M 480,0L 32,0 L 32,448 l 448,0 L 480,0 z"  />
17 
<glyph unicode="&#x64;" d="M 312.915,171.776l-41.472-41.472q-3.072-3.072-6.656-3.072t-6.656,3.072l-38.912,38.912-38.912-38.912q-3.072-3.072-6.656-3.072t-6.656,3.072l-41.472,41.472q-3.072,3.072-3.072,6.656t 3.072,6.656l 38.912,38.912-38.912,38.912q-3.072,3.072-3.072,6.656t 3.072,6.656l 41.472,41.472q 3.072,3.072 6.656,3.072t 6.656-3.072l 38.912-38.912 38.912,38.912q 3.072,3.072 6.656,3.072t 6.656-3.072l 41.472-41.472q 3.072-3.072 3.072-6.656t-3.072-6.656l-38.912-38.912 38.912-38.912q 3.072-3.072 3.072-6.656t-3.072-6.656z m 61.44,52.224q0,42.496-20.992,77.824t-56.32,56.32-77.824,20.992-77.824-20.992-56.32-56.32-20.992-77.824 20.992-77.824 56.32-56.32 77.824-20.992 77.824,20.992 56.32,56.32 20.992,77.824z m 64,0q0-59.904-29.184-110.080t-79.872-79.872-110.080-29.184-110.080,29.184-79.872,79.872-29.184,110.080 29.184,110.080 79.872,79.872 110.080,29.184 110.080-29.184 79.872-79.872 29.184-110.080z" horiz-adv-x="438"  />
18 
<glyph unicode="&#x65;" d="M 240,464.128q 99.328,0 169.472-70.656t 70.656-169.472-70.656-169.472-169.472-70.656-169.472,70.656-70.656,169.472 70.656,169.472 169.472,70.656z m0-427.008q 77.312,0 132.096,54.784t 54.784,132.096-54.784,132.096-132.096,54.784-132.096-54.784-54.784-132.096 54.784-132.096 132.096-54.784z m 18.432,186.88l 71.168-70.656q 6.656-6.656 2.56-14.848t-12.288-8.192q-5.632,0-9.728,4.096l-70.656,71.168-70.656-71.168q-4.096-4.096-9.728-4.096-8.192,0-12.288,8.192t 2.56,14.848l 71.168,70.656-71.168,70.656q-9.216,9.216 0.512,18.432t 18.432,0.512l 70.656-71.168 70.656,71.168q 9.216,9.216 18.432-0.512t 0.512-18.432z" horiz-adv-x="480"  />
19 
<glyph unicode="&#x66;" d="M 373.124,118.016q0-32.768-23.552-56.32t-56.32-23.552-56.32,23.552l-50.176,50.176-50.688-50.176q-22.528-22.528-56.32-22.528t-56.32,22.528q-23.552,23.552-23.552,56.32 0,33.28 23.552,56.832l 50.176,50.176-50.176,50.176q-23.552,23.552-23.552,56.832 0,32.768 23.552,56.32 22.528,22.528 56.32,22.528t 56.32-22.528l 50.688-50.176 50.176,50.176q 22.528,22.528 56.832,22.528t 56.832-22.528q 23.040-23.040 23.040-56.32 0-33.792-23.040-56.832l-50.688-50.176 50.688-50.176q 23.040-23.040 23.040-56.832z m-186.368,69.12l 87.552-87.552q 7.68-7.68 18.944-7.68t 18.944,7.68 7.68,18.432q0,11.776-7.68,19.456l-87.552,87.552 87.552,87.552q 7.68,7.68 7.68,19.456 0,10.752-7.68,18.432t-18.944,7.68-18.944-7.68l-87.552-87.552-88.576,87.552q-7.68,7.68-18.432,7.68t-18.432-7.68q-8.192-8.192-8.192-18.432 0-10.752 8.192-19.456l 87.552-87.552-87.552-87.552q-8.192-8.192-8.192-19.456 0-10.24 8.192-18.432 7.68-7.68 18.432-7.68t 18.432,7.68z" horiz-adv-x="373"  />
20 
<glyph unicode="&#x20;" horiz-adv-x="256" />
21 
</font></defs></svg>
b/snf-cyclades-app/synnefo/ui/new_ui/ui/index.html
27 27 
 			<ul>
28 28 
 				<li><a href="vm_list_v1.html">VMs list page</a> (kpal original design)</li>
29 29 
	 			<li><a href="vm_details_v1.html">VM details page</a> (kpal original design)</li>
30 
	 			<li><a href="network_list_v1.html">Networks list page</a> (kpal original design)</li>
30 31 
	 			<li><a href="network_details_v1.html">Network details page</a> (kpal original design)
31 32 
 				<li><a href="vm_create_a_v1.html">Create new machine</a> (kpal original design)</li>
32 33
b/snf-cyclades-app/synnefo/ui/new_ui/ui/network_details_v1.html
11 11 
    <link rel="stylesheet" href="stylesheets/normalize.css" />
12 12 
    <link rel="stylesheet" href="stylesheets/app.css" />
13 13 
    <link rel="stylesheet" href="stylesheets/styles.css" />
14 
    <link rel="stylesheet" href="stylesheets/font_custom.css" />
14 15 
    <script src="javascripts/vendor/custom.modernizr.js"></script>
15 16 

  		





  16
  17
  
    
</head>


  		





  ......




  32
  33
  
    
			<nav class="top-nav icons-nav">


  		





  33
  34
  
    
				


  		





  34
  35
  
    
				<ul>


  		





  35
  
  
    
					<li><a href="" data-tooltip class="has-tip" title="Storage"><img src="images/menu-icon-storage.png" alt="vm"></a></li>


  		





  36
  
  
    
					<li><a href="" data-tooltip class="has-tip" title="Compute"><img src="images/menu-icon-compute.png" alt="vm"></a></li>


  		





  
  36
  
    
					<li><a href="" data-tooltip class="has-tip" title="Storage"><img src="images/menu-icon-storage.png" alt="network"></a></li>


  		





  
  37
  
    
					<li><a href="" data-tooltip class="has-tip" title="Compute"><img src="images/menu-icon-compute.png" alt="network"></a></li>


  		





  37
  38
  
    
					


  		





  38
  
  
    
					<li><a href="" data-tooltip class="has-tip" title="Disks"><img src="images/menu-icon-disks.png" alt="vm"></a></li>


  		





  39
  
  
    
					<li><a href="" data-tooltip class="has-tip" title="Networks"><img src="images/menu-icon-networks.png" alt="vm"></a></li>


  		





  
  39
  
    
					<li><a href="" data-tooltip class="has-tip" title="Disks"><img src="images/menu-icon-disks.png" alt="network"></a></li>


  		





  
  40
  
    
					<li><a href="" data-tooltip class="has-tip" title="Networks"><img src="images/menu-icon-networks.png" alt="network"></a></li>


  		





  40
  41
  
    
				</ul>


  		





  41
  42
  
    
				 


  		





  42
  43
  
    
			</nav>


  		





  ......




  47
  48
  
    
			<div class="actions clearfix">


  		





  48
  49
  
    
				


  		





  49
  50
  
    
				<div class="lt-actions">


  		





  50
  
  
    
					<div class="new-btn"><a href="vm_create_a_v1.html"><span>+</span> NEW MACHINE </a></div>


  		





  
  51
  
    
					<div class="new-btn"><a href=""><span>+</span> NEW NETWORK </a></div>


  		





  51
  52
  
    
				</div>


  		





  52
  53
  
    
				<div class="main-actions">


  		





  53
  54
  
    
					<ul>


  		





  ......




  66
  67
  
    

  		





  67
  68
  
    
				<p>Nunc at velit quis lectus nonummy eleifend. Curabitur eros. Aenean ligula dolor, gravida auctor, auctor et, neque ut neque. In at libero. </p>


  		





  68
  69
  
    
			</div>


  		





  69
  
  
    
			<a href="#" class="close" title="hide message">close</a>


  		





  
  70
  
    
			<a href="#" class="close" title="hide message"></a>


  		





  70
  71
  
    
		</div>


  		





  71
  72
  
    

  		





  72
  73
  
    
	</div>


  		





  73
  74
  
    
	<div class="row-full wrapper">


  		





  74
  
  
    
		<div class="lt-sidebar vms">


  		





  
  75
  
    
		


  		





  
  76
  
    
		<!-- sidebar -->


  		





  
  77
  
    
		<div class="lt-sidebar networks scroll-pane">


  		





  75
  78
  
    

  		





  76
  
  
    
			<!-- sidebar -->


  		





  77
  79
  
    
			<ul class="items-list">


  		





  78
  80
  
    
				<li>


  		





  79
  
  
    
					<div class="img running">


  		





  80
  
  
    
						VM running


  		





  81
  
  
    
						<span class="os windows">os</span>


  		





  
  81
  
    
					<div class="img">


  		





  
  82
  
    
						<span>Network</span>


  		





  82
  83
  
    
					</div>


  		





  83
  84
  
    
					<p class="visible-info">


  		





  84
  85
  
    
						<span>IPv4 83.212.97.127</span>


  		





  85
  
  
    
						<span>my awsome machine</span>


  		





  86
  
  
    
					</p>


  		





  87
  
  
    
				</li>


  		





  88
  
  
    
				<li class="current">


  		





  89
  
  
    
					<div class="img running">


  		





  90
  
  
    
						VM running


  		





  91
  
  
    
						<span class="os fedora">os</span>


  		





  92
  
  
    
					</div>


  		





  93
  
  
    
					<p class="visible-info">


  		





  94
  
  
    
						<span>IPv4 83.212.97.127</span>


  		





  95
  
  
    
						<span>my awsome machine</span>


  		





  
  86
  
    
						<span>Network name</span>


  		





  96
  87
  
    
					</p>


  		





  97
  88
  
    
				</li>


  		





  98
  89
  
    
				<li>


  		





  99
  
  
    
					<div class="img stopped">


  		





  100
  
  
    
						VM running


  		





  101
  
  
    
						<span class="os kubuntu">os</span>


  		





  
  90
  
    
					<div class="img">


  		





  
  91
  
    
						<span>Network</span>


  		





  102
  92
  
    
					</div>


  		





  103
  93
  
    
					<p class="visible-info">


  		





  104
  94
  
    
						<span>IPv4 83.212.97.127</span>


  		





  105
  
  
    
						<span>my awsome machine</span>


  		





  
  95
  
    
						<span>Network name</span>


  		





  106
  96
  
    
					</p>


  		





  107
  97
  
    
				</li>


  		





  108
  98
  
    
				<li>


  		





  109
  
  
    
					<div class="img running">


  		





  110
  
  
    
						VM running


  		





  111
  
  
    
						<span class="os windows">os</span>


  		





  
  99
  
    
					<div class="img">


  		





  
  100
  
    
						<span>Network</span>


  		





  112
  101
  
    
					</div>


  		





  113
  102
  
    
					<p class="visible-info">


  		





  114
  103
  
    
						<span>IPv4 83.212.97.127</span>


  		





  115
  
  
    
						<span>my awsome machine</span>


  		





  116
  
  
    
					</p>


  		





  117
  
  
    
				</li>


  		





  118
  
  
    
				<li>


  		





  119
  
  
    
					<div class="img running">


  		





  120
  
  
    
						VM running


  		





  121
  
  
    
						<span class="os kubuntu">os</span>


  		





  122
  
  
    
					</div>


  		





  123
  
  
    
					<p class="visible-info">


  		





  124
  
  
    
						<span>IPv4 83.212.97.127</span>


  		





  125
  
  
    
						<span>my awsome machine</span>


  		





  126
  
  
    
					</p>


  		





  127
  
  
    
				</li>


  		





  128
  
  
    
				<li>


  		





  129
  
  
    
					<div class="img running">


  		





  130
  
  
    
						VM running


  		





  131
  
  
    
						<span class="os">os</span>


  		





  132
  
  
    
					</div>


  		





  133
  
  
    
					<p class="visible-info">


  		





  134
  
  
    
						<span>IPv4 83.212.97.127</span>


  		





  135
  
  
    
						<span>my awsome machine</span>


  		





  136
  
  
    
					</p>


  		





  137
  
  
    
				</li>


  		





  138
  
  
    
				<li>


  		





  139
  
  
    
					<div class="img running">


  		





  140
  
  
    
						VM running


  		





  141
  
  
    
						<span class="os windows">os</span>


  		





  142
  
  
    
					</div>


  		





  143
  
  
    
					<p class="visible-info">


  		





  144
  
  
    
						<span>IPv4 83.212.97.127</span>


  		





  145
  
  
    
						<span>my awsome machine</span>


  		





  
  104
  
    
						<span>Network name</span>


  		





  146
  105
  
    
					</p>


  		





  147
  106
  
    
				</li>


  		





  
  107
  
    
				


  		





  148
  108
  
    
			</ul>


  		





  149
  109
  
    
		</div>


  		





  150
  110
  
    

  		





  151
  
  
    
		<!-- detailed view of vm -->


  		





  
  111
  
    
		<!-- detailed view of network -->


  		





  152
  112
  
    

  		





  153
  
  
    
		<!-- main image of vm -->


  		





  154
  
  
    
		<div class="main details vm">


  		





  155
  
  
    
			<a href="" class="close" title="back to network list">close</a>


  		





  
  113
  
    
		<!-- main image of network -->


  		





  
  114
  
    
		<div class="main details network">


  		





  
  115
  
    
			<a href="network_list_v1.html" class="close-font" title="back to network list"><span class="snf-font">c</span></a>


  		





  156
  116
  
    
			<div class="top border-bottom-style1">


  		





  157
  
  
    
				<div class="img running">


  		





  158
  
  
    
					VM running


  		





  159
  
  
    
					<span class="os windows">os</span>


  		





  
  117
  
    
				<div class="img">


  		





  
  118
  
    
					<span>Network</span>


  		





  
  119
  
    
					


  		





  160
  120
  
    
				</div>


  		





  161
  121
  
    
				<div class="actions">


  		





  162
  122
  
    
					<ul>


  		





  ......




  166
  126
  
    
				</div>


  		





  167
  127
  
    
			</div>


  		





  168
  128
  
    

  		





  169
  
  
    
			<!--sections with details of vm -->


  		





  
  129
  
    
			<!--sections with details of network -->


  		





  170
  130
  
    
			<section class="border-bottom-style1 info">


  		





  171
  131
  
    
				<dl>


  		





  172
  132
  
    
					<dt>Name</dt>


  		












  

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






  
  1
  
    

  		





  
  2
  
    
<!DOCTYPE html>


  		





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


  		





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


  		





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


  		





  
  6
  
    

  		





  
  7
  
    
<head>


  		





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


  		





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


  		





  
  10
  
    
    <title>Synnefo | VM list</title>


  		





  
  11
  
    
    <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'>


  		





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


  		





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


  		





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


  		





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


  		





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


  		





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


  		





  
  18
  
    

  		





  
  19
  
    
</head>


  		





  
  20
  
    
<body>


  		





  
  21
  
    
	<div class="dummy-navigation">


  		





  
  22
  
    
		<a href="" class="close">X</a>


  		





  
  23
  
    
		<a href="index.html">Homepage</a><br>


  		





  
  24
  
    
		<a href="" class="our" data-our="questions">Show/Hide questions</a><br>


  		





  
  25
  
    
		<a href="" class="our" data-our="suggestions">Show/Hide suggestions</a><br>


  		





  
  26
  
    
		<a href="" class="our" data-our="problems">Show/Hide problems</a><br>


  		





  
  27
  
    
	</div>


  		





  
  28
  
    
	<div class="row-full">


  		





  
  29
  
    
		<header class="header">


  		





  
  30
  
    
			


  		





  
  31
  
    
			<div class="logo">


  		





  
  32
  
    
				<img src="images/logo_01.png" alt="software logo">


  		





  
  33
  
    
			</div>


  		





  
  34
  
    
			


  		





  
  35
  
    
			<nav class="top-nav icons-nav">


  		





  
  36
  
    
				


  		





  
  37
  
    
				<ul>


  		





  
  38
  
    
					<li><a href="" data-tooltip class="has-tip" title="Storage"><img src="images/menu-icon-storage.png" alt="vm"></a></li>


  		





  
  39
  
    
					<li><a href="" data-tooltip class="has-tip" title="Compute"><img src="images/menu-icon-compute.png" alt="vm"></a></li>


  		





  
  40
  
    
					


  		





  
  41
  
    
					<li><a href="" data-tooltip class="has-tip" title="Disks"><img src="images/menu-icon-disks.png" alt="vm"></a></li>


  		





  
  42
  
    
					<li><a href="" data-tooltip class="has-tip" title="Networks"><img src="images/menu-icon-networks.png" alt="vm"></a></li>


  		





  
  43
  
    
				</ul>


  		





  
  44
  
    
				 


  		





  
  45
  
    
			</nav>


  		





  
  46
  
    
			


  		





  
  47
  
    
			<div class="login">


  		





  
  48
  
    
				<a href="">test@grnet.gr</a>


  		





  
  49
  
    
			</div>


  		





  
  50
  
    
			<div class="actions clearfix">


  		





  
  51
  
    
				


  		





  
  52
  
    
				<div class="lt-actions">


  		





  
  53
  
    
					<div class="new-btn"><a href="vm_create_a_v1.html"><span>+</span> NEW NETWORK</a></div>


  		





  
  54
  
    
				</div>


  		





  
  55
  
    
				<div class="main-actions">


  		





  
  56
  
    
					<ul>


  		





  
  57
  
    
						<li class="running"><a href="">Reboot</a></li>


  		





  
  58
  
    
						<li class="running"><a href="">Shutdown</a></li>


  		





  
  59
  
    
						<li class="running single"><a href="">Console</a></li>


  		





  
  60
  
    
						<li class="both"><a href="">Destroy</a></li>


  		





  
  61
  
    
						<li class="stopped"><a href="">Start</a></li>


  		





  
  62
  
    
					</ul>


  		





  
  63
  
    
				</div>


  		





  
  64
  
    
			</div>


  		





  
  65
  
    
		</header>


  		





  
  66
  
    
		<div class="info top-info alert">


  		





  
  67
  
    
			<div class="wrap">


  		





  
  68
  
    
				<p>ALERT!</p>


  		





  
  69
  
    

  		





  
  70
  
    
				<p>Nunc at velit quis lectus nonummy eleifend. Curabitur eros. Aenean ligula dolor, gravida auctor, auctor et, neque ut neque. In at libero. </p>


  		





  
  71
  
    
			</div>


  		





  
  72
  
    
			<a href="#" class="close" title="hide message">close</a>


  		





  
  73
  
    
		</div>


  		





  
  74
  
    

  		





  
  75
  
    
	</div>


  		





  
  76
  
    
	<div class="row-full wrapper">


  		





  
  77
  
    

  		





  
  78
  
    
		


  		





  
  79
  
    
		<!-- main area -->


  		





  
  80
  
    
		<section class="main">


  		





  
  81
  
    
			


  		





  
  82
  
    
			<div class="networks entities vms">


  		





  
  83
  
    
				<ul class="items-list small-block-grid-2 large-block-grid-4">


  		





  
  84
  
    
					<li>


  		





  
  85
  
    
						<div class="container">


  		





  
  86
  
    
							<div class="options">


  		





  
  87
  
    
								<div class="wrap">


  		





  
  88
  
    
									<a href="network_details_v1.html">details</a>


  		





  
  89
  
    
								</div>


  		





  
  90
  
    
							</div>


  		





  
  91
  
    
							<div class="img-wrap">


  		





  
  92
  
    
								<div class="img">


  		





  
  93
  
    
									Network									


  		





  
  94
  
    
								</div>


  		





  
  95
  
    
							</div>


  		





  
  96
  
    
							


  		





  
  97
  
    
							<p class="visible-info">


  		





  
  98
  
    
								<span><em>IPv4 83.212.97.127</em></span>


  		





  
  99
  
    
								<span class="title"><em>Network Name</em></span>


  		





  
  100
  
    
							</p>


  		





  
  101
  
    
							<a href="" class="check"><span class="snf-custom-checkbox">a</span></a>


  		





  
  102
  
    
							


  		





  
  103
  
    
						</div>


  		





  
  104
  
    
					</li>


  		





  
  105
  
    
					<li>


  		





  
  106
  
    
						<div class="container">


  		





  
  107
  
    
							<div class="options">


  		





  
  108
  
    
								<div class="wrap">


  		





  
  109
  
    
									


  		





  
  110
  
    
									<a href="network_details_v1.html">details</a>


  		





  
  111
  
    
									


  		





  
  112
  
    
								</div>


  		





  
  113
  
    
							</div>


  		





  
  114
  
    
							<div class="img-wrap">


  		





  
  115
  
    
								<div class="img">


  		





  
  116
  
    
									Network


  		





  
  117
  
    
									


  		





  
  118
  
    
								</div>


  		





  
  119
  
    
							</div>


  		





  
  120
  
    
							


  		





  
  121
  
    
							<p class="visible-info">


  		





  
  122
  
    
								<span><em>IPv4 83.212.97.127</em></span>


  		





  
  123
  
    
								<span class="title"><em>Network Name</em></span>


  		





  
  124
  
    
							</p>


  		





  
  125
  
    
							<a href="" class="check"><span class="snf-custom-checkbox">a</span></a>


  		





  
  126
  
    
							


  		





  
  127
  
    
						</div>


  		





  
  128
  
    
					</li>


  		





  
  129
  
    
					


  		





  
  130
  
    
					<li>


  		





  
  131
  
    
						<div class="container">


  		





  
  132
  
    
							<div class="options">


  		





  
  133
  
    
								<div class="wrap">


  		





  
  134
  
    
									


  		





  
  135
  
    
									<a href="network_details_v1.html">details</a>


  		





  
  136
  
    
									


  		





  
  137
  
    
								</div>


  		





  
  138
  
    
							</div>


  		





  
  139
  
    
							<div class="img-wrap">


  		





  
  140
  
    
								<div class="img">


  		





  
  141
  
    
									Network


  		





  
  142
  
    
									


  		





  
  143
  
    
								</div>


  		





  
  144
  
    
							</div>


  		





  
  145
  
    
							


  		





  
  146
  
    
							<p class="visible-info">


  		





  
  147
  
    
								<span><em>IPv4 83.212.97.127</em></span>


  		





  
  148
  
    
								<span class="title"><em>Network Name</em></span>


  		





  
  149
  
    
							</p>


  		





  
  150
  
    
							<a href="" class="check"><span class="snf-custom-checkbox">a</span></a>


  		





  
  151
  
    
							


  		





  
  152
  
    
						</div>


  		





  
  153
  
    
					</li>


  		





  
  154
  
    
					


  		





  
  155
  
    
					 


  		





  
  156
  
    
					<li>


  		





  
  157
  
    
						<div class="add-new"><a href="">NEW<br>NETWORK</a></div>	


  		





  
  158
  
    
					</li>


  		





  
  159
  
    
					 


  		





  
  160
  
    
				</ul>


  		





  
  161
  
    
			</div>


  		





  
  162
  
    
		</section>


  		





  
  163
  
    
	</div>


  		





  
  164
  
    
	<div class="extras">


  		





  
  165
  
    
		<span data-tooltip class="has-tip ours suggestions" title="Μήπως να είναι λίγο πιο έντονα τα χρώματα; Μοιάζουν απενεργοποιημένα..." style="top:0;left:200px">:)</span>


  		





  
  166
  
    
		<span data-tooltip class="has-tip ours questions" title="Πόσο θα είναι το μέγιστο πλάτος της κύριας περιοχής" style="top:240px;left:20px">?</span>


  		





  
  167
  
    
		<span data-tooltip class="has-tip ours problems" title="Πώς θα έχουμε δράσεις όπως filters κτλ" style="top:140px;left:250px">!!</span>


  		





  
  168
  
    
	</div>


  		





  
  169
  
    
	<div id="vm-connect" class="reveal-modal medium">


  		





  
  170
  
    
  		<p>A direct connection to this machine can be established using the <a target=​"_blank" href=​"http:​/​/​en.wikipedia.org/​wiki/​Secure_Shell">​SSH Protocol</a>. To do so open a terminal and type the following at the prompt to connect to your machine:</p>


  		





  
  171
  
    
		<p class="ssh"><span>ssh user@snf-38389.vm.okeanos.grnet.gr</spam></p>


  		





  
  172
  
    

  		





  
  173
  
    
		<p class="info">Keep in mind that recently rebooted or created VMs may take up to 5 minutes to connect to them.</p>


  		





  
  174
  
    
  		<a class="close-reveal-modal" title="close window">&#215;</a>


  		





  
  175
  
    
	</div>


  		





  
  176
  
    
 


  		





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


  		





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


  		





  
  179
  
    
	


  		





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


  		





  
  181
  
    
	


  		





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


  		





  
  183
  
    
	


  		





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


  		





  
  185
  
    
	


  		





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


  		





  
  187
  
    
	


  		





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


  		





  
  189
  
    
	


  		





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


  		





  
  191
  
    
	


  		





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


  		





  
  193
  
    
	


  		





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


  		





  
  195
  
    
	


  		





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


  		





  
  197
  
    
	


  		





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


  		





  
  199
  
    
	


  		





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


  		





  
  201
  
    
	


  		





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


  		





  
  203
  
    
	


  		





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


  		





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


  		





  
  206
  
    
	<script src="javascripts/common_ab.js"></script>


  		





  
  207
  
    
	


  		





  
  208
  
    
   


  		





  
  209
  
    
    <script src="javascripts/gp-script.js"></script>


  		





  
  210
  
    
  


  		





  
  211
  
    
  <script>


  		





  
  212
  
    
    $(document).foundation();


  		





  
  213
  
    
  </script>


  		





  
  214
  
    
</body>


  		





  
  215
  
    
</html>


  		












  

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






  1
  
  
    

  		





  2
  
  
    
/* checkboxes: selection window of vm_list_v1.html */


  		





  3
  
  
    

  		





  4
  1
  
    
@font-face {


  		





  5
  
  
    
	font-family: 'checkboxes';


  		





  6
  
  
    
	src:url('../fonts/checkboxes.eot');


  		





  
  2
  
    
	font-family: 'snf-font-1';


  		





  
  3
  
    
	src:url('fonts/snf-font-1.eot');


  		





  7
  4
  
    
}


  		





  8
  5
  
    
@font-face {


  		





  9
  
  
    
	font-family: 'checkboxes';


  		





  10
  
  
    
	src: url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAQUAAsAAAAABfwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAABCAAAANwAAAEJxWjxA0ZGVE0AAAHkAAAAGgAAABxlwUvSR0RFRgAAAgAAAAAcAAAAIAAyAARPUy8yAAACHAAAAE0AAABgUD7eIGNtYXAAAAJsAAAARwAAAVgChfM9aGVhZAAAArQAAAAuAAAANv1XHV1oaGVhAAAC5AAAAB4AAAAkBBD/5GhtdHgAAAMEAAAADgAAABAEAAAAbWF4cAAAAxQAAAAGAAAABgAFUABuYW1lAAADHAAAAOsAAAGqFdQ1P3Bvc3QAAAQIAAAADAAAACAAAwAAeJxVjr9Kw1AYxc+X3DQ2uUQbG1C4is46ZMjsYIuLg4M+QUNACbSDEdwcFb71vkUfJQ/hA3Qt5IMG9Haxld9y4HD+EJQCEcXlc1XWs8V79QryQLgR48mZLyeKtc9anUc4fUx/mP+EDrkWK01g8HFogCODr5HB2OA7hb/tOEAK8zZ/ucvzfNe/twTQJyaY4hYBkaevJw8JS6N6KzZMnLiIpFlml1G3FpW195vGUXRF266ugn1/1a2zje0c/2KJ2DFnNYtl5gHryN07hkc0HIntHYNYnnpHGP8C70tW43icY2BgYGQAgpOd+YYg+pz0uwAYDQBBxQZCAAB4nGNgZGBg4ANiCQYQYGJgBEIWMAbxGAAEdgA3eJxjYGZiYJzAwMrAwejDmMbAwOAOpb8ySDK0MDAwMbAyM8AAowADAgSkuaYwODAkfmBgfPD/AYMe4wMGhQagGrDCB0BCAQgZAQgeDIIAAAB4nGNgYGBmgGAZBkYGEAgC8hjBfBYGMyDNAYRMYJnkDwz//4NZiTCWACNYLRtYlAWoDmgSI5AHMYqGgIWJmdZWUAIA2N8HtAB4nGNgZGBgAGK15jOi8fw2Xxm4mRhA4Jz0uwAE/f8BEwPjAyCXgwEsDQAY5ApTAAB4nGNgZGBgfPD/AYMeEwMDwz8GIAkUQQHMAG3nA/YAAHicY2KAACYoDQAAQAAFAAAAAFAAAAUAAHichY4xbsIwGIW/QKCCVp0qZnfplihxBwQHYOrUgR0iKyBQLBmQuEFv0GP0FN17jB6gF+hLaqkLEpZ+/5+fn38/4I53EtqVMGYSuccNZeQ+T7xFTuX5jDzglu/IQ8bJSM4kHUl56F613OOex8h9XphFTuX5iDzQr1+Rh9J/qNjgtO9Y4zmLD1BtXLVb+7MTv0qqObFnRdDR1af9SrCQveHY9SCHw2DJKdTnqkuD/26somVMVVbukmcN881x4UPtjM0LMzf/AXSws2ya2aKU72rapaQgcdulM5reJmLpwmHrG1PmxfUhvzokQy4AeJxjYGbACwAAfQAE) format('woff'),


  		





  11
  
  
    
		 url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');


  		





  
  6
  
    
	font-family: 'snf-font-1';


  		





  
  7
  
    
	src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff'),


  		





  
  8
  
    
		 url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');


  		





  12
  9
  
    
	font-weight: normal;


  		





  13
  10
  
    
	font-style: normal;


  		





  14
  11
  
    
}


  		





  15
  12
  
    

  		





  16
  13
  
    
/* Use the following CSS code if you want to use data attributes for inserting your icons */


  		





  17
  14
  
    
[data-icon]:before {


  		





  18
  
  
    
	font-family: 'checkboxes';


  		





  
  15
  
    
	font-family: 'snf-font-1';


  		





  19
  16
  
    
	content: attr(data-icon);


  		





  20
  17
  
    
	speak: none;


  		





  21
  18
  
    
	font-weight: normal;


  		





  ......




  29
  26
  
    
/*


  		





  30
  27
  
    
Instead of a list of all class selectors,


  		





  31
  28
  
    
you can use the generic selector below, but it's slower:


  		





  32
  
  
    
[class*="checkbox-"] {


  		





  
  29
  
    
[class*="snf-"] {


  		





  33
  30
  
    
*/


  		





  34
  
  
    
.custom_checkbox, .checkbox-checked, .checkbox-partial, .checkbox-unchecked {


  		





  35
  
  
    
	font-family: 'checkboxes';


  		





  
  31
  
    
.snf-font, .snf-twitter-off-black, .snf-cancel-circled,  .snf-custom-checkbox, .snf-checkbox-checked, .snf-checkbox-unchecked, .snf-cancel-circled2, .snf-cancel-circled-outline, .snf-cancel-outline {


  		





  
  32
  
    
	font-family: 'snf-font-1';


  		





  36
  33
  
    
	speak: none;


  		





  37
  34
  
    
	font-style: normal;


  		





  38
  35
  
    
	font-weight: normal;


  		





  ......




  41
  38
  
    
	line-height: 1;


  		





  42
  39
  
    
	-webkit-font-smoothing: antialiased;


  		





  43
  40
  
    
}


  		





  44
  
  
    
/*.checkbox-checked:before {


  		





  45
  
  
    
	content: "\62";


  		





  
  41
  
    
/*


  		





  
  42
  
    
.snf-twitter-off-black:before {


  		





  
  43
  
    
	content: "\67";


  		





  46
  44
  
    
}


  		





  47
  
  
    
.checkbox-partial:before {


  		





  
  45
  
    
.snf-cancel-circled:before {


  		





  48
  46
  
    
	content: "\63";


  		





  49
  47
  
    
}


  		





  50
  
  
    
.checkbox-unchecked:before {


  		





  
  48
  
    
.snf-checkbox-checked:before {


  		





  
  49
  
    
	content: "\62";


  		





  
  50
  
    
}


  		





  
  51
  
    
.snf-checkbox-unchecked:before {


  		





  51
  52
  
    
	content: "\61";


  		





  52
  53
  
    
}


  		





  
  54
  
    
.snf-cancel-circled2:before {


  		





  
  55
  
    
	content: "\64";


  		





  
  56
  
    
}


  		





  
  57
  
    
.snf-cancel-circled-outline:before {


  		





  
  58
  
    
	content: "\65";


  		





  
  59
  
    
}


  		





  
  60
  
    
.snf-cancel-outline:before {


  		





  
  61
  
    
	content: "\66";


  		





  
  62
  
    
}


  		





  53
  63
  
    
*/


  		












  

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






  165
  165
  
    
	background-color: white;


  		





  166
  166
  
    
 }


  		





  167
  167
  
    

  		





  168
  
  
    
 /*  */


  		





  
  168
  
    
 /* styles for network details */


  		





  169
  169
  
    

  		





  170
  170
  
    
 .big{


  		





  171
  
  
    
 	width: 55%;


  		





  
  171
  
    
 	width: 60%;


  		





  172
  172
  
    
 }


  		





  173
  173
  
    

  		





  174
  174
  
    
 .small{


  		





  ......




  189
  189
  
    

  		





  190
  190
  
    
.set{


  		





  191
  191
  
    
	margin-bottom: 1em;


  		





  
  192
  
    
}


  		





  
  193
  
    

  		





  
  194
  
    

  		





  
  195
  
    
.network .top .img {


  		





  
  196
  
    
background: url("../images/network-green140x159.png") no-repeat center center;


  		





  
  197
  
    
width: 140px;


  		





  
  198
  
    
height: 159px;


  		





  
  199
  
    
display: inline-block;


  		





  
  200
  
    
text-indent: -2000px;


  		





  
  201
  
    
overflow: hidden;


  		





  
  202
  
    
}


  		





  
  203
  
    

  		





  
  204
  
    
.networks .items-list .img {


  		





  
  205
  
    
background: url("../images/network-green112x127.png") no-repeat center center;


  		





  
  206
  
    
width: 112px;


  		





  
  207
  
    
height: 127px;


  		





  
  208
  
    
display: inline-block;


  		





  
  209
  
    
text-indent: -2000px;


  		





  
  210
  
    
overflow: hidden;


  		





  
  211
  
    
}


  		





  
  212
  
    

  		





  
  213
  
    
.network .close-font{


  		





  
  214
  
    
	position: absolute;


  		





  
  215
  
    
	right: 0.8em;


  		





  
  216
  
    
	top: 2em;


  		





  
  217
  
    
	font-size: 2em;


  		





  
  218
  
    
	color: #b3b3b3;


  		





  
  219
  
    

  		





  
  220
  
    
}


  		





  
  221
  
    

  		





  
  222
  
    

  		





  
  223
  
    
/* styles for network list */


  		





  
  224
  
    

  		





  
  225
  
    
.networks .items-list .container .img {


  		





  
  226
  
    
background: url("../images/network-green69x78.png") no-repeat center center;


  		





  
  227
  
    
width: 69px;


  		





  
  228
  
    
height: 78px;


  		





  
  229
  
    
display: inline-block;


  		





  
  230
  
    
text-indent: -2000px;


  		





  
  231
  
    
overflow: hidden;


  		





  192
  232
  
    
}


  		












Also available in:
  Unified diff