<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
	
	
	body {
		font-family: 'PT Sans', sans-serif;
		color: #253c4a;
	}
	textarea {
		font-family: 'PT Sans', sans-serif;
		color: #253c4a;
	}
	#row_1 {
		height: 90px;
		background: #0d6ab9 url('../img/row_1_bg.jpg') repeat-x 0 0;
	}
	#row_1 .container {
		position: relative;
	}
	a#unhcr_logo {
		position: absolute;
		top: 0px;
		left: 10px;
		z-index: 9;
	}
	.container {
		max-width: 980px;
	}
	#row_1 h1 {
		position: absolute;
		top: 2px;
		left: 142px;
		color: #fff;
		font-size: 1.5em;
		font-weight: bold;
		text-transform: uppercase;
	}

	#row_1 h2 {
		position: absolute;
		top: 28px;
		left: 142px;
		color: #fff;
		font-size: 1.1em;
		font-weight: normal;
	}
	#row_1_buttons {
		padding-top: 35px;
	}

	.pink-button {
		font-family: 'PT Sans', sans-serif;
		color: #fff;
		font-size: 1.0em;
		font-weight: bold;
		padding: 8px 16px;
		background-color: #ff2aa8;
		*background-color: #d9168a;
		background-image: -moz-linear-gradient(top, #ff2aa8, #d9168a);
		background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ff2aa8), to(#d9168a));
		background-image: -webkit-linear-gradient(top, #ff2aa8, #d9168a);
		background-image: -o-linear-gradient(top, #ff2aa8, #d9168a);
		background-image: linear-gradient(to bottom, #ff2aa8, #d9168a);
		background-repeat: repeat-x;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff2aa8', endColorstr='#ffd9168a', GradientType=0);
		filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
		*zoom: 1;
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-bottom-color: rgba(0, 0, 0, 0.25);
		text-decoration: none;
		-webkit-border-radius: 4px;
		   -moz-border-radius: 4px;
		        border-radius: 4px;
	}
	.pink-button:hover,
	  .pink-button:focus,
	  .pink-button:active {
		color: #ffffff;
		background-image: none;
		background-color: #d9168a;
		text-decoration: none;
	}
	.blue-button {
		font-family: 'PT Sans', sans-serif;
		color: #fff;
		font-size: 1.0em;
		font-weight: bold;
		padding: 8px 16px;
		background-color: #009fe3;
		*background-color: #007ac3;
		background-image: -moz-linear-gradient(top, #009fe3, #007ac3);
		background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#009fe3), to(#007ac3));
		background-image: -webkit-linear-gradient(top, #009fe3, #007ac3);
		background-image: -o-linear-gradient(top, #009fe3, #007ac3);
		background-image: linear-gradient(to bottom, #009fe3, #007ac3);
		background-repeat: repeat-x;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff009fe3', endColorstr='#ff007ac3', GradientType=0);
		filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
		*zoom: 1;
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-bottom-color: rgba(0, 0, 0, 0.25);
		text-decoration: none;
		-webkit-border-radius: 4px;
		   -moz-border-radius: 4px;
		        border-radius: 4px;
	}
	.blue-button:hover,
	  .blue-button:focus,
	  .blue-button:active {
		color: #ffffff;
		background-image: none;
		background-color: #007ac3;
		text-decoration: none;
	}
	.blue-button-pt {
		font-family: 'PT Sans', sans-serif;
		color: #fff;
		font-size: 1.0em;
		font-weight: bold;
		padding: 8px 16px;
		background-color: #009fe3;
		*background-color: #007ac3;
		background-image: -moz-linear-gradient(top, #009fe3, #007ac3);
		background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#009fe3), to(#007ac3));
		background-image: -webkit-linear-gradient(top, #009fe3, #007ac3);
		background-image: -o-linear-gradient(top, #009fe3, #007ac3);
		background-image: linear-gradient(to bottom, #009fe3, #007ac3);
		background-repeat: repeat-x;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff009fe3', endColorstr='#ff007ac3', GradientType=0);
		filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
		*zoom: 1;
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-bottom-color: rgba(0, 0, 0, 0.25);
		text-decoration: none;
		-webkit-border-radius: 4px;
		   -moz-border-radius: 4px;
		        border-radius: 4px;
	}
	.blue-button-pt:hover,
	  .blue-button-pt:focus,
	  .blue-button-pt:active {
		color: #ffffff;
		background-image: none;
		background-color: #007ac3;
		text-decoration: none;
	}
	.pink-button span,
	  .blue-button span {
		display: inline-block;
		width: 26px;
		color: #007ac3;
		font-size: 1.1em;
		line-height: 0.8em;
		background-color: #fff;
		border-radius: 19px;
		text-align: center;
		padding-bottom: 2px;
	}
	.pink-button span {
		color: #d9168a;
	}
	#row_1_buttons .dropdown-menu {
		top: 100%;
		left: 0;
		margin-top: 15px;
		min-width: 68px;
	}
	#row_1_buttons .dropdown-menu li {
		text-align: center;
	}
	#row_1_buttons .dropdown-menu a {
		width: 66px;
		min-width: auto;
		max-width: auto;
		padding: 0px;
		margin: 0 auto;
	}


	/* --- CAROUSEL --- */
	.carousel-caption {
		background-color: transparent;
	}
	.carousel-caption h3 {
		color: #fff;
		xfont-size: 2em;
		font-weight: bold;
		margin: 0 auto;
		text-align: center;
	}
	#carousel {
		position: relative;
		line-height: 1;
		margin-bottom: 0;
	}
	#carousel h3 {
		color: #fff;
		xfont-size: 2.2em;
		font-weight: bold;
		-webkit-text-shadow: 2px 2px 2px #000;
		   -moz-text-shadow: 2px 2px 2px #000;
		        text-shadow: 2px 2px 2px #000;
	}


	/* --- BLUE BAR BELOW CAROUSEL --- */
	#blue_bar {
		position: relative;
		height: 150px;
		background: url(../img/blue_bar.jpg) repeat-x 0 0;
		text-align: center;
	}
	#blue_bar h4 {
		margin-top: 0;
		padding-top: 50px;
		color: #fff;
		font-size: 2.0em; /*2.3em*/
		font-weight: bold;
	}
	#blue_bar .blue_arrow {
		position: absolute;
		top: 130px;
		left: 454px;
		height: 18px;
		width: 32px;
		background: url('../img/blue_arrow.jpg') no-repeat 0 0;
	}

	/* CALL TO ACTION BOX
	------------------------------------------ */
	#action {
		position: relative;
		background: transparent url('../img/box_bg_fade.jpg') repeat-x 0 0;
		min-height: 740px;
	}
	#action .carousel .item {
		min-height: 720px;
	}
	#action .carousel-control {
		position: absolute;
		top: 401px;
		left: 332px;
		color: #0062b7;
		background-color: transparent;
		background-image: none;
		border: 0px;
		border-radius: 0px;
		z-index: 3;
	}
	#action .carousel-control.right {
		left: 382px;
	}
	#action .poloroid {
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 1;
	}	
	#action .poloroid_photo {
		position: absolute;
		top: 35px;
		left: 42px;
		width: 378px;
		height: 338px;
		z-index: 2;
	}
	#action #poloroid_cap {
		position: absolute;
		top: 382px;
		left: 47px;
		width: 276px;
		height: 40px;
		font-weight: bold;
		font-size: 1.5em;
		line-height: 42px;
		z-index: 3;
		border-right: 1px solid #ccc;
	}
	#action p {
		font-size: 1.3em;
		padding: 0 30px;
	}
	#action p.poloroid_pad {
		padding-top: 464px;
	}
	#action .blue-button {
		display: block;
		text-align: center;
		font-size: 1.5em;
	}

	/* PSFR
	------------------------------------------ */
	#PSFR {
		background: transparent url('../img/box_bg_fade.jpg') repeat-x 0 0;
		min-height: 740px;
	}
	#PSFR p {
		font-size: 1.3em;
		line-height: 1.14em;
		padding: 0 30px;
	}
	#PSFR #family_circle {
		margin: 20px auto;
	}
	#PSFR .pink-button,
	  #PSFR .blue-button {
		display: block;
		text-align: center;
		font-size: 1.5em;
	}


	/* GREY ROW CONTENT AREA
	------------------------------------------ */
	#grey_row {
		background-image: url(data:image/gif;base64,R0lGODlhEgAOAKIAAPT19+Pj4/X19eLj5f7+/uTk5OPk5v///yH5BAAAAAAALAAAAAASAA4AAANWWGckp8q849R0YWZInwLHMCmilAHEAUrMt7wfKokFgcoPIS16SPWgko5B7MxUkx2rE+FVFopNR/q0cBTPp8lRuiAlTRsP/A0BJbjmoHc6+ILJl8hhSAAAOw==);
		border-top: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
		padding: 2em 0;
		margin: 2em 0;
	}

	#grey_row h4 {
		color: #253c4a;
		text-align: center;
		font-size: 2.3em;
		padding-bottom: 0.4em;
	}
	#grey_row p {
		text-align: center;
		font-size: 1.4em;
	}
	#story_bubbles {
		padding-top: 10px;
	}
	#story_bubbles .span3 {
		width: 209px;
	}
	#story_bubbles [class*="span"] {
		margin-left: 26px;
	}
	#story_bubbles a {
		display: block;
		text-align: center;
	}

	#story_bubbles a img {
		border: 7px solid #fff;
		margin-bottom: 10px;
		-webkit-box-shadow: 0px 0px 4px #666;
		   -moz-box-shadow: 0px 0px 4px #666;
		        box-shadow: 0px 0px 4px #666;
	}


	/* SOCIAL SHARE ROW
	------------------------------------------ */
	#social_row h4 {
		color: #253c4a;
		text-align: center;
		font-size: 2.3em;
		padding-bottom: 0.4em;
	}
	#social_row p {
		font-size: 1.4em;
		text-align: center;
	}
	ul#social_squares {
		width: 280px;
		margin: 2em auto 140px;
		list-style: none;
	}
	ul#social_squares li {
		float: left;
	}
	ul#social_squares li a,
	  #row_1_buttons li a {
		display: block;
		width: 66px;
		min-width: auto;
		height: 66px;
		background: #fff url(../img/social_icons.gif) 0 0 no-repeat;
	}
	ul#social_squares li a span,
	  #row_1_buttons li a span {
		display: none;
	}
	ul#social_squares #soc_facebook,
	  #row_1_buttons #soc_facebook {
		background-position: -2px -2px;
	}
	ul#social_squares #soc_twitter,
	  #row_1_buttons #soc_twitter {
		background-position: -72px -2px;
	}
	ul#social_squares #soc_gplus,
	  #row_1_buttons #soc_gplus {
		background-position: -422px -2px;
	}
	ul#social_squares #soc_email,
	  #row_1_buttons #soc_email {
		background-position: -562px -2px;
	}
	ul#social_squares #soc_facebook:hover,
	  #row_1_buttons #soc_facebook:hover {
		background-position: -2px -72px;
	}
	ul#social_squares #soc_twitter:hover,
	  #row_1_buttons #soc_twitter:hover {
		background-position: -72px -72px;
	}
	ul#social_squares #soc_gplus:hover,
	  #row_1_buttons #soc_gplus:hover {
		background-position: -422px -72px;
	}
	ul#social_squares #soc_email:hover,
	  #row_1_buttons #soc_email:hover {
		background-position: -562px -72px;
	}


	/* BOTTOM BLUE ROW
	------------------------------------------ */
	#bottom_blue_row {
		height: 100px;
		background: #0d6ab9 url(../img/bottom_blue_bar.jpg) 0 0 repeat-x;
		padding: 2em 0 0.5em;
		margin: 0;
	}
	#bottom_blue_row h4 {
		padding-bottom: 0.4em;
		color: #fff;
		font-size: 2.3em;
		font-weight: bold;
		text-align: center;
	}
	#bottom_blue_row p {
		color: #fff;
		text-align: center;
		font-size: 1.4em;
	}
	#bottom_blue_row a {
		color: #c2dadb;
	}
	#bottom_blue_row a:hover {
		color: #fff;
	}

	/* FOOTER 
	------------------------------------------ */
	#footer {
		color: #eee;
		background-color: #222;
		padding: 2.5em 0;
	}
	#footer h4 {
		margin-top: 0;
		color: #fff;
		font-size: 2.3em;
		font-weight: bold;
	}
	#footer p {
		color: #eee;
		font-size: 1.3em;
	}
	#footer .small {
		font-size: 1em;
	}
	#footer a,
	#footer a:active,
	#footer a:hover {
		color: #fff;
	}
	#footer hr {
		border-top: 1px solid #666;
		border-bottom: 1px solid #444;
		margin: 10px 0;
	}
	#footer .padlink {
		display: inline-block;
		padding: 0 0.5em;
	}
	

	/* POP-UP MODAL
	------------------------------------------ */
	#modal .nav-tabs li a {
		font-size: 1.6em;
		font-weight: bold;
	}


	#modal #upload-holder {
		float: left;
		position: relative;
		width: 250px;
		min-height: 200px;
		background-color: #ccc;
		text-align: center;
	}
	#modal .qq-upload-button {

		display: block;
		position: absolute;
		top: 70px;
		padding: 7px 0;
		width: 200px;
		margin: 0 auto;
		text-align: center;
		background:#009fe3;
		border-bottom: 1px solid #999;
		color: #fff;
		font-size: 1.3em;
		font-weight: bold;
		text-transform: uppercase;
	
}

	#modal form#pin {
		float: left;
		margin-left: 10px;
		width: 240px;
		display: none;
	}
	#modal form#pin,
	#modal form#pin textarea,
	#modal form#pin .btn, {
		margin: 0px;
	}
	#modal img {
		width: auto;
		max-width: auto;
	}

	#modal_to_email .control-group {
		margin-bottom: 5px;
	}
	#modal_to_email .control-label {
		width: 90px;
	}
	#modal_to_email .controls {
		margin-left: 100px;
	}

	/*--------- RESPONSIVE MEDIA STATE: DEFAULT ---------*/
	span#state4 {
		display: inline;
	}
	span#state5,
	  span#state3,
	  span#state2,
	  span#state1 {
		display: none;
	}
	@media (min-width: 1200px) {
	/*--------- 1200px AND WIDER ---------*/
		span#state4 {
			display: none;
		}
		span#state5 {
			display: inline;
		}
		#blue_bar .blue_arrow {
			left: 474px;
		}
		#boxes .span6,
		  #footer .span6 {
			width: 475px;
		}
		#action {
			min-height: 760px;
		}
		#action .carousel .item {
			min-height: 740px;
		}
		#action .carousel-control {
			top: 415px;
			left: 343px;
		}
		#action .carousel-control.right {
			left: 393px;
		}
		#action .poloroid_photo {
			top: 37px;
			left: 43px;
			width: auto;
			height: auto;
		}
		#action #poloroid_cap {
			top: 397px;
			left: 43px;
			width: 290px;
		}
		#action p {
			font-size: 1.34em;
			padding: 0 32px;
		}
		#action p.poloroid_pad {
			padding-top: 484px;
		}
		#PSFR {
			min-height: 760px;
		}
		#PSFR p {
			font-size: 1.34em;
			line-height: 1.2em;
			padding: 0 32px;
		}
		#story_bubbles .span3 {
			width: 212px;
		}
		#story_bubbles [class*="span"] {
			margin-left: 36px;
		}


	/*------------------------------------*/
	}
	@media (min-width: 980px) and (max-width: 1199px) {
	/*--------- BETWEEN 980px AND 1199px (DEFAULT) ---------*/


	/*------------------------------------------------------*/
	}
	@media (min-width: 768px) and (max-width: 979px) {
	/*--------- BETWEEN 768px AND 979px ---------*/
		span#state4 {
			display: none;
		}
		span#state3 {
			display: inline;
		}
		#blue_bar .blue_arrow {
			left: 346px;
		}
		#row_1 h1 {
			font-size: 1.4em;
		}
		#row_1 h2 {
			font-size: 1em;
		}
		#action {
			min-height: 610px;
		}
		#action h3,
		  #PSFR h3 {
			font-size: 1.4em;
		}
		#action .carousel .item {
			min-height: 590px;
		}
		#action .carousel-control {
			top: 302px;
			left: 249px;
		}
		#action .carousel-control.right {
			left: 289px;
		}
		#action .poloroid_photo {
			top: 26px;
			left: 32px;
			width: 290px;
			height: 250px;
		}
		#action #poloroid_cap {
			top: 287px;
			left: 32px;
			width: 215px;
			font-size: 1.3em;
			line-height: 34px;
			height: 34px;
		}
		#action p {
			font-size: 1em;
			line-height: 1.2em;
			padding: 0 20px;
		}
		#action p.poloroid_pad {
			padding-top: 355px;
		}
		#PSFR {
			min-height: 610px;
		}
		#PSFR p {
			font-size: 1em;
			line-height: 1.2em;
			padding: 0 20px;
		}
		#story_bubbles .span3 {
			width: 161px;
		}
		#story_bubbles [class*="span"] {
			margin-left: 22px;
		}
		.blue,
		  #PSFR #donate_btn,
		  #PSFR #fundraising_btn {
			font-size: 18px;
		}
		.blue span,
		  #PSFR #PSFR #donate_btn span,
		  #PSFR #fundraising_btn span {
			width: 20px;
		}

		#footer {
			padding: 1.5em 0;
		}
		#footer h4 {
			margin-top: 0;
			font-size: 1.5em;
		}
		#footer p {
			font-size: 1.1em;
		}
		#footer .padlink {
			padding: 0 0.3em;
		}

	/*-------------------------------------------*/
	}
	@media (min-width: 481px) and (max-width: 767px) {
	/*--------- BETWEEN 481px AND 767px ---------*/
		span#state4 {
			display: none;
		}
		span#state2 {
			display: inline;
		}
		body {
			padding: 0px;
		}
		#row_1 h1 {
			font-size: 1.4em;
		}
		#row_1 h2 {
			font-size: 1em;
		}
		#carousel h3 {
			font-size: 1.4em;
			line-height: 1.4em;
		}
		#blue_bar {
			height: 80px;
		}
		#blue_bar h4 {
			font-size: 1.4em;
			line-height: 1.4em;
			padding-top: 25px;
		}
		#blue_bar .blue_arrow {
			display: none;
		}
		#action p {
			font-size: 1em;
			line-height: 1.2em;
			padding: 0 20px;
		}
		#PSFR p {
			font-size: 1em;
			line-height: 1.2em;
			padding: 0 20px;
		}
		#story_bubbles a img {
			float: none;
		}
		#story_bubbles .span3 {
			width: 100%;
			margin-left: 0px;
		}
		.container {
			max-width: 100%;
			min-width: 480px;
		}

	/*-------------------------------------------*/
	}
	@media (max-width: 480px) {
	/*--------- 480px AND BELOW ---------*/
		span#state4 {
			display: none;
		}
		span#state1 {
			display: inline;
		}
		body {
			padding: 0px;
		}
		#row_1 {
			width: 100%;
		}
		#row_1 h1 {
			font-size: 11px;
			line-height: 1.1em;
			width: 200px;
			top: 5px;
			margin: 0;
		}
		#row_1 h2 {
			font-size: 11px;
			width: 200px;
			top: 50px;
			margin: 0;
			line-height: 1em;
		}
		#row_1 .pink-button,
		  #row_1 .blue-button {
			display: none;
		}
		.container {
			max-width: auto;
			min-width: auto;
			width: 100%;
		}
		#carousel {
			width: 100%;
		}
		#carousel .carousel-control {
			top: 30%;
		}
		#carousel h3 {
			font-size: 1.1em;
			line-height: 1.1em;
		}
		#carousel .carousel-caption {
			position: absolute;
		}
		#blue_bar {
			height: 60px;
		}
		#blue_bar h4 {
			font-size: 1.3em;
			line-height: 1.3em;
			padding-top: 20px;
		}
		#blue_bar .blue_arrow {
			display: none;
		}
		#action p {
			font-size: 1em;
			line-height: 1.2em;
			padding: 0 20px;
		}
		#story_bubbles a img {
			float: none;
		}
		#story_bubbles .span3 {
			width: 100%;
			margin: 0px;
		}

	/*-------------------------------------------*/
	}