/**
 * $JA#COPYRIGHT$
 */

// VARIABLES & MIXINS
// ------------------
@import "../vars.less"; // Modify this for custom colors, font-sizes, etc

// --------------------
// JA SOCIAL II CUSTOM 
// --------------------
html {

  // GENERAL 
  // --------
  .jomsocial-wrapper .jomsocial {
    padding: 0;
    background: none;
    text-align: left !important;
  }
	
	.joms-toolbar--desktop .joms-popover {
		padding: 10px;
	}

  .joms-page {
    padding: @t3-global-padding;
  }

  .joms-js--logout {
    display: none;
  }

  .joms-pagination {
    .clearfix();
  }

  // FORMS
  // ----------
  .joms-button--primary, 
  .joms-button--add, 
  .joms-button--login, 
  .joms-button__reject, 
  .joms-postbox-tab .joms-postbox-save, 
  .joms-postbox-tab .joms-postbox-done, 
  .joms-focus__button--add {
    .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
    .button-size((@padding-base-vertical - 2); @padding-base-horizontal; @font-size-small; @line-height-computed; @border-radius-base);

    .joms-icon {
      fill: @white;
    }
  }

  .joms-button--add {
    vertical-align: top;
  }

  .joms-button__next, .joms-button--secondary, .joms-button--signup, .joms-focus__button--message {
    .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
    .button-size((@padding-base-vertical - 2); @padding-base-horizontal; @font-size-small; @line-height-computed; @border-radius-base);

    .joms-icon {
      fill: @white;
    }
  }

  .joms-button--neutral, 
  .joms-button--privacy, 
  .joms-button--more, 
  .joms-button--comment, 
  .joms-button__approve, 
  .joms-postbox-tab .joms-postbox-cancel, 
  .joms-focus__button--options {
    .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
    .button-size((@padding-base-vertical - 2); @padding-base-horizontal; @font-size-small; @line-height-computed; @border-radius-base);
  }

  .joms-input[type="text"], 
  .joms-input[type="password"], 
  .joms-select--wrapper, 
  .joms-textarea, 
  .joms-select--wrapper, 
  .joms-notifications__label {
    border-radius: @border-radius-base;
  }

  .joms-select--wrapper {
    padding: 0;
    border: 0 !important;

    &:after {
      right: @t3-global-padding;
    }

    .joms-select {
      .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
      .button-size((@padding-base-vertical - 2); @padding-base-horizontal; @font-size-small; @line-height-computed; @border-radius-base);
    }
  }

  .joms-postbox-tab {
    .joms-postbox-cancel,
    .joms-postbox-save {
      padding-top: 0;
      padding-bottom: 0;
    }
  }

  .joms-form__group {

    .joms-input {
      .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
      .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-small; @line-height-computed; @border-radius-base);
    }

    .joms-button--privacy {
    }
  }

  .joms-form__group.has-privacy .joms-button--privacy {
    .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
    .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-small; @line-height-computed; @border-radius-base);
  }

  .com_community .input-mini {
    display: inline-block;
  }

  .joms-button--full-small {
    & + .joms-button--full-small {
      margin-left: 5px;
    }
  }

  .joms-input--datepicker {
    cursor: text;
  }

  // LIST SEARCH
  // -------------
  .joms-list__search {
    .joms-list__utilities {
		
			.joms-inline--desktop {
				display: inline-block !important;
			}
			
			.joms-input--search {
				width: auto;
			}
			
			form span {
				width: auto;
			}		
			
			form button {
        .button-size((@padding-base-vertical - 2); @padding-base-horizontal; @font-size-small; @line-height-computed; @border-radius-base);
      }
    }
  }

  .joms-input--search[type="text"] {
    .button-size((@padding-base-vertical - 2); @padding-base-horizontal; @font-size-small; @line-height-computed; @border-radius-base);
  }

  // SHORTING
  // -----------
  .joms-sortings {
    .joms-select--wrapper {
      &:first-child {
        margin-left: 0;
      }
    }
  }

  // FRONT PAGE
  // -----------
  #community-wrap {
    .joms-focus__header__actions--desktop .joms-icon {
      height: @line-height-computed;
    }

    // Landing page
    // ------------
    .joms-landing {
      .joms-landing__action {
        padding: @t3-global-padding;
      }
    }

    .joms-form_fb_group {
      border-top: 1px solid rgba(255,255,255,0.1);
      margin-top: @t3-global-margin * 1.5;
      padding-top: @t3-global-padding * 1.5;
      position: relative;
      text-align: center;

      &:before {
        content: "Or";
        background: @white;
        position: absolute;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        margin-left: -20px;
        top: -20px;
        left: 50%;
        border-radius: 50%;
      }
    }

    // Register
    // ------------
    &.cRegister {
      .joms-page__title {
        margin-top: 0;
      }
      
      .joms-form__group {
        & > span:first-child {
          padding-left: 0;
          text-align: right;
          padding-right: @grid-gutter-width;
        }

        .joms-button__next {
          background-color: @green;
          border: 0;
          border-radius: 3px;
          font-size: @font-size-base + 1;
          text-transform: uppercase;
          letter-spacing: 2px;          
          .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-base; @line-height-computed; 3px);
        }
      }
    }

  }

  .joms-input--append {
    svg {
      top: 14px;
    }

    .joms-input[type="text"], 
    .joms-input[type="password"] {
      padding-top: @padding-large-vertical;
      padding-bottom: @padding-large-vertical;
    }
  }

  .joms-button--login {
    padding-top: @padding-large-vertical;
    padding-bottom: @padding-large-vertical;
    font-size: @font-size-base;
  }

  .joms-landing {
    margin-bottom: @t3-global-margin;
  }

  .joms-focus {
    margin-bottom: @t3-global-margin;
  }

  .joms-gap {
    height: @grid-gutter-width;
  }

  .joms-stream, .joms-stream--notifications {
    margin-bottom: @t3-global-margin;
  }

  .joms-stream {
    margin-bottom: @grid-gutter-width !important;

    .joms-stream__body.no-head {
      padding: @t3-global-padding;
    }

    .joms-stream__header {
      padding: @t3-global-padding;
    }

    .joms-stream__body {
      padding: 0 @t3-global-padding @t3-global-padding;
    }

    .joms-stream__actions {
      padding: 0 @t3-global-padding @t3-global-padding;
    }

    .joms-comment__reply,
    .joms-js--newcomment {
      padding: @t3-global-padding;

      .joms-icon--add {
        top: @t3-global-padding+10px;
        right: @t3-global-padding+10px;

        @media (max-width: @screen-xs) {
          right: 90px;
        }
      }
    }

    .joms-comment__item {
      padding: 0;
      border-top: 0;
    }

    .joms-comment__header {
      padding: @t3-global-padding/2 @t3-global-padding;
    }
  }

  .joms-comment__reply,
  .joms-postbox {
    background: @gray-light-lv4;
    border: 0;
    border-bottom: 2px solid #d7d9db;
  }

  .joms-comment {
    background: @gray-light-lv4;
    border-bottom: 1px solid @gray-light-lv5;
  }

  .joms-media {
    background: @well-bg;
  }

  .joms-media__body {
    padding: @t3-global-padding/2 @grid-gutter-width;

    .joms-media__desc {
      max-height: @line-height-base*2*@font-size-small;
      line-height: @line-height-base;
      margin-bottom: 0;
    }
  }

  // VIDEOS PAGE
  // -----------
  .joms-list--video {
    margin: 0 -@grid-gutter-width/2;

    .joms-list__item {
      margin: 0;
      text-align: center;
      .make-md-column(4);
    }

    .joms-text--title {
      margin-top: @t3-global-margin/2;

      a {
        color: @gray-dark-lv1;

        &:hover, &:focus, &:active {
          color: @link-hover-color;
        }
      }
    }

    .joms-block {
      display: inline-block;
      font-size: @font-size-small;

      & + small {
        font-size: @font-size-small;
      }
    }
  }


  // FRIENDS PAGE
  // -------------
  .joms-list--friend {
    .joms-list__item {
      background: none;
      border: 0;
      padding-left: 0;
			padding-bottom: 42px;
    }

    .joms-list__button--dropdown {
      right: auto;
      left: 78px;
    }

    .joms-avatar img {
      padding: 0;
      border: 0;
    }

    .joms-text--username {
      font-size: @font-size-h4;
      color: @gray-dark-lv1;

      &:hover, &:focus, &:active {
        color: @link-hover-color;
      }
    }
  }


  // JS Media
  .joms-media.like, 
  .joms-media--image, 
  .joms-media--images, 
  .joms-media--event {
    max-width: 100%;
  }


  // EVENTS PAGE
  // ----------
  .joms-list--card {
    .joms-list__item {
      background: none;
      border: 0;
      border-bottom: 1px solid @t3-border-color;
      margin-bottom: @t3-global-margin;

      .joms-list__title {
        font-size: @font-size-h4;
        margin-bottom: @t3-global-margin/2;

        a {
          color: @gray-dark-lv1;

          &:hover, &:focus, &:active {
            color: @link-hover-color;
          }
        }
      }
    }

    .joms-list__content {
      padding: 0 @grid-gutter-width @t3-global-padding
    }

    .joms-list__body {
      margin: @t3-global-margin/2 0;
			
			> a {
				margin-bottom: @t3-global-margin/4;
			}
    }

    .joms-list__cover {
      margin-bottom: @t3-global-margin;
    }

    .joms-focus__date {
      position: absolute;
      top: 0;
      left: 0;
      bottom: auto;
      border-radius: 0;
      background: @brand-secondary;
    }
  }

  .joms-focus__date {
    background: @brand-secondary;
    border-radius: @border-radius-base;
    padding: @t3-global-padding/2;
		
		span:last-child {
			margin-top: 0;
		}
  }

  .joms-focus__title {
    padding-left: @grid-gutter-width;
  }
	
	// Event 
	&.view-events {
		#starttime,
		#endtime {
			select {
				display: inline-block;
			}
		}
		
		.joms-checkbox {
			display: block;
		}
	}

  // GALLERY PAGE
  // ------------
  .joms-gallery {
    .joms-gallery__body {
      .joms-gallery__title {
        font-size: @font-size-h4;
        color: @gray-dark-lv1;

        &:hover, &:focus, &:active {
          color: @link-hover-color;
        }
      }
    }
  }


 // PICKER
  // -----------
  .picker__header {
    .clearfix();

    .picker__select--month {
      display: inline-block;
    }

    .picker__select--year {
      display: inline-block;
    }
  }
	
	// Activation Pages
	// -------------
	&.task-activation .jomsocial-wrapper .jomsocial {
		background: @white;
	}

	// Jomsocial Popup
	// ----------------
	.joms-popup__content {
		padding: 15px;
	}

  .joms-popup__content--single {
    ul {
      padding-left: 0;
    }
  }
	
	.joms-popup .joms-popover {
		border-radius: 0;
		padding: 2px 0;
	}
	
	.joms-popup--dropdown .joms-dropdown.more-button {
		position: static;
		margin: 0;
	}

	// Jomsocial Focus Link
	// --------------------
	.joms-focus__link > a {
		padding: @t3-global-padding/3 (@t3-global-padding - 2px);
	}

	
	// Jomsocial Post
	// ----------------
	.joms-postbox-input div.inputbox {
		height: auto;
	}

  // Inbox Listiong
  // --------------
  #inbox-listing {
    &.joms-list--message .joms-list--message__time {
      position: static;
    }
  }
	
	
  // JOMSOCIAL IN T3-SIDEBAR 
  // ------------------------

  // JS HELLO ME
  .t3-sidebar {
    .cHello-Header {
      margin-bottom: @t3-global-margin;

      a {
        color: @white;
      }
    }

    .joms-hellome__notify {
      margin-left: -@t3-global-margin;
      margin-right: -@t3-global-margin;
      margin-bottom: 0;
      background: lighten(@brand-primary, 10%);
      width: auto;
      display: block;

      a {
        display: inline-block;
        width: 20%;
        position: relative;
      }

      a .joms-icon {
        fill: @white;
      }

      .joms-js--notiflabel-general,
      .joms-js--notiflabel-frequest,
      .joms-js--notiflabel-inbox {
        background: @red;
        color: white;
        display: inline-block;
        font-size: 9px;
        line-height: 14px;
        min-width: 12px;
        padding: 0 3px;
        position: absolute;
        text-align: center;
        top: 0;
        word-break: normal;
      }
    }

    .joms-hellome__menu {
      background: @white;
      margin-left: -@t3-global-margin;
      margin-right: -@t3-global-margin;
      margin-bottom: -@t3-global-margin;
      padding: @t3-global-padding;

      li {
        text-align: left;
        padding: 12px 0;
        border: 0;

        a {
          color: @gray-dark-lv1;
          margin-left: @t3-global-margin/2;
          font-size: @t3-font-size-bigger;

          &:hover, &:focus, &:active {
            color: @brand-primary;
          }
        }

        .joms-icon {
          fill: @brand-primary;
        }

        &:last-child {
          display: none; // disable logout link
        }
      }
    }
  }

  // JS Dating Search
  .js-module {
    #datingsearch_agefrom,
    #datingsearch_ageto {
      display: inline-block;
    }
  }

  // JS Group
  .t3-sidebar .joms-module__body,
  .t3-sidebar .joms-stream__header {
    padding: 0;
  }

  .t3-sidebar .joms-stream__header + .joms-stream__header {
    padding-top: @t3-global-padding/2;
  }

  .joms-js--module-activegroup .joms-avatar--stream img {
    border-radius: 0;
    border: 0;
    padding: 0;
  }

  .joms-js--module-activegroup .joms-text--title,
  .joms-popover__content a {
    color: @gray-dark-lv1;
    font-size: @t3-font-size-bigger;
  }

  .joms-js--module-activegroup .joms-text--title:hover,
  .joms-js--module-activegroup .joms-text--title:focus,
  .joms-js--module-activegroup .joms-text--title:active,
  .joms-popover__content a:hover,
  .joms-popover__content a:focus,
  .joms-popover__content a:active {
    color: @brand-primary;
  }

  .joms-js--module-activegroup .joms-block {
    color: #b6c2cc;
  }

  // JS TOP MEMBER
  .t3-sidebar ul {
    padding: 0;
    margin-bottom: 0;
    list-style: none;
  }

  // JS EVENTS
  .t3-sidebar ul.joms-list--event {
    margin-left: 0;
  }

  .joms-list--event .joms-media--event {
    padding: 0;
    margin: 0;
    border-bottom: 0;
  }

  .joms-list--event .joms-media--event + .joms-media--event {
    padding-top: @t3-global-margin;
  }

  .joms-list--event .joms-media--event .joms-media__body {
    padding-left: @t3-global-padding/2;
    padding-right: 0;
    vertical-align: top;
  }

  .joms-list--event .joms-media--event .joms-media__body a {
    color: @gray-dark-lv1;
    font-size: @t3-font-size-bigger;
  }

  .joms-list--event .joms-media--event .joms-media__body a:hover,
  .joms-list--event .joms-media--event .joms-media__body a:focus,
  .joms-list--event .joms-media--event .joms-media__body a:active {
    color: @brand-primary;
  }

  .joms-list--event .joms-media--event .joms-media__body .joms-block,
  .joms-list--event .joms-media--event .joms-media__body .joms-block + a {
    color: #b6c2cc;
    font-size: @font-size-base;
  } 

  // JS PHOTOS
  .t3-sidebar {
    ul.joms-list--thumbnail {
      margin: -@t3-global-margin/4;

      .joms-list__item {
        width: 50%;
        padding: @t3-global-padding/4;
      }
    }
  }


  // JS Notification
  .t3-header .joms-noti__notify {
    margin: 0;
    padding: 0;
    background: none;
    display: block;
    float: right;
    text-align: right;
  }

  .t3-header .joms-noti__notify a {
    display: inline-block;
    color: @white; 
    width: 30px;
    line-height: @navbar-height;
  }

  .t3-header .joms-noti__notify .joms-icon {
    fill: @white;
  }

  // JS VIDEOS
  .t3-sidebar { 
    .joms-list--half .joms-list__item {
      width: 100%;
      padding: 0;

      & + .joms-list__item {
        margin-top: @t3-global-margin;
      }
    }

    .joms-button--link small {
      font-size: 100%;
    }
  }
}

