/*--------------------------------------------------------------------------------------------------------------
 * Admin
 */

body.admin .head {
    text-align: left;
    padding: 0;
    margin: 0 0 10px 0;
}


body.admin .head ul.buttons {
    list-style: none;
    display: inline-block;
    text-align: left;
    margin: 0;
    padding: 0;
}

body.admin .head ul.buttons li {
    display: inline-block;
}

body.admin .body {
    background: #f1f1f1;
    border: 1px solid #e6e6e6;
}

body.admin .actionList {
    text-align: left;
}


/*--------------------------------------------------------------------------------------------------------------
 * Page Sections
 */

/*
 Menu => 12em (192px)
 Gap => 1em (16px)
 Body:
    Single Column:
        column1c1 => 24em - 60em (384px - 960px)
        or
        widespan => 24em - 60em (384px - 960px)
    Double Column:
        column2c1 => 24em - 60em (384px - 960px)
        Gap => 1em (16px)
        column2c2 => 24em - 60em
*/

.padded, .padded2 {
    min-height: 46em;
}

#columnc1, #column2c1, #column2c2 {
    margin-bottom: 1em;
    display: inline-block;
}

.bottomhtml {
    margin-top: 1em;
}

#widespan, .widespan {
    padding-bottom: 10px;
    clear: both;
}

#header {
    border-bottom: 1px solid #000000;
    margin-bottom: 1em;
    text-align: center;
}

body.cardsstock .tabmain div.return {
    margin-bottom: 10px;
}

body.editor .SamplesText2 span {
    display: inline-block;
    vertical-align: top;
}

@media screen and (max-width: 640px) {
    .padded, .padded2 {
        padding: 1em 0.5em;
    }
}

@media screen and (min-width: 641px) {
    .padded, .padded2 {
        padding: 1em;
    }
}

/*
 * Allow space for side menu
 */
@media screen and (min-width: 641px) {
    .padded {

    }

    .padded #bodycopy {
        margin-left: 15em;
    }
}

/*
 * 2 column layout
 */
@media screen and (min-width: 641px) and (max-width: 976px) {
    .padded2 #bodycopy {
        margin-left: 15em;
    }

    #column2c1, #column2c2 {
        width: 100%;
    }
}

@media screen and (min-width: 977px) {
    .padded2 #bodycopy {
        margin-left: 15em;
    }

    #column2c1 {
        float: left;
        width: 49%;
    }

    #column2c2 {
        float: right;
        width: 49%;
    }
}

/*
 * 1 column layout
 */

@media screen and (min-width: 785px) {

    .menuonleft {
        display: inline;
    }

    .menuabove {
        display: none;
    }

    img.personwithcardimage {
        float: right;
    }

    body.index img.personwithcardimage {
        display: none;
    }
}

@media screen and (min-width: 851px) {
    body.index img.personwithcardimage {
        float: right;
        display: inline-block;
    }
}

@media screen and (min-width: 641px) and (max-width: 784px) {

    .padded #bodycopy {
    }

    .menuonleft {
        display: inline;
    }

    .menuabove {
        display: none;
    }

    img.personwithcardimage {
        float: right;
    }

    body.index img.personwithcardimage {
        display: none;
    }
}

@media (max-width: 640px) {
    #bodycopy {
        margin-left: 0;
    }

    /* this is the right floated people image */
    img.personwithcardimage {
        display: none;
    }

    .menuonleft {
        display: none;
    }

    .menuabove {
        display: inline;
    }
}

/* contact us */
@media (max-width: 340px) {
    body.contact {
        font-size: 0.95em;
    }
}

/*--------------------------------------------------------------------------------------------------------------
 * Menu
 */

@media screen and (min-width: 641px) {

    #menu {
        float: left;
    }

    #menu.click-tabset {
        float: none;
    }

    .padded button#ClickMenu {
        display: none;
    }

    div.field ::placeholder {
        visibility: hidden;
    }

    div.field label {
        display: inline-block;
    }

    #navpanel {
        display: inline-block;
        font-size: 0.833em;
        margin-bottom: 2em;
    }

    #navpanel > li.logonform, #navpanel > li.international, #navpanel > li.copyright {
        display: block;
    }

    #navpanel > li.logon, #navpanel > li.custnew {
        display: none;
    }

    body.settings .added {
        height: auto;
    }

    body.colours .tabcontent .vertical-fill {
        min-height: 0;
    }
}

/**
 * Tabs are collapsed into a dropdown menu
 */
@media screen and (max-width: 706.5px) {
    .click-tabset button#ClickMenu {
        display: inline-block;
        width: 298px;
        text-align: left;
    }

    div.field ::placeholder {
        visibility: visible;
    }

    .mobile-show {
        display: inline-block;
    }

    .mobile-block {
        display: block;
    }

    .mobile-hide,
    .tabmain > .design > .wrapper > .step.mobile-hide,
    .editorBlock div.hint.mobile-hide {
        display: none;
    }

    div.field.placeholder label {
        display: none;
    }

    div.field.mobile input,
    div.field.mobile select,
    div.field.placeholder input,
    div.field.placeholder select {
        line-height: 24px;
        height: 24px;
        font-size: 14px;
        max-width: 100%;
    }

    body.cards div.field.mobile input,
    body.cards div.field.mobile select,
    body.cards div.field.placeholder input,
    body.cards div.field.placeholder select {
        line-height: 100%;
        font-size: 1em;
        height: 18px;
        max-width: 100%;
    }

    body.editor div.fieldset.FontOptions div.field.Font label {
        display: block;
        margin-top: 4px;
    }

    body.editor div.field.nbName label,
    body.editor div.field.nbColour {
        display: block;
    }

    body.editor div.fieldset.BlockPosition {
        margin-top: 10px;
    }

    body.editor div.fieldset.Position div.label {
        margin-bottom: 4px;
        display: block;
    }

    body.editor div.fieldset.FontOptions div.field.Colour label,
    body.editor div.field.ImageNo label {
        display: block;
    }

    body.editor div.fieldset.FontOptions div.field.Size label {
        width: auto;
    }

    /*div.search input#searchinput {*/
    /*max-width: 100%;*/
    /*}*/

    /*div.search button {*/
    /*vertical-align: top;*/
    /*}*/

    body.editor td.dropdownShow,
    body.settings td.dropdownShow {
        display: table-cell;
    }

    body.editor span.dropdownShow,
    body.settings span.dropdownShow {
        display: inline;
    }

    body.editor li.dropdownShow,
    body.settings li.dropdownShow {
        display: list-item;
    }

    body.editor.dropdownHide,
    body.settings .dropdownHide {
        display: none;
    }

    body.editor .added.tabborder,
    body.settings .added.tabborder {
        border: none;
    }

    body.editor .added > .tabcontent > .top,
    body.settings .added > .tabcontent > .top {
        text-align: left;
        border-top: 1px solid #999;
        padding-top: 4px;
    }

    body.fonts .added > .tabcontent > .top {
        text-align: left;
        border-top: 1px solid #999;
        padding-top: 4px;
        margin-bottom: 10px;
    }

    body.editor .added > .tabcontent > .bottom,
    body.editor .added .bottom,
    body.settings .added > .tabcontent > .bottom,
    body.settings .added .bottom {
        text-align: left;
    }

    body.editor .tabmain,
    body.settings .tabmain {
        border: none;
    }

    body.editor .added > .tabcontent > .bottom a,
    body.settings .added > .tabcontent > .bottom a {
        margin-bottom: 4px;
    }

    body.editor table.tabmain td.left,
    body.editor table.tabmain td.middle,
    body.editor table.tabmain td.right,
    body.editor table.tabmain td.left,
    body.editor table.tabmain td.middle,
    body.editor table.tabmain td.right {
        padding: 0;
    }

    body.fonts .tabmain td.left {
        background: #f2f2f2;
        border: 1px solid #999;
    }

    body.fonts .tabmain td.left {
        padding: 0;
        width: 284px;
        height: auto;
    }

    body.fonts .tabmain td.middle,
    body.fonts .tabmain td.right {
        padding: 0;
        width: auto;
        height: auto;
    }

    nav#menu ul#tabs {
        width: 282px;
    }

    body.logon .tabheader,
    body.editor .tabheader,
    body.settings .tabheader {
        height: auto;
    }

    body.settings .added > .tabcontent {
        padding: 0;
    }

    body.colours .tabcontent.vertical-fil,
    body.colours .added > .tabcontent > .vertical-fill {
        min-height: 0;
        margin: 10px 0;
    }

    body.colours .tabmain .tabmain {
        min-height: 0;
    }

    body.settings .added {
        margin: 10px 0;
    }

    body.fonts iframe#FontsAdded {
        width: 280px;
    }

    body.fonts iframe#FontsDisplay {
        width: 100%;
    }

    body.fonts td.left div.options {
        margin-left: 4px;
    }

    body.fonts iframe#FontsList {
        width: 95%;
        margin-top: 10px;
        margin-left: 4px;
    }

    body.fonts .tabmain td.middle {
        margin-top: 10px;
    }

    table.tabmain {
        margin: 0;
    }

    div.field label {
        display: block;
        margin-bottom: 4px;
    }
}

