@CHARSET "UTF-8";

/**
 * janepepper.co.uk website
 * Designed and implemented by getpepper.com
 * Copyright getpepper 2008
 */


/**
 * css reset
 */

* {
	margin: 0px;
	padding: 0px;
	border: 0px;
}


/**
 * main body, text, headers, etc
 */

html {
	height: 100%;
}

body {
	min-height: 765px;
	height: 100%;
	width: 100%;
	font-family: Arial, Helvetica, sans-serif;
    font-size: 13pt; 
	color: #5d4c40;
	line-height: 1.4;
}

#container {
	width: 905px;
	margin: 0px auto 0px auto;
}

h1 {
	font-size: 1.6em;
	font-family: Helvetica, Arial, sans-serif;
	margin: 1.3em 0em 0.6em 0em;
	text-transform: lowercase;
}

.dummy-h1 {
	/* height is comparable margin as on h1 */
	height: 2.2em;
}

h2 {
	font-size: 1.2em;
	font-family: Helvetica, Arial, sans-serif;
	margin: 1.6em 0em 0.6em 0em;
	text-transform: lowercase;
}

p {
	margin: 0em 0em 1em 0em;
}

ol.biography-items {
	list-style-type: none;
}

ol.biography-items li {
	margin-top: 0.8em;
}

.gp-get {
	color: #f36f3f;
	font-weight: bold;
}

.gp-pepper {
	color: #555;
	font-weight: bold;
}

.clear {
	clear: both;
}


/**
 * banner
 */

#banner {
	background: #fff;
	margin: 15px 0px 0px 240px;
}


/**
 * horizontal rule
 */

.hr {
	display: block;
	background: url("../images/jp-rule.png") repeat-x;
	width: 660px;
	height: 4px;
	margin: 10px 0px 0px 225px;
}

.hr-left {
	float: left;
	display: inline; /* IE6 double margin float bug-fix */
	background: url("../images/jp-rule-ends.png") no-repeat 0px 0px;
	width: 3px;
	height: 4px;
}

.hr-right {
	float: right;
	display: inline; /* IE6 double margin float bug-fix */
	background: url("../images/jp-rule-ends.png") no-repeat -3px 0px;
	width: 3px;
	height: 4px;
}

#foot-hr {
	margin-top: 2.2em;
}


/**
 * Menu navigation
 */

#menu {
	float: left;
	display: inline; /* IE6 double margin float bug-fix */
	width: 170px;
	min-height: 400px;
	/* Fix for IE5/6 min-height bug */ 
	height: 400px;
	margin: 2.2em 35px 20px 20px;
}

/* Fix for IE5/6 min-height bug */ 
html > body #menu {
	height: auto;
}

#menu span {
	display: none;
}

#menu a img {
	border: none;
	text-decoration: none;
	background-color: #fff;
}

#menu ul {
	list-style: none;
}

#menu a {
	display: block;
	width: 120px;
	height: 26px;
	margin: 3px 0px;
}

#submenu1,
#submenu2 {
	margin-left: 50px;
	display: none;
}

#submenu1 a,
#submenu2 a {
		height: 26px;
}

.portfolio #submenu1,
.exhibitions #submenu2 {
		display: block;
}



/* home */
#menu-home a { background: url("../images/jp-nav.png") no-repeat 0px 0px; }
#home #menu-home a { background-position: 0px -26px; }
#menu-home a:hover { background-position: 0px -52px; }

/* statement */
#menu-statement a { background: url("../images/jp-nav.png") no-repeat -120px 0px; }
#statement #menu-statement a { background-position: -120px -26px; }
#menu-statement a:hover { background-position: -120px -52px; }

/* portfolio */
#menu-portfolio a { background: url("../images/jp-nav.png") no-repeat -240px 0px; }
.portfolio #menu-portfolio a.head { background-position: -240px -26px; } 
#portfolio #menu-portfolio a.head { background-position: -240px -26px; }
#menu-portfolio a:hover { background-position: -240px -52px; }

/* exhibitions */
#menu-exhibitions a { background: url("../images/jp-nav.png") no-repeat -1920px 0px; }
.exhibitions #menu-exhibitions a.head { background-position: -1920px -26px; }
#exhibitions #menu-exhibitions a.head { background-position: -1920px -26px; }
#menu-exhibitions a:hover { background-position: -1920px -52px; }

/* biography */
#menu-biography a { background: url("../images/jp-nav.png") no-repeat -360px 0px; }
.biography #menu-biography a.bio { background-position: -360px -26px; }
#biography #menu-biography a.bio { background-position: -360px -26px; }
#menu-biography a:hover { background-position: -360px -52px; }

/* contact */
#menu-contact a { background: url("../images/jp-nav.png") no-repeat -480px 0px; }
#contact #menu-contact a { background-position: -480px -26px; }
#menu-contact a:hover { background-position: -480px -52px; }

/* portfolio (installation) */
#menu-installation a { background: url("../images/jp-nav.png") no-repeat -600px 0px; }
#installation #menu-installation a { background-position: -600px -26px; }
#menu-installation a:hover { background-position: -600px -52px; }

/* portfolio (posters) */
#menu-posters a { background: url("../images/jp-nav.png") no-repeat -720px 0px; }
#posters #menu-posters a { background-position: -720px -26px; }
#menu-posters a:hover { background-position: -720px -52px; }

/* portfolio (fieldguides) */
#menu-fieldguides a { background: url("../images/jp-nav.png") no-repeat -840px 0px; }
#fieldguides #menu-fieldguides a { background-position: -840px -26px; }
#menu-fieldguides a:hover { background-position: -840px -52px; }

/* portfolio (chemistry) */
#menu-chemistry a { background: url("../images/jp-nav.png") no-repeat -960px 0px; }
#chemistry #menu-chemistry a { background-position: -960px -26px; }
#menu-chemistry a:hover { background-position: -960px -52px; }

/* portfolio (naturalhistory) */
#menu-naturalhistory a { background: url("../images/jp-nav.png") no-repeat -1080px 0px; }
#naturalhistory #menu-naturalhistory a { background-position: -1080px -26px; }
#menu-naturalhistory a:hover { background-position: -1080px -52px; }

/* portfolio (video) */
#menu-video a { background: url("../images/jp-nav.png") no-repeat -1200px 0px; }
#video #menu-video a { background-position: -1200px -26px; }
#menu-video a:hover { background-position: -1200px -52px; }

/* portfolio (video stills) */
#menu-videostills a { background: url("../images/jp-nav.png") no-repeat -1320px 0px; }
#video-stills #menu-videostills a { background-position: -1320px -26px; }
#menu-videostills a:hover { background-position: -1320px -52px; }

/* portfolio (wallpapers) */
#menu-wallpapers a { background: url("../images/jp-nav.png") no-repeat -1800px 0px; }
#wallpapers #menu-wallpapers a { background-position: -1800px -26px; }
#menu-wallpapers a:hover { background-position: -1800px -52px; }

/* biography (Darklight) */
#menu-darklight a { background: url("../images/jp-nav.png") no-repeat -1680px 0px; }
#darklight #menu-darklight a { background-position: -1680px -26px; }
#menu-darklight a:hover { background-position: -1680px -52px; }

/* biography (Interleave) */
#menu-interleave a { background: url("../images/jp-nav.png") no-repeat -1440px 0px; }
#interleave #menu-interleave a { background-position: -1440px -26px; }
#menu-interleave a:hover { background-position: -1440px -52px; }

/* biography (Degree Show) */
#menu-degreeshow a { background: url("../images/jp-nav.png") no-repeat -1560px 0px; }
#degree-show #menu-degreeshow a { background-position: -1560px -26px; }
#menu-degreeshow a:hover { background-position: -1560px -52px; }

/* biography (Trust the Tale) */
#menu-trustthetale a { background: url("../images/jp-nav.png") no-repeat -2040px 0px; }
#trustthetale #menu-trustthetale a { background-position: -2040px -26px; }
#menu-trustthetale a:hover { background-position: -2040px -52px; }

/**
 * Content
 */

#content {
	float: left;
	display: inline; /* IE6 double margin float bug-fix */
	width: 660px;
	margin: 0px 0px 0px 0px;
}

#content a, #content a:visited, #content a:active {
	text-decoration: none;
	color: #5d4c40;
	border-bottom: 1px solid #5d4c40;
}

#content a:hover {
	color: #bc8c5b;
	border-bottom: 1px solid #bc8c5b;
}

#content form.enquiry .captcha-control a {
	border-bottom: none;
}

#content a.email-addr {
	border-bottom: none;
}

.option-hr {
	font-weight: bold;
	margin: 10px 0px 10px 40px;
}

#home #chemistry {
	margin-left: 12px;
}

/**
 * Slideshow
 */

#content .slideshow-gallery li a {
	background-color: #888;
	color: #fff;
}

#content .slideshow-gallery a {
	border-bottom: none;
}

#content .slideshow-gallery li.current a {
	background-color: #555;
}

/**
 * styling for portfolio summary page
 */ 

#portfolio-thumb1 {
	position:absolute;
	left:250px;
	top:245px;
	width:350px;
	height:175px;
	z-index:1;
}
#Layer1 {
	position:absolute;
	left:249px;
	top:254px;
	width:660px;
	height:185px;
	z-index:1;
}
.style1 {font-size: 11pt}
.style2 {font-size: 11px}


