/* date         2015 11 18
 * written by   Hanna Lee
 *
 * IDC Blue     #004b85
 * IDC Yellow   #e6ae5b
 *
 * font size are in px, change them to rem later in CMS 
 */

#main {
  font-family: "Open Sans",sans-serif;
  margin-top: 50px;
  padding-bottom: 100px;
}

/*
ICONS
******************************************* */
.icon-header{  
  display: inline-block;
  height: 30px;
  width: 30px;
  margin-right: 5px;}

.icon-video         {background: transparent url(/events/images/new/icon-video.png) no-repeat scroll -3px 0;}
.icon-calendar      {background: transparent url(/events/images/new/icon-calendar.png) no-repeat scroll -3px 0;}
.icon-featured-event{background: transparent url(/events/images/new/icon-featured-event.png) no-repeat scroll -3px 0;}
.icon-archive      {background: transparent url(/events/images/new/icon-books.png) no-repeat scroll 6px 4px;}
.icon-regionalsites      {background: transparent url(/events/images/new/icon-regionalsites.png) no-repeat scroll 0 0;}
.icon-link {
    display: inline-block; height: 10px; width: 10px; margin-left: 4px; margin-bottom: 3px; background: transparent url(/events/images/new/icon-link.png) no-repeat scroll 0 0;
}
/*
BUTTON
******************************************* */
.button{
  font-size:14px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin-bottom: 0;
}

.button.IDCdefault {
  background-color:white;
  border:1px solid #004b85;
  color:#004b85;
  font-weight: 600;
  padding:10px;
  }

