html {
	margin:0;
	padding:0;
	width: 100%;
	max-width: 100%;
	height: 100%;
	overflow-x: hidden;
	/* setting overflow-x: hidden prevents left / right overscrolling
	   on iPhones but it also prevents momentum scolling up and down
	   so we add style="-webkit-overflow-scrolling:touch" to the index
	   page's body tag and viola - smooth scrolling with no overscroll  */
}

body {
	position: relative;
	height: 1px;
	min-height: 100%;
	color:#CCCCCC;
	margin:0;
	padding:0;
	overflow-x: hidden;
	overflow-y: auto;  /* causes containers to be narrower (15px - Opera & Edge, 17px - Firefox) to accomodate vertical scrollBar */
	background-color: #000; /*#cccfff;*/
}


h1 {
	font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: .92em;
    font-weight: normal;
    color: #666;
	line-height: 1.9em;
	text-decoration: none; }

.h1WideImg {
	max-width: 320px;
    margin: 0 auto; /* center this */ }

input, textarea, select {
  font-size: 16px; /* keeps IOS picker size within container - yup */
}

#carouselHtml {
    height: unset;
	overflow: hidden;
}

#carouselBody {
	height: auto;
	min-height: 450px;
	-webkit-overflow-scrolling: touch;
	overflow: hidden; 
	text-align: center; 
	background-color:transparent; 
}


/* As screens get taller and wider we add to styles.
   The default rules are for really narrow screens like
   phones or really low screens like Kathy's Toshiba. */


/* generics */

.hideElement {
	display:none !important; }

.hideBackground {
	display:none !important; }

.heightAuto {
	height: auto !important;
}

.verticalAligner {  /* used??? */
	transform: translateY(-50%) !important;
	-webkit-transform: translateY(-50%) !important;
	-ms-transform: translateY(-50%) !important;
	top: 50% !important;
}

.verticalAlign45 {
	transform: translateY(-50%)!important;
	-webkit-transform: translateY(-50%) !important;
	-ms-transform: translateY(-50%) !important;
    top: 45% !important;
}

.verticalAlign40 {
	transform: translateY(-50%)!important;
	-webkit-transform: translateY(-50%) !important;
	-ms-transform: translateY(-50%) !important;
    top: 40% !important;
}

.verticalAlign30 {
	transform: translateY(-50%)!important;
	-webkit-transform: translateY(-50%) !important;
	-ms-transform: translateY(-50%) !important;
    top: 30% !important;
}
	
.verticalAlignMiddle {
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
   	top: 50%;
}

.displayLarge .verticalAlignMiddle {
	top: 40%;
}

.verticalAlignTop {
	transform:translateY(0) !important;
	-webkit-transform: translateY(0) !important;
	-ms-transform:translateY(0) !important;
	top:0 !important;
}

.alignMiddle40 {
	transform: translate(-50%,-50%) !important;
	-webkit-transform: translate(-50%,-50%) !important;
	-ms-transform: translate(-50%,-50%) !important;
   	top: 40% !important;
	left: 50% !important;
}

.alignMiddle45 {
	transform: translate(-50%,-50%) !important;
	-webkit-transform: translate(-50%,-50%) !important;
	-ms-transform: translate(-50%,-50%) !important;
   	top: 45% !important;
	left: 50% !important;
}

.alignMiddle50 {
	transform: translate(-50%,-50%) !important;
	-webkit-transform: translate(-50%,-50%) !important;
	-ms-transform: translate(-50%,-50%) !important;
   	top: 50% !important;
	left: 50% !important;
}

.unsetTopMargin {
	margin-top:unset !important;
}

.topMargin-5 {
	margin-top:-5% !important; 
	background-color:#CC0000;
}

.topMargin3 {
	margin-top:3% !important; 
}

.marginTopMinusOne {
	margin-top: -1.5% !important;
}

.minHeight90 { /* used to force images with fairly short posterInfo to align vertically in largeViewerContainer2 */
	/*height:1px !important;*/
	min-height:90% !important;
}

.minHeight75 {
	height:1px !important;
	min-height:75% !important;
}

.maxHeight100{
	man-height:100% !important;
}

.clearBoth {
	clear: both;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #ccc;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #ccc;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #ccc;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #ccc;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #ccc;
}

/* end generics */

/* backdoor.htm */

.displayLargeLinksSpan {
	float: left;
	margin: .15em .5em;
}

.displayLargeLinks {
	float: left;
    line-height: 1em;
	padding: 1.1em .6em;
	font-size: 1em;
	text-decoration:none;
	color:#666;
}

.displayLargeLinks:active {
	text-decoration:none;
	color:#666;
}

.displayLargeLinks:visited {
	text-decoration:none;
	color:#666;
}

.splashContainer {
	z-index: 2;
	text-align: center;
	height: auto;
	width: auto;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	background-color: #000000;
	padding: 20px 0 0 0;
	max-width: 600px;
}


.headerBackgroundContainer {
	display: block;
    position: absolute;
	height: 100%;
    width: 100%;
    top: 0;
	overflow: hidden;
}

.headerBackgroundImg {
	position: relative;
    float: left;
    width: auto;
	min-width:100%;
    /*max-width: don't set ! */ 
	height: auto;
	min-height: 100%;
	max-height: 100%;
}

#backgroundImgContainer { 
	position:absolute;
	width: 100%;
	height:100%; /*96.5%;*/
	/*background: #000 none 50% / cover;*/
	/*background: rgba(0, 0, 0, 0) none 50% / auto 100% no-repeat;*/
	background: rgba(0, 0, 0, 0) none 0 5% / cover;
}

#backgroundImgContainer img { /* required for rotating background */
	display:none;
}

.bigList {
	position: absolute; 
	top: 100%;
	padding: 0;
	color: #666666;
	z-index: 3; 
}

.header {
	position: relative;
	float:left;
	height: auto;
	width: 100%;
    padding: 4.5% 0 3% 0;
	box-sizing: border-box;
}

.logoContainer {
	position: relative;
	float: left;
	height: auto;
	margin: 0;
	width: 100%; /* leave room at the right for closeX */ 
}

.displayLargeLogoContainer {  /* closeX is NOT contained in this - make room for it */
	width: 45%;
}

.logoContainer2 { /* holds the image, sizes the image */
	position: relative;
	padding: 0 0 0 4.5%;
	line-height: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2.5em;
	font-weight: bold;
	color: #fff;
	text-shadow: 1px 1px 4px #000;
	width: 62%;
}

.logo9 {
	width: 100%;
}

.address {
	padding:0 0 0 6.25%;
	line-height: 1.4em; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: .65em;
	font-weight: bold;
	color: #e9e9e9;
	text-shadow: 1px 1px 3px #000;
}

.phone {
	padding: .6em 0 0 6.25%;
	max-width: 100%;
    box-sizing: border-box;
}

.logoWideScreen {
	display:none;
}

.logoMediumScreen {
	display:none;
}

.logoNarrowScreen {
	display: block;
	width: auto;
	height: auto;
	margin: 0 0 0 11%;
	cursor: pointer;
}

.displayLargeLogoNarrowScreen {
	margin: 0 0 0 6%;
}

.tinyScreenMenuContainer {
	display: none; /* openMenuIconContainer opens this */
	position: relative;
	float: right;
	width: 65%;
	min-width: 200px;
	max-width: 250px;
	margin: 3% 3% 8% 5%; 
	padding: 4% 4% 2% 9%;
	border-radius: 15px;
	font-size: 1.04em;
	background-color: #000;
}

.tinyScreenMenuContainerStart {}

.tinyScreenMenuItems {
	width: 100%;
	border: 0;
	border-radius: 5px;
	margin: 0 0 7% 0;
	padding: 1.75% 0;
	cursor: pointer;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: .9em;
	/*font-weight:bold;*/
	white-space: nowrap;
	color: #ccc;
	text-align:right;
	text-shadow: 2px 2px #000;
}

.tinyScreenMenuItems:hover {
	color:#ffffff;
}

.wideScreenMenuFrame { /* wideScreenMenuFrame.src = menubar.php - displays @64em */
	display: none;
	border: 0;
	max-width: 100%;
}

.wideScreenMenuItems {}

.wideScreenMenuItems:hover {
	color:#ffffff;
}

