// ---------------------------------------------- //
// Name: style.css
// Author: Nate Hunzaker, from work originally 
//         by Dennis Hall
// ---------------------------------------------- //
// Table of Contents:
// ---------------------------------------------- //
// 1. General
// 2. Typography
// 3. Layout
// 4. Tables
// 5. Form Elements
// 5. Misc.
// ---------------------------------------------- //

@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300);
@import "compass/reset";
@import "compass/css3";
@import "partials/_variables";
@import "partials/_grids";
@import "partials/_helpers.scss";
@import "partials/_admin-menu.scss";
@import "partials/icomoon/_icomoon.scss";

// 1. Layout
// ------------------------------------------ //

nav {
	&.secondary {
		text-align: right;
		vertical-align: middle;
		margin-top: 1%;
	}
}

.centred {
	text-align: center;
}

// 2. Typography
// ------------------------------------------ //

// Using a Modular Scale of 16/20 using the golden ratio:
// http://modularscale.com/scale/?px1=16&px2=20&ra1=1.618&ra2=0

// General

body {
	background: #fff;
	color: #444;
	font: 400 0.875em/1.618em "Helvetica", serif;
	text-shadow: 0 $borderRadiusSmall 1px #fff;
	height: 100%;
	overflow-x: hidden;
}

a {
	text-decoration: none;
}

a:link, a:visited {
	color: #222;
}

ul, ol, dl {
	margin: 0 0 0 1.618em;
	padding: 0;
}

ol li {
	list-style: decimal;
}

p {
	margin: 0 0 2.618em;
}

strong, b {
	color: #222;
	font-weight: 600;
}

i, em {
	font-style: italic;
}

// Headings
h1, h2, h3, h4, h5, h6 {
	color: #222;
	font-family: "Open Sans", sans-serif;
	font-weight: 600;
	line-height: 1.618em;
	margin-bottom: $em;
	text-shadow: 0 1px 1px #fff;
	// An easy way to anti-alias text
}

h6, h5 {
	font-size: 1em;
}

h4 {
	font-size: 1.25em;
}

h3 {
	color: #336699;
	font-size: 1.618em;
	letter-spacing: -1px;
	border-bottom: solid 1px #c0c0c0;
}

h2 {
	color: #116677;
	font-size: 2.023em;
	letter-spacing: -1px;
}

h1 {
	color: #114477;
	font-size: 2.618em;
	letter-spacing: -2px;
}

.dummy-ad {
	width: 298px;
	height: 248px;
	border: 1px solid #ccc;
	background: #eee;
	color: #aaa;
	line-height: 248px;
	text-align: center;
}

/* form elements */
.form-item {
	clear: both;
	padding: 0 0 $paddingSmall;
}

label {

}

label.for-checkable {

}

textarea, input[type="text"], input[type="password"], select {
	border-radius: $borderRadius;
	border: 1px solid #999;
	padding: $paddingSmall;
}

textarea:focus, input[type="text"]:focus, input[type="password"]:focus, select:focus {
	border-color: #007DFF;
}

textarea {
	width: 65%;
}

.description {
	padding: $borderRadiusSmall 0 5px 160px;
	font-size: 11px;
	color: #777;
	max-width: 400px;
	display: block;
}

