Synnefo

// Global Foundation Settings

@import "settings";

// Comment out this import if you are customizing you imports below

@import "foundation";

// Import specific parts of Foundation by commenting the import "foundation"

// and uncommenting what you want below. You must uncomment the following if customizing

// @import "foundation/foundation-global"; // *always required

// @import "foundation/components/global"; // *always required

// @import "foundation/components/grid";

// @import "foundation/components/visibility";

// @import "foundation/components/block-grid";

// @import "foundation/components/type";

// @import "foundation/components/buttons";

// @import "foundation/components/forms"; // *requires components/buttons

// @import "foundation/components/custom-forms"; // *requires components/buttons, components/forms

// @import "foundation/components/button-groups"; // *requires components/buttons

// @import "foundation/components/dropdown-buttons"; // *requires components/buttons

// @import "foundation/components/split-buttons"; // *requires components/buttons

// @import "foundation/components/flex-video";

// @import "foundation/components/section";

// @import "foundation/components/top-bar";  // *requires components/grid

// @import "foundation/components/orbit";

// @import "foundation/components/reveal";

// @import "foundation/components/joyride";

// @import "foundation/components/clearing";

// @import "foundation/components/alert-boxes";

// @import "foundation/components/breadcrumbs";

// @import "foundation/components/keystrokes";

// @import "foundation/components/labels";

// @import "foundation/components/inline-lists";

// @import "foundation/components/pagination";

// @import "foundation/components/panels";

// @import "foundation/components/pricing-tables";

// @import "foundation/components/progress-bars";

// @import "foundation/components/side-nav";

// @import "foundation/components/sub-nav";

// @import "foundation/components/switch";

// @import "foundation/components/magellan";

// @import "foundation/components/tables";

// @import "foundation/components/thumbs";

// @import "foundation/components/tooltips";

// @import "foundation/components/dropdown";

.clearfix:before,

.clearfix:after									{ content:" "; display:block; height:0; visibility:hidden; } /* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/ */

.clearfix:after									{ clear:both; }

// Set margin and padding to zero 

@mixin marginPaddingZero() {

	margin: 0;

	padding: 0;

}

// Establishes the prequisits for sprite with background-image.

// Background-position for normal and hover states need to 

// be declared separetely

@mixin sprite($image, $width, $height){

	background:url($image) no-repeat center center;

	width: $width;

	height:$height;

	display: inline-block;

	text-indent: -2000px;

	overflow: hidden;

}

// Transition for css properties

@mixin transition($transition-property, $transition-time, $method) {

	-webkit-transition: $transition-property $transition-time $method;

	-moz-transition: $transition-property $transition-time $method;

	-ms-transition: $transition-property $transition-time $method;

	-o-transition: $transition-property $transition-time $method;

	transition: $transition-property $transition-time $method;

}

// Box-shadow property. For no box-shadow use box-shadow(none)

@mixin box-shadow($shadows...) {

  -moz-box-shadow: $shadows;

  -webkit-box-shadow: $shadows;

  box-shadow: $shadows;

}

// border grey, on hover pink

.btn1 {

	border:1px solid $primary-color;

	color:$primary-color;

	display:inline-block;

	padding:10px 20px;

	line-height:1em;

	text-align:center;

	&:hover,

	&.current {

		border-color:$secondary-color;

		background:$secondary-color;

		color:$white;

	}

	&.current {

		cursor:default;

	}

}

// white background, on hover transparent

.btn2 {

	@extend .btn1;

	color:$secondary-color;

	background:$white;

	border-color:$secondary-color;

	&:hover, 

	&.current {

		background:transparent;

		border-color:$white;

	}

}

// reverse btn2

.btn3 {

	@extend .btn1;

	color:$white; 

	border-color:$white;

	&:hover, 

	&.current {

		color:$secondary-color;

		background:$white;

		border-color:$white;

	}

}

// reverse btn2

.btn4 {

	@extend .btn1;

	color:$white; 

	border-color:$white;

	background:$success-color;

	&:hover, 

	&.current {

		border-color:$white;

		background:darken($success-color,15%);

	}

}

a:hover {

	@include transition(background, 300ms, ease-out);

}

.dummy-navigation {

	display:none;

	position: fixed;

	right:0;

	top:100px;

	padding:20px;

	background:#cc0;

	z-index:100;

	line-height:160%;

	a {

		color:$black;

		&:hover { color:$white }

		&.open { color:$white;}

		&.close {

			float:right;

			font-weight:bold;

			font-size:20px;

		}

	}

}

