/*******************************************************************************
 * File Name: global_styles.css
 * Last Modified: August 13, 2010
 * Purpose:
 *   This file contains the formatting and positioning styles common to all
 *   pages on the Allendale Electronics web site.    
*******************************************************************************/

/*------------------------------------------------------------------------------
 * General Formatting and Layout
 * Notes:
 *   Most font related styles appear in this section.  
 *----------------------------------------------------------------------------*/


/* Generally Text Formatting Related */
body {
 background-image: url("design_images/background_color.jpg");
 margin: 0px; padding: 0px;
 min-width: 800px; height: 100%;
}

body, p, a {
 font-family: Arial, Verdana, sans-serif;
 font-size: 14px;
 font-weight: normal;
 text-decoration: none;
 color: rgb(60, 60, 30);
}
 a:link, a:active, a:visited { color: rgb(0, 120, 0); }
 a:hover, a:focus { color: rgb(0, 120, 0); text-decoration: underline; }
 a img { border: none; }
 
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
h6 { font-size: 17px; color: rgb(0, 60, 0); margin: 10px 0px 5px; padding: 0px; border-bottom: 1px solid rgb(0, 60, 0); }
h5 { font-size: 15px; color: rgb(0, 60, 0); margin: 10px 0px 5px; padding: 0px; border-bottom: 1px solid rgb(0, 60, 0); }
h4 { font-size: 19px; color: black; }
h3 { font-size: 21px; color: black; }
h2 { font-size: 23px; color: black; }
h1 { font-size: 25px; color: black; }

div#top_bar_content, div#footer, div#footer a, span.small_black {
 font-size: 11px; color: rgb(0, 0, 0);
}
 div#top_bar_content a { font-size: 11px; }
 span.small_black a:link, span.small_black a:active, span.small_black a:visited { font-size: 11px; color: rgb(0, 120, 0); }
 span.small_black span.small_black a:hover, span.small_black a:focus { font-size: 11px; text-decoration: underline; }
 
span#top_bar_date { position: absolute; right: 0px; padding: 0px 0px 0px 0px; }
span#top_bar_location { position: absolute; left: 0px; padding: 0px 8px 0px;}
span.news_date { font-size: 12px; font-style: italic; color: rgb(0, 20, 0); margin: 10px 0px 5px; padding: 0px; }

span.footer_text { padding: 0px 8px 0px; }
span#footer_links { position: absolute; right: 0px; }
p.justified { text-align: justify; text-indent: 15px; }
p.center_noindent { text-align: center; text-indent: 0px; }


/* */
.centered { margin: 0px auto 0px; }

/*------------------------------------------------------------------------------
 * Specific Divisions, Images, etc.
 *----------------------------------------------------------------------------*/

/* ----------------------------------------
 * Elements in the HEADER Area
 * --------------------------------------*/ 
