/* CSS Document */

html { min-height: 100%; margin-bottom: 1px; /* stops page jog, scrollbars always on - works in co-op7?? */
}

body {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: "Lucida Grande", Verdana, Geneva, Arial, sans-serif;
	font-size: 100.01%;
	color: #000000;
	background-color: #3B3E65;
	text-align: center; /* Hack to center the container in IE5.x pc */
	min-width: 900px; /* for scroll bars in Opera I think */
	background-image: url(../navbar/bgtile2_blue256.jpg);
	background-repeat: repeat;
}

/* ***STRUCTURE part 1: container, banner, navbar */

div#container {
	width: 902px;/*sets the width for IE5.x's broken box model*/
	w\idth: 900px; /* sets the width of the wrapper for compliant browsers*/
	margin: 5px auto;/* centers the wrapper. 5px is applied top and bottom, auto center horz*/
	position: relative; /* sets a border to all 4 sides */
	text-align: left; /* needed after the IE hack in body */
	color: #000000;
	background-color: #FFFFFF;
	
	background-image: url(../navbar/wrapperbg.gif); /* green color with shadow right */
	background-repeat: repeat-y;

	border-top: 1px solid #4D55B4;
	border-right: 1px solid #3B3E65;
	border-bottom: 1px solid #3B3E65;
	border-left: 1px solid #4D55B4;
}


div#banner {
	position: relative; /* without it Dreamweaver allows leftcol div to ride up over the banner in design view */
	background-image: url(../navbar/CAAbanner_blue.gif);
	background-repeat: no-repeat;
	height: 160px;/* set a height for the banner */
	background-color: #333380;
}

/* styling horz nav bar  */
div#nav {
	float: left;
	margin: 0;
	padding-left: 15px;
	width: 885px; /* 770 minus padding*/
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #7CCB94; /* green*/
	position: absolute; /* *** make #nav flush bottom with #banner  *** */
	bottom: 0; /* *** make #nav flush bottom with #banner  *** */
}

div#viewcart { /* this View Cart button is to the right of the nav bar, positioned with absolute */
	position: absolute;
	margin: 0;
	right: 6px;
	bottom: 2px;
}

#nav ul {
	margin: 0;
	padding: 0;
}
#nav ul li {
	float: left;
	margin: 0;
	padding: 0;
	display: block;
	list-style: none;
	font-family: "Trebuchet MS", "Lucida Grande", Geneva, Arial, sans-serif;
	font-size: 75%;
	letter-spacing: 1px;
}
#nav a {
	float: left; /* *** for IE55Mac - hidden below from others  *** */
	margin: 0 8px 0 0px;
	padding: 4px 6px;
	color: #DCFFD9;
	display: block;
	text-decoration: none;
	background: #000 url(../navbar/navtab_a.gif) repeat-x top left;
	background-color: #3B7980; /*match btm of tab color */

	border: 1px solid #333380;
	border-bottom: none;
}
/* Commented backslash hack hides rule from IE5-Mac WATCH BACKSLASH! \*/
#nav a {
	float: none;
}
/* End IE5-Mac hack */

/* declarations to style the hover and current page */
#nav a:hover, 
body#index #t-index a, 
body#aboutus #t-aboutus a, 
body#join #t-join a, 
body#meetings #t-meetings a, 
body#shows #t-shows a, 
body#workshops #t-workshops a,
body#news #t-news a, 
body#contactus #t-contactus a, 
body#artists #t-artists a, 
body#links #t-links a {
	color: #24283F;
	background: #000 url(../navbar/navtab_h.gif) repeat-x top left;
}


/* ***STRUCTURE part 2: wrapper, left col, content divs */

div#wrapper {  /* *** wraps left col and contents  *** */
	position: relative;
	width: 900px;  
	margin: 0;
	padding: 0 0 40px 0;
}

div#leftcol {
	float: left;
	clear: left;
	width: 190px; /* adding a BR in long line will bump contents div down! */
	padding-top: 30px;
	padding-left: 18px;
}

