/* SCREEN.CSS
   This is where all styles for on-screen media are declaired
   
   FILE INFO
   Revision number:  0.8
   Last updated:     18/05/2006
   Last updated by:  Matt Wilcox ( mail@matthewwilcox.com )

------------------------------------------------------------------------------------------------------ */

/* =global_reset */
   *                                             { margin: 0; padding: 0; }
   ul, dl, ol                                    { list-style-position: inside; }
   ul ul, ul ol, ul dir, ul menu, ul dl,
   ol ul, ol ol, ol dir, ol menu, ol dl,
   dir ul, dir ol, dir dir, dir menu, 
   dir dl, menu ul, menu ol, menu dir,
   menu menu, menu dl, dl ul, dl ol,
   dl dir, dl menu, dl dl                        { margin-top: 0; margin-bottom: 0; }
   p, ul, ol, dl, dd, blockquote, form, object   { margin-bottom: 1em; }

/* =html =body */
   html { 
     font: 100%/140% Georgia, "Times New Roman", serif; color: #444; background: #f5f5f5 url(images/html.jpg) no-repeat 0 0; }
   body {
     width : 100%;
     background : url(images/siteinfo.gif) 0 100% no-repeat; }

/* =hx */
   h1, h2, h3, h4, h5, h6 {
     margin-bottom : .3em;
     line-height : 1.3em; color : #848484; }

/* =h1 */
   h1 {
     position : absolute; left : -999em;
     overflow : hidden; }

/* =h2 */
   h2 {
     font-size : 1.6em; font-weight : normal; }
   
   #siteinfo h2 {
     margin-bottom : 0;
     color : #aaa; }
     
   #form_contact h2 {
    font-size : 1.4em; font-weight : normal; }
    
   .home #content_main h2 {
     position : absolute; left : 0px;
     width : 253px; height : 57px; margin-top : -63px; 
     text-indent : -999em; overflow : hidden; background : url(images/home_content-main_h2.png) no-repeat 0 0; }
   .home #content_supp h2 {
     width : 180px; height : 111px; 
     background : url(images/home_content-supp_h2.gif) no-repeat 0 0; text-indent : -999em; overflow : hidden; }
   .home h2#recent_comments {
     background : url(images/home_content-supp_h2-2.gif) no-repeat 0 0; }
     
   .entry #content_supp h2 {
     width : 180px; height : 111px;
     text-indent : -999em; overflow : hidden; background : url(images/entry_content-supp_h2.gif) no-repeat 0 0; }
   .entry #content_supp h2#archives {
     background-image : url(images/entry_content-supp_h2-archive.gif); }
     
   .accessibility #content_supp h2 {
     width : 180px; height : 111px;
     text-indent : -999em; overflow : hidden; background : url(images/accessibility_content-supp_h2.gif) no-repeat 0 0; }
     
   .about #content_supp h2 { 
     width : 180px; height : 111px;
     text-indent : -999em; overflow : hidden; background : url(images/about_content-supp_h2.gif) no-repeat 0 0; }

/* =h3 */
   h3 {
     font-size : 1.4em; font-weight : normal; }
     
   .home #content_supp h3 {
     width : 100%; }
   
   .entry h3.post_information,
   #footnotes h3 {
     clear : both;
     margin-top : 1em; padding-top : 1em; border-top : 1px dotted #bbb; }
     
/* =h4 */
   #content_supp h4 {
     clear : left; }
   h4.photo,
   h4.video,
   h4.audio {
     display : block; width : 180px; height : 40px;
     text-indent : -999em; overflow : hidden; background : url(images/h4_photo.gif) 0 0 no-repeat; }
   h4.video {
     background-image : url(images/h4_video.gif); }
   h4.audio {
     background-image : url(images/h4_audio.gif); }
     
   #form_comment h4,
   #form_contact h4 {
     position : absolute; left : -999em;
     overflow : hidden; }
     
   .home h4 {
     position : absolute; left : -999em;
     overflow : hidden; }
   /* .home h4.information {
     position : relative; left : 0;
     font-size : 1em; font-weight : bold; } */