.menuIconContainer {
	position: absolute;
	/*width: 10%;
	max-width: 35px;*/
	height: auto;
	top: 0;
	right: 6%;
	z-index: 1;
	float: right;
	clear: both;
	margin: 0 0 0 0;
}

.menuIconContainer2 { /* used to align the menuIcon vertically */
    /*transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	top: 45%;*/
    position: relative;
}

.menuIcon {
	min-width: 50px;
	width: 50px;
	max-width: 50px;
	height: auto;
	cursor: pointer;
}

.container {
	position: relative;
	float: left; /* to clear tiny screen menu */
	width: 100%;
	max-width: 100%;
	margin-top: 0;
	background-color: transparent;
	z-index: 5; }

.carouselContainer {  /* black expandable container for carousel which is a div that contains carouselFrame and is aligned
                         middle within this container. carousel was added to allow touch to scroll correctly but may not be
						 necessary - please check this! There is an issue with Safari and Opera where when you quickly leave
						 this frame after scrolling with the mCustomScrollbar, the content moves as the mouse moves even though
						 your mouse has "left" the scrollbar - mouseOut. Is this iFrame isssue or jQuery or what??? */
	position: relative; 
	min-height: 650px;
	width: 100%;
	max-width: 100%;
	height: auto;
	/*margin: 0 auto;
	padding: 0;*/
	height: 100%;  /* of container which is windowHeight - header.offsetHeight */
	/*-webkit-overflow-scrolling: touch;
	overflow-y: scroll; */
    border: 0px solid #ff0000;
	background-color: transparent;
}

.carouselFrame {
	min-height: 100%;
	width: 100%;
  	border: 0px solid #ff0000;
	margin: 0;
	padding: 0;
}

.noRepros {
	position: absolute;
	width: 100%;
	height: auto;
	bottom: 2.5%;
	left: 0;
    max-width: 300px; /* fits on iPhone 5c */
	text-align: center;
    transform: translateX(-50%);
    left: 50%;
    z-index: 3;
}

.noReproductions {
    position: relative;
    float: left;
    width: 84%;
    text-align: center;
    margin: 4% 0 0 0;
    font-family: Arial, Helvetica, Verdana, sans;
    font-size: .88em;
    padding: 0 8%;
    line-height: 1.75em;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 1px 1px 0 #222;
}

.noReproductionsSub {
    position: relative;
    float: left;
    width: 94%;
	margin: 3% 0 5% 0;
    padding: 0 3%;
    font-style: italic;
    font-size: .85em;
    font-family: Verdana, sans;
    line-height: 1.7em;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    text-shadow: 1px 1px 0 #000000;
}

.frontSocialIconsContainer { /* holds all three icons */
	position: relative;
    float: left;
    width: 100%;
    height: 100%;
    margin: 2% 0 0 0;
	text-align: center;
}

.frontSocialIconContainer { /* holds individual icons */
	position: relative;
	float: left;
	/*min-width: 28px;*/
	margin: 0 1.5em 0 3em;
    padding: 0;
    text-align: center;
}

.frontSocialIcon { /* size the actual img */
	display: block !important; /* overrided #backgroundImgContainer img - above and 
                               below - which is required for rotating background  */
	height: 50px;
	max-height: 50px;
    min-height: 50px;
	width: 50px;
	cursor: pointer;
}

.frontArtsyWidget {
	border-radius: 0;
	position: relative;
    float: left;
	margin: 0 1em 0 .5em;
    padding: .6em 0;
}

.dialog {
	position: fixed;
	z-index: 5;
	top: 0;
	width: 100%;
	height: 100%; 
	background-color: #000;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	overflow-y: scroll;
	visibility: hidden;
	-webkit-overflow-scrolling: touch; }

.searchHelpCloseBtnContainer {
	display: block;
	position: relative;
	float: right;
	cursor: pointer;
	width: 30px;
	margin: 3.5% 4% 0 0; }

.searchHelpCloseBtn {
	max-width: 100%;  }


/* menubar.php */

.menubarBody {
	background-color: transparent;
	overflow: hidden;
	padding: 0;
	margin: 0;
	width: 100%;
}
	
/* end menubar.php */

/* carousel.php */

.scrolledContent {
	position: relative;
	float:left;
	height: auto;
	width: 100%;
	max-width: 100%;
	padding: 0;
	/*background-color: #FF3333;*/
}

.scrolledContentStart {
	padding: 0 !important;
}

.subContainer{
	max-width: 100%;
    margin: 0;
    padding: 0;
}

.preselect_message {
	font-weight: bold;
	font-size: 1.17em;
	margin: 5% auto 3% auto;
	color: #d7d7d7;
	max-width: 90%;
	/* border: 1px solid #8c8c8c;
	box-shadow: 0 0 5px 0 #d7d7d7;
	border-radius: 4px; */
	padding: 5px 12px;
	font-family: Verdana, Arial, sans-serif;
	line-height: 1.5em;
	background-color: #282828; }

.searchSelector {
	max-width: 100%; }

.thumbnailContainer {
	display: inline-block;
	height:auto;
    margin: 0;
	padding: 3% 5% 5% 5%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

.thumbnailsImg {
	/*display:inline-block;*/
	position: relative;
	height: auto;
	max-height:225px;
	width: auto;
	max-width:100%;
	border:1px solid #fff;
	cursor:pointer;
}

.invisible { /* carousel uses this to hide the refNum, favsHeart, priceCode */
	visibility:hidden;
}

.refNums {
	display:none;
}

.carRefNum {
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 11px;
    color: #FFFFFF;
	text-decoration: none;
}

.checkBoxes {
	height:18px;
	width:20px;
	cursor:pointer;
}

.dollarSigns {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:.85em;
	font-weight:normal;
	color:#E6BB62;
	text-decoration: none;
}

.pageSelectorContainer { /* displays at bottom of carousel if over 64em */
    position: relative;
    width: 300px;
	max-width: 320px; 
    height: 44px;
	margin: 0 auto; 
    padding: 7% 0 10% 0; /* reduce this bottom margin for larger screens */
}

/* end carousel.php */


/* selector.php */

.dropdownsContainerStart {
	margin-top:0; /* was 8% for phones - this lives in an iFrame so set margin-top 
		                    in carouselFrameStart not this container */
}

.dropdownsContainer {
	position:relative;
	float: none;
	width: 94%;
	max-width: 94%;
	margin: 0 auto 8% auto;
	padding: 4% 3% 3% 3%;
	border-radius: 6px;
	overflow: hidden; /* sizeSelector() needs this to work */
}

.dropdownsContainerHide {
	display:none;
}

/* selector.php - spinner */

#spinnerContainer {
	/*display:none;*/
	margin:5% auto;
}

#spinner {
	height:25px;
	width:25px;
	padding:0;
	margin: 0 auto 0 auto;
	position:relative;
	visibility: visible;
	/*top: 50%; 
	transform: translateY(-50%);*/
	-webkit-animation: rotation .6s infinite linear;
	-moz-animation: rotation .6s infinite linear;
	-o-animation: rotation .6s infinite linear;
	animation: rotation .6s infinite linear;
	border-left:3px solid rgba(210,210,210,.15);
	border-right:3px solid rgba(210,210,210,.15);
	border-bottom:3px solid rgba(210,210,210,.15);
	border-top:3px solid rgba(210,210,210,.8);
	/* border-left:6px solid #cccccc; rgba(0,174,239,.15);
	border-right:6px solid rgba(0,174,239,.15);
	border-bottom:6px solid rgba(0,174,239,.15);
	border-top:6px solid rgba(0,174,239,.8); */
	border-radius:100%;
	z-index:888;
	/*background-color:#006633;*/
}

@-webkit-keyframes rotation {
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(359deg);}
}

@-moz-keyframes rotation {
	from {-moz-transform: rotate(0deg);}
	to {-moz-transform: rotate(359deg);}
}

@-o-keyframes rotation {
	from {-o-transform: rotate(0deg);}
	to {-o-transform: rotate(359deg);}
}

@keyframes rotation {
	from {transform: rotate(0deg);}
	to {transform: rotate(359deg);}
}

/* end selector.php - spinner */

.searchByTextGoBtnContainer {
	position:relative;
	float:left;
	width:100%;
	max-width:unset;
	height:auto;
	margin: 0 0 3.5% 0;
	overflow:hidden;
}

