/* Body */
body {
  margin: 0px;
  padding: 0px;
  background: #787878 url(../img/layout/background_body.gif);
  font-size: 9pt;
  font-family: Lucida Sans Unicode, Helvetica, Arial, sans-serif;
  color: #000;
}

/* Global */
table, td, tr { padding: 2px 3px 2px 0px; }

h1, h2, h3, h4, p {
  margin: 0;
  padding: 3px 0 3px 0;
}

h1 { font-size: 13pt; margin-bottom: 5px; border-bottom: 1px solid #fb9d00; }
h2 { font-size: 11pt; margin-bottom: 2px; }
h3 { font-size: 10pt; margin-bottom: 2px; }
h4 { font-size:  9pt; margin-bottom: 2px; }
p  { padding-bottom: 7px; }

img    { border: none; }
div    { margin: 0; padding: 0; }
form   { margin: 0; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style-type: none; }

/* Convenience classes */
.line    { width: 100%; height: 1px; border-top: 1px solid #fb9d00; }
.red     { color: #cc0000; }
.green   { color: #00aa00; }
.black   { color: #000000; }
.blue    { color: #0000ff; }
.subtext { color: #666; }

.hidden       { display: none; }
.invisible    { visibility: hidden; }
.clear        { clear: both; }
.help         { cursor: pointer; }
.comment      { color: #999; font-style: italic; }
.not_selected { color: #bbb; text-decoration: line-through; }
legend        { cursor: pointer; }

input.required { outline: 2px solid red; }

/* Link styling */
a:link    { color: #FB9D00; text-decoration: none; }
a:visited { color: #FB9D00; text-decoration: none; }
a:hover   { color: #FB9D00; text-decoration: underline; }
a:active  { color: #FB9D00; text-decoration: underline; }
a:focus   { color: #FB9D00; text-decoration: underline; }

/* Central Layout Definition */
#top {
  background: url(../img/layout/background_top.jpg) top left repeat-x;
  width: 100%; /* width + height + position needed for placement of #foot */
  height: 100%;
  position: absolute;
}

#container {
  width: 1005px;
  min-height: 100%; /* needed for placement of #foot */
  margin-left: auto;
  margin-right: auto;
}

#head {
  height: 120px;
  background: url(../img/layout/background_head.jpg) top right no-repeat;
  border-bottom: 1px solid #737373;
  position: relative;
}

#conti_logo  { float: left; padding-top: 35px; padding-left: 0px; }
#system_logo { float: left; padding-top: 35px; padding-left: 20px; }

/* Login Page */
h1.login {
  background-color: #000;
  color: #fb9d00;
  margin: 5px 0 15px 0;
  padding: 5px 10px;
  border-bottom: none;
}

#login_main {
  background: #fff;
  padding: 50px 400px 0 100px;
  min-height: 350px;
}

/* Header-Navigation **/
#head_nav {
  position: absolute;
  top: -1px;
  right: 0;
  font-family: Tahoma;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.8em;
}

#head_nav li { float: left; }

#head_nav li a {
  display: block;
  height: 15px;
  padding: 4px 7px 2px 22px;
  background: #333 url(../img/layout/head_nav_arrow.png) no-repeat 0 2px;
  border: 1px solid #545454;
  margin-right: 1px;
  white-space: nowrap;
}

#head_nav a:link    { color: #bcbcbc; text-decoration: none; }
#head_nav a:visited { color: #bcbcbc; text-decoration: none; }
#head_nav a:active  { color: #fb9d00; text-decoration: underline; }
#head_nav a:focus   { color: #fb9d00; text-decoration: none; }
#head_nav a:hover   {
  color: #fb9d00;
  text-decoration: none;
  border-color: #fb9d00;
}

#head_nav ul.switch_language {
  width: 150px;
  display: none;
  position: absolute;
}

#head_nav ul.switch_language li {
  float: none;
}

#head_nav ul.switch_language li a {
  background-color: #333;
  background-position: 0 1px !important;
}

#head_nav ul.switch_language li a.current_language {
  color: #fb9d00;
}

#head_nav li.switch_language a:hover   {
  background-position: 0px -18px;
}

/* Main Navigation Menu (Horizontal) */
#main_nav {
  height: 40px;
  margin-bottom: 10px;
  border-bottom: 1px solid #737373;
}

#main_nav li {
  float: left;
}

