/*!
 * intense-image-viewer
 *
 * MIT licensed
 * Copyright (C) 2013 Tim Holman, http://tholman.com
 */

/*********************************************
 *
 *********************************************/

$black: #222;

* {
	-webkit-font-smoothing: antialiased;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html,
body {
	font-family: "Ubuntu Mono", monospace;
	margin: 0px;
	height: 100%;
	width: 100%;
}

body {
	padding: 20px;
	text-align: center;
	min-width: 700px;
}

.logo {
	width: 55px;
	height: 55px;
	background: $black;
	color: #fff;
	text-align: center;
	line-height: 56px;
	border-radius: 100%;
	font-size: 27px;
	letter-spacing: -7px;
	text-indent: -6px;
	margin: auto;
	margin-bottom: 20px;
	margin-top: 20px;
}

header,
footer {
	h1 {
		font-weight: normal;
		width: 604px;
		background: $black;
		color: #fff;
		font-size: 18px;
		height: 55px;
		line-height: 55px;
		margin: auto;
		margin-top: 0px;
		margin-bottom: 20px;
	}
}

.demos {
	text-align: center;
	margin-top: 20px;
}

.demo-image {
	cursor: url("../img/plus_cursor.png") 25 25, pointer;
	display: inline-block;
	width: 290px;
	height: 290px;
	background-size: cover;
	background-position: 50% 50%;
	margin-left: 8px;
	margin-right: 8px;
	margin-bottom: 16px;

	&.first {
		background-image: url("../img/h1_small.jpg");
	}

	&.second {
		background-position: 50% 10%;
		background-image: url("../img/v1_small.jpg");
	}

	&.third {
		background-image: url("../img/h2_small.jpg");
	}
}

footer {
	h1 {
		padding-left: 20px;
		background: #e9e9e9;
		color: $black;
		font-size: 16px;

		a {
			color: $black;
		}
	}
}

iframe {
	margin-bottom: -5px;
	margin-left: 2px;
}

.github-link {
	position: fixed;
	z-index: 2;
	top: 0;
	right: 0;
	border: 0;
}

.github-corner:hover .octo-arm {
	animation: octocat-wave 560ms ease-in-out;
}

@keyframes octocat-wave {
	0%,
	100% {
		transform: rotate(0);
	}
	20%,
	60% {
		transform: rotate(-25deg);
	}
	40%,
	80% {
		transform: rotate(10deg);
	}
}

@media (max-width: 500px) {
	.github-corner:hover .octo-arm {
		animation: none;
	}
	.github-corner .octo-arm {
		animation: octocat-wave 560ms ease-in-out;
	}
}