/*
Theme Name: Alice Melvin
Theme URI: http://www.alicemelvin.com
Description: Website of Alice Melvin, illustrator.
Author: Sandy Logan
Version: 1.1
Tags:
*/

/* Fonts */

/*
Font: 		Windsor D
Style: 		Regular
URL: 		http://www.youworkforthem.com/font/T1636/windsor
Foundry: 	URW++
Foundry: 	http://www.youworkforthem.com/designer/204/urw
Copyright:	Copyright 2010 URW++ Design & Development
Version: 	1.4
Created:	April 18, 2014
License: 	http://www.youworkforthem.com/font-license 
License: 	The WebFont(s) listed in this document must follow the YouWorkForThem
			WebFont license rules. All other parties are strictly restricted 
			from using the WebFonts(s) listed without a purchased license. 
			All details above must always remain unaltered and visible in your CSS.
*/

@font-face {
	font-family: 'WindsorD-Reg';
	src: url('fonts/windsor-d.eot');
	src: url('fonts/windsor-d.eot?#iefix') format('embedded-opentype'),
	     url('fonts/windsor-d.woff') format('woff'),
	     url('fonts/windsor-d.ttf') format('truetype'),
	     url('fonts/windsor-d.svg#ywftsvg') format('svg');
	font-weight: normal;
	font-style: normal;
}

/*
Font: 		P22 Underground
Style: 		DemiBold
URL: 		http://www.youworkforthem.com/font/T0515/p22-underground-family
Foundry: 	P22 Type Foundry
Foundry: 	http://www.youworkforthem.com/designer/111/p22-type-foundry
Copyright:	Copyright (c) 2007-2103 by P22 type foundry. All rights reserved.
Version: 	1.4
Created:	April 18, 2014
License: 	http://www.youworkforthem.com/font-license 
License: 	The WebFont(s) listed in this document must follow the YouWorkForThem
			WebFont license rules. All other parties are strictly restricted 
			from using the WebFonts(s) listed without a purchased license. 
			All details above must always remain unaltered and visible in your CSS.
*/

@font-face {
	font-family: 'P22UndergroundDemiBold';
	src: url('fonts/p22-underground-demibold.eot');
	src: url('fonts/p22-underground-demibold.eot?#iefix') format('embedded-opentype'),
	     url('fonts/p22-underground-demibold.woff') format('woff'),
	     url('fonts/p22-underground-demibold.ttf') format('truetype'),
	     url('fonts/p22-underground-demibold.svg#ywftsvg') format('svg');
	font-weight: normal;
	font-style: normal;
}

/*
Font: 		Century Schoolbook
Style: 		Regular Italic
URL: 		http://www.youworkforthem.com/font/T1187/century-schoolbook
Foundry: 	URW++
Foundry: 	http://www.youworkforthem.com/designer/204/urw
Copyright:	Copyright 2010 URW++ Design & Development
Version: 	1.4
Created:	April 18, 2014
License: 	http://www.youworkforthem.com/font-license 
License: 	The WebFont(s) listed in this document must follow the YouWorkForThem
			WebFont license rules. All other parties are strictly restricted 
			from using the WebFonts(s) listed without a purchased license. 
			All details above must always remain unaltered and visible in your CSS.
*/

@font-face {
	font-family: 'CenturySch-RegIta';
	src: url('fonts/century-schoolbook-regular-italic.eot');
	src: url('fonts/century-schoolbook-regular-italic.eot?#iefix') format('embedded-opentype'),
	     url('fonts/century-schoolbook-regular-italic.woff') format('woff'),
	     url('fonts/century-schoolbook-regular-italic.ttf') format('truetype'),
	     url('fonts/century-schoolbook-regular-italic.svg#ywftsvg') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Layout */

html {
}

body {
	background-color: #fff1e6;
	width: 100%;
	margin: 0 auto;
	font-family: 'WindsorD-Reg', Georgia, serif;
	font-size: 100%;
	color: #000000;
}

main, header nav, footer > div {
	max-width: 1140px;
	margin: 0 auto;
}

main {
	padding-top: 100px;
}

a {
	color: #000000;
	text-decoration: none;
}

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

/* Menu */

#menu, #shop {
	display: none;
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #a2c7c7;
	z-index: 9999;
	overflow: scroll;
}

