/*These styles contain basic styles for fomatting along with our animation css*/

body {
  /* font-family: 'Open Sans', sans-serif; */
  font-weight: 400;
  /* background: #efefef; */
  line-height: 170%;
}

.medium {
    font-size: 36px;
    line-height: 48px;
}

.medium-small {
    font-size: 24px;
    line-height: 48px;
}

.small {
    font-size: 12px;
    line-height: 18px;
}

.panel-heading {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid transparent;
    border-top-right-radius: -1px;
    border-top-left-radius: -1px;
}


strong,
b {
  font-weight: 600
}

/*
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 300;
  line-height: 150%;
}
*/

/*
i.fa {
  color: #333;
}
*/

*,
*:before,
*:after {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
/*clearfixes*/

.cf:before,
.cf:after {
  details: " ";
  display: table;
}

.cf:after {
  clear: both;
}

.main-container {
  background: #fff;
  max-width: 1000px;
  margin: 25px 25px auto;
  position: relative;
}

.container {
  position: relative;
  padding: 10px;
}

.container:last-of-type {
  padding-top: 0px;
}

/*animation element*/

.animation-element {
  margin: 0% 1.33 2.66% 1.33%;
  transition: all 500ms; //replace 200ms with time of your choice

}

/*bounce up animation for the subject*/

.bounce-up .subject {
  opacity: 0;
  -moz-transition: all 700ms ease-out;
  -webkit-transition: all 700ms ease-out;
  -o-transition: all 700ms ease-out;
  transition: all 700ms ease-out;
  -moz-transform: translate3d(0px, 200px, 0px);
  -webkit-transform: translate3d(0px, 200px, 0px);
  -o-transform: translate(0px, 200px);
  -ms-transform: translate(0px, 200px);
  transform: translate3d(0px, 200, 0px);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.bounce-up.in-view .subject {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

.subject {
  float: left;
  width: 100%;
  margin: 0% 0% 35px 0%;
  /* background: #F5F5F5; */
  /* min-height: 250px; */
  /* padding: 15px; */
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
  border: solid 1px #EAEAEA;
}

.subject:hover,
.subject:active {
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);
  border-color: black;
}

.subject .header {
  margin: 8px 0px;
}

.subject .header .date,
.subject .header .category {
  margin: 0px;
  clear: none;
  /* width: 50%; */
}

.subject .header .date i,
.subject .header .category i {
  margin-right: 5px;
  color: #333;
  -moz-transition: all 400ms linear;
  -webkit-transition: all 400ms linear;
  -o-transition: all 400ms linear;
  transition: all 400ms linear;
}

.subject .header .date {
  float: left;
  text-align: left;
}

.subject .header .category {
  float: right;
  text-align: right;
}


/*subject icon at top*/

.subject .icon {
  position: absolute;
  top: -20px;
  left: 50%;
  left: calc(50% - 20px);
}

.subject .icon i {
  width: 40px;
  height: 40px;
  color: rgb(255, 255, 255);
  font-size: 150%;
  border-radius: 50%;
  text-align: center;
  padding: 7px;
}
/*Category color / icon color*/

.subject .category-color {
  height: 7px;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}

.subject.design .category-color,
.subject.design .icon i {
  background: #c0392b;
}

.subject.development .category-color,
.subject.development .icon i {
  background: #16a085;
}

.subject.photography .category-color,
.subject.photography .icon i {
  background: #2980b9;
}

.subject.feedback .category-color,
.subject.feedback .icon i {
  background: #ff9900;
}

.subject.govern .category-color,
.subject.govern .icon i {
  background: #996666;
}

/*hovering over subject*/

.subject.development:hover .header i {
  color: #16a085;
}

.subject.design:hover .header i {
  color: #c0392b;
}

.subject.photography:hover .header i {
  color: #2980b9;
}

.subject .title {
  margin: 0px 0px;
  /* border-bottom: dashed 1px #ccc; */
  padding-bottom: 10px;
}

.subject .title a {
  float: right;
  margin: 8px 2px 2px 2px ;
}

.nav li .side-right {
  float: right;
  margin: 8px 2px 2px 2px ;
}

.subject .describe {
  margin-bottom: 8px;
}

.subject .expand {
  position: relative;
  margin-top: 6px;
  background: white;
  color: #333;
  /* padding: 3px; */
  cursor: pointer;
  float: right;
  display: inline-block;
  border: solid 1px #ccc;
  -moz-transition: all 400ms linear;
  -webkit-transition: all 400ms linear;
  -o-transition: all 400ms linear;
  transition: all 400ms linear;
  border-radius: 15px;

}

.subject .expand:hover,
.subject .expand:focus,
.subject .expand:active {
  background: #ffffff;
  color: #222222;
}

.menu-span {
  margin-left: 
}

/* DataTables */

.child-scroll-wrapper {
    overflow-x: auto;
    width: 100%;
}
.child-table {
    border-collapse: collapse;
    width: 100%;
}
.child-table th, .child-table td {
    border: 1px solid #ddd;
    padding: 6px;
    white-space: nowrap;
}
.child-table th {
    background-color: #f9f9f9;
}

td.details-control {
   background: url('../assets/img/details_open.png') no-repeat center center;
   cursor: pointer;
}

tr.shown td.details-control {
   background: url('../assets/img/details_close.png') no-repeat center center;
}


div.slider {

    display: none;
    /* background-color: blue; */
}


table.dataTable tbody td.no-padding {

    padding: 0;

}


/* Tile and stats container */

.details {
    position: relative;
    float:left;
    min-height: 300px;
    width: 100%; 
    padding-top: 10px;
    }
    .details .tile-stats {
        position: absolute;
        bottom: 0;
	width: 100%;
        margin-left: 0px;
        }

/* WCAG Levels */

.conformance_A .align-guidelinechapter .chapter {
    background-color:#b40061
}

.conformance_A.disabled .align-guidelinechapter .chapter {
    border:1px solid #b40061;
    background-color:transparent;
    color:#aaa;
}

.conformance_AA .align-guidelinechapter .chapter { 
    background-color:#7608b9
}

.conformance_AA.disabled .align-guidelinechapter .chapter{ 
    border:1px solid #7608b9;
    background-color:transparent;
    color:#aaa;
}

.conformance_AAA .align-guidelinechapter .chapter {
    background-color:#0087a9;
}

.conformance_AAA.disabled .align-guidelinechapter .chapter {
    border:1px solid #0087a9;
    background-color:transparent;
    color:#aaa;
}

.align-guidelinechapter .chapter {
    display: block;
    text-align: center;
    background-color: transparent;
    border-width: 1px;
    padding: 9px;
    border-color: grey;
    border-style: solid;
}

.align-guidelinechapter .chapterA {
    display:block;
    text-align: center;
    background-color:#b40061;
    color:#fff;
    padding:9px;
}

.align-guidelinechapter .chapterAA {
    display:block;
    text-align: center;
    background-color:#7608b9;
    color:#fff;
    padding:9px;
}

.align-guidelinechapter .chapterAAA {
    display:block;
    text-align: center;
    background-color:#0087a9;
    color:#fff;
    padding:9px;
}

.table tbody>tr>td.align-guidelinechapter{ 
    padding:0px;
}

.table .principle th,.table-hover>tbody>tr.principle:hover>th {
    background-color:#555;
    background-image:none;
    font-size:12px;color:#fff;
}

table .guideline th,.table-hover>tbody>tr.guideline:hover>th {
    font-size:12px;
    background-color:#ddd;
    background-image:none;
}

.table.table-bordered thead>tr>th.pages-issues .sort-link>span {
    color:#fff;
    display:inline-block;
    min-width:33px;
    margin:5px 5px 0 0;
    padding:3px;
    text-align:center;
}

th.pages-issues.a a>span {
    background-color:#bb0072;
}

th.pages-issues.aa a>span {
    background-color:#8909c4;
}

th.pages-issues.aaa a>span {
    background-color:#0087a9;
}

/* TABLE COLUMN WIDTHS */
.td_5 {
    width: 5%;
}

.td_10 {
    width: 10%;
}

.td_15 {
    width: 15%;
}

.td_25 {
    width: 25%;
}

.td_30 {
    width: 30%;
}

.td_40 {
    width: 40%;
}

.td_45 {
    width: 45%;
}

.td_55 {
    width: 55%;
}

.td_60 {
    width: 60%;
}

.td_65 {
    width: 65%;
}

.td_70 {
    width: 70%;
}

/* Table Heading */

.th_10 {
    width: 10%;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 10px;
}

/*media queries for small devices*/

@media screen and (max-width: 678px) {
  .main-container {
    margin: 20px 15px;
  }
  .animation-element,
  .animation-element:nth-of-type(3n-1),
  .animation-element:nth-of-type(3n-2),
  .animation-element:nth-of-type(3n-0) {
    width: 100%;
    margin: 0px 0px 0px 0px;
  }
  .subject .header .date,
  .subject .header .category {
    width: 100%;
    margin-bottom: 10px;
    text-align: center;
  }
}

/* Ribbon */

/* .wrapper {
  margin: 50px auto;
  width: 280px;
  height: 370px;
  background: white;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 8px rgba(0,0,0,0.3);
  position: relative;
  z-index: 90;
} */

.ribbon-wrapper-green {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}

.ribbon-green {
  font: bold 15px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); 
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45); 
  color: #6a6340;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;   
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}​