div#content { /* if Content div moves down, cause is left col is too wide, or BR in left col on long line */
	float: right; /* used to be float left; but often contents bumped down below left col, so try float right? */
	width: 620px; 
	padding-left: 0px;
	padding-right: 30px; /* total for div#ontent = 650 + LeftCol (190 + 30) = 860 = 30 px for center space*/
	padding-top: 25px;
}

/* *** SLIDESHOW PAGE - no left clm, content is full width - add class=slideshow to any body tag */

body#exhibits.slideshow div#container {  /* slideshows are fullwidth; turns off green bg on leftcol */
	background-image: none;
}

body#exhibits.slideshow div#content {
	float: left;
	width: 810px;
	margin-left: 18px; /* match leftcol above = 18 */
	padding-left: 20px; /* match leftcol above */
}

div#slideshow {
	width: auto; /* width is 720px, but auto centers it */
	height: auto; /* height is set in nivo-slider-mod.css in div.slider-wrapper */
	background-color: #FFF; /* in Photoshop, thumbs have white bg / large images have black bg */
}


/* *** GENERAL LINKS *** */
a:link {
	color: #4759BF; /* brighter banner blue */
	text-decoration: underline;
}
a:visited {
	color: #704F99; /* purple */
	text-decoration: none;
}
a:hover {
	color: #3A8B49; /* header text green */
	text-decoration: underline;
}
a:active {
	color: #CC0000; /* orange */
}

/* *** Styling HEADERS *** */

h1, h2, h3, h4, h5, h6 {
	margin: 1em 0 0 0;
	padding: 0px;
	font-family: Georgia, "Times New Roman", Times, serif;
	line-height: 1.3em;
}

h1, h2, h3 {
	color: #454599; /* banner blue*/
	letter-spacing: 0.03em;
}

h1 {
	font-size: 130%;
	margin-top: 0px;
}

h2, h3 {
	font-size: 110%;
}

body#shows h2 {
	clear: both;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #454599; /* banner blue*/
	padding-top: 6px;
	margin-top: 24px;
}

body#shows h2 {
	clear: both;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #454599; /* banner blue*/
	padding-top: 8px;
	margin-top: 24px;
}


h3 {
	font-size: 100%;
	font-style: italic;
}
h4, h5, h6 {
	font-family: "Lucida Grande", Verdana, Geneva, Arial, sans-serif;
	margin-top: 1em;
}
h4 {
	color: #454599; /* banner blue*/
	font-size: 90%;
}
h5, h6 {
	color: #3A8B49; /* text green*/
	font-size: 80%;
}
h6 {
	font-style: italic;
}

/* body copy styling */

p, p.note, p.breadcrumb {
	font-size: 76%;
	color: #000;
	line-height: 1.5em;
	margin: 0.5em 0 0.5em 0;
	padding: 0; 
}

p.note {
	font-size: 66%;
	color: #666;
	margin-top: 1.5em;
}
p.breadcrumb {
	font-size: 66%;
	color: #666;
	margin-top: 0em;
	margin-bottom: 1em;
}

#content ul {
	margin: 0px;
	padding: 3px 0px;
}
#content ul li {
	margin: 6px 0 2px;
	list-style-type: none;
	line-height: 1.33em;
	font-size: 76%;
	background-image: url(../navbar/bullet4_diam_red_trans.gif);
	background-repeat: no-repeat;
	background-position: 0px 3px;
	padding: 0 0 0 20px; /* looks larger in Dreamweaver, small in browser */
}

