<div class="page page-typography">




  <!-- page header -->
  <div class="pageheader">

    <h2>{{page.title}} <span>// {{page.subtitle}}</span></h2>

    <div class="page-bar">

      <ul class="page-breadcrumb">
        <li>
          <a ui-sref="app.dashboard"><i class="fa fa-home"></i> {{main.title}}</a>
        </li>
        <li>
          <a href="javascript:;">UI Kit</a>
        </li>
        <li>
          <a ui-sref="app.ui.typography">{{page.title}}</a>
        </li>
      </ul>

    </div>

  </div>
  <!-- /page header -->






  <!-- page content -->
  <div class="pagecontent">





    <!-- row -->
    <div class="row">



      <!-- col -->
      <div class="col-lg-3 col-md-6">

        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen01">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Normal</strong> Headings</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen01 = !isFullscreen01">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body">
            <h1>h1. Heading</h1>
            <h2>h2. Heading</h2>
            <h3>h3. Heading</h3>
            <h4>h4. Heading</h4>
            <h5>h5. Heading</h5>
            <h6>h6. Heading</h6>
          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

      </div>
      <!-- /col -->


      <!-- col -->
      <div class="col-lg-3 col-md-6">

        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen02">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Custom</strong> Headings</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen02 = !isFullscreen02">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body">
            <h1 class="custom-font">h1. Heading</h1>
            <h2 class="custom-font">h2. Heading</h2>
            <h3 class="custom-font">h3. Heading</h3>
            <h4 class="custom-font">h4. Heading</h4>
            <h5 class="custom-font">h5. Heading</h5>
            <h6 class="custom-font">h6. Heading</h6>
          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

      </div>
      <!-- /col -->





      <!-- col -->
      <div class="col-lg-3 col-md-6">

        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen03">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Filled</strong> Headings</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen03 = !isFullscreen03">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body">
            <h1 class="custom-font filled bg-lightred">h1. Heading</h1>
            <h2 class="custom-font filled bg-cyan">h2. Heading</h2>
            <h5 class="custom-font filled bg-greensea">h5. Heading</h5>
            <h6 class="custom-font filled bg-danger">h6. Heading</h6>
          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

      </div>
      <!-- /col -->




      <!-- col -->
      <div class="col-lg-3 col-md-6">

        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen04">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Colored</strong> Headings</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen04 = !isFullscreen04">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body">
            <h1 class="custom-font text-lightred">h1. Heading</h1>
            <h2 class="custom-font text-cyan">h2. Heading</h2>
            <h3 class="custom-font text-greensea">h3. Heading</h3>
            <h4 class="custom-font text-danger">h4. Heading</h4>
            <h5 class="custom-font text-success">h5. Heading</h5>
            <h6 class="custom-font text-drank">h6. Heading</h6>
          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

      </div>
      <!-- /col -->





    </div>
    <!--/row -->





    <!--row -->
    <div class="row">




      <!-- col -->
      <div class="col-md-4">


        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen05">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Text</strong> Emphasis</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen05 = !isFullscreen05">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body">

            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title custom-font">Text Highlight</h3>
              </div>
              <div class="panel-body">
                <p>You can use the mark tag with custom color classes (<mark class="bg-red">.bg-red</mark> , <mark class="bg-cyan">.bg-cyan</mark> , etc.) to <mark>highlight</mark> text.</p>
              </div>
            </div>

            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title custom-font">Deleted Text</h3>
              </div>
              <div class="panel-body">
                <p><del>This line of text is meant to be treated as deleted text.</del></p>
              </div>
            </div>

            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title custom-font">Strikethrough Text</h3>
              </div>
              <div class="panel-body">
                 <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
              </div>
            </div>

            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title custom-font">Inserted text</h3>
              </div>
              <div class="panel-body">
                <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
              </div>
            </div>

            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title custom-font">Underlined text</h3>
              </div>
              <div class="panel-body">
                <p><u>This line of text will render as underlined</u></p>
              </div>
            </div>

            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title custom-font">Small text</h3>
              </div>
              <div class="panel-body">
                <p><small>This line of text is meant to be treated as fine print.</small></p>
              </div>
            </div>

            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title custom-font">Bold Text</h3>
              </div>
              <div class="panel-body">
                <p><strong>Rendered as bold text</strong></p>
              </div>
            </div>

            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title custom-font">Italics Text</h3>
              </div>
              <div class="panel-body">
                <p><em>Rendered as italicized text</em></p>
              </div>
            </div>

            <h4 class="custom-font"><strong>Emphasis</strong> Classes</h4>
            <p class="text-muted">Muted text.</p>
            <p class="text-red">Colored text - red.</p>
            <p class="text-cyan">Colored text - cyan.</p>
            <p class="text-thin">Thin text.</p>
            <p class="text-lowercase">Lowercased text.</p>
            <p class="text-uppercase">Uppercased text.</p>
            <p class="text-capitalize">Capitalized text.</p>
            <p class="text-italic">Italicized text.</p>
          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->


        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen07">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Text</strong> Abbreviations</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen07 = !isFullscreen07">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body">

            <h4 class="custom-font">Default Abbreviation</h4>
            <div class="well">An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</div>

            <h4 class="custom-font">Little Smaller Text Abbreviation</h4>
            <div class="well"><abbr title="HyperText Markup Language" class="text-small">HTML</abbr> is the best thing since sliced bread.</div>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->


        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen08">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Text</strong> Alignment</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen08 = !isFullscreen08">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body">

            <p class="text-left">Left aligned text.</p>
            <p class="text-center">Center aligned text.</p>
            <p class="text-right">Right aligned text.</p>
            <p class="text-justify">Justified text.</p>
            <p class="text-nowrap">No wrap text.</p>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->



        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen09">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Address</strong> Types</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen09 = !isFullscreen09">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body">

            <h4 class="custom-font">Normal</h4>
            <address>
              <strong>Twitter, Inc.</strong><br>
              795 Folsom Ave, Suite 600<br>
              San Francisco, CA 94107<br>
              <abbr title="Phone">P:</abbr> (123) 456-7890
            </address>

            <address>
              <strong>Full Name</strong><br>
              <a href="mailto:#">first.last@example.com</a>
            </address>

            <h4>Filled</h4>
            <address class="filled bg-default">
              <strong class="bg-default dk">Twitter, Inc.</strong><br>
              795 Folsom Ave, Suite 600<br>
              San Francisco, CA 94107<br>
              <abbr title="Phone">P:</abbr> (123) 456-7890
              <i class="fa fa-map-marker pull-right"></i>
            </address>

            <address class="filled append bg-primary">
              <strong class="bg-primary dk">Full Name</strong><br>
              <a href="mailto:#">first.last@example.com</a>
            </address>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->



        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen12">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Text</strong> Colors</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen12 = !isFullscreen12">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body">

            <p class="text-cyan">Etiam porta sem malesuada magna mollis euismod.</p>
            <p class="text-amethyst">Donec ullamcorper nulla non metus auctor fringilla.</p>
            <p class="text-green">Aenean eu leo quam. Pellentesque ornare sem lacinia quam.</p>
            <p class="text-orange">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
            <p class="text-red">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
            <p class="text-greensea">Etiam porta sem malesuada magna mollis euismod.</p>
            <p class="text-dutch">Donec ullamcorper nulla non metus auctor fringilla.</p>
            <p class="text-hotpink">Aenean eu leo quam. Pellentesque ornare sem lacinia quam.</p>
            <p class="text-drank">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
            <p class="text-blue">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
            <p class="text-lightred">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
            <p class="text-slategray">Etiam porta sem malesuada magna mollis euismod.</p>
            <p class="text-darkgray">Donec ullamcorper nulla non metus auctor fringilla.</p>
            <p class="text-primary">Aenean eu leo quam. Pellentesque ornare sem lacinia quam.</p>
            <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
            <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->


      </div>
      <!-- /col -->




      <!-- col -->
      <div class="col-md-8">


        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen06">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Paragraph</strong> Types</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen06 = !isFullscreen06">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body">

            <h4 class="custom-font text-strong">Normal Paragraph</h4>
            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>

            <h4 class="custom-font text-strong">Lead Paragraph</h4>
            <p class="lead">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.</p>

            <div class="panel panel-default panel-filled">
              <div class="panel-heading">
                <h3 class="panel-title custom-font">Filled Paragraph</h3>
              </div>
              <div class="panel-body">
                <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
              </div>
            </div>

            <div class="panel panel-primary panel-filled">
              <div class="panel-heading">
                <h3 class="panel-title custom-font">Filled Paragraph - Primary</h3>
              </div>
              <div class="panel-body">
                <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
              </div>
            </div>

            <div class="panel panel-greensea panel-filled">
              <div class="panel-heading">
                <h3 class="panel-title custom-font">Filled Paragraph - Greensea</h3>
              </div>
              <div class="panel-body">
                <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
              </div>
            </div>

            <div class="panel panel-danger panel-filled">
              <div class="panel-heading">
                <h3 class="panel-title custom-font">Filled Paragraph - Danger</h3>
              </div>
              <div class="panel-body">
                <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
              </div>
            </div>

            <div class="panel panel-darkgray panel-filled">
              <div class="panel-heading">
                <h3 class="panel-title custom-font">Filled Paragraph - Darkgray</h3>
              </div>
              <div class="panel-body">
                <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
              </div>
            </div>

            <div class="panel panel-drank panel-filled">
              <div class="panel-heading">
                <h3 class="panel-title custom-font">Filled Paragraph - Drank</h3>
              </div>
              <div class="panel-body">
                <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
              </div>
            </div>

            <div class="panel panel-slategray panel-filled">
              <div class="panel-heading">
                <h3 class="panel-title custom-font">Filled Paragraph - Slategray</h3>
              </div>
              <div class="panel-body">
                <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
              </div>
            </div>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->



        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen13">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Blockquotes</strong> Types</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen13 = !isFullscreen13">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body">



            <h4 class="custom-font"><strong>Default</strong> blockquote</h4>
            <blockquote>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            </blockquote>

            <h4 class="custom-font"><strong>Blockquote</strong> with source</h4>
            <blockquote>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              <small>Someone famous <cite title="Source Title">Source Title</cite></small>
            </blockquote>

            <h4 class="text-right custom-font"><strong>Blockquote</strong> with source pulled-right</h4>
            <blockquote class="pull-right">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              <small>Someone famous <cite title="Source Title">Source Title</cite></small>
            </blockquote>

            <div class="clearfix"></div>

            <h4 class="custom-font"><strong>Default</strong> filled blockquote</h4>
            <blockquote class="filled bg-default lter">
              <p><i class="fa fa-quote-left pull-left"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            </blockquote>

            <h4 class="custom-font"><strong>Filled blockquote</strong> with source</h4>
            <blockquote class="filled bg-dutch lter">
              <p><i class="fa fa-quote-left pull-left"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              <small>Someone famous <cite title="Source Title">Source Title</cite></small>
            </blockquote>

            <h4 class="text-right custom-font"><strong>Filled blockquote</strong> with source pulled-right</h4>
            <blockquote class="text-right filled bg-slategray lter">
              <p><i class="fa fa-quote-left pull-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              <small>Someone famous <cite title="Source Title">Source Title</cite></small>
            </blockquote>

            <div class="clearfix"></div>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->



        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen14">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Code</strong> Types</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen14 = !isFullscreen14">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body">

