@charset "UTF-8";


/* listing Options for grids etc container changes on screen / mob */

#listingOptions{
text-align:right; 
float:right;
margin:5px 0 10px 0;
max-width:150px;
z-index:100;
height:30px;
}

.mobile #listingOptions{ margin-bottom:20px;}
 
 

/*#listingOptions #listingTitle,
#listingOptions li#listingTitle { line-height:30px;height:30px;} 
#listingOptions #listingTitle h3 {  font-size:0.8em; padding:0px 5px 0 0;  }*/
.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.4;
-khtml-opacity: 0.4;
opacity: 0.4;
}

#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; }
 
 





 
/* 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 400ms ease-in-out  0s; 
-moz-transition: height , width 400ms ease-in-out  0s; 
transition: height , width  200ms ease-in-out  0s;
font-size:0.9em;
}  

.grid li a.thumbs{/*background-image:url(../images/loading-spinner.gif); background-position:50% 50%; background-repeat:no-repeat*/}


/* grid list*/
.gridList li{ width:100%; clear:both; margin: 0 auto 10px auto; border-bottom:1px solid #e1e1e1; padding-bottom:10px;}
.gridList li:last-child{ border-bottom:0}
.gridList a.thumbs{ width:30%; padding-bottom:30%; 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:70%; display:block;float:right; padding:5px 10px; text-align:left}
.gridList .textWrapNoImage{ width:100%; float:none; padding:5px 0px;}
/* grid list*/


/* grid 1 gallery only below */



/* grid 2*/
.grid2 li {width:46%; margin-bottom:5%;  float:left; }
.grid2 li:nth-child(2n + 1)   { clear:both; margin-right:8%;  }
.grid2 li:nth-child(2n){ margin-right:0}
.grid2 a.thumbs{ width:100%; padding-bottom:100%; position:relative; display:block; border:1px solid #e1e1e1 ;   text-align:center; overflow:hidden;}
.grid2 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{ height:90%; width: auto} 
.grid2 a.thumbs img.landscape { width:90%; height: auto} 
.grid2 .textWrap {width:100%; display:block; padding:6px 2px ; text-align:left; }
/* grid 2*/


/* grid 3*/
.grid3 li {width:30%; margin-bottom:5%;  float:left;  margin-right:5%;  }
.grid3 li:nth-child(3n + 1) { clear:both}
.grid3 li:nth-child(3n){ margin-right:0;  }
.grid3 a.thumbs{ width:100%; padding-bottom:100%; position:relative; display:block; border:1px solid #e1e1e1 ;   text-align:center; overflow:hidden;}
.grid3 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%); 
}
.grid3 a.thumbs img.portrait ,  .grid3 a.thumbs img.square{ height:90%; width: auto} 
.grid3 a.thumbs img.landscape { width:90%; height: auto} 
.grid3 .textWrap {width:100%; display:block; padding:6px 2px ; text-align:left; }
/* grid 3*/


/* grid 4*/
.grid4 li {width:22%; margin-bottom:5%;  float:left; margin-right:4%;  	}
.grid4 li:nth-child(4n + 1) { clear:both; }
.grid4 li:nth-child(4n){ margin-right:0;}
.grid4 a.thumbs{ width:100%; padding-bottom:100%; position:relative; display:block; border:1px solid #e1e1e1 ;   text-align:center; overflow:hidden;}
.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%); 
}
.grid4 a.thumbs img.portrait ,  .grid4 a.thumbs img.square{ height:90%; width: auto} 
.grid4 a.thumbs img.landscape { width:90%; height: auto} 
.grid4 .textWrap {width:100%; display:block; padding:6px 2px ; text-align:left; }
/* grid 4*/


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



.grid li .textWrap a.readMore{
display:block;
color:#006699; font-size:0.9em;
height:26px; line-height:26px;
font-weight:bold;
padding-left:12px;
background-repeat:no-repeat;
background-image:url(../images/icons/arrowRGray.png);
background-position:left 50%;
} 

.grid li .textWrap a.readMoreVideo{padding-left:18px; background-image:url(../images/icons/videoSmGray.png)}


#searchResponse  .textWrap a.readMore{
display:inline-block;
clear:both;
text-align:left;
font-size:0.7em;
font-style:normal;
text-decoration:none;
padding:5px 0 4px 12px;
color: #006699;
text-transform: uppercase;
font-weight: bold;
background-image:url(../images/icons/arrowRGray.png);
background-repeat:no-repeat;
background-position:left 50%;

}

/* eo text*/

 

/*gallery*/
/* grid 1 gallery only 
.grid1 li {width:100%;  clear:both; margin-bottom:5%;    }
.grid1 a.thumbs{ width:100%; height:auto;  display:block;   text-align:center; }
.grid1 a.thumbs img{margin:0 auto; padding:0;border:1px solid #e1e1e1 ;height: auto; width:100%;}
.grid1 .textWrap {width:100%; display:none; padding:6px 0 ; text-align:left; }*/
/* grid 1*/

#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*/


/* products specific */
.grid li .productPrice{ display:block; font-weight:bold;   color:#006699}
/* products specific */



/* tags inside grid 	 */ 
.grid li .title{
color:#006699;
font-weight:normal;
font-size:0.9em;
}

.gridList li .title{ font-weight:bold; font-size:1em}

a.title strong{ font-size:inherit; font-weight:bold}

#contentList li  p.dateAdded{
font-size:0.9em;
font-weight:normal; color:#999
}

#contentList li p.tags{padding-top:6px}
#contentList li p.tags strong{ color:#99CC00; }
#contentList li p.tags a{
 color: #0073AD;
 text-decoration:underline;
 padding:0 4px
} 



/* 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:none}
.gridList li .description{ display:block}

.mobile .grid *{ ;  }
.mobile .grid .textWrap a, .mobile .grid .textWrap p, .mobile .grid .textWrap span { font-size:0.9em  }

#searchResponse.gridList  li *{ font-size:1em;} /* inc strong and underline spans */