Adding some new png files to supoprt alternate css

Fix css validation for media='print' stylesheet
Add alternate css file

NO VISIBLE CHANGES FOR USERS



git-svn-id: http://svn.linuxfromscratch.org/LFS/trunk/BOOK@10934 4aa44e1e-78dd-0310-a6d2-fbcd4c07a689

3 files changed, 1305 insertions, 1 deletions

diff --git a/stylesheets/lfs-xsl/chunk-slave.xsl b/stylesheets/lfs-xsl/chunk-slave.xsl
index 0bdeebab4..421475254 100644
--- a/stylesheets/lfs-xsl/chunk-slave.xsl
+++ b/stylesheets/lfs-xsl/chunk-slave.xsl
@@ -31,7 +31,8 @@ $Date$
   <!-- Print CSS Stylesheet -->
   <!-- The original template is in {docbook-xsl}/xhtml/docbook.xsl -->
   <xsl:template name='user.head.content'>
-    <link rel="stylesheet" href="stylesheets/lfs-print.css" type="text/css" media="print"/>
+    <link rel="stylesheet" href="../stylesheets/lfs-print.css" type="text/css" media="print"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   </xsl:template>
 
   <!-- Drop some unwanted style attributes -->
diff --git a/stylesheets/lfs-xsl/lfs-print.css b/stylesheets/lfs-xsl/lfs-print.css
index 697915e3d..af297db1a 100644
--- a/stylesheets/lfs-xsl/lfs-print.css
+++ b/stylesheets/lfs-xsl/lfs-print.css
@@ -7,3 +7,12 @@ $Date$
 .navfooter, .headerlinks {
    display: none;
 }
