/**
 * Theme: Naturarvet
 * Author: Senap Webbyrå i Stockholm
 * Author URI: http://www.senap.se
 * Description: Theme by Senap Webbyrå i Stockholm, Design by William Kuylenstierna.
 * @file: style.css
 * @author: designovermatter
 */

@font-face {
    font-family: 'Font1';
    src: url('fonts/fontone-bold-webfont.eot');
    src: url('fonts/fontone-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/fontone-bold-webfont.woff') format('woff'),
         url('fonts/fontone-bold-webfont.ttf') format('truetype'),
         url('fonts/fontone-bold-webfont.svg#Font1Bold') format('svg');
    font-weight: bold;
    font-style: normal;

}
@font-face {
    font-family: 'Font1';
    src: url('fonts/fontone-webfont.eot');
    src: url('fonts/fontone-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/fontone-webfont.woff') format('woff'),
         url('fonts/fontone-webfont.ttf') format('truetype'),
         url('fonts/fontone-webfont.svg#Font1Regular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'rockwellstd';
    src: url('fonts/rockwellstd-webfont.eot');
    src: url('fonts/rockwellstd-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/rockwellstd-webfont.woff') format('woff'),
         url('fonts/rockwellstd-webfont.ttf') format('truetype'),
         url('fonts/rockwellstd-webfont.svg#RockwellStdRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'rokkitt';
    src: url('fonts/rokkitt-regular-webfont.eot');
    src: url('fonts/rokkitt-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/rokkitt-regular-webfont.woff') format('woff'),
         url('fonts/rokkitt-regular-webfont.ttf') format('truetype'),
         url('fonts/rokkitt-regular-webfont.svg#RokkittRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Lekton';
    src: url('fonts/lekton-regular-webfont.eot');
    src: url('fonts/lekton-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lekton-regular-webfont.woff') format('woff'),
         url('fonts/lekton-regular-webfont.ttf') format('truetype'),
         url('fonts/lekton-regular-webfont.svg#') format('svg');
    font-weight: normal;
    font-style: normal;
}


* {
	margin: 0;
	padding: 0;
}

body { font: normal 15px/15px 'rokkitt', Georgia, serif; }
h1, .h1 {
	font: bold 18px/18px 'Font1', Verdana, sans-serif;
	text-transform: uppercase;
}
h2 {
	font: bold 14px/15px 'Font1', Verdana, sans-serif;
	text-transform: uppercase;
}
input[type=text], textarea, .pixels {
	padding: 6px;
	border: 1px solid #8c8273;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	font: normal 12px/12px 'Novecentowide', Verdana, sans-serif;
}
input[type=text].label, textarea.label { color: #8c8273; }
p {
	font: normal 16px/18px 'rokkitt', Georgia, serif;
	margin-bottom: 12px;
}
p label { display: block; }
p.checkbox label { display: inline-block; }
p.alignleft { margin-right: 12px; }
a {
	text-decoration: none;
	color: #7861cc;
}
a img { border: none; } /* IE */

/* Classes */
.wrap {
	margin: 0 auto;
	max-width: 960px;
	padding: 0 10px;
}
.alignleft { float: left; }
.alignright { float: right; }
.clearboth, .clear { clear: both; }
.meta, .meta a, .cart-table th { color: white; }
.meta img {position:relative;top:7px;}
.recentpost-list .meta a { color: grey; }
.product .meta { color: black; }
.message {
	color: #bfc423;
}
.button, .qq-upload-button {
	padding: 4px 12px;
	background: #a39b8f;
	border: none;
	border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	-o-border-radius: 12px;
	font: normal 12px/12px 'Font1', Verdana, sans-serif;
	color: white;
	cursor: pointer;
}
.icon-22 {
	width: 22px;
	height: 22px;
	background-position: 0 0;
	background-repeat: no-repeat;
	display: block;
}
.icon-22.email { background-image: url( images/email.png ); }
.icon-22.twitter { background-image: url( images/twitter.png ); }
.icon-22.linkedin { background-image: url( images/linkedin.png ); }
.icon-22.facebook { background-image: url( images/facebook.png ); }

.clear { clear: both; }
p.number { width: 100px; }
.hidden { display: none; }

/* Widgets */
.widget {
	padding: 0 16px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
}
.widget.orange, .widget_butique_cart_widget {
	background-color: rgba( 204, 209, 33, .85 );
	color: white;
}
.widget_butique_cart_widget .message { color: white; }
#sidebar.page .widget_butique_cart_widget {
	background-color: rgb( 204, 209, 33 );
}
.widget h1 {
	margin-bottom: 14px;
}
.widget_butique_cart_widget {
	min-height: 125px;
	padding: 18px;
}

/* Cart */
.cart-table th, .description { font-size: 12px; }
.cart-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 12px;
}
.cart-table th {
	text-align: left;
	font-weight: normal;
}
.cart-table td { padding: 8px 0; }
.cart-table .price {
	width: 80px;
	padding-right: 12px;
}
.cart-table td.price { text-align: right; }
.cart-table .price input[type=text], input[type=text].price {
	width: 40px;
	text-align: right;
}
.cart-table .actions { width: 50px; }
.cart-table tfoot td { border-top: 1px solid #8c8273; }

/* Checkout */
#checkoutform p {
	overflow: hidden;
}
#checkoutform p label {
	float: left;
	width: 228px;
}
#checkoutform p input[type=text], #checkoutform p textarea {
	float: left;
	width: 208px;
}
#checkoutform p input[type=radio] {
	float: left;
	margin: 0 8px 0 228px;
}

