/* This file is for css for reusable controls styles (colour pickers etc) */

/* Graphic font picker */
#lblTextFrontArial {
    background-image: url(/images/font_modern.png);
}

#lblTextFrontAminta {
    background-image: url(/images/font_gothic.png);
}

#lblTextFrontCursive {
    background-image: url(/images/font_tidy.png);
}

#lblTextFrontDymo {
    background-image: url(/images/font_sticky.png);
}

#lblTextFrontFontlery {
    background-image: url(/images/font_script.png);
}

#lblTextFrontKimberley {
    background-image: url(/images/font_chunky.png);
}

#lblTextFrontLadyIce {
    background-image: url(/images/font_nice.png);
}

#lblTextFrontShortcut {
    background-image: url(/images/font_messy.png);
}

#lblTextFrontStencilia {
    background-image: url(/images/font_stencil.png);
}

#lblTextFrontVagRounded {
    background-image: url(/images/font_rounded.png);
}

#lblTextFrontDrawn {
    background-image: url(/images/font_drawn.png);
}

#lblTextFrontSwirly {
    background-image: url(/images/font_swirly.png);
}

#lblTextFrontTidy {
    background-image: url(/images/font_tidy2.png);
}

#lblTextFrontTraditional {
    background-image: url(/images/font_traditional.png);
}

/* Double colour picker */
#ulDoubleColourPicker {
    width: 180px;
    margin-left: 2px;
    height: 2.1em;
    padding-top: 0.4em;
    position: relative;
    left: 5px;
    height: 94px;
}

#ulDoubleColourPicker li {
    margin-right: 4px;
    position: relative;
    width: 27px;
    height: 27px;
    border: solid 1px #eeebec;
    background: white;
}

#ulDoubleColourPicker li a {
    position: relative;
    display: block;
    text-decoration: none;
    width: 23px;
    height: 23px;
    margin-bottom: 5px;
    top: 2px;
    left: 2px;
    overflow: hidden;
    text-align: center;
    color: white
}

#ulDoubleColourPicker li span {
    font-size: 20px;
    font-variant: small-caps;
    font-weight: bold;
    font-family: georgia, serif;
}

#ulDoubleColourPicker li.selected {
    border: solid 1px #333;
}

#ulDoubleColourPicker input {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

/* Align tool */
#divAlignTool a {
    width: 27px;
    height: 24px;
    margin-right: 10px;
}

#divAlignTool a img {
    border: solid 1px #ada6a6;
}

#divAlignTool a:active {
    outline: none;
}

#divAlignTool a.selected img {
    border: solid 1px black;
}

#divAlignTool strong {
    padding-right: 1em;
}

/* Product preview */
#divProductLinkPreview {
    width: 100%;
    z-index: 1000;
    position: absolute;
    top: 150px;
    text-align: center
}

#divProductLinkPreview div {
    width: 584px;
    margin: 0 auto;
    background: white;
    position: relative;
    padding: 8px;
}

#divProductLinkPreview div div {
    border: solid 1px #808080;
    width: 566px;
    padding: 8px;
}

#divProductLinkPreview div div div {
    border: 0;
    width: auto;
    text-align: left;
}

#divProductLinkPreview #imgProdShot {
    float: left;
    margin-right: 32px;
}

#divProductLinkPreview #olSteps {
    width: 480px;
    margin: 0 auto;
}

/* Toolbar */
.container #divToolbarNew {
    height: 86px;
    padding: 0;
    margin: 0 -10px 30px;
    z-index: 20;
    position: relative;
}

#divToolbarNew #divToolbarNewFont,
#divToolbarNew #divToolbarNewColour {
    margin: 0 10px;
    padding: 5px;
    background-color: #ddd;
    border: 1px solid #888;
    float: left;
    height: 75px;
}

#divToolbarNew dl {
    margin: 0;
    padding: 4px;
    height: 34px;
    float: left;
    z-index: 25;
}

#divToolbarNewFont {
    width: 210px;
}

#divToolbarNewColour {
    padding-bottom: 1px;
    width: 166px;
}

* html #divToolbarNewColour {
    width: 156px;
}

#divToolbarNew dl,
#divToolbarNew dt,
#divToolbarNew dd {
    position: relative;
    margin: 0;
    padding: 0;
}

#divToolbarNew dl span.label {
    float: left;
    display: block;
    padding: 5px 10px 2px 4px;
}

#divToolbarNew a:focus {
    -moz-outline-style: none;
}

