/* GENERAL FORMATTING */
/* Reset margin and padding */
* {
  margin: 0;
  padding: 0;
}
.clair {
  clear:both;
}
/* Text styles */
h1 {
  font-size: 30px;
  font-weight:normal;
  color: #253746;
  margin: 0 0 10px 0;
}
h2 {
  font-size: 24px;
  font-weight:normal;
  color: #5b7e96;
  margin: 0 0 10px 0;
}
h3 {
  font-size: 20px;
  font-weight:normal;
  color: #253746;
  /* padding: 0 30px 20px; */
  margin: 0 10px 10px 0;
}
h4 {
  font-size: 14px;
  font-weight:normal;
  color: #253746;
  /* padding: 0 30px 20px; */
  margin: 0px 0px 10px 20px;
}
p {
  font-size:13px;
  color:#373737;
  margin-bottom:10px;
}
a {
  color:#00a8e2;
  text-decoration:none;
  cursor:pointer;
}
a:hover {
  color: #373737;
}
ul {
  list-style-type: square;
}
/* IE annoying borders removal */
a img {
  border:none;
}
html, body {
  margin: 0 auto;
  background:white;
  font-family: 'Arial', 'Times New Roman', 'Courier New';
  font-size:14px;
  font-weight:normal;
  width:960px;
}

.right-align {
  float:right;
  padding: 0 8px;
}
right-align-text {
  text-align:right;
}
/* float removes margins but right align headings need same margins as normal */
h2 .right-align {
  margin: 0 0 15px 0;
}
#main {
  height:95%;
  position: relative;
}
/* HEADER */
#header {
  background: white;
  position: fixed;
  width: 960px;
  z-index: 40;
  display: none;
}
#logo {
  padding: 15px 15px 5px;
  float: left;
}
#logo img {
  height: 30px;
}
#protobook-title {
  float: left;
  margin: 20px 0px 0px 30px;
}
.PBundle-title {
  font-size: 20px;
  font-weight: bold;
  color: #4b1e78;
}
.PBook-title {
  margin-left: 25px;
  font-size: 18px;
  font-weight: bold;
  color: #6a8ea2;
}
#lang {
  float: right;
  margin: 30px 0 5px 0;
}
#header-menu {
  border-bottom: 1px solid #e7e7e7;
  height: 35px;
  line-height: 35px;
  background: #4b1e78;
  color: #FFF;
  position: fixed;
  width: 960px;
  border-radius:5px 5px 0 0;
}
#header-menu li:first-child {
  border-radius:5px 0 0 0;
}
#home-button img {
  height: 17px;
  vertical-align: middle;
}
#menu-buttons {
  float: left;
}
/* SEARCH BAR */
#searchbar {
  float: right;
  padding-right: 20px;
}
#search-term {
  width: 200px;
}
#search-button {
  padding-left: 5px;
  height: 15px;
}
/* auto-complete list */
.actb-dropdown {
  z-index: 50;
  width: 220px;
  position: fixed;
  background-color: #ffffff;
  border-spacing: 3px;
  font-size: 13px;
  color: #00a8e2;
  max-height:350px;
  overflow: auto;
}
.matched-text {
  font-weight: bold;
  text-decoration: underline;
}
.actb-dropdown li {
  padding: 2px 5px;
  display: block;
}
.actb-selected {
  background-color: #6a8ea2;
  color: #ffffff;
}
.actb-selected a, .actb-dropdown a:hover {
  color: inherit;
}
/* MENU BAR */
#menu, #menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
  vertical-align: middle;
}
/* Top level menu items (on the menu bar) */
#menu li {
  display: inline-block;
  position: relative;
  color:#ffffff;
}
#menu a {
  text-decoration: none;
  height: 35px;
  color:inherit;
  padding: 0px 30px;
  width: auto;
}
/* Change colour on mouse over */
#menu li.disable_menu {
  color: #555555;
}
#menu li:not(.disable_menu):hover {
  background: rgb(170, 120, 252);
}
/* Only display an item's drop down menu when the mouse is over it */
#menu li ul {
  display: none;
}
#menu li:not(.disable_menu):hover ul {
  display: block;
}
/* Drop down menu formatting */
#menu ul {
  position: absolute;
  /* width: 250px; */
  width: 260px;
}
#menu ul li:first-child {
  border-radius:0 0 0 0;
}
#menu ul li {
  display: inherit;
  border: solid 1px #e7e7e7;
  background: #ffffff;
  color:#00a8e2;
}
#menu ul a {
  text-transform: inherit;
}
/* change colour on mouse over */
#menu ul li:hover {
  background:#6a8ea2;
  color:#ffffff;
}
/* For menu items that navigate to new page and don't have sub-menu */
#menu .nav-item {
  display:block;
