@font-face {
  font-family: boundlessheader;
  src: url('../common-components/fonts/EncodeSansNormal-900-Black.ttf');
  src: url('../common-components/fonts/EncodeSansNormal-900-Black.ttf?#iefix')
}

@font-face {
  font-family: boundlessbody;
  src: url('../common-components/fonts/Open-Sans-regular.ttf');
  src: url('../common-components/fonts/Open-Sans-regular.ttf?#iefix');
}

/* Removes URL and TITLE from Printed Documents or PDF's */
@page {
  size: auto;
  margin: 0mm;
}


body {
  font-family: boundlessbody, sans-serif;
}

.title {
  padding: 0px 20px;
}

h1, h2, h3, h4, h5, h6, .heading {
  font-family: boundlessheader, sans-serif;
  font-variant: small-caps
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.17em;
}

h4 {
  font-size: 1em;
}

h5 {
  font-size: .83em;
}

h6 {
  font-size: .67em;
}

h1.heading {
  color: #4B2E83;
}

h2.heading {
  color: #85754D;
}

h3.heading {
  color: #B7A57A;
}

h4.heading {
  color: #444444;
}

.gray {
  color: #444444
}

.purple {
  color: #4B2E83
}

.gold {
  color: #85754D
}

.size12 {
  font-size: 12pt;
}

.size16 {
  font-size: 16pt;
}

.size24 {
  font-size: 24pt;
}

.size30 {
  font-size: 30pt;
}

.size36 {
  font-size: 36pt;
}

.pagesection {
  font-family: boundlessheader, sans-serif;
  font-variant: small-caps;
  margin-bottom: 10px;
  border-bottom-style: outset;
  border-bottom-width: 2px;
}

.tabletitle {
  font-family: boundlessheader, sans-serif;
  font-variant: small-caps;
  margin-bottom: 4px;
  color: #444444;
  border-bottom-style: outset;
  border-bottom-width: 2px;
}

.subtitle {
  font-size: 8pt;
  font-weight: bold;
  font-family: boundlessheader, sans-serif;
  margin-bottom: 4px;
  color: #444444;
  border-bottom-style: outset;
  border-bottom-width: 2px;
}

.accordion-label {
  font-family: verdana, sans-serif;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.clear, .cb {
  clear: both;
}

.center {
  text-align: center;
}

img {
  border-width: 0px;
}

section {
  margin: 30px;
}

.column {
  width: 29%;
  padding: 10px;
}

.sidebody {
  width: 60%;
  padding: 10px;
}

.sidebar {
  width: 30%;
  padding: 10px;
}

.half {
  width: 44%;
  padding: 10px;
}

.classboxshadow {
  -webkit-box-shadow: 3px 3px 12px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 3px 3px 12px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 3px 3px 12px 0px rgba(0, 0, 0, 0.75);
  display: inline-block;
  background-color: #f9f9f9;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  margin-bottom: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  border: solid 2px #aaa;

}

.info {
  font-weight: bold;
}

.round {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

.shadow {
  -webkit-box-shadow: 3px 3px 12px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 3px 3px 12px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 3px 3px 12px 0px rgba(0, 0, 0, 0.75);
}

.inner {
  height: 100%;
  -webkit-box-shadow: inset 1px 1px .5px .5px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: inset 1px 1px .5px .5px rgba(0, 0, 0, 0.75);
  box-shadow: inset 1px 1px .5px .5px rgba(0, 0, 0, 0.75);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.hand:hover {
  cursor: pointer;
}

.pointer:hover {
  cursor: pointer;
}

.widget {
  font-size: .75em;
}

#dialog-link {
  padding: .4em 1em .4em 20px;
  text-decoration: none;
  position: relative;
}

#dialog-link span.ui-icon {
  margin: 0 5px 0 0;
  position: absolute;
  left: .2em;
  top: 50%;
  margin-top: -8px;
}

#icons {
  margin: 0;
  padding: 0;
}

#icons li {
  margin: 2px;
  position: relative;
  padding: 4px 0;
  cursor: pointer;
  float: left;
  list-style: none;
}

#icons span.ui-icon {
  float: left;
  margin: 0 4px;
}

.fakewindowcontain .ui-widget-overlay {
  position: absolute;
}

.photo {

  text-align: center;
  margin: 0px 5px;
  padding: 4px;

  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;

  -webkit-box-shadow: 1px 1px 11px 2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 1px 1px 11px 2px rgba(0, 0, 0, 0.75);
  box-shadow: 1px 1px 11px 2px rgba(0, 0, 0, 0.75);
}

