@charset "UTF-8";
/* CSS Document */


html, body {
	margin: 0; 
	padding: 0;
	border: 0;
	min-height: 100%; margin-bottom: 1px; /* stops page jog, scrollbars always on */
}


body {
	background-color: #4b5781;
	text-align: center;
	background-image: url(../graphics/body_grad.jpg);
	background-repeat: repeat-x;
	background-position: 0px 0px;
	margin: 30px 0 0 0;
	color: #FFF; /* white */
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 100%;
}


/* *** styling basic links for turquoise bg *** */
a:link {
	color: #FFF; /* white */
	text-decoration: underline;
}
a:visited {
	color: #CC6600; /* dull orange */
	text-decoration: underline;
}
a:hover {
	color: #E63500; /* hot orange */
	text-decoration: underline;
}
a:active {
	color: #E63500; /* hot orange */
}




/* ---------------------- STRUCTURE ----------------------  */

div#container { /* ***entire page */
	width: 900px; /*sets the MASTER width */
	margin: 0px auto;/* centers the div. 0px 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;
}

div#banner {
	margin: 0;
	padding: 0;
	position: relative;
	width: 1100px;
	height: 300px;
}

div#logo { /* logo/png embedded in html and set to preload; includes subtitle and top of navbar shadow  */
	margin: 0;
	padding: 0;
	float: left;
	width: 690px;
	height: 300px;	
}

div#highlights {
	width: 340px;
	height: 300px;
	position: absolute;
	background-image: url(../../graphics/highlights_grad.png);
	background-repeat: no-repeat;
	left: 690px;
	top: 0px;
	right: 70px;
	bottom: 0px;
}

div.highlights_text {
	margin: 20px 0px 20px 51px;
	padding: 0;
	width: 240px;
}


/* *** wrapper_all includes content and sidebar, and filled with white middle and l/r shadows *** */
#wrapper_all {
	margin: 0px;
	padding: 0px; /* see notes on woven css re padding and margins ** */
	position: relative;
	width: 1100px; /* *** same as container ** */
	height: auto;
	clear: both; /* *** need for MacIE 5.5 ** */
	background-image: url(../../graphics/wrapper_all_bg.png);
	background-repeat: repeat-y;
}

#flourish_left {
	position: relative;
	float: left;
	width: 100px;
	height: 630px;
	background-image: url(../../graphics/flourish-left.png);
	background-repeat: no-repeat;
}

#flourish_right {
	position: relative;
	float: right;
	width: 100px; 
	height: 630px;
	background-image: url(../../graphics/flourish-right.png);
	background-repeat: no-repeat;
}


/* *** wrapper_internal includes navbar and content_wrapper *** */
#wrapper_internal {
	position: relative;
	float: left; /* needs to float left to move around left flourish */
	padding: 0;
	margin: 0;	
	width: 900px;
	min-height: 630px;/* needs to clear flourishes height */
	background-color: #FFFAF0; 
}


#content {
	position: relative;
	float: left;
	padding-left: 22px;
	margin: 0;
	width: 570px;
	background-color: #FFFAF0; /* match wrapper internal */
}
	
	
/* *** sidebar = column that than hold multiple sidebar_boxes *** */
#sidebar {
	width: 300px;
	float: right;
	margin: 0;
	padding: 0;
}
div.sidebar_box, div.sidebar_box_rounded { /* Internet Explorer gets separate style sheet IE_fixes */
	width: 214px; /* 256 - 40 padding = 216 minus BORDER 2 = 214** */
	margin: 0px 0px 16px 20px;
	padding: 0px 20px 10px 20px; /* border cream */
	background-color: #FFFCF7;   /* litest cream */
	background-image: url(../../graphics/sidebar_topgradient.png);
	background-repeat: repeat-x;
	border: 1px solid #d9c08d;   /* border cream */
}
div.sidebar_box_rounded {
	-webkit-border-radius: 12px;    /* for Safari - match to herobox also */
	-moz-border-radius: 12px;       /* for Firefox */
}


/* div.tl, div.tr, div.bl and div.br are only for IE7+ for rounded boxes. can remove if/when IE supported CSS3 rounded boxes */


/* ---------------------- styling horz nav bar ----------------------  */

div#nav {
	position: relative;
	margin: 0px 0px 10px 0px; /* creates space between content & sidebar  */
	padding: 0;
	width: 900px; 
	height: 50px; 
	background-image: url(../../graphics/navbar-all-rounded.png); /* fills entire nav bar nav bar  */
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

#nav ul {
	margin: 0;
	padding: 0px 20px 0px 18px ;
}

#nav ul li {
	float: left;
	margin: 0;
	padding: 0;
	display: block;
	list-style: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 90%;
	letter-spacing: 1px;
	font-weight: bold;
	width: auto;
}

#nav a {
	float: left; /* *** for IE55Mac - hidden below from others  *** */
	margin: 0;
	padding: 6px 9px 4px 9px;
	color: #000;
	display: block;
	text-decoration: none;
	width: auto;
}
/* Commented backslash hack hides rule from IE5-Mac WATCH BACKSLASH! \*/
#nav a {
	float: none;
	width: auto;
}
/* End IE5-Mac hack */

