<template id="github-explorer" >
<style data-src="/src/external/font-awesome/css/font-awesome.css"></style>
  <style data-src="/templates/livelystyle.css"></style>
  
<style>
  :host {
    margin: 0px;
    padding: 0px;
    height: 100%;

  }
  
  #dataPreview {
    border-collapse: collapse;
    font-family: 'Courier New', 'Monaco';
    //max-height: 200px;
    width: auto;
    margin-left: auto;
    margin-right: auto;
  }
  
  #dataPreview th {
    text-align: left;
    padding: 8px;
    min-width: 100px;
    background-color: gray;
    color: white;
  }
  
  
  #dataPreview td {
    text-align: left;
    padding: 10px;
    min-width: 100px;
  }
  
  #dataPreview tr {
    text-overflow: ellipsis;
    overflow: hidden;
    max-height: 10px;
  }
  
  .rowIndex {
    cursor: pointer;
  }
    
  
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
  
  tr:nth-child(odd) {
    background-color: #ffffff;
  }
  
  #dataPreview>tr>td>div {
    text-overflow: ellipsis;
    overflow: hidden;
    height: 18px;
  }
  
  table {
    border:none;
    border-collapse: collapse;
  }

  table td {
      border-left: 1px solid #000;
      border-right: 1px solid #000;
  }

  table td:first-child {
      border-left: none;
  }

  table td:last-child {
      border-right: none;
  }
  
  
  table th {
      border-left: 1px solid #000;
      border-right: 1px solid #000;
  }

  table th:first-child {
      border-left: none;
  }

  table th:last-child {
      border-right: none;
  }
  
  content {
    text-align: center;
    padding: 14px 0;
    overflow-y: scroll;
  }
  
  #content {
    text-align: center;
    padding: 14px 0;
  }
  
  .clickable {
    cursor: pointer;
    font-style: italic;
  }
  
  .inlineTable {
    font-size: 12px;
    border: 1px solid #adadad;
  }
  
  .inlineTable>tr>th {
    padding: 2px !important;
    text-align: left;
  }
  
  .inlineTable>tr>td {
    padding: 2px !important;
    text-align: left;
  }
  
  .inlineTable>tr>td>div {
    text-overflow: ellipsis;
    overflow: hidden;
    height: 13px;
  }
  
  i {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    margin-right: 4px;
  }

  .right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }

  .down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }
  
  .section {
    clear: both;
    padding: 0px;
	  margin: 0px;
  }

  .col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
  }
  .col:first-child { margin-left: 0; }

  /*  GROUPING  */
  .group:before,
  .group:after { content:""; display:table; }
  .group:after { clear:both;}
  .group { zoom:1; /* For IE 6/7 */ }
  .span_4_of_4 {
	  width: 100%;
  }
  .span_3_of_4 {
    width: 74.6%;
  }
  .span_2_of_4 {
    width: 49.2%;
  }
  .span_1_of_4 {
    width: 23.8%;
  }

  /*  GO FULL WIDTH BELOW 480 PIXELS */
  @media only screen and (max-width: 480px) {
    .col {  margin: 1% 0 1% 0%; }
    .span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
  }
  
  data-explorer {
    margin: auto;
  }
  
  .runButton {
    margin-top: 48px;
  }
  
  .visualizeButton {
    margin-top: 24px;
  }
  
  </style>
  <div id="content">
    <button id="setup">
    Start Github Explorer
    </button>
  </div>
</template>
