@charset "utf-8";
/* CSS Document */

/*
||  Note to self:
||  # is css selector for specified ID (ID must be unique)
||  . is css selector for class
|| =======================================================
*/

/*
  body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }
		
  ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
  ul#tabs li { display: inline; }
  ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; }
  ul#tabs li a:hover { background-color: #f1f0ee; }
  ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
*/    
  div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f4f4f4; min-height: 525px; }  /* background box for buttons */
  div.tabContent.hide { display: none; }

  #content
  {
    background-color: #ffffff;  /* white */
    padding: 20px 10px;
    overflow: auto;
  }
  #tab-container
  {
    float: left;
    margin: 5px 0 0 0;
    width: 301px;
  }
  ul#tabs
  {
    list-style: none;
    text-align: center;
  }
  #tab-container ul
  {
    list-style: none;
    text-align: center;
  }

/* Not used
  ul#tabs li
  {
    border-top: 1px solid #666;
    border-right: 1px solid #666;
    border-bottom: 3px solid #666;
    border-left: 8px solid #666;
    background-color: #ddd;
    margin: 5px 0;
  }
*/
  #tab-container ul li
  {
    border-top: 1px solid #666;
    border-right: 1px solid #666;
    border-bottom: 3px solid #666;
    border-left: 8px solid #666;
    background-color: #ddd;
    margin: 5px 0;
  }

/* Not used 
  ul#tabs li a,
  ul#tabs li a:visited
  {
    text-decoration: none;
    color: #666;
    display: block;
    padding: 15px 5px;
  }
*/
  #tab-container ul li a,
  #tab-container ul li a:visited
  {
    text-decoration: none;
    border-left: 8px solid transparent;
    color: #666;
    display: block;
    padding: 15px 5px;  /* sets tab size */
  }
  ul#tabs li a:hover
  {
/*    border-left: 8px solid #333; */
/*    border-left: 8px solid transparent; */
    border-left: 8px solid #ff6961;  /* red  */
  }
  #tab-container ul li:hover
  {
    /* border-left: 8px solid #333;  /* grey */
    border-left: 8px solid #ff6961;  /* red  */
    border-bottom: 3px solid #ff6961;  /* red  */
  }
  #tab-container ul li a:hover
  {
    color: #000;  /* black */
  }
  ul#tabs li a.selected
  {
    background-color: #f2f2f2;
    border-left: 8px solid #006699;
    border-right: 10px solid #f2f2f2;
    color: #000;  /* black */
    width: 250px;
  }
  #tab-container ul li.selected
  {
    border-right: none;
    background-color: #f2f2f2;
    border-left: 8px solid #006699;
  }
  #main-container
  {
    min-height: 545px;
    width: 580px;
    margin: 0 0 0 300px;
    padding: 20px;
    background-color: #f2f2f2;
    border: 1px solid #888;
  }
  main-container
  {
    min-height: 545px;
    width: 580px;
    margin: 0 0 0 300px;
    padding: 20px;
    background-color: #f2f2f2;
    border: 1px solid #888;
  }
  .tabContentBtn
  {
/*    background-color: #2E9AFE; /* Blue */
    margin:  10px;
    top: 10px;
    left: 80px;
    position: relative;
    text-align: center;

    width:          400px;
    height:         40px;
    padding:        10px 10px;  /* top, left */
    -webkit-border-radius:  27px;
    -moz-border-radius: 27px;
    border-radius:      27px;
    background:     -moz-linear-gradient(top, #FFFFFF 0%, #91BDD6 100%); /* firefox */
    border:         solid #91BDD6 5px;
/*    outline:        solid #f2f2f2 5px;*/
    outline:        solid #f4f4f4 5px;
    -moz-box-shadow: 3px 1px 24px #000000;
    -webkit-box-shadow: 3px 1px 24px #000000;
    box-shadow: 3px 1px 24px #f2f2f2;  /* rectangular box background */
  /*  box-shadow: 3px 1px 24px #f4f4f4;  /*rectangular box background */

  }
  .tabContentBtn:hover
  {
/*    border:         solid #00FF00 5px; /* Lime */
/*    border:         solid red 5px; */
    border:         solid #008000 5px; /* Green */
  }
  .arrow-right 
  {
    width:         0;
    height:        0;
    border-top:    15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left:   15px solid #2E9AFE;
    display:       inline;
    position:      relative;
/*    left:          125px;*/
    top:           28px;
    right:         -125px;
  }
  .tabContentBtnDisabled
  {
    margin:  10px;
    top: 10px;
    left: 80px;
    position: relative;
    text-align: center;

    width:          400px;
    height:         40px;
    padding:        10px 10px;  /* top, left */
    -webkit-border-radius:  27px;
    -moz-border-radius: 27px;
    border-radius:      27px;
    background:     -moz-linear-gradient(top, #FFFFFF 0%, #91BDD6 100%); /* firefox */
    border:         solid #91BDD6 5px;
    outline:        solid #f4f4f4 5px;
    -moz-box-shadow: 3px 1px 24px #000000;
    -webkit-box-shadow: 3px 1px 24px #000000;
    box-shadow: 3px 1px 24px #f2f2f2;  /* rectangular box background */
    background-color: grey;
  }
  .tabContentBtnDisabled:hover
  {
    border:         solid red 5px;
  }

  .tree { background-color: #f4f4f4; min-height: 600px; width: width-content; position: fixed; display: block; float: right; overflow: visible;}

  .TreeWidth {min-width: 1000px;}

  /***********************************************/
  /* CSS for tree structure - from thecodeplayer */
  /***********************************************/
  * {margin: 0; padding: 0;}

  .tree ul {
    padding-top: 20px; position: relative;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
  }

  .tree li {
    float: left; text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
  }

  /*We will use ::before and ::after to draw the connectors*/

  .tree li::before, .tree li::after{
    content: '';
    position: absolute; top: 0; right: 50%;
    border-top: 1px solid #ccc;
    width: 50%; height: 20px;
  }
  .tree li::after{
    right: auto; left: 50%;
    border-left: 1px solid #ccc;
  }

  /*We need to remove left-right connectors from elements without any siblings*/
  .tree li:only-child::after, .tree li:only-child::before {
    display: none;
  }

  /*Remove space from the top of single children*/
  .tree li:only-child{ padding-top: 0;}

  /*Remove left connector from first child and right connector from last child*/
  .tree li:first-child::before, .tree li:last-child::after{
    border: 0 none;
  }
  /*Adding back the vertical connector to the last nodes*/
  .tree li:last-child::before{
    border-right: 1px solid #ccc;
    border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
  }
  .tree li:first-child::after{
    border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
  }

  /*Time to add downward connectors from parents*/
  .tree ul ul::before{
    content: '';
    position: absolute; top: 0; left: 50%;
    border-left: 1px solid #ccc;
    width: 0; height: 20px;
  }

  .tree li a{
    border: 1px solid #ccc;
    padding: 5px 10px;
    text-decoration: none;
    color: #666;
    font-family: arial, verdana, tahoma;
    font-size: 11px;
    display: inline-block;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
  }

  /*Time for some hover effects*/
  /*We will apply the hover effect the the lineage of the element also*/
  .tree li a:hover, .tree li a:hover+ul li a {
    background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
  }
  /*Connector styles on hover*/
  .tree li a:hover+ul li::after,
  .tree li a:hover+ul li::before,
  .tree li a:hover+ul::before,
  .tree li a:hover+ul ul::before{
    border-color:  #94a0b4;
  }