/* global */

table {
	box-sizing:none!important;
}

#ipostcard_form {
	position: relative;
}

#ipostcard_form table {
	margin: 0 auto;
}

#ipostcardBlock form {
	margin: 0;
	padding: 0;
}

#ipostcardBlock img {
	border: 0;
}


#ipostcardBlock {
	width: 710px;
	margin: 0 auto;
	padding-bottom: 15px;
}


/* row 1 */

#vps-row1 {
	width: 710px;
	overflow: hidden;
	margin: 0 0 15px 0;
}

#vps-row1Left {
	width: 47%;
	float: left;
	margin: 0;
	padding: 0;
	overflow: hidden;
}	

#vps-row1Right {
	width: 47%;
	float: right;
	margin: 0 0 0 4%;
	padding: 0;
	overflow: hidden;
}	

#noFour {
	width: 100%;
	height: 30px;
	background: url(../../images/tell-a-friend/dot.png) no-repeat 0px 0px;
	position: relative;
	padding-bottom: 5px;
	float: left;
	overflow: hidden;
	
	
}

#noFourNumber {
	width: 23px;
	height: 20px;
	font-size: 16px;
	line-height: 16px;
	color: #FFF;
	float: left;
	text-align: center;
	padding-top: 3px;
}

#noFour h2 {
	color: #2a363d;
  font-size: 1em;
	font-weight: 500;
  line-height: 18px;
	width: 90%;
	height: 23px;
	float: right;
	margin: 0;
	padding: 5px 0 0 0;
	text-transform:none;
}

#noFive {
	width: 100%;
	height: 30px;
	background: url(../../images/tell-a-friend/dot.png) no-repeat 0px 0px;
	position: relative;
	padding-bottom: 5px;
	float: left;
	overflow: hidden;
}

#noFiveNumber {
	width: 23px;
	height: 25px;
	font-size: 16px;
	line-height: 16px;
	color: #FFF;
	float: left;
	text-align: center;
	padding-top: 3px;
}

#noFive h2 {
	color: #2a363d;
  font-size: 1em;
	font-weight: 500;
  line-height: 18px;
	width: 90%;
	height: 23px;
	float: right;
	margin: 0;
	padding: 5px 0 0 0;
	text-transform:none;
}

 #vps-row1 label {
	width: 100%;
	display: block;
	margin: 0 0 4px 0;
	padding: 0;
	font-size: 13px;
	color: #2a363d;
}

.normalField {
	width: 95% !important;
	padding: 2%;
	border: solid 1px #999;
	margin: 0 0 10px 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #000;
}


/* row 2 */

#photoBlock {
	width: 650px;
	height: 77px;
	margin-bottom: 15px;
	position: relative;
}

#noOne {
	width: 117px;
	height: 50px;
	background: url(../../images/tell-a-friend/dot.png) no-repeat 0px 0px;
	position: relative;
	padding-bottom: 5px;
	float: left;
}

#noOneNumber {
	width: 23px;
	height: 20px;
	font-size: 16px;
	line-height: 16px;
	color: #FFF;
	float: left;
	text-align: center;
	padding-top: 3px;
}

/*h2 {
	font-family: "proxima-nova",sans-serif;
}*/

#noOne h2 {
	color: #2a363d;
  font-size: 1em;
	font-weight: 500;
  line-height: 18px;
	width: 80px;
	float: right;
	margin: 0;
	padding: 0;
	text-transform:none;
}

#photosHolder {
	width: 530px;
	float: right;
	position: relative;
}

/*
#theThumbnailsHolder {
	width: 468px;
	height: 77px;
	position: absolute;
	left: 26px;
	top: 0px;
	overflow: hidden;
}

#theThumbnails {
	width: 1200px;
	height: 77px;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 100;
}

#theThumbnails img {
	border: solid 1px #999;
	color: #000;
	margin-right: 20px;
}

#theThumbnails ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#theThumbnails li {
	margin: 0;
	padding: 0;
	list-style: none;
	display: inline;
	float: left;
}

#leftArrow {
	width: 36px;
	height: 36px;
	position: absolute;
	left: -11px;
	top: 20px;
	z-index: 101;
	display: none;
}

#rightArrow {
	width: 36px;
	height: 36px;
	position: absolute;
	left: 495px;
	top: 20px;
	z-index: 102;
}

*/

#theThumbnails {
	overflow: hidden;
	width: 100%;
	z-index: 100;
}

#theThumbnails ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#theThumbnails li {
	margin: 0 20px 20px 0;
	padding: 0;
	list-style: none;
	display: inline;
	float: left;
}

