/* ------------------------------------------------------
|	Screen Stylesheet for User Publications Help
|	Text Design for Screen
|	Version: 1.0
--------------------------------------------------------*/

/* REMOVE DEFAULT BROWSER CSS VALUES
--------------------------------------------------------*/
:link, :visited { text-decoration:none } /* link underlines tend to make hypertext less readable, because underlines obscure the shapes of the lower halves of words */
ul, ol { list-style:none } /* no list-markers by default, since lists are used more often for semantics */
h1, h2, h3, h4, h5, h6, pre, code { font-size:1em; font-style:normal; } /* avoid browser default inconsistent heading font-sizes and pre/code too */
/* remove the inconsistent (among browsers) default ul,ol padding or margin; the default spacing on headings does not match nor align with normal interline spacing at all, so let's get rid of it. zero out the spacing around pre, form, body, html, p, blockquote as well; form elements are oddly inconsistent, and not quite CSS emulatable., nonetheless strip their margin and padding as well */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }
a img, :link img, :visited img { border:none }
address { font-style:normal }


/* PAGE LAYOUT
--------------------------------------------------------*/
/* this style is overridden in outer_frame.css: it is declared here to improve the layout of
   sub-pages when viewed directly (e.g. sans JavaScript)
*/
#top_box{
	padding:28px 0px 0px;
}


/* BODY TEXT
--------------------------------------------------------*/
body {
	font-size: 0.75em;
	line-height: 140%;
	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
/*    width: 100%;*/
	color: #4a4a4a;
	font-weight: normal;
	background-color: #FFFFFF;
}

.content_body {
	padding:0px 0px 25px 35px;
	margin-right: 3px;
	height:auto;
}

/* COLOR
--------------------------------------------------------*/
a .yStepNumber,
a:link,
a:link:hover,
a:active,
a:visited,
.Cross-Ref_Gray {
	color: #909090;
}

.ChapterTitle,
.DisplaySentence,
.GlossaryItem,
.EmphasisDisplay {
	color: #000000;	
}

h1 {
	color:#2d6aa0;
}

h2,
.H2Sidebar,
.yAlert,
th,
.Important,
.ImportantSubIndent,
.Important .Emphasis,
.ImportantSubIndent .Emphasis,
.Warning .Emphasis {
	color:#457baa; 
}

h3,  
.HStep,
.HStep>a:link { 
	color: #40729d;
}

.HStep a .yStepNumber,
.yStepNumber {
	color: #000000; 
}

/* BOTTOM MARGINS
--------------------------------------------------------*/
/* Margin policy-when possible, only add margin-bottom to elements and reserve margin-top for special cases like headings. */
/* These selectors set a consistent margin-bottom for the majority of paragraph classes */
.BodyRegular,
.BodySubIndent, 
.Task-N,
.Task-Single,
.Task-aSub,
.Task-aSubIndent, 
ul, 
.Bullet,
.BulletSub,
.Note,
.NoteSubIndent, 
.Tip,
.TipSubIndent, 
.CodeBlock,
.GlossaryEntry, 
.uDescriptionLede,
.ItemHeading,
.Important,
.ImportantSubIndent  {
	margin-bottom: 9px;
}

/* BODY HEADS
--------------------------------------------------------*/
.ChapterTitle {
	font-size: 1.3em;
	font-weight: bold;
	line-height: 140%;
	margin-bottom: 3px;
}

.Mini-TOC {
	margin-bottom: 16px;
}

h1 {
	font-weight: normal;
	font-size: 1.3em;
	margin-bottom: 3px;
	line-height: 140%;
}

h2 {
	font-weight: bold;
	font-size: 1.2em;
	margin-top: 16px;
	margin-bottom: 3px;
	line-height: 140%;
}

h3 {
	font-weight: bold;
	margin-top: 16px;
	margin-bottom: 3px;
	line-height: 140%;
}

.DisplaySentence {
    font-weight: bold;
    margin-top: 16px;
    margin-bottom: 3px;
	line-height: 140%;
	border:0px solid #000;
	height:auto;
	background-repeat:no-repeat; 
	background-position:0px 9px;		
}

.DisplaySentenceIcon {
	background-image:url(../Images/arrow_blue_side.gif); 
	background-repeat:no-repeat; 
	background-position:0px 9px;
	padding-left:20px;	
}

.TaskBox.open .DisplaySentenceIcon { /* within an open TaskBox */
	background-image:url(../Images/arrow_blue_down.gif); 
}
	
/* INLINE/SPAN/"CHARACTER" STYLES
--------------------------------------------------------*/
.yDisplay {
	font-weight: bold;
}

