body { background-color: #344958; color: #ffffff; text-decoration: none; text-align: center; }
IMG { border-style: none; }
.hiddenPic {display:none;}

/* Clearfix extends containers to enclose float boxes */
.clearfix:after { content: "."; display: block; height: 0; visibility: hidden; clear: both; }

.clearfix {display: inline-block;} /* for mac IE */

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

p { font-family: Bookman, "Times New Roman", Georgia, Times, serif; background-color: transparent; color: #203a4c; font-size: 14px; letter-spacing: 0.1em; text-align: left; line-height: 16px; margin-right: 40px; margin-left: 40px; }
H1 { font-family: Bookman, "Times New Roman", Georgia, Times, serif; background-color: transparent; color: #203a4c; font-style: italic; font-weight: bold; font-size: 18px; line-height: 20px; letter-spacing: 0.1em; }
H2 { font-family: Bookman, "Times New Roman", Georgia, Times, serif; background-color: transparent; color: #ffbf00; font-style: normal; font-weight: bold; font-size: 14px; line-height: 14px; letter-spacing: 0.1em; margin-top: 40px; margin-left: 20px;}
H3 { font-family: Bookman, "Times New Roman", Georgia, Times, serif; background-color: transparent; color: #b07001; font-style: normal; font-weight: bold; font-size: 14px; line-height: 18px; margin-top: 30px; margin-left: 10px; margin-bottom: 20px; }
H4 { font-family: Bookman, "Times New Roman", Georgia, Times, serif; background-color: transparent; color: #b07001; font-style: normal; font-weight: bold; font-size: 14px; line-height: 16px; letter-spacing: 0.1em; text-align: left; margin-top: 24px; margin-left: 0px;}

/* Use for notes, copyright, and music note - Use company for Phoenician Ind name */
.note { font-family: Arial, Helvetica, Geneva, sans-serif; background-color: transparent; color: #203a4c; font-size: 12px; letter-spacing: 0.1em; line-height: 14px; text-align: center; margin-right: 10%; margin-left: 10%; }
.copyright { font-family: Arial, Helvetica, Geneva, sans-serif; background-color: transparent; color: #b07001; font-size: 11px; letter-spacing: 0.1em; line-height: 14px; text-align: center; margin-right: 10%; margin-left: 10%; }
.company { font-family: Arial, Helvetica, Geneva, sans-serif; background-color: transparent; color: #b07001; font-style: normal; font-weight: bold; font-size: 16px; letter-spacing: 0.1em; line-height: 16px; text-align: center; margin: 40px auto auto; }
.music { font-family: Arial, Helvetica, Geneva, sans-serif; background-color: transparent; color: #203a4c; font-size: 10px; letter-spacing: 0.1em; line-height: 12px; text-align: center; margin-right: 10%; margin-left: 10%; }

/* For all pages - nest logo, gradient and solid containers in the body container*/
.container-body { position: relative; background-color: #a7c3c9; color: #203a4c; width: 800px; height: auto; border: outset 4px #366; text-align: center; margin: 10px auto 20px; }
.container-logo { width: 800px; height: 100px; }
.container-gradient { background-image: url(../images/backdrop-gradient.jpg); background-color: #a7c3c9; color: #203a4c; background-repeat: no-repeat; top: 0px; width: 800px; height: auto; }
.container-footer { background-image: url(../images/gradient-footer.jpg); width: 700px; height: 2px; margin: 40px auto auto; }

a:link { color: #0378d0; background-color: transparent; text-decoration: none; }
a:visited { color: #0378d0; background-color: transparent; text-decoration: none; }
a:hover { color: #b07001; background-color: transparent; text-decoration: none; }
a:active { color: #ffffff; background-color: transparent; text-decoration: none; }

/* link bar top  - 80px height is to allow for header text above links*/
.container-links-top { margin: auto; padding-top: 10px; margin-bottom: 40px; width: 640px; height: 80px; }
.linkbox { float: left; padding-top: 2px; color: #fff; background-color: #344958; width: 156px; height: 16px; border: outset 2px #366; 
font-family: Arial, Helvetica, Geneva, sans-serif; font-size: 11px; text-align: center; }
.linkbox-off { float: left; padding-top: 2px; color: #fff; background-color: #5b7e88; width: 156px; height: 16px; border: outset 2px #366; 
font-family: Arial, Helvetica, Geneva, sans-serif; font-size: 11px; text-align: center; }

.linkbox a:link { color: #fff; background-color: transparent; text-decoration: none; 
font-family: Arial, Helvetica, Geneva, sans-serif; font-size: 11px; line-height: 16px; }
.linkbox a:visited { color: #fff; background-color: transparent; text-decoration: none; font-size: 11px; line-height: 16px; }
.linkbox a:hover { display: block; background-image: url(../images/link-top-on.gif); background-color: transparent; color: #fff; }
.linkbox a:active { background-image: url(../images/link-top-on.gif); background-color: transparent; color: #fff; }

/* Use for one link button at bottom of page */
.linkbox-1 { margin: 20px auto; padding-top: 2px; color: #fff; background-color: #344958; width: 156px; height: 16px; border: outset 2px #366; 
font-family: Arial, Helvetica, Geneva, sans-serif; font-size: 11px; text-align: center; }

.linkbox-1 a:link { color: #fff; background-color: transparent; text-decoration: none; 
font-family: Arial, Helvetica, Geneva, sans-serif; font-size: 11px; line-height: 16px; }
.linkbox-1 a:visited { color: #fff; background-color: transparent; text-decoration: none; font-size: 11px; line-height: 16px; }
.linkbox-1 a:hover { display: block; background-image: url(../images/link-top-on.gif); background-color: transparent; color: #fff; }
.linkbox-1 a:active { background-image: url(../images/link-top-on.gif); background-color: transparent; color: #fff; }
/* Nest container-links-left and container-links-text divs in a this container with a clearfix div to ensure containers expands at bottom */
.container-links-left-main { width: 800px; height: auto; border: 0px solid #fff; padding-bottom: 20px; }

/* link bar left */
.container-links-left { margin: 40px auto 30px 20px; width: 120px; height: auto; }
.linkbox-l { float: left; padding-top: 2px; color: #fff; background-color: #344958; width: 116px; height: 32px; border: outset 2px #366; 
font-family: Arial, Helvetica, Geneva, sans-serif; font-size: 11px; line-height: 32px; text-align: center; }
.linkbox-l-off { float: left; padding-top: 2px; color: #fff; background-color: #5b7e88; width: 116px; height: 32px; border: outset 2px #366; 
font-family: Arial, Helvetica, Geneva, sans-serif; font-size: 11px;  line-height: 32px; text-align: center; }
.linkbox-l-thumb { float: left; width: 116px; height: 116px; border: outset 2px #366; }

.linkbox-l a:link { color: #fff; background-color: transparent; text-decoration: none; 
font-family: Arial, Helvetica, Geneva, sans-serif; font-size: 11px; }
.linkbox-l a:visited { color: #fff; background-color: transparent; text-decoration: none; font-size: 11px; }
.linkbox-l a:hover { display: block; background-image: url(../images/link-left-on.gif); background-color: transparent; color: #fff; }
.linkbox-l a:active { background-image: url(../images/link-left-on.gif); background-color: transparent; color: #fff; }

.link-two-lines { line-height: 16px; } /* Use in link bar left for two line links*/

/* Use for content next to link-bar-left. */
.container-links-text { margin-top: 0px; padding-top: 10px; float: right; width: 640px; height: auto; border: 0px solid #fff; }

/* Use for the four Home Page Thumbs - Use container-icon-long next to the four thumbs*/
.container-icon-text { width: 800px; height: auto; }
.container-icon { float: left; margin-left: 40px; width: 110px; height: auto; padding-bottom: 20px; }
.container-icon-long { float: left; margin-left: 40px; width: 110px; height: 160px; padding-bottom: 20px; }
.container-thumbs-4 { float: left; width: 480px; height: auto; margin-bottom: 20px; }
.thumbs-4 { float: right; width: 104px; padding: 2px; }

/* Use for icons on How To Use page*/
.container-howto { width: 600px; height: auto; }
.container-howto-text { float: left; width: 400px; height: auto; margin-right: 0px; margin-left: 0px; }
.container-howto-text-lg { float: left; width: 420px; height: auto; margin-right: 0px; margin-left: 0px; }
.container-howto-icon { float: left; margin-left: 40px; text-align: left; width: 100px; height: auto; padding-right: 2px; padding-bottom: 2px; }
.container-howto-icon-lg { float: left; margin-left: 40px; text-align: left; width: 140px; height: auto; padding-right: 2px; padding-bottom: 2px; }


/* Use for list on stress facts page. Note: must use margin-left in a percent value for bulets to show in IE. */
ul#stressfacts { list-style-type: disc; font-family: Bookman, "Times New Roman", Georgia, Times, serif; background-color: transparent; color: #203a4c; font-size: 14px; letter-spacing: 0.1em; line-height: 16px; text-align: left; margin-right: 40px; margin-left: 5%; }
li { padding-top: 10px; padding-bottom: 10px;}

/* Use for programs pages - nest both in container-links-text */
.container-music { float: left; padding-top: 70px; padding-bottom: 40px; padding-left: 10px; width: 260px; height: auto; border: 0px solid #fff; }
.container-program-pic { float: right; padding-top: 20px; padding-bottom: 20px; width: 330px; height: auto; margin-left: 10px; margin-right: 20px; border: 0px solid #fff; }
.pic-left { float: left; padding-right: 20px; width: 260px; height: auto; margin-left: 40px; }
.pic-right { float: right; padding-left: 20px; width: 260px; height: auto; margin-right: 40px; }

/* Use on overview page */
.pic-producers-right { float: right; padding-left: 20px; width: 160px; height: auto; margin-right: 40px; }