/**************************************************************************
 * Basic Styles
 *************************************************************************/
.content{
  position:relative;
}
 
#event-nav ul{
  margin:0;
  padding:0;
  float:right;
}
#event-nav li{
  list-style:none;
  float:left;
  height:68px;
  line-height:68px;
  padding:0 20px;
  margin:0;
}
#event-nav li.active{
  background: url('/_assets/img/view-arrow.png') no-repeat center bottom;
}
#event-nav li.featured.active{
  background: url('/_assets/img/view-arrow-featured.png') no-repeat center bottom;
}

#event-nav li a{
  text-decoration:none;
}

#event-control-bar{
  position: relative;
  padding:10px;
  height:40px;
}
#event-control-bar.event-list {
	margin-bottom: 25px;
}

#event-control-bar .event-list-title {
  position: absolute;
  top: 15px;
  left: 30px;
  font-size: 21px;
  font-weight: bold;
  color: #999999;
}

.event-left{
  float:left;
}
.event-right{
  float:right;
}


/** Controls - Controls are separate for cal/list views because they have very different markup **/

/* list controls */

.list-controls{
  float:left;
  position:relative;
  top:-40px;
  width:30%;
  max-width:221px;
  line-height:30px;
  text-align:center;
  display:none;
}


.list-month-title{
  margin:0 25px 0 0;
  line-height:30px; /* event-control-bar height */
  font-weight:bold;
}

.list-event-prev{
  float:left;
  width:17px;
  height:17px;
  background:url('/_assets/img/month-arrows.png') no-repeat left top;
  position:absolute;
  right:16px;
  top:8px;
}

.list-event-next{
  float:left;
  width:17px;
  height:17px;
  background:url('/_assets/img/month-arrows.png') no-repeat right top;
  position:absolute;
  right:0px;
  top:8px;  
}

.list-event-prev.hasPrev{
  background-position:left -26px;
  cursor:pointer;
  
}

.list-event-next.hasNext{
  background-position:right -26px;
  cursor:pointer;
}


/* calendar controls */
.calendar-month{
  display:block;
  width:221px;
  float:left;
  margin:0 0 0 0;
  /*line-height:30px;*/
  position:relative;
  top:-41px;
  left:10px;
  font-weight:bold;
  padding-right:50px;
  text-align:center;
  *text-align:right; /*ie7 hack to make the layout at least look decent */
  background:url('/_assets/img/month-arrows.png') no-repeat right 8px;
}

.calendar-prev{
  float:right;
  width:17px;
  height:17px;
  background:url('/_assets/img/month-arrows.png') no-repeat left -26px;
  cursor:pointer;
  text-indent:-999em;
  display:block;  
  position:absolute;
  right:16px;
  top:8px;
  text-align:left;
}

.calendar-next{
  float:right;
  width:17px;
  height:17px;
  background:url('/_assets/img/month-arrows.png') no-repeat right -26px;
  cursor:pointer;
  text-indent:-999em;
  display:block;
  position:absolute;
  right:0;  
  top:8px;
  text-align:left;
}


/* ---------- List ---------- */
.list-time{
  width:48px;
  float:left;
  margin-right:-68px;
  font-weight:bold;
  text-align:center;
  text-transform:uppercase;
  border:1px solid;
  border-radius:5px;
  line-height:1.3;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}

p.list-time-day,
p.list-time-month{
	display: block;
	margin: 0;
	padding: 0;
}

p.list-time-day{
	font-size: 20px;
	line-height: 1.5;
	padding-top: 2px;
  -webkit-border-radius:4px 4px 0 0;
  -moz-border-radius:4px 4px 0 0;
  border-radius:4px 4px 0 0;
}

p.list-time-month{
	font-size: 13px;
	line-height: 1;
  -webkit-border-radius:0 0 4px 4px;
  -moz-border-radius:0  0 4px 4px;
  border-radius:0 0 4px 4px;
  padding:4px 0;
}

.list-day-detail{
  padding-left:68px; 
}

.list-weekday{
  line-height:1.1;
  font-size:24px;
  font-weight:bold;
  color:#999999;
  border-bottom:1px solid;
  border-color:#999999;
  padding:10px 0 10px 0;
  margin-bottom:10px;
}

