/* ========================================================================== */
/* MAGIC CSS                                                                  */
/* All pages © MAGIC 2009                                                     */
/* Last updated : 15/10/2009                                                  */
/* ========================================================================== */
/*                                                                            */
/* = Building on standard styles ============================================ */
body
  {      font-family: arial;
          text-align: center;
               color: #000;
    background-color: #fff;
             padding: 0px;
            overflow: -moz-scrollbars-vertical; }

td { font-size: 11px;
        margin: 0px auto; }

a { font-size: 11px; }

p { font-size: 11px;
       margin: 5px 2px 5px 2px;
       text-align: left; }

/* = Top Banner Menu style ================================================= */
.banner_wrapper
  {        width: 800px;
      margin-top: 5px;
           width: 100%;
          height: 150px; }

.banner_area
  { background-color: #e1e9fe;
               width: 800px;
              height: 150px;
              margin: 0px auto;
             padding: 0px;
          text-align: left;
                font: bold 11px arial; }

.banner_logo_wrapper
  {       float: left;
        padding: 0px;
    margin-left: 3px;
     margin-top: 3px;
          width: 277px;
         height: 150px;
     text-align: center;
           font: bold 10px arial; }

a.banner_logo_wrapper_link
  {     margin: 0px;
    text-align: left;
       padding: 0px 0px 3px 3px;
          font: 11px arial; }

.banner_remainder_wrapper
  {  float: right;
     width: 515px;
    height: 150px; }

.banner_collage_wrapper
  {    background-image: url('image_album/banner-collage.jpg');
      background-repeat: no-repeat;
    background-position: center;
                  float: right;
                padding: 0px;
                 margin: 0px 3px 0px 0px;
                  width: 239px;
                 height: 150px;
                   font: bold 10px arial; }

.banner_details_wrapper
  {      float: left;
       padding: 0px;
    margin-top: 3px;
         width: 269px;
        height: 150px;
    text-align: center;
          font: bold 10px arial; }

.banner_details_menu
  {    padding: 0px;
        margin: 10px 0px 10px 0px;
         color: #000;
          font: bold 10px arial; }

.banner_details_menu select
         { font: bold 10px arial; }

.officeaddress
  {   font-size: 12pt;
    font-weight: bold; }

.emailaddress
  {       font-size: 12pt;
        font-weight: bold;
    text-decoration: none; }

#banner_menu ul
  {         display: inline;
    text-decoration: none; }

#banner_menu li
  {          display: inline;
               float: left;
    background-color: black;
               width: 75px;
              margin: 0px;
             padding: 0px 5px 0px 5px;
              border: 1px solid white;}


#banner_menu_left
  {          display: inline;
               float: left;
    background-color: black;
               width: 75px;
              margin: 0px;
             padding: 0px 5px 0px 5px;
           font-size: 9px;
               color: white;
     text-decoration: none; }

#banner_menu_right
  {          display: inline;
               float: right;
    background-color: black;
               width: 75px;
              margin: 0px;
             padding: 0px 5px 0px 5px;
           font-size: 9px;
               color: white;
     text-decoration: none; }

#banner_menu li a
  {       font-size: 9px;
              color: white;
    text-decoration: none; }

/* = Main Body styles ======================================================= */
.main_body
  {  width: 800px;
    margin: 0px auto; }

