/*********************/
/* BASIC */
/*********************/

body {
	font-family: "Times New Roman", Times, serif;
	font-size: 18px;
	margin: 0;
	background-color: #FFFFFF;
}

p,h1,h2,h3,h4,h5,h5,ol,ul {
	margin: 0px;
	padding: 0px;
}

	/* br.clear {
	/* 	height: 1px;
	/* 	clear: both;
	/* 	line-height: 1px;
	/* 	background-color: #00CC33;
	/* }
	/*  */


/*********************/
/* LAYOUT */
/*********************/

#banner {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 40px;
	/* Background image 750x145 pixels, fading left to pale yellow background. */
	background: #FCFBDF url(https://webfiles.uci.edu/garru/mollyart/css/banner-fade-750.jpg) no-repeat top right;
	border: 4px solid black;  /* Black border around banner perimeter. */
	height: 145px;
}

    /* IE6-specific hack: Use negative bottom margin to eliminate bottom padding around image. */
    * html #banner img {
	margin-bottom: -10px;
    }


#mainBody {
	/* Special instructions for table containing sidebar and content go here. */
}

/*********************/
/* SIDEBAR STYLES    */
/*********************/

/* #FCFBDF yellow background for sidebar column */

#sidebar {
	font-family: Arial, Helvetica, sans-serif;
	/* Background image is 140-pixels wide. */
	background: #FCFBDF url(https://webfiles.uci.edu/garru/mollyart/css/Sidebar-fade-140.jpg) no-repeat 0px 3px;
	vertical-align: top;
	overflow: hidden;  /* If font gets too big, hide the overflow text. */
	border: 2px white solid;
	border-left-width: 3px;
	border-right-width: 3px;
}

#sidebar ul#sidebarNav {
	width: 140px;	/* Firefox (not IE) needs this replicated here whenever "News" section is hidden. */
	border-top: 10px solid #294E56;
	border-bottom: 3px solid #FFFFFF;  /* Add space before "News" section.
	line-height: 120%; /* 95%; */
	list-style:none;	/* Don't use bullets for list items. */
}

#sidebar ul#sidebarNav li {
	display: inline; /* for IE 7 and earlier white space bug. */
	width: 134px;    /* Reduced by 3-pixel shims on left/right. */
	overflow: hidden; /* Don't allow text to expand column */
	zoom: 1;  /* Need this so IE 7 doesn't add extra border on right. */
}
    /* IE7-specific hack: Increase netry to full width so it looks like other browsers. */
    * + html #sidebar ul#sidebarNav li {
	width: 140px;
    }
    /* IE6-specific hack: Increase width to compensate for IE 6 including padding/border in width. */
    * html #sidebar ul#sidebarNav li {
	width: 150px;
    }

#sidebar ul#sidebarNav li a {	/* Left-column navigation bar anchors. */
	border-bottom: 2px solid #14556B;  /* Heavy line at bottom of each nav link. */
	overflow: hidden; 	/* Don't allow anchor text to expand column */
	padding: 8px 5px;
	padding-left: 30px;  text-indent: -22px; /* Set hanging indent. */
	line-height: 110%;
	font-size: 18px;
	font-weight: bold;
	font-variant: small-caps;
	font-style: italic;
	display: block;		/* Expand this anchor style to full width in column. */
	text-decoration: none;
	color: #102536;
}
    /* IE7-specific hack: Reduce font so it looks the same as other browsers. */
    * + html #sidebar ul#sidebarNav li a {
	font-size: 18px;
    }

    /* IE6-specific hack: Use negative right margin to eliminate padding between <ul> and <td>. */
    * html #sidebar ul {
	margin-right: -10px;
    }