.searchByText {
    position: relative;
    float: left;
	width: 67%;
	height: 2.1em; /* must specify height for IE - auto works otherwise */
	max-height:40px;
	margin: 0 2% 0 0;
	padding: 0 4% 0 1%;
	color:#fff;
	font-style: italic;
	font-size: 1em;
	line-height:2.25em;
	text-align: right;
	border: 2px solid #999;
	border-radius: 7px;
	background-color:#000000;
}

.selectorButtons {
    position: relative;
	cursor: pointer;
	height: 100%;
	font-size: 1em;
	background-color: #000;
	padding: 0 0 .5% 0;
	color:#ccc;
	border: 2px solid #999;
	border-radius:7px;
}

.goButton {
	position:relative;
	float:right;
	width:23%;
	height: 2.35em;
	margin:0;
	padding:0;
	line-height: 1em;
	-webkit-appearance: none;
}

.dropdownContainer { /* don't confuse this with dropdownsContainer with the s */
	width: 100%;
	padding:0px; 
	border:0px solid #FF0000;
}

.dropdownSelect {
	visibility:hidden;
}

.dropdowns{
	float: left;
	width:33%;
}

.favsClearButtonsContainer {
	position: relative;
	float:left;
	width: 100%;
	max-width:unset;
	margin:.5% auto 0 auto;
}

.advSearchContainer {
	height: 2.15em;
	margin-top:0;
    text-align:right;
	background-color:#000;
	cursor:pointer;
	border:2px solid #999;
	border-radius: 7px;	
}

.clearFormButtonContainer {
	position: relative;
	float: right;
	width:99%;
	height:2.2em;
	margin:5% auto 0 auto;
	padding:0;
	text-align: center;
	background-color:#000;
	border: 2px solid #999;
	border-radius: 7px;
	cursor: pointer;
}

.clearFormButton {
	position: relative;
	width: 100%;
	height: 100%;
	font-family: helvetica, sans;
	font-size: .92em; 
	line-height: 2.25em;
	color: #ccc;
	text-align: center;
	text-decoration: none;
	-webkit-appearance: none; /* remove default 'appearance' of button */
	background-color: transparent; /* remove default 'appearance' of button */
    border: 0; /* remove default 'appearance' of button */
}

.favsButtonContainer {
	position: relative;
	float: left;
	margin: 4% auto 0 auto;
	width: 99%;
	height:2.15em;
	background-color:#000;
	border: 2px solid #999;
	border-radius: 7px;
}

.favsButton {
	width: 88%;
	float: left;
	border:0 !important;
	padding:0 !important;
	background-color:transparent !important;
	color:#ccc !important;
	font-size:.98em;
}

.favsButtonContainer3 { /* carousel loads main.favsMenuHTML into dropdowns container */
	margin: 0 auto 8% auto;
	padding:0;
	width: 98%;
	background-color:#727272;
}

.favsButton3 {
	font-family: Arial, Helvetica, sans-serif;
	width: 100%;
	font-size: 1.1em;
	margin: 0;
	color: #cecece !important;
	font-weight: bold; }

.miniMenuButtons {
	width: 100%;
	line-height: 2.1em;
	margin-bottom: 6%;
	-webkit-appearance: none; /* removes default display for selects */
	-moz-appearance: none;
}

.pageSelectorContainerSearchSelector { /* used in selector.php */
	display:block;
	float:left;
    bottom: 0;
	margin: 4.5% auto 0 auto;
	height:44px;
	width:100%;
	padding: 1% 0;
	border:2px solid #848484; 
	border-radius:7px; 
	background-color:#2b2b2b;
}

.pageSelector { /* used in selector.php and carousel.php */
	display: inline-block;
	position:relative;
    width: auto;
    height: 100%;
    margin: 0 auto;
}

.removeMinWidth { /* remove max-width from pagesDropdownLegend when showAll is on */
	min-width:unset;
}

.centerPageSelector {
	display:inline-block;
}

label {
	position:relative;
	float:left; /* bill addedd */
	transform: translateY(-50%); /* bill addedd */
	-ms-transform: translateY(-50%); /* bill addedd */
    top: 50%; /* bill addedd */
}

label:after {
    content:url('https://www.omnibusgallery.com/graphics/selectArrow4.png');
	right: 0;
    height: 30px;
    width: 28px;
    background-color: #bbbbbb;
    border-radius: 0 9px 9px 0;
    border-bottom: 2px solid #999;
    border-right: 2px solid #999;
    border-top: 2px solid #999;	
	/*font:1.4em "Consolas", monospace;
    color:#ccc;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    right:-15px;*/
	top: 50%;
    position: absolute;
    pointer-events: none;
	transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}

label:before {
/*  content:''; */
    /*right:6px;
	top:0px;*/
/*  width:100%; /*20px;*/
/*	height:95%; /*20px;*/
    /*background:transparent;
    position:absolute;
    pointer-events:none;
	transform: translateY(-50%); 
	-ms-transform: translateY(-50%); 
    top: 50%; 
	left:0;*/
}

.pagesDropdown, .postersPerPageDropdown { /* selector.php and carousel.php */
	position:relative;
	float:left;
	height:auto;
	width:70px;
	font-size: .96em;
	cursor:pointer; 
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	background-color: #000;
	color: #ccc;
	padding: 5px 0 5px 5px;
	border: 2px solid #999;
	border-radius: 9px;
}

.postersPerPageDropdown {
	width:135px;
}

.postersPerPageDropdownCentered {
	float:none;
}

/* these styles remove the dropdowns' select arrow in
   Internet Explorer so we can format a custom one. Other
   browsers respond to appearance:none   */

.pagesDropdown::-ms-expand {
    display: none;
}

.postersPerPageDropdown::-ms-expand {
    display: none;
}

.pagesDropdownLegend {
	position: relative;
	float: left;
	padding: 0 11px;
	height: 25px;
	width: auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: .92em;
	line-height: 1.75em;
	color: #ccc;
	text-align: left;
	transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	top: 50%;
}

.postersPerPageDropdownLabel:after {
	/*right:-54px;*/
}

/* end selector.php */

/* aboutUs.htm */

.aboutUs {
	position:relative;
	width:90%; 
	max-width:600px;
	margin: 0 auto;     
	padding: 0 4% 5% 6%;
	font-family:Verdana, Arial, Helvetica, sans-serif; /*Garamond, Georgia, Times, serif; *//*Times New Roman, Times, serif;*/
    font-size: 1.05em; /*1.45em;*/
    color:#E8E8E8; /* silver */
	cursor:pointer;
	line-height:1.55em; /*1.35em;*/
	overflow: hidden; 
	border:0;
}

.socialIconsContainer { /* holds ALL icons */
	position: relative;
	float: left;
	width: 100%;
    height: auto;
    right: unset;
    margin: 0 0 9% 0;
}

.socialIconContainer { /* holds individual icons */
	position: relative;
    float: right;
    margin: 0 1.5em 0 0;
    padding: 0;
}

.socialIcon {
	height: 28px;
	width: 28px;
	cursor: pointer;
}

/* end aboutUs.htm */

/* newsletter.htm */

.newsletterSignUpContainer {
	position: relative;
	height: 40%; /* header is 20% */
	width: 90%;
	max-width:275px;
	margin:0 auto;
	transform:translateY(-50%);
	-ms-transform: translateY(-50%);
	top:40%;
}

.mc_embed_signup {
	position:relative;
	float:left;
	margin:0;
	padding: 0 0 0 0;
	width:100% !important;
	transform: translateY(-50%) !important;
	-ms-transform: translateY(-50%) !important;
	top: 50% !important;
}

.newsletterSignupEmailAddress {
	position: relative;
	float: left;
	width: 90%;
	min-width: 130px;
	font-size: 1.175em;
	line-height: 2.3em;
	height: 40px; /* must specify for IE */
	padding: 0 0 2px 8px; /* must specify for IE */
	border-radius:5px;
}

.newsletterSignupButtonContainer {
	position:relative;
	float:left;
	margin:7.5% 0 0 0;
	width:90%;
}

/* end newsletter.htm */

/* email_favs.htm */

.emailFavsFrame {
	position:relative; 
	width:100%; 
	min-height:100%; 
	margin:0; 
	border:0;
}

.emailContentsContainer {
	position: relative;
    float: left;
    width: 100%;
    height: auto;
	transform: translateY(0);
	top: 0;
}

