@charset "utf-8";
/* CSS Document for MPG iGuide - Puzzle Styles  */
/* Note some of these styles were developed for first versions (before design revisions) */ 
/* and unused styles need to be removed after design is finalized                                  */

		
/* Puzzle Style Lists - puzzle pieces signify link or expand/collapse  */

/* green 16px horizontal block puz piece: component listing */ 
ul.list-puz-vG16, ul ul.list-puz-vG16 { list-style-image: url(../images/list-puzTG16.png); list-style-position: inside; padding-bottom: .5em; }
ul.list-puz-vG16 li, ul ul.list-puz-vG16 li { margin-left: 1.25em; padding-right: .25em; text-align: left; color: #363; font-weight: bold;}

/* green 16px  horizontal block puz piece (hb) :topic list  */
ul.list-puz-hbG16, ul ul.list-puz-hbG16, ul ul ul.list-puzhbG16 { margin: 0 0 .5em 1.75em; list-style-image: url(../images/list_puz_hbG16.png); list-style-position: outside;  font-size: 1.1em;}
ul.list-puz-hbG16 li, ul ul.list-puz-hbG16, ul ul ul.list-puzhbG16 li { margin-left: 1.25em; padding-right: .25em; text-align: left; color: #000; }

	/* puz-hbB16(topics) link styling */
	ul.list-puz-hbG16 li a, ul ul.list-puz-hbG16 li a { color: #000; font-size: 1.1em; }
	ul.list-puz-hbG16 li a:visited, ul ul.list-puz-hbG16 li a:visited { color: #030; }
	ul.list-puz-hbG16 li a:hover, ul ul.list-puz-hbG16 li a:hover { color: #060; }
	ul.list-puz-hbG16 li a:active, ul ul.list-puz-hbG16 li a:active { color: #060; }
	
/* blue 16px vertical puz piece */
ul.list-puz-vB16, ul ul.list-puz-vB16 { list-style-image: url(../images/list_puzTB16.png); list-style-position: inside; padding-bottom: .35em;}
ul.list-puz-vB16 li, ul ul.list-puz-vB16 li { margin-left: 1.25em; padding-right: .25em; text-align: left; color: #000;}
ul.list-puz-vB16 li a:visited, ul ul.list-puz-vB16 li a:visited, ul.list-puz-vB16 li a:hover, ul ul.list-puz-vB16 li a:hover { color: #07519e; }
 
/* blue 16px  horizontal block puz piece (hb) :table of contents list  */
ul.list-puz-hbB16, ul ul.list-puz-hbB16, ul ul ul.list-puzhbB16 { margin: 0 0 .5em 1.75em; list-style-image: url(../images/list_puz_BB16.png); list-style-position: outside; }

/* puz-hbB16(table of contents) link styling */
ul.list-puz-hbB16 li a, ul ul.list-puz-hbB16 li a { color: #07519e; }
ul.list-puz-hbB16 li a:visited, ul ul.list-puz-hbB16 li a:visited, ul.list-puz-hbB16 li a:hover, ul ul.list-puz-hbB16 li a:hover { color: #07519e; }

/** Topics **/
li#Topics h3 { padding-top: 0; }
.puzzle-topics {background: url(../images/puzzle_topics.png) 50% top no-repeat; height: 100px; margin: 0 auto; text-align: center; width: auto; }
.puzzle-topics:hover {background: url(../images/puzzle_topics_named.png) 50% top no-repeat;}

/** Category and Component Styles **/
#focusDescription .categories3 { background: url(../images/puzzle_components.png) 50% top no-repeat; height: 150px; margin: 0 auto; text-align: center; width: auto;}
#focusDescription .categories3:hover { background: url(../images/puzzle_components_named.png) 50% top no-repeat; }
#focusDescription .componentStart { background: url(../images/puz_start1.png) 50% top no-repeat; height: 100px; margin: 0 auto; text-align: center; }
#focusDescription .componentStart:hover { background: url(../images/puz_start2.png) 50% top no-repeat; }
#focusDescription .componentSupport { background: url(../images/puz_support1.png) 50% top no-repeat; height: 100px; margin: 0 auto; text-align: center; }
#focusDescription .componentSupport:hover { background: url(../images/puz_support2.png) 50% top no-repeat; }
#focusDescription .componentSecure { background: url(../images/puz_secure1.png) 50% top no-repeat; height: 100px; margin: 0 auto; text-align: center; }
#focusDescription .componentSecure:hover { background: url(../images/puz_secure2.png) 50% top no-repeat; }
/* Positioning of component text when closed */
#focusDescription .componentStart h3, .componentSupport h3, .componentSecure h3 {	top: 20px; position: relative; color: #000; }

/* Positioning of component images when open */
#cbp-ntaccordionHome div.componentSupport { position: relative; top: -33px; }
#cbp-ntaccordionHome div.componentSecure { position: relative; top: -66px; }
#cbp-ntaccordionHome li.cbp-ntopen div.componentStart h3 { margin-bottom: .5em; padding-bottom: .75em; }

#cbp-ntaccordionHome li.cbp-ntopen + li div.componentSupport { margin: 0 0 .5em; padding: .75em 0 0.75em; position: relative; top: 5px; }
#cbp-ntaccordionHome li.cbp-ntopen + li div.componentSupport h3 { margin-top: 0; padding-bottom: .75em; }
#cbp-ntaccordionHome li.cbp-ntopen + li div.componentSecure { margin: 0 0 .5em; padding: .75em 0 0.75em; position: relative; top: 5px; }
#cbp-ntaccordionHome li.cbp-ntopen + li div.componentSecure h3 { margin-top: 0; padding-bottom: .75em; }

/* MPG ICONS  Open-Close Accordion icons */
/* Blue level 1 */
.puzzleTB24 { background: url(../images/puzzle_top_blue_20_24.png) no-repeat; vertical-align: text-bottom; }
span.puzzleTB24 { width: 24px; padding-right: 1.35em; }
.cbp-ntopen > .cbp-nttrigger > .puzzleTB24 { background: url(../images/puzzle_side_blue_20_24.png) no-repeat; vertical-align: text-bottom; }
.puzzleTB24:hover { background: url(../images/puzzle_top_dkblue_20_24.png) no-repeat; vertical-align: text-bottom; }
.cbp-ntopen > .cbp-nttrigger > .puzzleTB24:hover { background: url(../images/puzzle_side_dkblue_20_24.png) no-repeat; vertical-align: text-bottom; }

/* Blue level 2 */
.puzzleT2B24 { background: url(../images/puzzle_top_2_blue_20_24.png) no-repeat; vertical-align: text-bottom; }
span.puzzleT2B24 { width: 24px; padding-right: 1.35em; }
.cbp-ntopen > .cbp-nttrigger > .puzzleT2B24 { background: url(../images/puzzle_side_2_blue_20_24.png) no-repeat; vertical-align: text-bottom; }
.puzzleT2B24:hover { background: url(../images/puzzle_top_2_dkblue_20_24.png) no-repeat; vertical-align: text-bottom; }
.cbp-ntopen > .cbp-nttrigger > .puzzleT2B24:hover { background: url(../images/puzzle_side_2_dkblue_20_24.png) no-repeat; vertical-align: text-bottom; }

/* Blue level 3 */
.puzzleT3B16 { background: url(../images/puzzle_top_blue16_16.png) no-repeat; vertical-align: text-bottom; }
span.puzzleT3B16 { width: 16px; padding-right: 1.25em; line-height: 1em;}
.cbp-ntopen > .cbp-nttrigger > .puzzleT3B16 { background: url(../images/puzzle_side_blue16_16.png) no-repeat; vertical-align: text-bottom; }
.puzzleT3B16:hover { background: url(../images/puzzle_top_dkblue16_16.png) no-repeat; vertical-align: text-bottom; }
.cbp-ntopen > .cbp-nttrigger > .puzzleT3B16:hover { background: url(../images/puzzle_side_dkblue16_16.png) no-repeat; vertical-align: text-bottom; }

/* Green component pages */
/* level 1 */
.puzzleT132 { background: url(../images/puzzle_top_green_32.png) no-repeat; vertical-align: text-bottom; } 
span.puzzleT132 { width: 32px; padding-right: 1.5em; }
.cbp-ntopen > .cbp-nttrigger > .puzzleT132 { background: url(../images/puzzle_side_green_32.png) no-repeat; vertical-align: text-bottom; }
.puzzleT132:hover { background: url(../images/puzzle_top_dark_32.png) no-repeat; vertical-align: text-bottom; }
.cbp-ntopen > .cbp-nttrigger > .puzzleT132:hover { background: url(../images/puzzle_side_dark_32.png) no-repeat; vertical-align: text-bottom; }
/* level 2 */
.puzzleT224 { background:url(../images/puzzle_top_2_green_20_24.png) no-repeat; vertical-align: text-bottom; }
span.puzzleT224 { width: 24px; padding-right: 1.5em; }
.cbp-ntopen > .cbp-nttrigger > .puzzleT224 { background: url(../images/puzzle_side_2_green_20_24.png) no-repeat; vertical-align: text-bottom; }
.puzzleT224:hover { background:url(../images/puzzle_top_2_dark_20_24.png) no-repeat; vertical-align: text-bottom; }
.cbp-ntopen > .cbp-nttrigger > .puzzleT224:hover { background: url(../images/puzzle_side_2_dark_20_24.png) no-repeat; vertical-align: text-bottom; }

/* level 3 */
.puzzleTG16 { background: url(../images/puzzle_top_green16_16.png) no-repeat; vertical-align: text-bottom; }
span.puzzleTG16 { width: 16px; padding-right: 1.5em; }
.cbp-ntopen > .cbp-nttrigger > .puzzleTG16 { background: url(../images/puzzle_side_green16_16.png) no-repeat; vertical-align: text-bottom; }
.puzzleTG16:hover { background:url(../images/puzzle_top_dkgreen16_16.png) no-repeat; vertical-align: text-bottom; }
.cbp-ntopen > .cbp-nttrigger > .puzzleTG16:hover { background: url(../images/puzzle_side_dkgreen16_16.png) no-repeat; vertical-align: text-bottom; }

/* Green bullet list item */
.puzzleBG16 { background: url(../images/list_puz_BG16.png) no-repeat; vertical-align: text-bottom; }
span.puzzleBG16 { width: 16px; }

/* Topics brown */
.puzzleTBR224 { background:url(../images/puzzle_top_2_brown_20_24.png) no-repeat; vertical-align: text-bottom; }
span.puzzleTBR224 { width: 24px; padding-right: 1.5em; }
.puzzleTBR224:hover { background:url(../images/puzzle_top_2_br-dark_20_24.png) no-repeat; vertical-align: text-bottom; }

img.toggleSection { padding: 0 .5em .25em; }
#referenceSection .cbp-ntaccordion > li > .cbp-nttrigger .span:before { background: url(../images/puzzle_side_blue_20_24.png) no-repeat; vertical-align: text-bottom; }


