@charset "UTF-8";

/**** The HTML and Body tags have no spacing set to them in order to pull the page to the browser chrome. */

html {
	height: 100%;
	margin: 0px;
	padding: 0px;
}

/**** The Body tag is set to a height of 100% which forces the navbar (fixed position) to fill the entire screen top to bottom.
		
		There's also separate classes here to use for each page so that the navigation/H1 headers respond accordingly. */

body {
	margin: 0px;
	background-color: #83845d;
	background-image: url(../images/damask.jpg);
	height: 100%;
	padding: 0px;
}
.home {
}
.portfolio {
}
.about {
}
.resume {
}
.contact {
}







/**** NAVBAR STYLING, basic stuff first and buttons later. */


#navbar {
	background-color: #0d0907;
	width: 117px;
	float: left;
	background-image: url(../images/navbar_ornate.gif);
	background-repeat: no-repeat;
	background-position: left top;
	height: 100%;
	position: fixed;
	margin: 0px;
	padding-left: 53px;
	padding-top: 70px;
}
#navbar img {
	margin-left: -53px;
	margin-top: 35px;
}
#navbar p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	line-height: 14pt;
	color: #403324;
	margin-left: -53px;
	text-align: right;
	margin-right: 30px;
}
#navbar a:link {
	color: #cc6000;
	text-decoration: none;
}
#navbar a:visited {
	color: #cc6000;
	text-decoration: none;
}
#navbar a:hover {
	color: #Ffffff;
	text-decoration: none;
}
#navbar a:active {
	color: #Ffffff;
	text-decoration: none;
}


/**** Homebutton */

#navbar #homebutton {
	background-image: url(../images/navigation/home.gif);
	display: block;
	height: 55px;
	width: 117px;
}
#navbar #homebutton:hover {
	background-repeat: no-repeat;
	background-position: left -55px;
}

/* This code is commented out because I don't think I like having the home page with the orange "Home."

body.home #navbar #homebutton {
	background-image: url(../images/navigation/home_out.gif);
	height: 55px;
	width: 117px;
	display: block;
}
body.home #navbar #homebutton:hover {
	background-repeat: no-repeat;
	background-position: left -55px;
}

*/


/**** Portfoliobutton */

#navbar #portfoliobutton {
	background-image: url(../images/navigation/portfolio.gif);
	display: block;
	height: 69px;
	width: 117px;
}
#navbar #portfoliobutton:hover {
	background-repeat: no-repeat;
	background-position: left -69px;
}
body.portfolio #navbar #portfoliobutton {
	background-image: url(../images/navigation/portfolio_out.gif);
	height: 69px;
	width: 117px;
	display: block;
}
body.portfolio #navbar #portfoliobutton:hover {
	background-repeat: no-repeat;
	background-position: left -69px;
}


/**** Aboutbutton */

#navbar #aboutbutton {
	background-image: url(../images/navigation/about.gif);
	display: block;
	height: 61px;
	width: 117px;
}
#navbar #aboutbutton:hover {
	background-repeat: no-repeat;
	background-position: left -61px;
}
body.about #navbar #aboutbutton {
	background-image: url(../images/navigation/about_out.gif);
	height: 61px;
	width: 117px;
	display: block;
}
body.about #navbar #aboutbutton:hover {
	background-repeat: no-repeat;
	background-position: left -61px;
}


/**** Resumebutton */

#navbar #resumebutton {
	background-image: url(../images/navigation/resume.gif);
	display: block;
	height: 51px;
	width: 117px;
}
#navbar #resumebutton:hover {
	background-repeat: no-repeat;
	background-position: left -51px;
}
body.resume #navbar #resumebutton {
	background-image: url(../images/navigation/resume_out.gif);
	height: 51px;
	width: 117px;
	display: block;
}
body.resume #navbar #resumebutton:hover {
	background-repeat: no-repeat;
	background-position: left -51px;
}


/**** Contactbutton */

#navbar #contactbutton {
	background-image: url(../images/navigation/contact.gif);
	display: block;
	height: 49px;
	width: 117px;
}
#navbar #contactbutton:hover {
	background-repeat: no-repeat;
	background-position: left -49px;
}
body.contact #navbar #contactbutton {
	background-image: url(../images/navigation/contact_out.gif);
	height: 49px;
	width: 117px;
	display: block;
}
body.contact #navbar #contactbutton:hover {
	background-repeat: no-repeat;
	background-position: left -49px;
}








/**** CONTENT STYLING */


#content {
	background-color: #ffffff;
	background-image: url(../images/contentbackground.jpg);
	background-repeat: repeat-y;
	float: left;
	width: 465px;
	padding-right: 25px;
	padding-left: 80px;
	border-right-style: solid;
	border-right-color: #0d0907;
	margin-right: -580px;
	border-right-width: 10px;
	font-family: Georgia, "Times New Roman", Times, serif;
	margin-left: 170px;
	border-bottom-width: 10px;
	border-bottom-style: solid;
	border-bottom-color: #0d0907;
}
#content p {
	font-size: 9pt;
	line-height: 16pt;
	margin-top: 0px;
	margin-bottom: 13pt;
	color: #403324;
}


/***** List styling in the content bar ******/


#content ul {
	font-size: 9pt;
	line-height: 16pt;
	color: #403324;
	padding-left: 0px;
}
#content ul li {
	background-image: url(../images/bullet.gif);
	background-repeat: no-repeat;
	background-position: left 7px;
	padding-bottom: 13pt;
	list-style-type: none;
	padding-left: 15pt;
}
#content ol {
	color: #403324;
	font-size: 9pt;
	line-height: 16pt;
}
#content ol li {
	padding-bottom: 13pt;
}


