// Core variables and mixins
@import "compass";
@import "Foundation/variables"; // Modify this for custom colors, font-sizes, etc
@import "Foundation/mixins";
@import "Constants";
@import "Mixins";
@import url('http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic');
@import "../../Public/Library/fontawesome/scss/font-awesome.scss";

$errorBoxWidth: $unit * 12;
$errorBoxHeight: $unit * 3;

body {
	background: $grayDarker;
	margin: 0;
}

.neos {
	// CSS Reset
	@import "Foundation/reset";

	@import "Foundation/grid";

	@include font;

	.neos-error-screen {
		background: transparent;
		border: none;
		position: absolute;
		top: 50%;
		left: 50%;
		width: $errorBoxWidth;
		height: $errorBoxHeight;
		margin-top: -($errorBoxHeight / 2);
		margin-left: -($errorBoxWidth / 2);
		color: #fff;
		@include box-shadow(none);
		@include border-radius(none);

		.neos-message-icon {
			font-size: 4em;
			color: $warning;
			float: left;
			margin-right: .75em;
		}

		h1 {
			font-size: 1.6em;
			margin-top: .3em;
			margin-bottom: .25em;
			margin-left: 112px;
		}

		p {
			margin-left: 112px;
			margin-top: 0;
		}

		a {
			color: $blue;
		}
	}
}

@media (min-width: 320px) and (max-width: 480px) {
	.neos {
		.neos-error-screen {
			position: static;
			top: 0;
			margin-top: $unit;
			margin-left: 0;
			padding-left: $unit;
			padding-right: $unit;
			width: 100%;
			height: auto;
			@include box-sizing(border-box);

			.neos-message-icon {
				font-size: 2em;
				margin-right: .75em;
			}

			h1 {
				font-size: 1.6em;
				margin-top: .3em;
				margin-bottom: .25em;
				margin-left: 56px;
			}

			p {
				font-size: .9em;
				margin-left: 56px;
				margin-top: 0;
			}
		}
	}
}