/**
 * Tabs are displayed
 */
@media screen and (min-width: 707px) {

    .mobile-show {
        display: none;
    }

    #backtext {
        display: block;
        margin-top: 4px;
    }

    .mobile-block {
        display: inline-block;
    }

    .click-tabset button#ClickMenu {
        display: none;
    }

    div.field ::placeholder {
        visibility: hidden;
    }

    body.settings div.dropdownShow,
    body.settings td.dropdownShow,
    body.settings span.dropdownShow,
    body.settings li.dropdownShow {
        display: none;
    }

    body.logon .tabheader,
    body.settings .tabheader,
    body.editor .tabheader {
        height: 64px;
    }

    td.dropdownHide {
        display: table-cell;
    }

    div.dropdownHide {
        display: block;
    }

    #menu.click-tabset {
        float: none;
    }

    #navpanel.click-tabset {
        display: inline-block;
        font-size: 0.833em;

        border: none;
        border-radius: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        /*float: none;*/
        /*position: static;*/
    }

    .click-tabset {
        padding-top: 6px;
        padding-bottom: 10px;
        display: table;
        width: 100%;
        border-collapse: collapse;
    }

    .tabmain > .click-tabset {
        margin-top: 0;
    }

    .tabmain ul.click-tabset {
        margin-top: 6px;
        padding-bottom: 10px;
        display: table;
        width: 100%;
        border-collapse: collapse;
    }

    .click-tabset .tabgrey, .click-tabset .tabwhite {
        height: 18px;
        display: table-cell;
    }

    .click-tabset .tabgrey.dropdownShow ,
    .click-tabset .tabwhite.dropdownShow {
        display: none;
    }

    .dropdowntoggle {
        display: none;
    }

    .dropdown-menu.click-tabset {
        position: static;
        box-shadow: none;
        -webkit-box-shadow: none;
    }

    nav#menu ul#tabs {
        width: 100%;
    }

    body.settings .added > .tabcontent > .top {
        margin: 4px 0;
        text-align: center;
    }

    body.settings .added > .tabcontent > .bottom {
        text-align: center;
        margin: 10px 0 4px;
    }

    body.settings .added > .tabcontent {
        padding: 0 10px;
        height: 100%;
    }

    body.settings .tabcontent.vertical-fill {
        min-height: 420px;
    }

    body.colours .tabmain .tabmain {
        min-height: 472px;
    }

    body.fonts iframe#FontsList {
        width: 151px;
        margin: 6px 0;
        min-height: 500px;
    }

    body.fonts iframe#FontsDisplay {
        width: 100%;
        min-height: 500px;
    }

    body.fonts iframe#FontsAdded {
        width: 151px;
        min-height: 495px;
    }

    body.fonts .tabmain td.left {
        padding: 0 5px 10px 10px;
        float: none;
        vertical-align: top;
        width: 151px;
        height: 100%;
        background: #f2f2f2;
        border: 1px solid #999;
    }

    body.fonts .tabmain td.middle {
        vertical-align: top;
        float: none;
        padding: 0 10px;
    }

    body.fonts .tabmain td.right {
        float: none;
        vertical-align: top;
        width: 165px;
        padding: 0 5px 0 0;
    }

    body.cards .tabtext {
        height: 1px;
    }

}

#taboptions {
    margin: 0;
}

body.settings nav#menu,
body.editor nav#menu,
body.logon nav#menu {
    display: block;
    width: auto;
    padding: 0;
    margin: 0;
    height: 22px;
}

body.logon .tabheader,
body.settings .tabheader,
body.editor .tabheader {
    display: block;
    float: none;
    width: auto;
    padding: 0;
    margin: -1px 0 0 0;
}

@media screen and (max-width: 640px) {

    /*#menu.tabset {*/
    /*float: left;*/
    /*}*/

    .subhead .tradingname {
        display: none;
    }

    #menu, button#ClickMenu {
        display: inline-block;
        font-size: medium;
        /*width: 100%;*/
    }

    div.field ::placeholder {
        visibility: visible;
    }

    button#ClickMenu {
        padding: 0.4em;
    }

    button#ClickMenu img {
        float: left;
    }

    button#ClickMenu i {
        float: right;
    }

    #navpanel > li.logonform,
    #navpanel > li.copyright {
        display: none;
    }

    #navpanel > li.international {
        display: block;
    }

    #navpanel > li.logon, #navpanel > li.custnew {
        display: block;
    }

    #navpanel {
        top: 4.25em;
        /*width: 100%;*/
    }

    /*#tabs, #taboptions {*/
    /*!*width: 100%;*!*/
    /*width: 284px;*/
    /*}*/

    #navpanel li.home {
        display: none;
    }

    #navpanel li.home + li {
        border: none;
    }

    #header {
        text-align: left;
    }

    table.international {
        display: none;
    }

}

/* mobile menu dropdown button */
#ClickMenu i {
    font-size: xx-large;
    color: gray;
}

#navpanel > li:first-child {
    border-top: none;
}

#navpanel > li, #tabs > li, #taboptions > li {
    text-align: left;
    font-weight: bold;
    border-top: solid 1px #666666;
    text-transform: uppercase;
    margin-left: 0.75em;
    margin-right: 0.75em;
}

#navpanel > li {
    padding-top: 6px;
    padding-bottom: 6px;
}

#navpanel li.menuitem a, #navpanel li.faqmenu ul {
    padding-left: 0;
}

#navpanel li.menuitem a {
    display: inline-block;
    width: 100%;
}

