* {
	margin: 0;
	padding: 0;
	font-size: 1em;

}


body
{
	color: #000;
	font-family: georgia, serif;
	font-size: 76%;
	background: #fff url(img/bg-pattern.gif) repeat;
	text-align: left;
}



a, a:link, a:active, a:visited
{
	outline: none;
	color: #58a2d3;
	text-decoration: none;
}

a:hover
{
	text-decoration: underline;
	color: #332222;

}


.link { color: #000; }

.hide
{
	color: #322;
	text-decoration: none;
	font-style: normal;
	font-variant: normal;
	text-transform: uppercase;
}


#container
{
	width: 450px;
	height: 550px;
	margin: 12px auto 32px auto;
	background: #000;
}

#content
{
	width: 450px;
	height: 450px;
	position: relative;
	background-color: #000;
}

* html #content {height: 447px;}

#header
{
	width: 430px;
	float: left;
	height: 40px;
	position: relative;
	text-align: left;
	padding: 40px 0px 0px 20px;
	font-size: 23px;
}


#content-left
{
	width: 153px;
	float: left;
	height: 330px;
	padding: 20px 20px 20px 20px;
}
#content-right
{
	width: 227px;
	float: right ;
	height: 330px;
	padding: 20px 20px 20px 0px;

}



#johanna-inman
{
	width: 200px;
	height: 107px;
	float: left;
	background-color: #332222;
	display: inline;
}

#navigation
{
	width: 250px;
	height: 107px;
	float: right;
	position: relative;

}

h2
{
	font-size: .95em;
}

h3
{ 
	font-size: .95em;
margin: 15px 0px 0px 0px;
}


p
{
	font-size: .85em;
	line-height: 1.3em;	
	padding: 6px 0px 0px 0px;
}



.italics { font-style: italic; }




.top-padding
{
		margin: 10px 0px 0px 0px;
}

/* this rollover CSS created by collys rollover generator at http://www.collylogic.com/scripts/rollover.html */
.johanna-inman-home {
float:left;
width:200px;
height:107px;
background: url(img/johanna-inman.gif) no-repeat 0 0px;
}
a.johanna-inman-home:link, a.johanna-inman-home:visited, a.johanna-inman-home:active {
text-decoration:none;
background: url(img/johanna-inman.gif) no-repeat 0 0px;
}
a.johanna-inman-home:hover {
background: url(img/johanna-inman.gif) no-repeat -200px 0px;
}

/* NAVIGATION : sprite rollovers : using metropolitanbakery.com as a reference  */

#nav
{
	height: 107px;
	width: 250px;
	background-image: url(img/nav.gif);
	background-repeat: no-repeat;
}
#nav ul
{
    height: 107px;
    position: relative;
}

#nav a {display: block; height: 107px;}

#nav li
{
	list-style: none;
	display: block;
	position: absolute;
}

#nav li a {
	text-indent: -9999px;
	text-decoration: none;
	}


#nav a {
		display: block;
		height: 26px;
		}


#about {left: 0; top: 0; width: 250px;}
#contact {left: 0; top: 27px; width: 250px;}
#work {left: 0; top: 54px; width: 250px;}
#some {left: 0; top: 81px; width: 170px;}

#about a:hover {background: url(img/nav.gif) 0 -107px no-repeat;}
#contact a:hover {background: url(img/nav.gif) 0 -134px no-repeat;}
#work a:hover {background: url(img/nav.gif) 0 -161px no-repeat;}
#some a:hover {background: url(img/nav.gif) 0 -188px no-repeat;}

/* NAVIGATION : sprite rollovers : do not get high and try to make a complicated navigation system  */
#nav-work
{
	height: 107px;
	width: 250px;
	background-image: url(img/nav-work.gif);
	background-repeat: no-repeat;
}
#nav-work ul
{
    height: 107px;
    position: relative;
}

#nav-work a {display: block; height: 107px;}

#nav-work li
{
	list-style: none;
	display: block;
	position: absolute;
}

#nav-work li a 
{
	text-indent: -9999px;
	text-decoration: none;
}

#nav-work a {
		display: block;
		height: 26px;
		}


#work-over {left: 0; top: 54px; width: 42px;}
#work1 {left: 42px; top: 54px; width: 18px;}
#work2 {left: 60px; top: 54px; width: 18px}
#work3 {left: 78px; top: 54px; width: 20px;}
#work4 {left: 98px; top: 54px; width: 18px;}
#prev {left: 126px; top: 54px; width: 69px;}
#next {left: 195px; top: 54px; width: 44px;}
#statement {left: 172px; top: 81px; width: 71px;}

#work-over a {width: 42px; height: 26px;}
#work1 a {width: 18px; height: 26px;}
#work2 a {width: 18px; height: 26px;}
#work3 a {width: 20px; height: 26px;}
#work4 a {width: 18px; height: 26px;}
#prev a {width: 69px; height: 26px;}
#next a {width: 44px; height: 26px;}
#statement a {width: 71px; height: 26px;}

#work-over a:hover {background: url(img/nav-work.gif) 0 -161px no-repeat;}
#work1 a:hover {background: url(img/nav-work.gif) -42px -161px no-repeat;}
#work2 a:hover {background: url(img/nav-work.gif) -60px -161px no-repeat;}
#work3 a:hover {background: url(img/nav-work.gif) -78px -161px no-repeat;}
#work4 a:hover {background: url(img/nav-work.gif) -98px -161px no-repeat;}
#prev a:hover {background: url(img/nav-work.gif) -126px -161px no-repeat;}
#next a:hover {background: url(img/nav-work.gif) -195px -161px no-repeat;}
#statement a:hover {background: url(img/nav-work.gif) -175px -188px no-repeat;}

	/* You are here - SUB NAV */

body.about #about {background: url(img/nav.gif)  0 -107px no-repeat;}
body.contact #contact {background: transparent url(img/nav.gif) 0 -134px no-repeat;}
body.work1 #work1 {background: url(img/nav-work.gif) -42px -161px no-repeat;}
body.work2 #work2 {background: url(img/nav-work.gif) -60px -161px no-repeat;}
body.work3 #work3 {background: url(img/nav-work.gif) -78px -161px no-repeat;}
body.work4 #work4 {background: url(img/nav-work.gif) -98px -161px no-repeat;}
body.some #some {background: transparent url(img/nav.gif) 0 -188px no-repeat;}
body.statement #statement {background: transparent url(img/nav-work.gif) -175px -188px no-repeat;}

body.about #content, body.contact #content, body.statement #content, body.some #content{background-color: #fff;}