@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 { margin: 25px; .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; border: #CCC 1px solid; @include rounded(3); width: 300px; } } .action-button { input[type="button"]{ width: 120px; font-size: 24px; padding: 4px; background-color: #DDD; border: #CCC 1px solid; @include rounded(3); margin-left: 5px; } } } } } .forms { display: none; } }