/* =p */
   p.accessibility { display : none; }
   #site-notice {
     position : fixed; top : 0;
     display : block; width : 100%; padding : .25em 0 .85em 0;
     text-align : center; z-index : 2; background : url(images/p_accessibility.png) repeat-x 100% 100%; }
     
   form p {
     width : 450px;
     font-size : .75em; color : #848484; }
     
   p.notice {
     top : 0;
     overflow : hidden; }
     
   #content_supp p.meta {
     font-size : .9em; }
     
   blockquote p.author {
     margin-left : -25px;
     text-indent : 25px; background : url(images/tilde.gif) no-repeat 0 .5em; }
     
   ol.comment li > p {
     margin-top : .5em;
     color : #444; }

/* =em =strong =del =ins =abbr =acronym =code */
   em          { font-style : normal; border-bottom : 1px solid; }
   strong      { font-weight : bold; background : #f7f766; }
   del         { text-decoration : line-through; }
   ins         { text-decoration : none; color : #009; font-family : Georgia; }
   del[title],
   ins[title]  { cursor : help; }
   acronym,
   abbr        { text-decoration : none; border-bottom : none; font-style : italic; cursor : help; }
   code        { font : 87.5% dialogue, 'Courier New', courier, serif; color : #000; }
   form code   { color : #646464; }
   
/* =blockquote */
   blockquote {
     padding : 2px 0 0 25px;
     overflow : visible; background : url(images/quote_open.gif) no-repeat 0 0; }
     
   .about li blockquote {
     margin : 1em 0 0 1em; }

/* =a */
   a:link    { background : #eee; color : #ff0095; text-decoration : none; }
   a:visited { background : #eee; color : #ff0095; text-decoration : none; }
   a:hover   { background : #ff0095 url(images/a.gif) 50% 50%; color : #fff; }
   a:focus   { background-color : #ff0095; color : #fff; }
   a:active  { background-image : none; outline : none; }
   
   p.notice a:focus {
     position : absolute; left : 1em;
     margin-top : 2em }
   p.notice:hover a:focus {
     position : relative; left : 0;
     margin-top : 0;  }

   #nav_main h2 a {
     position : absolute; top : 10px; left : 28px;
     display : block; width : 355px; height : 78px;
     text-indent : -999em; overflow : hidden; background : url(images/nav-main_h2_a.jpg) 0 0 no-repeat; }
   #nav_main h2 a:hover { 
     background-position : 0 -78px; }
     
   #nav_main li a {
     position : absolute; top : 10px;
     display : block; height : 30px;
     text-indent : -999em; overflow : hidden; }
   #home a {
     left : 24px;
     width : 76px;
     background : none; }
   #about a {
     left : 98px;
     width : 74px;
     background : none; }
   #archive a {
     left : 170px;
     width : 84px;
     background : none; }
   #preferences a {
     left : 596px;
     width : 118px;
     background : none; }
   
   #home a:hover,
   #home a:focus {
     background : url(images/nav-main.jpg) no-repeat -24px -65px; }
   #about a:hover,
   #about a:focus {
     background : url(images/nav-main.jpg) no-repeat -98px -65px; }
   #archive a:hover,
   #archive a:focus {
     background : url(images/nav-main.jpg) no-repeat -170px -65px; }
   #preferences a:hover,
   #preferences a:focus {
     background : url(images/nav-main.jpg) no-repeat -596px -65px; }
   
   #home a:active {
     background : url(images/nav-main.jpg) no-repeat -24px -120px; }
   #about a:active {
     background : url(images/nav-main.jpg) no-repeat -98px -120px; }
   #archive a:active {
     background : url(images/nav-main.jpg) no-repeat -170px -120px; }
   #preferences a:active {
     background : url(images/nav-main.jpg) no-repeat -596px -120px; }
   
   .home #content_supp h3 a {
     display : block; padding-left : 6px; }
   .home .post p a {
     margin-left : .3em; }
   
   .entry .comments a { 
     position : relative; left : 7.5em; top : -3em; }
   .entry .comments ol a {
     left : auto; top : auto; }
   
   .entry #content_main div.post > a { 
     display : block; margin : 0 0 1em 0; padding : 0;
     line-height : 0; }
   
   #siteinfo a {
     color : #ee99aa; }
   #siteinfo:hover a {
     color : #ff0095; }
   #siteinfo:hover a:hover,
   #siteinfo:hover a:focus {
     color : #fff; }
   
   ul.photo a {
     float : left;
     margin : 0 10px 10px 0; padding : 0; }
   ul.photo a:focus {
     outline : 0; }
   ul.photo a:after {
     content: url(images/thumbnail_mask.png); display: block; width: 75px; height: 75px; margin-top: -75px; }
   ul.photo a:hover:after,
   ul.photo a:focus:after {
     content: url(images/thumbnail_mask-2.png); }

