// 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{
	font-family: $primaryFontFamily;

	.notification{
		z-index: 4;
		.flash-error, .flash-notice{
			margin: 0;
		}
	}
	.header{
		z-index: 3;
	}
	.content{
		.button{
    	  @include button;
    	  width: auto;
  	    }

		.button.button-positive{
  		  @include button-positive;
		}

		.button.button-negative{
  		  @include button-negative(#444);
		}

		.button.button-positive.type2{
		  @include button-positive-style2;
		}

        .button.button-negative.type2{
          @include button-negative-style2;
          float: right;
          text-decoration: none;
        }

		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;
			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;
      padding: 80px 0;
      img {
        width: 400px;
      }
    }
  }
}


/*landing page css*/

body#landing-page{
	.notification{}
	section.header{
		position: relative;
		background: rgb(39, 73, 160);
		border-bottom: solid 2px rgb(7, 27, 78);
		height: 90px;
		.logo1{
			position: absolute;
			left: 20px;
			top:20px;
			cursor: pointer;
		}
		.nav_menu{
			position: absolute;
			right: 20px;
			top:30px;
		}
	}
	.content{
		#table_structure{
			padding: 20px;
			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;
		}
	}
}