.button.IDCdefault:hover,
.button.IDCdefault:focus {background-color:#004b85; color:white; }

.button.archive {background-image: url(/events/images/new/icon-books.png); background-repeat: no-repeat; background-position: 25px 6px; padding: 8px 25px 8px 60px !important;}
.button.calendar {background:url(/events/images/new/icon-calendar.png) no-repeat 6px 2px white; padding-left:40px;}

.button.IDCblue {padding:8px 25px;}

/* ////////////////////////////////////////////
    OVERWRITE foundation.css
//////////////////////////////////////////// */
header#page-header #idc-message #subnav-onpage ul li{line-height: 1;}
h1 {font-size: 32px; color:#004b85; margin-bottom:40px;}
h2 {}
h3 {font-size:20px; font-weight: 600; color:#444; margin-top:0;}
h4 {font-size:16px; color:#4b4b4b; text-transform: uppercase;}

ul,ol,dl {/*font-size:110%; */margin-bottom:5px;}

p {margin-bottom:0.75rem;}

select {margin-bottom:0.8rem; height: 2rem; padding: 0.2rem;}

.row{max-width: 75rem;}

/*
BREADCRUMB
******************************************* */
.breadcrumbs{border:none; background:none; padding:0 0 0.2rem;}
  .breadcrumbs li { font-size:13px; text-transform: none;}
  .breadcrumbs li.current{color:#777;}
    .breadcrumbs li a {line-height: 1.4;}

  .breadcrumbs > *::before {margin: 0 0.3rem;}

/*
PAGINATION
******************************************* */
ul.pagination {margin-bottom: 0; margin-top: 5px;}

  ul.pagination li a { font-size:12px; padding:0.0625rem 0.3rem; }

  ul.pagination li.current a{background-color:#e6e6e6; color:#777;}

  ul.pagination li.current a:hover,
  ul.pagination li.current a:focus{background-color:#e6e6e6; color:#777;}

/* ////////////////////////////////////////////
    MAIN COLUMN
//////////////////////////////////////////// */

/*
FILTER SECTION
******************************************* */
.filter{margin-top: 20px; border-bottom: #ccc 1px solid; margin-bottom:25px;}

  .filter label {margin-bottom: 0; padding-bottom:4px; font-size: 12px;cursor: default;}
  .filter select {cursor: pointer;}
  .filter form.custom .custom.dropdown {height: 45px; padding-top: 5px;}
    .filter form.custom .custom.dropdown .selector {top: 5px;}

/*
SORT SECTION
******************************************* */
.sort label:first-child {display: inline-block; margin-right:20px; color:#777;} /* sort by */

/*
EVENT LIST
******************************************* */
.event-lists {
    border-bottom: #ccc 1px solid;
}

  .event-list-container{background-color: #f2f2f2; margin-bottom:25px;}
    .event-list-container .row {border-bottom:10px #fff solid;}
    .event-list-container .group{padding: 15px;}
      .event-list-container .title    {font-size:18px; line-height: 1.2; margin-bottom: 8px;}
      .event-list-container .category {font-size: 14px; font-style: italic; margin-bottom: 8px;}
      .event-list-container .venue    {background:url(/events/images/new/icon-locator-blue.png) no-repeat 0 0 transparent; padding-left: 30px; min-height:22px; }
          .event-list-container .venue li   {line-height: 1.2; margin-bottom: 2px;}
        .event-list-container .location {font-size: 13px; color:#666666; vertical-align: top; width:100px; margin-right:20px; display: inline-block;}
        .event-list-container .date     {font-size: 13px; color:#666666; vertical-align: top;}
      .event-list-container button{float:right;}
      .event-list-container .thumb-container{
        max-width:300px;
        width:100%;
        float:left;
        height:100%;
      }

      .event-list-container .photo {
          border-radius: 37px;
          float: right;
          font-size: 0.9em;
          height: 73px;
          margin:0 16px 5px 0;
          width: 73px;
          clear:both;
      }

      .event-list-container .photo:first-child{margin-top:7px;}

.lists-action {margin-bottom: 120px;}                   
  .lists-action .button{display: table; margin: auto;}

/* ////////////////////////////////////////////
    RIGHT COLUMN
//////////////////////////////////////////// */
.right-column-events li a:hover {color: #5CA4DA;}
.right-column-events li a {-webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease;}
/*
List
******************************************* */
.list-web-conferences .button{display: table; margin: auto;}
/*#right-column .list{margin-bottom:40px;}*/
.right-column-events hr {
    border-color: #e6ae5b;
}
  .list h3{margin-left:20px;}

  /*.list ul{border-bottom: 1px solid #e6ae5b;}*/
    .ul-regional-sites li {padding-left: 5px !important;}
    .list li{
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6REY3NTYzRTU4ODZEMTFFNUFCMjFCOUVCRTVBMDg4NEIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6REY3NTYzRTY4ODZEMTFFNUFCMjFCOUVCRTVBMDg4NEIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpERjc1NjNFMzg4NkQxMUU1QUIyMUI5RUJFNUEwODg0QiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpERjc1NjNFNDg4NkQxMUU1QUIyMUI5RUJFNUEwODg0QiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqfdMosAAAAUSURBVHjaYti7d+9/IGCAYYAAAwBs/gwunLnWzgAAAABJRU5ErkJggg==');
      background-repeat: repeat-x;
      background-position: 0 top;
      padding:10px 0 15px;
      font-size: 14px; font-weight: 400; color:#444;
    }
    .list li:first-child {background-image:none;}
      .list li .category  {color:#798a96; text-transform: uppercase;}
      .list li .title     {font-weight: 600;}
      .list li .date      {}
      .list li .location  {background: url(/events/images/new/icon-locator-yellow.png) no-repeat 0 7px transparent; padding-left:18px;}

.list .view-link{
  color:#444;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAJCAYAAAD+WDajAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTAwQjA2Q0Q4ODcwMTFFNTkxOTU4MjU3NDZFMjgzMjIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTAwQjA2Q0U4ODcwMTFFNTkxOTU4MjU3NDZFMjgzMjIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1MDBCMDZDQjg4NzAxMUU1OTE5NTgyNTc0NkUyODMyMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1MDBCMDZDQzg4NzAxMUU1OTE5NTgyNTc0NkUyODMyMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Png1bWoAAABoSURBVHjaYvy2KmgCAwNDDRB/YUADTECcD8RXgdgPmyQIyAHxRiBeDcTS6JIwEALEN4A4B8RhYcAEPEA8GYj/YpO8CcQpQHwE2dhfQFwPxHogCWRjDwJxOlQXHIAkE4F4ARbjGQACDAARqRHVbr1l6wAAAABJRU5ErkJggg==');
  background-repeat: no-repeat;
  display: inline-block;
  background-position: right 6px;
  padding-right:15px;
  font-size: 12px;
}

/*
Highlight box
******************************************* */
.highlight{background-color: #faefde; padding:20px; margin-bottom: 120px;}
  .highlight p      {font-size:14px;}
  .highlight .button{display: table; margin:auto;}

/* ////////////////////////////////////////////
    SLICK 
//////////////////////////////////////////// */

.featured {height:auto; margin:20px 0 20px 0 !important;}

/* carousel images */
.slick-slide{height:auto;}
  .slick-slide img{width:100%;}
    .slick-slider {padding-left: 0; padding-right: 0;}


.slide-info {
    background-color: rgba(255, 255, 255, 0.6);
    height: 62px;
    margin-top: -62px;
    position: absolute;
    width: 100%;
    z-index: 5;
    padding:10px 25px;
    font-size:14px;
    line-height:1.4;
    color:#000;
}
  .slide-info a.title{
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      text-transform: uppercase;
      white-space: nowrap;
      width: 15.5%;
      font-weight: 600;
  }

  .slide-info .location{
      margin-left:30px; 
      padding-left:18px; 
      background:transparent url("/events/images/new/icon-locator-yellow.png") no-repeat scroll 0 2px;
  }

/* carousel arrows */
.slick-prev,
.slick-next{
  text-indent: 100%; /* slick font arrows were broken in IE, had to replace it with images */
  white-space: nowrap; 
  overflow: hidden; 
  opacity:0.7; 
  z-index:10; 
  margin-top:-37px;
} 

.slick-prev{background:transparent url("/events/images/new/carousel-arrow-left.png") no-repeat scroll 0 0; margin-left:50px;}
.slick-prev:hover{background:transparent url("/events/images/new/carousel-arrow-left.png") no-repeat scroll 0 0; opacity: 1;}

.slick-next{background:transparent url("/events/images/new/carousel-arrow-right.png") no-repeat scroll 0 0; margin-right:50px;}
.slick-next:hover{background:transparent url("/events/images/new/carousel-arrow-right.png") no-repeat scroll 0 0; opacity: 1;}

/* carousel dots */
.slick-dots {position:static; margin-left:0;}
.slick-dots li {margin:0;}

/* right side event name list */
.carousel-eventlist{background-color:#ebf1f5;}
  .carousel-eventlist ul{margin-left:0; margin:0 -0.9375em; height:100%}
    .carousel-eventlist ul li{border-bottom:1px solid #bebebe; height:20%; }
    .carousel-eventlist ul li.current,
    .carousel-eventlist ul li:hover {background-color:#d9e4ec;}
    .carousel-eventlist ul li:last-child{border:none;}
      .carousel-eventlist ul li a{display:block; padding:0.8em 0.9375em; font-size:14px; line-height:1.4; height:100%;}

/* ////////////////////////////////////////////
    MEDIA QUERIES
//////////////////////////////////////////// */

/* Small screens */
@media only screen { } /* Define mobile styles */

@media only screen and (max-width: 40em) { /* max-width 640px, mobile-only styles, use when QAing mobile issues */
  .event-list-container button{float:left; margin-top:10px;}
  .lists-action {margin-bottom: 50px;}  

  #right-column .hightlight{margin-bottom: 45px;}
  } 

/* Medium screens */
@media only screen and (min-width: 40.063em) { /* min-width 641px, medium screens */

  } 

@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

/* Large screens */
@media only screen and (min-width: 64.063em) { /* min-width 1025px, large screens */
  /*.slick-slider {padding-right:0;}*/
  .slick-slide{height:310px; overflow:hidden;}
  .slick-slide img{height:100%; max-width:none; width:auto;}
  .slick-next {margin-right:35px;}
  .carousel-eventlist{height:310px;}

  #right-column{margin-left:30px;}

  .event-list-container .row{height:175px;}
  .event-list-container .group{margin-left:-25px; height: 165px; position: relative;}
  .event-lists button{ position:absolute; bottom:15px; right:15px;}
  } 

@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */

/* XLarge screens */
@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

/* XXLarge screens */
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */