body{ /* may as well define all sorts of stuff right off the bat, so compliant browsers won't have much room to get things wrong */
	position:relative;
	float:none;
	left:0px;
	top:0px;
	visibility:visible;
	cursor:default;
	clear:none;
	margin: 0;
	padding: 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight:normal;
	font-style:normal;
	color:#000000;
	font-size:10pt;
	text-decoration: none;
	letter-spacing:0px;
	line-height:1;
	text-align: left;
	text-indent:0px;
	border-style : none;
	background-attachment: scroll;
	background-color: #EBE4BB;
	background-image: url(../images/testbg.gif);
	background-repeat: repeat;
}

a{ /* setting the link colour for text links, but also making sure some browsers don't try to sneak in fugly borders */
	color: #735B17;
	border-width : 0;
	border-style : none;
	text-decoration: none;
}

a:visited{ /* making sure that the links... */
	color: #735B17;
	border-width : 0;
	border-style : none;
	text-decoration: none;
}

a:active{ /* ...don't turn weird colours when people use them */
	color: #735B17;
	border-width : 0;
	border-style : none;
	text-decoration: none;
}

a:hover{ /* we'll give text links an underline when hovered over */
	color: #997A1F;
	border-width : 0;
	border-style : none;
	text-decoration: underline;
}

img { /* we need to remove the ungodly freaking borders around link images that screw over our layout in <cough>CERTAIN BROWSERS</cough>, so... */
	margin: 0;
	padding: 0;
	border-style: none;
}

/* --NAVIGATION BAR-- */

.header{
	position:absolute;
	top:0px;
	left:0px;
	height:72px;
	width:100%;
	background-image:url(../images/navbar_bg.gif);
	background-repeat: repeat-x;
	background-position:top left;
	background-attachment:scroll;
	margin: 0;
	padding: 0;
	z-index: 1;
}

.gohome{ /* a little something for our "Wendy Irvine" title image to stay put in the corner */
	position:absolute;
	top:0px;
	left:0px;
	background-attachment:scroll;
	border-style : none;
}

.nav1roll{ /* nav1roll defines how the first Portfolio button will look in its resting position */
	position: absolute;
	top:0px;
	left: 440px;
	border-style : none;
	margin: 0;
	padding: 0;
	background: url(../images/navbar_pf.png) no-repeat 0 0; /* the background image is twice as tall as the portion of it that actually shows, so we ensure the top half is what people normally see  */
}

.nav1roll:hover{ /* the :hover pseudo-class is what we use to change the background's properties when an unsuspecting mouse wanders by...look ma, no JavaScript! */
	border-style : none;
	margin: 0;
	padding: 0;
	background: url(../images/navbar_pf.png) no-repeat 0 -53px; /* this moves it up until only the bottom half, containing the hover state, is showing */
}

.nav1current{ /* for the Fine Art Portfolio page itself, we'll use the nav1current class for the actual div instead of nav1roll so it only ever shows the highlighted state, indicating that's the page we're on */
	position: absolute;
	top:0px;
	left: 440px;
	border-style : none;
	margin: 0;
	padding: 0;
	background: url(../images/navbar_pf.png) no-repeat 0 -53px;
}

.nav2roll{ /* second verse, same as the first */
	position: absolute;
	top:0px;
	left: 556px;
	border-style : none;
	margin: 0;
	padding: 0;
	background: url(../images/navbar_ct.png) no-repeat 0 0;
}

.nav2roll:hover{
	border-style : none;
	margin: 0;
	padding: 0;
	background: url(../images/navbar_ct.png) no-repeat 0 -53px;
}

.nav2current{
	position: absolute;
	top:0px;
	left: 556px;
	border-style : none;
	margin: 0;
	padding: 0;
	background: url(../images/navbar_ct.png) no-repeat 0 -53px;
}

