/*

stylesheet.css

Stylesheet for http://code.stephenmorley.org/

Created by Stephen Morley - http://code.stephenmorley.org/ - and released under
the terms of the CC0 1.0 Universal legal code:

http://creativecommons.org/publicdomain/zero/1.0/legalcode

*/

/* basic HTML elements ********************************************************/

body{
  padding:0;
  margin:0;
  text-align:center;
  /* Georgia for Windows/MacOS, Utopia/Charter for Linux, Droid Serif for Android, Times New Roman/Times as back-ups */
  font-family:Georgia,Utopia,Charter,'Droid Serif','Times New Roman',Times,serif;
  line-height:1.5;
}

a{
  color:rgb(153,204,102);
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

a:visited{
  color:rgb(115,153,77);
}

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

button{
  background:transparent;
  border:0;
  margin:0;
  padding:0;
  font-size:1em;
  cursor:pointer;
}

/* prevents Firefox from adding space around the button */
button::-moz-focus-inner{
  padding:0;
  border:0;
} 

button span{
  display:block;
  border-radius:8px;
  border:1px solid rgb(115,153,77);
}

button span span{
  padding:0 8px;
  border-radius:7px;
  border:1px solid rgb(204,230,179);
  background:rgb(153,204,102);
  background-image:        linear-gradient(rgb(178,217,140),rgb(153,204,102));
  background-image:   -moz-linear-gradient(rgb(178,217,140),rgb(153,204,102));
  background-image:-webkit-linear-gradient(rgb(178,217,140),rgb(153,204,102));
  background-image:     -o-linear-gradient(rgb(178,217,140),rgb(153,204,102));
  color:white;
  text-shadow:0 0 2px rgb(115,153,77);
  font-family:Georgia,Utopia,Charter,'Droid Serif','Times New Roman',Times,serif;
  line-height:1.5em;
}

code{
  font-family:Consolas,'Courier New',Courier,monospace;
}

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

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

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

dt{
  margin:0;
  padding:0;
  font-style:italic;
}

form{
  margin:0;
  padding:0;
}

h2{
  font-size:1.5em;
  margin:-64px 0 0.5em;
  padding:64px 0 0;
  font-weight:normal;
}

h3{
  font-size:1.25em;
  margin:-64px 0 0.6em;
  padding:64px 0 0;
  font-weight:normal;
}

input,
textarea{
  font-family:Georgia,Utopia,Charter,Droid,'Times New Roman',Times,serif;
  font-size:1em;
}

li{
  margin:0;
  padding:0;
}

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

pre{
  /* setting the font family stops Firefox changing the font size to 13px */
  font-family:Consolas,'Courier New',Courier,monospace;
  font-size:0.75em;
  line-height:1.333;
  margin:0;
  padding:0;
}

sub,
sup{
  font-family:Verdana,Geneva,sans-serif;
  font-size:0.625em;
}

table{
  margin:0 auto 1.5em;
  border-collapse:collapse;
  border-spacing:0;
}

td,
th{
  font-weight:normal;
  vertical-align:top;
  padding-left:0.375em;
  padding-right:0.375em;
}

ul{
  margin:0 1.5em 1.5em 2.5em;
  padding:0;
}

/* general classes ************************************************************/

.navigationRow{
  height:48px;
  margin:0 0 1.5em;
}

.navigationRow img{
  display:block;
  float:left;
  margin-right:0.5em;
}

.navigationBlockLeft{
  width:300px;
  float:left;
}

.navigationBlockRight{
  width:300px;
  float:right;
}

.number{
  text-align:right;
}

.imageContainer{
  margin:0 0 1.5em;
  text-align:center;
  overflow:auto;
  /* setting the position prevents headings from covering the scroll bar */
  position:relative;
}

.codeListing{
  margin:0 0 1.5em 1.5em;
}

table .codeListing{
  margin:0;
}

.codeListing td,
.codeListing th{
  vertical-align:top;
}

.footnotes li{
  margin-top:-64px;
  padding-top:64px;
}

.formattedTable{
  /* setting the position prevents headings from covering the last rows */
  position:relative;
}

.formattedTable th,
.formattedTable td{
  border:1px solid white;
}

.formattedTable th{
  background-color:rgb(153,204,102);
  color:white;
  text-shadow:0 0 2px rgb(115,153,77);
}

.formattedTable tr:nth-child(odd){
  background-color:rgb(242,249,236);
}

.formattedTable tr:hover{
  background-color:rgb(230,243,217);
}

.formattedTable tr:hover a{
  color:rgb(115,153,77);
}

.formattedTable tr:hover a:visited{
  color:rgb(77,102,51);
}

.buttonContainer{
  text-align:center;
}

/* syntax highlighting ********************************************************/

.codeListing td:first-child{
  padding-left:0;
}

.codeListing td:last-child{
  padding-right:0;
}

.codeListing .comment{
  color:#666;
  font-style:italic;
}

.php .keyword{
  color:#c06;
}

.php .literal{
  color:#c60;
}

.php .function{
  color:#6c0;
}

.php .userFunction,
.php .userClass{
  color:#0c6;
}

.php .variable{
  color:#06c;
}

.php .constant{
  color:#60c;
}

.javascript .keyword{
  color:#c06;
}

.javascript .literal{
  color:#c60;
}

.javascript .function,
.javascript .builtIn{
  color:#6c0;
}

.javascript .userFunction{
  color:#0c6;
}

.javascript .variable{
  color:#06c;
}

.javascript .constant{
  color:#60c;
}

.html .attribute{
  color:#c06;
}

.html .value{
  color:#c60;
}

.html .element{
  color:#6c0;
}

.css .property{
  color:#c06;
}

.css .value{
  color:#c60;
}

.css .elementSelector{
  color:#6c0;
}

.css .classSelector{
  color:#06c;
}

.css .idSelector{
  color:#60c;
}

.java .keyword{
  color:#c06;
}

.java .literal{
  color:#c60;
}

.java .package,
.java .class{
  color:#6c0;
}

.java .method{
  color:#0c6;
}

.java .variable{
  color:#06c;
}

.java .constant{
  color:#60c;
}

/* header *********************************************************************/

#header{
  width:960px;
  height:80px;
  margin:24px auto 80px;
  position:relative;
}

