body{
	margin:0;
	font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
	line-height:18px;
	color:#3d3c3c;
}

img { border:none;}

a{
	color:#c00;
	text-decoration:underline;
}
a:hover{
	text-decoration:none;
}

input:focus, select:focus, textarea:focus { 
    background-color: #fcfcea;
}

.bold {font-weight: bold;}

.container {
	width:100%;
	max-width:909px;
	margin:0 auto;
	border:1px solid #d6d6d6;
	position:relative;
}

.cover {
	position:absolute;
	top:0;
	right:0;
	z-index:100;
}

.cover_img {
	width:290px;
	height:auto;
}

h1 {   
	position:absolute;
	text-indent:-9999px;
}

#nav{
	width:100%; 
	position:relative;
	left:0;
	top:0;
	margin:0;
	padding:0;
	list-style:none; 
	height:23px;
	background-color:#00324d;	
}

#nav li{
	float:left;
	position:relative; 
	padding:0 30px 0 15px;
	font-size:10px;
	line-height:23px;
	z-index:1000;
}

#nav li a{ 
	color:#fff; 
	font-weight:bold;
}

.logo {
	width:90%;
	display:block;
	max-width:324px;
	margin:10px 0 0 10px;
	height:auto;
}

#steps{
	display:block;
	margin:16px 0 0 73px;
}

.step_hl {
	margin:0 0 5px 0;
	font-size:14px;
	font-weight: bold;
	display:block;
}

.step{
	margin:0;
	padding:0;
	list-style:none; 
	overflow: hidden
}

.step li{
	float:left;
	text-align:center;
	line-height:19px;
	font-size:12px;
	padding:0 10px 0 0;
}

.step li span{
	float:left;
	background: url(bullet.gif) no-repeat 0 0;
	width:19px;
	color:#fff;
	height:19px;
	line-height:19px;
}

.main{
	width:100%;
	max-width:570px;
	margin-top:20px; 
	padding:0 0 50px 13px; 
	border-top: 1px solid #d6d6d6;
	border-right: 1px solid #d6d6d6;
}

.sidebar { 
	width: 260px;
	position:absolute;
	top:460px;
	right:20px;
	font-size:11px;
	line-height:15px;
}

.sidebar p {
	margin:0;
}

.sidebar a {
	color:#3d3c3c;
	text-decoration:none;
}

.archives {
	padding-bottom:20px;
}

.archives_hl {
    padding:0 0 3px 0;
    text-transform: uppercase;
    color: #003399;
    font-size: 15px;
    line-height:18px;
    font-family: "Times New Roman", Times, serif;
    font-weight: normal;
}

.help {
	border: solid #d6d6d6; 
	border-width: 1px 0;
	margin: 21px 0 0;
	padding: 31px 0 45px 58px;
	background: url(help.gif) no-repeat 6px 27px;
}

#giftList {
	margin:20px 0 0 0;
	padding:20px; 
}

input.button_delete {
	width:247px;
	height:22px;
	margin:10px 0 0 0;
	padding:0 0 2px 0;
	font-size:12px;
	line-height:12px;
	background-color:#ececec;
	border:1px solid #cecece;
	float:none;
}

.errors { 
	padding:20px;
	display:block;
	clear:both;
	font-size:12px;
    color:#f00; 
}

.section_number { 
	margin:20px 13px 0 0; 
	border-top:1px solid #d6d6d6;
}

.number{
	float:left; 
	width:49px;
	height:50px; 
	margin:0 10px 0 0;
	clear:both;
}

.number_hl{
	padding:27px 0 8px 0;
	display:block;
	font-size:15px;
	font-weight:bold;
	color:#c00;  
}

.row {
	clear:both;
	padding:0 0 8px 63px;
	overflow:hidden;
}

.offers { 
	padding:12px 0 20px 63px;
}

.row.offers label {
	width:100%;
}

label{
	padding:7px 0 0 0; 
	margin:0;
	float:left;
	width:20%;
}

label.twoLine {
	padding:0; 
	float:left;
	width:20%;
}

.small {
	font-size:12px;
}

.example{
	display:block;
	clear:both;
	font-size:11px;  
	padding:3px 0 0 20%;
}



.sm {width:32%; float:left; margin-right:2%;}

.form-select-dropdown {position:relative;}

.form-select-dropdown:after   {
    content: " ";
    height: 0;
    width: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #000000;
    position: absolute;
    right: 80px;
    top: 15px;
    pointer-events: none;
}

.form-select-dropdown.sm:after   {
    content: " ";
    height: 0;
    width: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #000000;
    position: absolute;
    right: 10px;
    top: 15px;
    pointer-events: none;
}

.form-input, .form-select {
    width: 66%;
    background-color: #ffffff;
    display: block;
    outline: 0;
    border: 1px solid #cccccc; 
    font-size: 14px;
    line-height: 16px; 
    padding: 10px 10px;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0;
    -webkit-transition: border .2s,background-color .2s;
    transition: border .2s,background-color .2s;
    margin: 0;
} 

