/* CSS Document - April Grayson: film and video art*/
/* http://www.aprilgrayson.com*/
/*authored by April Grayson*/
/*copyright April Grayson 2008*/



#body {
	background-color:#FFFFFF;
	color:#000000;
	margin:0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;	
	}
	




	
/* navigation bar */


#nav  {
	background-color: #FFFFFF;
	/**width: 670px;**/
	height: 80px;
	display: inline;
	/**margin: 0px;**/
	}
	
/* #nav ul li {
	display: inline;
	position: relative;
	padding-left: 5px;
	height: 40px;
	width: 108px;
	}*/
	
/*#nav p {
	letter-spacing: 1px:
	}	

#nav .h4 {
	color: #666666;
	vertical-align: middle;
	letter-spacing: 1px;
	}
	
#nav a:link {
	text-decoration: none;
}*/

/*#nav a:visited {
	text-decoration: none;
	color: #666666;
}
  
#nav a:hover {
	color: #FFFFFF;
	background: #666666;
	}
  
#nav li#active a {
	text-decoration: none;
	color: #CCCCCC;
	}
	
#nav li#active a:hover {
	text-decoration: none;
	color: #CCCCCC;
	background-color:#FFFFFF;
	}*/
	
	
#home-nav {
	background-image: url(http://www.aprilgrayson.com/images/home-nav.gif);
	width: 108px;
	height: 40px;
	margin-top: 5px;
	margin-left: -560px;
	padding-bottom: 5px;
	padding-left: 5px;
	border: none;

}

#films-nav {
	background-image: url(http://www.aprilgrayson.com/images/films-nav.gif);
	width: 108px;
	height: 40px;
	margin-left: -340px;
	margin-top: -45px;
	padding-bottom: 5px;
	border: none;
}

#stills-nav {
	background-image: url(http://www.aprilgrayson.com/images/stills-nav.gif);
	width: 108px;
	height: 40px;
	/**position: absolute;**/
	margin-left: -108px;
	margin-top: -45px;
	padding-bottom: 5px;
	border: none;
}

#otherprojects-nav {
	background-image: url(http://www.aprilgrayson.com/images/otherprojects-nav.gif);
	width: 128px;
	height: 40px;
	/**position: absolute;**/
	margin-top: 5px;
	padding-bottom: 5px;
	border: none;
}

#cv-nav {
	background-image: url(http://www.aprilgrayson.com/images/cv-nav.gif);
	width: 108px;
	height: 40px;
	/**position: absolute;**/
	margin-left: 100px;
	margin-top: -45px;
	padding-bottom: 5px;
	border: none;
}

#about-nav {
	background-image: url(http://www.aprilgrayson.com/images/about-nav.gif);
	width: 108px;
	height: 40px;
	/**position: absolute;**/
	margin-left: 330px;
	margin-top: -45px;
	padding-bottom: 5px;
	border: none;
}


#contact-nav {
	background-image: url(http://www.aprilgrayson.com/images/contact-nav.gif);
	width: 108px;
	height: 40px;
	/**position: absolute;**/
	margin-left: 580px;
	margin-top: -45px;
	padding: 5px;
	border: none;
}

#home-nav a:hover{
	background-image: url(http://www.aprilgrayson.com/images/home-navRO.gif);
	width: 108px;
	height: 40px;
	margin-left: 20px;
		margin-top: 5px;

}

#films-nav a:hover{
	background-image: url(http://www.aprilgrayson.com/images/films-navRO.gif);
	width: 108px;
	height: 40px;
	margin-left: 129px;
}

#about-nav a:hover{
	background-image: url(http://www.aprilgrayson.com/images/about-navRO.gif);
	width: 108px;
	height: 40px;
	margin-left: 456px;
}

#stills-nav a:hover{
	background-image: url(http://www.aprilgrayson.com/images/stills-navRO.gif);
	width: 108px;
	height: 40px;
	margin-left: 238px;
}


#otherprojects-nav a:hover{
	background-image: url(http://www.aprilgrayson.com/images/otherprojects-navRO.gif);
	width: 108px;
	height: 40px;
	margin-left: 347px;
}

#cv-nav a:hover{
	background-image: url(http://www.aprilgrayson.com/images/cv-navRO.gif);
	width: 108px;
	height: 40px;
	margin-left: 337px;
}

#contact-nav  a:hover{
	background-image: url(http://www.aprilgrayson.com/images/contact-navRO.gif);
	width: 108px;
	height: 40px;
	margin-left: 565px;
}
	
/* END navigation bar */





/*HEADERS for pages*/

#header {
	background-image: url(./images/april-header.gif);
	height: 100px;
	width: 650px;
	margin-left: 20px;
	border-bottom: 1px solid #000000;
}

#header-contact {
	background-image: url(./images/contact-header.gif);
	height: 100px;
	width: 650px;
	margin-left: 20px;
	border-bottom: 1px solid #000000;}

#header-films {
	background-image: url(./images/films-header.gif);
	height: 100px;
	width: 650px;
	margin-left: 20px;
	border-bottom: 1px solid #000000;
}

#header-about {
	background-image: url(./images/about-header.gif);
	height: 100px;
	width: 650px;
	margin-left: 20px;
	border-bottom: 1px solid #000000;
}