/* declarations to style the hover and current page */
#nav a:hover {
	color: #FFF;
	background: #df9041 url(../../graphics/navbar_grad_3states.png) repeat-x 0px -60px; 
	/* swapping to a different hover png did not work - use one graphic and move up */
}

body#index #t-index a, 
body#aboutus #t-aboutus a, 
body#membership #t-membership a, 
body#meetings #t-meetings a, 
body#newsletter #t-newsletter a,
body#workshops #t-workshops a,
body#exhibits #t-exhibits a, 
body#gallery #t-gallery a, 
body#contact #t-contact a, 
body#links #t-links a {
	color: #FFF;
	background: #df9041 url(../../graphics/navbar_grad_3states.png) repeat-x 0px -120px;
	text-decoration: none;
}


/* ---------------------- STYLING TEXT ---------------------- */

/* *** font-size is in percent, line height is in ems*** */
p, ul {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 100%;
	color: #FFF; /* white, for turq bg */
	line-height: 1.5em;
	margin: 0;
	padding: 0;
}

#content p {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 85%;
	margin-top: 0.5em;
	margin-bottom: 0.6em;
}

div#highlights p {
	margin-top: 1em;
}

/* *** LISTS *** */

ul {
	font-size: 85%;
	padding-right: 12px;
	padding-left: 22px;
	padding-top: 5px;
	padding-bottom: 6px;
}

ul li {
	padding-top: 2px;
	padding-bottom: 2px;
	list-style-image: url(../../graphics/floral_dingbat_trans.png); /* *** IE gets modified GIF *** */
}
	

#sidebar ul {
	font-size: 66%;
	padding-right: 0px;
	padding-left: 20px;
	padding-top: 2px;
	padding-bottom: 2px;
	font-family: Verdana, Geneva, sans-serif;
}

#sidebar ul li {
	padding-top: 2px;
	list-style-image: url(../../graphics/floral_dingbat_trans.png); /* *** IE gets modified GIF *** */
}





/* *** redefining html tags *** */
h1, h2, h3, h4, h5, h6 {
	margin: 16px 0px 0px 0px;
	padding: 0px;
	letter-spacing: 0px;
	line-height: 1.3em;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #994E35; /* dark orange */
}

h1 {
	font-size: 120%;
	color: #FFF; /*white */
	letter-spacing: 1px;
	margin-top: 0px;
}

h2 { 
	font-size: 100%;
	color: #FFF; /*white */
}

h3, h4 {
	font-size: 82%;

}

h4 {
	font-style: italic;
}

h5, h6 { /* sans serif */
	font-size: 76%;
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
}

h6 { 
	font-style: italic;
}



/* *** styling sidebar copy *** */

#sidebar h2, #sidebar h3, #sidebar h4 { /* common elements */
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-style: normal;
	letter-spacing: 0px;
	line-height: 1.2em;
	font-size: 82%;
	font-style: normal;
	margin-top: 1em;
	padding: 0;
}
#sidebar h2 { /* use only at top of sidebar box */
	margin-top: 1em;
	color: #994E35; /* dark orange */
}

#sidebar h3 {
	color: #733338; /* watermelon medium */
	font-size: 75%;
	margin-top: 1.25em;
}

#sidebar h4 {
	color: #733338; /* watermelon medium */
	font-size: 75%;
	margin-top: 1.25em;
	font-style: italic;
}

#sidebar h5, #sidebar h6 { /* h5 meant to be run as subtitle to H2 */
	color: #733338; /* watermelon medium */
	font-size: 66%;
	margin-top: 1em;
}

#sidebar h6 { /* meant to be run as tight subtitle to another header, for dates etc */
	font-style: italic;
	margin-top: 0.25em;
}


#sidebar p {
	color: #674739; /* brown */
	padding: 0;
	margin-top: 0.4em;
	margin-bottom: 0.6em;
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size: 66%;
	line-height: 1.4em;
}


/* *** styling herobox (in Contents div) *** */

div.herobox {
	background-color: #f2e3c3; /* lite tan */
	width: auto;
	padding-top: 14px;
	padding-right: 12px;
	padding-bottom: 8px;
	padding-left: 12px;
	margin-bottom: 16px;
	margin-top: 20px;
	-webkit-border-radius: 12px;    /* for Safari */
	-moz-border-radius: 12px;       /* for Firefox */
}

div.herobox h2, div.herobox h3, div.herobox h4, div.herobox h5, div.herobox h6  {
	margin-top: 0px;
}

div.herobox img { /* default img, for large full width images */
	border: 1px solid #AB6237; /* flourishes orange */
	background-color: #FFFAF0; /* off white bg color */
	padding: 6px;
	margin-top: 0px;
	margin-bottom: 12px;
	margin-left: 0px;
}

