@mixin rounded-top {
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

@mixin rounded-bottom {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

@mixin margin-padding-null {
    margin: 0;
    padding: 0;
}

@mixin display-inline-block {
    display: inline-block;
}

html, body {
    @include margin-padding-null;
    color:#333;
    background: url(/assets/bg-grad.png) repeat-x 0px 0px;
    height: 100%;
    min-width: 100%;
    display: inline-block;
    font: {
        family: arial, helvetica, clean, sans-serif;
    }
}

html {
	background-color:#f1f1f1;
}

#naf {
  #fluid {
    margin: 0 6px;
    text-align: left;

    a {
      color: #0085CF;
      text-decoration: none;
    }

    select {
      width: 40em;
    }

    input {
      width: 40em;
    }

    .search_select_input {
      select {
        width: 12em;
      }

      input {
        width: 15em;
      }
    }

    :focus {
      outline:none;
    }

    input[type=checkbox] {
      width: 13px;
      height: 13px;
      padding: 0;
      margin:0;
      vertical-align: bottom;
      position: relative;
      top: -1px;
      *overflow: hidden;
    }

    .clear {
      clear: both;
    }

    .display-inline-block {
      @include display-inline-block;
    }

    div {
      @include margin-padding-null;
    }

    #hd {
      div#header {
        h3 {
          margin: 20px 0;
          display: inline-block;
          font-size: 20.8px;
          font-weight: bold;
          padding-left: 10px;
          a {
            color: #FFFFFF;
          }
        }
      }
    }

    #navigation, #child_navigation {
      border-bottom: 4px solid #2D2D2D;
      margin-top: 22px;
      ul {
        @include margin-padding-null;
        li {
          list-style: none outside none;
          float:left;
          display:inline;
          a {
            @include rounded-top;
            font-size:11px;
            padding:6px 10px 4px 10px;
            background-color: #808080;
            font-weight: normal;
            margin: 0 0.2em 0 0;
            color: #fff;
            display: block;
            &:hover { background-color: #2d2d2d; }
          }
        }
        li#on {
          a {
            background-color: #2D2D2D !important;
          }
        }
      }
    }

    #child_navigation {
      margin-top: 0px;
    }

    #bd, #child_bd {
      font: 13px/1.231 arial,helvetica,clean,sans-serif;
      @include rounded-bottom;
      background-color: #FFFFFF;
      border-bottom: 1px solid #E1E1E1;
      border-left: 1px solid #E1E1E1;
      border-right: 1px solid #E1E1E1;
      padding: 10px;

      #page-label {
        float: none;
        h3#record_name {
          font-size: 130%;
          font-weight: bold;
          margin: 0;
          padding: 10px 0;
        }
      }

      #show_search_container_link {
        margin-top: 10px;
      }

      #search_container {
        border: 1px solid #E1E1E1;
        @include rounded-top;
        @include rounded-bottom;
        padding: 15px;
        margin-top: 10px;
        margin-bottom: 5px;
        display: none;
        #job_search, #application_search {
          padding: 10px;
          div.field{
            clear:both;
            text-align:right;
            line-height:15px;
            label {
              float:left;
            }
          }
          div {
            vertical-align: top;
          }
        }
      }

      #flash_message {
        #notice {
          background-color: #E1FFD1;
          border: 1px solid #C5F8AC;
          color: #499524;
          margin: 0;
          padding: 12px;
        }
      }

      #page-select-container {
        float: right;
        margin-top: -1px;
        padding: 2px 2px;
        width: 240px;

        label {
          position: relative;
          top: 4px;
        }

        #iDisplayLength {
          background-color: #FFFFFF;
        }

        .page-select {
          border: 1px solid #E1E1E1;
          cursor: pointer;
          float: right;
          width: 95px;
        }
      }

      #refresh-page-container {
        float: right;
        margin-top: -1px;
        padding: 2px 2px;
        width: 240px;
        input {
          width: 13px;
        }
      }

      #datatable_wrapper {
        #datatable_processing {
          color: #45a113;
          font-size: 14px;
          margin: 0 0 6px 0;
          background-color: #e5f4e1;
          border: 1px solid #d5f1cd;
          padding: 4px 8px 4px 8px;
        }

        #datatable {
          table-layout:fixed;

          width:100%;
          border-collapse: collapse;
          td, th {
            margin: 0;
            padding: 3px 0 3px 3px;
          }

          tbody tr {
            &:nth-child(even) {
              background-color: #F4F4F4;
            }
          }

          tr td a img {
            margin: 0;
          }

          td {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }

          .ui-icon {
            float: left;
          }

          .center {
            text-align: center;
          }

          .script-queued, .winding-down {
            color: #f8a800;
          }

          .script-running, .running {
            color: #45a113;
          }

          .script-error, .dead {
            color: #CD0A0A;
          }

          .script-finished {
            color: #000000;
          }

          .deleted_or_hidden {
            background-color: #ffcccc !important;
          }
        }

        #datatable_info {
          margin: 6px 0 8px 0 ;
        }

        .dataTables_info {
          margin: 8px 0 6px 0 ;
        }

        .ui-buttonset .ui-button {
          border: 1px solid #CECECE;
          color: #333333;
          margin: 0;
          padding: 4px 12px;
        }

        .ui-state-default {
          background-color: #F4F4F4;
          background-image: none;
          border: 1px solid #E1E1E1;
          font-weight: normal;
        }
      }

      #record {
        td, th {
          padding-right: 30px;
        }

        #runner td, th {
          padding-right: 8px;
        }

        #table_record {
          margin-top: 10px;
        }

        #naf_table_show {
          table-layout:fixed;
          width:50%;
          border-collapse: collapse;
          td, th {
            margin: 0;
            padding: 4px 0 4px 4px;
          }

          thead tr {
            background-color: #F4F4F4;
          }

          tbody tr {
            &:nth-child(even) {
              background-color: #F4F4F4;
            }
          }

          tr td a img {
            margin: 0;
          }

          td {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }

          .center {
            text-align: center;
          }
        }

        .field label {
          width: 12em;
          float: left;
          text-align: left;
          margin-right: 1em;
          display: block;
        }

        .text_area {
          margin-left: 15.5em;
        }

        #errorExplanation {
             background-color: #FEF1EC;
             border: 1px solid #FFE4D8;
             color: #CD0A0A;
             line-height: 24px;
             margin: 0 0 0.8em;
             padding: 12px;
        }

        .validation-error {
            color: #CD0A0A;
        }

        input.check_box_input {
            width: 13px;
        }

        .scrollable-output {
          height: 500px;
          overflow-x:auto;
          width: 99%;
          background-color: #F4F4F4;
          color: #000000;
          padding: 5px 10px 5px 0px;

          #event_list {
            word-wrap: break-word;
            padding-left: 10px;
            margin: 0;
            list-style: none outside none;
            li {
              padding-left: 20px;
              text-indent: -15px;
            }
          }

          .msg {
            background: none repeat scroll 0 0 #202020;
            border: 1px solid #303030;
            box-shadow: 0 0 5px #000000;
            border-radius: 5px 5px 5px 5px;
            margin: 20px auto;
            min-width: 600px;
            padding: 40px 25px;
            position: relative;
            text-align: center;
            width: 65%;
            font-size: 20px;
          }
        }

        .scrollable-output-expanded {
          height: 720px;
          overflow-x:auto;
          width: 99%;
          background-color: #F4F4F4;
          color: #000000;
          padding: 5px 10px 5px 0px;

          #event_list {
            word-wrap: break-word;
            padding-left: 10px;
            margin: 0;
            list-style: none outside none;
            li {
              padding-left: 20px;
              text-indent: -15px;
            }
          }

          .msg {
            background: none repeat scroll 0 0 #202020;
            border: 1px solid #303030;
            box-shadow: 0 0 5px #000000;
            border-radius: 5px 5px 5px 5px;
            margin: 20px auto;
            min-width: 600px;
            padding: 40px 25px;
            position: relative;
            text-align: center;
            width: 65%;
            font-size: 20px;
          }
        }

        #stdout_header {
          width: 98%;
          input {
            width: 24em;
          }

          #automatic_data_update {
            float:right;
            padding-top: 4px;
            max-width: 215px;
            input[type=checkbox] {
              width: 13px;
              top: -5px;
            }
            input {
              width: 100px;
            }
          }

          a {
            float:right;
          }

          #log_search {
            width: 50%;
          }

          #regex_options {
            width: 10%;
          }

          .description {
            display: none;
            position: absolute;
            background: #F4F4F4;
            border: 1px solid #000;
            width: 400px;
            height: 125px;
            margin: 0% 0% 0% 65%;
          }
        }

        h4 {
          margin: 10px 0 5px 0;
          font-weight: bold;
        }

        .auto_scroll_off {
          color: #CD0A0A;
        }
      }

      #parent_links {
        padding-top: 10px;
      }

      .wind-bttn {
        width:10%;
      }
    }

    .winding-down, .queued, .winding-down-count {
      color: #f8a800;
    }

    .running, .running-count {
      color: #45a113;
    }

    .dead, .error, .down-count {
      color: #CD0A0A;
    }
  }
}

/*
############################################
Flash Error Message
############################################
*/

.error {
  margin: 0 0 0.8em 0;
  background-color: #fef1ec;
  border: 1px solid #ffe4d8;
  color: #cd0a0a;
  line-height:40px;
}