#leftcol h1, #leftcol h2 {
	color: #237E38; /* dark green */
	font-size: 90%;
	font-style: italic;
	line-height: 1.2em;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #3A8B49;
	margin-top: 1em;
	padding-top: 4px;
	padding-bottom: 3px;

}
#leftcol h2 { /* dark green */
	border-top-width: 0;
	padding-top: 0px;
}
#leftcol p {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 76%;
	line-height: 1.35em;
	margin: 0 0 0.5em 0;
	padding: 0; 
}
#leftcol p.indent {
	margin: 2px 0 5px 16px;
}
#leftcol h5 { 
/* red, square bullet, dotted top RULE, follow with p.indent */
	font-family: "Lucida Grande", Verdana, Geneva, Arial, sans-serif;
	font-size: 80%;
	color: #B30000;
	text-transform: uppercase;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #B30000;
	margin-top: 1.5em;
	padding-top: 6px;
	padding-bottom: 2px;
	padding-left: 16px; /* match #leftcol p.indent */
	background-image: url(../navbar/bullet1_sq_red_trans.gif);
	background-repeat: no-repeat;
	background-position: 0 9px;
}
#leftcol h6 { 
/* red, diamond bullet, FOLLOW with p.indent or p.dotted */
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #B30000; /* deep red */
	font-style: normal;
	font-size: 85%;
	font-weight: bold;
	margin: 0.75em 0 0 0;
	padding-left: 16px; /* match #leftcol p.indent */	
	background-image: url(../navbar/bullet4_diam_red_trans.gif);
	background-repeat: no-repeat;
	background-position: left center;
}
#leftcol h1.nomargins, #leftcol h2.nomargins,
#leftcol h3.nomargins, #leftcol h4.nomargins,
#leftcol h5.nomargins, #leftcol h6.nomargins {
	margin-top: 0;
}
	
#leftcol p.rulebelow {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #B30000;
	padding-bottom: 6px;
}
#leftcol h6 a:link {
	color: #B30000; /* deep red */
	text-decoration: underline;
}
#leftcol h6 a:visited {
	color: #B30000; /* keep deep red, no underline */
	text-decoration: none;
}
#leftcol h6 a:hover {
	color: #454599; /* banner blue */
	text-decoration: underline;
}
#leftcol h6 a:active {
	color: #CC0000; /* orange */
}

#leftcol ul {
	margin: 0;
	padding: 0;
}
#leftcol ul li {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 76%;
	line-height: 1.35em;
	margin: 0 0 0.5em 0;
	list-style-type: none;
}

/* *** misc classes*** */
#clear {
	clear: both;
}
.clearleft {
	clear: left;
}
.clearright {
	clear: right;
}
.clearboth {
	clear: both;
}

.center {
	text-align: center;
}
.alignright {
	text-align: right;
}
.fontsize75pc {
	font-size: 75%;
}
.nomargins {
	margin: 0;
}
.smallmargintop {
	margin-top: 4px;
}
.xtraSpaceB4 {
	padding-top: 10px;
}
.xtraSpaceAfter {
	padding-bottom: 10px;
}
.xtraSpaceB4After {
	padding-top: 10px;
	padding-bottom: 10px;
}

.indent {
	padding-left: 30px;
}

.ruleaboveclear {
	clear: both;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #454599; /* banner blue*/
	padding-top: 6px;
	margin-top: 22px;
}

/* *** styling images etc *** */
.floatleft {
	float: left;
}
.floatright {
	float: right;
}

.noborder {
	border: none !important;
}

p.facebook {
	color: #454599;
	padding-bottom: 10px;
	font-weight: bold;
}
img.facebook {
	margin-right: 8px;
	padding-top: 2px;
	border: none;
}

.imgborder {
	border: 1px solid #454599;
	margin-top: 3px;
	margin-right: 8px;
	margin-bottom: 6px;
	margin-left: 0px;
}
.imginsetborder {
	border: 1px solid #454599;
	margin-top: 3px;
	margin-right: 8px;
	margin-bottom: 6px;
	margin-left: 0px;
	padding: 3px;
}
.imgfloatrighthead, 
.imgfloatright, 
.imgfloatleft, 
.imgfloatlefthead {
	border: 1px solid #454599;
}
.imgfloatright, .imgfloatrighthead {
	float: right;
	margin-top: 3px;
	margin-right: 0px;
	margin-bottom: 6px;
	margin-left: 8px;
}
.imgfloatleft, .imgfloatlefthead {
	float: left;
	margin-top: 3px;
	margin-right: 8px;
	margin-bottom: 6px;
	margin-left: 0px;
}
.imgfloatlefthead, .imgfloatrighthead {
	margin-top: 0px;
}