.ours {

	padding:8px 15px;

	color:$white;

	font-size:20px;

	font-weight:bold;

	background:#cc0;

	display:none;

	position: absolute;

	&.questions { background:orange;}

	&.problems { background:red;}

	&.suggestions { background:#3EC9FF;}

}

.row-full {

	max-width:$row-full-width;

	margin:0 auto;

}

.lt-sidebar {

	width:250px;

	float:left;

	&.nav {

		margin-top:0;

	}

	&+.main {

		overflow:hidden;

	}

}

.main {

	padding:43px 40px;

}

body.with-overlay {

	background:$secondary-color;

}

.header {

	position:relative;

	padding:$header-padding-vertical $header-padding-horizontal;

	border-bottom:1px solid $primary-color;

	background:$white;

	.logo {

		text-align: center;

		img {

			max-height: 30px;			

		}

	}

	.actions {

		text-align:center;

		height:45px;

		line-height:45px;

		position:relative;

		margin:2*$header-padding-vertical 0 $header-padding-vertical;

		.main-actions {

			position:relative;

			top:86px;

			margin:0 -40px;

			border-bottom:1px solid lighten($primary-color,20%);

			z-index: 1;

		}

		ul {

			margin:0;

			li {

				list-style: none outside none;

				display: inline-block;

				margin:0 5px;

				a {

					display: block;

					color:lighten($primary-color,30%);

					width:100%;

					padding:8px 20px;

					border:1px solid transparent;

					&.active {

						color:$primary-color;

						&:hover {

							color:$secondary-color;

							cursor: pointer;

						}

					}

					&:hover {

						cursor:default;

					}

				}

			}

		}

	}

	.new-btn {

		position: absolute;

		left:0;

		bottom:0;

		a {

			@extend .btn1;

			span {

				font-size:emCalc(20px);

			}

		}

	}

}

.login {

	position:absolute;

	right:$header-padding-horizontal;

	top:$header-padding-vertical;

}

.top-nav {

	position:absolute;

	left:$header-padding-horizontal;

	top:$header-padding-vertical;

	ul {

		@include marginPaddingZero();

		li {

			display: inline-block;

			margin-right:15px;

			a {

				padding-bottom:5px;

			}

		}

	}

}

// info styling

.top-info {

	padding:50px 100px;

	position: relative;

	z-index:10;

	display:none;

	.close {

		position: absolute;

		right:$header-padding-horizontal;

		top:50px;

		@include sprite('../images/info-close.png', 31px, 30px);

	}

}

.info.error {

	background:$error-color;

	color:$white;

}

.info.alert {

	background:$alert-color;

	color:$white;

}

.info.warning {

	background:$primary-color;

	color:$white;

}

.info.success {

	background:$success-color;

	color:$white;

}

.entities {

	padding-top:25px;

}

.items-list {

	li {

		text-align:center;

		padding:20px;

		list-style:none;

		.add-new {

			a {

				margin:0 20px;

				display: block;

				font-weight: bold;

				height:190px;

				padding:65px 30px 15px;

				border:1px dashed $primary-color;

				&:hover {

					border-color:$secondary-color;

					color:$secondary-color;

				}

			}			

		}

		.img-wrap {

			height: 78px;

		}

		.img {

			margin-bottom: 20px;

			position: relative;

			height:58px;

		}

		.container {

			&.set-bg {	background:lighten($primary-color,38%); }

			&.set-border {	border-color:$secondary-color; }

			border:1px solid transparent;

			margin: 0 20px;

			padding:25px 0;

			position: relative;

			.options {

				width:100%;

				text-align:center;	

				position: absolute;

				top:-3px;

				left:0;

				display: none;

				.wrap {

					height:100%;

					padding:25px 25px 0;

					text-align: left;

					a {

						font-size:emCalc(27px);

						display: inline-block;

						color:$primary-color;

						line-height: 1em;

						margin-bottom:10px;

						font-weight: bold;

						&:hover {

							color: $secondary-color;

						}

					}

				}

			}

		}

		.check {

			position:absolute;

			right:10px;

			top:5px;

			color:lighten($primary-color,35%);

			font-weight: bold;

			font-size:emCalc(27px);

			cursor: pointer;

			z-index: 10;

			span { position:relative; z-index:10;}

			&.active {

				color:$secondary-color;

			}

		}

		.info-box {			

			position:absolute;

			left:20px;

			top:60px;

			background:$primary-color;

			width:emCalc(300px);

			padding:20px;

			color:white;

			z-index:20;

			display: none;

			h2 {

				font-size:1em;

				color:white;

			}

			dl {

				font-size:1em;

				dt {

					float:left;

					width:30%;

				}

				dd {

					overflow:hidden;

				}

			}

		}

		.visible-info {

			margin: 0 25px;

			position:relative;

			color:$primary-color;

			overflow: hidden;

			span {

				&.title {

					white-space: nowrap;

				}

				display: block;

				position: relative;

				em {

					font-style:normal;

					position: relative;

				}

			}

		}

	}

}

.lt-sidebar {

	margin-top:43px;

	overflow:scroll;

	height:300px;

	font-size:emCalc(12px);

	.items-list {

		padding:0;

	}

	.items-list li .img, 

	.items-list li .os {

		background-size:80%;

	}

	.items-list li .img .os {

		top:10px;

	}

	li:hover {

		background:lighten($primary-color,35%);

	}

	li.current {

		background:lighten($primary-color,30%);

		cursor: pointer;

	}

	.jspDrag {

		background-color:$primary-color;

	}

	.jspVerticalBar {

		width:10px;

		right:4px;

	}

	.jspTrack {

		background:$white;

		border:1px solid $primary-color;

		border-top:1px solid lighten($primary-color,20%);

	}

}

.vms .items-list {

	.img {

			@include sprite('../images/vm-on.png', 56px, 58px);

			&.stopped {

				background-image:url('../images/vm-stopped.png');

			}

			.os {

				@include sprite('../images/os-unknown.png', 22px, 22px);

				position: absolute;

				top:8px;

				left:18px;

				&.windows { background-image:url('../images/os-windows.png'); }

				&.kubuntu { background-image:url('../images/os-kubuntu.png'); }

				&.fedora { background-image:url('../images/os-fedora.png'); }

			}

		}

}

.vm {

	.top {

		.img {

			@include sprite('../images/vm-on.png', 112px, 116px);

		}

		&.stopped {

			background-image:url('../images/vm-stopped.png');

		}

		.os {

			@include sprite('../images/os-unknown.png', 22px, 22px);

			position: absolute;

			background-size:100%;

			width:44px;

			height:44px;

			left:36px;

			top:16px;

			&.windows { background-image:url('../images/os-windows.png'); }

			&.kubuntu { background-image:url('../images/os-kubuntu.png'); }

			&.fedora { background-image:url('../images/os-fedora.png'); }

		}

	}

}

.details {

	position:relative;

	.top {

		padding:100px $header-padding-horizontal;

		text-align: center;

		.img {

			background-size:100%;

			margin-bottom: 20px;

			position: relative;

		}

		.actions {

			ul {

				padding:1em;

				text-align:center;

				li {

					list-style: none outside none;

					display: inline-block;

					margin:0 10px;

					min-width: 112px;

					a {

						@extend .btn1;

					}

				}

			}

		}

	}

	.info {

		dl {

			margin:0;

			dt {

				display: inline-block;

				width:25%;

			}

			dd {

				width:74%;

				display: inline-block;

			}

		}

	}

	.close {

		position: absolute;

		right:$header-padding-horizontal;

		top:$header-padding-horizontal+emCalc(43px);

		span {

			font-size:emCalc(32px);

		}	

		&:hover {

			color:$secondary-color;

		}

	}

}

.border-bottom-style1 {

	padding-bottom:20px;

	margin-bottom:20px;

	border-bottom:1px dashed $primary-color;

}

.overlay {

	background:$secondary-color;

	position: relative;

	z-index:10;

	.lt-sidebar {

		border-right:1px solid $white;

		ul {

			li {

				list-style:none outside none;

				a {

					color:$white;

					span { float:right; display:none;}

					&:hover,

					&.current {

						text-decoration: none;

						span { 

							display:inline;

						}

					}

				}

			}

		}

	}

	.lt-sidebar, 

	.main {

		padding:100px $header-padding-horizontal;

		position:relative;

	}

	.navigation {

		.rt {

			float:right;

		}

	}

	.close {

		position: absolute;

		right:$header-padding-horizontal;

		top:50px;

		@include sprite('../images/info-close.png', 31px, 30px);

	}

}

.create-vm {

	.select-os {

		li {

			width:23%;

			padding:20px;

			list-style:none outside none;

			display: inline-block;

			float: left;

			height: 200px;

			margin:0 10px 10px 0;

			&:hover,

			&.selected {

				background:$white;

				h2, p, a {

					color:$secondary-color;

				}

			}

			a {

				color:$white;

			}

			.os {

				@include sprite('../images/os-unknown.png', 30px, 30px);

				background-size:100%;

				margin-bottom:2em;

				&.windows { background-image:url('../images/os-windows.png'); }

				&.kubuntu { background-image:url('../images/os-kubuntu.png'); }

				&.fedora { background-image:url('../images/os-fedora.png'); }

			}

			h2 {

				font-size:emCalc(16px);

				font-weight:normal;

				color:$white;

			}

			.details {

				font-weight:bold;

				font-size:emCalc(14px);

			}

		}

	}

	.select-flavor {

		dl {

			color:$white;

			font-size:emCalc(20px);

			margin-bottom:10px;

			dd {

				width:23%;

				display: inline-block;

			}

			dt {

				width:70%;

				display: inline-block;

				font-weight: normal;

				span {

					@extend .btn3;

					min-width: 90px;

					margin:0 10px;

					&:first-child {

						margin-left:0;

					}

				}

			}

		}

	}

}

#vm-connect {

	.info {

		font-style:italic;

		font-size:emCalc(13px);

		color: lighten($primary-color,5%);

	}

	.ssh {

		text-align: center;

		span {

			padding: 10px 30px;

			background:$secondary-color;

			color:$white;

		}

	}

}

