
/* general page layout */

*                   { margin: 0 auto; padding: 0; }
body                { background: #fff; color: #000; font: normal 0.9em/125% arial; text-align: center; padding: 10px; }
body a:link, a:visited, a:active { color: #990100; text-decoration: underline; }
p                   { font: normal 0.9em/150% arial; margin: 10px 0px; }
#main               { border: 1px solid #990100; width: 800px; }
#banner             { background-color: #990100; height: 28px; }
#sulair_logo        { background: #990100 url(../images/sulair_logo.png) no-repeat; height: 17px; position: relative; float: right; margin: 4px 8px 0px 0px; }
#sulair_link a      { position: relative; float: left; font: normal 0.7em/125% arial; color: #fff; padding: 2px 0px 0px 24px; }
#header             { border-bottom: 2px solid #990100; float: left; width: 100%; }
#logo               { float: left; width: 325px; height: 122px; padding: 0px; margin: 0px; }
#navigation         { background: #fff url(../images/logo_banner_slice.png) repeat-x; float: left; width: 475px; height: 122px; }
#functions          { width: 465px; height: 90px; }
#account_links      { width: 455px; height: 35px; font: normal 0.7em/150% arial; background-color: #fff; text-align: right; padding: 5px 0px 0px 0px; }
#quick_search_box   { clear: both; float: right; font: bold 0.75em/150% arial; background-color: #fff; margin-right: 10px; padding: 5px 10px; }
#quick_search_links { clear: both; float: left; padding: 0px 0px 5px 10px; }
#quick_search_form  { clear: both; }
#menu               { clear: both; float: left; font: bold 0.80em/150% arial; width: 453px; height: 26px; padding-top: 6px; }
#content            { clear: both; }
#footer             { clear: both; font: normal 0.7em/150% arial; border-top: 1px solid #990100; height: 39px; margin: 30px 0px 0px 0px; }
#footer_img         { background: #fff url(../images/mjf_icon.png) no-repeat; position: relative; float: left; width: 26px; height: 39px; margin: 0px 0px 0px 15px; }
#footer_links       { float: left; margin: 10px 0px 0px 0px; padding: 0px 0px 0px 5px; }
#copyright          { float: right; text-align: left; width: 250px; height: 39px; padding: 0px 5px 0px 0px; }
#copyright_logo     { background: #fff url(../images/copyright_logo.png) no-repeat; float: left; width: 32px; height: 38px; margin: 0px 8px 0px 0px; }
#copyright_text     { font: normal 0.95em/150% arial; color: #990100; text-align: left; padding: 4px 0px 0px 0px; }

/* site-wide styles */

.g_contentContainer { width: 750px; text-align: left; padding-top: 15px; overflow: hidden; }
.g_contentContainerWithSideMenu { position: relative; float: left; border-left: 1px dotted black; width: 547px; text-align: left; padding: 20px 20px 20px 20px; }
.g_header h3        { font: bold 1.0em/150% arial; color: #bd9a46; margin: 0px 0px 10px 0px; }

.g_listContainer    { width: 550px; text-align: left; margin: 0 auto; margin-top: 10px; padding: 0px 10px 0px 10px; }
.g_listItem         { width: 550px; border-bottom: 1px dotted black; margin: 0px 0px 10px 0px; padding: 0px 0px 10px 0px; }
.g_listItemLast     { width: 550px; margin: 0px 0px 10px 0px; padding: 0px 0px 10px 0px; }
.g_listItemText     { font: normal 0.85em/150% arial; }

.login_accountLinks         { width: 250px; float: left; }
.login_navigationLinks      { width: 250px; float: left; margin: 0px 0px 0px 50px; }
.g_linkRow                  { clear: both; float: left; width: 250px; margin: 0px 0px 5px 0px; }
.g_linkLabel                { float: left; font: normal 0.75em/100% arial; padding: 0px 5px 0px 0px; }
.g_smallRedLink a           { float: left; font: bold 0.7em/100% arial; color: #990000; }
.g_mediumBoldRedLink a      { font: bold 0.85em/120% arial; color: #990000; }
.g_largeBoldRedLink a       { font: bold 0.9em/150% arial; color: #990000; }
.g_smallBoldGreyLink        { font: bold 0.7em/100% arial; color: #666; }
.g_mediumBoldGreyLink a     { font: bold 0.85em/120% arial; color: #666; }
.g_smallBoldYellowLink a    { color: #bd9a45; }

.g_dottedDivider    { clear: both; width: 700px; border-bottom: 1px dotted black; margin: 0 auto; padding: 10px 20px 0px 20px; }

.g_form             { width: 740px; float: left; padding: 10px 0px 10px 0px; }
.g_formRow          { float: left; width: 100%; padding: 5px 0px 5px 0px; }
.g_formLabel        { float: left; width: 200px; font: normal 0.85em/150% arial; text-align: right; padding: 0px 10px 0px 0px; margin: 0px 0px 0px 40px; }
.g_formElement      { float: left; padding: 0px 10px 0px 0px; }
.g_formElement a    { font: normal 0.7em/100% arial; }

.g_contentContainerWithSideMenu	{ float: left; width: 560px; }
.g_sideMenuHeader           	{ width: 100%; text-align: left; font: bold 1.0em/150% arial; color: #bd9a46; margin: 0px 0px 10px 0px; }
.g_sideMenuContainer        	{ width: 180px; position: relative; float: left; padding: 20px 0px 20px 15px; }
.g_sideMenuItem             	{ clear: both; position: relative; float: left; width: 165px; text-align: left; line-height: 100%; margin: 0px 0px 10px 0px; }
.g_sideMenuItemWithSubMenu  	{ clear: both; position: relative; float: left; width: 165px; text-align: left; line-height: 100%; margin: 0px 0px 10px 0px; }
.g_sideSubMenuItem          	{ clear: both; position: relative; float: left; width: 165px; text-align: left; }

.g_imageLeft            { float: left; width: 225px; margin: 5px 20px 5px 0px; }
.g_largeImageLeft       { clear: both; float: left; width: 265px; margin: 5px 20px 5px 0px; }
.g_imageRight           { float: right; width: 225px; margin: 5px 0px 5px 20px; }
.g_largeImageRight      { clear: both; float: right; width: 265px; margin: 5px 0px 5px 20px; }
.g_imageCaptionLeft     { clear: both; font: normal 0.9em/150% arial; text-align: left; padding-top: 5px; }
.g_imageCaptionCenter   { clear: both; font: normal 0.9em/150% arial; text-align: center; padding-top: 5px; }
.g_imageCaptionRight    { clear: both; font: normal 0.9em/150% arial; text-align: right; padding-top: 5px; }
.g_imageCopyright       { clear: both; font: bold 0.8em/125% arial; color: #666; padding: 10px 0px 5px 0px; }
		
/* generic styles */

.roundedBox                     { position: relative; float: left; margin: 0; background: #fff; border: 1px solid #bfbfbf; }
.roundedBox .top_left           { position: absolute; top: -1px; left: -1px; width: 8px; height: 8px; background: url(../images/top_left_corner.png) 0 0 no-repeat; }
.roundedBox .top_right          { position: absolute; top: -1px; right: -1px; width: 8px; height: 8px; background: url(../images/top_right_corner.png) 100% 0 no-repeat; }
.roundedBox .bottom_left        { position: absolute; bottom: -1px; left: -1px; width: 8px; height: 8px; background: url(../images/bottom_left_corner.png) 0 100% no-repeat; }
.roundedBox .bottom_right       { position: absolute; bottom: -1px; right: -1px; width: 8px; height: 8px; background: url(../images/bottom_right_corner.png) 100% 100% no-repeat; }
.roundedBox .content            { position: relative; float: left; padding: 0px 15px 0px 15px; }
.roundedBox .data               { position: relative; float: left; width: 250px; padding: 15px 20px; }
.roundedBox .results            { position: relative; float: left; width: 175px; padding: 0px 0px 5px 10px; }
.roundedBox .image              { position: relative; float: left; padding: 10px; }
.roundedBox .caption_left       { font: normal 0.8em/150% arial; text-align: left; padding-top: 5px; } 
.roundedBox .caption_right      { font: normal 0.8em/150% arial; text-align: right; padding: 5px 5px 0px 0px; } 
.roundedBox .clear              { font-size: 1px; height: 1px; }

.g_message              { margin: 0px 0px 0px 5px; }
.g_infoMessageBox       { color: #00529B; background: #BDE5F8 url(../images/info_icon.png); }
.g_successMessageBox    { color: #4F8A10; background: #DFF2BF url(../images/success_icon.png); }
.g_warningMessageBox    { color: #9F6000; background: #FEEFB3 url(../images/warning_icon.png); }
.g_errorMessageBox      { color: #D8000C; background: #FFBABA url(../images/error_icon.png); }
.g_validationMessageBox { color: #D63301; background: #FFCCBA url(../images/validation_icon.png); }
.g_infoMessageBox, .g_successMessageBox, .g_warningMessageBox, .g_errorMessageBox, .g_validationMessageBox { clear: both; border: 1px solid; margin: 0px 0px 15px 0px; padding: 15px 10px 15px 50px; background-repeat: no-repeat; background-position: 10px center; font: normal 0.85em/150% arial; }

#menu ul.bulleted_inline_list           { position: relative; float: right; margin: 0px; padding: 0px; }
#menu ul.bulleted_inline_list li        { display: inline; float: left; padding: 0px 5px 0px 0px; }
#menu ul.bulleted_inline_list li.middle { background: url(../images/bullet.png) no-repeat; background-position: 0.4em; padding: 0px 5px 0px 20px; }
#menu ul.bulleted_inline_list li.last   { background: url(../images/bullet.png) no-repeat; background-position: 0.4em; padding: 0px 5px 0px 20px; }

#quick_search_box ul.bulleted_inline_list           { position: relative; float: left; margin: 0px; padding: 0px; }
#quick_search_box ul.bulleted_inline_list li        { display: inline; float: left; padding: 0px 3px 0px 0px; }
#quick_search_box ul.bulleted_inline_list li.middle { background: url(../images/bullet.png) no-repeat; background-position: 0.4em; padding: 0px 0px 0px 15px; }
#quick_search_box ul.bulleted_inline_list li.last   { background: url(../images/bullet.png) no-repeat; background-position: 0.4em; padding: 0px 0px 0px 15px; }

.details_functions ul.bulleted_inline_list              { position: relative; float: left; margin: 0px; padding: 0px; }
.details_functions ul.bulleted_inline_list li           { display: inline; float: left; padding: 0px 2px 0px 0px; }
.details_functions ul.bulleted_inline_list li.middle    { background: url(../images/bullet.png) no-repeat; background-position: 0.4em; padding: 0px 0px 0px 13px; }
.details_functions ul.bulleted_inline_list li.last      { background: url(../images/bullet.png) no-repeat; background-position: 0.4em; padding: 0px 0px 0px 13px; }

ul.piped_inline_list            { position: relative; float: left; margin: 0px; padding: 0px 0px 0px 0px; }
ul.piped_inline_list li         { position: relative; float: left; display: inline; margin: 0px 0px 0px 0px; }
ul.piped_inline_list li.middle  { background: url(../images/pipe.png) no-repeat; background-position: 0.7em; padding: 0px 0px 0px 15px; }
ul.piped_inline_list li.last    { background: url(../images/pipe.png) no-repeat; background-position: 0.7em; padding: 0px 0px 0px 15px; }

ul.block_list                   { position: relative; float: left; list-style-type: none; margin: 0px; padding: 0px; }
ul.block_list li                { float: left; background: url(../images/bullet.png) no-repeat left center; font: normal 0.8em/150% arial; line-height: 100%; padding: 5px 0px 0px 10px; margin: 0px 0px 0px 5px; }

/* media player */

#playlist li.playlistItem               { position: relative; clear: both; float: left; width: 100%; font: normal 0.8em/1.6 arial; border-bottom: 2px solid #e3d098; }
#playlist li.playlistItem a             { position: relative; float: left; width: 90%; color: #565347; display: block; outline: none; padding: 4px 10px; text-decoration: none; }
#playlist li.playlistItem a:hover       { display: block; background-color: #a01510; color: #e3d098; }
#playlist li.playlistItem .performer    { font: bold 1.0em/1.6 arial; }
#playlist li.playlistItem .song_title   { float: left; width: 90%; }
#playlist li.playlistItem .icon img     { position: absolute; bottom: 4px; }
#playlist li.playlistItemSelected       { background-color: #645f4f; color: #e3d098; display: block; outline: none; padding: 4px 10px; text-decoration: none; }

/* home page */

.home_links                         { width: 750px; margin: 0px; }
.home_media                         { float: right; width: 500px; height: 240px; margin: 10px 5px 20px 20px; }
.home_media #playlist               { width: 200px; height: 240px; background-color: #d5c48f; color: #565347; list-style: none; margin: 0; overflow: auto; padding: 0; }
.home_media #media_player           { float: left; width: 300px; padding: 0px; margin: 0px; } 
.home_media #media_player_playlist  { float: left; width: 200px; }
.home_media .javascript_message     { float: left; width: 278px; height: 218px; padding: 10px; font: normal 0.85em/150% arial; border: 1px solid black; }

/* highlights */

.highlights_media                           { float: left; width: 550px; height: 240px; margin: 10px 0px 20px 5px; }
.highlights_media #playlist                 { width: 250px; height: 240px; background-color: #d5c48f; color: #565347; list-style: none; margin: 0; overflow: auto; padding: 0; }
.highlights_media #media_player             { float: left; width: 300px; padding: 0px; margin: 0px; } 
.highlights_media #media_player_playlist    { float: left; width: 250px; }
.highlights_media .javascript_message       { float: left; width: 278px; height: 218px; padding: 10px; font: normal 0.85em/150% arial; border: 1px solid black; }

/* browse */

.browse_byListItem              { padding: 6px 0 6px 0; border-bottom: 1px solid #cbc5b8; }
.browseResults                  { width: 570px; position: relative; float: left; }
.browseResults_summary          { font: normal 0.85em/150% arial; color: #666; padding: 0px 0px 10px 0px; }
.browseResults_data             { font: normal 0.85em/150% arial; float: left; }
.browseResults_tableHeader      { width: 570px; overflow: auto; color: #666; border-bottom: 1px solid #bd9a45; border-width: 2px; }
.browseResults_column           { width: 190px; float: left; }
.browseResults_element          { clear: both; overflow: auto; }
.browseResults_sections         { position: relative; float: left; width: 570px; font: bold 0.9em/150% arial; padding: 0px 0px 10px 20px; }
.browseResults_selectedSection  { float: left; color: #bd9a45; padding: 2px 5px 2px 5px; }
.browseResults_unselectedSection { float: left; color: #990000; padding: 2px 5px 2px 5px; }
.browseResults_disabledSection  { float: left; color: #666; padding: 2px 5px 2px 5px; }

/* search results */

.searchResults                      { position: relative; float: left; width: 530px; border-right: 1px dotted black; padding: 0px 10px 0px 0px; }
.searchResults_headerWithOption     { float: left; width: 100%; font: bold 1.0em/150% arial; color: #bd9a46; margin: 0px 0px 10px 0px; } 
.searchResults_header               { float: left; }
.searchResults_sortOption           { float: right; width: 200px; text-align: right; }
.searchResults_sortOptionLabel      { float: left; width: 35%; color: #4b4b4b; font: bold 0.8em/150% arial; margin-top: 2px; }
.searchResults_sortOptionMenu       { float: right; width: 60%; }
.searchResults_formMessages         { width: 100%; float: left; background-color: #f4f4f4; font: normal 0.85em/150% arial; }
.searchResults_summary              { position: relative; float: left; width: 100%; border-bottom: 1px solid #ccc; }
.searchResults_searchQuery          { float: left; width: 100%; color: #bd9a46; font: bold 0.8em/150% arial; margin: 0px 0px 10px 0px; }
.searchResults_searchQueryField     { color: #4b4b4b; }
.searchResults_data                 { float: left; width: 100%; font: normal 0.8em/150% arial; }
.searchResults_element              { clear: both; float: left; width: 100%; overflow: auto; margin: 10px 0px 0px 0px; padding: 0px 0px 10px 0px; border-bottom: 1px solid #ccc; }
.searchResults_elementThumbnail     { width: 40px; height: 60px; float: left; padding: 0px 10px 0px 10px; }
.searchResults_elementContent       { float: left; width: 465px; }
.searchResults_elementFunctions     { float: left; width: 200px; text-align: right; }
.searchResults_elementTitle         { float: left; width: 467px; font: bold 1.0em/150% arial; color: #990100; }
.searchResults_elementTitleWithOption { font: bold 1.0em/150% arial; color: #990100; float: left; width: 329px; }
.searchResults_elementOption        { float: left; width: 136px; text-align: right; }
.searchResults_elementLabel         { clear: both; float: left; width: 120px; font: bold 0.9em/100% arial; color: #4B4B4B; padding: 4px 0px 2px 0px; margin: 0px; }
.searchResults_elementText          { float: left; width: 345px; font: normal 1.0em/150% arial; color: #000000; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; }
.searchResults_pagination           { float: left; width: 100%; font: normal 0.8em/150% arial; text-align: center; padding: 10px 0px 0px 0px; }
.searchResults_paginationInfo       { font: normal 0.9em/150% arial; text-transform: Uppercase; color: #BD9A46; padding: 5px 5px 5px 0px; }
.searchResults_paginationSelectedLink { text-color: #415481; margin: 0px 5px 0px 0px; }
.searchResults_paginationUnselectedLink a { text-color: #333; margin: 0px 5px 0px 0px; }
.searchResults_facets               { float: left; width: 185px; padding: 0px; margin: 0px 0px 0px 20px; }
.searchResults_facetResult          { margin: 0px 0px 10px 0px; }
.searchResults_facetResultHeader    { font: bold 0.8em/150% arial; color: #666; margin: 10px 0px 10px 0px; }
.searchResults_facetResultCategoryHeader { font: bold 0.8em/150% arial; color: #666; }
.searchResults_facetResultElement   { font: normal 0.8em/150% arial; color: #bd9a46; padding: 0px 5px 0px 0px; }

/* segment details */

.details                        { position: relative; float: left; width: 99%; }
.details_functions              { float: left; width: 99%; border: 1px solid #bfbfbf; background-color: #f4f4f4; font: bold 0.72em/150% arial; margin: 0px 0px 20px 0px; padding: 8px 0px 8px 10px; }
.details_data                   { float: left; width: 480px; font: normal 0.9em/150% arial; }
.details_primaryData            { float: left; width: 100%; }
.details_secondaryData          { float: left; width: 100%; margin: 40px 0px 40px 0px; }
.details_physicalData           { clear: both; float: left; margin-left: 50px; }
.details_elementContent         { clear: both; float: left; width: 465px; margin-bottom: 2px; }
.details_elementLabel           { float: left; width: 110px; font: bold 1.0em/150% arial; color: #4b4b4b; }
.details_elementTextContainer   { float: left; width: 355px; }
.details_elementTitle           { float: left; width: 355px; font: bold 1.0em/150% arial; color: #990100; }
.details_elementText            { float: left; font: normal 1.0em/150% arial; width: 355px; }
.details_boxContent             { clear: both; float: left; width: 100%; margin-bottom: 2px; }
.details_boxLabel               { font: bold 1.0em/150% arial; float: left; width: 110px; color: #4b4b4b; }
.details_boxTextContainer       { float: left; }
.details_boxText                { float: left; font: normal 1.0em/150% arial; }
.details_searchIcon img         { width: 15px; height: 15px; margin: 0px 0px -3px 10px; }
.details_poster                 { float: left; width: 250px; font: normal 1.0em/150% arial; color: #4b4b4b; }
.details_posterCaption          { float: left; width: 100%; font: normal 0.9em/150% arial; text-align: center; padding: 5px 0px 5px 0px; }
.details_searchOptions          { clear: both; position: relative; float: right; width: 200px; margin: 25px 25px 0px 0px; }
.details_searchOptionsHeader    { font: bold 0.8em/150% arial; color: #bd9a46; }

/* favorites */

.favorites_results          { position: relative; float: left; width: 740px; }
.favorites_functionLabel    { float: left; width: 135px; font: bold 0.9em/100% arial; text-align: right; color: #4B4B4B; padding: 4px 0px 2px 0px; margin: 0px; }
.favorites_functionText     { float: left; width: 65px; font: normal 1.0em/150% arial; color: #000000; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; }

/* related resources */
.resources_header h3        { float: left; width: 580px; font: bold 1.0em/150% arial; color: #bd9a46; margin: 0px 0px 10px 0px; }
.resources_headerLink       { float: left; width: 150px; font: bold 0.8em/150% arial; color: #990100; text-align: right; }
.resources_element          { clear: both; float: left; width: 680px; margin: 5px; padding-left: 3em; text-indent: -2em; font: normal 0.9em/150% arial; }

