/*
* Fluidal V7.0
* Copyright 2017, Duncan Arrow
* http://fluidal.duncanarrow.com
*/

/* Device independent styles, including non-layout-dependent styling for items which are switchable */

/* Header (full width). There are two types of full width header in the default theme:
'topbar'  which is layout dependent and includes the mobile user information, and
'logonav' which is the main header and menu area. The top header is always on top and
full width. */
.browse .results-and-filters .sidebar .sidebar-button-container.do-not-display {display: none}
.headerfullwidth, .footerfullwidth {position: relative; width: 100%; margin: 0 }
.headerfullwidth.logonav { padding: 12px 0px; }
.headerfullwidth .container {margin: 0% auto; position: relative;}	/* This container is used to position the logo and nav menus */
.menu-container { float: right; }	/* The container for the main menu in the navbar */
.headerfullwidth.topbar .welcome { padding-left: 16px; }

/* The page layout container is used for the navigation bar. */
.container.pagelayout {padding-bottom: 1%; padding-top: 0px;}

/* The top block is the image container on the home page template, and the wrap within it is
the text overlay. */
#top_block {position: relative; height: 300px; }
#top_block .wrap {position: absolute; bottom: 20px; width: 90%; }
#top_block .wrap h1, #top_block .wrap p { padding-left: 15px; padding-right: 15px; }
#top_block .wrap h1 { padding-top: 15px; }
#top_block .wrap p { padding-bottom: 15px; }
.overlay-background { opacity: 0.7; }

/* Featured and top level collection listings on the home page */
.featured-container, .top-level-container { margin-bottom: 24px; }

