/*
	AwesomeJS Cascading Style Sheet
	--------------------------------------------------------------------------------------------
	
	Table of Contents:
		import validation styling
		defaults
			- container, header
			- elements
			- uploadify
			- success
		resets & misc
*/

/* import validation styling
----------------------------------------------------------------------------------------------*/

@import url('validation.css');

/* defaults
----------------------------------------------------------------------------------------------*/

html, body {
	width: 100%;
	height: 100%;
}

body {
	font-family: Verdana, sans-serif;
	font-size: 11px;
	color: #292929;
	background: #1e1e1e url(../imgs/order-bg.jpg) no-repeat top center;
	margin: 0; padding: 50px 0 0 0;
}

/* container, header, content
----------------------------------------------------------------------------------------------*/

div#container {
	width: 896px;
	margin: 0 auto;
}

.order-header {
	width: 794px;
	padding: 69px 0 0 102px;
	background: url(../imgs/order-header-bg.png) no-repeat;
}

	.order-header h1 {
		width: 245px;
		height: 82px;
		background: url(../imgs/get-started.png) no-repeat;
		text-indent: -9999px;
	}

.content {
	width: 692px;
	padding: 0 84px;
	background: #ffffff;
	border-left: 18px solid #c1c1c1;
	border-right: 18px solid #c1c1c1;
	border-bottom: 18px solid #c1c1c1;
	overflow: hidden;
}

/* elements
----------------------------------------------------------------------------------------------*/

p.introduction {
	font-family: Georgia,serif;
	color: #2f2d2d;
	font-size: 23px;
	font-style: italic;
	line-height: 30px;
	padding: 36px 0 34px 0;
	border-bottom: 1px solid #bebebe;
}

.introduction span {
	color: #6e0303;
	font-size: 21px;
	font-style: normal;
	letter-spacing: 1px;
	font-variant: small-caps;
}

