/**
 * @package Helix Framework
 * @author JoomShaper http://www.joomshaper.com
 * @copyright Copyright (c) 20010 - 2013 JoomShaper
 * @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
*/

@import 'variables';
@import 'mixins';

// Button
.btn-primary(@btnPrimaryBackground: @btnPrimaryBackground) {
  .buttonBackground(@link_color);
}

//Link color
a:not(.btn) {
	color: @link_color;
	&:hover {
	  color: darken(@link_color,20%);
	}
}

#sp-toolbar-r {

        a {
	color:#8e9aa7;
	&:hover {
	  color: @link_color;
	}
}
}

#sp-toolbar-l {
        padding-top:5px;

        a {
	color:#718091;
	&:hover {
	  color: @white;
	}
}
}

body {
	color:@text_color;
	&.bg {
		background:@bg_color;
	}
}

//header
#sp-header-wrapper {
	border-top:1px solid #eaeaea;
	border-bottom:1px solid #eaeaea;
	background: @header_color;
	
	//Logo
	.logo{
		background-image:url(../../images/presets/@{preset}/logo.png);
	}
}

.f-sp-header-wrapper {
  padding: 5px 0 !important;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
  .transition(all 500ms);
}

.f-sp-header-wrapper .logo-wrapper {
  		.logo{
                        background-size: 80%;
			background-position:0 50%;
			background-repeat:no-repeat;
		}
}

.sp-main-menu-toggler {
  left: auto;
  right: 10px;
  z-index: 99999 !important;
  position: fixed;
  top: 15px !important;
}

#sp-feature-wrapper {
	background:darken(@bg_color, 5%);
	
	//Link
	a:not(.btn){
		color:@link_color, 20%;
		 
		&:hover{
		   color: darken(@link_color,20%);
		}
	}
	
}

#sp-users-wrapper {
	border-top:1px solid darken(@link_color, 5%);
	border-bottom:1px solid darken(@link_color, 5%);
	background:@link_color;

               h3.header {
		font-size:24px;
		font-weight:400;
		margin:0 0 10px 0;
		line-height:normal;
	        border-bottom:1px solid darken(@link_color, 5%);

               &::after {
                  background-color: @white;
                  content: "";
                  display: block;
                  height: 1px;
                  position: relative;
                  width: 90px;
	       }
            }

       .ns2-created {color: @white;}

}

#sp-countdown-wrapper {
	border-top:1px solid @bg_color;
	background:darken(@bg_color, 5%);
}

#sp-position-wrapper {
	border-top:1px solid #eaeaea;
	background:@white;
	
}

#sp-parallax-wrapper {
	background:@white;
        margin-bottom: 0;

 .btn-info {
   color: #ddd;
   border: 3px solid #DDDDDD;
   &:hover,
   &:focus {
   border: 3px solid @link_color;
   }
 }

}

#sp-inbottom-wrapper {
	border-top:1px solid @bg_color;
	background:darken(@bg_color, 5%);
	padding:15px 0;
}

//Widgets

#sp-bottom-wrapper {
        padding: 10px 0;
	background: @link_color;
	color:lighten(@link_color, 50%);
	h3{
		color:lighten(@link_color, 50%);
	}
	
	//Link
	a:not(.btn){
		color:lighten(@link_color, 50%);
		 
		&:hover{
		   color:@white;
		}
	}
}

#sp-bottom-middle-wrapper {
	border-top:1px solid #eaeaea;
        padding: 15px 0;
	background:@white;
}

#sp-bottom-2-wrapper {
        padding: 10px 0;
	background:@neutral;
	color:#8e9aa7;
	h3{
		color:#8e9aa7;
	}
	
	//Link
	a:not(.btn){
		color:#8e9aa7;
		 
		&:hover{
		   color:@white;
		}
	}
}

#sp-footer-wrapper {
        padding: 10px 0;
	background:@white;
	color:#8e9aa7;
	h3{
		color:#8e9aa7;
	}
	
	//Link
	a:not(.btn){
		color:#8e9aa7;
		 
		&:hover{
		   color:@link_color;
		}
	}
}

#sp-footer-wrapper {
	background:#253342;
}

#sp-footer-wrapper {
	.sp-border();
}	

.sp-border {

	&::after {
		background:#364a61;
	}
}

.sprocket-mosaic-item .sprocket-mosaic-title {
  color: @gray;
  background: @white !important;
  a:not(.btn) {
   color: @gray !important;
  }
  a:hover {color: @link_color !important;}

  &::after {
    margin: -1px auto;
    background-color: @link_color;
    content: "";
    display: block;
    height: 1px;
    position: relative;
    width: 90px;
    vertical-align: middle;
  }

}