/* Accordion and reveal styles are used for special sections of markup which can be added to custom
pages. They are not used by the main markup generated by Preservica content rendering. */
.accordion { padding-top: 10px; border-bottom: 1px #d8d8d8 dotted; }
.accordion p { margin-bottom: 0px; padding-bottom: 3px; margin-left: 15px; }
.accordion .fa { float: left; margin-top: 6px; width: 15px; }
.reveal {padding-bottom: 18px; display: none; }

/* Login panel styles. The -meta is the text below the main panel. The login_out container is used in the wide mode menu, and these styles only apply there, not to the login link in the top header */
.login-panel { display: block; width: 60%; margin: 0 auto; }
.login-panel-meta { display: block; width: 64%; margin: 20px auto; }
.login-panel header h1 { font-size: 1.6em; margin-bottom: 5px; margin-top: 70px; }
.login-panel header p { margin-bottom: 20px; }
.login_out { float: right; margin-top: 13px; height: 40px; margin-left: 10px; }
.login_out .welcome { border-radius: 5px 0px 0px 5px; border-style: solid; border-width: 1px; padding: 8px; float: left; width: 72px; line-height: 13px; font-size: 12px; height: 24px; }
.login_out .logged_in, .logged_out { float: right; }
.login_out .logged_in { border-radius: 0px 5px 5px 0px;  border-style: solid; border-width: 1px; }
.login_out .logged_out { border-radius: 5px; border-style: solid; border-width: 1px; -moz-transition: all 0.4s linear; -webkit-transition: all 0.4s linear; -o-transition: all 0.4s linear; transition: all 0.4s linear;
}
.login_out .logged_in a { padding: 8px 15px; height: 24px; float: right; }
.login_out .logged_out a { padding: 8px 15px; height: 24px; float: right; }

.logged_out:hover { -moz-transition: all 0.4s linear; -webkit-transition: all 0.4s linear; -o-transition: all 0.4s linear; transition: all 0.4s linear;}

/* The sidebar in result listing views */
.browse .sidebar-content {display: block;}
.browse .sidebar-button-container {display : none;}
.browse .results-and-filters .sidebar-button.button { padding-top: 14px; padding-bottom: 14px; padding-left: 10px; padding-right: 10px; font-size: 18px}

.browse .sidebar { padding: 0%; overflow: hidden; text-overflow: ellipsis;  transition: 0.3s; padding-left: 0;}
.browse .sidebar h4 { font-family: 'Raleway', sans-serif; font-size: 13px; text-transform: uppercase; font-weight: normal!important; padding: 15px 10px; text-align: center; margin-bottom: 0px }
.sidebar .filter-list h4 { text-align: left; padding-left: 20px;}
.sidebar #filter-list h5 { margin-bottom: 0px; }
.sidebar #filter-list ul {margin-bottom: 20px;}
.sidebar #filter-list ul li { list-style-type: none; }

.results-and-filters .twelve.columns.results {margin-left: 0; margin-right: 0; min-height: 45px;}

/* These styles control the filter list and controls. The filter-link-label is the text which we don't want because we show .fa- icons instead. */
#filter-list .fa-times { color: red; font-size: 16px; margin-top: 5px; margin-left: 5px; }
#filter-list .filter-link-label { display: none; }
#filter-list .fa-pencil-square-o { margin-left: 10px; }
.filter-list .fa-trash { margin-right: 7px; }
#filter-list .fa-times:hover { color: #b00000; cursor: pointer; }
.filter-list .fa-trash:hover { cursor: pointer; }
#filter-list input[type="checkbox"] { display: none; }	/* Filters still use checkboxes to enable the underlying script, but we don't want them shown */

.facet-count-outer-long {
    margin-left: 16px;
}

/* Sort controls and dropdown */
.browse_sort { float: right; margin-right: 20px; text-align: right; margin-bottom: 15px; }
.browse_sort select { display: inline; width: auto; margin-top: -12px; margin-left: 10px; }
.browse_sort .fa { font-size: 25px; margin-left: 10px; }
.browse_sort .fa:hover { cursor: pointer; }
#sort-order-switcher { font-size: 120%; position: relative; top: -6px; }

/* The title container contains the page title and subtitle, by default in the upper left of the content area. */
.title-container { float: left; }
.title-narrow { max-width: 40% }
.title-container h1, .title-container p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* The result list header contains the metadata display, when applicable, the sort controls, and the Search Within form.
The specific selector is needed here because the div is also .columns and we want this style to take precedence. */
.container .result-list-header { margin-bottom: 12px; }

/* The metadata panel shown on file and collection/DU landing pages. The compactlist style is used when metadata is compressed;
these styles restrict each paragraph to one line and ... termination. The optional-newline and optional-para styles are applied to <span>
elements to replace single and double new lines in the input; making them display:block causes them to break the line flow. */
.meta_single.grey_block,
.identifier_single.grey_block {
    position: relative; 	/* Must be relative for the show more/less button */
    padding: 15px;
    height: auto;
    margin-bottom: 20px;
}
.side_view .meta_single { float: left; width: 24%; margin-right: 2%; }
.side_view .meta_single.grey_block { column-count: 1; }

.meta_single.grey_block .metadata-block,
.meta_single .metadata-mobile-message {
    word-wrap: break-word;
    font-size: 0.8em;
}

.identifier_single.grey_block .identifier-block,
.identifier_single .metadata-mobile-message {
    word-wrap: break-word;
    font-size: 0.8em;
}

.optional-newline, .optional-para { display: block; }
.metadata-block.compactlist p, .metadata-block.compactlist h5 { white-space: nowrap; text-overflow: ellipsis; width: 95%; overflow: hidden; margin: 0 }
.identifier-block.compactlist p, .identifier-block.compactlist h5 { white-space: nowrap; text-overflow: ellipsis; width: 92%; overflow: hidden; margin: 0 }
.compactlist .optional-newline, .compactlist .optional-para { display: none; }
.metadata-expand { font-size: 70%; padding: 0px 8px }
.metadata-mobile-message { display: none }
.optional-para { height: 0.5em; }

/* Rendering iframe, on file pages. The height is set in responsive sections */
iframe.render { width: 100%; border-width: 0; }

/* The content pane on the file page, when metadata is at the side. Adjust the width to accommodate the metadata */
.top_view .content_single { margin: auto; }	/* Leave a little margin to allow the page to be scrolled on mobile devices */
.side_view .content_single { float: left; width: 74%; }
.bottom_view .sixteen.columns { display: table; }
.bottom_view .meta_single.grey_block { width: inherit; }
.bottom_view iframe { width: 95% }
.bottom_view .content_single { display: table-header-group; text-align: center; }
.bottom_view .no-render { margin: 0 auto 20px; text-align: left; }

/* Button styling. .fa styles refer to the iconic prefix to the button text. While button text
is switch on and off and hence display values are below, this styling always applies. */
.browse_archive .fa, .back-button .fa { display: inline; padding: 1px 0px; }
.back-button .fa, .up-button .fa { padding-right: 0px; }
.back-button { margin-right: 7px; }

/* The single controls are the metadata and download controls on the file landing page */
.container .columns.single-controls { text-align: right; float: right; }
.single-controls .fa { font-size: 26px; }
.single-controls .fa:hover { cursor: pointer; }
.single-controls .fa.top { margin-left: 5px; }
.single-controls .fa-download { margin-right: 10px; }

/* Filter panel (where filters are edited and added, in the nav bar) styles. */
.archivefilter { padding: 8px 8px 0 0px; }
.archivefilter input, .archivefilter select { width: auto; display: inline-block; border: 0px; padding: 8px; border-radius: 5px; font-size: 15px; margin-bottom: 0px; box-sizing: border-box; }
.archivefilter select { height: 33px; width: 20% }
span.filter-group-label { margin: 0 8px; }
.archivefilter input[type="text"] { width: 360px; }
span#filter-group-date input[type="text"] { width: 163px; }
#filter-editor-button { padding: 7px 16px; height: 33px; }	/* This is the 'add' or 'update' button that is in the filter editor pane */

/* These styles adjust the layout of controls on the search form */
form.search button, form.search input[type="submit"] { margin-top: 0px; }
.search-button { border-radius: 0px 5px 5px 0px; }
.addfilter.button .fa.fa-filter{ display: none; }

/* Listing styles.  These apply to the default view: extended information hidden
* Width-dependent layout settings are also below which includes all the view switching
* because that doesn't apply to mobile. */
.grey_block { height: 70px; border: 0px; margin-right: 0px; margin-bottom: 2px; overflow: hidden; position: relative; border-width: 0px; box-sizing: border-box; }
.grey_block .archive_description, .grey_block .archive_data_content { display: none; }

.grey_block .archive_icon { position: absolute; top: 0px; right: 0px; width: 30px; height: 30px; text-align: center; }
.grey_block .archive_icon .fa { margin-top: 23%; font-size: 15px; }

.grey_block .archive_name { margin-top: 6px; margin-left: 78px; }
.grey_block .archive_name { margin-top: 6px; margin-left: 78px; }

.grey_block .archive_name h3 { font-size: 1.3em; margin-bottom: 0px; }

.grey_block .archive_name h5 {
    font-size: 1.2em;
    margin-bottom: 0px;
    height: 100%;
}

.grey_block .archive_name h5 a {
    display: block;
    height: inherit;
    overflow: hidden;
    white-space: normal;
}

.grey_block .archive_image { position: absolute; top: 0px; height: 55%; width: 100%; overflow: hidden }

.column-headers { display: none; margin-bottom: 0px }
span.sort-buttons { float: right; font-size: 90% }

/* Footer and sub-footer styling */
#footer {
    width : 100%;
    float : left;
    padding : 16px 0;
    font-size: 0.8em; line-height: 1.5em;
}
#subfooter { padding: 20px 0 10px 0; width: 100%; color: #669; float: left; margin: 0 auto; font-size: 85%; }
#subfooter a {text-decoration: none;}
#subfooter hr {border-top: 1px solid #444!important}
#subfooter a .fa {
    -moz-transition: all 0.4s linear;
    -webkit-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    transition: all 0.4s linear;}
