@charset "utf-8";
/* CSS Document */
body {
	background-color: #ffffff;
}
a img {
	border:none;
}
/* The following fixes the dot over the image link problem in firefox. This will however, cause accessibility issues. Here's a workaround: a.ffx:focus, a.ffx:hover, a.ffx:active {
outline: none;} then assign this class to each image that is a link.*/
a:focus, a:hover, a:active {
	outline:none
}
#main {
	background-color: #ffffff;
	height:auto;
	width: 875px;
	margin-left: auto;
	margin-right: auto;
}
.divClear {
	clear: both;
}
img.center {
	display: block;
	margin-left: auto;
	margin-right: auto
}

/* HEADER-----------------------------------------------------------------------------*/
#header {
	background-color: #ffffff;
	padding-left: 0px;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
}
#hopetag {
	float:left;
	position: relative;
	background-color: #ffffff;
	background-image: url(../graphics/hopeblock.png);
	height: 107px;
	width: 124px;
	margin: 0px 0px 5px 0px;
	display: inline;
}
#hope {
	margin-top: 35px;
	width: 100px;
	margin-left: 10px;
}
#banner {
	float:left;
	position: relative;
	background-color: #fff;
	background-image: url(../graphics/banner.png);
	height: 107px;
	width: 713px;
	margin: 0px 0px 5px 20px;
	display: inline;
	text-align: center;
}
#title {
	width: 218px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 45px;
}
/* END HEADER-----------------------------------------------------------------------------*/

#content {
	clear: both;
	background-color: #ffffff;
	padding-left: 0px;
}
#sidebar {
	float:left;
	position: relative;
	background-color: #fff;
	background-image: url(../graphics/sidebarbkgd.png);
	height: 475px;
	width: 124px;
	margin: 15px 0px 20px 0px;
}


/* ART HOLDER-----------------------------------------------------------------------------*/
#galleryholder {
	float:left;
	position: relative;
	height: auto;
	width: 733px;
	overflow: hidden;
}

#gallery {
	float:left;
	position: relative;
	background-color: #fff;
	background-image: url(../graphics/gallerybkgd.png);
	background-repeat: no-repeat;
	height: 480px;
	width: 713px;
	margin: 15px 0px 20px 20px;
}
#portimage {
	width: 660px;
	margin: 0 auto;
	padding-top: 6px;
}
#movie {
	width: 660px;
	margin-left: auto;
	margin-right: auto;
}

#jcycle {
	width: 660px;
	height: auto;
	margin: 15px auto 0 auto;
	padding-top: 0px;
}

#imageholder {
	width: 660px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

#images {
	width: 600px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

#gallerynav {
	width: 105px;
	height: 30px;
	margin-left: auto;
	margin-right: auto;
}

#output {
	text-align: center;
	color: #898989;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 8pt;
	padding-top: 17px;
	padding-left: 2px;
}

#prev {
	width: 30px;
	height: 30px;
	float:left;
	position: relative;
	background-image:url(../graphics/previous.png); 
	border-style: none;
}

#prev a{
	border-style: none;
}

#prev:hover {
	width: 30px;
	height: 30px;
	float:left;
	position: relative;
	background-image:url(../graphics/previous_over.png); 
	border-style: none;
}

#caption {
	width: 45px;
	height: 30px;
	float:left;
	position: relative;
}

#next {
	width: 30px;
	height: 30px;
	float:left;
	position: relative;
	background-image:url(../graphics/next.png); 
	border-style: none;
}

#next a { 
	border-style: none;
}

#next:hover {
	width: 30px;
	height: 30px;
	float:left;
	position: relative;
	background-image:url(../graphics/next_over.png); 
	border-style: none;
}

#about {
	width: 600px;
	height: 435px;
	margin-left: auto;
	margin-right: auto;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 11px;
	letter-spacing: .1em;
	text-align:center;
	color:#aeab8d;
	padding-top: 20px;
}

#contact {
	width: 600px;
	height: 435px;
	margin-left: auto;
	margin-right: auto;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 8pt;
	letter-spacing: .1em;
	text-align:center;
	color:#aeab8d;
	padding-top: 5px;
}

#contact a:link, #contact a:visited, #contact a:hover {
	color: #aeab8d;
}

#contactmsg {
	width: 600px;
	height: 150px;
	}
	

#form {
text-align: left;
padding-left: 100px;
padding-top: 10px;
}

fieldset {
	border: none;
	}

label{
	float: left;
	width: 82px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 8pt;
	clear: both;
	}

input, textarea{
	float: left;
	width: 280px;
	margin-bottom: 13px;
	border:1px solid #aeab8d;
	color: #86846b;
	}
	
input:hover, input:focus, textarea:hover, textarea:focus {
	background-color: #fbfaf0;
	}

textarea{
	float: left;
	width: 280px;
	height: 100px;
	overflow: auto;
	}
	
#selfCC {
	float: left;
	width: 20px;
	margin-left: -3px;
	}

.boxes{
	width: 1em;
	}

#submitbutton{
	float: left;
	position: relative;
	margin-left: 81px;
	margin-top: 0px;
	width: 90px;
	background-color: #979027;
	font-family: Helvetica, Arial, sans-serif;
	color: #ffffff;
	}
	