.sprocket-mosaic .sprocket-mosaic-item .sprocket-mosaic-hovercontent:hover {
  background: fade(@link_color,70%) url(../../images/more.png) 50% 50% no-repeat !important;
}

.sprocket-lists .sprocket-lists-title .indicator {
  background: @link_color;
}

/*Buttons*/
.btn-primary, button, input[type='submit'], input[type='button'], submit {
	.btn-primary(@link_color);
}

.btn-info {
   border: 3px solid #DDDDDD;
   &:hover,
   &:focus {
   border: 3px solid @link_color;
   }
}

#sp-main-menu {
        float: right;
	ul {
		list-style:none;
		margin:0;
		padding:0;
                text-transform:uppercase;
		
		&.level-0 {
			> li {
				//Parent List Item
				display:inline-block;
				margin:0 5px 0 0;
				padding:0;
				position:relative;
				
				//Anchor Link
				a {
					display:block;
					margin:0;
					padding:10px;
					color:@grayLight;
					
					//Menu Item Description
					.menu-desc {
						font-size:11px;
						color:@grayLight;
						display:block;
					}
				}
                                a:hover,
                                a.active{ color:@white; }
				
				&:hover,
				&.active {
					background-color:@link_color;
					.border-radius(0px);
                                        .box-shadow(~"3px 3px 0 rgba(201, 201, 201, 1)");
					>a{
						color:@white;
					}

				}
				&:hover {
					background-color:@link_color;
				}
				&.parent {
					&:hover {
						.border-radius(0);
					}
				}
				//Animation
				.transition(all 200ms);			
			}
		}
	}
	
	//Menu Items for Dropdown
	li{
                z-index: 999;
		li:not(.sp-menu-group) {
			display:block;
			border-top:1px solid #eee;
			position:relative;
			&:first-child {
				border-top: none;
			}
                        a {
	                        display:block;
				font-size:12px;
				font-weight:400;
				line-height:normal;
				text-decoration:none;
				padding:10px;
				color:#999;
			}
                        &:hover,
                        &.active{
                                color:#999;
				background:#f5f5f5;

                                a { color:#999; }

			}
			//Animation
			.transition(all 200ms);
		}
	}
}

#sp-left .nav,
#sp-right .nav {

    li{
       font-family: 'Oswald';
       padding: 5px 5px 5px 10px;
       margin: 5px 0;
       border:1px solid #ddd;
       background: @white;
       text-transform:uppercase;
       color: @text_color;

       a { color:@text_color; }

       &:hover,
       &.active{
         color: @white;
	 background:@link_color;
         border:1px solid darken(@link_color, 5%);
         .transition(all 200ms);

         a { color:@white;
          &:hover {background:@link_color;}
          }

       }
   }
      .transition(all 200ms);
}

.flat-price{
  .plan{
    border-radius: 6px;
    list-style: none;
    padding: 0 0 20px;
    margin: 0 0 5px;
    background: #fff;
    text-align: center;
    border: 1px solid #ddd;
    li{
      padding: 10px 15px;
      color: #ccc;
      border-top: 1px solid #f5f5f5;
      .transition(300ms);
      &.plan-price{
        border-top: 0;
        font-size: 24px;
      }
      &.plan-name{
        border-radius: 6px 6px 0 0;
        padding: 15px;
        font-size: 24px;
        line-height: 24px;
        color: #fff;
        background: @link_color;
        margin-bottom: 30px;
        border-top: 0;
      }

      >strong{
        color: @link_color;
      }

      &.plan-action{
        margin-top: 5px;
        border-top: 0;
      }
    }

    &.featured{
      .scale(1.1);
      li{
        &.plan-name{
          background: #2d3c4d;
        }
      }
      &:hover{
        li{
          &.plan-name{
            background: @link_color;
          }
        }
      }
    }

    &:hover{
      li{
        &.plan-name{
          background: #2d3c4d;
        }
      }
    }
  }
}

.btn-primary {
   background: @btnPrimaryBackground;
   .box-shadow(inset 0 -2px 0px 0px rgba(0,0,0,0.2));
   &:hover,
   &:focus {
   background: lighten(@btnPrimaryBackground, 5%);
   } 
}