+
+div.navheader {
+  position: absolute;
+}
+
+div.navheader ul,
+div.navheader ul{
+  display: none;
+}
diff --git a/stylesheets/lfs-xsl/lfs.css.new b/stylesheets/lfs-xsl/lfs.css.new
new file mode 100644
index 000000000..d8520e84a
--- /dev/null
+++ b/stylesheets/lfs-xsl/lfs.css.new
@@ -0,0 +1,1294 @@
+/*
+$LastChangedBy:barjo $
+$Date:2015-08-04 00:37:38 +0100 $
+*/
+/* Global settings */
+body {
+  font-family: verdana, tahoma, helvetica, arial, sans-serif;
+  text-align:  left;
+  background:  #fff;
+  color:       #222;
+  margin:      1.0em;
+  padding:     0em;
+  font-size:   1.1em;
+  line-height: 1.25em;
+  margin-top:  0em;
+}
+
+/* Links */
+a:link {
+  color:           #22b;
+  font-weight:     bold; 
+  text-decoration: none;
+}
+
+a.ulink:link {
+  font-weight:     bold; 
+  color:           #55f;
+  text-decoration: none;
+}
+
+a:visited {
+  color:           #7e4988 ! important;
+  text-decoration: none;
+}
+
+a:hover, 
+a:focus {
+  color:           #d30e08 ! important;
+  text-decoration: underline;
+}
+
+a:active {
+  color:           #4183C4 ! important;
+  text-decoration: none;
+}
+
+div.navfooter a:link {
+  color:           #2AAA42 !important;
+}
+
+div.navfooter a:visited {
+  color:           #2AAA42 ! important;
+  text-decoration: none;
+
+}
+
+div.navfooter a:hover, div.navfooter a:focus {
+  color:           #2AAA42 ! important;
+  text-decoration: underline;
+}
+
+div.navfooter a:active {
+  color:           #2AAA42 ! important;
+  text-decoration: none;
+}
+
+/* Book titlepage */
+
+.book .titlepage {
+  text-align: center;
+  width:      92%;
+  /*max-width:  900px;*/
+  /*max-width:  100ex;*/
+  background: #dbddec;
+  margin:     0px auto;
+  padding:    0px 1em;
+}
+
+.book hr {
+  background: #dbddec;
+  height:     2px;
+  border:     0px;
+  margin:     0px;
+  padding:    0px;
+}
+
+/* Sections */
+div.sect1, 
+div.appendix, 
+div.wrap, 
+div.chapter, 
+div.part,
+div.preface,
+div.toc,
+div.legalnotice,
+div.dedication,
+div.index,
+.book .titlepage {
+  padding-left: 0.3em;
+  /*max-width:    900px;*/
+  /*max-width:    100ex;*/
+  /*margin:       0px auto;*/
+  margin-left:  170px;
+}
+
+@media(max-width:1220px) and (min-height:550px){
+  div.sect1, 
+  div.appendix, 
+  div.wrap, 
+  div.chapter, 
+  div.part,
+  div.preface,
+  div.legalnotice,
+  div.dedication,
+  div.index,
+  .book .titlepage,
+  .book .toc {
+    /*margin: 0 auto;*/
+    margin-left:  170px;
+  }
+}
+/* end media */
+
+@media(max-width:1050px),
+      (max-width:1050px) and (min-width:800px) and (max-height:550px){
+
+  div.sect1, 
+  div.appendix, 
+  div.wrap, 
+  div.chapter, 
+  div.part,
+  div.preface,
+  div.legalnotice,
+  div.dedication,
+  div.index,
+  .book .titlepage,
+  .book .toc {
+    margin-left: 120px;
+  }
+}
+/* end media */
+
+@media(max-width:550px),
+      (max-width:800px) and (max-height:550px){
+  div.sect1, 
+  div.appendix, 
+  div.wrap, 
+  div.chapter, 
+  div.part,
+  div.preface,
+  div.legalnotice,
+  div.dedication,
+  div.index,
+  .book .titlepage,
+  .book .toc {
+    margin:      auto;
+    margin-left: 7vmin;
+  }
+}
+/* end media */
+
+div.index > div.index {
+  margin: auto;
+}
+
+div.important ul {
+  padding-left:    1.5em;
+  list-style-type: disc;
+}
+
+div.important ul li p {
+  margin:  0em;
+  padding: 0em  0.6em;
+}
+
+.package, 
+.kernel, 
+.installation, 
+.commands, 
+.testing, 
+.configuration, 
+.content {
+  padding: 0em 0.5em 0.2em 0em;
+  margin:  0em;
+}
+
+.lfs .package {
+  margin:        1em;
+  padding:       0.2em 0.5em 0.75em 1.5em;
+  box-shadow:    0em   0em   6px rgba(0,0,0,.5);
+  border-radius: 4px;
+  position:      relative;
+  line-height:   1.4em;
+}
+
+.lfs .configuration {
+  background:  #fefefe;
+  border-top:  0.2em solid #dbddec;
+}
+
+.lfs .content {
+  margin:        1em;
+  padding:       0.2em 0.5em 0.75em 1em;
+  box-shadow:    0em   0em   6px rgba(0,0,0,.5);
+  border-left:   0.5em solid #444;
+  border-radius: 4px;
+  position:      relative;
+  line-height:   1.4em;
+}
+
+/* Headers */
+h1, h2, h3, h4, h5, h6, b, .strong {
+  color:       #000; /* black */
+  font-weight: bold;
+  line-height: 1em;
+}
+
+h1 {
+  font-size:  173%;
+  text-align: left;
+}
+
+.book h1 {
+  text-align: center;
+  margin:     0em;
+  padding:    0.7em;
+}
+
+.preface h1, 
+.part h1, 
+.chapter h1, 
+.appendix h1, 
+.index h1, 
+.sect1 h1, 
+.wrap h1 {
+  background:    none; /*#f5f6f7;*/
+  border-bottom: 1px solid #EEE; /*1em solid #dbddec;*/
+  margin-bottom: 1em;
+  margin-top:    0px;
+  padding:       0.4em;
+}
+
+h1.title sup {
+  font-size: small;
+}
+
+h2 {
+  font-size:144%;
+  border-bottom:1px solid #EEE;
+  padding:.3em;
+}
+
+.titlepage h2, 
+div.navheader  h2 {
+  font-size:     120%;
+  border-bottom: none;
+  padding:       0.25em;
+}
+
+.book h2.subtitle {
+  margin:  0pt;
+  padding: 0.2em;
+}
+
+.appendix h2 {
+  font-size:     133%;
+  margin-top:    0.8em;
+  margin-bottom: 0.2em;
+}
+
+h3 {
+  font-size:     120%;
+  border-bottom: 1px solid #EEE;
+  padding:       0.25em;
+}
+
+h4 {
+  font-size:     110%;
+  border-bottom: 1px solid #EEE;
+  padding:       0.2em;
+}
+
+.titlepage h3, 
+div.navheader  h3 {
+  font-size:     120%;
+  border-bottom: none;
+  padding:       0.25em;
+}
+
+.titlepage h4, 
+div.navheader h4 {
+  font-size:     110%;
+  border-bottom: none;
+  padding:       0.2em;
+}
+
+@media(max-width:550px){
+  .titlepage h2, 
+  div.navheader  h2 {
+    font-size:     4.7vmin;
+    border-bottom: none;
+    padding:       0.25em;
+  }
+
+  .titlepage h3, 
+  div.navheader  h3 {
+    font-size:     4.5vmin;
+    border-bottom: none;
+    padding:       0.25em;
+  }
+
+  .titlepage h4, 
+  div.navheader h4 {
+    font-size:     4.3vmin;
+    border-bottom: none;
+    padding:       0.2em;
+  }
+}
+/* End media */
+
+.package h4, h5, h6 {
+  font-size:  100%;
+  font-style: italic;
+}
+
+/* Navigation */
+div.navheader {
+  background:    #dbddec;
+  padding:       0.1em 0.5em;
+  /*margin:        0em auto;*/
+  margin-left:   170px;
+  /* border-bottom: 2px solid #dbddec; */
+  width:         100%;
+  /*max-width:     900px;*/
+  /*max-width:     100ex;*/
+  max-height:    85px;
+  z-index:       1000;
+}
+
+div.navheader ul {
+  display:none;
+}
+
+@media(min-width:550px) and (min-height:550px), 
+      (min-width:1220px) and (min-height:550px){
+  div.navfooter{
+    top:        0px;
+    position:   fixed;
+    background: rgb(255, 255, 255) url("../images/tux.png") no-repeat scroll 5px 5px;
+    display:    block;
+    height:     100px;
+    width:      100px;
+  }
+}
+/* End media */
+
+@media(max-width:1220px) and (min-height:550px){
+  div.navheader {
+    border-bottom: 1px solid #dbddec;
+    /*max-width:     900px;*/
+    /*max-width:     100ex;*/
+    max-height:    150px;
+    z-index:       1000;
+    min-height:    50px;
+    height:        auto;
+    width:         auto;
+    margin:        0px auto;
+  }
+}
+/* End media */
+
+@media(max-width:1050px),
+      (max-width:1050px) and (min-width:800px) and (max-height:550px){
+  div.navheader{
+    margin-left: 120px;
+    height:      auto;
+    width:       auto;
+  }
+}
+/* End media */
+
+@media(max-width:550px),
+      (max-width:800px) and (max-height:550px){
+  div.navheader{
+    height:      auto;
+    width:       auto;
+    /*margin-left: 0px;*/
+    margin-left: 120px;
+  }
+}
+/* End media */
+
+div.navheader h4 {
+  margin-top:    0.4em;
+  margin-bottom: 0em;
+  text-align:    center;
+}
+
+div.navheader h3 {
+  margin-top:    0.2em;
+  margin-bottom: 0em;
+  text-align:    center;
+}
+
+div.navfooter ul{
+  position: relative;
+  margin:   0px;
+  padding:  0px;
+  height:   0px;
+  width:    0px;
+}
+
+div.navheader ul li.prev, 
+div.navfooter ul li.prev {
+  position:       fixed;
+  display:        block;
+  left:           0px;
+  text-align:     left;
+  padding:        0.2em 1em;
+  margin-left:    6px;
+  top:            50%;
+  max-width:      170px;
+  /*height:         270px;*/
+  /*border:         1px solid red;*/
+  /*padding-bottom: 3em;*/
+}
+/*
+div.navheader ul li.next, 
+div.navfooter ul li.next {
+  position:     fixed;
+  display:      block;
+  text-align:   right;
+  right:        5px;
+  padding:      0.2em 1em;
+  margin-right: 7px;
+  top:          50%;
+  max-width:    170px;
+}
+*/
+div.navheader ul li.next, 
+div.navfooter ul li.next {
+  position:     fixed;
+  display:      block;
+  text-align:   left;
+  left:         0px;
+  padding:      0.2em 1em;
+  margin-left:  6px;
+  top:          75%;
+  max-width:    170px;
+}
+
+div.navheader ul li.prev p, 
+div.navfooter ul li.prev p,
+div.navheader ul li.next p, 
+div.navfooter ul li.next p {
+  padding:        0em;
+  padding-bottom: 3em;
+  margin:         1px 0px;
+  max-width:      170px;
+  font-size:      90%;
+  color:          blue;
+  font-weight:    bold;
+}
+
+div.navheader ul li.home, 
+div.navfooter ul li.home {
+  position:    fixed;
+  text-align:  left;
+  left:        0px;
+  padding:     0.2em 1em;
+  margin:      0px auto;
+  display:     block;
+  color:       #dbddec;
+  top:         115px;
+  margin-left: 6px;
+  max-width:   200px;
+}
+
+div.navheader ul li.up, 
+div.navfooter ul li.up {
+  position:    fixed;
+  text-align:  left;
+  left:        0px;
+  padding:     0.2em 1em;
+  margin:      0px auto;
+  display:     block;
+  color:       #dbddec;
+  top:         75px;
+  margin-left: 6px;
+  max-width:   200px;
+  /*border:      1px solid black;*/
+}
+
+div.navheader ul li.up a, 
+div.navfooter ul li.up a {
+  display:         block;
+  padding:         10px 5px 10px 28px;
+  background:      url(../images/chevron-top.png) no-repeat left center;
+  background-size: 20px 20px;
+}
+
+div.navheader ul li.home a, 
+div.navfooter ul li.home a {
+  display:         block;
+  padding:         10px 5px  10px 28px;
+  background:      url(../images/grid-three-up.png) no-repeat left center;
+  background-size: 20px 20px;
+}
+
+div.navheader ul li.prev a, 
+div.navfooter ul li.prev a {
+  display:         block;
+  padding:         10px 5px  10px 35px;
+  background:      url(../images/chevron-left.png) no-repeat left center;
+  background-size: 28px 28px;
+  /*border:          1px solid green;
+  margin:          2px;*/
+}
+
+/*
+div.navheader ul li.prev p span.xxx, span.xxx{
+  color: red;
+}
+
+div.navheader ul li.prev p {
+  border: 1px solid blue;
+}
+*/
+div.navheader ul li.next a, 
+div.navfooter ul li.next a{
+  display:         block;
+  padding:         10px 35px 10px 5px;
+  background:      url(../images/chevron-right.png) no-repeat right center;
+  background-size: 28px 28px;
+}
+
+@media(max-width:1220px) and (min-height:550px){
+  div.navheader ul li, 
+  div.navfooter ul li{
+    width: 120px;
+  }
+  
+  div.navheader ul li.prev p, 
+  div.navheader ul li.next p,
+  div.navfooter ul li.prev p, 
+  div.navfooter ul li.next p{
+    text-align: center;
+    /*border:     1px solid blue;
+    margin:     2px;*/
+    height:     7.5vh;  /* 7.5% ov viewport height */
+    overflow:   hidden; 
+  }
+/*
+  div.navheader ul li.prev p:after, 
+  div.navheader ul li.next p:after, 
+  div.navfooter ul li.prev p:after, 
+  div.navfooter ul li.next p:after{
+    content:    "";
+    text-align: right;
+    position:   absolute;
+    bottom:     0px;
+    right:      0px;
+    width:      100%;
+    height:     2.8em;
+    
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(255, 255, 255, 1) 100%);
+    
+  }
+*/
+  div.navheader ul li.prev, 
+  div.navfooter ul li.prev {
+    position: fixed;
+    display:  block;
+    left:     0px;
+    top:      40vh;  /* 55% of viewport height */
+    padding:  0px;
+    margin:   0px;
+  }
+
+  div.navheader ul li.prev a, 
+  div.navfooter ul li.prev a{
+    display:         block;
+    text-align:      center;
+    left:            0px;
+    padding:         10vh 0px 0px 0px;
+    background:      url(../images/chevron-left.png) no-repeat center 5vh;
+    background-size: 25px 25px;
+  }
+  
+  div.navheader ul li.next, 
+  div.navfooter ul li.next {
+    position: fixed;
+    display:  block;
+    left:     0px;
+    top:      62vh;
+    padding:  0px;
+    margin:   0px;
+  }
+  
+  div.navheader ul li.next a, 
+  div.navfooter ul li.next a {
+    display:         block;
+    text-align:      center;
+    left:            0px;
+    padding:         10vh 0px 0px 0px;
+    background:      url(../images/chevron-right.png) no-repeat center 5vh;
+    background-size: 25px 25px;
+  }
+  
+  div.navheader ul li.home, 
+  div.navheader ul li.up,
+  div.navfooter ul li.home, 
+  div.navfooter ul li.up {
+    position: fixed;
+    padding:  0px;
+    display:  block;
+    color:    #dbddec;
+    left:     0px;
+    margin:   0px;
+  }
+
+  div.navheader ul li.home, 
+  div.navfooter ul li.home{
+    top:25vh;
+  }
+
+  div.navheader ul li.up, 
+  div.navfooter ul li.up{
+    top:10vh;
+  }
+  
+  div.navheader ul li.home a, 
+  div.navfooter ul li.home a{
+    display:         block;
+    text-align:      center;
+    left:            0px;
+    padding:         10vh 0px 0px 0px;
+    background:      url(../images/grid-three-up.png) no-repeat center 5vh;
+    background-size: 25px 25px;
+  }
+
+  div.navheader ul li.up a, 
+  div.navfooter ul li.up a{
+    display:         block;
+    text-align:      center;
+    left:            0px;
+    padding:         10vh 0px 0px 0px;
+    background:      url(../images/chevron-top.png) no-repeat center 5vh;
+    background-size: 25px 25px;
+  }
+}
+/* End media */
+
+@media(max-width:1220px) and (max-height:550px) and (min-width:800px), 
+      (min-width:1220px) and (max-height:350px){
+  div.navheader ul li.prev p, 
+  div.navfooter ul li.prev p,
+  div.navheader ul li.next p, 
+  div.navfooter ul li.next p
+  {
+    display: none;
+  }
+  
+  div.navheader ul li.prev, 
+  div.navfooter ul li.prev {
+    max-width:   120px;
+    position:    fixed;
+    display:     block;
+    top:         45vmin;  /* smaller of 60% viewport height, width */ 
+    padding:     0px;
+    margin-left: 10px;
+    font-size:   90%;
+  }
+  
+  div.navheader ul li.next, 
+  div.navfooter ul li.next {
+    max-width:   120px;
+    position:    fixed;
+    display:     block;
+    left:        0;
+    top:         80vmin;
+    padding:     0px;
+    margin-left: 10px;
+    font-size:   90%;
+  }
+  
+  div.navheader ul li.prev a, 
+  div.navfooter ul li.prev a {
+    background-size: 20px 20px;
+  }
+  
+  div.navheader ul li.next a, 
+  div.navfooter ul li.next a{
+    display:         block;
+    padding:         10px 5px  10px 35px;
+    background:      url(../images/chevron-right.png) no-repeat left center;
+    background-size: 20px 20px;
+    text-align:      left;
+  }
+  
+  div.navheader ul li.home, 
+  div.navheader ul li.up,
+  div.navfooter ul li.home, 
+  div.navfooter ul li.up {
+    max-width:   120px;
+    position:    fixed;
+    padding:     0px;
+    margin-left: 10px;
+    display:     block;
+    color:       #dbddec;
+    font-size:   90%;
+  }
+  
+  div.navheader ul li.home, 
+  div.navfooter ul li.home{
+    top: 35vmin;
+  }
+  
+  div.navheader ul li.up, 
+  div.navfooter ul li.up{
+    top: 10vmin;
+  }
+  
+  div.navheader ul li.home a, 
+  div.navfooter ul li.home a,
+  div.navheader ul li.up a, 
+  div.navfooter ul li.up a{
+    padding: 10px 5px  10px 35px;
+  }
+}
+/* End media */
+
+@media(max-width:550px),
+      (max-width:800px) and (max-height:550px){
+  div.navheader ul li.prev p, 
+  div.navfooter ul li.prev p,
+  div.navheader ul li.next p, 
+  div.navfooter ul li.next p {
+    display: none;
+  }
+  
+  div.navheader ul li.prev, 
+  div.navfooter ul li.prev {
+    position: fixed;
+    display:  block;
+    left:     0px;
+    top:      60vmin;
+    padding:  0px;
+    margin:   0px;
+  }
+  
+  div.navheader ul li.prev a, 
+  div.navfooter ul li.prev a{
+    display:         block;
+    width:           0px;
+    left:            0px;
+    padding:         5vmin 0 5vmin 8vmin;
+    text-indent:     15vmin;
+    height:          10vmin;
+    background:      url(../images/chevron-left.png) no-repeat center center;
+    background-size: 6vmin 6vmin;
+    overflow:        hidden;
+  }
+  
+  div.navheader ul li.next, 
+  div.navfooter ul li.next {
+    position: fixed;
+    display:  block;
+    left:     0px;
+    top:      80vmin;
+    padding:  0px;
+    margin:   0px;
+  }
+  
+  div.navheader ul li.next a, 
+  div.navfooter ul li.next a{
+    display:         block;
+    width:           0px;
+    left:            0px;
+    padding:         5vmin 0px 5vmin 8vmin;
+    text-indent:     15vmin;
+    height:          10vmin;
+    background:      url(../images/chevron-right.png) no-repeat center center;
+    background-size: 6vmin 6vmin;
+    overflow:        hidden;
+  }
+  
+  div.navheader ul li.home, 
+  div.navheader ul li.up,
+  div.navfooter ul li.home, 
+  div.navfooter ul li.up {
+    position: fixed;
+    padding:  0px;
+    margin:   0px;
+    display:  block;
+    color:    #dbddec;
+    left:     0px;
+  }
+  
+  div.navheader ul li.home, 
+  div.navfooter ul li.home{
+    top: 40vmin;
+  }
+  
+  div.navheader ul li.up, 
+  div.navfooter ul li.up{
+    top: 20vmin;
+  }
+  
+  div.navheader ul li.home a, 
+  div.navfooter ul li.home a{
+    display:         block;
+    width:           0px;
+    padding:         5vmin 0px 5vmin 8vmin;
+    text-indent:     15vmin;
+    height:          10vmin;
+    background:      url(../images/grid-three-up.png) no-repeat center center;
+    background-size: 6vmin 6vmin;
+    overflow:        hidden;
+  }
+  
+  div.navheader ul li.up a, 
+  div.navfooter ul li.up a{
+    display:         block;
+    width:           0px;
+    padding:         5vmin 0px 5vmin 8vmin;
+    text-indent:     15vmin;
+    height:          10vmin;
+    background:      url(../images/chevron-top.png) no-repeat center center;
+    background-size: 6vmin 6vmin;
+    overflow:        hidden;
+  }
+}
+/* End media */
+
+/* TOC */
+div.toc ul, 
+div.index ul, 
+div.navheader ul, 
+div.navfooter ul {
+  list-style: none;
+}
+
+li.preface, 
+.part li.appendix {
+  margin-left: 1em;
+}
+
+div.toc h3 {
+  margin: 1em 0em 0.3em 0em;
+}
+
+li.appendix h3, 
+li.glossary h3, 
+li.index h3 {
+  margin: 0.5em
+}
+
+div.toc h4 {
+  margin: 0.6em 0em 0.2em 0em;
+}
+
+li.chapter h4 a {
+  display:       block;
+  margin-bottom: 0.4em
+}
+
+.dummy {
+  display:     block;
+  font-weight: bold;
+  font-size:   110%;
+  margin:      0.6em 0em 0.2em 0em;
+}
+
+/* Index */
+.index ul li {
+  margin: 5px 0em;
+}
+
+.index ul li ul li{
+  margin: 0em;
+}
+
+.item {
+  float:        left;
+  margin-right: 1em
+}
+
+.secitem {
+  font-weight:  normal;
+  float:        left;
+  margin-right: 1em
+}
+
+.indexref {
+  display: block;
+}
+
+.item + .indexref {
+  margin-left: 16em;
+}
+
+.secitem + .indexref {
+  margin-left: 15em;
+}
+
+@media(max-width:600px){
+  .item {
+    display: block;
+    width:   100%;
+  }
+
+  .secitem {
+    display:     block;
+    width:       100%;
+    margin-left: 1em;
+  }
+  
+  .item + .indexref {
+    display:      inline-block;
+    padding-left: 0px;
+    margin-left:  1em;
+  }
+  
+  .secitem + .indexref {
+    display:      inline-block;
+    padding-left: 0px;
+    margin-left:  2em;
+  }
+}
+/* End media */
+
+/* Admonitions */
+div.admon img {
+  padding-top: 10px;
+  margin-left: 1.1em;
+}
+
+div.admon h3 {
+  display:       inline;
+  margin-bottom: 50px;
+  /*margin-left:   2em;*/
+}
+
+div.admon p {
+  margin-left:    0.5em;
+  padding-bottom: 0.4em;
+}
+
+div.admon pre {
+  margin: 0.5em 3em;
+}
+
+div.note, 
+div.tip {
+  margin:        1em;
+  padding:       0.2em 0.5em 0.75em 0.75em;
+  box-shadow:    0px 0px 6px rgba(0,0,0,.5);
+  border-left:   0.5em solid #F9FF00;
+  border-radius: 4px;
+  position:      relative;
+  line-height:   1.4em;
+}
+
+div.important, 
+div.warning, 
+div.caution {
+  margin:        1em;
+  padding:       0.2em 0.5em 0.75em 0.75em;
+  box-shadow:    0px 0px 6px rgba(0,0,0,.5);
+  border-left:   0.5em solid #dc322f;
+  border-radius: 4px;
+  position:      relative;
+  line-height:   1.4em;
+}
+
+div.important h3, 
+div.warning h3, 
+div.caution h3 {
+  color: #900;
+}
+
+div.important em, 
+div.warning em, 
+div.caution em {
+  color:       #000;
+  font-weight: bold;
+}
+
+/* table */
+.table p.title {
+  text-align:    center;
+  margin-top:    0px;
+  margin-bottom: 0.3em;
+}
+
+.table table {
+  margin-left:  auto;
+  margin-right: auto;
+}
+
+.table table th, 
+.table table td {
+  padding:    0.2em 2em 0.2em 2em;
+  text-align: left;
+}
+
+.revhistory {
+  padding-left: 1em;
+}
+
+.revhistory th {
+  line-height: 2em;
+  text-align:  left;
+}
+
+.revhistory td {
+  padding-right: 1em;
+}
+
+/* variablelist as table */
+.variablelist table {
+  width:  auto;
+  margin: 0em 1em 0em 1em;
+}
+
+.variablelist td {
+  vertical-align: top;
+  min-width:      100px;
+  padding:        0px;
+}
+
+@media(max-width:700px){
+  .variablelist td {
+    display: inline-block;
+    width:   100%;
+  }
+
+  .variablelist td:nth-child(2) p{
+    margin-left: 2em;
+  }
+}
+/* End media */
+
+.variablelist td span, 
+td p {
+  margin:  0.25em;
+  padding: 0px;
+}
+
+/* variablelist as list */
+dl {
+  padding-left: 1em
+}
+
+dt {
+  font-weight:bold;
+  margin-left: 1em;
+}
+
+dd {
+  margin-bottom: 0.6em;
+  margin-left:   1em;
+}
+
+dd p {
+  margin-top:     0px;
+  margin-bottom:  0px;
+  padding-top:    0px;
+  padding-bottom: 0px;
+}
+
+div.materials dt {
+  display: list-item;
+}
+
+div.materials dd {
+  margin-left:  0px;
+  padding-left: 0px;
+}
+
+/* segmentedlist */
+.appendix .segmentedlist {
+  padding-left: 1em;
+}
+
+.package .seg {
+  margin-bottom: 0px;
+  margin-top:    0px;
+  clear:         left;
+}
+
+.content .seg {
+  margin-bottom: 0.4em;
+  margin-top:    0.4em;
+  clear:         left;
+}
+
+.segtitle {
+  float:         left;
+  padding-right: 1em;
+}
+
+.package .segbody, .appendix .segbody {
+  display:      block;
+  padding-left: 14em;
+}
+
+.content .segbody {
+  display:      block;
+  padding-left: 12em;
+}
+
+@media(max-width:700px){
+  .segtitle {
+    display: block;
+    width:   100%;
+  }
+  
+  .package .segbody, .content .segbody {
+    display:      inline-block;
+    padding-left: 0px;
+    margin-left:  1em;
+  }
+}
+/* End media */
+
+/* itemizedlist */
+.itemizedlist ul {
+  margin-left: 1em;
+}
+
+.itemizedlist li p {
+  margin: 5px 0;
+}
+
+.itemizedlist li p:first-child {
+  padding-left: 3px;
+  margin-top:   15px;
+}
+
+.itemizedlist li ul {
+  margin-bottom: 1.2em;
+}
+
+.itemizedlist li ul li p {
+  margin-top:    0.5em;
+  margin-bottom: 0.5em;
+}
+
+.itemizedlist li ul li:first-child p:first-child {
+  margin-top: -0.6em;
+}
+
+ul.compact {
+  list-style: none;
+}
+
+.blfs ul.compact {
+  list-style: disc;
+}
+
+ul.compact li {
+  margin:  0px;
+  padding: 0px;
+}
+
+ul.compact li p {
+  padding: 0.3em;
+  margin:  0px;
+}
+
+.blfs ul.compact li p {
+  background-color: #f0fff0;
+}
+
+/* orderedlist */
+ol {
+  list-style: decimal;
+}
+
+ol ol {
+  list-style: lower-alpha;
+}
+
+ol ol ol {
+  list-style: lower-roman;
+}
+
+ol.compact li {
+  margin:  0px;
+  padding: 0px;
+}
+
+ol.compact li p {
+  padding: 0.3em;
+  margin:  0px;
+}
+
+/* Indented blocks */
+p, 
+blockquote {
+  padding-left:  1em;
+  padding-right: 1em;
+}
+
+/* Monospaced elements */
+tt, 
+code, 
+kbd, 
+pre, 
+.command {
+  font-family: monospace;
+}
+
+.systemitem {
+  font-style: italic;
+}
+
+pre {
+  background-color: #e9e9e9;
+  color:            #333;
+  margin:           1em;
+  padding:          0.2em 0.5em 0.5em 2em;
+  border-radius:    4px;
+  position:         relative;
+  line-height:      1.2em;
+  overflow:         auto;
+  font-weight:      bold;
+}
+
+pre.screen {
+  font-weight: normal;
+}
+
+.literal, 
+.prompt {
+  font-weight: normal;
+}
+
+/* Mixed tags */
+p.usernotes {
+  margin-left: -1em;
+  font-size:   small;
+  font-weight: bold;
+  font-style:  italic;
+}
+
+.underlined {
+  text-decoration: underline;
+}
+
+/* Last edited info */
+p.updated {
+  font-size:   small;
+  font-weight: bold;
+  font-style:  italic;
+}
+
+/* Special colored blocks */
+  /* OrangeRed4 */
+.feature-ssp {
+  color: #8B2500;
+}
+
+  /* RoyalBlue3 */
+.feature-aslr {
+  color: #3A5FCD;
+}
+
+  /* NavyBlue */
+.feature-pax {
+  color: #000080;
+}
+
+  /* VioletRed */
+.feature-hardened_tmp {
+  color: #d02090;
+}
+
+  /* PaleTurquoise4 */
+.feature-warnings {
+  color: #668b8b;
+}
+
+  /* RosyBrown */
+.feature-misc {
+  color: #bc8f8f;
+}
+
+  /* Sienna*/
+.feature-blowfish {
+  color: #8E6B23
+}