@import "reset.css";

/*------------------------------------------*/
/* johnfunnell.com CSS                      */
/*------------------------------------------*/
/* by Tim Huegdon of Nefarious Designs      */
/* http://www.nefariousdesigns.co.uk/       */
/*------------------------------------------*/
/* Stick yer beak in all you like, but keep */
/* yo' FILTHY hands off my code!            */
/*------------------------------------------*/

body
{
  font              : 80%/1.6em "Trebuchet MS", verdana, arial, sans-serif;
  color             : #666;
  background        : #fff;
}

a
{
  color             : #c66;
}
a:hover
{
  color             : #f00;
  background        : #ffc;
}
img
{
  line-height       : normal;
}
fieldset
{
  border            : 0 none;
}
label
{
  font              : 90%/1.0em tahoma, verdana, arial, sans-serif;
  color             : #999;
}
textarea
{
  width             : 90%;
}
/* Hack to beat IE */
html>body textarea
{
  width             : 100%;
}
input.text
{
  width             : 50%;
}
textarea,
input.text
{
  border            : 1px solid #ccc;
  font-family       : "Trebuchet MS", verdana, arial, sans-serif;
  font-size         : 100%;
  color             : #666;
  padding           : 2px;
  background        : #fff url(../i/back-textarea.gif) no-repeat 0 0;
}

.formError
{
  font-weight       : bold;
  color             : #f00;
}
.formSuccess
{
  font-weight       : bold;
  color             : #090;
}

/* This is causing something weird to happen with the contact
   form in IE. Haven't got time to work out what's going on. */
   
.container
{
  margin            : 1em;
  padding           : 0;
}

/* Uh-oh - I'm doing something naughty here. Can you spot it? */

.center
{
  text-align        : center;
}

.center table
{
  text-align        : left;
}
.center table,
.center caption
{
  margin            : 0 auto;
}
p.formError
{
  padding           : 0.5em 1em;
  background        : #ffe;
  border-top        : 1px solid #f00;
  border-bottom     : 1px solid #f00;
}
p.formSuccess
{
  padding           : 0.5em 1em;
  background        : #ffe;
  border-top        : 1px solid #090;
  border-bottom     : 1px solid #090;
}

#s-wrap1
{
  background        : url(../i/back-s-wrap1.gif) repeat-x top center;
  padding-top       : 20px;
  text-align        : center;
}
#s-head,
#s-nav1,
#s-wrap2,
#s-info
{
  width             : 56em;
  max-width         : 100%;
  margin            : 0 auto;
}
#s-head-logo1
{
  float             : left;
}
#s-head-logo2
{
  float             : right;
  margin-top        : 8px;
}
#s-brand
{
  clear             : both;
  background        : url(../i/back-s-brand.gif) repeat top center;
  text-align        : center;
}
#s-nav1
{
  background        : url(../i/back-blackstripe.gif) repeat-x bottom center;
  padding-bottom    : 4px;
}
#s-wrap2
{
  background        : url(../i/back-s-wrap2.gif) repeat-y 67% 0;
}
#s-cont1
{
  float             : left;
  display           : inline;
  width             : 66%;
}
#s-cont2
{
  float             : right;
  display           : inline;
  width             : 33%;
  color             : #999;
}
#s-info
{
  background        : url(../i/back-s-info.gif) no-repeat 10% 50%;
  font              : 100%/1.5em tahoma, verdana, arial, sans-serif;
  color             : #999;
}
#s-brand img
{
  display           : block;
  margin            : 0 auto;
  width             : 56em;
  max-width         : 100%;
}
#s-nav1 li
{
  float             : left;
}
#s-cont1 h1,
#s-cont1 h2,
#s-cont1 h3,
#s-cont2 h1,
#s-cont2 h2,
#s-cont2 h3
{
  font-family       : tahoma, verdana, arial, sans-serif;
  line-height       : 100%;
  color             : #999;
  margin-bottom     : .5em;
  font-weight       : normal;
}
#s-cont1 h2
{
  font-size         : 218%;
}
#s-cont2 h2
{
  font-size         : 164%;
}
#s-cont2 h3
{
  font-size         : 100%;
  font-weight       : bold;
  line-height       : 1.2em;
}
#s-cont1 p,
#s-cont1 img,
#s-cont1 table,
#s-cont1 caption,
#s-cont1 ol
{
  margin-top        : 0.5em;
  margin-bottom     : 0.5em;
}
#s-cont2 p,
#s-cont2 img,
#s-cont2 address
{
  margin            : 1em 0;
}
#s-cont2 img
{
  display           : block;
  margin-left       : auto;
  margin-right      : auto;
}
#s-nav1 li a
{
  display           : block;
  padding           : 0.7em 1em;
  color             : #999;
  text-decoration   : none;
}
#s-nav1 li a:hover
{
  color             : #333;
  text-decoration   : underline;
  background        : #f5f5f5;
}
#s-cont1 caption
{
  color             : #94ADBC;
  font-weight       : bold;
  font-size         : 118%;
  font-family       : tahoma, verdana, arial, sans-serif;
}
#s-cont1 table
{
  border-top        : 1px solid #94ADBC;
  border-left       : 1px solid #94ADBC;
}
#s-cont1 table th
{
  text-align        : center;
  background        : #C1D9EA url(../i/back-s-cont-th.gif) repeat-x top left;
  border-top        : 1px solid #fff;
  border-left       : 1px solid #fff;
  color             : #788F9E;
}
#s-cont1 table th,
#s-cont1 table td
{
  padding           : 0.5em 1em;
  border-bottom     : 1px solid #94ADBC;
  border-right      : 1px solid #94ADBC;
}
#s-cont1 ol
{
  border            : 1px solid #94ADBC;
  width             : 95%;
  margin-left       : 5%;
}
#s-cont1 ol li
{
  list-style-type   : decimal;
  padding-left      : 0.8em;
}
#s-brand .brand-border
{
  height            : 6px;
  font-size         : 0;
  background        : url(../i/back-greystripe.gif) repeat top center;
}
#s-info .brand-border
{
  height            : 4px;
  font-size         : 0;
  background        : url(../i/back-blackstripe.gif) repeat top center;
}
#s-info .primary,
#s-info .secondary
{
  display           : inline;
  font-size         : 90%;
  margin            : 1em 1.4em;
}
#s-info .primary
{
  float             : left;
  text-align        : left;
}
#s-info .secondary
{
  float             : right;
  text-align        : right;
}
#s-cont1 img.type-1
{
  width             : 100%;
}
#s-cont1 p.posted
{
  font-size         : 85%;
  margin-top        : -0.5em;
  color             : #999;
}
#s-cont1 table .alt,
#s-cont1 ol li.alt
{
  background-color  : #f5f5ff;
}
#s-cont2 img.type-1
{
  margin-top        : -0.5em;
}
#s-cont1 ol li .title
{
  font-weight       : bold;
  margin-bottom     : 0;
}
#s-cont1 ol li .artist
{
  margin-top        : 0;
}
#p-index #s-cont2 ul li
{
  float             : left;
  display           : inline;
  width             : 50%;
  text-align        : center;
  line-height       : normal;
}
#p-index #s-cont2 ul li a img
{
  display           : block;
  margin            : 7% auto;
  border            : 2px solid #000;
  width             : 85%;
}
#p-index #s-cont2 ul li a:hover img
{
  border            : 2px solid #ffc;
}