.emailUsContainer {
	position: relative;
	float: left; /* remove for larger screens */
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
}

.emailFavsMessage {
	border:0px solid #cccccc; 
	width:90%; 
	padding:0 3% 0 7%; 
	margin:0 auto 8% auto; 
	color:#CCCCCC; 
	line-height:1.5em; 
	font-size:1em; 
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

/* end email_favs.htm */

/* searchHelp.htm */

.searchHelpContainer {
	padding:0 0 10% 0;
	text-align:center;
	font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.05em;
    color:#E8E8E8; /* silver */
	cursor:pointer;
	line-height:1.55em; 
	overflow:visible;
	float:left;
	width:100%;
	max-width:none;
}

.searchHelpContent { 
	position:relative;
	width:90%;
	max-width:680px;
	margin:0 auto;
	line-height:1.6em;
}

/* end searchHelp.htm */

/* email_us.htm, emailfavs.htm */

.buttons {
	position: relative;
	cursor: pointer;
	font-size: .8em;
	background-color: #000;
	color:#a4a4a4;
	border: 1px solid #ccc;
	border-radius: 7px;
	padding: .25em 10px;
	margin: 0 0 6% 0;
	line-height: 2em;
	-webkit-appearance: none;
}

.buttons:hover {
    background-color: #666;
    color: #000;
}

.closeX_Container {
	display: none;
}

/* email_us.htm, emailfavs.htm */

/* largeViewer which is dialog.innerHTML created by createLarge() */

.largeViewerHeader {
	/*display:none;*/ /* hidden on tiny screens */
}

.displayLargeHeader {
	/* there's a logo in displayLarge. let it spill over the 35px 
	height set above and set a larger marginBottom on the header to
	push Container1 down. the closeX will still sit in the middle of
    the header since that height is still at 35px  */
	display: block;
	position: relative;
	float: left;
	width: 100%;
	padding: 4.5% 0 3% 0;
}

#aboutHeader {
	height: .5%;
	padding-bottom: 0;
}

#openNewWindowBtnContainer {
	display: none;
}

#openNewWindowBtn {
	position: relative;
}

.largeViewerCloseBtnContainer {
	display: none;
}

.largeViewerCloseBtn {
	width: auto;
	height: auto;
	max-width: 100%;
}

.largeViewerPrevNextBtnContainerWideScreen {
	display:none;
}

.largeViewerPrevNextBtnArrow {
	/*position: relative;
	float: left;
	height: 100%;*/
    max-height: 35px;
}

.largeViewerPrevNextBtnLabel {
	display: none;
	position:relative;
	/* float left and right set inLine style */
	width: 45px; 
	margin:0; /* margin-left and margin-right set inLine style */
	padding:0; 
	cursor:pointer; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size:.92em; 
	font-weight:bold;
	color: #7a7a7a;
	transform: translateY(-50%);
	-ms-transform: translateY(-50%); /* older IE */
	top: 50%; }

.largeViewerContainer1 {
    position: relative;
	float: left;
    width: 100%;
	height: 62%;
	max-height: 62%;
    margin: 0; /* no largeViewerHeader for tiny screens so need this margin */
	padding: 0;
	right: 0;
	left: 0;
	text-align: center;}

.largeViewerContainer3 {
	position: relative;
	width: auto;
	min-width: 300px;
	max-width:100%;
	height: 100%;
	margin: 0 auto; }

.largeViewerImgBtnsContainer {
	position: relative;
	float: left;
	max-height: 100%;
	margin: 3% 3% 0 3%;
	padding: 0;
	text-align: center;
	z-index: 2; /* so you can click the favs heart */}

.largeViewerImgBtnsContainerWideImg {
	float:none; }

.largeViewerImg {
	border: 0; /* border added in formatLargeView() - don't want border until image fully loaded */
	cursor: pointer; 
	height: auto;
	width: auto;
	max-width: 100%;
	max-height: 100%; /* IE */
	margin: 0;
	padding: 0;}
	
.largeViewerBtnsContainer {
	height: 35px; /* same height as prev/next arrows */
	padding: 15px 0 0 0; }

.largeViewerFavsHeartContainer {
	display: inline-block;
	margin-top: 5px;}

.displayLargeBtnsContainer {
	display: none!important;
	height: 0 !important;
	padding: 0 !important; }

.largeViewerPrevNextBtnContainerTinyScreen {
	cursor:pointer; }

.largeViewerFavsHeart {
	width: auto; 
	height: auto; 
	max-height: 28px; 
	position: relative; 
	cursor: pointer; }

.posterInfoContainer { /* very narrow under image on phones */
	position: relative;
	float: left;
	width: 100%; 
	max-width: 100%;}

.displayLarge .posterInfoContainerWideImg { /* no favsHeart with padding */
	padding: 20px 0 0 0; }

.posterInfo {
	text-align: left;
	padding: 0;
    width: 400px;
	max-width: 100%;
    margin: 0 auto; }

.posterStatContainer {
	width: 90%; 
	float: left; 
	line-height: 1.6em;
	margin: 0 0 0 5%; }

.posterStats {
	position: relative; 
	height: 100%;
	margin: 0;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: .9em;
	font-weight:normal;
	color:#FFFFFF; }

.posterStatsTitleContainer {
	margin-bottom: 10px;
	padding: 0 0 0 3%;
	text-align: center; }

.posterStatsTitle {
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 1em;
	font-weight: bold;
	color: #ccc;
	line-height: 1.6em; }

.redSquareContainer {
	width: 8%; 
	float: left; }

.redSquare {
	text-decoration: none;
	border: 0px solid #000000;
	margin: 0;
	height: 8px;
	width: 8px; }

.posterStatsHeading { /* REFERENCE, ARTIST, CONDITION, etc labels */
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size:.9em;
	font-weight:bold;
	color:#999999; }

.commentsContainer {
	position: relative; 
	float: left;
	clear: both; /* IE needs this */
	width: 100%;
	margin-left: -8px; }

.comments {
	padding: 6% 3%;
	font-size: .95em;
    line-height: 1.5em;
	text-align: left;
	max-width: 320px; }

.displayLarge .comments {
	padding-bottom: 0;}

.commentsWideImg {
	margin: 0 auto;}

#displayLargeTopGalleryBtnContainer {
	position: relative;
    float: right;
    right: 7%;
    padding: 4% 0 0 0;
    width: 86px;}

#displayLargeTopGalleryBtn {
	margin: 0;
    padding: 7% 0;
    font-family: verdana, arial, sans-serif;
    font-size: .75em;
    text-align: center;
    line-height: 1.4em; }

.h1Container { /* rename this pleasse */
	position: relative;
    float: left;
	clear: both;
    width: 100%;
	padding: 7% 0 7% 0; }

.dialog .h1ContainerBottom { /* "An original poster from the OG" */
	display: none; }

.displayLarge .h1ContainerBottom { /* "An original poster from the OG" */
    padding: 5% 0 2% 0;
    text-align: center; }

.h1ContainerBottomWideImg {
    padding: 9% 0 7% 0;
	text-align: center; }

#largeViewerBottomCloseBtnContainer {
	position: relative;
    float: left;
    width: 100%;
    padding: 0;
    margin: 0; /* margin is in button - below - for MS Edge */ }

#largeViewerBottomCloseBtn {
	width: 150px;
    margin: 7% auto 8% auto;
    padding: 1%;
    font-family: verdana, arial, sans-serif;
    font-size: .8em; }

#historyBottomCloseBtnContainer {
	position: absolute;
	bottom: 0;
	width: 180px;
	margin: 0 auto 6% auto;
	padding: 1%;
	right: 0;
	left: 0;
	font-family: verdana, arial, sans-serif;
	font-size: .85em;
	text-align:center;
}

.historyBottomCloseBtnContainer { /* some additions to historyButton styling */
	position:relative !important;
	margin-top:8% !important;
}

/* end largeViewer -> dialog.innerHTML */


/* displayLarge.php */

.newWindowHeader {
	height:auto; /* the newWindowViewer does have a logo */
}

/* end displayLarge.php */


@media screen and (min-height: 28em) { /*  /* at least 448 high - user makes screen super low */

	.largeViewerContainer1 {
    	height: 82%;
    	max-height: 82%;
    	margin: 0 auto; }

	.posterInfoContainer {
		padding: 3% 0 0 0; }
}