#divToolbarNew a {
    text-decoration: none;
}

#divToolbarNew dl dt span.control {
    display: block;
    float: right;
    height: 34px;
    padding-right: 14px;
    position: relative;
}

#divToolbarNew dl dt span.control a.clickbutton {
    display: block;
    position: absolute;
    height: 33px;
    width: 14px;
    right: 0;
    top: 0;
    background-position: top left;
    background-repeat: no-repeat;
}

#divToolbarNew dl dt span.control a.clickbutton:active {
    background-position: bottom left;
}

#divToolbarNew span.selected {
    display: block;
    height: 31px;
    position: relative;
    float: left;
    border-top: solid 1px #ebeaea;
    border-left: solid 1px #ebeaea;
    border-bottom: solid 1px #d0d0d0;
    border-right: none;
}

#divToolbarNew dl dd ul {
    position: absolute;
    right: 2px;
    top: 32px;
    z-index: 30;
    float: right;
}

#divToolbarNew #dlColourPicker {
    width: 154px;
    z-index: 100;
}

* html #divToolbarNew #dlColourPicker ul {
    right: 104px;
}

#divToolbarNew #ulInversePicker {
    width: 154px;
}

#divToolbarNew #ulInversePicker label {
    font-size: 0.9em;
}

#divToolbarNew #dlFontPicker {
    width: 180px;
    z-index: 100;
}

* html #divToolbarNew #dlFontPicker ul {
    width: 132px;
    right: 46px;
}

#divToolbarNew #dlAlignmentPicker {
    width: 200px;
    margin-right: 0;
}

#divToolbarNew #dlTemplatePicker {
    width: 180px;
}

#divToolbarNew #dlTemplatePicker ul {
    width: 120px;
}

* html #divToolbarNew #dlTemplatePicker ul {
    width: 128px;
    right: 124px;
}

* html #divToolbarNew #dlColourPicker {
    width: 156px;
}

* html #divToolbarNew #dlColourPicker span.control {
    float: right;
}

/* Choose artwork/layout */
#divChooseLayoutOrArtwork {
    height: 110px;
    margin-top: -5px;
    position: relative;
}

#divChooseLayoutOrArtwork #divChooseLayout,
#divChooseLayoutOrArtwork #divChooseArtwork {
    float: left;
    padding-top: 1px;
}

#divChooseLayoutOrArtwork #divChooseLayout {
    width: 170px;
}

#divChooseLayoutOrArtwork #divChooseArtwork {
    width: 290px;
}

#divChooseLayoutOrArtwork input {
    margin: 0 5px 0 0;
}

#divChooseLayoutOrArtwork div label small {
    margin-left: 20px;
    color: #949494;
    display: block;
    line-height: 1em;
}

#divChooseLayoutOrArtwork #ulTemplatePicker {
    position: absolute;
    top: 45px;
    left: 0px;
    width: 452px;
    padding: 17px 4px 5px;
    background: url(/images/arrow_block.png) top left no-repeat;
}

#divChooseLayoutOrArtwork #ulTemplatePicker li {
    float: left;
    margin: 0 2px;
}

#divChooseLayoutOrArtwork #ulTemplatePicker li a {
    width: 40px;
    height: 40px;
    display: block;
    background-position: top left;
    background-repeat: no-repeat;
    border-width: 2px;
    border-style: solid;
    border-color: #e5e5e5;
}

#divChooseLayoutOrArtwork #ulTemplatePicker li a.landscape {
    margin-top: 7px;
    height: 26px;
}

#divChooseLayoutOrArtwork #ulTemplatePicker li a.portrait {
    margin-top: 0px;
    margin-left: 3px;
    width: 26px;
}

#divDesignbackMinicard #divChooseLayoutOrArtwork #ulTemplatePicker {
    width: 260px;
}

#divDesignbackMinicard #divChooseLayoutOrArtwork #ulTemplatePicker li a {
    width: 44px;
    height: 18px;
    margin-top: 12px;
    margin-bottom: 16px;
}

#divDesignbackMinicard #divChooseLayoutOrArtwork #ulTemplatePicker li a.portrait {
    width: 18px;
    height: 44px;
    margin-top: 0;
    margin-bottom: 8px;
}

#ulArtworkPicker {
    position: absolute;
    top: 41px;
    left: 175px;
    width: 92px;
    padding: 17px 4px 5px;
    background: url(/images/arrow_up.png) top left no-repeat;
}

#ulArtworkPicker li {
    float: left;
    margin: 0 2px;
}

