/********* IYP Licensee Page Structure - Start **********/

body {
	margin: 0 0 20px 0;
	padding: 0;
	background-image: url('images/bg.jpg');
}

/* the central page area which pops out from the background */
#page {
	text-align: left;
	margin: 20px auto; 
	padding: 0;
	width: 723px;
	height: 100%;
	position: relative;
}
	
/* the actual content area which is contained within the #page element */
#content {
	font: small sans-serif, Helvetica, Verdana, Arial;
	color: #000000;
	margin: 0px auto; 
	padding: 25px auto;
	position: relative;
}	

/* this is where the main content (i.e. the copy) goes */
.content_body {
	margin-top:-5px;
	float: right;
	padding: 0 34px 0 34px;
	background-image: url('images/Template_Body.png');
}

/* div for the videos on the left hand side */
.content_left {
	float: left;
	margin-right: 15px;
	width: 217px;
	vertical-align: top;
	background:#E7F5FE;
	padding: 10px 0 10px 0;
}

/* div for the body text */
.content_right {
	float: right;
	margin: 15px 5px 0 0;
	width: inherit;
}

/* this is a left-side table with a border around the pic and caption */
#captionboxleft {
	float: left;
	margin: 10px 15px 10px 0;
	padding: 5px;
	border:1px solid #000000;
	font: bold 12pt Arial, Helvetica, Verdana ;
	text-align:center;
	color: #000000;
}

/* this is a right-side table with a border around the pic and caption */
#captionboxright {
	float: right;
	margin: 10px 0 10px 15px;
	padding: 5px;
	border:1px solid #000000;
	font: bold 12pt Arial, Helvetica, Verdana ;
	text-align:center;
	color: #000000;
}

/* this is a left-side sidebar with a double border around the contents */
#sidebarleft {
	float: left;
	margin: 10px 15px 10px 0;
	padding: 15px;
	border:4px double #CCCCCC;
	font: 10pt Arial, Helvetica, sans-serif;
	text-align: left;
	color: #000000;
}

/* this is a right-side sidebar with a double border around the contents */
#sidebarright{
	float: right;
	margin: 10px 0 10px 15px;
	padding: 15px;
	border:4px double #CCCCCC;
	font: 10pt Arial, Helvetica, sans-serif;
	text-align: left;
	color: #000000;
}

/* these are central, wide boxes which stretches almost all the way across the content */
#widebox {
	border: 1px solid  #CCCCCC;
	margin: 15px;
	padding: 15px;
}

#wideboxdashed {
	border: 1px dashed  #CCCCCC;
	margin: 15px;
	padding:15px;
}

img.border {
	float: left;
	margin: 15px 15px 15px 0;
	border: 1px solid  #000000;
}

img.noborder {
	margin: 15px 0 15px 0;
}

/* this image style goes inside a captionbox */
img.box {
	margin: 10px 0 10px 0;
	border: 1px solid  #000000;
}

/* this image style goes inside a captionbox */
img.boxnoborder {
	margin: 10px 0 10px 0;
}

/* these three elements are used to create a wide table with alternating blue and white cells */
#bluewhitetable {
	border: 1px solid #000000;
	margin: 25px auto 25px auto;
	width: 580px;
	text-align: left;
}

.elementblue {
	background: #E6F1FF;
	border-top: 1px solid #608BBF;
	border-bottom: 1px solid #608BBF;
	padding: 0px 10px 0px 0px;
}

.elementwhite {
	padding: 0px 10px 0px 0px;
}

/******** Content Formatting Starts Here ****/

p {
	font: 10pt Arial, Helvetica, sans-serif;
	color: #000000;
	margin-right: auto;
	margin-left: auto;
	width: auto;
}

li {
	font: 10pt Arial, Helvetica, sans-serif;
	color: #000000;
	margin-bottom: 15px;
}

blockquote {
	font-style: italic;
}
/*** Text Formatting Starts Here ****/

/* eyebrows go above the main headline block */
.eyebrow {
	font: bold italic 13pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #000000;
/*	margin-top: -5px; */
	margin-bottom: 10px;
}

