/*-----------------------------------------------------------------------------
Style Sheet

version:   2.0 [ modify nav; 09/30/07 add leftcol caption ]
author:    Lydia Mann
email:     lkmweb@nyc.rr.com
-----------------------------------------------------------------------------*/

/* =General
-----------------------------------------------------------------------------*/
/* Remove padding and margin */
* { margin: 0; padding: 0; }

/* Class for clearing floats */
.clear { clear:both; }

img { border: 0; }

blockquote { margin: 1em 100px; padding: 0 2em; background: url(../graphics/bq.gif) 0 .5em no-repeat; }
blockquote p { margin: 0 0 .5em; padding: 0; }

/* =Typography
-----------------------------------------------------------------------------*/

body { color: #220c06; font: .8125em/1.5em Verdana, "Lucida Grande", "Lucida Sans", "Trebuchet MS", Tahoma, sans-serif; text-align: center /* IE 5.x and 6 */; background: url(../graphics/bjrBG.gif) 0 0 repeat-y; }

p, li, h1, h2, h3, h4, h5, h6 { font-size: 100%; margin: 0 50px .5em; padding: 0; }
ul { margin: .5em 4em; padding: 0; }
li { list-style-type: square; }

pre { display: block; font: 100% Verdana, "Lucida Grande", "Lucida Sans", "Trebuchet MS", Tahoma, sans-serif; margin: 1em 50px; }

.fl { float: left; padding: 0 1em .5em 0; clear: left; }
.fr { float: right; padding: 0 0 .5em 1em; clear: right; }

/* =Headings
-----------------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 { font-family: Georgia, san-serif; font-weight: normal; color: #6c5232; line-height: 1.25em; margin-bottom: .2em; }
h1 { font-size: 2em; line-height: 1.1em; }
h2 { font-size: 1.5em; margin-top: .75em; }
h3 { font-size: 1.2em; margin-top: 1em; clear: both; }
h4 { font-size: 1em; text-transform: uppercase; margin-top: 1.25em; margin-bottom: 0; }
h5 { font-size: 1em; margin-top: 1.25em; }
h6 { font-size: 1em; text-transform: uppercase; margin: 1.5em 50px 0; color: #220c06; }

/* =Links
-----------------------------------------------------------------------------*/
a, a:link { color: #62421b; text-decoration: none; border-bottom: 1px dotted #6c5232; } /* 6c5232 */
a:visited { color: #963; }
img a, img a:visited, a img, a:visited img { text-decoration: none; border: 0; }

a:hover { border: 0; color: #900; }

/* =Layout
-----------------------------------------------------------------------------*/
#wrap { position: relative; width: 85%; min-width: 900px; max-width: 1200px; margin: 1em auto; text-align: left; background: url(../graphics/bgI.gif) 0 0 repeat-x; z-index: 0; }
#home #wrap { background: #fdf8e0 url(../graphics/bgH.gif) 0 3px repeat-x; }

#wrap2 { position: relative; border: 1px solid #6c5232; border-width: 3px 5px 0; background: url(../graphics/bgLeftcol-i2.gif) 25% 0 repeat-y; z-index: 1; }
#home #wrap2 { background: url(../graphics/bgLeftcol-h.gif) 35% 0 repeat-y; }

#main { float: left; width: 74%; margin: 120px 0 2em; }
#home #main { width: 65%; margin: 150px 0 30px; }

#leftcol { float: left; width: 25%; }
#home #leftcol { width: 35%; overflow: hidden; }

#leftcol img#bjr { position: relative; width: 100%; }

#home #leftcol h1#desc { width: 314px; height: 655px; text-indent: -9000px; margin: -.5em auto; padding: 0; }
#home #leftcol h1#desc span { width: 100%; height: 100%; display: block; background: url(../graphics/description.gif) 0 0 no-repeat; }

#contactbox { clear: both; padding: .75em .75em 30px 1.5em; margin: 30px 50px 0; background: #d0c3a2 url(../graphics/cowrieShell2.gif) 0 100% repeat-x; border: 1px solid #bfad80; line-height: 1.1em; }/* #6c5232 */
#contactbox p, #contactbox h4 { font-size: 85%; margin: 0 0 .3em; }
#contactbox h4 { font-size: 90%; font-weight: bold; }

#footer { clear: both; height: 1.5em; color: #fdf8e0; background: #6c5232; padding: .25em 1em .5em; text-transform: uppercase; text-align: center; }
#footer a { color: #f90; }
div#lkm a { font-size: 90%; color: #bfad80; text-align: center; text-transform: uppercase; margin: 3px auto; padding-bottom: 10px; }
#footer a:hover, div#lkm a:hover { color: #fdf8e0; }

.indent { margin: 1em 2em 3em; }

.pic125, .pic200, .pic300, .pic400 { margin: .5em 1em .5em 50px; padding: 8px; border: 1px solid #6c5232; border-width: 1px 0 0 1px; float: left; clear: left; }

.pic125 { width: 150px; }
.pic200 { width: 220px; }
.pic300 { width: 320px; }
.pic400 { width: 420px; }
.pic125 img, .pic200 img, .pic300 img, .pic400 img { display: block; border: 0; margin-bottom: 6px; }
img.rule { display: block; border: 1px solid #000; margin: 4px 2px; }
.subnav { font: 95% arial, sans-serif; color: #333; display: block; text-transform: none; margin: 0 0 .5em; }
p.cred, p.caption { font-size: 88%; font-style: italic; line-height: 1.3em; margin: 0 .5em 10px; }

/* =Branding ------------------------------------------------------*/
#masthead { position: absolute; top: 0; left: 0; margin: 0 auto; height: 150px; width: 100%; z-index: 2; } /* width: 85%; */
#masthead h1 { float: right; width: 693px; height: 92px; margin: .7em 1em 0 3em; text-indent: -9000px; } /* margin: 1em 1em 0 5%;  */
#masthead h1 a { width: 100%; height: 100%; display: block; background: url(../graphics/logo.gif) 0 0 no-repeat; border-bottom: 0; }
#masthead h1 a:hover { background-position: 0 -102px; } /* */

/* Nav ------------------------------------------------------------*/
/* homepage */
div#homenav { width: 100%; z-index: 10; }
div#homenav ul { position: relative; float: right; margin: 0 0 0 16%; z-index: 3; }
div#homenav ul li { position: relative; float: left; margin: 0; padding: 2px 0 5px; font-size: 1.1em; line-height: 1.1em; text-transform: uppercase; letter-spacing: .04em; list-style-type: none; white-space: nowrap; z-index: 12; } /* background-color: #2f0f10; */

div#homenav ul ul { position: absolute; top: 1.25em; left: 3px; margin: 4px 0 0; padding: 0; background-color: #2f0f10; opacity: 0.95; z-index: 14; }
div#homenav ul ul ul { width: 100%; position: relative; top: auto; left: auto; margin: 0; padding: 0; border: 0; z-index: 4; }

div#homenav li li { width: 100%; text-align: left; font-size: 88%; text-transform: none; margin: 0; padding: 0; background-color: transparent; z-index: 16; }
div#homenav li li li { width: 100%; margin-left: 10px; text-transform: none; font-size: 100%; font-weight: normal; border-top: 0; }

/* popout control start here*/
div#homenav ul li ul { display: none;}
div#homenav ul li:hover ul { display: block; }

/* homenav links here*/
div#homenav a, div#homenav a:visited { display: block; border: none; margin: 0; padding: 2px 24px 2px 4px; color: #fcd8aa; }

div#homenav li a:link, div#homenav li a:visited { color: #fcd8aa; }

div#homenav li li a:link, div#homenav li li a:visited { color: #fcd8aa; margin: 0; padding: 4px 6px; z-index: 5; }

div#homenav li li li a:link, div#homenav li li li a:visited { padding-left: 12px; background: url(../graphics/bullet2.gif) 2px 3px no-repeat;  }

div#homenav li a:hover, div#homenav li a:visited:hover, div#homenav li li a:hover, div#homenav li li li a:hover { color: #fdf8e0; z-index: 20; }


/* interior pages */
div#nav ul { float: left; width: 100%; margin: 0; padding: 10px 0 30px; }
div#nav ul ul { margin: 0 0 5px; padding: 0; }
div#nav ul ul ul { margin: 0; padding: 0; }
div#nav ul li { list-style-type: none; position: relative; float: left; width: 100%; margin: 15px 0 0; padding: 0; text-transform: uppercase; letter-spacing: .05em; line-height: 1.3em; }
div#nav ul li li { text-transform: none; letter-spacing: 0; margin-top: 5px; }

div#nav a:link, div#nav a:visited { display: block; border: none; margin: 0; padding: 0 10px 0 20px; color: #e19179; } /* # */
div#nav li li li a:link, div#nav li li li a:visited { padding-left: 40px; background: url(../graphics/bullet2.gif) 32px 3px no-repeat;  }

#music .mus,
#sweet .mus,
#har .mus,
#free .mus,
#solo .mus,
#songtalker .mus,
#composer .mus,
#compositions .mus,
#commissions .mus,
#producer .mus,
#scholarship .sch,
#publications .sch,
#biography .sch,
#awards .awa,
#ongoing .ong,
#contacts .ong { background-color: #2f0f10; padding: 6px 0; border: 1px solid #900; border-width: 1px 0; opacity: 0.85; }

#music .mus a:link,
#sweet .mus a:link,
#har .mus a:link,
#free .mus a:link,
#solo .mus a:link,
#songtalker .mus a:link,
#composer .mus a:link,
#compositions .mus a:link,
#commissions .mus a:link,
#producer .mus a:link,
#scholarship .sch a:link,
#publications .sch a:link,
#biography .sch a:link,
#awards .awa a:link,
#ongoing .ong a:link,
#contacts .ong a:link,
#music .mus a:visited,
#sweet .mus a:visited,
#har .mus a:visited,
#free .mus a:visited,
#solo .mus a:visited,
#songtalker .mus a:visited,
#composer .mus a:visited,
#compositions .mus a:visited,
#commissions .mus a:visited,
#producer .mus a:visited,
#scholarship .sch a:visited,
#publications .sch a:visited,
#biography .sch a:visited,
#awards .awa a:visited,
#ongoing .ong a:visited,
#contacts .ong a:visited { color: #e5c8bf; }

div#nav a:hover, div#nav a:visited :hover, div#nav li:visited a:hover,
#music .mus a:hover,
#sweet .mus a:hover,
#har .mus a:hover,
#free .mus a:hover,
#solo .mus a:hover,
#songtalker .mus a:hover,
#composer .mus a:hover,
#compositions .mus a:hover,
#commissions .mus a:hover,
#producer .mus a:hover,
#scholarship .sch a:hover,
#publications .sch a:hover,
#biography .sch a:hover,
#awards .awa a:hover,
#ongoing .ong a:hover,
#contacts .ong a:hover { color: #f2ebdc; }


/* =Sidebar
-----------------------------------------------------------------------------*/
#sidebar { width: 280px; float: right; margin: 0 0 10px 20px; padding: 0 0 20px; background: #cc9 url(../graphics/corner.gif) left bottom no-repeat; color: #220c06; z-index: 0; }
#flashcontent { clear: both; margin: 0; padding: 0 0 0 10px; z-index: 0; }/* float: right; width: 270px; */
body#aud #flashcontent { float: left; width: 270px; z-index: 0; }

/* Introduction */
#intro { margin: 1em 50px; padding: 1em 1.5em; }
#intro { background: #cc9; }
#intro p { margin: 0 0 .5em; }

/* =Tables
-----------------------------------------------------------------------------*/
table { border-spacing: 0; border-collapse: collapse; margin: 0 50px 1em; color: #6c5232; clear: both; }
th, td { font-size: .8em; line-height: 1.2em; text-align: left; vertical-align: top; background: transparent url(../graphics/dot.gif) left bottom repeat-x; padding: .3em; }
th { text-transform: uppercase; }
td { font-weight: normal; }
tr.odd { background: #f4e6d0 url(../graphics/dot.gif) left bottom repeat-x; }
table a, table a:visited { text-decoration: none; border: 0; }


/* =Lists
-----------------------------------------------------------------------------*/
/* schedule styles */
dl { margin: 1em 50px; padding: 0; font: 1em/1.5em arial, sans-serif; text-align: left; }
dl a:link { color: #333; }
dt { margin: 1em 0 0; padding-left: 16px; background: url(../graphics/diamondBullet.gif) 0 2px no-repeat; font-weight: bold; text-transform: uppercase; }
dd { margin-left: 16px; padding: 0; }
#contact { text-align: left; margin: 1em 0 0; padding: 1em .75em 2em 1.5em; background: #000; }
#contact p { color: #fdf8e0; font-weight: bold; font-size: 1em; line-height: 1.5em; margin: 0; padding: 0; }
#contact a:link, #contact a:visited { color: #fdf8e0; border-bottom: 1px dotted #fdf8e0; }
#contact a:hover { color: #f90; border-bottom: 0; }


/* =special stuff and exceptions
-----------------------------------------------------------------------------*/
h4.divider { margin-top: 2em; padding-top: .2em; border-top: 1px solid #6c5232; }
#home #main h1, #home #main h2, #home #main h3, #home #main h6, #home #main p, #home #main blockquote, #home #main dl { margin-left: 30px; clear: none; }
#home #main h1 { font-size: 2em; line-height: 1.1em; margin-top: 1.25em; }
#sidebar p { margin: 0 1.5em 1em 0; padding: 0; color: #220c06; }
#sidebar h4 { margin-left: 30px; }
#leftcol p.caption { background-color: #6c5232; opacity: 0.85; color: #000; margin: -5px 0 0; padding: 10px 2px 15px 15px; }
#leftcol p.caption a { color: #000; text-decoration: underline; }


/* * */
/* here follows the brillant "no-extra-markup" clearing method devised by Tony Aslett - www.csscreator.com */
/* simply add the clearfix class to any container that must enclose floated elements */
/* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {
    content: "."; /* the period is placed on the page as the last thing before the div closes */
	display: block; /* inline elements don't respond to the clear property */ 
    height: 0; /* ensure the period is not visible */
    clear: both; /* make the container clear the period */
    visibility: hidden;	/* further ensures the period is not visible */
}
.clearfix {display: inline-block;}   /* a fix for IE Mac */
/* next a fix for the dreaded Guillotine bug in IE6 */
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* end of "no-extra-markup" clearing method */
/* * */