#ulArtworkPicker li a {
    width: 40px;
    height: 40px;
    display: block;
    background-position: top left;
    background-repeat: no-repeat;
    border-width: 2px;
    border-style: solid;
    border-color: #e5e5e5;
}

#ulArtworkPicker li a.landscape {
    margin-top: 7px;
    height: 26px;
}

#ulArtworkPicker li a.portrait {
    margin-top: 0;
    margin-left: 3px;
    width: 26px;
}

#divDesignbackMinicard #ulArtworkPicker li a {
    width: 44px;
    height: 18px;
    margin-top: 12px;
    margin-bottom: 16px;
}

#divDesignbackMinicard #ulArtworkPicker li a.portrait {
    width: 18px;
    height: 44px;
    margin-top: 0;
    margin-bottom: 4px;
}

/* hack for FireFox2 */
#divDisabledToolbar, x:-moz-any-link {
    position: absolute;
    height: 87px;
    width: 218px;
    margin-top: 18px;
    z-index: 99;
    background-color: #DFDFDF;
    -moz-opacity: 0.3 !important;
    filter: alpha(opacity = "30") !important;
    opacity: 0.3 !important;
    _margin-top: 2px;
    _height: 87px;
    left: 498px;
}

/*hack for resetting FireFox3 defaults */
#divDisabledToolbar, x:-moz-any-link, x:default {
    position: absolute;
    height: 87px;
    width: 218px;
    margin-top: 2px;
    z-index: 99;
    background-color: #DFDFDF;
    -moz-opacity: 0.3 !important;
    filter: alpha(opacity = "30") !important;
    opacity: 0.3 !important;
    _margin-top: 2px;
    _height: 87px;
    left: 498px;
}

/*hack for non-firefox browsers (IEsmegging6) */
#divDisabledToolbar, x:default {
    position: absolute;
    height: 87px;
    width: 218px;
    margin-top: 7px;
    z-index: 99;
    background-color: #DFDFDF;
    -moz-opacity: 0.3 !important;
    filter: alpha(opacity = "30") !important;
    opacity: 0.3 !important;
    _margin-top: 2px;
    _height: 87px;
    left: 498px;
}

#pCanvasBleedWarning {
    padding: 0 4px;
    margin-top: 0px;
    background: #FFEBE8 none repeat scroll 0%;
    border: 1px solid #F03B1F;
}

/* Flash image controls */
.container #divFlaImageControls {
    margin: 8px 0 43px;
}

#divFlaImageControls #ulFrontTextControls {
    margin-left: 0;
}

#divFlaImageControls li.label {
    margin-left: 16px;
    margin-right: 4px;
}

#divFlaImageControls li.first {
    margin-left: 0
}

#divFlaImageControls .aAddImage {
    display: block;
    height: 26px;
    margin-right: 23px;
    width: 28px;
    margin-top: -2px;
}

#divFlaImageControls #aAddImageOn {
    background: url(../images/add_images.png) no-repeat top left;
}

#divFlaImageControls #aAddImageOff {
    background: url(../images/add_images.png) no-repeat bottom left;
}

#divFlaImageControls #aClearImage, #divFlaImageControls #aResetImage {
    width: auto;
}

#divFlaImageControls #ulFrontTextControls a.disabled {
    color: #ccc !important;
    cursor: pointer;
}

#divFlaImageControls .aAddImageLink {
    width: auto;
    display: inline;
}

/* Zoom controls */
#divFlaImageControls #ulFrontTextControls #aZoomIn {
    background: transparent url(/images/zoom_in_on.gif) no-repeat scroll 0%;
}

#divFlaImageControls #ulFrontTextControls #aZoomIn.disabled {
    background: transparent url(/images/zoom_in_off.gif) no-repeat scroll 0% !important;
}

#divFlaImageControls #ulFrontTextControls #aZoomOut {
    background: transparent url(/images/zoom_out_on.gif) no-repeat scroll 0%;
}

#divFlaImageControls #ulFrontTextControls #aZoomOut.disabled {
    background: transparent url(/images/zoom_out_off.gif) no-repeat scroll 0% !important;
}

#divFlaImageControls #aPreview {
    float: right;
    margin-top: -1.55em;
}

#divFlaImageControls a.zoomControl {
    display: block;
    width: 21px;
    height: 21px;
    margin-right: 5px;
    background-position: center;
    background-repeat: no-repeat;
}

/* Colour picker */
dl.colourpicker span.selected {
    width: 31px;
}

