@import "function.less";

/* =========================
 Layout
========================= */
#container {
	min-width: 1050px;
}

#header, #page {
	margin: 0 40px;
}

#page {
	padding-top: 20px;
}

#footer {
	padding-bottom: 20px;
}

.sidebar {
	#main {  
		width: 78%;
		float: left;
	}
}

#sidebar {
	width: 21%;
	float: right;
}


#box {
	width: 500px;
	margin: 50px auto;
}

/* =========================
 Containers
========================= */
#header {
	position: relative;
	
	h1 {
		margin: 0;
		padding: 0.5em 0;
		font-size: 2.75em;

		a {
			text-decoration: none;
		}
	}
}

#main {
	.block {
		margin-bottom: 20px;
		
		.secondary-navigation {
			font-size: 1.2em;
			line-height: 1;
			border-bottom-width: 0.4em;
			border-bottom-style: solid;
			.border-top-left-radius(0.4em);
			.border-top-right-radius(0.4em);
			
			ul {
				margin: 0;
				padding: 0;
				list-style-type: none;
				
				li {
					 float: left;
					
					a, span {
						display: block;
						padding: 0.75em 1em 0.55em 1em;
						text-decoration: none;
					}
				}
				
				li.first, li.first a, li.first a:hover {
					.border-top-left-radius(0.4em);
				}
			}
		}
		
		.content {
			padding: 1.2em;
			
			h2 {
				margin: 0;
				padding: 0;
				margin-bottom: 0.4em;
				font-size: 2em;
			}
			
			.inner {
				padding: 0;
				margin: 0;
			}
		}
	}
}

#sidebar {
	h3 {
		margin: 0;
		padding: 0.75em 1em 0.55em 1em;
		font-size: 1.2em;
		border-bottom-width: 0.4em;
		border-bottom-style: solid;
		.border-top-left-radius(0.4em);
		.border-top-right-radius(0.4em);
	}
	
	ul.navigation {
		margin: 0;
		padding: 0;
		list-style-type: none;
		line-height: 1;

		li a {
			display: block;
			padding: 1em 1.2em;
			text-decoration: none;
		}
	}
	
	.block {
		margin-bottom: 1em;
		padding-bottom: 1em;
		.border-radius(0.4em);
		
		.content {
			padding: 1em 1em 0 1em;
			
			p {
				margin: 0;
			}
		}
	}
	
	.notice, .sidebar-block {
		padding: 1em;
	}
}

#box {
	.block {
		margin-bottom: 20px;
		
		h1 {
			font-size: 2.75em;
		}
		
		h2 {
			padding: 0.5em 0.8em;
			font-size: 1.5em; 
			margin: 0;
		}
		
		.content {
			padding: 1em 1.5em;
		}
		
	}
}

#footer {
	.block {
		.border-radius(0.4em);

		p {
			margin: 0;
			padding: 0.9em;
		}
	}
}

/* =========================
 Ids and Classes
========================= */
#main-navigation {
	width: 100%;
	font-size: 1.3em;
	line-height: 1;
	.border-top-left-radius(0.4em);
	.border-top-right-radius(0.4em);

	ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
		
		li {
			float: left;
			.border-top-left-radius(0.4em);
			.border-top-right-radius(0.4em);

			a {
				display: block;
				padding: 0.7em 1.2em;
				text-decoration: none;
			}
		}
	}
}

#user-navigation {
	position: absolute;
	right: 1.5em;
	bottom: 0.2em;
	line-height: 1;

	ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
		
		li {
			float: left;
			padding: 0 0.5em;

			height: 2.5em;
			line-height: 2.5em;
			
			a, span, button, input {
				padding: 0.4em;
				text-decoration: none;
			}
		}
	}
}

.table {
	width: 100%;
	border-collapse: collapse;  
	margin-bottom: 1.25em;
	
	th {
		font-weight: bold;
		text-align: left;
	}
	
	th.first {
		.border-top-left-radius(0.4em);
	}
	
	th.last {
		.border-top-right-radius(0.4em);
	}
	
	th, td {
		padding: 0.8em;
		
		form {
			display: inline;
			
			div {
				display: inline;
			}
		}
	}
	
	td.last {
		text-align: right;
	}
}


.actions-bar {
	padding: 1em 1px;
	line-height: 2;
	
	.actions {
		float: left;
		line-height: 1;
		
		a, input {
			margin-right: 0.45em;
			padding: 0.35em 0.45em;
			display: block;
			.border-radius(0.25em);
			text-decoration: none;
			float: left;
		}
	}
	
	.pagination {
		line-height: 1;
		float: right;
		padding: 1px 0;
	}
}

.pagination {
	a, span {
		display: block;
		float: left;
		
		padding: 0.35em 0.45em;
		margin-right: 0.45em;
		border-style: solid;
		border-width: 1px;
		.border-radius(0.25em);
	}
	
	span.current {
		font-weight: bold;  
	}
	
	a {
		text-decoration: none;  
	}
}

.form {
	.group {
		margin-bottom: 1.25em;
	}
	
	div.left {
		width: 20%;
		float: left;
	}

	div.right {
		width: 75%;
		float: right;
	}
	
	.columns {
		.column {
			width: 48%;
		}
		
		.left {
			float: left;
		}
		
		.right {
			float: right;
		}
	}
	
	label.label, input.text_field, textarea.text_area {
		font-size: 1.2em;
		padding: 1px 0;
		margin: 0;
	}
	
	label.right {
		text-align: right;
	}
	
	input.checkbox, input.radio {
		margin-right: 0.5em;
	}
	
	label.checkbox, label.radio {
		line-height: 1.5em;
	}
	
	label.label {
		display: block;
		padding-bottom: 0.2em;  
		font-weight: bold;
	}
	
	div.fieldWithErrors label.label {
		display: inline;
	}
	
	.fieldWithErrors .error {
		color: red;
	}
	
	input.text_field, textarea.text_area {
		width: 100%;
		border-width: 1px;
		border-style: solid;
	}
}


ul.list {
	margin: 0;
	padding: 0;
	list-style-type: none;
	
	li {
		clear: left;
		padding-bottom: 5px;
		
		.left {
			float: left;
			
			.avatar {
				width: 50px;
				height: 50px;
			}
		}
		
		.item {
			margin-left: 80px;
			
			.avatar {
				float: left;
				margin: 0 5px 5px 0;
				width: 30px;
				height: 30px;
			}
		}
	}
}



/* =========================
 Patch for Jquery UI
========================= */
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year  {
	width: 48%;
}

.ui-widget {
	font-size: 93%;
	line-height: 1;
}