.selectable_image { float: left; cursor: pointer; cursor: hand; margin: 0; padding: 5px; zoom: 1; } .selectable_image.over { border: 1px solid #585858; background-color: #000; padding: 4px; } .selectable_image.active { border: 1px solid #B98D1F; background-color: #000; padding: 4px; } .selectable_image .picker-item { zoom: 1; } .selectable_image.over .picker-item { } .selectable_image.active .picker-item { } /* COLOURS */ #colours_background_vp .selectable_image .picker-item, #colours_edge_vp .selectable_image .picker-item, #colours_text_vp .selectable_image .picker-item { width: 55px; height: 55px; background-image: url(../images/pickers/picker-colours.png); background-repeat: no-repeat; } .selectable_image.col_000000 .picker-item { background-position: -325px 0; } /* Black */ .selectable_image.col_102A80 .picker-item { background-position: -260px 0; } /* Passionate Blue */ .selectable_image.col_111F59 .picker-item { background-position: -195px 0; } /* Blue Lobelia */ .selectable_image.col_114201 .picker-item { background-position: -130px 0; } /* Deep Brunswick Green */ .selectable_image.col_1C3314 .picker-item { background-position: -65px 0; } /* Nimrod */ .selectable_image.col_207A11 .picker-item { background-position: 0 0; } /* Holly Bush */ .selectable_image.col_27678F .picker-item { background-position: -520px 0; } /* Pirates Haven */ .selectable_image.col_2C8C80 .picker-item { background-position: -455px 0; } /* Go Alpha */ .selectable_image.col_382112 .picker-item { background-position: -390px 0; } /* Deep Leather */ .selectable_image.col_540A04 .picker-item { background-position: -585px 0; } /* Indian Red */ .selectable_image.col_563270 .picker-item { background-position: -520px -70px; } /* Cadbury Silk */ .selectable_image.col_6A95EB .picker-item { background-position: -455px -70px; } /* Water Raceway */ .selectable_image.col_825022 .picker-item { background-position: -390px -70px; } /* Cane Toad */ .selectable_image.col_9B1916 .picker-item { background-position: -325px -70px; } /* Red Box */ .selectable_image.col_A9B1C9 .picker-item { background-position: -260px -70px; } /* Blue Oar */ .selectable_image.col_BEBF9D .picker-item { background-position: -195px -70px; } /* Antique */ .selectable_image.col_D92121 .picker-item { background-position: -130px -70px; } /* Hot Lips */ .selectable_image.col_E05124 .picker-item { background-position: -65px -70px; } /* Sunlounge */ .selectable_image.col_E3D8B6 .picker-item { background-position: 0px -70px; } /* Coffee Cream */ .selectable_image.col_FFEB3B .picker-item { background-position: -585px -70px; } /* Jubilation */ .selectable_image.col_FFFFFF .picker-item { background-position: 0 -140px; } /* Vivid White */ .selectable_image.col_FFFFFE .picker-item { background-position: -65px -140px; } /* 23k Gold */ /* SHAPES */ #shapes_shape_vp .selectable_image .picker-item { width: 116px; height: 90px; background-image: url(../images/pickers/picker-shapes.png); background-repeat: no-repeat; } .selectable_image.bottombump .picker-item { background-position: -293px -325px; } .selectable_image.bottomcurve .picker-item { background-position: -293px -175px; } .selectable_image.bottomstepcurve .picker-item { background-position: -293px -25px; } .selectable_image.circle .picker-item { background-position: -293px -925px; } .selectable_image.longrectangle .picker-item { background-position: -293px -1375px; } .selectable_image.oval .picker-item { background-position: -293px -1075px; } .selectable_image.rectangle .picker-item { background-position: -293px -1225px; } .selectable_image.topbump .picker-item { background-position: -293px -775px; } .selectable_image.topcurve .picker-item { background-position: -293px -625px; } .selectable_image.topstepcurve .picker-item { background-position: -293px -475px; } /* CORNERS & EDGES */ #shapes_edge_vp .selectable_image .picker-item, #shapes_corner_vp .selectable_image .picker-item { height: 70px; background-image: url(../images/pickers/picker-corners-edges.png); background-repeat: no-repeat; } /* edges */ .selectable_image.cove .picker-item { background-position: -420px -140px; } .selectable_image.groove .picker-item { background-position: -420px 0; } .selectable_image.plain .picker-item { background-position: -420px -70px; } /* corners */ .selectable_image.inverse .picker-item { background-position: 0 -140px; } .selectable_image.round .picker-item { background-position: 0 -70px; } .selectable_image.square .picker-item { background-position: 0 0; } /* LETTERING */ #fonts_text_vp_viewer { padding-top: 30px; } #fonts_primary_vp .selectable_image .picker-item { height: 51px; background-image: url(../images/pickers/picker-lettering.png); background-repeat: no-repeat; } .selectable_image.albertus .picker-item { background-position: 0 -8px; } .selectable_image.blackletter .picker-item { background-position: 0 -78px; } .selectable_image.essendean .picker-item { background-position: 0 -148px; } .selectable_image.frutiger .picker-item { background-position: 0 -218px; } .selectable_image.lithos .picker-item { background-position: 0 -288px; } .selectable_image.minion .picker-item { background-position: 0 -358px; } /* Vertical (long) items (CORNERS & EDGES, LETTERING) */ #shapes_edge_vp .selectable_image, #shapes_corner_vp .selectable_image, #fonts_primary_vp .selectable_image { width: auto; float: none; padding: 2px; } #shapes_edge_vp .selectable_image.over, #shapes_corner_vp .selectable_image.over, #fonts_primary_vp .selectable_image.over { padding: 1px; } #shapes_edge_vp .selectable_image.active, #shapes_corner_vp .selectable_image.active, #fonts_primary_vp .selectable_image.active { padding: 1px; } /* ARTWORK */ #artworks_upload_vp_viewer { padding-top: 30px; } #artworks_artwork_vp .selectable_image .picker-item { width: 65px; height: 65px; background-image: url(../images/pickers/picker-artwork.png); background-repeat: no-repeat; } .selectable_image.acorns .picker-item { background-position: -130px 0; } .selectable_image.anchor2 .picker-item { background-position: -195px 0; } .selectable_image.anchor .picker-item { background-position: -260px 0; } .selectable_image.apple-blossom .picker-item { background-position: -325px 0; } .selectable_image.apples .picker-item { background-position: -390px 0; } .selectable_image.blackolives .picker-item { background-position: -455px 0; } .selectable_image.bluejay .picker-item { background-position: -520px 0; } .selectable_image.butterfly2 .picker-item { background-position: -585px 0; } .selectable_image.chickadee .picker-item { background-position: 0 -70px; } .selectable_image.chipmunk .picker-item { background-position: -65px -70px; } .selectable_image.dogwood .picker-item { background-position: -130px -70px; } .selectable_image.fish1 .picker-item { background-position: -195px -70px; } .selectable_image.fish2 .picker-item { background-position: -260px -70px; } .selectable_image.fish3 .picker-item { background-position: -325px -70px; } .selectable_image.flag .picker-item { background-position: -390px -70px; } .selectable_image.fox .picker-item { background-position: -455px -70px; } .selectable_image.frangipani .picker-item { background-position: -520px -70px; } .selectable_image.grapes1 .picker-item { background-position: -585px -70px; } .selectable_image.hummer .picker-item { background-position: 0 -140px; } .selectable_image.leaves1 .picker-item { background-position: -65px -140px; } .selectable_image.leaves .picker-item { background-position: -130px -140px; } .selectable_image.lotus .picker-item { background-position: -195px -140px; } .selectable_image.pansies .picker-item { background-position: -260px -140px; } .selectable_image.pineapple2 .picker-item { background-position: -325px -140px; } .selectable_image.pinecones .picker-item { background-position: -390px -140px; } .selectable_image.rooster .picker-item { background-position: -455px -140px; } .selectable_image.shell1 .picker-item { background-position: -520px -140px; } .selectable_image.shell2 .picker-item { background-position: -585px -140px; } .selectable_image.star .picker-item { background-position: 0 -210px; } .selectable_image.sunflowers .picker-item { background-position: -130px -210px; } .selectable_image.thistle .picker-item { background-position: -195px -210px; } .selectable_image.tigerlillies .picker-item { background-position: -65px -210px; } .selectable_image.tree .picker-item { background-position: 0 0; } .selectable_image.woodduck .picker-item { background-position: -65px 0; } .selectable_image.z_custom .picker-item { background-position: -260px -210px; } .selectable_image.z_none .picker-item { background-position: -325px -210px; } .selectable_image.cow .picker-item { background-position: 0 -280px; } .selectable_image.crimson-rosella .picker-item { background-position: -65px -280px; } .selectable_image.dolphin .picker-item { background-position: -130px -280px; } .selectable_image.easterns .picker-item { background-position: -195px -280px; } .selectable_image.galahs .picker-item { background-position: -260px -280px; } .selectable_image.gumnuts .picker-item { background-position: -325px -280px; } .selectable_image.hibiscus .picker-item { background-position: -390px -280px; } .selectable_image.horse .picker-item { background-position: -455px -280px; } .selectable_image.kingparrots .picker-item { background-position: -520px -280px; } .selectable_image.kookaburra .picker-item { background-position: -585px -280px; } .selectable_image.lion .picker-item { background-position: 0 -350px; } .selectable_image.lorikeets .picker-item { background-position: -65px -350px; } .selectable_image.ram .picker-item { background-position: -130px -350px; } .selectable_image.redgumblossom .picker-item { background-position: -195px -350px; } .selectable_image.waratah .picker-item { background-position: -260px -350px; } .selectable_image.zebrafinches .picker-item { background-position: -325px -350px; } /* SIZE */ #sizes_size_vp { color: #efefef; } #sizes_size_vp .left-column { float: left; width: 150px; padding: 70px 10px 0 0; } #sizes_size_vp .right-column { float: right; width: 230px; padding: 70px 0 0 10px; } /* preview */ #sign-preview-small, #sign-preview-small span { display: block; width: 140px; height: 140px; margin: 0 auto; } #sign-preview-small span { background-image: url(../images/pickers/picker-shapes.png); background-repeat: no-repeat; } #sign-preview-small.bottombump .size4 { background-position: 0 -300px; } #sign-preview-small.bottombump .size3 { background-position: -140px -300px; } #sign-preview-small.bottombump .size2 { background-position: -280px -300px; } #sign-preview-small.bottombump .size1 { background-position: -420px -300px; } #sign-preview-small.bottombump .size0 { background-position: -560px -300px; } #sign-preview-small.bottomcurve .size4 { background-position: 0 -150px; } #sign-preview-small.bottomcurve .size3 { background-position: -140px -150px; } #sign-preview-small.bottomcurve .size2 { background-position: -280px -150px; } #sign-preview-small.bottomcurve .size1 { background-position: -420px -150px; } #sign-preview-small.bottomcurve .size0 { background-position: -560px -150px; } #sign-preview-small.bottomstepcurve .size4 { background-position: 0 0; } #sign-preview-small.bottomstepcurve .size3 { background-position: -140px 0; } #sign-preview-small.bottomstepcurve .size2 { background-position: -280px 0; } #sign-preview-small.bottomstepcurve .size1 { background-position: -420px 0; } #sign-preview-small.bottomstepcurve .size0 { background-position: -560px 0; } #sign-preview-small.circle .size4 { background-position: 0 -900px; } #sign-preview-small.circle .size3 { background-position: -140px -900px; } #sign-preview-small.circle .size2 { background-position: -280px -900px; } #sign-preview-small.circle .size1 { background-position: -420px -900px; } #sign-preview-small.circle .size0 { background-position: -560px -900px; } #sign-preview-small.longrectangle .size4 { background-position: 0 -1350px; } #sign-preview-small.longrectangle .size3 { background-position: -140px -1350px; } #sign-preview-small.longrectangle .size2 { background-position: -280px -1350px; } #sign-preview-small.longrectangle .size1 { background-position: -420px -1350px; } #sign-preview-small.longrectangle .size0 { background-position: -560px -1350px; } #sign-preview-small.oval .size4 { background-position: 0 -1050px; } #sign-preview-small.oval .size3 { background-position: -140px -1050px; } #sign-preview-small.oval .size2 { background-position: -280px -1050px; } #sign-preview-small.oval .size1 { background-position: -420px -1050px; } #sign-preview-small.oval .size0 { background-position: -560px -1050px; } #sign-preview-small.rectangle .size4 { background-position: 0 -1200px; } #sign-preview-small.rectangle .size3 { background-position: -140px -1200px; } #sign-preview-small.rectangle .size2 { background-position: -280px -1200px; } #sign-preview-small.rectangle .size1 { background-position: -420px -1200px; } #sign-preview-small.rectangle .size0 { background-position: -560px -1200px; } #sign-preview-small.topbump .size4 { background-position: 0 -750px; } #sign-preview-small.topbump .size3 { background-position: -140px -750px; } #sign-preview-small.topbump .size2 { background-position: -280px -750px; } #sign-preview-small.topbump .size1 { background-position: -420px -750px; } #sign-preview-small.topbump .size0 { background-position: -560px -750px; } #sign-preview-small.topcurve .size4 { background-position: 0 -600px; } #sign-preview-small.topcurve .size3 { background-position: -140px -600px; } #sign-preview-small.topcurve .size2 { background-position: -280px -600px; } #sign-preview-small.topcurve .size1 { background-position: -420px -600px; } #sign-preview-small.topcurve .size0 { background-position: -560px -600px; } #sign-preview-small.topstepcurve .size4 { background-position: 0 -450px; } #sign-preview-small.topstepcurve .size3 { background-position: -140px -450px; } #sign-preview-small.topstepcurve .size2 { background-position: -280px -450px; } #sign-preview-small.topstepcurve .size1 { background-position: -420px -450px; } #sign-preview-small.topstepcurve .size0 { background-position: -560px -450px; } #selectors-feedback { text-align: center; font-size: 11px; color: #C7C7C7; } #selectors-feedback #sizes_size_text { font-size: 12px; color: #D5A832; } .selector { display: block; float: left; width: 30px; text-align: center; padding: 4px; margin-right: 5px; background-color: #121212; color: #efefef; } .selector.last { margin: 0; } .selector input { margin-bottom: 2px; } /* sizes */ #size-selectors { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px dotted #1C1D1D; } #size-selectors .selector { width: 34px; } #size-selectors .selectors-scale { width: 100%; padding-top: 4px; clear: both; height: 12px; line-height: 12px; font-size: 11px; color: #C7C7C7; } #size-selectors .selectors-scale .low { display: block; float: left; width: 45%; height: 12px; line-height: 12px; text-align: left; } #size-selectors .selectors-scale .high { display: block; float: right; width: 45%; height: 12px; line-height: 12px; text-align: right; } /* sides */ #side-selectors { margin-bottom: 15px; } #side-selectors .selector { width: 74px; }