/* Posh Yarn main styles */

/* =Web Fonts
----------------------------------------------- 
@font-face {
    font-family: 'FolksRegular';
    src: url('/fonts/folks-normal-webfont.eot?') format('eot'),
         url('/fonts/folks-normal-webfont.woff') format('woff'),
         url('/fonts/folks-normal-webfont.ttf') format('truetype'),
         url('/fonts/folks-normal-webfont.svg') format('svg');
}
*/

@font-face {
	font-family: 'FuturistFixedWidthRegular';
    src: url('/fonts/futrfw-webfont.eot?') format('eot'),
         url('/fonts/futrfw-webfont.woff') format('woff'),
         url('/fonts/futrfw-webfont.ttf') format('truetype'),
         url('/fonts/futrfw-webfont.svg') format('svg');

}

@font-face {
  font-family: 'MuliRegular';
  src: 	url('/fonts/muli-regular-webfont.eot?') format('eot'),
  		url('/fonts/muli-regular-webfont.woff') format('woff'),
		url('/fonts/muli-regular-webfont.ttf') format('truetype'),
		url('/fonts/muli-regular-webfont.svg') format('svg');
}

/* =Let the styling begin! */

body {
	font-family: MuliRegular, Helvetica, Verdana, sans-serif;
	color: #666;
	background:#ecebe7;
	padding:1px;
}

#page {
	margin:1px 2em;
	padding:0;
	/*max-width:1100px;*/
}

a {
	color:#333;
	text-decoration:none;
	font-weight:bold;
}

a:hover, nav#top ul li a:hover {
	color: #e06;
}

a:active {
	color:#660;
}

.found { border:2px solid red; }

#page header {
	background: #ecebe7;
	position:relative;
	padding:0;
	width:100%;
	float:left;
	border-bottom:1px solid #ccc;
}

#page header h1 {
	margin:0;
	display:block;
	width:30%;
	float:left;
}

img#logo {
	width:70%;
}

nav#top {
	position:absolute;
	bottom:0.25em;
	right:0;
	margin:0;
	width:70%;
}

nav#top ul {
	width:100%;
	text-align:left;
	padding:0;
	margin:0;
}

nav#top ul li {
	display:inline-block;
	margin:0;
	padding:0;
}

nav#top ul li#shop_link { width:11.688311688312%; text-align:left; }
nav#top ul li#blog_link { width:15.974025974026%; text-align:center; }
nav#top ul li#information_link { width:29.87012987013%; text-align:center; }
nav#top ul li#patterns_link { width:24.155844155844%; text-align:center; }
nav#top ul li#contact_link { width:18.311688311688%; text-align:right; }

nav#top ul li a {
	display:block;
	font-family: FuturistFixedWidthRegular;
	color:#333;
	font-size:larger;
	font-weight:normal;
	letter-spacing:-0.25em;
	margin:0;
	padding:0;
}

#page footer {
	background: #ecebe7;
	/*border-top: 1px solid black;*/
}

#page footer img {
	width:30px;
}

#page footer aside {
	font-family: FuturistFixedWidthRegular;
	text-align:right;
	font-size:1.25em;
	padding:.5em 0;
	color:#e06;
	letter-spacing:-0.2em;
}

#page footer div {
	position:relative;
	top:-2em;
}

nav#bottom ul {
	display:inline;
	margin:0;
}

nav#bottom ul li {
	display:inline;
	padding-right:0.5em;
}

nav#bottom ul li a {
	display:inline-block;
}

#page footer p {
	text-align:left;
	margin:1em 0;
	font-size:0.9em;
}

#page footer a {
	font-weight:bold;
}


@media screen and (min-width: 350px) {
	body {	font-size:12px; }
	nav#top ul li a { 
		font-size:.65em;
	    letter-spacing:-0.3em;
	}
	#page footer div { top:0; }
	#page footer div, #page footer aside, #page footer div p { text-align:center; }
}

@media screen and (min-width: 500px) {
	body {	font-size:14px; }
	nav#top ul li a { 
		font-size:.85em;
	    letter-spacing:-0.4em;
	}
}

@media screen and (min-width: 675px) {
	nav#top ul li a { 
		font-size:1.15em;
	    letter-spacing:-0.3em;
	}
}

@media screen and (min-width: 800px) {
	body {	font-size:15px; }
	#page footer div { top:-2em; }
	#page footer aside { text-align:right; }
	#page footer div, #page footer div p { text-align:left; }
}

@media screen and (min-width: 900px) {
	nav#top ul li a { 
		font-size:1.25em;
	}
}

@media screen and (min-width: 1000px) {
	body {
		font-size:16px;
	}
	nav#top ul li a { 
		letter-spacing:-0.25em;
	}

}

@media screen and (min-width: 1120px) {
	body {
		font-size:18px;
	}
	
}

@media screen and (min-width: 1800px) {
	body {
		font-size:20px;
	}
	
}