.blogTitleBox  {
   background: purple;
   color: white;
   text-align: center;
   height: 2cm;
   width: 100%;
   
 }

body {margin-left: 1cm; margin-right:1cm;
      font-family: sans-serif;
      font-size: 9pt}

h1 {padding-top: 20px}

h2 {font-style: italic; font-size: 10pt}

pre {font-size: 9pt; font-family:courier, monospace; margin-left: 2cm}

p  {margin-right: 0px}

.smallnote {font-size:80%}

.bold {font-weight:bold}
.italic {font-style:italic}

.principle, .practice, .constraint, .property, div.story {
   margin: 1.5em 0.5em 1em 1em;
 }

.principlelab, .constraintlab,
.propertylab, .practicelab,
.futurelab,
.storylab {
   margin: 1.5em 0.5em 1em 1em;
   font-weight: bold;
   font-style: italic;
 }

.principlelab  { background: #f7ebd7 }
.futurelab     { background: yellow }
.constraintlab { background: #becece }
.propertylab   { background: #f7ebd7 }
.practicelab   { background: #dfffff }
.storylab      { background: #005a9c; color: #fff; }

/* Make sure the relative spacing stuff only applies to 'screen'
   because IE has bugs when it comes to printing relative things. */

@media screen {

.principle, .practice, .constraint, .property, div.story {
   position: relative;
   top: -2em;
   padding: 0;
   margin: 1.5em 0.5em -1em 1em;
}

.principlelab, .constraintlab,
.propertylab, .practicelab,
.futurelab,
.storylab {
   position: relative;
   padding: 0 0.5em;
   top: -1.5em;
 }

}