/*CSS tutorial*/

.prettyprint .example-CSS-Font-Stretch-paragraph {
    font-family: Arial, Helvetica, sans-serif;
    font-stretch: condensed;
}

.prettyprint .example-css-font-size-paragraph {
    font-size: 30px;
}

.prettyprint .example-CSS-Font-Style-paragraph {
    font-style: italic;
}

.prettyprint .example-CSS-Font-Variant-paragraph {
    font-variant: small-caps;
}

.prettyprint .example-CSS-Font-Weight-paragraph {
    font-weight: bold;
}

.prettyprint .example-CSS-Font-Property-paragraph {
    font: italic small-caps bold 20px Georgia, Garamond, serif;
}

.prettyprint .example-CSS-Text-Color-paragraph {
    color: olive;
}

.prettyprint .example-CSS-Text-Align-paragraph {
    text-align: right;
}

.prettyprint .example-CSS-Text-Indent-paragraph {
    text-indent: 50px;
}

.prettyprint #css-id-selector-heading {
    color: red;
    height: 100px;
}

.prettyprint .example-CSS-Letter-Spacing-paragraph {
    letter-spacing: 5px;
}

.prettyprint .example-CSS-Word-Spacing-paragraph {
    word-spacing: 50px;
}

.prettyprint .example-CSS-Text-Transform-uppercase {
    text-transform: uppercase;
}

.prettyprint .example-CSS-Text-Transform-lowercase {
    text-transform: lowercase;
}

.prettyprint .example-CSS-Text-Transform-capitalize {
    text-transform: capitalize;
}

.prettyprint .example-CSS-Text-Direction-paragraph {
    direction: rtl;
}

.prettyprint .example-CSS-unicode-bidi-paragraph {
    direction: rtl;
    unicode-bidi: bidi-override;
}

.prettyprint .example-CSS-Text-Shadow-paragraph {
    text-shadow: 2px 2px 8px orange;
}

.prettyprint #example-min-height-and-min-width-Properties-div {
    min-height: 150px;
    min-width: 75px;
    background-color: gold;
}

.prettyprint #example-CSS-Background-Color-div {
    padding: 20px;
    background-color: yellow;
}

.prettyprint #example-CSS-Background-Image-div {
    background-image: url("http://schools.inimisttech.com/upload/blogs/15501493511549346156product.png");
    height: 132px;
}

.prettyprint #example-CSS-Background-Repeat-div {
    background-image: url("http://schools.inimisttech.com/upload/blogs/15501493511549346156product.png");
    background-repeat: repeat;
    height: 132px;
}

.prettyprint #example-CSS-Background-Position-div{
        padding: 70px;
        background-image:url("http://schools.inimisttech.com/upload/blogs/15501493511549346156product.png");
        background-repeat:no-repeat;
        background-position: 100px;
      }
.prettyprint #example-CSS-Background-Attachment-div{
        padding: 70px;
        height: 70px;
        width: 150px;
        background-image: url("http://schools.inimisttech.com/upload/blogs/15501493511549346156product.png");
        overflow: auto;
        background-attachment: fixed;
      }
      .prettyprint #example-Setting-Borders-on-all-Sides-div{
        padding: 20px;
        border-width: 1px;
        border-style: solid;
        border-color: orange;
      }
.prettyprint #example-The-border-Property-div{
        padding: 20px;
        border: 1px solid orange;
      }
      
     .prettyprint .Set-border-top-side {
    border-top-width: 4px;
    padding: 20px;
  }
  .prettyprint .Set-border-bottom-side{
    border-bottom-width: 4px;
    padding: 20px;
  }
 .prettyprint .Set-border-right-side{
    border-right-width: 4px;
    padding: 20px;
  }
  .prettyprint .Set-border-right-side{
    border-left-width: 4px;
    padding: 20px;
  }
.prettyprint .Rounded-corners {
            padding: 20px;
            border: 1px solid orange;
            border-radius: 8px;
        }
        
    .prettyprint #example-Setting-Margins-on-all-Sides-div {
        border: 1px solid orange;
      }
     .prettyprint #example-Setting-Margins-on-all-Sides-div > p {
        background: gold;
        margin: 20px;
      }        
      
      .prettyprint .example-Setting-Margins-for-Each-Side-left{
        margin-left: 50px;
      }
      .prettyprint .example-Setting-Margins-for-Each-Side-right {
        margin-right: 50px;
      }
      .prettyprint .example-Setting-Margins-for-Each-Side-top {
        margin-top: 50px;
      }
      .prettyprint .example-Setting-Margins-for-Each-Side-bottom {
        margin-bottom: 50px;
      }
      
      .prettyprint .box-model-padding {
    padding: 20px;
    background: gold;
  }
  .prettyprint .box-model-no-padding {
    padding: 0;
    background: limegreen;
  }
  .prettyprint .Example-of-list-style-type {
    font-size: 1.5em;
    list-style-type: circle;
  }
  .prettyprint .Image-list-style-type{
    font-size: 22px;
    list-style-image: url("http://schools.inimisttech.com/upload/blogs/15501493511549346156product.png");
  }
    .prettyprint .example-io {
    font-size: 1.5em;
  }
  .prettyprint .example-inside {
    list-style-position: inside;
  }
  .prettyprint .example-outside {
    list-style-position: outside;
  }
   .prettyprint .example-list-style {
    font-size: 22px;
    margin: 0;
    padding-left: 0;
    list-style: none;
  }
  
  .prettyprint .inline-lists {
        font-size: 22px;
        margin: 0;
        padding-left: 0;
        list-style: none;
      }
      .prettyprint .inline-lists > li {
        display: inline-block;
      }
    .prettyprint .example-relative-position {
    position: relative;
    left: 50px;
    background-color: gold;
    width: 90px;
  }
  .prettyprint .Example-absolute {
        position: absolute;
        top: 50%;
        right: 30px;
        background-color: gold;
        width: 90px;
        padding: 20px;
      }
      
  .prettyprint .example-absolute {
    position: absolute;
    top: 95%;
    left: 40px;
    height: 20px;
    background-color: limegreen;
  }
  .prettyprint .example-fixed {
    position: fixed;
    top: 10px;
    left: 10px;
    background-color: gold;
    width: 90px;
  }
  .prettyprint .float-left {
    float: left;
    padding: 20px;
    margin: 0 10px 10px 0;
    background: gold;
  }
  .prettyprint .float-right {
    float: right;
    padding: 20px;
    margin: 0 0 10px 10px;
    background: gold;
  }
  .prettyprint #pageHeader {
  grid-area: header;
}
.prettyprint #pageFooter {
  grid-area: footer;
}
 .prettyprint #mainArticle {
  grid-area: article;      
}
.prettyprint #mainNav {
  grid-area: nav;
}
.prettyprint #siteAds {
  grid-area: ads;
}