#menu > div, #shop > div {
	position: relative;
	max-width: 1140px;
	height: 100%;
	margin: 0 auto;
	padding-top: 240px;
}
	

#menu .close, #shop .close {
	display: block;
	width: 50px;
	height: 50px;
	position: absolute;
	top: 80px;
	left: 0;
	background: transparent url(gfx/close.png) no-repeat center center;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

#menu .close:active,
#shop .close:active,
#menu .close:hover,
#shop .close:hover {
	cursor: pointer;
}

#menu .logo, #shop .logo {
	position: relative;
	min-height: 200px;
	background: transparent url(gfx/logo_white.png) no-repeat center center;
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -100px;
	width: 200px;
	height: 100px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

#menu div ul, #shop div ul {
	list-style-type: none;
	font-family: 'P22UndergroundDemiBold', Helvetica, Arial, serif;
	padding: 0;
}

#shop div ul li {
	float: left;
	width: 50%;
}

#shop div ul li:nth-of-type(1) {
	background: transparent url(gfx/arrow_left.png) no-repeat center 10px;
}

#shop div ul li:nth-of-type(2) {
	background: transparent url(gfx/arrow_right.png) no-repeat center 10px;
}
	
#menu div ul li a {
	display: block;
	padding: 0.16em 0;
	font-size: 3em;
	letter-spacing: 0.1em;
	color: #fff1e6;
	text-transform: uppercase;
	text-align: center;
}

#shop div ul li a {
	display: block;
	padding: 1em 0;
	font-size: 3em;
	line-height: 0.8em;
	letter-spacing: 0.1em;
	color: #fff1e6;
	text-transform: uppercase;
	text-align: center;
}

#shop div ul li a span {
	font-family: 'WindsorD-Reg', Georgia, serif;
	font-size: 0.5em;
	letter-spacing: 0;
	text-transform: none;
	
}

#menu div p, #shop div p {
	/* margin-top: 200px; */
	text-align: center;
	font-size: 1.2em;
	color: #fff1e6;
}

<!-- update -->

#shop div p {
	margin-top: 0;
}
	
#menu div p a,
#shop div p a {
	border-bottom: 1px solid #fff1e6;
	color: #fff1e6;
}

#menu div p a:hover,
#menu div p a:active,
#shop div p a:hover,
#shop div p a:active {
	border-bottom: 1px solid transparent;
}

#shop div p.info {
	padding-top: 70px;
	background: transparent url(gfx/info.png) no-repeat center 10px;
}
	
/* Welcome */

