/* reset */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body {line-height:1.5;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}

/* typography */
body {font-size:75%;color:#666;background:#fff;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;}
h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}

h1 {font-size:1.5em;line-height: 1; margin-bottom: 1.5em;}
h2 {font-size:1.5em;line-height: 1; margin-bottom: .5em;}
h3 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}
h4 {font-size:1.2em;line-height:1.25;}
h5 {font-size:1.2em;line-height:1.25;color:#666;}
h6 {font-size:1.2em;line-height:1.25;color:#666; font-style: oblique; }

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
p {margin:0 0 1.5em;}
p img {float:left;margin:1.5em 1.5em 1.5em 0;padding:0;}
p img.right {float:right;margin:1.5em 0 1.5em 1.5em;}
a:focus, a:hover {color:#000;}
a {color:#666;text-decoration:underline;}
blockquote {margin:1.5em;color:#666;font-style:italic;}
strong {font-weight:normal; color: #222;}
em, dfn {font-style:italic;}
dfn {font-weight:bold;}
sup, sub {line-height:0;}
abbr, acronym {border-bottom:1px dotted #666;}
address {margin:0 0 1.5em;font-style:italic;}
del {color:#666;}
pre, code {margin:1.5em 0;white-space:pre;}
pre, code, tt {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;}
li ul, li ol {margin:0 1.5em;}
ul, ol {margin:0 1.5em 1.5em 1.5em;}
ul {list-style-type:disc;}
ol {list-style-type:decimal;}
dl {margin:0 0 1.5em 0;}
dl dt {font-weight:bold;}
dd {margin-left:1.5em;}
table {margin-bottom:1.4em;width:100%;}
th {font-weight:bold;background:#C3D9FF;}
th, td {padding:4px 10px 4px 5px;}
tr.even td {background:#E5ECF9;}
tfoot {font-style:italic;}
caption {background:#eee;}
.small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
.large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
.hide {display:none;}
.quiet {color:#666;}
.loud {color:#000;}
.highlight {background:#ff0;}
.added {background:#060;color:#fff;}
.removed {background:#900;color:#fff;}
.first {margin-left:0;padding-left:0;}
.last {margin-right:0;padding-right:0;}
.top {margin-top:0;padding-top:0;}
.bottom {margin-bottom:0;padding-bottom:0;}

.container {
  width: 956px;
  margin: 0 auto;
  border: solid #ccc 16px;
  background: #fff url(/graphics/backgrounds/bar.png) repeat-y top 212px;
}

#header {
  border-bottom: solid #ccc 16px;
  padding-bottom: 0; 
  margin-bottom: 0;
  font-size: 0; 
}
  #header img {margin: 0; padding: 0; border: 0;}

#navigation {
  float:left;
  width: 212px;
  margin-right: 16px;
  border-right: solid #ccc 0px;
  margin-bottom: 2.5em;
}
  #navigation ul#primary {margin: 2.5em 32px 1em 32px; list-style-type: none;}
  #navigation ul#frome_friends {margin: 0em 32px 1em 32px; list-style-type: none;}
    #navigation ul#frome_friends li {color: #336699;}
    #navigation ul#frome_friends li.first {font-weight:bold;}
      #navigation ul#frome_friends li a {color: #336699;}
      #navigation ul#frome_friends li a:hover {color: #003366;}
    #navigation ul li {margin-bottom: .75em;}
      #navigation ul li.selected:before {color: #000; content:"> ";}
      #navigation ul#frome_friends li.selected:before {color: #003366; content:"> ";}
        #navigation ul li.selected a {color: #000;}
        #navigation ul#frome_friends li.selected a {color: #003366;}

      #navigation ul li a {text-decoration: none;}
  #navigation hr {width: 150px; border: none 0; border-top: 1px dashed #666; height: 1px; margin-top: 1.6em; margin-bottom: 1.25em; margin-left: 32px; margin-right: 32px; background: #fff; color: #666;}

#content {
  float:left;
  width: 728px;
  margin-top: 2.5em;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
}
  #content img.first {margin-top: 0;}

#wide_header {margin-top: -2.5em; margin-bottom: 1.5em;}

#text {
  float:left;
  margin-right: 16px;
  width: 316px;
  margin-left: 32px;
  margin-right: 16px;
  margin-bottom: 2.5em;
}

#wide_text {
  float:left;
  width: 664px;
  margin-left: 32px;
  margin-right: 0;
}
  #wide_text a {color: #336699; }
  #wide_text .date {color: #336699; display:block; font-weight: bold;}
  #wide_text .title {color: #222; display:block; font-weight: bold;}
  #wide_text .title a {color: #222; display:block; text-decoration: none; }
  #wide_text .title a:hover {color: #222; display:block; text-decoration: underline; }

#images {
  float:left;
  margin-right: 0;
  width: 316px;
  margin-left: 16px;
  margin-right: 32px;
  margin-bottom: 2.5em;
}
  #images img {float: right; margin-left:0; margin-right:0; margin-top:.0em; }
  #images img.first {float: right; margin-top:0; }

.newsletter {width: 257px; padding-top: .75em;}
  .newsletter .head {background-color: black; margin-bottom: 0;}
    .newsletter .head h3 {color: white; text-align: center; margin-bottom: 0; padding-top: .5em;}
    .newsletter .head p {color: #ccc; text-align: center; padding-bottom: .5em;}
  .newsletter .formwrapper {background-color: #999; margin-top: -1.5em; color: white; padding: 1em 1em .5em 1em;}
    .newsletter .formwrapper label {padding-top: .5em; }
      .newsletter .formwrapper .inputwrapper {width: 200px; text-align:right; float: right;}
      .newsletter .formwrapper input#submit {margin-left:189px; margin-top: .5em;}
  .newsletter .validation-advice {margin-left:15px; font-weight: bold; color: black;}

      form hr {display: none; visibility: hidden;}

.posting {}
.posting label {display: inline-block; width: 7em; margin-bottom: 1em; text-align:right;}
.posting textarea {width: 485px; height: 5em;}
.posting input[type=text] {width: 480px;}
      .posting input#submit {text-align:left; margin-left:91px; margin-top: .5em;  margin-bottom: 1.5em;}

.validation-advice {margin-left:91px; font-weight: bold; color: black;}

#bottom_banner {
  font-size: 0; 
  float:left;
  width: 728px;
  margin-top: 2.5em;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
}
  #bottom_banner img {margin:0;}

#footer {
  width: 956px;
  margin: 1em auto;
  height: 3em;
  font-size: .9em;
}
  .copyright {float: left; margin-right: 16px; width: 439px;}
  .credit {float: right; margin-right: 16px; text-align: right; width: 439px;}

/* Use this class on any div.span / container to see the grid. */
.showgrid { 
  background: url(/graphics/backgrounds/grid.png); 
}

/* Body margin for a sensile default look. */
body {
  margin:1.5em 0;	
}

hr {
  background: #ddd; 
  color: #ddd;
  clear: both; 
  float: none; 
  width: 100%; 
  height: .1em;
  margin: 0 0 1.45em;
  border: none; 
}
hr.space {
  background: #fff;
  color: #fff;
}

.clearfix:after, .container:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix, .container {display: inline-block;}
* html .clearfix,
* html .container {height: 1%;}
.clearfix, .container {display: block;}
.clear { clear:both; }