/* ----------------------
   Content CSS
---------------------- */

body { color:#000000; font-size:1em; font-family:Helvetica,Arial,Sans-serif; background-color:#f6f6f6; }

blockquote { margin:16px; }
hr { border:none 0; margin:30px 0; border-top:1px solid #454545; height:0; }
p { padding:0; margin:0 0 16px 0; }

h1 { color:#454545; font-size:1.4em; margin-top:0; font-weight:bold; line-height:1em; }
h2 { color:#454545; font-size:1.2em; margin-top:0; font-weight:bold; line-height:1em; }
h3 { color:#454545; font-size:1em; margin-top:0; font-weight:bold; line-height:1em; }
h2.red, h3.red { color:#b10000; }
h4, h5, h6 { color:#454545; font-size:1em; margin-top:0; }
.panel_padding h2 {margin-top: 40px;}

a,
a:visited { color:#B10000; text-decoration:underline; outline:none; }
a:focus,
a:hover { color:#E32121; text-decoration:underline; }
a:active { color:#ff5454; text-decoration:underline; }

.center { text-align:center; }
.centre { text-align:center; }
.left {text-align: left;}
.right {text-align: right;}
.justify { text-align:justify; }
.middle > * { vertical-align: middle;}

.wrap {
    white-space: normal;
}

.uppercase { text-transform:uppercase; }

.flag {color:#B10000; font-weight: bold;}
.flaggreen {color:green; font-weight: bold;}

.status_1 {background-color: #9999cc;}
.status_2 {background-color: #a4c673;}
.status_3 {background-color: #ffe7a1;}

/* Special Text Options */
.main-highlight { color: #CC0000; }

/* ----------------------
   Sub Menu
---------------------- */
.submenu {
    margin-left: 5px;
    margin-top:5px;
    padding: 16px;
    background-color: #454545;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    text-align: center;
}

.submenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;

}

.submenu li {display: inline-block; }
.submenu ul li:first-child { margin-top:0; }
.submenu ul li a,
.submenu ul li a:visited { color:#FFFFFF; font-weight:bold; text-decoration:none; padding:11px 12px; }
.submenu ul li a:hover,
.submenu ul li a:focus { color:#ee1c24; }
.submenu ul li a:active { color:#ff6666; }


/* ----------------------
   Messages
---------------------- */
/* Error Messages */
.content-error { border:1px solid #B10000; padding:8px 9px; margin-top:5px; margin-bottom:5px; background:#F4DADA url("content-error.gif") left top repeat-x; }
.content-error p { margin:0; padding:0; color:#2B2B2B; font-weight:bold; }
.content-error p strong { color:#B10000; }

/* Information Messages */
.content-info { border:1px solid #FFCC00; padding:8px 9px; margin-top:5px; margin-bottom:5px; background:#FFEFB0 url("content-info.gif") left top repeat-x; }
.content-info p { margin:0; padding:0; color:#2B2B2B; font-weight:bold; }
.content-info p strong { color:#FF9900; }

/* Notice Messages */
.content-message { border:1px solid #00CC00; padding:8px 9px; margin-top:5px; margin-bottom:5px; background:#C5FFC5 url("content-message.gif") left top repeat-x; }
.content-message p { margin:0; padding:0; color:#2B2B2B; font-weight:bold; }
.content-message p strong { color:#008000; }

/* Compatibility Messages */
.content-compatibility { border:1px solid #B200B2; padding:8px 9px; margin-top:5px; margin-bottom:5px; background:#FFd6FF url("content-compatibility.gif") left top repeat-x; }
.content-compatibility p { margin:0; padding:0; color:#2B2B2B; font-weight:bold; }
.content-compatibility p strong { color:#B200B2; }

/* ----------------------
   Shop
---------------------- */

#shop_summary {margin-bottom:5px; background-color:#ee1c24; border: 1px solid #b10000;}
#shop_summary ul { list-style:none; margin:0; padding:0 0 0 27px; background:url("shop-summary-arrow.gif") 12px top no-repeat; min-height:25px; float:left; }
#shop_summary ul li { float:left; color:#ffffff;  font-weight:bold; padding:5px 10px 5px 9px;}
#shop_summary ul li a,
#shop_summary ul li a:visited { text-decoration:none;display:block; color:#ffffff;  font-weight:bold;}
#shop_summary ul li a:hover { text-decoration:underline; color:#ffffff;  font-weight:bold;}


/* ----------------------
   Data Tables
---------------------- */

/* As Table */

.data_narrow {
    border-collapse:collapse;
    border: 1px solid #D9D9D9;
    margin-top: 15px;
    margin-right: 5px;
    margin-left: auto;
    margin-right: auto;
}

.data_narrow th, .data_narrow td {
    margin: 0;
    padding: 2px 5px;
    border-spacing: 0px;
}

.data_narrow th.right {
    text-align: right;
}

.data_narrow th.centre {
    text-align: center;
}

.data_narrow tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

.data_narrow tbody tr:nth-child(even) {
    background-color: #e8e8e8;
}

.data_narrow tr:hover td {
    background-color: #d9d9d9;
}

.data_narrow th {
    font-weight: bold;
    vertical-align: top;
    text-align: left;
    padding: 6px;
}

.data_narrow th {
    background-color: #EDEDED;
}

.data_narrow tr:first-child th {
    background: #EDEDED url("rowstrong.gif") left top repeat-x;
}

.data_narrow tr:last-child th {
    border-bottom: 1px solid #D9D9D9;
}

.data_narrow td {
    vertical-align: middle;
    white-space: nowrap;
}

.data_narrow td.wrap {
    white-space: normal;
}

.data_narrow td img {
    border: 0;
    vertical-align: middle;
    display: inline-block;
}

/* As Divs */
.data-table {
    display:table;
    width:auto;
    border-collapse:collapse;
    border: 1px solid #d9d9d9;
    padding: 0;
    border-spacing:0;
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
}

.data-table-100 {
    width: 100%;
}

.data-thead {display:table-header-group; padding: 0;margin: 0;}

.data-tbody {display:table-row-group; padding: 0;margin: 0;}

.data-tr, .data-tr-no-hover {
    display:table-row;
    width:auto;
    clear:both;
    padding:0;
    margin:0;
}

.data-thead .data-tr, .data-thead .data-tr-no-hover {background-color:#333333;}

.data-tbody .data-tr:nth-child(odd), .data-tbody .data-tr-no-hover:nth-child(odd) { background-color: #ffffff; }

.data-tbody .data-tr:nth-child(even), .data-tbody .data-tr-no-hover:nth-child(even) { background-color:#e8e8e8; }

.data-tbody .data-tr:hover { background-color:#d9d9d9; }

.data-tr .sort_action, .data-tr-no-hover .sort_action {width: 30px; }

#sort_order > .data-tr > .sort_action, #sort_order > .data-tr-no-hover > .sort_action {
    background-image: url("arrow_ns.png");
    background-repeat: no-repeat;
    background-position:50% 45%;
}

.data-th, .data-th-centre, .data-th-right, .data-td, .data-td-full, .data-td-centre, .data-td-right {
    display:table-cell;
    vertical-align: middle;
    margin: 0;
    padding: 2px 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-spacing: 0px;
}

.data-th, .data-th-centre, .data-th-right {
    background: #ededed url("rowstrong.gif") left top repeat-x;
    font-weight:bold;
}

.data-td, .data-td-full, .data-td-centre, .data-td-right {
    color:#333333;
    vertical-align: middle;
}

.data-td img, .data-td-full img, .data-td-centre img, .data-td-right img {display: inline-block;}

.data-th-centre, .data-td-centre {text-align: center;}

.data-th-right, .data-td-right {text-align: right;}

/* As Divs */
.list-table {
    display:table;
    width:auto;
    border-collapse:collapse;
    border: 1px solid #d9d9d9;
    padding: 0;
    border-spacing:0;
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
}

.list-thead {display:table-header-group; padding: 0;margin: 0;}

.list-tbody {display:table-row-group; padding: 0;margin: 0;}

.list-tr {
    display:table-row;
    width:auto;
    clear:both;
    padding:0;
    margin:0;
}

.list-thead .list-tr {background-color:#333333;}

.list-tbody .list-tr:nth-child(odd) { background-color: #ffffff; }

.list-tbody .list-tr:nth-child(even) { background-color:#e8e8e8; }

.list-tbody .list-tr:hover { background-color:#d9d9d9; }

.list-th, .list-th-centre, .list-td, .list-td-centre {
    display:table-cell;
    vertical-align: middle;
    margin: 0;
    padding: 2px 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-spacing: 0px;
}

.list-th, .list-th-centre {
    background: #ededed url("rowstrong.gif") left top repeat-x;
    font-weight:bold;
}

.list-td, .list-td-centre {
    color:#333333;
    vertical-align: middle;
}

.list-td img, .list-td-centre img {display: inline-block;}

.list-th-centre, .data-td-centre {text-align: center;}
.data-td-right {text-align: right;}


/* ----------------------
   Forms
---------------------- */

form fieldset { padding:10px; margin:0 0 15px 0; border:1px solid #AAAAAA; }
form fieldset:first-of-type {margin-top: 25px;}
form fieldset legend { color:#454545; font-size:1.23em; font-weight:bold; font-family:Helvetica,Arial,sans-serif;}

.form-field, .form-field-noresize, .form-field-help { color:#333333; background-color:#FFFFCC; font-size:10pt; font-weight:normal; border: 1px solid; }
.form-field-right, .form-field-noresize-right { color:#333333; background-color:#FFFFCC; font-size:10pt; font-weight:normal; padding-right: 5px; text-align: right; }
.form-field-help { width: -moz-calc(100% - 38px); width: -webkit-calc(100% - 38px); width: calc(100% - 38px); }
.read-only { background-color:#CCCCCC; border:1px solid!important; }

.ff-form { width:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.ff-table { width:100%; }
.ff-row { padding: 5px 5px 5px 0; clear: both; min-height:12px; }
.ff-label { width: 40%; float: left; text-align: right; font-weight:bold; padding-right: 7px; }
.ff-field { width: 58%; float: left; }
.ff-label-25, .ff-field-25 { width: 25%; float: left; text-align: right; font-weight:bold; padding-right: 7px; }
.ff-field-75 { width: 73%; float: left; }
.ff-input { float: left; text-align: left; margin-right:10px; }
.ff-input { -webkit-align-items: center; align-items: center; }
.ff-tickbox { width: 20px; float: left; }
.ff-tickbox-text { margin-left: 20px; padding-left: 7px; }
.ff-label::after, .ff-label-25::after { content: ":"; }
.ff-mandatory::before { content: "* "; }
.ff-button { width:100%; text-align: center; }
.form-checkbox { color:#333333; font-size:10pt; font-weight:normal; }
.form-textarea { color:#333333; background-color:#FFFFCC; font-size:10pt; font-weight:normal; width:100%; }
.ff-explainer,
.ff-explainer-left { float: left; text-align: left; font-style: italic; }
.ff-explainer-top { float:none; text-align: left; font-style: italic; }
.ff-explainer-tickbox { margin-left: 20px; padding-left: 7px; font-style: italic; }
.ff-input,
.ff-explainer,
.ff-explainer-left,
.ff-explainer-top { -webkit-align-items: center; align-items: center; }
.ff-explainer-left { padding-right: 10px }

.ff-table .hide { display:none; }
.ff-table .show { display:inherit;}

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

.button-list {
    text-align: center;
}

.button-list ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    line-height: 2.5em;
}

.button-list ul li {
    display: inline;
}

.button { font-size:9pt; font-weight:bold; color:#FFFFFF!important; text-decoration:none!important; max-width:100%; margin:0; cursor:pointer; padding:3px 20px 3px 6px; display:block; background:url("button.png") right center no-repeat; }

.button2-long { font-size:12pt; font-weight:bold; color:#FFFFFF!important; text-decoration:none!important; max-width:100%; min-width: 95px; margin:0 5px 10px 0; cursor:pointer; padding:2px 20px 2px 6px; display:inline-block; background:url("button.png") right center no-repeat; }

.button-long { font-size:10pt; font-weight:bold; color:#FFFFFF; text-align:center; min-width:130px; padding: 1px; margin:8px 7px 2px 7px; cursor:pointer; font-family:Arial,Helvetica,sans-serif; }

.button-orange { border-bottom:1px solid #613a00; border-top:1px solid #f1bc6c; border-left:1px solid #eba336; border-right:1px solid #915700; background-color:#8C7412; }
.button-orange:hover,
.button-orange:focus { background-color:#715E0F; }
.button-orange:active { background-color:#5E4E0D; }

.button-red { border-bottom:1px solid #4c0606; border-top:1px solid #d47474; border-left:1px solid #c54141; border-right:1px solid #740909; background-color:#b50e0e; }
.button-red:hover,
.button-red:focus { background-color:#820a0a; }
.button-red:active { background-color:#4f0606; }

.button-blue { border-bottom:1px solid #072d48; border-top:1px solid #106bab; border-left:1px solid #438abd; border-right:1px solid #0a446c; background-color:#106bab; }
.button-blue:hover,
.button-blue:focus { background-color:#0b4a78; }
.button-blue:active { background-color:#062b45; }

.button-green { border-bottom:1px solid #294105; border-top:1px solid #a4c673; border-left:1px solid #83b13f; border-right:1px solid #3e6208; background-color:#629c0c; }
.button-green:hover,
.button-green:focus { background-color:#426908; }
.button-green:active { background-color:#223604; }

.button-purple { border-bottom:1px solid #884DC4; border-top:1px solid #874BC2; border-left:1px solid #BC9BDD; border-right:1px solid #A97ED3; background-color:#9966CC; }
.button-purple:hover,
.button-purple:focus { background-color:#7439AE; }
.button-purple:active { background-color:#A072CF; }

.button-index a,
.button-index a:visited,
.button-index a:hover,
.button-index a:focus { color:#FFF; text-decoration:none; padding:4px 0; }

.button-forward { border-bottom:1px solid #294105; border-top:1px solid #a4c673; border-left:1px solid #83b13f; border-right:1px solid #3e6208; background-color:#629c0c; text-transform: uppercase; }
.button-forward:hover,
.button-forward:focus { background-color:#426908; }
.button-forward:active { background-color:#223604; }

.button-backward { border-bottom:1px solid #613a00; border-top:1px solid #f1bc6c; border-left:1px solid #eba336; border-right:1px solid #915700; background-color:#8C7412; }
.button-backward:hover,
.button-backward:focus { background-color:#715E0F; }
.button-backward:active { background-color:#5E4E0D; }

.button-edit { border-bottom:1px solid #072d48; border-top:1px solid #106bab; border-left:1px solid #438abd; border-right:1px solid #0a446c; background-color:#106bab; }
.button-edit:hover,
.button-edit:focus { background-color:#0b4a78; }
.button-edit:active { background-color:#062b45; }

.button-cancel { border-bottom:1px solid #4c0606; border-top:1px solid #d47474; border-left:1px solid #c54141; border-right:1px solid #740909; background-color:#b50e0e; }
.button-cancel:hover,
.button-cancel:focus { background-color:#820a0a; }
.button-cancel:active { background-color:#4f0606; }

.button-delete { border-bottom:1px solid #4c0606; border-top:1px solid #d47474; border-left:1px solid #c54141; border-right:1px solid #740909; background-color:#b50e0e; }
.button-delete:hover,
.button-delete:focus { background-color:#820a0a; }
.button-delete:active { background-color:#4f0606; }

.button-process { border-bottom:1px solid #884DC4; border-top:1px solid #874BC2; border-left:1px solid #BC9BDD; border-right:1px solid #A97ED3; background-color:#9966CC; }
.button-process:hover,
.button-process:focus { background-color:#7439AE; }
.button-process:active { background-color:#A072CF; }

/* ----------------------
   Filter Options
---------------------- */
.filter-options {
}

.filter-options ul {
    list-style-type: none;
    margin: 0;
    padding: 0;

}

.filter-options li {display: inline-block; }

/* ----------------------
   CSS smaller than 800px, all devices
---------------------- */
@media handheld and (max-width: 800px), screen and (max-width: 800px)
{

    .no_large { display:none; }

    /* ----------------------
       Data Tables
    ---------------------- */

    /* As table */
    .data_narrow table,
    .data_narrow thead,
    .data_narrow tbody,
    .data_narrow th,
    .data_narrow td,
    .data_narrow tr { display: block; }

    table.data_narrow {width:100%;}

    .data_narrow thead tr { position: absolute; top: -9999px; left: -9999px; }
    .data_narrow tr { border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; }
    .data_narrow td { position: relative; padding-left: 45%; border: none; border-bottom: 1px solid #ccc;  white-space:normal; text-align:left; }
    .data_narrow td.full { position: relative; padding-left: 2px; border: none; border-bottom: 1px solid #ccc;  white-space:normal; text-align:center; }
    .data_narrow td:before { position: absolute; width: 40%; top: 3px; left: 3px; padding-right: 10px; font-weight: bold; }

    /* As Divs */
    .data-thead { position: absolute; top: -9999px; left: -9999px; }
    .data-table,
    .data-tbody,
    .data-tr, .data-tr-no-hover,
    .data-td, .data-td-full, .data-td-centre, .data-td-right, .data-th, .data-th-centre, .data-th-right,
    .data-tr .sort_action {width: 100%; display: block;}
    .data-td-centre, .data-td-right {text-align: left;}
    .data-td, .data-td-centre, .data-td-right {position: relative; padding-left: 45%; border: none; border-bottom: 1px solid #ccc;  white-space:normal;}
    .data-td-full {border: none; border-bottom: 1px solid #ccc;  white-space:normal;}
    .data-td:before, .data-td-handling_fee:before, .data-td-total:before, .data-td-centre:before, .data-td-right:before { position: absolute; width: 40%; top: 3px; left: 3px; padding-right: 10px; font-weight: bold; }
    .data-tr, .data-tr-no-hover { border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; }

    /* ----------------------
       Forms
    ---------------------- */

    .ff-label, .ff-label-25, .ff-field-25 { width:auto; float: none; padding-right: 0; text-align: left; }
    .ff-field, .ff-field-75 { width:auto; float: none; }
    .ff-input { top: 0; -ms-transform: none; -webkit-transform: none; transform: none; }
    .ff-explainer,
    .ff-explainer-left,
    .ff-explainer-top { top: 0; -ms-transform: none; -webkit-transform: none; transform: none; }

    .ff-label::after, .ff-label-25::after { content: ""; }
    .ff-mandatory::after { content: " *"; }
    .ff-mandatory::before {content: "";}

}

/* ----------------------
   CSS smaller than 600px, all devices
---------------------- */
@media handheld and (max-width: 600px), screen and (max-width: 600px)
{
    .no_medium { display:none; }

    .panel_padding h2 {margin-top: 20px;}

    /* ----------------------
   Data Tables
   ---------------------- */

    /* As Divs */
    .list-thead { position: absolute; top: -9999px; left: -9999px; }
    .list-table,
    .list-tbody,
    .list-tr,
    .list-td, .list-th, .list-th-centre, .list-td-centre {width: 100%; display: block;}
    .list-td, .list-td-centre {border: none;  white-space:normal;}
    .list-tr { border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; }
    .list-td h2 {text-align: center;}

}

/* ----------------------
   CSS smaller than 420px, all devices
---------------------- */
@media handheld and (max-width: 420px), screen and (max-width: 420px)
{
    .no_small { display:none; }

    .small {font-size: 0.8em;}

    .ff-label { width:auto; float: none; padding-right: 0; text-align: left; top: 0; -ms-transform: none; -webkit-transform: none; transform: none; }
    .ff-input { top: 0; -ms-transform: none; -webkit-transform: none; transform: none; margin-left: 0; padding-left: 0; display: inline-block; }

    .data_narrow td.file_name { padding-left: 0%; text-align:center; }
    div.file_name { padding-left: 0%; text-align:center; }


    .form-field { width: 100%; }
    .form-field-help { width: -moz-calc(100% - 38px); width: -webkit-calc(100% - 38px); width: calc(100% - 38px); }

}