/* ---------------------------------------------------------------------------
	Copyright 2006 Paul Hansen / Ecopixel - www.ecopixel.com
	All Rights Reserved.
--------------------------------------------------------------------------- */

@import url(reset.css);

body {
	width: 100%;
	font-size: 80%;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #000;
	background-color: #574E37;
	padding-top: 10px;
}

body.sec-makinghistory {
/* original green
	background-color: #535737; 
	background-color:#414F26; 
	background-color: #535737; */ 
/*	background-color: #374857; */
}

body.sec-about {
	background-color: #374857;
}

body.sec-films {
/*	background-color: #572A25; */
}

/* Order should be :link, :visited, :hover, :focus, :active */
a {
	color: #564398;
	text-decoration: none;
	border-bottom: 1px solid #564398;
}

a:visited {
	border-bottom: 1px dashed #564398;
}

a:hover {
	background-color: #EEEAE2;
}

/* No underline on images that are links */
/* No border on img anchors */
.csc-textpic-image a,
.csc-textpic-image a:visited,
.csc-textpic-image a:hover {
	border: none;
}


/* ---------------------------------------------------------------------------
	BEGIN main layout section
--------------------------------------------------------------------------- */


#wrap {
	position: relative;
	margin: 0 auto;
	width: 750px;
}

#logo {
	display: block;
	height: 44px;
	width: 273px;
	position: absolute;
	left: -5px;
	top: -5px;
}

#header {
	clear: both;
	position: relative;
	width: 750px;
	overflow: hidden;
	border-top: 3px solid #9D8D64;
	background: url(img/bg-header-allen.jpg) left bottom no-repeat;
}

/* Change header on Johnston pages */
body.subsec-johnston #header {
	background: url(img/johnston_banner_08.jpg) left 50% no-repeat;
}

body.sec-visualizing #header {
	background: url(img/bg-visualizing.gif) left bottom no-repeat;
	height: 200px;
}

body.sec-makinghistory h1#headline {
	color: #000;
}

body.sec-films #header {
	background: url(img/bg-header-films.jpg) left bottom no-repeat;
}

/* About Clio */
body.sec-about #header {
	background: #000 url(img/header-clio.jpg) left 50% no-repeat;
}

/* Change header on Johnston pages */
body.subsec-palmquist #header {
	background: #000 url(img/palmquist-banner.jpg) left 50% no-repeat;
}

/* on the home page */
body#page-1 #header {
	background: url(img/bg-header-home.jpg) left top no-repeat;
	height: 187px;
}

h1#headline {
	clear: both;
	color: #FFF;
	font-size: 1.5em;
	line-height: 120%;
	padding: 0.8em 0 0.8em 36px;
	letter-spacing: 0.15em;
}

#main {
	clear: both;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	width: 750px;
	background-color: #DDD6C5;
}

/* ---------------------------------------------------------------------------
	BEGIN navigation
--------------------------------------------------------------------------- */

#nav {
	float: right;
	width: 750px;
	background: url(img/bg-nav.gif) top right no-repeat;
}

#nav ul {
	float: right;
}

#nav li {
	padding-top: 34px;
	float: left;
}

#nav li.nav-1800 {
	background: url(img/bg-nav-1800.gif) right top no-repeat;
}

#nav li.nav-1900 {
	background: url(img/bg-nav-1900.gif) right top no-repeat;
}

#nav li.nav-2000 {
	background: url(img/bg-nav-2000.gif) right top no-repeat;
}

#nav a {
	border-bottom: 0;
	float: left;
	display: block;
	padding: 0.3em 10px;
	text-decoration: none;
	color: #D6CEB9;
	white-space: nowrap;
	border-right: 1px solid #9D8D64;
}

#nav a:hover {
	background-color: #3A3424;
	color: #FFF;
}

#nav a.nav-act,
#nav a.nav-act:hover { /* for IE6/Win */
	background-color: #2B271B;
	color: #FFF;
}

#nav li.nav-last a {
	border-right: 0;
	padding-right: 36px;
}



/* Breadcrumb nav */

#navcrumbs {
	float: left;
	width: 750px;
}

#navcrumbs ul {
	float: left;
}

#navcrumbs li {
	float: left;
}

#navcrumbs a {
	border-bottom: 0;
	float: left;
	display: block;
	position: relative;
	text-decoration: none;
	color: #D6CEB9;
	white-space: nowrap;
	background: url(img/bg-navcrumbs.gif) right 50% no-repeat;
}

#navcrumbs a span {
	display: block;
	padding: 0.3em 0 0.3em 23px;
	position: relative;
	left: -15px;
	background: url(img/bg-navcrumbs-left.gif) left 50% no-repeat;
}

#navcrumbs a:hover {
	color: #FFF;
	background: url(img/bg-navcrumbs-hover.gif) right 50% no-repeat;
}

#navcrumbs a:hover span {
	color: #FFF;
	background: url(img/bg-navcrumbs-left-hover.gif) left 50% no-repeat;
}

#navcrumbs li.nav-first a, 
#navcrumbs li.nav-firstlast a {
	padding-left: 27px;
}


/* Page nav */

#navpage {
	clear: both;
	float: left;
	width: 750px;
}

#navpage ul {
	float: left;
}

#navpagebot {
	clear: both;
	float: right;
	width: 750px;
	margin-top: 18px;
	background-color: #A8B1C8;
}

#navpagebot ul {
	float: right;
	background-color: #DDD6C5;
	padding-right: 30px;
}

#navpage li,
#navpagebot li {
	float: left;
}

#navpage a,
#navpagebot a {
	border-bottom: 0;
	float: left;
	display: block;
	position: relative;
	padding: 0.3em 10px;
	text-decoration: none;
	color: #000;
	white-space: nowrap;
	background: url(img/bg-navpage.gif) left 50% no-repeat;
	border-right: 1px solid #DDD6C5;
}

