@charset "UTF-8";
/* CSS Document */

/* COLORS 
yellow = #fff1be
shaded yellow = #efe1ac
burgundy = #692b40
teal = #00668f
spring green = #dfe672
lite spring green = #eef57b
header blue = #bee6f4
orange = #e28f26
light orange = #ffd400
red = #d71921
*/

* {
    margin: 0;
}

html, body {
    height: 100%; /*required to keep footer position */
}

body {
	color: #692b40;
	background: #efe1ac;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 100%;
	text-align: left;
	margin: 0;
	padding: 0;
	width: auto;
}

img {
	float: left;
	display: block;
	border: none;
}

img#homeImg {
	float: right;
	margin: -30px -73px 0 0;
	padding: 10px 0 0 0;
}

a:link,
a:visited,
a:hover,
a:active {
	text-decoration: none;
	color: #00668f;
}

a:hover {
	color: #692b40;
}

h1, h2 {
	color: #692b40;
	background-color: transparent;
	margin: 0 0 0.5em 0;
}

h1 {
	font-size: 120%;
}

h2 {
	font-size: 90%;
	margin: 20px 0 10px 0;
}

ul {
	margin: 0 0 0 30px;
	padding: 0;
}

li {
	list-style-type: none;
}

iframe {
	margin: 15px;
}

/* --------HEADER -----------------------------------*/
header {
	background: url("../assets/header-bg-1024x159.jpg") 0 0 no-repeat;
	background-attachment: scroll;
	height: 159px;
	margin: 0;
}

#titleimage {
	margin: 32px 0 0 30%;
	display: inline;
	position: relative;
	float: left;
	clear: both;
	width: 355px;
}

#titleimage p {
	margin: 0 0 10px 0;
	text-align: right;
	display: inline;
	position: relative;
	float: right;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 65%;
	text-transform: uppercase;
	color: #00668f;
	background-color: transparent;
}

#topcontact {
	text-align: right;
	color: #00668f;
	background-color: transparent;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 80%;
	margin: 20px 20px 0 10px;
	display: inline;
	position: relative;
	float: right;
	line-height: 1.7em;
}

#topcontact img {
	float: right;
	margin: 5px 0 0 5px;
}

/* -------- NAV -----------------------------------*/
header nav {
	float: left;
	clear: both;
	margin: 160px 0 0 0;
	padding: 20px 0 0 0;
	color: #00668f;
	width: 172px;
	height: 400px;
	background-color: #dfe672;
	display: block;
	position: absolute;
}

header nav li {
	margin: 0 0 1.5em -1.2em;
	text-decoration: none;
	list-style-type: none;
	text-align: left;
	font-size: 70%;
	line-height: 1.3em;
	font-weight: bold;
}

header nav li a:link, 
header nav li a:visited,
header nav li a:active {
	font-weight: normal;
}

header nav li a:hover {
	font-weight: normal;
}

.preblog, .blog, .postblog {
	font-size: 60%;
	text-align: center;
	font-family: Tahoma, Geneva, sans-serif;
	color: #00668f;
	background-color: transparent;
}

.preblog {
	margin: 20px 0 6px 0;
}

.blog {
	margin: 0;
}

.postblog {
	margin: 5px 0 20px 0;
}

#whydragonfly {
	font-size: 50%;
	text-align: center;
	font-family: Tahoma, Geneva, sans-serif;
	font-style: italic;
	color: #692b40;
	background-color: transparent;
	margin: 0 0 10px 0;
}

#reddragonfly {
	overflow: hidden;
	margin: 0 auto;
}

#skipTo, #toTop {
	display: none;
}

#skipTo li, #toTop li {
	background: #fff1be;
}

/* -------- SIDEBAR -----------------------------------*/
aside div#quote {
	float: right;
	position: relative;
	display: inline;	
	width: 20%;
	padding: 0;
	margin: 20px 20px 0 10px;
	color: #00668f;
	background-color: transparent;
	text-align: right;
	line-height: 2em;
}

