/* CSS Document */

/* Desktop : 	min-width: 1025px */
@media (min-width:1025px) {	
	#wrapper {
		min-width: 1025px;
	}
	
	#canvas_container {
		float: left;
	}
	
	#controls {
		float: left;
	}
}
	
	
/* iPad: 1024 x 768 */
@media (max-width:1024px) {	
	#wrapper {
		max-width: 99%; 
		min-width: 950px; 
	}

	#canvas_container {
		float: left;
	}
	
	#controls {
		float: left;
	}
	
	#content {
		max-width: 99%;
		margin: 14px auto;
	}
	
	#maincontent {
		padding: .5em;
	}
	
	/* ELEMENT palette */
	#elements ul li input {
		height: 14px;
	}
	
	/* OPTION palette */
	#text3 input[type="number"] {
		width: 30px;
	}

	input[type="color"] {
		width: 42px;
		height: 14px;
	}
	
	#shadow2 input[type="number"] {
		width: 26px;
	}
	
	#sColor {
		width: 61px;
	}
	
	#bColor {
		width: 44px;
	}
}



/* Medium / smaller than iPad */
@media (max-width:767px) {
	#wrapper {
		min-width: 610px;
	}

	#canvas_container {
		float: none;
		display: block;
	}
	
	#designpage {
		margin: 0px auto 0px auto;
	}
	
	#controls {
		float: none;	
		position: static;
		margin: 10px 0;
	}

	#navigation {
	background-color: #999999;
			/*	background GRADIENT */	
background: -webkit-linear-gradient(left, #999999, #cdcdcd , #999999); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #999999, #cdcdcd , #999999); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, #999999, #cdcdcd , #999999); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, #999999, #cdcdcd , #999999); /* Standard syntax (must be last) */
	}
	
	#navigation ul {
		padding: 0.01em 0 0 0;
	}
	
	#navigation ul li {
		display: block; 
    	margin: 6px 0 0;	
	}
	
	.borderbottom {
		padding: 1px 0 5px 0;
		margin: 4px 0;
		border-bottom: 1px solid #FFF;
	}
	
	#navigation ul li a {
	    padding: 7px 16px 6px;
	}

}

/* iPhone ; 480 x 320 */


@media (min-width: 481px) and (max-width:1020px) {
}