/* font-face and media queries for Tinderbox styles
 Mark Bernstein Eastgate Systems September 2010

 don't compile with less.css, which can't yet handle these constructs
*/


/* A font by Jos Buivenga (exljbris) -> www.exljbris.nl */ 
@font-face {
  font-family: Fontin;
  src: url('../fonts/Fontin-Regular.otf') format('opentype');
  font-weight: normal;
}



@media screen and (max-width: 800px) {
	#side {
	font-size:  0.9em;
	}
	#main h2  {
		font-size: 24px;
		letter-spacing: 0;
		}
	.orderItem {
		width: 150px;
		
		}
	.orderItem p, .orderItem form {
 		 margin: 5px;
 		 width: 100%;
		}
	.orderItem img { width: 32px; height: 32px;}

}

@media screen and (max-width: 600px) {
	
	#side { padding: 0; }

	#side .col {
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
	}
	
	#header,#content,#footer {width: 94%;}
	
	#headtext { font-size:18px; }
	
		
	#header h2 {
	font-size: 24px;
	letter-spacing: 0;
	}
	#header ul {
	font-size: 12px;
	letter-spacing: 0;
	}
	
	#header ul li{
	margin-right:8px;
}
	
	
	#main h1  {
		font-size: 48px;
		letter-spacing: 0;
		}
	#main h2  {
		font-size: 24px;
		letter-spacing: 0;
		}
		
	#main p {
		font-size: 14px;
		line-height: 1.4;
}

	#main .screenshot {
		width: 150px;
		margin-bottom: 10px;	
		margin-right: 20px;
		}
		
	#main .screenshot img {
		margin:0;
		padding: 0;
		width: 150px;
		}

	.bulletin {
		float: none;
		margin: 0;
		padding: 0;
		width: 100%;
		}

	.zoomable { position: relative; }

	.zoomable img {
	float: none;
	width: 100%;
	}
	.zoomable .caption {
	float: none;
	width: 100%;
	}
		
	#footer img { display: none; }
	
	#footer p {
		margin-left: 0;
		width: 100%;
		}
		
	.orderItem {
		width: 150px;
		
		}
	.orderItem p, .orderItem form {
 		 margin: 5px;
 		 width: 100%;
		}
	.orderItem img { display: none;}
}
	

	}