/* 
Plugin Name: Visual Recipe Index
Author: Simon Austin
Inspired by the Category Grid View Plugin by Anshul Sharma
*/
div.riview{
	list-style-type: none; 
	clear:both;
	text-align:center;
}

div.riview ul{
	margin-left:-10px;
	list-style-type: none; 
	clear:both;
	overflow:hidden;
}


div.riview ul li{font-weight:bold;text-align:center;margin:10px 0 0 10px;
					-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;
				}
div.riview ul li{
	display:inline-block;
	position:relative;
	border:4px double;
	overflow:hidden;
	
}

div.riview ul li:hover {border:4px solid;}
div.riview ul li div.rititle{height:0%;overflow:hidden;z-index:3;position:absolute;bottom:0;left:0;width:100%;}
div.riview ul li div.rititle p{width:100%;}
div.riview ul li div.riback{
					height:0%;overflow:hidden;z-index:2;position:absolute;bottom:0;left:0;width:inherit;
			/*		filter:alpha(opacity=60);
 					opacity:0.6;*/
}
/*div.riview ul li div.rititle p a{font-family:Geneva, Arial, Helvetica, sans-serif;text-decoration:none;} */
div.riview ul li div.rititle p a{text-decoration:none;}

/* Light Theme */
div.riview.light ul li{border-color: #aaa;}
div.riview.light ul li:hover{border-color: #ccc;}
div.riview.light ul li div.riback{background-color:#fff;}
div.riview.light ul li div.rititle p a{color:#000;}

/* Dark Theme */
div.riview.dark ul li{border-color: #777;}
div.riview.dark ul li:hover{border-color: #555;}
div.riview.dark ul li div.riback{background-color:#000;}
div.riview.dark ul li div.rititle p a{color:#fff;}


/* CSS hover Fallback Strategy : In a case when Javascript is not loaded/disabled,
	the plugin falls back to a pure css hover effect. */


div.riview ul li div.riback.rinojs.hover, div.riview ul li div.riback.rinojs.never{
	display:none;
	height:35%;
}
div.riview ul li div.rititle.rinojs.hover, div.riview ul li div.rititle.rinojs.never{
	display:none;
	height:32%;
}
div.riview ul li div.riback.always{
	display:block;
	height:28%;
}
div.riview ul li div.rititle.always{
	display:block;
	height:25%;
}
div.riview ul li:hover > div.riback.rinojs.hover, div.riview ul li:hover > div.rititle.rinojs.hover{
	display: block;
}

div#ri-credits{font-family:Arial, Helvetica, sans-serif;font-size:80%;color:#777; text-align:right;}
div#ri-credits a{color: #3366CC; text-decoration:none;}
/*Pagination Controls style */
ol#ri-page-controls{clear:both;position:relative;margin:0 0 0 -2px;}
	ol#ri-page-controls li{
		display:inline-block;
		position:relative;
		width:16px;
		height:16px;
		background:var(--wpr-bg-bf0af509-d48f-46da-94fc-23480430e35d) no-repeat 0 0;
		text-indent:-8000px;
		list-style:none;
		cursor:pointer;
		margin:0 2px;
		}
	ol#ri-page-controls li:hover{background:var(--wpr-bg-c5634702-0795-4a64-a8e1-b00f2a658c2a) no-repeat 0 -16px;}
	ol#ri-page-controls li.current{color:#f00;font-weight:bold;background:var(--wpr-bg-facdfedd-59b0-4293-a613-e45ac92d3c26) no-repeat 0 -32px;}
	/*ol#ri-page-controls li.prev, ol#ri-page-controls li.next{		}*/
	ol#ri-page-controls li.prev{background:var(--wpr-bg-fedb4c9b-294f-4ff0-a5f9-fd252f4075bb) no-repeat 0 -64px;}
	ol#ri-page-controls li.next{background:var(--wpr-bg-28d4ad87-dda5-4bda-9cec-63f1fadb3a44) no-repeat 0 -48px;}

	
/*
    ColorBox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}

/*  User Style:
    Change the following styles to modify the appearance of ColorBox.
*/
#cboxOverlay{background:#fff;}
#colorbox{}
    #cboxTopLeft{width:25px; height:25px; background:var(--wpr-bg-2fa3a8fe-3437-415d-ab43-e27959fd5a54) no-repeat 0 0;}
    #cboxTopCenter{height:25px; background:var(--wpr-bg-066ee436-798a-48d8-9b65-29bef0e8d0c4) repeat-x 0 -50px;}
    #cboxTopRight{width:25px; height:25px; background:var(--wpr-bg-6521d358-6d23-4e91-a09a-6b7a08938420) no-repeat -25px 0;}
    #cboxBottomLeft{width:25px; height:25px; background:var(--wpr-bg-607fb82c-94a5-4c90-9ef5-27fd6da4d41e) no-repeat 0 -25px;}
    #cboxBottomCenter{height:25px; background:var(--wpr-bg-4ec3882b-f889-447e-9549-4e49125481c5) repeat-x 0 -75px;}
    #cboxBottomRight{width:25px; height:25px; background:var(--wpr-bg-45c84c9c-eb1c-4b46-b860-c63e25283c79) no-repeat -25px -25px;}
    #cboxMiddleLeft{width:25px; background:var(--wpr-bg-2fc123c0-0431-47ba-9ac2-f7ab6399e328) repeat-y 0 0;}
    #cboxMiddleRight{width:25px; background:var(--wpr-bg-2d0e1fe7-c799-4e24-99c1-56651afd60fa) repeat-y -25px 0;}
    #cboxContent{background:#fff; overflow:hidden;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:20px;}
        #cboxTitle{position:absolute; bottom:0px; left:0; text-align:center; width:100%; color:#999;}
        #cboxCurrent{position:absolute; bottom:0px; left:100px; color:#999;}
        #cboxSlideshow{position:absolute; bottom:0px; right:42px; color:#444;}
        #cboxPrevious{position:absolute; bottom:0px; left:0; color:#444;}
        #cboxNext{position:absolute; bottom:0px; left:63px; color:#444;}
        #cboxLoadingOverlay{background:#fff var(--wpr-bg-4f4fac06-e556-4c84-a4df-d49bcbb0137c) no-repeat center center;}
        #cboxClose{position:absolute; top:0; right:0; display:block; color:#333; font-weight:bold; font-size:16px; padding-right:5px;font-family: Geneva, Arial, Helvetica, sans-serif;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to IE9.
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

/*
  The following provides PNG transparency support for IE6
*/
.cboxIE6 #cboxTopLeft{background:var(--wpr-bg-0e4986fb-d5aa-464e-b16f-e6a8731d0179);}
.cboxIE6 #cboxTopCenter{background:var(--wpr-bg-22694c2f-6d34-4b1d-a944-2dbcfb3a76db);}
.cboxIE6 #cboxTopRight{background:var(--wpr-bg-d520694b-dd1e-45cd-b3c5-3f94b37e0b19);}
.cboxIE6 #cboxBottomLeft{background:var(--wpr-bg-c8808422-9d74-4ea2-adcb-0fa1d2c5e591);}
.cboxIE6 #cboxBottomCenter{background:var(--wpr-bg-bb1de7fc-b95b-4a21-81b7-d1e576c93477);}
.cboxIE6 #cboxBottomRight{background:var(--wpr-bg-89b47c56-e311-4ac3-a23f-00d6f9231a18);}
.cboxIE6 #cboxMiddleLeft{background:var(--wpr-bg-0eab1a82-3de6-4cc1-a6a7-fe52f9e3270c);}
.cboxIE6 #cboxMiddleRight{background:var(--wpr-bg-a2eb33ae-84b9-4bc0-8de7-af8824370020);}

.cboxIE6 #cboxTopLeft,
.cboxIE6 #cboxTopCenter,
.cboxIE6 #cboxTopRight,
.cboxIE6 #cboxBottomLeft,
.cboxIE6 #cboxBottomCenter,
.cboxIE6 #cboxBottomRight,
.cboxIE6 #cboxMiddleLeft,
.cboxIE6 #cboxMiddleRight {
    _behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
}