
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;	
	font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
	font-weight: bold;
}

body {
	margin: 0;
	position:relative;
	font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
	font-weight: bold;
}

/*Links*/

/*a {
  text-decoration: none;
  display: inline-table;
}

a:after {
  content: "";
  width: 100%;
  border-bottom: 0.1em solid #f00;
  display: table-caption;
  vertical-align: baseline;
  position: relative;
  top: 0.9em;
}*/

	a {
		color: blue;
		text-decoration: none;
  		display: inline-table;
	}

	a:hover:after {
		content: "";
		width: 100%;
		border-bottom: 1px solid blue;
		display: table-caption;
		vertical-align: baseline;
		position: relative;
		margin-bottom:-1px;
		top: 1em;
	}

	a:active {
		color: black;
	}


	img {
		border: 1px solid black;
	}

header {
	position:relative;
	margin-bottom: 64px;

}

h1 {
	font-size: 7vw;
	line-height: 7vw;
	letter-spacing: -.05vw;
}

h1 a {
	color: black;
}


h1 a:hover {
	color:black;
}

h1 a:visited {
	color: black;
}

/*For h1 rollovers*/

.packet, .biweekly, .publication, .everyother, .riso, .six, .season, .rebound, .theme, .parbaked, .wirebound{
	position: relative;
	line-height: 16px;
	cursor: default;
}

/*.packet:before, .biweekly:before, .publication:before, .everyother:before, .riso:before, .six:before, .season:before, .rebound:before, .theme:before, .parbaked:before, .wirebound:before {
	content: "";
	border-bottom: 1px solid black;
	width: 100%;
	position: absolute;
	top: 8vw;
}

.packet:hover:before, .biweekly:hover:before, .publication:hover:before, .everyother:hover:before, .riso:hover:before, .six:hover:before, .season:hover:before, .rebound:hover:before, .theme:hover:before, .parbaked:hover:before, .wirebound:hover:before {
	border-bottom: 0px solid black;
}
*/
.packet:hover, .biweekly:hover, .publication:hover, .everyother:hover, .riso:hover, .six:hover, .season:hover, .rebound:hover, .theme:hover, .parbaked:hover, .wirebound:hover{
	border-bottom: 0px;
}

/*for text*/

.packet:hover:after, .biweekly:hover:after, .publication:hover:after, .everyother:hover:after, .season:hover:after, .rebound:hover:after, .theme:hover:after{
	font-size: 16px;
	padding: 4px;
	position: absolute;
	color: black;
	background: white;
	border: 1px solid;
	z-index: 3;
	border-radius: 4px;
	left: 30%;
	top: 30%;
	-moz-box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
	-webkit-box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
 	box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
}

	.biweekly:hover:after{
		content: "1 issue every 2 weeks";
	}

	.packet:hover:after{
		content: "Founded 11/2012";
	}

	.publication:hover:after{
		content: "Printed in Brooklyn, NY";
	}

	.everyother:hover:after{
		content: "This is relatively held true";
	}

	.season:hover:after{
		content: "Thats: Spring, Summer, Fall, Winter";
	}

	.rebound:hover:after{
		content: "Like periodicals at a library";
	}

	.theme:hover:after{
		content: "Special issues do that";
	}


/*Hover for images*/


	.riso:hover:after {
		content: url('img/riso.jpg');
		position:absolute;
		top: -10%;
		left: 30%;
		border: 1px solid black;
		-moz-box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
	-webkit-box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
 	box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
	}

	.six:hover:after {
		content: url('img/sixfingers.jpg');
		position:absolute;
		top: -10%;
		left: 30%;
		border: 1px solid black;
		z-index: 10;
		-moz-box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
	-webkit-box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
 	box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
	}

	.parbaked:hover:after {
		content: url('img/parbaked.jpg');
		position:absolute;
		top: -10%;
		left: 30%;
		border: 1px solid black;
		z-index: 10;
		-moz-box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
	-webkit-box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
 	box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
	}

		.wirebound:hover:after {
		content: url('img/wirebound.jpg');
		position:absolute;
		top: -10%;
		left: 30%;
		border: 1px solid black;
		z-index: 10;
		-moz-box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
	-webkit-box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
 	box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
	}




/*Left side, tumblr  issues*/