.button, button, .btn, input[type="submit"], a.submit {

	background: #d9d9d9;
	border: 1px solid #aaa;
	border-color: #aaa #999 #888;
	color: #000;
	cursor: pointer;

	font-size: 90%;
	font-weight: 400;

	margin: 0 $margin 0 0;
	padding: $borderRadiusLarge $padding;
	text-shadow: 0 1px 0 #fff;
	text-decoration: none;

	@include inline-block();
	@include background(linear-gradient(#ededed, #d9d9d9));
	@include box-shadow(inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 4px rgba(150, 150, 150, 0.5));
	@include border-radius($borderRadiusLarge);

	&:hover, &:focus, &.loading {
		background: #2F5163;
		border-color: #333;
		color: #fff;
		text-shadow: 0 1px 1px #111;
		@include box-shadow(inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 4px rgba(150, 150, 150, 0.5));
		@include background(linear-gradient(lighten(#2F5163, 10%), #2F5163));
	}

	&:active {
		border-color: #000;
		@include box-shadow(inset 0 0 $borderRadiusLarge #000);
	}

	&.loading {
		background: #2F5163 url("/images/loader.gif") $padding 50% no-repeat;
		@include background(url("/images/loader.gif") $padding 50% no-repeat, linear-gradient(lighten(#2F5163, 10%), #2F5163));
		padding-left: 40px;
	}

}

input.labelFirst {
	margin-left: auto;
}

form .section {
	margin: 0 0 $padding;
}

form .section:first-child {
	border: 0;
}

.actions, .form-actions {
	text-align: center;
	border-top: 1px solid $borderColour;
	//background: opacify($borderColour, 0.4);
	background: rgba(217, 217, 217, 0.2);
	padding: $margin 0;

	input, .btn, button {
		margin: 0 -1px 0 0;
		&:last-child {
			@include border-top-left-radius(0);
			@include border-bottom-left-radius(0);
		}
		&:first-child {
			@include border-top-right-radius(0);
			@include border-bottom-right-radius(0);
		}
	}

}

.log-in-or-register {
	float: right;
}

.link-divider {
	width: 0;
	height: 1.2em;
	overflow: hidden;
	display: inline-block;
	border-right: 1px solid #000;
	margin: 0 $borderRadius;
}

// User Login
// -------------------------------------------//

#user-login {
	background: #eee;
	padding: $padding;
	position: absolute;
	right: 1%;
	display: none;
	border: 1px solid #aaa;
	margin: 0;
	width: auto;

	@include border-radius($borderRadiusLarge);
	@include box-shadow(inset 0 0 1px #fff, 0 1px 5px #888);
}

#user-welcome-or-login h2 {
	display: none;
}

#user-welcome-or-login .form-field {
	margin: 0 0 $borderRadiusSmall;
}

#user-welcome-or-login .actions {
	border-top: 1px solid #d9d9d9;
	padding: $paddingSmall 0 0;
}

#user-welcome-or-login .actions a {
	display: none;
}

#user-welcome-or-login input[type="submit"] {
	width: auto;
	margin-bottom: $margin;
}

#user-login:before,
#user-login:after {
	content: "";
	position: absolute;
	z-index: 998;
	top: -8px;
	right: 78px;
	margin-left: -8px;
	border-top: 0;
	border-left: $borderRadiusLarge solid transparent;
	border-right: $borderRadiusLarge solid transparent;
	border-bottom: $borderRadiusLarge solid #eee;
}

#user-login:after {
	border-bottom: 9px solid #ccc;
	top: -9px;
	z-index: 997;
}

.close {
	position: absolute;
	right: 5%;
	width: $em;
	height: $em;
	@include border-radius($borderRadiusLarge);
	text-align: center;
	overflow: hidden;
	background: #aaa;
	color: #aaa;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	cursor: pointer;
	text-shadow: 0 1px $borderColour;
}

.close:before {
	content: "\D7";
	color: #000;
	font-weight: normal;
	width: $em;
	position: absolute;
	top: -1px;
	left: 0;
	line-height: $em;
	font-family: "Helvetica Neue", Consolas, Verdana, Tahoma, Calibri, Helvetica, Menlo, "Droid Sans", sans-serif;
}

/* messages [info, success, warning, error] */
#messages {
	clear: both;
}

#messages ul {
	list-style: none;
}

.info,
.success,
.warning,
.error {
	border: 1px solid;
	margin: 0 0 $padding;
	padding: $padding $paddingSmall $padding 50px;
	background-repeat: no-repeat;
	background-position: $paddingSmall 6px;
}

.info {
	color: #00529B;
	background-color: #BDE5F8;
	background-image: url('images/icons/info.png');
}