#submitbutton:hover{
	background-color: #9ed8d2;
	color: #ffffff;
	}

br{
	clear: left;
	}

.pics {  
    height:  232px;  
    width:   232px;  
    padding: 0;  
    margin:  0;  
} 

#wrong {
	color: #ff0000;
	margin-left: 10px;
	}
	
#contactme {
	margin-left: 10px;
	margin-bottom: 10px;
	}
	
#center {
	width: 200px;
	margin-left: auto;
	margin-right: auto;
	}
 
.pics img {  
    padding: 15px;  
    border:  1px solid #ccc;  
    background-color: #eee;  
    width:  200px; 
    height: 200px; 
    top:  0; 
    left: 0 
} 

/* END ART HOLDER-----------------------------------------------------------------------------*/

/* FOOTER-----------------------------------------------------------------------*/

#footHolder {
	clear:both;
	width: 700px;
	height: 20px;
	margin-left:auto;
	margin-right: auto;
	padding-top:0px;
}
#footer {
	float: right;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 8pt;
	letter-spacing: .1em;
	margin: 0 auto;
	text-align:center;
	width:700px;
	padding:0px;
	color:#aeab8d;
}
#footer li {
	display: inline;
	list-style-type: none;
	margin: 0px;
	padding: 20px 2px 20px 2px;
}
#footer a:link, #footer a:visited, #footer a:hover {
	color: #aeab8d;
	text-decoration: none;
}
#footer a:hover {
	color: #d3d10e;
	text-decoration: none;
}
/* END FOOTER-----------------------------------------------------------------------------*/

/* NAVIGATION MENU-----------------------------------------------------------------------*/

#navDiv {
	float:left;
	position: relative;
	margin-top: 15px;
	margin-left: 0px;
}

.nav {
	width: 80px;
	height: 144px;
	background: url("../graphics/sprite.png") no-repeat;
	margin-left: 25px;
	padding:0;
	overflow: hidden;
}
.nav li span {
	display: none;
}
.nav li {
	float:left;
	list-style:none;
	position:relative;
}
.nav li, .nav a {
	height:20px;    /* Each button must have the same height, define it here */
	display:block;
	margin:0;
	padding:0;
	overflow: hidden
}
.nav li a:link, .nav li a:visited {
	text-indent: -9000px;
	overflow: hidden;
}
.nav .design {
	margin-bottom:5px;
	width:80px
}
.nav .design a:hover, .nav .design a:focus {
	background: url("../graphics/sprite.png") no-repeat -80px -0px;
}
.nav .design a:active {
	background: url("../graphics/sprite.png") no-repeat -160px -0px;
}
.current-design .design a:link, .current-design .design a:visited {
	background: url("../graphics/sprite.png") no-repeat -160px -0px;
	cursor: default;
}
.nav .illustration {
	margin-bottom:5px;
	width:80px
}
.nav .illustration a:hover, .nav .illustration a:focus {
	background: url("../graphics/sprite.png") no-repeat -80px -25px;
}
.nav .illustration a:active {
	background: url("../graphics/sprite.png") no-repeat -160px -25px;
}
.current-illustration .illustration a:link, .current-illustration .illustration a:visited {
	background: url("../graphics/sprite.png") no-repeat -160px -25px;
	cursor: default;
}
.nav .identity {
	margin-bottom:5px;
	width:80px
}
.nav .identity a:hover, .nav .identity a:focus {
	background: url("../graphics/sprite.png") no-repeat -80px -50px;
}
.nav .identity a:active {
	background: url("../graphics/sprite.png") no-repeat -160px -50px;
}
.current-identity .identity a:link, .current-identity .identity a:visited {
	background: url("../graphics/sprite.png") no-repeat -160px -50px;
	cursor: default;
}

.nav .web {
	margin-bottom:5px;
	width:80px
}
.nav .web a:hover, .nav .web a:focus {
	background: url("../graphics/sprite.png") no-repeat -80px -75px;
}
.nav .web a:active {
	background: url("../graphics/sprite.png") no-repeat -160px -75px;
}
.current-web .web a:link, .current-web .web a:visited {
	background: url("../graphics/sprite.png") no-repeat -160px -75px;
	cursor: default;
}

.nav .about {
	margin-bottom:5px;
	width:80px
}
.nav .about a:hover, .nav .about a:focus {
	background: url("../graphics/sprite.png") no-repeat -80px -100px;
}
.nav .about a:active {
	background: url("../graphics/sprite.png") no-repeat -160px -100px;
}
.current-about .about a:link, .current-about .about a:visited {
	background: url("../graphics/sprite.png") no-repeat -160px -100px;
	cursor: default;
}
.nav .contact {
	width:80px;
}
.nav .contact a:hover, .nav .contact a:focus {
	background: url("../graphics/sprite.png") no-repeat -80px -125px;
}
.nav .contact a:active {
	background: url("../graphics/sprite.png") no-repeat -160px -125px;
}
.current-contact .contact a:link, .current-contact .contact a:visited {
	background: url("../graphics/sprite.png") no-repeat -160px -125px;
	cursor: default;
}
/* END NAVIGATION MENU-----------------------------------------------------------------------*/