#mainContentContainer {
    max-width: 100%;
    margin: 0px 0% 0;
}

.flexslider .slides ul li div.image{
    width:780px;
}

#mainContent .pad {padding-top:40px;}

div.overlay {position:absolute; z-index:5; left:820px;}

div.prevNextBG	{
 	position: absolute;
    top: 605px;
    left: 200px;
    width: 80px;
    height: 20px;    
    opacity:.7;
    z-index:2;
}

@media only screen and (min-device-width: 1024px)	{
    /*div.prevNextBG	{  background-color: black;} --- OLD */
}

ul.imageInfo { 
	padding:0 0 0 2%; 
	float:left; 
	list-style-type:none;
	z-index:1;
}

@media only screen and (min-device-width: 768px)	{
    ul.imageInfo { padding:0;}
}

ul.imageInfo li {
	margin-right:15px; 
	float:left; 
	font-weight: 400; 
	margin-top: 4px;
}

ul.imageInfo li.availability {
    font-style: italic;
}

@media only screen and (max-device-width:768px)	{
 ul.imageInfo li.prevNextNav {margin-right:0;background-color: red;}    
}

ul.imageInfo li.imageTitle {font-weight: 700;}

div.box {
	width:20px; 
	height:20px;
	background-color: #CCC !important; 
	background-image: linear-gradient(to right, 
			transparent calc(33% - 1px),
			#000 calc(33% - 1px),
			#000 calc(33% + 1px),
			transparent calc(33% + 1px),
			transparent calc(66% - 1px),
			#000 calc(66% - 1px),
			#000 calc(66% + 1px),
			transparent calc(66% + 1px)),
		linear-gradient(to bottom, 
			transparent calc(33% - 1px),
			#000 calc(33% - 1px),
			#000 calc(33% + 1px),
			transparent calc(33% + 1px),
			transparent calc(66% - 1px),
			#000 calc(66% - 1px),
			#000 calc(66% + 1px),
			transparent calc(66% + 1px))
}

a.thumbs  div.box {  
	opacity: 0.7;  
	position:absolute; 
	top:115px; 
	margin-left:20px;
}

@media only screen and (min-width: 600px)	{
	/*a.thumbs  div.box { top:646px; margin-left:20px;} ----- OLD*/
    a.thumbs  div.box { top:115px; margin-left:20px;}
}
a.thumbs:hover div.box {  
	opacity: 1;  
}



/*FLEXSLIDER
-----------------------------------------------------------------------------------*/

@media only screen and (max-device-width:767px)	{
    div.flexslider	{ max-width:101%;}
}

@media only screen and (max-device-width:959px)	{ /* special case - be careful */
    div.flexslider	{ max-width:86%;}
}

li{
    width: 800px;
    max-width:1000px;
}

.flexslider img {
    padding:0;
    padding-left:5px;    
} 

.flexslider li{
    margin:0;
    padding:0;
}

#slider{
    position:relative;
    top:0px;
    left:-5px;
}

#slider .image {
   	width: 760px;
    padding:0;
    margin:0;
    bottom:0;
}

div.info	{margin-left: 2%; }  

@media only screen and (min-width:600px)	{
   /* div.info	{margin-left: 90px; } --- OLD */ 
    div.info	{margin-left: 0px; }
}

ul.flex-direction-nav	{
	position: absolute;
	top:25px; 
	margin-left:0px;
	width: 100px; 
	z-index: 1;
}

@media only screen and (min-device-width: 640px)	{
    /*ul.flex-direction-nav	{position: relative; display: block; top:0; } ----- OLD */
}

ul.flex-direction-nav,
div.box	{
	margin-top:-35px;
	margin-left: 2px;
	background-color: black;
	z-index: 3;
}

ul.flex-direction-nav	{    /* hopefully this is redundant - only needed of dev site */
	margin-top:-62px;
} 

ul.flex-direction-nav a	{
 	margin-top: 16px; 
}


.flex-direction-nav .flex-prev {  
	width: 0;
  height: 0;
  border: 8px solid transparent;
  border-left: 0;
  border-right: 10px solid #ccc;
	z-index: 3;
}

.flex-direction-nav .flex-next {  
	width: 0;
  height: 0;
  border: 8px solid transparent;
  border-right: 0;
  border-left: 10px solid #ccc;
	z-index: 3;
	margin-left:45px;
	z-index: 3;
}
 .flex-prev { 
 opacity: 0.7;  
}
 
 .flex-next { 
 	opacity: 0.7; 
 }
 
.flex-next:hover, .flex-prev:hover { 
	opacity: 1; 
}