/*
    Overrides and additions to the zen.css

    NB. All images etc. which are specific to this theme are located in
            url("/club/sites/fudokai.org.uk/themes/aikido_fixed/...")
        Images generic to the club web site are located in
            url("/club/sites/img/...")

*/

body {
  color: #666;
  margin:0;
  padding:0;
}

body, textarea {
    font-family: helvetica, arial, tahoma, sans-serif;
    font-size: 10pt;
}

h1 {
  clear:both;
  font-size: 180%;
  font-weight:bold;
}

h2 {
  clear:both;
  font-size: 160%;
  font-weight:bold;
}

h3 {
  clear:both;
  font-size: 140%;
  font-weight:bold;
}

h4 {
  clear:both;
  font-size: 120%;
  font-weight:bold;
}

hr {
  border: 0px;
  border-top: 1px solid #ccc;
  clear: both;
}

#main a {
  color: #666;
  text-decoration: none;
}

#main a:hover {
  color: #900;
}

#skip-to-nav a,
#skip-to-nav a:hover,
#skip-to-nav a:visited
{
  height: 1px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: -500px;
  width: 1px;
}

#skip-to-nav a:active,
#skip-to-nav a:focus
{
    position: static;
    width: auto;
    height: auto;
}

#header {
  background: #fff url("/club/sites/fudokai.org.uk/themes/aikido_fixed/img/banner.png") no-repeat scroll 0px 0px;
  height: 160px;
}

/*
    in order to make the banner clickable we overlay it with a transparent gif
    so use the float:none to prevent everything being pushed to the right
*/
#logo {
  float: none;
}

#main {
  border: 1px solid #aaa;
  border-top: 0px; border-bottom: 0px;
  color: #666;
  margin: 0px 80px;
  padding-bottom: 20px;
}

#sidebar-left {
  margin-left: 20px;
  width: 200px;
}

#content,
.no-sidebars #content {
  width: 800px;
  margin-left: 0;
  margin-right: -880px; /* Negative value of #content's width + left margin. */
}

.sidebar-left #content {
  margin-top: 2em;    /* same as height of #navbar */
  width: 480px;
  margin-left: 200px; /* The width of #sidebar-left. */
  margin-right: -920px; /* Negative value of #content's width + left margin. */
}

#sidebar-left h2 {
  font-size:120%;
  margin:0;padding:0;
  text-transform: lowercase;
}

#sidebar-left ul {
  margin-top: 0px;
}

/* hard-coded images */
.content>img,
.content>p>img {
  float: left;
  margin: 2px 4px 2px 0;
}

/* images added by img-assist */
.content .inline-left {
  float: left;
  margin: 2px 4px 2px 0;
}
.content .inline-center {
  float: none;
  margin: 2px auto 4px;
}
.content .inline-right {
  float: right;
  margin: 2px 0 2px 4px;
}

/* pages and stories listed on front page */
#content-area h2.title {
  margin-top: 1em;
  margin-bottom: .5em;
  padding-top: .25em;
  border-top: 4px solid #ccc;
}

.breadcrumb {
  font-size:80%;
}

.meta .submitted {
  font-size:80%;
}

#content-area a {
/*   color: #69c; */
  text-decoration: underline;
}

#navbar {
  height:2em;     /* see #content height */
}

#navbar-inner {
  background-color: #ccc;
  border-bottom: 1px solid #aaa;
  font-size: 85%;
}

#primary {
  margin-left:0px;
}
#primary li {
  border-right: 1px solid #aaa;
  padding: 0 1em;
}

#footer {
  background: #fff url("/club/sites/fudokai.org.uk/themes/aikido_fixed/img/hline.png") no-repeat scroll top center;
  font-size: 75%;
  padding: 0 80px;
}
/* position the 'Powered by Drupal button' */
#footer .content {
  text-align: center;
}

/* hide the default Image caption - it's just a mess */
span.caption {
  display: none;
}