/**
 * mailto obfuscation guarding against email harvester bots
 */ 

a.email-addr {
	display: block;
	width: 324px;
	height: 19px;
	background: url("../images/jp-email.png") no-repeat 0px -19px;
	margin: 0 0 0.8em 1em;
}

a.email-addr:hover {
	background: url("../images/jp-email.png") no-repeat 0px 0px;
}


/**
 * Contact Form
 */

#contact p {
	margin: 0.1em 0 0.3em;
}

form.enquiry {
	width: 640px;
}

form.enquiry fieldset {
	float: left;
	display: inline; /* IE6 double margin float bug-fix */
	clear: both;
	width: 100%;
	margin: 0.5em 0 0.5em 1em;
}

form.enquiry fieldset.submit {
	float: none;
	display: inline; /* IE6 double margin float bug-fix */
	width: auto;
}

form.enquiry ol,
form.enquiry p {
	float: left;
	display: inline; /* IE6 double margin float bug-fix */
	clear: left;
	width: 100%;
	margin-left: 1em;
}

form.enquiry legend {
	font-weight: bold;
}

form.enquiry li {
	float: left;
	display: inline; /* IE6 double margin float bug-fix */
	clear: left;
	width: 100%;
	list-style: none;
	margin: 0.1em 0em;
}

form.enquiry label {
	float: left;
	display: inline; /* IE6 double margin float bug-fix */
	width: 7em;
	margin-right: 1em;
	line-height: 1.8em;
	vertical-align: top;
	text-align: right;
}

form.enquiry em,
em.hilite {
	font-weight: bold;
	font-style: normal;
	color: #f36f3f;
}

form.enquiry input,
form.enquiry textarea {
	float: left;
	display: inline; /* IE6 double margin float bug-fix */
	width: 20em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11pt;
	color: #5d4c40;
	border: 1px inset #666;
	padding: 0.2em;
}

form.enquiry textarea.invalid-entry,
form.enquiry input.invalid-entry {
	background-color: #fde6de;
}

form.enquiry textarea {
	height: 7em;
}

form.enquiry fieldset.submit .button{
	width: auto;
	padding: 3px;
	margin-left: 9.7em;
	font-size: 12pt;
	border: 1px groove #666;
}

form.enquiry .captcha-wrapper,
form.enquiry .captcha-image,
form.enquiry .captcha-controls-wrapper,
form.enquiry .captcha-control {
	display: block;
	float: left;
	display: inline; /* IE6 double margin float bug-fix */
}

form.enquiry .captcha-control {
	clear: left;
	font-size: 0.7em;
}

form.enquiry .captcha-wrapper {
	margin-left: 8em;
}

form.enquiry .captcha-value {
	width: 4em;
}

form .error-message {
	color: #f38158;
}

#accessibility ul.tick-list {
	margin: 0 0 1em 1em;;
	list-style: disc;
	list-style-position: inside;
}

#accessibility li.tick-list {
	margin: 0 0 0 2em;
}

/**
 * Rainbow Press Release
 */
 
#rainbow-PR p {
	font-size: 11pt;
} 

/**
 * Footer
 */

#footer {
	clear: both;
	margin: 5px 20px 20px 225px;
	background: #fff;
	color: #885b36;
	font-size: 0.7em;
}

#footer li {
	display: inline;
	list-style: none;
	float: left;
	display: inline; /* IE6 double margin float bug-fix */
}

#footer a, #footer a:visited, #footer a:active {
	text-decoration: none;
	color: #5d4c40;
	border-bottom: 1px solid #5d4c40;
}

#footer a:hover {
	color: #bc8c5b;
	border-bottom: 1px solid #bc8c5b;
}

#housekeeping {
	float: left;
	display: inline; /* IE6 double margin float bug-fix */
}

#housekeeping li {
	margin-right: 0.8em;
}

#site-design {
	float: right;
	display: inline; /* IE6 double margin float bug-fix */
}

#site-design li {
	margin-left: 0.8em;
}
#site-map #content li {
	margin-left: 4em;
}
#site-map #content li li {
	margin-left: 2em;
}
#statement #portrait {
	background-repeat: no-repeat;
	background-position: center;
}
.imageleft {
	float: left;
	margin-right: 10px;
	border: 1px groove #5D4C40;
	padding: 5px;
	margin-bottom: 0px;
}
.floatright {
	float: right;
	padding-left: 10px;
}
#statement #container #content .imageleft {
	margin-bottom: 0px;
}
#portfolio #container #content .style1 a {
	vertical-align: bottom;
	background-position: bottom;
}
#exhibitions #container #content .style1 a {
	vertical-align: bottom;
	background-position: bottom;
}

