﻿
/* Common styles
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#body {
	font-family: "Humanist777BT-RomanB",Arial,Verdana,Sans-Serif;
	overflow: hidden;
	padding-top: 5.1em;
	position: relative;
}
#body .badge {
	background: #ebe9e9;
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
	-moz-box-shadow: 0 2px 3px #bbb;
	-webkit-box-shadow: 0 2px 3px #bbb;
	box-shadow: 0 2px 3px #bbb;
	margin-bottom: 2em;
}
#body .badge .stitching {
	border: 1px dashed #fff;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	color: #666;
	display: block;
	margin: 8px;
	padding: 5px 8px;
}
#body .badge.orange-bg {
	background: #ffa72f;
}

.redheart {
	color: #fc1d00;
}
.link-arrow {
	background: url(/content/images/shared/icons/caret-blue.png) center right no-repeat;
	background-position: 96% center;
}


/* DLF Header
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#recreate {
	display: block;
	float: none;
	padding: 2.5em 0;
}


/* Flo
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#flo {
	left: 30%;
	max-width: 320px;
	position: absolute;	
	top: 0;
	width: 32%;
	z-index: 1;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - max 900px */
@media screen and (max-width: 900px) {
	#flo {
		left: 35%;
		width: 23%;
	}
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - max 700px */
@media screen and (max-width: 700px) {
	#flo {
		left: 50%;
		min-width: 250px;
		top: 3em;
		width: 45%;
	}
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - max 480px */
@media screen and (max-width: 480px) {
	#flo {
		min-width: 0;
	}
}


/* Components
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#components {
	float: left;
	position: relative;
	width: 40%;
	z-index: 100;
}
#components ol {
	padding-bottom: 3em;
  padding-left: 0;
}
#components ol li {
	background-position: left 1px;
	background-repeat: no-repeat;
	color: #666666;
	font-size: 1.3em;
	list-style: inside none;
	margin: 0;
	padding: 0 0 0.65em 2em;
}
#components .one {
	background-image: url(/content/images/home/dresslikeflo/bullet-1.png);
}
#components .two {
	background-image: url(/content/images/home/dresslikeflo/bullet-2.png);
}
#components .three {
	background-image: url(/content/images/home/dresslikeflo/bullet-3.png);
}
#components .four {
	background-image: url(/content/images/home/dresslikeflo/bullet-4.png);
}
#components .five {
	background-image: url(/content/images/home/dresslikeflo/bullet-5.png);
}
#components .six {
	background-image: url(/content/images/home/dresslikeflo/bullet-6.png);
}
#components .seven {
	background-image: url(/content/images/home/dresslikeflo/bullet-7.png);
}
#components .eight {
	background-image: url(/content/images/home/dresslikeflo/bullet-8.png);
}
#components .nine {
	background-image: url(/content/images/home/dresslikeflo/bullet-9.png);
}
#components .ten {
	background-image: url(/content/images/home/dresslikeflo/bullet-10.png);
}
#components .eleven {
	background-image: url(/content/images/home/dresslikeflo/bullet-11.png);
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - max 480px */
@media screen and (max-width: 480px) {
	#components {
		width: 50%;
	}
	#components ol {
		padding-bottom: 1em;
	}
}


/* Downloads / Buy
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#body #downloads li {
	font-size: 1.3em;
	margin-bottom: 1em;
	width: 200px;
}
#buy {
	width: 300px;
	padding-top: 1.5em;
}
#buy p {
	font-size: 1.3em;
	padding-top: 0.5em;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - min 701px - max 900px */
@media screen and (min-width: 701px) and (max-width: 900px) {
	#body #downloads {
		padding-top: 3em;
		width: 130%;
	}
	#body #downloads li {
		float: left;
		margin-right: 5%;
		width: 45%;
	}
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - max 480px */
@media screen and (max-width: 480px) {	
	#body #downloads {
		width: 200%;
	}
	#body #downloads li {
		float: left;
		font-size: 1.2em;
		margin: 0.5em 2%;
		width: 46%;
	}
	#buy {
		width: 200%;
	}
	#buy a {
		white-space: nowrap;
	}
}


/* Orange Promos
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#promos {
	float: right;
	padding-top: 1em;
	position: relative;
	width: 340px;
	z-index: 100;
}
#promos .badge {
	float: left;
	width: 46.5%;
}
#promos #party {
	padding-bottom: 2.5em;
}

/* Flo Pumpkin
/* - - - - - - - - - - - - - - - - - - - - - - - */
#promos #pumpkin {
	float: right;
	text-align: center;
}
#promos #pumpkin .stitching {
	padding-bottom: 2em;
	padding-top: 2em;
}
#promos #pumpkin .carver {
	border-bottom: 1px dashed #fff;
	border-top: 1px dashed #fff;
	margin: 2.65em 0;
	padding: 2.65em 0;
}

/* Flo Costume
/* - - - - - - - - - - - - - - - - - - - - - - - */
#promos #costume .costume {
	border-bottom: 1px dashed #fff;
	margin-bottom: 0.75em;
	padding-bottom: 0.75em;
}

/* Flo Alien
/* - - - - - - - - - - - - - - - - - - - - - - - */
#promos #alien {
	text-align: center;
}
#promos #alien .stitching {
	padding-bottom: 1.5em;
	padding-top: 1.5em;
}
#promos #alien .main {
	border-bottom: 1px dashed #fff;
	margin-bottom: 1.5em;
	padding-bottom: 1.5em;
}
#promos #alien p {
	color: #fff;
	font-size: 1.3em;
	margin: 0 auto;
	text-align: left;
	width: 90%;
}
#promos #alien p.watch {
	padding-top: 0.5em;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - max 900px */