#subfooter a:hover { cursor: pointer;
    -moz-transition: all 0.4s linear;
    -webkit-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    transition: all 0.4s linear;}

/* General non-semantic styles which can be applied anywhere */
.padding { padding: 8px 18px; }
.thin_padding { padding-top: 12px; padding-bottom: 12px;}
.medium_padding { padding-top: 50px; padding-bottom: 50px;}
.deep_padding { padding-top: 85px; padding-bottom: 88px;}
.aligncentre { text-align: center; }
.alignright { text-align: right; }

/* Wide (>960px) styles as default
================================================== */

/* Navbar styles. Buttons display full text in wide mode, and the mobile search expander button is hidden. */
.browse_archive .fa { display: none; }
.back-button .fa, .up-button .fa { padding-right: 6px; }
.mobile_search_archive { display: none; }

/* In wide mode the top bar is hidden because we have the full user panel */
.headerfullwidth.topbar { display: none; }

/* Maximally sized top image section and restricted overlay text on home page */
#top_block {height: 410px; }
#top_block .wrap { width: 60%; }

#left-facets-border,
#sidebar {
    margin-left: 0;
}

#left-facets-border {
    height: 1em;
}

/* Result listings layout styles */
.sidebar { width: 20%; float: left; margin-left: 20px; transition: 0.3s; }

