@import url('./griza.css');

/*
	This file extends griza.css and is meant for use with pages
	in the captive portal, as well as the filter reject page.
*/

/*
	================
	GENERIC ELEMENTS
	================
*/

h1, h2, h3, h4, h5, h6 {
	text-align:  center;
}

h1 {
	font-size:  2em;
	margin-top: 0.5em;
}

h2 { font-size: 1.5em; }

pre { line-height: 1.25em; }


/*
	=======
	CONTENT
	=======
*/

#wrapper { text-align: center; }

#content {
	width:         65%;
	min-width:     20em;
	max-width:     40em;
	background:    #dddddd;
	border-radius: 4px;
	margin:        2em auto 1em auto;
	padding:       4px 4px;
}

#inner-content {
	text-align:    center;
	background:    #eeeeee;
	background:    -moz-linear-gradient(    top,       #f1f1f1 0%, #ebebeb 100%);
	background:    -webkit-linear-gradient( top,       #f1f1f1 0%, #ebebeb 100%);
	background:    linear-gradient(         to bottom, #f1f1f1 0%, #ebebeb 100%);
	border:        1px solid #c0c0c0;
	border-radius: 2px;
	padding:       1em 2em;
	margin:        0px 0px;
}

/*
	background-size doesn't work in IE <9, so we shouldn't RELY on it,
	but let's include it for the benefit of other browsers; this way,
	if IE compatibility isn't an issue, users don't have to worry about
	using an image of any particular size
*/
#logo {
	width:           100%;
	height:          96px;
	background:      transparent url('/style/img/logo/logomark-blue-800.png') no-repeat 50% 50%;
	background-size: auto 96px;

	/*
		Firefox's default image-scaling quality is awful; using a CSS transform
		forces it to use sub-pixel-precise scaling, like WebKit does by default.
		Unfortunately, there's nothing we can do about Opera — it supports several
		transformation and rendering properties, but its image-rendering algorithm
		is simply inherently terrible.
	*/
	transform:       rotate(0.0001deg);
}

#error {
	display:       inline-block;
	color:         #111111;
	text-align:    center;
	text-shadow:   1px 1px 0px rgba(255,255,255, 0.2);
	background:    #ff7f7f;
	border-radius: 4px;
	margin:        1em auto 0em auto;
	padding:       0.75em 1em;
}

#auth-notice,
#aup,
#reject-notice,
#ssl-warning,
#ssl-certificate {
	text-align:  left;
	margin:      1em 0px;
	padding:     0px 0px;
}

#auth-notice :first-child,
#aup :first-child,
#reject-notice :first-child,
#ssl-warning :first-child,
#ssl-certificate :first-child,
#login :first-child,
.buttons > :first-child,
.buttons form :first-child,
#footer :first-child {
	margin-top: 0px;
}

#auth-notice :last-child,
#aup :last-child,
#reject-notice :last-child,
#ssl-warning :last-child,
#ssl-certificate :last-child,
#login :last-child,
.buttons > :last-child,
#footer :last-child {
	margin-bottom: 0px;
}

.custom {
	max-height:                 10em;
	border:                     1px solid #cccccc;
	box-shadow:                 inset 1px 1px 4px rgba(0,0,0, 0.1);
	padding:                    0.5em 0.5em;
	-moz-box-sizing:            border-box;
	box-sizing:                 border-box;
	overflow-x:                 hidden;
	overflow-y:                 auto;
	-webkit-overflow-scrolling: touch;
}

.custom h1,
.custom h2,
.custom h3,
.custom h4,
.custom h5,
.custom h6 {
	font-size:   0.85em;
	font-weight: bold;
	text-align:  left;
	margin:      1em 0px;
	padding:     0px 0px;
}

.custom p,
.custom p,
.custom p {
	font-size:  0.85em;
}

/*
	This is used with <pre> to display non-HTML AUP text
	in a manner consistent with the expectations of a 'layman'
*/
.custom .pre-formatted,
.custom .pre-formatted,
.custom .pre-formatted {
	font-size:   0.85em;
	font-family: inherit;
	white-space: pre-line;
	margin:      0px 0px;
	padding:     0px 0px;
}

/*
#aup-text :last-child,
#reject-notice-text :last-child {
	padding-bottom: 0.5em;
}
*/

#login {
	width:       60%;
	max-width:   18em;
	margin:      0px auto 1em auto;
	padding-top: 0.25em;
}

#login label {
	display:  block;
	position: absolute;
	top:      -9999px;
	left:     -9999px;
}

#login br { display: none; }

#login input {
	display:   block;
	width:     100%;
	font-size: 1em;
	margin:    0.5em 0px 0px 0px;
	padding:   6px 6px;
}

#login input:first-of-type { margin-top: 0px; }

.buttons {
	width:      80%;
	text-align: center;
	margin:     0px auto;
}

.buttons p {
	width:      100%;
	text-align: center;
}

.buttons button,
.buttons .btn {
	margin:    0px auto;
}


#footer {
	margin-bottom: 0px;
	padding-top:   2em;
	clear:         both;
}

#footer p {
	text-align:    center;
	font-size:     0.75em;
}


/*
	========================
	ALTERNATE LOG-IN BUTTONS
	========================
*/
.buttons p.or {
	margin-top:    -0.25em;
	margin-bottom: -0.25em;
}

.alt-login,
.alt-login:hover {
	background: rgb(221,75,57);
	background: -moz-linear-gradient(   top,       rgb(221,75,57) 0%, rgb(204,69,53) 100%);
	background: -webkit-linear-gradient(top,       rgb(221,75,57) 0%, rgb(204,69,53) 100%);
	background: linear-gradient(        to bottom, rgb(221,75,57) 0%, rgb(204,69,53) 100%);
	border:     1px solid #a53628;
}

.alt-login:active {
	background: rgb(204,69,53);
}


/*
	==============
	MOBILE DEVICES
	==============
*/
@media only screen and (max-width: 1024px) {
	/* Use up more of the screen on iPads and the like */
	#content {
		width:  auto;
		margin: 1em auto;
	}
}

@media only screen and (max-width: 720px) {
	html { background: #eeeeee; }

	/* Use up the entire screen on phones */
	#content {
		width:           100%;
		max-width:       100%;
		background:      #eeeeee;
		margin:          0px 0px;
		padding:         0px 0px;
		-moz-box-sizing: border-box;
		box-sizing:      border-box;
	}

	#inner-content {
		background-image: none;
		border:           none;
		border-radius:    0px;
		padding:          1em 1em;
	}

	/* Make the logo even smaller */
	#logo {
		height:          48px;
		background-size: auto 48px;
	}

	h1 { font-size: 1.5em; }

	h2 { font-size: 1.25em; }

	#login,
	.buttons {
		width:     80%;
		max-width: 18em; /* Matches #login value above */
	}

	.buttons button,
	.buttons .btn {
		display: block;
		width:   100%;
	}

	.buttons button + button,
	.buttons button + .btn,
	.buttons .btn + button,
	.buttons .btn + .btn {
		margin-top: 0.5em;
	}

	/* Add additional bottom space for the debug overlay */
	body.debug {
		padding-bottom: 2.5em;
	}
}