/* = GENERIC
----------------------------------------------------------------------------------------------------------------------*/
body { background: url('../images/background.png') }

a { color: #9B1C0C }

a.button-red { background: url('../images/top-menu-button-background.png') no-repeat left top; height: 25px; display: block; float: left; overflow: visible; left: -3px; margin-left: 3px }
a.button-red span { background: url('../images/top-menu-button-background.png') no-repeat right top; height: 20px; padding: 5px 10px 0 0; display: block; float: left; color: #FFF; font-size: 11px; font-weight: bold; position: relative; margin-left: 7px; left: 3px }

a.button-grey { background: url('../images/secondary-menu-button-background.png') no-repeat left top; height: 28px; display: block; float: left; overflow: visible; left: -3px; margin-left: 3px }
a.button-grey span { background: url('../images/secondary-menu-button-background.png') no-repeat right top; height: 22px; padding: 6px 10px 0 0; display: block; float: left; color: #999; font-size: 12px; font-weight: normal; position: relative; margin-left: 7px; left: 3px }

a.button-grey-selected { background: url('../images/secondary-menu-button-selected-background.png') no-repeat left top; height: 28px; display: block; float: left; overflow: visible; left: -3px; margin-left: 3px }
a.button-grey-selected span { background: url('../images/secondary-menu-button-selected-background.png') no-repeat right top; height: 22px; padding: 6px 10px 0 0; display: block; float: left; color: #444; font-size: 12px; font-weight: normal; position: relative; margin-left: 7px; left: 3px }

a.cancel { margin-left: 10px; color: #DEDEDE }

.message-confirmation { display: none }
.notice { color: #444; font-size: 11px }

.Zebra_Form .row { border-bottom: 1px dotted #AAA; margin: 0 }
.Zebra_Form .last { border: none }
.Zebra_Form .optional { padding: 10px 0px; display: none }
.Zebra_Form .action { background: #666 }
.Zebra_Form span.required { font-size: 10px }
.Zebra_Form .cell label { margin-bottom: 5px }
.Zebra_Form tr.row td label { margin: 6px 0 0 0 }
.Zebra_Form tr.row td .cell label { margin: 0 }
.Zebra_Form .cell { padding: 0 5px }
.Zebra_Form table.info td { padding: 5px }

.filters { margin-bottom: 2px }
.filters dt { font-weight: bold; color: #FFF; padding: 5px 10px 5px 26px }
.filters dd { background: #FFF }
.filters .Zebra_Form table { width: 100% }
.filters .Zebra_Form .row .cell { margin-right: 10px }
.filters .Zebra_Form .row .cell label,
.filters .Zebra_Form .row td label { font-weight: normal }

.datagrid { width: 100%; border: 1px solid #666 }
.datagrid th { background: url('../images/datagrid-header-background.png'); color: #FFF }
.datagrid th a { font-weight: bold; color: #A7B0DC; text-decoration: none; border-bottom: 1px dotted #888; padding-left: 10px }
.datagrid th a.asc { background: url('../images/sort-arrow-up.png') no-repeat left 6px }
.datagrid th a.desc { background: url('../images/sort-arrow-down.png') no-repeat left 6px }
.datagrid th a.asc,
.datagrid th a.desc { color: #FFF; border-bottom: none }
.datagrid th a.asc-disabled { background: url('../images/sort-arrow-up-disabled.png') no-repeat left 6px  }
.datagrid th a:hover { color: #FFF; border-bottom: none }
.datagrid th,
.datagrid td { padding: 4px 6px; height: 42px; border-left: 1px solid #666; border-right: 1px solid #666 }
.datagrid tr td { background: #FFF }
.datagrid tr.even td { background: #DEDEDE }
.datagrid tr.hover td { background: #E3F0DD }
.datagrid table,
.datagrid table td { border: none }
.datagrid td span.notice { display: block }
.datagrid h4 { font-size: 17px; font-weight: bold }

.datagrid tr a.progress_bogus { display: block; width: 32px; height: 32px; background-image: url('../images/ico-bogus-32.png'); background-repeat: no-repeat; background-position: center center; text-indent: -9000px; margin: 0 auto }
.datagrid tr a.progress_running { display: block; width: 32px; height: 32px; background-image: url('../images/ico-in-progress-32.png'); background-repeat: no-repeat; background-position: center center; text-indent: -9000px; margin: 0 auto }
.datagrid tr a.progress_pending { display: block; width: 32px; height: 32px; background-image: url('../images/ico-pending-32.png'); background-repeat: no-repeat; background-position: center center; text-indent: -9000px; margin: 0 auto }
.datagrid tr a.progress_closed { display: block; width: 32px; height: 32px; background-image: url('../images/ico-closed-32.png'); background-repeat: no-repeat; background-position: center center; text-indent: -9000px; margin: 0 auto }
.datagrid tr a.progress_invoiced { display: block; width: 32px; height: 32px; background-image: url('../images/ico-invoiced-32.png'); background-repeat: no-repeat; background-position: center center; text-indent: -9000px; margin: 0 auto }

.datagrid tr td.recurring span { background: #FFCC00; font-weight: bold; color: #222; padding: 4px; display: block; opacity: .5 }
.datagrid tr td.single span { background: #1ACF47; font-weight: bold; color: #FFF; padding: 4px; display: block; opacity: .5 }
.datagrid tr td.single span a,
.datagrid tr td.recurring span a { text-decoration: none; color: #000 }
.datagrid tr td.accrual span,
.datagrid tr td span.accrual,
.datagrid tr td a.accrual { background: #E74C3C; font-weight: bold; color: #FFF; padding: 4px; display: block; opacity: .5; text-decoration: none }

.datagrid tr td h3 { font-size: 31px; font-weight: bold; color: #333 }
.datagrid tr td h3 span { color: #AAA; font-size: 27px; font-weight: normal }

.datagrid tr.totals td { background: #AAA; border-top: 1px solid #000; font-size: 9px }

.pagination-container { width: 100%; margin: 15px 0 0 0 }
.pagination-container .pagination-info { position: absolute; left: 0; color: #444; font-size: 10px; top: 6px }

.ico16 { display: block; width: 50px; background-position: center top; background-repeat: no-repeat; text-decoration: none; font-size: 10px; float: left; padding-top: 20px; color: #000; margin: 0; text-align: center; filter: alpha(opacity=30); -khtml-opacity: .3; -moz-opacity: .3; opacity: .3 }
.ico16:hover { filter: alpha(opacity=100); -khtml-opacity: 1; -moz-opacity: 1; opacity: 1 }
.ico-add { background-image: url('../images/ico-add-16.png') }
.ico-cancel { background-image: url('../images/ico-cancel-16.png') }
.ico-edit { background-image: url('../images/ico-edit-16.png') }
.ico-delete { background-image: url('../images/ico-delete-16.png') }
.ico-invoiced { background-image: url('../images/ico-tick-16.png') }
.ico-outsourcing { background-image: url('../images/ico-outsourcing-16.png') }
.ico-pending { background-image: url('../images/ico-pause-16.png') }
.ico-project { background-image: url('../images/ico-project-16.png') }
.ico-stats { background-image: url('../images/ico-stats-16.png') }

#filters #btncancel { background: #C40000; color: #FFF }

/*
.ZebraDialog_Confirmation { background-position: 10px 16px !important }
.ZebraDialog_Error { background-position: 24px 16px !important }
*/

/* = MAIN WRAPPER
----------------------------------------------------------------------------------------------------------------------*/
.main-wrapper { width: 1200px; margin: 0 auto; text-align: left }

.header { background: #000; height: 40px }
.header h1 { float: left; padding-top: 7px }
.header h1 a { display: block; width: 101px; height: 29px; background: url('../images/kubis.png'); text-indent: -9000px; display: block; float: left }
.header a.button-red { float: right; top: 8px }
.header a.username { float: right; top: 13px; color: #86858E; font-weight: bold; text-decoration: none; font-size: 11px; margin-right: 10px }

.main-menu { height: 161px; background: #090909 url('../images/header-pattern.jpg') no-repeat center top }
.main-menu .main-wrapper { padding-top: 28px }
.main-menu li { width: 88px; height: 72px; padding: 10px 0 0 0; text-align: center; margin: 0 15px 0 0 }
.main-menu li.selected { background: url('../images/main-menu-selected.png') }
.main-menu li a { display: block; background-repeat: no-repeat; background-position: center top; padding-top: 48px; text-decoration: none; color: #DEDEDE; font-weight: normal }
.main-menu li a.dashboard { background-image: url('../images/ico-dashboard-32.png') }
.main-menu li a.reports { background-image: url('../images/ico-reports-32.png') }
.main-menu li a.projects { background-image: url('../images/ico-projects-32.png') }
.main-menu li a.settings { background-image: url('../images/ico-settings-32.png') }

.secondary-menu { height: 62px; background: url('../images/secondary-menu-background.png'); top: -26px }
.secondary-menu .main-wrapper { padding-top: 20px }
.secondary-menu .main-wrapper li a { margin-right: 10px }
.secondary-menu .main-wrapper li a:hover span { color: #FFF }

/* = CONTENT
----------------------------------------------------------------------------------------------------------------------*/
.content { top: -26px; padding: 10px 0 100px 0 }
.content h2 { font-size: 21px; margin: -12px 0 10px; border-bottom: 1px solid #AAA; padding: 20px 0 20px; font-weight: bold }
.content h2 a { top: -8px }

.project-summary { background: #FFF; padding: 10px }
.project-summary h3 { font-size: 19px; margin: 0; font-weight: bold }

/* = PROJECTS
----------------------------------------------------------------------------------------------------------------------*/
.projects dt { font-weight: bold; color: #FFF; padding: 5px 10px 5px 26px }

.chart { border: 2px solid #2B2C32; float: left }

/* = MEDIA QUERIES
----------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 1024px), only screen and (min-device-width: 1024px) {
}

@media only screen and (min-width: 768px), only screen and (min-device-width: 768px) {
}

@media only screen and (min-width: 480px), only screen and (min-device-width: 480px) {
}

@media only screen and (min-width: 320px), only screen and (min-device-width: 320px) {
}