#header-stills {
	background-image: url(./images/stills-header.gif);
	height: 100px;
	width: 650px;
	margin-left: 20px;
	border-bottom: 1px solid #000000;
}

#header-otherprojs {
	background-image: url(./images/other-header.gif);
	height: 100px;
	width: 650px;
	margin-left: 20px;
	border-bottom: 1px solid #000000;
}

#header-cv {
	background-image: url(./images/cv-header.gif);
	height: 100px;
	width: 650px;
	margin-left: 20px;
	border-bottom: 1px solid #000000;
}

#header-available {
	background-image: url(./images/available-header.gif);
	height: 100px;
	width: 650px;
	margin-left: 20px;
	border-bottom: 1px solid #000000;
}


/*end HEADERS for pages*/







/*PHOTOS for pages*/
#photo {
	background-image: url(http://www.aprilgrayson.com/images/legacy-cotton.gif);
	margin-left: 20px;
	margin-top: 10px;
	height: 433px;
	width: 650px;
}

#photo-films {
	background-image: url(./images/.jpg);
	margin-left: 20px;
	margin-top: 10px;
	height: 400px;
	width: 650px;
}

#photo-about {
	/*background-image: url(./images/.jpg);*/
	margin-left: 20px;
	margin-top: 10px;
	height: 400px;
	width: 650px;
}

#photo-contact {
	background-image: url(./images/wat-doi-suthep-bells.gif);
	margin-left: 20px;
	margin-top: 10px;
	height: 435px;
	width: 650px;
}

#photo-stills {
	background-image: url(./images/stills-page.gif);
	margin-left: 20px;
	margin-top: 10px;
	height: 400px;
	width: 650px;
}

#photo-otherprojs {
	background-image: url(./images/expmtl4.jpg);
	margin-left: 20px;
	margin-top: 10px;
	height: 440px;
	width: 650px;
}

/*end PHOTOS for pages*/






/*PAGE TEXT*/

#filmtitle {
	font-weight: bold;
	letter-spacing: +1px;
}

#pagetext {
	font-size: 13px;
	text-align:left;
	width: 650px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #666666;
	margin-left: 20px;
	}
	
#pagetext a:link {
	color: #333333;
	text-decoration:none;
	}
	
#pagetext a:hover {
	color: #FFFFFF;
	background-color: #666666;
	}

#pagetext a:visited {
	color: #333333;
	text-decoration:none;
	}		

#cvtext {
	font-size:13px;
	text-align:left;
	width: 650px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #666666;
	margin-left: 20px;
	}
	
#cvtext a:link {
	color: #333333;
	text-decoration:none;
	}
	
#cvtext a:hover {
	color: #FFFFFF;
	background-color: #666666;
	}

#cvtext a:visited {
	color: #333333;
	text-decoration:none;
	}		


#sidetext {
	font-size: smaller;
	/**width: 100px;
	position: relative;**/
	margin-top: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #666666;
	/**margin-left: 680px;**/
	}
	
#sidetext a:link {
	color: #000000;
	text-decoration:none;
	}
	
#sidetext a:hover {
	color: #FFFFFF;
	background-color: #666666;
	}

#sidetext a:visited {
	color: #000000;
	text-decoration:none;

	}		

/*end PAGE TEXT*/







/* container & body divs */	
	

#container { 
	color:#003366;
	position:relative;
	left:50%;
	width: 900px;
	height: 550px;
	margin-left:-700px;
	margin-top:-150px;/*-225px;*/
	/*border: dotted #FFFFFF 2px;*/
	}
/* Absolute Center technique adapted from an article by Joe Gillespie: 
http://www.wpdfd.com/editorial/wpd0103.htm#footnote */

/* commented backslash hack v2 for IE5-Mac - adapted from a posting on Sam-I-Am:
http://www.sam-i-am.com/work/css/index.html \*/
	#container { 
	background-color: #FFFFFF;
	color:#FFFFFF;
	position:absolute;
	top:50%;
	left:50%;
	width: 900px;
	height: 550px;
	margin-left:-700px;
	margin-top:-150px;
	/*border: dotted #FFFFFF 2px;*/

	}
/* end hack */






/*EXTRA STUFF NOT USED YET*/

#films {
	background-color: #CCCCCC;
	background-image: url(images/another-word-th.gif);
	border: #FFFFFF 6px solid;
	width: 250px;
	height: 166px;
	margin-left: 20px;
	padding-top: 10px;
	margin-top: 50px;

}


#stills {
	background-color: #CCCCCC;
	background-image: url(images/cv.gif);
	border: #FFFFFF solid 6px;
	width: 250px;
	height: 166px;
	/*margin-left: 400px;
	margin-top: 50px;*/
}


#otherproj  {
	background-color: #CCCCCC;
	background-image: url(images/body-play.gif);
	border: #FFFFFF 6px solid;
	width: 250px;
	height: 166px;
	/*margin-left: 20px;
	margin-top: 200px;*/

}

#cv  {
	background-color: #CCCCCC;
	background-image: url(images/cv.gif);
	border: #FFFFFF 6px solid;
	width: 250px;
	height: 166px;
	/*margin-left: 400px;
	margin-top: 200px;*/

}