div#header_area {
 background-image: url("design_images/top_background.jpg");
 background-repeat: repeat-x;
 position: relative;
 top: 0px; left: 0px;
 width: 100%; height: 210px;
 min-width: 964px;
}
  div#header_wrapper {
   background-color: transparent;
   position: relative;
   top: 0px; left: 0px;
   width: 964px; height: 210px;
  }
  
    /* Top Bar Styles */
    div#top_bar_wrapper { height: 20px; }
    div.bar_end { position: relative; float: left; width: 3px; height: 20px; }
    div#top_bar_lend { background-image: url("design_images/top_bar_lend.jpg"); }
    div#top_bar_rend { background-image: url("design_images/top_bar_rend.jpg"); }
    div#top_bar_content {
     background: url("design_images/top_bar_bg.jpg") repeat-x;
     position: relative; float: left;
     width: 958px; height: 20px;
     line-height: 25px;
    }      

    /* Banner Styles */
    div#banner_img {
     display: block;
     background-image: url("design_images/ae_banner3.jpg");
     width: 964px; height: 155px;
    }
    object#banner_swf {
      display: block;
      position: relative; left: 2px;
      width: 964px; height: 155px;
      margin: 0px; padding: 0px;
    }
    
    /* Navigation Styles */
    div#navigation_wrapper {
     background-image: url("design_images/nav_bg.jpg");
     background-repeat: repeat-x;
     width: 960px; height: 25px; max-height: 25px;
     padding: 0px;
    }
    div#navigation_links { height: 25px; max-height: 25px; padding: 0px;}
    a.nav {
     display: block; float: left;
     width: 137px; height: 25px;
     margin: 0px; padding: 0px;
     font-size: 0px;
     line-height: 0px;
    }
    div#navigation_links a:link, div#navigation_links a:visited { background-position: 0px 0px; }
    div#navigation_links a.active, div#navigation_links a:hover, div#navigation_links a:focus { background-position: 0px 25px; }                                                                                                            
    a#home { background-image: url("design_images/buttons/navigation_sprites/nav_home.jpg"); }                
    a#aboutus { background-image: url("design_images/buttons/navigation_sprites/nav_aboutus.jpg"); }              
    a#news { background-image: url("design_images/buttons/navigation_sprites/nav_news.jpg"); }                    
    a#services { background-image: url("design_images/buttons/navigation_sprites/nav_services.jpg"); }            
    a#quality { background-image: url("design_images/buttons/navigation_sprites/nav_quality.jpg"); }              
    a#testimonials { background-image: url("design_images/buttons/navigation_sprites/nav_testimonials.jpg"); }
    a#contactus { background-image: url("design_images/buttons/navigation_sprites/nav_contactus.jpg"); }
    
    div#nav_bottom {
     background-image: url("design_images/nav_bottom_bg.jpg");
     position: relative; left: -2px; top: 0px;
     width: 964px; height: 10px;
    }
    
/* ----------------------------------------
 * End of Elements in the HEADER Area
 * --------------------------------------*/

