#modal{ top: 0; position: absolute; width: 100%; height: 100%; z-index: 999; p,dl { margin:0; padding:5px; } } #shadow{ position: fixed; height: 100%; width: 100%; background-color: rgba(0,0,0,0.6); } #modal-container{ min-width: 500px; position: fixed; left:50%; top:100px; margin-left: -270px; margin-top: 0; min-height: 50px; background-color: #fff; border-radius: 4px; padding: 20px; box-shadow: 0 0 30px rgba(0,0,0,0.4); border: 1px solid #333; max-height: 60%; overflow: auto; .container{ overflow: auto; border-radius: 2px; border: 1px solid #888; background-color: #ccc; } ul{ list-style: none; li:first-child .summary { border: none; } } } .wizard{ li{ border-bottom: 1px dotted #999; } label{ display: inline-block; padding: 3px; margin: 10px 5px; } h2{ margin: 10px 0; } .progress{ text-align: center; position: relative; width: 100%; height: 15px; .bar{ height: 20px; background-color: rgb(102, 196, 0); border-right: 1px solid rgb(70, 134, 0); } .bar-container{ border: 1px solid #666; box-shadow: 0 0 20px rgba(0,0,0,0.2); border-radius: 4px; height: 20px; position: absolute; width: 500px; } h3 { width: 100%; position: absolute; } } input[type=text], input[type=number], select { display: block; float: right; margin-top: 8px; } input[type=number] { width: 4em; } textarea{ float: right; text-align: right; } nav{ margin-top: 15px; a{ text-decoration: underline; display: block; } .prev{ float: left; } .next{ float: right; } } ul.radio{ float: right; label { float: left; margin: 0; } } .radio{ li{ float: left; padding: 5px; margin: 5px 3px; border-bottom: none !important; } } .size-summary { margin: 10px; } } #new-template-name { input { margin: 10px 5px; } }