.attrib {
	color: #e28f26;
	background-color: transparent;
	font-style: italic;
}

aside div#DLinstructions {
	float: right;
	position: relative;
	display: inline;	
	width: 20%;
	padding: 0;
	margin: 20px 20px 0 10px;
	color: #00668f;
	background-color: transparent;
	font-size: 80%;
	text-align: left;
	line-height: 1.3em;
}

/* -------- STRUCTURE -----------------------------------*/
#wrapper {
	width: 96%;
	max-width: 920px;
	min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto;
	padding: 0;
	color: inherit;
	background-color: #fff1be;
    position: relative;
	background-image: url("../assets/bg-quote-234x514.jpg");
	background-position: 100% 159px;
	background-repeat: no-repeat;
}

#main {
	width: 45%;
	margin: 0 0 0 172px;
	padding: 5% 3%;
	float: left;
	clear: left;
}

blockquote {
	width: 90%;
	color: #00668f;
	background: #ffffff;
	padding: 30px 20px 10px 20px;
	font-size: 90%;
	line-height: 1.2em;
}

/* -------- MAIN STYLING -----------------------------------*/
#main p {
	font-size: 90%;
	line-height: 1.7em;
	margin: 0 0 1em 0;
}

#main p span#dropcap {
	float: left;
	color: #d71921;
	font-size: 320%;
	line-height: 0.9em;
	padding: 5px 5px 0 0;
}

/* -------- LISTS -----------------------------------*/

#main ul {
	margin: 0 0 0 15px;
	padding: 0;
}

li.redsq {
	background: transparent;
	font-size: 0.9em;
	text-align: left;
	padding: 0;	
	margin: 10px 0;
	list-style-image: url("../assets/bullet_red_8x8.png");
	font-weight: bold;
}

.bullet {
	margin: 0;
	padding: 5px 5px 0 0;	
}

aside div#DLinstructions p .bullet {
	padding: 3px 5px 0 0;	
}

.formslist {
	font-size: 90%;
	margin: 2em 0;
}

.DLicon {
	float: left;
	position: relative;
	width: 30px;
	margin: -10px 10px 0 0;
	color: #000;
	background: transparent;
}

ol.instructions li {
	list-style-type: decimal;
	margin: 0 0 0 -15px;
}

li.address {
	font-size: 90%;
	line-height: 1.4em;
}

/* -------- INFO BUTTON -----------------------------------*/
.whatACT, .howACT, .indiv, .couples, .group {
	 display: none;
 }

input.viewInfo, input.viewInfo:hover {
	color: #692b40;
	background-color: #ffd400;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	font-size: 0.7em;
	font-family: Tahoma, Geneva, sans-serif;
	font-weight: normal;
	padding: 2px 3px 2px 6px;
	margin: 0 0 10px 0;
	border: 0;
	cursor: pointer;
	text-decoration: none;
	position: relative;
	-webkit-appearance: none;
}

input.viewInfo:link {
	color: #692b40;
	background: #ffffff;
}

input.viewInfo:visited {
	color: #ffffff;
	background: transparent;
}

input.viewInfo:hover {
	color: #000;
	background: #ffffff;
}

/* -------- MEDIA QUERIES -----------------------------------*/

/* for iPad in portrait orientation: */
@media only screen   
and (max-width: 768px) {

	titleimage {
	margin: 50px 0 0 30%;
	}
	
	#main {
	margin: -10px 0 0 170px;
	width: 40%;
	}

	#main p {
	font-size: 100%;
	line-height: 1.4em;
	margin: 0 0.5em 1.5em 0.3em;
	}

	img#homeImg {
	float: right;
	margin: -3px -5px 20px 0;
	padding: 0;
	}

	aside {
	margin: 0 0 0 0;
	padding: 170px 0 0 0;
	line-height: 1.5em;
	width: 100%;
	}
	
	#wrapper {
	width: 100%;
	}
}