/* The metadata panel is 4 columns by default */
.meta_single.grey_block {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
}

/* Shortlist */
.short-list-page {
    margin-bottom: 10px;
}

.short-list-page .bottom-control {
    text-align: right;
    float: right;
}

.short-list-left-border {
    border-left: 1px solid;
}

.short-list-page .control-buttons button {
    padding: 0;
}

.short-list-control:active {
    line-height: 1;
}

.container .bottom-control {
    margin-top: 10px;
}

.bottom-control .remove-all {
    margin-left: 10px;
}

.short-list-heading {
    display: inline-block;
}

h1.short-list-heading {
    margin: 1em 0;
}

.short-list-counter {
    font-size: 1.7em;
}

.short-list {
    border: 1px solid;
    border-radius: 5px;
    font-size: 26px;
    float: right;
    padding: 8px 15px;
    height: 24px;
}

.short-list-items {
    display: inline-block;
}

.browse .table .grey_block .control-buttons {
    text-align: center;
    vertical-align: middle;
}

.control-buttons .download,
.control-buttons .remove {
    background: transparent;
    font-size: 26px;
}

.control-buttons .download,
.control-buttons .remove {
    display: inline-block;
}

.short-list-notification {
    display: none;
    font-weight: bold;
    padding-right: 5px;
}

/* Copyright statement in footer (mobile version) is hidden when wide */
.copyright { display: none; }

/* The default height of the render view */
iframe.render { height: 1000px; }

@media (min-width: 960px) {
    .container .four.columns {
        width: 220px;
    }
}

