/*
 * DESCRIPTION
 * CSS styles used by the lay-out of the website of Infogroen   
 * Alter these styles to let the site have a custom look.
 *
 * CONTENT
 *     - Layout styles
 */


/* Layout styles 
-------------------------------------------------------------------------------------------------*/
@charset "utf-8";

html,
body {
    padding: 0; 
    margin: 0;
    height: 100%;
}

body {
    background: #A3BFAA url(/images/restyle/main_bg.gif) repeat-x top;
    margin: 0;
}
    
    /*\*/
    body {
        background-image: url(/images/restyle/main_bg.gif), url(/images/restyle/keyboard_bg_safari.jpg);
        background-repeat: no-repeat;
        background-position: top, top right;
    }/**/

    #keyboard {
        width: 100%;
        height: 100%;
        background: url(/images/restyle/keyboard_bg_safari.jpg) no-repeat top right;
    }

        #maincontainer_home,
        #maincontainer_sub {
            margin: 0 auto;
            background: url(/images/restyle/raster.gif) no-repeat top right;
            min-height: 400px;
        }
        
        #maincontainer_home {
            width: 744px;
        }
        
        #maincontainer_sub {
            width: 960px;
        }
        
            #topsection {
                height: 143px;
                position: relative;
            }
            
            #topsection a {
                position: relative;
                top: 98px;
                left: 0;
            }
            
            #contentwrapper_home {
                position: relative;
            }
                #banner_menu {
                    width: 744px;
                    height: 189px;
                    background: url(/images/restyle/banner_home.jpg) no-repeat top;
                    position: relative;
                    top: 63px;
                }
                    #menu {
                        list-style: none;
                        margin: 0;
                        padding: 0;
                        float: right;
                        margin-right: 30px;
                    }
                    
                    #menu li,
                    #menu li.over {
                        width: 112px;
                        height: 189px;
                        float: left;
                        position: relative;
                        line-height: 0px;
                        padding: 0 5px;
                        margin-right: 20px;
                    }
                    
                    #menu li {
                        background: url(/images/restyle/menu_bg.png) repeat-x bottom;
                    }
                        
                        #menu li a,
                        #menu li a:visited,
                        #menu li a:link,
                        #menu li a:active {
                            font: bold 11px/12px "Avenir", Avenir, "Avenir Black", Arial, Helvetica, sans-serif;
                            text-transform: uppercase;
                            color: #272727;
                            text-decoration: none;
                            position: relative;
                            top: 162px;
                        }
                        
                    #menu li.over {
                        background: url(/images/restyle/menu_bg_over.png) repeat-x bottom;
                    }
                    
                    #menu li.over a {
                        color: #FFF;
                    }
                
                #contact {
                    position: relative;
                    top: 80px;
                    left: 44px;
                    font: normal 11px/12px "Avenir", Avenir, "Avenir Black", Arial, Helvetica, sans-serif;
                    color: #356843;
                }    
                
                    #contact a,
                    #contact a:link,
                    #contact a:visited,
                    #contact a:active {
                        text-decoration: none;
                        color: #356843 
                    }
                    
                    #contact a:hover {
                        text-decoration: underline;
                    }
                
               #tabs {
                    height: 31px;
                    position: relative;
                    top: 32px;
                    
               }
               
                    #tab_1,
                    #tab_2,
                    #tab_3 {
                        background-color: #9C0;
                        width: 124px;
                        position: absolute;
                        height: 31px;
                        top: 0;
                        
                    }
                    
                    #tab_1 span,
                    #tab_2 span,
                    #tab_3 span {
                        position: relative;
                        top: 3px;
                        font: bold 11px/12px "Avenir", Avenir, "Avenir Black", Arial, Helvetica, sans-serif;
                        left: 5px;
                        text-transform: uppercase;
                        color: #FFF;
                    }
                    
                   
                    #tab_1 {
                        left: 312px;
                    }
                    
                    #tab_2 {
                        left: 434px;
                    }
                    
                    #tab_3 {
                        left: 568px;
                    }
                    
               #illustration {
                   width: 241px;
                   float: left;
                   position: relative;
                   top: 31px;
                   height: 189px;
                   /* overflow: hidden; */
                   background-position: top center;
                   background-repeat: no-repeat;
               }
               
               #content {
                   width: 719px;
                   float: left;
                   position: relative;
                   top: 31px;
                   min-height: 395px;
                   _height: 395px;
                   background: #FFF;
               }
               
                             
                   #subSubMenu {
                       padding: 0;
                       margin: 0;
                       list-style: none;
                       float: right;
                       position: absolute;
                       z-index: 100;
                       top: 200px;
                       left: 100px;
                   }
                   
                       #subSubMenu li {
                           height: 22px;
                           text-align: right;
                           padding-right: 10px;
                           margin-bottom: 15px;
                           float: right;
                           clear: both;
                       }
                   
                           #subSubMenu li a,
                           #subSubMenu li a:visited,
                           #subSubMenu li a:link,
                           #subSubMenu li a:active {
                               font: bold 11px/12px "Avenir", Avenir, "Avenir Black", Arial, Helvetica, sans-serif;
                               text-transform: uppercase;
                               color: #356843;
                               text-decoration: none;
                               position: relative;
                           }
                           
                           #subSubMenu li a.active {
                               color: #336;
                           }
               
                   #submenu {
                       background-color: #9C0; 
                       height: 20px;
                   }
                   
                       #submenu ul {
                           padding: 0;
                           margin: 0;
                           list-style: none;
                           height: 20px;
                       }
                       
                           #submenu ul li {
                               float: left;
                               margin-left: 15px;
                           }
                           
                               #submenu li a,
                               #submenu li a:visited,
                               #submenu li a:link,
                               #submenu li a:active {
                                   font: bold 10px/18px "Avenir", Avenir, "Avenir Black", Arial, Helvetica, sans-serif;
                                   text-transform: uppercase;
                                   color: #272727;
                                   text-decoration: none;
                                   position: relative;
                               }
                               
                               #submenu li a:hover {
                                   color: #FFF;
                               }
                              
                   #content_text {
                       margin-top: 20px;
                       background-color: #FFF;
                   }