* { margin: 0; padding: 0; }
html { overflow-y: scroll;}
body { background:#ffffff; font-size: 13px; color: #666666; font-family: Arial, helvetica, sans-serif;}
ol, ul { list-style: decimal; margin: 0;}
ul li { margin: 0; padding: 0;}
h1 { margin-bottom: 10px; color: #111111;}	
a, img { outline: none; border:none; color: #000; font-weight: bold; text-transform: uppercase;}
p { margin: 0 0 0px; font-size: 1.2em;}
img { display: block; margin-bottom: 10px;}
aside { font-style: italic; font-size: 0.9em;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display: block;
}

html, body {
	height: 100%;
}

body {
	background-color: #CCCCCC;
}

#application {
	width: 96%;
	height: 100%;
	max-width: 920px;
	margin: auto;
	-webkit-box-shadow: 0px -17px 5px 16px rgba(0,0,0,0.41);
	-moz-box-shadow: 0px -17px 5px 16px rgba(0,0,0,0.41);
	box-shadow: 0px -17px 5px 16px rgba(0,0,0,0.41);
	background-color: #FFFFFF;
}

/* General */

.buttons {
	margin-top: 20px;
}

.buttons input {
	width: 100px;
	height: 40px;
	background-color: #EEEEEE;
	border: 1px solid #CCCCCC;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	cursor: pointer;
	cursor: hand;
	color: #555555;
}

.buttons input:hover {
	background-color: #DDDDDD;
}

.buttons .big {
	width: 300px;
	height: 60px;
	font-size: 18px;
}

.buttons-right {
	width: 96%;
	text-align: right;
	
}

.left-button-wrap {
	float: left;
	margin-left: 100px;
}

.right-button-wrap {
	float: right;
	margin-right: 100px;
}

.ddscreen .buttons input {
	width: 200px;
}

#application #welcome, #application #instructions, .ddscreen, #application #form-slide, #application #final {
	display: table;
	height: 100%;
	width: 100%;
	padding-bottom: 10px;
}

#application #welcome .content, #application #instructions .content, #application #final .content {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	width: 100%;
}

.nocenter {
	display: block;
	min-height: 100%;
	height: auto !important;
}

.nocenter .tableview {
	display: block !important;
	padding-top: 20px;
}

#application #welcome .title {
	font-size: 40px;
}

.content .inner {
	padding-left: 20px;
	padding-right: 20px;
	margin: auto;
	text-align: left;
	font-size: 25px;
}

.content .inner .bullets {
	margin-top: 20px;
	font-style: italic; 
	font-family: Georgia, Times, serif;
	font-size:30px;
	color: #333333;
}

.content .inner .bullets li { 
	margin-left: 50px;
}

.content .inner .bullets li p {
	padding: 8px; 
	font-style: normal; 
	font-family: Arial;
	border-left: 1px solid #999;
}

.content .inner .bullets li p em {
	display: block;
	color: #777777;
	font-size: 25px;
	padding-bottom: 5px;
	padding-top: 5px;
}

.ddscreen .ddscreen-inner .title {
	text-align: center;
	font-weight: bold;
	font-size: 25px;
	padding-bottom: 20px;
}

.ddscreen .ddscreen-inner {
	padding-top: 20px;
	margin: auto;
}

.ddscreen .dicol {
	float: left;
	width: 20%;
	padding-left: 1%;
	padding-right: 1%;
}

.ddscreen .ddscreen-inner .left .drag-item {
	float: left;
	clear: both;
	text-indent: -9999px;
}

.ddscreen .ddscreen-inner .right .drag-item {
	float: right;
	clear: both;
	text-indent: -9999px;
}