/* media rule to target webkit browsers only */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	#pagesDropdown {/*padding-right:18px;*/}
}


@media screen and (min-width: 20.5em) { /* at least 321 wide */ }


@media screen and (min-width: 28em){ /* at least 448 wide */
	.pageSelectorContainer {
		padding: 5% 0 8% 0;
	}

	#displayLargeTopGalleryBtnContainer {
		padding: 2.5% 0 0 0;
    	width: 130px;
	}

	.posterStatContainer {
		margin:0 0 0 12%;
	}

	.comments {
		max-width: 330px;
		padding: 8% 0; /* remove left and right padding */
	}
}






	
@media screen and (min-width: 32em){ /* at least 512 wide */
	
	.headerBackgroundImg {
		min-width:100%;
    	min-height: 100%;
	}
	
	.header {
		padding: 4% 0 0 0;
	}

	.logoContainer2 {
		width: 	55%;
	}

	.address {
		font-size: .85em;
	}
	
	.tinyScreenMenuContainer {
		float: right;
		margin: 0 3% 0 0;
		padding: 2% 4% 1% 0;
	}
	
	.tinyScreenMenuContainerStart {
		padding: 1.5% 3% .1% 0;
		margin: 6% 5% 0 0;
	}

	.noRepros {
		bottom: 3%;
		left: 1.5%;
		max-width: 350px;
		transform: translate(0,0);
	}

	.noReproductions {
		width: 84%;
		padding: 0 8%;
		font-size: 1.05em;
	}

	.noReproductionsSub {
	    font-size: .96em;
	}

	.frontArtsyWidget { 
		margin: 0 1em 0 2.3em;; /* moves all icons to the right */
	}
	
	.carouselFrame {
		/*min-height: 450px;*/
	}
	
	.dropdownsContainer {
		float: none;
		clear: both;
		width: 80%;
		margin: 1% auto 5% auto;/* for firstLoad we addClass .dropdownsContainerStart */
		padding: 4% 3.5% 3.5% 3.5%;
	}
	
	.newsletterSignUpContainer {
		max-width:450px;
	}
	
	.newsletterSignupEmailAddress {
		width:50%;
		border-radius: 6px;
	}
		
	.largeViewerHeader {
		display: block;
		position: relative;
		float: left;
		width: 100%;
		height: 35px; /* keeps the closeX positioned nicely */
		padding: 2% 0;
	}
	
	.displayLargeHeader {
		padding: 3% 0 9% 0;}
	
	#openNewWindowBtnContainer {
		display:block;
		position: relative;
    	float: left;
    	width: auto;
    	margin: 0 0 0 4%;
		transform:translateY(-50%);
		-ms-transform: translateY(-50%);
		top:50%;
    	color: #7a7a7a;
    	font-size: .8em;
    	font-family: verdana, sans-serif;
    	font-weight: bold;
    	cursor: pointer;}
	
	.largeViewerCloseBtnContainer {
		display: block;
		cursor: pointer;
		max-width: 2%;
		right: 2.5%;
    	position: absolute;	}

	#largeViewerCloseBtn {
    	width: auto;
    	height: auto;
    	max-width: 100%;}

	#displayLargeTopGalleryBtnContainer {
		padding: 2% 0 0 0;
		width: 130px;
		right: 5%;}
	
	.displayLargeContainer1 {
		height: 82%; }
	
	.largeViewerImgBtnsContainer {
		margin: 0 auto 0 auto;}

	.largeViewerBtnsContainer {
		padding: 2.5% 2% 0 2%; }
	
	.posterStatsTitleContainer {
		padding: 0; }

	.posterStatContainer {
		margin:0 0 0 15%; }
	
	.comments {
		padding: 3% 0 6% 0; /* remove left and right padding */
    	max-width: 450px; }
	
	.subContainer {
		width: 100%;
		padding: 0 0 5% 0; }

	.thumbnailsImg {
		position: relative;
		height: 225px;
		width: auto;
		border: 1px solid #fff; }	
	
}




@media screen and (min-width: 32em) and (min-height: 64em) { /* at leasst 512 wide and at least 1024 high */ }


@media screen and (min-width: 32em) and (min-height: 28em) { /* at leasst 512 wide and at least 448 high */ 

largeViewerContainer1 {
    height: 72%;
    max-height: 72%;}
}


@media screen and (min-width: 36em){ /* OVER 592px */
	.logoNarrowScreen {}

	.hideBackground {
		display: block !important; }
	
	.dropdownsContainer {
		float: right;
		margin: 1% 3% 2.5% 0;
		padding: 2%;
		max-width: 290px;
		/*box-shadow: 1px 2px 2px #b4b4b4;*/
		background-color:#4e4e4e; /* #3b3b3bbd; */
		/*border: 1px solid #1a1a1a;*/
	}

	.pageSelectorContainer {
		padding: 5% 0 4% 0;
	}

	.emailUsContainer {
		float: none;
	}

	.preselect_message {
	    max-width: 75%; }
}


