/* Styles for controls used on site.
 */
@media all {
   /* Main container */
   .wrapper {
      width: 100%;
      min-width: 700px;
   }


   /* Site global blocks */
   .wrapper *.header {
      
   }
   .wrapper *.content {
      margin: 10px;
   }


   /* Main menu control */
   .menu {
      white-space: nowrap;
   }
   .menu * {
      display: block;
      color: white;
      background-color: #2F3D92;
      margin: 4px 4px 0px 0px;
      padding: 7px 10px;
      border-radius: 6px 6px 0px 0px;
      font-weight: bold;
      float: left;
      text-transform: capitalize;
   }
   .menu a:link,.menu a:visited {
      color: white;
      text-decoration: none;
   }
   .menu a:hover {
      color: #FFAB19 !important;
   }
   .menu *.menu_selected {
      background-color: #D0DCF9;
      color: #2F3D92 !important;
   }


   /* User panel control */
   .user_panel {
      display: block;
      white-space: nowrap;
      text-transform: capitalize;
   }
   .user_panel * {
      
   }
   .user_panel *.user_panel_separator {
      padding: 0px 2px 0px 2px;
   }

   /* Action panel */
   .action_panel {
      border-radius: 6px;
      background-color: #D0DCF9;
      padding: 7px;
      margin: 5px 0;
   }

   /* Error panel */
   .error_panel {
      border-radius: 6px;
      background-color: #FF9999;
      padding: 7px;
      margin: 5px 0;
      font-weight: bold;
   }

   /* Content panel and main content title */
   .content_panel {
      margin: 5px 0;
      padding: 7px;
      border: 1px solid #D0DCF9;
      border-radius: 6px;
   }
   .content_panel h1,.content h1 {
      color: #2F3D92;
      font-size: 15px;
      font-weight: bold;
      padding-bottom: 5px;
      margin-bottom: 10px;
      border-bottom: 1px solid #D0DCF9;
   }
   .error_content_panel {
      margin: 10px 0;
      padding: 7px;
      border: 3px solid #FF0000;
      border-radius: 6px;   
   }
   .error_content_panel h1{
      color: #2F3D92;
      font-size: 15px;
      font-weight: bold;
      padding-bottom: 5px;
      margin-bottom: 10px;
      border-bottom: 1px solid #FF0000;
   }
   
   /* Message classes */
   .message_error {
      font-weight: bold;
      color: #FF0000;
   }
   .message_warning {
      font-weight: bold;
      color: #FF9900;
   }
   .message_success {
      font-weight: bold;
      color: #00CC00;
   }
   .message_info {
      font-weight: bold;
      color: #2F3D92;
   }
   .message_debug {
      font-weight: bold;
      color: #D46E00;
   }

   /* Tab control */
   .tab_control {
      
   }
   .tab_control table {
      width: 100%;
   }
   .tab_control.menu {
      white-space: nowrap;
   }
   .tab_control.menu a {
      display: block;
      color: white;
      background-color: #2F3D92;
      margin: 4px 4px 0px 0px;
      padding: 7px 10px;
      border-radius: 6px 6px 0px 0px;
      font-weight: bold;
      float: left;
      text-transform: capitalize;
   }
   .tab_control.menu a:link,.menu a:visited {
      color: white;
      text-decoration: none;
   }
   .tab_control.menu a:hover {
      color: #FFAB19;
   }
   .tab_control .selected {
      background-color: #D0DCF9;
      color: #2F3D92 !important;
   }
   .tab_control .bar {
      height: 10px;
      background-color: #D0DCF9;
      border-radius: 0px 6px 0px 0px;
   }
   .tab_control .content {
   }
   .tab_control .content_block {
      border: 1px solid #D0DCF9;
      padding: 5px;
      border-radius: 0px 0px 6px 6px;
   }


   /* Hidden control */
   .hidden_ctrl {
      display: none;
   }


   /* Table with formatting */
   .std_table,.std_table tr,.std_table td,.std_table th {
      border: 1px solid #D0DCF9;
   }
   /* When CSS3 will be supported, use commented below instead... */
   .std_table tr.odd {
      background-color: white;
   }
   .std_table tr.even {
      background-color: #E2E9F9;
   }
   /*
    .std_table tr {
        background-color: white;
    }
    .std_table tr:nth-child(2n+3) {
        background-color: #E2E9F9;
    }
    */
   .std_table th {
      font-weight: bold;
      padding: 4px;
      color: white;
      background-color: #2F3D92;
   }
   .std_table caption {
      font-weight: bold;
      text-align: left;
      margin: 0 0 2px 0;
   }

   /* Icons */
   .icon {
      width: 20px;
      height: 20px;
   }
   .stat_icon {
      width: 16px;
      height: 16px;
   }
	.icon_container {
      text-align: center;
      vertical-align: middle;
   }
   span.icon,p.icon {
      display: inline-block;
   }
   span.stat_icon,p.stat_icon {
      display: inline-block;
   }
   .icon_gray {
      background-image: url("../images/gray.png");
   }
   .icon_green {
      background-image: url("../images/green.png");
   }
   .icon_orange {
      background-image: url("../images/orange.png");
   }
   .icon_red {
      background-image: url("../images/red.png");
   }
   .icon_warning {
      background-image: url("../images/warning.png");
   }
   .icon_event_info {
      background-image: url("../images/event_info.png");
   }
   .icon_event_tick {
      background-image: url("../images/event_tick.png");
   }
   .icon_event_warn {
      background-image: url("../images/event_warn.png");
   }

   /* Comments */
   .comment_content {
      margin: 0;
      padding: 7px;
      border-radius: 6px;
      /* For colors: set full color, then set saturation to 16 */
   }
   .comment_content.anomaly {
      background-color: #FFD6D6;
   }
   .comment_content.ljf {
      background-color: #D6D6FF;
   }
   .comment_content .title {
      padding-bottom: 5px;
      margin-bottom: 10px;
      border-bottom: 1px solid #2F3D92;
      font-weight: bold;
   }
   .comment_content.new_comment {
      border: 1px solid #D0DCF9;
      margin: 20px 0;
   }
   .comment {
      margin: 20px 0;
   }
   .comment_top_title {
      display: block;
      margin: 10px 20px 0 20px;
      padding: 6px 15px 6px 4px;
      font-weight: bold;
   }
   .comment_top_title.open {
      border-radius: 6px 6px 0 0;
   }
   .comment_top_title.close {
      border-radius: 6px;
   }
   .comment_top_title.anom {
      background-color: #FFD6D6;
   }
   .comment_top_title.ljf {
      background-color: #D6D6FF;
   }
   .comment_collapse_sign {
      display: inline-block;
      text-align: center;
      vertical-align: middle;
      margin: 0 6px 0 2px;
      width: 15px;
      height: 15px;
      background-color: white;
      border: 1px solid white;
      border-radius: 3px;
   }
   .comment_add_text {
      width: 100%;
      height: 200px;
      display: block;
   }
   .comment_edit_text {
      width: 100%;
      height: 100px;
      display: block;
   }
   .add_comment_button {
      text-align: right;
      margin-top: 10px;
   }


   /* Filter panel specifics */
   .filter_radio {
      margin-right: 15px;
   }
   .filter_criteria {
      margin: 10px 0;
   }
   .filter_criteria .control {
      margin-right: 5px;
   }
   .filter_criteria .message {
      color: #FF0000;
      font-weight: bold;
   }
   .filter_button {
      width: 130px;
   }
   .filter_delete_criterion {
      background-image: url("../images/icon_delete.png");
      height: 16px;
      width: 16px;
      display: inline-block;
      cursor: pointer;
      vertical-align: middle;
      margin: 0 5px 0 5px;
   }


   /* Specifics for caption */
   .caption_block {
      display: inline-block;
      margin: 0 10px 0 0;
   }
   .caption_item_text {
      line-height: 20px;
      display: inline-block;
      vertical-align: top;
      margin: 0 0 0 2px;
   }


   /* Information panel formatting */
   .info_table td {
      padding: 10px 4px;
   }
   .info_table tr.odd {
      background-color: white;
   }
   .info_table tr.even {
      background-color: #E2E9F9;
   }
   .info_table td.col_name {
      width: 200px;
      font-weight: bold;
   }
   .info_table td.col_value {
      width: 200px;
   }


   /* Specifics for switcher control */
   .switcher_control {
      width: 100%;
      table-layout: fixed;
   }
   .switcher_control .selector {
      vertical-align: top;
      height: 150px;
   }
   .switcher_control .selector .title {
      font-weight: bold;
      margin-bottom: 3px;
   }
   .switcher_control .selector .container {
      background-color: white;
      border: 1px solid #2F3D92;
      padding: 0 2px;
      margin: 2px;
      height: 100%;
      overflow: auto;
   }
   .switcher_control .selector .container .element {
      display: block;
      background-color: #FFFFFF;
      margin: 4px 0;
   }
   .switcher_control .selector .container .element input {
      vertical-align: text-bottom;
   }
   .switcher_control .selector .select {
      width: 100%;
      height: 100%;
   }
   .switcher_control .control {
      width: 140px;
      vertical-align: middle;
   }
   .switcher_control .control .button {
      display: block;
      width: 120px;
      margin: 20px 10px;
   }


   /* Specifics for datatable */
   .datatable {
      width: 100%;
      table-layout: auto;
   }
   .clear {
      clear: both;
   }
   .datatable th {
      color: white;
      border: 1px solid #D0DCF9;
      text-align: left;
      background-color: #2F3D92;
      padding: 0 3px;
   }
   .datatable tr {
      border: 1px solid #D0DCF9;
      height: 30px;
   }
   .datatable tr.odd {
      background-color: white;
   }
   .datatable tr.even {
      background-color: #E2E9F9;
   }
   .datatable td {
      border: 1px solid #D0DCF9;
      padding: 0 3px;
   }
   .sorting,.sorting_asc,.sorting_desc {
      cursor: pointer;
      padding-left: 15px !important;
   }
   .sorting,.sorting_disabled {
      background: url("../images/sort_both.png") no-repeat left center #2F3D92;
   }
   .sorting_asc {
      background: url("../images/sort_asc.png") no-repeat left center #2F3D92;
   }
   .sorting_desc {
      background: url("../images/sort_desc.png") no-repeat left center #2F3D92;
   }
   .sorting_disabled {
      padding-left: 15px !important;
      color: #C3C3C3 !important;
   }
   .sorting_asc_disabled {
      background: url("../images/sort_asc_disabled.png") no-repeat left center
         #2F3D92;
   }
   .sorting_desc_disabled {
      background: url("../images/sort_desc_disabled.png") no-repeat left
         center #2F3D92;
   }
   .paginate_button,.paginate_active {
      margin: 0 4px;
      display: inline-block;
      text-align: center;
      vertical-align: middle;
      min-width: 20px;
      color: black;
   }
   .paginate_button {
      cursor: pointer;
   }
   .paginate_active,.paginate_active:hover {
      color: black;
      cursor: auto;
      font-weight: bold;
      text-decoration: underline;
   }
   .first,.previous,.next,.last {
      height: 20px;
   }
   .paginate_button.first {
      background-image: url("../images/first_on.png");
      cursor: pointer;
   }
   .paginate_button_disabled.first {
      background-image: url("../images/first_off.png");
      cursor: auto;
   }
   .paginate_button.last {
      background-image: url("../images/last_on.png");
      cursor: pointer;
   }
   .paginate_button_disabled.last {
      background-image: url("../images/last_off.png");
      cursor: auto;
   }
   .paginate_button.next {
      background-image: url("../images/next_on.png");
      cursor: pointer;
   }
   .paginate_button_disabled.next {
      background-image: url("../images/next_off.png");
      cursor: auto;
   }
   .paginate_button.previous {
      background-image: url("../images/previous_on.png");
      cursor: pointer;
   }
   .paginate_button_disabled.previous {
      background-image: url("../images/previous_off.png");
      cursor: auto;
   }
   .dataTables_paginate {
      float: right;
   }
   .dataTables_info {
      font-weight: bold;
      margin-bottom: 5px;
   }
   .dataTables_processing {
      font-weight: bold;
      text-align: center;
   }

   /* Specifics for logo */
   .logo.login {
      max-width: 220px !important;
      margin: 5px;
   }
   .logo.mainpage {
      max-width: 160px !important;
      margin: 5px;
   }
}