/* don't show the caption for img_assist - it just messes up the display */
.inline span.caption { display: none; }

/*=====================================
        Text alignment overrides
  =====================================*/
.align-centre,
.align-center {
  text-align: center;
}

.align-left {
  text-align: left;
}

.align-right {
  text-align: right;
}

/*    just make some in-line <span> text a bit smaller  */
.aside,
.small {
    font-size: 80%;
}

/*=====================================
         #content-area Specials
  =====================================*/

#content-area sup, #content-area sub {
  font-size: 80%;
}

#content-area h1,
#content-area h2,
#content-area h3,
#content-area h4
{
  clear: none;
  font-style: normal;
  font-weight: bold;
  margin: .5em 0 0 0;
  padding: 0;
}

#content-area h1 {
  clear: both;
  font-size: 150%;
}

#content-area h2 {
  font-size: 120%;
}

#content-area h3 {
  font-size: 110%;
}

#content-area h4 {
  font-size: 100%;
}

#content-area li img {
/*   float: left; */
}

#content-area li {
  clear: both;
  margin: 1em 0;
}

#content-area dt {
  font-size: 125%;
  margin-top: 1em;
}

.buttons a,
#content-area .buttons a/*,
.view .buttons a*/
{
  padding: .25em .5em;
  border: 1px solid #999;
  text-decoration: none;
}

.buttons a:hover,
#content-area .buttons a:hover/*,
.view .buttons a:hover*/
{
  border: 1px solid #900;
}

/*=====================================
         In Memoriam
  =====================================*/
.in-memoriam {
  background: #ccc;
  border: 1px solid #999;
  color: #000;
  margin: 1em;
  padding:.5em;
  text-align:center;
}

.in-memoriam a,
.in-memoriam a:visited
{
  color: #666;
}

.in-memoriam a:hover {
  color: #000;
}


/*=====================================
      shoutbox - for announcements
  =====================================*/
div.shoutbox {
    border-bottom: 2px solid #999;
    border-left: 1px solid #ccc;
    border-right: 2px solid #999;
    border-top: 1px solid #ccc;
    margin: 1em 12%;
    padding: 1em;
}

.shoutbox {
    font-size: 120%;
    font-weight:bold;
}


#main {
  background: #fff url("/club/sites/fudokai.org.uk/themes/aikido_fixed/img/right.png") no-repeat scroll 710px 40px;
}

/*------------------------------------------------------------------------------------------
  These rounded classes are used to frame an area - esp. the bullet points on the home page
  Use as ...
  <div class="rounded-top"><span class="rounded-tr" /></div>
  <div class="rounded-body">
    <!-- the content of the framed area -->
  </div>
  <div class="rounded-bottom"><span class="rounded-br"></div>
  ------------------------------------------------------------------------------------------*/

div.rounded-top {
    height:5px;
    background:transparent url("/club/sites/fudokai.org.uk/themes/aikido_fixed/img/frame-tl.png") no-repeat scroll top left;
}
span.rounded-tr {
    height:5px;
    width:5px;
    float:right;
    background:transparent url("/club/sites/fudokai.org.uk/themes/aikido_fixed/img/frame-tr.png") no-repeat scroll;
}
div.rounded-body {
    border-left:1px solid #999;
    border-right:1px solid #999;
}
div.rounded-bottom {
    height:5px;
    background:transparent url("/club/sites/fudokai.org.uk/themes/aikido_fixed/img/frame-bl.png") no-repeat scroll top left;
}
span.rounded-br {
    width:5px; height:5px;
    float:right;
    background:transparent url("/club/sites/fudokai.org.uk/themes/aikido_fixed/img/frame-br.png") no-repeat scroll;
}

