/*

**************

TO ADJUST THE MARGIN AND PADDING OF ANY IMAGES in the gallery html

please see components/com_igallery/helpers/utility.php

The margin and padding of the images are in percentages. These percentages are

caculated in the php before the html is output.

*****************

*/



/* LIGHTBOX WRAPPER BIT */



	/*this is the dark background div when the lightbox shows, the javascript makes it transparent,

	if it appears below a drop down menu, put another 0 onto the end of z index*/

	div.lbox_dark{

	position: absolute;

    top: 0px;

    left: 0px;

    width: 100%;

	z-index: 10100;

    }



	/*the white wrapper for all the lightbox stuff, if it appears below a drop down menu,

	put another 0 onto the end of z index*/

	div.lbox_white{

	position: absolute;

	padding: 20px;

	z-index: 10200;

	}



/* LIGHTBOX GALLERY THUMBS BIT */



	div.lbox_thumbs_arrow_wrapper{

	float: left;

	position: relative;

	}



	div.lbox_thumb_up_arrow_wrapper{

	position: absolute;

	width: 100%;

	height: 12%;

	max-height: 36px;

	background-color: rgba(240,240,240,0.6);

	display: none;

	cursor: pointer;

	z-index: 2;

    border-bottom: 1px solid rgba(255,255,255,0.6);

	}



	div.lbox_thumb_up_arrow_child{

	width: 100%;

	height: 100%;

	background: url('../images/up_arrow.png') no-repeat center center;

	}



	div.lbox_thumb_down_arrow_wrapper{

	position: absolute;

	bottom: 0px;

	width: 100%;

	height: 12%;

	max-height: 36px;

	background-color: rgba(240,240,240,0.6);

	display: none;

	cursor: pointer;

	z-index: 2;

    border-top: 1px solid rgba(255,255,255,0.6);

	}



	div.lbox_thumb_down_arrow_child{

	width: 100%;

	height: 100%;

	background: url('../images/down_arrow.png') no-repeat center center;

	}



	div.lbox_thumb_left_arrow_wrapper{

	position: absolute;

	width: 12%;

	height: 100%;

	max-width: 36px;

	background-color: rgba(240,240,240,0.6);

	display: none;

	cursor: pointer;

	z-index: 2;

	border-right: 1px solid rgba(255,255,255,0.6);

	}



	div.lbox_thumb_left_arrow_child{

	width: 100%;

	height: 100%;

	background: url('../images/left_arrow.png') no-repeat center center;

	}



	div.lbox_thumb_right_arrow_wrapper{

	position: absolute;

	width: 12%;

	height: 100%;

	right: 0px;

    max-width: 36px;

	background-color: rgba(240,240,240,0.6);

	display: none;

	cursor: pointer;

	z-index: 2;

	border-left: 1px solid rgba(255,255,255,0.6);

	}



	div.lbox_thumb_right_arrow_child{

	width: 100%;

	height: 100%;

	background: url('../images/right_arrow.png') no-repeat center center;

	}



	/*this div holds the lbox thumb table.

	The lbox thumb table scrolls inside it*/

	div.lbox_thumb_container{

	direction: ltr;

    min-height: 0%;

	}



	/*this table holds all the thumbs.*/

	table.lbox_thumb_table{

    max-width: none;

	}



    table.lbox_thumb_table_below{

        margin-left: auto;

        margin-right: auto;

    }



    table.lbox_thumb_table_above{

        margin-left: auto;

        margin-right: auto;

    }



	/*these table cells hold one thumb each.*/

	table.lbox_thumb_table td{

    margin: 0px !important;

    padding: 0px !important;

    border: none;

	}

	

	/*the thumbnail that is active */

	table.lbox_thumb_table td.active_thumb{

	}



/*the rest of the thumbs will have inactive as the class*/

	table.lbox_thumb_table td.inactive_thumb{

	}



	/*stop firefox putting a dotted border around the thumb, which gives it an overflow */

	table.lbox_thumb_table td a{

	outline: none;

	}



    /*stop J17 defualt template from giving thumbs a blue background on hover */

    table.lbox_thumb_table a:hover, table.lbox_thumb_table a:active, table.lbox_thumb_table a:focus{

        background-color: transparent !important;

    }



	/*the thumbnail image*/

	table.lbox_thumb_table td img{

    display: block;

	}