#navpanel li.menuitem:hover,
fieldset.logon a:hover,
#navpanel li.menuitem:hover a,
#tabs li.menuitem.tabgrey:hover,
#tabs li.menuitem.tabgrey a:hover,
#taboptions li.menuitem.tabgrey:hover,
#taboptions li.menuitem.tabgrey a:hover {
    font-weight: bold;
    background: url("/images/navhover.gif") no-repeat right center;
    background-color: #f5f5f5;
    transition: none;
    -webkit-transition: none;
}

#navpanel li.selected, #tabs.menuitem.tabwhite {
    font-weight: bold;
    background: url("/images/navselected.gif") no-repeat right 5px;
}

#navpanel li.home a {
    padding: 0;
    text-align: center;
    margin-bottom: 1em;
}

#navpanel a, #tabs a, #taboptions a {
    font-weight: normal;
    text-decoration: none;
    color: #000000;
}

/* logon */
fieldset.logon {
    font-weight: normal;
    color: #666666;
    border: none;
    margin: 0;
    padding: 0;
    text-transform: none;
}

fieldset.logon input, fieldset.logon a {
    display: block;
    width: 147px;
}

fieldset.logon input:first-child {
    margin-bottom: 0.25em;
}

/* international */
#international {
    text-align: center;
    font-size: 0.833em;
}

#navpanel li #international a {
    font-weight: normal;
    text-decoration: none;
    color: #000000;
    padding-left: 24px;
    margin-left: 1em;
    margin-right: 1em;
}

#navpanel li #international a:first-child {
    margin-left: 0;
    margin-right: 0;
}

#navpanel li #international a:last-child {
    margin-left: 0;
    margin-right: 0;
}

#international a.AUS {
    background: url("/images/flagausfade.gif") no-repeat left center;
    background-size: 22px 13px;
}

#international a.AUS:hover {
    background: url("/images/flagaus.gif") no-repeat left center;
    background-size: 22px 13px;
    font-weight: bold;
}

#international a.NZL {
    background: url("/images/flagnzlfade.gif") no-repeat left center;
    background-size: 22px 13px;
}

#international a.NZL:hover {
    background: url("/images/flagnzl.gif") no-repeat left center;
    background-size: 22px 13px;
    font-weight: bold;
}

#international a.USA {
    background: url("/images/flagusafade.gif") no-repeat left center;
    background-size: 22px 13px;
}

#international a.USA:hover {
    background: url("/images/flagusa.gif") no-repeat left center;
    background-size: 22px 13px;
    font-weight: bold;
}

#international a.GBR {
    background: url("/images/flaggbrfade.gif") no-repeat left center;
    background-size: 22px 13px;
}

#international a.GBR:hover {
    background: url("/images/flaggbr.gif") no-repeat left center;
    background-size: 22px 13px;
    font-weight: bold;
}

/* faq/blog section */
#navpanel li.faqmenu {
    text-transform: none;
}

#navpanel li.faqmenu ul {
    list-style-type: none;
}

.faqheader {
    color: #888888;
    text-transform: uppercase;
}

#navpanel li.faqmenu ul > li > a {
    display: block;
    padding: 3px 0;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333333;
    white-space: nowrap;
}
#navpanel li.faqmenu ul > > li > a:hover, #navpanel li.faqmenu ul > > li > a:focus {
    text-decoration: none;
    color: #262626;
    background-color: #f5f5f5;
}

/* copyright */
#copyright {
    margin-top: 2em;
    margin-bottom: 1em;
    line-height: 120%;
    text-align: center;
    text-transform: none;
    font-weight: normal;
}

#copyright img {
    margin-bottom: 1em;
}

.navlink {
    margin-right: 0.25em;
}

.navlink a {
    font-weight: bold;
}

/*#info div.navlink {*/

/*}*/

#info div.copyright {
    margin-bottom: 4px;
}

#info div.copyright span {
    display: inline-block;
    margin-top: 4px;
}

#info a:hover span.subtle {
    color: black;
}

#info .footernav {
    white-space: nowrap;
    margin: 4px 0;
}

#info .footernav div.navlink {
    display: inline-block;
    margin-top: 4px;
}

#info .company {
    margin-bottom: 4px;
}

#info .contact {
    margin-bottom: 4px;
}

#info .contact span {
    margin-top: 4px;
    display: inline-block;
}

#info .findus {
    margin-top: 4px;
}

#info .findus a {
    margin-top: 4px;
    display: inline-block;
    white-space: nowrap;
}

/*--------------------------------------------------------------------------------------------------------------
 * Sitemap
 */

ul.faqlist {
    padding-left: 0;
    list-style-type: none;
}

@media screen and (min-width: 1025px) {
    ul.faqlist {
        -webkit-column-count: 4; /* Chrome, Safari, Opera */
        -moz-column-count: 4; /* Firefox */
        column-count: 4;
    }
}

@media screen and (min-width: 801px) and (max-width: 1024px) {
    ul.faqlist {
        -webkit-column-count: 3; /* Chrome, Safari, Opera */
        -moz-column-count: 3; /* Firefox */
        column-count: 3;
    }
}

@media screen and (min-width: 585px) and (max-width: 800px) {
    ul.faqlist {
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        column-count: 2;
    }
}

@media screen and (max-width: 584px) {
    ul.faqlist {
        -webkit-column-count: 1; /* Chrome, Safari, Opera */
        -moz-column-count: 1; /* Firefox */
        column-count: 1;
    }
}

p.faqlist {
    border-bottom: solid 1px gray;
}

/*--------------------------------------------------------------------------------------------------------------
 * Footer
 */

#info {
    border-top: 1px solid #999999;
    text-align: center;
    margin-bottom: 1em;
    /*margin-top: 1em;*/
    width: 100%;
    float: left;
    font-size: 0.833em;
    color: #888888;
    line-height: 120%;
}

#info a {
    text-decoration: none;
    color: #888888;
}

#info a:link {
    color: #888888;
}

#info a:hover {
    color: #000000;
    text-decoration: none;
}

/* order matters make sure the @media override is after the base definition */
body.margin #info {
    border-top: none;
}

@media screen and (max-width: 706.5px) {
    body.margin #info {
        border-top: 1px solid #999999;
        /*padding-top: 10px;*/
    }
}

/*--------------------------------------------------------------------------------------------------------------
 * Editor
 */
body.margin {
    margin: 10px 20px;
}

body.margin .subhead {
    margin-bottom: 6px;
}

.blockheader, .addheader {
    background-color: #e6e6e6;
    padding: 10px;
    border-top: 1px solid darkgray;
    border-bottom: 1px solid darkgray;
}

.addblock .addheader > .wrapper {
    display: inline-block;
    text-align: left;
}

.addblock > .wrapper {
    display: inline-block;
    text-align: center;
}

.blockheader > .wrapper {
    display: inline-block;
    text-align: left;
    padding: 0;
}

.tabmain .design > .size {
    margin-top: 20px;
    text-align: center;
}

.tabmain .design > .size > .select {
    display: inline-block;
}

.tabmain .design > .size > .proof {
    display: inline-block;
    padding: 10px;
}

.tabmain .design > .size > .continue {
    display: inline-block;
    padding: 10px;
}

.continue.show {
    display: inline-block!important;
}

.continue.hide {
    display: none;
}

