.hover-font-options { float: left; } .the_box { height: 400px; overflow: auto; } input[type="text"] { height: 29px; width: 50px; } .the-pxs { float: left; margin-left: 10px; } .the-pxs1 { float: left; } .mainBox { padding: 10px; width: 98%; margin: auto; } .leftBox { width: 40%; background-color: rgb(55, 42, 42); color: white; height: 100%; float: left; position: fixed; } .adminMenu { background-color: gray; } .headerText { font-size: 20px; } .style_name { margin: 10px; } .admin_button { margin: 10px; width: 73px; } .divider-display { background-color: white; } .hoverMain > a { text-decoration: none !important; } .rightBox { width: 50%; float: right; background-color: rgb(55, 42, 42); color: white; height: 100%; margin-left: 2%; } .mainBoxdiv { background-color: gray; } .radius { size: 5; display: inline-block; } .px-holder { width: auto; height: 17px; min-width: 16px; padding: 4px 5px 4px; font-size: 14px; text-shadow: 0 1px 0 #FFFFFF; background-color: #eeeeee; border: 1px solid #ccc; margin-left: -2px; color: black; margin-right: 2px; } .px-holder-hover { width: auto; height: 17px; min-width: 16px; padding: 1px 5px 7px; font-size: 14px; text-shadow: 0 1px 0 #FFFFFF; background-color: #eeeeee; border: 1px solid #ccc; margin-left: -1px; color: black; margin-right: 2px; } .borderRadius { padding: 10px; width: 45%; float: left; } .margins { float: left; width: 45%; padding: 10px; } .input-holder { margin: 5px; } .colors { padding: 10px; width: 47%; float: left; margin-bottom: 10px; } .color { padding: 0px; width: 50px; } .colorDiv { margin-top: 11px; } .previewMain { height: 300px; width: 500px; background-color: white; margin: 50px auto; position: relative; overflow: hidden; } .previewMain_text { color: black; } .litBox { width: 50%; float: right; background-color: rgb(55, 42, 42); color: white; height: 100%; margin-left: 2%; margin-top: 2%; } .litBoxDiv { background-color: gray; } .previewMain_text_div { position: absolute; width: 100%; } #opacity_hover { height: 36px; } .hoverMain { height: 300px; width: 500px; background-color: black; margin: 50px auto; position: absolute; color: white; } .hover_colors { padding: 0px; } .margin-hover { float: left; } .hover-color { float: left; margin-right: 10px; } .maskImg{ -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */ -o-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */ -moz-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */ mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */ } #dialogoverlay{ display: none; opacity: .8; position: fixed; top: 0px; left: 0px; background: #FFF; width: 100%; z-index: 10; } #dialogbox{ display: none; position: fixed; background: #000; border-radius:7px; width:700px; z-index: 10; } #dialogbox > div{ background:#FFF; margin:8px; } #dialogbox > div > #dialogboxhead{ background: #666; font-size:19px; padding:10px; color:#CCC; } #dialogbox > div > #dialogboxbody{ background:#333; padding:20px; color:#FFF; } #dialogboxfoot{ background: #666 !important; padding:10px; text-align:right; } [input type="text"] { maxlength: 3; } .btn { margin-left: 10px; background-color: #4a93a4; width: 180px; padding: 7px 10px; color: rgba(9, 15, 30, 0.8); text-transform: uppercase; border: 1px solid #2c398d; font-weight: bold; font-size: 15px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -border-radius: 3px; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8), 0 -1px 0 rgba(25, 27, 9, 0.9); } .btn:hover, .btn:focus { background: #649eac; border: 1px solid #186ca4; } .btn:active { background: #4a86a4; border: 1px solid #183ea4; position: relative; top: 5px; } .green { background-color: #00ab26; } .ok { /*basic styles*/ width: 30px; height: 30px; color: #fff; text-align: center; /*gradient styles*/ /*border styles*/ -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; /*shadow styles*/ -moz-box-shadow: 2px 3px 5px #bfbfbf; -webkit-box-shadow: 2px 3px 5px #bfbfbf; box-shadow: 2px 3px 5px #bfbfbf; } .ok p { font-size: 50px; line-height: 100px; font-family: “HelveticaNeue-Light”, “Helvetica Neue Light”, “Helvetica Neue”, Helvetica, Arial, “Lucida Grande”, sans-serif; font-weight: 300; text-shadow: 0px 0px 3px #888; } a { text-decoration: none; color: fff; } .ok:hover { -moz-box-shadow:inset 0 0 30px #444; -webkit-box-shadow:inset 0 0 30px #444; box-shadow:inset 0 0 30px #444; } .ok p:hover { text-shadow: 0px 0px 4px #fff; } .table-hover tbody tr:hover td, .table-hover tbody tr:hover th { background-color: #666666 !important; } @media screen and (max-width: 1325px) { .leftBox,.rightBox,.litBox { float: none; margin: auto; } .leftBox { position: initial; width: 50% !important; } } @media screen and (max-width: 600px) { .leftBox,.rightBox,.litBox,.square_preview,.square_hover { width: 100% !important; } } @media screen and (max-width: 429px) { .the-pxs { margin-left: 10px; } .the-2,.the-4 { margin-right: 10px; } .the-3,.the-5 { margin-left: 0px; } .colors { width: 100%; } .margins { width: 100%; } .borderRadius { width: 100%; } } @media screen and (max-width: 240px) { .margins { width: 50%; } .borderRadius { width: 50%; } .pxs { width: 50%; } } @media screen and (max-width: 379px) { .margin-hover { float: none; } }