.order-form {
	padding: 30px 0 50px 0;
}

	h2.your-details {
		width: 210px;
		height: 32px;
		background: url(../imgs/your-details-bg.png) no-repeat;
		text-indent: -9999px;
		margin: 0 0 4px 0;
	}
	
	.order-form label {
		font-family: Georgia, serif;
		font-size: 13px;
		color: #050505;
		letter-spacing: 2px;
		text-transform: uppercase;
		padding: 0 0 0 3px;
		cursor: pointer;
	}
	
		label sup {
			color: #b31808;
			font-size: 14px;
		}

	.order-form .order-input {
		font-family: Georgia, serif;
		color: #042d2e;
		font-size: 18px;
		width: 364px;
		height: 28px;
		margin: 9px 0 8px 0; padding: 5px 0 0 20px;
		background: url(../imgs/order-input-bg-test.png) no-repeat;
		border: 4px solid #32a3ad;
	}

		.order-form .order-input:focus {
			background: url(../imgs/order-input-bg-test.png) no-repeat;
			border: 4px solid #205B64;
			
		}

	.order-form .hr {
		width: 100%;
		height: 1px;
		margin: 21px 0;
		border-bottom: 1px solid #e1e1e1;
	}
		.hr hr {
			display: none;
		}
		
	h2.project-basics {
		width: 243px;
		height: 34px;
		background: url(../imgs/project-basics-bg.png) no-repeat;
		text-indent: -9999px;
	}

	.delivery-time {
		font-family: Verdana, serif;
		color: #595a5a;
		font-size: 13px;
		line-height: 1.4em;
		padding: 35px 0 0 0;
		clear: both;
	}
	
		.delivery-time span {
			color: #262727;
			font-size: 12px;
			text-transform: uppercase;
		}

	h2.project-type {
		width: 216px;
		height: 34px;
		background: url(../imgs/project-type-bg.png) no-repeat;
		text-indent: -9999px;
	}
	
	.order-form .project-description {
		font-family: Georgia, serif;
		font-size: 16px;
		color: #646464;
		padding: 5px 0 13px 0;
	}
	
		.project-description sup {
			color: #b31808;
			font-size: 14px;
		}
		
	.order-form .project-type-select, .order-form .project-type-selected {
		font-family: Georgia, serif;
		color: #1b6d57;
		font-size: 15px;
		background: #c2eddf;
		border: 5px solid #78bab1;
		padding: 15px 20px 15px 40px;
		overflow: hidden;
	}
	
		.order-form .project-type-select.selected {
			color: #3d3b2d;
			background: #ffda0f;
			border: 5px solid #252525;
		}
		
		.project-type-select:hover {
			background: #a8ead4;
			cursor: pointer;
		}
		
		.project-type-select img, .order-form .project-type-selected img {
			margin: 4px 50px 0 0;
			float: left;
		}

		.project-type-select h3, .order-form .project-type-selected h3 {
			font-family: Verdana, sans-serif;
			font-size: 14px;
			color: #233f34;
			text-transform: uppercase;
			padding: 0 0 9px 0;
		}
		
			h3 sup {
				font-size: 10px;
				color: #6d5737;
			}
			
		.choose-javascript-type {
			font-family: Georgia, serif;
			color: #b5b5b5;
			line-height: 1.5em;
			font-size: 15px;
			font-style: italic;
			letter-spacing: 1px;
			background: #252525 url(../imgs/icon-arrow-down.gif) no-repeat 655px center;
			border-bottom: 5px solid #3a3a3a;
			padding: 15px 48px;
		}
		
			.choose-javascript-type span {
				color: #fffefe;
			}
			
		.selected_tick {
			background: transparent url(../imgs/order_option_select.png) no-repeat top left;
			width: 24px;
			height: 26px;
			display: none;
			position: absolute;
			right: -29px;
			top: 39%;
		}
		.selected_tick.active {
			display: block;
		}

		.psdto-type {
			font-family: Georgia,serif;
			color: #707070;
			font-size: 15px;
			padding: 20px 25px;
			border-left: 5px solid #bbb;
			border-right: 5px solid #bbb;
			border-bottom: 5px solid #bbb;
			background: #f1f1f1;
			position: relative;
		}
		.psdto-type.selectedsub {
			background: #bbb;
			border-left: 5px solid #bbb;
			border-right: 5px solid #bbb;
			border-bottom: 5px solid #bbb;
		}
		
			#psdto-integration, #bring-your-own {
				border-top: 5px solid #bbb;
			}
			
				#psdto-integration img, #bring-your-own img {
					margin: 25px 49px 0 16px; padding: 0 0 10px 0;
				}
				
			#best-fit-psd img, #best-fit-own img {
				margin: 14px 49px 0 16px;
			}
			
			.psdto-type:hover {
				background: #dcdcdc;
				cursor: pointer;
			}
			.psdto-type.selectedsub:hover {
				background: #bbb;
			}

			.psdto-type img {
				margin: 3px 49px 10px 16px;
				float: left;
			}

			.psdto-type h3 {
				font-family: Verdana, sans-serif;
				color: #000;
				font-size: 14px;
				text-transform: uppercase;
				padding: 0 0 9px 0;
			}

			.psdto-type span {
				color: #595959;
			}

			#psdto-options img {
				margin: 14px 50px 0 0;
			}

			.psdto-choose-option, .bringyourowncode-choose-option {
				display: none;
			}

			div#bringyourowncode-options, div#standalone {
				margin: 10px 0 0 0;
			}
			
			.caps {
				font-size: 11px;
				text-transform: uppercase;
				letter-spacing: 1px;
			}

	h2.project-details {
		width: 245px;
		height: 36px;
		background: url(../imgs/project-details-bg.png) no-repeat;
		text-indent: -9999px;
		margin: 0 0 22px 0;
	}
	
	h4.detail {
		font-family: Georgia,serif;
		color: #131313;
		font-size: 13px;
		font-weight: normal;
		letter-spacing: 1px;
		text-transform: uppercase;
		padding: 0 0 0 4px;
		float: left;
	}
	
		.detail span {
			color: #722710;
			font-size: 12px;
			font-style: italic;
			text-transform: none;
		}
		
	#project-description-detail {
		margin: 35px 0 10px 0; padding: 0;
	}

		h4.detail .required {
			color: #b31808;
			font-size: 14px;
		}
		
	.order-form .library-message {
		font-size: 9px;
		color: #6d4d4d;
		text-transform: uppercase;
		line-height: 13px;
		width: 350px;
		margin: -2px 0 0 5px; padding: 0 0 0 20px;
		background: url(../imgs/input-message-bg.gif) no-repeat 0 15px;
		float: left;
	}
	
	.order-form .order-textarea {
		font-family: Georgia, serif;
		font-size: 15px;
		color: #042d2e;
		line-height: 22px;
		width: 670px;
		height: 160px;
		margin: 0 0 0 0; padding: 10px;
		background: url(../imgs/textarea-bg.gif);
		border: 2px solid #237d8b;
		overflow: hidden;
	}
	
	.order-form .choose-files {
		width: 134px;
		height: 30px;
		background: url(../imgs/choose-files-bg.gif) no-repeat;
		border: 0;
		cursor: pointer;
		float: left;
	}
	
	.order-form .show-loading {
		padding: 3px 0 0 20px;
		float: left;
	}
	
	.order-form .files {
		list-style: none;
		margin: 0; padding: 20px 0;
		clear: both;
	}
	
		.files li {
			font-family: Georgia, sans-serif;
			font-size: 18px;
			color: #3d6b89;
			font-style: italic;
			text-decoration: none;
			background: url(../imgs/progress-close-bg.png) no-repeat 0 7px;
			margin: 0 0 6px 0; padding: 0 0 0 30px;
			cursor: pointer;
		}
		
		.files li:hover {
			color: #3d6b89;
			background-position: 0 -30px;
		}
		
	.order-form .submit-hold {
		height: 63px;
		padding: 0 0 0 227px;
		background: url(../imgs/submit-hold-bg.gif) no-repeat 0 29px;
	}
	
		.order-form .submit-order {
			width: 236px;
			height: 63px;
			background: url(../imgs/submit-bg.png) no-repeat;
			border: 0;
			cursor: pointer;
			text-indent: -9999px;
			font-size: 0em;
			display: block;
			line-height: 0;
		}
		
			.order-form .submit-order:hover {
				background-position: 0 -63px;
			}
			