/* LIGHTBOX GALLERY DESCRIPTIONS BIT */



	/*the div that holds all the image description divs*/

	div.lbox_des_container{

	float: left;

	}



	/*each image description is wrapped in one of these*/

	div.lbox_des_container div.des_div{

	margin: 5px;

	}

	

/* LIGHTBOX LARGE IMAGE BIT */



	/*this keeps the large image and slideshow buttons together*/

	div.lbox_image_slideshow_wrapper{

	float: left;

	}



	/*this is the div that houses the big lightbox image*/

	div.lbox_large_image{

    position: relative;

    float: left;

    cursor: pointer;

	}

    

	/*the lightbox image itself*/

	div.lbox_large_image .large_img{

	}





/* LIGHTBOX GALLERY SLIDESHOW BIT */



	/*this holds the 3 slideshow buttons below the image*/

	div.lbox_slideshow_buttons{

	float: left;

    margin: 5px 5px 0px 0px;

	}



	/*the three slideshow images*/

	div.lbox_slideshow_buttons div{

	cursor: pointer;

	width: 30px;

	height: 18px;

	margin-right: 1px;

	float: left;

	border: 1px solid rgba(0, 0, 0, 0.17);

    border-radius: 2px;

    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);

	}



	div.lbox_slideshow_buttons div.ig_slideshow_rewind{

	background: url('../images/rewind.png') no-repeat center center;

	}



	div.lbox_slideshow_buttons div.ig_slideshow_play{

	background: url('../images/play.png') no-repeat center center;

	}



	div.lbox_slideshow_buttons div.ig_slideshow_pause{

	background: url('../images/pause.png') no-repeat center center;

	}



	div.lbox_slideshow_buttons div.ig_slideshow_forward{

	background: url('../images/forward.png') no-repeat center center;

	}



	/*left/right slideshow buttons*/

	div.lbox_large_image img.left_overlay_slideshow{

    position: absolute;

    z-index: 10700;

    left: 1%;

    cursor: pointer;

    padding: 4%;

	}



	div.lbox_large_image img.right_overlay_slideshow{

    position: absolute;

    z-index: 10700;

    right: 1%;

    cursor: pointer;

    padding: 4%;

	}

	

/* DOWNLOAD BUTTON BIT */



	/*this holds the download button*/

	div.lbox_download_button{

	float: left;

    cursor: pointer;

	width: 30px;

	height: 18px;

	padding-right: 3px;

	border: 1px solid rgba(0, 0, 0, 0.17);

    border-radius: 2px;

    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);

    background: url('../images/download.png') no-repeat center center;

    margin: 5px 5px 0px 0px;

	}



	div.lbox_download_button a{

	display: block;

	width: 30px;

	height: 18px;

	}



	div.lbox_download_button a:hover{

	background-color: transparent!important;

	}



/*SHARE LIKE BIT*/

	div.lbox_facebook_share{

	float: left;

    position: relative;

    margin: 5px 5px 0px 0px;

    height: 21px;

	}



    div.lbox_facebook_share iframe{

    max-width: none !important;

    }

	

/*PLUS ONE BIT*/

	div.lbox_plus_one_div{

	float: left;

    margin: 5px 5px 0px 0px;

    position:relative;

    width: 62px;

    height: 21px;

	}



/*TWITTER BUTTON BIT*/

div.lbox_twitter_button{

    float: left;

    position:relative;

    margin: 5px 5px 0px 0px;

    width: 82px;

    height: 21px;

}



div.lbox_twitter_button iframe{

    position: absolute;

    top: 0px;

    left: 0px;

}



/*PINTEREST BUTTON BIT*/

div.lbox_pinterest{

    float: left;

    position:relative;

    margin: 5px 5px 0px 0px;

    width: 41px;

    height: 21px;

}