.navMcIroll{ /* we're sticking the McIrv button over at the right end of the bar so it stands apart, seeing as it links to a separate site */
	position: absolute;
	top:0px;
	right: 0px; /* just in case "float: right;" doesn't give our browser the hint */
	border-style : none;
	margin: 0;
	padding: 0;
	background: url(../images/navbar_cop.png) no-repeat 0 0;
	float: right;
	visibility: hidden; /* we don't want people to actually see this until there's at least a website to link to, at which point we can just delete the two "visibility: hidden" lines out of this file */
}

.navMcIroll:hover{
	border-style : none;
	margin: 0;
	padding: 0;
	background: url(../images/navbar_cop.png) no-repeat 0 -53px;
	visibility: hidden;
}

/* --PAGE CONTENT-- */

#centre-content {
	width: 100%;
	min-width: 640px; /* we want at least most browsers to stop squeezing our page layout before it gets ridiculous, even though IE and the like can't be helped without headache-inducing hacks */
	margin: 0;
	padding: 0;
	position: absolute;
	top: 80px;
	z-index: 0;
	line-height: 1.125em;
}

#content { /* since our wrapper up there takes care of the vertical positioning, this div is free to position itself relatively towards the centre of the page */
	height: auto;
	width: 80%;
	min-width: 640px; /* y'know, just to make sure */
	position: relative;
	margin-left: auto;
	margin-right: auto;
	top: 16px;
	z-index: inherit;
	overflow: visible;
}

#ie6 { /* giving the little IE6 warning box some explicit instructions on how to look */
	height: 88px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	top: 8px;
	width: 420px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #996600;
	border-right-color: #996600;
	border-bottom-color: #996600;
	border-left-color: #996600;
	padding: 4px;
}

.title {
	margin-bottom: 4px; /* to give the title images a little breathing room before the next line */
	clear: none;
}

ul li {
	margin-bottom: 1em;
}

#wendy { /* this image, for the front page, needs shadows and positioning that aren't common to all images, so it gets its own ID */
	float: right;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
	margin-left: 32px;
	margin-bottom: 32px;
}
.pf-item { /* the container for an entire portfolio item */
	width: 512px;
	clear: both;
	float: left;
	height: auto;
	margin-bottom: 1px; /* we want it spaced evenly from the next item */
}

.pf-item-thumb { /* the div where our thumbnail image will go */
	height: 128px;
	width: 128px;
	padding: 0px;
	float: left;
	margin-right: 1px; /* spaces the title, medium and description divs horizontally away from this one */ 
}

.pf-item-titlerow { /* holds the piece's title */
	color: #EBE4BB;
	font-size: 1.125em;
	font-weight: bold;
	background-color: #997A1F;
	background-image: url(../images/pftablecorner.png); /*using a transparent PNG to give both of these rows a little sheen */
	background-repeat: no-repeat;
	background-position: right top;
	overflow: hidden; /* this seems to keep the div's position and size from getting unruly */
	padding: 2px;
	margin-bottom: 1px; /* spaces the medium div downwards from the title div */
}

.pf-item-mediumrow { /* holds information about the medium in which the piece was done */
	background-color: #C2AF6D;
	font-size: small;
	font-style: italic;
	background-image: url(../images/pftablecorner.png);
	background-repeat: no-repeat;
	background-position: right top;
	padding: 2px;
	overflow: hidden;
	margin-bottom: 1px; /* in turn, spaces the description div downwards from the medium div */
}

.pf-item-desc { /* holds a description of the piece, if there is one */
	padding: 2px;
	overflow: hidden;
}

#pf-switch {
	position: relative;
	top: -4px;
	margin-left: 135px;
}

#return {
	position: absolute;
	left: 8px;
	top: 8px;
}

/* --FOOTER-- */

#footer {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	width: auto;
	z-index: inherit;
	top: 32px;
	clear: both;
}

#footer p {
	color: gray;
	font: normal normal 10px "Lucida Grande", Lucida, Verdana, sans-serif;
	text-align: center;
}