.left {	
	position: fixed;
	font-size: 16px;
	line-height: 20px;
	width: 90%;
	height: 100%;
	left: 0;
	padding: 12px 0px 0px 12px;
	z-index: 1;
	overflow: scroll;

}

#up-date {
	margin-bottom: 12px;
	z-index: 1;
}

.post {
	width: 50%;
	padding-right: 36px;
	float: left;
	margin-bottom: 36px;
	position: relative;

}

.post:nth-child(odd) {
	clear: left;
}


.left img {
	width: 100%;
	cursor:pointer;
}

.landscape {
	width: 75% !important;
}


#load {
	font-size: 8vw;
	display:block;
	width: 100%;
	float: none;
	clear:both;
	border: 1px solid black;
	background: yellow;
	border-radius: 4px;
	margin-bottom: 12px;
	visibility: hidden;
	height: 10vw;
}

/*.post:hover:after {
	content: "+++";
	right: 0;
	top: 0;
	font-size: 16px;
	padding: 4px;
	position: absolute;
	color: black;
	background: yellow;
	border: 1px solid;
	border-radius: 4px
	z-index: 5;
}*/


/*.invisible {
	visibility: hidden;
}*/

/*.post:after {
	content: "+";
	left: 0px;
	top: 0px;
	font-size: 12px;
	padding: 4px;
	position: absolute;
	color: black;
	background: white;
	border: 1px solid;
	z-index: 5;
}



/*Top nav*/

.navHolder {
	height: 72px;
}

.top {
	margin-bottom: 36px;
}


.hamburger {
	margin-right: 2px;
	height: 34px;
	width: 150px;
	background: yellow;
	border: 1px solid black;
	display: inline-block;
	position: relative;
	border-radius: 4px;
	padding:4px;
	font-size: 24px;
	cursor: pointer;
	-moz-box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
	-webkit-box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
 	box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
}

.nodrop {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
 	box-shadow: none;
}

.hamburger span {
		top: 15px;
		left: 6px;
		width: 24px;
		height: 2px;
		position: absolute;
		background: black;
		border-radius: 4px;
	}

	.hamburger span:before {
		content: "";
		z-index: 100;
		top:8px;
		left: 0px;
		width: 24px;
		height: 2px;
		position: absolute;
		background: black;
		border-radius: 4px;
	}

	.hamburger span:after {
		content: "";
		z-index: 100;
		top:-8px;
		left: 0px;
		width: 24px;
		height: 2px;
		position: absolute;
		background: black;
		border-radius: 4px;
	}

.menu {
	top: 38px;
	left: -1px;
	width: 150px;
	opacity: 0;
	position: absolute;
	font-size: 24px;
	border: 1px solid;
	border-radius: 4px;
	background: yellow;
	color: black;
	z-index: 100;
	visibility: hidden;
	-webkit-appearance: none;
	-moz-box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
	-webkit-box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
 	box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
}

.menuappear {
		background: white;
		opacity: 1;
		visibility: visible;
	}


/*.hamburger:hover .menu {
	background: white;
	opacity: 1;
	visibility: visible;
}*/

.menu a {
	padding: 4px 4px 6px 4px;
	font-size: 24px;
	border: none;
	display: block;
	float: none;
	margin: 0 0 0 0;
	border-radius: 4px;
	background: none;
	color: black;
}

.norule {
		border-bottom:none;
}

.menu a:hover {
	background: yellow;
	text-decoration: none;
}

#homebutton, .top button, .top input, select, .back{
	padding: 2px 4px 3px 4px;
	font-size: 24px;
	border: 1px solid;
	display: block;
	float: left;
	margin-right: 6px;
	border-radius: 4px;
	color: black;
	-webkit-appearance: none;
	-moz-box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
	-webkit-box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
 	box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
}

select {
	 cursor:pointer;
}



#homebutton {
	height: 34px;
	padding-top: 6px;
	vertical-align: baseline;
}

.back {
	height: 34px;
	padding-top: 3px;
	vertical-align: middle;
}

.filters{
	margin: 0;
}

.top input {
	width: 200px;
}

.top input, .top select, .top button {
	background: white;
	height: 34px;
	padding-top: 2px;
}


.top button {
	background: yellow;
}

.top button:hover{
	background: blue;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
 	box-shadow: none;
}

.white {
	background: white;
}

