// 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-login{
			@include button-positive-login;
		}

		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{}
	.header{
		.logo{
			@include outer-container;
			padding: 80px 0;
			img{
				width: 400px;
			}
		}
	}
	.content{
		// .password-reset{
		// 	form{
		// 		display: block;
		// 		@include clearfix;
		// 		.form_actions{
		// 			padding: 10px;
		// 			@include clearfix;
		// 			input, .btn_back{
		// 				@include btn(#fff, 120px, 40px, 1.3em, transparent,transparent,$sky_blue);
		// 				border:none!important;
		// 				float: left;
		// 			}
		// 			.btn_back{
		// 				float: right;
		// 				position: relative;

		// 				span:hover{
		// 					color:$sky_blue;
		// 				}

		// 				.arrow{
		// 					@include rotate(45deg);
		// 					position: absolute;
		// 					width: 15px;
		// 					height: 15px;
		// 					left: 0;
		// 					top: 12px;
		// 					border-left: solid 1px white;
		// 					border-bottom: solid 1px white;
		// 				}
		// 			}
		// 		}
		// 	}
		
		// .registration_container{
		// 	@include outer-container;
		// 	@include pad(20px 0);	

		// 	form{
		// 		@include fill-parent;
				
		// 		.field_container{
		// 			@include span-columns(14);
		// 			@include shift(1);
		// 			background-color: transparent;
					
		// 			legend{
		// 				@include font-attr(1.4em, $medium_blue, bold);
		// 			}
					
		// 			fieldset{
		// 			  @include fill-parent;
		// 				@include pad(10px 0);
		// 				margin-top: 10px;
						
		// 				legend{
		// 					@include font-attr(1.2em, $medium_blue, bold);
		// 				}
						
		// 				.form_inputs{
		// 				  @include span-columns(12 of 14);
		// 				  @include shift(1);
		// 				}
		// 			}
		// 		}

		// 		.form_inputs.acc_info, .form_inputs.acc_details{
					
		// 			.left_column, .right_column{
		// 				@include span-columns(6 of 12);
		// 			}

		// 			.left_column{
		// 				.user_details_phone_number{
		// 					@include span-columns(4 of 6);
		// 				}
		// 				.user_details_phone_extension{
		// 					@include span-columns(2 of 6);
		// 					@include omega;
		// 				}
		// 			}

		// 			.right_column{
		// 				.logo_preview{
		// 					.img_container{
		// 					  @include border(solid, 1px, $light_blue);
		// 					  @include pad(5px);
		// 						height: 200px;
		// 						overflow: hidden;
		// 						box-shadow: 0 0 1px 1px;
		// 					}

		// 					.headshot{
		// 						max-width:200px;
		// 					}
		// 				}
		// 				.partner_state{
		// 					@include span-columns(2 of 6);

		// 					select{
		// 						height: 40px;
		// 						width: 100%;
		// 						margin-bottom: 0px;
		// 					}

		// 				}
		// 				.partner_zip_code{
		// 					@include span-columns(2 of 5);
		// 					@include omega;
		// 					padding-left: 10px;
		// 					label{
		// 						text-align: center;
		// 					}
		// 					input{
		// 						@include center;
		// 						width: 60px;
		// 					}
							
		// 				}

		// 				#user_details_state{
		// 					width: 60px;
		// 					height: 38px;
		// 					margin-bottom: 0;
		// 				}

		// 				.upload_actions{
		// 					position: relative;
		// 					.upload_btn{
		// 						@include btn(#fff, 120px, 40px, 1em, $light_blue, #f7f7f7, $light_blue);
		// 						margin: 9px 0;
		// 					}
		// 					input{
		// 						display: none;
		// 					}
		// 				}
		// 			}
		// 		}
		// 		.form_actions{
		// 			@include span-columns(14);
		// 			@include shift(1);
		// 			@include clearfix;
					
		// 			margin-top:20px;
		// 			color: $light_blue;

		// 			input{
		// 				float: left;
		// 			}
		// 			.btn_back{
		// 				float: right;
		// 			}				
		// 			input, .btn_back{
		// 				@include btn(#fff, 120px, 40px, 1em, $light_blue, transparent, $light_blue);
		// 			}
		// 		}
		// 	}
		// }
	}
}

/*landing page css*/

body#landing-page{
	.notification{}
	.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{
		footer{
			background-color: $medium_blue;
		}
	}
}