/* ----------------------------------------
* Elements in the CONTENT Area
* Notes:
*     The 'content_wrapper', 'left_division', and 'right_division' are all set 
*   to float to the left.
*     The 'left_division' and 'right_division' must float so that they sit side
*   by side instead of one beneath the other - two columns as opposed to two
*   rows.
*     The 'content_wrapper' must also float so that it extends down the page
*   in union with the 'left_division' and 'right_division'.
*     Making these elements float removes them from the normal flow of the
*   document.  As a result of this, the 'content_bottom' appears below the 
*   navigation bar, instead of below the 'content_wrapper'.  To remedy this, 
*   the 'content_bottom' is set to 'clear:both' so that it can be next to no
*   floating elements.  This causes it to appear where it should, and restores
*   the natural flow of the document for any following elements. 
* --------------------------------------*/
div#long_wrapper {
 background-color: transparent;
 position: relative; top: 0px; left: 0px;
 width: 968px; max-width: 968px;
}
div#content_wrapper {
 float: left;
 background-image: url("design_images/content_bg.jpg");
 background-repeat: repeat-y;
 position: relative; top: 0px; left: 0px;
 width: 968px; min-width: 968px;
}

  /* Left Division */
  div#left_division {
   float: left;
   position: relative; top: 0px; left: 0px;
   width: 164px; max-width: 168px; min-height: 300px;
   padding-left: 4px;
   overflow: hidden;
  }
    div#left_division div#page_image {
     background-color: rgb(255, 255, 255);
     width: 158px; height: 140px;
     margin-bottom: 10px;
    }
    div#page_image img { width: 160px; height: 140px; margin: 0px; padding: 0px; border: 1px solid rgb(90,90,90); }
    
    div#left_division div#buttons { position: relative; width: 162px; margin: 0px; padding: 0px; }
    div#buttons a:link, div#buttons a:link { background-position: 0px 0px; }
    div#buttons a:hover, div#buttons a:focus, div#buttons a:active { background-position: 0px 20px; }
      
    div#buttons a.button { display: block; width: 162px; height: 20px; margin-top: 2px; }
    div#buttons a#feedback { background-image: url("design_images/buttons/side_feedback.jpg"); }
    div#buttons a#quote { background-image: url("design_images/buttons/side_quote.jpg"); }
    div#buttons a#brochure { background-image: url("design_images/buttons/side_brochure.jpg"); }
    
    div#left_division div.links { width: 160px; margin: 20px auto 10px; }
    div.links img.social { border: none; margin-top: 3px; height: 27px; width: 158px; }
      
  /* Right Division */  
  div#right_division {
   float: left;
   position: relative; top: 0px; left: 0px;
   width: 600px; max-width: 700px;
   margin: 0px 0px 30px 90px;
   overflow: hidden;  
  }
    div#right_division div.text_box { width: 600px; margin: 30px 0px 20px; line-height: 18px; }
    div#right_division img { border: 1px solid rgb(165, 155, 130); }
    div#right_division img.sm162x122 { width: 162px; height: 122px; }
    div#right_division img.float_right { float: right; margin: 10px 0px 15px 10px; }
    div#right_division img.right_med { float: right; margin: 10px 0px 15px 10px; max-width: 250px; max-height: 160px; }
    div#right_division img.float_left { float: left; margin: 10px 15px 10px 0px; }
    div#right_division div.image_row { text-align: center;  }
    div#right_division object.video_wmv { width: 480px; height: 320px; border: 2px solid black; }

    /* ========================================================================== */
    /* Page Specific Styles */
    /* ========================================================================== */
    /* Styles created for specific pages, but     */
    /* which may be used elsewhere on the site    */
    /* ========================================================================== */
    div#right_division div.news_box {
      background-image: url("design_images/page_specific/index/reader_bg.jpg");
      background-repeat: repeat-y; 
      width: 597px;  
      margin: 30px 0px 5px; padding: 0px;
      line-height: 18px; 
    }
      div#right_division div.news_box div#top_end {
        background-image: url("design_images/page_specific/index/top_end.jpg");
        width: 597px; height: 19px;
      }
      div#right_division div.news_box div#bottom_end {
        background-image: url("design_images/page_specific/index/bottom_end.jpg");
        width: 597px; height: 20px;
      }
      div#right_division div.news_box div#content { width: 578px; min-height: 150px; margin: 0px auto 0px; }      

    /* News Reader Table */
    div#right_division table#news_reader {
    
    }
    div#right_division table#news_reader th, div#right_division table#news_reader td { 
      font-size: 11px; text-align: left;
      border: 1px solid rgb(0, 0, 0);
    }

    div#right_division table#news_reader th { background-color: rgb(0, 0, 0); color: rgb(255, 255, 255) }
    div#right_division table#news_reader td { background-color: rgb(225, 225, 225); }
    div#right_division table#news_reader a { font-size: 11px; }
    th.size_110 { width: 110px; }    
    th.size_70 { width: 70px; }
    
    /* Testimonials Table */
    div#right_division table#testimonials {
      display: block;
      background-color: transparent;
      width: 598px; margin: 0px; padding: 0px;
      border-collapse: collapse;
    }
    div#right_division table#testimonials tr {
      display: block;
      width: 580px; min-height: 100px; padding: 5px; margin: 25px 0px 25px;
    }
    div#right_division table#testimonials td { padding: 10px; }

    /* ========================================================================== */
    /* End Page Specific Styles */
    /* ========================================================================== */


div#content_bottom {
 clear: both;
 background-image: url("design_images/content_bottom.jpg");
 width: 968px; height: 10px;
}
div#footer {
 background-image: url("design_images/footer_bg.jpg");
 width: 968px; height: 25px;
}

/* Bottom Area */
div#bottom_area {
 width: 968px; max-width: 968px;
 margin-top: 30px;
 overflow: hidden;
 text-align: center;
}
  div#bottom_area img {
   height: 50px; min-width: 100px; max-width: 400px;
   margin: 0px 10px 0px 10px;
   border: 1px solid rgb(51, 51, 51);
  }

/* ----------------------------------------
* End of Elements in the CONTENT Area
* --------------------------------------*/