css for code blocks

css for code blocks


//html code for blocks 

 <div class="au-grid">

  <div class="container">

<div class="row">

    <ul class="au-card-list au-card-list--matchheight">

        <li class="col-sm-3 col-xs-6">

            <div class="au-card au-body">

            <div class="au-card__inner">

                <div class="au-card__title">

                    <h3 class="au-card__title">Card 1</h3>

                </div>

                <p>Some text</p>

            </div>

        </div>

        </li>

        <li class="col-sm-3 col-xs-6">

            <div class="au-card au-body">

            <div class="au-card__inner">

                <div class="au-card__title">

                    <h3 class="au-card__title">Card 2</h3>

                </div>

                <p>Some text</p>

                <p>More text</p>

            </div>

        </div>

        </li>

        <li class="col-sm-3 col-xs-6">

            <div class="au-card au-body">

                <div class="au-card__inner">

                    <div class="au-card__title">

                            <h3 class="au-card__title">Card 3</h3>

                    </div>

                    <p>Some text</p>

                </div>

            </div>

        </li>

        <li class="col-sm-3 col-xs-6">

            <div class="au-card au-body">

                <div class="au-card__inner">

                    <div class="au-card__title">

                            <h3 class="au-card__title">Card 4</h3>

                    </div>

                    <p>Some text</p>

                </div>

            </div>

        </li>

        <li class="col-sm-3 col-xs-6">

            <div class="au-card au-body">

                <div class="au-card__inner">

                    <div class="au-card__title">

                            <h3 class="au-card__title">Card 5</h3>

                    </div>

                    <p>Some text</p>

                </div>

            </div>

        </li>

        <li class="col-sm-3 col-xs-6">

        <div class="au-card au-body">

            <div class="au-card__inner">

                <div class="au-card__title">

                        <h3 class="au-card__title">Card 6</h3>

                </div>

                <p>Some text</p>

            </div>

        </div>

        </li>

        <li class="col-sm-3 col-xs-6">

            <div class="au-card au-body">

                <div class="au-card__inner">

                    <div class="au-card__title">

                            <h3 class="au-card__title">Card 7</h3>

                    </div>

                    <p>Some text</p>

                </div>

            </div>

        </li>

        <li class="col-sm-3 col-xs-6">

                <div class="au-card au-body">

                    <div class="au-card__inner">

                        <div class="au-card__title">

                                <h3 class="au-card__title">Card 8</h3>

                        </div>

                        <p>Some text</p>

                    </div>

            </div>

        </li>

    </ul>

</div>

</div>

</div>


//css code for blocks 


.au-card {

    display: block;

    width: 100%;

    border-radius: 4px;

    border: 1px solid red;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    position: relative;

    background: #fff;

    overflow: hidden

}


.au-card.au-card--shadow {

    border-radius: 4px;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)

}


.au-card.au-card--shadow:hover {

    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3)

}


.au-card.au-card--clickable:focus-within {

    outline: 3px solid #9263DE;

    outline-offset: 2px

}


.au-card.au-card--clickable .au-card--clickable__link:after {

    content: '';

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0

}


.au-card.au-card--clickable .au-card--clickable__link:focus {

    outline: none

}


.lt-ie9 .au-card.au-card--clickable .au-card--clickable__link:focus {

    outline: 3px solid #9263DE;

    outline-offset: 2px

}


.au-card *+.au-card__divider,

.au-card *+.au-card__body,

.au-card *+.au-card__footer {

    margin-top: 16px;

    margin-top: 1rem

}


.au-card .au-card__divider {

    border: #d3d3d3 0.5px solid;

    margin-bottom: 0

}


.au-card .au-card__title {

    margin: 0 0 16px 0;

    margin: 0 0 1rem 0

}


.au-card .au-card__header {

    font-weight: bold;

    margin: 0;

    border-bottom: solid 1px #d3d3d3;

    border-top-left-radius: 3px;

    border-top-right-radius: 3px;

    padding: 16px;

    padding: 1rem

}


.au-card .au-card__footer {

    padding: 16px;

    padding: 1rem;

    margin: 0;

    border-top: solid 1px #d3d3d3;

    border-bottom-left-radius: 3px;

    border-bottom-right-radius: 3px

}


.au-card .au-card__inner {

    padding: 16px;

    padding: 1rem

}


.lt-ie9 .au-card {

    border: solid 1px gray

}


.au-card.au-card--centred,

.au-card .au-card--centred {

    text-align: center

}


a.au-card {

    color: #313131;

    cursor: pointer;

    text-decoration: none

}


a.au-card .au-card__title {

    color: #00698f;

    text-decoration: underline;

    text-decoration-skip-ink: auto

}


a.au-card:hover .au-card__title {

    text-decoration: none;

    color: #313131

}


a.au-card:focus {

    outline: 3px solid #9263DE;

    outline-offset: 2px

}


a.au-card.au-card--shadow:focus {

    border-radius: 0

}


a.au-card.au-card--shadow:hover {

    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3)

}


.au-card-list {

    list-style: none;

    padding: 0

}


.au-card-list:before,

.au-card-list:after {

    content: " ";

    display: table

}


