/* Despain Art Fall 2007 CSS */

/*
Display
Background
Positioning
Float/Clear
Width/Height
Margin/Padding
Color
Text
Borders
*/

body {
	background: #233e44 url(images-Fall2007/bg-head.gif) no-repeat center top;
	margin: 0;
	padding: 0;
	color: #9f6b0c;
	font: 10px "Trebuchet MS", Arial, Helvetica, sans-serif;
}

ul { list-style: none; margin: 0px; padding: 0px; }

img, dl, dt, dd, li, p, h1, h2, h3, h4, h5, h6 { /* remove default margin/padding from elements, can be added back later */
	margin: 0;
	padding: 0;
}

a { 
	outline: none; /* eliminates ugly outline around clicked links (Firefox) */
	color: #9f6b0c;
} 
a img { border: none;}

#wrapper {
	width: 800px;
	margin: 0 auto;
}

p#error404, #content #column1 p#error404 {
	padding: 30px 0 30px 0;
	text-align: center;
	font-size: 16px;
	color: #FF0000;
}

/* ========================= */
/* Branding ================ */
/* ========================= */

#branding {
	float: left;
	text-indent: -9000px;
}

#branding a {
	display: block;
	height: 40px;
	width: 345px;
	margin: 30px 0 0 148px;
}


/* ========================= */
/* Footer ================== */
/* ========================= */

#footer {
	clear: both;
	background: #233e44 url(images-Fall2007/bg-foot.gif) no-repeat center top;
	height: 42px;
	padding: 44px 0 0 0;
	color: #9f6b0c;
	font: 10px "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#footer #credit {
	float: left;
	width: 400px;
	text-align: center;
}

#footer #credit a {
	color: #9f6b0c;
}

#footer #credit a:hover {
	color: #d9b768;
}

#footer #contact {
	float: left;
	width: 400px;
	text-align: center;
}

#footer #contact a {
	color: #d9b768;
}

/* ========================= */
/* Main Navigation ========= */
/* ========================= */

#mainNav {
	float: right;
	width: 282px;
	margin: 56px 0 0 0;
	padding: 0;
}

#mainNav li {
	float: left;
	height: 35px;
}

#mainNav li a {
	display: block;
	padding-top: 0px;
	padding-left: 9px;
	padding-right: 9px;
	font: 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #9f6b0c;
	text-decoration: none;
	text-transform: uppercase;
	border-right: solid 1px #0d5868;
}

#mainNav li#about a {
	border-right: none; /* remove border from right-most nav item */
}

#ie5-6 #mainNav li a { /* force older IEs to wrap nav links (to keep them on one line) */
	width: 1%;
}

#mainNav li a:hover {
	color: #d9b768;
}

/* place indicator graphic below nav item for current page */
body.home #mainNav li#home,
body.gallery #mainNav li#gallery,
body.news #mainNav li#news,
body.links #mainNav li#links,
body.about #mainNav li#about {
	background: url(images-Fall2007/nav-indicator.gif) no-repeat center 19px; 
}

body.home #mainNav li#home a,
body.gallery #mainNav li#gallery a,
body.news #mainNav li#news a,
body.links #mainNav li#links a,
body.about #mainNav li#about a {
	color: #d9b768;
}


/* ========================= */
/* Year Navigation ========= */
/* ========================= */

#yearNav {
	clear: both;
	width: 596px;
	margin-left: 157px;
}

#yearNav ul {
	text-align: center; /* centers list contents */
	padding: 5px 0 15px 0; /* bottom padding allows nav indicator to be seen (must match <a> tag padding) */
}

#yearNav ul li {
	display: inline; /* inline required for centering */
}

#yearNav ul li a {
	padding: 0 4px 15px 4px; /* bottom padding allows nav indicator to be seen (must match <ul> tag padding) */
	font: 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #9f6b0c;
	text-decoration: none;
	text-transform: uppercase;
}

#ie5-6 #yearNav ul li a { /* force older IEs to wrap nav links (to keep them on one line) */
	width: 1%;
}

#yearNav ul li a:hover {
	color: #d9b768;
}

#yearNav ul li.active a {
	background: url(images-Fall2007/nav-indicator.gif) no-repeat center 17px;
}

#yearNav ul li.active a {
	color: #d9b768;
}


/* ============================================ */
/* CONTENT ==================================== */
/* ============================================ */


/* ========================= */
/* Home ==================== */
/* ========================= */

.home #content {
	display: inline; /* fix the IE6  double-margin float bug */
	background: url(images-Fall2007/bg-content-pattern216.jpg) repeat;
	float: left;
	width: 742px;
	margin: 58px 0 0 10px;
	padding: 18px;
	border: solid 1px #1c2a2d;
}

