@charset "utf-8";

/* CT Type -Typography  CSS Styles */

/* Create callout or pullquotes in a block of text.  */


span.inset-left {
	background-color: #FFF;
	color:#339;
	display:block;
	float:left;
	font-size:110%;
	font-style:italic;
	font-weight:bold;
	margin:10px;
	width:30%;
	padding:10px;
	border-top-color:#3932a3;
	border-left-width:8px;
	border-bottom-color:#3932a3;
	border-left-width:8px;
	border-top-style: outset;
	border-bottom-style: inset;
}
	span.inset-right {
	background-color: #FFF;
	color:#339;
	display:block;
	float:right;
	font-size:110%;
	font-style:italic;
	font-weight:bold;
	margin:10px;
	width:20%;
	padding:10px;
	border-top:inset;
	border-top-color:#3932a3;
	border-left-width:8px;
	border-bottom:outset;
	border-bottom-color:#3932a3;
	border-left-width:8px;
}


.inset-large-quotemarks {
	bottom: 5px;
	vertical-align: middle;
	position: relative;
	line-height: normal;
	font-size: 150%;
	font-family: Georgia, 'Times New Roman', Times, serif;
}

/*
   CreativeTransformation CSS
*/
/*  Drop Caps - put one of these span tags around the letter.                 */
/*  For example <span.dropcap-yellow>O</span>nce upon a time. */
/*  makes a yellow dropcapped letter O                                         */
/* ---------------------------------------------------------------------------*/
span.dropcap, span.dropcap-red, span.dropcap-maroon, span.dropcap-redorange, span.dropcap-orange, span.dropcap-coral, span.dropcap-hotpink, span.dropcap-yellow, span.dropcap-gold, span.dropcap-bronze, span.dropcap-brown, span.dropcap-azure, span.dropcap-blue-dk, span.dropcap-ctblue-lt, span.dropcap-ctblue, span.dropcap-green, span.dropcap-forest, span.dropcap-jade, span.dropcap-indigo, span.dropcap-violet, span.dropcap-white, span.dropcap-silver, span.dropcap-charcoal, span.dropcap-black {display: block;font-size: 260%;float: left;margin: 0px 4px 0 0;line-height: 100%;;}