.au-card-list:after {

    clear: both

}


.au-card-list:before {

    display: none

}


.au-card-list li {

    list-style: none;

    padding: 0;

    margin-top: 24px;

    margin-top: 1.5rem

}


.au-card-list.au-card-list--matchheight {

    display: flex;

    flex-wrap: wrap

}


.au-card-list.au-card-list--matchheight li {

   /* display: flex */

}


.au-card-list.au-card-list--matchheight .au-card {

    display: block;

    height: 100%; /* <- This has been added. */

   /* flex-direction: column */

}

      

/*! @gov.au/grid-12 v2.1.0 */.au-grid .container{box-sizing:border-box}@media (min-width: 768px){.au-grid .container{width:744px}}@media (min-width: 992px){.au-grid .container{width:968px}}@media (min-width: 1200px){.au-grid .container{width:1176px}}.au-grid .container,.au-grid .container-fluid{box-sizing:border-box;margin-right:auto;margin-left:auto;padding-left:12px;padding-right:12px}.au-grid .container:before,.au-grid .container:after,.au-grid .container-fluid:before,.au-grid .container-fluid:after{content:" ";display:table}.au-grid .container:after,.au-grid .container-fluid:after{clear:both}.au-grid .row{margin-left:-12px;margin-right:-12px}.au-grid .row:before,.au-grid .row:after{content:" ";display:table}.au-grid .row:after{clear:both}.au-grid .col-xs-1,.au-grid .col-sm-1,.au-grid .col-md-1,.au-grid .col-lg-1,.au-grid .col-xs-2,.au-grid .col-sm-2,.au-grid .col-md-2,.au-grid .col-lg-2,.au-grid .col-xs-3,.au-grid .col-sm-3,.au-grid .col-md-3,.au-grid .col-lg-3,.au-grid .col-xs-4,.au-grid .col-sm-4,.au-grid .col-md-4,.au-grid .col-lg-4,.au-grid .col-xs-5,.au-grid .col-sm-5,.au-grid .col-md-5,.au-grid .col-lg-5,.au-grid .col-xs-6,.au-grid .col-sm-6,.au-grid .col-md-6,.au-grid .col-lg-6,.au-grid .col-xs-7,.au-grid .col-sm-7,.au-grid .col-md-7,.au-grid .col-lg-7,.au-grid .col-xs-8,.au-grid .col-sm-8,.au-grid .col-md-8,.au-grid .col-lg-8,.au-grid .col-xs-9,.au-grid .col-sm-9,.au-grid .col-md-9,.au-grid .col-lg-9,.au-grid .col-xs-10,.au-grid .col-sm-10,.au-grid .col-md-10,.au-grid .col-lg-10,.au-grid .col-xs-11,.au-grid .col-sm-11,.au-grid .col-md-11,.au-grid .col-lg-11,.au-grid .col-xs-12,.au-grid .col-sm-12,.au-grid .col-md-12,.au-grid .col-lg-12{box-sizing:border-box;position:relative;min-height:1px;padding-left:12px;padding-right:12px}.au-grid .col-xs-1,.au-grid .col-xs-2,.au-grid .col-xs-3,.au-grid .col-xs-4,.au-grid .col-xs-5,.au-grid .col-xs-6,.au-grid .col-xs-7,.au-grid .col-xs-8,.au-grid .col-xs-9,.au-grid .col-xs-10,.au-grid .col-xs-11,.au-grid .col-xs-12{float:left}.au-grid .col-xs-1{width:8.33333%}.au-grid .col-xs-2{width:16.66667%}.au-grid .col-xs-3{width:25%}.au-grid .col-xs-4{width:33.33333%}.au-grid .col-xs-5{width:41.66667%}.au-grid .col-xs-6{width:50%}.au-grid .col-xs-7{width:58.33333%}.au-grid .col-xs-8{width:66.66667%}.au-grid .col-xs-9{width:75%}.au-grid .col-xs-10{width:83.33333%}.au-grid .col-xs-11{width:91.66667%}.au-grid .col-xs-12{width:100%}.au-grid .col-xs-pull-0{right:auto}.au-grid .col-xs-pull-1{right:8.33333%}.au-grid .col-xs-pull-2{right:16.66667%}.au-grid .col-xs-pull-3{right:25%}.au-grid .col-xs-pull-4{right:33.33333%}.au-grid .col-xs-pull-5{right:41.66667%}.au-grid .col-xs-pull-6{right:50%}.au-grid .col-xs-pull-7{right:58.33333%}.au-grid .col-xs-pull-8{right:66.66667%}.au-grid .col-xs-pull-9{right:75%}.au-grid .col-xs-pull-10{right:83.33333%}.au-grid .col-xs-pull-11{right:91.66667%}.au-grid .col-xs-pull-12{right:100%}.au-grid .col-xs-push-0{left:auto}.au-grid .col-xs-push-1{left:8.33333%}.au-grid .col-xs-push-2{left:16.66667%}.au-grid .col-xs-push-3{left:25%}.au-grid .col-xs-push-4{left:33.33333%}.au-grid .col-xs-push-5{left:41.66667%}.au-grid .col-xs-push-6{left:50%}.au-grid .col-xs-push-7{left:58.33333%}.au-grid .col-xs-push-8{left:66.66667%}.au-grid .col-xs-push-9{left:75%}.au-grid .col-xs-push-10{left:83.33333%}.au-grid .col-xs-push-11{left:91.66667%}.au-grid .col-xs-push-12{left:100%}.au-grid .col-xs-offset-0{margin-left:0%}.au-grid .col-xs-offset-1{margin-left:8.33333%}.au-grid .col-xs-offset-2{margin-left:16.66667%}.au-grid .col-xs-offset-3{margin-left:25%}.au-grid .col-xs-offset-4{margin-left:33.33333%}.au-grid .col-xs-offset-5{margin-left:41.66667%}.au-grid .col-xs-offset-6{margin-left:50%}.au-grid .col-xs-offset-7{margin-left:58.33333%}.au-grid .col-xs-offset-8{margin-left:66.66667%}.au-grid .col-xs-offset-9{margin-left:75%}.au-grid .col-xs-offset-10{margin-left:83.33333%}.au-grid .col-xs-offset-11{margin-left:91.66667%}.au-grid .col-xs-offset-12{margin-left:100%}@media (min-width: 768px){.au-grid .col-sm-1,.au-grid .col-sm-2,.au-grid .col-sm-3,.au-grid .col-sm-4,.au-grid .col-sm-5,.au-grid .col-sm-6,.au-grid .col-sm-7,.au-grid .col-sm-8,.au-grid .col-sm-9,.au-grid .col-sm-10,.au-grid .col-sm-11,.au-grid .col-sm-12{float:left}.au-grid .col-sm-1{width:8.33333%}.au-grid .col-sm-2{width:16.66667%}.au-grid .col-sm-3{width:25%}.au-grid .col-sm-4{width:33.33333%}.au-grid .col-sm-5{width:41.66667%}.au-grid .col-sm-6{width:50%}.au-grid .col-sm-7{width:58.33333%}.au-grid .col-sm-8{width:66.66667%}.au-grid .col-sm-9{width:75%}.au-grid .col-sm-10{width:83.33333%}.au-grid .col-sm-11{width:91.66667%}.au-grid .col-sm-12{width:100%}.au-grid .col-sm-pull-0{right:auto}.au-grid .col-sm-pull-1{right:8.33333%}.au-grid .col-sm-pull-2{right:16.66667%}.au-grid .col-sm-pull-3{right:25%}.au-grid .col-sm-pull-4{right:33.33333%}.au-grid .col-sm-pull-5{right:41.66667%}.au-grid .col-sm-pull-6{right:50%}.au-grid .col-sm-pull-7{right:58.33333%}.au-grid .col-sm-pull-8{right:66.66667%}.au-grid .col-sm-pull-9{right:75%}.au-grid .col-sm-pull-10{right:83.33333%}.au-grid .col-sm-pull-11{right:91.66667%}.au-grid .col-sm-pull-12{right:100%}.au-grid .col-sm-push-0{left:auto}.au-grid .col-sm-push-1{left:8.33333%}.au-grid .col-sm-push-2{left:16.66667%}.au-grid .col-sm-push-3{left:25%}.au-grid .col-sm-push-4{left:33.33333%}.au-grid .col-sm-push-5{left:41.66667%}.au-grid .col-sm-push-6{left:50%}.au-grid .col-sm-push-7{left:58.33333%}.au-grid .col-sm-push-8{left:66.66667%}.au-grid .col-sm-push-9{left:75%}.au-grid .col-sm-push-10{left:83.33333%}.au-grid .col-sm-push-11{left:91.66667%}.au-grid .col-sm-push-12{left:100%}.au-grid .col-sm-offset-0{margin-left:0%}.au-grid .col-sm-offset-1{margin-left:8.33333%}.au-grid .col-sm-offset-2{margin-left:16.66667%}.au-grid .col-sm-offset-3{margin-left:25%}.au-grid .col-sm-offset-4{margin-left:33.33333%}.au-grid .col-sm-offset-5{margin-left:41.66667%}.au-grid .col-sm-offset-6{margin-left:50%}.au-grid .col-sm-offset-7{margin-left:58.33333%}.au-grid .col-sm-offset-8{margin-left:66.66667%}.au-grid .col-sm-offset-9{margin-left:75%}.au-grid .col-sm-offset-10{margin-left:83.33333%}.au-grid .col-sm-offset-11{margin-left:91.66667%}.au-grid .col-sm-offset-12{margin-left:100%}}@media (min-width: 992px){.au-grid .col-md-1,.au-grid .col-md-2,.au-grid .col-md-3,.au-grid .col-md-4,.au-grid .col-md-5,.au-grid .col-md-6,.au-grid .col-md-7,.au-grid .col-md-8,.au-grid .col-md-9,.au-grid .col-md-10,.au-grid .col-md-11,.au-grid .col-md-12{float:left}.au-grid .col-md-1{width:8.33333%}.au-grid .col-md-2{width:16.66667%}.au-grid .col-md-3{width:25%}.au-grid .col-md-4{width:33.33333%}.au-grid .col-md-5{width:41.66667%}.au-grid .col-md-6{width:50%}.au-grid .col-md-7{width:58.33333%}.au-grid .col-md-8{width:66.66667%}.au-grid .col-md-9{width:75%}.au-grid .col-md-10{width:83.33333%}.au-grid .col-md-11{width:91.66667%}.au-grid .col-md-12{width:100%}.au-grid .col-md-pull-0{right:auto}.au-grid .col-md-pull-1{right:8.33333%}.au-grid .col-md-pull-2{right:16.66667%}.au-grid .col-md-pull-3{right:25%}.au-grid .col-md-pull-4{right:33.33333%}.au-grid .col-md-pull-5{right:41.66667%}.au-grid .col-md-pull-6{right:50%}.au-grid .col-md-pull-7{right:58.33333%}.au-grid .col-md-pull-8{right:66.66667%}.au-grid .col-md-pull-9{right:75%}.au-grid .col-md-pull-10{right:83.33333%}.au-grid .col-md-pull-11{right:91.66667%}.au-grid .col-md-pull-12{right:100%}.au-grid .col-md-push-0{left:auto}.au-grid .col-md-push-1{left:8.33333%}.au-grid .col-md-push-2{left:16.66667%}.au-grid .col-md-push-3{left:25%}.au-grid .col-md-push-4{left:33.33333%}.au-grid .col-md-push-5{left:41.66667%}.au-grid .col-md-push-6{left:50%}.au-grid .col-md-push-7{left:58.33333%}.au-grid .col-md-push-8{left:66.66667%}.au-grid .col-md-push-9{left:75%}.au-grid .col-md-push-10{left:83.33333%}.au-grid .col-md-push-11{left:91.66667%}.au-grid .col-md-push-12{left:100%}.au-grid .col-md-offset-0{margin-left:0%}.au-grid .col-md-offset-1{margin-left:8.33333%}.au-grid .col-md-offset-2{margin-left:16.66667%}.au-grid .col-md-offset-3{margin-left:25%}.au-grid .col-md-offset-4{margin-left:33.33333%}.au-grid .col-md-offset-5{margin-left:41.66667%}.au-grid .col-md-offset-6{margin-left:50%}.au-grid .col-md-offset-7{margin-left:58.33333%}.au-grid .col-md-offset-8{margin-left:66.66667%}.au-grid .col-md-offset-9{margin-left:75%}.au-grid .col-md-offset-10{margin-left:83.33333%}.au-grid .col-md-offset-11{margin-left:91.66667%}.au-grid .col-md-offset-12{margin-left:100%}}@media (min-width: 1200px){.au-grid .col-lg-1,.au-grid .col-lg-2,.au-grid .col-lg-3,.au-grid .col-lg-4,.au-grid .col-lg-5,.au-grid .col-lg-6,.au-grid .col-lg-7,.au-grid .col-lg-8,.au-grid .col-lg-9,.au-grid .col-lg-10,.au-grid .col-lg-11,.au-grid .col-lg-12{float:left}.au-grid .col-lg-1{width:8.33333%}.au-grid .col-lg-2{width:16.66667%}.au-grid .col-lg-3{width:25%}.au-grid .col-lg-4{width:33.33333%}.au-grid .col-lg-5{width:41.66667%}.au-grid .col-lg-6{width:50%}.au-grid .col-lg-7{width:58.33333%}.au-grid .col-lg-8{width:66.66667%}.au-grid .col-lg-9{width:75%}.au-grid .col-lg-10{width:83.33333%}.au-grid .col-lg-11{width:91.66667%}.au-grid .col-lg-12{width:100%}.au-grid .col-lg-pull-0{right:auto}.au-grid .col-lg-pull-1{right:8.33333%}.au-grid .col-lg-pull-2{right:16.66667%}.au-grid .col-lg-pull-3{right:25%}.au-grid .col-lg-pull-4{right:33.33333%}.au-grid .col-lg-pull-5{right:41.66667%}.au-grid .col-lg-pull-6{right:50%}.au-grid .col-lg-pull-7{right:58.33333%}.au-grid .col-lg-pull-8{right:66.66667%}.au-grid .col-lg-pull-9{right:75%}.au-grid .col-lg-pull-10{right:83.33333%}.au-grid .col-lg-pull-11{right:91.66667%}.au-grid .col-lg-pull-12{right:100%}.au-grid .col-lg-push-0{left:auto}.au-grid .col-lg-push-1{left:8.33333%}.au-grid .col-lg-push-2{left:16.66667%}.au-grid .col-lg-push-3{left:25%}.au-grid .col-lg-push-4{left:33.33333%}.au-grid .col-lg-push-5{left:41.66667%}.au-grid .col-lg-push-6{left:50%}.au-grid .col-lg-push-7{left:58.33333%}.au-grid .col-lg-push-8{left:66.66667%}.au-grid .col-lg-push-9{left:75%}.au-grid .col-lg-push-10{left:83.33333%}.au-grid .col-lg-push-11{left:91.66667%}.au-grid .col-lg-push-12{left:100%}.au-grid .col-lg-offset-0{margin-left:0%}.au-grid .col-lg-offset-1{margin-left:8.33333%}.au-grid .col-lg-offset-2{margin-left:16.66667%}.au-grid .col-lg-offset-3{margin-left:25%}.au-grid .col-lg-offset-4{margin-left:33.33333%}.au-grid .col-lg-offset-5{margin-left:41.66667%}.au-grid .col-lg-offset-6{margin-left:50%}.au-grid .col-lg-offset-7{margin-left:58.33333%}.au-grid .col-lg-offset-8{margin-left:66.66667%}.au-grid .col-lg-offset-9{margin-left:75%}.au-grid .col-lg-offset-10{margin-left:83.33333%}.au-grid .col-lg-offset-11{margin-left:91.66667%}.au-grid .col-lg-offset-12{margin-left:100%}}