.home #ie6plus #content  {
	margin: 60px 0 0 10px; /* fix 2-pixel jog in IE6,7 */
}

.home #content img {
	display: block; /* prevents extra pixels below image */
}

.home #content #column1,
.home #content #column3 {
	float: left;
	padding: 8px;
	border: solid 2px #9f6b0c;
}

.home #content #column2 {
	float: left;
	width: 198px;
	margin: 70px 12px 0 12px;
	text-align: center;
}

.home #content #column2 #year {
	background: url(images-Fall2007/dingbat-on-paper-bg.gif) no-repeat center 36px;
	padding: 65px 0 51px 0;
	border-top: solid 1px #0d5868;
	border-bottom: solid 1px #0d5868;
}

.home #content #column2 #year img {
	display: inline; /* override pixel bug fix above */
}

.home #content #column2 h2 {
	margin-top: 20px;
	font-size: 18px;
	color: #0d5868;	
}
.home #content #column2 h3 {
	font-size: 16px;
	color: #0d5868;	
}
.home #content #column2 p {
	font-size: 14px;
	color: #0d5868;	
}


/* ========================= */
/* Gallery Section ========= */
/* ========================= */

.gallery #content {
	display: inline; /* fix the IE6  double-margin float bug */
	background: url(images-Fall2007/bg-content-pattern216.jpg) repeat;
	position: relative;
	float: left;
	width: 778px;
	margin: 22px 0 0 10px;
	padding: 20px 0 16px 0;
	border: solid 1px #1c2a2d;
}

.gallery #ie5-6 #content { /* IE6 renders the bottom padding too wide */
	padding: 20px 0 8px 0;
}

.gallery #content img {
	display: block; /* prevents extra pixels below image */
}

.gallery #content #section-top {
	background: url(images-Fall2007/gallery-border-caps.gif) no-repeat 20px top;
	width: 778px;
	height: 5px;
}

.gallery #content #section-bottom {
	background: url(images-Fall2007/gallery-border-caps.gif) no-repeat 20px top;
	float: left;
	width: 778px;
	height: 5px;
}

.gallery #content #column1 {
	display: inline;
	float: left;
	min-width: 686px; /* for pages with not enough content */
	min-height: 320px;
	margin: 0px 22px 0px 22px;
	padding: 0px 22px 0px 22px;
	border-left: solid 1px #0d5868;
	border-right: solid 1px #0d5868;
}

.gallery #ie6plus #content #column1 { /* IE6,7 wants a fixed width to apply the padding correctly */
	width: 686px;
	height: 320px; /* for pages with not enough content */
}

.gallery #ie5-6 #content #column1 { /* IE6 renders the top margin too low */
	margin-top: -10px;
}

.gallery #content #column1 p {
	float: left;
}

.gallery #content #column1 p.three {
	padding-left: 246px;
}

.gallery #content #column1 p a {
	display: block;
	margin: 4px; 
	border: solid 1px #9f6b0c;
}

.gallery #content #column1 p a:hover {
	display: block;
	margin: 2px; 
	border: solid 3px #9f6b0c;
}

.gallery #content #column2 {
	position: absolute;
	width: 198px;
	margin: 70px 12px 0 288px;
	text-align: center;
}

.gallery #content #column2 #year {
	background: url(images-Fall2007/dingbat-on-paper-bg.gif) no-repeat center 36px;
	padding: 65px 0 51px 0;
	border-top: solid 1px #0d5868;
	border-bottom: solid 1px #0d5868;
}

.gallery #content #column2 #year img {
	display: inline; /* override pixel bug fix above */
}


/* ========================= */
/* Gallery Article ========= */
/* ========================= */

.gallery #content-article {
	display: inline; /* fix the IE6  double-margin float bug */
	background: url(images-Fall2007/bg-gallery-article.jpg) repeat-y;
	position: relative;
	float: left;
	width: 731px;
	margin: 3px 0 0 27px;
	padding: 0;
	
}

.gallery #ie6plus #content-article { /* tweak IE box placement */
	margin: 2px 0 0 28px;
}

.gallery #content-article #section-top {
	float: right;
	width: 731px;
	background: url(images-Fall2007/gallery-hrule.gif) no-repeat right top;
	height: 1px;	
}

.gallery #ie5-6 #content-article #section-top { /* IE6 renders the margins wrong */
	margin-top: -14px;
}

.gallery #content-article #section-bottom {
	float: right;
	width: 731px;
	background: url(images-Fall2007/gallery-dingbat-rule.gif) no-repeat right bottom;
	height: 25px;
}

.gallery #ie5-6 #content-article #section-bottom { /* IE6 renders the margins wrong */
	margin-top: -6px;
}