#main_nav li a {
  display: block;
  padding: 10px 30px 9px 25px;
  height: 21px;
  font-size: 11pt;
  font-weight: bold;
  text-decoration: none;
  background-repeat: no-repeat;
  background-position: 0 12px;
}

#main_nav li a:link    { color: #fff; }
#main_nav li a:visited { color: #fff; }
#main_nav li a:active  { color: #fb9d00; border-bottom: 1px solid #fb9d00; }
#main_nav li a:hover   { color: #fb9d00; border-bottom: 1px solid #fb9d00; }
#main_nav li a:focus   { color: #fb9d00; border-bottom: 1px solid #fb9d00; }
#main_nav li a.active  { color: #fb9d00; border-bottom: 1px solid #fb9d00; }

/* Search form in main nav */
#main_nav li:last-child {
  float: right;
}

#main_nav a.home            { background-image: url(../img/layout/main_nav_home.png); }
#main_nav a.projects        { background-image: url(../img/layout/main_nav_projects.png); }
#main_nav a.shop            { background-image: url(../img/layout/main_nav_shop.png); }
#main_nav a.download_center { background-image: url(../img/layout/main_nav_download_center.png); }

#search {
  position: relative;
  top: 8px;
}

/* sub_nav: horizontal tabs above the main content container */
#sub_nav {
  margin: 0;
  padding: 0;
  height: 30px;
  width: 100%;
}

#sub_nav ul {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}

#sub_nav ul li {
  float: left;
  border-left: 1px solid #666;
  padding: 0 15px;
  color: #aaa;
  font-size: 11px;
  font-weight: bold;
}

#sub_nav ul li:first-child {
  border-left: 0;
  padding: 0 15px 0 0;
}

#sub_nav ul li a {
  background-repeat: no-repeat;
  background-position: 0 0;
  height: 15px;
  margin: 0;
  color: #fff;
}

#sub_nav ul li a:hover,
#sub_nav ul li a:focus,
#sub_nav ul li a:active,
#sub_nav ul li a.active {
  text-decoration: none;
  color: #FB9D00;
  font-size: 11px;
  font-weight: bold;
  border-bottom: 0;
}

/* Navigation Menu (Vertical, left of content) */
#nav {
  float: left;
  width: 215px;
  margin-right: 25px;
}

/*
#nav li a {
  display: block;
  background-color: #737373;
  border-bottom: 1px solid #969696;
  padding: 15px 0 15px 10px;
  font-size: 10pt;
  font-weight: bold;
  text-decoration: none;
}

#nav li a:link    { color: #fff; }
#nav li a:visited { color: #fff; }
#nav li a:active  { color: #fb9d00; border-color: #fb9d00; }
#nav li a:hover   { color: #fb9d00; border-color: #fb9d00; }
#nav li a:focus   { color: #fb9d00; border-color: #fb9d00; }
#nav li a.active  { color: #fb9d00; border-color: #fb9d00; }

#nav li li a          { padding-left: 20px; }
#nav li li li a       { padding-left: 30px; }
#nav li li li li a    { padding-left: 40px; }
#nav li li li li li a { padding-left: 50px; }
*/


#nav a {
  display: block;
/*  font-size: 8pt; */
  text-decoration: none;
  background-position: 8px 12px;
  background-repeat: no-repeat;
  margin: 0;
  padding: 5px 4px 4px 18px;
}

#nav a:link     { color: #fff; background-color: #000;    background-image: url(../img/layout/nav_closed_white.gif); }
#nav a:visited  { color: #fff; background-color: #000;    background-image: url(../img/layout/nav_closed_white.gif); }
#nav a:hover    { color: #000; background-color: #f90;    background-image: url(../img/layout/nav_closed_black.gif); }
#nav a:focus    { color: #000; background-color: #f90;    background-image: url(../img/layout/nav_closed_black.gif); }
#nav a:active   { color: #000; background-color: #f90;    background-image: url(../img/layout/nav_closed_black.gif); }
#nav a.active   { color: #000; background-color: #f90;    background-image: url(../img/layout/nav_closed_black.gif); }
#nav a.expanded { color: #fff; background-color: #7A7A7A; background-image: url(../img/layout/nav_open_white.gif); }