//Javascript code for blocks 


;(function(window, document) {

/*jshint evil:true */

  /** version */

  var version = '3.7.3';


  /** Preset options */

  var options = window.html5 || {};


  /** Used to skip problem elements */

  var reSkip = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i;


  /** Not all elements can be cloned in IE **/

  var saveClones = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i;


  /** Detect whether the browser supports default html5 styles */

  var supportsHtml5Styles;


  /** Name of the expando, to work with multiple documents or to re-shiv one document */

  var expando = '_html5shiv';


  /** The id for the the documents expando */

  var expanID = 0;


  /** Cached data for each document */

  var expandoData = {};


  /** Detect whether the browser supports unknown elements */

  var supportsUnknownElements;


  (function() {

    try {

        var a = document.createElement('a');

        a.innerHTML = '<xyz></xyz>';

        //if the hidden property is implemented we can assume, that the browser supports basic HTML5 Styles

        supportsHtml5Styles = ('hidden' in a);


        supportsUnknownElements = a.childNodes.length == 1 || (function() {

          // assign a false positive if unable to shiv

          (document.createElement)('a');

          var frag = document.createDocumentFragment();

          return (

            typeof frag.cloneNode == 'undefined' ||

            typeof frag.createDocumentFragment == 'undefined' ||

            typeof frag.createElement == 'undefined'

          );

        }());

    } catch(e) {

      // assign a false positive if detection fails => unable to shiv

      supportsHtml5Styles = true;

      supportsUnknownElements = true;

    }


  }());


  /*--------------------------------------------------------------------------*/


  /**

   * Creates a style sheet with the given CSS text and adds it to the document.

   * @private

   * @param {Document} ownerDocument The document.

   * @param {String} cssText The CSS text.

   * @returns {StyleSheet} The style element.

   */

  function addStyleSheet(ownerDocument, cssText) {

    var p = ownerDocument.createElement('p'),

        parent = ownerDocument.getElementsByTagName('head')[0] || ownerDocument.documentElement;


    p.innerHTML = 'x<style>' + cssText + '</style>';

    return parent.insertBefore(p.lastChild, parent.firstChild);

  }


  /**

   * Returns the value of `html5.elements` as an array.

   * @private

   * @returns {Array} An array of shived element node names.

   */

  function getElements() {

    var elements = html5.elements;

    return typeof elements == 'string' ? elements.split(' ') : elements;

  }


  /**

   * Extends the built-in list of html5 elements

   * @memberOf html5

   * @param {String|Array} newElements whitespace separated list or array of new element names to shiv

   * @param {Document} ownerDocument The context document.

   */

  function addElements(newElements, ownerDocument) {

    var elements = html5.elements;

    if(typeof elements != 'string'){

      elements = elements.join(' ');

    }

    if(typeof newElements != 'string'){

      newElements = newElements.join(' ');

    }

    html5.elements = elements +' '+ newElements;

    shivDocument(ownerDocument);

  }


   /**

   * Returns the data associated to the given document

   * @private

   * @param {Document} ownerDocument The document.

   * @returns {Object} An object of data.

   */

  function getExpandoData(ownerDocument) {

    var data = expandoData[ownerDocument[expando]];

    if (!data) {

        data = {};

        expanID++;

        ownerDocument[expando] = expanID;

        expandoData[expanID] = data;

    }

    return data;

  }


  /**

   * returns a shived element for the given nodeName and document

   * @memberOf html5

   * @param {String} nodeName name of the element

   * @param {Document|DocumentFragment} ownerDocument The context document.

   * @returns {Object} The shived element.

   */

  function createElement(nodeName, ownerDocument, data){

    if (!ownerDocument) {

        ownerDocument = document;

    }

    if(supportsUnknownElements){

        return ownerDocument.createElement(nodeName);

    }

    if (!data) {

        data = getExpandoData(ownerDocument);

    }

    var node;


    if (data.cache[nodeName]) {

        node = data.cache[nodeName].cloneNode();

    } else if (saveClones.test(nodeName)) {

        node = (data.cache[nodeName] = data.createElem(nodeName)).cloneNode();

    } else {

        node = data.createElem(nodeName);

    }


    // Avoid adding some elements to fragments in IE < 9 because

    // * Attributes like `name` or `type` cannot be set/changed once an element

    //   is inserted into a document/fragment

    // * Link elements with `src` attributes that are inaccessible, as with

    //   a 403 response, will cause the tab/window to crash

    // * Script elements appended to fragments will execute when their `src`

    //   or `text` property is set

    return node.canHaveChildren && !reSkip.test(nodeName) && !node.tagUrn ? data.frag.appendChild(node) : node;

  }


  /**

   * returns a shived DocumentFragment for the given document

   * @memberOf html5

   * @param {Document} ownerDocument The context document.

   * @returns {Object} The shived DocumentFragment.

   */

  function createDocumentFragment(ownerDocument, data){

    if (!ownerDocument) {

        ownerDocument = document;

    }

    if(supportsUnknownElements){

        return ownerDocument.createDocumentFragment();

    }

    data = data || getExpandoData(ownerDocument);

    var clone = data.frag.cloneNode(),

        i = 0,

        elems = getElements(),

        l = elems.length;

    for(;i<l;i++){

        clone.createElement(elems[i]);

    }

    return clone;

  }


  /**

   * Shivs the `createElement` and `createDocumentFragment` methods of the document.

   * @private

   * @param {Document|DocumentFragment} ownerDocument The document.

   * @param {Object} data of the document.

   */

  function shivMethods(ownerDocument, data) {

    if (!data.cache) {

        data.cache = {};

        data.createElem = ownerDocument.createElement;

        data.createFrag = ownerDocument.createDocumentFragment;

        data.frag = data.createFrag();

    }



    ownerDocument.createElement = function(nodeName) {

      //abort shiv

      if (!html5.shivMethods) {

          return data.createElem(nodeName);

      }

      return createElement(nodeName, ownerDocument, data);

    };


    ownerDocument.createDocumentFragment = Function('h,f', 'return function(){' +

      'var n=f.cloneNode(),c=n.createElement;' +

      'h.shivMethods&&(' +

        // unroll the `createElement` calls

        getElements().join().replace(/[\w\-:]+/g, function(nodeName) {

          data.createElem(nodeName);

          data.frag.createElement(nodeName);

          return 'c("' + nodeName + '")';

        }) +

      ');return n}'

    )(html5, data.frag);

  }


  /*--------------------------------------------------------------------------*/


  /**

   * Shivs the given document.

   * @memberOf html5

   * @param {Document} ownerDocument The document to shiv.

   * @returns {Document} The shived document.

   */

  function shivDocument(ownerDocument) {

    if (!ownerDocument) {

        ownerDocument = document;

    }

    var data = getExpandoData(ownerDocument);


    if (html5.shivCSS && !supportsHtml5Styles && !data.hasCSS) {

      data.hasCSS = !!addStyleSheet(ownerDocument,

        // corrects block display not defined in IE6/7/8/9

        'article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}' +

        // adds styling not present in IE6/7/8/9

        'mark{background:#FF0;color:#000}' +

        // hides non-rendered elements

        'template{display:none}'

      );

    }

    if (!supportsUnknownElements) {

      shivMethods(ownerDocument, data);

    }

    return ownerDocument;

  }


  /*--------------------------------------------------------------------------*/


  /**

   * The `html5` object is exposed so that more elements can be shived and

   * existing shiving can be detected on iframes.

   * @type Object

   * @example

   *

   * // options can be changed before the script is included

   * html5 = { 'elements': 'mark section', 'shivCSS': false, 'shivMethods': false };

   */

  var html5 = {


    /**

     * An array or space separated string of node names of the elements to shiv.

     * @memberOf html5

     * @type Array|String

     */

    'elements': options.elements || 'abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video',


    /**

     * current version of html5shiv

     */

    'version': version,


    /**

     * A flag to indicate that the HTML5 style sheet should be inserted.

     * @memberOf html5

     * @type Boolean

     */

    'shivCSS': (options.shivCSS !== false),


    /**

     * Is equal to true if a browser supports creating unknown/HTML5 elements

     * @memberOf html5

     * @type boolean

     */

    'supportsUnknownElements': supportsUnknownElements,


    /**

     * A flag to indicate that the document's `createElement` and `createDocumentFragment`

     * methods should be overwritten.

     * @memberOf html5

     * @type Boolean

     */

    'shivMethods': (options.shivMethods !== false),


    /**

     * A string to describe the type of `html5` object ("default" or "default print").

     * @memberOf html5

     * @type String

     */

    'type': 'default',


    // shivs the document according to the specified `html5` object options

    'shivDocument': shivDocument,


    //creates a shived element

    createElement: createElement,


    //creates a shived documentFragment

    createDocumentFragment: createDocumentFragment,


    //extends list of elements

    addElements: addElements

  };


  /*--------------------------------------------------------------------------*/


  // expose html5

  window.html5 = html5;


  // shiv the document

  shivDocument(document);


  if(typeof module == 'object' && module.exports){

    module.exports = html5;

  }


}(typeof window !== "undefined" ? window : this, document));