.nrf-message{
  text-align:center;
}

.day-stage{
  margin-top:20px;
}




/* -------- Calendar ------- */
#cal-responsive{
  display:none;
}

.calendar{
  width:100%;
  table-layout:fixed;
}
.calendar th{
  text-align:center;
  padding:10px;
  line-height:1.1;
}
.calendar td{
  padding:3px;
  height:75px; /* will grow ... not sure how but it does */
  border:1px solid;
  vertical-align:top;
}
.calendar td  > a{ /* this is the clickable number */
  font-weight:bold;
  text-decoration:none;
  line-height:1.1;
  display:block;
  padding:3px;
  float:left;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  margin-bottom:5px;
}

.calendar td ul{
  margin:0 0 0 15px;
  padding:0;
  clear:both;
}

.calendar td ul li{
  margin:0 0 15px 0;
  line-height:1.1;
}

 
/* Featured Events */
#featured-events{
  margin:45px 0;
}

.featured-event{
  float:left;
  width:31.68%;
  margin:0 2% 2% 0;
} 

.featured-event.end{
  margin-right:0;
}

.featured-image{
  position:relative;
  overflow:hidden;
  display:block;
  margin-bottom:15px;
  text-decoration:none;
  width:100%;
  *z-index:0;
}

.featured-image img{
  z-index:2;
  width:100%;
  position:absolute;
  left:0;
  top:0;  
      margin-bottom: -3px;

    vertical-align: middle;  
}

.featured-image:hover img{
  z-index:0; 
}

.featured-image img.featured-image-push{
  width:100%;
  position:relative;
  vertical-align: middle;
}

.featured-description{
  z-index:1;
  position:absolute;
  left:0;
  top:0; 
  padding:6% 3.45%;
   
}

.featured-description p{
  margin:0;
  line-height:1.8;
}

.featured-event h2{
  margin:5px 0;
  font-weight:bold;
}
 
.event-row{
  margin-bottom:10px;
  width:100%;
} 



/**************************************************************************
 * Filtering
 *************************************************************************/
.ui-selectmenu {
	display:block;
	float:left;
	position:relative;
	height:2.4em;
	width:16.44%; /* this unfort. gets overwritten */
	text-decoration:none;
	overflow:hidden;
	background: white url(/_assets/img/selectmenu_icon.png) no-repeat 95% 50%;
	margin-right:10px;
	padding: 0px 0 0 0;
}

#content a.ui-selectmenu:hover {
	text-decoration:none;
}

.ui-selectmenu-icon {
	position:absolute;
	right:6px;
	margin-top:-8px;
	top:50%;
}

.ui-selectmenu-menu {
	padding:0 !important;
	margin:0;
	list-style:none;
	position:absolute;
	z-index:1001;
	top:0;
	visibility:hidden;
	overflow:auto;
  border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	background:#f6f6f6;
	height:200px;
	width:200px!important;
}

.ui-selectmenu-open {
	visibility:visible;
}

.ui-selectmenu-menu-popup {
	margin-top:-1px;
}

.ui-selectmenu-menu-dropdown {
	width: 100% !important;
  margin:0;
  padding:0;
}

.ui-selectmenu-menu li {
	padding:0;
	margin:0;
	display:block;
	border-top:1px dotted transparent;
	border-bottom:1px dotted transparent;
	border-right-width:0!important;
	border-left-width:0!important;
	font-weight:normal!important;
}

.ui-selectmenu-menu li a,.ui-selectmenu-status {
	line-height:1.4em;
	display:block;
	padding:.3em 1.5em .3em 1em;
	outline:none;
	text-decoration:none;
	color:#363636;
	font-size:18px;
}

.ui-selectmenu-menu li.ui-selectmenu-hasIcon a,.ui-selectmenu-hasIcon .ui-selectmenu-status {
	padding-left:20px;
	position:relative;
	margin-left:5px;
}

.ui-selectmenu-menu li .ui-icon,.ui-selectmenu-status .ui-icon {
	position:absolute;
	top:1em;
	margin-top:-8px;
	left:0;
}

.ui-selectmenu-status {
	line-height:18px;
	height:18px;
	font-size: 17px;
	overflow:hidden;
	color: #999999;
	padding: 1px 26px 1px 10px;
  text-transform:uppercase;
  font-weight:bold;
}