.UIOutputStyle-Expanded .Name,
.DisplayInline {
	color: #40729d;	
	font-weight: bold;
	font-style: normal;
}
.UIOutputStyle-Expanded ul ul .Name,
.Name,
.Emphasis {
	color: #4a4a4a;
	font-style: italic;
	font-weight: normal;
}

.EmphasisDisplay {
	font-weight: bold;
}
.SuperscriptSymbols {
	line-height: 100%;
	font-size: 0.75em;
	vertical-align: top;	
}

.Subscript {
	line-height: 100%;
	font-size: 0.75em;
	vertical-align: bottom;
}

/* GLOSSARY
--------------------------------------------------------*/
.GlossaryItem, .GlossaryBody {
	display:inline;
}

.GlossaryItem {
	font-weight: bold;
	color: #4a4a4a;
}

/* ALERTS
--------------------------------------------------------*/
.yNote, .yTip, .yAlert {
	font-weight: bold;
}

.yNote, .yTip {
	color: #4a4a4a;
}

.WarningBox {
	padding-left: 6px;
	padding-right: 6px;
	padding-top: 6px;
	padding-bottom: 6px;
	border-style: solid;
	border-color: #858585;		
	border-width: 1px;
	margin-top: 20px;
	margin-bottom: 20px;
	color: #457baa;
}
	
.WarningBox * {
	margin-left: 0px;
}


/* BULLETED LIST
--------------------------------------------------------*/
ul {
	list-style-type: disc;
    list-style-position: outside; 
	/* we really want the bullets to be "inside," but Firefox compatibility requires us to use "outside" plus an li margin-left */
}

ul>li {
	margin-left: 17px;
	/* margin-left makes bullets appear flush left with body text (instead of outside) necessary for Firefox compatibility */
}

li>img {
	margin-left:0px;
}

/* BULLETED SUBLIST 
--------------------------------------------------------*/
ul ul {
	list-style-type: disc;
    list-style-position: outside; 	
	margin-left: 17px;
}

ul ul>li {
	margin-left: 0px; 
	/* margin-left makes bullets appear flush left with body text (instead of outside) necessary for Firefox compatibility */
}

/* SIMPLE LIST (for certain List-UIs) 
--------------------------------------------------------*/
/* Used for non-bulleted list items that start with DisplayInline style */
.simple {
	list-style-type: none;
    list-style-position: outside; 
	/* we really want the bullets to be "inside," but Firefox compatibility requires us to use "outside" plus an li margin-left */
}

.simple>li {
	margin-left: 0px;
}

/* WORKFLOW LIST
--------------------------------------------------------*/
.Workflow {
	list-style-type: none;
	margin-bottom: 16px;
}

.Workflow *{
	margin-left: 0px;
}

.HStep {
	font-weight: bold;
    margin-top: 16px;
    margin-bottom: 3px;    
    line-height: 140%;
}

.Workflow ul>li {
	margin-left: 17px;
}

/* TASKS
--------------------------------------------------------*/
/* Definitions
--TaskBox: contains the entire Task, including its Heading (DisplaySentence) and its content (TaskContentBox)
--TaskContentBox: contains the numbered or bulleted list of a task AND any conclusion paragraphs, lists, figures, etc.
--TaskContentBox can be shown or hidden using JavaScript */

/* Task Box 
--------------------------------------------------------*/
.TaskBox {
	border-top: 1px solid;
	border-color: #CCCCCC;
	font-size:1em;
}

.TaskBoxNotFollowedByTask {
	margin-bottom:12px;
	border-bottom: 1px solid;
	border-color: #CCCCCC;	
}

/* Displays open/close disclosure icon */ 
.TaskIcon {
	float:left; 
	margin:0px 8px 0px 3px; 
	height:18px;
	width:12px; 
	background-repeat:no-repeat; 
	background-position:center;
	cursor:pointer;
	border:0px solid #000;
	display:none;
}

/* A variation of DisplaySentence for Task heading */
.TaskBox .DisplaySentence {
    margin-top: 0px;
	cursor:pointer;
	padding-top: 7px;
	padding-bottom: 3px;
	margin-left:-20px;
}

.TaskBox * { /*This overrides any possible left margin for elements inside a task-not sure if this is still necessary */
	margin-left: 0px;
}

/* Task Content Box 
--------------------------------------------------------*/

.TaskContentBox {
	display: none;
}

.TaskBox.open .TaskContentBox { /* within an open TaskBox */
	display: block;
}

/* this makes the number and letter bullets in task ordered lists blue and bold; but it also makes everything else blue and bold, so we override below */

ol>li,
.TaskContentBox>ul>li { 
	color: #457baa;
	font-weight:bold;
}

/* this overrides the basic Task ul and ol style so that only number and letter bullets are bold and blue, while the rest of the list item contents stays normal */