#navpage a:hover,
#navpagebot a:hover {
	color: #000;
	background: url(img/bg-navpage-hover.gif) left 50% no-repeat;
}

#navpage li.nav-first a {
	padding-left: 36px;
}

#navpage li.nav-last a,
#navpagebot li.nav-last a {
	border-right: 0;
	background: url(img/bg-navpage.gif) right 50% no-repeat;
	padding-right: 1em;
	padding: 0.3em 15px 0.3em 10px;
}

#navpage li.nav-last a:hover,
#navpagebot li.nav-last a:hover {
	color: #000;
	background: url(img/bg-navpage-hover.gif) right 50% no-repeat;
}

 
/* ---------------------------------------------------------------------------
	BEGIN main content formatting
--------------------------------------------------------------------------- */

#headline, #nav, #navcrumbs, #navpage, #navpagebot, #footer {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#content {
	width: 678px;
	padding: 18px 36px 0 36px;
}

#content h1 {
	margin: 0 0 0.5em 0;
	font-size: 1.8em;
	line-height: 120%;
	font-weight: normal;
	color: #574E37;
}

#content h2 {
	margin: 0 0 0.5em 0;
	font-size: 1.3em;
	line-height: 120%;
	font-weight: normal;
	border-bottom: 1px solid #9D8D64;
}

/* ---------- captions start ------------- */


#content .csc-textpic-caption {
}

/* see TS for imageWrap that inserts this */
#content span.csc-caption-text {
	font-family: Arial, Helvetica, sans-serif;
	line-height: 150%;
	display:block;
/*	border-top: 1px solid #9D8D64;
	border-bottom: 1px solid #9D8D64; */
/* 	background-color: #CDC3AC; */
	color: #000;
	padding: 0.5em 0.7em; 
}

/* see TS for imageWrap that inserts this */
#content span.csc-caption-text {
	font-family: Arial, Helvetica, sans-serif;
	line-height: 150%;
	display:block;
/*	border-top: 1px solid #9D8D64;
	border-bottom: 1px solid #9D8D64; */
	color: #000;
	padding: 0.5em 0.7em; 
	border: 1px solid #BDB194;
	border-top: none;
}

/* ---------- end captions ------------- */



#content .csc-frame-rulerBefore {
	clear: both;
	border-top: 1px dashed #9D8D64;
	padding-top: 1em;
}

#content .csc-frame-frame1 {
	border-top: 1px dashed #9D8D64;
	padding: 1em 0 0 0;
	border-bottom: 1px dashed #9D8D64;
	margin: 1em 0 1em 0;
}


/* #content .csc-frame-rulerBefore */

#content h3 {
	margin-top: 1em;
	line-height: 160%;
	font-weight: bold;
	color: #000;
}

#content h4 {
	margin-top: 1em;
	line-height: 160%;
	font-weight: bold;
	font-style: italic;
	color: #574E37;
}

#content p {
	margin: 0 0 1em 0;
	line-height: 160%;
	font-size: 1.2em;
}

#content blockquote {
	float: right;
	width: 170px;
	color: #574E37;
	border-top: 1px solid #9D8D64;
	border-bottom: 1px solid #9D8D64;
	margin: 0 0 1em 1em;
	padding: 0.5em 0;
	font-style: italic;
	font-weight: bold;
	line-height: 160%;
}

#content ul {
	list-style-type: square;
	padding-left: 18px;

}

#content ol {
	list-style-type: decimal;
	padding-left: 18px;
}

#content ul li, #content ol li {
	line-height: 160%;
	margin-bottom: 1em;
}


/* ---------------------------------------------------------------------------
	BEGIN footer block
--------------------------------------------------------------------------- */

#footer {
	float: left;
	clear: both;
	background-color: #3A3424;
	width: 750px;
	color: #D6CEB9;
	margin-bottom: 18px;
	border-top: 3px solid #9D8D64;
}


/* FOOTER NAVIGATION */

#navfoot {
	float: left;
	width: 750px;
}

#navfoot ul {
	float: left;
}

#navfoot li {
	float: left;
}

#navfoot a {
	border-bottom: 0;
	float: left;
	display: block;
	text-decoration: none;
	padding: 0.3em 10px;
	color: #D6CEB9;
	white-space: nowrap;
	border-right: 1px solid #9D8D64;
}

#navfoot a:hover {
	background-color: #2B271B;
	color: #FFF;
}

#navfoot a.nav-act,
#navfoot a.nav-act:hover { /* for IE6/Win */
	background-color: #000;
	color: #FFF;
}

#navfoot li.nav-first a {
	padding-left: 36px;
}

#navfoot li.nav-last a {
	border-right: 0;
}

/* FOOTER TEXT */

#footer-text {
	clear: both;
	padding: 10px 36px 18px 36px;
}

#footer-text p {
	line-height: 140%;
}

#footer-text a {
	color: #D6CEB9;
	border-bottom: 1px solid #78715F;
}

#footer-text a:visited {
	border-bottom: 1px dashed #78715F;
}

#footer-text a:hover {
	color: #FFF;
	background-color: #2B271B;
}


/* better list styles */


#content ul {
	margin-left: 0;
	padding-left: 2em;
	margin: 1.2em 0;

}

#content ol {
	list-style-type: decimal;
	margin-left: 0;
	padding-left: 2em;
	margin: 1.2em 0;
}

#content ul li, #content ol li {
	padding-left: 0;
	margin: 0;
/*	list-style-type: none;
	background: url(bg-li.png) left 0.7em no-repeat; */

}

#content ol li {
	list-style-type: decimal;
	background: none;
}