@media screen and (min-width: 47em){ /* OVER 758px - base rules for this width */

	.headerBackgroundContainer {
		top:0;
		height:100%;}
	
	.headerBackgroundImg {
		min-width:100%;
		min-height: 100%;}
		
	.header {
    	padding: 4% 0 1.5% 0;	}
	
	.largeViewerHeader {	
		height: 30px;
		padding: 1.75% 0 4% 0; }
	
	.displayLargeHeader {
		padding: 3.5% 0 9.5% 0; }

	#aboutHeader { /* socialIconsContainer has the margin to shove the text down */ }

	.logoContainer2 {
		width: 35%;}

	.address {
		font-size: .85em;}

	.displayLargeLogoContainer {
		width: 40%;}

	#displayLargeTopGalleryBtnContainer {
    	padding: 1% 0 0 0;}
	
	.logoNarrowScreen {
		display:none;
	}
	
	.logoMediumScreen {
		display: block;
		margin: 0 0 0 10%;
		max-width: 100%; /* logoContainer is 100% for tinyScreens */
		cursor: pointer;
	}
	
	.logoWideScreen {
		display:none;
	}
	
	.searchHelpContainer {
		padding:0;
    	height: 95%;
    	text-align: center;
    	overflow: visible;
    	float: left;
    	width: 100%;
    	max-width: none;
	}
	
	.menuIconContainer {
		position: absolute;
		right :5%;
		max-width: 40px;
		z-index: 2; /* 1 is logoContainer */
	}
	
	.searchHelpContent {
		transform:translateY(-50%);
		-ms-transform: translateY(-50%);
		top:44%;
	}
		 
	.refNums {
		display:block;
	}
	
	.tinyScreenMenuContainer {
		float: right;
		max-width: 200px;
		margin: 0 2% 2% 0;
    	padding: 1.5% 3% 0 3%;
	}
	
	.tinyScreenMenuContainerStart {
		margin: 4% 4% 0 0;
	}
	
	.carousel {
		min-height:600px; /* hack but won't size by percentages */
	}

	.dropdownsContainer {
		margin: 2.75% 4% 5% 1%;
		padding: 1.65% 1.2%;
		max-width: 300px;
	}
	
	.dropdownsContainerStart {
		margin: 3% 2.5% 0 0;
	}
	
	.pageSelectorContainerSearchSelector {
		display:block;
		position:relative;
		width: 94%;
		max-width:94%;
    	margin-bottom: 0;
		padding:2.5%;
	}
	
	.pagesDropdown, .postersPerPageDropdown {
		font-size:1em;
	}

	.pageSelectorContainer {
		padding: 5% 0 3% 0;
	}
	
	.thumbnailContainer {
		padding: 3% 2.5% 0 2.5%;
	}
	
	.buttons {
		margin: 0;
		padding: .2em 3.75% .15em 3.75%;
		line-height: 2em;
	}

	.emailFavsBtn { 
		width: 35%;
		max-width: 200px;
		min-width:170px;
	}

	.resetFavsBtn {
		width: 35%;
		margin: 0 4%;
		max-width: 200px;
		min-width:170px;
	}

	.favsBackBtn {
		width: 40%;
		max-width: 270px;
		min-width: 270px;
		margin: 3% 0 0 0;
	}
		
	.callUsContainer {
		display:none;
	}
	
	#openNewWindowBtnContainer {}
	
	.largeViewerCloseBtnContainer {
		max-width: 3.5%;
	}

	.largeViewerContainer1 {
		width: 100%;
		height: 64%;
		max-height: 64%;
		margin: 0 auto;
		overflow: visible; }
	
	.displayLargeContainer1 {
		height: 76%;
	}
	
	.moveLargeViewerContainer1 {
		width: 82%;
    	margin: 0 6% 0 12%;
	}
	
	.largeViewerContainer3x { 
    	position: relative;
    	/*float: left;*/
		overflow: hidden;
		min-width: inherit;
		width: auto;
		max-width: 86%;
		height: auto; /*100%;*/
		max-height: 100%;
    	transform: translate(-50%, -50%);
    	left: 50%;
		top: 50%; }

	.largeViewerContainer3 { 
		position: relative;
		min-width: inherit;
		width: auto;
		max-width: 86%;
		height: auto; }

	.largeViewerContainer3_short_image { 
		transform: translateY(-50%);
		top: 35%; }

	.displayLarge .largeViewerContainer3_short_image { 
		transform: translate(-50%, -50%);
		left: 50%;
		top: 50%; }

	.largeViewerContainer3_side_by_side{ /* image and info are side by side - 2 columns for narrower images */
		float: left; 
		transform: translate(-50%, -50%);
		left: 50%;
		top: 50%;
		max-height: 100%; }

	.largeViewerContainer3WideImg {
    	transform: translate(-50%, -50%);
		top: 50%;
    	left: 50%; }

	.largeViewerContainer3TinyImage {
    	/*transform: translate(-50%, -50%);
    	left: 50%;*/
		top: 40%;
	}
	
	.largeViewerBtnsContainer {
		/*width: 100%;
		max-width: 100%;*/ }
	
	.largeViewerPrevNextBtnContainerTinyScreen {
		display:none; }
	
	.largeViewerPrevNextBtnContainerWideScreen {
		display: block;
		position: absolute;
		width: 5%; /*45px;*/ /*70px;*/
		/*height: 40px; *//* 45px */
		/*margin:0;*/
		/* right and left 2% set inLine styles */
		transform:translateY(-50%);
		-ms-transform: translateY(-50%);
		top: 50%;
		cursor:pointer; 
		z-index:1; /* behind largeViewerContainer1 */
	}

	.largeViewerImgContainerWideImg {
		/*height: 100%;
		max-height: 100%;*/ }
	
	.posterInfoContainer {
		width: auto;
		max-width: 350px;
		margin-top: 10%;}

	.posterInfoContainerTinyImage {
		margin-top: 0;}
	
	.posterInfoContainerWideImg {
		margin: 0;
		/*padding: 8% 0 0 0;*/
		width: 100%;
		max-width: 100%; }

	.posterInfo {
		width: 350px;
	}

	.posterInfoWideImg { /* large phones and iPad in portrait mode */
		width: 400px;
	}
	
	.posterStatsTitleContainer {
		padding: 0 0 0 10%;
		text-align:left;
	}
	
	.posterStatsTitleContainerWideImg {
		padding: 0;
		text-align:center;
	}

	.posterStatContainerWideImg {
    	margin: 0 0 0 12%;
	}

	.commentsContainer {	}

	.commentsContainerWideImg {	}

	.comments {
		max-width: 425px;
	}
		
	#largeViewerBottomCloseBtnContainer {
		display:none;
	}
	
	.h1ContainerBottomWideImg {
		padding: 8% 0 6% 0;
	} 

	.h1WideImg {
    	max-width: initial;
	}
	
	.newsletterSignUpContainer {
		max-width: 550px;
	}
	
	.newsletterSignupButtonContainer {
		margin:0;
		width:44%;
		min-width: 250px;
    	text-align: right;
	}

	.newsletterSignupEmailAddress {
		width:50%;
	}

	/* formatting actually for 64em but since menuBar is in an iFrame
       with no scrollBar it's width is 16px "less" than the containing 
	   window. The iFrame is not displayed at this point (under 64em)
	   but when it display because the container is 64em we need the
	   menuBar items to be formatted for that width but they will still
	   have rules for under 64 applied because their container is 15px
	   narrower. So, apply these rules BEFORE the iFrame appears and you
	   won't see a "flash" of non-formatted menuItems as you widen window */
	 
	.wideScreenMenuContainer{
		position:relative; 
		width: 98.5%;
		float: right;
		padding: 1.2% 2.5% 0 0;
		text-align:right;
	}

	.wideScreenMenuItems {
		position:relative;
		float:right;
		width:auto;
		padding: 0 0 2.5em 0;
		border:0;
		border-radius:0;
		cursor:pointer;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		color:#b1b1b1;
		white-space:nowrap;
		font-size:.85em;
		margin:0 0 0 15px; /* set margin so menuItemsContainer width can be "auto" */
	}
}


@media screen and (min-width: 47em) and (min-height: 28em){ /* at least 758 wide and at least 448 (608) high */		
	.largeViewerContainer1 {
		height: 83%;
	    max-height: 83%; }

	.displayLargeContainer1 {
		height: 80%;
	}
	
	.comments {
		padding: 20px 0 0 3px;}

	.emailContentsContainer {
		transform: translateY(-50%);
		top: 35%;
	}

	.emailFavsMessage {
		margin: 0 auto 4% auto; 
	}
}

@media screen and (min-width: 47em) and (min-height: 40em){ /* at least 758 wide and at least 640 high */		}


@media screen and (min-width: 63em) {  /*  At least 1008 wide - Base rules for this width */
	/* this rule is for Opera / Chrome / IE / Edge. these selected elements are in an iFrame
    with NO scrollbars. when bigger window WITH scrollbar is 1024 wide WITH this iFrame doc
 	WITHOUT a scrollbar thinks it's 1038 wide. these rule trigger when the iFrame with NO
	scrollbar is 1008 wide and therefore the containing document WITH scrollBar is 1024 */
	.dropdownsContainer {
		display: block;
	}
}

/* detect Firefox. iFrames' documents WITHOUT scrollBars are same size as their containers'
   document WITH scrollBar so dropdownsContainer gets opened in Firefox when the window is
   1024 wide, whereas other browsers need to display it when the window is only 1008 wide */
@media all and (min--moz-device-pixel-ratio:0) and (min-resolution: 3e1dpcm) {
  @media screen and (min-width: 63em){
	.dropdownsContainer {
		display: none;
	}
  }
  @media screen and (min-width: 64em){
	.dropdownsContainer {
		display: block;
	}
  }
}

@media screen and (min-width: 64em) {  /*  At least 1024 wide - Base rules for this width

	Note: Everything below the header in this site lives in carouselFrame which
	does NOT have scrollbars. So, if a scrollbar appears on body but not on the
	iFrame contained in it the media rules will trigger first on the body because
	the scrollbar makes it narrower, and second then on the iFrame after it gets
	20px wider. Create rules 1.25em less for items in the iFrame!
							 
	@65.12em works for Firefox with vertical scrollbar displayed not with Opera/Chrome */
		
	.headerBackgroundContainer {
		height: unset;
		top:0;
	}
	
	.headerBackgroundImg {
		width:auto;
		max-width:100%;
		height:auto;
		max-height:none;
		margin-top:2.15%;
	}

	.header {
		/*height: 18%;*/
		padding: 2.3% 0 0 0
	}
	
	.logoContainer {
		z-index:2; /* menubar will cover this */
	}

	.logoContainer2 {
		width: 33%;
		padding: 0 0 0 3%;
	}

	.address {
		padding: 0 0 0 4.5%;
		font-size: 1.2em;
	}

	.phone {
		line-height: 2em;
	}
	
	.displayLargeLogoContainer {
		width: 27%;
	}

	#displayLargeTopGalleryBtnContainer {
    	right: 4%;
	}
	
	.logoWideScreen {
		display: block;
		position: relative;
		max-width: 100%; 
		margin: 0 0 0 10%;
		cursor: pointer;
	}

	.logoMediumScreen {
		display:none;
	}

	.logoNarrowScreen {
		display:none;
	}
	
	.wideScreenMenuFrame {
		display: block;
		position: absolute;
		width: 100%;
		height: 80px;
    	margin: 0;
		padding: 0;
		z-index: 2; /* get above logoContainer */
	}
	
	.menuIconContainer {
		display:none;
	}

	.wideScreenMenuContainer { 
		margin: 0;
		padding: .9% 2.5% 0 0;
	}
	
	.wideScreenMenuContainer2 { /* container2 loads inside container1 so we don't
	                              want to have margin and padding on it too */
		margin:0;
		padding:0;
	}
	
	.container {
		position: relative;
		float: left;
		width: 100%;
		margin: 0;
		padding: 0;
		z-index: 2; /* this is tucked up under menu2 and selector to move pageSelector up but in order to click pageSelector controls the container need to be on top */ 
	}
	
	.carouselContainer { /* black expandable container for carousel which is a div that contains carouselFrame and is aligned
                         middle within this container. carousel was added to allow touch to scroll correctly but may not be
						 necessary - please check this! There is an issue with Safari and Opera where when you quickly leave
						 this frame after scrolling with the mCustomScrollbar, the content moves as the mouse moves even though
						 your mouse has "left" the scrollbar - mouseOut. Is this iFrame isssue or jQuery or what??? */
		position:relative;
		max-height:none;
		margin: 0px auto 0px auto;
	}

	.carouselFrame {
		width: 100%;
		min-height: 470px;
 		border: 0px solid #fff000;
	}
	
	.carouselFrameStart {
		margin-top: -3%;
	}

	.subContainer {
		padding: 0 0 3% 0;
		text-align:center;
	}

	.preselect_message {
	    max-width: 60%;
		margin: 2% auto 4% auto;
    	padding: 8px;
    	font-size: 1.35em; }
			
	.dropdownsContainer {
		/*display: block;*/
		margin: 2.75% 4% 5% 1%;
		padding: 1.25% 1%;
		max-width: 325px;
	}
	
	.dropdownsContainerStart {
		/*margin: 2% 5% 0 0;*/
	}
	
	.tinyScreenMenuContainer {
		display:none !important;
	}
		
	.largeViewerHeader {
    	padding: 1% 0;
	}
	
	.displayLargeHeader {
		padding: 2.5% 0 5% 0;
	}
	
	#openNewWindowBtnContainer {
		margin: 0 0 0 2.25%;
		font-size: 1em;
	}
	
	.largeViewerCloseBtnContainer {
		max-width: 3%;
	}
		
	.largeViewerBtnsContainer { 
		margin: 0 auto 0 auto; /* commentsContainer and posterInfoContainer have top margins instead
		                         if this had one, the imgBtnsContainer would be taller and very short 
								images aligned vertically in largeViewerContainer3 will sit above
							   posterInfo which is what we're trying to eliminate in the firat place */
							   
		padding: 15px 0 0 0; /* this container gets wider if large image so don't use % */ }
	
	.displayLargeContainer1 {
		height: 72%;
    	min-height: unset;	
	}
		
	.displyLargeImgBtnsContainer { 
		height: auto;
	}

	.displayLargeImg { /* iPad mini */
		max-height: 600px;
	}
				
	.posterInfoContainerWideImg { /* below image - no close button so need space */
		padding: 2.5% 0 0 0; /* comment container adds bottom padding - even if it's empty */
	}

	.displayLarge .posterInfoContainerWideImg {
		padding: 6% 0 0 0;
	}
	
	.posterInfoWideImg {
		width: 400px;
	}
	
	.posterStatsTitle {
		font-size: 1.02em;
		line-height: 1.4em; }
	
	.comments {
		float:left;
		padding: 25px 0 25% 0;
		min-width: 325px;
	}

	.commentsWideImg {
		float: none;
		padding: 5% 0 25% 0;
		min-width: 325px;
	}

	.h1ContainerBottom {
		padding: 4% 0 0 .5%; }

	.newWindowHeader { /* displayLarge.php */
		margin-bottom:5%;
	}

	.searchByTextGoBtnContainer {
    	float: right;
		min-width: 235px;
	}
	
	.favsClearButtonsContainer {
		width: 100%;
		max-width: unset;
		min-width:235px;
    	float: right;
    	clear: both;
		margin:0 auto 0 auto;*/
	}

	.closeX_Container {
		display: table-cell;
		vertical-align: middle;
		text-align: right;
	}

	.carRefNum {
    	font-family: Verdana, Arial, Helvetica, sans-serif; 
    	font-size: 11px;
    	color: #FFFFFF;
		text-decoration: none;
	}

	.splashContainer {
		height:440px;
   		width:560px;
	}
	
	.newsletterSignUpContainer {
		max-width:600px;
	}

	.mc_embed_signup {
		float: right;
	}
	
	.dialog {
     /* must use position:absolute so that the dialog appears above the screen below. The
        top and transform styles will center the dialog vertically within any screen size
	    but becasue we're using position:absolute we cannot use marginLeft/Right: auto to
	    align it horizontally so that is done by calculating the correct marginLeft in
	    createLarge, help(), contactUs() etc */ 	   
	  	overflow-y:scroll;
	  	z-index:5; /* cover banner and screen */
		top:0;
		visibility:hidden;
		width:100%;
	}
	
	.pageSelectorContainer {
    	padding: 4% 0 0 0;
	}

	.pageSelectorContainerBottom {
		padding: 3% 0 0 0;
	}
	
	.thumbnailsImg {
		position: relative;
		height: 250px;
		width: auto;
		border:1px solid #fff;
	}

	.thumbnails {
		display:inline-block;
		width:auto;
		height:235px;
		position:relative;
		background-color:#000000;
		border: 0px solid #FF0000;
		padding:0 4% 6% 4%;
		text-align:center;
	}

	.goButton {
		position:relative;
		width:27%;
		float:right;
		margin: 0;
	}

	.dropdowns{
		float: left;
		width:33%;
	}

	.dropdownSelect {
		visibility:hidden;
	}

	.searchByText {
		width: 64%;
		margin:0 1.5% 0 0;
	}

	.seachButton {
		width: 38%;
		float: left;
	}
	
	.favsButtonContainer {
		width:99%;
	}
	
	.favsButtonContainer3 {
		margin: 0 auto 5% auto;
	}

	.favsButton {
		color:#ccc;
		width: 100%;
		margin:0;
	}

	.emailFavsBtn { 
		width: 35%;
		max-width: 250px;
	}

	.resetFavsBtn { 
		width: 35%;
		margin: 0 4%;
		max-width: 250px;
	}

	.favsBackBtn { 
		width: 40%;
		max-width: 280px;
	}
	
}


/* NOTE: styles within iFrames exist below! iFrame widths set to 100%
   so the iFrame is the width of the window and media rules work as expected, but
   iFrame heights are NOT usually set to 100% so keep styles for items inside iFrames
   outside of media queries that specify a min or max-height */
   
@media screen and (min-width: 64em) and (min-height: 28em){  /* at least 1024 wide and at least 448 high - iPads */
	.verticalAligner {
		top: 30% !important;}
	
	.largeViewerHeader {
		padding: 1.5% 0 2% 0;}
	
	.displayLargeHeader {
		padding: 2% 0 7% 0; /* override largeViewerHeader just above because we have gallery logo on displayLarge */}

	.displayLargeLogoContainer {
    	width: 33%; }
	
	.largeViewerContainer1 {
		height: 76%;
		max-height: 76%; }
	
	.displayLargeContainer1 {
		height: 78%; /* override largeViewerHeader just above because we have gallery logo on displayLarge */}	


@media screen and (min-width: 64em) and (min-height: 38em){  /* at least 1024 wide and at least 448 high - iPads */

	.posterStatsTitle {
		font-size: 1.05em; }

	.posterStats {
		font-size:.95em; }
}


@media screen and (min-width: 64em) and (min-height: 50em){ /* at least 1024 wide and at least 800 high */
	.carouselFrameStart {
		margin-top: 3.5%; }
	
	.dropdownsContainerStart { /* this lives in an iFrame which never gets very 
	                             tall so can't use media rules for height */ }
	
	.dropdownsContainer { /* this lives in an iFrame which never gets very 
	                        tall so can't use media rules for height */ }

	.displayLargeHeader {
		padding: 2.5% 0 7% 0; }
		
	.displayLargeLogoContainer {
		width: 36%; }

	.largeViewerContainer1 {
		height: 80%; }
	
	.comments {
		padding: 25px 0 10% 0; }

	.commentsWideImg {
		padding: 4% 0 10% 0; /* posterInfo above this */ }
}


@media screen and (min-width: 75em){ /* at least 1200 wide */
	.headerBackgroundContainer {
		top:-2.5%; }
	
	#backgroundImgContainer {
		height:100%;
		margin-top:0;
		background: rgba(0, 0, 0, 0) none 0 25% / cover; }

	.largeViewerHeader {
    	padding: 1.5% 0 2% 0;}

	.displayLargeLogoContainer {
    	width: 30%;}

	.wideScreenMenuContainer {
		padding: 1.3% 2% 0 0;
    	width: 98%; }

	.wideScreenMenu {
		display:none; }
	
	.wideScreenMenuItems {
		margin: 0 0 0 27px;
		font-size:.9em;
		width: auto; }
	
	.carouselContainer {
		max-width:100%; }
		
	.carouselFrameStart {
		max-width:none;
		margin-top:0; }
	
	.dropdownsContainer {
		margin: 2.5% 5% 5% 2%; }
	
	.displayLargeHeader {
		padding: 2% 0 6% 0; }
	
	.displayLargeContainer1 {
		height: 75%; }

	.preselect_message {
		margin: 2% auto 1% auto; }

	.largeViewerContainer1 {
		height: 70%;
		max-height: 70%; }
				
	.displayLargeImg {
		max-height: 650px; /* more room cause no favsHeart under image */ }
	
	.largeViewerImgWideImg {
		margin:0; }
	
	.largeViewerImgTallImg {
		position: relative;
		height: 98%;
		max-height:98%;
	}
	
	.posterInfoWideImg {
		max-width: unset; }

	.comments {
		padding: 55px 0 10% 0;
		max-width: 550px; }
}