li>*
{ /* Make CodeBlock inside a Task not bold (this overrides the bold applied for the numbers in a numbered list ) */
	color:#4a4a4a;
	font-weight:normal;
}


/* Task with Bullets (TaskSingle) 
--------------------------------------------------------*/

.TaskContentBox ul ul ul>li, .TaskConclusion ul>li {
    margin-left: 17px;
}

/* this controls how a list item inside of an unordered list inside of a numbered list inside of a task appears */
.TaskContentBox>ol ul>li {
	margin-left: 17px; 
	/* margin-left makes bullets appear flush left with body text (instead of outside) necessary for Firefox compatibility */
}

/* this controls how a bulleted list inside of a numbered list appears */
.TaskContentBox>ol>ul {
	list-style-type: disc;
    list-style-position: outside; 
	/* we really want the bullets to be "inside," but Firefox compatibility requires us to use "outside" plus an li margin-left */
}

/* Ensure that bulleted lists inside of task steps and task conclusions are properly indentend */
.TaskConclusion>ul>li, .TaskContentBox>ul>li>ul>li { /* added to make sure bulleted lists in a Task conclusion are properly indented */
	margin-left: 17px;
	/* margin-left makes bullets appear flush left with body text (instead of outside) necessary for Firefox compatibility */
}

/* create a BIG square bullet for Bulleted Task Lists */
.TaskContentBox>ul {
   list-style-position: outside;
   list-style-type: square;
   font-size: 1.4em; /* Make font large to enlarge bullet */
 }
 
 /* bring the size of the content back down to compensate for making the bullet big (above) */
.TaskContentBox>ul>li>*  {
   font-size: 0.7em; /* Reduce all elements inside li by the inverse of the ul font size (eg .75/1.4) */
}

/* Task with Numbers (TaskN) 
--------------------------------------------------------*/

/* Make ordered lists inside a task have numbers */
.TaskContentBox>ol {
    margin-left: 0px;
	list-style-type: decimal;
    list-style-position: outside;
}

/* Make ordered lists inside of ordered lists inside a task have small letters instead of numbers */
.TaskContentBox>ol ol {
    list-style-position: outside;
    list-style-type: lower-alpha;
	margin-left: 20px; /* controls left margin of lower case letters */ 
}

/* Important (anywhere inside a Task)
--------------------------------------------------------*/
/* Reset Important color and weight because they have been made blue and bold due to Task numbering */
.TaskContentBox .Important,
.TaskBox .Important {
	color:#457baa;
	font-weight:normal;	
}

/* TABLES
--------------------------------------------------------*/
table {
    margin-top:  20px;
    margin-bottom: 20px;
    font-size: 0.85em;
	border-collapse: collapse;
	border-top: 1px solid #005b9c;
	width: 100%;
}

th.ratio1_2 {
	width: 50%;
}

th.ratio1_3 {
	width: 33.33%;
	}
	
th.ratio2_3 {
	width: 66.67%;
}

th.ratio1_4 {
	width: 25%;
}

th.ratio1_5 {
	width: 20%;
}

th.ratio1_6 {
	width: 16.67%;
}

th.ratio1_7 {
	width: 14.2857%;
}

th.ratio1_8 {
	width: 12.5%;
}

th.ratio1_9 {
	width: 11.11%;
}

th.ratio2_15 {
	width: 13.33%;
}

.footnote {
	font-size: 0.75em;
	margin-bottom: 20px;
	line-height: 150%;
	margin-top: -12px;
}

/* TABLE HEADINGS
-------------------------------------------------------- */
th {
    font-weight: bold;
    padding-top: 2px;
    padding-right: 5px;
    padding-bottom: 2px;
    padding-left: 5px;
    text-align: left;
    vertical-align: bottom;
	border-bottom: 1px solid #457baa;
	color: #ffffff;
	background-color: #457baa;    
}

th p {
    text-align: left;
}

/* TABLE DATA CELLS
-------------------------------------------------------- */
td {
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 2px;    
    vertical-align: top;
    border-bottom: 1px solid #005b9c;
    }

.xBody { 
	margin-bottom: 4px;
}

.xBullet {  /* styling inherited*/
}

.xDisplay {
	font-weight: bold;
}
    
td ul {
	margin-bottom: 4px;
}

td img {
	margin:0px;
}	

/* SIDEBARS
--------------------------------------------------------*/
.SidebarBox {
	margin-top: 20px;
	margin-bottom: 20px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 9px;
	padding-bottom: 2px;
	background-color: #e0ecf5;
}

.SidebarBox * {
	margin-left: 0px;
}

.H2Sidebar {
	font-size: 1.2em;
	font-weight: bold;
	margin-top: 0px;
	margin-bottom: 3px;    
    line-height: 140%;
}