#artistpick, #issuepick {
	width: 120px;
}

.menu, .filters{
	display: inline-block;
}

.fixnav {
	top: 12px;
	position: fixed;
	left: 12px;
	z-index:10;
	margin:0;
	width: 100%;
}

#homebutton:hover, .back:hover{
	text-decoration: none;
	background: blue;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
 	box-shadow: none;
}

.home-off {
	visibility: hidden;
	position: absolute;
}

/*SHADOWBOX*/

#box {
	background: black;
	position: fixed;
	z-index: 100;
	width: 100%;
	height: 100%;
	margin: 0px;
}


#box p {
	color: white;
	text-align: left;
	position: fixed;
	bottom: 12px;
	left: 12px;
	line-height: 24px;
}

#box a {
	color: blue;
	position: fixed;
	bottom: 12px;
	right: 12px;

}


#box p a {
	color: blue;
	position: relative;
	bottom:0;
	right:0;
}

#box img {
	display: block;
	margin:0 auto;
	max-width: 100%;
	max-height: 100%;
	vertical-align: middle;
}

#box button {
	font-size: 8vw;
	line-height: 4vw;
	color: white;
	position: fixed;
	top: 24px;
	right: 24px;
	background: none;
	border: none;
}

.box-hide {
	visibility: hidden;
	z-index: 0;
}


/*Right side nav*/
	

.right {
	font-size: 16px;
	left: 90%;
	top:0;
	width: 10%;
	height: 100%;
	position: fixed;
	
}

.right img {
	width: 100%;
	margin-bottom: 3px;
	-moz-box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
	-webkit-box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
 	box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
}

.right img:hover {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
 	box-shadow: none;
}

.issues {
	max-height: 100%;
	overflow: scroll;
	padding-right:12px;
	padding-top: 12px;
	padding-bottom: 48px;
}

.nodot {
	list-style:none;
	margin-bottom: 12px;
	cursor: pointer;
}



/*Info page styles*/

.info-page {
	position: relative;
	padding-top: 12px;
	padding-left: 12px;
}

.info-page p {
	font-size: 8vw;
	line-height: 8vw;
	letter-spacing: -.05vw;
	margin-top: 8vw;
	padding-right: 12px;
}

.info-page p a:before:hover {
	content: "";
	border-bottom: 1px solid blue;
	width: 100%;
	position: absolute;
	top: 8vw;
}

.infopage p a:hover {
	text-decoration: none !important;
}

.info-page p.first {
	margin-top: 0px;
}

.red {
	color: red;
}



/*push links spacing*/

#subscribe-link:before, #buy-link:before, #residencies-link:before, #mission-link:before, #special-link:before, #people-link:before {
	display: block; 
 	content: " "; 
 	margin-top: -48px; 
 	height: 48px; 
 	visibility: hidden;
}

.residency, .specials {
	margin-top: 24px;
	width: 25%;
	padding-right: 12px;
	float: left;
}

.subsinfo {
	margin-top: 4vw;
	width: 25%;
	padding-right: 24px;
	float: left;
}

.subsinfo select{
	font-size: 16px;
	width: 100%;
	cursor: pointer;
	margin-bottom:6px;
}

.subsinfo input{
	width: 120px;
	background: yellow;
	text-align: left;
}


.subsinfo .subsubmit {
	font-size: 16px;
	border: 1px solid black;
	margin:0;
	padding: 4px;
	background: yellow;
	border-radius: 4px;
	-moz-box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
	-webkit-box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
 	box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
}

.subsubmit:hover {
	background: blue !important;
}

.info-sub-wrapper {
	padding-right: 12px;
}
.info-sub-wrapper:after {
	content: '';
	clear: both;
	display: block;
}

.residency img, .specials img {
	margin: 4px 0;
	height: 24vw;
	-moz-box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
	-webkit-box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
 	box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
}

.residency:nth-child(4n+5), .specials:nth-child(4n+5) {
	clear: both;
}


.residency p, .specials p, .subsinfo p {
	width: 100%;
	margin-top: 0px;
	font-size: 16px;
	line-height: 20px;
}

.info-sub-wrapper ul {
	list-style: none inside none;
}

.info-sub-wrapper li {
	margin-top: 4vw;
	width: 25%;
	padding-right: 24px;
	float: left;
}