/* Products */
#products {
	margin: 24px -22px 24px 0;
	overflow: hidden;
	float: left;
}
.product {
	float: left;
	margin: 0 22px 14px 0;
	width: 469px;
	overflow: hidden;
}
body.single-product .product { width: 689px; }
body.single-product #sidebar { margin-top: 18px; }
.product-thumbnail {
	float: left;
	margin-right: 18px;
	border: 1px solid #a39b8f;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	width: 220px;
	height: 220px;
	overflow: hidden;
}
.product-thumbnail img {
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-o-border-radius: 6px;
}
.product-media {
	float: left;
	overflow: hidden;
}
.product-media .product-thumbnail {
	float: none;
	margin-bottom: 18px;
}
.product-content {
	margin-left: 238px;
	padding-top: 14px;
	min-height: 172px;
	border-top: 1px solid #8c8273;
}
.product-content h1, .product-content h1 a { color: #8c8273; }
.product-content h1 { margin-bottom: 14px; }

/* PPP */
#ppp {
	position: fixed;
	z-index: 500;
	width: 498px;
	min-height: 165px;
	padding: 18px;
	background: white;
	border: 1px solid #b4b1ac;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	box-shadow: 0 5px 15px rgba( 0, 0, 0, .5 );
	display: none;
	box-sizing: border-box;
	overflow: auto;
}
#ppp .close-ppp {
	margin-top: -48px;
	float: right;
}
#ppp.ppp-cover {
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}
#ppp.ppp-cover .close-ppp {
	margin-top: 0;
}
#ppp h1 { margin-bottom: 12px; }
#ppp .product-content { padding-bottom: 32px; }