/* a very large headline used only very sparingly */
.h1ltblue35 {
	font: bold 35pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #3366FF;
	line-height: 100%;
	margin-top: 0px;
	margin-bottom: 0px;
}

/* large H1 headlines - the margins may need adjustment for specific headline triads */
.h1orange {
	font: bold 25pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #FF9900;
	line-height: 130%;
	margin-top: 15px;
	margin-bottom: 15px;
}

.h1orangecompressed {
	font: bold 25pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #FF9900;
	line-height: 130%;
	margin-top: 0px;
	margin-bottom: 0px;
}

.h1ltblue {
	font: bold 25pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #3366FF;
	line-height: 190%;
	margin-top: -10px;
	margin-bottom: 10px;
}

/* slightly smaller H2 headlines */
.h2orange {
	font: bold 22pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #FF9900;
	line-height: 150%;
	margin-top: 0px;
	margin-bottom: 0px;
}

.h2ltblue {
	font: bold 22pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #3366FF;
	line-height: 150%;
	margin-top: 0px;
	margin-bottom: 0px;
}

.h2navy {
	font: bold 22pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #33339F;
	line-height: 150%;
	margin-top: 0px;
	margin-bottom: 0px;
}

.h2black {
	font: bold 22pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #000000;
	line-height: 150%;
	margin-top: 10px;
	margin-bottom: 10px;
}

.h2maroon {
	font: bold 22pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #800000;
	line-height: 150%;
	margin-top: 10px;
	margin-bottom: 10px;
}

/* used when headline elements need to be packed closer together */
.h2navycompressed {
	font: bold 22pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #33339F;
	line-height: 60%;
	margin-top: 20px;
	margin-bottom: 20px;
}

/* used when a bit of space is needed underneath this headlines */
.h2orangespace {
	font: bold 22pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #FF9900;
	line-height: 150%;
	margin-top: 0px;
	margin-bottom: 10px;
}

/* two slightly smaller H2 headlines which may be needed to get the look just right */
.h2ltblue20 {
	font: bold 20pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #3366FF;
	line-height: 150%;
	margin-top: 0px;
	margin-bottom: 0px;
}

.h2navy20 {
	font: bold 20pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #33339F;
	line-height: 150%;
	margin-top: 0px;
	margin-bottom: 0px;
}

.h2orange20{
	font: bold 20pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #FF9900;
	line-height: 150%;
	margin-top: 0px;
	margin-bottom: 0px;
}

.h2orange18 {
	font: bold 18pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #FF9900;
	line-height: 150%;
	margin-top: 0px;
	margin-bottom: 0px;
}

.h2navy18 {
	font: bold 18pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #33339F;
	line-height: 150%;
	margin-top: 0px;
	margin-bottom: 0px;
}

/* medium size H3 headlines */
.h3black {
	font: bold 16pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #000000;
	line-height: 150%;
	margin-top: 0px;
	margin-bottom: 0px;
}

.h3navy {
	font: bold 16pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #33339F;
	line-height: 150%;
	margin-top: 0px;
	margin-bottom: 0px;
}

.h3ltblue {
	font: bold 16pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #3366FF;
	line-height: 150%;
	margin-top: 0px;
	margin-bottom: 0px;
}

.h3ltblueleft {
	font: bold 16pt Arial, Helvetica, sans-serif;
	text-align: left;
	color: #3366FF;
	line-height: 150%;
	margin-top: 0px;
	margin-bottom: 0px;
}

.h3orange {
	font: bold 16pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #FF9900;
	line-height: 150%;
	margin-top: 0px;
	margin-bottom: 0px;
}

.h3orangecompressed {
	font: bold 16pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #FF9900;
	line-height: 150%;
	margin-top: -15px;
	margin-bottom: 0px;
}

.h3maroon {
	font: bold 16pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #800000;
	line-height: 150%;
	margin-top: 0px;
	margin-bottom: 0px;
}

/* adds a bit more space above and below */
.h3ltblueseparated {
	font: bold 16pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #3366FF;
	line-height: 150%;
	margin-top: 5px;
	margin-bottom: 5px;
}