.tabmain .design > .wrapper {
    text-align: center;
}

.tabmain .design > .wrapper > .proof {
    display: inline-block;
    vertical-align: middle;
}

.tabmain .design > .wrapper > .step {
    display: inline-block;
    vertical-align: middle;
    text-align: right;
}

.proof .designno {
    display: inline-block;
    vertical-align: top;
    font-size: 0.833rem;
    text-align: center;
}

.tabmain .step {
    font-size: 10px;
    line-height: 150%;
    margin-right: 10px;
}

.step-subhead {
    display: inline;
}

table.editorBlock td td.ImageElement,
table.editorBlock td td.TextAreaElement,
table.editorBlock td td.TextAreaOptions,
table.editorBlock td td.TextElement,
table.editorBlock td td.TextOptions {
    padding-right: 10px;
    padding-bottom: 10px;
    display: inline-block;
    width: auto;
}

table.editorBlock td td.ImageElement td {
    display: inline-block;
    width: auto;
    padding-right: 10px;
}

table.editorBlock td td.TextOptions div.SuggestedFont,
table.editorBlock td td.TextAreaOptions div.SuggestedFont {
    font-size: 10px;
    /*padding: 1px;*/
    vertical-align: middle;
}

table.editorBlock td td.TextOptions div.field,
table.editorBlock td td.TextAreaOptions div.field {
    padding: 3px 0;
    vertical-align: middle;
}

table.editorBlock td td.TextOptions div.field label,
table.editorBlock td td.TextAreaOptions div.field label {
    width: 66px;
}

table.editorBlock td td.TextOptions.advanced div.field label,
table.editorBlock td td.TextAreaOptions.advanced div.field label {
    width: 77px;
}

table.editorBlock td td.TextOptions div.field div.nowrap,
table.editorBlock td td.TextAreaOptions div.field div.nowrap {
    display: inline-block
}

table.editorBlock td td.TextOptions div.field div.nowrap label,
table.editorBlock td td.TextAreaOptions div.field div.nowrap label {
    width: auto;
}

table.editorBlock img {
    margin: 10px 0;
}

table.editorBlock a img {
    margin: 0;
}

table.editorBlock tr.tbl1headtr td span {
    display: inline-block;
}

@media screen and (max-width: 598px) {
    .tabmain .design > .wrapper > .proof,
    .tabmain .design > .wrapper > .step {
        display: block;
        vertical-align: middle;
        text-align: center;
        margin-bottom: 5px;
    }

    .step-subhead {
        display: none;
    }
}

.tabmain .disclaimer {
    font-size: 10px;
    text-align: center;
    color: #666666;
    display: inline-block;
    vertical-align: top;
    margin-right: 20px;
}

.tabmain .bleed {
    font-size: 10px;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    margin-left: 20px;
}

.tabmain .return {
    font-size: 10px;
    text-align: center;
    padding-top: 10px;
}

.tabmain .addblock {
    text-align: left;
}

.tabmain .return > span:first-child {
    margin-right: 20px;
}

.blockheader .wrapper div {
    display: inline-block;
}

.blockheader .proof {
    float: right;
}

.blocktitle {
    font-size: 12px;
    font-weight: bold;
    text-align: left;
    margin-right: 10px;
    text-transform: uppercase;
}

.block {
    background-color: #f2f2f2;
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: left;
}

.block .name label {
    font-weight: bold;
    margin-right: 20px;
    display: inline-block;
}

.block .hints, .block .suggested, .block .addfont, .block .addcolour {
    font-size: 10px;
    padding-left: 10px;
}

.block .element {
    padding-left: 10px;
    border-bottom: 1px solid darkgray;
    padding-top: 10px;
    padding-bottom: 10px;
}

.block .element .main {
    display: inline-block;
    margin-right: 20px;
    vertical-align: top;
    width: 350px;
    text-align: left;
}

.block .element.Image .main {
    display: inline-block;
    margin-right: 20px;
    vertical-align: top;
    text-align: left;
}

.block .element .options {
    display: inline-block;
    vertical-align: top;
    text-align: left;
}

.blocks.artwork .block .element .options {
    width: 465px;
}

.block .element.Text .main input, .block .element.TextArea .main textarea {
    width: 346px;
}

.block .element .option .em {
    white-space: nowrap;
}

.block .element .mm, .block .element .percent {
    margin-right: 10px;
}

.block .element label {
    display: inline-block;
}

.blocks.artwork .block .element.Text .options > div > label:first-child,
.blocks.artwork .block .element.TextArea .options > div > label:first-child {
    min-width: 75px;
}

.element.Image .upload {
    text-align: right;
}

.block .element .option input {
    width: auto;
}

.block .element.Image .main input {
    width: 30px;
    margin-top: 20px;
}

.block .element.Image .thumbnail {
    float: left;
}

.block .element.Image .upload {
    float: right;
}

.block .element .options > div {
    margin-top: 4px;
}

.block .element .options > .colour > .tint,
.addblock .addoption > .colour,
.addblock .addoption > .background,
.addblock .addoption > .thickness {
    display: inline;
}

.addblock .addheader {
    background-color: #ffffcc;
    padding: 10px;
    border-top: 1px solid darkgray;
    border-bottom: 1px solid darkgray;
}

.addblock {
    background-color: #f2f2f2;
    border-bottom: 1px solid darkgray;
}

.addblock .addoption {
    text-align: left;
    padding-left: 10px;
}

.addblock .addoption.type {
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: none;
}

.addblock .addoption.name {
    display: block;
}

.addblock .addoption {
    display: none;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid darkgray;
}

.addblock .addoption.addbutton {
    border-top: 1px solid darkgray;
    padding-top: 10px;
    padding-bottom: 20px;
}

.addoption .label {
    font-weight: bold;
}

.addoption.addtext .label,
.addoption.addbox .label,
.addoption.addline .label,
.addoption.addimage .label {
    margin-right: 20px;
}

.addblock .addheader .addtitle {
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    margin-right: 20px;
}

/*
 * Tabs
 */

.click-tabset .tabgrey span, .click-tabset .tabwhite span {
    display: inline-block;
    vertical-align: middle;
    margin-top: 3px;
    margin-left: 6px;
}

/*.tabmain > p:first-child, .tabmain > div:first-child, .tabmain > table:first-child {*/
/*padding-top: 10px;*/
/*}*/

/*.tabmain > p:last-child, .tabmain > div:last-child, .tabmain > table:last-child {*/
/*padding-bottom: 10px;*/
/*}*/

.tabheader {
    border-left: 1px solid #999999;
    border-right: 1px solid #999999;
    padding: 0 10px;
    display: table;
    width: 100%;
    border-collapse: collapse;
}

.tabmain {
    border-bottom: 1px solid #999999;
    border-left: 1px solid #999999;
    border-right: 1px solid #999999;
    padding-bottom: 10px;
}

body.colours table.tabmain {
    padding: 0;
    margin: 0 -1px 10px 0;
    height: 100%;
}

table.tabmain {
    padding: 0;
    margin: 0 -1px 10px 0;
}

div.tabmain {
    clear: both;
    display: table;
    width: 100%;
    border-collapse: collapse;
    padding: 0 10px 10px;
    margin-bottom: 0;
}

.tabmain > .tabmain > div {
    padding: 0;
}

.tabmain > div {
    padding-left: 10px;
    padding-right: 10px;
}