/*FOOTER*/

footer {
	z-index: 10;
	position: fixed;
	bottom:36px;
	right: 36px;
	color: black;
}

footer a {
	vertical-align: middle;
	padding: 3px 4px 3px 4px;
	font-size: 24px;
	line-height:30px;
	height: 36px;
	border: 1px solid black;
	display: inline-block;
	margin-right: 6px;
	border-radius: 4px;
	color: black !important;
	background: yellow;
	text-decoration: none;
	-moz-box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
	-webkit-box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
 	box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
}

footer a:hover {
	text-decoration: none;
	color: black;
	background: blue;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
 	box-shadow: none;
}


/*Subscription box*/

#subscription {
	padding: 8px;
	border-radius: 4px;
	border: 1px solid black;
	font-size: 16px;
	background: yellow;
	width: 154px;
	position: fixed;
	color: black;
	z-index: 5;
	top: 550px;
	left: 48px;
	cursor: move;
	-moz-box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
	-webkit-box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
 	box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
}

#subscription:hover, #news:hover{
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
 	box-shadow: none;
}

#subscription button, #news button {
	font-size: 16px;
	position: absolute;
	border:1px solid;
	top: -6px;
	right: -6px;
	z-index: 6;
	width:24px;
	height:24px;
	margin:0;
	background: red;
	border-radius:24px;

}

#subscription select {
	padding:4px;
	font-size: 16px;
	line-height: 24px;
	border: 1px solid;
	background: white;
	margin-top: 12px;
	margin-bottom: 12px;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
 	box-shadow: none;

}



#subscription input {
	width: 120px;
	background: yellow;
	text-align:left;
}

#subscription .subsubmit {
	font-size: 16px;
	border: 1px solid black;
	margin:0;
	padding: 4px;
	background: yellow;
	border-radius: 4px;
	width:100%;
	width: 142 !important;
}


/*News box*/

#news {
	padding: 8px;
	width:300px;
	border-radius: 4px;
	border: 1px solid black;
	font-size: 16px;
	background: yellow;
	position: fixed;
	color: black;
	z-index: 5;
	top: 20vw;
	left: 20vw;
	-moz-box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
	-webkit-box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
 	box-shadow: 4px 4px 0px  rgba(68,68,68,0.33);
}

#news img {
	width: 100%;

}

@media (max-width: 1140px) {


	.residency img, .specials img {
		margin: 4px 0;
		height: 24vw;
	}

	.residency:nth-child(9) {
		clear: none;
	}

	.residency:nth-child(4n+5), .specials:nth-child(4n+5) {
		clear: both;
	}

	.subsinfo {
		margin-top: 4vw;
		width: 25%;
		padding-right: 24px;
		float: left;
	}

}


@media (max-width: 950px) {

	h1 {
		font-size: 8.5vw;
		line-height: 8vw;
		letter-spacing: -.05vw;
	}

	.packet:before, .biweekly:before, .publication:before, .everyother:before, .riso:before, .six:before, .season:before, .rebound:before, .theme:before, .parbaked:before, .wirebound:before {
		border-bottom: 0px solid black;
	}

	.packet:hover:after, .biweekly:hover:after, .publication:hover:after, .everyother:hover:after, .season:hover:after, .rebound:hover:after, .theme:hover:after{
		content:"";
		border:none;
		background:none;	
	}

	.left {	
		font-size: 16px;
		padding: 3px 0px 0px 12px;
		z-index: 1;
		width:100%;
		height:auto;
		position: relative;
	}

	#up-date {
		margin-bottom: 12px;
	}

	.right {
		position: absolute;
		visibility: hidden;
	}

	.issues {
		visibility: hidden;
	}

	.residency, .specials {
		margin-top: 24px;
		width: 33%;
		padding-right: 12px;
		float: left;
	}

	.residency img, .specials img {
		margin: 4px 0;
		height: 36vw;
	}


	.residency:nth-child(9) {
		clear: none;
	}

	.residency:nth-child(4n+5), .specials:nth-child(4n+5) {
		clear: none;
	}

	.residency:nth-child(3n+4), .specials:nth-child(3n+4) {
		clear: both;
	}



