﻿html, body
{
    background: #fff;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
}

div.ui-datepicker
{
    font-size: 13px;
}

h1, h2, h3, h4
{
    color: #375184;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

h1
{
    font-size: 1.8em;
}

h2
{
    font-size: 1.4em;
}

h3
{
    font-size: 1.3em;
}

h4
{
    font-size: 1.2em;
    font-weight: bold;
}

#body
{
}

.logon-center-container
{
    margin: 192px auto;
    padding: 8px;
    border: 1px solid #aaa;
    width: 320px;
    background: #eee; /* Old browsers */
    background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* IE10+ */
    background: linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}

/* Form styles */

.logon-welcome-wrapper
{
    width: 320px;
    margin-bottom: 8px;
}

.logon-welcome-header
{
    width: auto;
    margin-top: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid #22314E;
    text-align: left;
}

.logon-welcome-message
{
    color: #22314E;
    font-size: 0.8em;
}

.logon-container
{
    width: 100%;
}

.logon-wrapper
{
    width: 100%;
    margin-bottom: 8px;
}

.logon-label
{
    color: #375184;
}

.logon-field
{
}

.editor-container
{
    display: table;
    border-spacing: 1px;
    width:750px;
}

.editor-wrapper
{
    display: table-row;
}

.editor-label
{
    display: table-cell;
    background-color: #22314e;
    color: #fff;
    font-size: 0.9em;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    padding: 6px;
    vertical-align: middle;
    
    background: -moz-linear-gradient(left,  #22314e 0%, #375184 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#22314e), color-stop(100%,#375184)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #22314e 0%,#375184 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #22314e 0%,#375184 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #22314e 0%,#375184 100%); /* IE10+ */
    background: linear-gradient(left,  #22314e 0%,#375184 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#22314e', endColorstr='#375184',GradientType=1 ); /* IE6-9 */
}

.editor-field
{
    display: table-cell;
    background-color: #ddd;
    color: #000;
    font-size: 1.1em;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    padding: 6px;
}

.editor-fieldset
{
    width: 750px;
    margin-bottom: 32px;
}

.wide-editor-fieldset
{
    width: 750px;
    margin-bottom: 32px;
}

.filter-container
{
}

.filter-wrapper
{
    display: inline-block;
}

.filter-label
{
    display: block;
}

.filter-field
{
    display: block;
}

/* Form input styles */

.single-line
{
    width: 240px;
}

.wide-editor-fieldset .single-line
{
    width: 480px;
}

.multi-line, .rte
{
    width: 240px;
    height: 120px;
}

.wide-editor-fieldset .multi-line, .wide-editor-fieldset .rte
{
    width: 480px;
    height: 240px;
}

.text-box, .datetime-picker
{
    border: 1px solid #22314e;
    font-size: 1em;
    color: Black;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

select
{
    border: 1px solid #22314e;
    font-size: 1em;
    height: 1.5em;
    padding-right: 3em;
    color: Black;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    overflow: hidden;
    background: #fff;
    background-image: url('/Content/Styles/Base/Icons/16x16/select_blue.png');
    background-repeat: no-repeat;
    background-position: right 0;
    -webkit-appearance: none;
}

select.input-validation-error {
    background-image: url('/Content/Styles/Base/Icons/16x16/select_blue.png');
    background-repeat: no-repeat;
    background-position: right 0;
}

select:hover, select:active
{
    background-position: right -16px;
}

@-moz-document url-prefix() {
    select
    {
        background: #fff;
        background-image: none;
        padding: 0;
    }
}

#internet-explorer-only select, #internet-explorer-only select:hover, #internet-explorer-only select:active
{
    background: #fff;
    background-image: none;
    padding: 0;
}

option[selected]
{
    background: #b6dffd;
}

#internet-explorer-only option[selected]
{
    background: #fff;
}

input[type="submit"], input[type="button"] 
{
    display: inline-block;
    margin: 0 4px 2px 0;
    border: 1px solid #aaa;
    font-size: 1.1em;
    color: Black;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    padding: 0.2em 0.6em;
}

/* Display styles */

.display-container
{
    display: table;
    border-spacing: 1px;
}

.display-wrapper
{
    display: table-row;
}

.display-label
{
    display: table-cell;
    background: #22314e;
    color: #fff;
    font-size: 0.9em;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    padding: 6px;
    white-space: nowrap;
    
    background: -moz-linear-gradient(left,  #22314e 0%, #375184 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#22314e), color-stop(100%,#375184)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #22314e 0%,#375184 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #22314e 0%,#375184 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #22314e 0%,#375184 100%); /* IE10+ */
    background: linear-gradient(left,  #22314e 0%,#375184 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#22314e', endColorstr='#375184',GradientType=1 ); /* IE6-9 */
}

.display-field
{
    display: table-cell;
    background-color: #ddd;
    color: #000;
    font-size: 0.9em;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    padding: 6px;
}

.display-fieldset
{
    width: 480px;
    margin-bottom: 32px;
}

.wide-display-fieldset
{
    width: 720px;
    margin-bottom: 32px;
}

/* Link styles */

a
{
    color: #375184;
    text-decoration: underline;
}

a:hover
{
    text-decoration: underline;
    color: #f00;
}

a:active
{
    text-decoration: underline;
    color: #000;
}

/* Validation styles */

.field-validation-error
{
    color: #f00;
    font-size: 0.8em;
    font-weight: normal;
    white-space: nowrap;
    font-style: italic;
}

.field-description
{
    color: #22314e;
    font-size: 0.8em;
    font-weight: normal;
    white-space: nowrap;
    font-style: italic;
}

.input-validation-error
{
    border-color: #f44;
    background: #fee;
}

.validation-summary-errors 
{
    color: #f00;
    font-size: 0.8em;
    font-weight: normal;
    white-space: nowrap;
    font-style: italic;
}

.validation-summary-errors ul
{
    list-style: none; 
    padding: 0;
    margin: 4px 0 8px 0;
}

.validation-summary-errors ul li 
{
    padding: 0;
    margin: 1px 0;
}

/* Grid styles */

.grid-filter-fieldset
{
    width: 944px;
    border: 1px solid #22314e;
    padding: 8px;
    margin: 0 0 16px 0;
    
    background: #eee; /* Old browsers */
    background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* IE10+ */
    background: linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}

#internet-explorer-only .grid-filter-fieldset legend
{
    margin-top: -8px;
}

.grid-filter-fieldset legend 
{
    background: #fff;
}

.grid
{
    width: 960px;
    border-collapse: collapse;
    margin: 0 0 16px 0;
    border: 1px solid #22314e;
}

.grid th
{
    color: #fff;
    font-size: 1em;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-align: left;
    background: #22314e; /* Old browsers */
    background: -moz-linear-gradient(top,  #22314e 0%, #375184 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#22314e), color-stop(100%,#375184)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #22314e 0%,#375184 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #22314e 0%,#375184 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #22314e 0%,#375184 100%); /* IE10+ */
    background: linear-gradient(top,  #22314e 0%,#375184 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#22314e', endColorstr='#375184',GradientType=0 ); /* IE6-9 */

}

.grid th a
{
    color: #fff;
    font-size: 1em;
    padding: 3px;
    text-decoration: none;
}

.grid th a:hover
{
    color: #f00;
}

.grid th.sort_asc::after
{
    content: url("/Content/Styles/Base/Images/sort-asc.png");
    margin: 0px 4px 8px 8px;
    padding: 0;
    display: inline;
}

.grid th.sort_desc::after
{
    content: url("/Content/Styles/Base/Images/sort-desc.png");
    margin: 0px 4px 8px 8px;
    padding: 0;
    display: inline;
}

.grid th.sort_desc a,.grid th.sort_asc a
{
    color:#ffff78;
}

.grid td
{
    padding: 2px 4px;
}

.grid td.icon
{
    width: 16px;
    padding-left: 2px;
    padding-right: 2px;
}

.grid td.icon a img
{
    width: 16px;
}

.grid td.icon a:hover img
{

}

.grid td.pad-right
{
    padding-right: 32px;
}

.grid td.numeric {
    text-align:right;
}

.grid tfoot tr td{
    font-weight:bold;
}

.gridrow
{
    color: #000;
    font-size: 0.9em;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background: #fff;
}

.gridrow_alternate
{
    color: #000;
    font-size: 0.9em;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background: #ddd;
}

.grid-pager
{
    width: 960px;
    border: 1px solid #22314e;
    margin: 0 0 16px 0;
}

.grid-pager, ul.index-menu, ul.display-grid-menu 
{
    background: #eee; /* Old browsers */
    background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* IE10+ */
    background: linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}

.pagination
{
    font-size: 0.9em;
    height: 1.5em;
    padding: 0.1em;
}

.paginationLeft
{
    float: left;
}

.paginationRight
{
    float: right;
}

/* Menu */

ul#menu
{
    margin: 0;
    padding: 0;
    list-style: none;
}

ul#menu li
{
    display: inline-block;
    margin: 0 4px 2px 0;
    border: 1px solid #aaa;
}

ul#menu li, input[type="submit"], input[type="button"] 
{
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* IE10+ */
    background: linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
}

ul#menu li:hover, input[type="submit"]:hover, input[type="button"]:hover 
{
    background: #e0f3fa; /* Old browsers */
    background: -moz-linear-gradient(top,  #e0f3fa 0%, #d8f0fc 50%, #b8e2f6 51%, #b6dffd 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0f3fa), color-stop(50%,#d8f0fc), color-stop(51%,#b8e2f6), color-stop(100%,#b6dffd)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #e0f3fa 0%,#d8f0fc 50%,#b8e2f6 51%,#b6dffd 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #e0f3fa 0%,#d8f0fc 50%,#b8e2f6 51%,#b6dffd 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #e0f3fa 0%,#d8f0fc 50%,#b8e2f6 51%,#b6dffd 100%); /* IE10+ */
    background: linear-gradient(top,  #e0f3fa 0%,#d8f0fc 50%,#b8e2f6 51%,#b6dffd 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0f3fa', endColorstr='#b6dffd',GradientType=0 ); /* IE6-9 */
}

ul#menu li:active, input[type="submit"]:active, input[type="button"]:active 
{
    background: #feccb1; /* Old browsers */
    background: -moz-linear-gradient(top,  #feccb1 0%, #f17432 50%, #ea5507 51%, #fb955e 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feccb1), color-stop(50%,#f17432), color-stop(51%,#ea5507), color-stop(100%,#fb955e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #feccb1 0%,#f17432 50%,#ea5507 51%,#fb955e 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #feccb1 0%,#f17432 50%,#ea5507 51%,#fb955e 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #feccb1 0%,#f17432 50%,#ea5507 51%,#fb955e 100%); /* IE10+ */
    background: linear-gradient(top,  #feccb1 0%,#f17432 50%,#ea5507 51%,#fb955e 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feccb1', endColorstr='#fb955e',GradientType=0 ); /* IE6-9 */
}

ul#menu li a
{
    color: #000;
    text-decoration: none;
    font-size: 1em;
    display: inline-block;
    padding: 2px 8px;
}

hr.menu-line 
{
    border: 0;
    height: 1px;
    background: #22314e;
}

ul.index-menu 
{
    list-style: none;
    width: 960px;
    border: 1px solid #22314e;
    margin: 0 0 16px 0;
    padding: 0;
}

ul.index-menu li
{
    display: inline-block;
    padding: 0.1em;
    margin-left: 1em;
}

ul.display-grid-menu 
{
    list-style: none;
    width: 480px;
    border: 1px solid #22314e;
    margin: 0 0 16px 0;
    padding: 0;
}

ul.display-grid-menu li
{
    display: inline-block;
    padding: 0.1em;
    margin-left: 1em;
}

/* Rounded corners */

.grid, .display-grid, .grid-pager, .grid-filter-fieldset, .display-fieldset, .editor-fieldset, .logon-center-container, ul.index-menu, ul.display-grid-menu
{
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -border-radius: 6px;
}

.text-box, ul#menu li, select, input[type="submit"], input[type="button"], .datetime-picker
{
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -border-radius: 4px;
}

.icon-sprite-16 
{
    background: transparent;
    background-image: url('/Content/Styles/Base/Icons/16x16/icon-sprite-16.png');
    width: 16px;
    height: 16px;
    background-position: 0 0;
    display: inline-block;
    margin: 0 0.2em 0 0;
    vertical-align: middle;
}

a .icon-details 
{
    background-position: 0 0;
}

a:hover .icon-details
{
    background-position: 0 -16px;
}

a .icon-edit 
{
    background-position: -16px 0;
}

a:hover .icon-edit
{
    background-position: -16px -16px;
}

a .icon-delete 
{
    background-position: -32px 0;
}

a:hover .icon-delete
{
    background-position: -32px -16px;
}

a .icon-switch-user 
{
    background-position: -64px 0;
}

a:hover .icon-switch-user
{
    background-position: -64px -16px;
}

a .icon-event-admin
{
    background-position: -80px 0;
}

a:hover .icon-event-admin
{
    background-position: -80px -16px;
}

a .icon-create, a .icon-add
{
    background-position: -192px 0;
}

a:hover .icon-create, a:hover .icon-add
{
    background-position: -192px -16px;
}

a .icon-information
{
    background-position: -240px 0;
}

a:hover .icon-information
{
    background-position: -240px -16px;
}

a .icon-economy
{
    background-position: -304px 0;
}

a:hover .icon-economy
{
    background-position: -304px -16px;
}

a .icon-attendants
{
    background-position: -320px 0;
}

a:hover .icon-attendants
{
    background-position: -320px -16px;
}

a .icon-coins
{
    background-image: url('/Content/Styles/Base/Icons/16x16/coins.png');
    background-position:  0 0;
}

a .icon-send
{
    background-image: url('/Content/Styles/Base/Icons/16x16/send.png');
    background-position:  0 0;
}
a .icon-history
{
    background-image: url('/Content/Styles/Base/Icons/16x16/history.png');
    background-position:  0 0;
}


a:hover .icon-coins
{
    background-position: 0 0;
}

a .icon-excel
{
    background-image: url('/Content/Styles/Base/Icons/16x16/excel.png');
    background-position:  0 0;
}

a:hover .icon-excel
{
    background-position: 0 0;
}

a .icon-copy
{
    background-image: url('/Content/Styles/Base/Icons/16x16/copy.png');
    background-position:  0 0;
}

/* Display grid */

.display-grid
{
    width: 480px;
    border-collapse: collapse;
    margin: 0 0 16px 0;
    border: 1px solid #22314e;
}

.display-grid th
{
    color: #fff;
    font-size: 1em;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-align: left;
    background: #22314e; /* Old browsers */
    background: -moz-linear-gradient(top,  #22314e 0%, #375184 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#22314e), color-stop(100%,#375184)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #22314e 0%,#375184 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #22314e 0%,#375184 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #22314e 0%,#375184 100%); /* IE10+ */
    background: linear-gradient(top,  #22314e 0%,#375184 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#22314e', endColorstr='#375184',GradientType=0 ); /* IE6-9 */

}

.display-grid th, .display-grid th a
{
    color: #fff;
    font-size: 1em;
    padding: 3px;
    text-decoration: none;
}

.display-grid th a:hover
{
    color: #f00;
}

.display-grid th.sort_asc::after
{
    content: url("/Content/Styles/Base/Images/sort-asc.png");
    margin: 0px 4px 8px 8px;
    padding: 0;
    display: inline;
}

.display-grid th.sort_desc::after
{
    content: url("/Content/Styles/Base/Images/sort-desc.png");
    margin: 0px 4px 8px 8px;
    padding: 0;
    display: inline;
}

.display-grid td
{
    padding: 2px 0;
}

.display-grid td.icon
{
    width: 16px;
    padding-left: 2px;
    padding-right: 2px;
}

.display-grid td.icon a img
{
    width: 16px;
}

.display-grid td.icon a:hover img
{

}

.display-grid td.pad-right
{
    padding-right: 32px;
}

.display-container .display-wrapper:first-child .display-label, .editor-container .editor-wrapper:first-child .editor-label  
{
    -webkit-border-radius: 6px 0 0 0;
    -moz-border-radius: 6px 0 0 0;
    -border-radius: 6px 0 0 0;
}

.display-container .display-wrapper:first-child .display-field, .editor-container .editor-wrapper:first-child .editor-field  
{
    -webkit-border-radius: 0 6px 0 0;
    -moz-border-radius: 0 6px 0 0;
    -border-radius: 0 6px 0 0;
}

.display-container .display-wrapper:last-child .display-label, .editor-container .editor-wrapper:last-child .editor-label  
{
    -webkit-border-radius: 0 0 0 6px;
    -moz-border-radius: 0 0 0 6px;
    -border-radius: 0 0 0 6px;
}

.display-container .display-wrapper:last-child .display-field, .editor-container .editor-wrapper:last-child .editor-field  
{
    -webkit-border-radius: 0 0 6px 0;
    -moz-border-radius: 0 0 6px 0;
    -border-radius: 0 0 6px 0;
}

.activity-price-period-list 
{
    padding: 0;
    margin: 0;
    margin-left: 16px;
    list-style-image: url("/Content/Styles/Base/Icons/16x16/bullet_blue.png");
}

.activity-price-period-list 
{
}

@media print{
    .screenonly 
    {
        display:none;
    }
    #invoice
    {
        border:none;
    }
}
@media screen{
    #invoice
    {
        border:1px solid #777;
    }
}

#invoice
{
    position: relative;
    width: 640px;
    min-height: 120px;
    padding: 8px 16px;
    margin: 32px auto;

}
#invoice table
{
    width:100%;
    border-collapse:collapse;
    border:1px solid black;
    margin-bottom:30px;
}
#invoice td
{
    vertical-align:top;
    padding:5px;
    border:1px solid #000;
    margin:0;
}
#invoice td.info
{
    font-size:80%;    
}

#invoice td.label
{
    font-weight:bold;
}
#invoice .right, td.right
{   
    text-align:right;
}
#invoice .pricecolumn
{
    width:150px;
}

#invoice thead
{
    background-color:#4471c4;
    color:#fff;
    font-size:medium;
}

#invoice-header
{
    background-color:#eee;
}

#invoice-header td
{
    border:0;
}

#invoice-footer th
{
    padding:5px;
    font-weight:bold;
    text-align:left;
    border:none;
}

#invoice table#invoice-footer
{
    margin-top:50px;
    border:none;
    border-top:1px solid #000;
}
#invoice-footer
{
    font-size:80%;
}
#invoice-footer td
{
    border:none;
}
#invoice-footer td.label
{
    font-style:italic;
    font-weight:normal;
}