// FIX FOR IE8
// --------------

.ie8 {

  // comment actions
  .joms-comment__actions {
    text-align: left;
    padding-left: 0;
    > a {
      display: inline;
    }
  }

  // list event
  .joms-list--event {
    .joms-media__calendar {
      display: table-cell;
      height: 80px;
      vertical-align: top;
      width: 60px;
    }

    .joms-media__body {
      padding-top: 0;
    }
  }
  
  .jomsocial {

    // toolbar
    .joms-toolbar--desktop {
      display: block;
      border: 1px solid @t3-border-color;
    }

    .joms-toolbar {
      display: none;
    }

    // Joms Body
    .joms-body {
      .joms-module__wrapper,
      .joms-module__wrapper--stacked {
        display: none;
      }

      .joms-focus {
        .joms-focus__actions,
        .joms-focus__badges  {
          display: none;
        }
      }

      // joms stream
      .joms-stream__wrapper .joms-stream {
        .joms-stream__status--mobile {
          display: none;
        }

        .joms-stream__status {
          background: #f7f7f7;
        }

        .joms-stream__actions {
          text-align: left;
        }

        .joms-comment__reply > span {
          display: none;
        }
      }
    }

    // Landing
    .joms-landing {
      .joms-landing__cover {
        &:before {
          padding-top: 40%;
        }

        .joms-landing__image {
          background-size: cover;
        }

        .joms-landing__content {
          background: rgba(0,0,0, 0.6);
          -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
          zoom: 1;

          .joms-landing__text,
          .joms-landing__signup {
            width: 50%;
            display: table-cell;
          }

          .joms-button--signup {
            float: right;
            width: auto;
          }
        }
      }

      .joms-landing__action {

        .joms-input--append,
        .joms-button--login {
          display: inline-block;
          width: 32%;
          margin-right: 10px;
        }

        .joms-button--login {
          padding-top: 4px;
          padding-bottom: 4px;
        }

        .joms-js-form--login > a,
        .joms-checkbox {
          display: inline-block;
          margin-right: 10px;
        }
      }
    }
  }

  button {
    border-style: solid !important;
  }

  .joms-text--light {
    display: inline-block;
    border: 1px solid @red;
  }
  
}