/*  _______________________________________

	Media Libary: Layout.css
    _______________________________________  */
 
 /*-------------------------------
 CONTENTS.
 -------------------------------
 1.) Globals
 2.) Layout
     - 2.1: Wrapper
     - 2.2: Header
     - 2.3: Navigation menu
     - 2.4: Content
     - 2.5: Footer
 3.) Main navigation menu
     - 1.1: Main menu
     - 1.2: Categories sub menu
     - 1.3: Search area
 4.) Content
 5.) Login
 --------------------------------
/*

/******************************************************************************************************************/
/* 1.) LANGUAGES/GLOBALISATION
/******************************************************************************************************************/ 

   .language-select { width: 180px; height: 26px; background: url('/Content/Images/global/language-select-bg.png') no-repeat; display: block; font-size: 0.9em; }
   #language-container { position: relative; z-index: 99; }
   #language-dropdown { background: url('/Content/Images/global/languages-dropdown-bg.png') no-repeat; width: 180px; height: 400px; z-index: 100; display:none; position: absolute; margin-top: -30px; font-size: 0.9em; }
   #language-dropdown ul { margin-top: 10px; margin-left: 15px; }
   img.flag { width: 22px; height: 18px; position: relative; top: 3px; padding-right: 8px; }
   img.flag-select { width: 22px; height: 18px; position:relative; top: 4px; margin-left: 15px; padding: 0 8px 0 0; }  
   .language-select-dropdown { margin-top: 3px; padding-bottom: 3px; border-bottom: 1px dotted #888888;}    
   
/******************************************************************************************************************/
/* 2.) ADMIN SIDE MENU
/******************************************************************************************************************/ 

    #admin-menu-tab { position: absolute; margin-top: 35px; z-index: 9; }
    #admin-menu-tab-holder { position:relative; }
    .tab-open { margin-left: 227px; } 
    #admin-side-menu { width: 227px; min-height: 655px; background: White; border-right: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6; position:absolute; z-index: 9; }
    ul.side-menu-icons { padding: 30px; }
    ul.side-menu-icons li { text-align: center; font-size: 0.7em; float: left; margin-right: 6px; }
    ul.side-menu-icons li img { width: 77px; height: 89px; }
    ul.side-menu-icons li h3 { position: relative; bottom: 8px; }
    #admin-menu li { padding: 6px 0 6px 0; }
    
/******************************************************************************************************************/
/* 3.) BODY STYLE & CONTENT WRAPPERS
/******************************************************************************************************************/ 
   
    .wrapper { margin: 22px auto 0 auto; width: 1060px; }
    #header-wrap { width: 1058px; height: 126px; border: 1px solid #d7d7d7; }  
    #main-menu-wrap { margin: 9px auto 0 auto; width: 1060px; height: 36px; background: #393d44 }
    #content-wrap { margin: 9px auto 0 auto; width: 1058px; background: #fff; border: 1px solid #d7d7d7; }
    #footer-wrap { margin: 11px auto 40px auto; background: #393d44; color: #fff }
    
/******************************************************************************************************************/
/* 4.) HEADER & NAVIGATION
/******************************************************************************************************************/ 

    #header { width: 980px; margin: 0 auto 0 auto; }
    .logo { float: left; margin: 16px 0 0 22px; border: 0px; }
    #top-buttons { float: right; width: 180px; display: block; margin: 54px 0 0 0; }
    .login-btn { position: relative; top: 3px; width: 180px; height: 32px; display: block; color: White; }    
    a.home-icon { float: left; margin: 12px 10px 0 0; }
    .home-icon img { vertical-align: top }
    a.logout-icon { float: right; padding: 10px 10px 0 0; }
    .wrapper-menu { width: 980px; display:block; position: relative; margin: 0 auto; }
    .wrapper-menu .menu { list-style:none; width:550px; margin:0 auto; float: left; }
    .menu li { float: left; text-align:center; position:relative; margin-right: 3px; margin-top:6px; border:none; font-size: 0.96em; line-height: 19px; }
    .menu li:hover { border-bottom:none; margin-right: 3px; margin-top: 6px; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; }
    .menu li.nodrop:hover { margin-top: 6px; padding: 5px 10px 4px 10px; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; }
    .menu li.nodrop:hover a { padding: 0; }
    .menu li a { color: #fff; outline:0; padding: 5px 10px 3px 10px; text-decoration:none; text-transform: uppercase; display:block; }
    .menu li:hover a { text-shadow: none; position:relative; outline: 0; display: block; padding: 5px 10px 3px 10px; }
    .menu li:hover div a { display:inline; padding: 0; margin: 0; }
    .menu li ul li { line-height: 15px; text-align: left; float: none; width: 100%; }
    .menu li ul li a { text-transform: none; font-size: 1.09em; }
    .menu li ul li a:hover { font-weight: bold; color: #6f9c1c; }
    .menu .dropdown-1column, .menu .dropdown-2columns { margin: 5px 0 0 0; left:-999em; position:absolute; text-align:left; -webkit-border-radius: 0px 0px 5px 5px; -moz-border-radius: 0px 0px 5px 5px; border-radius: 0px 0px 5px 5px; }
    .menu .dropdown-1column {width: 272px;}
    .menu .dropdown-2columns {width: 300px;}
    .menu li:hover .dropdown-1column, 
    .menu li:hover .dropdown-2columns { font-size: 0.8em; left:-24px; top:25px; }
    .menu .col-1  { width:272px; float: left; padding: 20px 20px 33px 20px; }
    .menu-light-theme ul li.drop:hover { background:#c8c8c8; border-bottom: 6px solid #c8c8c8; }
    .menu-light-theme ul li.nodrop:hover { background:#ffffff; border-bottom: 2px solid #ffffff; }
    .menu-light-theme ul li.drop:hover a { color:#4a4f62; }
    .menu-light-theme ul li.nodrop:hover a { color: #4a4f62; }
    .menu-light-theme ul .dropdown-1column, 
    .menu-light-theme ul .dropdown-2columns { border-top: 18px solid #c8c8c8; border-bottom: 14px solid #c8c8c8; background: #efefef; }
    .menu-light-theme .menu li:hover div a { border-bottom:none; }
    .menu-light-theme .menu li.noactive a { color:#eeeeee; }
    .menu-light-theme .menu-black li:hover div a {color:#2c2c2c;}
    .menu-light-theme .menu-black li:hover div a:hover {color:#6f9c1c;}
    .menu-light-theme .menu-black li ul li a:hover {color:#6f9c1c;}
    
/******************************************************************************************************************/
/* 5.) SEARCH
/******************************************************************************************************************/ 

    .search-container { margin: 3px 0 0 0; float: right; height: 30px; }
    .search-form { display: inline-block; }
    .search-form .search-field { border: none; width: 327px; height: 30px; background: url('/Content/Images/global/searchbar-bg.png') no-repeat; font-size: 0.99em; color: #b1b1b1; float: left; padding: 0 1px 0 10px; line-height: 30px; position: relative; left: 11px; }   
    .search-form .search-button { width: 34px; height: 30px; float: left; background: url('/Content/Images/global/search-btn.png') no-repeat; border: none; }
    .ui-autocomplete { width: 358px; background: #eeeeee; border-left: 1px solid #dbdbdb; border-right: 1px solid #dbdbdb; border-bottom: 1px solid #dbdbdb; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; position: relative; bottom: 2px; right: 1px; padding-bottom: 15px; }
    .ui-menu { padding-top: 12px; }
    li.ui-menu-item { padding: 6px 14px 0 14px; }
    li.ui-menu-item a { font-size: 0.8em; cursor: pointer; cursor: hand; }
    li.ui-autocomplete-category { height: 30px; background: #dbdbdb; line-height: 32px; width: 348px; margin-top: 8px; }
    li.ui-autocomplete-category:first-child { margin-top: 0; }
    li.ui-autocomplete-category span { padding: 0 14px 0 14px; font-size: 0.9em; }
    
/******************************************************************************************************************/
/* 6.) CONTENT
/******************************************************************************************************************/ 

    #content { width: 980px; margin: 0 auto; }
    .content-left { width: 130px; height: 100%; float: left; border-right: 1px solid #d7d7d7; }
    .content-inner { margin: 18px 0 0 0; }
    .content-right { width: 820px; float: right; margin: 0px; padding: 0px; }
    .content-inner { padding-top: 15px; }
    .content-heading { width: 100%; height: 40px; background: url('/Content/Images/global/content-heading-bg.png') no-repeat; padding: 0 11px 0 11px; line-height: 43px; }
    .content-heading h2 { width: 70%; float: left; }
    .options-dropdown { width: 111px; height: 26px; background: url('/Content/Images/global/options-ddl-bg.png') no-repeat; float: right; line-height: 8px; color: #fff; font-size: 0.82em; padding: 10px; position: relative; top: 7px; left: 1px; }
    .options-dropdown:hover { text-decoration: none; }
    .hd-icon { width:31px; height:22px; position:absolute; top:2px; left:0; }       
    .hd-icon-featured { width:31px; height:22px; position:absolute; top:2px; left:5px; z-index:2; }

/******************************************************************************************************************/
/* 6.) FOOTER
/******************************************************************************************************************/ 


    #footer { width: 980px; margin: 0 auto 0 auto; padding-bottom: 10px; }
    #footer p { float: left; line-height: 20px; font-size: 0.85em; font-weight: bold; padding-top: 10px; }

    #footer a { float: right; margin: 9px 0 0 0; }
    .footer-about { float:right;padding-top:10px;padding-right:20px; } 
    .footer-about a { text-decoration:underline; }