@import url("/styles/base/alpha.less");

html, body {
  height: 100%;
}

// Standard (Typical) Browsers
html.dj_gecko, html.dj_chrome, html.dj_safari {
  height: 100%;
  body {
    height: 100%;
  }
}

// iPad 
html.dj_iOS {
  height: auto !important;
  body {
    height: auto !important;
  }
}

html, body {
  padding: 0px;
  margin: 0px;
  padding: 0px;
}

#wrapper {
  display: block;
  position: relative;
  width: auto !important;
  width: 100%;
  min-width: 100%;
  /* needed for footer scaling */
  height: auto !important;
  height:100%;
  min-height:100%;
  background-image: url(img/base_bg_shadow.png);
  -webkit-background-size: 1144px auto !important;
  -moz-background-size: 1144px auto !important;
  background-size: 1144px auto !important;
  background-repeat: repeat-y;
  background-position: center top;

  overflow: hidden;
}

#contentBg {
  display: block;
  position: relative;
  width: auto !important;
  width: 100%;
  min-width: 100%;
  padding-bottom:166px;/*matches the height of the footer*/
  background-image: url(img/base_bg_shadow.png);
  -webkit-background-size: 1144px auto !important;
  -moz-background-size: 1144px auto !important;
  background-size: 1144px auto !important;
  background-repeat: repeat-y;
  background-position: center top;
}

