body { background-color:#F5F5F5; color:#1E1C21; font-family:Calibri,Arial; font-size:15px; padding:0; margin:0; } ul, ol, li { list-style:none; margin:0; padding:0; } span:focus { -moz-outline-style:none;outline:none; } .wrapper { margin:0 auto; padding-left:10px; width:960px; } /* Preview Area - Left Column */ .preview { -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; background-color:#FFF; border:1px solid #E1E1E1; float:left; margin-top:20px; height:808px; padding:35px 35px; width:450px; } .ie-message { background-color:#FFFFFF; border:1px solid #E1E1E1; color:#FF0F0F; display:none; font-size:16px; padding:10px; top:6px; margin-bottom:20px; z-index:1; } .ie-message span { color:#999999; cursor:pointer; margin-top:5px; position:absolute; right:8px; } .ie-message span:hover { color:#000000; text-decoration:underline; } .generatorTitle{ font-size:20px; font-weight:bold; color : bcbcbc; float: left; } .generatorTitleSmall{ font-size:16px; color : bcbcbc; float:left; margin-top : 4px; } .preview-bg { position:relative; width:300px; font-size:12px; text-align:left; } .preview-bg span{ padding-left:10px; } .preview-swatch-color { background:#f5f5f5; border:1px solid #e5e5e5; cursor:pointer; margin-bottom:2px; height:18px; width:18px; float:left; } .preview-swatch-image { background:#FFFFFF url(../images/image-icon.png) no-repeat center center; border:1px solid #e5e5e5; cursor:pointer; height:18px; width:18px; } table.generator { background-color:#f5f5f5; border:1px solid #e5e5e5; height:230px; width:100%; text-align:center; } table span { cursor:pointer; } .current-palette .selected, .preview-bg .selected { border-color:#666666; -moz-box-shadow:inset 0px 0px 0px 2px #ffffff; -webkit-box-shadow:inset 0px 0px 0px 2px #ffffff; box-shadow:inset 0px 0px 0px 2px #ffffff; } .color-container { float: left; height: 50px; position: absolute; z-index: 3; } .current-palette { background-color:#efefef; float: right; margin: 0 0 0 190px; padding: 0 0 4px 5px; position: absolute; top: 5px; width: 145px; z-index: 4; } .current-palette span { -moz-box-shadow:inset 0px 0px 0px 1px #ffffff; -webkit-box-shadow:inset 0px 0px 0px 1px #ffffff; box-shadow:inset 0px 0px 0px 1px #ffffff; cursor:pointer; border:1px solid #BFC4CE; display:inline-block; height:18px; position:relative; margin:0 4px 3px 0; top:4px; width:18px; } .default-palettes { float:left; font-size:12px; margin:3px 0 0 2px; } .default-palettes ul { background-color:#FFFFFF; border:1px solid #BFC4CE; display:none; height:200px; margin:0 0 0 6px; overflow:auto; position:absolute; width:180px; z-index:4; } .default-palettes li { cursor:pointer; padding:8px 0 4px 10px; background-color:#F8F8F8; border-bottom:1px solid #D8DFEA; display:block; margin-bottom:1px; } .default-palettes li:hover { background-color:#FFF8CC; border-color:#FFE222; } .default-palettes li.selected { background-color:#EBECEF; border-color:#BFC4CE; } .default-palettes li span { border:1px solid #BFC4CE; display:inline-block; height:18px; margin-right:4px; width:18px; top:0; } .default-palettes .dropdown{ float:left; padding:0 0 4px 0; z-index:4; } .default-palettes .dropdown span, .button-bg-option { background-color:#FFFFFF; border:1px solid #DCDCDC; color:#777777; cursor:pointer; display:block; font-weight:bold; margin-right:3px; padding:2px 9px; position:relative; top:2px; } .button-bg-option { float:left; padding:1px 6px 2px 4px; } span.dropdown:hover { color:#0F507F; } .color-picker { clear: both; display: none; position: relative; top: 7px; z-index: 8; } .colorpicker { z-index:3; } .hightlightTxt{ -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; } textarea { height:500px; white-space: pre; word-wrap: normal; overflow-x:hidden; } input.input { -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; background-color:#fcfcfc; border-color:#bbbbbb #dddddd #eeeeee; border-style:solid; border-width:1px; color:#444; font-family:arial; font-size:13px; letter-spacing:1px; margin:0 0 5px 0; padding:2px 8px; width:145px; } select { -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; background-color:#fcfcfc; border-color:#bbbbbb #dddddd #eeeeee; border-style:solid; border-width:1px; color:#444; font-family:arial; font-size:11px; letter-spacing:1px; margin:0 0 14px 0; padding:2px; width:163px; } textarea:focus, input.input:focus, select:focus { background-color:#efefef; border-color:#cccccc; } /* End of Preview Area */ /* Settings - Right Column */ .settings { -moz-border-radius:8px 8px 8px 8px; -webkit-border-radius:8px 8px 8px 8px; border-radius:8px 8px 8px 8px; background-color:#FFFFFF; border:1px solid #E1E1E1; float:right; height: 840px; padding: 25px 10px 12px; width: 385px; } .setting-container { float:left; width:50%; } .settings label { font-size:11px; } .setting-slider, .setting-shadow, .setting-shadow-blur { left: 80px; top:3px; margin: 13px 0 18px; width: 160px; } .setting-input{ border: 0 none; background:none; color: #ff8000; font-family: arial; font-size: 12px; font-weight: bold; margin: 2px 0 0 2px; position: absolute; width: 40px; *margin:0; /*ie7 hack*/ } input[type="checkbox"] { height:13px; margin:0 2px 0 0; padding:0; position:relative; top:2px; width:13px; *top:-1px; /*ie7 hack*/ } .mini-button { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) ); background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% ); background:filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf'); -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; border:1px solid #dcdcdc; color:#777777; cursor:pointer; display:inline-block; top:1px; padding:0 1px 0 3px; position:relative; text-shadow:1px 1px 0px #ffffff; *top:-14px; /*ie7 hack*/ } .mini-button input { cursor:pointer; margin:0 -2px 0 0; top:1px; *top:-2px; /*ie7 hack*/ } .mini-button label { cursor:pointer; font-size:15px !important; font-weight:bold; margin:0; padding:0; } .setting-title { -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; background-color:#EEEEEE; font-size:12px; font-weight:bold; margin:10px 0 20px 15px; padding:5px 10px; width:336px; } /* End of Settings*/ .unavailable { border-color:#FF0000 !important; color:#FF0F0F !important; } .clear { font-size:1px; line-height:0; display:block; clear:both; height:0; } .refresh-add{ height:60px; } .refresh-add .refresh{ cursor: pointer; float: left; height: 20px; margin-top: 29px; position: relative; width: 20px; background-image:url('../images/undo-icon.png'); background-repeat:no-repeat; background-position:1px 3px; }