/* Header */
#header {
	position: fixed;
	top: 0px;
	width: 100%;
	background: white;
	border-bottom: 1px solid #8c8273;
	font: normal 14px/14px 'Font1', Verdana, sans-serif;
}
body.admin-bar #header {
	top: 32px;
}
#header, #footer, #controls {
	/*position: relative;*/
	z-index: 100;
}
#logo {
	float: left;
	margin: 10px 0;
	background: url( images/logo.png ) no-repeat;
	width: 79px;
	height: 65px;
}
#nav {
	padding-top: 4px;
}
#nav-tools {
	float: right;
}
#languages {
	display: inline-block;
	margin: 10px 16px 10px 0;
	padding: 7px 0 6px 22px;
	background: url( images/globe.png ) left 7px no-repeat;
	text-transform: uppercase;
	color: #8c8273;
	font-size: 13px;
}
#languages a {
	color: #c6c1b9;
}
#languages .current {
	font-weight: bold;
}
#searchform {
	display: inline-block;
	margin: 10px 0;
	position: relative;
}
#searchform input[type=text] {
	padding: 6px;
	border-width: 1px;
	width: 214px;
}
#searchform input[type=image] {
	position: absolute;
	top: 5px;
	right: 4px;
}
#menu-header {
	list-style-type: none;
	text-transform: uppercase;
	float:right;
	clear: right;
	color: #856431;
}
#menu-pull {
	display: none;
	margin-top: 10px;
	padding: 10px;
	color: #856431;
	text-align: center;
}
#menu-pull:hover {
	background-color: rgba(134, 104, 52, .85);
	color: white;
}
#menu-header > li {
	float: left;
	position:relative;
	margin-left: 0;
}
#menu-header > li > a { color: #856431; font-weight:600; font-size:14px; padding:10px; display: block; }
#menu-header > li:hover > a { background-color:rgba(134, 104, 52, .85); font-size:11px; text-transform:uppercase; padding:10px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-top-right:5px; -moz-border-radius-top-left:5px; color:#fff; font-size:14px; }
	
.sub-menu {
	background-color: rgba(134, 104, 52, .85);
	list-style-type: none;
	position: absolute;
	top: 34px;
	display: none;
	width: 100%;
	z-index: 20;
	border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
}
.sub-menu li { border-bottom:#fff solid 1px; padding:10px; }
.sub-menu li:last-child { border-bottom:none; }
.sub-menu li a { color:#fff; letter-spacing:1px; font-weight:bold; text-decoration:none; font-size:11px; text-transform:uppercase; }

#menu-header > li:hover .sub-menu,
#menu-header > li:hover .sub-menu a {
	display:block;
}

.sub-menu > li:hover { background-color:#FFF; }
.sub-menu > li:hover a { color:#866734; }

#menu-header.menu-expanded {
	display: block;
	clear: both;
}
#menu-header.menu-expanded li {
	display: block;
	float: none;
}
#menu-header.menu-expanded a {
	padding: 10px;
	display: block;
}
/* Redefine li:hover colors for a:hover. */
#menu-header.menu-expanded > li:hover > a {
	background-color: inherit;
	color: inherit;
}
#menu-header.menu-expanded > li > a:hover,
#menu-header.menu-expanded a:hover,
#menu-header.menu-expanded .sub-menu > li a:hover {
	background-color: rgba(134, 104, 52, .85);
	color: white;
}
#menu-header.menu-expanded .sub-menu {
	display: block;
	position: static;
	background-color: transparent;
}
#menu-header.menu-expanded .sub-menu a {
	padding-left: 30px;
}
#menu-header.menu-expanded .sub-menu > li {
	padding: 0;
}
#menu-header.menu-expanded .sub-menu > li a {
	color: inherit;
	font-size: inherit;
}

/* Content */
#layout {
	position: relative;
	z-index: 100;
}
/*html, body, #layout, #content { height: 100%; }
body { overflow: hidden; }*/
#content {
	/*margin-top: -148px;
	margin-bottom: -81px;*/
	padding: 86px 0 86px;
	/*overflow: scroll;*/
	width: 100%;
}
#content .wrap {
	overflow: hidden;
	padding-top: 15px;
	padding-bottom: 15px;
}

#page {
	position: relative;
	/*padding-top: 200px;*/
}
#sidebar {
	float: right;
	/*margin-left: 730px;*/
	width: 230px;
}
#main-column {
	float: left;
}
/*.home #main-column {*/
	/*width: 472px;*/