.tabmain > .click-tabset {
    display: block;
    width: auto;
}

.tabmain > .tabmain {
    padding-top: 10px;
    margin: 0 10px 10px 10px;
    display: block;
    width: auto;
}

.tabtext {
    float: left;
    padding: 10px 10px 0 10px;
}

.tablogo {
    float: right;
    padding: 10px;
}

@media screen and (max-width: 836px) {
    body.logon .tablogo,
    body.settings .tablogo,
    body.editor .tablogo {
        display: none;
    }
}

@media screen and (min-width: 837px) {
    body.logon .tablogo,
    body.settings .tablogo,
    body.editor .tablogo {
        display: block;
    }
}

.tborder {
    border-top: solid 1px #999999;
}

.lborder {
    border-left: solid 1px #999999;
}

.rborder {
    border-right: solid 1px #999999;
}

.click-tabset .tabtext {
    border-left: solid 1px #DDDDDD;
    border-right: solid 1px #DDDDDD;
}

.tabborder {
    background: #FFFFFF;
    border: 1px solid #999999;
}

.tabgrey {
    background-color: #dddddd;
    border: 1px solid #999999;
}

.tabgrey:hover {
    background-color: #bbbbbb;
    cursor: pointer;
}

.tabover {
    vertical-align: middle;
    background-color: #bbbbbb;
    border: 1px solid #999999;
    cursor: pointer;
}

.tabwhite {
    background-color: #ffffff;
    border: 1px solid;
    border-color: #999999 #999999 white #999999;
}

.tabnotab {
    vertical-align: middle;
    background: transparent url(/images/tabnotab.gif) no-repeat;
    border-right: 1px solid #999999;
}

/*body.fonts .tabmain {*/
/*position: fixed;*/
/*position: absolute;*/
/*top: 122px;*/
/*bottom: 10px;*/
/*left: 20px;*/
/*right: 20px;*/
/*display: block;*/
/*width: auto;*/
/*height: auto;*/
/*margin-right: -1px;*/
/*}*/

body.colours table.tabmain td.left {
    padding: 0 5px 10px 10px;
    float: none;
    vertical-align: top;
    width: 100%;
    height: 100%;
}

body.colors table.tabmain td.right {
    padding: 0 10px 10px 5px;
    float: none;
    height: 100%;
    vertical-align: 100%;
}

table.tabmain td.right {
    padding: 0 10px 10px 5px;
    float: none;
    vertical-align: top;
    height: 100%;
}

body.fonts div.tabmain {
    display: block;
    width: auto;
    margin-right: -1px;
}

body.settings .tabmain .tabmain > .tabcontent {
    padding: 10px;
}

body.settings .dropdown.click-tabset {
    padding: 0;
    margin: 0;
}

body.settings .added {
    /*vertical-align: top;*/
    height: 100%;
}

body.settings .field label {
    display: inline-block;
    width: 80px;
}

body.settings .field {
    margin-top: 10px;
}

/*body.settings .dropdownShow {*/
/*display: none;*/
/*}*/

/*body.settings td.dropdownHide {*/
/*display: table-cell;*/
/*}*/

/*body.settings li.dropdownHide {*/
/*display: list-item;*/
/*}*/

@media screen and (min-width: 544.5px) and (max-width: 706.5px) {

    body.editor nav#menu {
        height: 60px;
    }

    body.settings .tabmain .tabmain > .tabcontent {
        padding: 0;
    }

    body.settings .dropdown.click-tabset {
        margin: 6px 0;
    }

    body.fonts .tabmain td.middle {
        margin-top: 10px;
    }
}

@media screen and (max-width: 706.5px) {

    /*.subhead .tradingname {*/
    /*display: none;*/
    /*}*/

    body.settings td.left,
    body.settings td.middle,
    body.settings td.right {
        float: none;
        display: block;
    }

    body.fonts > div.tabmain {
        padding: 0;
    }

    body.settings .dropdownShow {
        display: block;
    }

    body.settings .dropdownHide {
        display: none;
    }

    .click-tabset button#ClickMenu {
        display: inline-block;
        font-size: medium;
        text-align: left;
    }

    div.field ::placeholder {
        visibility: visible;
    }

    .click-tabset button#ClickMenu {
        padding: 0.4em;
    }

    .click-tabset button#ClickMenu img {
        /*float: left;*/
    }

    .click-tabset button#ClickMenu i {
        float: right;
    }

    .click-tabset .tabgrey, .click-tabset .tabwhite {
        display: block;
        font-size: 0.833em;
        border: none;
    }

    .click-tabset .tabgrey {
        background-color: white;
    }

    .click-tabset .tabwhite {
        background-color: #dddddd;
    }

    .tabmain .click-tabset {
        text-align: left;
        padding: auto;
        margin-left: 0;
    }

    .tabmain .step {
        display: none;
    }

    .tabwhite:hover {
        background-color: #dddddd;
    }

    #taboptions .tabwhite {
        display: none;
    }

    .tablogo {
        display: none;
    }

    .tabtext {
        padding: 0.5em 0;
    }

    .tabheader {
        padding: 0;
        border: none;
    }

    body.logon div.tabmain,
    body.editor div.tabmain,
    body.settings div.tabmain,
    body.editor div.tabmain > div.tabmain,
    body.settings div.tabmain > div.tabmain {
        border: none;
        padding: 10px 0 0 0;
        text-align: left;
    }

    .tabmain > p, .tabmain > div {
        padding: 10px 0 0;
    }


    body.editor div.tabmain > div.contents {
        padding: 0;
        border: none;
    }

    .tabmain .step {
        text-align: left;
    }

    #tabs > li, #taboptions > li {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    /**********/

    body.cards .tabmain > .tabmain .content,
    body.cards .tabmain > .tabmain .content .searchbarContainer,
    body.cards .tabmain > .tabmain .content .searchbarContainer .searchbar {
        padding: 0;
        margin: 0;
        border: none;
    }

    body.cards .tabmain > .tabmain .content .designsContainer {
        padding: 0;
        margin-top: 10px;
        margin-bottom: 0;
        margin-left: 0;
        margin-right: 0;
        border: none;
    }

    body.cards .tabmain > .click-tabset {
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 10px;
    }

    .settings .tabtext,
    .logon .tabtext,
    .editor .tabtext {
        float: none;
    }

    .tabtext {
        margin: 0;
    }

    body.cards .tabmain,
    body.cards .tabheader {
        border: none;
        padding: 0;
        margin: 0;
    }

    body.settings table.tabmain td.left {
        padding: 0;
        float: none;
        vertical-align: top;
        width: auto;
        height: auto;
    }

    body.settings table.tabmain td.right {
        height: auto;
        margin: 0 10px;
    }

    body.settings .tabheader {
        float: none;
        display: block;
        height: auto;
        width: 100%;
    }
}

table.wrapper1 {
    width: 100%;
    margin-top: 6px;
}

table.wrapper1 td {
    padding: 0;
}

table.wrapper2 {
    width: 100%;
}

table.wrapper2 td {
    padding: 5px;
}

table.wrapper3 {
    width: 100%;
}

table.wrapper3 td {
    padding: 10px;
}

table.form {
    width: auto;
    border-collapse:collapse;
}

table.form td {
    padding: 4px;
}

.CartMessage {
    color: black;
    display: inline-block;
    font-size: 0.833em;
}