.ui-selectmenu-open li.ui-selectmenu-item-focus a {
	background:#ebebeb;
}

.ui-selectmenu-open li.ui-selectmenu-item-selected {
}

.ui-selectmenu-menu li span,.ui-selectmenu-status span {
	display:block;
	margin-bottom:.2em;
}

.ui-selectmenu-menu li .ui-selectmenu-item-header {
	font-weight:bold;
}

.ui-selectmenu-menu li .ui-selectmenu-item-content {
}

.ui-selectmenu-menu li .ui-selectmenu-item-footer {
	opacity:.8;
}

/*for optgroups*/
.ui-selectmenu-menu .ui-selectmenu-group {
	font-size:1em;
}

.ui-selectmenu-menu .ui-selectmenu-group .ui-selectmenu-group-label {
	line-height:1.4em;
	display:block;
	padding:.6em .5em 0;
	font-weight:bold;
}

.ui-selectmenu-menu .ui-selectmenu-group ul {
	margin:0;
	padding:0;
}


/**************************************************************************
 * Seach field
 *************************************************************************/
#category-selector,
#event_categories div{
  float:left;
}
 
#event-search{
  display:block;
  float:right;
  position:relative;
}

#event-search-term{
  height:29px;
  line-height:29px;
  padding:0 25px 0 10px;
  border:0;
  
}
 
#search_submit{
  width:17px;
  height:21px;
  background:url('/_assets/img/search_go.png') no-repeat left top;
  position:absolute;
  right:10px;
  top:10px;
  cursor:pointer;
  text-transform: capitalize; /* yes this is necessary: http://stackoverflow.com/questions/2888298/text-indent-is-not-working-in-ie7 */
}
 
 
 
 
 

/**************************************************************************
 * Font & Sizing
 *************************************************************************/
#event-nav li{
  font-size:20px;
} 

.list-month-title{
  font-size:22px;
}

.calendar th{
  font-size:17px;
}
.calendar td{ /* this is the number */
 font-size:13px;
}

.calendar td ul li{
  font-size:12px;
}
.calendar-month{
  /*font-size:22px;*/
  line-height: 0px;
}

.list-time-day{
  font-size:24px;
}
.featured-description p{
  font-size:12px;
}
 
.featured-start{
  font-size:14px;
}

.featured-event .meta{
  font-size:12px;
      margin-top: -6px
}
  
 /**************************************************************************
 * Colors
 ***************************************************************************/
#event-nav{
  background-color:#dedede;
      margin-top: 30px;
}  
#event-nav li a:hover,
#event-nav li.active a{
  color:#303030;
}
#event-control-bar{
  background-color:#f1f1f1;
}

#content nav#event-nav ul li {
  list-style-type: none;
  line-height: 3em;
}

.calendar-month,
.list-month-title{
  color:#999999;
}


.calendar th{
  background-color:#555555;
  color:#ffffff;
}
.calendar td{
  border-color:#dfdfdf;
}
.calendar td  > a{ /* this is the number */
  color:#555555;
}
.calendar td  > a:hover{
  color:#ffffff;
  background-color:#b30002; /* link color */
}

.list-time-day{
  background-color:#dfdfdf;
}

.list-time-month{
  background-color:#b30002; /* link color */
  color:#ffffff;
}

.list-time{
  border-color:#aaaaaa;
}

.featured-description:hover{
  background-color:#444444; /* for older browsers */
  background-color:rgba(80,80,80,.9);
}

.featured-description:hover p{
  color:#ffffff;
}

#text .featured-start{
  color:#555555; /*link color (or accent color imo)*/
  margin-bottom: 0px;
}

.meta{
  color:#555555; /*text color*/
}

/**************************************************************************
 * Common Overrides
 *************************************************************************/
.calendar td ul li{
  list-style:none;
}

.calendar td ul li a{
  text-decoration:none;
}

.event h3{
  margin-bottom:5px;
}
 
 
 
 
/**************************************************************************
 * HTML 5 considerations
 *************************************************************************/
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }

/**************************************************************************
 * Helper Functions - From HTML 5 Boilerplate
 *************************************************************************/

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }


.push{
  clear:both;
}

.floatleft{
  float:left;
} 
/**************************************************************************
 * Overrides because the base layouts site has no core styling to inherit
   You can probably delete this in your site
 *************************************************************************/
a{
  text-decoration:none;
}
.featured-event h2{
  font-size:22px;
  margin-bottom: 0;
}
.featured-event h2 a{
  text-decoration:none;
}
.list-day h3{
  font-size:18px;
  font-weight:bold;
}
.calendar-month,
.list-month-title{
}
#event-nav{
  font-weight:light;
}
 

/*******************************************************
 * For smaller displays 
 *******************************************************
@media only screen and (max-width: 50em) {

  #event-nav ul{
    float:none;
  }
  
  #event-nav li{
    height:auto;
    line-height:1.3em;
    text-align:center;
    width:45%;
    padding:2.5%;
    padding-top:3%;  
  }
  
  #event-nav li.featured.active,
  #event-nav li.active{
    background:0;
  }
  
  #event-nav li a{
    display:inline-block;
  }
  
  #event-nav li.active a{
    border-bottom:2px solid #5d7b9d;
  }
  
  .list-controls{
    width:75%;
  }
  
  #cal-responsive{
    display:block;
  }
  
  #cal-wrap{
    display:none;
  }
  
  .featured-event{
    width:40%;
    margin:0 5% 2% 5%;
  }
  
  .featured-event.end{
    margin:0 5% 2% 5%;
  }
  
  .featured-description{
    display:none;
  }
  
  .featured-event h2{
    font-size:1.2em;  
  }
    
  #event-control-bar{
    height:auto;
  }

  .content.view-calendar #event-control-bar{
    display:none;
  }  
  
  #event-control-bar .event-right{
    float:none;
    width:100%;
    padding-bottom:10px;
    border-bottom:1px solid #DEDEDE;
    margin-bottom:40px;
  }
  
  
  
  #category-selector{
    float:none;
    margin-bottom:10px;
  }
  
  #event-search{
    float:none;
    position:static;
    width:100%;
  }
  
  #event-search-term{
    position:static;
    float:left;
    width:85%;
    padding:0 2.5%;
  }
  
  #search_submit{
    position:relative;
    top:3px;
    left:5px;
    float:left;
    width:10%;
  }
  
  #event-nav li:last-child{
    display:none;  
  }
  
  .floatleft{
    float:none;
    margin-bottom:10px;
  }

}

*/
#content .ui-selectmenu.ui-state-active {
    outline: none !important;
    background: #b30002;
}

.ui-selectmenu {
  border : 0px;
  outline: none;
}

#event-search-term {
    height: 38px;
    line-height: 40px;
    padding: 0 25px 0 10px;
    border: 0;
    width: 160px;
    font-size: 16px;
}


.list-controls {
  display: block;
}

.view-list .list-controls {
  margin-top: -30px;
}

#content table.calendar ul.dayEventNames >li {
  margin-bottom: 0px;
}

.featured-image {
  max-width: 320px;
}

@media only screen and (max-width: 768px)  {
  #content #event-nav li:last-child {
    display: none;
  }

  #content #event-nav ul {
    width: 100%;
    float: none;
    text-align: center;
  }

  #content #event-nav li {
    display: inline-block;
    float: none;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
  }

  #content #event-nav li.active {
    background: none;
  }

  .event-right {
    float: none;
  }

  #event-group-selector {
    float: none;
    text-align: center;
    margin-right: 0;
  }

  #event-control-bar {
    height: auto;
    text-align: center;
  }

  form#module-search {
    margin-top: 10px;
    display: block;
  }

  .list-controls {
    display: block;
    float: none;
    top: 0px;
    width: 100%;
    margin-bottom: 20px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
  }

  #text .ui-selectmenu  {
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 185px !important;
  }

  .view-list .list-controls {
     margin-top: 0px; 
  }

  #category-selector {
    float: none;
  }

  #event-search {
    float: none;
    display: inline-block;
    margin-top: 20px;
  }

  .calendar-month {
        top: 0;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .featured-event {
        float: none;
    width: 100%;
  }

  .featured-image {
  max-width: 100%;
}


}