img.herofloatright, img.herofloatleft {
	float: right;   /* see holly hack above */
	margin-right: 0px;
}
img.herofloatleft {
	float: left;
	margin-right: 8px;
	margin-left: 0px;
}


/* *** styling highlights box *** */

#highlights h2, #highlights h3 { /* common elements */
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-style: normal;
	letter-spacing: 1px;
	line-height: 1.2em;
	font-size: 80%;
	padding: 0;
	font-style: normal;
	color: #FFFAF0; /* offwhite */
	margin-top: 1em;
}


#highlights h3 {
	font-size: 75%;
	margin-top: 1.0em;
}


#highlights p {
	padding: 0;
	margin-top: 0.4em;
	margin-bottom: 0.6em;
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	color: #FFEDCC; /* dark cream as in subtitle */
	font-size: 70%;
	line-height: 1.2em;
}


/* FOOTER styling */

#footer { /* *** bg image includes bottom shadow for wrapper_internal *** */
	position: relative;
	clear: both;
	width: 1100px;
	height: 50px;
	background-image: url(../../graphics/footer.png);
	background-repeat: no-repeat;
}
#footer_wrapper {
	padding: 20px 122px 0px 122px;
}

#footer p, #webmaster p {
	margin: 0;
	padding: 0;
	font-size: 66%;
	color: #fff6e5; /* cream */
}

#webmaster {
	float: right;
	margin-left: 20px;
	width: 200px;
}

#webmaster p a {
	text-align: right;
	color: #fff6e5; /* cream */

}

/* *** misc classes*** */



.align_center {
	text-align: center;
}

.align_right {
	text-align: right;
}



.nomargins {
	margin: 0;
}
.smallmargintop {
	margin-top: 4px;
}

.xtraSpaceB4, #sidebar p.xtraSpaceB4 {
	padding-top: 10px;
}

.xtraSpaceAfter, #sidebar p.xtraSpaceAfter {
	padding-bottom: 10px;
}

.xtraSpaceB4After, #sidebar p.xtraSpaceB4After {
	padding-top: 10px;
	padding-bottom: 10px;
}


/* *** styling images *** */
.floatleft {
	float: left;
	margin-right: 10px;
}
.floatright {
	float: right;
	margin-left: 10px;
}

img {
	border: 0; 
	margin: 0;
	padding: 0;
}

.img_borderonly,
.img_borderonly_herobox,
.img_borderonly_sidebar,
.imgfloatright,
.imgfloatrighthead,
.imgfloatleft,
.imgfloatlefthead,
.imgfloatleftclearboth {
	border: 1px solid #d9c08d; /* tan */
}

.img_borderonly {  /* use for a stack of images, does NOT float*/
	margin-top: 6px;
	margin-right: 10px;
	margin-bottom: 8px;
	margin-left: 0px;
}
.img_borderonly_herobox {  /* use in herobox, even margins left+right for centering p */
	margin-top: 6px;
	margin-right: 10px;
	margin-bottom: 6px;
	margin-left: 10px;
}

.img_borderonly_sidebar {  /* use for sidebar - no margins left and right */
	margin-top: 6px;
	margin-right: 0px; /* needs to be 0 for sidebar or content div gets pushed down*/
	margin-bottom: 8px;
	margin-left: 0px;
}

.imgfloatright, .imgfloatrighthead {
	float: right;
	margin-top: 4px;
	margin-right: 0px;
	margin-bottom: 6px;
	margin-left: 8px;
}
.imgfloatrighthead {
	margin-top: 0px;
}


.imgfloatleft, .imgfloatlefthead, .imgfloatleftclearboth {
	float: left;
	margin-top: 4px;
	margin-right: 10px;
	margin-bottom: 6px;
	margin-left: 0px;
}

.imgfloatlefthead {
	margin-top: 0px;
}

.imgfloatleftclearboth {
	clear: both;
	margin-top: 6px;
}


/* CLEARERS */

.clearleft {
	clear: left;
}

.clearright {
	clear: right;
}


.clearboth {
	clear: both;
}


div.clearer { /* see www.complexspiral.com/publications/containing-floats, don't need to put nb space */
	clear: both; 
	line-height: 0px; 
	height: 0px;
}


/* RULES */


.clearboth_ruleabove, #content p.clearboth_ruleabove_SpaceB4 { /* for major breaks - with line */
	clear: both;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #DBBF88; /* logo top grad color */
	padding-top: 12px;
}


.ruleabove, #content p.ruleabove_SpaceB4 { /* for major breaks - with line */
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #DBBF88; /* logo top grad color */
	padding-top: 12px;
}

#content p.ruleabove_SpaceB4 { /* xtra space above rule */
	margin-top: 20px;
}

.fancyrule1, .fancyrule2, .fancyrule3 {
	height: 30px;
	background-image: url(../../graphics/fancyrule1.png);
	background-repeat: no-repeat;
	background-position: center;
	margin-bottom: 8px;
}
.fancyrule2 {
	background-image: url(../../graphics/fancyrule2.png);
}
.fancyrule3 {
	background-image: url(../../graphics/fancyrule3.png);
}