<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../paper-ripple/paper-ripple.html">
<link rel="import" href="../core-field/core-field.html">
<link rel="import" href="../core-icon/core-icon.html">
<link rel="import" href="../core-input/core-input.html">
<link rel="import" href="../paper-button/paper-button.html">

<polymer-element name="my-element">

  <template>
    <style>
      :host {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      h1 {
        text-decoration: underline;
        text-align: center;
        color: white;
      }
      h2 {
        text-decoration: none;
        color: white;
      }
      p {
        color: white;
        text-indent: 50px;
      }
      #core_header_panel {
        width: 1370px;
        height: 580px;
        left: 0px;
        top: 0px;
        position: absolute;
        background-color: rgb(229, 229, 229);
      }
      #section {
        height: 100%;
        width: 100%;
        left: 0px;
        top: 0px;
        background: linear-gradient(rgb(214, 227, 231), rgb(173, 216, 230));
      }
      #core_toolbar {
        right: 0px;
        left: 0px;
        color: rgb(255, 255, 255);
        fill: rgb(255, 255, 255);
        top: 0px;
        position: absolute;
        background-color: rgb(79, 125, 201);
      }
      #div {
        height: 30px;
        left: 68px;
        top: 20px;
        width: 70px;
        position: absolute;
      }
      #core_card {
        position: absolute;
        width: 480px;
        height: 380px;
        border-radius: 2px;
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
        left: 40px;
        top: 30px;
        background-color: rgb(136, 138, 162);
      }
      #paper_ripple {
        width: 50px;
        height: 50px;
        left: 550px;
        top: 260px;
        position: absolute;
      }
      #input {
        padding: 15px;
        left: 690px;
        position: absolute;
        width: 400px;
        color: black;
        top: 100px;
        background-color: rgb(138, 140, 164);
      }
      #input1 {
        padding: 15px;
        left: 690px;
        position: absolute;
        width: 400px;
        top: 200px;
        background-color: rgb(138, 140, 164);
      }
      #core_field {
        left: 780px;
        top: 400px;
        position: absolute;
      }
      #input2 {
        padding: 15px;
        left: 690px;
        top: 300px;
        position: absolute;
        width: 400px;
        height: 50px;
        background-color: rgb(138, 140, 164);
      }
      #div1 {
        left: 620px;
        top: 550px;
        position: absolute;
      }
      #paper_button {
        left: 1153px;
        top: 400px;
        position: absolute;
        width: 80px;
        height: 40px;
        background-color: rgb(0, 128, 192);
      }
      #p {
        margin: 5px;
        padding: 5px;
        top: 20px;
      }
      #h2 {
        top: 20px;
        left: 50px;
        position: absolute;
      }
      #paper_button1 {
        width: 340px;
        height: 60px;
        left: 60px;
        top: 20px;
        background-color: rgb(128, 128, 128);
      }
      #paper_button2 {
        left: 60px;
        top: 30px;
        width: 340px;
        height: 60px;
        background-color: rgb(128, 128, 128);
      }
      #h22 {
        left: 26.53125px;
        top: 0px;
        position: absolute;
      }
      #core_toolbar1 {
        right: 0px;
        left: 0px;
        color: rgb(255, 255, 255);
        fill: rgb(255, 255, 255);
        top: 540px;
        background-color: rgb(64, 128, 128);
      }
    </style>
    <core-header-panel mode="standard" id="core_header_panel">
      <section id="section">
        <paper-ripple id="paper_ripple"></paper-ripple>
        <core-field id="core_field" icon="search" theme="core-light-theme" center horizontal layout>
          <core-input id="core_input" flex></core-input>
        </core-field>
        <gangnam-style>xyz</gangnam-style>
        <div id="div1" layout horizontal>
			</div>
      </section>
      <core-toolbar id="core_toolbar">
        <core-icon-button icon="menu" id="core_icon_button"></core-icon-button>
        <div id="div" flex start>
            </div>
        <h2 id="h2">Greycel</h2>
      </core-toolbar>
      <core-card id="core_card" layout vertical>
        <h1 id="h1">
          Who are We?
        </h1>
        <p id="p" start>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a eros lectus. Proin vitae lobortis eros, eu egestas lacus. Aliquam erat volutpat. Duis lacinia ante velit, vitae convallis nibh hendrerit ac. Nulla cursus, eros in porta fermentum, quam nisi malesuada purus, nec hendrerit turpis neque molestie purus. Nulla facilisi. Suspendisse vitae tellus enim. Suspendisse lobortis hendrerit auctor. Praesent pretium ligula arcu. Morbi at eros mattis, porttitor magna ac, accumsan neque. Morbi blandit nec purus in congue. Morbi ipsum nibh, vehicula eu faucibus in, interdum elementum quam. Etiam quis eros massa. Quisque luctus ligula vel lacus luctus laoreet. Morbi lacus est, ultricies non elementum non, mollis eget massa. Curabitur rutrum vulputate iaculis.</p>
        <paper-button recenteringtouch id="paper_button1">
          <h2 id="h21">Our References in the Media</h2>
        </paper-button>
        <paper-button id="paper_button2">
          <h2 id="h22">OUR SOCIAL MEDIA PRESCENCE</h2>
        </paper-button>
      </core-card>
      <input id="input" placeholder="please enter your name">
      <input id="input1" placeholder="please enter your email" is="core-input">
      <input id="input2" placeholder="message" is="core-input">
      <paper-button raised recenteringtouch id="paper_button">Send</paper-button>
      <core-toolbar id="core_toolbar1">
        <div id="div2" flex>Secondary Menu</div>
      </core-toolbar>
    </core-header-panel>
  </template>

  <script>

    Polymer({

    });

  </script>

</polymer-element>