/* --------------------------------------------------------------------------------
 * Elements - Rails Starting Base
 *
 * layout.css.scss
 *
* Defines the basic layout of the page and the elements that can be used to make the 
* page turn into whatever flow we want
 *
 * @author : Jais Cheema 
 *
-----------------------------------------------------------------------------------*/

@mixin lr-align {
	&.left {
		float:left;
		margin:20px 0 0 0;
	}

	&.right {
		float:left;
		margin:20px 0 0 20px;
	}
}


body {
	.body_container {
		width:100%;
		min-height:100%;
		height:auto !important;
		height:100%;
		margin:0 auto -280px;	

		&#login_container {

			padding-top:30px;
			background:url('/assets/elements/login_bg.jpg');

			#logo {
				background:url('/assets/elements/header-logo.png') no-repeat;
				height:62px;
				width:278px;
				margin:5px auto;
			}

			#after_form {
				margin-top:60px;
			}

			#flash {
				div {
					text-align:left;
					padding:10px 30px;
					background:#f48585;
					text-shadow:0 1px 0 #FCC;
					-moz-border-radius:5px;
					-webkit-border-radius:5px;
					border-radius:5px;
					-moz-box-shadow:0 1px 0 #b7dcea,inset 0 1px 3px #d55e5e;
					-webkit-box-shadow:0 1px 0 #b7dcea,inset 0 1px 3px #d55e5e;
					box-shadow:0 1px 0 #b7dcea,inset 0 1px 3px #d55e5e;
					color:#971E0D;
					font-family:14px;
				}
				margin-bottom:20px;
			}

			#login_form {
				width:410px;
				margin:auto;

				h2 {
					font-family:KlavikaMedium;
					font-size:32px;
					-moz-text-shadow:0 1px 0 rgba(255, 255, 255, 0.4);
					-webkit-text-shadow:0 1px 0 rgba(255, 255, 255, 0.4);
					text-shadow:0 1px 0 rgba(255, 255, 255, 0.4);
					letter-spacing:-1px;
					margin-bottom:10px;
				}

				form {
					margin-top:10px;
					ol {
						list-style:none;
						margin:0 0 12px 0;

						li {
							list-style-position:outside;
							margin:0 0 12px 0;

							input[type="text"], input[type="password"] {
								color:#ff9900;
								font:KlavikMedium 20px;
								padding:8px;
								letter-spacing:1px;
								-webkit-border-radius:4px;
								-moz-border-radius:4px;
								border-radius:4px;
								-webkit-box-shadow:0 1px 0 white,inset 0 2px 2px rgba(0,0,0,0.1);
								-moz-box-shadow:0 1px 0 white,inset 0 2px 2px rgba(0,0,0,0.1);
								box-shadow:0 1px 0 white,inset 0 2px 2px rgba(0,0,0,0.1);
								float:left;
								width:390px;
								border:1px solid gray;
							}
						}
					}

					fieldset {
						&.inputs {
							li {
								overflow:hidden;
								margin-bottom:10px;

								label {
									margin-top:4px;
									width:180px;
									float:left;
								}
							}
						}

						&.buttons {
							margin-top:25px;

							li {
								display:inline;

								a {
									margin-left:20px;
									text-decoration:none;
								}
							}
						}
					}
				}
			}
		}

		.primary_container {

			.width_container {
				position:relative;
				margin:0px auto;
				width:1024px;

				&.modal {
					width:100%;
				}

				&.padd {
					margin-bottom:50px;
				}

				.absoluted {
					position:absolute;
				}

				.join_container {
					overflow:auto;
				}

				.flash {
				
					.box {
						margin:20px;
						margin-bottom:10px;
						padding:5px;
						padding-left:60px;

						&.alert {
							background:url('/assets/elements/warning.png') no-repeat 20px 1px;
							background-color:#F7e9Af;
							border:1px solid #FFCC00;
						}

						&.notice {
							background:url('/assets/elements/info.png') no-repeat 20px 1px;
							background-color:#CFC;
							border:solid 1px #6C6;
						}

						&.error {
							background:url('/assets/elements/block.png') no-repeat 20px 1px;
							background-color:#FCC;
							border:1px solid #C66;
						}
					}
				}

				header {
					margin-top:20px;

					nav {
						ul {
							list-style:none;
							height:40px;
							font-size:17px;

							li {
								display:block;
								float:left;
								text-align:right;

								a {
									padding:3px 20px;
									display:block;
								}
							}
						}
					}
				}

				.content {
					&.main {
						width:675px;

						&.stretch {
							width:1024px;
							clear:both;
						}

						@include lr-align;
					}

					&.aside {
						width:325px;
						@include lr-align;
					}
				}

				.breadcrumbs {
					margin-top:25px;

					ul {
						height:30px;
						line-height:30px;
						border-top:1px solid #CACACA;
						border-bottom:1px solid #CACACA;
						overflow:hidden;
						margin:0px;
						margin-left:30px;
						margin-right:30px;
						padding:5px;

						li {
							list-style-type:none;
							float:left;
							padding-left:10px;
						}

						a {
							height:30px;
							display:block;
							background:url('/assets/elements/bc_separator.png') no-repeat right;
							padding-right:15px;
						}

						.home
						{
							border:none;
							margin:8px 0px;
						}
					}
				}

				.top_shadow_border {
					background:url('/assets/elements/shadow.png') no-repeat top center;
					border-top:1px solid gainsboro;
					padding-top:20px;
				}

				.page_title {
					padding-bottom:40px;
					text-align:center;
					padding-top:20px;
						
					h1 {
						display:block;
						margin:auto;
						width:800px;
					}

					&.left {
						text-align:left;
						padding-bottom:20px;
						padding-left:12px;

						h1 {
							width:100%;
						}
					}

					&.right {
						text-align:right;
						padding-bottom:10px;
						padding-right:12px;

						h1 {
							width:100%;
						}
					}
				}
			}

			&.special {
				background:#E4E4E4 url('/assets/elements/shadow.png') center 0 no-repeat;
				border-top:1px solid gainsboro;
				margin:14px 0 0 0;
				padding:40px 0;
			}
		}

		.push {
			height:280px;
			clear:both;
		}
	}

	.footer {
		width:100%;
		height:229px;
		border-top:1px solid #DDD;
		clear:both;
		padding-top:40px;
		padding-bottom:10px;

		.container {
			position:relative;
			margin:0px auto;
			width:1024px;
			padding:0px 20px;

			nav {
				overflow:auto;

				section {
					float:left;
					margin-right:25px;
					width:200px;

					ul {
						list-style:none;
						margin-left:10px;
					}
				}
			}

			p.copyright {
				margin-top:40px;
				display:block;
				float:left;
				height:20px;
			}
		}
	}

	/** Definite Container classes */

	.col {
		float:left;
		margin-left:15px;

		&.oneof2 {
			width:490px;
		}

		&.oneof3 {
			width:325px;
		}

		&.oneof4 {
			width:230px;
		}
	}
}