/* 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: 44px;
	display:inline;
	margin-top: 2px;
	margin-left: 0px;
	width: 650px;
	}
	
 #nav ul {
	 margin-left:-18px;
 }
 
#nav ul li {
	display: inline;
	position: relative;
	height: 40px;
	}
  
#nav ul li a:hover {
	display: inline;
	position: relative;
	border: none;
	/**border: 1px solid #000000;
	border-top:  1px solid #000000;**/
}

  
/**#nav li#active a {
	border: 1px solid #000000;
	}**/

	
#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;

}




#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;*/

}


/**index image/link rollovers **/

#indeximages {
	margin-top: 20px;
	margin-left: -200px;
	height: 443px;
	width: 525px;
	}
	

    /** BEGIN OLD INDEX PAGE ROLLOVER ATTEMPT






#indeximages-art, #indeximages-art a{
	position: relative;
	margin-top: -435px;
	margin-left: 380px;
	background: #000000 url(http://www.aprilgrayson.com/images/index-art.jpg);
	border: solid 1px #000;
	height: 433px;
	width: 211px;}

    END OLD INDEX PAGE ROLLOVER ATTEMPT**/

.indeximg-oralhx
{
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(./images/index-oralhx.jpg) no-repeat;
white-space: nowrap;
display: block;
width: 211px;
height: 430px;
margin: 0;
padding: 0;
border: solid 1px #000;

}

.indeximg-oralhx a
{
display: block;
color: #000000;
font-size: 11px;
width: 211px;
height: 430px;
display: block;
float: left;
color: black;
text-decoration: none;
border: solid 1px #000;
}

.indeximg-oralhx img
{
width: 211px;
height: 430px;
margin-top: -2px;
margin-left:-2px;
border: solid 1px #000;

}

* html a:hover
{
visibility:visible
}

.indeximg-oralhx a:hover img
{
visibility:hidden
}

.indeximg-oralhx span
{
position: absolute;
left: 35px;
top: 15px;
margin: 0px;
padding: 0px;
cursor: pointer;
visibility: hidden;

} 

.indeximg-art
{	
position: relative;
margin-top: -432px;
margin-left: 380px;
font-family: arial, helvetica, sans-serif;
background: url(./images/index-art.jpg) no-repeat;
white-space: nowrap;
display: block;
width: 211px;
height: 430px;
padding: 0;
border: solid 1px #000;

}

.indeximg-art a
{
margin-top: -435px;
margin-left: 380px;
display: block;
color: #000000;
font-size: 11px;
width: 211px;
height: 430px;
display: block;
float: left;
color: black;
text-decoration: none;
}

.indeximg-art img
{
margin-top: 434px;
margin-left: -760px;
width: 211px;
height: 430px;
border: solid 1px #000;

}

* html a:hover
{
visibility:visible
}

.indeximg-art a:hover img
{
visibility:hidden
}

.indeximg-art span
{
position: absolute;
left: 35px;
top: 15px;
margin: 0px;
padding: 0px;
cursor: pointer;
visibility: hidden;
}