.gallery #content-article #prevNext {
	background: url(images-Fall2007/gallery-article-top.gif) no-repeat left 16px;
	float: left;
	width: 94px;
	margin: 0 0 0 40px;
	padding: 11px 0 0 498px;
	font-size: 11px;
	color: #d9b768;
}

.gallery #content-article #prevNext b {
	color: #0d5868;
}

.gallery #content-article #prevNext a {
	color: #865e22;
	text-decoration: none;
}

.gallery #content-article #prevNext a:hover {
	text-decoration: underline;
}

.gallery #thumbNav {
	float: left;
	width: 76px;
	padding: 18px 10px 0px 11px;
	text-align: center;
}

.gallery #thumbNav img {
	display: block; /* prevents extra pixels below image */
}

.gallery #thumbNav img.date {
	display: inline; /* override to allow centering */
	padding-bottom: 16px;
}

.gallery #thumbNav li {
	float: left;
}

.gallery #thumbNav li a {
	display: block;
	padding: 3px;
}

.gallery #thumbNav li a:hover {
	padding: 1px;
	border: solid 2px #9f6b0c;
}

.gallery #thumbNav li a.active {
	padding: 1px;
	border: solid 2px #9f6b0c;
}

/* :::: BEGIN updated code (column1 (art) floated inside column2 (text)) :::: */

/* :: column1 (art) on right :: */
.gallery #content-article #column1 {
	float: right;
	width: 340px;
	padding: 0px 0px 12px 15px;
	text-align: center;
	line-height: 13px;
	text-transform: lowercase;
}

/* :: column1 (art) on left :: */
/*
.gallery #content-article #column1 {
	float: left;
	width: 340px;
	padding: 0px 15px 12px 0px;
	text-align: center;
	line-height: 13px;
	text-transform: lowercase;
}
*/

.gallery #content-article #column1 a {
	padding: 0 5px 0 5px;
}

.gallery #content-article #column1 img {
	border: solid 4px #000000;
}

.gallery #content-article #column2 {
	margin: 20px 0 0 122px;
	width: 576px;
	padding: 12px 0 0 15px;
}

.gallery #ie6plus #content-article #column2 { /* adjust IE6&7 margin to where we want it */
	margin-top: -8px;
}

.gallery #content-article #column2 h2 {
	padding-top: 4px;
	padding-bottom: 4px;
	color: #865e22;
	font-size: 14px;
	text-transform: uppercase;	
}

.gallery #content-article #column2 p {
	color: #233e44;
	font: 11px/13px Arial, Helvetica, sans-serif;
}

.gallery #ie5-6 #content-article #column2 p {
	padding-bottom: 14px;
}

/* :::: END updated code :::: */



/* ========================= */
/* News ==================== */
/* ========================= */

.news #content {
	display: inline; /* fix the IE6  double-margin float bug */
	background: url(images-Fall2007/bg-gallery-article.jpg) repeat-y;
	position: relative;
	float: left;
	width: 731px;
	margin: 3px 0 0 27px;
	padding: 0;
	
}

.news #ie6plus #content { /* tweak IE box placement */
	margin: 2px 0 0 28px;
}

.news #section-top {
	float: right;
	width: 731px;
	background: url(images-Fall2007/gallery-hrule.gif) no-repeat right top;
	height: 1px;	
}

.news #ie5-6 #section-top { /* IE6 renders the margins wrong */
	margin-top: -14px;
}

.news #section-bottom {
	float: right;
	width: 731px;
	background: url(images-Fall2007/gallery-dingbat-rule.gif) no-repeat right bottom;
	height: 25px;
}

.news #ie5-6 #section-bottom { /* IE6 renders the margins wrong */
	margin-top: -6px;
}

.news #sectionBanner {
	float: left;
	width: 76px;
	padding: 10px 10px 16px 11px;
	text-align: center;
}

.news #sectionBanner img {
	display: block;
}


/* ---------- column1 ---------- */

.news #column1 {
	float: left;
	width: 500px;
	padding: 16px 0 0 60px;
}

.news #content #column1 h2 {
	padding-bottom: 12px;
	font-size: 18px;
	color: #865e22;	
	text-transform: uppercase;
}

.news #content #column1 h3 {
	padding-bottom: 2px;
	font-size: 13px;
	color: #865e22;	
	text-transform: uppercase;
}

.news #content #column1 h3 a {
	color: #865e22;
	text-decoration: none;
}

.news #content #column1 h3 a:hover {
	text-decoration: underline;
}

.news #content #column1 h4 {
	padding-bottom: 5px;
	color: #233e44;
	font-size: 10px;
	text-transform: uppercase;
}

