/* === Gig Calendar === */

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 33.33%;
  padding: 0px;
  border-width: 2px; 
  padding: 21px; 
}

.info {
  text-align: center;
  background: #d2d2d2;
  padding: 6px;
}

.head {
  font-size: 30px;
  text-align: center; 
  border-width: 2px; 
  padding: 8px; 
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

/* === NEXT === */

.gctable    {
  color: #000000; 
  width: 100%; 
  border-width: 1px; 
  border-collapse: collapse; 
}

.gctable th {
  font-size: 18px;
  color: #ffffff; 
  height: 35px; 
  background-color: #aa0000; 
  border-width: 1px;
  padding: 8px; 
  border-style: solid; 
  border-color: #ff0000; 
  text-align: left;
}

.gctable tr {
  background-color:#transparent;
}

.gctable td {
  font-size: 16px;
  border-width: 0px;
  padding: 8px;
  border-style: solid;
  border-color: #ebab3a;
}

.gctable tr:hover {
  background-color:#FFD7D7; 
  color: #000000;
}

.gc_event {
  padding: 5px 5px 5px 25px; 
  text-align: left; 
  font-size: 16px;
}

.gc_event2 {
  padding: 5px 5px 5px 25px; 
  text-align: left; 
  font-size: 16px; 
  font-weight: bold; 
  background-color: #ebab3a;
}
/* === Musicians Directory Style === */

.tftable {
color: #000000; 
width: 100%; 
border-width: 0px; 
border-collapse: collapse;
}

.tftable th {
font-size: 18px; 
color: #ffffff; 
height: 34px; 
padding: 10px; 
text-align: center;
background-color: #aa0000;
}

.tftable tr {
background-color: #transparent;
}

.tftable td {
border-width: 1px; 
padding: 10px; 
border-style: solid; 
border-color: #000000;
}

.tftable tr:hover {
background-color: #aa0000;
color: #ffffff;
}
/* ===Upcoming Shows Style === */

@import url("http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,400italic");
@import url("//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css");
    

/* =Controls the fonts= */
    .event-list {
		list-style: none;
		font-family: 'Lato', sans-serif;
		margin: 0px;
		padding: 0px;
	}
/* =Controls the height between the layers= */
	.event-list > li {
		background-color: #ffffff;
		padding: 0px;
		margin: 0px 40px 40px;
	}
/* =Controls the background color in 1st box= */
	.event-list > li > time {
		display: inline-block;
		width: 100%;
		color: #ffffff;
		background-color: #aa0000;
		padding: 5px;
		text-align: center;
		text-transform: uppercase;
        border: 1.5px solid #f5f5f5;
	}
/* =Controls the background color in 2nd box= */
	.event-list > li:nth-child(even) > time {
		background-color: #a552a7;
	}
    
	.event-list > li > time > span {
		display: none;
	}
/* =Controls the date font= */
	.event-list > li > time > .day {
		display: block;
        color: #ffffff;
		font-size: 30pt;
		font-weight: 700;
		line-height: normal;
	}
/* =Controls the month font= */
	.event-list > li time > .month {
		display: block;
		font-size: 24pt;
		font-weight: 700;
		line-height: 60%;
	}
/* =Controls the year font= */
    .event-list > li time > .year {
		display: block;
		font-size: 18pt;
		font-weight: 700;
		line-height: 175%;
	}
    
	.event-list > li > img {
		width: 100%;
        border: 1.5px solid #f5f5f5;
	}
/* =Controls the title font from the top= */
	.event-list > li > .info {
		padding-top: 5px;
		text-align: center;
	}
/* =Controls the title font= */
	.event-list > li > .info > .title {
		font-size: 17pt;
		font-weight: 700;
		margin: 0px;
	}
/* =Controls the desc font= */
	.event-list > li > .info > .desc {
		font-size: 14pt;
		font-weight: 300;
		margin: 0px;
        }
/* =Controls the website and info box= */
	.event-list > li > .info > ul {
		display: table;
		list-style: none;
		margin: 10px 0px 0px;
		padding: 0px;
		width: 100%;
		text-align: center;
	}
/* =Controls the website link= */
	.event-list > li > .info > ul > li {
		display: table-cell;
		cursor: pointer;
		color: #000000;
		font-size: 12pt;
		font-weight: 300;
        padding: 1px 0px;
        }
/* =Controls the website link= */
    .event-list > li > .info > ul > li > a {
		display: block;
		width: 100%;
		color: #ffffff;
		text-decoration: none;
        background: #aa0000;
	} 
    
	.event-list > li > .info > ul > li:hover {
		color: #000000;
		background-color: #f5f5f5;
	}

	@media (min-width: 768px) {
     .event-list > li {
		position: relative;
		display: block;
		width: 95%;
		height: 120px;
		padding: 0px;
    }

      .event-list > li > time,
      .event-list > li > img  {
		display: inline-block;
	}
    
       .event-list > li > time,
       .event-list > li > img {
		width: 120px;
		float: left;
	}
/* =Controls the backgrounf color of the entire box= */
	.event-list > li > .info {
		background-color: #f5f5f5;
		overflow: hidden;
	}
    
	.event-list > li > time,
	.event-list > li > img {
		width: 120px;
		height: 120px;
		padding: 0px;
		margin: 0px;
	}
/* =Controls the height, alignment of the entire box= */
	.event-list > li > .info {
		position: relative;
		height: 120px;
		text-align: left;
		padding-right: 40px;
	}	
    
	.event-list > li > .info > .title, 
	.event-list > li > .info > .desc {
		padding: 0px 10px;
	}
    
	.event-list > li > .info > ul {
		position: absolute;
		left: 0px;
		bottom: 0px;
	}