// main page(basic style + additional)
// try to use the same level of specificity
// element: 
//		1.styling: try to use class attribute
//		2.js selection: try to use id attribute
// here we can extend components and add additional style


// here we have basic style available for all pages
// from here we can push other styling attributes for each other page

body{
	.notification{
		z-index: 4;
		.flash-error, .flash-notice{
			margin: 0;
		}
	}
	.header{
		z-index: 1;
		display: table;
		width: 100%;
		zoom:1;
		@include pad(5px);
	}
	.content{
		z-index: 2;
		@include clearfix;
		.container{
			@include container;
			background: $container_color_3;
			@include border-radius(2px);
			border: solid 1px #4f91cd;
			color: #4f91cd;
		}
	}
	.footer{
		z-index: 1;
		height: 50px;
		width: 100%;
		bottom: 0;
		footer{
			width: 100%;
			height: 50px;
			font-size: 12px;
			line-height: 50px;
			color:white;
			text-align: center;
			position: absolute;
		}
	}

	.error_container{
		height: 30px;
		line-height: 30px;
		color:$font_error_color;
	}

}

//max 3rd level

body#main {
  .notification {
  }
  section.header {
    .logo {
      @include outer-container;
      img {
        @include span-columns(4);
        @include shift(6);
        @include pad(30px 0);
      }
    }
  }
}


/*landing page css*/

body#landing-page{
	.notification{}
	section.header{
		background: #2749a0;
		border-bottom: solid 2px rgb(7, 27, 78);
		.logo1{
			float: left;
			cursor: pointer;
		}
	}
	.content{
		#table_structure, #leads_structure{
			padding: 10px;
			position: relative;
		}
		.container{
		  @include outer-container;
		  background: transparent;
		  border:none;
			min-height: 400px;
			margin-top:10px;

			.url{
				@include span-columns(8);
				@include shift(4);
				@include pad(20px 0);

				margin-top: 20px;
				background-color: rgba(255, 255, 255, 0.91);
				
				p{
				  @include span-columns(6 of 8);
				  @include shift(1);
				}
				
				select{
				  @include span-columns(2 of 8);
				  @include shift(1);
				}
				
				.url__item{
          height: 40px;
          
          @include span-columns(6 of 8);
          @include shift(1);
          @include border(solid, 1px, $sky_blue);
          @include border-radius;
          @include pad(0 0 0 5px);
        }
			}

			form{
			  @include pad(20px 0);
				@include span-columns(8);
				@include shift(4);
				
				@include media($medium-screen) {
				  @include span-columns(12);
				  @include shift(2);
				}
				
				@include media($tablet) {
				  @include span-columns(14);
          @include shift(1);
				}
				
				background-color: rgba(255, 255, 255, 0.91);
			}
			
			.form_inputs, .form_actions, .edit-user-email{
			  @include margin(10px 0 0 0);
			  @include span-columns(6 of 8);
			  @include shift(1);
			}
			
			// .form_actions{;
			// 	@include clearfix;
			// 	color: $light_blue;
				
			// 	input, .btn_back {
			// 		@include btn(#fff, 120px, 40px,1em, $light_blue, transparent, $light_blue);
			// 	}	
			// 	input{
			// 		float: left;
			// 	}
			// 	.btn_back {
			// 		float: right;
			// 	}
			// }
		}
	}
	.footer{
        position: absolute;
		footer{
			background-color: $medium_blue;
		}
	}
}