.news #content #column1 p {
	margin-bottom: 12px;
	padding-bottom: 12px;
	color: #233e44;
	font: 11px/13px Arial, Helvetica, sans-serif;
	border-bottom: solid 1px #d9b768;
}


/* ========================= */
/* Links =================== */
/* ========================= */

.links #content {
	display: inline; /* fix the IE6  double-margin float bug */
	background: url(images-Fall2007/bg-gallery-article.jpg) repeat-y;
	position: relative;
	float: left;
	width: 731px;
	margin: 39px 0 0 27px;
	padding: 0;
	
}

.links #ie6plus #content { /* tweak IE box placement */
	margin: 39px 0 0 28px;
}

.links #section-top {
	float: right;
	width: 731px;
	background: url(images-Fall2007/gallery-hrule.gif) no-repeat right top;
	height: 1px;	
}

.links #ie5-6 #section-top { /* IE6 renders the margins wrong */
	margin-top: -14px;
}

.links #section-bottom {
	float: right;
	width: 731px;
	background: url(images-Fall2007/gallery-dingbat-rule.gif) no-repeat right bottom;
	height: 25px;
}

.links #ie5-6 #section-bottom { /* IE6 renders the margins wrong */
	margin-top: -6px;
}

.links #sectionBanner {
	float: left;
	width: 76px;
	padding: 10px 10px 16px 11px;
	text-align: center;
}

.links #sectionBanner img {
	display: block;
}


/* ---------- column1 ---------- */

.links #column1 {
	float: left;
	width: 500px;
	padding: 16px 0 0 60px;
}

.links #content #column1 h2 {
	padding-bottom: 10px;
	font-size: 18px;
	color: #865e22;	
	text-transform: uppercase;
}

.links #content #column1 h3 {
	float: left;
	width: 500px;
	margin-bottom: 12px;
	padding-bottom: 4px;
	color: #233e44;
	font-size: 10px;
	text-transform: uppercase;
	border-bottom: solid 1px #d9b768;
}

/* IF Brian ever wants descriptions for links: consider using float clearing to make the columns even (clear the float after every 2 "linkBoxes") */

.links #content #column1 .linkBox {
	float: left;
	width: 226px;
	/*height: 80px;*/  /* disabled due to lack of link description content */
	padding: 0 12px 24px 12px;
}

.links #ie5-6 #content #column1 .linkBox { /* yet another IE6 tweak */
	/*height: 82px;*/  /* disabled due to lack of link description content */
}

.links #content #column1 h4 {
	padding-bottom: 3px;
	font-size: 13px;
	color: #865e22;	
	text-transform: uppercase;
}

.links #content #column1 p {
	padding-bottom: 4px;
	color: #233e44;
	font: 11px/13px Arial, Helvetica, sans-serif;
	
}


/* ========================= */
/* About =================== */
/* ========================= */

.about #content {
	display: inline; /* fix the IE6  double-margin float bug */
	background: url(images-Fall2007/bg-gallery-article.jpg) repeat-y;
	position: relative;
	float: left;
	width: 731px;
	margin: 39px 0 0 27px;
	padding: 0;
	
}

.about #ie6plus #content { /* tweak IE box placement */
	margin: 39px 0 0 28px;
}

.about #section-top {
	float: right;
	width: 731px;
	background: url(images-Fall2007/gallery-hrule.gif) no-repeat right top;
	height: 1px;	
}

.about #ie5-6 #section-top { /* IE6 renders the margins wrong */
	margin-top: -14px;
}

.about #section-bottom {
	float: right;
	width: 731px;
	background: url(images-Fall2007/gallery-dingbat-rule.gif) no-repeat right bottom;
	height: 25px;
}

.about #ie5-6 #section-bottom { /* IE6 renders the margins wrong */
	margin-top: -6px;
}

.about #sectionBanner {
	float: left;
	width: 76px;
	padding: 10px 10px 16px 11px;
	text-align: center;
}

.about #sectionBanner img {
	display: block;
}


/* ---------- column1 ---------- */

.about #column1 {
	float: left;
	width: 520px;
	padding: 16px 0 0 60px;
}

.about #content #column1 h2 {
	padding-bottom: 12px;
	font-size: 18px;
	color: #865e22;	
	text-transform: uppercase;
}

.about #content #column1 p {
	margin-bottom: 12px;
	padding-bottom: 12px;
	color: #233e44;
	font: 12px/18px Arial, Helvetica, sans-serif;
}


/* ========================= */
/* Popup Window ============ */
/* ========================= */

body.popup {
	/*background: url(images-Fall2007/bg-content-pattern216.jpg) repeat;*/
	background-color: #233e44;
	background-image: none;
	margin: 14px;
	padding: 0;
	font: 10px "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-align: center;
}

.popup img {
	border: solid 4px #000000;
}