dl.colourpicker span.selected, dl.colourpicker ul li {
    display: block;
    position: relative;
    width: 31px;
    height: 31px;
}

dl.colourpicker ul a, dl.colourpicker span.selected a {
    z-index: 30;
    display: block;
    width: 25px;
    height: 25px;
    text-decoration: none;
    position: absolute;
    top: 0;
    left: 0;
    border: solid 3px white;
}

html>body dl.colourpicker ul a, html>body dl.colourpicker span.selected a {
    background: url(/images/colourbevel.png);
}

/* Not for IE6 */
dl.colourpicker ul a:hover {
    background: none;
    cursor: pointer;
}

dl.colourpicker ul {
    width: 110px;
    padding-bottom: 4px;
    background: #dfdfdf;
    border: solid 1px #ada6a6;
    border-top: dotted 1px #ccc;
}

dl.colourpicker ul li {
    margin-top: 4px;
    margin-left: 4px;
    float: left;
}

/* Inverse picker */
dl.inversepicker ul {
    right: 0 !important;
    top: 0 !important;
}

* html dl.inversepicker ul {
    top: -38px;
    left: 5px;
}

dl.inversepicker ul a {
    width: 30px;
    height: 30px;
    border: solid 1px #ada6a6;
    float: left;
}

#cbInverseColour {
    position: absolute;
    left: -9999px;
}

/* Font picker */
dl.fontpicker span.selected a {
    display: block;
    width: 120px;
    height: 30px;
}

dl.fontpicker ul a {
    display: block;
    width: 120px;
    height: 30px;
    border: dotted 1px #ada6a6;
}

dl.fontpicker ul a:hover {
    border: solid 1px #ff9f5f;
}

dl.fontpicker ul {
    padding-bottom: 4px;
    background: #dfdfdf;
    border: solid 1px #ada6a6;
    border-top: dotted 1px #ccc;
}

dl.fontpicker ul li {
    margin: 4px 4px 0 4px;
}

/* Alignment picker */
dl.alignmentpicker ul {
    position: relative !important;
    right: 0 !important;
    top: 0 !important;
}

dl.alignmentpicker ul li {
    margin: 4px 0 0 4px;
    padding: 1px;
}

dl.alignmentpicker ul li.selected {
    border-width: 1px;
    border-style: solid;
    padding: 0;
}

dl.alignmentpicker ul li a {
    width: 27px;
    height: 24px;
    border: solid 1px #ada6a6;
    float: left;
}

/* Template picker */
dl.templatepicker span.selected a {
    display: block;
    width: 30px;
    height: 30px;
}

dl.templatepicker ul a {
    display: block;
    width: 30px;
    height: 30px;
    border: 1px dotted #ada6a6;
}

dl.templatepicker ul a:hover {
    border: solid 1px #ff9f5f;
}

dl.templatepicker ul {
    padding-bottom: 4px;
    background: #dfdfdf;
    border: solid 1px #ada6a6;
    border-top: dotted 1px #ccc;
}

dl.templatepicker ul li {
    margin: 4px 4px 0 4px;
}

/* Stock selector */
#divChooseStock {
    margin: 8px 0;
}

#divChooseStock table {
    margin: 8px auto;
    width: 700px;
    border: 1px solid #b6b6b6;
    background-color: #fff;
}

#divChooseStock thead {
    border-bottom: 1px solid #b6b6b6;
}

#divChooseStock th {
    padding: 8px 16px;
    background-color: #fff;
    font-size: 1.3em;
    font-weight: bold;
    border: 0;
}

#divChooseStock td {
    padding: 8px 16px;
    vertical-align: top;
    border: 0;
}

#divChooseStock table p {
    color: #555;
    margin-top: 2px;
}

#divChooseStock .col_stock {
    width: 300px;
    border-left: 1px solid #b6b6b6;
}

#divChooseStock .cell_center {
    text-align: center;
    vertical-align: middle;
}

#divChooseStock .cell_empty {
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
}

#divChooseStock .cell_price li {
    font-size: 1.1em;
    font-weight: bold;
}

#divChooseStock .cell_price input {
    margin: 16px 0;
}

#divChooseStock .row_stripe {
    background-color: #eee;
}

#divChooseStock .row_stripe_special {
    background-color: #fcecd3;
}

#divChooseStock #divSavePack {
    margin: 13px 108px;
}

#divMask {
    position: absolute;
}

#divMask[id] {
    position: fixed;
}