/* =hr */
   hr { display: none; }

/* =ul */
   #nav_main ul { 
     position : absolute; left : 26px; top : 87px; list-style-position : inside;
     width : 730px; height : 55px;
     list-style-type : none; background : url(images/nav-main.jpg) no-repeat 0 0; }
     
   ul.photo { 
     margin : 0; padding : 0;
     list-style-type : none; list-style-position : outside; }
   ul.audio,
   ul.photo,
   ul.video { 
     margin-bottom : 2em;
     overflow : hidden; }
   
   #footnotes ul { margin-bottom : 1em; }

/* =ol */
    ol {
      margin-left : 30px; list-style-position : outside;
      counter-reset: item 0; }
      
    ol.code {
      margin-bottom : 2em;
      font : 12px/16px dialogue, monospace, 'Courier New', courier, serif; }
      
    .entry .comments ol {
      clear : both;
      margin : -1em 0 1em 0;
      color : #848484; }
    
/* =dl */
   #content_main dl { 
     margin-bottom : 1em; }
     
   #content_supp ul dl {
     margin-left : 15px;
     font-size : .9em; }
     
   .accessibility #content_main dl {
     border-left : 6px dotted #aaa; padding-left : 1em; }

/* =dt */
   #content_supp ul dt {
     float : left;
     margin : 0 .5em 0 0;
     font-weight : normal; }
     
   .home #content_supp dt {
     padding-top : 1em; border-top : 1px dotted #ccc; }
   .home .post dt,
   .entry .post_information dt {
     float : left;
     margin : 0; width : 7em;
     font-weight : normal; }
   .entry dt,
   .accessibility dt {
     font-weight : bold; color : #848484; }
     
/* =dd */
   #content_supp ul dd { 
     margin : 0;
     font-weight : normal; }
     
   .home .post dd,
   .entry .post_information dd {
     margin-bottom : 0; }
     
   .entry #content_main dd {
     margin : .5em 0 0 1em; }
   .entry #content_main .post_information dd {
     margin : 0; }