.photothumb {
  height: 100px;
  text-align: center;
  margin: 0px 5px;
  padding: 2px;

  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;

  -webkit-box-shadow: 1px 1px 8px 2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 1px 1px 8px 2px rgba(0, 0, 0, 0.75);
  box-shadow: 1px 1px 8px 2px rgba(0, 0, 0, 0.75);
}

.photomicro {

  text-align: center;
  margin: 0px 5px;
  padding: 2px;

  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;

  -webkit-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.75);
  box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.75);
}

.colorbox {
  width: 100px;
  height: 25px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: 2px solid white;

  -webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.75);
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.75);

}

.chartkey {
  width: 100px;
  height: 25px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: 2px solid white;

  box-shadow: inset 1px 1px 0.5px 0.5px rgba(0, 0, 0, 0.75);
}

blockquote {
  display: block;
  background: #fff;
  padding: 15px 20px 15px 45px;
  margin: 0 0 20px;
  position: relative;

  /*Font*/
  font-family: Georgia, sans-serif;
  font-size: 16px;
  line-height: 1.2;
  color: #666;
  text-align: justify;

  /*Borders - (Optional)*/
  border-left: 15px solid #4b2e84;
  border-right: 2px solid #4b2e84;

  /*Box Shadow - (Optional)*/
  -moz-box-shadow: 2px 2px 15px #ccc;
  -webkit-box-shadow: 2px 2px 15px #ccc;
  box-shadow: 2px 2px 15px #ccc;
}

.linklook:hover {
  cursor: pointer;
}

.hide {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 1px;
  height: 1px;
}

.clearfix {
  clear: both;
}

a.tooltip {
  outline: none;
  text-decoration: none;
  position: relative;
}

a.tooltip strong {
  line-height: 30px;
}


a.tooltip > span {
  width: 300px;
  padding: 10px 20px;
  margin-top: 0;
  margin-left: -120px;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  position: absolute;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-style: normal;
  border-radius: 3px;
  box-shadow: 2px 2px 2px #999;
  -webkit-transition-property: opacity, margin-top, visibility, margin-left;
  -webkit-transition-duration: 0.4s, 0.3s, 0.4s, 0.3s;
  -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
  transition-property: opacity, margin-top, visibility, margin-left;
  transition-duration: 0.4s, 0.3s, 0.4s, 0.3s;
  transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
  color: #FFFFFF;
  background: #4B2E83;
  background: -webkit-linear-gradient(top, #4B2E83, #6240a6);
  /*	background: linear-gradient(top, #4B2E83, #6240a6); */
  border: 2px solid #B7A57A;

}

/*a.tooltip > span:hover,*/
a.tooltip:hover > span {
  opacity: 1;
  text-decoration: none;
  visibility: visible;
  overflow: visible;
  margin-top: 50px;
  display: inline;
  margin-left: -90px;
}

a.tooltip span b {
  width: 15px;
  height: 15px;
  margin-left: 40px;
  margin-top: -19px;
  display: block;
  position: absolute;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-box-shadow: inset -1px 1px 0 #fff;
  -moz-box-shadow: inset 0 1px 0 #fff;
  -o-box-shadow: inset 0 1px 0 #fff;
  box-shadow: inset 0 1px 0 #fff;
  background: #333333;
  border-top: 1px solid #000000;
  border-right: 1px solid #000000;
}


.layout {
  text-align: left;
}

ul.tick {
  list-style-image: url('css-images/tick.png');
}

ul.award {
  list-style-image: url('css-images/award.png');
}

ul.book {
  list-style-image: url('css-images/book.png');
}

ul.edit {
  list-style-image: url('css-images/edit.png');
}

ul.light {
  list-style-image: url('css-images/light-on.png');
}

ul.medal {
  list-style-image: url('css-images/medal.png');
}

ul.radar {
  list-style-image: url('css-images/radar.png');
}

ul.save {
  list-style-image: url('css-images/save.png');
}

ul.search {
  list-style-image: url('css-images/search.png');
}

ul.star {
  list-style-image: url('css-images/star.png');
}

ul.target {
  list-style-image: url('css-images/target.png');
}

ul.trash {
  list-style-image: url('css-images/trash.png');
}

ul.arrow {
  list-style-image: url('css-images/arrow.png');
}

ul.help {
  list-style-image: url('css-images/help.png');
}

ul.sqldata {
  list-style-image: url('css-images/sqldata.png');
}

ul.sql {
  list-style-image: url('css-images/sql.png');
}

ul.phpdata {
  list-style-image: url('css-images/phpdata.png');
}

ul.php {
  list-style-image: url('css-images/php.png');
}

ul.code {
  list-style-image: url('css-images/code.png');
}

ul.script {
  list-style-image: url('css-images/script.png');
}

ul.css {
  list-style-image: url('css-images/css.png');
}

.code-jquery {
  background-color: #fad2d0;
  border-left: 6px solid #983631;
}

.code-script {
  background-color: #e3daf9;
  border-left: 6px solid #412c74;
}

.code-php {
  background-color: #dae6fd;
  border-left: 6px solid #3d5e9d;
}

.code-html {
  background-color: #e0fce0;
  border-left: 6px solid #478b47;
}

.code-css {
  background-color: #fde9c6;
  border-left: 6px solid #9a793f;
}

.code-sql {
  background-color: #c5c5c5;
  border-left: 6px solid #444444;
}

.code-regex {
  background-color: #f3f1f1;
  border-left: 6px solid #4CAF50;
}

.code-xpath {
  background-color: #afe4f1;
  border-left: 6px solid #346d7b;
}

.code-xml {
  background-color: #d3f5fd;
  border-left: 6px solid #4CAF50;
}

.code-ajax {
  background-color: #f5dbda;
  border-left: 6px solid #963f3b;
}

.code-json {
  background-color: #cfeff7;
  border-left: 6px solid #386e7b;
}

.code-less {
  background-color: #ebf9cd;
  border-left: 6px solid #61792e;
}

.uw-code {
  border-radius: 5px;
  box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.75);
  padding: 5px;
}