#header div{
  position:absolute;
  font-size:0.75em;
  width:12px;
  height:16px;
  line-height:16px;
  color:#999;
  background-color:white;
}

h1{
  position:absolute;
  top:16px;
  right:50%;
  margin:0 0 0 -1000px;
  padding:0;
  z-index:2;
  font-size:2em;
  font-weight:normal;
}

h1 > span{
  display:block;
  position:relative;
  top:0;
  right:-50%;
  padding:0 16px;
  background-color:white;
  background-color:rgba(255,255,255,0.9);
  border-radius:24px;
}

* html h1{
  position:relative;
  right:0;
  margin:0;
  background-color:white;
}

/* content ********************************************************************/

#content{
  width:624px;
  margin:0 auto;
  padding-bottom:0.75em;
  text-align:left;
}

/* navigation *****************************************************************/

#navigation{
  position:absolute;
  top:120px;
  left:50%;
  z-index:100;
}

#navigation.fixed{
  position:fixed;
  top:16px;
}

/* sidebars *******************************************************************/

#leftSidebar,
#rightSidebar{
  position:absolute;
  top:64px;
  left:-480px;
  width:144px;
  text-align:left;
}

#rightSidebar{
  left:336px;
}

#leftSidebar ul,
#rightSidebar ul{
  margin:0;
  padding:0;
}

#leftSidebar li,
#rightSidebar li{
  margin:0 0 1.5em;
  padding:0;
  list-style-type:none;
}

/* navigation bar *************************************************************/

#navigationBar{
  background:url('/images/navigation-left/') no-repeat left;
  width:896px;
  margin:0 auto;
  position:absolute;
  top:0;
  left:-448px;
}

#navigationBar div{
  background:url('/images/navigation-right/') no-repeat right;
  padding:0 24px;
}

#navigationBar div div{
  background:url('/images/navigation-middle/') repeat-x;
  padding:0;
}

#navigationBar div div div{
  background:transparent;
  overflow:hidden;
  white-space:pre;
  height:48px;
  margin:0 -9px; /* prevents the home link from being cropped */
  padding:0 4px;
  line-height:48px;
  color:rgb(232,232,232);
  text-shadow:0 0 2px rgb(115,153,77);
}

#navigationBar a{
  text-decoration:none;
  color:white;
  outline:none;
}

#navigationBar a.currentSection{
  color:rgb(232,232,232);
}

#navigationBar a:focus{
  color:rgb(232,232,232);
  text-shadow:0 0 4px black;
}

#navigationBar a:hover{
  color:white;
  text-shadow:0 0 4px black;
}

#navigationBar span{
  background:url('/images/navigation-divider/') no-repeat center;
  padding:0 8px;
}

/* twitter button *************************************************************/

#twitterButton{
  background:url('/images/twitter/') no-repeat;
  position:absolute;
  top:0;
  left:440px;
}

#twitterButton a{
  display:block;
  width:32px;
  height:32px;
  margin:8px;
  text-decoration:none;
  outline:none;
}

/* expand/collapse button *****************************************************/

#collapseButtonContainer{
  background:url('/images/collapse-background/') no-repeat;
  position:absolute;
  top:0;
  left:-488px;
}

#collapseButton{
  width:32px;
  height:32px;
  margin:8px;
  cursor:pointer;
  text-align:center;
}

#collapseArrow{
  margin:8px 0;
}

/* footer *********************************************************************/

#footer{
  width:624px;
  margin:0 auto 1.5em;
  border-top:1px solid #9c6;
  text-align:left;
  clear:both;
}

#sharing{
  text-align:center;
  margin:-11px 0 0.75em;
}

#sharing > div{
  background:white;
  display:inline;
}

#plusOneButton{
  padding-left:18px;
}

#likeButton iframe{
  border:none;
  overflow:hidden;
  width:100px;
  height:20px;
}

/* wide screen styling ********************************************************/

/* waiting on widespread support for break-before and break-inside properties */

/*@media screen and (min-width:1608px){

  #content{
    width:1272px;
    column-count:2;
    column-gap:24px;
    -moz-column-count:2;
    -moz-column-gap:24px;
    -webkit-column-count:2;
    -webkit-column-gap:24px;
  }

  #leftSidebar,
  #rightSidebar{
    left:-804px;
  }

  #rightSidebar{
    left:660px;
  }

  #navigationBar{
    width:1544px;
    left:-772px;
  }

  #twitterButton{
    left:764px;
  }

  #collapseButtonContainer{
    left:-812px;
  }

  #footer{
    width:1272px;
    text-align:center;
  }

}*/

/* print styling **************************************************************/

@media print{

  #header div,
  #navigation,
  #footer{
    display:none;
  }

  #header,
  #content{
    width:auto;
    height:auto;
    margin:0;
  }

  h1{
    position:static;
    margin:0 0 0.75em;
  }

  h1 span{
    position:static !important;
    background:none !important;
    margin:0 !important;
    padding:0 !important;
  }

  .formattedTable th{
    text-shadow:none;
  }

}