/*}*/
#page-content {
	float: left;
	padding: 18px 16px;
	margin-bottom: 15px;
	width: 684px;
	min-height: 125px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	overflow:hidden;
}
#page-content.brown {
	background-color: rgba( 140, 130, 115, .85 );
	color: white;
}
#page-content.brown .button {
	background: white;
	color: black;
}
#page-content h1 { margin-bottom: 14px; }
#page-content h2 { margin-bottom: 12px; }
#page-content ul, #page-content ol { margin-left: 32px; }

#page-content.white {
	background-color:rgba(255, 255, 255, .85);
	line-height:18px;
}
#page-content.white h1 { color:#8da029; margin-bottom: 14px; letter-spacing:3px; }
#page-content.white a { color:#8c8273; text-decoration:underline; }

#page-content.start {
	width: 440px;
	background-color:rgba(255, 255, 255, .85);
	margin-top:16px;
	line-height:18px;
}
#page-content.start h1 { color:#8da029; margin-bottom: 14px; letter-spacing:3px; }

#frontpage {
	padding-top: 18px;
	width:220px;
	background-color:rgba(255, 255, 255, .85);
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	margin: 0 15px;
	float: left;
}
#frontpage h1 { color:#8c8273; font-size:12px; letter-spacing:2px; }

#page-content.info { background-color:rgba(255, 255, 255, .85); font-size:14px; line-height:16px; }
#page-content.info h1 { color:#8DA029; letter-spacing:2px; }
#page-content.info a { color:#8c8273; text-decoration:underline; }

#page-content table td { vertical-align:top; }

#page-content.menupage { background-color:rgba(255, 255, 255, .85); font-size:16px; line-height:18px; }
#page-content.menupage h1 { color:#8da029; letter-spacing:2px; }
#page-content.menupage a { color:#8c8273; text-decoration:underline; }

#page-content.target img { background: white; }
#page-content.target a:hover img { opacity: 0.7; filter: alpha( opacity=70 ); }

#childwrap ul li {
	list-style: none;
	border-top: #666 solid 1px;
	padding-top: 20px;
	margin-top: 25px;
}
#childwrap .wp-post-image {
	width: 220px;
	height: 220px;
	margin-right: 20px;
	float: left;
}
.menupost {
	font-size: 16px;
	margin-right: 20px;
	margin-left: 240px;
}
.menupost h2 {
	color: #8c8273;
	letter-spacing: 2px;
	font-size: 16px;
}
.menupost .meta a {
	text-decoration: none;
	font-style: normal;
	margin: 20px 5px 0 0;
}

/* Remove paddings because the blurbs have specific margin-sensitive styling. */
.widget_naturarvet_blurb {
	padding: 0;
}

.widget_naturarvet_blurb a {
	color: white;
}

.naturarvet_blurb_bubble {
	background-image:url(images/sticker-2.png);
	width: 178px;
	height: 114px;
	padding: 30px 20px;
	margin-bottom: 40px;
}

.naturarvet_blurb_sticker {
	background-image: url(images/sticker-1.png);
	width: 180px;
	height: 141px;
	padding: 40px 20px;
	margin: 30px 0;
}

.naturarvet_blurb_collaboration {
	width: 80%;
	background-color: rgba(255, 255, 255, .85);
	border-radius: 5px;
	padding: 12px;
	border-bottom: 7px solid gold;
	margin-left: 6px;
}

.naturarvet_blurb_collaboration h3 {
	color: #8CA028;
}

.puffar .widget {
	margin: 30px auto;
	color: #FFF;
	text-align: center;
	text-shadow: 0px 1px 0px rgba(0,0,0,.4);
}
.puffar .widget .h1 { font-size:18px; letter-spacing:1px; font-weight:bold; }