.ddscreen .listcol {
	float: left;
	width: 56%;
	text-align: left;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.ddscreen .listcol .drag-target {
	padding-bottom: 5px;
	font-size: 15px;
	border-bottom: 1px solid #CCCCCC;
	margin-bottom: 5px;
}

.ddscreen .listcol .num {
	width: 20px;
	float: left;
	padding-right: 5px;
}

.ddscreen .listcol .sel-items {
	overflow: hidden;
}

.selected-draggable {
	cursor: pointer;
	cursor: hand;
}

.fifty {
	float: left;
	width: 48%;
}

.drag-item {
	width: 162px;
	height: 58px;
	margin-bottom: 5px;
	background-repeat: no-repeat;
	background-size: 100% auto;
	cursor: pointer;
	cursor: hand;
}

.ddscreen .drop-target-hover {
	color: #009900;
	border-bottom: 1px solid #009900 !important;
}

.nodrag {
	cursor: auto !important;
}

.vi1 {
	background-image: url(../images/vi1.png);
}

.vi2 {
	background-image: url(../images/vi2.png);
}

.vi3 {
	background-image: url(../images/vi3.png);
}

.vi4 {
	background-image: url(../images/vi4.png);
}

.vi5 {
	background-image: url(../images/vi5.png);
}

.vi6 {
	background-image: url(../images/vi6.png);
}

.vi7 {
	background-image: url(../images/vi7.png);
}

.vi8 {
	background-image: url(../images/vi8.png);
}

.vi9 {
	background-image: url(../images/vi9.png);
}

.vi10 {
	background-image: url(../images/vi10.png);
}

.vi11 {
	background-image: url(../images/vi11.png);
}

.vi12 {
	background-image: url(../images/vi12.png);
}

.vi13 {
	background-image: url(../images/vi13.png);
}

.vi14 {
	background-image: url(../images/vi14.png);
}

.jvi1 {
	background-image: url(../images/jv1.png);
}

.jvi2 {
	background-image: url(../images/jv2.png);
}

.jvi3 {
	background-image: url(../images/jv3.png);
}

.jvi4 {
	background-image: url(../images/jv4.png);
}

.jvi5 {
	background-image: url(../images/jv5.png);
}

.jvi6 {
	background-image: url(../images/jv6.png);
}

.jvi7 {
	background-image: url(../images/jv7.png);
}

.jvi8 {
	background-image: url(../images/jv8.png);
}

.jvi9 {
	background-image: url(../images/jv9.png);
}

.jvi10 {
	background-image: url(../images/jv10.png);
}

.jvi11 {
	background-image: url(../images/jv11.png);
}

.jvi12 {
	background-image: url(../images/jv12.png);
}

.jvi13 {
	background-image: url(../images/jv13.png);
}

.jvi14 {
	background-image: url(../images/jv14.png);
}

.jpi1 {
	background-image: url(../images/jp1.png);
}

.jpi2 {
	background-image: url(../images/jp2.png);
}

.jpi3 {
	background-image: url(../images/jp3.png);
}

.jpi4 {
	background-image: url(../images/jp4.png);
}

.jpi5 {
	background-image: url(../images/jp5.png);
}

.jpi6 {
	background-image: url(../images/jp6.png);
}

.jpi7 {
	background-image: url(../images/jp7.png);
}

.jpi8 {
	background-image: url(../images/jp8.png);
}

.jpi9 {
	background-image: url(../images/jp9.png);
}

.jpi10 {
	background-image: url(../images/jp10.png);
}

.jpi11 {
	background-image: url(../images/jp11.png);
}

.jpi12 {
	background-image: url(../images/jp12.png);
}

.jpi13 {
	background-image: url(../images/jp13.png);
}

.jpi14 {
	background-image: url(../images/jp14.png);
}

.clearer {
	clear: both;
	width: 1px;
	height: 1px;
}

a.modalCloseImg {
	background: url(../images/x.png) no-repeat;
	width:25px;
	height:29px;
	display:inline;
	z-index:3200;
	position:absolute;
	top:-15px;
	right:-18px;
	cursor:pointer;
	text-decoration: none;
}

#simplemodal-container {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#guidelines .inner {
	padding: 10px;
	font-size: 20px;
}

#guidelines .bullets em, #guidelines ul {
	font-size: 18px;
}

#form-slide .content .title {
	text-align: center;
	width: 100%;
	margin-bottom: 20px;
}

#form-slide .buttons input {
	width: 200px;
}

#form-slide .inner {
	text-align: center;
}

#form-slide .form {
	width: 550px;
	margin: auto;
	text-align: left;
	margin-bottom: 50px;
}

