/* SEARCH BIT */
	div.igallery_search{
	width: 100%;
	}
	
	div.igallery_search form{
	float: right;
	}


/* CATEGORY CHILDREN PART */

    /*wraps all the category menu image divs*/
    div.cat_child_wrapper{
    float: left;
    }
    
    /*each holds a category menu image */
    div.cat_child{
    float: left;
    padding: 10px;
    }
    
    /*all the headings in the category view are h3s. If your templates h3 is not what
    you want, you can style the gallery h3s here*/
    h3.cat_child_h3{
    /*color: #000000;
    font-family: arial, helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    padding: 0px;*/
    }
    
    /* inside the h3's are a link (<a> tag) If your templates links are not what you want,
    you can style the category view links here*/
    a.cat_child_a{
    /*color: #000000;
    font-family: arial, helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    padding: 0px;*/
    }
    
    div.igallery_clear{
    clear: both;
    }


/*MAIN IMAGES WRAPPER */

	/*this wrapps all the main images html (not the lightbox html)
	its alignment is set inline, as there is a left/center/right option in the backend*/
	div.main_images_wrapper{
	}

/* CATEGORY DESCRIPTION BIT */

	/*this div holds the category description (that can be set to top or bottom position)*/
	div.category_description{
	float: left;
	width: 100%;
	margin: 10px 0px;
	}

/* MAIN GALLERY THUMBS BIT */

    div.main_thumbs_arrow_wrapper{
	float: left;
	}
	
	/*this div holds the up arrow*/
	div.main_up_arrow{
	float: left;
	}

	/*the up arrow*/
	img.main_up_arrow_img{
	cursor: pointer;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 4px;
	margin-bottom: 4px;
	}

	/*this div holds the main thumb div. It has overflow hidden/auto inline.
	The main thumb div scrolls inside it*/
	div.main_thumb_container{
	float: left;
	position: relative;
	direction: ltr;
	}

	/*this table holds all the thumbs.*/
	table.main_thumb_table{
	float: left;
	}

	/*these table cells hold one thumb div each.*/
	table.main_thumb_table td{
	}

	/*the thumbnail that is displayed will have wrapper td with a class of active*/
	table.main_thumb_table .active_thumb{
	}

	/*the rest of the thumb tds will have this class*/
	table.main_thumb_table .inactive_thumb{
	}

	/*these divs hold one thumbnail each.*/
	table.main_thumb_table td div.thumbs_div{
	text-align: center;
	
	}

	/*stop firefox putting a dotted border around the thumb, which gives it an overflow */
	table.main_thumb_table td div.thumbs_div a{
	outline: none;
	}

	/*the thumbnail image*/
	table.main_thumb_table td div.thumbs_div img{
	padding: 4px;
	object-fit: contain;
	}

	/*this holds the left/right arrows */
	div.main_left_right_arrows_div{
	float:left;
	margin: 4px 0px;
	width: 100%;
	}

	/*the left arrow image*/
	img.main_left_arrow_img{
	cursor: pointer;
	float: left;
	}

	/*the right arrow image*/
	img.main_right_arrow_img{
	cursor: pointer;
	float: right;
	}

	/*this holds the down arrow*/
	div.main_down_arrow{
	float: left;
	}

	/*the down arrow*/
	img.main_down_arrow_img{
	cursor: pointer;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 4px;
	margin-bottom: 4px;
	}
	
	/*if you want the active thumb to look different you can
	uncomment this part and add some rules
	table.main_thumb_table td.active_thumb img{
	border: 1px solid red;
	}*/


/* MAIN IMAGE DESCRIPTIONS BIT */

	/*the div that holds all the descrition divs*/
	div.main_des_container{
	float: left;
	margin: 5px 0px;
	}

	/*each description is wrapped in one of these*/
	div.main_des_container div.des_div{
	float: left;
	width: 100%
	}

/* MAIN GALLERY LARGE IMAGE BIT */

	/*this keeps the large image and slideshow buttons together*/
	div.main_image_slideshow_wrapper{
	float: left;
	}

	/*this is the div that houses the main image, the position relative is nescesssary for the image to
	be injected properly*/
	div.main_large_image{
	float: left;
	position: relative;
	padding: 5px;
	}

/* MAIN GALLERY SLIDESHOW BIT */

	/*this holds the slideshow buttons*/
	div.main_slideshow_buttons{
	float: left;
	padding: 10px 0px;
	}

	/*the three slideshow images*/
	div.main_slideshow_buttons img{
	cursor: pointer;
	}
	
/*SHARE FACEBOOK BIT*/
	.main_facebook_share{
	display: block;
	float: left;
	padding-left: 10px;
	padding-top: 10px;
	}
	
/*PLUS ONE BIT*/
	div.main_plus_one_div{
	display: block;
	float: left;
	padding-left: 10px;
	padding-top: 10px;
	}
	
/*REPORT IMAGE BIT*/
	div.main_report{
	display: block;
	float: left;
	padding-left: 10px;
	padding-top: 8px;
	}
	
/*IMAGE NUMBERING BIT*/
	div.main_img_numbering{
	display: block;
	float: left;
	padding-left: 10px;
	padding-top: 8px;
	}
	
/* DOWNLOAD BUTTON BIT */

	/*this holds the download button*/
	div.main_download_button{
	float: left;
	padding: 5px;
	}

	/*the button image*/
	div.main_download_button img{
	cursor: pointer;
	display: block;
	padding-top: 5px;
	}
/* MAIN GALLERY RATINGS BIT */

	/*this wraps all the ratings content*/
	div.main_ratings_wrapper{
	float: left;
	width: 100%;
	margin: 10px 0px;
	}

	/*the form (which contains of the 5 stars)*/
	form.main_rating_form{
	display: inline;
	}

	/*this holds all the spans that say 'you have already voted' etc*/
	div.main_ratings_message_container{
	margin-top: 5px;
	}

/* MAIN GALLERY COMMENTS BIT */

	/*this holds all the comments html*/
	div.main_comments_wrapper{
	float: left;
	width: 100%;
	}

	/*this holds the message saying the amount of comments*/
	div.main_comments_message{
	float: left;
	width: 100%;
	}

	/*this holds all of the comments divs*/
	div.main_comments_container{
	float: left;
	width: 100%;
	}

	/*these divs wrap around each comment*/
	div.main_comments_container div{
	padding: 8px 0px;
	border-bottom: 1px solid #cccccc;
	}

	/*the author and date are inside this span*/
	span.italics_text{
	font-style: italic;
	}

    /*the comments form*/
	.main_img_comment_form{
	width: 100%;
	}

	div.main_comments_message{
	margin: 5px 0px;
	}
	
/*FACEBOOK COMMENTS BIT*/
	div.main_fbcomments{
	float: left;
	padding-top: 5px;
	}
	
}