/* Individually expand certain anchors in the navigation bar. */
#sidebar ul#sidebarNav a#paintingsLink {  letter-spacing: 0.1em;  }
#sidebar ul#sidebarNav a#printsLink    {  letter-spacing: 0.3em;  }
#sidebar ul#sidebarNav a#notecardsLink {  letter-spacing: 0.1em;  }
#sidebar ul#sidebarNav a#brainLink     {  letter-spacing: 0.3em;  }
#sidebar ul#sidebarNav a#exhibitsLink  {  letter-spacing: 0.2em;  }
#sidebar ul#sidebarNav a#contactLink   {  letter-spacing: 0.2em;  }
#sidebar ul#sidebarNav a#aboutLink     {  letter-spacing: 0.3em;  }

#sidebar ul#sidebarNav a:focus {
	/* Use more dotted outline to show when button has tab "focus". */
	border: dashed red 1px;
}

#paintings     #sidebar #sidebarNav li a#paintingsLink:hover,
    #prints    #sidebar #sidebarNav li a#printsLink:hover,
    #brain     #sidebar #sidebarNav li a#brainLink:hover,
    #notecards #sidebar #sidebarNav li a#notecardsLink:hover,
    #exhibits  #sidebar #sidebarNav li a#exhibitsLink:hover,
    #contact   #sidebar #sidebarNav li a#contactLink:hover,
    #about     #sidebar #sidebarNav li a#aboutLink:hover
{
	color: black;  /* Make sure text color stays black for mouse hover. */
}

#sidebar ul#sidebarNav a:hover {
	/* Make links background change color dramatically during mouse "hover". */
	background-color: #172975;  /* Dark blue */
	color: #FBEF99;		    /* Yellow-ish letters. */
}
/* Highlight the "you are here" buttons. */
#paintings     #sidebar #sidebarNav li a#paintingsLink,
    #prints    #sidebar #sidebarNav li a#printsLink,
    #notecards #sidebar #sidebarNav li a#notecardsLink,
    #brain     #sidebar #sidebarNav li a#brainLink,
    #exhibits  #sidebar #sidebarNav li a#exhibitsLink,
    #contact   #sidebar #sidebarNav li a#contactLink,
    #about     #sidebar #sidebarNav li a#aboutLink
{
	background-color: white;
}


/* Place news items just below sidebar navigation. */
#sidebar ul#sidebarNews {
	margin-top: 0; /* 1.5em; */
	/* Thick top border to separate News section from Nav links. */
	border-top: 10px solid #294E56;
	line-height: 120%; /* 95%; */
	list-style:none;	/* Don't use bullets for list items. */
}

/* Hide the "News" bar when displaying the "Exhibits" page. */
#exhibits #sidebar ul#sidebarNews {
	display: none;
}

#sidebar ul#sidebarNews li {
	display: inline;  /* for IE 7 and earlier white space bug. */
	width: 134px;     /* Reduced by 3-pixel shims on left/right. */
	overflow: hidden; /* Don't allow text to expand column */
	zoom: 1;  /* Need this so IE 7 doesn't add extra border on right. */
}

#sidebar ul#sidebarNews li.newsTitle {
	/* Column's news section title. */
	padding: 0.5em 0.1em 0.75em 0.1em;
	border-bottom: 2px dashed #14556B;  /* Heavy dashed line below "News" title. */
	text-align: center;
	line-height: 110%;
	font-size: 20px;
	font-weight: bold;
	font-style: italic;
	display: block;		/* Expand this anchor style to full width in column. */
}

#sidebar ul#sidebarNews li.newsItem {
	line-height: 110%;
	font-size: 14px;
	    /* The border-bottom below didn't work here. */
	    /* border-bottom: 2px dashed #14556B;  /* Heavy dashed line below each new item. */
}

#sidebar ul#sidebarNews li.newsItem p.newsDate {
	padding: 0.7em 0.2em 0.2em 0.4em;
	font-style: italic;
	color: #004005;
}
#sidebar ul#sidebarNews li.newsItem p.newsDescrip {
	padding: 0 0.2em 0.7em 1.9em;
	text-indent: -1.5em;		/* Together with padding-left, sets hanging indent. */
	font-weight: bold;
	border-bottom: 2px dashed #14556B;  /* Dark blue line at bottom of each new item. */
}
#sidebar ul#sidebarNews li.newsItem p.newsDescrip a.newsLink {
	/* This is the "(details)" link. */
	padding-left: 0.4em;
	font-size: 90%;
	font-weight: normal;
}
    /* IE7-specific hack: Reduce font so it looks the same as other browsers. */
    * + html #sidebar ul#sidebarNews li.newsItem p.newsDescrip a.newsLink {
	font-size: 80%;
    }


