#btnTartanBlack, #btnStripeBlack {
    background-color: Black !important;
}

#btnTartanBlue, #btnStripeBlue {
    background-color: Blue !important;
}

#btnTartanBrown, #btnStripeBrown {
    background-color: Brown !important;
}

#btnTartanGreen, #btnStripeGreen {
    background-color: Green !important;
}

#btnTartanGrey, #btnStripeGray {
    background-color: Gray !important;    
}

#btnTartanLightBlue, #btnStripeLightBlue {
    background-color: LightBlue !important;    
}

#btnTartanOrange, #btnStripeOrange {
    background-color: Orange !important;    
}

#btnTartanPink, #btnStripePink {
    background-color: Pink !important;    
}

#btnTartanPurple, #btnStripePurple {
    background-color: Purple !important;    
}

#btnTartanRed, #btnStripeRed {
    background-color: Red !important;    
}

#btnTartanWhite, #btnStripeWhite {
    background-color: White !important;   
    border-color: Black; 
}

#btnTartanYellow, #btnStripeYellow {
    background-color: Yellow !important;    
}

.tartan {
    height: 192px;
    margin: 0 10px 10px 0;
    padding: 5px;
    border: 1px solid #C0C0C0;
    font-size: 12px;
    text-align: center;
}

.tartanName {
    text-transform: uppercase;
    font-weight: bold;
}

.tartanRange {
    font-style: italic;
}

div.tartan img {
}

div.tartan:hover {
    border: 1px solid silver;
    background: #F2F2F2;
    cursor: pointer;
}

div.tartan a {
    color: Black;
    text-decoration: none;
    text-align: center;
}

div.tartan a:hover {
}

div.tartan p {
    padding: 0;
    margin: 5px 0;
}

.btnTartanLetter, .btnClanLetter {
    width: 36px;
}

.btnTartanLetter.active, .btnClanLetter.active
{
	color: rgba(255, 255, 255, 0.75);
}

.btnTartanLetter, .btnClanLetter {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #f7b1d7;
	background-image: -moz-linear-gradient(top, #81141E, #fecb0b);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#81141E), to(#5b0009));
	background-image: -webkit-linear-gradient(top, #81141E, #5b0009);
	background-image: -o-linear-gradient(top, #81141E, #5b0009);
	background-image: linear-gradient(to bottom, #81141E, #5b0009);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffec79', endColorstr='#fffecb0b', GradientType=0);
	border-color: #fecb0b #fecb0b #a58304;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	*background-color: #fecb0b;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */

	filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);

    width: 3.4em;
	padding: 6px 12px;
	border-radius: 4px;
}

.flexcontainer {
    display: flex;
    align-items: center;
    justify-content: center;
    /* You can set flex-wrap and
       flex-direction individually */
    flex-direction: row;
    flex-wrap: wrap;
    /* Or do it all in one line
      with flex flow */
    flex-flow: row wrap;
    /* tweak where items line
       up on the row
       valid values are: flex-start,
       flex-end, space-between,
       space-around, stretch */
    align-content: flex-end;
}

.flexitem {
    width: 186px;
}