.success {
	color: #4F8A10;
	background-color: #DFF2BF;
	background-image: url('images/icons/success.png');
}

.warning {
	color: #9F6000;
	background-color: #FEEFB3;
	background-image: url('images/icons/warning.png');
}

.error {
	color: #D8000C;
	background-color: #F6D6D6;
	background-image: url('images/icons/error.png');
}

.sidePanelItem {
	margin: 0 0 $paddingSmall;
}

/* tag cloud */

.tagcloud .tag {
	float: left;
	padding: $paddingSmall;
	display: inline;
}

.tag-10 {
	font-size: 1.8em;
}

.tag-9 {
	font-size: 1.7em;
}

.tag-8 {
	font-size: 1.5em;
}

.tag-7 {
	font-size: 1.4em;
}

.tag-6 {
	font-size: 1.3em;
}

.tag-5 {
	font-size: 1.1em;
}

.tag-4 {
	font-size: 1.0em;
}

.tag-3 {
	font-size: 0.9em;
}

.tag-2 {
	font-size: 0.8em;
}

.tag-1 {
	font-size: 0.7em;
}

/** Search **/
.search {
	float: right;
	clear: both;
}

.search .actions {
	border: none;
	margin: 0;
	padding: 0;
	float: right;
}

.search .actions input {
	margin: 0;
	padding: $borderRadiusSmall;
	margin-left: $paddingSmall;
	font-size: 0.9em;
}

.facets {
	width: 16em;
	float: left;
	margin-right: $marginLarge;
}

#adminToolbar li ul {
	display: none;
	float: left;
	clear: left;
	position: absolute;
	background: #1993A8;
}

#formPopup {
	position: absolute;
	display: inline;
	left: 20%;
	top: 10%;
	width: 60%;
	height: 80%;
	padding: $padding;
	overflow: scroll;
	@include background(#ededed);
	@include box-shadow(inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 4px rgba(150, 150, 150, 0.5));
	@include border-radius($borderRadiusLarge);
	border: 1px solid #aaa;
	border-color: #aaa #999 #888;
	display: none;

}

.toolbar, .btn-group, .actions input {
	position: relative;
	margin: 0;

	li {

		@include inline-block();
		&:first-child a {
			@include border-top-left-radius($borderRadius);
			@include border-bottom-left-radius($borderRadius);
		}
		&:last-child a {
			@include border-top-right-radius($borderRadius);
			@include border-bottom-right-radius($borderRadius);
		}

		a {
			background: #d9d9d9;
			border: 1px solid #aaa;
			border-color: #aaa #999 #888;
			color: #000;
			cursor: pointer;

			font-size: 85%;
			font-weight: 400;

			margin-right: -1px;
			padding: $borderRadiusLarge $padding;
			text-shadow: 0 1px 0 #fff;
			text-decoration: none;

			@include inline-block();
			@include background(linear-gradient(#ededed, #d9d9d9));
			@include box-shadow(inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px $borderRadius rgba(150, 150, 150, 0.5));

			&:hover, &:focus, &.loading {
				background: #2F5163;
				border-color: #333;
				color: #fff;
				text-shadow: 0 1px 1px #111;
				@include box-shadow(inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px $borderRadius rgba(150, 150, 150, 0.5));
				@include background(linear-gradient(lighten(#2F5163, 10%), #2F5163));
			}

			&:active {
				border-color: #000;
				@include box-shadow(inset 0 0 $borderRadiusLarge #000);
			}

			&.loading {
				background: #2F5163 url("/images/loader.gif") $margin 50% no-repeat;
				@include background(url("/images/loader.gif") $margin 50% no-repeat, linear-gradient(lighten(#2F5163, 10%), #2F5163));
				padding-left: $paddingLarge;
			}
		}

		&:last-child {
			border: 0;
		}
		ul {
			display: none;
			float: left;
			clear: left;
			position: absolute;
			background: #1993A8;
		}
	}
}

/*/mediaquery*/
@import "partials/_media-queries";