/* So can click anywhere on item not just text */
}
/* For menu items that aren't links, don't change the cursor */
#menu .non-nav-item {
  cursor:default;
}
/* Submenu (2nd level) positioning */
#menu ul ul {
  left: 100%;
  top: 0;
}
/* Submenu (2nd level) formatting */
/* for 3 columns */
#menu .column {
  column-count:3;
  -moz-column-count: 3;
  -webkit-column-count: 3;
}
/* for 2 columns */
#menu .column2 {
  column-count:2;
  -moz-column-count: 2;
  -webkit-column-count: 2;
}
/* general */
#menu .column, #menu .column2 {
  width:600px;
  column-gap:0;
  -moz-column-gap:0;
  -webkit-column-gap:0;
}
#menu .column li, #menu .column2 li {
  display: none;
  font-weight: normal;
  font-size: 13px;
  overflow: hidden;
/* Fix for Firefox and IE 10-11 */
  -webkit-column-break-inside: avoid;
/* Chrome, Safari, Opera, Firefox */
  page-break-inside:avoid;
}
/* Change colour on mouse over */
#menu .column li:hover,#menu .column2 li:hover {
  background: #6a8ea2;
  color: #FFF;
}
#menu ul li:hover .column li,#menu li ul li:hover .column2 li {
  display: block;
}
/* GENERAL PAGE CONTENT */
.content-container {
  margin:0 auto;
  padding-top:83px;
  padding-bottom:5px;
  height: 90%;
  width: 960px;
  display: none;
}
.page-content {
  width:920px;
  margin-top:20px;
  margin-bottom:20px;
  padding: 10px 19px;
  border:1px solid #ededed;
  background:#ffffff;
}
/*
  all-protos-content is the page content on the All Protcolos page
  * Needs a larger top margin to  allow space for the letters transversal that
  * appears below the header
 */