/* =li */
   ol.comment > li {
     display: block; }
   ol.comment > li:before {
     content: counters(item, "."); counter-increment: item 1;
     margin-right : .25em;
     font-size : 1.9em; }
   ol.comment.reverse > li:before {
     counter-increment : item -1; }
   ol.comment li {
     margin-bottom : 3em; }
     
   #footnotes > ol > li {
     margin-bottom : 2em; }
   ol.comment li p,
   #footnotes ol > li > * {
     padding-left : 1.5em;
     font-weight : normal; }
   #footnotes ol > li > *:first-child {
     margin-top : -1.5em; }
     
   .home .post dd li,
   .post_information dd li {
     display : inline;
     margin-right : .5em; }
     
   .entry #content_supp li {
     margin-bottom : 1em; }
     
   ul.photo li       {
     display : inline;
     padding : 0; margin-bottom : 0;
     line-height : 0; }
   
   li.comment_by_matt {
      }
   li.comment_by_matt:before {
     color : #ff0095; font-style : italic; }
   
   ol.code li {
     white-space : pre; border-top : 1px solid #f5f5f5; padding : 3px 0 3px 0;
     background-color : #fff; }

/* =table */
   table {
     border-collapse: collapse; }

/* =caption */

/* =thead */

/* =tfoot */

/* =tbody */

/* =th */

/* =tr */

/* =td */

/* =img */
   a img,
   :link img,
   :visited img { 
     margin : 0; border: none; padding : 0; }
     
   .entry #content_main div.post > img {
     display : block; max-width: 100%;
     margin-bottom : 1em; border: 2px solid #fff; padding : 8px;
     background-color : #eee; }
   .entry #content_main div.post > a img {
     padding : 8px; border: 2px solid #fff;
     background-color : #eee; }
   .entry #content_main div.post a:hover img,
   .entry #content_main div.post a:focus img {
     padding : 8px; border: 2px solid #fff;
     background : #ff0095 url(images/a.gif) 50% 50%; }
   
/* =form */
   #form_comment,
   #form_contact {
     position : relative;
     width : 640px; min-height : 386px; padding : 16px 20px 20px 40px;
     background : url(images/form-comment.jpg) no-repeat 0 100%; }

/* =fieldset */
   fieldset { 
     margin : 0 0 1em 0; border-width : 0; padding : 0; }

/* =legend */
   legend { 
     margin : 0; padding : 0;
     color : inherit; }

/* =label */
   label {
     display : block; margin-bottom : .3em; }
   #form_comment label,
   #form_contact label {
     color : #fff; }
   
/* =input */
   input {
     width : 360px; padding : .1em;
     font : 100% Georgia, "Times New Roman", serif; }
   input:focus,
   textarea:focus {
     border : 2px solid #ffb;
     background-color : #ffb; }
     
   .checkbox input,
   input.submit {
     width : auto; }
     
   #form_comment div input,
   #form_contact div input {
     position : absolute; right : 47px; bottom : 39px;
     display : block; width : 141px; height : 56px; margin : 0; border : 0; padding : 56px 0 0 0; overflow : hidden; background : transparent; cursor : pointer; }
   #form_comment div input:hover,
   #form_comment div input:focus,
   #form_contact div input:hover,
   #form_contact div input:focus {
     background : url(images/form-coment_submit.jpg) no-repeat 0 0; }

/* =textarea */
   .entry textarea,
   .about textarea  { 
     width : 440px; height : 8em; margin-bottom : .3em; padding : .1em;
     font : 100% Georgia, "Times New Roman", serif; }

/* =span */
   label span {
     float : left;
     display : block; width : 5em; }
   label.checkbox span {
     float : none;
     display : inline;
     width : auto; }
     
/* =div */
   #wrapper {
     width : 920px; padding : 147px 20px 0 40px; overflow : hidden; }
     
   #content_main {
     float : left;
     width : 700px; }

   #content_supp {
     float : right;
     width : 180px; }
     
   .home #content_main {
     width : 700px; }
   .home #content_supp {
     margin-top : -361px; }
   .home #page_context {
     width : 244px; height : 204px; padding : 38px 35px 0 421px; margin-bottom : 69px;
     font-size : .95em; color : #fff; background : #ccc url(images/intro-bg.jpg) 0 0; }
   .home .post         { 
     margin-bottom : 3em; }
     
   .entry .post {
     margin-bottom : 1em; border-bottom : 1px dotted #bbb; padding-bottom : 1em; }
     
   #siteinfo { 
     clear : both;
     min-height : 69px; padding-top : 80px;
     font-size : .8em; color : #aaa; }
   #siteinfo:hover,
   #siteinfo:hover h2 {
     color : inherit; }

.float-left {
  float : left; margin-right : 1em; }
.float-right {
  float : right; margin-left : 1em; }

body.archive #content_main h2 {
  margin: 2em 0 1em -40px; padding-left: 40px;
  color: #fff; background-color: #848484;
}
body.archive #content_main ul {
  margin-left: 1em;
}
body.archive #content_main .year h3 {
  margin-bottom: 1em;
}
body.archive #content_main .year h4,
body.archive #content_main .year ul {
  margin-left: 40px;
}

.entry #content_main .post_information dt {
   }
.entry #content_main .post_information dd {
  margin: 0 0 .5em 7em; }