.ribbon-wrapper-blue {
width: 350px;
height: 150px;
overflow: hidden;
position: absolute;
top: 0px;
left: 5px;
}

.ribbon-blue {
font: bold 14px arial;
color: #ADDDE7;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(-45deg);
-moz-transform:    rotate(-45deg);
-ms-transform:     rotate(-45deg);
-o-transform:      rotate(-45deg);
position: relative;
padding: 16px 0;
left: -46px;
top: 25px;
width: 200px;
background-color: #ADDDE7;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #ADDDE7, #89AFB7);
background-image:    -moz-linear-gradient(top, #ADDDE7, #89AFB7);
background-image:     -ms-linear-gradient(top, #ADDDE7, #89AFB7);
background-image:      -o-linear-gradient(top, #ADDDE7, #89AFB7);
color: #6a6340;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-wrapper-orange {
    width: 100px;
    height: 100px;
    overflow: hidden;
    position: absolute;
    top: 7px;
    left: -1px;
}
.ribbon-orange {
    font-size: 12px;
    font-weight: bolder;
    color: white;
    text-align: center;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    position: relative;
    padding: 2px 0;
    left: -31px;
    top: 8px;
    width: 115px;
    background-color: darkOrange ;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    opacity: 1.00;
}
.ribbon-orange:before, .ribbon-red:after {
    content: "";
    border-top: 3px solid #900;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    position: absolute;
    bottom: -3px;
}
.ribbon-orange:before {
    left: 0;
}
.ribbon-orange:after {
    right: 0;
}

/* MESSAGE CENTER BADGE */

.message-count {
    color: white;
    position: absolute;
    top: 3px;
    right: 6px;
    display: block;
    background: #ff5b57;
    line-height: 12px;
    font-size: 11px;
    font-weight: 300;
    padding: .3em .5em;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

.message-centre {
    position: absolute;
    right: 15px;
    top: 15px;
}

/* LINKS TO EXTERNAL FILES */

a.file-link {
    color: #428bca;
    border: 1px;
    border-style: solid;
    padding: 5px;
    padding-right: 7px;
    padding-left: 7px;
    border-radius: 8px;
    text-decoration: none;
}

a.file-link:hover, a.file-link:focus, a.file-link:active {
    color: #428bca;
    border: 1px;
    border-style: solid;
    background: #f2f2f2;
    text-decoration: none;
}

.footer-link {
    text-align: center;
    margin-bottom: 10px;
}

.img-thumbnail-only {
    padding: 4px;
    line-height: 1.4285;
    background-color: #ffffff;
    border: 1px solid #ecf0f1;
    border-radius: 4px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    display: inline-block;
    max-width: 100%;
    height: auto;
}

/*  TOGGLE SWITCH */

.switch {
  position: relative;
  display: inline-block;
  width: 75px;
  height: 34px;
}

.switch input[type=checkbox] {display:none;}

.toggle {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.toggle:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .toggle {
  background-color: #2196F3;
}

input:focus + .toggle {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .toggle:before {
  -webkit-transform: translateX(41px);
  -ms-transform: translateX(41px);
  transform: translateX(41px);
}

/* Rounded sliders */
.toggle.round {
  border-radius: 34px;
}

.toggle.round:before {
  border-radius: 50%;
}

/* Form Switches */
.material-switch > input[type="checkbox"] {
    display: none;   
}

.material-switch > label {
    cursor: pointer;
    height: 0px;
    position: relative; 
    width: 40px;  
}

.material-switch > label::before {
    background: rgb(0, 0, 0);
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    content: '';
    height: 16px;
    margin-top: -8px;
    position:absolute;
    opacity: 0.3;
    transition: all 0.4s ease-in-out;
    width: 40px;
}
.material-switch > label::after {
    background: rgb(255, 255, 255);
    border-radius: 16px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    content: '';
    height: 24px;
    left: -4px;
    margin-top: -8px;
    position: absolute;
    top: -4px;
    transition: all 0.3s ease-in-out;
    width: 24px;
}
.material-switch > input[type="checkbox"]:checked + label::before {
    background: inherit;
    opacity: 0.5;
}
.material-switch > input[type="checkbox"]:checked + label::after {
    background: inherit;
    left: 20px;
}

/*
* Callouts
*
* Not quite alerts, but custom and helpful notes for folks reading the docs.
* Requires a base and modifier class.
*/

/* Common styles for all types */


.bs-callout {

    margin: 5px 0;
  
  padding: 10px;
  
  border-left: 3px solid #eee;

}

.bs-callout h4 {
  margin-top: 0;
  margin-bottom: 5px;
}

.bs-callout p:last-child {
  margin-bottom: 0;
}

.bs-callout code {
  background-color: #fff;
  border-radius: 3px;
}


/* Variations */

.bs-callout-default {
  background-color: #f2f2f2;
  border-color: #000000;
}

.bs-callout-default h4 {
  color: #4d4d4d;
}

.bs-callout-success {
  background-color: #d6f5d6;
  border-color: #248f24;
}

.bs-callout-success h4 {
  color: #248f24;
}

.bs-callout-danger {
  background-color: #fdf7f7;
  border-color: #d9534f;
}

.bs-callout-danger h4 {
  color: #d9534f;
}

.bs-callout-warning {
  background-color: #fcf8f2;
  border-color: #f0ad4e;
}

.bs-callout-warning h4 {
  color: #f0ad4e;
}

.bs-callout-info {
  background-color: #f4f8fa;
  border-color: #5bc0de;
}

.bs-callout-info h4 {
  color: #5bc0de;
}

/*
* Index alerts 
*
* Not quite alerts, but custom and helpful notes for folks reading the docs.
* Requires a base and modifier class.
*/

/* Common styles for all types */


.bs-index {

    margin: 5px 0;
  
  padding: 10px;
  
  border-radius: 10px;

    color: white;
}

.bs-index h4 {
  margin-top: 0;
  margin-bottom: 5px;
}

.bs-index p:last-child {
  margin-bottom: 0;
}

.bs-index code {
  background-color: #fff;
  border-radius: 3px;
}


/* Variations */

.bs-index-success {
  background-color: #70db70;

}

.bs-index-danger {
  background-color: #ff0000;
 
}