/* adds a bit more space above and below */
.h3navyseparated {
	font: bold 16pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #33339F;
	line-height: 150%;
	margin-top: 5px;
	margin-bottom: 5px;
}

/* used when headline elements need to be packed closer together */
.mednavy16compressed {
	font: bold 16pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #33339F;
	line-height: 0.75;
	margin-top: 0px;
	margin-bottom: 0px;
}

/* a slightly smaller H3 headline which may be needed to get the look just right */
.h3navy15 {
	font: bold 15pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #33339F;
	line-height: 150%;
	margin-top: 0px;
	margin-bottom: 0px;
}

/* body copy headlines which are only slightly larger than the main text */
/*and which can be called with p elements rather than the various H elements */
/* some are set for wider spacing between lines as needed */

.bchnavyleft14 {
	font: bold 14pt Arial, Helvetica, sans-serif;
	text-align: left;
	color: #33339F;
}

.bchnavycenter14 {
	font: bold 14pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #33339F;
}

.bchblack {
	font: bold 12pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #000000;
}

.bchnavyleft {
	font: bold 12pt Arial, Helvetica, sans-serif;
	text-align: left;
	color: #33339F;
}

.bchnavycenter {
	font: bold 12pt Arial, Helvetica, sans-serif;
	text-align: center;
	line-height: 150%;
	color: #33339F;
}

.bchltblue {
	font: bold 12pt Arial, Helvetica, sans-serif;
	text-align: center;
	line-height: 150%;
	color: #3366FF;
}

.bchmaroon {
	font: bold 12pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #800000;
	line-height: 150%;
	margin-top: 0;
	margin-bottom: 0;
}

.bchmaroonleft {
	font: bold 12pt Arial, Helvetica, sans-serif;
	text-align: left;
	color: #800000;
	line-height: 150%;
	margin-top: 0;
	margin-bottom: 0;
}

.bchorange {
	font: bold 12pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #FF9900;
}

/* these body copy headlines may be exactly the same size as the body text */
/* or perhaps even smaller -- useful for opt-in boxes and similar elements */
.bchltblue10 {
	font: bold 10pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #3366FF;
}

.bchmaroon10 {
	font:bold 10pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #800000;
}

.bchmaroonleft10 {
	font: bold 10pt Arial, Helvetica, sans-serif;
	text-align: left;
	color: #800000;
	line-height: 150%;
	margin-top: 0;
	margin-bottom: 0;
}

.bchnavy10 {
	font: bold 10pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #33339F;
}

.bchnavyleft10 {
	font: bold 10pt Arial, Helvetica, sans-serif;
	text-align: left;
	color: #33339F;
}


.bchnavycenter10 {
	font: bold 10pt Arial, Helvetica, sans-serif;
	text-align: center;
	color: #33339F;
}

/* this  text is used in some tables such as the blue-white tables */
.tabletext {
	font: 10pt Arial, Helvetica, sans-serif;
	color: #000000;
	text-align: left;
	margin-top:-10px;
	margin-bottom:-10px;
}

.tinyborder {
	border: 1px solid #000000;
	border-collapse: collapse;
}

/* used for invisible tables intended to offset lists from left-hand div elements */
.nopadding {
	margin: -15px;
	padding: 0px;
	border-collapse: collapse;
}

.nobullet {
	list-style-type:none;
}

/* to indent a list when it falls on the right side of a div element */
.indented {
	padding-left: 15px;
}

/* the style for the order form */
.orderform {
	margin: 5px 0 5px 0;
	border:2px dashed #CC9933;
}

/* Pop Up Boxes */
#popup_head {
	background-image: url(images/Template_Header_Round.png);
	background-position:center;
	background-repeat:no-repeat;
	height: 67px;
	margin-left: auto;
	margin-right: auto;
}
#popup_body {
	background-image: url(images/Template_Body_popup.png);
	background-position:center;
	background-repeat: repeat-y;
}
#popup_footer {
	background-image: url(images/Template_Footer.png);
		background-position:center;
	background-repeat:no-repeat;
	height: 77px;
	margin-left: auto;
	margin-right: auto;
}