body {background: #89716a ; color: #494949; margin: 10px 0 0 0; padding: 0; font: 73% "lucida sans", "Trebuchet MS", tahoma, sans-serif;}

A:link, A:visited     {	background-color: inherit; color: #7e7061;text-decoration: underline;}
A:hover    {background-color: inherit; color: #000;text-decoration: none;}
A:active   {background-color: inherit; color: #7e7061;text-decoration: none;}

#main 	   {width: 921px; height: 670px; margin: 0 auto;
padding-left: 150px;}


.container {width: 890px;  line-height:150%;height: 562px;position: absolute;left: 50%; 
top: 50%;
margin-top: -290px; 
margin-left: -450px;
background-image: url(images/bg.jpg);background-repeat: no-repeat;}

.container-contact {width: 890px;  line-height:150%;height: 562px;position: absolute;left: 50%; 
top: 50%;
margin-top: -290px; 
margin-left: -450px;
background-image: url(images/bg-contact.jpg);background-repeat: no-repeat;}

/* width added, to stop the menu going into the next pane, especially on resizing */
/* changed the padding-top from 460 I think, to 360 */

.menu   { color: #fff;float: left;background-color: inherit;font-style: normal;font-size: 1em;
position: absolute;
padding-top: 360px;
width:320px;}


.menu a { color: #CCC; background: inherit; padding: 2px 5px 2px 5px; margin: 0;text-decoration: underline;
}



.menu a:hover { color: #ccc;text-decoration: none;background-color: inherit;}






.footer2    {background: inherit ;
font-size: 0.85em;text-align: center;
position: inherit;top: 660px;left: 143px;
height: 25px;
clear: both;
color: #B9C19D;}


.content   {font-size: 9pt; font-weight: normal; color: #333333;height: auto;margin-left: 95px;background-color: inherit;}


.box {
	margin-left: 420px;
	height: 459px;
	overflow: auto;
	position: absolute;
	top: 71px;
	width: 300px;
	right: 81px;
	background-color:#e9e2d8;
}

.box-contact{
	margin-left: 420px;
	height: 230px;
	overflow: auto;
	position: absolute;
	top: 290px;
	width: 300px;
	right: 76px;
	/*background-color:#d4c8c2;	*/
	}

.pbox{text-align: justify;margin: 5px 10px 0px 0px;font-size: 80%;color: #4e4e4e;background-color: inherit;}


.pcop{margin: 15px 100px 0px 0px;color: #8c8c8c;font-size: 0.8em;background-color: inherit;}


.ill-index{width: 355px;height: 275px;position: absolute;top: 60px;left: 80px;background-image: url(images/ill-index.jpg);
}
.ill-print{width: 355px;height: 275px;position: absolute;top: 60px;left: 80px;background-image: url(images/ill-print.jpg);
}
.ill-web{width: 355px;height: 275px;position: absolute;top: 60px;left: 80px;background-image: url(images/ill-web.jpg);
}
.ill-contact{width: 355px;height: 275px;position: absolute;top: 60px;left: 80px;background-image: url(images/ill-contact.jpg);
}
.ill-about{width: 355px;height: 275px;position: absolute;top: 60px;left: 80px;background-image: url(images/ill-about.jpg);
}
.ill-vfx{width: 355px;height: 275px;position: absolute;top: 60px;left: 80px;background-image: url(images/ill-vfx.jpg);
}
.ill-misc{width: 355px;height: 275px;position: absolute;top: 60px;left: 80px;background-image: url(images/ill-misc.jpg);
}
.ill-flash{width: 355px;height: 275px;position: absolute;top: 60px;left: 80px;background-image: url(images/ill-flash.jpg);
}

h1            {
margin: 5px 20px 0px 15px;
padding: 0;
font-size:1.1em;
color: #515151;font-variant: small-caps;letter-spacing: 0.3em;font-weight: 600;height: 20px;border-bottom: 1px #ccc solid;padding-bottom: 5px;background-color: inherit;}

.sitename            {
margin: 0px 20px 0px 30px;
padding: 0;
font-size:1.1em;
color: #e9e2d8;font-variant: small-caps;letter-spacing: 0.3em;font-weight: 600;background-color: inherit;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif}


	
.txt1 {
		margin: 15px 5px 0px 0em;
		color: #702a17;
		padding: 15px 0px 10px;text-align: justify;background-color: inherit;}

.smalltxt {
		margin: 0px 0px 0px 0px;
		color: #702a17;
		padding: 0px 0px 0px 0px;text-align: left;background-color: inherit;font-size: 70%;}

h2 {background-color: #FFFFFF; margin: 0px 0 5px 0; padding: 0; font-size: 2em; letter-spacing: -0.5px; color: #06548C;}

.img{border: none;}


.left {
float: left;
}

.right {

float: right;
}

.center {
text-align: center;clear: both;}
/* changed the height from 18px */
#navcontainer
{
margin: 0 0 0 0px;
padding: 0;
/*height: 18px;*/
}

#navcontainer ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li
{
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

#navcontainer ul li a
{
background:inherit;
width: 78px;
height: 90px;
border:none;
padding: 0;
margin: 0 0 0 0;
color:#a7927c;
text-decoration: none;
display: block;
text-align: center;
font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}

#navcontainer ul li a:hover
{

}

#navcontainer a:active
{

}

#navcontainer li#active a
{

}


#m1{
	background-image:url(images/m1.jpg)
}

#m1 a:hover {
	background-image:url(images/m1-o.jpg);
}
#m2{
	background-image:url(images/m2.jpg)
}
#m2 a:hover {
	background-image:url(images/m2-o.jpg);
}
#m3{
	background-image:url(images/m3.jpg)
}
#m3 a:hover {
	background-image:url(images/m3-o.jpg);
}
#m4{
	background-image:url(images/m4.jpg)
}
#m4 a:hover {
	background-image:url(images/m4-o.jpg);
}
#m5{
	background-image:url(images/m5.jpg)
}
#m5 a:hover {
	background-image:url(images/m5-o.jpg);
}
#m6{
	background-image:url(images/m6.jpg)
}
#m6 a:hover {
	background-image:url(images/m6-o.jpg);
}
#m7{
	background-image:url(images/m7.jpg)
}
#m7 a:hover {
	background-image:url(images/m7-o.jpg);
}
#m8{
	background-image:url(images/m8.jpg)
}
#m8 a:hover {
	background-image:url(images/m8-o.jpg);
}

/*class for hidden text links for assistive technology and for when images are switched off*/


a span { color :baa880; height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px; } 

/*class for decor images to make them float*/

.decorleft{
	float:left;
	}
	
.decorleftpadded{
	float:left;
	padding:10px;
	}
.decorright{
	float:right;
	}

/*div for animated content in page flow so we can have a background fallback image for no flash*/

.animatedcontent-blossom{
	height:165px;
	width:275px;
	background-image:url(images/cherryblossom.jpg)
	}

/*classes for typography*/

/*caption for images including what happens when you click*/

/*image border for items in flow*/

.borderedimg{
	border:solid 1px #5e5653;
	text-align:center;
	}
	
/* only a version of this in the iphone.css*/
.scrollhint{
	}