/* Layout.css -- This houses all items regarding the specific positioning and container elements */

/* Main Items */

    body { margin: 0px; padding: 0px; font-size: 62%; color: #666 }   
    img { border: 0px; }
        img.icon {position: absolute}
    strong { font-size: 1.1em; }
    #container { margin: 10px auto; width: 750px; font: normal 1em arial, verdana}
    a { outline: none; }
    /* Hyperlinks - these control the various colors used in different product areas */  
        .base a { font-weight: bold; font-size: 1.1em; color: #777; }
        .inspire a { font-weight: bold; font-size: 1.1em; color: #C69A05; }
        .fcontrol a { font-weight: bold; font-size: 1.1em; color: #851817; }
        .mule a { font-weight: bold; font-size: 1.1em; color: #447090; }
         a.gray { font-weight: normal; color: #777; font-size: 1.1em; }
         a:hover { color: #000; }
         
    /* Text - various colors for simple text throughout products */
        .inspire .prod_txt { color: #C69A05; }
        .fcontrol .prod_txt { color: #851817; }
        .fcontrol .price { color: #851817; font-weight: bold; font-size: 1.1em; }
        .mule .prod_txt { color: #447090; }
        .mule .price { color: #447090; font-weight: bold; font-size: 1.1em; }
        
    /* Li Titles - used for the right hand side box titles in products */
        .inspire li.title { background: #C69A05; }
        .fcontrol li.title { background: #851817; }
        .mule li.title { background: #223C4F; }
        
    /* The Bottom, Left rectangle on the product specific pages */
    .prod_btmtab_inspire { float: left; display: inline; margin-left: 11px; width: 160px; height: 16px; background: #C69A05}
    .prod_btmtab_fcontrol { float: left; display: inline; margin-left: 11px; width: 160px; height: 16px; background: #851817}
    .prod_btmtab_mule { float: left; display: inline; margin-left: 11px; width: 160px; height: 16px; background: #223C4F}
  
    a.red { color: #930; font-weight: normal; font-size: 1em }
    a.red:hover { color: #f00; }
        
/* Top Area - Housing the flash headers*/
    
    #top { width: 724px; margin-bottom: 3px;}
       
/* Middle Area - Housing all content/information 
    - Various classes are attached this, ex) .home , .secondary, .product 
        These and the classes beneath them are found in /css/styles.css */

    #mid { float: left; width: 712px; padding: 10px; padding-right: 0px; background: #F5F5F5; border: 1px solid #A6A6A6;  }    
    
/* Bottom Area - Housing footer and secondary navigation */

    #btm { float: left; width: 724px; margin-top: 10px; padding-bottom: 200px; }
            #btm a { font-weight: normal; font-size: 1em; color: #666; }
            #btm a:hover { color: #000; }
            #btm .L { float: left; padding-left: 20px; width: 300px; }
            #btm .R { float: right; padding-right: 20px; width: 250px; text-align: right;}