#form-slide .form .field {
	margin-bottom: 15px;
}

#form-slide .form .field .label {
	font-size: 20px;
	margin-bottom: 5px;
}

#form-slide .form .field .note {
	margin-bottom: 5px;
	font-size: 14px;
}

#form-slide .form .field input {
	font-size: 20px;
	border: 1px solid #CCCCCC;
	color: #777777;
	height: 25px;
	padding: 5px;
	width: 500px;
}

#form-slide .form .field #age {
	width: 50px;
}

#form-slide .desc {
	text-align: left;
	font-size: 23px;
	margin-bottom: 20px;
}

#required {
	font-size: 20px;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
	color: #990000;
	padding: 5px;
}

#application #final .content {
	font-size: 23px;
}

/****************************************************/

@media screen and (max-width: 800px) {
	#application #welcome .title {
		font-size: 40px;
	}

	#application {	
		width: 100%;
	}

	#application #welcome, #application #instructions {
		width: 100%;
	}

	.ddscreen .dicol {
		width: 23%;
	}
	
	.ddscreen .listcol {
		width: 50%;
	}

	.ddscreen .buttons input {
		width: 180px;
	}

	.ddscreen .ddscreen-inner .title {
		font-size: 23px;
	}
}

@media screen and (max-width: 480px) {
	#application {	
		width: 100%;
	}

	#application #welcome, #application #instructions {
		width: 100%;
	}

	#application #welcome .title {
		font-size: 30px;
	}

	.content .inner {
		font-size: 20px;
		padding-top: 4px;
	}

	.content .inner .bullets li p em {
		font-size: 15px;
		padding-top: 0px;
		padding-bottom: 0px;
	}

	.content .inner .bullets {
		font-size: 15px;
	}

	.content .inner .bullets li { 
		margin-left: 20px;
	}

	.nocenter .tableview {
		padding-top: 0px !important
	}

	.ddscreen-inner {
		padding-top: 5px !important;
	}

	.ddscreen .ddscreen-inner .title {
		font-size: 12px;
		text-align: left;
		margin-left: 5px;
	}

	.ddscreen .nodrag {
		display: none;
	}

	.ddscreen .listcol {
		width: 90%;
		margin-left: 5px;
	}

	.ddscreen .listcol .sel-items {
		font-size: 10px;
	}

	.ddscreen .buttons input {
		height: 30px;
		width: 90%;
		font-size: 11px;
		margin-bottom: 5px;
	}

	.left-button-wrap, .right-button-wrap {
		float: none;
		margin-left: 0px;
		margin-right: 0px;
	}

	.ddscreen .listcol .drag-target {
		padding-bottom: 0px;
	}

	.ddscreen .dicol {
		float: none;
		width: 100%;
	}

	.ddscreen .ddscreen-inner .drag-item {
		height: 20px;
		width: 94%;
		float: none !important;
		background-image: none !important;
		border: 1px solid #CCCCCC;
		background-color: #EEEEEE;
		text-indent: 0px !important;
		line-height: 20px;
		text-align: left;
		padding-left: 5px;
		overflow: hidden;
	}

	.ddscreen .ddscreen-inner .left, .ddscreen .ddscreen-inner .right {
		text-align: center;
	}

	.small-instructions {
		font-size: 14px !important;
	}

	#form-slide .form {
		width: auto !important;
	}

	#form-slide .form .field .label {
		font-size: 15px !important;
	}

	#form-slide .form .field .note {
		font-size: 12px !important;
	}

	#form-slide .form .field input {
		font-size: 18px;
		border: 1px solid #CCCCCC;
		color: #777777;
		height: 18x;
		padding: 5px;
		width: 95%;
	}

	.sbHolder, .sbOptions {
		width: 100% !important;
	}

	#form-slide .content .title {
	    font-size: 16px !important;
	    text-align: left !important;
	}

	#form-slide .buttons input {
		height: 30px;
		width: 90%;
		font-size: 11px;
		margin-bottom: 5px;
	}

	#form-slide .desc {
		font-size: 16px !important;
	}


	#application #final .content {
		font-size: 20px !important;
	}
}
