@import "variables";
@import "blocky";
@import "animate_css";
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
	margin: 0;
	font-family: 'Open Sans', sans-serif;
}
nav {
	width: 100%;
	i.right {
		margin-left: 0!important;
	}
}
.container {
	width: 1200px!important;
}
.main {
	background: url('../../images/picjumbo.png') no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 900px!important;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 0;
	padding-top: 605px;
	.start {
		margin-left: auto!important;
	    margin-right: auto!important;
		height: 175px;
		width: 280px;
		overflow: hidden;
		border-top: solid 3px black;
		border-bottom: solid 3px black;
		padding-top: 15px;
		hr {
			height: 3px;
			border: 0;
			background-color: black;
			margin-top: 18px;
		}
		.btn-align {
			margin-left: 43px;
			.btn {
				padding-left: 40px!important;
			}
		}
	}
}

.nav-is-visible {
	top: 0;
}

.nav-is-hide {
	top: -70px;
}

.tool-bar {
	background-color: @cyan400;
	padding-top: 9px;
	position: fixed;
	left: 0;
	z-index: 500;
	width: 100%;
	height: 65px;
	select {
		border: solid 1px @grey500!important;
		border-radius: 6px;
		outline: none;
	    background: @grey50;
	    -webkit-appearance: none;
		-moz-appearance: none;
		apperance: none;
		text-indent: 0.01px;
		text-overflow: '';
		padding-right: 20px;
		background: url('../../images/icons/dropDown.png') no-repeat right #fff;
		cursor: pointer;
	}
	.first-label {
		margin-right: 50px;
	}
	.compile-btn {
		height: 45px;
		margin-left: 15px;
	}
	.tab-btn {
		background-color: @amber500;
		color: @grey900;
 	}
 	.current-tab {
		border-right: 6px solid @orange500;
 	}
 	.switch {
		margin-top: 10px;
 		label {
	 		color: white;
	 		font-size: 15px;
 		}
 		.lever {
 			background-color: @grey600!important;
 		}
 		.lever::after {
 			background-color: @amber500!important;
 		}
 	}
}
.genuino {
	height: 835px;
	overflow: hidden;
	border-bottom: solid 1px @grey500;
}
.overlay{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 840px;
	z-index: 600;
	background-color: rgba(0,0,0,0.4); /*dim the background*/
}
.alert {
	position: relative;
	width: 350px!important;
	height: auto;
	left: 450px;
	top: 120px;
	z-index: 1000;
	.icon-close {
		position: relative;
		padding: 2px;
		padding-right: 1px;
		left: 15px;
		top: -3px;
		color: @grey700;
		cursor: pointer;
		z-index: 1100;
		background-color: @grey50;
		border-radius: 100%;
	}
	.card-panel {
		padding-bottom: 10px!important;
		border-radius: 8px;
		.preloader-wrapper {
			margin-top: 5px;
		}
		.icon {
			margin-top: 5px;
			margin-left: 13px;
			font-size: 56px;
		}
		.icon-done {
			color: @blue500;
			margin-left: 0!important;
		}
		.icon-error {
			color: @red600;
			margin-left: 0!important;
		}
		.text {
			font-size: 22px;
		}
	}
}
.demo-msg {
	position: relative;
	width: 350px!important;
	height: auto;
	left: 250px;
	top: -520px;
	z-index: 1100;
	.card-content {
		color: @grey900;
		.card-title {
			color: @grey900;
		}
	}
	.card-action {
		a {
			color: @grey700;
		}
	}
}
.tutorial {
	position: relative;
	width: 350px;
	height: auto;
	z-index: 1000;
	.arrow-left, .arrow-left-codes {
        content: '';
		position: absolute;
		width: 0;
		height: 0;
		left: -13px;
		top: 83px;
		border: 25px solid;
		-moz-border-color: @light-blue300 transparent transparent transparent;
		border-color: @light-blue300 transparent transparent transparent;
		border-top-width: 25px;
		border-left-width: 33px;
		z-index: 800;
    }
    .arrow-left-codes {
		top: 8px;
    }
    .arrow-top {
        content: '';
		position: absolute;
		width: 0;
		height: 0;
		left: 281px;
		top: 60px;
		border: 25px solid;
		-moz-border-color: transparent @light-blue300 transparent transparent;
		border-color: transparent @light-blue300 transparent transparent;
		border-top-width: 25px;
		border-left-width: 33px;
		z-index: 800;
    }
	.card-action {
		padding-right: 5px;
	}
	a {
		color: @grey700!important;
		margin-right: 0!important;
	}
	.next {
		color: white!important;
		font-size: 38px;
		margin-top: -7px;
	}
	.arrow-2 {
		position: relative;
		top: -330px;
		left: -125px;
		z-index: 800;
	}
	.arrow-3 {
		position: relative;
		top: -340px;
		left: -150px;
		z-index: 800;
	}
}

