/*
* 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
================================================== */

	@media only screen and (min-width: 1200px)  {
		
	}

	@media only screen and (min-width: 960px) and (max-width: 1199px)  {
		.order .sizes ul li { margin-right: 8px !important; }
		.hotspot.trim { left: 34px !important; top: 60px !important; }
		.hotspot.motif { left: 90px !important; top: 450px !important; }
		.hotspot.material { left: 364px !important; top: 530px !important; }
		.hotspot.type { left: 294px !important; top: 260px !important; }
		.pallettes, .order { margin-top: 120px !important; }
		#pallette-material ul li { font-size: 11px !important; }
	}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		.swatch { margin-bottom: 5px !important; }
		.swatch img { width: 52px !important; height: 38px !important; }
		.swatch.motif img { width: 52px !important; height: 52px !important; }
		.summary .total p:last-child { padding: 20px 10px !important; }
		.hotspot.trim { left: 25px !important; top: 50px !important; }
		.hotspot.motif { left: 64px !important; top: 340px !important; }
		.hotspot.material { left: 274px !important; top: 400px !important; }
		.hotspot.type { left: 224px !important; top: 200px !important; }
		.pallettes, .order { margin-top: 40px !important; }
		.breadcrumb div span i { display:none; }
		.selector select { width: 80% !important; }
		.pallette ul li { font-size: 11px !important; }
		small.notice { font-size: 9px !important; }
		#pallette-material ul li { font-size: 10px !important; padding-left: 0px; padding-right: 0; text-align: center; }
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		.landing-page .row { background: none !important; border: none; }
		.landing-page .row .diamond-icon-upper { display: none; }
		.landing-page .row .route { border-top: solid 1px #dddddd; }
		.summary, .breadcrumb { display: none !important; }
		.pallettes, .order { margin-top: 0 !important; }
		.preview { height: auto !important; margin: 30px 20px 40px 20px !important; }
		.hotspot { display: none; }
		.pallette { height: 155px !important; }
		.tab-panel { overflow: auto !important; padding-right: 20px !important; }
		.swatch-container { height: 100px !important; overflow: hidden !important; white-space: nowrap;display: inline-block; }
		#pallette-motif { height: 155px !important; }
		#pallette-motif .selector { display: none; }
		.swatch { width: 79px !important; height: 79px !important; display: inline-block; float: none !important; }
		.swatch img { width: 79px !important; height: 79px !important; }
		.pallette.monogram, .swatch-container.monogram { height: auto !important; padding-bottom: 0 !important; }
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		.order .sizes ul li { margin-right: 16px !important; }
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		.order .sizes ul li { margin-right: 10px !important; }
	}