/*	#subscription {
		visibility: hidden;
	}

	.packet:hover:after, .biweekly:hover:after, .publication:hover:after, .everyother:hover:after, .season:hover:after, .rebound:hover:after, .theme:hover:after{
	content: "";
	position: absolute;
	padding: 0;
	border: none;
	}

*/

}


@media (max-width: 800px) {

	.top {
		height: 24px;
		margin-bottom: 12px;
	}

	header {
		margin-bottom: 24px;
	}

	.navHolder {
		height: 36px;
		margin: 0;
	}

	#up-date {
		margin-top: 12px;
	}

	.issues {
		margin-top: 12px;
	}

	footer a, .top a, .top select, #homebutton, .top button, .top input, .hamburger{
		padding-top:3px;
		font-size: 16px;
		line-height:18px;
		height: 24px;
	}

	#homebutton, .back {
		padding: 3px 4px 4px;
		text-align: middle;
	}

	.menu {
		top: 30px;
	}

	#artistpick, #issuepick {
		width: 70px;
	}

	.top input {
		width: 70px;
	}

	.hamburger {
		width: 24px;
		height: 24px;
		clear: both;
	}

	.hamburger:after {
		content: "";
	}

	.hamburger span {
		top: 10px;
		left: 3px;
		width: 16px;
		height: 2px;
		position: absolute;
		background: black;
		border-radius: 4px;
	}

	.hamburger span:before {
		content: "";
		z-index: 100;
		top:5px;
		right: 0px;
		width: 16px;
		height: 2px;
		position: absolute;
		background: black;
		border-radius: 4px;
	}

	.hamburger span:after {
		content: "";
		z-index: 100;
		top:-5px;
		right: 0px;
		width: 16px;
		height: 2px;
		position: absolute;
		background: black;
		border-radius: 4px;
	}

	#subscription, #news {
		visibility: hidden;
	}

	.riso:hover:after, .six:hover:after, .parbaked:hover:after, .biweekly:hover:after, .publication:hover:after, .everyother:hover:after, .season:hover:after, .rebound:hover:after, .theme:hover:after{
		content: "";
		position: absolute;
		padding: 0;
		border: none;
	}

	footer a {
		z-index: 10;
		font-size: 16px;
	}



}


@media (max-width: 600px) {

	h1 {
		font-size: 8.5vw;
		line-height: 9vw;
		letter-spacing: 0;
	}

	.info-page p {
		font-size: 8.5vw;
		line-height: 9vw;
		letter-spacing: 0;
	}

	.info-sub-wrapper ul, .residency p, .specials p, .subsinfo p {
		font-size: 16px;
		line-height: 20px;
	}

	.subsinfo {
		margin-top: 8vw;
		width: 50%;
		padding-right: 12px;
		float: left;
	}

	.info-sub-wrapper li {
		margin-top: 8vw;
		width: 50%;
		padding-right: 12px;
		float: left;
	}

	.residency, .specials {
		margin-top: 8vw;
		width: 50%;
		padding-right: 12px;
		float: left;
	}

	.residency:nth-child(3n+4), .specials:nth-child(3n+4) {
		clear: none;
	}

	.residency:nth-child(odd), .specials:nth-child(odd), .subsinfo:nth-child(odd), .info-sub-wrapper li:nth-child(odd)  {
		clear: left;
	}

	.residency img, .specials img {
		margin: 4px 0;
		height: 52vw;
	}

	.post {
		width: 100%;
		padding-right: 12px;
		margin-bottom: 36px;
		position: relative;
		cursor: pointer;
	}

	footer {
		bottom: 12px;
		right: 12px;
	}
}


@media (max-width: 400px) {

	h1 {
		font-size: 8.5vw;
		line-height: 9vw;
		letter-spacing: 0;
	}

	.residency img, .specials img {
		margin: 4px 0;
		height: 115vw;
	}

	.subsinfo {
		margin-top: 8vw;
		width: 100%;
		padding-right: 0;
		float: left;
	}

	.info-sub-wrapper li {
		margin-top: 8vw;
		width: 100%;
		padding-right: 0;
		float: left;
	}

	.residency, .specials {
		margin-top: 8vw;
		width: 100%;
		padding-right: 0;
		float: left;
	}

	#homebutton {
		display:block;
		margin-right: 100%;
		margin-bottom: 6px;
	}

	#homebutton:after {
		clear:both;
		content: "";
		display:;
	}



}



