input, select {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
}
select#comboNav {
	font-family: 'Lucida Grande';
	font-size: 11px;
}

input[type=text], input[type=email], input[type=tel], input[type=url], input[type=password], textarea,select {
	width: 100%;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #eee;
	border-bottom: 1px solid #eee; 
}
input[type=text]:focus, input[type=email]:focus, input[type=tel], input[type=url]:focus, input[type=password]:focus, textarea:focus {
	outline: 0;
	border-color: #4697e4;
}
input[type=submit],
input[type=button] {
	background: #80b1cd;
	border:none;
	color:#fff;
	font-weight:bold;
	border-radius:.25em;
	padding:.4em 1.25em;
	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5);
	text-transform: uppercase;
	cursor: pointer;
}
input[type=button] {
	margin-right: 2em;
}
input[type=submit]:disabled {
	cursor: default;
	background-color: #CCCCCC;
}

form:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

#action {
	text-align: center;
	margin-top: 2em;	
}

#credit {
	text-align: center;
	padding: 2em 0 3em 0;
	font-size: 10px;
	color: #b2b2b2;
}

#credit a {
	font-size:10px;
	color:#b2b2b2;
}

.error {color:#FF3333;}

#page-content-01 #demo {margin: 1em 0 2.5em 0;}
#page-content-01 .thumbnail {padding:5px; border:1px solid #AAA;}
#page-content-01 input[type=submit] {margin-top: 0.8em;}

#page-content-02 .forminput {border-width:1px;}

#page-content-03 #review {margin-top: 1.5em;}
#page-content-03 #review div:last-child {margin-top: 0.5em;}
#page-content-03 #review .label {display: inline-block; margin-right: 0.5em; font-weight: bold;}
#page-content-03 #review ul {margin-top: 0;}

/*** thumbnail layout on #page-content-01 ***/
#page-content-01 #samples > div {float:left; text-align:center; margin:1.5em 0 1.5em 8%;}
#page-content-01 #samples > div:first-child {margin-left: 0;}

/* tablet */
@media only screen and (min-width: 768px) and (max-width: 991px) {
	#page-content-01 #samples > div {margin-left:3%;}
	#page-content-01 #samples > div:nth-child(1) img {width:135px; height:90px;}
	#page-content-01 #samples > div:nth-child(2) img {width:113px; height:90px;}
	#page-content-01 #samples > div:nth-child(3) img {width:92px; height:135px;}
	#page-content-01 #samples > div:nth-child(4) img {width:250px; height:90px;}		
}

/* mobile */
@media only screen and (max-width: 767px) {
	#page-content-01 #samples > div {float:none; text-align:center; margin-left:0;}
	#page-content-01 input[type=submit] {padding: 0.75em 2em; margin-bottom:1em;}	
}

/* wide mobile */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	#page-content-01 #samples > div {float:left; margin-left:6%;}
	#page-content-01 #samples > div:nth-child(2) {margin-left:15%;}
	#page-content-01 #samples > div:nth-child(3) {margin-left:0;}
}

/* narrow mobile only */
@media only screen and (max-width: 479px) {
	#page-content-01 #demo img {width:303px; height:185px;}
}

/****** form styling on #page-content-02 ********/	
.ecard-form * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.ecard-form > div {
	overflow: hidden;
	padding: 1px;
	margin: 0 0 10px 0;
}
.ecard-form > div > label, 
.ecard-form legend {
	font-weight:bold;
}
.ecard-form fieldset {
	border: 0;
	padding: 0;
}
.ecard-form > div > fieldset > div > div {
	margin: 0 0 5px 0;
}
.ecard-form > div > fieldset label {
	font-size: 90%;
}

#field-font div {margin:3px 0;}
#field-font fieldset div:last-child {margin-top:-3px;}
#field-font label img {border:0; vertical-align:middle;}

#field-color label {font-weight: bold;}
#black  + label {color:#2B2B2B;}
#green  + label {color:#009966;}
#red    + label {color:#FF3333;}
#purple + label {color:#9900CC;}
#blue   + label {color:#3366CC;}

/****** preview image size: BEGIN ********/
#preview {margin-top: 2em;}
#preview.pan  {width:800px; height:200px;}
#preview.std  {width:700px; height:312px;}
#preview.sq   {width:620px; height:312px;}
#preview.tall {width:580px; height:400px;}
#preview img  {max-width:100%; max-height:100%;}

/* tablet */
@media only screen and (min-width: 768px) and (max-width: 991px) {
	#preview.pan  {width:712px; height:178px;}
	#preview.std  {width:700px; height:312px;}
	#preview.sq   {width:620px; height:312px;}
	#preview.tall {width:580px; height:400px;}
}

/* mobile */
@media only screen and (max-width: 767px) {
	#preview.pan  {width:316px; height:79px;}
	#preview.std  {width:316px; height:141px;}
	#preview.sq   {width:316px; height:159px;}
	#preview.tall {width:316px; height:218px;}
}

/* wide mobile */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	#preview.pan  {width:436px; height:109px;}
	#preview.std  {width:436px; height:194px;}
	#preview.sq   {width:436px; height:219px;}
	#preview.tall {width:436px; height:301px;}
}
/****** preview image size: END ********/
	
@media (min-width: 768px) {
	.ecard-form > div > label, 
	.ecard-form	legend {
		width: 25%;
		float: left;
		padding-right: .625em;
	}
	.ecard-form > div > div, 
	.ecard-form > div > fieldset > div {
		width: 75%;
		float: right;
	}
	input[type=text], input[type=email], input[type=url], input[type=password], input[type=tel] {width: 50%;}
	select {width:auto;}
	#action {text-align:left; margin-left:25%;}
	#page-content-02 #credit {text-align:left; padding-left:25%;}
	#page-content-03 #credit, #page-content-04 #credit {text-align:left; padding-left:23%;}	
	#review	div {margin-left:10%;}
}

@media (min-width: 1200px) {
	.ecard-form > div > label,
	.ecard-form legend {text-align:right; padding-right:1.5em;}
}