/**
 * @file
 * Navigation Styling
 */

@import "base";

@mixin zen-gutter-width () {
    padding-left: 2em;
}

/*
 * Markup generated by theme_menu_tree().
 */

ul li.expanded {
  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
    *list-style-image: url(../images/menu-expanded.png);
  }
  list-style-image: inline-image("menu-expanded.png");
  list-style-type: circle;
}
ul li.collapsed {
  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
    *list-style-image: url(../images/menu-collapsed.png); /* LTR */
  }
  list-style-image: inline-image("menu-collapsed.png"); /* LTR */
  list-style-type: disc;
}
ul li.leaf {
  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
    *list-style-image: url(../images/menu-leaf.png);
  }
  list-style-image: inline-image("menu-leaf.png");
  list-style-type: square;
}

/*
 * The active item in a Drupal menu
 */

li a.active {

}

/*
 * Navigation bar
 */

#navigation {
  /* overflow: hidden; */ /* Sometimes you want to prevent overlapping with main div. */

  .block {
    margin-bottom: 0;
  }

  .block-menu .block-title,
  .block-menu-block .block-title {
    @include element-invisible();
  }

  ul.links, /* Main menu and secondary menu links */
  ul.menu { /* Menu block links */
    margin: 0;
    padding: 0;
    text-align: left; /* LTR */

    li { /* A simple method to get navigation links to appear in one line. */
      float: left; /* LTR */
      padding: 0 10px 0 0; /* LTR */
      list-style-type: none;
      list-style-image: none;
    }
  }
}


ul.menu { /* Menu block links */
  margin: 0;
  padding: 0;
  text-align: left; /* LTR */

  li { /* A simple method to get navigation links to appear in one line. */
    list-style-type: none;
    list-style-image: none;
  }
}


.sidebar {

  ul {
    margin: 0;
    padding: 0;

    li {
      margin: 0;
      list-style-type: none;

      a {
        display: block;
        border-radius: 0.375em;
        padding: 0.2em 0.5em;
        text-decoration: none;
        @include letterpress(0.8);

        &:hover {
          background-color: $hover;
          text-decoration: none;
        }

        &.active-trail {
          background-color: $hover;
        }
        &.active {
          background-color: $active;
        }
      }
    }
  }
}


#block-cm-starterkit-easy-cm-theme-mobile-menu, .mobile-menu-links {
  z-index: 110;
  display: none;

  .toggle-wrapper {
    margin: 1.125em 2% 0 0;
    padding: 0.5em 1em 0.5em 0.2em;
    float: right;
    margin-right: 3%;
    font-weight: bold;
    line-height: 1;

    li {
      float: left;
      display: block;
      padding-left: 0.75em;
      margin-left: 0.75em;
      border-left: 1px solid $line;

      &:first-child {
        border-left: 0;
        margin-left: 0;
        padding-left: 0;
      }
    }
  }
}