.tutorial-position-1 {
	top: -915px;
	left: -70px;
}
.tutorial-position-2 {
	top: -700px;
	left: -70px;
}
.tutorial-position-3 {
	top: -760px;
	left: 150px;
}
.tutorial-position-4 {
	top: -860px;
	left: 380px;
}
.tutorial-position-5 {
	top: -600px;
	left: -250px;
}
.tutorial-position-6 {
	top: -710px;
	left: 430px;
}
.tutorial-position-7 {
	top: -500px;
	left: 0;
}

.components {
	height: 840px;
	background: -webkit-linear-gradient(right, white 80%, @amber500 20%); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left, white 80%, @amber500 20%); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left, white 80%, @amber500 20%); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to left, white 80%, @amber500 20%); /* Standard syntax (must be last) */
    overflow: hidden;
}

.codes {
	margin-top: 65px;
	background-color: white;
}
.component-list {
	height: 775px;
	background-color: @amber500;
	padding: 0 10px!important;
	padding-top: 10px!important;
	overflow-y: hidden;
	box-shadow: 5px 0 6px @grey300;
	.components-box {
 		position: relative;
 		top: -10px;
 		height: 703px;
 		overflow-y: scroll;
 	}
	.fixed {
		position: fixed;
	}
	.dropdown-button {
		width: 263px;
		margin-bottom: 20px;
		z-index: 1000;
	}
	.component {
		border: solid 3px;
		border-radius: 20px;
		margin-bottom: 10px;
		border-color: @grey700;
		background-color: @grey50;
		padding-left: 10px;
		padding-right: 10px;
		cursor: move;
		.row {
			margin-bottom: 0;
			img {
				width: 100%;
			}
		}
		.sensor-image {
			margin-top: 8px;
			margin-bottom: 3px;
			display: inline-block;
			width: 100px;
			height: 100px;
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center;
			overflow: hidden;
		}
		.component-name {
			width: 100%;
			height: 54px;
			overflow: hidden;
			margin-bottom: 5px;
		}
		.squre {
			width: 117px;
			height: 10px;
		}
		.io {
			display: inline-block;
		}
	}
}
.tips-icon, .nav-icon, .tool-icon, .board-icon {
	position: fixed;
	top: 90px;
	display: inline-block;
	cursor: pointer;
	border: solid 1px @grey500;
	padding-top: 6px;
	padding-left: 5px;
	padding-right: 5px;
	background-color: white;
	border-radius: 6px;
	margin-left: 852px;
	i {
		font-size: 28px;
		color: @grey600;
	}
}
.nav-icon {
	top: 144px;
}
.tips-icon {
	top: 198px;
}
.board-icon {
	top: 254px;
}
.component-tips {
	position: fixed;
	top: 553px;
	.content {
		margin: 30px 0 0 7px!important;
		height: 105px;
		width: 885px;
		padding: 6px 15px;
		border-radius: 6px;
		border: solid 1px @grey500;
		background-color: rgba(0, 188, 212, 0.8);
		color: white;
		a {
			color: white;
			margin-left: 15px;
			text-decoration: underline;
		}
		.icon-close {
			position: relative;
			padding: 2px;
			padding-right: 1px;
			left: 25px;
			top: -20px;
			color: white;
			cursor: pointer;
			background-color: rgba(0, 188, 212, 0.8);;
			border-radius: 100%;
		}
		.last-btn {
			margin-right: 10px;
		}
	}
}
.base-shield {
	margin-top: 10px!important;
	height: 840px;
	width: 960px;
	overflow: hidden;
	.panel-left {
		margin-left: 11px!important;
	}
	.panel-bottom {
		margin-bottom: 20px!important;
	}
	.remove-margin-bottom {
		margin-bottom: 0!important;
	}
	.arduino {
		margin-right: 40px!important;
		width: 380px!important;
		display: block;
		img {
			width: inherit;
		}
	}
	.item-width {
		width: 210px!important;
	}
	.item {
		height: 108px;
		width: 210px!important;
		margin-right: 12px;
		p {
			margin-top: 3px;
			margin-bottom: 0;
			font-size: 14px;
		}
		.pin-name {
			margin-top: 0;
			text-align: center;
			color: @blueGrey500;
			line-height: 45px;
		}
		.item-name {
			margin-top: 0;
			margin-left: 5px;
			padding: 0 4px;
			width: 96%;
			height: 36px;
			overflow: hidden;
			font-size: 12px!important;
			text-align: center;
			vertical-align: middle!important;
			border: solid 1px @grey700;
			color: @grey700;
			border-radius: 6px;
		}
		.item-value {
			margin-top: 0;
			width: 95%;
			height: 53px;
			font-size: 9px;
			line-height: 17px;
			overflow: hidden;
		}
		.drop {
			margin-top: -15px;
			text-align: center;
			color: @blueGrey100;
		}
		.done {
			margin-top: -15px;
			text-align: center;
			color: @grey700;
		}
	}
	.border-red {
		border-bottom: solid 3px @red600;
	}
	.border-green {
		border-bottom: solid 3px @light-green500;
	}
	.border-blue {
		border-bottom: solid 3px @light-blue400;
	}
	.border-yellow {
		border-bottom: solid 3px @amber500;
	}
	.drop-component {
		img {
			width: 60%;
			margin-top: 3px;
			margin-left: 28px; 
		}
		.remove-btn {
			color: @orange500;
		}
		.show-connect {
			.square-top, .square-middle, .square-bottom {
				position: relative;
				height: 10px;
				width: 10px;
				display: block;
			    overflow: hidden;
				z-index: 100;
				content: '';
			}
			.A0-top {
				top: 246px;
				left: 265px;
			}
			.A0-middle {
				top: 251px;
				left: 265px;
			}
			.A0-bottom {
				top: 256px;
				left: 265px;
			}
			.A1-top {
				top: 183px;
				left: 43px;
			}
			.A1-middle {
				top: 188px;
				left: 43px;
			}
			.A1-bottom {
				top: 193px;
				left: 43px;
			}
			.A2-top {
				top: 121px;
				left: -180px;
			}
			.A2-middle {
				top: 126px;
				left: -180px;
			}
			.A2-bottom {
				top: 131px;
				left: -180px;
			}
			.A3-top {
				top: 59px;
				left: -401px;
			}
			.A3-middle {
				top: 64px;
				left: -401px;
			}
			.A3-bottom {
				top: 69px;
				left: -401px;
			}
			.D2-top {
				top: -41px;
				left: 466px;
			}
			.D2-middle {
				top: -36px;
				left: 466px;
			}
			.D2-bottom {
				top: -31px;
				left: 466px;
			}
			.D3-top {
				top: -169px;
				left: 406px;
			}
			.D3-middle {
				top: -164px;
				left: 406px;
			}
			.D3-bottom {
				top: -159px;
				left: 406px;
			}
			.D4-top {
				top: -297px;
				left: 346px;
			}
			.D4-middle {
				top: -292px;
				left: 346px;
			}
			.D4-bottom {
				top: -287px;
				left: 346px;
			}
			.D5-top {
				top: -351px;
				left: 526px;
			}
			.D5-middle {
				top: -346px;
				left: 526px;
			}
			.D5-bottom {
				top: -341px;
				left: 526px;
			}
			.D6-top {
				top: -479px;
				left: 466px;
			}
			.D6-middle {
				top: -474px;
				left: 466px;
			}
			.D6-bottom {
				top: -469px;
				left: 466px;
			}
			.D7-top {
				top: -351px;
				left: 184px;
			}
			.D7-middle {
				top: -346px;
				left: 184px;
			}
			.D7-bottom {
				top: -341px;
				left: 184px;
			}
			.D8-top {
				top: -479px;
				left: 124px;
			}
			.D8-middle {
				top: -474px;
				left: 124px;
			}
			.D8-bottom {
				top: -469px;
				left: 124px;
			}
			.UART-top {
				top: -427px;
				left: 82px;
			}
			.UART-middle {
				top: -422px;
				left: 82px;
			}
			.UART-bottom {
				top: -417px;
				left: 82px;
			}
			.I2C1-top {
				top: 110px;
				left: -139px;
			}
			.I2C1-middle {
				top: 115px;
				left: -139px;
			}
			.I2C1-bottom {
				top: 120px;
				left: -139px;
			}
			.I2C2-top {
				top: -18px;
				left: -199px;
			}
			.I2C2-middle {
				top: -13px;
				left: -199px;
			}
			.I2C2-bottom {
				top: -8px;
				left: -199px;
			}
			.I2C3-top {
				top: -147px;
				left: -259px;
			}
			.I2C3-middle {
				top: -142px;
				left: -259px;
			}
			.I2C3-bottom {
				top: -137px;
				left: -259px;
			}
			.I2C4-top {
				top: -276px;
				left: -320px;
			}
			.I2C4-middle {
				top: -271px;
				left: -320px;
			}
			.I2C4-bottom {
				top: -266px;
				left: -320px;
			}
		}
	}
	.btn-padding {
		padding-top: 25px;
		padding-left: 45px;
	}
}
.footer {
	padding-top: 10px;
	padding-bottom: 5px;
	font-size: 12px;
}