table.priceTable td {
    padding: 4px;
    border: 1px solid white;
}

table.priceTable td input {
    margin-right: 4px;
}

div.cardNameForm label {
    display: inline-block;
    width: 125px;
}

div.cardNameForm {
    padding: 15px;
}

.dropdown.open #taboptions li.first, .dropdown.open #tabs li.first {
    border: none;
}

/*form > .tabmain {*/
/*border-top: 1px solid #999999;*/
/*width: 100%;*/
/*}*/

form > .tabmain > table.form {
    width: 100%;
}

table.form td {
    padding-left: 10px;
    padding-right: 10px;
}

@media screen and (max-width: 544.5px) {
    .blockheader .wrapper div {
        display: block;
        padding-bottom: 10px;
    }

    .blockheader .proof {
        display: inline;
        float: none;
    }

    .tabmain .step {
        display: none;
    }

    .settings .tabmain .tabmain > .tabcontent {
        padding: 0 10px;
    }

    body.logon .dropdown.click-tabset,
    body.settings .dropdown.click-tabset,
    body.editor .dropdown.click-tabset {
        margin: 6px 10px;
    }

    body.editor.cardsfront .dropdown.click-tabset,
    body.editor.cardsback .dropdown.click-tabset {
        margin: 6px 0;
    }

    body.editor div.tabmain > div.contents {
        padding: 0 10px;
        border: none;
    }

    .addblock .multiline {
        display: block;
        margin-top: 10px;
    }

    form > .tabmain {
        text-align: left;
        padding: 0;
        margin-left: 10px;
        margin-right: 10px;
    }

    table.form td {
        padding: 0;
    }

    .tabmain {
        text-align: left;
        padding: 0;
        margin: 0;
    }

    body.logon div.tabmain,
    body.editor div.tabmain {
        clear: both;
        /* display: table; */
        /* width: 100%; */
        width: auto;
        display: block;
        /*border-collapse: collapse;*/
        /*padding: 0 10px 10px;*/
        /*margin-bottom: 0;*/
    }

    body.editor .tabmain > .tabmain {
        margin: 0;
        padding: 0;
    }

    body.margin {
        margin: 0;
    }

    .tabmain.artwork .block .element .main,
    .tabmain.artwork .block .element .options,
    .tabmain.artwork .block .blockheader .wrapper,
    .tabmain.artwork > .size > .wrapper,
    .addblock .addheader .wrapper,
    .addblock .addoption {
        width: 340px;
    }

    .block .element .main,
    .block .element .options,
    .blockheader .wrapper {
        /*width: 330px;*/
        /*width: 315px;*/
        width: 340px;
    }

    .block .element .main,
    .block .element .options,
    .addoption {
        padding-left: 10px;
    }

    .bockheader, .addheader {
        padding: 0;
    }

    .tabmain > div {
        padding-top: 0;
    }

    body.cards .tabmain > .tabmain .content {
        margin-left: 10px;
    }

    body.cards .tabmain > .tabmain {
        margin: 0;
        padding: 0;
        text-align: left;
    }

    .block .element .options {
        margin-top: 10px;
    }

    .block .element.Text .options label:first-child {
        width: 28px;
    }

    .block .element.TextArea .options label:first-child {
        width: 64px;
    }

    .tabmain.artwork .block .elements .options > .colour > .tint {
        display: block;
        margin-top: 4px;
    }

    .addblock .addoption > .colour,
    .addblock .addoption > .background,
    .addblock .addoption > .thickness {
        display: block;
        margin-top: 10px;
    }

    .tabmain.artwork .block .elements .options > .colour > .tint > label.tint {
        width: 75px;
    }

    .blockheader > .wrapper .align label {
        width: 75px;
    }

    .tabmain.artwork .block .element.Text .options label,
    .tabmain.artwork .block .element.TextArea .options label {
        width: auto;
    }

    .block .element.Text .main input, .block .element.TextArea .main textarea {
        width: 334px;
    }

    .block .element .color label {
        width: auto;
    }

    .tabmain > .proof > img {
        padding-left: 10px;
        padding-top: 10px;
    }

    .tabmain .block > .hints {
        text-align: center;
        padding-left: 10px;
        width: 340px;
    }

    .tabmain > .size > .wrapper,
    .tabmain .blockheader > .wrapper {
        padding-left: 10px;
    }

    .blockheader {
        padding-left: 0;
        padding-right: 0;
        padding-top: 10px;
    }

    .subhead {
        padding-left: 10px;
    }

    .tabtext {
        padding-left: 10px;
        padding-right: 10px;
    }

    .dropdown, .tabmain > .click-tabset {
        margin-bottom: 10px;
    }

    .padded .dropdown {
        margin: 0;
    }

    .tabmain .design > .wrapper > .step {
        display: none;
    }

    body.settings nav#menu,
    body.editor nav#menu,
    body.logon nav#menu {
        margin-left: 10px;
        height: 60px;
        display: block;
        width: auto;
        padding: 0;
    }

    body.fonts .tabmain td.left,
    body.fonts .tabmain td.middle,
    body.fonts .tabmain td.right {
        margin: 0 10px;
    }

    body.fonts > div.tabmain {
        width: 100%;
    }

    body.fonts .tabmain td.middle {
        margin-top: 10px;
    }
}

@media screen and (min-width: 545px) and (max-width: 752px) {

    .blockheader .wrapper div {
        display: block;
        padding-bottom: 10px;
    }

    .blockheader .proof {
        display: inline;
        float: none;
    }

    .tabmain .step {
        display: none;
    }

    .blockheader .wrapper .move label,
    .blockheader .wrapper .align label {
        width: 75px;
    }

    .block .element .main {
        margin-right: 0;
    }

    .tabmain.artwork .block .element .options {
        margin-top: 20px;
    }

    .tabmain.artwork .block .element .main,
    .tabmain.artwork .block .element .options,
    .tabmain.artwork .block .blockheader .wrapper,
    .tabmain.artwork > .size > .wrapper,
    .addblock .addheader .wrapper,
    .addblock .addoption {
        width: 465px;
    }

    .block .element .main,
    .block .element .options,
    .blockheader .wrapper {
        width: 350px;
    }

    .tabmain .size .proof {
        padding-top: 10px;
    }

    .addblock .multiline {
        display: block;
        margin-top: 10px;
    }

    body.settings nav#menu,
    body.editor nav#menu,
    body.logon nav#menu {
        display: block;
        width: auto;
        padding: 0;
    }

}

@media screen and (min-width: 920px) {

    .tabmain.artwork .blockheader > .wrapper,
    .tabmain.artwork .size > .wrapper,
    .tabmain.artwork .addblock .wrapper {
        width: 835px;
    }

    .tabmain .blockheader > .wrapper,
    .tabmain .size > .wrapper,
    .tabmain .addblock > .wrapper {
        width: 670px;
    }

    .tabmain > .size .select {
        float: left;
        padding-bottom: 10px;
    }

    .tabmain > .size .proof {
        float: right;
    }

    .addblock .multiline {
        display: inline;
    }
}

@media screen and (min-width: 753px) and (max-width: 919px) {
    .tabmain .blockheader > .wrapper,
    .tabmain .size > .wrapper,
    .tabmain .addblock > .wrapper {
        width: 670px;
    }

    .tabmain > .size .select {
        float: left;
    }

    .tabmain > .size .proof {
        float: right;
    }

    .addblock .multiline {
        display: inline;
    }
}

/*--------------------------------------------------------------------------------------------------------------
 * Processing Spinner
 */

#VerificationSpinner div.inline {
    display: inline-block;
}

#processing {
    display: none;
}

#processing .head {
    margin-top: 0;
    margin-left: 60px;
    padding: 0;
    position: relative;
    top: -6px;
}

#processing td {
    vertical-align: top;
}

#processing #spinner {
    margin: 0;
    padding: 0;
    float: left;
}

#processing .head {
    margin-top: 0;
    margin-left: 60px;
    padding: 0;
    position: relative;
    top: -6px;
}

#processing td {
    vertical-align: top;
}

#processing #spinner {
    margin: 0;
    padding: 0;
    float: left;
}

/*--------------------------------------------------------------------------------------------------------------
 * Offers
 */

#steps {
    float: left;
}

@media screen and (max-width: 924px) {
    body.promotions #OfferBox, body.premium-business-cards #OfferBox {
        margin-top: 2em;
        float: right;
    }
}

@media screen and (min-width: 925px) {
    body.promotions #OfferBox, body.premium-business-cards #OfferBox {
        position: absolute;        margin-top: 2em;
        right: 1em;
    }
}

@media screen and (max-width: 764px) {
    body.index #OfferBox {
        margin-top: 1.5em;
    }
}

@media screen and (min-width: 765px) {
    body.index #OfferBox {
        position: absolute;
        margin-top: 1.2em;
        right: 1em;
    }
}

#offerPlaceholder {
    clear: both;
}

em.offer-price, .offer-price {
    color: #cc3300;
    font-style: normal;
}

.offerbox {
    position: relative;
    border: 1px solid #f2f2f2;
    border-radius: 4px;
}

.offerbox:hover {
    background: rgb(211, 229, 204);
}
.offerboxnumber {
    position: absolute;
    right: -5px; top: -5px;
    background-color: #cc3300;
    color: white;
    width: 24px; height: 24px;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    border: thin solid white;
    font-size: 15px;
}

.offerlistbox {
    position: absolute;
    top: -5px;
    left: -477px;
    width: 450px;
    min-height: 100px;
    max-height: 500px;
    /* Prev Value: background-color: #a9a9a9; */
    background-color: #e2e2e2;
    padding: 8px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    z-index: 1022;
    border: thin solid black;
    box-shadow: 0 0 20px #555;
    overflow: auto;
    font-size: smaller;
}

.offerlistbox input {
    margin-left: 6px;
}

/* we also add an invisible element that is a little larger than the actual box,
so that when the user moves their mouse over to the box, the gap between the "Special Offers" box
and the offerlistbox does not result in a "hover out" event firing */
.offerlistbox_mask {
    position: absolute;
    top: -28px;
    left: -560px;
    width: 560px;
    height: 80px;
}
/* the :after psudo element along with a rotation is used to create a little arrow that points from the
popped out box back to the "Special Offers" box, this won't work with IE8 and less, but that's fine */
.offerlistbox_mask:after {
    content: '';
    /* background: #a9a9a9; */
    background-color: #e2e2e2;
    width: 15px;
    height: 15px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    position: absolute;
    z-index: 1023;
    right: 1px;
    top: 40px;
    margin-left: -5px;

    border-right: thin solid black;
    border-bottom: thin solid black;
}

.offerlistbox div {
    color: black;
    background-color: white;
    border: thin solid black;
    margin: 2px;

}

.offertitle, .offertitle a {
    line-height: 22px;
    color: #CC3300;
    font-size: 14px;
}
.offerlistbox div .offersubtitle {
    margin-left: 22px;
}

#bad_offerlistbox_mask:after,
#bad_offerlistbox {
    /* Prev value : background-color: #fff6c9; */
    background-color: #e2e2e2;
}

#bad_offerlistbox div .offertitle {
    margin-left: 22px;
}

.error {
    color: red;
    margin-left: 19px;
    font-size: 1.2em;
}
.greyedout {
    color: #aaa;
}
.offerlistbox div .greyedout .offertitle {
    color: #aaa;
}

.offeroption input[type="radio"] {
    margin-left: 10px;
    vertical-align: top;
    position: relative;
    top: 3px;
}
.offeroption span, .offeroption label {
    vertical-align: middle;
}

.offeroption a {
    vertical-align:top;
    position: relative;
    top: -2px;
}

.offeroption input {
    vertical-align:middle;
}

ul.offerdotpoints {
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    font-size: 11px;
    line-height: 14px;
}

ul.offerdotpoints li {
    font-size: 11px;
    line-height: 130%;
}

.landscapeLabel, .portraitLabel {
    margin-left: 0.5em;
}

/*--------------------------------------------------------------------------------------------------------------
 * Panels
 */
.panelhead {
    background-color: #e6e6e6;
    vertical-align: top;
    padding: 2px;
    padding-left: 8px;
    margin-top: 6px;
}

.panelbody {
    background-color: #f2f2f2;
    border: 1px solid #e6e6e6;
    vertical-align: top;
    padding: 20px;
    text-align: left;
    margin-bottom: 18px;
}

.tablepanel.international {
    margin-top: 3px;
}

.tablepanel {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #666666;
}

.tablepanelbg {
    width: 100%;
    background-color: #f2f2f2;
    border: 1px solid #cccccc;
    margin-bottom: 15px;
}

.tablepaneltd {
    padding: 10px;
}

/*--------------------------------------------------------------------------------------------------------------
 * Buttons
 */

.imgclose {
    margin-right: 3px;
    margin-top: 3px;
    float: right;
    width: 16px;
    height: 14px;
    border: none;
}

.panelspacer{
    clear: both;
    font-size: 1px;
}

.imgbutton{
    vertical-align: middle;
    border: none;
    width: 77px;
    height: 22px;
}

a.bluebutton {
    color:white;
    background-color:#0077B0;
    border: 2px solid;
    border-left-color: #4a96c0;
    border-top-color: #4a96c0;
    border-bottom-color: #003755;
    border-right-color: #003755;
    padding: 3px;
    text-decoration: none;
    margin: 4px;
    text-align: center;

    white-space: nowrap
}

a.smallbutton {
    font-size: 0.75em;
    padding: 2px;
}

/*--------------------------------------------------------------------------------------------------------------
 * Fixes
 */

/* Fix for "Feedback" link in bottom right */
.atlwdg-SUBTLE {
    z-index: 1000;
}

#by {
    clear: both;
}

img.cardtype {
    margin-right: 4px;
}

/* google tracking pixel fix */
iframe[name='google_conversion_frame'] {
    height: 0 !important;
    width: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    margin-top: -13px;
    float: left;
}

/*--------------------------------------------------------------------------------------------------------------
 * ABN/NZBN Validation
 */
.abnValidation {
    background: white;
    text-align: left;
    font-size: 0.833em;
    padding: 10px;
}

.abnValidation ul {
    margin-top: 4px;
    list-style-type: none;
}

.abnValidation ul li {
    margin: 0;
    padding: 0;
}

.abnValidation label {
    font-weight: bold;
}

/*--------------------------------------------------------------------------------------------------------------
 * Tiny Box
 */