#block-system-main-menu {
  margin-bottom: 1em;
  overflow: visible;
  z-index: 99;
  display: block;
  font-size: 0.938em;
  

  @media screen and (min-width: 48.25em) {
    padding: 0.8em 0 0.4em 0;
  }
  @media screen and (min-width: 60em) {
    @include zen-gutter-width();
  }




  nav {

    // Only first menu level
    > ul {
      > li {
        float: left;
        @media screen and (max-width: 48.25em) {
          float: none;
        }

        > .parent {

          @media screen and (max-width: 48.25em) {
              content: '▼'; 
              padding-left: 0.25em;
          }
        }

        > a {
          display: block;
          border-radius: 0.5em;
          //set up the downward arrow for top level items
       
          @media screen and (min-width: 48.25em) {
            &:after {
              
            }
          }

          @media screen and (max-width: 48.25em) {
            border-radius: 0;
          }
        }

        &.expanded.hover {
          > a {
            border-radius: 0.5em 0.5em 0 0;
            @media screen and (max-width: 48.25em) {
              border-radius: 0;
            }
          }
        }
      }

      //Remove bottom radius when hovering first-level item
      li.expanded.hover {
        > a {
          background: $line;
        }

        //Remove border on active item on hover
        a.active {
          border: none;
        }
      }

      //Second level
      ul {
        li {
          a {
            border-left: 1px solid $line;
            border-right: 1px solid $line;
          }

          @media screen and (min-width: 48.25em) {
            > a:after {
              content: '>';
              float: right;
            }

            > a:only-child:after {
              content: '';
            }
          }

          //Last item link has bottom border and bottom radius
          &.last {
            a {
              border-bottom: 1px solid $line;
              border-radius: 0 0 0.5em 0.5em;
              @media screen and (max-width: 48.25em) {
                border-radius: 0;
                border-bottom: none;
              }
            }
          }
        }
      }

    }
  
 


    // All menu levels
    ul.menu {
      list-style: none;
      *zoom: 1;

      &:before, &:after {
        content: " "; 
        display: table; 
      }

      &:after {
        clear: both;
      }



      a {
        padding: 0.75em 1em;
        text-decoration: none;

        @media screen and (min-width: 48.25em) {

        }
      }

      li {
        position: relative;

        //Hide second and lower levels
        ul {
          position: absolute;
          left: -9999px;
        }

        //Display second level on hover
        &.hover {
          > ul {
            left: 0;
            @media screen and (max-width: 48.25em) {
              position: static;
            }
          }

          //Display third level on hover
          li.hover {
            ul {
              left: 100%;
              top: 0;
              @media screen and (max-width: 48.25em) {
                position: static;
              }
            }
          }
        }

        a {
          &.active-trail {
            background: $light-line;
            color: $line;
          }
          &:hover {
            background: $light-line;
          }
          &.active {
            background: $line;
            color: $active;
          }
        }

        //Second menu level
        li {
          a {
            display: block;
            background: #ffffff;
            position: relative;
            z-index:100;
            @media screen and (max-width: 48.25em) {
              padding-left: 2.5em;
            }
          }

           //Third menu level
          li {
            a {
              @media screen and (max-width: 48.25em) {
                padding-left: 3.5em;
              }
            }
          }
        }
      }

      ul {
        list-style: none;
        width: 15em;
        @media screen and (max-width: 48.25em) {
          width: 100%;
        }
      }
    }
  }


  @media screen and (max-width: 768px) {
    ul.menu .active {
        display: block;
    }
    #menu {
      clear: both;
      display: none;
    }
    #menu > ul li {
        float: none;
        border-top: 1px solid #cccccc;
    }
    ul.menu > li > .parent {
        background-position: 95% 50%;
    }
  
    ul.menu li li a {
      padding-left: 2em;
    }
  
    ul.menu li li li a {
      padding-left: 3em;
    }

    ul.menu > li > .parent {
      background-image: none; 
    }
    
    ul.menu {
      li {
        .more {
        float: right;
        width: 20%;
        max-width: 6em;
        border-left: 1px solid rgba(255,255,255,.3);
        padding: 0.75em 0;
        margin: 0;
        cursor: pointer;
        z-index: 200;
        position: relative;
        color: $link;

          &:after {
            content: '▼'; 
            float:  right;
            padding-right: 30%;
            font-size: 1.5em;
          }
        }

        &.active-trail {
          .more {
            color: #ffffff;
          }
        }
      }
    }

    ul.menu li .more:before {
      content: "";
      background: rgba(0,0,0,.3);
      width: 1px;
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: -2px;
    }

    ul.menu ul {
        display: block;
        width: 100%;
    }
  }
}

.sidebar .expanded > ul {
  padding-left: 0.5em;
  font-size: 0.938em;
}


.login-block {
  height: 3em;
  display: table;
  float: right;
  padding-right: 1em;
    @media screen and (min-width: 60em) {
      padding-right: 2em;
    }

  line-height: 1.5;


  ul.login-menu {
    margin: 0;
    padding: 0;
    font-size: 0.75em;
    text-align: left;
    display: table-row;

    li {
      display: block;
      position: relative;

      a {
        display: block;
        padding: 0;
        position: relative;
        font-weight: bold;
        white-space: nowrap;
      }
    }
  }
}