/****************************/
/* MAIN BODY CONTENT STYLES */
/****************************/

#content {
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 2em;
	border-left: 1px solid #D6ECAE;  /* This is the yellow-ish vertical line between navBar and content */
	width: 100%;
	vertical-align: top;
}

#content h1 {
	margin-top: 1em;
	margin-bottom: 0.5em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 27px;
	text-align: center;
	color: #630000;		/* Dark brown text color */
}

#content h2 {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	border-top: 10px double #B8A4C9;  /* Light-purple lines separate from previous section. */
	padding-top: 0.5em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 23px;
	text-align: center;
	color: #630000;		/* Dark brown text color */
}

td#content p.forMoreInfo {
	margin: 0.5em 5em 0.5em 5em;
	text-align: center;
}

td#content p.forMoreInfo a {  /* Keep the "contact me" link together. */
	white-space: nowrap;
}

/***********************************************/
/* Watercolor Paintings and Prints page styles */
/***********************************************/

#paintings td#content,
    #prints td#content {
	background-color: #E8D9C1; /* Light-tan background. */
		/* background-color: #E8E8E8;  -- 2009's light-gray background.  */
}
    /* IE7-specific hack: Add extra padding at right edge. */
    * + html td#content  {
	    padding-right: 15px;
    }
    /* IE6-specific hack: Add extra padding at right edge. */
    * html td#content  {
	    padding-right: 15px;
    }

#paintings #content h1,
    #prints #content h1 {
	margin-bottom: 1em;
}
    /* IE7-specific hack: Add extra padding below <h1> tag. */
    * + html #paintings #content h1,
	* + html #prints #content h1 {
	    margin-bottom: 20px;
    }

#paintings td#content p.forMoreInfo,
    #prints td#content p.forMoreInfo {
	margin: -1em 5em 1.5em 5em;
}

#content table.paintingPair {  /* Each pair of images should stretch across full screen. */
	/* 2011-06-04 GU: Increase top/bottom margins below.   margin: 5px 8px 15px 8px; */
	margin: 1em 8px 2em 8px;
	width: 100%;
	border: hidden;
}
    /* IE7-specific hack: Add extra padding above and below painting pairs. */
    /* * + html #content table.paintingPair,
	* + html #content table.paintingPair {
	    margin: 12px 8px 12px 8px;
	} */

#content table.paintingPair td.paintingLeft {
	vertical-align: top;
}

#content table.paintingPair td img {
	padding: 8px;
	border: #AAA 5px solid;
	background-color: white;
}


#content table.paintingPair td {
	margin: 0; padding: 0;  /* Don't allow IE to pad top & bottom. */
}

#content table.paintingPair td .paintingSold {
	/* Special red background for "sold" sign. */
	background-color: #F8A8FB;  /* light purple */
	font-family: Arial, Helvetica, sans-serif;
	font-variant: small-caps;
	padding: 0 0.1em 0.1em 0.1em;
}

#content table.paintingPair td.textLeft {
	padding: 0em 2em 0.5em 0.4em;
	vertical-align: top;
	text-align: left;
}

#content table.paintingPair td.paintingRight {
	vertical-align: bottom;
	padding-right: 10px;
}

#content table.paintingPair td.textRight {
	padding: 0.5em 0.4em 0 2em;
	vertical-align: bottom;
	text-align: right;
}

#content table.paintingPair td.textLeft a,
    #content table.paintingPair td.textRight a
{
	font-size: 24px;
}


/***************************************/
/* Single Featured Watercolor Painting */
/***************************************/

