.screen #siteContent .pagetitles{ height:50px; float:left; margin:0; padding:0; font-size:34px;}
#listingOptions{
text-align:right; 
float:right;
margin:0px 0 10px 0;
max-width:150px;
z-index:100;
height:40px;   
}

.mobile #listingOptions{ margin-bottom:20px;}
 
 
.mobile #listingOptions #listingTitle h3 { display:none} 
.screen #listingOptions #listingTitle h3 { display:none} 

#listingOptions li { display: block; margin:0; float:left; height:30px; line-height:30px; }

 
#listingOptions  li span{ 
background-color:#fff;	 
display:block;	 
text-decoration:none;
text-align:left;	
height:30px; 
width:30px;
padding:0; 
margin: 0px 0 0px 4px;
background-repeat:no-repeat;
background-image:url(../images/icons/listingOptions.png);
text-indent:-2000px;	font-size:1px; cursor:pointer
}


#listingOptions  li span{
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}

.screen #listingOptions  li span:hover{
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}

#listingOptions  li span.gridActive{
-moz-opacity: 1.0;
-khtml-opacity: 1.0;
opacity:1.0;
}

#gridList_changer { background-position: left  0px }	
#grid1_changer { background-position: left   -30px;   }	
#grid2_changer {background-position: left   -60px;}	
#grid3_changer {background-position: left -90px; }	 	
#grid4_changer { background-position: left -120px; }
 
 
.gallerytitle.subtitles { width:800px ; height:40px; line-height:40px; overflow:hidden; white-space: nowrap; text-overflow:ellipsis; display:block; float:left;  } /* sits before listing options so needs to be truncated */
.mobile .gallerytitle.subtitles { width:calc(100% - 150px); font-size:1em;  }

 


 
/* grids */
.grid { clear:both; display:block;  margin:5px 0 0 0; padding:0;overflow:hidden;   }

.grid li hr{ display:block; clear:both; height:0; border:0; background:none}
.grid li {
display:block; 
position:relative;
-webkit-transition: height , width 100ms ease-in-out  0s; 
-moz-transition: height , width 100ms ease-in-out  0s; 
transition: height , width 100ms ease-in-out  0s;
font-size:0.9em; 
}  

.grid li a.thumbs{background-color:#FFFFFF}

.grid li a.thumbsVideo{  background-size:  90% auto; background-position:50% 50%; background-color:#fff; } 
.grid li a.thumbsVideo img{ height:50px;   opacity:0.4;
-webkit-transition: height  100ms ease-in-out  0s; 
-moz-transition: height 100ms ease-in-out  0s; 
transition: height  100ms ease-in-out  0s;
}
.grid li a.thumbsVideo:hover img{ height:68px;}
.mobile .grid li a.thumbsVideo img{ display:none} 

/* grid list*/
.gridList li{ width:100%; clear:both; margin: 0 auto 10px auto; border-bottom:1px solid #e1e1e1; padding-bottom:0px;}
.gridList li:last-child{ border-bottom:0}
.gridList a.thumbs{ width:12%; padding-bottom:12%; position:relative; display:block; float:left;   text-align:center; overflow:hidden;border:1px solid #e1e1e1}
 
.gridList a.thumbs img{
margin:0 auto;
position:absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); 
}

.gridList a.thumbs img.portrait ,  .gridList a.thumbs img.square{ max-height:90%; width: auto} 
.gridList a.thumbs img.landscape { max-width:90%; height: auto} 

.gridList .textWrap {width:88%; display:block;float:left; padding:5px 10px; text-align:left;  }
.gridList .textWrapNoImage{ width:100%; float:none; padding:5px 0px;}
.gridList li hr{ background: none; border:none; padding-top:10px;}

.categories .gridList a.thumbs{  background-position:50% 50%; background-size:cover; padding-bottom:10%;}
.categories .gridList a.thumbs img.portrait , 
.categories .gridList a.thumbs img.square{ display:none} 
.categories  .gridList a.thumbs img.landscape { display:none} 
/* grid list*/


.grid2 li,
.grid3 li ,  
.grid4 li { display:block; float:left;}
.grid2 li {width:46%;margin-bottom:5%;  }
.grid2 li:nth-child(2n + 1)   { clear:both; margin-right:8%;  }
.grid2 li:nth-child(2n){ margin-right:0}

.grid3 li {width:30%; margin-bottom:5%;   margin-right:5%;  }
.grid3 li:nth-child(3n + 1) { clear:both}
.grid3 li:nth-child(3n){ margin-right:0;  }

.grid4 li {width:22%; margin-bottom:5%;  margin-right:4%;  	}
.grid4 li:nth-child(4n + 1) { clear:both; }
.grid4 li:nth-child(4n){ margin-right:0;}


.grid2 a.thumbs,
.grid3 a.thumbs , 
.grid4 a.thumbs { width:100%; padding-bottom:100%; position:relative; display:block;   border:0px solid #e1e1e1 ;  text-align:center; overflow:hidden;
background-image:url(../images/loading-circle.gif); background-position:50% 50%;  }

.grid2 a.thumbsNoImage,
.grid3 a.thumbsNoImage , 
.grid4 a.thumbsNoImage{ background-image:none}


.grid2 a.thumbs img ,
.grid3 a.thumbs img ,
.grid4 a.thumbs img{
margin:0 auto;
position:absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); 
}
.grid2 a.thumbs img.portrait , 
.grid2 a.thumbs img.square ,  
.grid3 a.thumbs img.portrait , 
.grid3 a.thumbs img.square ,  
.grid4 a.thumbs img.portrait , 
.grid4 a.thumbs img.square { /*height:90%; width: auto*/ width:100%; height:auto} 

.grid2 a.thumbs img.landscape,
.grid3 a.thumbs img.landscape ,
.grid4 a.thumbs img.landscape {/* width:90%; height: auto*/ width:auto; height:100%;} 

.grid2 .textWrap,
.grid3 .textWrap ,
.grid4 .textWrap {width:100%; display:block; padding:6px 10px 6px 2px ; }

.grid2 .textWrap * ,
.grid3 .textWrap * ,
.grid4 .textWrap *{ text-align:center; }
 


.screen .grid a.thumbs:hover{ border-color:#999999; opacity:0.95}/* a as images are already opacitied from JQ LL*/

.grid li .textWrap a.readMore{
display:none;
} 



/* eo text*/
#gallery.grid1 li{ width:100%; margin:0;}
#gallery.grid2 li{ width:50%; margin:0;}
#gallery.grid3 li{ width:33.33%; margin:0;}
#gallery.grid4 li { width:25%;margin:0}
#gallery li a.thumbs{ border:1px solid #fff;}
#gallery li a.thumbs img.portrait, 
#gallery li a.thumbs img.square{ width:100%; height: auto;  } 
#gallery li a.thumbs img.landscape{ height:100%; width: auto;  } 
#gallery.grid1 li a.thumbs{ margin:0; padding:0}
#gallery.grid1 li a.thumbs img.portrait , #gallery.grid1 li a.thumbs img.square , #gallery.grid1 li a.thumbs img.landscape   { width:100%; height:auto; margin:0;}


#gallery li a.thumbs img{ font-size:0.5em; color:#CCCCCC} /* alt tag*/
 
p.galleryText{ margin:15px auto 0 auto; font-size:1em ; clear:both}  /* footer desc*/
 
 
/* universal text styles
.grid li .textWrap *{   font-size:0.9em}
.gridList  li .textWrap { font-size:1.1em}
.grid4  li .textWrap *{ font-size:0.9em}
*/

/*description*/
.grid2 .description ,  .grid3 .description , .grid4  .description { display:block}
.gridList li .description{ display:block}

.mobile .grid *{   }
.mobile .grid .textWrap a, .mobile .grid .textWrap p, .mobile .grid .textWrap span {   }