.channel-icons-schedule {
  border-bottom: 1px solid #cccccc;
  padding: 0 0 1em 0;
  overflow: hidden;

  @media screen and (min-width: 48.25em) {
    float: left;
    width: 18%;
    height: 4em;
    border-left: 1px solid #cccccc;
    border-bottom: none;
  }


  a {
    display: block;
    padding: 0 5%;
    text-decoration: none;
    color: #bcbcbc;

    @media screen and (min-width: 48.25em) {
      overflow: hidden;
    }
  }

  .channel-icons-tagline {
    font-weight: bold;
    padding-top: 0.25em;
    font-size: 1.125em;
    float: left;
  }

  .channel-icons-view-schedule {
    background: url(../images/watch-arrow.png) left center no-repeat;
    padding-left: 0.55em;
    @media screen and (min-width: 60em) {
      padding-left: 0.75em;
    }
    float: left;
    clear: left;
    font-size: 0.938em;

  }


}

#block-views-channel-icons-block {


  @media screen and (min-width: 48.25em) {
    float: left;
    width: 66%;
  }

  .channel-icons {

    ul {
      list-style: none;
  	  padding-left: 0;
      margin: 0;

      li {
        list-style: none;
        padding: 0.5em 0;
        border-bottom: 1px solid #ccc;
        overflow: hidden;

        @media screen and (min-width: 48.25em) {
          width: 33%;
          height: 4em;
          padding: 0;
          float: left;
          border-bottom: none;
          border-right: 1px solid #ccc;
        }

        .centerbox-inner {
          position: relative;
        }

       a {
          display: block;
          padding: 0 1em;
          text-decoration: none;
          color: #bcbcbc;
          text-align: center;
          margin: 0 auto;

          @media screen and (min-width: 48.25em) {
            padding: 0 0.5em;
            display: table;
          }

          &:hover {
            text-decoration: underline;
          };
	      }

		  .channel-icons-icon {
  		  width: 5em;
        position: relative;
        float: left;
        overflow: hidden;
        margin-right: 2em;

        @media screen and (min-width: 48.25em) {
          width: 28%;
          margin-right: 0;
          float: none;
          vertical-align: middle;
          display: table-cell;
          height: 4em;
        }

		  }
		  .channel-icons-text {
        position: relative;
        float: left;

        @media screen and (min-width: 48.25em) {
          width: 65%;
          position: absolute;
          right: 0;
          float: none;
        }
		  }
      .channel-icons-tagline {
        font-weight: bold;
        padding-top: 0.75em;
        font-size: 1.125em;
        float: left;

        @media screen and (min-width: 48.25em) {
          padding-top: 0.25em;
        }
      }
		  .channel-icons-watch-now {
        background: url(../images/watch-arrow.png) left center no-repeat;
        padding-left: 0.75em;
        float: left;
        clear: left;
        font-size: 0.938em;
      }
    }

	  li.views-row-first {


      @media screen and (min-width: 48.25em) {
        border-left: 1px solid #CCC;
      }

	  }
    }
  }
}

#block-views-social-media-icons-block {
  padding: 0.5em 1.5em;

  @media screen and (min-width: 48.25em) {
    padding: 0;
    float: left;
    width: 16%;
    height: 4em;
    border-right: 1px solid #CCC;
  }

  .channel-icons {

    ul {
      list-style: none;
  	  padding-left: 0;
      margin: 0 auto;
      text-align: left;

      @media screen and (min-width: 48.25em) {
        text-align: center;
      }

      li {
        display: inline-block;
	    list-style: none;
        padding: 0.5em 0.5em 0 0;
      }
    }
  }
}



#footer {
  padding: {
	top: 0.875em;
	bottom: 0.875em;
  }

  ul {
    list-style: none;
    padding-left: 0;
    margin: 0;

    li {
      list-style: none;

      a {
        display: inline-block;
      }
    }

    li.first {

      a {
        padding-left: 0;
        padding-left: 0;
      }
    }
  }
}

/*
 * Main menu and Secondary menu links
 */

#main-menu {
}

#secondary-menu {
  float: right; /* LTR */
}

/*
 * Menu blocks
 */

.block-menu {
}

/*
 * "Menu block" blocks
 *
 * Drupal core has limited ways in which it can display its menus. To get around
 * these limitations, see http://drupal.org/project/menu_block
 */

.block-menu-block {
}
