body { overflow: hidden; } #customize-controls a { text-decoration: none; } .customize-section { border-top: 1px solid #fff; border-bottom: 1px solid #dfdfdf; margin: 0; } .customize-section:last-child { box-shadow: 0 1px 0 0px #fff; } .customize-section-title { margin: 0; padding: 15px 20px; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .customize-section-content { display: none; padding: 0 20px 15px; overflow: hidden; } .customize-section.open .customize-section-content { display: block; } .customize-section-title:after { content: ''; width: 0; height: 0; border-color: #ccc transparent transparent transparent; border-style: solid; border-width: 6px; position: absolute; top: 20px; right: 20px; z-index: 1; } .customize-section.open .customize-section-title:after { top: 13px; border-color: transparent transparent #ccc transparent; } #customize-info { margin-top: 45px; } #customize-info .customize-section-title:after { display: none; } #customize-info.open .customize-section-title:after { display: block; } #customize-info .customize-section-title .theme-screenshot { float: right; width: auto; height: 53px; margin: -7px -13px 0 15px; } #customize-info.open .customize-section-title .theme-screenshot { display: none; } #customize-info .theme-name { font-size: 16px; font-weight: bold; line-height: 24px; display: block; } #customize-info .theme-screenshot { width: 258px; border: 1px solid #ccc; } #customize-info .theme-description { margin-top: 1em; color: #777; line-height: 20px; } #customize-controls .submit { text-align: center; } #customize-theme-controls { padding-bottom: 60px; } #customize-theme-controls ul { margin: 0; } .customize-control { float: left; clear: both; margin-bottom: 4px; } .customize-control-title { clear: left; float: left; min-width: 110px; margin-right: 10px; line-height: 28px; } .customize-control-text input, .customize-control-select select, .customize-control-checkbox input, .customize-control-color .color-picker, .customize-control-upload div { float: left; clear: right; line-height: 28px; } .customize-control-text input { width: 138px; line-height: 18px; margin: 1px; } .customize-control-select select { width: 138px; height: 28px; line-height: 28px; } .customize-control-checkbox input { margin-top: 8px; } .customize-control-radio { padding: 5px 0 10px; } .customize-control-radio .customize-control-title { margin-bottom: 0; line-height: 22px; } .customize-control-radio label { float: left; clear: both; line-height: 20px; } .customize-control-radio input { margin-right: 5px; } #customize-preview { position: fixed; left: 300px; right: 0; top: 0; bottom: 0; } #customize-preview iframe { width: 100%; height: 100%; } .customize-loader { background: transparent; border: 4px solid #666; border-radius: 50%; display: block; margin: 10px auto; text-indent: -9999px; height: 12px; width: 12px; /* Animation */ -webkit-animation: customize-loader 1s infinite ease-out; -moz-animation: customize-loader 1s infinite ease-out; animation: customize-loader 1s infinite ease-out; } @-moz-keyframes customize-loader { 0% { opacity: 0; -moz-transform: scale(0.7); } 40% { opacity: 1; } 100% { opacity: 0; -moz-transform: scale(1); } } @-webkit-keyframes customize-loader { 0% { opacity: 0; -webkit-transform: scale(0.7); } 40% { opacity: 1; } 100% { opacity: 0; -webkit-transform: scale(1); } } @keyframes customize-loader { 0% { opacity: 0; transform: scale(0.7); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } } /* * Style for custom settings */ .customize-section select { max-width: 150px; } /* * Color Picker */ .customize-section .color-picker a { display: block; height: 20px; width: 40px; border: solid 3px rgba( 0, 0, 0, 0.1 ); background-color: #fff; -webkit-border-radius: 3px; border-radius: 3px; } .customize-section .color-picker .color-picker-controls { display: none; } .customize-section .color-picker .farbtastic-placeholder { height: 195px; width: 195px; border: 4px solid #fff; box-shadow: 0 0 20px rgba( 0, 0, 0, 0.2 ); -webkit-border-radius: 50%; border-radius: 50%; } .customize-section .color-picker-hex { background-color: #fff; border: 1px solid #dfdfdf; -webkit-border-radius: 3px; border-radius: 3px; color: #777; width: 70px; font-family: monospace; } .customize-section .color-picker-hex span { float: left; display: block; margin: 1px -2px 0 0; line-height: 15px; padding: 3px 0 3px 8px; text-align: right; -webkit-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; } .customize-section .color-picker-hex input[type="text"] { color: #777; -webkit-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; width: 50px; border: 0; background: transparent; }