@media screen and (min-width: 75em) and (min-height: 28em) { /* at least 1200 wide and at least 448 high - low wide screens */

	.largeViewerContainer1 {
		height: 74%;
		max-height: 74%; }
}


@media screen and (min-width: 75em) and (min-height: 38em) { /* at least 1200 wide and at least 608 high - low wide screens */
	.verticalAligner {
		top:50% !important;
	}
	
	#backgroundImgContainer {
		background: rgba(0, 0, 0, 0) none 0 10% / cover;
	}

	.displayLargeHeader {
		padding: 1.25% 0 4.5% 0;
	}
	
	.largeViewerContainer1 {
		height: 82%;
		max-height: 82%; }
}


@media screen and (min-width: 75em) and (min-height: 48em){ /* at least 1200 wide and at least 670 high */
	.displayLargeHeader {
		padding: 2.5% 0 7.5% 0 ; }

	.displayLargeLogoContainer {
		width: 34%; }
	
	.displayLargeContainer1 {
		height: 78%; }

	.pageSelectorContainer {
    	padding: 5% 0 0 0;
	}
}

@media screen and (min-width: 75em) and (min-height: 62em){ /* at least 1200 wide and at least 992 high */
	.largeViewerContainer1 {
		height: 90%; }

	.displayLargeContainer1 {
		height: 82%; }
}


@media screen and (min-width: 85em) { /* OVER 1359px wide over 800px high */
	
	.headerBackgroundContainer {
		top: -4.5%;
	}
		
	.logoContainer2 {
    	width: 25%;
    	padding: 0 0 0 3.5%;
	}

	.address {
		padding: 0 0 0 4.5%;
		font-size: 1.3em;
	}
	
	.displayLargeLogoContainer {
		width: 27%; }

	.logoWideScreen {
		width: auto;
		margin: 0 0 0 11%;
	}
	
	.wideScreenMenuFrame {
		padding: 0 .5% 0 0;
	}

	.wideScreenMenuContainer { 
		padding: .9% 2.5% 0 0;
	}
	
	.wideScreenMenu {
		margin: .2% 1% 0 0;
	}
	
	.wideScreenMenuItems {
		font-size: 1.2em;
	}
	
	.largeViewerHeader {
		/*padding: 1.5% 0 1.75% 0;*/}
	
	.displayLargeHeader	{
		padding: 1.5% 0 6% 0;}

	#aboutHeader {
		padding-bottom: 4%; /* return padding to normal */}
	
	.largeViewerCloseBtnContainer {
		right: 1.75%;
	}

	#displayLargeTopGalleryBtnContainer {
    	padding: .7% 0 0 0;
    	right: 3%;
	}
	
	.moveLargeViewerContainer1 {
		width: 84%;
    	margin: 0 4% 0 12%;
	}
	
	.largeViewerBtnsContainer {
    	/*padding: 30px 0 0 0;*/ }

	.posterInfoWideImg {
		max-width: 600px;
    	margin: 0 auto;
	}
		
	.comments {
		max-width: 600px;
	}
	
	.displayLargeComments { /* more margin-top because no heart or buttons under img */
    	padding: 30px .5% 10% .5%;
	}
	
	.commentsContainerWideImg {
		float: none;
		margin: 0 auto;
	}
}


@media screen and (min-width: 85em) and (min-height: 38em){ /*at least 1360 wide and at least 608 high */
	.displayLargeHeader {
    	/*padding: 1.5% 0 6% 0;*/}
}


@media screen and (min-width: 85em) and (min-height: 50em){ /*at least 1360 wide and at least 800 high */	
	.displayLargeContainer1 {
		height: 80%; }

	.pageSelectorContainer {
    	padding: 5% 0 .5% 0; }
}

@media screen and (min-width: 85em) and (min-height: 62em){ /*at least 1360 wide and at least 992 high */

}



@media screen and (min-width: 100em) and (min-height: 50em) { /* at least 1600 wide and at least 800 high */
	
	.verticalAligner {
		top:50%;
	}
	
	.displayLargeHeader {
		padding: 2% 0 5% 0;
	}
	
	.displayLargeLogoContainer {
		width: 23.5%;
	}
	
	.logoWideScreen {
		margin: 0 0 0 9%; 
	}

	.noRepros {
		bottom: 4%;
		left: 1%;
		max-width: 450px;
	}

	.noReproductions {
		font-size: 1.4em;
		text-shadow: 2px 2px 0 #222;
	}

	.noReproductionsSub {
	    font-size: 1.3em;
		text-shadow: 2px 2px 0 #222;
	}

	.frontArtsyWidget { 
		margin: 0 1.5em 0 5em; /* moves all icons to the right */
	}
	
	.container {
		margin:0;
	}
	
	.pageSelectorContainer {
    	padding: 4% 0;
	}
		
	.dropdownsContainer {
		margin: 3% 2.5% 0 2%;
	}
	
	.dropdownsContainerStart {
    	margin-top: 0; /* this lives in an iFrame so set margin-top 
		                 in carouselFrameStart not this container */
	}
	
	.thumbnailContainer {
		padding: 3.5% 1.5% .5% 1.5%;
	}
			
	.largeViewerCloseBtnContainer {
		max-width: 1.75%;
	}
	
	.newWindowHeader {
		margin-top: 2%;
	}

	.largeViewerContainer1 {
		height: 84%;
    	max-height: 84%;
	}
	
	.displayLargeContainer1 {
		height: 80%;
	}

	.largeViewerContainer3 {
		/*top: 50%;*/
	}

	.h1ContainerBottom {
		padding: 8% 0 3% .75%;
	}
}


@media screen and (min-width: 100em) and (min-height: 60em) { /* at least 1600 wide and at least 968 high */	
	.verticalAligner {
		top:50% !important;
	}
	
	.largeViewerHeader {
    	padding: 1.5% 0;
	}
	#openNewWindowBtnContainer {
    	font-size: 1.25em;
	}

	.largeViewerContainer1 {
		height: 88%;
	}
	
	.displayLargeHeader {
		padding:2% 0 3.5% 0;
	}
	
	.displayLargeContainer1 {
		min-height: unset;
	}
	
	.largeViewerImgBtnsContainer {
		transform: translateY(0);
		-ms-transform: translateY(0);
    	top: 0;
	}
}


@media screen and (min-width: 100em) and (min-height: 70em) { /* at least 1600 wide and at least 1120 high */	
	.verticalAligner {
		top:45%;
	}
	
	.displayLargeHeader {
		padding-bottom: 4%;
	}
	
	.displayLargeLogoContainer {
		width: 26%;
	}
	
	.displayLargeContainer1 {
		height: 80%;
	}

	.pageSelectorContainer {
    	padding-bottom: 1%;
	}
}