@media screen and (max-width: 900px) {
	#promos {
		width: 40%;
	}
	#promos #alien p {
		font-size: 1.2em;
	}
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - max 700px */
@media screen and (max-width: 700px) {
	#promos {
		clear: both;
		padding-top: 3em;
		width: 100%;
	}
	#promos #party {
		float: left;
		width: 46.5%;
	}
	
	/* Flo Pumpkin
	/* - - - - - - - - - - - - - - - - - - - - - - - */
	#promos #pumpkin {
		margin-bottom: 3em;
	}
	#promos #pumpkin .stitching {
		padding-bottom: 17.5%;
		padding-top: 17.5%;
	}
	#promos #pumpkin .script {
		max-width: 40%;
		padding: 1em 0;
	}
	#promos #pumpkin .carver {
		border: none;
		float: right;
		margin: 0 0 0 5%;
		padding: 0;
		width: 45%;
	}
	#promos #pumpkin .btn {
		max-width: 45%;
	}
	
	/* Flo Costume
	/* - - - - - - - - - - - - - - - - - - - - - - - */
	#promos #costume {
		clear: both;
		text-align: center;
	}
	#promos #costume .stitching {
		height: 170px;
		padding-bottom: 1.5em;
		padding-top: 1.5em;
	}
	#promos #costume .btn {
		display: block;
		margin: 0 auto;
	}
	
	/* Flo Alien
	/* - - - - - - - - - - - - - - - - - - - - - - - */
	#promos #alien {
		float: right;
	}
	#promos #alien .stitching {
		height: 170px;
	}
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - max 480px */
@media screen and (max-width: 480px) {
	#promos {
		text-align: center;
	}
	#promos #party {
		float: none;
		width: auto;
	}
	
	/* Flo Pumpkin
	/* - - - - - - - - - - - - - - - - - - - - - - - */
	#promos #pumpkin {
		margin-bottom: 2em;
		width: 100%;
	}
	#promos #pumpkin .stitching {
		padding-bottom: 1em;
		padding-top: 1em;
	}
	#promos #pumpkin .carver {
		float: right;
	}	
	
	/* Flo Costume
	/* - - - - - - - - - - - - - - - - - - - - - - - */
	#promos #costume .stitching, #promos #alien .stitching {
		height: 190px;
	}
	#promos #costume .costume {
		margin-bottom: 3em;
		padding-bottom: 2em;
	}
}


/* Bottom left (1) and Bottom right (2) sections
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#bottom_1 {
	clear: both;
	float: left;
	padding-top: 3em;
	text-align: center;
	width: 47.5%;
}
#bottom_2 {
	float: right;
	padding-top: 3em;
	text-align: center;
	width: 47.5%;
}
.lt-ie8 #bottom_2 {
	padding-top: 4.2em;
}
#bottom_1 .badge, #bottom_2 .badge {
	margin-bottom: 3em;
}
#bottom_1 .badge .stitching, #bottom_2 .badge .stitching {
	padding: 1em;
}
#bottom_1 .headline, #bottom_2 .headline {
	border-bottom: 1px solid #a9a9a9;
	margin-bottom: 2em;
	padding-bottom: 1em;
	text-align: left;
}
#bottom_1 .headline img, #bottom_2 .headline img {
	max-width: 100%;
	padding: 0;
}

/* Bottom 1
/* - - - - - - - - - - - - - - - - - - - - - - - */
#bottom_1 img {
	max-width: 27%;
	padding: 0 5px;
}
#bottom_1 p {
	font-size: 1.3em;
	padding: 1em 0;
	text-align: left;
}
#bottom_1 .title {
	max-width: 70%;
}
#bottom_1 .social .stitching {
	padding-bottom: 1.75em;
	padding-top: 1.75em;
}
#bottom_1 .follow {
	border-right: 1px dashed #fff;
	float: left;
	text-align: center;
	width: 57%;
}
#bottom_1 .share {
	float: right;
	text-align: center;
	width: 42%;
}
#bottom_1 .icon {
	padding: 1.5em 1px;
}

/* Bottom 2
/* - - - - - - - - - - - - - - - - - - - - - - - */
#bottom_2 .button {
	margin: 1em auto;
	max-width: 250px;
	width: 100%;
}
#bottom_2 .button a {
	font-size: 1.8em;
}
#bottom_2 h3 {
	font-size: 1.4em;
}
#bottom_2 .device {
	float: left;
}
#bottom_2 .device.iphone {
	left: 2.16%;
	padding-left: 8.77%;
	position: relative;
	width: 23.56%;
}
#bottom_2 .device.desktop {
	width: 36.54%;
}
#bottom_2 .device.android {
	left: -3.37%;
	position: relative;
	width: 23.56%;
}
#bottom_2 .device p {
	font-size: 1.2em;
	margin: 1em 0 1.083em 0;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - max 800px */
@media screen and (max-width: 800px) {
	#bottom_1 .icon {
		width: 25px;
	}
	#bottom_2 .device.iphone {
		left: 0;
		padding-left: 0;
		width: 28.1%;
	}
	#bottom_2 .device.desktop {
		width: 43.68%;
	}
	#bottom_2 .device.android {
		left: 0;
		width: 28.1%;
	}
	#bottom_2 .device p {
		font-size: 1.1em;
	}
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - max 800px */
@media screen and (max-width: 600px) {
	#bottom_1, #bottom_2 {
		width: 100%;
	}
	#bottom_1 .badge, #bottom_2 .badge {
		margin-bottom: 1.5em;
	}
	#bottom_2 {
		padding-top: 0;
	}
	#bottom_2 .device p {
		font-size: 1.2em;
	}
}