.welcome {
	/* display: block; */
	display: none;
	height: 100vh;
	/* height: 750px; */
	background: #a2c7c7 url(gfx/welcome.png) no-repeat center center;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

/* Header */

header nav {
	position: relative;
	height: 80px;
	background: transparent url(gfx/logo.png) no-repeat center bottom;
}

header a.home {
	display: block;
	position: absolute;
	top: 40px;
	left: 50%;
	margin-left: -125px;
	width: 250px;
	height: 50px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	z-index:9999;
}

header nav a {
	position: absolute;
	top: 20px;
	width: 75px;
	height: 75px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	border: 0;
}

header nav a:hover, header nav.a:visited {
	color: #1700ff;
	border: 0;
}

header nav a:nth-of-type(1) {
	left: 50px;
	background: transparent url(gfx/menu.png) no-repeat center center;
}

header nav a:nth-of-type(2) {
	right: 50px;
	background: transparent url(gfx/shop.png) no-repeat center center;
}

/* Articles */

article {
	text-align: center;
}

article img {
	max-width: 100%;
}

article h1, article h2, article p {
	/* width: 65.91%; */
	margin: 0 auto;
}

article h1, article h2 {
	font-family: 'P22UndergroundDemiBold', Helvetica, Arial, serif;
	text-transform: uppercase;
}

article h1 {
	/* font-size: 2em; */
	font-size: 1.5rem;
	letter-spacing: 0.1em;
	margin: 0 auto 90px auto;
}

article h2,
.viewmore {
	font-family: 'P22UndergroundDemiBold', Helvetica, Arial, serif;
	font-size: 1rem;
}

.viewmore {
	display: block;
	margin-bottom: 75px;
}

.viewmore:hover,
.viewmore:active {
	cursor: pointer;
}

article h2.publisher,
.viewmore {
	padding-bottom: 25px;
	font-family: 'CenturySch-RegIta', Helvetica, Arial, serif;
	text-transform: none;
	font-weight: normal;
	/* background:  transparent url(gfx/spectacles.png) no-repeat center center; */
}

article p {
/*
	font-size: 2em;
	line-height: 1.3em;
	*/
	width: 538px;
	margin: 25px auto 100px auto;
	font-size: 1.5rem;
}

.stockists article p {
	width: auto;
}

article .further p {
	font-size: 1.6em;
	margin-bottom: 50px;
}

article p a {
	border-bottom: 1px solid #000000;
}

article p a:hover {
	border-bottom: 1px solid transparent;
}

.projects article {
	/* padding-bottom: 100px; */
}

.projects article p {
	width: 538px;
	margin: 25px auto 100px auto;
	font-size: 1.5rem;
}

.project article p {
	font-size: 1.6em;
}

.project img {
	margin-bottom: 25px;
}

.project article .social {
	display:none;
}

.buy {
	padding: 10px 15px;
	border: 2px solid #000000;
	font-family: 'P22UndergroundDemiBold', Helvetica, Arial, serif;
	font-size: 1.3em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Social */

ul.social {
	list-style-type: none;
	width: 264px;
	margin: 46px auto 96px auto;
	padding: 0;
	overflow: auto;
}

.diary-entry ul.social {
	width: 198px;
}

.social li {
	float: left;
	width: 66px;
	height: 47px;
}

.social li a {
	float: left;
	width: 100%;
	height: 100%;
	background-image: url(gfx/social.png);
	background-repeat: no-repeat;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

.social li:nth-of-type(1) a { background-position: 0 0; }
.social li:nth-of-type(2) a{ background-position: -66px 0; }
.social li:nth-of-type(3) a { background-position: -132px 0; }
.social li:nth-of-type(4) a { background-position: -198px 0; }

/* Home */

.home main > h1 {
	font-family: 'P22UndergroundDemiBold', Helvetica, Arial, serif;
	font-size: 1.125rem;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 0.05em;
	margin: 0;
}

.home .intro {
	width: 538px;
	margin: 25px auto 100px auto;
	font-size: 1.5rem;
	text-align: center;
}

.home .intro a {
	text-decoration: none;
	border-bottom: 1px solid #000000;
}

.home .intro a:hover {
	border-bottom: 1px solid transparent;
}

/*
.home div.recent {
	display: block;
	width: 100%;
}
*/

.home .recent a {
	float: left;
	position: relative;
	margin: 0 2.17% 27px 0;
	/* background: #43413f url(gfx/arrow.png) no-repeat center 195px; */
	text-align: center;
}

.home .recent img, .home .recent .panel {
	position: absolute;
	top: 0;
	left: 0;
}

.home .recent a:nth-of-type(9),
.home .recent a:nth-of-type(10),
.home .recent a:nth-of-type(13),
.home .recent a:nth-of-type(14) {
	width: 31.87%;
	min-height: 214px;
}

.home .recent a:nth-of-type(3),	
.home .recent a:nth-of-type(4),
.home .recent a:nth-of-type(7),
.home .recent a:nth-of-type(8),
.home .recent a:nth-of-type(12),
.home .recent a:nth-of-type(16) {
	width: 31.87%;
	min-height: 455px;
}

.home .recent a:nth-of-type(2),
.home .recent a:nth-of-type(5),
.home .recent a:nth-of-type(11),
.home .recent a:nth-of-type(15),
.home .recent a:nth-of-type(17) {
	width: 65.91%;
	min-height: 455px;
}

.home .recent a:nth-of-type(1),
.home .recent a:nth-of-type(6) {
	width: 100%;
	min-height: 455px;
}

.home .recent a:nth-of-type(3),
.home .recent a:nth-of-type(5),
.home .recent a:nth-of-type(6),
.home .recent a:nth-of-type(9),
.home .recent a:nth-of-type(10),
.home .recent a:nth-of-type(12),
.home .recent a:nth-of-type(15),
.home .recent a:nth-of-type(17) {
	margin-right: 0;
}

.home .recent a:nth-of-type(9),
.home .recent a:nth-of-type(13) {
	/* margin-top: 120px; */
}

.home .recent a:nth-of-type(14) { clear: left; }
.home .recent a:nth-of-type(15) { float: right; margin-top: -241px; }

.home .recent a .panel {
	display: none;
	width: 100%;
	height: 101%;
	background: #43413f url(gfx/arrow.png) no-repeat center 195px;
	font-family: 'P22UndergroundDemiBold', Helvetica, Arial, serif;
	font-size: 1.5em;
	color: #ffffff;
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 0.1em;
	
}

.home .recent a:nth-of-type(9) .panel,
.home .recent a:nth-of-type(10) .panel,
.home .recent a:nth-of-type(13) .panel,
.home .recent a:nth-of-type(14) .panel {
	background: #43413f url(gfx/arrow.png) no-repeat center 60px;
}

.home .recent a:hover .panel {
	display: table-cell;
	vertical-align: middle;
}

.home .recent a .panel p {
	padding-top: 210px;
}

.home .recent a:nth-of-type(9) .panel p,
.home .recent a:nth-of-type(10) .panel p,
.home .recent a:nth-of-type(13) .panel p,
.home .recent a:nth-of-type(14) .panel p {
	padding-top: 80px;
}

.home .recent a .panel span {
	display: block;
	font-family: 'WindsorD-Reg', Georgia, serif;
	font-size: 1em;
	text-transform: lowercase;
	letter-spacing: 0;
}



.recent2 {
	border: 1px solid red;
}



/* Projects & Diaries */

.projects article h1 {
	margin-bottom: 25px;
}

.project article, .diary-entry article {
	position: relative;
}

.project article h1 {
	margin: 50px auto 8px auto;
	font-size: 2em;
}

.project article ul.social {
	width: 132px;
	margin: 50px auto;
}

.nextprev a {
	display: block;
	position: absolute;
	top: 460px;
	width: 30px;
	height: 15px;
	background: transparent url(gfx/nextprevious.png) no-repeat 0 center;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

.diary-entry .nextprev a {
	top: 200px;
}

.nextprev a:nth-of-type(1) {
	left: 0;
}

.nextprev a:nth-of-type(2) {
	background: transparent url(gfx/nextprevious.png) no-repeat -30px center;
	right: 0;
}

/* Diary */

.diary article {
	position: relative;
}

.diary h1 {
	font-family: 'P22UndergroundDemiBold', Helvetica, Arial, serif;
	font-size: 3em;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.diary article h1 {
	margin: 50px auto 25px auto;
	font-size: 1.6em;
}
	
.diary article .date {
	width: 560px;
	margin-bottom: 25px;
	font-size: 1.2em;
	letter-spacing: 0.1em;
}

.diary article p {
	font-size: 1.2em;
	margin-bottom: 46px;
}

.diary article .social {
	width: 132px;
}

/* About & Contact */

body.about-me .photos {
	margin: 135px 0 150px 0;
	overflow: auto;
}

body.about-me .photos img {
	float: left;
	width: 100%;
	background-color: #43413f;
	/* height: 455px; */
}

body.about-me .photos img:nth-of-type(1) {
	width: 31.87%;
	margin-right: 2.17%;
}

body.about-me .photos img:nth-of-type(2) {
	width: 65.91%;
}
body.about-me .photos img:nth-of-type(3) {
	margin-top: 27px;
}

body.contact .email {
	padding: 0;
	list-style-type: none;
	font-size: 2em;
}

.contact article ul.social {
	width: 198px;
}

.contact article .credits {
	font-size: 1.2em;
}

/* Stockists */

.stockists .list > div {
	position: relative;
	float: left;
	width: 26.3%;
	padding: 15px 3.5%;
	margin-bottom: 73px;
	min-height: 300px;
	font-size: 0.7em;
	background: transparent url(gfx/footer_border.png) repeat-y top right;
}

.stockists .list > div:nth-of-type(3n) {
	background: none;
}

.stockists .list div > h2 {
	font-size: 1.8em;
	margin-bottom: 40px;
	min-height: 48px;
}

.stockists .list div > a {
	font-size: 1.8em;
	border-bottom: 1px solid #000000;
	margin: 0 auto;
}

.stockists .list div > a:hover,
.stockists .list div > a:active {
	border-bottom: 1px solid transparent;
}

/* FAQ */

.faq p {
	font-size: 1.2em;
	padding: 25px 0 50px 0;
}

/* Footer */

.top {
	display: block;
	clear: both;
	width: 100%;
	min-height: 200px;
	background: transparent url(gfx/balloon.png) no-repeat center center;
	font-family: 'P22UndergroundDemiBold', Helvetica, Arial, serif;
	font-size: 1.2em;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 0.15em;
	padding-top: 50px;
}

.top:hover, .top:active {
	cursor: pointer;
}

footer {
	clear: both;
	overflow: auto;
	background-color: #ffffff;
	padding-top: 60px;
}

footer > div div {
	float: left;
	width: 33.333%;
	min-height: 170px;
	background: transparent url(gfx/footer_border.png) repeat-y top right;
}

footer > div div:nth-of-type(3),
footer > div div:nth-of-type(4) {
	background: none;
}

footer > div div:nth-of-type(4) {
	padding-top: 20px;
	font-size: 0.9em;
}

footer h2{
	font-family: 'P22UndergroundDemiBold', Helvetica, Arial, serif;
	font-size: 1.4em;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 0.05em;
}

footer div p {
	font-size: 1.2em;
	text-align: center;
}

footer p a {
	color: #000000;
	border-bottom: 1px solid #000000;
}

footer p a:hover {
	border-bottom: 1px solid transparent;
}

footer ul.social {
	list-style-type: none;
	width: 150px;
	margin: 0 auto;
	padding: 0;
}

footer ul.social li {
	float: left;
	width: 50px;
	height: 45px;
}

footer ul.social li a {
	float: left;
	width: 100%;
	height: 100%;
	background-image: url(gfx/social_home.png);
	background-repeat: no-repeat;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

footer ul.social li:nth-of-type(1) a { background-position: 0 0; }
footer ul.social li:nth-of-type(2) a{ background-position: -45px 0; }
/* footer ul.social li:nth-of-type(3) a { background-position: -90px 0; } */
footer ul.social li:nth-of-type(4) a { background-position: -135px 0; }

footer div.copyright {
	clear: both;
	width: 100%;
}

footer div.copyright p {
	text-align: center;
}

/* Hide Text */
.hide-text {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

/* Responsive */

@media screen and (max-width: 1024px) {

header nav a:nth-of-type(1) {
	left: 10%;
}

header nav a:nth-of-type(2) {
	right: 10%;
}

#menu .close, #shop .close {
	left: 10%;
}

.recent {
	width: 90%;
	margin: 0 auto;
}

.home .recent a .panel p {
	padding: 0;
}

.home .recent a:nth-of-type(1),
.home .recent a:nth-of-type(2),
.home .recent a:nth-of-type(3),
.home .recent a:nth-of-type(4),
.home .recent a:nth-of-type(5),
/* .home .recent a:nth-of-type(6), */
.home .recent a:nth-of-type(7),
.home .recent a:nth-of-type(8),

/* .home .recent a:nth-of-type(11), */
.home .recent a:nth-of-type(12),

.home .recent a:nth-of-type(13),
.home .recent a:nth-of-type(14)
/* .home .recent a:nth-of-type(15) */ {
	min-height: 260px !important;
}

.home .recent a:nth-of-type(6),
.home .recent a:nth-of-type(11),
.home .recent a:nth-of-type(15) {
	min-height: 260px;
}

.home .recent a:nth-of-type(9),
.home .recent a:nth-of-type(10),
.home .recent a:nth-of-type(13),
.home .recent a:nth-of-type(14) {
	min-height: 115px !important;
}

.home .recent a:nth-of-type(15) {
	margin-top: -140px;
}

.home .recent a .panel {
	height: 280px !important;
}

.home .recent a:nth-of-type(9) .panel,
.home .recent a:nth-of-type(10) .panel,
.home .recent a:nth-of-type(13) .panel,
.home .recent a:nth-of-type(14) .panel {
	height: 140px !important;
	background-image: none !important;
}

.home .recent a:nth-of-type(9) .panel p,
.home .recent a:nth-of-type(10) .panel p,
.home .recent a:nth-of-type(13) .panel p,
.home .recent a:nth-of-type(14) .panel p {
	padding-top: 20px !important;
}

.home .recent a .panel p {
	padding: 0 5%;
}

article img {
	width: 90%;
}

.buy {
	display: block;
	width: 200px;
	margin: 0 auto;
}

.projects article p {
	width: 90%;
}

body.about-me .photos {
	padding: 0 5%;
}

.stockists .list div {
	min-height: 300px;
}

.stockists .list div > a {
	word-break: break-all;
}

}

@media screen and (max-width: 640px) {

#menu .close, #shop .close {
	top: 2%;
	left: 2%;
}

#menu div p, #shop div p {
	margin-top: 0;
}

.home .recent a:nth-of-type(1),
.home .recent a:nth-of-type(2),
.home .recent a:nth-of-type(3),
.home .recent a:nth-of-type(4),
.home .recent a:nth-of-type(5),
.home .recent a:nth-of-type(8),
.home .recent a:nth-of-type(9),
.home .recent a:nth-of-type(12),
.home .recent a:nth-of-type(13),
.home .recent a:nth-of-type(14) {
	min-height: 100px !important;
}

}

@media screen and (max-width: 320px) {

.welcome {
	display: none;
}

header a.home {
	top: 210px;
}

header nav {
	min-height: 250px;
	background-position: center 100%;
}

header nav a {
	top: 50px;
}

header nav a:nth-of-type(1) {
	left: 25px;
}

header nav a:nth-of-type(2) {
	right: 25px;
}

#menu, #shop {
	/* position: absolute; */
	/* height: 100%; */
}

#menu div ul, #shop div ul {
	margin-top: -25px;
}

#menu div ul li a, #shop div ul li a {
	font-size: 2em;
}

#menu div p {
	font-size: 100%;
}

#shop div ul li {
	float: none;
	width: 100%;
	padding-top: 25px;
}

article {
	padding: 0 4.34%;
}

.home .intro,
article p {
	margin-top: 50px;
	padding: 0 4.34%;
	width: 90%;
}

.home .recent a {
	float: none !important;
	display: block !important;
	position: relative !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
}

.home .recent img {
	position: static;
	width: 94.34%;
	height: auto;
}

.home .recent a .panel {
	/* display: block; */
	width: 95% !important;
	padding: 0;
	margin: 0 auto;
	left: 2.9%;
	background-image: none !important;
}

.home .recent a:hover .panel {
	display: none;
}

.home .recent a .panel p {
	padding-top: 0;
}

.diary article .date {
	width: auto;
}

.stockists .list > div {
	float: none;
	width: auto;
	background-image: none;
}
	

footer > div div {
	display: block;
	float: none;
	width: 94.34%;
	min-height: 125px;
	margin: 0 auto;
	background: none;
}

}

}