/*using css create grid system*/
.prettyprint .item1 { grid-area: header; }
.prettyprint .item2 { grid-area: menu; }
.prettyprint .item3 { grid-area: main; }
.prettyprint .item4 { grid-area: right; }
.prettyprint .item5 { grid-area: footer; }
.prettyprint .example-css-grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  grid-gap: 10px;
  background-color: black;
  padding: 10px;
}
.prettyprint .example-css-grid-container > div {
  background-color: grey;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

  
/*Bootstrap tutrial*/

.prettyprint .example-li-Bootstrap-Navbar {
    margin-top: -20px;
}


/*.prettyprint .example-collapse-div-Bootstrap-Navbar{
background-color:paleturquoise;
}*/

.prettyprint .example-breadcrumb {
    background-color: lightblue;
}

.prettyprint .example-progress-bar {
    background-color: black;
}

.prettyprint .example-bootstrap-jumbotron {
    background-color: turquoise;
}

.prettyprint .example-bootstrap-well {
    background-color: azure;
}

.prettyprint .example-bootstrap-dropdown {
    margin-bottom: 70px;
}

.prettyprint .example-scrollspy {
    position: relative;
    /* required */
}

.prettyprint .example-scrollspy-list-group {
    position: sticky;
    /* Supported in latest version of Chrome, Firefox, Safari, Opera and Edge browsers */
    top: 15px;
}


/*Jquery slide tutorial */

.prettyprint .example-jquery-slidedown {
    margin-left: 20px;
}


/*Jquery animation tutorial */

.prettyprint .example-jquery-animation-multiple-queued-div {
    width: 50px;
    height: 50px;
    background: red;
    margin-top: 30px;
    border-style: solid;
    /* Required to animate border width */
    border-color: #6f40ce;
}

.prettyprint .example-jquery-animate-toggle-div {
    width: 40%;
    height: 200px;
    background: #9d7ede;
    margin-top: 30px;
}

.prettyprint .example-jquery-animation-stop {
    position: relative;
    background-color: blue;
    color: blue;
}

.prettyprint .example-jquery-stop {
    margin-left: 20px;
}

.prettyprint.example-jquery-callback-button {
    background: red;
    font-size: 24px;
    padding: 20px;
}

.prettyprint .example-jquery-chaining-paragraph {
    width: 200px;
    padding: 40px 0;
    font: bold 24px sans-serif;
    text-align: center;
    background: #aaccaa;
    border: 1px solid #63a063;
    box-sizing: border-box;
}

.prettyprint .example-jquery-chaining-start-reset {
    margin-left: 20px;
}

.prettyprint .example-jquery-chaining-paragraph {
    margin-bottom: 10px;
}


/*jQuery CSS Classes*/

.prettyprint .jQuery-example-addclass-paragraph {
    color: red;
}

.prettyprint .jQuery-example-removeclass-paragraph {
    color: red;
}

.prettyprint .jQuery-example-toggleClass-paragraph {
    color: red;
}


/*jQuery Ancestors*/

.prettyprint .jquery-example-ancestors-parent * {
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}

.prettyprint .jquery-example-ancestors-closest * {
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}

.prettyprint .jquery-example-ancestors-parentsUntil * {
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}

.prettyprint .jquery-sibling-example-paragraph-highlight {
    background: blue;
}


/*jQuery Descendants*/

.prettyprint .jQuery-example-descendants-children * {
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}

.prettyprint .jQuery-descendants-find * {
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}


/*jQuery Siblings*/

.prettyprint .example-jquery-siblings-siblings * {
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}

.prettyprint .example-jquery-siblings-next * {
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}

.prettyprint .example-jquery-siblings-nextAll * {
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}

.prettyprint .example-jquery-siblings-nextUntil * {
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}

.prettyprint .example-jquery-siblings-prev * {
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}

.prettyprint .example-jquery-siblings-prevAll * {
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}

.prettyprint .example-jquery-siblings-prevUntil * {
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}