/** All layers **/
#nav ul { list-style: none; padding: 0; margin: 0; width: 210px; background-color: #545454; }
#nav ul a:link, #nav ul a:visited { margin: 0; }

/** Layer 1 **/
#nav ul li { padding: 0; margin: 1px 0 0 0; }

/** Layer 2 **/
#nav ul ul li { margin: 0; padding: 0; } /* Layer 2 und alle weiteren */
#nav ul ul a:link, #nav ul ul a:visited { background-color: #545454; }
#nav ul ul a:focus, #nav ul ul a:active, #nav ul ul a:hover, #nav ul ul a.active { background-color: #f90; }
#nav ul ul a             { background-position: 16px 12px; padding-left: 26px; }

/** Layer 3 **/
#nav ul ul ul a          { background-position: 24px 12px; padding-left: 34px; }

/** Layer 4 **/
#nav ul ul ul ul a       { background-position: 32px 12px; padding-left: 42px; }

/** Layer 5 **/
#nav ul ul ul ul ul a    { background-position: 40px 12px; padding-left: 50px; }

/** Layer 6 **/
#nav ul ul ul ul ul ul a { background-position: 48px 12px; padding-left: 58px; }

#nav a.action {
  background-position: 6px 4px;
  padding-left: 30px;
  font-weight: bold;
}

#nav a.action.details      { background-image: url(../img/layout/nav_action_details.png) }
#nav a.action.change_owner { background-image: url(../img/layout/nav_action_change_owner.png) }
#nav a.action.edit         { background-image: url(../img/layout/nav_action_edit.png) }
#nav a.action.mail         { background-image: url(../img/layout/nav_action_mail.png) }
#nav a.action.delete       { background-image: url(../img/layout/nav_action_delete.png) }
#nav a.action.reorder      { background-image: url(../img/layout/nav_action_reorder.png) }
#nav a.action.print        { background-image: url(../img/layout/nav_action_print.png) }
#nav a.action.fold         { background-image: url(../img/layout/nav_action_fold.png) }
#nav a.action.fold:focus   { color: #fff; background-color: #000; }

#nav table#basket a.img {
  display: inline;
  padding: 0;
  background: transparent;
}

/* Main Site Content */
#content {
  float: right;
  width: 725px;
  min-height: 330px;
  margin-bottom: 15px;
  padding: 20px;
  background-color: white;
}

#content.fullsize    { width: 965px; }
#content.transparent { background-color: transparent; }

/* Home page content */
a.home_button {
  display: block;
  float: left;
  width: 130px;
  height: 130px;
  padding: 10px;
  margin-right: 25px;
  font-weight: bold;
  font-size: 10pt;
  text-align: center;
  color: #fff;
  text-decoration: none;
  background-repeat: no-repeat;
  background-position: 0 0;
}

a.home_button                { background-image: url(../img/layout/home_button_default.png); }
a.home_button.create_project { background-image: url(../img/layout/home_button_create_project.png); }
a.home_button.browse         { background-image: url(../img/layout/home_button_browse_shop.png); }
a.home_button.dl             { background-image: url(../img/layout/home_button_dl.png); }
a.home_button.mena_pos       { background-image: url(../img/layout/home_button_mena_pos.png); }

a.home_button:link    { }
a.home_button:visited { }
a.home_button:active, a.home_button:hover, a.home_button:focus {
  background-position: 0 -150px;
}

/* Project type selection buttons */
a.project_type_button {
  display: block;
  float: left;
  width: 80px;
  height: 50px;
  margin-top: 10px;
  margin-right: 20px;
  padding: 50px 10px 0 10px;
  font-weight: bold;
  font-size: 10pt;
  text-align: center;
  color: #fff;
  text-decoration: none;
  background-repeat: no-repeat;
  background-position: 0 0;
}

a.project_type_button.complete  { background-image: url(../img/layout/project_type_complete.png); }
a.project_type_button.inside    { background-image: url(../img/layout/project_type_inside.png); }
a.project_type_button.outside   { background-image: url(../img/layout/project_type_outside.png); }
a.project_type_button.events    { background-image: url(../img/layout/project_type_events.png); }
a.project_type_button.cardesign { background-image: url(../img/layout/project_type_cardesign.png); }
a.project_type_button.other     { background-image: url(../img/layout/project_type_other.png); }