.module {
	margin-top:20px;
	&:first-child{
		margin-top:0;
	}
	h3 {
		font-size:24px;
		font-weight:400;
		margin:0;
		line-height:normal;
	}
	
	&.border {
		padding:15px;
		background:none;
                border: 3px solid #ddd;
                p { margin:10px 0;}
	}
	&.white {
		padding:15px;
		background:@white;
                border: 1px solid #ddd;
                p { margin:10px 0;}
	}
	&.dark {
		padding:15px;
                color:@white;
		background:#2d3c4d;
                border: 1px solid #253342;
                p { margin:10px 0;}
	 a:not(.btn){
		color:lighten(@link_color, 50%);
		 
		&:hover{
		   color:@white;
		}
	 }
	}
	&.highlight {
                .transition(all 200ms);
		padding:15px;
                color:@white;
		background:#f76666;
                p { margin:10px 0;}
	 a:not(.btn){
		color:#ffb0b0;
		 
		&:hover{
		   color:@white;
		}
	 }
	 &:hover{
                .transition(all 200ms);
		background:#e34949;
		color:@white;
	 }
	}	
	&.color {
                color:@white;
                background-color:@link_color;
                padding: 15px;
		.border-radius(0px);

		h3.header {
			padding:0 0 5px 0;
			border-bottom:1px solid lighten(@link_color, 20%);
			color:@white;
                &::after {
                  margin: -1px auto;
                  background-color: lighten(@link_color, 50%);
                  content: "";
                  display: block;
                  height: 1px;
                  position: relative;
                  width: 90px;
                  top:5px;
	       }

		}

		a:not(.btn){
		 color:lighten(@link_color, 40%);
			 
		&:hover{
			   color:darken(@link_color, 20%);
			   }
		}
                p { margin:10px 0; }
                .header { text-align:center; }

	}
	&.title1 {
	
               h3.header {
		font-size:24px;
		font-weight:400;
		margin:0 0 10px 0;
		line-height:normal;
	        border-bottom:1px solid #ddd;

               &::after {
                  background-color: @link_color;
                  content: "";
                  display: block;
                  height: 1px;
                  position: absolute;
                  width: 90px;
	       }
            }
	}

	&.title2 {
	
		h3.header {
			padding:0 0 5px 0;
			border-bottom:1px solid lighten(@link_color, 20%);
                &::after {
                  margin: -1px auto;
                  background-color: lighten(@link_color, 50%);
                  content: "";
                  display: block;
                  height: 1px;
                  position: relative;
                  width: 90px;
                  top:5px;
	       }
	}
               p { margin:15px 0; }
               .header { text-align:center; }
       }

	&.title3 {
	
		h3.header {
			padding:0 0 5px 0;
		        margin:0 0 10px 0;
			border-bottom:1px solid #ddd;
                &::after {
                  margin: -1px auto;
                  background-color: @link_color;
                  content: "";
                  display: block;
                  height: 1px;
                  position: relative;
                  width: 90px;
                  top:5px;
	       }
	}
               p { margin:10px 0; }
               .header { text-align:center; }
       }

}

.pagination ul > li > a, .pagination ul > li > span {background: @link_color; color: @white;border-color: @white;opacity: 0.7;
        &:hover {
          opacity: 1;
	  color:@white;
          background: @link_color;
	}
}

.entry-meta {
	&.muted{
		background:@link_color;
	}
}

.box-eventus {
  .box{
    list-style: none;
    text-align: center;
    margin: 0;
    li{
      .transition(900ms);

      &.box-icon {
        font-size: 58px;
        padding:25px;
        padding-top: 0px;
        color: #8e9aa7;
      }

      &.box-header {
        padding: 10px;
        color: @white;
        background: darken(@link_color,10%);

       &::before {
        content: "";
        display: block;
        margin: -1px auto;
        margin-top: -20px;
	width: 0; 
	height: 0; 
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 15px solid darken(@link_color,10%);
       }

      }

      &.box-text {
        padding: 10px;
        background: #8e9aa7;
        color: @white;
      }

      >strong{
        color: lighten(@gray, 10%);
      }
    }

    &:hover{
               .transition(all 0.9s ease 0s);
               z-index: 99;
      li{
        &.box-icon {
	  a:not(.btn){
		color:lighten(@link_color, 50%);
		 
		&:hover{
		   color:@white;
		}
	 }
                 .scale(1.3);
        }
        &.box-header {
        }
        &.box-text {
          color: @white;
          background: darken(@link_color,5%);
        }
      }
    }
      .transition(all 0.9s ease 0s);
  }
}

.uk-progress-bar {
  background: @link_color;
}

#sp-main-body-wrapper .contact {
               h3 {
                        margin-top: -4px;
			padding:0;
	                border-bottom:1px solid #ddd;
                &::after {
                  background-color: @link_color;
                  content: "";
                  display: block;
                  height: 1px;
                  position: absolute;
                  width: 90px;
	       }
            }
}