/*
.puffar .widget:nth-child(1) {behavior:url(-ms-transform.htc);-webkit-transform:rotate(8deg);-moz-transform:rotate(8deg);-ms-transform: rotate(8deg);-o-transform:rotate(8deg);transform:rotate(8deg)}
.puffar .widget:nth-child(2) {behavior:url(-ms-transform.htc);-webkit-transform:rotate(-8deg);-moz-transform:rotate(-8deg);-ms-transform: rotate(-8deg);-o-transform:rotate(-8deg);transform:rotate(-8deg)}
*/
.widget_better_recent_posts_widget ul li { list-style:none; font-size:12px; border-bottom:#666 solid 1px; padding-bottom:20px; margin-bottom:20px; }
.widget_better_recent_posts_widget ul li a { font-style:normal; text-decoration:none; margin-right:10px; }

#page-content.white .meta a {
	text-decoration: none;
	font-style: normal;
	margin: 20px 5px 0 0;
}
#page-content.white h2 {
	color: #7d5a23;
	letter-spacing: 1px;
}

.aligncenter {
	display: block;
	margin-right: auto;
	margin-left: auto;
}

#page-content img {
	max-width: 100%;
	height: auto;
}


/* Footer */
#footer {
	position: fixed;
	bottom: 0px;
	width: 100%;
	background: white;
	border-top: 1px solid #8c8273;
	padding: 18px 0;
	font: normal 14px/14px 'Font1', Verdana, sans-serif;
	color: #8c8273;
}
#footer a { color: #938a7c; }
#footer { text-align: center; }
#social {
	float: left;
        min-width: 140px;
}
#social .addthis_default_style .at300b,
#social .addthis_default_style .at300m {
  float: none;
  padding: 0;
}
#footer .alignright { margin: 0; }

#sidebar.page { margin-top: 14px; }

/* Maps */
.butique-map {
	margin-bottom: 18px;
	width: 640px;
	height: 671px;
	border-collapse: collapse;
	border: 1px solid #ccc;
}
.butique-map td {
	width: 16px;
	height: 16px;
	overflow: hidden;
}
.butique-map a {
	width: 33px;
	height: 33px;
	display: block;
}
.butique-map a:hover { background: url( images/map-plus.gif ) center no-repeat white; }

/* Arild */
/* .butique-map a.map-bought-pixel { background: rgba( 204, 209, 33, .9 ); }
   .butique-map a.map-bought-pixel:hover { background: rgba( 204, 209, 33, .9 ); }
*/
.butique-map a.map-bought-pixel {
  background-image: url('images/square-bought.png');
  background-color: transparent;
}

input.number { width: 24px; }
.qq-upload-button {
	margin-top: 18px;
	display: inline-block;
}
.qq-upload-list { display: none; }
.pixels {
	border: 1px dotted #8c8273;
	width: 24px;
	display: block;
}
#upload-pixel-image { display: none; }
.reserved { background: rgba( 255, 255, 255, .4 ); }
.map-bought-pixel { background: rgba( 255, 255, 255, .4 ); }


/* The click */
#theclick {
	padding: 18px 16px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	min-height: 78px;
	background-color: rgba(255, 255, 255, .85);
	line-height: 18px;
}
#theclick .alignleft { margin-right: 16px; }
#theclick .h1 { color: #8da029; }
#theclick .digits {}
#theclick .digit {
	padding-top: 5px;
	font: normal 18px/18px 'Lekton', sans-serif;
	margin-bottom: -10px;
	background: url( images/digit.jpg ) no-repeat;
	width: 20px;
	height: 28px;
	text-align: center;
	color: white;
	display: inline-block;
}
#theclick .delimiter {
	font-weight: bold;
	font-size: 120%;
	display: inline-block;
	margin: 0 .2em;
}

#theclickbutton {
	background: url( images/forest-128.png ) center no-repeat;
	float: left;
	height: 112px;
	width: 112px;
	margin: -16px -9px 0 -17px;
}

.clicked {
	background: url( images/forest-128.png ) center no-repeat;
	float: left;
	height: 128px;
	margin: -24px -17px 0 -25px;
	width: 128px;
	border: 0px none;
	opacity: 0.4;
}

[disabled] {
    cursor: default;
    opacity: .4;
}​


