searticle,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}html{cursor:default;font-size:100%;overflow-y:scroll;-webkit-tap-highlight-color:transparent;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body,form,input,button,select,textarea{font-size:100%;margin:0}a,a:active,a:hover{outline:none}a:focus{outline:thin dotted}abbr{_border-bottom:expression(this.title ? '1px dotted':'none')}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}mark{background:#FF0;color:#000}pre,code,kbd,samp{font-family:monospace,monospace;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small,sub,sup{font-size:75%}sub,sup{line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}nav ul{list-style:none}audio[controls],canvas,video{display:inline-block;*display:inline}audio{display:none;_display:expression(this.controls ? 'inline':'none');*zoom:1}audio[controls]{display:inline-block}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}legend{*margin-left:-7px}button,input,select,textarea{border-radius:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal;_overflow:expression(this.type == 'button|reset|submit' ? 'visible':'')}button,input[type="button"],input[type="reset"],input[type="button"],input[type="submit"]{overflow:visible}input[type="checkbox"],input[type="radio"]{box-sizing:border-box}input[type="search"]{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-spacing:0}html{-webkit-font-smoothing:antialiased;}button,input[type="button"],input[type="submit"]{width:auto;margin:0;padding:0;overflow:visible;cursor:pointer;}
.clear                                             { clear: both; margin: 0; padding: 0; }

/* WEBFONTS */
@font-face                                         { font-family: 'OpenSansRegular'; src: url('../../app_themes/default/webfonts/OpenSans-Regular-webfont.eot'); src: url('../../app_themes/default/webfonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../../app_themes/default/webfonts/OpenSans-Regular-webfont.woff') format('woff'), url('../../app_themes/default/webfonts/OpenSans-Regular-webfont.ttf') format('truetype'), url('../../app_themes/default/webfonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg'); font-weight: normal; font-style: normal; }
@font-face                                         { font-family: 'OpenSansSemibold'; src: url('../../app_themes/default/webfonts/OpenSans-Semibold-webfont.eot'); src: url('../../app_themes/default/webfonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'), url('../../app_themes/default/webfonts/OpenSans-Semibold-webfont.woff') format('woff'), url('../../app_themes/default/webfonts/OpenSans-Semibold-webfont.ttf') format('truetype'), url('../../app_themes/default/webfonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg'); font-weight: normal; font-style: normal; }
@font-face                                         { font-family: 'UbuntuRegular'; src: url('../../app_themes/default/webfonts/Ubuntu-R-webfont.eot'); src: url('../../app_themes/default/webfonts/Ubuntu-R-webfont.eot?#iefix') format('embedded-opentype'), url('../../app_themes/default/webfonts/Ubuntu-R-webfont.woff') format('woff'), url('../../app_themes/default/webfonts/Ubuntu-R-webfont.ttf') format('truetype'), url('../../app_themes/default/webfonts/Ubuntu-R-webfont.svg#UbuntuRegular') format('svg'); font-weight: normal; font-style: normal; }
@font-face                                         { font-family: 'UbuntuMedium'; src: url('../../app_themes/default/webfonts/Ubuntu-M-webfont.eot'); src: url('../../app_themes/default/webfonts/Ubuntu-M-webfont.eot?#iefix') format('embedded-opentype'), url('../../app_themes/default/webfonts/Ubuntu-M-webfont.woff') format('woff'), url('../../app_themes/default/webfonts/Ubuntu-M-webfont.ttf') format('truetype'), url('../../app_themes/default/webfonts/Ubuntu-M-webfont.svg#UbuntuMedium') format('svg'); font-weight: normal; font-style: normal; }
@font-face                                         { font-family: 'UbuntuRegularItalic'; src: url('../../app_themes/default/webfonts/ubuntu-ri-webfont.eot'); src: url('../../app_themes/default/webfonts/ubuntu-ri-webfont.eot?#iefix') format('embedded-opentype'), url('../../app_themes/default/webfonts/ubuntu-ri-webfont.woff') format('woff'), url('../../app_themes/default/webfonts/ubuntu-ri-webfont.ttf') format('truetype'), url('../../app_themes/default/webfonts/ubuntu-ri-webfont.svg#UbuntuRegularItalic') format('svg'); font-weight: normal; font-style: normal; }

html                                               { height:100%; overflow-y: scroll; }
body                                               { font-family: 'UbuntuRegular', Verdana, Geneva, sans-serif; font-size: 14px; line-height:1.2em; color:#1d2530; height: 100%; }

/* STRUCTURE */
form.sitewrapform                                  { position:relative; height:100%; }
div.sitewrap                                       { position:relative; height:100%; min-width: 780px; }
div.mainwrap                                       { position:relative; height:100%; max-width: 1280px; }

/* ELEMENTS */
a                                                  { color: #0072c9; }
a:hover                                            { color: #484848; }

h1                                                 { font-family: 'OpenSansRegular', Verdana, Geneva, sans-serif; font-size: 30px; color: #37475d; padding: 0; margin: 0; font-weight: normal; line-height:normal; display: inline; }
h2                                                 { font-family: 'OpenSansRegular', Verdana, Geneva, sans-serif; font-size: 26px; color: #37475d; padding: 0; margin: 0; font-weight: normal; }
h3                                                 { font-family: 'OpenSansRegular', Verdana, Geneva, sans-serif; font-size: 22px; line-height: 26px; color: #37475d; padding: 0;margin: 0 0 10px; font-weight: normal; }
h4                                                 { font-family: 'OpenSansRegular', Verdana, Geneva, sans-serif; font-size: 18px; color: #37475d; padding: 0; margin: 0; font-weight: normal; }

ul                                                 { margin: 0; padding: 0 0 0 18px; }
ol                                                 { margin: 0; padding: 0 0 0 30px; }
blockquote                                         { margin: 0; padding: 0 0 0 18px; }

table                                              { padding: 0; margin: 10px 0; border: 0; width: 100%; }
td                                                 { vertical-align: top; padding: 1px 5px 1px 0; margin: 0; }
th                                                 { vertical-align: top; text-align: left; padding: 1px 5px 1px 0; margin: 0; }
caption                                            { font-family:'UbuntuRegular', Arial, Helvetica, sans-serif; color: #979797; text-align: left; font-weight: bold; }

hr                                                 { border: 0; border-top: 1px solid #979797; }
.spacer                                            { display: block; height: 30px; }
.left                                              { float:left; }
.right                                             { float:right; text-align:left; }

/* HEADER */
header.userbar                                     { position: absolute; top: 0; left: 0; z-index: 999; height: 38px; width: 100%; background: #37475d;color: #ffffff;}
img.logo                                           { width: 141px; height: 22px; padding: 0 0 0 5px; }

header.userbar nav                                 { font-family: 'UbuntuRegular', sans-serif; font-size: 14px; }
header.userbar nav>ul                              { margin: 0; padding: 5px 0 5px 0; list-style: none; }
header.userbar nav>ul>li                           { float: left; position: relative; line-height: 28px; border-right: 1px solid #314053; }
header.userbar nav>ul>li:first-child               { border-left: none; width: 230px; }
header.userbar nav>ul>li.right                     { float: right; border-left: 1px solid #314053; border-right: none; }
header.userbar nav>ul>li>span                      { display: inline-block; padding: 0 15px 0 12px; cursor: pointer; }
header.userbar nav>ul>li i.icon                    {  }
header.userbar nav>ul>li:hover                     { background: #314053; }
header.userbar nav>ul>li>a                         { display: block; padding: 0 15px; color: #ffffff;text-decoration: none; }
header.userbar nav>ul>li>a.button                  { height:25px; line-height:25px; padding-left:10px; }
header.userbar nav>ul>li>a.button i.icon           { margin-top:3px; }

header.userbar nav>ul>li>ul                        { display: none; position: absolute; z-index: 1; top:26px; left: 0; margin: 0; list-style: none; min-width: 160px; padding: 5px; border:1px solid #cccccc;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);background: #ffffff; }
header.userbar nav>ul>li>ul:before                 { position: absolute; border-bottom: 5px solid #FFFFFF; border-left: 5px solid transparent; border-right: 5px solid transparent; content: ""; display: inline-block; left: 14px; top: -5px; }
header.userbar nav>ul>li:hover>ul                  { display: block; }
header.userbar nav>ul>li.right>ul                  { left:auto; right: 0; }
header.userbar nav>ul>li.right>ul:before           { left: auto; right: 15px; }
header.userbar nav>ul>li>ul>li                     { line-height: normal; }
header.userbar nav>ul>li>ul>li>a                   { display: block; padding: 4px 10px; text-decoration: none; color:#333333; }
header.userbar nav>ul>li>ul>li:hover a             { background: #0072c9; color: #ffffff; }

/* NAVIGATION */
nav.menu                                           { position: relative; z-index: 99; background: #f3f3f3; border-right:1px solid #d4d4d4; width: 230px; height: 100%; }
nav.menu>ul                                        { margin:0; padding: 38px 0 0 0; list-style: none; }
nav.menu>ul>li                                     { position: relative; display: block; color:#1d2530; border-left: 4px solid #f3f3f3; border-bottom: 1px solid #e7e7e7; font-family: 'OpenSansSemibold', sans-serif; font-size: 14px; padding: 5px 0; }
nav.menu>ul>li>a                                   { position: relative; display: block; padding: 0 0 0 15px; color:#1d2530; text-decoration: none; outline: none; min-height: 30px; line-height: 30px; }
nav.menu>ul>li:hover                               { background: #f0f0f2; }
nav.menu>ul>li.selected:hover,
nav.menu>ul>li.selected                            { border-left-color: #0072c9; background: #ececed; }
nav.menu>ul>li.selected:before                     { position: absolute; top: 10px; right: -1px; width: 10px; height: 20px; content: ''; background:url("images/menu_selected.png") 0 50%; }
nav.menu>ul>li:hover>a,
nav.menu>ul>li.selected>a                          { color:#0072c9; }

nav.menu>ul>li>ul                                  { display: none; margin:0; padding:0 0 10px 0; list-style: none; color:#1d2530; }
nav.menu>ul>li.selected>ul                         { display: block; }
nav.menu>ul>li>ul>li                               { font-family: 'UbuntuRegular', sans-serif; font-size: 14px; line-height: normal; }
nav.menu>ul>li>ul>li>a                             { position: relative; display: block; padding: 7px 10px 7px 50px; color:#1d2530; text-decoration: none; outline: none; }
nav.menu>ul>li>ul>li>a:before                      { position: absolute; top: 8px; left: 37px; width: 11px; height: 12px; content: ''; background: url("images/sprite_icons.png") -148px -3px no-repeat; }
nav.menu>ul>li>ul>li:hover>a,
nav.menu>ul>li>ul>li.selected>a                    { color:#0072c9; }
nav.menu>ul>li>ul>li:hover>a:before,
nav.menu>ul>li>ul>li.selected>a:before             { background-position: -328px -3px; }

/* PAGE TABS */
nav.pagetabs                                       { margin:0 0 20px; }
header+nav.pagetabs                                { margin-top:-20px; }
nav.pagetabs>ul                                    { margin:0; padding:3px 0 0 0; list-style:none; border-bottom:1px solid #d3d3d3; background:#f3f3f3; display:inline-block; width:100%; height:35px; }
nav.pagetabs>ul>li                                 { position:relative; float:left; }
nav.pagetabs>ul>li>a                               { display:block; text-decoration:none; height:35px; line-height:35px; padding:1px 20px 0; font-size:16px; margin:0 0 0 5px; }
nav.pagetabs>ul>li:first-child>a                   { margin-left: 10px; }
nav.pagetabs>ul>li.selected>a                      { border:1px solid #d3d3d3; background:#ffffff; border-bottom:none; padding-top:0; color:#1D2530; padding-left:10px; padding-right:10px; font-size:18px; }

/* CONTENT */
section.contentwrap                                { position: absolute; top: 38px; width: 100%; z-index: 0; }
section.contentwrap>div.innerwrap                  { position: relative; height: 100%; margin-left: 230px; padding:0 38px 38px; }

section.contentwrap header,
section.overlaywrap header                         { border-bottom:2px solid #f3f3f3; padding: 0 0 10px; margin-bottom: 20px; display: inline-block; width: 100%; }
section.contentwrap header .icon.help,
section.overlaywrap header .icon.help              { display: block; padding: 0; width: 30px; height: 30px; }

div.topactions                                     { min-height: 38px; line-height: 38px; margin-top: 10px; font-size: 12px; }
div.topactions a                                   { color:#1d2530; text-decoration: underline; display: inline-block; }
div.topactions a:hover                             { color: #0072C9; }
div.topactions a i.icon                            { margin-top: 10px; }

.popup_Body div.topactions,
.popup_Body_Add div.topactions                     { min-height:0; }

/*LOGIN REGISTER*/
div.loginwrap                                      { max-width:100%; }
div.loginwrap header div.headercol                 { padding: 20px 0 30px; }
div.loginwrap section.contentwrap>div.innerwrap    { margin-left: 0; padding:18px 38px 38px; position:relative; top:50%; width:728px; border:1px solid #dddddd; margin:38px auto 0; }
div.loginwrap div.highlightcol                     { background: #f3f3f3; border:1px solid #dddddd; padding:15px; width:100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
div.loginwrap div.halfcol                          { width:345px; }
div.loginwrap-small section.contentwrap>div.innerwrap    { width:421px; }
div.loginwrap table td                             { padding-left:0; padding-right:0; }

ul.usp-list                                        { margin: 15px 0 33px; padding: 0; list-style: none; }
ul.usp-list li                                     { position: relative; padding: 0 0 5px 28px; line-height: 20px; min-height: 20px; }
ul.usp-list li:before                              { position: absolute; top: 0; left: 0; width: 20px; height: 20px; content: ''; background: url("images/checkmark.png") 0 0 no-repeat; }

/* TABLES */
table                                              { margin:0; padding:0; }
table td,
table th                                           { padding: 0.45em 0.5em; font-family: 'UbuntuRegular', sans-serif; font-size: 14px; vertical-align: middle; }
table td.right,
table td.alignright,
table .currencyfield                               { text-align: right;padding-right: 1em;min-width:100px; }
table .datefield                                   {min-width:90px;}
table th.alignright                                { text-align: right;padding-right: 1.3em; }
table thead td,
table thead th                                     { font-size: 12px; border-bottom: 1px solid #dddddd; }
table td.noalign                                   { vertical-align: top; }

div.splitview table                                { float: left; width: 48%; }
div.splitview table+table                          { float: right; }

table.striped tbody tr td                          { border-bottom: 1px solid #dddddd; }
table.striped tbody tr:nth-child(2n+1) td          { background: #f3f3f3; }
table.hover tbody tr:hover td,
table.striped.hover tbody tr:hover:nth-child(2n+1) td { background: #ececed; }

table.heavy                                        { border-bottom: 1px solid #dddddd; }
table.heavy tbody,
table.heavy tfoot                                  { border-left: 1px solid #dddddd; border-right: 1px solid #dddddd; }
table.heavy tfoot                                  { border-top: 1px solid #dddddd; }

table.heavy thead td,
table.heavy thead th                              { background: #314053; border: none; color:#ffffff; font-size: 12px; font-weight: normal; }
table.heavy thead a                               { color:#ffffff; text-decoration:none;padding: 0; }
table.heavy thead th:first-child                  { border-radius: 3px 0 0 0; }
table.heavy thead th:last-child                   { border-radius: 0 3px 0 0; }

table.fullwidthtable                               { width:100% !important; }
table.fullwidthtable>tbody>tr>td,
table.fullwidthtable>tbody>tr>th                   { padding: 0; vertical-align: top; }

table.amounttable td                               { padding-top: 0.4em; padding-bottom: 0.4em; }

/* ICONS */
i.icon                                             { display: inline-block; width: 18px; height: 18px; background: url("images/sprite_icons.png") 0 0 no-repeat; }
i.icon.inline                                      { float: left; margin: 6px 6px 0 0; }
i.icon.right                                       { float: right; margin: 6px 0 0 6px; }

i.home                                             { background-position: 0 0; }
i.label                                            { background-position: -18px 0; }
i.basket                                           { background-position: -36px 0; }
i.clock                                            { background-position: -54px 0; }
i.report                                           { background-position: -72px 0; }
i.settings                                         { background-position: -90px 0; }
i.add                                              { background-position: -108px 0; }
i.arrow-left                                       { background-position: -126px 0; }
i.arrow-right                                      { background-position: -144px 0; }
i.arrow-top                                        { background-position: -162px 0; }
i.arrow-bottom                                     { background-position: 0 -18px; }
i.up                                               { background-position: -18px -18px; }
i.down                                             { background-position: -36px -18px; }
i.search                                           { background-position: -54px -18px; }
i.user                                             { background-position: -72px -18px; }
i.check                                            { background-position: -90px -18px; }
i.help                                             { background-position: -108px -18px; }
i.date                                             { background-position: -126px -18px; }
i.delete                                           { background-position: -144px -18px; }
i.send                                             { background-position: -162px -18px; }
i.back                                             { background-position: 0 -36px; }
i.project                                          { background-position: -18px -36px; }
i.close                                            { background-position: -144px -18px; }
i.move                                             { background-position: -36px -36px; }

/* lightblue */
i.lightblue.home                                   { background-position: -180px 0; }
i.lightblue.label                                  { background-position: -198px 0; }
i.lightblue.basket                                 { background-position: -216px 0; }
i.lightblue.clock                                  { background-position: -234px 0; }
i.lightblue.report                                 { background-position: -252px 0; }
i.lightblue.settings                               { background-position: -270px 0; }
i.lightblue.add                                    { background-position: -288px 0; }
i.lightblue.arrow-left                             { background-position: -306px 0; }
i.lightblue.arrow-right                            { background-position: -324px 0; }
i.lightblue.arrow-top                              { background-position: -342px 0; }
i.lightblue.arrow-bottom                           { background-position: -180px -18px; }
i.lightblue.up                                     { background-position: -198px -18px; }
i.lightblue.down                                   { background-position: -216px -18px; }
i.lightblue.search                                 { background-position: -234px -18px; }
i.lightblue.user                                   { background-position: -252px -18px; }
i.lightblue.check                                  { background-position: -270px -18px; }
i.lightblue.help                                   { background-position: -288px -18px; }
i.lightblue.date                                   { background-position: -306px -18px; }
i.lightblue.delete                                 { background-position: -324px -18px; }
i.lightblue.send                                   { background-position: -342px -18px; }
i.lightblue.back                                   { background-position: -180px -36px; }
i.lightblue.project                                { background-position: -198px -36px; }
i.lightblue.close                                  { background-position: -324px -18px; }
i.lightblue.move                                   { background-position: -216px -36px; }

/* white */
i.white.home                                       { background-position: -360px 0; }
i.white.label                                      { background-position: -378px 0; }
i.white.basket                                     { background-position: -396px 0; }
i.white.clock                                      { background-position: -414px 0; }
i.white.report                                     { background-position: -432px 0; }
i.white.settings                                   { background-position: -450px 0; }
i.white.add                                        { background-position: -468px 0; }
i.white.arrow-left                                 { background-position: -486px 0; }
i.white.arrow-right                                { background-position: -504px 0; }
i.white.arrow-top                                  { background-position: -522px 0; }
i.white.arrow-bottom                               { background-position: -360px -18px; }
i.white.up                                         { background-position: -378px -18px; }
i.white.down                                       { background-position: -396px -18px; }
i.white.search                                     { background-position: -414px -18px; }
i.white.user                                       { background-position: -432px -18px; }
i.white.check                                      { background-position: -450px -18px; }
i.white.help                                       { background-position: -468px -18px; }
i.white.date                                       { background-position: -486px -18px; }
i.white.delete                                     { background-position: -504px -18px; }
i.white.send                                       { background-position: -522px -18px; }
i.white.back                                       { background-position: -360px -36px; }
i.white.project                                    { background-position: -378px -36px; }
i.white.close                                      { background-position: -504px -18px; }
i.white.move                                       { background-position: -396px -36px; }

/* BUTTONS */
input[type="button"],
input[type="submit"],
button                                             { border: 1px solid #d4d4d4; border-radius: 3px; background:#d5d5d5; font-family: 'UbuntuRegular', sans-serif; font-size: 14px; height: 30px; line-height: 28px; min-width: 30px; padding: 0 10px; cursor:pointer; }
input[type="button"]:hover,
input[type="submit"]:hover,
button:hover                                       { background:#e7e7e7; }

input[type="button"].small,
input[type="submit"].small,
button.small                                       { height: 24px; line-height: 22px; }
input[type="button"].small i.icon,
input[type="submit"].small i.icon,
button.small i.icon                                { margin-top: 2px; margin-left: -2px; }

input[type="button"].prio,
input[type="submit"].prio,
button.prio                                        { background-color: #0063af; color:#ffffff; border-color: #1a74ac; }
input[type="button"].prio:hover,
input[type="submit"].prio:hover,
button.prio:hover                                  { background-color: #0072c9; }

input[type="button"].green,
input[type="submit"].green,
button.green                                       { background-color: #83a854; color:#ffffff; border-color: #76954f; }
input[type="button"].green:hover,
input[type="submit"].green:hover,
button.green:hover                                 { background-color: #90b65f; }

input[type="button"].warning,
input[type="submit"].warning,
button.warning                                     { background-color: #f64552; color:#ffffff; border-color: #f42434; }
input[type="button"].warning:hover,
input[type="submit"].warning:hover,
button.warning:hover                               { background-color: #f75b67; }

a.button                                           { display: inline-block; color:#1d2530; text-decoration: none; border: 1px solid #d4d4d4; border-radius: 3px; background:#d5d5d5; font-family: 'UbuntuRegular', sans-serif; font-size: 14px; height: 30px; line-height: 30px; min-width: 8px; padding: 0 10px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
a.button:hover                                     { background:#e7e7e7; }

a.button.small                                     { height: 24px; line-height: 24px; }
a.button.small i.icon                              { margin-top: 2px; margin-left: -2px; }

a.button.prio                                      { background-color: #0063af; color:#ffffff; border-color: #1a74ac; }
a.button.prio:hover                                { background-color: #0072c9; }

a.button.green                                     { background-color: #83a854; color:#ffffff; border-color: #76954f; }
a.button.green:hover                               { background-color: #90b65f; }

a.button.warning                                   { background-color: #f64552; color:#ffffff; border-color: #f42434; }
a.button.warning:hover                             { background-color: #f75b67; }

/* button-dropdown */
div.button-dropdown                                { position: relative; display: inline-block; color:#1d2530; text-decoration: none; border: 1px solid #d4d4d4; border-radius: 3px; background:#d5d5d5; font-family: 'UbuntuRegular', sans-serif; font-size: 14px; height: 28px; line-height: 28px; min-width: 8px; padding: 0 10px; text-align: left; }
div.button-dropdown:before                         { display: inline-block; float: right; height: 28px; width: 24px; margin-left: 10px; background: transparent; border-left: 1px solid #c2c3c4; cursor: pointer; content: ""; }
div.button-dropdown:after                          { position: absolute; top: 50%; right: 10px; margin-top: -9px; height: 18px; width: 18px; background: url("images/sprite_icons.png") 0 -18px no-repeat; cursor: pointer; content: ""; }
div.button-dropdown > a                            { text-decoration: none; color: #1d2530; }

div.button-dropdown:hover                          { background-color: #e7e7e7; }
div.button-dropdown:hover:before                   { border-color: #d4d4d4; }

div.button-dropdown > ul                           { display: none; position: absolute; z-index: 99; top: 38px; right: -1px; margin: 0; padding: 5px 0 !important; list-style: none; background: #ffffff; border-radius: 3px; border: 1px solid #d4d4d4; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: 0 2px 4px 0 rgba(50, 50, 50, 0.2); -moz-box-shadow: 0 2px 4px 0 rgba(50, 50, 50, 0.2); box-shadow: 0 2px 4px 0 rgba(50, 50, 50, 0.2); }
div.button-dropdown > ul:before                    { display: block; position: absolute; z-index: 1; top: -10px; right: 8px; width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #d4d4d4 transparent; content: ""; }
div.button-dropdown > ul:after                     { display: block; position: absolute; z-index: 2; top: -8px; right: 10px; width: 0; height: 0; border-style: solid; border-width: 0 8px 8px 8px; border-color: transparent transparent #ffffff transparent; content: ""; }

div.button-dropdown:hover > ul                     { display: block; }

div.button-dropdown > ul > li                      { float: none !important; border-left: none !important; }
div.button-dropdown > ul > li:first-child:before   { display: block; position: absolute; top: -18px; left: -1px; right: -1px; height: 18px; background: transparent; content: ""; }
div.button-dropdown > ul > li > input[type="submit"] { border: none; background: none; color: #0072c9; }
div.button-dropdown > ul > li > a,
div.button-dropdown > ul > li > input[type="submit"]                  { display: block; padding: 2px 11px; text-decoration: none; border-radius: 0 !important; }
div.button-dropdown > ul > li > a:hover,
div.button-dropdown > ul > li > input[type="submit"]:hover             { background-color: #e7e7e7; color: #484848; }

/* button dropdown top*/
div.button-dropdown.top > ul                           { top: inherit; bottom: 38px; right: -1px; }
div.button-dropdown.top > ul:before                    { top: inherit; bottom: -10px; right: 8px; border-width: 10px 10px 0 10px; border-color: #d4d4d4 transparent transparent transparent; }
div.button-dropdown.top > ul:after                     { top: inherit; bottom: -8px; right: 10px; border-width: 8px 8px 0 8px; border-color: #ffffff transparent transparent transparent; }

div.button-dropdown.top > ul > li:first-child:before   { top: inherit; bottom: -18px; }

div.pageactions div.button-dropdown                { line-height: 30px; }

/*button dropdown prio*/
div.button-dropdown.prio                           { color: #ffffff; border: 1px solid #1a74ac; background-color: #0063af; }
div.button-dropdown.prio:before                    { border-color: #065796; }
div.button-dropdown.prio:after                     { background-position: -360px -18px; }
div.button-dropdown.prio > a                       { color: #ffffff; }

div.button-dropdown.prio:hover                     { background-color: #0072c9; }
div.button-dropdown.prio:hover:before              { border-color: #065796; }

/* PAGEOPTIONS */
div.pageoptions                                    { display: inline-block; float: right; }
div.pageoptions ul                                 { margin: 0; padding: 0; list-style: none; }
div.pageoptions ul li                              { float: left; border-left: 1px solid #ffffff; }
div.pageoptions ul li:first-child                  { border-left: none; }
div.pageoptions ul li a,
div.pageoptions ul li input[type="button"],
div.pageoptions ul li input[type="submit"],
div.pageoptions ul li button                       { border-radius: 0; }
div.pageoptions ul li:first-child a,
div.pageoptions ul li:first-child input[type="button"],
div.pageoptions ul li:first-child input[type="submit"],
div.pageoptions ul li:first-child button           { border-radius: 3px 0 0 3px; }
div.pageoptions ul li.last a,
div.pageoptions ul li:last-child a,
div.pageoptions ul li.last input[type="button"],
div.pageoptions ul li.last input[type="submit"],
div.pageoptions ul li.last button,
div.pageoptions ul li:last-child button            { border-radius: 0 3px 3px 0; }
div.pageoptions ul li:first-child:last-child a,
div.pageoptions ul li:first-child:last-child input[type="button"],
div.pageoptions ul li:first-child:last-child input[type="submit"],
div.pageoptions ul li:first-child:last-child button { border-radius: 3px; }
div.pageoptions div.searchbar                      { background:#d4d4d4; float: left; padding: 3px 3px 3px 6px; }
div.pageoptions div.searchbar input                { float: left; height: 24px; line-height: 24px; font-size: 13px; }
div.pageoptions i.icon.search                      { margin: 0; }
div.remark                                         { float: right; padding-bottom: 20px;}

/* PAGEACTIONS */
div.pageactions                                    { padding:0 0 20px; }

/* FORM ELEMENTS */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="phone"],
textarea                                           { background: #ffffff; border: 1px solid #d4d4d4; border-radius: 3px; color: #1d2530; font-family: 'UbuntuRegular', sans-serif; height: 30px; line-height: 30px; padding: 0 5px; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;  }
textarea                                           { line-height: 18px; resize: vertical; }

input[type="checkbox"]+label                       { margin:0 0 0 5px; cursor:pointer; }

.required input[type="text"],
.required input[type="password"],
.required input[type="email"],
.required input[type="url"],
.required input[type="phone"],
.required textarea,

input:focus,
textarea:focus                                     { outline: none; border-color: #80b9e4; }

input[type="text"].disabled,
input[type="password"].disabled,
input[type="email"].disabled,
input[type="url"].disabled,
input[type="phone"].disabled,
textarea.disabled,
input.disabled:focus,
textarea.disabled:focus                            { outline: none; background:#f9f9f9; border-color:#d4d4d4; color:#666666; cursor:default; }

span.disabled                                       {color:#666666;}
#newline button                                     { background: #d4d4d4;} 
#newline button:hover                               {cursor: default;}

input[type="text"].error,
input[type="password"].error,
input[type="email"].error,
input[type="url"].error,
input[type="phone"].error,
textarea.error                                     { outline: none; border-color: #f54953; }

div.inputoptions                                   { position:relative; padding-right:40px; }
div.inputoptions input[type="button"],
div.inputoptions input[type="submit"],
div.inputoptions button                            { position:absolute; top:0; right:0; border-radius: 0 3px 3px 0; }
div.inputoptions button + button                   { right:35px; border-right:1px solid #b2b2b2; }
div.inputoptions.twobtn                            { padding-right:70px; }
div.inputoptions.twobtn button                     { border-radius: 0 3px 3px 0; }
div.inputoptions.twobtn button + button            { border-radius: 0; }

div.inputoptions input[type="text"],
div.inputoptions input[type="password"],
div.inputoptions input[type="email"],
div.inputoptions input[type="url"],
div.inputoptions input[type="phone"]               { border-radius: 3px 0 0 3px; }
div.inputoptions textarea                          { border-radius: 3px 0 3px 3px; }

/*Placeholder*/
input::-webkit-input-placeholder    { color: #666666; font-size: 14px; }
textarea::-webkit-input-placeholder { color: #666666; font-size: 14px; }
input:-moz-placeholder              { color: #666666; font-size: 14px; }
textarea:-moz-placeholder           { color: #666666; font-size: 14px; }
input::-moz-placeholder             { color: #666666; font-size: 14px; }
textarea::-moz-placeholder          { color: #666666; font-size: 14px; }
input:-ms-input-placeholder         { color: #666666; font-size: 14px; }
textarea:-ms-input-placeholder      { color: #666666; font-size: 14px; }

/*Add Newline*/
#newline input[type="text"],
#newline span,
#newline select                     { font-size: 13px; color:#aaaaaa;}


div.searchbar                                      { background: #FFFFFF; }
div.searchbar fieldset                             { float: right; width: 50%; border: none; margin: 0 0 20px; padding: 0; }

div.input-group                                    { display: table; position: relative; border-collapse: separate; }
div.input-group span.input-group-label             { display: table-cell; vertical-align: middle; white-space: nowrap; width: 1%; }
div.input-group>input                              { display: table-cell; float: left; margin-bottom: 0; width: 100%; border-radius: 3px 0 0 3px; height: 40px;line-height: 40px; }
div.input-group span.input-group-label+input       { border-radius: 0 3px 3px 0; }
div.input-group span.input-group-label a.button,
div.input-group span.input-group-label input[type="button"],
div.input-group span.input-group-label input[type="submit"],
div.input-group span.input-group-label button      { min-width: 115px; height: 40px; line-height: 38px; border-radius: 0 3px 3px 0;padding: 0 20px; border-left: none; }
div.input-group span.input-group-label a.button i.icon { margin-top: 10px; }

input.note                                         { border-bottom-left-radius:0; border-bottom-right-radius:0; }
div.note                                           { font-size:12px; background: #dddddd; width: 99%; border:1px solid #dddddd; border-radius:0 0 3px 3px; }
div.note div.inner                                 { padding:3px 10px; }

select                                             { position:relative; background: #ffffff; border: 1px solid #d4d4d4; border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; color: #1d2530; font-family: 'UbuntuRegular', sans-serif; padding: 5px 0; width: 100%; }
select.error                                       { outline: none; border-color: #f54953; }
select.disabled                                    { outline: none; background:#f9f9f9; border-color:#d4d4d4; color:#666666; cursor:default; }

/* ALERTS */
div.alert                                          { background: #ececed; border: 1px solid #ececed; border-radius: 4px; padding: 8px 14px; }
div.alert.success                                  { background: #eef1ea; border-color: #76954f; color: #468847; }
div.alert.error                                    { background: #fde8e9; border-color: #f54953; color: #f42434; }
.required                                          { color: #f42434; }

/* PAGER */
div.pager                                          { text-align: left; }
div.pager ul                                       { border-radius: 4px; display: inline-block; margin: 0; padding: 0; }
div.pager ul>li                                    { display: inline; line-height: 20px; }
div.pager ul>li>a                                  { border: 1px solid #d4d4d4; border-left: none; float: left; line-height: 28px; height: 28px; padding: 0 12px; text-decoration: none; }
div.pager ul>li>a:hover,
div.pager ul>li.selected>a                         { background: #e7e7e7; }
div.pager ul>li:first-child>a                      { border-radius: 4px 0 0 4px; border-left: 1px solid #d4d4d4; }
div.pager ul>li:last-child>a                       { border-radius: 0 4px 4px 0; }

/*wizard*/
div.wizard                                         {}
div.wizard ul                                      { margin: 0; padding: 0; list-style: none; overflow: hidden; }
div.wizard ul>li                                   { float: left; width: 25%; text-align: center; }
div.wizard ul>li>a                                 { text-decoration: none; color: #1d2530; outline: none; }
div.wizard ul>li>a>span.progressbar                { display: block; height: 10px; margin: 17px 0; border: 1px solid #e7e7e9; border-left-color: #d9d9d9; border-right: none; background: #f3f3f3; }
div.wizard ul>li:first-child>a>span.progressbar    { border-left: none; border-radius: 3px 0 0 3px; }
div.wizard ul>li.last-child>a>span.progressbar     { border-right:1px solid #e7e7e9; border-radius:0 3px 3px 0; }
div.wizard ul>li.selected>a>span.progressbar       { background-color:#83a854; }

div.wizard ul>li>a>span.progressbar>span           { display: block; width: 46px; height: 46px; margin: -18px auto 0; background: url("images/sprite_progressbar.png") 0 0 no-repeat; text-align: center; line-height: 46px; font-family: 'UbuntuRegular', sans-serif; font-size: 20px; }
div.wizard ul>li.selected>a>span.progressbar>span  { background-position: 0 -53px; color: #ffffff; }

div.wizard ul>li>a>span.summary                    { display: block; padding: 20px 10px 10px; min-height: 155px; line-height: 20px; }

@media screen and (max-width: 1140px) {
    div.wizard ul>li>a>span.summary                { min-height: 185px; }
    div.wizard ul>li>a>span.summary h3             { font-size: 18px; line-height: 18px; }
}

/*mediawrap*/
div.mediawrap div.item                             { float: left; width: 46%; margin: 2% 4% 2% 0;}
div.mediawrap div.media                            { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;margin-top: 5px; }
div.mediawrap div.media iframe,
div.mediawrap div.media object,
div.mediawrap div.media embed                      { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/*faq*/
div.faq div.question                               { position: relative;min-height: 18px;padding-left: 25px; }
div.faq div.question i.icon                        { position: absolute;top: 0;left: 0; }
div.faq div.answer                                 { position: relative; margin: 20px 0 20px 25px;background: #dddddd;padding: 15px 10px; }
div.faq div.answer:before                          { position: absolute; top: -15px;left: 0; width: 0; height: 0;content: ''; border-style: solid; border-width: 15px 0 0 15px; border-color: transparent transparent transparent #dddddd; }

/*Invoice-highlight*/
.invoice-highlight { display: inline-block; padding: 4px 8px; background: #83a854; color: #ffffff; border-radius: 4px;}
.invoice-highlight-anim { display: inline-block; padding: 4px 8px; background: #83a854; color: #ffffff; border-radius: 4px;
    -webkit-animation: blinkEffect 4s linear 1 forwards;
    -moz-animation: blinkEffect 4s linear 1 forwards;
    -o-animation: blinkEffect 4s linear 1 forwards;
    animation: blinkEffect 2s linear 1 forwards;
}

@keyframes blinkEffect {
    0%   { opacity: 0; transform: scale(1.5); }
    25%  { opacity: 1; }
    60%  { transform: scale(1); }
}
@-o-keyframes blinkEffect {
    0%   { opacity: 0; transform: scale(1.5); }
    25%  { opacity: 1; }
    60%  { -o-transform: scale(1); }
}
@-moz-keyframes blinkEffect {
    0%   { opacity: 0; transform: scale(1.5); }
    25%  { opacity: 1; }
    60%  { -moz-transform: scale(1); }
}
@-webkit-keyframes blinkEffect {
    0%   { opacity: 0; transform: scale(1.5); }
    25%  { opacity: 1; }
    60%  { -webkit-transform: scale(1); }
}   

/*invoice-settings*/
div.invoice-settings {}
div.invoice-settings table.invoice-btw-setting       { float: right;width: 30%; }
div.invoice-settings table.invoice-btw-setting td, td { font-size: 12px; }

/*product-settings*/
tr.product-btw-setting td                            { font-size: 12px;}  

/*Printselection overview Rapportages */
div.printselection-overview                      { max-width: 600px; }
div.printselection-overview table                { width: auto; }
div.printselection-overview table tbody tr td    { width: 300px; }
div.printselection-overview table tbody tr td:first-child    { padding-left: 0; width: 10px; }

/*GridViews moeten gerenderd worden met <thead>
Dit kan als volgt geforceerd worden:
-ShowHeaderWhenEmpty="true"
-ondatabound="gvInvoices_DataBound">
In databound event(code behind)
protected void gvInvoices_DataBound(object sender, EventArgs e)
{
    gvInvoices.UseAccessibleHeader = true;
    gvInvoices.HeaderRow.TableSection = TableRowSection.TableHeader;  
}

De volgende eigenschappen zijn ook van belang voor het correct renderen:
CellSpacing="-1" GridLines="None"
Buttons in grids moeten linkbuttons worden.



Wanneer geen toolbaritems aanwezig zijn dient de omliggende div te worden weggelaten*/


.ModalPopupBG
{
    background-color: #666699;
    filter: alpha(opacity=50);
    opacity: 0.7;
}

.popup_Container {

	background-color:#ffffff;
	border:2px solid #37475d;
	padding: 0px 0px 0px 0px;
}

.popupConfirmation
{
	width: 800px;
	height: 400px;
}

.popupLookup
{
	width: 800px;
	height: 600px;
}

.popupBook
{
    width: 380px;
    height:280px;
}

.popup_Body_Book
{
	padding:15px 30px 15px 30px;
	clear:both;
	height:180px;
	overflow-y:scroll;
}

.popupAdd
{
	width: 1000px;
	height: 600px;
}

.popup_Titlebar {
    background: #37475d;
	height: 29px;
}

.popup_Body
{
	padding:15px 30px 15px 30px;
	clear:both;
	height:400px;
	overflow-y:scroll;
}

.popup_Body_Add
{
	padding:15px 30px 15px 30px;
	clear:both;
	height:500px;
	overflow-y:scroll;
}

.TitlebarLeft 
{
	float:left;
	padding-left:5px;
	padding-top:5px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:12px;
	color:#FFFFFF;
}
.TitlebarRight 
{
	background-position:right;
	background-repeat:no-repeat;
	height:15px;
	width:16px;
	float:right;
	cursor:pointer;
	margin-right:5px;
	margin-top:5px;
}

.popup_Buttons
{
	margin:10px;
}


.sortasc-header A 
 { 
    background:url("images/ascWhite.gif") right center no-repeat;
 }

 .sortdesc-header A
 {
    background:url("images/descWhite.gif") right center no-repeat;
 }

 TH A
 {
    padding-right: 20px;
 }


.validationsummary { border: 1px solid #ececed; border-radius: 4px; padding: 8px 14px; background: #fde8e9; border-color: #f54953; color: #f42434;margin-bottom: 10px;}


.smallinputfield{ width: 80px;}
.smalldropdownlist{ width: 100px;}

.dragRow:hover
{
    cursor: move;
}

.popupPrint { width: 800px; height: 600px; }
.popupPrint .popup_Container {height: 600px;}
.popupPrint .popup_Body_Print { padding:15px 30px 15px 30px; clear:both;  }


/*.descriptionRequired {
     border: 2px solid #dadada;
    border-radius: 7px;
    outline: none;
    border-color: orange;
    box-shadow: 0 0 12px orange;
}*/

.smallFont { font-size:80%}


table.checkboxlist td {
    padding: 0px;
    margin: 0px;
}

.buttonsright {
    float:right;
}

.hideGridColumn {
    display: none;
}


.system-notification {
    position: absolute;
    top: 38px;
    right: 0;
    width: 500px;
    background: #0072c9;
    padding: 4px 16px;
    border-bottom-left-radius: 4px;
}
.system-notification button {
    margin-left: 8px;
    background: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
}

.system-notification button:hover {
    background: #0072c9
}

.system-notification button i.icon {
    margin-left: 2px;
}