/* for iPhone, Android: */
@media only screen  
and (min-width: 320px) 
and (max-width: 480px) {
	
	body {
	width: 100%;
	}
	
	#skipTo, #toTop {
	display: block;
	padding: 10px 0 0 0;
	}
	
	#skipTo li, #toTop li {
	background: #ffffff;
	}
	
	/* switch #main and aside to one column on small screens: */
	header {
	background: url("../assets/header-bg-1024x159.jpg") 0 100% no-repeat;
	height: 40px;
	width: 100%;
	}
	
	#titleimage {
	margin: 40px 0 0 0;
	padding: 0 0 0 0;
	background: #bee6f4;
	width: 100%;
	display: block;
	position: relative;
	float: left;
	clear: both;
	}
	
	#titleimage p {
	margin: 0 0 0 -5px;
	padding: 40px 0 20px 15px;
	text-align: right;
	float: left;
	clear: both;
	font-size: 100%;
	width: 90%;
	}

	#titleimage img {
	width: 100%;
	height: auto;
	margin: 0 0 0 -30px;
	padding: 0;
	float: left;
	clear: both;
	}
	
	#topcontact {
	font-size: 120%;
	margin: 0;
	padding: 1em 1.7em 1em 0;
	background: #bee6f4;
	width: 100%;
	float: right;
	clear: both;
	}
	
	header nav {
	display: block;
	position: relative;
	}
	
	header nav, #main, aside {
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	}
		
	header nav li {
	background: #eef57b;
	display: block;
	margin: 0 40px 10px 0;
	padding: 10px;
	font-size: 120%;
	text-align: center;
	}

	header nav li:hover {
	background: #fff1be;
	}
	
	.preblog, .blog, .postblog {
	margin: 10px 0 0 0;
	font-size: 90%;
	}

	.blog {
	margin: 0;
	}
	
	.postblog {
	margin: 0 0 10px 0;
	}
	
	#whydragonfly {
	margin: 0 0 10px 0;
	font-size: 90%;
	}
	
	#reddragonfly {
	width: 180px; /* centers image for mobile */
	display: block;
	margin: 0 auto;
	}
	
	#wrapper {
	width: 100%;
	background-image: none;
	}
	
	#main {
	margin: 30px 10% 20px 5%;
	font-size: 110%;
	width: 90%;
	}
	
	img#homeImg {
	display: none;
	}

	aside div#quote, aside div#DLinstructions {
	clear: both;
	width: 90%;
	padding: 20px 20px 0 20px;
	margin: 0 0 10em 0;
	border-top: #dfe672 10px dotted;
	}
	
	aside div#quote div, aside div#DLinstructions div {
	position: absolute;
	display: table;
	}
	
	aside div#quote	p {
	padding: 20px 20px 0 20px;
	margin: 0;
	text-align: center;
	font-size: 110%;
	line-height: 1.5em;
	}
	
	#toTop li {
	display: block;
	position: static;
	margin: -2em 0 0 -2em;
	padding: 2em 0 3em 0;
	list-style: none;
	background: transparent;
	text-transform: uppercase;
	font-family: Tahoma, Geneva, sans-serif;
	font-weight: bold;
	font-size: 80%;
	letter-spacing: 0.3em;
	width: 100%;
	text-align: center;
	}
		
	footer p {
	font-size: 150%;
	}
	
	.unselectable {
	  -webkit-user-select: none;  /* Chrome all / Safari all */
	  -moz-user-select: none;     /* Firefox all */
	  -ms-user-select: none;      /* IE 10+ */
	  -o-user-select: none; /* No support yet, use at own risk */
	  user-select: none;    /* No support yet, use at own risk */
	  }

}

/* -------- FOOTER -----------------------------------*/
.clearboth {
    clear: both; /* this div before footer to keep footer at bottom on scroll*/
}

footer {
	font-size: 50%;
	font-family: Tahoma, Geneva, sans-serif;
	text-align: center;
	margin: auto;
	padding: 10px 0;
	clear: both;
	background: #bee6f4;
	width: 100%;
	bottom: 0;
    left: 0;
    position: absolute;
	height: 10px; /* needs height to stay on bottom */
}