.bold {
	font-weight: bold;
}
.underline {
	text-decoration: underline;
}
.center { 
	margin: auto; 
}
.centerText {
	text-align: center;
}
.upperWidth {
	width: 95%;
}
.innerWidth {
	width: 95%;
}
.outerTableData {
	vertical-align: top
}
.topMargin {
	margin-top: 40px;
}
.leftPadding {
	padding-left: 20px;
}
.contentBoxLayer {
	overflow: hidden;
	background-color: #F3F7F8;
	-moz-box-shadow: 0 0 3px #ccc;
    -webkit-box-shadow: 0 0 3px #ccc;
	box-shadow: 0 0 10px #ccc;
	margin-bottom: 50px;
}
.contentBox {
	margin: 0 0 25px;
	overflow: hidden;
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: #F3F7F8;
}
.videos {
	border: 1px solid #ddd;
	text-align: left;
	border-collapse: collapse; 
	margin-top: 20px; 
	margin-bottom:20px; 
	margin-left:25px;
	margin-right:25px;
	background-color: white;
}
.videos th, .videos td {
	border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
	text-align: left; 
	padding-top: 20px; 
	padding-bottom:20px; 
	padding-left:25px;
	padding-right:25px;
}
.videos tbody tr:hover {
	cursor: pointer;
	border: 2px solid #ddd;
}
@media screen and (max-width: 1366px) {
	.outerTableData {
		display: block;
		clear:both;
	}
    .innerWidth {
        width: 80%;
    }
}
@media screen and (max-width: 800px) {
    .upperWidth, .innerWidth {
	    width: 98%;
    }
}

h2 {
	font-size: 1.75rem; /* Decrease font size a bit to be visually pleasing. */
	margin-top: 0.5rem; /* Add a visually pleasing space above the heading. */
	margin-bottom: 0px; /* Remove bottom margin so text starts immediately below the heading. */
}

h3 {
	font-size: 1.5em; /* Set font size */
	margin-top: 0.5rem; /* Add a visually pleasing space above the heading. */
	margin-bottom: 0px; /* remove bottom margin so text starts right below the heading. */
}

h4 {
	font-size: 1.5em; /* Set font size */
	margin-top: 0.5rem; /* Add a visually pleasing space above the heading. */
	margin-bottom: 0px; /* Remove bottom margin so text starts right below the heading. */
}

p {
	/* Add a visually appealing small space between headings and following unordered lists. */
	margin-bottom: 0.5em;
}

img.logo {
	padding-top: 0.5em; /* Add a small space above. */
	padding-bottom: 0.5em; /* Add a small space below. */
}

img.logo-newsletter, img.logo-service {
	width: 40em; /* Set a visually appealing size for "FabTime Newsletter" and "FabTime Web Service" logos. */
}

img.ft-help-sample-figure {
  border: 0;
  width: 900px;
}

/* For small screens, override size of images to be 90% width for smooth transition */
@media screen and (max-width: 1000px) {
  img.ft-help-sample-figure {
    width: 90%;
  }
}

/* For small screens, override width of logo to be 75% so it doesn't run off screen. */
@media screen and (max-width: 700px) {
	img.logo-newsletter {
		width: 75%;
	}
}

/* For small screens, override width of logo to be 75% so it doesn't run off screen. */
@media screen and (max-width: 700px) {
	img.logo {
		width: 75%;
	}
}
img.helplogo {
	width: 30em; /* Set a visually appealing size for FabTime logo. */
	padding-top: 0.5em; /* Add a small space above the FabTime logo. */
	padding-bottom: 0.5em; /* Add a small space above the FabTime logo. */
}

/* For small screens, override width of newsletter logo to be 75% so it doesn't run off screen. */
@media screen and (max-width: 700px) {
	img.helplogo {
		width: 75%;
	}
}

/* Accordions are used in help - set a white background with red letters when the section is expanded. Overrides default color. */
.ui-accordion-header.ui-state-active {
	background-color: #ffffff;
	color: red;
	border-color: black;
}

/* Override default down-pointing triangle icon (white) to a different icon that is visible on a white background. */
.ui-state-active .ui-icon.ui-accordion-header-icon {
	background-image: url("images/ui-icons_444444_256x240.png") !important;
}

/* Style for control titles in help pages. */
.ft-help-control-title {
	font-weight: bold;
}

/* Remove the blank line above pre-formatted code samples. */
pre {
	margin-top: 0px;
}

.help-footer {
	margin-top: 1rem; /* Leave visually pleasing blank space before page footer. */
}

.accordion .btn-link {
	color: red;	/* Use red for accordion button links in data table tips. */
}

ol {
	margin-left: 0px; /* Eliminate default wide left margin for ordered lists. */
	padding-left: 0px; /* Eliminate default wide left padding for ordered lists. */
}

ol > li {
	margin-bottom: 0.5rem; /* Separate list items in an ordered list by a small break. */
}