span.dropcap-red {color: #bf1e23;}
span.dropcap-maroon {color:#5d0a28;}
span.dropcap-redorange {color:#E73F29;}
span.dropcap-orange {color:#f47209;}
span.dropcap-coral {color:#CD5B45;}
span.dropcap-hotpink {color: #E54777;}
span.dropcap-yellow {color:#fbf448;}
span.dropcap-gold {color:#f5c634;}
span.dropcap-bronze {color:#A95D0E;}
span.dropcap-brown {color:#574038;}
span.dropcap-azure {color:#005fa6;}
span.dropcap-blue-dk {color: #0e288f;}
span.dropcap-ctblue-lt {color:#b2afff;}
span.dropcap-ctblue {color:#3932a3;}
span.dropcap-sage {color:#4d7654;}
span.dropcap-green {color:#008001;}
span.dropcap-forest {color:#0C380C;}
span.dropcap-jade {color:#1E9E63;}
span.dropcap-indigo {color:#4B0082;}
span.dropcap-violet {color:#712EEC;}
span.dropcap-white {color: #FFFFFF;}
span.dropcap-silver {color: #808080;}
span.dropcap-charcoal {color: #333333;}
span.dropcap-black {color: #000000;}

/*---------------------------------------------------------------------------*/
/*  Higlight - put one of these span tags around the letter,word or phrase   */
/*  that you want to highlight by changing the color of the text.            */
/*  For example:
/*  <span.highlight-yellow>Once upon a time there</span> was a big fish.,     */
/*  sets the entire phrase, Once upon a time, in yellow text.  */
/* ---------------------------------------------------------------------------*/

span.highlight-red {color: #bf1e23;}
span.highlight-maroon {color:#5d0a28;}
span.highlight-redorange {color:#E73F29;}
span.highlight-orange {color:#f47209;}
span.highlight-coral {color:#CD5B45;}
span.highlight-hotpink {color: #E54777;}
span.highlight-yellow {color:#fbf448;}
span.highlight-gold {color:#f5c634;}
span.highlight-bronze {color:#A95D0E;}
span.highlight-brown {color:#574038;}
span.highlight-azure {color:#005fa6;}
span.highlight-blue-dk {color: #0e288f;}
span.highlight-ctblue-lt {color:#b2afff;}
span.highlight-ctblue {color:#3932a3;}
span.highlight-sage {color:#4d7654;}
span.highlight-green {color:#008001;}
span.highlight-forest {color:#0C380C;}
span.highlight-jade {color:#1E9E63;}
span.highlight-indigo {color:#4B0082;}
span.highlight-violet {color:#712EEC;}
span.highlight-white {color: #FFFFFF;}
span.highlight-silver {color: #808080;}
span.highlight-charcoal {color: #333333;}
span.highlight-black {color: #000000;}

/*------------------------------------------------------------------------*/
/* <blockquote class="blue"> This text gets indented right and left       */
/*as per the blockquote css. The class="blue" part makes the blockquouted */
/*text blue.                                                              */
/*------------------------------------------------------------------------*/

blockquote, blockquote.red, blockquote.maroon, blockquote.redorange, blockquote.orange, blockquote.coral, blockquote.hotpink, blockquote.yellow, blockquote.gold, blockquote.bronze, blockquote.brown, blockquote.azure, blockquote.blue-dk, blockquote.ctblue-lt, blockquote.ctblue, blockquote.green, blockquote.forest, blockquote.jade, blockquote.indigo, blockquote.violet, blockquote.white, blockquote.silver, blockquote.charcoal, blockquote.black {
	display: block;
	font-size: 100%;
	float: left;
	line-height: 110%;
	width: 100%;
	margin-top: 0px;
	margin-bottom: 0;
	margin-left: 20px;
	clear: both;
	font-style: italic;
}

blockquote.red {color: #bf1e23;}
blockquote.maroon {color:#5d0a28;}
blockquote.redorange {color:#E73F29;}
blockquote.orange {color:#f47209;}
blockquote.coral {color:#CD5B45;}
blockquote.hotpink {color: #E54777;}
blockquote.yellow {color:#fbf448;}
blockquote.gold {color:#f5c634;}
blockquote.bronze {color:#A95D0E;}
blockquote.brown {color:#574038;}
blockquote.azure {color:#005fa6;}
blockquote.blue-dk {color: #0e288f;}
blockquote.ctblue-lt {color:#b2afff;}
blockquote.ctblue {color:#3932a3;}
blockquote.sage {color:#4d7654;}
blockquote.green {color:#008001;}
blockquote.forest {color:#0C380C;}
blockquote.jade {color:#1E9E63;}
blockquote.indigo {color:#4B0082;}
blockquote.violet {color:#712EEC;}
blockquote.white {color: #FFFFFF;}
blockquote.silver {color: #808080;}
blockquote.charcoal {color: #333333;}
blockquote.black {color: #000000;}

/*
.red {color: #bf1e23;}
.maroon {color:#5d0a28;}
.redorange {color:#E73F29;}
.orange {color:#f47209;}
.coral {color:#CD5B45;}
.hotpink {color: #E54777;}
.yellow {color:#fbf448;}
.gold {color:#f5c634;}
.bronze {color:#A95D0E;}
.brown {color:#574038;}
.azure {color:#005fa6;}
.blue-dk {color: #0e288f;}
.ctblue-lt {color:#b2afff;}
.ctblue {color:#3932a3;}
.sage {color:#4d7654;}
.green {color:#008001;}
.forest {color:#0C380C;}
.jade {color:#1E9E63;}
.indigo {color:#4B0082;}
.violet {color:#712EEC;}
.white {color: #FFFFFF;}
.silver {color: #808080;}
.charcoal {color: #333333;}
.black {color: #000000;}

*/
/* --------------------------------------------------------------------*/
/*Bulleted lists */
/* --------------------------------------------------------------------*/

/*
.heartlist {
	list-style-image:none;
	color: #360;
	background-repeat: no-repeat;
	background-position: 5px 10px;
	margin-top: 12px;
	background-image: url(/Images/template/heartbullet.png);
	left: 20px;
	top: 5px;
	list-style-type: none;
}

.heartlist-red {
	list-style-image:none;
	color: #360;
	background-repeat: no-repeat;
	background-position: 5px 10px;
	margin-top: 12px;
	background-image: url(/Images/template/heart-red.png);
	left: 20px;
	top: 5px;
	list-style-type: none;
}
*/
/* lists that use iconlike graphics  for bullets */
/* Thhis one produces a ctblue heart bullet   */
ul.heart-blue {
padding-left: 5px !important; overflow: hidden; margin-left: 5px !important;
}

ul.heart-blue li {
	margin-bottom: 5px !important; /* adjusts the amount of space between one bulleted line and the next bulleted line in the list */
	padding-bottom: 4px !important; /* box control: drops the vertical position of the bullett image but leaves the text where it was  */
	padding-left: 28px !important; /* adds padding on the left of the background image which ends up moving the text to the left -to wit adjuzts the spacing between the bullet image and the text.*/
	background-image: url(/Images/template/heart-ctblue.png);
	background-repeat: no-repeat;
	background-position: left center; /* These values positon the ding on the line. left puts the image to the left of the text. Center aligns the image to thevertical center of the text */
	list-style-position: outside;
	list-style-image: none;
	list-style-type: none;
	display: inline-block;
	
}
/*----------------*/
/* lists that use iconlike graphics  for bullets */
ul.heart-red {
padding-left: 5px !important; overflow: hidden; margin-left: 5px !important;
}

ul.heart-red li {
	margin-bottom: 5px !important; /* adjusts the amount of space between one bulleted line and the next bulleted line in the list */
	padding-bottom: 4px !important; /* box control: drops the vertical position of the bullett image but leaves the text where it was  */
	padding-left: 28px !important; /* adds padding on the left of the background image which ends up moving the text to the left -to wit adjuzts the spacing between the bullet image and the text.*/
	background-image: url(/Images/template/heart-red.png);
	background-repeat: no-repeat;
	background-position: left center; /* These values positon the ding on the line. left puts the image to the left of the text. Center aligns the image to thevertical center of the text */
	list-style-position: outside;
	list-style-image: none;
	list-style-type: none;
	
}

ul.heart-green {
padding-left: 5px !important; overflow: hidden; margin-left: 5px !important;
}

ul.heart-green li {
	margin-bottom: 5px !important; /* adjusts the amount of space between one bulleted line and the next bulleted line in the list */
	padding-bottom: 4px !important; /* box control: drops the vertical position of the bullett image but leaves the text where it was  */
	padding-left: 28px !important; /* adds padding on the left of the background image which ends up moving the text to the left -to wit adjuzts the spacing between the bullet image and the text.*/
	background-image: url(/Images/template/heart-green.png);
	background-repeat: no-repeat;
	background-position: left center; /* These values positon the ding on the line. left puts the image to the left of the text. Center aligns the image to thevertical center of the text */
	list-style-position: outside;
	list-style-image: none;
	list-style-type: none;
	
}
/* an unordered list that uses numbers as graphics 0-10. Need to style each line of the list individually */

ul.number {
	margin: 15px 0;
	list-style: none;
	padding-left:  20px;
	font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Liberation Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
	font-size: 14px;
}

ul.number li {
	padding-left: 25px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-top: 0px;
}

ul.number li.number1 {
	background-attachment: scroll;
	background-image: url(../Images/template/number1.png);
	background-repeat: no-repeat;
	background-position: left center;
}
ul.number li.number2 {
	background-attachment: scroll;
	background-image: url(/Images/template/number2.png);
	background-repeat: no-repeat;
	background-position: left center;
}	

ul.number li.number3 {
	background-attachment: scroll;
	background-image: url(/Images/template/number3.png);
	background-repeat: no-repeat;
	background-position: left center;
}	

ul.number li.number4 {
	background-attachment: scroll;
	background-image: url(/Images/template/number4.png);
	background-repeat: no-repeat;
	background-position: left center;
}

ul.number li.number5 {
	background-attachment: scroll;
	background-image: url(/Images/template/number5.png);
	background-repeat: no-repeat;
	background-position: left center;
}

ul.number li.number6 {
	background-attachment: scroll;
	background-image: url(/Images/template/number6.png);
	background-repeat: no-repeat;
	background-position: left center;
}

ul.number li.number7 {
	background-attachment: scroll;
	background-image: url(/Images/template/number7.png);
	background-repeat: no-repeat;
	background-position: left center;
}

ul.number li.number8 {
	background-attachment: scroll;
	background-image: url(/Images/template/number8.png);
	background-repeat: no-repeat;
	background-position: left center;
}
ul.number li.number9 {
	background-attachment: scroll;
	background-image: url(/Images/template/number9.png);
	background-repeat: no-repeat;
	background-position: left center;
}
ul.number li.number10{
	background-attachment: scroll;
	background-image: url(/Images/template/number10.png);
	background-repeat: no-repeat;
	background-position: left center;
}
 
.wide300 { width: 300px; }

.ff-serif { font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; }



@font-face {
	font-family: 'HarabaraHand Italic';
	src: url('HarabaraHand.eot');
	src: local('HarabaraHand Italic'), local('HarabaraHand'), url('HarabaraHand.woff') format('woff'), url('HarabaraHand.ttf') format('truetype'), url('HarabaraHand.svg#HarabaraHand') format('svg');
}