a.project_type_button:link    { }
a.project_type_button:visited { }
a.project_type_button:active, a.project_type_button:hover, a.project_type_button:focus, a.project_type_button.active {
  background-position: 0 -100px;
}

/* Edit section: Submit button and "Step X of Y" buttons */
table.section_submit {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}

table.section_submit td.step {
  width: 51px;
  padding: 4px 0 0 0;
  text-align: center;
  vertical-align: middle;
  font-size: 12pt;
  color: #737373;
  background: url(../img/layout/edit_section_num_step_normal.png) center center no-repeat;
}

table.section_submit td.step.first { background-image: url(../img/layout/edit_section_num_step_first.png); }
table.section_submit td.step.last  { background-image: url(../img/layout/edit_section_num_step_last.png);  }
table.section_submit td.step.active {
  background-image: url(../img/layout/edit_section_num_step_active.png);
  color: #fb9d00;
  font-size: 22pt;
}

table.section_submit a.submit {
  display: block;
  float: right;
  width: 54px;
  height: 54px;
  background: url(../img/layout/edit_section_submit.png) top left no-repeat;
}

table.section_submit a.submit:focus,
table.section_submit a.submit:hover,
table.section_submit a.submit:active {
  background-position: left -54px;
}

/** 2013 new button design **/
a.section_action {
  display: block;
  float: left;
  min-width: 7px; /* min-width + padding = 40px */
  min-height: 28px;
  background: url(../img/layout/button_default.png) top left no-repeat;
  margin: 0 15px 0 0;
  padding: 12px 0 0 33px; /* height + padding = 40px */
  font-weight: normal !important;
}

a.section_action:link, a.section_action:visited {
  color: #fb9d00;
}

a.section_action:focus, a.section_action:hover, a.section_action:active, a.section_action.active {
  background-position: left -40px;
  text-decoration: underline;
}

a.section_action.disabled {
  color: #999 !important;
  background-position: left -80px !important;
  text-decoration: none !important;
  cursor: default;
}

/* Message containers */
div.msg {
  padding: 3px;
  margin-top: 5px;
  margin-bottom: 5px;
  border: 2px solid #c60;
}

p.msg {
  padding: 3px;
  margin-top: 5px;
  margin-bottom: 5px;
  border: 2px solid #c60;
}

span.error {
  color: #c00;
}

div.error {
  font-weight: bold;
  border-color: #c00;
}

div.notice {
  border-color: #fb9d00;
}

div.success {
  border-color: #0c0;
}

/* Footer */
#foot {
  clear: both;
  width: 1005px;
  margin: -30px auto 0 auto;
}

/* System errors and messages */
#error {
  border: 1px solid #c00;
  padding: 5px;
  color: #c00;
}

ul.project_state_buttons { margin-top: 10px; }

/**
 * Hohe Buttons "Projektstatus ändern"
 * button_tall können sowohl Input- als auch A-Elemente sein:
 * - <a class="button_tall" href="foo">Bar</a>
 * - <input type="submit" class="button_tall" name="foo" value="Bar" />
 */
.button_tall {
  display: block;
  cursor: pointer;
  min-width: 240px;
  height: 40px;
  padding: 5px;
  margin-right: 25px;
  margin-bottom: 5px;
  border: 2px solid #737373;
  background: #969696 no-repeat 15px 40px;
  border-radius: 10px;
  font-weight: bold;
  font-size: 10pt;
  text-align: left;
  vertical-align: middle;
  color: #fff;
  text-decoration: none;
}

