/* This is not any particular device size, simply the point at which the 
	screen is not wide enough to show the title without wrapping */
@media only screen and (max-width: 750px), only screen and (max-device-width: 750px) {
    .innertube h2 {
        font-size: 1.4em;
    }
}

/* This is not any particular device size, simply the point at which the 
	screen is not wide enough to show the vertical menu comfortably.  So we move it to the top. */
@media only screen and (max-width: 640px), only screen and (max-device-width: 640px) {
    /* Page layout */
    body {
        background-image: none;
    }

    #contentcolumn {
        margin-left: 0;
        margin-top: 57px;
    }

    #leftcolumn {
        top: 35px;
        height: 32px;
        float: none;
        margin-left: 0;
        width: 100%;
        z-index: 999999;
    }

    #topsection {
        height: 35px;
    }

    #search-banner h2 {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    #search-title {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    #search-banner > p {
        padding-top: 8px;
    }

    #banner-img-small {
        display: inline;
        margin-right: 5px;
    }

    #banner-img-large {
        display: none;
    }

    /* push content down to make space for top menu */
    #contentwrapper {
        margin-top: 15px;
    }

    /* no space for quick search in top banner*/
    #quick-search-forms {
        display: none;
    }
    /* reduce height to match image size */
    .innertube h2 {
        /* font-size: 1em; */
        max-height: 35px;
        padding: 0px;
        margin: 0px;
    }

    /* adjust left menu layout to fit as horizontal menu*/
    ul.left-menu {
        padding: 4px 0 4px 0;
        margin: 0;
    }

    .left-menu > li {
        float: none;
        display: inline;
    }

        .left-menu > li > a {
            display: inline;
            margin-right: 0;
            margin-left: 0;
        }

        .left-menu > li > a {
            padding: 5px 3px 10px 4px;
        }


    /* remove padding on details and help panes*/
    div.help-pane,
    div.details-pane {
        padding: 0 0 10px 0;
        margin: 0;
    }

    /* But if the details is also the preview pane we still need a little bit of padding */
    div.preview-pane {
        padding: 10px 0 0 6px;
    }

    /* Field groups and inline search accordion go right to the edge on smaller screens */
    .accordion {
        margin-right: 10px;
    }

    /* narrower field labels */
    .field-group div.control-group > div.controls {
        margin-left: 130px;
    }

    div.control-group > label.control-label {
        width: 120px;
    }

    /* tables go right to the edge */
    table.trim-list {
        margin-left: 0;
        width: 100%;
    }

    div.form-search-pane {
        /*background-color:#FFF;
	padding-top:10px;
	padding-bottom:10px;
	margin: 0 40px 0 20px;*/
        margin: 0;
        width: 100%;
    }

    /* compact page banner*/
    .banner > div {
        margin-right: 2px;
    }

    .banner {
        padding: 0 0 0 8px;
        margin-top: 0;
        margin-bottom: 10px;
    }

    .search-form,
    .form-horizontal {
        margin-left: 5px;
    }

    /* smaller buttons */
    .btn {
        padding: 4px 10px 4px 10px;
    }

    /* not enough space to afford nowrap*/
    td.nowrap {
        white-space: normal;
    }

    /* hide the 3rd and 4th column of the search clause help table */
    tr.search-row td:nth-child(3),
    #schead-cansort {
        display: none;
        visibility: hidden;
    }

    tr.search-row td:nth-child(4),
    #schead-sorttip {
        display: none;
        visibility: hidden;
    }

    /*#search-form-form > .search-btn
	{
		right: 30px;
	}*/
}

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
    /*#contentwrapper
	{
		width: 480px;
	}*/
}	

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px)
{
    .menu-text {
        display:none;
    }
    #btnPreviousPage {
        display:none;
    }

    #btnNextPage {
        display:none;
    }

    .toolBarItemsPanel {
	padding-top: 0;
	padding-bottom: 0;
}

    div.dropdown {
    margin-top:0;
}

    #logout-btn {
        margin: -30px 10px 0 0;
    }

        #logout-btn > a {
            padding: 2px 5px 2px 5px;
        }


	/* compact page layout */
	#leftcolumn
	{
		position: fixed;
		top: 35px;
		margin-top: 0;
	}

    div.preview-pane
    {
        width:100%;
    }

	#contentcolumn
	{
	//	margin-top: 30px;
	}

	#contentcolumn > h3
	{
		margin-left: 6px;
	}

    #contentcolumn.no-menu {
        margin-top:29px;
    }

	#topsection
	{
		height: 30px;
	}

	/* tables more compact */
	.table th
	{
		padding-left: 4px;
	}

	.table > tbody > tr > td
	{
		padding: 8px 2px 8px 6px;
	}

	/* Blue lines consume too much space */
	.blue-line
	{
		display: none;
	}

	/* smaller title in page details */
	.banner > h2
	{
		line-height: 20px;
		padding-top: 5px;
		font-size: 18px;
	}

	/* smaller page banner */
    .innertube h2 {
        /*		background-image: url("../images/top_banner_BG_shaded_SM.png");
		background-repeat: repeat-x;
*/
        min-height: 30px;
        font-size: 1.2em;
    }

	#banner-img-small
	{
		display: inline;
	}

	#banner-img-large
	{
		display: none;
	}

	/* compact title on search results*/
	#search-title
	{
		font-size: 14px;
		font-weight: bold;
		padding-bottom: 4px;
		padding-left: 2px;
		margin: 0;
	}

	/* less spacing around search title banner area */
	#search-banner
	{
		margin-bottom: 2px;
		padding: 0;
		display: inline;
	}

	/* don't display title, just help */
	#search-banner > h2,
	#search-banner > hr
	{
		display: none;
	}

	/* Move inline search form to the left */
	#collapse_rec_search > div
	{
		padding-left: 2px;
	}

	/* hide icons */
	.row-icon
	{
		display: none;
	}

	div.form-search-pane
	{
		margin: 0;
		width: 100%;
		padding-top:4px;
	}

	.banner hr
	{
		display:none;
	}

	.banner
	{
		margin-bottom:2px;
	}

	#search-form-form
	{
		margin-top:0;
		width:100%;
	}

    .controls > label.checkbox {
        margin-left:0;
    }
    
	.search-btn
	{
		position: absolute;
		right: 10px;	
	}

    .text-last-links {
        display:none;
    }

    div.text-page-controls {
        margin-top:8px;
    }
}