blacklist box part 2

/* this goes under <style> or <style type="text/css">   */

/*this is just the container of the whole thing */
.con{
    position:fixed;
    margin-top:10px; /*the larger the number, the further down the blacklist box will be */
    right:40px; /*you can change right to left if you want the box to appear on the left of the screen instead */
    width:130px;

}

/*this is the box with the title/the thing you click to reveal the list */

.box{
    width:120px; /*width of the box */
    padding:8px;
    border:4px /*this is the border width*/ double /*you can change this to dotted, dashed, inset, outset, or double */ #ddd /*color of the border */;
    height:auto;
    position:relative;
    top:10px;
    cursor:pointer;
    text-align:center;
    letter-spacing:2px;
    transition:.6s;
    background:white; /*color of the box */
	/* you can also add a box shadow by adding something like:

	box-shadow: 4px 4px 0px rgba(50, 50, 50, .12);
	*/

}

/*this is the list that shows up after you click the box */

.thing {
    top:8px; /*the bigger the number, the further down it is from the box */
    display:none; /*don't touch this, it's what makes it invisible until you click on the box */
    position:relative;
    transition:.6s;
    font-family:arial; /*font of the list */
    font-size:12px;
    border:4px double #ddd; /*looks best if it matches the box's border */
    padding:8px;
    height:auto;
    width:120px;
    transition:.6s;
    background:white; /*background of list */
	/* you can also add a box shadow by adding something like:

	box-shadow:4px 4px 0px rgba(50, 50, 50, .12);
	*/

}

/*this is the css for the actual list */
.thing li {
    list-style:none;
    margin-top:4px;

}
.thing li:before{
    content:'■  '; /*this is the symbol that will appear before the words of the list. make sure to put a space after the symbol, otherwise the symbol appears too close to the words */
    color:#B40404; /*color of the symbol */
}

/* end of blacklist box css */