a.button_tall { color: #fff; }

.button_tall:link    { }
.button_tall:visited { }
.button_tall.active  { background-color: #fb9d00; }
.button_tall:active  { background-color: #fb9d00; }
.button_tall:hover   { background-color: #fb9d00; }
.button_tall:focus   { background-color: #fb9d00; }

/* Grid-Tabelle */
table.grid
table.grid th, table.grid td { padding: 2px 5px; }
table.grid th { background-color: #ccc; }
table.grid td { background-color: #e4e4e4; }
table.grid tr.inactive td { background-color: #ccc; }

/* Werbemittel-Tabelle */
table.shop_wrapper {
  width: 100%;
  border: 1px solid #fb9d00;
}

table.shop {
  width: 100%;
}

table.shop td.links  { width: 100px; vertical-align: middle; text-align: center; }
table.shop td.mitte  { width: 400px; }
table.shop td.rechts { width: 100px; }

table.shop input.add_item:focus, table.shop input.add_item:hover, table.shop input.add_item:active {
  background-position: 0 -40px;
}

table.shop input.add_item {
  width: 28px;
  height: 40px;
  margin-left: 10px;
  border: 0;
  cursor: pointer;
  background: url(../img/layout/button_add.png) top left no-repeat;
}

/* Projekt-Listen-Tabelle */
table.prolist             { width: 100%; }
table.prolist td          { padding: 10px 5px 10px 5px; border-bottom: 1px solid #666; }
table.prolist td.img      { padding-right: 5px; }
table.prolist img         { border: 1px solid #fb9d00; }
table.prolist td a.active { font-weight: bold; }

/* table with gray td background to create grid-like look */
table.grid {
  border-spacing: 1px;
  background-color: #fff;
}

table.grid th, table.grid td {
  background-color: #e4e4e4;
  padding: 4px 2px 4px 4px;
}

/* Download-Tabellen */
table.download_list {
  width: 100%;
  margin-bottom: 20px;
}

#nav ul.download_basket {
  margin-top: 20px;
  margin-bottom: 20px;
  background: #fff;
}

#nav #dl_progress {
  padding: 0 5px;
}

td.size {
  text-align: right;
}

td.price {
  text-align: right;
}

td.img {
  text-align: center;
}

.nowrap {
  white-space: nowrap;
}

/* Shopping basket */
table#basket {
  background-color: #e4e4e4;
  border: 1px solid #fb9d00;
}

table#basket img {
  max-width: 50px;
}

#nav .button_tall {
  min-width: 100px;
  max-width: 200px;
}

#upload_action { visibility: hidden; }

/*** File uploader ***/
.upload_drag_n_drop {
  margin-top: 15px;
  width: 320px;
  min-height: 200px;
  text-align: center;
  border: 1px solid #333;
  background: #ccf url(../img/layout/comfortuploadbg_wide.jpg) no-repeat top left;
}

.upload_drag_n_drop:focus, .upload_drag_n_drop:hover {
  color: #fb9d00;
  border-color: #fb9d00;
}

#importarea table.filelist             { width: 100%; }
#importarea table.filelist th          { text-align: left; }
#importarea table.filelist td.size     { text-align: right; }
#importarea table.filelist td.activity { text-align: center; }
#importarea table.filelist td.progress { text-align: right; }

#importarea table.filelist td {
  padding: 2px;
  border: none;
  border-bottom: 1px solid #666;
  height: 18px;
}

tr.upload_error td {
  color: red;
  text-decoration: line-through;
}

.runtime_html5 {
  display: none;
}

/** Thumbnail popup window **/
#container.thumbnail {
  padding: 15px;
}

/** 2013 contiVIEW button design **/
a.button {
  display: block;
  float: left;
  min-width: 7px; /* min-width + padding = 40px */
  min-height: 28px;
  background: url(../img/layout/button_default.png) top left no-repeat;
  margin: 0 15px 0 0;
  padding: 12px 0 0 33px; /* height + padding = 40px */
  font-weight: normal !important;
}

a.button:link, a.button:visited {
  color: #fb9d00;
}

a.button:focus, a.button:hover, a.button:active, a.button.active {
  background-position: left -40px;
  text-decoration: underline;
}

a.button.disabled {
  color: #999 !important;
  background-position: left -80px !important;
  text-decoration: none !important;
  cursor: default;
}

/* Button background image definition */
a.button.action_confirm   { background-image: url(../img/layout/button_confirm.png); }
a.button.action_cancel    { background-image: url(../img/layout/button_cancel.png); }

/* Misc */
.highlight {
  color: #fff;
  background-color: #009;
}

img.datepicker {
  position: relative;
  top: 5px;
  cursor: pointer;
}