#all-protos-content {
  padding-top:20px;
  margin-top:85px;
}
/* When the loading animation is used on protocol list pages, centralise it */
#loading-animation img {
  display:block;
  margin: 0 auto;
}
#loading-animation p {
  text-align: center;
}
/* WELCOME PAGE LISTING */
.welcome-page-listing {
  padding-left: 1em;
}
.welcome-page-listing ul {
  list-style: circle;
  padding-left: 2em;
}
/* PROTOCOL LIST PAGES */
#all-protocols-title {
  float:left;
}
#letters {
  font-size: 20px;
  padding: 20px 0;
  width: 958px;
  text-align: center;
  position: fixed;
  background-color: #FFF;
  border:1px solid #ededed
}
#letters a {
  padding: 4px 6px;
}
.tag-list {
  list-style-type:none;
  column-count:4;
  -moz-column-count: 4;
  -webkit-column-count: 4;
}
.tag-option {
  width: 230px;
  padding: 3px;
}
.checkbox-label {
  padding-left: 3px;
}
.list-protos {
  font-size: 13px;
  border-collapse: collapse;
  width: 890px;
  margin:0 0 40px 15px;
}
.list-protos th {
  background: #4b1e78;
  color: #ffffff;
  font-size: 15px;
  font-weight: normal;
  padding: 10px;
  text-align: left;
}
.list-protos td {
  padding: 10px;
}
.list-protos tr {
  border: solid 1px #ededed;
}
.list-protos tr:nth-child(odd) {
  background: #ffffff;
}
.list-protos tr:nth-child(even) {
  background: #e7e7e7;
}
.protos-column {
  width:350px;
}
.classif-list {
  list-style:none;
}
td .desc-protos {
  height:15px;
  line-height:15px;
  width:150px;
  overflow:hidden;
  white-space:nowrap;
}
/* PROTOCOL RECORD PAGE */
/* Protocol title frame */
#proto-title-frame {
  min-height:70px;
}
.proto-name {
  display:inherit;
  float:left;
  font-size:30px;
  color: #253746;
  margin-bottom:15px;
}
.proto-desc {
  float:left;
  list-style: none;
  font-size:14px;
  color:#373737;
  margin-bottom:15px;
}
a.proto-tag {
  text-decoration:none;
  font-size:12px;
  color:#FFF;
  background:#465d67;
  padding:5px 7px;
  margin-left:12px;
  float:left;
  border-radius:5px;
  margin-top:5px;
}
a:hover.proto-tag {
  color:#ffffff;
  background:#6a8ea2;
  padding:4px 6px;
}
.decrypted-indicator {
  color:#ffffff;
  background:#5CB946;
  padding:4px 6px;
  border-radius: 5px;
  margin-top: 5px;
  margin-right: 2px;
  float:right;
}
.deprecated-indicator {
  color:#ffffff;
  background:#ff8000;
  padding:4px 6px;
  border-radius: 5px;
  margin-top: 5px;
  margin-right: 2px;
  float:right;
}
.warning-indicator {
  color:#ffffff;
  background:#ff8000;
  padding:4px 6px;
  border-radius: 5px;
  margin-top: 5px;
  margin-right: 2px;
  float:right;
}
.qfm-indicator {
  color:#ffffff;
  background:#bfb800;
  padding:4px 6px;
  border-radius: 5px;
  margin-top: 5px;
  margin-right: 2px;
  float:right;
}
.aliased-indicator {
  color:#ffffff;
  background:#6a8ea2;
  padding:4px 6px;
  border-radius: 5px;
  margin-top: 5px;
  margin-right: 2px;
  float:right;
}
.pdata_engine-indicator {
  color:#ffffff;
  background:#373737;
  padding:4px 6px;
  border-radius: 5px;
  margin-top: 5px;
  float:right;
}
/* Tabs */
.tabs {
  height:35px;
}
.tabs > ul {
  font-size: 15px;
  list-style:none;
}
.tabs > ul > li {
  margin:0 5px;
  padding:10px 10px 7px 10px;
  width:150px;
  display:block;
  float:left;
  color:#FFF;
  -webkit-user-select: none; /* Chrome / Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE 10+ */
  /* user-select: none; Likely future? */
  border-radius: 5px 5px 0 0;
  border-bottom: none;
  background: #465d67;
}
.tabs > ul > li:hover {
  background: #6a8ea2;
  color:#ffffff;
  cursor:pointer;
}
.tabs > ul > li.tabActiveHeader {
  background: #6a8ea2;
  color: #ffffff;
  cursor: pointer;
}
.tabscontent {
  border: solid 1px #e7e7e7;
  padding: 25px;
  background: #FFFFFF;
  margin-bottom:20px;
}
#tabHeader_1 {
/*  margin-left:240px;*/
  margin-left:400px;
}
#tabHeader_1, #tabHeader_2, #tabHeader_3, #tabHeader_4 {
  text-align:center;
}
#tabHeader_1 a {
  text-decoration: none;
  height: 35px;
  color:white;
  width: auto;
}
#tabHeader_2 a {
  text-decoration: none;
  height: 35px;
  color:white;
  width: auto;
}
#tabHeader_3 a {
  text-decoration: none;
  height: 35px;
  color:white;
  width: auto;
}
#tabHeader_4 a {
  text-decoration: none;
  height: 35px;
  color:white;
  width: auto;
}
/* Tab content general */
#specific_attr_title, #generic_attr_title , #specific_tune_title,
#generic_tune_title, #monitoring_capabilities_title, #config_capabilities_title,
#offloading_features_title,
#classification_workflows_title, #classification_flow_types_title,
#classification_subflows_title {
  float:left;
}
.hide-show-link {
  padding-top:8px;
  color:#00a8e2;
}
.ovw-field-left, .attr-field-left, .adv-field-left {
  text-align:right;
  padding:7px 25px;
  font-weight:bold;
  border-bottom: solid 1px #c5c5c5;
}
.ovw-field-right, .attr-field-right, .adv-field-right {
  padding:7px 25px;
}
/* Overview tab content */
.ovw-tbody {
  max-height: 12em;
  overflow: auto;
}
.ovw-field-left {
  width:200px;
}
.ovw-field-right {
  width:auto;
}
.version-type {
  font-weight:bold;
  margin:8px 5px 5px 18px;
}
.ovw-timeout-table, .ovw-checked_versions-table, .ovw-checked_versions-tableheader,
.ovw-supported_versions-table, .ovw-supported_versions-tableheader {
  border-collapse:collapse;
  text-align:center;
}
.ovw-timeout-table th, .ovw-checked_versions-table th, .ovw-checked_versions-tableheader th,
.ovw-supported_versions-table th, .ovw-supported_versions-tableheader th {
  color:#FFF;
  background:#465d67;
  border-right:1px solid #FFF;
  font-weight:normal;
}
.ovw-checked_versions-table td, .ovw-checked_versions-tableheader td,
.ovw-supported_versions-table td, .ovw-supported_versions-tableheader td{
  min-width: 110px;
}
.ovw-timeout-table td, .ovw-timeout-table th,
.ovw-checked_versions-table td, .ovw-checked_versions-table th, .ovw-checked_versions-tableheader td, .ovw-checked_versions-tableheader th,
.ovw-supported_versions-table td, .ovw-supported_versions-table th, .ovw-supported_versions-tableheader td,
.ovw-supported_versions-tableheader th {
  padding: 5px;
  vertical-align:middle;
}
/* Attributes tab content */
#tabpage_2 h3 {
  font-size: 18px;
}
.attr-submenu {
  width:250px;
  float:left;
  height: 450px;
  overflow: auto;
}
.attr-submenu ul {
  padding: 0;
}
.attr-submenu-item {
  list-style:none;
}
.attr-l0, .attr-l1, .attr-l2, .attr-l3 {
  padding: 7px 0;
  border: 1px solid #dfdfdf;
  display: block;
  color: #00a8e2;
  text-decoration:none;
  font-size:13px;
}
.attr-l0 {
  background:#ffffff;
  padding-left:10px
}
.attr-l1 {
  background:#f7f7f7;
  padding-left:25px;
}
.attr-l2 {
  background:#efefef;
  padding-left:40px
}
.attr-l3 {
  background:#e7e7e7;
  padding-left:55px;
}
.current-specific-attr, .current-generic-attr {
  background:#dfdfdf;
  color: #373737;
}
.attr-tree {
  margin:0 0 20px 10px;
  position: relative;
}
.open {
  display: block;
}
.closed {
  display: none;
}
#specific-attr-details, #gen-attr-details {
  position: absolute;
  right: 0;
}
.attr_name {
  float:left;
}
.attr_desc {
  font-size: 14px;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
  border-radius: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f2f2f2;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #d2d2d2;
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #c2c2c2;
}

