body{ background: #2f2726 url(../images/bg.jpg) center top no-repeat; margin: 0; text-align: center;}
img {border: 0;}
#container {width: 974px; margin: 0 auto; text-align: left;}
#header {margin-top: 176px; width: 974px; height: 59px; float: left; clear: left; }
#content a {color: #fff}
#content {font: 14px tahoma, "trebuchet ms", arial, sans-serif; color: #d2e7ed; text-align: left; width: 886px; padding: 80px 44px 44px 44px; float: left; background: url(../images/content_bg.png);}

#nav { height: 54px; list-style: none; margin: 20px 0 0 0; padding: 0;}
#nav li { float: left; margin-right: 10px; }
#nav a { display: block; width: 169px; height: 54px; text-indent: -999em; }


#nav a#tab_development { background: url('../images/tab-development.png') no-repeat 0 0; outline: none; }
#nav a#tab_development:hover { background-position: 0 -54px; }
#nav a#tab_webdesign { background: url('../images/tab-webdesign.png') no-repeat 0 0; outline: none; }
#nav a#tab_webdesign:hover { background-position: 0 -54px; }
#nav a#tab_graphicdesign { background: url('../images/tab-graphicdesign.png') no-repeat 0 0; outline: none; }
#nav a#tab_graphicdesign:hover { background-position: 0 -54px; }
#nav a.selected { background-position: 0 -54px !important; }

#slides-bg { background: url('../images/slides-bg.png') no-repeat 0 0; margin: 0 0 50px -12px; padding: 12px; width: 889px; height: 283px;}

#case-studies-container { position: relative; width: 889px; height: 255px; overflow: hidden;}
#case-studies-inner { position: relative; }

.case-studies {width: 889px; }
#case-studies-webdesign {margin-top: 40px;}
#case-studies-graphicdesign {margin-top: 40px;}

.content .small, .case-studies li span {font: 11px arial, sans-serif; color: #d2e7ed;}
.hidden {display: none;}
.panel-content {font: 14px tahoma, "trebuchet ms",arial, sans-serif; color: #d2e7ed; text-align: left; width: 640px;}
.panel-content .flowplayer {}
.panel-content .content {margin: 34px 44px 44px 44px;}
.center {text-align: center;}
.content a {color: #fff}
.panel-content h1 {font: 24px tahoma, "trebuchet ms",arial, sans-serif; color: #d2e7ed; margin: 0 0 14px 0;}
.panel-content p {font: 14px tahoma, "trebuchet ms",arial, sans-serif; color: #d2e7ed; }
#footer {float: left; clear: left; width: 974px; margin: 0 auto; padding: 6px 0 20px 0; text-align: left; font: 11px arial, sans-serif; color: #d2e7ed;}
#footer a {color: #fff}

/*

	GalleryView Stylesheet
	
	Use the CSS rules below to modify the look of your gallery.
	
	To create additional rules, use the markup below as a guide to GalleryView's architecture.
	
	<div class="gallery">
		<div class="panel">
			<img src="path/to/image.jpg" />
			<div class="panel-overlay">
				...overlay content...
			</div>
			<div class="overlay-background"></div>
		</div>
		<ul class="filmstrip">
			<li class="frame current">
				<img src="path/to/thumbnail.jpg" />
				<div class="caption">caption text</div>
			</li>
			<li class="frame">
				<img src="path/to/thumbnail.jpg" />
				<div class="caption">caption text</div>
			</li>
		</ul>
	</div>
		

*/

/* GALLERY LIST */
/* IMPORTANT - Change '#photos' to the ID of your gallery list to prevent a flash of unstyled content */
.case-studies { visibility: hidden; }

/* GALLERY CONTAINER */
.gallery {margin-top: 10px;}

/* LOADING BOX */
.loader { background: url(loader.gif) center center no-repeat #ddd; }

/* GALLERY PANELS */
.panel {}

/* DEFINE HEIGHT OF PANEL OVERLAY */
/* NOTE - It is best to define padding here as well so overlay and background retain identical dimensions */
.panel .panel-overlay,
.panel .overlay-background {  }

/* PANEL OVERLAY BACKGROUND */
.panel .overlay-background { background: #000; }

/* PANEL OVERLAY CONTENT */
.panel .panel-overlay { color: white; font-size: 0.7em; }
.panel .panel-overlay a { color: white; text-decoration: underline; font-weight: bold; }

/* FILMSTRIP */
/* 'margin' will define top/bottom margin in completed gallery */
.filmstrip {  }

/* FILMSTRIP FRAMES (contains both images and captions) */
.frame {}

/* WRAPPER FOR FILMSTRIP IMAGES */
.frame .img_wrap { border: solid 9px #a3b6bb; }

/* WRAPPER FOR CURRENT FILMSTRIP IMAGE */
.frame.current .img_wrap {  }

/* FRAME IMAGES */
.frame img { border: 0; -ms-interpolation-mode: bicubic; }

/* FRAME CAPTION */
.frame .caption { font-size: 11px; text-align: center; color: #888; }

/* CURRENT FRAME CAPTION */
.frame.current .caption { color: #000; }

/* POINTER FOR CURRENT FRAME */
.pointer {
	border-color: #000;
}

/* TRANSPARENT BORDER FIX FOR IE6 */
/* NOTE - DO NOT CHANGE THIS RULE */
*html .pointer {
	filter: chroma(color=pink);
}