title: Google chart text is missing
body: <p>I created test project from <a href="https://developers.google.com/chart/interactive/docs/gallery/piechart" rel="nofollow noreferrer">google chart example</a>. But, then after adding some css text from chart is being <a href="https://c9.io/kaharo/demo-project/workspace/html/index.html" rel="nofollow noreferrer">missed</a> like that below. What am I doing wrong? </p>
  
  <p>This is CSS:</p>
  
  <pre><code>html,
  body {
      font-size: 100%;
      height: 100%;
      width: 100%;
  }
  
  body {
      background: white;
      color: #030404;
      padding: 0;
      margin: 0;
      font-family: "Tahoma", "SergoUI", Helvetica, Arial, sans-serif;
      font-weight: normal;
      font-style: normal;
      line-height: 1;
  }
  
  header {
      height: 20%;
  }
  
  section {
      height: 75%;
  }
  
  footer {
      height: 5%;
  }
  
  
  .FirstTopLine {
      height: 20%;
  }
  
  .SecondTopLine {
      height: 80%;
  }
  
  .SecondTopLine, footer {
      background: #1b7297;
      background:linear-gradient(270deg, #1b7297, #3dafc9) ;
  }
  
  
  div {
      /*background: wheat;*/
      height: 100%;
      width: 100%;
  }
  
  .wrapper {
      width: 100%;
      height: 100%;
  }
  
  .cellone {
      float: left;
      width: 5%;
      clear: both;
  }
  
  .celltwo {
      float: left;
      width: 15%;
  }
  
  .cellfree {
      float: left;
      width: 40%;
  }
  
  .cellfour {
      float: left;
      width: 40%;
  }
  
  img {
      max-height: 100%;
      max-width: 100%;
  }
  
  .reportname {
      color: #f7ad36;
  }
  
  .companyfont {
      color: #1b7297;
  }
  </code></pre>
  
  <p>And HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width" /&gt;
      &lt;title&gt;Report Template&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/style.css" /&gt;
  
      &lt;script type="text/javascript" src="js/jsapi.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
          // Load the Visualization API and the piechart package.
          google.load('visualization', '1.0', {'packages':['corechart', 'table']});
  
          // Set a callback to run when the Google Visualization API is loaded.
          google.setOnLoadCallback(drawChart);
  
          // Callback that creates and populates a data table,
          // instantiates the pie chart, passes in the data and
          // draws it.
          function drawChart() {
  
              // Create the data table.
  //            var data = google.visualization.arrayToDataTable([
  //                ['Task', 'Hours per Day'],
  //                ['Work',     11],
  //                ['Eat',      2],
  //                ['Commute',  2],
  //                ['Watch TV', 2],
  //                ['Sleep',    7]
  //            ]);
  
              var data = new google.visualization.DataTable();
              data.addColumn('string', 'Topping');
              data.addColumn('number', 'Slices');
              data.addRows([
                  ['Mushrooms', 3],
                  ['Onions', 1],
                  ['Olives', 1],
                  ['Zucchini', 1],
                  ['Pepperoni', 2]
              ]);
  
              // Set chart options
              var options = {
                  'title' : 'How Much Pizza I Ate Last Night',
                  'width' : 600,
                  'height': 400
              };
  
              // Instantiate and draw our chart, passing in some options.
              var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
              chart.draw(data, options);
              var table = new google.visualization.Table(document.getElementById('table'));
              table.draw(data,{showRowNumber: true});
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
  
          &lt;div class="FirstTopLine"&gt;
              &lt;div class="wrapper"&gt;
                  &lt;div class="cellone"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="celltwo"&gt;
                      &lt;h4 class="companyfont"&gt;28.05.2013&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="cellfree"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="cellfour"&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;div class="SecondTopLine"&gt;
              &lt;div class="wrapper"&gt;
                  &lt;div class="cellone"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="celltwo"&gt;
                      &lt;a href="http://gharysh.kz" class="logo"&gt;
                          &lt;img src="img/logoKGS.png" alt="Kazakhstan Gharysh Sapari" /&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="cellfree"&gt;
                      &lt;h1 class="reportname"&gt;Report Name 23&lt;/h1&gt;
                  &lt;/div&gt;
                  &lt;div class="cellfour"&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/header&gt;
  
      &lt;section&gt;
          &lt;div class="wrapper"&gt;
              &lt;div class="cellone"&gt;
  
              &lt;/div&gt;
              &lt;div class="celltwo"&gt;
                  &lt;div class="chartdescription"&gt;
                        &lt;h3 class="companyfont"&gt;Report Description 32&lt;/h3&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="cellfree"&gt;
                  &lt;h2 class="companyfont"&gt;Chart 33&lt;/h2&gt;
                  &lt;div id="chart_div"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="cellfour"&gt;
                  &lt;h2 class="companyfont"&gt;Table 34&lt;/h2&gt;
                  &lt;div id="table"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  
      &lt;footer&gt;
          &lt;div class="wrapper"&gt;
              &lt;div class="cellone"&gt;
  
              &lt;/div&gt;
              &lt;div class="celltwo"&gt;
                  &lt;h6 class="reportname"&gt;Generated from SMDPO 42&lt;/h6&gt;
              &lt;/div&gt;
              &lt;div class="cellfree"&gt;
  
              &lt;/div&gt;
              &lt;div class="cellfour"&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/footer&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks<img src="https://i.stack.imgur.com/FF0jV.png" alt="enter image description here"></p>
  
  <hr>
  
  <p>P.S. I'm not sure about correct css, so if you know way to set css fastly, easily, simply and clearly, please share. </p>