#featurePainting td#content {
	text-align: center;	    /* Painting and description should all be centered. */
	background-color: #E8D9C1; /* Light-tan background. */
		/* background-color: #E8E8E8;  -- 2009's light-gray background.  */
}

#featurePainting h1 .featureTitle {
	padding: 0.2em 0.5em 0.2em 0.5em;
	border: solid 2px #AAA;   /* Gray border.  */
	background-color: white;  /* Pale-yellow background behind title. */
	font-style: italic;
}

#featurePainting #content img {   /* Form an artificial frame around the painting. */
	margin-top: 1em;
	border: #AAA 0.5em solid;
	padding: 1em;
	background-color: white;
}

#featurePainting .miniNav {  /* "smaller/larger view" tags, just below painting. */
	font-size: 80%;
	margin: 0 0.5em 1em 0.5em;
}
#featurePainting .miniNav td {  /* "smaller/larger view" tags, just below painting. */
	padding-left: 1em;
	padding-right: 1em;
}
#featurePainting .miniNav .navLeft {  /* left-aligned navigation link. */
	text-align: left;
}
#featurePainting .miniNav .navRight {  /* right-aligned navigation link. */
	text-align: right;
}

#featurePainting #content p {
	margin: 0.5em 0.5em 0.5em 0.5em;	/* Painting and description should all be centered. */
}

#featurePainting #content p.paintingInfo {
	margin-top: 1.5em;	/* Separation between painting info and painting. */
	margin-bottom: 1em;
}

#featurePainting td#content p.paintingQuote {
	margin: 0.5em 15% 0.5em 15%;	/* Painting and description should all be centered. */
	padding: 0.8em 1em 0.8em 1em;
	border: solid 1px  #630000;  /* Red-brown border. "purple" is attractive, too. */
	background-color: white;
}

#featurePainting td#content p.forMoreInfo {
	margin: 1.5em 5em 0 5em;
}

/*************************/
/* Notecards page styles */
/*************************/

#notecards td#content p.forMoreInfo {
	margin-bottom: 2em;
}

#notecards #content table.notecardsTable {
	width: 100%;
	border: none;
	table-layout: fixed;   /* Table column widths based on first row, for faster rendering. */
}

#notecards #content table.notecardsTable td.notecardsLeft {
	/* This column stores the notecard images, 140 pixels wide. */
	width: 16em;
	padding: 0.1em 5px 1.2em 5px;   /* Use pixels for left/right because Safari and IE push to far with "ems" */
	vertical-align: middle;
	text-align: center;
}
#notecards #content table.notecardsTable td.notecardsLeft  h3 {
	/* Notecard collection title */
	padding: 0.5em;
	text-align: center;
}

/* No longer using this middle section. */
#notecards #content table.notecardsTable td.notecardsMiddle {
	/* This column stores size and pricing information. */
	width: 15em;
	padding: 0.1em 1em 1.2em 0.1em;
	vertical-align: middle;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 90%;
}
    /* IE7-specific hack: Make middle column wider. */
    * + html #notecards #content table.notecardsTable td.notecardsMiddle {
	width: 16em;
    }

#notecards #content table.notecardsTable td.notecardsPic {
	/* This column item just contains a notecard image. */
	padding: 0.1em 0.5em 0.2em 0.5em;
	vertical-align: top;
	text-align: center;
}
    /* IE7-specific hack: Remove left-side padding, to prevent image crowding. */
    * + html #notecards #content table.notecardsTable td.notecardsPic {
	padding-left: 0.1em;
    }

#notecards #content table.notecardsTable td.notecardsMiddle table {
	width: 100%;
}

#notecards #content table.notecardsTable td.notecardsRight {
	/* This expository column gives general information about the cards. */
	text-align: left;
	vertical-align: top;
		/* border-left: 2px #B8A4C9 dashed;  /* Light-purple vertical separator. */
}

#notecards #content table.notecardsTable td.notecardsRight p {
	margin: 1.2em 1em 1.2em 1em;
	font-size: 110%;
}

