/*
==============================================================================
  St. Joseph Catholic Church, Strongsville, Ohio (http://www.sjohio.org)

    Project:    Website
    Component:  Styles for layout and content
    Author:     W
    Dependent:  reset.css
    Notes:      -
    Reference:  -
    Version:    2010-05-14: W - Created
                2010-06-24: W - Valid CSS 2.1
                2010-06-27: W - Modified fonts and spacing
                2010-08-05: W - Use <em> and <strong> over <i> and <b>
                2010-09-03: W - added 2 more personbox height options
                2010-09-08: W - added <h4> styles
                2010-10-11: W - added status messages
                2010-10-15: W - changed #brand from h1 to h6
                2010-11-16: W - changed footer background
                2010-12-08: W - removed subnav link background
                2011-08-05: W - added form element styles
                2011-08-23: W - added music icon list styles, background
                2014-08-16: W - added form styles for registrations
                2014-11-04: W - added caption style for main block
                2015-09-28: W - enlarged slogan image
==============================================================================
*/


/* Foundation
 * ------------------------------------------------------------------------- */
html, body {height: 100%;}
body {background: #F5F5F5 url("../images/background/beige_diagonal.png") 0 0 repeat;}  /* shows on either side */


/* Typography
 * ------------------------------------------------------------------------- */
/* 
   Global default, direct content, navigation (CAPITALIZED), lists, tables,
   and page body should use the wide sans-serif based font stack found in 'reset.css'.
   Navigational elements should be completely capitalized.
   
   Titles, headings, tooltips, quotes, 
   or in general any indirect content should use the serif based font stack below.
   
   Special content where the character width must fixed and constant
   for all letters and numbers such as programming code or data display
   should should use the monospaced font stack below.
*/

h1, h2, h3, h4, h5, h6,
#main cite strong, 
#main blockquote, 
#main a.tooltip span, 
#main .thumb h3 strong, 
#main h4 a,
#right blockquote, .ajaxSearch_resultLink
{font-family: Georgia, Constantia, Book Antiqua, Didot, 'Century Schoolbook', 'Century Schoolbook L', 'DejaVu Serif', 'Bitstream Vera Serif', 'Liberation Serif', 'Times New Roman', Times, serif;}

pre, code
{font-family: Consolas, 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', 'Courier New', Courier, monospace;}

/* Float Containment & Bug Fixes (Do NOT alter these)
 * ------------------------------------------------------------------------- */
body:before
{ 
  content: "";                        /* Opera min-height 100% Fix (Maleika) */
  height: 100%;
  float: left;
  width: 0;
  margin: -32767px 0 0 0;             /* eliminate need for inner non clearing element (Erik.J) */
}

#wrapper:after, 
#inner:after                          /* #wrapper:after for IE8 min-height:100% Fix */
{ 
  clear: both;                        /* #inner:after for Float Containment */
  content: "";
  display: block;
  height: 1%;                         /* fix IE8 min-height:100% bug (Erik.J) */
  font-size: 0;
}


/* Layout Structure
 * ------------------------------------------------------------------------- */
#wrapper
{
  max-width: 970px; 
  min-width: 970px; 
  min-height: 100%;                   /* height is determined from parent's height (html & body) */
  margin: 0 auto auto auto;
  padding: 0 15px 0 15px;
  border: 0px solid purple;           /* #DEBUG: set to 0px otherwise */
  position: relative;                 /* establish containing block for AP #faux div */
  background: #FFFFFF url("../images/background/double_edge.png") 0 0 repeat-y;
}


/* Header
 * ------------------------------------------------------------------------- */
#header
{
  background: #DBFFFF url("../images/background/blue_diagonal.png") 0 0 repeat-x;
  height: 120px;
  position: relative;                 /* establish stacking order for z-index */
  z-index: 2;                         /* layer it above the #faux column */
}

#brand                                /* title, logo, slogan */
{
  position: absolute;
  top: 20px;
  left: 30px;
  width: 500px;
  height: 70;
}

#brand h6
{
  width: 500px;
  height: 70px;
  background: url("../images/logo/title_slogan.gif") 0 0 no-repeat;
  text-indent: -9000px;               /* hide title text behind logo */
}

#triplet                              /* for image slideshow */
{
  position: absolute;
  top: 15px;
  left: 580px;
  width: 370px;
  height: 90px;
}

#triplet img {display: none;}
#triplet img.first {display: block;}  /* need this to hide display glitch on load */


/* Persistent Main Navigation Bar
 * ------------------------------------------------------------------------- */
#nav
{
  width: 100%;                        /* IE haslayout */
  height: 35px;
  color: #FFFFFF;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  background: #18537B url("../images/background/navigation.png") 0 0 repeat-x;
  text-align: left;                   /* entire bar should justify from left */
  position: relative;
  z-index: 3;
}

#nav li
{
  /* display: -moz-inline-box;  */    /* hack for FF2 (inline-box must be used for shrink wrapping) DOES NOT VALIDATE */
  display: inline-block;              /* for modern browsers */
  margin: 4px -1px -1px -1px;         /* use -1px to kill double borders */
  border-left: 1px solid #769DB6;
  padding: 0 8px 0 10px;
}

* html #nav li {display: inline;}
* + html #nav li {display: inline;}   /* inline-block trigger for IE6 */

#nav li a
{
  display: inline-block;              /* inline-block trigger for IE7; IE6/7 need this (haslayout) */
  height: 2.00em;                     /* need for IE6 */
  line-height: 2.00em;                /* center text vertically */
  text-decoration: none;
  color: #FFFFFF;
  font-weight: normal;
  font-size: 0.69em;
  text-transform: uppercase;
  /*letter-spacing: 0.01em;*/
}

#nav li.first
{
  border-left: 0;                     /* remove border on first menu item */
  height: 0.63em;                     /* need for IE6 */
  font-weight: normal;
  margin: 0 0 0 9px;
  color: #FFFFFF;
}

#nav li a.pinned
{
  background: url("../images/background/underdot_blue.gif") bottom left repeat-x;
  text-decoration: none;
}

#nav li a:hover, #nav li a:active, #nav li a:focus {background: none; text-decoration: underline;}


/* Left Column & Sub-Nav
 * ------------------------------------------------------------------------- */
#inner
{
  width: 100%;                        /* haslayout */
  padding: 0 0 35px 0;                /* preserve footer space (plus 10px for text spacing) */
  background: #FFFFFF;                /* set same as wrapper background or none */
  border-bottom: 0px dashed red;      /* #DEBUG: sticky footer push line, set to 0px otherwise */
  border: 0px solid black;            /* #DEBUG: set to 0px otherwise */
}

#left
{
  float: left;
  width: 175px;                       /* 25 less than faux */
  padding: 10px 1px 0 20px;           /* recover border from #faux */
  position: relative;
  z-index: 2;                         /* layer it above the #faux column */
  border: 0px solid red;              /* #DEBUG: set to 0px otherwise */
}

#subnav li a
{
  font-weight: bold;
  font-size: 0.69em;
  line-height: 2.00em;
  height: 2.00em;                     /* need for IE6 */
  color: #000000;
  text-decoration: none;
  text-transform: uppercase;
  padding: 0 0 4px 0;
}

#subnav li a.pinned
{
  color: #000000;
  text-decoration: none;
  background: transparent url("../images/background/underdot_gray.gif") bottom left repeat-x;
}

#subnav li a:hover, #subnav li a:active, #subnav li a:focus {background: none; text-decoration: underline;}


/* Right Sidebar / Column
 * ------------------------------------------------------------------------- */
#right
{
  float: right;
  padding: 30px 0 0 1px;              /* recover border from #faux */
  position: relative;
  z-index: 2;                         /* layer it above the #faux column */
  border: 0px solid blue;             /* #DEBUG: set to 0px otherwise */
}

#right ul.pdf_small
{
  line-height: 1.00em;
  padding: 2px 0 0 15px;
  list-style-position: outside;       /* need this to prevent indent in IE6 */
  list-style-type: none;
}

#right ul.pdf_small li
{
  padding: 5px 0 5px 25px;
  font-size: 0.75em;
  background: transparent url("../images/icon/pdf_16.png") 0 5px no-repeat;
}

#right small.caption
{
  color: #665544;
  font-weight: normal;
  font-size: 0.69em;
  font-style: italic;
}

#right h2 img {padding: 0 8px 0 0; float: left;}

#right blockquote
{
  background: url("../images/icon/quote_24.png") 0 4px no-repeat;
  padding: 5px 10px 0 30px;
  font-style: italic;
  color: #665544;
  font-size: 0.75em;
  font-weight: normal;
  letter-spacing: 1px;
}

#right blockquote strong
{
  text-transform: uppercase;
  font-style: normal;
  font-weight: normal;
  letter-spacing: 1px;
  font-size: 0.88em;
}


/* Rounded Corner Box
 * ------------------------------------------------------------------------- */
.roundbox
{
  background: url("../images/background/roundcorner_tl.png") top left no-repeat;
  position: relative;
  width: 245px;
}

.roundbox_top {background: url("../images/background/roundcorner_tr.png") top right no-repeat;}
.roundbox_bottom {background: url("../images/background/roundcorner_bl.png") bottom left no-repeat;}
.roundbox_bottom div {background: url("../images/background/roundcorner_br.png") bottom right no-repeat;}
.roundbox_content {background: url("../images/background/roundcorner_r.png") top right repeat-y;}
.roundbox_content, .roundbox_bottom {margin: 0px 0 0 0;}

.roundbox_top div, 
.roundbox_top, 
.roundbox_bottom div, 
.roundbox_bottom
{
  width: 100%;
  height: 15px;
  font-size: 1px;
}

.roundbox_content
{
  padding: 0px 15px 0 15px;
  margin: -3px 0 0 0px;
  color: #665544;
  font-weight: normal;
  line-height: 1.06em;
}

.roundbox_content h2
{
  background: url("../images/background/underdot_gray.gif") repeat-x bottom;
  font-size: 1.06em;
  font-weight: normal;
  padding: 0 0 6px 0;
  line-height: 1.50em;
  height: 1.50em;                     /* need for IE6 */
  letter-spacing: 1px;
  margin: 0 0 8px 0;
}

.roundbox_content p {font-size: 0.75em;}
.roundbox_content a {color: #112244; text-decoration: none;}
.roundbox_content p a {text-decoration: underline;}
.roundbox_content a:hover {text-decoration: underline;}
.roundbox_content img {padding: 1px 7px 0 0; float: left;}

.roundbox_content address
{
  font-size: 0.93em;
  padding: 20px 0 15px 0;
  line-height: 1.38em;
}


/* Main Content Area
 * ------------------------------------------------------------------------- */
#main
{
  overflow: hidden;                   /* stop content from sliding under floated side columns (IE7 haslayout) */
  background: #FFFFFF;                /* same as #wrapper background or none */
  padding: 18px 20px 0 30px;
  border: 0px solid green;            /* #DEBUG: set to 0px otherwise */
  position: static;                   /* setting to relative breaks list (ul,li) backgrounds in IE6 */
}

#main h1
{
  border-bottom: 2px dotted #DDCCBB;
  color: #AA4411;
  font-size: 1.32em;
  font-weight: normal;
  margin: 0 0 10px 0;
  letter-spacing: 0.02em;
}

#main h2 em {font-style: normal;}
#main h2
{
  background: url("../images/background/underdot_gray.gif") repeat-x bottom;
  font-size: 0.93em;
  font-weight: bold;
  color: #665544;
  padding: 20px 0 4px 0;
  margin: 0 0 5px 0;
  clear: both;
}

#main .thumb h3 {font-size: 0.88em; font-weight: bold; color: #112244;}
#main .thumb h3 strong {line-height: 1.75em;}
#main .thumb h3 a {text-decoration: none;}
#main .thumb h3 a:hover {text-decoration: underline;}
#main .thumb h3 em
{
  font-size: 0.88em;
  letter-spacing: 0.04em;
  font-weight: normal;
  font-style: italic;
}

#main .thumb h3 span a {text-decoration: underline;}
#main .thumb h3 span
{
  font-size: 0.88em;
  font-weight: normal;
  color: #665544;
}

#main h4 a {color: #112244; text-decoration: underline;}
#main h4 a:hover {text-decoration: underline;}
#main h4
{
  font-size: 0.93em;
  font-weight: bold;
  color: #665544;
  padding: 30px 0 0 0;
  margin: 0 0 5px 0;
  clear: both;
}

#main p
{
  color: #665544;
  font-size: 0.75em;
  font-weight: normal;
  clear: both;
}

#main a {color: #112244; text-decoration: underline;}
#main a:focus, #main a:hover, #main a:active {color: #AA4411;}
#main a:focus, #main a:active {outline: none; background-color: #F4F2E4; color: #000000;}

#main a.tooltip:hover {position: relative; cursor: help;}
#main a.tooltip span {display: none;}
#main a.tooltip:focus, #main a.tooltip:hover, #main a.tooltip:active {color: #112244;}
#main a.tooltip:focus, #main a.tooltip:active {outline: none; background: none;}

#main a.tooltip
{
  border-bottom: 1px dashed #665544;
  text-decoration: none;
  position: relative;
  z-index: 10;
}

#main a.tooltip:hover span
{
  display: block;
  position: absolute;
  top: 0.50em;
  left: 3.00em;
  padding: 5px 5px 5px 5px;
  margin: 0 0 0 0;
  background: #F0F0F0;                /* this could be an image with a little info icon */
  border: 1px dashed #C0C0C0;         /* not valid in CSS 2.1 opacity: 1.00; */
  width: 200px;
}

#main img {padding: 5px 10px 5px 0; float: left;}
#main img.righty {float: right;}

#main blockquote
{
  background: url("../images/icon/quote_24.png") 10px 4px no-repeat;
  padding: 5px 0 0 40px;
  font-style: italic;
  color: #665544;
  font-size: 0.75em;
  font-weight: normal;
  letter-spacing: 1px;
  margin: 10px 0 0 0;
}

#main blockquote strong
{
  text-transform: uppercase;
  font-style: normal;
  font-weight: normal;
  letter-spacing: 1px;
  font-size: 0.88em;
}

#main ul
{
  padding: 0 0 0 15px;
  list-style-position: outside;       /* need this to prevent indent in IE6 */
  list-style-type: none;
}

#main ul li
{
  font-size: 0.75em;
  color: #665544; 
  padding: 0 0 5px 20px;
  background: transparent url("../images/icon/diamond_gray_7.gif") 0 6px no-repeat;
}

#main ul li.person_female
{
  padding: 6px 0 0 25px;
  background: transparent url("../images/icon/person_female_16.png") 0 6px no-repeat;
}

#main ul li.person_male
{
  padding: 6px 0 0 25px;
  background: transparent url("../images/icon/person_male_16.png") 0 6px no-repeat;
}

#main ul li.person_cleric
{
  padding: 6px 0 0 25px;
  background: transparent url("../images/icon/person_cleric_16.png") 0 6px no-repeat;
}

#main div.divider {height: 45px; background: url("../images/background/divider.png") no-repeat scroll center;}
#main div.divider hr {color: #000000; display: none;}

#main cite {font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.09em;}
#main cite strong {font-size: 1.32em; letter-spacing: 1px; font-weight: normal;}

#main .personbox
{
  font-size: 1.00em;
  padding: 0 0 0 0;
  text-align: center;
  width: 200px;
  height: 200px;
  float: left;
  margin: 10px 10px 20px 10px;
}

#main .personbox_short {height: 140px;}
#main .personbox_medium {height: 160px;}
#main .personbox img {float: none; display: block; margin: auto; padding: 0 0 5px 0;}

#main small.caption
{
  color: #665544;
  font-weight: normal;
  font-size: 0.69em;
  font-style: italic;
}


/* Status Messages
 * ------------------------------------------------------------------------- */
.status_ok
{
  border: solid 1px #8FAD3D;
  background: #E6F4D5 url("../images/icon/status_ok_16.png") 8px 6px no-repeat;
  color: #000000;  /* #168A43; */
  padding: 5px 4px 5px 34px;
  text-align: left;
  font-size: 0.75em;
}

.status_warning 
{
  border: solid 1px #F4C74A;
  background: #FCF9CE url("../images/icon/status_warning_16.png") 8px 6px no-repeat;
  color: #000000;  /* #A77C00; */
  padding: 5px 4px 5px 34px;
  text-align: left;
  font-size: 0.75em;
}

.status_error
{
  border: solid 1px #CB2026;
  background: #F6CBCA url("../images/icon/status_error_16.png") 8px 6px no-repeat;
  color: #000000;  /* #A80000; */
  padding: 5px 4px 5px 34px;
  text-align: left;
  font-size: 0.75em;
}


/* Document / File Lists
 * ------------------------------------------------------------------------- */
#main ul.pdf_large, 
#main ul.flv_large, 
#main ul.mus_large, 
#main ul.jpg_large
{
  font-size: 0.75em;
  color: #665544; 
  line-height: 1.40em;
  padding: 30px 0 0 15px;
  list-style-position: outside;       /* need this to prevent indent in IE6 */
  list-style-type: none;
}

#main ul.pdf_large li, 
#main ul.flv_large li, 
#main ul.mus_large li, 
#main ul.jpg_large li
{
  font-size: 0.93em;
  font-weight: normal;
  padding: 5px 0 15px 42px;  
}

#main ul.pdf_large a, 
#main ul.flv_large a,
#main ul.mus_large a,
#main ul.jpg_large a
{
  font-weight: bold;
  font-size: 1.06em;
}

#main ul.pdf_large li {background: transparent url("../images/icon/pdf_32.png") 0 5px no-repeat;}
#main ul.flv_large li {background: transparent url("../images/icon/video_32.png") 0 5px no-repeat;}
#main ul.mus_large li {background: transparent url("../images/icon/music_32.png") 0 5px no-repeat;}
#main ul.jpg_large li
{
  background: transparent url("../images/icon/photos_32.png") 0 5px no-repeat;
  float: left;
  height: 40px;
  width: 300px;
}

#main ul.pdf_small,
#main ul.jpg_small
{
  line-height: 0.50em;
  padding: 2px 0 0 15px;
  list-style-position: outside;       /* need this to prevent indent in IE6 */
  list-style-type: none;
}

#main ul.pdf_small li
{
  padding: 9px 0 5px 25px;
  background: transparent url("../images/icon/pdf_16.png") 0 5px no-repeat;
}

#main ul.jpg_small li
{
  padding: 9px 0 5px 25px;
  background: transparent url("../images/icon/camera_16.png") 0 5px no-repeat;
}

#main dl {font-size: 0.75em; color: #665544; line-height: 1.40em;}
#main dl dt {padding: 2px 0px 2px 0px;}
#main dl dd {padding: 0px 0px 15px 25px;}


/* Media Player
 * ------------------------------------------------------------------------- */
#mediaspace {z-index: 0;}
#mediaspace_border
{
  position: absolute;
  top: 271px;
  left: 241px;
  width: 478px;                       /* full dimension is 480 x 270 */
  height: 269px;
  z-index: 99;
  border-style: solid solid solid solid;
  border-width: 1px 1px 1px 1px;
  border-color: #000000;
}


/* Sticky Footer
 * ------------------------------------------------------------------------- */
#footer
{
  max-width: 1000px;
  min-width: 1000px; 
  position: relative;                 /* establish stacking order for z-index */
  z-index: 2;                         /* layer it above the #faux column */
  height: 25px;
  margin: -25px auto 0 auto;          /* pull footer back into viewport with negative top margin */
  border: 0px solid #000000;          /* make total width same as #wrapper */
  background: transparent url("../images/background/footer.gif") 0 0 no-repeat;
  white-space: nowrap;
  padding: 0 0 0 0;
  color: #000000;
}

#footer p
{
  color: #000000;
  font-weight: normal;
  text-align: left;
  margin: 0 0 0 0;
  padding: 4px 0 0 225px;
}

#footer small
{
  color: #FFFFFF;
  background: #782711 url("../images/background/footer_inner.png") 0 0 repeat-x;
  font-size: 0.69em;
  vertical-align: middle;
}

#footer a
{
  text-decoration: none;
  color: #FFFFFF;
  padding: 0 20px 0 25px;
  background: transparent url("../images/icon/diamond_white_5.gif") 0 5px no-repeat;  /* #4A3020 */
}

#footer a.first {background: transparent; padding: 0 15px 0 0;}
#footer a:hover, #footer a:active, #footer a:focus {text-decoration: underline;}


/* Tables
 * ------------------------------------------------------------------------- */
table.officehours td
{
  font-size: 0.75em;
  color: #665544;
  vertical-align: top;
}

table.listeventsgrid {border-collapse: collapse; font-size: 0.75em;}

table.listeventsgrid td
{
  color: #665544;
  vertical-align: top;
  border: 1px solid #CCCCCC;
  padding: 4px 4px 4px 6px;
}

table.listeventsgrid th
{
  font-weight: bold;
  color: #FFFFFF;
  background-color: #769DB6;
  border: 1px solid #18537B;
  vertical-align: top;
  text-align: center;
}

table.inputform td
{
  padding: 3px 3px 3px 0px;
}


/* Search Form & Results
 * ------------------------------------------------------------------------- */
#search
{
  position: absolute;
  top: 126px;
  left: 805px;
  width: 160px;
  height: 22px;
  z-index: 3;
}

#search fieldset
{
  float: left;
  width: 165px;
  height: 22px;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  overflow: hidden;
}

#search input
{
  display: block;
  float: left;
  width: 105px;
  height: 15px;
  padding: 4px 3px 4px 22px;
  border: none;
  background: transparent url("../images/background/search_input.png") no-repeat;
  color: #665544;
  font-size: 0.69em;
}

#search a.go
{
  display: block;
  float: left;
  width: 30px;
  height: 22px;
  background: url("../images/background/search_button.png");
  text-indent: -9999px;
}

.ajaxSearch_highlight, .ajaxSearch_highlight1 {color: #FF0000;}
.ajaxSearch_publishDate {color: #55BB11;}
.ajaxSearch_pageURL {color: #990055;}
.ajaxSearch_resultLink {font-size: 0.88em; font-weight: bold; color: #112244;}
#main .ajaxSearch_resultsInfos {float: right; display: block; font-size: 0.63em; text-transform: uppercase; letter-spacing: 0.09em;}
#main .ajaxSearch_grpResult {clear: both;}
#main .ajaxSearch_paging {font-size: 0.82em; color: #665544;}
#main .ajaxSearch_paging a:hover{background: #99DD55; border-color: #55BB11; color: #FFFFFF;}
#main .ajaxSearch_paging a
{
  border: 1px solid #CCCCCC;
  background: #EAEAEA;
  color: #112244;
  margin: 0 5px 0 0;
  padding: 2px 6px 2px 6px;
  text-align: center;
  text-decoration: none;
}

#main .ajaxSearch_currentPage
{
  border: 1px solid #18537B;
  background: #769DB6;
  color: #FFFFFF;
  margin: 0 5px 0 0;
  padding: 2px 6px 2px 6px;
  text-align: center;
}


/* Input Forms Objects / Elements
 * ------------------------------------------------------------------------- */
#main label
{
  font-size: 0.82em;
  color: #665544;	
}

#main input.stringbox, 
#main select.stringbox, 
#main textarea.stringbox
{
  font-size: 0.75em;
  vertical-align: middle;
  border-left: 1px solid #CCCCCC;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #C0C0C0;
  border-bottom: 1px solid #C0C0C0;
  background: #EAEAEA url("../images/background/textbox_fade.gif") repeat-x top left;
  padding: 3px 3px 3px 3px;
}

#main input.stringbox:focus, 
#main select.stringbox:focus, 
#main textarea.stringbox:focus
{
	background: #FFFFCC;
}

#main input.rectbutton
{
  font-size: 0.75em;
  font-weight: bold;
  padding: 2px 6px 2px 6px;
  text-align: center;  
  border: 1px solid #CCCCCC;
  background: #EAEAEA;
  color: #112244;
}

#main input.rectbutton:hover
{
  background: #99DD55; 
  border-color: #55BB11; 
  color: #FFFFFF;
}


/* Faux Divisions
 * ------------------------------------------------------------------------- */
#faux_left, 
#faux_right
{
  position: absolute;   
  bottom: 0;
  height: 100%;                       /* #faux divs give full height color and border to the side columns */
  z-index: 0;
}

#faux_left
{
  left: 15px;
  width: 200px;
  border-right: 0px solid #D7D5BC;  
}

.stainedglass {background: #FFFFFF url("../images/background/stained_glass.png") 0 0 repeat-y;}
.yellowfade {background: #FFFFFF url("../images/background/yellowfade.png") 0 0 repeat-y;}
.greengrass {background: #FFFFFF url("../images/background/greengrass.png") 0 0 repeat-y;}
.sheetmusic {background: #FFFFFF url("../images/background/sheetmusic.png") 0 0 repeat-y;}

#faux_right
{
  right: 0;
  border-left: 0px solid #FFFFFF;
  background: none;
}

.rightwide {width: 265px;}
.rightnarrow {width: 220px;}