.SidebarBox ul {
	list-style-type: disc;
	margin-left: 17px;
	margin-top: 10px;
}

/* CODE
--------------------------------------------------------*/
.CodeBlock { 
	font-family: Courier, monospace;
	white-space: pre-wrap;
	font-size: 1em;
}

table .CodeBlock {
	color: #4a4a4a;
	margin-bottom: 4px;
	white-space: pre-wrap;	
	font-size: 1.1em;
	line-height: 140%;
}

.CodeBody {
	font-family: Courier, monospace;
	white-space: pre-wrap;	
	font-size: 1em;
}

table .CodeBody{
	font-size: 1.1em;
}

/* ART
--------------------------------------------------------*/
img {
	margin-top: 10px;
	margin-bottom: 18px;
}

/* ANCHOR LINKS
--------------------------------------------------------*/
a {
}

a:link, a:visited { 
    text-decoration: none; 
}

a:link:hover, a:active { 
    text-decoration: underline; 	
}

.copyright {
	margin-top: 22px;
	font-size:.75em;
	font-weight:normal;
	color:#898888;
}

#page_content .copyright { /* hide on screen (also appears in left nav) */
	display: none;
}

/* COPYRIGHT PAGE
--------------------------------------------------------*/
.copyright_body {
	padding-left: 35px;
	padding-right: 35px;
	padding-top: 30px;
	font-size:.9em;
	line-height: 130%;
}

.CopyrightText {
	margin-bottom: 9px;
}

/* KEYBOARD SHORTCUTS
--------------------------------------------------------*/
table .KeyboardShortcut {
	position:relative;
}

table .KeyboardShortcut .ToolTip {
	display: none;
}

table .KeyboardShortcut:hover .ToolTip {		
	display:inline;
	position:absolute;
	top:-13px;
	left:-3px;	
	border:1px solid #9c9c9c;
	background-color:#ffffcb; 
	padding-left:3px;
	padding-right:3px;
	padding-top:0px;
	padding-bottom:0px;
	color: #222;
	z-index:24;
}

table .KeyboardShortcut:hover .ToolTip {
	font-size: 1em;
}

/* VERSION TRACKING
--------------------------------------------------------*/

.watermark {
	font-size:.75em;
	color: #FFFFFF;
	display:none;
}

/*  GLOSSARY TABS
--------------------------------------------------------*/
.GlossaryTabs {
	height:auto;
	margin:6px 0px 13px 0px;
	border:0px solid #000;
}
.GlossaryTabs:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.GlossaryTabs a {
	background-repeat:no-repeat;
	background-position:0px 0px;
	width:16px;
	height:19px;
	border:0px solid #000;
	margin-right:2px;
	padding:0;
	float:left;
}

.GlossaryTabs a:hover{
	background-position:-16px 0px;
}

.GlossaryTabs .inactiveTab {
	background-position:-32px 0px;
	background-repeat:no-repeat;
	width:16px;
	height:19px;
	border:0px solid #000;
	margin-right:2px;
	padding:0;
	float:left;	
}

.hide_task {
	display:none;
}


/*  MOVIE LINKS
--------------------------------------------------------*/
.VideoLink {
    border-color:#E4E4E4;
    border-style:solid none;
    border-width:1px;
    border-left:none;
    border-right:none;
    padding:11px 0;
    margin:14px 0;
}

.VideoPlayGraphic {
    margin:0px;
    border:medium none;
    float:left;
}

.VideoName {
    color:#40729d;
    font-weight:bold;
    line-height:100%;
    margin-left:38px;
    margin-bottom:5px;
    display:block;
}

.VideoName:hover {
    color:#40729d;
    text-decoration:underline;
}

.VideoDuration {
    color:#4a4a4a;
    font-size:10px;
    line-height:100%;
    margin-left:38px;
    display:block;
}

/*  VIDEO LIGHTBOX
--------------------------------------------------------*/

#videoLightbox > .background {
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    opacity:0.5;
    background:white;
    z-index:301;

}

#videoLightbox .centering {
    position:absolute;
    top:80px;
    left:50px;
    right:50px;
    z-index:302;
}

#videoLightbox .outer {
    margin:auto;
    display:table;
    background:white;
}

#videoLightbox .inner {
    margin:auto;
    display:table;
    padding:36px;
    -webkit-box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: #999999 1px 1px 25px;
}


#videoLightbox .closeButton {
	position: absolute;
	margin-top: -10px;
	margin-left: -10px;
	height: 24px;
	width: 24px;
	z-index: 303;
	background-image: url(../Images/lightbox_close.png);
}

#videoLightbox .closeButton:hover {
	background-image: url(../Images/lightbox_close_hover.png);
}