.expire_date {
    width: 100%;
    background-color: #ffffff;
    display: inline-block;
    outline: 0;
    border: 1px solid #cccccc; 
    font-size: 14px;
    line-height: 16px; 
    padding: 10px 10px;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0;
    -webkit-transition: border .2s,background-color .2s;
    transition: border .2s,background-color .2s;
    margin: 0 10px 0 0;
}

.card-message-input {
    width: 66%;
    background-color: #ffffff;
    display: inline-block;
    outline: 0;
    border: 1px solid #cccccc;
    font-size: 14px;
    line-height: 16px; 
    box-sizing: border-box; 
    border-radius: 0; 
    margin: 0;
}

 .inline_error{ 
 	display:block;
	clear:both;
	font-size:12px;
	color:#ff0000; 
	padding:3px 0 0 20%;
}

.add_recipients_button {
	width:100%;
	max-width: 247px;
	height:auto;
	padding: 5px 1px;
	border: 1px solid #cecece;
	background-color:#ececec;
}

.submit_section p {
	font-size:12px;
	line-height:15px;
}

.submit {
	width:100%;
	max-width:271px;
	height:auto;
}

.footer {
	width:100%;  
	background-color:#00324d;
	font-size: 12px;
	line-height: 16px;
	color:#ffffff;
	text-align: center
}

.footer p {
	padding:20px;
	margin:0;
}

.footer a {
	color:#ffffff;
	text-decoration:underline;
}

/*Confirmation page syles*/

.conf_hl {
	font-size:18px;
	font-weight:bold;
}

.conf_info {
	display:block;
	padding:20px 0 20px 0;
	font-size:16px;
	font-weight:bold;
}

.recipient_number {font-weight:bold;display:block;}


@media screen and (max-width: 909px) {

	.container { 
		border: none; 
	}

}

@media screen and (max-width: 870px) {

	.step{
		margin:0;
		padding:5px 0 0 0;
		list-style:none; 
	}

	.step li{
		float:none;
		text-align:left;
		line-height:22px;
		font-size:12px;
		padding:0 10px 0 0;
	}
	.step li span {
		float:left;
		background: url(bullet.gif) no-repeat 0 0;
		text-align:center;
		width:19px;
		color:#fff;
		height:19px;
		line-height:19px;
	}

	.cover_img {
		width:200px;
	}

	.sidebar {
		width:150px;
		top:340px;
	}
}

@media screen and (max-width: 790px) {

	.main{
		width:94%;
		max-width:909px;
		margin:20px auto 0 auto; 
		padding:0 0 50px 0; 
		border: none;
	}

	.sidebar {
	    width: 96%; 
	    position: relative;
	    top: 0;
	    right: 0;
	    padding:2%;
	    font-size: 11px;
	    line-height: 15px;
	    border: 1px solid #ececec;
	}

	.archives {
		padding-bottom:0;
		}

	.help {
		border: none; 
		border-width: 1px 0;
		margin: 0 0 0;
		padding: 10px 0 0 0;
		background: none;
	}

	.form-select-dropdown:after   { 
    	right: 90px; 
	}

	
}

@media screen and (max-width: 550px) {

	.cover {
		display:none;
	}

	.logo {
		margin:10px auto 0 auto;
	}

	#nav{ 
		height:auto; 
		padding:5px 0;
	}

	#nav li{
		float:none; 
		padding:0 20px;
		font-size:10px;
		line-height:16px;
		text-align:center;
	}

	#steps {
	    display: block;
	    margin: 16px auto 0 auto;
	    max-width: 240px;
	    width: 90%;
	    padding: 0;
	}

	.number_hl{
		padding:10px 0 8px 0; 
		font-size:18px;
		line-height:22px;
	}

	.row { 
		padding:0 0 8px 0; 
	}

	label{
		display:block;
		padding:7px 0 2px 0; 
		margin:0;
		font-size:16px;
		float:none;
		width:100%;
	}

	label.twoLine {
		display:block;
		padding:7px 0 2px 0; 
		margin:0;
		font-size:16px;
		float:none;
		width:100%;
	}

	.small {
		font-size:12px;
	}

	 .example{  
		padding:3px 0 0 0%;
	}

	.sm {width:46%; float:left; margin-right:2%;}

	.form-input, .form-select {
	    width: 100%; 
	    padding: 12px 10px; 
	    font-size:16px;
	}


	.form-select-dropdown:after { 
    	right: 20px; 
    	top:18px;
	}

	.expire_date {
	    width: 100%; 
	    font-size:16px;
	    padding: 12px 10px; 
	    margin: 0 0 10px 0;
	}

	.card-message-input {
	    width: 100%;
	    background-color: #ffffff;
	    display: inline-block;
	    outline: 0;
	    border: 1px solid #cccccc;
	    font-size:16px;
	    line-height: 20px; 
	    box-sizing: border-box; 
	    border-radius: 0; 
	    margin: 0;
	}

	 .inline_error{ 
	 	display:block;
		clear:both;
		font-size:12px;
		color:#ff0000; 
		padding:3px 0 0 0%;
	}
 
}
 