<h4 class="custom-font"><strong>Html</strong> Code</h4>
<pre class="prettyprint lang-html">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;body&gt;

    &lt;h1&gt;My First Heading&lt;/h1&gt;

    &lt;p&gt;My first paragraph.&lt;/p&gt;

  &lt;/body&gt;
&lt;/html&gt;
</pre>

<h4 class="custom-font"><strong>CSS</strong> Code</h4>
<pre class="prettyprint lang-css">
html,
body {
    height: auto;
    font-family: 'Open Sans', sans-serif;
}

body {
    background: #f3f3f3;
    overflow-x: hidden;
    position: relative;
}
</pre>

<h4 class="custom-font"><strong>Javascript</strong> Code</h4>
<pre class="prettyprint lang-js">
$(function(){

  //generate pie charts
  $('.easypiechart').easyPieChart();

  //generate actual pie charts
  $('.pie-chart').easyPieChart();

})
</pre>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->


      </div>
      <!-- /col -->





    </div>
    <!--/row -->






    <!--row -->
    <div class="row">

      <!-- col -->
      <div class="col-md-6">



        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen10">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Horizontal</strong> Description</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen10 = !isFullscreen10">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body">

            <h4 class="custom-font">Normal</h4>
            <dl class="dl-horizontal">
              <dt>Description lists</dt>
              <dd>A description list is perfect for defining terms.</dd>
              <dt>Euismod</dt>
              <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
              <dd>Donec id elit non mi porta gravida at eget metus.</dd>
              <dt>Malesuada porta</dt>
              <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
            </dl>

            <h4 class="custom-font">Filled</h4>
            <dl class="dl-horizontal filled bg-dutch dk">
              <dt>Description lists</dt>
              <dd class="bg-dutch">A description list is perfect for defining terms.</dd>
              <dt>Euismod</dt>
              <dd class="bg-dutch">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
              <dd class="bg-dutch">Donec id elit non mi porta gravida at eget metus.</dd>
              <dt>Malesuada porta</dt>
              <dd class="bg-dutch">Etiam porta sem malesuada magna mollis euismod.</dd>
              <dt>Malesuada porta</dt>
              <dd class="bg-dutch">Etiam porta sem malesuada magna mollis euismod.</dd>
            </dl>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->



      </div>
      <!-- /col -->

      <!-- col -->
      <div class="col-md-6">

        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen11">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Vertical</strong> Description</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen11 = !isFullscreen11">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body">

            <h4 class="custom-font">Normal</h4>
            <dl>
              <dt>Description lists</dt>
              <dd>A description list is perfect for defining terms.</dd>
              <dt>Euismod</dt>
              <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
              <dd>Donec id elit non mi porta gravida at eget metus.</dd>
              <dt>Malesuada porta</dt>
              <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
            </dl>

            <h4 class="custom-font">Filled</h4>
            <dl class="filled bg-lightred">
              <dt class="bg-lightred dk">Description lists</dt>
              <dd>A description list is perfect for defining terms.</dd>
              <dt class="bg-lightred dk">Euismod</dt>
              <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
              <dd>Donec id elit non mi porta gravida at eget metus.</dd>
            </dl>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->

      </div>
      <!-- /col -->

    </div>
    <!--/row -->




    <!--row -->
    <div class="row">
      <!-- col -->
      <div class="col-md-12">


        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen15">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Link</strong> Effects</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen15 = !isFullscreen15">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body example">

            <a href class="link-effect link-effect-1">Wafture</a>
            <a href class="link-effect link-effect-2"><span data-hover="Ratatouille">Ratatouille</span></a>
            <a href class="link-effect link-effect-3">Palimpsest</a>
            <a href class="link-effect link-effect-4">Woebegone</a>
            <a href class="link-effect link-effect-5"><span data-hover="Seraglio">Seraglio</span></a>
            <a href class="link-effect link-effect-6">Umbrella</a>
            <a href class="link-effect link-effect-7">Languor</a>
            <a href class="link-effect link-effect-8">Imbue</a>
            <a href class="link-effect link-effect-9"><span>Gossamer</span><span>Sumptuous Heart</span></a>
            <a href class="link-effect link-effect-10" data-hover="Seraglio"><span>Seraglio</span></a>
            <a href class="link-effect link-effect-11" data-hover="Desultory">Desultory</a>
            <a href class="link-effect link-effect-12">Chatoyant</a>
            <a href class="link-effect link-effect-13">Beleaguer</a>
            <a href class="link-effect link-effect-14">Ailurophile</a>
            <a href class="link-effect link-effect-15" data-hover="Desultory">Desultory</a>
            <a href class="link-effect link-effect-16" data-hover="Languor">Languor</a>
            <a href class="link-effect link-effect-17" data-hover="Murmurous">Murmurous</a>
            <a href class="link-effect link-effect-18" data-hover="Sumptuous">Sumptuous</a>
            <a href class="link-effect link-effect-19"><span data-hover="Assemblage">Assemblage</span></a>
            <a href class="link-effect link-effect-20"><span data-hover="Chatoyant">Chatoyant</span></a>
            <a href class="link-effect link-effect-21">Ineffable</a>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->


      </div>
      <!-- /col -->
    </div>
    <!--/row -->






  </div>
  <!-- /page content -->




</div>


<script>

</script>