/* Listing views - in non-mobile mode, the listings have three different views (list, tiles and table). These views display
the same information, but in different ways, controlled by the styling here. In all of these styles:
	- .grey_block is the entry container
	- .archive_image is the thumbnail container
	- .archive_icon is the overlay for the object type
	- archive_name is the container for the object title
	- archive_description and archive_data_content are the containers for columns 2 and 3 of metadata
*/
@media (min-width: 480px) {
    /* List view: Single entry per row, with the thumbnail at the left, the post title prominent, and the other two columns as paragraphs underneath */
    .browse .list .one_sixth { width: 100%; margin-bottom: 3px; }
    .browse .list .two.columns { width: 100%; margin-bottom: 3px; }
    .browse .list .grey_block .archive_image { width: 70px; height: 70px; }
    .browse .list .grey_block .archive_icon { width: 24px; height: 24px; }
    .browse .list .grey_block .archive_icon .fa { margin-top: 25%; font-size: 12px; }
    .browse .list .grey_block .archive_name { position: relative; margin-top: 0px; margin-left: 78px; bottom: auto; top: 0px; height: auto; width: auto; }
    .browse .list .grey_block .archive_name h3 { font-size: 1.5em; padding-top: 6px; }
    .browse .list .grey_block .archive_name h5 { font-size: 1.2em; padding-top: 6px; }
    .browse .list .grey_block .archive_description, .browse .list .grey_block .archive_data_content { display: inline; }
    .browse .list .grey_block .archive_description { margin-left: 78px; }
    .browse .list .grey_block .archive_data_content { margin-left: 32px; }
    .browse .list .grey_block .archive_description p, .browse .list .grey_block .archive_data_content p { display: inline-block; width: 30%; max-width: 30%  }
    .browse .list .grey_block p, .browse .list .grey_block h3, .browse .list .grey_block h5 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

    /* Table view. One entry per row, laid out in a table format with three columns. Column headers are visible in this mode. */
    .browse .table { display: table; width: 100%; vertical-align: top; }
    .browse .table .column-headers { display: table-row; height: auto; }
    .browse .table .one_sixth { display: table-row; vertical-align: middle; width: 100%; float: none; }
    .browse .table .two.columns { display: table-row; vertical-align: middle; width: 100%; float: none; }
    .browse .table .grey_block { height: auto; }
    .browse .table .grey_block div { vertical-align: top; }
    .browse .table .grey_block .archive_image { position: relative; display: table-cell; width: 74px; max-width: 70px; height: 70px; overflow: hidden; border-color: #f7f7f7; border-style: solid; border-width: 0px 0px 3px 0px; }	/* max-width is necessary for IE */
    .browse .table .grey_block .archive_image.empty-div { position: relative; display: table-cell; background-color: transparent; height: 25px; }
    .browse .table .grey_block .archive_image p { display: none; }
    .browse .table .grey_block .archive_icon { width: 24px; height: 24px; }
    .browse .table .grey_block .archive_icon .fa { margin-top: 25%; font-size: 12px; }
    .browse .table .grey_block .archive_name { position: relative; display: table-cell; padding: 0px 5px; width: 32%; max-width: 150px; border-color: #f7f7f7; border-style: solid; border-width: 0px 0px 3px 3px; }
    .browse .table .grey_block .archive_name.column_title { padding: 5px }
    /* Note about the max-width in these styles. The actual pixel width is irrelevant in major browsers, however it means that the
    * paragraph inside doesn't cause the div to expand, so overflow logic works correctly. */
    .browse .table .grey_block .archive_description { position: relative; display: table-cell; padding: 0px 5px; width: 38%; max-width: 150px; border-color: #f7f7f7; border-style: solid; border-width: 0px 0px 3px 3px; }
    .browse .table .grey_block .archive_data_content { position: relative; display: table-cell; padding: 0px 5px; width: 20%; max-width: 100px; border-color: #f7f7f7; border-style: solid; border-width: 0px 0px 3px 3px; }
    .browse .table .grey_block .archive_description p, .browse .table .grey_block .archive_data_content p { padding: 2px 0px; }
    .browse .table .grey_block .archive_name h3 { font-size: 1.5em; padding-top: 6px; }
    .browse .table .grey_block .archive_name h5 { font-size: 1.2em; padding-top: 6px; }

    /* Tile view. This view is similar to the default styling for the elements, so not much needs to be customised here. The height and position
    of elements is adjusted on the home page to keep the shape of the box and thumbnail consistent when the view takes more horizontal space there. */
    .blocks .one_sixth { width: 15.9%; margin-right: 0.92%; margin-bottom: 0.92% }
    .blocks .two.columns { width: 11.8%; margin-right: 0; margin-left: 6px; margin-bottom: 0.92%; padding: 0 }
    .blocks .grey_block { height: 265px; }
    .blocks#search-results .grey_block { height: 185px; }
    .blocks .grey_block .archive_name { position: absolute; bottom: 0; width: 90%; height: 42%; }

    .blocks .grey_block .archive_name { margin-top: 6px; margin-left: 6px; }
}


/* @media queries for responsiveness: 480px for mobile only, 548px
* for larger phones or phone landscape mode, and 768 px for tablets
* or narrow browser windows
================================================== */


/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
    /* Visibility override style for this width */
    .hidemax767 { display: none!important; }

    /* Reduced white space when smaller size */
    .medium_padding { padding-top: 28px; }

    #footer {padding: 20px 0 16px 0;}

    /* Sort panel gets full width and not wrapped against the title */
    .browse_sort { width: auto; float: left; clear: both; padding-top: 0px; }
    .browse .browse_sort select { margin-left: 0px; }
    #sort-dropdown { width: auto }
    .title-container { max-width: 100%; }

    /* Sidebar and filter options not available in narrow modes */
    .browse .sixteen.columns.results-and-filters { padding-left: 0; padding-right: 0; width: 100%;}
    .browse .results-and-filters .sidebar {width: 50px; padding-left: 0; position: absolute; z-index: 1}
    /* Button is displayed */
    .browse .results-and-filters .sidebar .sidebar-button-container { float: left; display: block; }

    .browse .results-and-filters .sidebar .button {border-top-left-radius: 0; border-bottom-left-radius: 0 }
    .browse .results-and-filters .sidebar .button.sidebar-button:after{ content: ' ❱';}
    /* Filter and facets are not by default */
    .browse .results-and-filters .sidebar-content { display: none;}


    .twelve.columns.results{ z-index: 0; float: right; width: 80%;  padding-left: 5px; padding-right: 5px;}

    /* CSS classes small and full added only in mobile mode by the filter popout button */
    .browse .results-and-filters .sidebar.small .sidebar-content { display: none; }
    .browse .results-and-filters .sidebar.small .sidebar-button-container { float: left; display: block; }

    /* Sidebar full width */
    .browse .results-and-filters .sidebar.full {position: absolute; padding-left: 0; white-space: nowrap; float: left; z-index: 1;  width: 100%; max-width: 320px}
    /* Facets and filters displayed */
    .browse .results-and-filters .sidebar.full .sidebar-content { display: block; }
    /* brigtness set above 100 to distinguish it from the table background*/
    .browse .results-and-filters .sidebar.full .sidebar-content .new-secondary-background {filter: brightness(105%)}

    .browse .results-and-filters .sidebar.full .sidebar-button-container { float: right; display: block;}
    .browse .results-and-filters .sidebar.full .button.sidebar-button:before{ content: '❰ ';}
    .browse .results-and-filters .sidebar.full .button.sidebar-button:after{ content: '';}


    /* In mobile modes the header topbar replaces the user login panel,
    * and the primary nav menu is replaced by the mobile menu. */
    .headerfullwidth.topbar { line-height: 1.1em; display: block; }
    .headerfullwidth.topbar a { font-size: 0.9em; }
    .headerfullwidth.topbar .login_logout { float: right; }

    form.search { display: none; width: 100%; margin-top: 10px;}
    .searchform { display: flex; }
    .searchform input[type="search"] { flex: 2; top: 0px!important; }
    .mobile_search_archive { display: block; float: right }

    .filter-editor-form {transition-duration: 300ms;}

    #top_block {height: 300px; }
    #top_block .wrap { width: 90%; }

    iframe.render { height: 800px; border-width: 1px; border-style: solid }

	/* Make the max-widths on table view smaller. The values here have no real meaning, but need to be 'small enough'
	to make the browser respect the table layout. */
    .browse .table .grey_block .archive_name, .browse .table .grey_block .archive_description { max-width: 100px; }
    .browse .table .grey_block .archive_data_content { max-width: 80px; }
}

@media only screen and (max-width: 547px) {
    /* Explicit styles that can be applied to elements to hide them in responsive mode */
    .hide479, .hide547 { display: none!important; }

    /* Use the mobile copyright at small sizes */
    .copyright { clear: both; text-align: center; display: block }

    /* Display add filter icon for mobiles in advanced search*/
    .addfilter.button .fa.fa-filter{ display: inline; }

    /* Nav bar buttons become iconic only */
    .back-button span, .up-button span, .browse_archive span, .search-button span, .addfilter.button span{ display: none; }
    .browse_archive .fa { display: inline }
    .back-button .fa, .up-button .fa { padding-right: 0px; }

    /* Spacing of filter inputs boxes*/
    .archivefilter select { width: 50%; margin-bottom: 5px}
    .archivefilter input { margin-bottom: 5px }
    .archivefilter input[type="text"] { width: 100%; }
    span#filter-group-date input[type="text"] {width: 40%;}
    /* Metadata section becomes single column, and also always at the top (the styling for side_view is overwritten). Also,
    the contracted view of metadata just shows a message and doesn't have any content. Finally, reduce the space usage */
    .meta_single.grey_block {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
        -webkit-column-gap: 0px;
        -moz-column-gap: 0px;
        column-gap: 0px;
        float: none;
        width: auto;
        margin-right: 0;
        padding: 5px;
    }
    #metadata-switch-buttons { display: none }
    .metadata-mobile-message { display: inline }
    .compactlist { display: none }

    iframe.render { height: 450px; }

	/* Make the max-widths on table view smaller. The values here have no real meaning, but need to be 'small enough'
	to make the browser respect the table layout. */
    .browse .table .grey_block .archive_name, .browse .table .grey_block .archive_description { max-width: 50px; }
    .browse .table .grey_block .archive_data_content { max-width: 35px; }
}

@media only screen and (max-width: 480px) {
    #content-panel { margin-left: 35px }
    .blocks .two.columns { padding: 0 }
    /* The thumbnail goes at the left side of the content div, like in listing mode */
    .grey_block .archive_image { width: 70px; height: 70px; float: left }

    /* Layout selector buttons get hidden */
    .layout-buttons { display: none; }

	/* Reset the max-width applied in responsive table layout adjustment */
    .browse .table .grey_block .archive_name, .browse .table .grey_block .archive_description, .browse .table .grey_block .archive_data_content { max-width: initial; }
}