.up3 {
  position: relative;
  top: -3px;
}

.up5 {
  position: relative;
  top: -5px;
}

.up7 {
  position: relative;
  top: -7px;
}

.up9 {
  position: relative;
  top: -9px;
}

.down3 {
  position: relative;
  top: 3px;
}

.down5 {
  position: relative;
  top: 5px;
}

.down7 {
  position: relative;
  top: 7px;
}

.down9 {
  position: relative;
  top: 9px;
}

.opacity, .hover-opacity:hover {
  opacity: 0.60
}

.opacity-off, .hover-opacity-off:hover {
  opacity: 1
}

.opacity-max {
  opacity: 0.25
}

.opacity-min {
  opacity: 0.75
}

.greyscale-max, .grayscale-max, .hover-greyscale:hover, .hover-grayscale:hover {
  filter: grayscale(100%)
}

.greyscale, .grayscale {
  filter: grayscale(75%)
}

.greyscale-min, .grayscale-min {
  filter: grayscale(50%)
}

.sepia {
  filter: sepia(75%)
}

.sepia-max, .hover-sepia:hover {
  filter: sepia(100%)
}

.sepia-min {
  filter: sepia(50%)
}

.content {
  background-color: #e4d5b0;
  padding: 5px;
  border-radius: 5px;
}

.table-format th, .table-format td {
  text-align: center;
  padding: 5px;
}

.buffer {
  padding-bottom: 5px;
}

.module-id {
  font-size: 8px;
  position: relative;
  top: -13px;
}

.message-blue {
  background-color: #dae6fd;
  border: 2px outset #3d5e9d;
  border-left: 12px solid #3d5e9d;
  border-radius: 11px;
  box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.75);
  padding: 10px;
}

.message-green {
  background-color: #e0fce0;
  border: 2px outset #478b47;
  border-left: 12px solid #478b47;
  border-radius: 11px;
  box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.75);
  padding: 10px;
}

.message-red {
  background-color: #fad2d0;
  border: 2px outset #983631;
  border-left: 12px solid #983631;
  border-radius: 11px;
  box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.75);
  padding: 10px;
}

.message-purple {
  background-color: #e3daf9;
  border: 2px outset #412c74;
  border-left: 12px solid #412c74;
  border-radius: 11px;
  box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.75);
  padding: 10px;
}

.message-yellow {
  background-color: #f1f08f;
  border: 2px outset #acaa22;
  border-left: 12px solid #acaa22;
  border-radius: 11px;
  box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.75);
  padding: 10px;
}

.message-orange {
  background-color: #f4bc86;
  border: 2px outset #d36a04;
  border-left: 12px solid #d36a04;
  border-radius: 11px;
  box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.75);
  padding: 10px;
}