@charset "UTF-8";
/* CSS Document */

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	*position: relative;
	}
	
html #page {
	*position: absolute;
	*top: 50%;
	}

html #site {
	*position: relative;
	*top: -50%;
	}	

body {
	display: table;
	width: 100%;
	background-color:#000000;
	background-image:url(../Images/bg.png);
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	}
		
#page{
	display: table-cell;
	vertical-align: middle;
	}

#site {
	width: 1024px;
	height:688px;
	margin: 0 auto;
	}
	
.header {
	margin-top:0px;
	position:absolute;
	width:1024px;
	height:150px;
	}
	
.navigation {
	position:absolute;
	margin-top:160px;
	width:1024px;
	height:30px;
	}
	
.subnavigation {
	background-image:url(../Images/subnav_bg.png);
	position:absolute;
	width:200px;
	height:418px;
	margin-top:200px;
	}
	
.content {
	background-image:url(../Images/main_bg.png);
	background-repeat:no-repeat;
	position:absolute;
	width:814px;
	height:418px;
	margin-top:200px;
	margin-left:210px;
	}
	
.contentText {
	margin:20px;
	height:378px;
	overflow:auto;
	padding-right:10px;
	}
	
.footer{
	width:1024px;
	height:60px;
	position:absolute;
	margin-top:628px;
	text-align:center;
	color:#333333;
	}

img{
	border:0px;
	}
	
h2 {
	font-size:18px;
	margin-bottom:25px;
	margin-top:0px;
}

.center{
	text-align:center;
	}

.bold{
	font-weight:bold;
	}

.subheading {
	font-size:13px;
	}
	
.subheading2 {
	font-size:13px;
	display:block; 
	padding-top:8px;
	margin-bottom:-8px;
	}

.subnavigation a {
	color:#000000;
	text-decoration:none;
	display:inline-block;
	line-height:200%;
	}
	
.link{
	padding-bottom:5px;
	}
	
a {
	color:#000000;
	outline:0;
	}
	
a:hover {
	text-decoration:underline;
	} 
	
.floatleft{
	float:left;
	padding-right:20px;
	}
	
.floatright, .form{
	float:right;
	padding-left:20px;
	}
	
.centerText {
	padding:20px;
	text-align:center;
	}
	
.homeBtn {
	margin-left:210px;
	margin-top:-30px;
	}

.servicesBtn {
	margin-left:360px;
	margin-top:-30px;
	}

.clientBtn {
	margin-left:510px;
	margin-top:-30px;
	}

.contactBtn {
	margin-left:660px;
	margin-top:-30px;
	}

.bottomLinks a{
	color:#666;
	text-decoration:none;
}

.bottomLinks a:hover{
	text-decoration:underline;
}
	
.homebody {
	line-height:170%;
	padding-top:5px;
	padding-left:5px;
	font-size:11px;
	}

#studio-images {
	width:275px;
	float:right;
	list-style:none;
	margin:0;
	padding:0;
}

.portfolio-links {
	position:absolute;
	width:280px;
	left:495px;
	top:345px;
	}
	
.portfolio-links2 {  /* for a long scrolling page */
	width:280px;
	margin-left:-5px;
	margin-top:15px;
	display:inline-block;
	}
	
.search {
	margin-top:-30px;
	margin-left:15px;
}
	


/* CLIENT PAGE */

#client_container {
	width:476px;
	float:left;
}

#client_container a {
	display:inline-block;
	margin:8px 3px;
}

#tooltip {
	position: absolute;
	z-index: 3000;
	border: 1px solid #111111;
	background-color: #eeeeee;
	padding: 6px;
	opacity: 0.85;
	font-size:10px;
}

#tooltip div {
	margin: 0;
	}

#tooltip h3 {
	margin: 0 0 2px 0;
	font-size: 12px;
	font-weight: bold;
}

/* END CLIENT PAGE */


/* CONTACT PAGE */

.form {
	padding:20px;
	padding-bottom:0;
	line-height:100%;
	font-size:11px;
}

.form input, .form textarea, .form select {
	width:350px;
	margin-top:5px;
}