#theThumbnails img {
	border: solid 2px #FFF;
	color: #000;
	
}


/* row 3 */

#mobileBodyBlock {
	display: none;
}

#subjectBlock {
	width: 100%;
	height: 70px;
	position: relative;
	overflow: hidden;
}

#noTwo {
	width: 20%;
	background: url(../../images/tell-a-friend/dot.png) no-repeat 0px 0px;
	position: relative;
	padding-bottom: 5px;
	float: left;
}

#noTwoNumber {
	width: 23px;
	height: 20px;
	font-size: 16px;
	line-height: 16px;
	color: #FFF;
	float: left;
	text-align: center;
	padding-top: 3px;
}

#noTwo h2 {
	color: #2a363d;
  font-size: 1em;
	font-weight: 500;
  line-height: 1em;
	line-height: 18px;
	width: 110px;
	float: right;
	margin: 0;
	padding: 0;
	text-transform:none;
}

#theSubject {
	width: 80%;
	position: absolute;
	left: 151px;
	top: 0;
}

.subjectField {
	width: 94%;
	padding: 2%;
	border: solid 1px #999;
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	background-color: #FFFFFF;
	color:#000;
}


/* row 4 */


#ipostcardHolder {
	width: 600px;
	height: 400px;
	margin: 0 auto;
	padding: 0;
	clear: both;
	position: relative;
}

#noThree {
	width: 23px;
	height: 25px;
	font-size: 16px;
	line-height: 16px;
	text-align: center;
	padding-top: 3px;
	background: url(../../images/tell-a-friend/dot.png) no-repeat 0px 0px;
	position: absolute;
	left: 308px;
	top: 26px;
	z-index: 103;
	color: #FFF;
}

#successStuff {
	width: 310px;
	text-align: center;
	font-size: 15px;
	color: #000;
	background-color: #30f41c;
	border: solid 2px #fff;
	line-height: 18px;
	padding: 10px 15px;
	display: none;
	position: absolute;
	z-index:200;
	left: 250px;
	top: 550px;
}

.typeField {
	background:none;
	color: #000;
	font-family: Arial,Helvetica,sans-serif;
	font-size: 12px;
	height: 225px;
	margin: 0;
	padding: 4px;
	resize: none;
	width: 260px;
}

.typeFieldMobile {
	width: 100%;
	height: 199px;
	padding: 4px;
	border: solid 1px #999;
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #FFF;
	color:#000;
	resize: none;
}

/* buttons */

#addMoreButton {
	padding-top: 0px;
}

#resetInfoButton {
	padding-top: 10px;
}

#addMoreButton a:link, #addMoreButton a:visited, #resetInfoButton a:link, #resetInfoButton a:visited {
	display: block;
	padding: 5px;
	font-size: 13px;
	text-decoration: none;
	margin: 0 auto;
	font-weight: bold;
	text-align: center;
	/* small button colors */
	color: #FFF;
	background-color: #999999;
}

#addMoreButton a:link, #addMoreButton a:visited {
	width: 150px;
}

#resetInfoButton a:link, #resetInfoButton a:visited {
	width: 100px;
}

#addMoreButton a:hover, #addMoreButton a:active, #resetInfoButton a:hover, #resetInfoButton a:active {
	background-color: #868686;
}

#captcha {
	width: 40%;
	float: left;
	margin: 2em 5%;
	position: relative;
}

#recaptcha_challenge_image{
	margin: 0 !important;
	width: 100% !important;
	}
	#recaptcha_response_field
	{
	margin: 0 !important;
	width: 100% !important;
	}
	.recaptchatable #recaptcha_image {
	margin: 0 !important;
	width: 100% !important;
	}
	.recaptchatable .recaptcha_r1_c1, 
	.recaptchatable .recaptcha_r3_c1, 
	.recaptchatable .recaptcha_r3_c2, 
	.recaptchatable .recaptcha_r7_c1, 
	.recaptchatable .recaptcha_r8_c1, 
	.recaptchatable .recaptcha_r3_c3, 
	.recaptchatable .recaptcha_r2_c1, 
	.recaptchatable .recaptcha_r4_c1, 
	.recaptchatable .recaptcha_r4_c2, 
	.recaptchatable .recaptcha_r4_c4, 
	.recaptchatable .recaptcha_image_cell {

	margin: 0 !important;
	width: 100% !important;
	background: none !important;
	}

#noSixNumber {
	background: url(../../images/tell-a-friend/dot.png) no-repeat scroll 0 0 rgba(0, 0, 0, 0);
	color: #fff;
	float: right;
	font-size: 17px;
	height: 25px;
	left: -35px;
	line-height: 17px;
	padding-top: 3px;
	position: absolute;
	text-align: center;
	top: 3px;
	width: 23px;
}