#content ul a:link {
	border-bottom-style: none;
	text-decoration: none;
	color: #990000;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
}
#content ul a:visited {
	color: #990000;
	text-decoration: none;
	border-bottom-style: none;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
}
#content ul a:hover {
	color: #000000;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #000000;
	text-decoration: none;
}
#content ul a:active {
	color: #cc6000;
	text-decoration: none;
}



/**** Link styling in the content area ******/


#content p a:link {
	border-bottom-style: none;
	text-decoration: none;
	color: #990000;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
}
#content p a:visited {
	color: #990000;
	text-decoration: none;
	border-bottom-style: none;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
}
#content p a:hover {
	color: #000000;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #000000;
	text-decoration: none;
}
#content p a:active {
	color: #cc6000;
	text-decoration: none;
}






/* HEADER STYLING */

/* All h1's are determined by the body class so they display a different background image accordingly. */

h1 {
	padding: 0px;
	height: 68px;
	width: 246px;
	margin-top: -30px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
h2 {
	font-size: 16pt;
	line-height: 20pt;
	font-weight: normal;
	color: #6a3c28;
	margin-top: 0px;
	margin-bottom: 24pt;
}
h3 {
	font-size: 11pt;
	line-height: 14pt;
	text-transform: uppercase;
	margin-top: 36pt;
	margin-bottom: 5pt;
	letter-spacing: .15em;
}



h2 a:link {
	color: #990000;
	text-decoration: none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

h2 a:visited {
	color: #990000;
	text-decoration: none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

h2 a:hover {
	color: #000000;
	text-decoration: none;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #000000;
}

h2 a:active {
	color: #990000;
	text-decoration: none;
}





/* These are the specific h1's */

body.home h1 {
	background-image: url(../images/headers/welcome.gif);
}

body.portfolio h1 {
	background-image: url(../images/headers/portfolio.gif);
}

body.about h1 {
	background-image: url(../images/headers/aboutme.gif);
}

body.resume h1 {
	background-image: url(../images/headers/resume.gif);
}

body.contact h1 {
	background-image: url(../images/headers/contact.gif);
}




/* This is the header that is at the top of every page and says Jaye Ward - a student, illustrator, and designer. */

#jayeheader {
	background-image: url(../images/jayeward.gif);
	background-repeat: no-repeat;
	background-position: left top;
	height: 216px;
	width: 570px;
	margin-left: -80px;
}








/**** FOOTER STYLING */


#footer {
	font-size: 8pt;
	color: #000000;
	width: 465px;
	background-image: url(../images/footerbg.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	margin-left: -80px;
	height: 34px;
	padding-left: 80px;
	text-align: right;
	margin-top: 95px;
	padding-right: 25px;
	clear: both;
}
#footer  .line {
	display: block;
	margin-bottom: 8px;
}
#footer a:link {
	text-transform: uppercase;
	color: #353622;
	text-decoration: none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
#footer a:visited {
	color: #353622;
	text-decoration: none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
#footer a:hover {
	color: #e88e45;
	text-decoration: none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
#footer a:active {
	color: #e88e45;
	text-decoration: none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}








/* ASSORTED CLASSES FOR USE THROUGHOUT THE DOCUMENT */

.displaynone {
	display: none;
}
.rightimage {
	margin-top: 0px;
	margin-left: 580px;
	position: fixed;
}
.pictureofme {
	padding: 0px;
	float: right;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 20px;
}
.portfoliosection {
	background-image: url(../images/portfolio_images/portfolios_bg.png);
	background-repeat: repeat-y;
	width: 445px;
	padding-top: 8px;
	padding-right: 8px;
	padding-bottom: 2px;
	padding-left: 8px;
}


/****   Styling for the Portfolio boxes on the Portfolio page ****/

.portfoliosection img {
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 4px;
	margin-left: 0px;
}
.portfoliosection a:link img {
	border: 1px solid #FFFFFF;
	text-decoration: none;
}
.portfoliosection a:visited img {
	border: 1px solid #adad86;
}
.portfoliosection a:hover img {
	border: 1px solid #666666;
}
.portfoliosection a:active img {
	border: 1px solid #adad86;
}
.portfoliosection p {
	margin: 0px;
	padding: 0px;
}
#content .portfoliosection p {
	float: right;
	height: 88px;
	padding-top: 40px;
	padding-right: 30px;
}


/* NEWEST IMAGES Is the little box on the front page that has my 4 newest images. */

#newestimgs {
	color: #E8E8E8;
	float: left;
	width: 108px;
	background-position: center;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 6px;
	padding-left: 10px;
	margin-right: 20px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	background-image: url(../images/newestimgs/newimg_bg.png);
}
#newestimgs img {
	margin-bottom: 4px;
}
#newestimgs  a:link  img {
	border: 1px solid #FFF;
}
#newestimgs  a:visited  img {
	border: 1px solid #adad86;
}
#newestimgs  a:hover  img {
	border: 1px solid #666666;
}
#newestimgs  a:active  img {
	border: 1px solid #adad86;
}
#newestimgs p {
	margin: 0px;
	padding: 0px;
}




/***** Table styling, for use on the Contact page. ******/

td {
	padding-top: 5px;
	padding-bottom: 10px;
	padding-right: 5px;
}
table  {
	font-size: 10pt;
	line-height: 16pt;
	color: #403324;
}