#notecards #content table.notecardsTable td.notecardsSep {
	/* Provides a light, dashed separator line alone top border.  */
	/* Note that IE 7 won't show a <td> border unless there's at  */
	/*	least one character or &nbsp; inside.  Hence, the use */
	/*	of "line-height" below to shrink the blank char.      */
	height: 1.5em;
	border-top: 2px #B8A4C9 dashed;  /* Light-purple separator. */
	padding: 1em 1em 0 1em;
	line-height: 0.5em;
}

/********************************/
/* Quilter's Brain page styles */
/********************************/

#brain #content table.brainPair {
	width: 100%;
	border: none;
}

#brain #content table.brainPair td {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 90%;
}

#brain #content p {
	margin: 1em 2em 1em 2em;
	line-height: 1.2em;
}

#brain #content p .cite {   /* Superscript for citation. */
	font-size: 80%;
	vertical-align: super;
	line-height: 0.7em;
}

#brain #content h2 {
	padding-top: 1.5em;
	margin-bottom: 0.5em;
}

#brain #content .brainList td {
	padding-left: 1.5em;
	padding-right: 1.5em;
}


/********************************/
/* Artwork Exhibits page styles */
/********************************/

#exhibits #content .artworkEvent .eventTitle {
	padding-top: 0.5em;
	padding-bottom: 0.25em;
	white-space: nowrap;	  /* Force browser to keep title section together. */
}

#exhibits #content .artworkEvent .eventTitle h3 {
	font-size: 20px;
	display: inline;
}

#exhibits #content .artworkEvent .eventTitle p {
	display: inline;
	padding-left: 2em;
}

#exhibits #content .artworkEvent  p {
	padding-top: 0.25em;
	padding-left: 3em;
	padding-bottom: 0.25em;
}

#exhibits #content .artworkEvent {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

#exhibits #content .primaryEvent {
	background-color: white;
}

#exhibits #content p.artworkEventBreak {
	text-align: center;
	font-size: 24px;
	color: #B8A4C9;  /* Light-purple break symbol. */
	word-spacing: 1em;
}

/********************************/
/* Contact the Artist page styles */
/********************************/

#contact #content .contactInfo {   /* Painting in background, with hole in center for contact info. */
	background: url(https://webfiles.uci.edu/garru/mollyart/css/redborder-contact.600x598.jpg) no-repeat center;
}

#contact #content p {
	padding-top: 0.8em;
	padding-bottom: 0.8em;
	font-size: 24px;
	text-align: center;
}

#contact #content .contactSubTitle {
	font-size: 70%;
	font-family: Arial, Helvetica, sans-serif;
}

/********************************/
/* About the Artist page styles */
/********************************/

#about #content {
	padding-right: 0;  /* No need for extra right-side padding with embedded table. */
}

#about #content table#aboutTable td {
	vertical-align: top;
	padding: 0.5em 1em 0.5em 1em;
	font-size: 18px;
}
#about #content table#aboutTable td.aboutLeft {
	/* Left hand column gets lilac background and text right-aligned. */
	border-right: #EEEEFF 4px solid;  /* Lilac vertical bar between columns. */
	padding-left: 0;
	text-align: right;
	font-weight: bold;
}

#about #content table#aboutTable td p {
	padding-left: 2.5em;  text-indent: -2.5em;	/* Set hanging indent. */
	padding-bottom: 0.5em;
}

#about #content table#aboutTable td p.caption {
	margin-right: 5px;
	padding: 0 1em 0 1em;
	text-align: center;
	text-indent: 0;
	font: italic 14px Arial, Helvetica, sans-serif;
}

/********************************/
/* FOOTER AND COPYRIGHT NOTICE  */
/********************************/

#footer {
	clear: both;
	padding: 2px 0 4px 0;
	border-top: 1px solid #294E56;
	background: #630000;		/* Dark brown background coloring. */
	color: white;
	font-size: 16px;
	text-align: center;
}