/*
  Looks like the only way to get image bullets with any sort of padding between the
  bullets and the text is to use background image in the <li>
*/
div.bullet-points
{
    width: 80%;
    margin: 2em auto 2em;
}
.bullet-points ul
{
    font-size: 160%;
    list-style: none;
    padding: .5em;
    margin:0;
}
#content-area .bullet-points li
{
  padding: .5em .5em .5em 1.5em;
  margin: 0 .5em;
  background: transparent url("/club/sites/fudokai.org.uk/themes/aikido_fixed/img/bullet-grey-16.png") no-repeat scroll center left;
}


/*=====================================
                Tables
  =====================================*/
#content table {
  border: 1px solid #999;
  clear: both;
  margin: .5em auto;
  width: auto;
}

#content table td,
#content table th
{
  padding: 0 .5em;
  vertical-align: top;
}

#content table th {
  text-align: center;
}

#content table thead th {
  background-color: #999;
  color: #fff;
}

#content table tr {
  border-bottom: 1px solid #ccc;
}

/*=====================================
    My Data entry form (uses tables)
  =====================================*/
#content form table {
  border: 1px solid #999;
}

#content form thead {
}

#content form tbody {
}

#content form tfoot {
}

#content form tbody td.prompt {
  padding-right: .5em;
  text-align:right;
}

#content form tfoot tr {
  background: #999;
  border: 0;
  text-align: center;
}

#content form tfoot tr td {
  color: #333;
  padding: 4px 0;
}

/*========== Drupal Forms ==============

<!-- this is an example of the sort of layout for a Drupal form -->
<form action="/club/?q=class-schedule"  accept-charset="UTF-8" method="post" id="fudokai-class-schedule-form">
<div>

  <p>Use this utility to manage a schedule of classes for the next <em>n</em> weeks.</p>
  <p class="warning">There is <strong>no</strong> existing class schedule, please generate one.</p>

  <div class="form-item" id="edit-days-wrapper">
    <label for="edit-days">Class days: </label>
    <select name="days[]" multiple="multiple"  class="form-select" id="edit-days" ><option value="1">Monday</option><option value="2">Tuesday</option><option value="3">Wednesday</option><option value="4">Thursday</option><option value="5">Friday</option><option value="6">Saturday</option><option value="0">Sunday</option></select>
    <div class="description">Select one or more days classes are held on.</div>
  </div>

  <div class="form-item" id="edit-weeks-wrapper">
    <label for="edit-weeks">Number of weeks: <span class="form-required" title="This field is required.">*</span></label>
    <input type="text" maxlength="2" name="weeks" id="edit-weeks" size="2" value="26" class="form-text required" />
    <div class="description">Enter the number of weeks classes to generate the schedule for</div>
  </div>

  <div class="form-item" id="edit-startdate-wrapper">
    <label for="edit-startdate">Starting from: </label>
    <div class="container-inline"><div class="form-item" id="edit-startdate-day-wrapper">
      <select name="startdate[day]" class="form-select" id="edit-startdate-day" ><!-- options --></select>
    </div>
    <div class="form-item" id="edit-startdate-month-wrapper">
      <select name="startdate[month]" class="form-select" id="edit-startdate-month" ><!-- options --></select>
    </div>
    <div class="form-item" id="edit-startdate-year-wrapper">
      <select name="startdate[year]" class="form-select" id="edit-startdate-year" ><!-- options --></select>
    </div>
    <div class="description">Select any date and a schedule will be generated starting from the Sunday beginning that week. Note that dates prior to today will NOT be generated.</div>
  </div>
  <input type="submit" name="op" id="generate" value="Generate"  title="Generate and replace any existing schedule" class="form-submit" />

  <!-- These are automatically generated by Drupal forms -->
  <input type="hidden" name="form_build_id" id="form-8cf0e637b5fcb7e13c0d6eac5cb3073d" value="form-8cf0e637b5fcb7e13c0d6eac5cb3073d"  />
  <input type="hidden" name="form_token" id="edit-fudokai-class-schedule-form-form-token" value="0c606c39a9d94898c94c9662e4206b91"  />
  <input type="hidden" name="form_id" id="edit-fudokai-class-schedule-form" value="fudokai_class_schedule_form"  />

</div>
</form>
*/

