/*
 * Base structure
 */

/* Move down content because we have a fixed navbar that is 50px tall */
body {
    /* padding-top: 160px; */
    /* background-color: papayawhip; */
    font-size: medium;
  }
  
  a {
    text-decoration : none;
    font-weight: 600;
  }
  
  a:link {
    color: rgb(51,122,183);
    /* color: rgb(255,165,0); */
  }
  
  
  a:visited {
      color: rgb(255,165,0);
      /* color: rgb(51,122,183); */
  }
  
  
  a:hover {
      color: rgb(15,21,135);
  }
  
  
  a:active {
      color: rgb(250,184,64);
  }
  
  .navbar-inverse {
    background-color: #002147;
  }
  
  nav.navbar.navbar-games.navbar-fixed-top{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d0e0d1+0,f1da36+100 */
  background: #d0e0d1; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #d0e0d1 0%, #f1da36 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #d0e0d1 0%,#f1da36 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #d0e0d1 0%,#f1da36 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e0d1', endColorstr='#f1da36',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  
  }
  
  .pcontainer{
    width: 600px;
  }
  .fontfront{
    font-size: 1.2em;
  }
  
  #userslist{
    margin-top: 60px;
  }
  
  .col-centered{
      float: none;
      margin: 0 auto;
  }
  
  .collsch{
    padding-left: 30px;
    color: #992222;
  }
  
  .colluser{
    font-size: 22px;
    margin: 4px;
    padding-left: 30px;
    color: #222299;
  }
  
  .colluser2{
    font-size: 22px;
    margin: 4px;
    padding-left: 50px;
    color: #222299;
  }
  
  #createnewuser{
    float:right
  }
  
  .size22{
    font-size: 22px;
  }
  
  input{
    font-size: 22px;
    font-weight: 700;
    color: #821634 !important;
  }
  
  #errormsg{
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: red !important;
  }
  
  /*
   * Global add-ons
   */
  
  .sub-header {
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }
  
  /*
   * Top navigation
   * Hide default border to remove 1px line.
   */
  .navbar-fixed-top {
    border: 0;
  }
  
  /*
   * Sidebar
   */
  
  /* Hide for mobile, show later */
  .sidebar {
    display: none;
  }
  @media (min-width: 768px) {
    .sidebar {
      position: fixed;
      top: 51px;
      bottom: 0;
      left: 0;
      z-index: 1000;
      display: block;
      padding: 20px;
      overflow-x: hidden;
      overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
      background-color: #f5f5f5;
      border-right: 1px solid #eee;
    }
  }
  
  /* Sidebar navigation */
  .nav-sidebar {
    margin-right: -21px; /* 20px padding + 1px border */
    margin-bottom: 20px;
    margin-left: -20px;
  }
  .nav-sidebar > li > a {
    padding-right: 20px;
    padding-left: 20px;
  }
  .nav-sidebar > .active > a,
  .nav-sidebar > .active > a:hover,
  .nav-sidebar > .active > a:focus {
    color: #fff;
    background-color: #428bca;
  }
  
  
  /*
   * Main content
   */
  
  .main {
    
  }
  @media (min-width: 768px) {
    .main {
      padding-right: 40px;
      padding-left: 40px;
      padding-top: 20px;
      padding-bottom: 20px;
    }
  }
  .main .page-header {
    margin-top: 0;
  }
  
  
  /*
   * Placeholder dashboard ideas
   */
  
  .placeholders {
    margin-bottom: 30px;
    text-align: center;
  }
  .placeholders h4 {
    margin-bottom: 0;
  }
  .placeholder {
    margin-bottom: 20px;
  }
  .placeholder img {
    display: inline-block;
    border-radius: 50%;
  }
  
  .icon-success {
      color: #5CB85C;
  }
  
  .icon-warning {
      color: red;
  }
  
  .icon-default{
      color: #777;
  }
  
  .pull-right {
      margin-left: auto;
      margin-right: 0;
  }
  
  .label-success,
  .label-danger,
  .label-default {
    cursor: pointer; 
    cursor: hand;
  }
  
  .panel-body > h1 {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  
  /* Sticky footer styles
  -------------------------------------------------- */
  html {
    position: relative;
    min-height: 100%;
  }
  body {
    /* Margin bottom by footer height */
    margin-bottom: 100px;
  }
  
  
  .footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 100px;
    background-color: #f5f5f5;
    padding-top: 10px;
    border-top-color: orange;
    border-top-style: solid;
    border-top-width: 5px;
  }
  
  .footer > .container {
    padding-right: 15px;
    padding-left: 15px;
  }
  
  
  /*-----------------*/
  
  table{
    /* font-size: 70%; */
  }
  
  td, 
  th {
    padding-left: 5px;
    padding-right: 5px;
  }
  
  th {
    text-align: center;
  }
  
  .pull-right > img {
    padding-right: 20px;
  }
  
  .logo {
    height: 100px;
    padding-right: 10px;
  }
  
  .navbar {
      min-height: 130px;
      border-bottom-color: orange;
      border-bottom-style: solid;
      border-bottom-width: 5px;
  }
  
  .programcomps td {
    height: 40px;
    font-size: 19px;
    padding: 10px;
  }
  .component {
    border: 1px solid black;
    text-align: center;
  
  }
  
  
  .component-blueish,
  .component-blueish > a{
    background-color: cyan;
    color: black;
  }
  
  .component-green,
  .component-green > a{
    background-color: #00CC00;
    color: black;
  }
  
  .component-yellow,
  .component-yellow > a{
    background-color: #F3BE47;
    color: black;
  }
  
  .component-red,
  .component-red > a{
    background-color: #DA0505;
    color: black;
  }
  
  .component-blue,
  .component-blue > a{
    background-color: #0070C0;
    color: black;
  }
  
  table.table-unitstructure {
    font-size: 100%;
    text-align: center;
  
  }
  table.table-unitstructure td {
    padding: 5px;
  }
  
  .headertext {
      color: white;
      font-size: 30px;
      padding-top: 24px;
      padding-left: 130px;
      font-family: sans-serif;
  }
  
  .headertextdark {
      color: black;
      font-size: 30px;
      padding-top: 24px;
      padding-left: 130px;
      font-family: sans-serif;
  }
  
  .letter {
    font-family: 'Handlee', cursive;
    font-weight: 400;
    font-size: 24px;
  }
  
  .addcompimg {
    min-height: 150px;
  }
  
  /*------------------------------------*/
  /*  Round buttons                     */
  
  .roundedbutton {
      display: block;
      padding:10px;
      margin: 5px;
      float: left;
      font-size: 24px;
      text-align: center;
      width: 80px;
      -webkit-border-radius:40px/24px;
      -moz-border-radius:40px/24px;
      border-radius:40px/24px;
  }
  
  input[type=submit] {
      -webkit-transition:all 0.3s ease-in-out;    
      -moz-transition:all 0.3s ease-in-out;
      -o-transition:all 0.3s ease-in-out;
      -ms-transition:all 0.3s ease-in-out;
      transition:all 0.3s ease-in-out;        
  }
  
  .btn-green {
      border:5px #303 solid;   
      color: white;
      background-color:green;
  }
  
  .btn-blue {
      border:5px blue solid;   
      color: blue;
      background-color: lightblue;
  }
  
  .btn-red {
      border:5px orange solid;   
      color: white;
      background-color: red;
  }
  
  .btn-purple {
      border:5px pink solid;   
      color: pink;
      background-color: purple;
  }
  
  .btn-yellow {
      border:5px yellow solid;   
      color: yellow;
      background-color: salmon;
  }
  
  .btn-orange {
      border:5px red solid;   
      color: red;
      background-color: orange;
  }
  
  .btn-darkblue {
      border:5px cyan solid;   
      color: cyan;
      background-color: darkblue;
  }
  
  .btn-palegreen {
      border:5px PaleTurquoise  solid;   
      color: black ;
      background-color: palegreen;
  }
  
  .btn-teal {
      border:5px teal solid;   
      color: teal;
      background-color: yellow;
  }
  
  
  h3{
    clear: both;
  }
  
  
  .bottomImg{
    position: fixed;
    right:0;
    bottom:0;
    z-index: -50;
    padding-right: 10px;
    padding-bottom: 10px;
  }
  
  .gamesbody > h3{
    font-size: 150%;
  }
  
  .loginbox{
    /*
    margin: 20px;
    padding: 10px;
    */
    min-width: 200px;
  }