@import "rounded";

.settings-container {
	margin: 25px;
	
	.tabs {
		height: 26px;
		
		> div {
			float: left;
			height: 25px;
		}
		
		.left-space {
			width: 15px;
		}
		
		.middle-space {
			width: 8px;
		}
		
		.tab {
			position: relative;
			border-left: #DDD 1px solid;
			border-top: #DDD 1px solid;
			border-right: #DDD 1px solid;
			padding: 0 8px;
			line-height: 24px;
			margin-top: 2px;
			@include rounded(5);
			background-color: #FAFAFA;
			cursor: pointer;
			
			&.active {
				z-index: 200;
				background-color: #FFF;
				border-left: #CCC 1px solid;
				border-top: #CCC 1px solid;
				border-right: #CCC 1px solid;
				border-bottom: #FFF 6px solid;
				margin-top: -2px;
				line-height: 29px;
				font-weight: bold;
				cursor: default;
			}
		}
	}
	
	.form-container {
		position: relative;
		z-index: 100;
		height: 500px;
		border-top: #CCC 1px solid;
		
		.form {
			position: absolute;
			top: 25px;
			left: 0;
			width: 100%;
			
			.field {
				height: 40px;
				margin-bottom: 10px;
				clear: both;
				
				.label{
					float: left;
					font-size: 24px;
					line-height: 32px;
					width: 140px;
					padding: 3px 6px;
					@include rounded(3);
					background-color: #EAEAEA;
					margin-right: -10px;
				}
				
				.value {
					float: left;
					
					input[type="text"]{
						font-size: 24px;
						padding: 4px;
						background-color: #ffffff;
						color: #202020;
						border: #CCC 1px solid;
						@include rounded(3);
						width: 300px;
					}
					
					select {
						font-size: 24px;
						background-color: #ffffff;
						color: #202020;
						border: #CCC 1px solid;
						width: 310px;
						height: 38px;
					}
				}
				
				.action-button {
					float: left;
					margin: 6px 0 0 5px;
				}
				
				.saved {
					float: left;
				}
			}
		}
		
		.logout {
			position: absolute;
			top: 25px;
			right: 0;
		}
	}
	
	.forms {
		display: none;
	}
}