.footer-logo {
	text-indent: -9999px;
	width: 200px;
	height: 62px;
	margin: 40px auto;
	background: url(../imgs/footer-logo.gif) no-repeat;
	clear: both;
}

/* uploadify
----------------------------------------------------------------------------------------------*/

.uploadify-holder {
	width: 400px;
	margin: 15px 0 0 0;
	float: left;
	clear: both;	
}

#awesomejs_fileInputQueue {
	margin: 5px 0 0 0;
	float: right;
}

.uploadifyQueueItem {
	background: url(../imgs/progress-bar-bg.png) no-repeat;
	width: 225px;
	height: 21px;
	padding: 0 0 0 10px;
}

.uploadifyQueueItem .cancel {
	display: none;
}

.uploadifyQueueItem .cancel:hover {
	background-position: bottom;
}

.uploadifyProgress {
	width: 187px;
	padding: 6px 0 0 0;
}

.uploadifyProgressBar {
	background: url(../imgs/progress-bar-inner-bg.png);
	width: 1px;
	height: 9px;

}

/* success
----------------------------------------------------------------------------------------------*/

div#success-container {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: url(../imgs/success-bg.png);
	display: none;
}

	.success-content {
		font-family: Georgia, serif;
		width: 602px;
		height: 253px;
		margin: 0 auto;
		background: #4b4b4b;
	}
	
		.success-content .content-wrapper {
			padding: 40px;
		}
	
		.success-content h2 {
			text-indent: -9999em;
			height: 33px;
			margin: 0 0 10px 0; padding: 0 0 25px 0;
			background: url(../imgs/success-header.png) no-repeat;
			border-bottom: 1px dotted #7d7d7d;
		}
		
		.success-content p {
			color: #aeaeae;
			font-size: 22px;
			line-height: 30px;
			padding: 0 0 30px 0;
		}
		
		.success-content a {
			color: #dadada;
			text-transform: uppercase;
			letter-spacing: 2px;
			text-decoration: none;
		}
		
		.success-content a:hover {
			text-decoration: underline;
		}

/* dropdown select styles
----------------------------------------------------------------------------------------------*/

.js ul.newList {
	left: -9999px;
}

	ul.newList * {
		margin: 0; padding: 0;
	}

ul.newList {
	width: 284px;
	margin: 2px 0 0 0; padding: 0;
	list-style: none;
	background: #afe0e5;
	position: absolute;
	border-left: 1px solid #85bfc2;
	border-right: 1px solid #85bfc2;
	border-bottom: 1px solid #85bfc2;
	top: 37px;
	left: 0;
	overflow: hidden;
	z-index: 9999;
}

.newListSelected {
	font-family: Georgia,serif;
	color: #042d2e;
	font-size: 18px;
	width: 285px;
	height: 31px;
	margin: 15px 0 0 4px; padding: 10px 0 0 25px;
	background: url(../imgs/select-bg.png) no-repeat;
	float: left;
}

	.newListSelected span {
		width: 284px;
		display: block;
	}

ul.newList li {
	color: #3e4e5f;
	padding: 7px 20px;
	border-top: 1px solid #85bfc2;
	font-size: 14px;
	overflow: hidden;
}

.selectedTxt {
	width: 253px;
	height: 37px;
	overflow: hidden;
	padding: 0 33px 0 0;
	cursor: pointer;
}

.hiLite {
	background: #91dbe2 !important;
	color: #3e4e5f !important;
}

.newListHover {
	background: #aae5eb !important;
	color: #3e4e5f !important;
	cursor: pointer;
}

	.newListSelHover, .newListSelFocus {
		cursor: pointer;
	}

.newListOptionTitle {
	font-weight: bold;
}

.newListOptionTitle ul {
	margin: 3px 0 0;
}

.newListOptionTitle li {
	font-weight: normal;
	border-left: 1px solid #ccc;
}

/* resets & misc
------------------------------------------------------------------------------------------------*/

h1, h2, h3, h4, h5, h6, p, form, input, textarea, ul, li, a img {
	margin: 0; padding: 0;
	border: 0; outline: 0;
	vertical-align: baseline;
	background: transparent;
}

:focus {
	outline: 0;
}

.clear {
	clear: both;
}
.hide {
	display: none;
	visibility: hidden;
}