## Custom CSS Reference
If you want to alter the look of the output, you will need to add CSS to your theme, either as a child theme, or some themes have their own "custom CSS" section.

The basic html structure of the recipe archive is as follows:
```
<div id="recipes_list" class="container">
    <div id="recipes_filters" class="row">
        <div class="col-sm-12">
            <h2>Filter Recipes</h2>
        </div>

        <div class="col-sm-6 col-md-4">
            <h3>Product Category</h3>
            <select id="recipe_product_cat" name="recipe_product_cat" class="filter-dropdown">
                <option value="">Any</option>
                <option value="category-slug">Category Name</option>
            </select>
        </div>

        <div class="col-sm-6 col-md-4">
            <h3>Product Used</h3>
            <select id="recipe_product" name="recipe_product" class="filter-dropdown">
                <option value="">Any</option>
                <option value="product-slug">Product Name</option>
            </select>
        </div>

        <div class="col-sm-6 col-md-4">
            <h3>Recipe Type</h3>
            <div id="recipe_types" class="clearfix">
                <div class="type-tile off" data-tagslug="type-slug">Type Name (breakfast, etc)</div>
            </div>
        </div>
    </div><!-- / recipe filters -->

    <div id="recipe_tiles" class="row">
        
        <div class="recipe-tile col-xs-6 col-sm-4">
            <div class="stretcher"></div>
            <a class="stretched-interior" href="recipelink/"  style="background-image: url('recipe-image.jpg');">
                <span class="recipe-title">Recipe Title</span>
            </a>
        </div>
        
    </div><!-- /container -->
</div>
```

The CSS you are most likely to want to change is:
```
#apicius {
	background-color: white;
}

/* this holds the image (as a background). this example has rounded top corners. */
#recipes_list .stretched-interior {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

/* the padding-top determines how tall the image section is. it is a percentage of height over width - it keeps the same ratio no matter what size the block is */
#recipes_list .stretcher {
	padding-top: 73%;
}


/* color of the link text, which is just the recipe title */
#recipes_list a,
#recipes_list a:hover,
#recipes_list a:active,
#recipes_list a:focus {
	color: inherit;
}

/* the title section! In this example, the bg is a red, the text is white.  It is pushed below the image block, so if you change the height of it, also change the bottom position, and the margin-bottom of the #recipes_list .recipe-tile */
#recipes_list .recipe-title {
	background-color: #E41D36;
	color: white;
	bottom: -70px;
	min-height: 70px;
}

/* recipe filtering - the recipe type tiles that click on and off.  (like breakfast, dessert, etc).
 * when hovered, in this example, it displays a unicode star character.
 * if you decide to change what character displays, or the font size, you may want to adjust the padding-left.
 * That space is where the "active" indicator character shows up.
 */
#recipes_list .type-tile {
	font-size: 10px;
	line-height: 20px;
	border: 1px solid grey;
	margin-bottom: 10px;
	padding-left: 22px;
}

#recipes_list .type-tile:before {
	content: "\2605"; /* ★ */
	left: 6px;
	top: 1px;
}
```
