/*
cmOneContainer holds the key. We have a main cmOneContainer in cm-core/css/cm-many.css but this must be overridden with your own cm-many.css.php in whatever page/plugin you are using.  In this way the shortcode variables can be passed ie pic_width=50% and we can assign that to the .cmOneContainer{} class for that gallery

It is the percentage of the viewable area that the picture should occupy ie; 100%, 50% (2 per width) 33% (3 per width) and so on

However, there is a floor to consider. If the floor size of an image is 200px wide and we set the cmOneContainer to 50% then below 400px will cause an overlap collission.

This collision can be avoided by properly assigning the responsive values ccxx, cexx etc... to switch to 100% wide prior to the collission.

So we must work out where collissions occur at the various percentages and dynamically assign cc, ce, cm, cp, co, ct, cu at runtime.  For instance:
1) #riRows width (less padding, border, margin)
   must be captured at run time upon page resize and assigned to a variable named: riRowsWidth
2) var minContainerWidth (px) uses a new variable called Natural Full Adjusted Width (nfaw) which determines what size the image would be at load time using our baseRes (currently 1366px) and the percent of the cmManyContainer that it occupies. For instance:
* nfaw at 1366 and 100% would be the full area of riRows width
* nfaw at 1366 and 20% would be 274px (the full area of riRows * 20%)
This is important as this is what the apfs is tied to.

   Minimum Container Width is an unknown since apfs is a perctage figure. However, upon first load we can easily find that out by multiplying the nfaw='(width)' value times the apfs='(%)' value.    In this way for instance a picture that loaded at 300px (nfaw='366') and a apfs='50' will have a smallest shrinkage of 150px!

   Note: since we are using 100% and noscl, we had to force nfaw to be set in cmOrigSizes.js on images within the .cmOneImg class

2) Knowing that the pic_width=33% (test case) and knowing that riRowsWidth=941px (test case) we know that each container will be 310.53px wide (round up for extra protection) or 311px
3) Nothing needs to happen unless the floor is greater than the first images width.  So we must test for that on each resize
     To get the width of every container, just get the first ones width
     oneContainerWidth=jQuery(".cmOneContainer:first").width();

     Armed with that.

 50 / 466

Using 33% for instance
2) We then determine what 33% of riRowsWidth is.  Let's say it's a

*/

.cmOneImg{

}

.cmManyPageTitle{
   font-weight:600;
   color:#666666;
   width:100%;
   text-align:left;
   clear:both;
   padding-bottom: 7px;
   padding-top: 7px;
}
.lwrTextContainer{

}

.cmOneTitle{
  font-size:16px;
  overflow:hidden;
  display:block;
  clear:both;
}

.cmManyContainer{
  /* just blocks was causing borders not to extend the full length as container was shrunk up on liltugs */
  display:inline-block;
  height:auto !important;
  margin-left:.5em;
  margin-right:.5em;
}
.cmOneContainer{
  display:inline-block;
  text-align:center;
  overflow:hidden;
    height:auto !important;
  /*
  padding:.0em .5em .2em .5em;
  margin-bottom:.7em;
 */
}



.cmOneTitle,.cm-one-sub-title,.cm-one-desc{
  border-bottom:none; /* override so makes any title border cover only 3 sides */
}

.cm-one-title-container{
    /* Border-box puts border on inside not outside */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
   border-bottom:none; /* override so makes any title border cover only 3 sides */
}

.cmAligner{
    text-align:left;
}

.t-media-container{
    display:block;
    position:relative;
    float:left;
}
.t-media{
    max-height:220px;
    width:auto;
    float:left;
}



.cmAligner{
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    text-align: center;
    width: auto;
}

.cmOneTitleUnderlay{
    position: absolute;width: 100%;z-index: 2;
    height:6em;
    bottom:0px;
    font-weight:20px;
    background: -moz-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(1,1,1,0.4) 38%, rgba(5,5,5,0.7) 100%); /* ff3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(38%, rgba(1,1,1,0.4)), color-stop(100%, rgba(5,5,5,0.7))); /* safari4+,chrome */
    background: -webkit-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(1,1,1,0.4) 38%, rgba(5,5,5,0.7) 100%); /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(1,1,1,0.4) 38%, rgba(5,5,5,0.7) 100%); /* opera 11.10+ */
    background: -ms-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(1,1,1,0.4) 38%, rgba(5,5,5,0.7) 100%); /* ie10+ */
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(1,1,1,0.4) 38%, rgba(5,5,5,0.7) 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#050505',GradientType=0 ); /* ie6-9 */
}


.cmOneText{
   display:block;
   overflow:hidden;
   text-align:center;
   max-width:100%;
   margin:0 auto;
   padding: 0.1em 0;
   width:100%;
}

.cmOneHrefPic{

}
.cmOneHref{
   z-index:4; /* gets it in front of title text */
}

.cmManyTitle{
    display:block;
    clear:both;
    width:100%;
    font-size:1.1em;
    height:1.4em;
    overflow-y:hidden;
    color:black;
}