/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

/* #Page Styles
================================================== */

/* #Media Queries
================================================== */
	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 985px) {
		.center{
			padding: 0 10px;
		}
	}
	@media only screen and (max-width: 800px) {
		.name-ingr{
			font-size: 20px;
			margin-bottom: 20px;
		}
		.button-add{
			padding: 4px 0;
			font-size: 13px;
		}
	}
	@media only screen and (max-width: 768px) {
		.name-ingr{
			font-size: 20px;
			margin-bottom: 10%;
		}
		.button-add{
			padding: 4px 0;
		}
		.w-p-name{
			width:69%
		}
		.w-info{
			width:70%;
		}
		.w-sel {
			width: 30%;
		}
	}
	@media only screen and (max-width: 641px) {
		.item-pizza{
			width: 47.3%;
		}
		.item-pizza:nth-child(2n+1){
			margin: 0;
			margin-left: 6px;
		}
		.item-pizza:nth-child(2n+2){
			margin-right: 2%;
			margin-left: 4px;
		}
		.ingredient{
			width: 28.4%;
		}
		.name-ingr{
			font-size: 24px;
			margin-bottom: 15%;
		}
		.button-add{
			padding: 6px 0;
			font-size: 14px;
		}
		.ingredient:nth-child(4n+3), .ingredient:nth-child(4n+2), .ingredient:nth-child(4n+1){
			margin-right:  0;
			margin-left: 0;
			margin-left: -4px;
		}
		.ingredient:nth-child(3n-2){
			margin-right: 3%;
			margin-left: 4px;
		}
		.ingredient:nth-child(3n-1){
			margin-right: 3%;
		}
		.info-b-i > .ingredient-info {
			display:none;
		}
		.w-info {
			height:auto;
		}
		.w-info {
			width:100%;
			margin-bottom:7px;
			max-height:35px;
			overflow: hidden;
		}
		.w-p-name{
			width:64%;
		}
		.w-sel{
			width:35%;
		}
		.delivery textarea, .delivery input[type="text"], hr{
			width: 96%
		}
		.h-right .link_h{
			font-size: 13px;
		}
		.header .name{
			padding-left: 10px;
			font-size: 14px;
		}
		.header .name span{
			font-size: 13px;
			margin-right: 10px;
		}
	}
	@media only screen and (max-width: 520px) {
		.name-ingr{
			font-size: 20px;
			margin-bottom: 10%;
		}
		.button-add{
			padding: 4px 0;
		}
		.ingredient:nth-child(3n-2), .ingredient:nth-child(3n-1){
			margin-left: -4px;
			margin-right:0;
		}
		.ingredient{
			width: 44%;
		}
		.ingredient:nth-child(2n+1){
			margin-right: 4%;
		}
		.name-ingr{
			font-size: 24px;
			margin-bottom: 15%;
		}
		.button-add{
			padding: 6px 0;
			font-size: 14px;
		}
		.name-p-i{
			font-size: 17px;
			vertical-align: middle;
		}
		.name-b-i{
			font-size: 21px;
			padding-bottom: 15px;
		}
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 767px) and (max-width: 959px) {
	
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/