.reveal-modal {

	h3 {

		font-size:1em;

	}

	a { 

		color: $secondary-color;

		&:hover {

			text-decoration: underline;

		}

		&.close-reveal-modal:hover {

			text-decoration: none;

			color:$secondary-color;

		}

	}	

}

// custom modal with opaque overlay

.reveal-custom {

	position: absolute;

	top:100px;

	left:25%;

	z-index:99;

	background:yellow;

	width:50%;

	display:none;

}

.details dl {

	.editable {

		position: relative;

		.input-txt {

			display: inline-block;

			margin-right: 6px;

		}

		.editbuttons {

			display: inline-block;

			a {

				margin-right: 6px;

				&.save, 

				&.cancel { 

				}

				&:hover {

				}

			}

		}

		input[type="text"] {

			position:relative;

			height: 25px;

			width:298px;

			padding:0 10px;

			font-size:inherit;	

			margin:0;	

			left:-11px;

			top:-1px;

		}

	}

}

.editable {

	.editbuttons {		

		a {

			color: $secondary-color;

			&.save, 

			&.cancel { display: none; }

			&:hover {

				color:$primary-color;

			}

		}

	}

	input[type="text"] {

		display: none;

	}

}

.storage {

	padding:45px 0;

	position:relative;

	.lt-sidebar {

		font-size: 1em;

		padding:0 20px 40px 40px;

		.sidenav {

			font-size: inherit;

		}

		ul {

			list-style: none outside none;

			li {

				padding:5px 0;

				&:hover {

					background: transparent;

					&>a {

						color:$secondary-color;

						&+span {

							display: inline;

						}

					}

				}

				span {

					float:right;

					color:$secondary-color;

					display: none;

				}

			}

		}

	}

	.files {

		margin:1em 0;

		padding:0;

		list-style: none outside none;

		li {

			list-style:none outside none;

			clear: left;

			padding:10px 20px;

			border:1px solid transparent;

			@extend .clearfix;

			text-align: left;

			font-weight: normal;

			.name-col {

				float:left;

				width:35%;

				padding-left:50px;

				&.folder { background:url(../images/icon-folder.png) no-repeat left center; }

				&.txt { background:url(../images/icon-txt.png) no-repeat left center; }

				&.pdf { background:url(../images/icon-pdf.png) no-repeat left center; }

				&.image { background:url(../images/icon-image.png) no-repeat left center; }

				font-weight: normal;

			}

			.size-col {

				float:left;

				width:10%;

			}

			.date-col {

				float:left;

				width:20%;

			}

			.actions-col {

				float:left;

				width:30%;

				visibility: hidden;

				a {

					color: $secondary-color;

					margin-right: 10px;

					&:hover { color:$primary-color;}

				}

			}

			&:hover {

				border-color:$secondary-color;

				.actions-col { visibility:visible;}

			}

			&.titles {

				color:$primary-color;

				.name-col { padding-left:0; }

				&:hover {

					border-color:transparent;

				}

			}

		}

	}

	.breadcrumbs {

		li:first-child {

			font-weight:bold;

			a {

				color:$black;

				&:hover {

					color:$secondary-color;

				}

			}

		}

		a:hover {

			color: $secondary-color;

		}

	}

}

.progress-bar {

	position: fixed;

	bottom:0;

	left:0;

	border-top:1px solid $secondary-color;

	width:100%;

	background:#fff;

	padding:20px 0 20px 310px;

	color:$primary-color;

	span.counter {

		display: inline-block;

		margin-right:20px;

		float:left;

	}

	a:hover {

		color:$secondary-color;

	}

	div.progress-wrap {

		display:inline-block;

		float:left;

		width:40%;

		margin-right:60px;

		.progress {

			position: relative;

			top:2px;

		}

	}

	span.more {

		display: inline-block;

	}

}

.overlay-wrapper {

	position: relative;