/*.form textarea {
	height:100px;
}*/

.form .button {
	width:80px;
	margin-bottom:0;
}

.thanks {
	line-height:150%;
	text-align:center;
	font-size:13px;
	padding-top:20px;
}

/* END CONTACT PAGE */



/* SITEMAP PAGE */

ul.sitemap li {
	padding-bottom:12px;
}

ul.sitemap ul li {
	padding-top:4px;
	padding-bottom:2px;
}

/* END SITEMAP PAGE */

	

/* ACCORDIAN PORTFOLIO MENU */

/* SpryAccordion.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* This is the selector for the main Accordion container. For our default style,
 * we draw borders on the left, right, and bottom. The top border of the Accordion
 * will be rendered by the first AccordionPanelTab which never moves.
 *
 * If you want to constrain the width of the Accordion widget, set a width on
 * the Accordion container. By default, our accordion expands horizontally to fill
 * up available space.
 *
 * The name of the class ("Accordion") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style the
 * Accordion container.
 */
.Accordion {
	overflow: hidden;
	margin-left:2px;
	margin-top:34px;
	width:196px;
	height:348px;
}

/* This is the selector for the AccordionPanel container which houses the
 * panel tab and a panel content area. It doesn't render visually, but we
 * make sure that it has zero margin and padding.
 *
 * The name of the class ("AccordionPanel") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel container.
*/
.AccordionPanel {
	margin: 0px;
	padding: 0px;
}

/* This is the selector for the AccordionPanelTab. This container houses
 * the title for the panel. This is also the container that the user clicks
 * on to open a specific panel.
 *
 * The name of the class ("AccordionPanelTab") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel tab container.
 */
.AccordionPanelTab {
	/*background-color: #CCCCCC;
	border-top: solid 1px black;
	border-bottom: solid 1px gray;*/
	margin: 0px;
	/*padding: 2px;*/
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
}

/* This is the selector for a Panel's Content area. It's important to note that
 * you should never put any padding on the panel's content area if you plan to
 * use the Accordions panel animations. Placing a non-zero padding on the content
 * area can cause the accordion to abruptly grow in height while the panels animate.
 *
 * Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
 * Content container.
 *
 * The name of the class ("AccordionPanelContent") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel content container.
 */
.AccordionPanelContent {
	overflow: auto;
	margin: 0px;
	padding-left:10px;
	
	max-height: 178px;
	background-color:#ffffff;
	font-size:11px;
}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open. The class "AccordionPanelOpen" is programatically added and removed
 * from panels as the user clicks on the tabs within the Accordion.
 */
.AccordionPanelOpen .AccordionPanelTab {
	/*background-color: #EEEEEE;*/
}

/* This is an example of how to change the appearance of the panel tab as the
 * mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
 * and removed from panel tab containers as the mouse enters and exits the tab container.
 */
.AccordionPanelTabHover {
	/*color: #555555;*/
}
.AccordionPanelOpen .AccordionPanelTabHover {
	/*color: #555555;*/
}

/* This is an example of how to change the appearance of all the panel tabs when the
 * Accordion has focus. The "AccordionFocused" class is programatically added and removed
 * whenever the Accordion gains or loses keyboard focus.
 */
.AccordionFocused .AccordionPanelTab {
	/*background-color: #3399FF;*/
}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open when the Accordion has focus.
 */
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
	/*background-color: #33CCFF;*/
}

/* IMAGE POPUP */


#thumbBox{ /*Outermost DIV for thumbnail viewer*/
position: absolute;
left: 0;
top: 0;
width: auto;
padding: 10px;
padding-bottom: 0;
background: #313131;
visibility: hidden;
z-index: 10;
cursor: hand;
cursor: pointer;
}

#thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */
font-family:Verdana, Arial, Helvetica, sans-serif;
/*letter-spacing: 5px;
line-height: 1.1em;*/
color: white;
padding: 5px 0;
text-align: right;
}


#thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */
background-color: white;
}

#thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/
position: absolute;
visibility: hidden;
border: 1px solid black;
background-color: #EFEFEF;
padding: 5px;
z-index: 5;
}