/* Backgrounds */
body.nobg #backgrounds, body.nobg #controls { display: none; }
body { background: #1b1b1c; }
body.nobg { background: white; }
#background img {
	position: fixed;
	z-index: 1;
	opacity: 0;
	filter: alpha( opacity=0 );
}
#background img.previous { z-index: 2; }
#background img.current { z-index: 3; }

#controls {
	display: inline-block;
}
#controls-pane .icon {
	margin: 0 4px;
	opacity: .7;
	filter: alpha( opacity=70 );
}
.icon {
	background-image: url( images/icons.png );
	background-repeat: no-repeat;
	display: inline-block;
	height: 21px;
}
.icon.arr-left, .icon.arr-right {
	width: 21px;
}
.icon.arr-left { background-position: 0 0; }
.icon.arr-right { background-position: -23px 0; }
.icon.eye {
	background-position: -44px 0;
	width: 29px;
}
.icon.speaker {
	background-position: -73px 0;
	width: 22px;
}
#controls-pane .icon.speaker {
	/* width + the margin-left it replaces */
	margin-left: 26px;
}
.fb-like-product {
	margin-bottom: -7px;
	display: inline-block;
}

#children { margin-left: 0 !important; }

/*
 * Responsive breakpoints
 */

.on-screen-small {
	display: none;
}

/*
 * Width 737 to 980
 * - Move sidebar below main content.
 */
@media (max-width: 980px) {
	.wrap {
		width: 716px;
	}
	#menu-wrapper {
		clear: right;
	}
	#menu-pull {
		display: block;
		width: 228px;
		margin-top: 0;
		margin-left: 488px;
		box-sizing: border-box;
	}
	#menu-header {
		float: none;
		clear: none;
		display: none;
	}
	#main-column:not(.home *) {
		float: none;
	}
	#page-content {
		float: none;
		width: auto;
	}
	#sidebar {
		width: auto;
		float: none;
	}
	#sidebar.puffar {
		text-align: center;
	}
	#sidebar.puffar .widget {
		display: inline-block;
		margin: 15px;
		vertical-align: middle;
	}
	#frontpage {
		float: none;
		width: auto;
		margin-left: 488px;
		margin-right: 0;
	}
	.widget_butique_cart_widget {
		min-height: unset;
	}
}

/*
 * Width 513 to 736
 * - Shrink content to stay below window width.
 * - On the front page, move the inner sidebar below main content.
 */
@media (max-width: 736px) {
	.wrap {
		width: 492px;
	}
	#header {
		position: static;
	}
	#menu-pull {
		margin-left: 264px;
	}
	#main-column {
		float: none;
	}
	#frontpage {
		margin-left: 0;
		width: auto;
	}
	#page-content, #page-content.start {
		width: auto;
	}
	#footer {
		position: static;
	}
	#social, #controls, #footer .alignright {
		display: block;
		float: none;
		margin: 12px 0;
	}
	#controls {
		position: static;
	}
	#content {
		padding-top: 0;
		padding-bottom: 0;
	}
}

/*
 * Width up to 512
 * - Set content width to fluid.
 * - All components stacked (not floating).
 */
@media (max-width: 512px) {
	.wrap {
		width: auto;
	}
	#languages {
		display: block;
	}
	#menu-wrapper {
		clear: both;
	}
	#menu-pull {
		margin-left: 0;
		width: auto;
	}
	#childwrap .wp-post-image {
		float: none;
	}
	.menupost {
		margin-left: 0;
	}
	.product {
		padding-bottom: 10px;
		width: auto;
	}
	.product-thumbnail, .product-media {
		float: none;
	}
	.product-content {
		margin-left: 0;
		border-top: none;
		min-height: unset;
	}
	#theclick .digits {
		clear: left;
	}
	.on-screen-large {
		display: none;
	}
	.on-screen-small {
		display: block;
	}
}

@media (max-height: 800px) {
	#header {
		position: static;
	}
}