commit f46d245ba37a7face487d4cfe13f86eedc69cb10
Author: Athina Bekakou <athinabek@grnet.gr>
Date:   Thu Aug 29 17:23:21 2013 +0300

    new ui: minor html modifications

diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/athina.scss b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/athina.scss
index afc856c..8b05679 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/athina.scss
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/athina.scss
@@ -1,35 +1,442 @@
 // Global Foundation Settings
 @import "settings";
 
-/* create vm: choose flavor */
+//$primary-color: #919194; //grey
+//$secondary-color: #ff7bac; //pink
 
-.titles{
-	color: white;
+/* NOT IN USE! styles for selection window (used for vm_list_v1.html) */
+
+/*
+.vm_options {
+	display: none;
+	border: 1px solid #ff7bac;
+	position: absolute;
+	top: -20%;
+	width: 100%;
+	height: 100%;
+	font-size: 27px;
+	font-weight: bold;
+	text-align: left;
+	background-color: white;
+	line-height: 45px;
+	padding-left: 1em;
+	padding-top: 0.65em;
+	
+	.custom_checkbox {
+		display: inline-block;
+		margin: 0;
+		padding-left: 1em;	
+		color: #ff7bac;
+	}
 }
 
 
-.lt-sidebar ul li a.flavor_selection{
-	display: block;
+a.option:hover {
+	color: #ff7bac;
 }
 
+.vm_container {
+	width: 200px;
+	display: inline-block;
+	height: 187px;
+	position: relative;
+
+}
+
+*/
+
+/* styles for the detailed info of each vm (used for vm_details.html) */
+
+
+.graph_container {
+	padding-bottom: 2em;
+
+}
+
+
+.wrap {
+	position: relative;
+}
+
+.section_header {
+	float: left;
+	width:22%;
+	margin-right: 2%;
+	font-weight: bold;
+}
 
-.overlay .lt-sidebar ul li a.flavor_selection.chosen_flavor span{
+.right_side {
+	overflow: hidden;
+	width: 76%;
+}
+
+
+
+.info_simple {
+	display: inline-block;
+	margin-right: 10px;
+}
+
+
+.action_links {
 	display: inline-block;
+	
+	a {
+		color:  $secondary-color;
+		margin-right: 5px;
+
+		&:hover {
+		text-decoration: underline;
+	}
+
+	span:first-child {
+	margin-right: 5px;
+}
+}
+	
+}
+
+a.black {
+	color: black;
+	&:hover {
+		color:  $secondary-color;
+	}
 }
- 
 
- 
-.create-vm .main .select-flavor dl dt span{
-	&:hover{
- 		color: white;
-		border-color: white;
-		background-color: $secondary-color;
-	} 
-	&.current {
+.btn_pinkb {
+	width: 11.5em;
+	height: 3.8em;
+	line-height: 3.8em;
+	border: 1px solid  $secondary-color;
+	position: absolute;
+	top: 0;
+	right: 0;
+	
+	a {
+		display: block;
+		padding-left: 1em;
+		
 		&:hover {
-			color: $secondary-color;
-			border-color: white;
-			background-color: white;
+			color:  $secondary-color;
+		}
+		
+		img {
+			position: absolute;
+			right: 0.6em;
+			top: 0.6em;
+			height: 2.5em;
+		}
+	}
+}
+
+
+.row {
+	margin: 0 0 0.4em 0;
+}
+.middle_side {
+	max-width: 70%;
+}
+
+.txt_size {
+	height: 0.8em;
+	vertical-align: baseline;
+}
+
+
+
+
+ /* styles for network details */
+
+ .big {
+ 	width: 60%;
+ }
+
+ .small {
+ 	width: 170px;
+ }
+
+.wrapper .details .top {
+	padding: 70px 2.5em;
+	
+	.actions ul li {
+		margin: 0 30px;
+	}
+}
+
+
+.height_up {
+	line-height: 1.3em;
+}
+
+.set {
+	margin-bottom: 1em;
+}
+
+/* main icon in details page */
+.network { 
+	.top .img {
+	background: url("../images/network-green102x116.png") no-repeat center center;
+	width: 102px;
+	height: 116px;
+	display: inline-block;
+	text-indent: -2000px;
+	overflow: hidden;
+	background-size: 100%;
+	}
+	.close-font{
+		position: absolute;
+		right: 0.8em;
+		top: 2em;
+		font-size: 2em;
+		color: #b3b3b3;
+	}
+}
+
+
+/* for scroll bar */
+.networks .items-list {
+	.img {
+		background: url("../images/network-green102x116.png") no-repeat center center;
+		height: 58px;
+		width: 51px;
+		display: inline-block;
+		text-indent: -2000px;
+		overflow: hidden;
+		background-size: 80%;
+	}
+	
+	/* for network list */
+	.container
+	{
+		.img {
+			background-size: 100%
+		}
+
+		.options .wrap a {
+			width: 50%;
+		}
+	}
+}
+
+
+
+/* detailed pages: about the gaps that separate the area with the big img and the buttons from the rest of the page */ 
+
+
+.details .top .actions ul{
+	padding: 1em 1em 0;
+	margin-bottom: 0;
+} 
+
+
+
+.content {
+	position: relative;
+	.overlay-modal {
+		position: absolute;
+		left:0;
+		top:0;
+		width: 100%;
+		height: 100%;
+		z-index:98;
+		background:  $secondary-color;
+	}
+
+	.overlay-div {
+		position:absolute; top:20%; left:25%; width:50%;
+		padding:25px;
+		background:white;
+		display:none; z-index:100;
+		
+		.buttons {
+			margin-bottom:0;
+			
+			a {
+				margin-right:20px;
+			}
+		}
+	}
+}
+
+
+
+.btn4 {
+  color: white;
+  border-color:  $secondary-color;
+  background:  $secondary-color;
+  &:hover, .current {
+  	color: $secondary-color;
+  	border-color:  $secondary-color;
+  	background: white;
+  }
+}
+
+
+
+
+.overlay .lt-sidebar.nav ul li:hover  {
+	background-color: transparent;
+}
+
+.lt-sidebar.nav {
+	font-size: 1em
+}
+
+.overlay {
+	.lt-sidebar.nav  {
+	overflow: auto;
+	}
+	/* styles for close icons (created with fontIcon "snf-font") */
+	.close_char {
+		background: none;
+		text-indent: 0;
+		font-size: 1.8em; /* for the the character e (for d we can put 2em) */
+		color: white;
+	}
+}
+
+
+/* create network styles */
+
+.create-network {
+	color: white;
+	.check {
+		color: white;
+	}
+	p {
+		font-size: 0.8em;
+		font-style: italic;
+		margin: 5px 0 0;
+		width: 545px;
+	}
+
+	li {
+		list-style: none outside none;
+	}
+	.custom_checkbox {
+		font-size: 1.3em;
+	}
+}
+
+.subnet_options {
+	margin: 0;
+	li {
+		margin-bottom: 6px;
+		padding-left: 155px;
+	}
+}
+
+
+
+
+.network_options {
+	position: relative;
+	width: 350px;
+	min-height: 285px;
+	
+	.check {
+		position: absolute;
+		right: 0;
+	}
+	
+	li {
+		display: block;
+		margin-bottom: 13px;
+	
+		form {
+			margin: 0;
+			
+			input {
+				position: absolute;
+				display: inline-block;
+				right: 0;
+				width: 200px;
+				height: 20px;
+				font-size: 0.9em;
+				
+				&.hidden {
+					display: none;
+				}
+			}
+		}
+		&.manual form input {
+			right: -160px;
+			width: 150px;
+		}
+	}
+}
+
+
+span.sub_title {
+	position: absolute;
+}
+
+
+/* pithos: list of uploading files */
+
+.upload-widget {
+	.files {
+		color: white;
+		
+		li {
+			padding: 10px 120px;
+			border: none;
+			position: relative;
+			
+			.name-col {
+				width: 34%;
+			}
+
+			.size-col {
+				text-align: left;
+				float: none;
+			}
+
+			.dz-success-mark {
+				margin-left:10px;
+			}
+
+			.dz-error-mark {
+				display: none;
+			}
+			.cancel-col {
+				width: 100px;
+				position: absolute;
+				right: 50px;
+				top: 9px;
+				
+				.cancel span {
+					display: block;
+					text-align: right;
+				}
+			}
+		}
+		div {
+			display: inline-block;
+		}
+		.progress-bar {
+			position: static;
+			padding: 0;
+			width: 25%;
+			border: none;
+			background-color: transparent;
+			
+			.progress-wrap {
+				width: 100%;
+				margin: 0;
+			
+				.progress {
+					display: block;
+					margin: 0;
+					border: 2px solid white;
+					padding: 0;
+					background-color:  $secondary-color;
+				
+					.meter {
+						background-color: white;
+					}
+				}
+			}
 		}
 	}
 }
\ No newline at end of file