.tbox {
    position:absolute;
    display:none;
    padding:14px 17px;
    z-index:900
}
.tinner {
    padding:15px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #fff url(/incs/tinybox2/images/preload.gif) no-repeat 50% 50%;
    border-right: 1px solid #333;
    border-bottom:1px solid #333
}

.tmask {
    position:absolute;
    display:none;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #000;
    z-index: 800
}

.tclose {
    position:absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background: url(/incs/tinybox2/images/close.png) no-repeat
}

.tclose:hover {
    background-position:0 -30px
}

/*--------------------------------------------------------------------------------------------------------------
 * Home/Landing Page Options
 */
.tophtml {
    max-width: 932px;
}

.bottomhtml {
    max-width: 932px;
}

#options {
    vertical-align: top;
    clear: both;
}

.option {
    margin-top: 12px;
    padding: 6px;
    background-color: #f2f2f2;
    border: 1px solid #cccccc;
    border-radius: 4px;
    max-width: 920px;
}

.option:first-child {
    margin: 0;
}

.option fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.option div.subtle.upper {
    font-size: x-large;
    letter-spacing: 6px;
}

.option fieldset div {
    margin-bottom: 0.2em;
}

.option input, .option select {
    width: 17em;
    vertical-align: middle;
}

.option input[name='DesignNo'] {
    width: 5em;
}

.option input[name='CorpSearch'] {
    max-width: 14em;
}




/*#navpanel a:hover {*/
    /*transition: none;*/
    /*-webkit-transition: none;*/
/*}*/

/*a.btn.subtle, button.btn.subtle, input.btn.subtle, .option .btn.subtle, .prices .btn.subtle {*/
    /*padding: 4px 10px;*/
/*}*/

button.btn.dropdowntoggle {
    background-color: white!important;
    color: black;
}

button.btn.dropdowntoggle.hilite {
    background-color: white!important;
    color: #cc3300!important;
}

.optiondetail {
    vertical-align: top;
    margin-top: 0.5em;
    max-width: 31em;
}

.optiondetail label {
    font-size: smaller;
}

.optiondetail h2 {
    margin-top: 0.5em;
}

@media screen and (min-width: 980px) and (max-width: 1084px) {
    .optiondetail {
        /*width: 28em;*/
    }
}

@media screen and (min-width: 980px) {

    .optiondetail {
        display: inline-block;
        margin-left: 1em;
    }

    .optiondesign {
        float: left;
    }

    div.landscape.BCeps {
        min-height: 266px;
    }

    div.landscape.SQUIZ {
        min-height: 108px;
    }

    div.portrait.BCeps {
        min-height: 378px;
    }

    div.portrait.SQUIZ {
        min-height: 201px
    }
}

.optiondesign {
    display: inline-block;
}

.industrydesign {
    vertical-align: top;
    margin-top: 1em;
    display: inline-block;
    margin-right: 1em;
}

@media screen and (max-width: 370px) {
    .optiondesign nobr, .industrydesign nobr {
        font-size: 0.85em;
    }
}

.optiondesign img, .industrydesign img {
    display: block;
    margin-top: 0.25em;
}

.optiondesign a, .industrydesign a {
    text-transform: uppercase;
}

img.landscape {
    width: 378px;
    height: 225px;
}

div.BackOption.SQUIZ img {
    width: 161px;
    height: 89px;
    cursor: pointer;
}

div.BackOption.BCeps img.selected,
div.BackOption.SQUIZ img.selected {
    border: 2px solid black;
}

div.BackOption.BCeps img.Landscape {
    width: 253px;
    height: 150px;
}

div.BackOption.BCeps img.Portrait {
    width: 150px;
    height: 253px;
}

div.BackOption {
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
}

div.BackOption {
    display: inline-block;
}

img.landscape.SQUIZ {
    width: 313px;
    height: 170px;
}

img.portait.BCeps {
    width: 225px;
    height: 378px;
}

/*--------------------------------------------------------------------------------------------------------------
 * Shopping Cart
 */
#CartTable {
    width: 100%;
    border: solid 1px gray;
}

#CartTable td {
    padding: 4px;
}

#CartTable td.price,
#CartTable td.value {
    text-align: right;
}

#CartTable td.cello {
    text-align: left;
}

#CartTable tr.delivery td,
#CartTable tr.setup td,
#CartTable tr.discount td,
#CartTable tr.total td {
    background-color: #cccccc;
    text-align: right;
}

#CartTable span.label,
#CartTable tr.total td.value {
    font-weight: bold;
}

#CartTable tr.total td {
    border-top: 1px solid #999999;
}

#CartTable tr.checkout td {
    background-color: #999999;
    text-align: right;
}

#CartTable tr.checkout span:last-child {
    margin-left: 20px;
}

#cartDivWrapper {
    margin-bottom: 20px;
}

/*--------------------------------------------------------------------------------------------------------------
 * Price Matrix
 */
#pricematrix {
    float: left;
}

#pricematrix tr.header td {
    font-weight: bold;
}

#pricematrix tr.header td.extra,
#pricematrix tr.header td.boxprice {
    font-weight: normal;
    font-size: smaller;
}

#pricematrix td.price,
#pricematrix td.clientprice,
#pricematrix td.offerprice {
    text-align: right;
}

#pricematrix tr.priceline td.price {

}


/*--------------------------------------------------------------------------------------------------------------
 * Other
 */

@media screen and (min-width: 980px) and (max-width: 1084px) {

}

#cardsdiv a {
    font-size: 0.833em;
    font-weight: bold;
}

#cardsdiv div, #cardsdiv p {
    font-size: 0.833em;
}

.corp-cards {
    display: inline-block;
}

body.prices .quoteform {
    margin-top: 0.5em;
    max-width: 345px;
}

body.cards .createOwn {
    display: block;
    padding: 0;
    margin: 0;
}

@media screen and (max-width: 490.5px) {
    body.cards .createOwn {
        display: inline-block;
        padding: 0;
        margin: 0;
    }
}

body.cardsfront .EditBlockTop .EditBlockHeading,
body.cardsfront .EditBlockTop .EditBlockHeading {
    font-weight: bold;
    text-transform: uppercase;
    height: 25px;
    padding: 4px 8px;
}

body.cardsfront .EditBlockTop .EditBlockBody,
body.cardsfront .EditBlockTop .EditBlockBody {
    padding: 4px 8px;
}

body.cardsfront .EditBlockTop div.field,
body.cardsback .EditBlockTop div.field {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

body.cardsfront .EditBlockTop div.field div.nowrap,
body.cardsback .EditBlockTop div.field div.nowrap {
    display: inline-block;
    vertical-align: middle;
}

body.cardsfront .EditBlockTop div.field label,
body.cardsback .EditBlockTop div.field label {
    display: inline-block;
}

body.cardsfront .EditBlockTop div.field input,
body.cardsfront .EditBlockTop div.field select,
body.cardsback .EditBlockTop div.field input,
body.cardsback .EditBlockTop div.field select {
    display: inline-block;
}

body.cardssave #OfferBox {
    float: right;
    margin-top: 10px;
}

body.cards .landscapeContainer, body.cards .portraitContainer {
    display: inline-block;
}

body.images #uploadForm {
    margin-bottom: 1em;
}

body.main div.offeroption div.form-check {
    display: inline-block;
}

body.main div.offeroption .btn {
    margin-top: 1px;
}