.specific-attr-table, .generic-attr-table {
  width:550px;
  float:left;
  padding-left:80px;
  padding-right:15px;
  height: 450px;
  overflow: auto;
}
.attr-field-left {
  width:150px;
  vertical-align: top;
}
.attr-field-right {
  width:250px;
}
/* Advanced features tab content */
#tabpage_3 h3 {
  font-size: 18px;
}
.adv-features-section {
  padding-bottom:30px;
}
.adv-field-left {
  width:550px;
  text-align:left;
}
.adv-field-left .deprecated-indicator {
  margin-top: 0;
}
.adv-field-left p {
  font-weight:normal;
  margin-top:5px;
  margin-bottom:0;
}
.adv-field-right {
  width:250px;
}
/* Workflows tab content */
#tabpage_4 h3 {
  font-size: 18px;
}
div.workflows-subsection {
  margin-top: 30px;
}
#subflow_list {
  margin-left: 40px;
  margin-bottom: 20px;
}
/* FOOTER */
#footer {
  width:100%;
  height:30px;
  line-height:30px;
  background:#4b1e78;
  color:white;
  font-size:12px;
  margin-top: 10px;
  border-radius: 5px;
  margin: 0 0 10px 0;
  display: none;
}
#footer-PB-version {
  padding-left:10px;
}
#copyright {
  float:right;
  vertical-align:middle;
  padding-right:10px;
}
.select-lang {
  width: 100px;
  overflow: hidden;
}
.select-id {
  width: 200px;
  overflow: hidden;
}

.whats_new {
  margin-left:15px;
}