/* 
========================================================================
HORIZONTAL DROPDOWN MENU SYSTEM
========================================================================
*/
#menubar								{ margin: 4px 0 0 0; }
#menubar .top-bar                       { background-color: #fff; margin: 0 0 6px 0; width: auto; }
#menubar .top-bar.expanded .title-area  { background: #ddd; }
#menubar .top-bar-section li a:not(.button)
                                        { height: 25px; line-height: 20px; font-family: Segoe UI, Arial, Helvetica, Sans-Serif; background-color: #fff; color: #000; font-weight: normal; font-size: 70%; text-transform: uppercase; padding: 2px 9px; }
/* Down arrow on each menu in main category nav bar - control position and colour */
#menubar .top-bar-section .has-dropdown > a:after
                                        { border-color: rgba(0, 0, 0, 0.5) transparent transparent transparent; top: 13.5px; padding: 0; }
#menubar .top-bar-section li            { border-right: dotted 1px #333; }
#menubar .top-bar-section li a:hover
                                        { text-decoration: underline; }
/* Links within the dropdown menus */
#menubar .top-bar-section .dropdown li  { border-right: solid 1px #fff; }
#menubar .top-bar-section .dropdown ul  { border-bottom: solid 1px #fff; }
#menubar .top-bar-section .dropdown li a
                                        { background-color: #ddd; color: #333; width: auto; height: auto; font-weight: normal; padding: 2px 15px 4px 15px; font-size: 90%; text-transform: none; }
#menubar .top-bar-section .dropdown li a:hover
                                        { color: #000; background-color: #eee; text-decoration: none; }
#menubar .top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after
                                        { top: 1px; }
#menubar .top-bar li.name span          { display: inline-block; padding: 0 0 0 10px; }
/* 
========================================================================
CATEGORY NAVIGATION MENU
The primary styles are created by foundation.css. Rather than change
styles there (which would be overwritten if we upgrade Foundation to
a newer version), just just grab the bits we need to change here.
========================================================================
*/
#categorymenu .top-bar                  { border-bottom: solid 1px #f50; background-color: #f90; min-height: 51px; }
#categorymenu .top-bar-section li       { border-right: dotted 1px #fff; }
#categorymenu .top-bar-section li a:not(.button)
                                        { color: #fff; background-color: #f90; font-family: Segoe UI, Arial, Helvetica, Sans-Serif; padding: 3px 15px; height: 50px; line-height: 1.2em; font-weight: bold; width: 125px; font-size: 80%; }
#categorymenu .top-bar-section li a:hover
                                        { background-color: #666; color: #fff; }
#categorymenu .top-bar-section li ul    { border-bottom: solid 1px #000; }
#categorymenu .top-bar-section li li    { border-right: solid 1px #000; }

#categorymenu .top-bar-section .has-dropdown > a:after
                                        { border-color: rgba(255, 255, 255, 0.5) transparent transparent transparent; top: 13.5px; }
#categorymenu .top-bar-section .dropdown li a
                                        { background-color: #666; color: #fff; width: auto; height: auto; font-weight: normal; padding: 2px 15px 4px 15px; font-size: 90%; text-transform: none; }
#categorymenu .top-bar-section .dropdown li a:hover
                                        { color: #000; background-color: #aaa; }
#categorymenu .top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after
                                        { top: 1px; }

/* Mobile version */
#categorymenu .top-bar.expanded li ul   { border: none; }
#categorymenu .top-bar.expanded li li a { background-color: #f90; }

/* Button to replace main nav menu in small devices */
#categorymenu .mobile-link              { font-weight: bold; padding: 2px 15px; color: #ddd; display: block; }
#categorymenu .mobile-link:hover        { color: #fff; background-color: #555; }

/* 
========================================================================
BIG SCREENS
========================================================================
*/
@media only screen and (min-width: 930px) {
  #menubar .title-area li.name,
  #categorymenu .title-area li.name { display: none; }
  .row { max-width: 100%; }
  #container #centre_container { padding: 0 20px; }
  }

/* 
========================================================================
SMALL SCREENS
========================================================================
*/
@media only screen and (max-width: 930px) {
  .products_tabular .item,
  .products_shortened .item,
  .subcategories_shortened .item,
  #homepage .products_tabular .item { display: block; float: none; width: 100%; margin: 0 0 5px 0; }
  .Kartris-DetailsView-Value { width: 270px; }
  ul { max-width: 100%; }
  #pagecontent_pad { min-height: 200px; padding-bottom: 15px; }
  .hand { cursor: default; }
  .versions td.info { max-width: 200px; overflow: hidden; }
  .basket td.quantity input { width: 32px; text-align: right; }
  #container { padding: 0; }
  select,
  input { width: 100%; }
  #footer_inside { margin: 0; }

  /* Menus */
  #menubar { margin: 5px 0 0 0; }
  #menubar .top-bar .title-area { background: #ddd; }
  #menubar .top-bar-section ul { background: #ddd; }
  #menubar .top-bar-section li { border-right: none; background-color: #ddd; }
  #menubar .top-bar-section li a:not(.button) { background: #ddd; font-size: 90%; padding: 5px 10px; }
  #menubar .top-bar-section .title-area li.name a { padding: 0 5px; }

  #categorymenu .top-bar { min-height: 0px; }
  #categorymenu .top-bar-section li a:not(.button) { width: auto; height: auto; padding: 5px 10px; }
  #categorymenu .top-bar.expanded .title-area { background: #f90; }
  #categorymenu .top-bar .title-area li.name a { padding: 0 10px; color: #fff; }
  #categorymenu .top-bar-section ul { background: #f94; }
  }

/* 
========================================================================
ORBIT SLIDESHOW
========================================================================
*/
#front-slideshow                        { background-color: #e5e5e5; }
#front-slideshow li                     { padding: 10px 80px; min-height: 200px; }

/* 
========================================================================
GENERAL 
========================================================================
*/
table tr td                             { font-size: 100%; }
table thead,
table tfoot                             { background: #fff; }