/*REPORT IMAGE BIT*/

	div.lbox_report{

	float: left;

    font-size: 12px;

    text-align: center;

    padding: 1px 3px 0px 3px;

	height: 17px;

	border: 1px solid rgba(0, 0, 0, 0.17);

    border-radius: 2px;

    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);

    margin: 5px 5px 0px 0px;

	}



	div.lbox_report a{

    color: #6c6c6c;

    text-decoration: none;

    }

	

	div.lbox_report form{

	width: 400px;

	}

/*IMAGE AUTHOR BIT*/

div.lbox_image_author{

    float: left;

    font-size: 12px;

    text-align: center;

    padding: 1px 4px 0px 4px;

    height: 17px;

    border: 1px solid rgba(0, 0, 0, 0.17);

    border-radius: 2px;

    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);

    margin: 5px 5px 0px 0px;

    line-height: normal!important;

    font-family: arial!important;

}



/*IMAGE HITS BIT*/

div.lbox_image_hits{

    float: left;

    font-size: 12px;

    text-align: center;

    padding: 1px 4px 0px 4px;

    height: 17px;

    border: 1px solid rgba(0, 0, 0, 0.17);

    border-radius: 2px;

    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);

    margin: 5px 5px 0px 0px;

    line-height: normal!important;

    font-family: arial!important;

}

	

/*IMAGE NUMBERING BIT*/

	div.lbox_img_numbering{

	float: left;

    font-size: 12px;

    text-align: center;

	width: 30px;

	padding-top: 1px;

	height: 17px;

	border: 1px solid rgba(0, 0, 0, 0.17);

    border-radius: 2px;

    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);

    margin: 5px 5px 0px 0px;

    line-height: normal!important;

    font-family: arial!important;

	}

	

/* LIGHTBOX TAGS BIT */



	/*the div that holds all the tags divs*/

	div.lbox_tags_container{

	float: left;

	margin: 5px 0px;

	}



	/*each tag block is wrapped in one of these*/

	div.lbox_tags_container div.tags_div{

	}

	

/*FACEBOOK COMMENTS BIT*/

	div.lbox_fbcomments{

    position: relative;

    clear: both;

	}



    div.lbox_fbcomments .fb_iframe_widget, div.lbox_fbcomments span:first-child,  div.lbox_fbcomments .fb_iframe_widget span:first-child, div.lbox_fbcomments .fb_iframe_widget iframe{

        width: 100% !important;

    }



    div.lbox_fbcomments_below{

        padding-top: 5px;

    }



    div.lbox_fbcomments_left{

        padding-right: 5px;

    }



    div.lbox_fbcomments_right{

        padding-left: 5px;

    }

	

/*JCOMMENTS BIT*/

	div.lbox_jcomments_wrapper{

	float: left;	

}



/* LIGHTBOX CLOSE IMAGE */



	div.lbox_white a.closeImage{

	position: absolute;

	width: 32px;

	height: 32px;

	top: -16px;

	right: -16px;

	background-image: url('../images/close-corner.png');

	}



	div.lbox_white a.closeImage:hover{

	background-color: transparent;

	}



/*RATINGS BIT */

.lbox_ratings_container{

    float: left;

    margin: 5px 5px 0px 0px;

	overflow:hidden;

	max-width: 500px;

}



/* GREY BORDER SHADOW STYLE */

.lbox_white_grey-border-shadow div.lbox_large_image .large_img{

    display: block;

    box-shadow: inset 1px 1px 0 #cccccc,inset -1px 1px 0 #cccccc, inset 1px -1px 0 #cccccc, inset -1px -1px 0 #cccccc;

}



.lbox_white_grey-border-shadow table.lbox_thumb_table td img{

    box-shadow: inset 1px 1px 0 #cccccc, inset -1px 1px 0 #cccccc, inset 1px -1px 0 #cccccc, inset -1px -1px 0 #cccccc, 4px 4px 4px rgba(202, 202, 202, 0.8);

    border-collapse: separate;

}



.lbox_white_grey-border-shadow .lbox_des_container{

    background-color: rgba(230,230,230,0.2);

    box-shadow: inset 1px 1px 0 #cccccc,inset -1px 1px 0 #cccccc, inset 1px -1px 0 #cccccc, inset -1px -1px 0 #cccccc;

}



/*PLAIN STYLE */

.lbox_white_plain table.lbox_thumb_table td:first-child img{

    margin-left: 0px;

}