/*============ Blocks =================*/

.block div>.warning {
  margin: 0 1em 0 0;
}

/*============ Views ===================
View structure (within #content_area):-
    <div class="view view-VIEW_ID view-id-VIEW_ID view-display-id-page_1 view-dom-id-1">
    :   <div class="view-header">
    :   <div class="view-content">
    :   :   <div class="views-row views-row-1 views-row-odd views-row-first">
    :   :   :   <div class="views-field-title">
    :   :   :   <div class="views-field-body">
    :   :   :   :   <div class="field-content">
    :   :   :   <div class="views-field-nothing">
    :   :   <div class="views-row views-row-2 views-row-even">
    :   :   :
    :   :   <div class="views-row views-row-3 views-row-odd">
    :   :   :
    :   :   <div class="views-row views-row-4 views-row-even">
    :   :   :
    :   :   <div class="views-row views-row-5 views-row-odd views-row-last">
    :   :   :
*/


/*#content-area .view-header .buttons a {
  border: 1px solid #666;
  font-size: 120%;
  padding: .25em .5em;
  text-decoration: none;
}

#content-area .view-header .buttons a:hover {
  border: 1px solid #900;
}*/


.view .field-content span.caption {
  border: 1px solid #ccc;
  font-size: 80%;
  text-align:center;
}

.view .field-content table {
  margin: .5em auto;
  width: auto;
}


.view .view-footer {
  border-top: 1px solid #ccc;
  margin-top: 1em;
}

/* ---  The 'Read full article' link ---


#content-area .views-field-nothing span a {
  text-decoration: none;
  color: #666;
}

#content-area .views-field-nothing span a:hover {
  color: #900;
}

#content-area .views-field-nothing span {
  border: 1px solid #999;
  padding: 2px 4px;
}
*/

/*-------------------------------------
            View Row
  -------------------------------------*/

/* .view-content .views-row { */
.view .views-row {
  margin: 1em 0 2em;
  padding-bottom: 4px;
}

.view-content .views-row .views-field-title {
  margin-top: 1em;
}

.view-content .views-row .views-field-body {
}

.views-row .views-field-title  {
  background: url("/club/sites/club/img/view_title_bg.png") no-repeat;
  clear: both;
  color: #666;
  font-size: 150%;
  font-weight:bold;
/*   margin-top: 1em; */
  padding: .5em .5em ;
}

#content-area .views-row .views-field-title a {
  color: #666;
  text-decoration: none;
}

#content-area .views-row .views-field-title a:hover {
  color: #900;
  text-decoration: none;
}

.views-field-created,
.views-field-last-updated,
.views-field-last-comment-name,
.views-field-comment-count
{
  font-size: 80%;
}



.view-content .views-row .views-field-body {
  margin: 1em .5em;
  padding: 0;
}

.views-field-nothing {
  margin: .5em .5em 6px;
  padding: 0;
}

.view-content .views-row .views-field-body p {
  margin: .5em 0;
  padding: 0;
}


/*=====================================
               Debug
  =====================================*/
/* #page  { border: 1px solid #999; } */
/* #header { border: 1px solid #900; } */
/* #header-inner { border: 1px dashed #f00; } */
/* #logo-title { border: 1px solid #009; } */
/* #logo {border: 1px dashed #00f; } */
/* #main  { border: 1px solid #90; } */
/* #footer { border: 1px solid #900; } */
/* #content { border: 1px solid #090; } */
/* #content-area { border: 1px dashed #009 } */
/* #sidebar-left { border: 1px solid #009; } */
/* #sidebar-left-inner {border: 1px dashed #00c; } */
/* #navbar { border: 1px solid #060; } */
/* #navbar-inner { border: 1px dashed #060; } */
/* #navigation { border: 1px dotted #060; } */
/* #primary { border: 1px dashed #900; } */
/* #logo-title { border: 1px dashed #3c3; } */
/* #content-header { border: 1px solid #336; } */