/* SEARCH FORM RESETS */
form button {
    padding:0;
    font-size:1em;
    line-height:normal;
    border:none;
    border-radius: 0;
    margin:0;
    box-shadow: none;
}

/**************************************************************************
 * 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:30px;
}
#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;
}

.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;
    left: 22px;
    top: -80px;
    width: 30%;
    width: 221px;
    line-height: 30px;
    padding-right: 50px;
    text-align: center;
    display: none;
}

.list-month-title {
    margin: 10px 20px 0 0;
    line-height: 40px;
    /* event-control-bar height */
    font-weight: 400;
}

.list-event-prev, .calendar-prev {
    float: left;
    position: absolute;
    right: 30px;
    top: 15px;
    font-size: 22px;
    display: none;
}

.list-event-next {
    float: left;
    position: absolute;
    right: 1px;
    top: 15px;
    font-size: 22px;
    display: none;
}

.list-event-prev.hasPrev {
    cursor: pointer;
    display: block;
}
.list-event-prev.hasPrev:hover {
    opacity: .6;
}

.list-event-next.hasNext {
    cursor: pointer;
    display: block;
}
.list-event-next.hasNext:hover {
    opacity: .6;
}

/* calendar controls */
.calendar-month {
    display: block;
    width: 221px;
    float: left;
    margin: -45px 0 0 0;
    line-height: 40px;
    /* event-control-bar height */
    position: relative;
    top: -48px;
    left: 10px;
    font-weight: 400;
    padding: 0 50px 0 0;
    text-align: center;
    *text-align: right;
    background-color:transparent;
    /*ie7 hack to make the layout at least look decent */
}

.calendar-prev {
    cursor: pointer;
    display: block;
    position: absolute;
    right: 30px;
    top: 0px;
    text-align: left;
    font-size: 22px;
}
.calendar-prev:hover {
    opacity: .6;
}

.calendar-next {
    cursor: pointer;
    display: block;
    position: absolute;
    right: 1px;
    top: 0px;
    text-align: left;
    font-size: 22px;
}
.calendar-next:hover {
    opacity: .6;
}

/* ---------- 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;
    border-bottom:1px solid;
    padding:10px 0 10px 0;
    margin-bottom:30px;
}

.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;
}

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

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

.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: #dedede url(/_assets/img/selectmenu_icon.png) no-repeat 95% 50%;
    margin-right:10px;
    padding: 5px 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;
    font-size:11px;
}

.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;
    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:5px;
    top:5px;
    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;
    text-transform: none;
}

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

.featured-start{
    font-size:14px;
}

.featured-event .meta{
    font-size:12px;
}

/**************************************************************************
* Colors
***************************************************************************/
#event-nav{
    background-color:#dedede;
}

#event-control-bar{
    background-color:#f1f1f1;
}




.calendar th{
    color:#ffffff;
}
.calendar td{
    border-color:#dfdfdf;
}


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


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

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


/**************************************************************************
 * 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;
}
.featured-event h2 a{
    text-decoration:none;
}
.list-day h3{
    font-size:18px;
    font-weight:bold;
}
.calendar-month,
.list-month-title{
    font-family: proxima-nova-1,proxima-nova-2,sans-serif;
}
#event-nav{
    font-family: proxima-nova-1, proxima-nova-2, sans-serif;
    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;
  }

}