.dateNode {
  background-color: rgba(0, 0, 0, 0.33);
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-image: url("/styles/base/img/categorySearchResultsPageBgHover.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 3px;
  display: inline-block;
  padding: 4px 8px !important;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
}

.css2 .dateNode {
  background-image: url("/styles/base/img/dateNode_css2.png");
  background-repeat: repeat-x;
  border: 1px solid #888888;
}

.KeywordContainer {
  
  zoom: 1;
  position: relative;
  background-image: url("/Videos/styles/img/keywordsBg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .iconContainer {

    float: left;
    width: 142px;
    position: relative;
    zoom: 1;
    min-height: 1px;

    .icon {
      
      position: absolute;
      top: 20px;
      left: 45px;
      width: 81px;
      height: 22px;
      background-image: url("/styles/base/img/keywordsIcon.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      
    }
  }

  .container {
    
    float: left;
    width: 820px;
    padding: 20px 45px 15px 17px;
    background-color: rgba(0,0,0,0.10);
    background-image: url("/styles/base/img/keywordsContainerBg.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 100%;
    
    .keywordNode {
  
      border-radius: 3px;
      float: left;
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
      margin: 0 5px 5px 0;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);

      .textNode {
        border-radius: 3px;
        border: 1px solid rgba(0, 0, 0, 0.2);
        background-image: url("/styles/base/img/categorySearchResultsPageBgHover.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-color: rgba(0, 0, 0, 0.33);
        padding: 2px 6px !important;

        &:hover {
          background-color: rgba(255,255,255,0.00);
        }
      }
    }

    .floatFix {
      height: 0px;
    }
  }
}



.css2 .KeywordContainer {

  background-repeat: repeat-x;
  background-position: left bottom;

  .container {
    background-repeat: repeat-y;
    background-color: #d9d9d9;

    .keywordNode {
      
      line-height: 1.5;
      
      .textNode {
        
        line-height: 1.5;
        border: none;
        padding: 3px 7px 4px !important;
        background-image: url("/styles/base/img/css2_keywords_bg.png");
        background-repeat: repeat-x;
        background-color: transparent;

        &:hover {
          background-image: url("/styles/base/img/css2_keywords_hover_bg.png");
        }
      }
    }
  }
}





// Video Thumbnail
.videoThumbnail {

  background-color: rgba(0, 0, 0, 0.1);
  background-image: url("/Videos/styles/img/VideoCategorySearchItemThumbnailGradient.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  padding: 5px !important;
  position: relative;

  .thumbnail {
    position: relative;
    top: -1px;
    left: -1px;
    background-color: rgba(0, 0, 0, 0.1);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 100%;
  }

  .icon {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: url("/styles/base/img/playVideoIcon.png");
    background-position: left bottom;
    background-repeat: no-repeat;
  }
}

.css2 .videoThumbnail {
  
  background-color: #eeeeee;
  background-image: none;
  border: 1px solid #b7b7b7;

  .thumbnail {
    
    background-color: #eeeeee;
    border: 1px solid #b7b7b7;

    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  
  }

  .icon {}

}








// SocialBox Styles

// Shield
.socialDialogShield {
  background-color: rgba(0,0,0,0.50);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 6000;
}

// SocialDialog

.socialDialog {
  width: 450px;
  height: auto;
  border-radius: 4px;
  background-color: white;
  z-index: 6001;
  position: fixed;
  top: 125px;
  left: 50%;
  margin-left: -225px;

  .titleBar {
    padding: 8px 24px;
    position: relative;

    .closeButton {
      padding: 10px;
      position: absolute;
      right: 8px;
      top: 10px;

      background-image: url("/styles/base/img/Social/socialDialogCloseIcon.png");
      background-repeat: no-repeat;
      background-position: center center;
      .alpha(0.3);
      
      cursor: pointer;
      &:hover {
        .alpha(0.5);
      }
    }
  }
  
  .separator {
    .alpha(0.5);
  }

  .content {
    padding: 24px;
    


    form.social {
      border: 0 none;
      

      
      .dialogField {

        margin-bottom: 10px;
        
        .label {
        }

        .field {
          border: 0 none;
          display: block;
          padding: 6px;
          background-color: rgba(0,0,0,0.1);
          box-shadow: 0 0 3px rgba(0,0,0,0.5) inset;
          border-radius: 3px;
          
          &.wide {
            width: 390px;
            max-width: 390px;
          }
          
          &.emailMessage {
            height: 9em;

            max-height: 16em;
          }

        }
      }
      .dialogField:last-child { margin-bottom: 0px; }
    }
    
  }

  .footer {

    .footerText {
      padding: 8px 24px;
    }

    .footerButtons {
      background-image: url("/styles/base/img/Social/socialDialogFooterBg.png");
      background-repeat: repeat-x;
      padding: 25px;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;

      .socialNetworkButtonContainer {
        width: 336px;
        display: inline-block;
        float: left;

        .socialButton {
          
          display: inline-block;
          margin: 4px;
          min-width: 44px;

          .icon {

            width: 40px;
            height: 40px;
            background-repeat: no-repeat;
            background-position: center center;
            position: relative;
            left: 50%;
            margin-left: -22px;

            border: 2px solid transparent;
            border-radius: 3px;

            &:active {
              border: 2px solid green;
            }
          }

          .label {
            text-align: center;
          }

          &.email {
            .icon {
              background-image: url("/styles/base/img/Social/socialBox_logo_mail.png");
            }
          }

          &.facebook {
            .icon {
              background-image: url("/styles/base/img/Social/socialBox_logo_facebook.png");
            }
          }

          &.twitter {
            .icon {
              background-image: url("/styles/base/img/Social/socialBox_logo_twitter.png");
            }
          }

          &.google {
            .icon {
              background-image: url("/styles/base/img/Social/socialBox_logo_google.png");
            }
          }

        }

        .floatFix {
          clear: both;
        }
      }

      .shareButtonContainer {
        display: inline-block;
        float: left;
      }

      .floatFix {
        clear: both;
      }
    }
  }
}

// SOCIAL BOX 

.SocialBox {

  padding: 1px;
  
  .socialButton {
    
    cursor: pointer;
  
    background-color: rgba(255,255,255,0.1);
    
    padding: 7px 12px 7px 37px;
    
    border-radius: 3px;
    
    &:hover {
      background-color: rgba(255,255,255,0.2);
    }

    &.share {
      background-image: url("/styles/base/img/Social/mailIcon.png");
      background-position: 4px center;
      background-repeat: no-repeat;
    }
  }

}





// Hundreds of Reasons Widget
// This is the gloabal style for this widget (at some point it should become a DIJIT that pulls randomized reasons from the DB)

.reasons {

  .header {
    
    position: relative;
    padding-left: 200px;
    min-height: 120px;

    .image {
      position: absolute;
      width: 206px;
      height: 133px;
      top: 0;
      background-image: url("/EMS Modules/styles/img/Modules/lumbertonSmall.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      left: -9px;

      &.typeIII {
        background-image: url("/EMS Modules/styles/img/Modules/galvestonSmall.png");
        width: 218px;
        height: 135px;
        left: -23px;
      }

      &.UCV {
        background-image: url("/EMS Modules/styles/img/Modules/UCVSmall.png");
        width: 205px;
        height: 118px;
        left: -19px;
        top: 16px;
      }

    }

    .title {
      
      margin-bottom: 14px;
    }

    .subtitle {
      .alpha(0.5);
    }
  }

  .items {

    .item {
      position: relative;
      padding: 20px;
      padding-left: 45px;
      padding-right: 0;

      .number {
        position: absolute;
        top: 18px;
        left: 0;
        background-color: rgba(255, 255, 255, 0.2);
        background-image: url("/styles/base/img/categorySearchResultsPageBg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border: 1px solid;
        border-color: rgba(0, 0, 0, 0.2);
        border-radius: 3px 3px 3px 3px;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
        display: inline-block;
        padding: 5px 10px;

      }
    }
  }
}

.errorMessage {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.1);
  border-radius: 4px;
  padding: 5px 9px !important;
  border: 1px solid rgba(255,255,255,0.1);
}

.floatFix {
  clear: both;
}

.imageBlock {
  float: left;

  margin: 23px;
  margin-bottom: 12px;
  margin-top: 12px;

  background-color: rgba(0, 0, 0, 0.1);
  background-image: url("/Videos/styles/img/VideoCategorySearchItemThumbnailGradient.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px 4px 4px 4px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  padding: 5px;
  position: relative;

  .image {
    background-color: rgba(0, 0, 0, 0.1);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
  }

  &.clickable {
    cursor: pointer;
    &:hover {
      background-color: rgba(0,0,0,0.25);
    }
  }
}

.css2 {

  .imageBlock {

    background-image: url("/styles/base/img/css2_imageBlock_bg.png");
    background-color: #6b6b6b;
    background-repeat: repeat-x;
    border: 1px solid #545454;

    .image {
      background-image: url("/styles/base/img/black_10.png");
      background-repeat: repeat;
      border: 1px solid #707070;
    }

  }

  #contentTier1 {
    .content {
      >.floatFix {
        height: 0px;
      }
    }
  
    .imageBlock {

      background-image: url("/styles/base/img/css2_imageBlock_bg.png");
      background-color: #e5e5e5;
      background-repeat: repeat-x;
      border: 1px solid #b7b7b7;

      .image {
        background-repeat: repeat;
        border: 1px solid #b7b7b7;
      }

      &.clickable {
        &:hover {
          background-color: #c2c2c2;
        }
      }
    }
  }

  #contentTier2 {
    .imageBlock {

      background-image: url("/styles/base/img/css2_imageBlock_bg.png");
      background-color: #6b6b6b;
      background-repeat: repeat-x;
      border: 1px solid #545454;

      .image {
        background-repeat: repeat;
        border: 1px solid #707070;
      }
    }
  }
}

// Font Settings *************************************************************************************************

html, body {
  font-family: "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif";
  font-size: 13px;
  line-height: 1.75;

  a {
    color: lightgray;
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
    text-shadow: 0 0 4px white;
    color: white;
  }

  a.green {
    color: #98c134;
  }
  a.green:hover {
    color: #b7e83f;
  }

  a.red {
    color: #ff3333;
  }
  a.red:hover {
    color: #ff6666;
  }

  a.blue {
    color: #008ce6;
  }
  a.blue:hover {
    color: #3aa3e6;
  }
}

#contentTier1 {
  color: black;
  .title {
    text-shadow: 1px 1px 3px rgba(0,0,0,0.33);
  }
}

#contentTier2 {
  color: white;
  .title {
    text-shadow: 1px 1px 4px rgba(0,0,0,0.75);
  }
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.reasons {
  .items {
    .number {
      font-size: 11px;
      line-height: 1.5;
      font-weight: bold;
      color: rgba(0,0,0,0.66);
      text-shadow: 0px 1px 1px rgba(255,255,255,0.5);
    }
  }
}

.css2 .reasons {
  .items {
    .number {
      color: #393939;
      background-color: transparent;
      border-color: transparent;
    }
  }
}

.KeywordContainer {

  font-size: 11px;
  color: white;
  line-height: 1.5;

  .keywordNode {
    .textNode {
    }
  }
}

.dateNode {
  font-size: 11px;
  line-height: 1.5;
  color: white;
}