/* Global Style */
body
{
	margin: 0 auto;
	padding: 0px;
	background-color: #9797C0;
	font-family: Tahoma, sans-serif;
	font-size: 1.0em;
	/*line-height: 1.5em;*/
	background-image: url(images/large-flower.gif);
	background-repeat: no-repeat;
}

/* Heading Styles */
#text_area h1, #wide_text_area h1, #scrolling_text_area h1, #gallery_area h1, 
#text_area th, #wide_text_area th, #scrolling_text_area th, #gallery_area th
{
	margin: 0px;
	padding: 0px;
	text-align: left;
	font-size: 1.5em;
	color: #6A6AA5;
	font-weight: 100;
	letter-spacing: 0.05em;
}

/* Paragraph Styles */
#text_area p, #wide_text_area p, #scrolling_text_area p/* Text Area Paragraph */
{
font-size: 0.75em;
line-height: 1.25em;
color: #3D3D3D;
font-weight: 100;
}

/* List Styles */
#text_area ul, #wide_text_area ul, #scrolling_text_area ul/* Text Area Paragraph */
{
font-size: 0.75em;
line-height: 1.25em;
color: #3D3D3D;
font-weight: 100;
}

#gallery_area p.description /* Gallery description Paragraph */
{
font-size: 0.7em;
line-height: 1.5em;
color: #3D3D3D;
font-weight: 100;
}

#gallery_area p.page_numbers /* Page number Paragraph style */
{
text-align: right;
/*padding-right: 10px;*/
padding-right: 1.0em;
/*margin-top: 3.56em;*/
font-size: 0.7em;
color: #6A6AA5;
font-weight: 100;
}

.footer
{
	width: 47.50em; /* relative units */
	margin-left: -23.75em;
	top: 13.5em;
	position: absolute;
	left: 50%;
}

.footer p /* Footer Paragraph Style */
{
text-align: right;
font-size: 0.7em;
color: #ffffff;
font-weight: 100;
}

/* Define link style for footer */
/* .unselected */
.footer p a:link {color: #ffffff; text-decoration: none}     /* unvisited link */
.footer p a:visited {color: #ffffff; text-decoration: none}  /* visited link */
.footer p a:hover {color: #ffffff; text-decoration: underline}   /* mouse over link */
.footer p a:active {color: #ffffff; text-decoration: none}  /*mouse clicked link */


/* List Style - used for menus */
.menu_left ul
{
display: inline;
list-style: none;
float: left;
padding: 0px;
/*margin: 10px 0px 0px 20px;*/
margin: 0.78em 0em 0em 1.56em;
font-size: 0.8em;
line-height: 1.5em;
color: #6A6AA5;
font-weight: 100;
/*width: 150px;*/
}

.menu_left li
{
padding: 0px;
margin: 0px;
text-indent: none;
list-syle: none;
display: inline;
}

.menu_right ul
{
display: inline;
float: right;
padding: 0px;
/*margin: 10px 20px 0px 0px;*/
margin: 0.78em 1.56em 0em 0em;
font-size: 0.8em;
line-height: 1.5em;
color: #6A6AA5;
font-weight: 100;
/*width: 150px;*/
list-style: none;
text-align: right;
}

.menu_right li
{
padding: 0px;
margin: 0px;
text-indent: none;
list-syle: none;
display: inline;
}

/* Define link style for general links */
a:link {color: #6A6AA5; text-decoration: none}     /* unvisited link */
a:visited {color: #6A6AA5; text-decoration: none}  /* visited link */
a:hover {color: #6A6AA5; text-decoration: underline}   /* mouse over link */
a:active {color: #6A6AA5; text-decoration: none}  /*mouse clicked link */


/* Define link style for menus & page numbers */
/* .unselected */
.menu_left ul a:link, .menu_right ul a:link, #gallery_area p.page_numbers a:link  {color: #6A6AA5; text-decoration: none}     /* unvisited link */
.menu_left ul a:visited, .menu_right ul a:visited, #gallery_area p.page_numbers a:visited {color: #6A6AA5; text-decoration: none}  /* visited link */
.menu_left ul a:hover, .menu_right ul a:hover, #gallery_area p.page_numbers a:hover {color: #6A6AA5; text-decoration: underline}   /* mouse over link */
.menu_left ul a:active, .menu_right ul a:active, #gallery_area p.page_numbers a:active {color: #6A6AA5; text-decoration: none}  /*mouse clicked link */

/* Selected links */
/*.home a#home, 
.about a#about, .about .who a#who, .about .why a#why, .about .where a#where, 
.work a#work, .work .identity a#identity, .work .print a#print,
.work .brochures a#brochures, .work .mailers a#mailers, .work .menus a#menus,
.work .display a#display, .work .advertising a#advertising, .work .interactive a#interactive,
.work .packaging a#packaging, .work .invitations a#invitations,
.contact a#contact
{
color: #056EC7;
text-decoration: none;
}*/

/* This is needed to make content float vertically! */
#horizon        
	{
	color: white;
	background-color: transparent;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 1px;
	overflow: visible;
	visibility: visible;
	display: block
	}

/* Style for main floating box */
#bounding_box
{
	background-color: #F4F4FC;
	/*width: 760px;*/ /*absolute pixel dimensions*/
	width: 47.50em; /* relative units */
	/*height: 424px;*/ /*absolute pixel dimensions*/
	height: 26.50em; /* relative units */
	/*margin-left: -380px; */ /* This should be set to exactly half the width */
	margin-left: -23.75em;
	/*top: -212px;*/ /* This should be set to exactly half the height */
	top: -13.25em;
	position: absolute;
	left: 50%;
	padding: 0px;
	background-image: url(images/iced-graphic.gif);
	background-repeat: no-repeat;
	/*background-position: 0px 280px;*/
	/*background-position: 0em 17.50em;*/
	background-position: 0% 100%;
	/*border: 1px solid #000000;*/
    /*overflow: hidden;*/
}

/* Style for the Top Bar */
#top_bar
{
/*height: 80px;*/
height: 5em;
/*width: 760px;*/ /* This should be set to the same width as the bounding_box */
width: 47.50em;
background-color: #BEBEDB;
}

/* Style for the bottom bar */
#bottom_bar
{
position: absolute;
/*height: 30px;*/
height: 1.88em;
/*width: 760px;*/ /* This should be set to the same width as the bounding_box */
width: 47.50em;
background-color: #BEBEDB;
/*top: 394px;*/
top: 24.63em;
background-image: url(images/iced-graphic.gif);
background-repeat: no-repeat;
background-position: 0% 100%;
}

#content_area
{
/*width: 720px;*/
/*height: 270px; /* This should be the same height as the bounding_box minus the top_bar and bottom_bar heights */
width: 45.00em;
height: 16.88em;
/*background: #cccccc;*/ 
/*padding: 20px 20px 0px 20px;*/
padding: 1.25em 1.25em 0em 1.25em;
overflow: hidden;
margin: 0px;
}

#text_area
{
/*width: 310px; /* width of standard text area */
/*height: 270px;*/
width: 19.38em;
height: 16.88em;
/*background: #dddddd;*/
}

#wide_text_area
{
/*width: 430px; /* width of wide text area */
/*height: 270px;*/
width: 26.88em;
height: 16.88em;
/*background: #dddddd;*/
}

#scrolling_text_area
{
/*width: 430px;*/
/*height: 270px;*/
/*background: #dddddd;*/
width: 26.88em;
height: 16.88em;
}

#gallery_area
{
/*float: left;*/
/*width: 480px;*/ /* width of gallery area */
/*width: 30.00em;*/
/*height: 314px;*/
/*height: 19.63em;*/
/*padding: 20px;*/
/*background: #dddddd;*/
/*width: 430px;*/
/*height: 270px;*/
width: 26.88em;
height: 16.88em;
}

#thumbnail_container
{
/*width: 410px;*/
/*width: 25.63em;*/
height: auto;
/*border: solid 1px #dddddd;*/
}

img.thumbnail
{
float: left;
/*margin: 0px 10px 10px 0px;*/
margin: 0em 0.63em 0.63em 0em;
/*width: 90px;*/
width: 5.63em;
/*height: 60px;*/
height: 3.75em;
/*border: solid 1px #CECED4;*/
}

a img.thumbnail
{
display: block;
text-decoration: none;
visibility: visible;
}

a:link img.thumbnail
{
width: 5.63em;
height: 3.75em;
border: solid 1px #CECED4;
}

a:visited img.thumbnail
{
width: 5.63em;
height: 3.75em;
border: solid 1px #CECED4;
}

a:hover img.thumbnail
{
width: 5.63em;
height: 3.75em;
border: solid 1px #888888;
}

a:active img.thumbnail
{
width: 5.63em;
height: 3.75em;
border: solid 1px #CECED4;
}

/* Define link style for thumbnail images */
/*a img.thumbnail a {background-color: #ffffff; display: block; width: 5.63em; height: 3.75em;} */
/*.thumbnail img a:link {color: #ffffff;}     /* unvisited link */
/*.thumbnail img a:visited {color: #ffffff;}  /* visited link */
/*img.thumbnail a:hover {background-color: #dddddd;}   /* mouse over link */
/*.thumbnail img a:active {color: #ffffff; }  /*mouse clicked link */

img#landscape_image
{
float: right;
/*padding: 20px;*/
/*padding: 1.25em;*/
/*width: 390px;*/
width: 24.38em;
/*height: 270px;*/
height: 16.88em;
}

img#gallery_image
{
float: right;
/*padding: 20px;*/
/*padding: 1.25em;*/
/*width: 270px;*/
width: 16.88em;
/*height: 270px;*/
height: 16.88em;
}

img#square_image
{
float: right;
/*padding: 20px;*/
/*padding: 1.25em;*/
/*width: 270px;*/
width: 16.88em;
/*height: 270px;*/
height: 16.88em;
}

form#contact_form input.text
{
float: right;
/*width: 260px;*/
width: 20em;
height: 1.2em;
}

form#contact_form input.button
{
position: relative;
top: 1em;
float: right;
margin-left: 20em;
}

form#contact_form textarea
{
float: right;
/*width: 260px;*/
width: 20em;
/*height: 80px;*/
height: 4em;
}

form#contact_form label
{
font-size: 0.75em;
line-height: 1.25em;
float: left;
/*width: 200px;*/
width: 6.0em;
display: block;
text-align: right;
/*padding-right: 10px;*/
padding-right: 0.63em;
color: #3D3D3D;
}

/* 
   Styles for scrolling layers  
	 Specify width and height in hold and wn, and in clip for wn 
*/
div#hold	{ 
	position:relative; overflow:hidden;
	/*width:390px; height:250px;*/
	/*width:24.38em; height:15.63em;*/
  z-index:100;
  /* New pixel dimensions */
  	/*width:390px; height:200px;*/
  	/* New relative dimensions */
  	width:24.38em; height:12.5em;
	}
div#wn	{ 
	position:absolute; 
	left:0px; top:0px; 
	/*width:390px; height:250px;*/
	/*width:24.38em; height:15.63em;*/
	  /* New pixel dimensions */
  	/*width:390px; height:200px;*/
  	/* New relative dimensions */
  	width:24.38em; height:12.5em;
	/*clip:rect(0px, 390px, 250px, 0px);*/
	/*clip:rect(0em, 24.38em, 15.63em, 0em);*/
	  /* New pixel dimensions */
  	/*clip:rect(0px, 390px, 200px, 0px);*/
  	/* New relative dimensions */
  	clip:rect(0em, 24.38em, 12.5em, 0em);
	overflow:hidden;	
	z-index:1; 
	}
div.content { 
	position:absolute; visibility:hidden;
	left:0px; top:0px; 
	z-index:1; 
	}

/* Set small font-size or size/position of div's will be off in some browsers  */
div#scrollbar { 
  position:relative; left:0; top:0;
  /*width:11px; height:260px;*/
  /*width:11em; height:260em;*/
    /* New pixel dimensions */
  	/*width:11px; height:210px;*/
  /* New relative dimensions */
  width:11em; height:210em;
  font-size:1px; z-index:1;
  }
div#track { 
  /*position:absolute; left:0; top:12px;*/
  position:absolute; left:0; top:12em;
  /* Old Dimensions */
  /*width:11px; height:234px;*/
  /*width:11em; height:234em;*/
     /* New pixel dimensions */
  	/*width:11px; height:184px;*/
  	/* New relative dimensions */
  	width:11em; height:184em;
  background: url("images/track.gif") #336 repeat;
  z-index:1;
  }
div#dragBar {
  /*position:absolute; left:1px; top:1px;*/
  position:absolute; left:1em; top:1em;
  /*width:9px; height:20px;*/
  width:9em; height:20em;
  /*background-color:#ceced6;*/
  background-color:#BEBEDB;
  z-index:1;
  }  
div#up { position:absolute; left:0; top:0; z-index:2;}  
div#down { position:absolute; left:0; bottom:0; z-index:3;}

div#up img, div#down img {width:11em; height:11em;}

a img { border:none } /* Gets rid of horrible blue border around images in IE */