#submitButton {
	float: right;
	width: 40%;
	position: relative;
	margin: 2em 0;
}

#submit {
	padding: 0.5em 1em;
	text-transform: uppercase;
	color: #FFF;
	background-color: #7d614a;
	float: right;
	border: none;
	font-weight: 300;
	transition: all 0.5s ease 0s;
}

#submit:hover, #submit:active {
	background-color: #27628c;
}

#noSevenNumber {
	background: url(../../images/tell-a-friend/dot.png) no-repeat scroll 0px 0px transparent;
	color: #FFF;
	line-height: 17px;
	padding-top: 3px;
	text-align: center;
	top: 3px;
	width: 23px;
	position: absolute;
	font-size: 17px;
	height: 25px;
	left: 40%;
}

#bodyText {
	padding: 15px;
	line-height: 1.3em;
}

#ipostcardLoader {
	position: absolute;
	left: -75px;
	bottom: 5px;
	display: none;
}




.tellafriend {
	padding: 120px 0 0 0;
}
.tcard {
	height: 20px;	
}
.bcard {
	height: 155px;
}
.mcard {
	height: 226px;
}






@media only screen and (max-width:1000px) {
#submitButton {
    margin: 0 8% 0 0;
}

#captcha {
	float: left;
	margin: 0 0 0 7%;
	position: relative;
	width: 40%;
}

.tellafriend {
	padding: 110px 0 50px 0;
}

}
@media only screen and (max-width:800px) {
	.tellafriend {
		padding: 0;
	}
}

@media only screen and (max-width:767px) {
	
	#vps-row1 {
			margin: 0 0 15px;
			padding: 0;
			width: 100%;
	}
	
	#vps-row1Left, #vps-row1Right {
		width: 100%
	}
	
	#vps-row1Left {
		margin-bottom: 1.5em;
	}
	
	#ipostcardBlock {
    width: 100%;
	}
	
	#noFour h2, #noFive h2 {
    width: 90%;
		text-align: left;
	}
	
	#noSevenNumber {
    left: 0;
	}
	
	#theSubmitButton {
		width: 85%;
		float:right;
	}
	
	#ipostcardBlock label, input {
    width: 100% !important;
	}
	
	#vps-row1 label {
			width: 100%;
	}
	
	.normalField {
		width: 95% !important;
	}
	
	#noOne, #noTwo {
    width: 100%;
		overflow: hidden;
	}
	
	#noOne h2, #noTwo h2 {
    width: 90%;
		text-align: left;
		padding-top: 3px;
		margin: 0;
	}
	
	#photoBlock {
    width: 100%;
}
	
	#photosHolder {
    width: 100%;
	}
	
	#theThumbnails {
		overflow: hidden;
		width: 100%;
		z-index: 100;
		margin: 0 0 0 0;
	}
	
	#theThumbnails ul {
		width: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	#theThumbnails li {
		width: 40%;
		margin: 0 5% 20px 5%;
		padding: 0;
		list-style: none;
		display: inline;
		float: left;
	}
	
	#theThumbnails li.even {
		margin: 0 5% 20px 0;
	}
	
	#theThumbnails img {
		width: 100%;
		height: auto;
	}
	
	#subjectBlock {
    width: 100%;
		margin-bottom: 2em;
		height: 75px;
}
	
	#theSubject {
		height: auto;
		position: relative !important;
		left: 0;
		top: 0;
    width: 95% !important;
		margin-bottom: 2em;
}

#mobileBodyBlock  #theSubject {
    width: 97% !important;
} 

#ipostcardBlock label, input {
    width: 100% !important;
}

.subjectField {
    width: 90%;
}

#ipostcardHolder {
	display: none;
}

#mobileBodyBlock {
	display: block;
}

#submitButton {
    margin: 0 10px 0 0;
}

#captcha {
	width: 50%;
	float: left;
	margin: 0 0 0 30px;
}

form {
	position: relative;
}

#successStuff {
    left: 3%;
		width: 80%;
		height: 45px;
    top: 90%;
}




}

@media only screen and (max-width:550px) {

#captcha {
	width: 100%;
	margin: 2em 0 2em 0;
}

#noSixNumber {
	left: 0px;
	padding-top: 3px;
	margin: 0;
	top: -30px;
	width: 23px;
}

#submitButton {
	width: 100%;
}

#noSevenNumber {
    left: 10px;
}

#theSubmitButton {
		width: 85%;
		float:right;
	}

}