.left_body
  {            width: 115px;
               float: left;
    background-color: #e1e9fe; }

.main_text
  {            width: 560px;
               float: left;
                font: 11px arial;
          text-align: left;
         margin-left: 5px;
               clear: none;
    background-color: #e1e9fe; }

.right_body
  {            width: 115px;
               float: right;
    background-color: #e1e9fe; }

/* = Footer styles ========================================================== */
.footer_width
  {        width: 800px;
     margin-left: auto;
    margin-right: auto; }

address
  {    font-size: 7pt;
      text-align: right;
          margin: 10px 0px 10px 0px;
           float: right;}

address_footer
  {    font-size: 7pt;
           float: right;
    margin-right: 5px;}

/* = Main Body : Side Menu ================================================== */
#side_menu_left
  {          width: 100px;
           padding: 0px;
    vertical-align: text-top;
        text-align: left;
       margin-left: 5px;
              font: bold 11px arial; }

#side_menu_left a
  {           color: black;
            margin: 10px 0px 10px 5px;
    text-decoration: none; }

#side_menu_left a:hover
  { color: #93f; }

/* = Main Body : Side Menu Right ============================================ */
#side_menu_right
  {          width: 100px;
           padding: 0px;
    vertical-align: text-top;
        text-align: left;
       margin-left: 5px;
              font: bold 11px arial; }

#side_menu_right h1
  {            width: 100px;
          text-align: left;
           font-size: 11px;
         font-weight: bold;
               color: #000;
    background-color: #9ab0f0; }

#side_menu_right a
  {           color: black;
             margin: 10px 5px 10px 0px;
    text-decoration: none; }

#side_menu_right a:hover
  { color: #93f; }

/* = Box styles ============================================================= */
.info_header
  {            float: left;
             padding: 3px;
          text-align: left;
           font-size: 16px;
         font-weight: bold;
               color: #000;
    background-color: #9ab0f0;
    margin: 0px 5px 0px 5px; }

.info_border
  { border: 3px solid #9ab0f0;
    margin: 0px 5px 0px 5px; }

.info_header2
  {            float: left;
             padding: 3px;
          text-align: left;
           font-size: 16px;
         font-weight: bold;
               color: #000;
    background-color: #c288e0;
    margin: 0px 5px 0px 5px; }

.info_border2
  { border: 3px solid #c288e0;
    margin: 0px 5px 0px 5px; }

.info_header3
  {            float: left;
             padding: 3px;
          text-align: left;
           font-size: 16px;
         font-weight: bold;
               color: #fff;
    background-color: #f60;
    margin: 0px 5px 0px 5px; }

.info_border3
  { border: 3px solid #f60;
    margin: 0px 5px 0px 5px; }

/* = Main Menu style ======================================================== */
#main_menu
  {    background-image: url('image_album/magic_backgr_800_menu.jpg');
      background-repeat: repeat-y;
    background-position: center;
                  width: 800px;
                 height: 50px;
                 margin: 0px auto;
                padding: 0px;
                  float: left;
                   font: bold 12px arial; }

#main_menu li
  { display: inline; }

#main_menu li a
  {           float: left;
              color: black;
            padding: 5px 20px 0px 20px;
    text-decoration: none;
          font-size: 12px;
      border-bottom: 3px solid black; }
/*            padding: 5px 16px 0px 16px;*/


#main_menu li a:hover
  { border-bottom: 3px solid #67D63A;
            color: #9e3dff; }

/* = Main Menu style 2 ====================================================== */
#main_menu2
  { background-position: center;
                  float: left;
                padding: 0px;
                   font: bold 12px arial; }

#main_menu2 li
  { display: inline; }

#main_menu2 li a
  {           float: left;
              color: black;
            padding: 5px 20px 0px 20px;
    text-decoration: none;
          font-size: 12px;
      border-bottom: 3px solid black; }

#main_menu2 li a:hover
  { border-bottom: 3px solid #66cc33;
            color: #9933ff; }

/* = Main Text Styles ======================================================== */
#mbdate
  { text-align:center;
    list-style:none; }

#mbdate li
  {         display: inline;
              color: black;
            padding: 0px 25px 0px 0px;
    text-decoration: none; }

/* ========================================================================== */
/* = show_pic styles                                                        = */
/* ========================================================================== */
table.show_pic
  {  margin-left: auto;
    margin-right: auto; }

td.previous_tag
  { min-width:      50px;
    vertical-align: text-middle;}

td.image_width
  {      width: 640px;
    text-align: center; }

td.next_tag
  { min-width:      50px;
    vertical-align: text-middle;}

/* ========================================================================== */
/* = Other styles                                                           = */
/* ========================================================================== */
/* Permanently remove image borders */
img
  {   border-width: 0;
    vertical-align: middle; }

/* General float properties */
.float_left
  {  float : left;
    padding: 5px; }

.float_right
  { float : right;
    padding: 5px; }}

/* Customised MAGIC styles */
#ideas
  { width: 540px; margin: 0px 10px 0px 10px; }

.messages
  {  width: 510px;
    border: 2px solid black;
   padding: 5px; margin: 10px; }

#messages
  {  width: 510px;
    border: 2px solid black;
   padding: 5px; margin: 10px; }

.quotes
  {  width: 510px;
    border: 2px solid black;
   padding: 5px; margin: 10px;
   font-style: italic; }

.sponsortable
  { width: 480px; }

.sponsorspace
  { max-width: 150px;
   height: 100px; text-align: center; }

/* Table, formatting & general alignment styles */

hr
  { width: 300px; margin: 0px auto; }

      .top { vertical-align: top;  }
    .topbr { vertical-align: top; font-weight: bold; text-align: right; }
     .left { text-align: left; }
   .center { text-align: center; }
 .centered { align: center; }
    .title { font-weight: bold; }

/* Heading styles */
        h1 { font-size: 20pt;
             margin: 5px 0px 0px 0px; }
  .h1_size { font-size: 20pt; font-weight: bold; } /* H1 sized text but without the line breaks */

        h2 { font-size: 16pt;
             margin: 5px 0px 0px 0px; }
  .h2_size { font-size: 16pt; font-weight: bold;} /* H2 sized text but without the line breaks */

        h3 { font-size: 12pt;
             margin: 5px 0px 0px 0px; }
  .h3_size { font-size: 12pt; font-weight: bold; } /* H3 sized text but without the line breaks */

        h4 { font-size: 10pt;
             margin: 5px 0px 0px 0px; }
  .h4_size { font-size: 10pt; font-weight: bold; } /* H4 sized text but without the line breaks */

/* Colour styles */
   .red { color: #FF0000; }
 .green { color: #00FF00; }
  .blue { color: #0000FF; }
  .pink { color: #FF0099; }

/* Text styles */
 .bold { font-weight: bold; }

/* Global Link colours */
    a:link {color: #0000FF; font-family: arial; }
 a:visited {color: #0000FF; font-family: arial; }

/* Menu Link colours */
    a.top_menu:link {color: #000000; font-family: arial; }
 a.top_menu:visited {color: #000000; font-family: arial; }
    a.sub_menu:link {color: #000000; font-family: arial; }
 a.sub_menu:visited {color: #000000; font-family: arial; }

/* ========================================================================== */
/* Lightbox2 Styles                                                           */
/* ========================================================================== */
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(image_album/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(image_album/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }