body{
  margin      : 0;
  padding     : 0;
  background  : rgb(81,66,84);
  font-family : calluna-sans,sans-serif;
  font-size   : 20px;
  font-weight : 200;
  line-height : 1.25;
}

@media screen and (min-width:512px) and (max-width:767px){
  body{
    font-size : 16px;
  }
}

@media screen and (max-width:511px){
  body{
    font-size : 12px;
  }
}

h1,
h2,
h3,
h4{
  padding     : 0;
  font-family : calluna,sans-serif;
  font-weight : 200;
}

h1{
  color:white;
  font-size:3em;
  line-height:96px;
  margin:48px 0 0;
  text-align:center;
  text-shadow : 0 0 2px black;
}

h2{
  font-size:1.5em;
  line-height:1em;
  margin:1em 0;
}

h3{
  font-size:1.2em;
  line-height:1.25em;
  margin:1.25em 0;
}

h4{
  font-size:1em;
  line-height:1.5em;
  margin:1.5em 0;
}

p{
  margin:0 0 1.5em;
  padding:0;
}

table{
  margin:0 auto 1.5em;
}

blockquote{
  margin:0 2em; /* should always contain an element with a bottom margin */
  padding:0;
}

form{
  margin:0;
  padding:0;
}

pre{
  overflow:auto;
}

dl{
  margin:0 1.25em 1.25em;
}

ol{
  margin:0 1.25em 1.25em;
  padding:0;
}

#content ul{
  margin:0 1.25em 1.25em;
  padding:0;
}

dl dl{
  margin:0;
}

dl ol,
dl ul,
ol dl,
ol ol,
ol ul,
ul dl,
ul ol,
ul ul{
  margin-right:0;
  margin-bottom:0;
}

dt{
  font-weight:bold;
}

dd{
  margin-left:2em;
}

dt,
dd,
#content li{
  line-height:1.5em;
}

a{
  color:#00a;
}

a:visited{
  color:#505;
}

a img{
  border:0;
}

code{
  line-height:1em; /* compensates for browsers' faulty leading calculations */
}

cite,
dfn,
em,
var{
  font-family : calluna-sans,sans-serif;
  font-style  : italic;
}

.defaultInput{
  color:#666;
}

.imageContainer{
  text-align:center;
  margin-bottom:1.5em;
  overflow:auto;
}

.codeListing{
  font-size : 14px;
  margin:0 2em 1.5em;
  padding-bottom:1.5em; /* padding rather than margin to fix IE7 scrollbar bug */
  white-space:pre;
}

* html .codeListing code{
  display:block;
  width:100%; /* forces IE6 to wrap - otherwise the page stretches */
}

.headedTable{
  background:rgb(233,231,234);
  border-collapse:collapse;
}

.headedTable th,
.headedTable td{
  border:1px solid rgb(190,184,191);
  line-height:1.5em;
  padding:0 0.25em;
  font-weight:normal;
}

.headedTable th{
  background:rgb(212,208,212);
}

.number{
  text-align:right;
}

.navigation{
  list-style-type:none;
  margin:0 0 1.5em;
}

.navigation li{
  background:url('celtic-knot.png') no-repeat top left;
  margin:0 0 1.25em;
  padding:0 0 0 2.5em;
}

.navigationTitle{
  height:1.5em;
}

.navigationDescription{
  min-height:3em;
}

* html .navigationDescription{
  height:3em;
}

/* old-style navigaion */

.navigation h2{
  font-style:normal;
  font-size:1em;
  line-height:1.5em;
  height:1.5em;
  margin:0;
}

.navigation p{
  margin:0;
  /*padding-left:2em;*/
  min-height:3em;
}

* html .navigation p{
  height:3em;
}

.ipa{
  font-family:serif;
}

.capitals,
.initialism{
  font-size:0.9375em;
  line-height:1em;
}

.advertisement{
  text-align:center;
}

#content + .advertisement{
  margin:0 12em;
}

img.initial{
  position:relative;
  bottom:-20px;
  margin-right:-15px;
  margin-left:-20px;
}

#content{
  max-width     : 48em;
  margin        : 0 auto;
  padding       : 0 1.25em;
}

#content > div{
  padding       : 1.25em 1.25em 1px;
  border-radius : 0.5em;
  background    : white;
  color         : #666;
}

#footer{
  margin     : 2em;
  text-align : center;
  color      : #999;
}

#footer a{
  color : #999;
}

/* Safalra Bar ****************************************************************/

#safalraBar{
  position   : fixed;
  top        : 0;
  left       : 0;
  width      : 100%;
  margin     : 0;
  padding    : 0;
  background : #222;
  color      : #999;
}

#safalraBar li{
  display         : inline-block;
  padding         : 8px;
  list-style-type : none;
}

#safalraBar a,
#safalraBar span{
  color           : #999;
  text-decoration : none;
  transition      : color 0.2s;
}

#safalraBar a:hover,
#safalraBar span{
  color : #fff;
}