body#shows img.imgfloatrighthead {  /* extra space below images on right in Exhibits pae */
	margin-bottom: 24px;
}


/* *** styling photo galleries - based on VIVA's style but a little larger - 260 wide and 240 high*** */

/* *** styling for photoboxes *** */
div#photogallery, div#photogallery2, div#photogallery4 { /* wraps around all photoboxes */
	width: 620px;
	position: relative;
}

div.photobox { /* default is 3 credit lines in boxes */
	float: left;
	margin: 5px 15px 5px 0px;
	background-color: #FFFFFF;
	width: 294px;
	height: 310px;
	border: 0px solid silver;
	text-align: center;
	padding-bottom: 6px;
 }
div#photogallery2 div.photobox { /* when only 2 lines in boxes, or using VIVA's 220 high pics */
	height: 290px;
}	

div#photogallery4 div.photobox { /* when 4 lines in boxes */
	height: 320px;
}
	
div.photobox img {
	border: 1px solid #577199;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 4px;
}
div.photobox a:hover img {
	border: 1px solid #E63500; /* REDO CAA */
}
div.photobox h4 { 
	clear: both;
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-weight: bold;
	font-style: normal;
	line-height: 1em;
	color: #2B54D9; /* desat banner blue */
	font-size: 66%;
	padding-top: 0.5em;
	margin: 0px;
}
div.photobox h5 {
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-weight: normal;
	font-style: normal;
	line-height: 2em;
	color: #666666; /* dark gray */
	font-size: 66%;
	margin: 0px;
}
div.photobox h6 {
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-weight: normal;
	font-style: normal;
	line-height: 1.5em;
	color: #666666; /* dark gray */
	font-size: 58%;
	margin: 0;
	padding: 0;
}




/* *** styling footer*** */

div#footer {  
	width: 900px;
	text-align: right;  
	background-color: #454599; /* banner blue */
	border-top: 2px solid #7CCB94; /* rule green*/
	clear: both;
	background-image: url(../navbar/diagbluefooterbg.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

#footer p {
	font-size: 66%;  
	color: #DCFFD9;  /* light green*/
	margin: 0; 
	padding: 4px 8px 4px 10px;
}

#footer a {  
	color: #DCFFD9;  /* light green*/
	text-decoration: underline;
}
#footer a:hover {
	text-decoration: none;
}
.highlight {
	color: #B30000;
}



/* PAYPAL BUTTON styling (bg matches sidebars) - s.a. div#viewcart in navbar */

div.box, div.boxsm {
	width: 400px;
	padding: 8px 20px 10px 20px;
	margin: 0px 0px 10px 0px;
	background-color: #e1fae8; /* paler green than left col gif */
	border: 1px solid #7CCB94; /* green from btm nav bar*/
}

div.box h4, div.box h5, div.box h6, div.boxsm h4, div.boxsm h5, div.boxsm h6  {
	margin-top: 4px;
}
div.boxsm {  /* this box floats right of description */
	width: 248px;
	float: right;
	margin-left: 12px;
}

div.ppbutton {
	width: 220px;
	margin: 12px 0px 12px 0px;
	padding: 8px 12px 8px 12px;
	background-color: #FFF; /* or FFFBF3 pale yellow - same as list bg */
	border: 1px solid #DAC0DA; /*light rose */
} 

body#exhibits.catalog div.ppbutton {
	width: 280px;
} 

body#exhibits.catalog div.ppbutton {
	width: 280px;
} 

div.ppbutton h4, div.ppbutton h5, div.ppbutton h6 {
	font-size: 70%;
	margin-top: 0px;
}

div.ppbutton tr td {
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size: 76%;
	color: #7E3F62; /* grape2 */
}

div.ppbutton tr td.fieldspace { /* spaces popup menu only - add class to td */
	padding-top: 1px;
	padding-bottom: 7px;
}

div.ppbutton table { /*  space between table and Add to Cart button */
	padding-bottom: 10px;
}


div.viewcart_masthead { /* this View Cart button is inside the Google Search library item! */
	position: relative;
	height: 26px;
	float: right;
	margin-top: 58px;
}