/* CSS Document - loosely based on wovengarden */

/* color palette:

--- BROWNS ---
body bg gradient:
top color = dark brown:  #221425; /* dark brown <used for main body copy color> = H289 S46 B15
bottom color = brown: #674739; /* brown = H18 S45 B40

BODY COPY: 	color: #221425; /* dark brown = H289 S46 B15

--- GOLDS ---
middle of side Flourishes: #AB6237; /* flourishes orange  = B22 S68 B67

LOGO:
logo yellow top grad: #DBBF88; /* logo top = H40 S36 B86
logo yellow btm grad: #F2B33D; /* logo btm = H39 S75 B95 <same as nav grad btm>
subtitle cream; #FFEDCC; /* subtitle cream = H39 S20 B100

HIGHLIGHTS BOX:
highlights grad top = #4D173B; dark purple = H320 S70 B30 <not seen - cropped out - not used>
highlights grad top ~ visible area = #5B213A; /* watermelon dark = H334 S64 B36 <used for Header 1>
highlights grad ~ middle area = #733338; /* watermelon medium  = H355 S56 B45

NAV BAR:
nav top grad: #994E35; /* dark orange = H15 S65 B60
nav btm grad: #F2B33D; /* medium orange = H39 S75 B95 <same as logo btm>

SIDEBAR:
H2 color = brown (same as bottom of body grad): #674739; /* brown 
H3, H4 color = #733338; /* watermelon medium
P color = brown ?

sidebar border = tan: #d9c08d; /* tan
sidebar TOP gradient: #f2e3c3; /* lite tan
sidebar BTM of gradient (looks white on windows): #fffcf7; /* near white
ALT background-color (middle of gradient) = cream: #fff6e5;  /* cream (not used)

LINKS: 
A link: #5B213A; /*  watermelon dark <same as top of gradient>
VISITED LINK: #733338; /* watermelon medium 
HOVER link: #B6237; /* flourishes orange
ACTIVE link: #674739; /* brown

IMAGES
border: 1px solid #d9c08d; /* tan <same as sidebar border color>


HEROBOX:
background-color: #f2e3c3;  /* lite tan <same as sidebar gradient top color> 
Herobox image: 
	border: 1px solid #AB6237; /* flourishes orange
	background-color: #FFFAF0; /* off white bg color 
* if newsletter is white, then add 1px frame in Photoshop - try f2e3c3 lite tan?
was #e5d7a6;  MADE UP * TWEAK


--- LITES ---
BG for CONTENTS div: #FFFAF0; /* - off-white (H40, S6, B100)
sidebar: bottom of gradient (looks white on windows): #fffcf7; /* near white
subtitle cream; #FFEDCC; /* subtitle cream = H39 S20 B100

MISC
#BF6242; /* used in UL floral and fancyrule in PSD


*/

html, body {
	margin: 0; 
	padding: 0;
	border: 0;
}

html {
	overflow-y: scroll; /* scrollbar always on */
}

body {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size: 100.1%;
	color: #000000;
	background-color: #674739; /* bottom of gradient brown */
	text-align: center; /* needed after the IE hack in body */
	background-image: url(../graphics/body_grad.png);
	background-repeat: repeat-x;
}

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

div#container { /* ***entire page */
	width: 1100px; /*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; /* images should be @ 550px for full width */
	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 */
	border-radius: 12px;            /* likely CSS code for all */
}


/* div.tl, div.tr, div.bl and div.br are only for IE7+ for rounded boxes. can remove if/when IE supports 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: #221425; /* dark brown */
	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;
}



/* *** 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 general links *** */
a:link {
	color: #5B213A; /* watermelon dark */
	text-decoration: underline;
}
a:visited {
	color: #733338; /* watermelon medium */
	text-decoration: underline;
}
a:hover {
	color: #AB6237; /* flourishes orange */
	text-decoration: underline;
}
a:active {
	color: #674739; /* brown */
}

/* *** 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: 110%;
	color: #5B213A; /* watermelon dark */
	letter-spacing: 1px;
	margin-top: 0px;
}

h2 { 
	font-size: 100%;
}

h3, h4 {
	font-size: 90%;

}

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: 1em;
	padding-top: 1em;
}

#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.3em;
}

#highlights a, #highlights a:hover {
	color: #FFEDCC; /* dark cream as in subtitle */
}



/* 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 !important;
}
.smallmargintop {
	margin-top: 4px !important;
}

.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 *** */

/* *** MAX SIZES: CONTENTS = 550px wide; SIDEBAR = 212px wide *** */

.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: 8px;
	margin-right: 0px; /* needs to be 0 for sidebar or content div gets pushed down*/
	margin-bottom: 4px;
	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, .clearboth_ruleabove_SpaceB4, .ruleabove_SpaceB4, .ruleabove_padtop { /* 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_SpaceB4, .ruleabove_padtop { /* xtra space above rule */
	margin-top: 1.2em;
}

.ruleabove_padtop { /* xtra space between rule and text, for headers - works only in Live View */
	padding-top: 1em;
}

.fancyrule1, .fancyrule2, .fancyrule3 {
	clear: both;
	height: 30px;
	background-image: url(../graphics/fancyrule1.png);
	background-repeat: no-repeat;
	background-position: center;
	padding: 8px 0px 10px 0px;
}
.fancyrule2 {
	background-image: url(../graphics/fancyrule2.png);
}
.fancyrule3 {
	background-image: url(../graphics/fancyrule3.png);
}