/* responsive design css */

@media (max-width: 640px) {
	.cssmenu, 
	.cssmenu ul,
	.cssmenu li,
	.cssmenu a {
		font-size: 28px;
	}
}

@media (max-width: 512px) {
        .cssmenu {
            width: 100%;
        }
       	.cssmenu, 
	.cssmenu ul,
	.cssmenu li,
	.cssmenu a {
		font-size: 24px;
	}
}

@media (max-width: 420px) {
       	.cssmenu, 
	.cssmenu ul,
	.cssmenu li,
	.cssmenu a {
		font-size: 22px;
	}
        #customerNameTag {
            display:inline-block;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            width:140px;
        }
        div.content {
            padding-left: 2px;
            width: 100%;
        }
}

@media (max-width: 960px) {
        #cssmenu > ul > li > a {
            font-size: 1.5em;
        }
        #cssmenu ul ul a {
            font-size: 1.5em;
        }
        #showitemimage {
            width: 320px;
        }
        #showitemimagecontainer {
            float: right;
            margin-left: 0em;
        }
        #showitemstyleright img {
            width: 320px;
        }
        #searchresultspage {
            padding-left: 2px;
        }
        #browselinks {
            padding-left: 5px;
        }
        .sresultsdescription {
            width: 60%;
        }
        .sresultsimage {
            width: 40%;
        }

        input#email {
            width: 60%;
        }
        .otherbuttons {
            font-size: 1.0em;
            height: 30px;
        }
        .submitformbuttons {
            font-size: 1.0em;
            height: 30px;
        }
        .pagelinkbutton {
            font-size: 1.0em;
            height: 30px;
        }
}

@media (max-width: 540px) {
        /* screen widths smaller than 541px display image across whole screen */
        #showitemimage {
            width: 100%;
        }
        #showitemimagecontainer {
            float: none;
            margin-left: auto;
            margin-right: auto;
        }
}

@media (max-width: 680px) {
        /* narrower displays, show page blocks in single column */
        div.divrow {
            display: block;
        }
        div.divcell {
            display: block;
        }

        /* narrower displays, show page blocks inline */
        div.divcell_alt {
            display: table-cell;
        }

        /* two be used for side by side display switching to vertical on phone */
        div.twocolumnleft {
            float: none;
        }

        div.twocolumnright {
            float: none;
            margin-left: 0px;
        }
    
        div.columnrightside {
            inline-size: 200px;
            overflow-wrap: break-word;
            word-wrap: break-word;
        }

        div.featured {
            border: 1px dotted black;
            width: 95%;
            padding-right: 0px;
            padding-left: 5px;
            margin-left: auto;
            margin-right: auto;
        }
        div.featured img {
            width: 95%;
        }
        div.featuredcaption {
            width: 100%;
        }
        .divcell.vline {
            display: none;
        }
        #itemclasspagecolumn1 {
            display: block;
            padding-right: 2px;
        }
        #itemclasspagecolumn2 {
            display: block;
            padding-right: 2px;
        }
        #itemclasspagecolumn3 {
            display: block;
            padding-right: 2px;
        }
        table.cartdetailitems {
            width: 100%;
        }
        td.cartitem {
            width: 100%;
        }
        div.cartleftside {
            float: left;
            width: 50%;
        }

        div.cartleftsideleft {
            float: none;
            width: auto;
        }

        div.cartleftsideright {
            float: none;
            width: auto;
        }

        div.cartrightside {
            float: right;
            width: 50%;
        }

        div.cartrightsideleft {
            float: none;
            width: auto;
            padding-bottom: 10px;
        }

        div.cartrightsideright {
            float: none;
            width: auto;
            text-align: right;
        }

        .emailformlables {
            width: 100%;
            float: none;
        }
        .emailformfields {
            width: 100%;
            margin-left: 0px;
            padding-left: 5px;
        }
        .categorybutton img {
            max-width: 100%;
            height: auto;
            width: auto;
        }
}