/* Respond.js: min/max-width media query polyfill. (c) Scott Jehl. MIT Lic. j.mp/respondjs  */

(function( w ){


"use strict";


//exposed namespace

var respond = {};

w.respond = respond;


//define update even in native-mq-supporting browsers, to avoid errors

respond.update = function(){};


//define ajax obj

var requestQueue = [],

xmlHttp = (function() {

var xmlhttpmethod = false;

try {

xmlhttpmethod = new w.XMLHttpRequest();

}

catch( e ){

xmlhttpmethod = new w.ActiveXObject( "Microsoft.XMLHTTP" );

}

return function(){

return xmlhttpmethod;

};

})(),


//tweaked Ajax functions from Quirksmode

ajax = function( url, callback ) {

var req = xmlHttp();

if (!req){

return;

}

req.open( "GET", url, true );

req.onreadystatechange = function () {

if ( req.readyState !== 4 || req.status !== 200 && req.status !== 304 ){

return;

}

callback( req.responseText );

};

if ( req.readyState === 4 ){

return;

}

req.send( null );

},

isUnsupportedMediaQuery = function( query ) {

return query.replace( respond.regex.minmaxwh, '' ).match( respond.regex.other );

};


//expose for testing

respond.ajax = ajax;

respond.queue = requestQueue;

respond.unsupportedmq = isUnsupportedMediaQuery;

respond.regex = {

media: /@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,

keyframes: /@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,

comments: /\/\*[^*]*\*+([^/][^*]*\*+)*\//gi,

urls: /(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,

findStyles: /@media *([^\{]+)\{([\S\s]+?)$/,

only: /(only\s+)?([a-zA-Z]+)\s?/,

minw: /\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,

maxw: /\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,

minmaxwh: /\(\s*m(in|ax)\-(height|width)\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/gi,

other: /\([^\)]*\)/g

};


//expose media query support flag for external use

respond.mediaQueriesSupported = w.matchMedia && w.matchMedia( "only all" ) !== null && w.matchMedia( "only all" ).matches;


//if media queries are supported, exit here

if( respond.mediaQueriesSupported ){

return;

}


//define vars

var doc = w.document,

docElem = doc.documentElement,

mediastyles = [],

rules = [],

appendedEls = [],

parsedSheets = {},

resizeThrottle = 30,

head = doc.getElementsByTagName( "head" )[0] || docElem,

base = doc.getElementsByTagName( "base" )[0],

links = head.getElementsByTagName( "link" ),


lastCall,

resizeDefer,


//cached container for 1em value, populated the first time it's needed

eminpx,


// returns the value of 1em in pixels

getEmValue = function() {

var ret,

div = doc.createElement('div'),

body = doc.body,

originalHTMLFontSize = docElem.style.fontSize,

originalBodyFontSize = body && body.style.fontSize,

fakeUsed = false;


div.style.cssText = "position:absolute;font-size:1em;width:1em";


if( !body ){

body = fakeUsed = doc.createElement( "body" );

body.style.background = "none";

}


// 1em in a media query is the value of the default font size of the browser

// reset docElem and body to ensure the correct value is returned

docElem.style.fontSize = "100%";

body.style.fontSize = "100%";


body.appendChild( div );


if( fakeUsed ){

docElem.insertBefore( body, docElem.firstChild );

}


ret = div.offsetWidth;


if( fakeUsed ){

docElem.removeChild( body );

}

else {

body.removeChild( div );

}


// restore the original values

docElem.style.fontSize = originalHTMLFontSize;

if( originalBodyFontSize ) {

body.style.fontSize = originalBodyFontSize;

}



//also update eminpx before returning

ret = eminpx = parseFloat(ret);


return ret;

},


//enable/disable styles

applyMedia = function( fromResize ){

var name = "clientWidth",

docElemProp = docElem[ name ],

currWidth = doc.compatMode === "CSS1Compat" && docElemProp || doc.body[ name ] || docElemProp,

styleBlocks = {},

lastLink = links[ links.length-1 ],

now = (new Date()).getTime();


//throttle resize calls

if( fromResize && lastCall && now - lastCall < resizeThrottle ){

w.clearTimeout( resizeDefer );

resizeDefer = w.setTimeout( applyMedia, resizeThrottle );

return;

}

else {

lastCall = now;

}


for( var i in mediastyles ){

if( mediastyles.hasOwnProperty( i ) ){

var thisstyle = mediastyles[ i ],

min = thisstyle.minw,

max = thisstyle.maxw,

minnull = min === null,

maxnull = max === null,

em = "em";


if( !!min ){

min = parseFloat( min ) * ( min.indexOf( em ) > -1 ? ( eminpx || getEmValue() ) : 1 );

}

if( !!max ){

max = parseFloat( max ) * ( max.indexOf( em ) > -1 ? ( eminpx || getEmValue() ) : 1 );

}


// if there's no media query at all (the () part), or min or max is not null, and if either is present, they're true

if( !thisstyle.hasquery || ( !minnull || !maxnull ) && ( minnull || currWidth >= min ) && ( maxnull || currWidth <= max ) ){

if( !styleBlocks[ thisstyle.media ] ){

styleBlocks[ thisstyle.media ] = [];

}

styleBlocks[ thisstyle.media ].push( rules[ thisstyle.rules ] );

}

}

}


//remove any existing respond style element(s)

for( var j in appendedEls ){

if( appendedEls.hasOwnProperty( j ) ){

if( appendedEls[ j ] && appendedEls[ j ].parentNode === head ){

head.removeChild( appendedEls[ j ] );

}

}

}

appendedEls.length = 0;


//inject active styles, grouped by media type

for( var k in styleBlocks ){

if( styleBlocks.hasOwnProperty( k ) ){

var ss = doc.createElement( "style" ),

css = styleBlocks[ k ].join( "\n" );


ss.type = "text/css";

ss.media = k;


//originally, ss was appended to a documentFragment and sheets were appended in bulk.

//this caused crashes in IE in a number of circumstances, such as when the HTML element had a bg image set, so appending beforehand seems best. Thanks to @dvelyk for the initial research on this one!

head.insertBefore( ss, lastLink.nextSibling );


if ( ss.styleSheet ){

ss.styleSheet.cssText = css;

}

else {

ss.appendChild( doc.createTextNode( css ) );

}


//push to appendedEls to track for later removal

appendedEls.push( ss );

}

}

},

//find media blocks in css text, convert to style blocks

translate = function( styles, href, media ){

var qs = styles.replace( respond.regex.comments, '' )

.replace( respond.regex.keyframes, '' )

.match( respond.regex.media ),

ql = qs && qs.length || 0;


//try to get CSS path

href = href.substring( 0, href.lastIndexOf( "/" ) );


var repUrls = function( css ){

return css.replace( respond.regex.urls, "$1" + href + "$2$3" );

},

useMedia = !ql && media;


//if path exists, tack on trailing slash

if( href.length ){ href += "/"; }


//if no internal queries exist, but media attr does, use that

//note: this currently lacks support for situations where a media attr is specified on a link AND

//its associated stylesheet has internal CSS media queries.

//In those cases, the media attribute will currently be ignored.

if( useMedia ){

ql = 1;

}


for( var i = 0; i < ql; i++ ){

var fullq, thisq, eachq, eql;


//media attr

if( useMedia ){

fullq = media;

rules.push( repUrls( styles ) );

}

//parse for styles

else{

fullq = qs[ i ].match( respond.regex.findStyles ) && RegExp.$1;

rules.push( RegExp.$2 && repUrls( RegExp.$2 ) );

}


eachq = fullq.split( "," );

eql = eachq.length;


for( var j = 0; j < eql; j++ ){

thisq = eachq[ j ];


if( isUnsupportedMediaQuery( thisq ) ) {

continue;

}


mediastyles.push( {

media : thisq.split( "(" )[ 0 ].match( respond.regex.only ) && RegExp.$2 || "all",

rules : rules.length - 1,

hasquery : thisq.indexOf("(") > -1,

minw : thisq.match( respond.regex.minw ) && parseFloat( RegExp.$1 ) + ( RegExp.$2 || "" ),

maxw : thisq.match( respond.regex.maxw ) && parseFloat( RegExp.$1 ) + ( RegExp.$2 || "" )

} );

}

}


applyMedia();

},


//recurse through request queue, get css text

makeRequests = function(){

if( requestQueue.length ){

var thisRequest = requestQueue.shift();


ajax( thisRequest.href, function( styles ){

translate( styles, thisRequest.href, thisRequest.media );

parsedSheets[ thisRequest.href ] = true;


// by wrapping recursive function call in setTimeout

// we prevent "Stack overflow" error in IE7

w.setTimeout(function(){ makeRequests(); },0);

} );

}

},


//loop stylesheets, send text content to translate

ripCSS = function(){


for( var i = 0; i < links.length; i++ ){

var sheet = links[ i ],

href = sheet.href,

media = sheet.media,

isCSS = sheet.rel && sheet.rel.toLowerCase() === "stylesheet";


//only links plz and prevent re-parsing

if( !!href && isCSS && !parsedSheets[ href ] ){

// selectivizr exposes css through the rawCssText expando

if (sheet.styleSheet && sheet.styleSheet.rawCssText) {

translate( sheet.styleSheet.rawCssText, href, media );

parsedSheets[ href ] = true;

} else {

if( (!/^([a-zA-Z:]*\/\/)/.test( href ) && !base) ||

href.replace( RegExp.$1, "" ).split( "/" )[0] === w.location.host ){

// IE7 doesn't handle urls that start with '//' for ajax request

// manually add in the protocol

if ( href.substring(0,2) === "//" ) { href = w.location.protocol + href; }

requestQueue.push( {

href: href,

media: media

} );

}

}

}

}

makeRequests();

};


//translate CSS

ripCSS();


//expose update for re-running respond later on

respond.update = ripCSS;


//expose getEmValue

respond.getEmValue = getEmValue;


//adjust on resize

function callMedia(){

applyMedia( true );

}


if( w.addEventListener ){

w.addEventListener( "resize", callMedia, false );

}

else if( w.attachEvent ){

w.attachEvent( "onresize", callMedia );

}

})(this);

Comments

Last 7 Days

what is the css code for transparent background

How do you give an < image > a tag?