@import url('reset.css') screen;


/* GLOBAL ELEMENTS ######### */

body {width:100%; background:#c2c0c1 url(../images/bg-pg.jpg) no-repeat;font: 9pt/12pt Helvetica, Arial, sans-serif; color: #6e6f6f; }

h2 {font: normal 9pt/11pt Helvetica, Arial, sans-serif;color:#f78f1e; margin: 10px 0 0 0;}
h4 {font: normal normal 12pt/14pt Helvetica, Arial, sans-serif; margin-bottom:6px;}

p {margin: 3px 0 16px 0; font: 9pt/12pt Helvetica, Arial, sans-serif !important;}

a:link {color:#f78f1e; text-decoration:none;}
a:visited {color:#f78f1e; text-decoration:none;}
a:hover {color:#f78f1e; text-decoration:underline;}
a:active {color:#f78f1e; text-decoration:underline;}


strong {font-weight:bold;}
acronym {cursor:help; border-bottom:1px dotted #6e6f6f;}
embed {margin:0; padding:0;}

.boldorange {font-weight:bold !important; color:#f78f1e !important;}
.panel p {width:400px;}
.spacebelow {margin-bottom:10px;}



/* HEADER ######### */

#header {width:782px; height:139px;}

#logo {height:100px; width:110px; position:absolute; top:25px; left:37px;
	background:url(../images/logo.png) no-repeat; text-indent:-9999px;
	}		
#logo:hover {background-position:0 -97px;}	



/* MAIN STRUCTURE ######### */


#wrapper {width:782px; height:auto;
	position:relative;
	margin: 0 auto;}
		
#contentWrapper {width:782px; height:auto;
	padding: 25px 0 0 0;
	background:url(../images/bg-bodytop.gif) no-repeat;}	
	
#content {background:url(../images/bg-bodytile.gif) repeat-y;height:100%; float:left;}	
#pgServices {height:400px;}
	
#sidebar {width:146px; float:left;
	text-align:right;
	padding: 0 15px;}
	
#mainContent {width:556px; float:left;
	padding: 0 25px;
	background:url(../images/divline1.gif) no-repeat;}	

#contentWrap {padding:10px; margin:20px 0;}
	
#contentFooter {width: 782px; clear:both;
	background:url(../images/bg-bodybtm.gif)}

#footer p {width: 782px; font-size:7pt !important; letter-spacing:1px; text-transform:uppercase; color:#999999; text-indent:15px; margin-top:6px }

#pgCompany #tvPhoto {position:absolute; top: 235px; left:620px; z-index:100;}
#pgServices #tvPhoto {position:absolute; top: 215px; left:560px; z-index:200;}
#pgServices #shadow {position:absolute; top: 468px; left:620px; z-index:100;}

#pgContact #tvPhoto {position:absolute; top: 280px; left:445px; z-index:100;}

#pgContact table {z-index:150;}

img#pgTitle {margin-bottom:15px;}



/* HOME ######### */

#home #myAlternativeContent {text-align:center; color:#fff; padding:20px; margin-left:150px;}

#home #contentWrapper {width:782px; height:auto;
	padding: 25px 0 0 0;
	background:none;}	

#home h2 {width:183px; height:27px;text-indent:-999px; margin:0 0 15px 0; }

#home #mainPres-wrapper {width:100%; height:225px; background:url(../images/bg-mainPres.jpg) repeat-x; position:absolute; top: 145px; z-index:0;}	
#home #mainPres	{width:782; height:225px;}	

#home #carousel {width: 518px; height:225px; float:left; position:relative; bottom:0; }
#home #carousel #cFlash {width: 518px; height:220px; position:absolute; bottom:0; left:-145px; padding:0; margin:0; }
#home #carouselText {width: 243px; height:225px; float:left; margin-left:20px;}	

#home #module-about {width: 478px; height:188px; background:url(../images/bg-module-intro.gif) no-repeat; float:left; padding:15px 20px 0 20px;}	
#home #module-about h2 {background:url(../images/h2-module-about.gif) no-repeat; }

#home #module-blog {width: 213px; height:188px; background:url(../images/bg-module-blog.gif) no-repeat; float:left; margin-left:10px; padding:15px 20px 0 20px;}	
#home #module-blog li {color:#666666; text-decoration:none; margin:3px 0 0 0;}
#home #module-blog li p {line-height:9px;}
#home #module-blog li a {color:#666666; text-decoration:none; margin:0;}

#home .boldorange {margin-bottom:0;}

#home p.date {margin-top:0; margin-bottom:5px; font-size:9px !important;}

#home #module-blog ul {}

/* NAVIGATION ######### */

#nav {width:606px; height:59px;
	position:absolute; top: 62px; left:200px;}
#nav li, #nav li a {width:118px; height:59px; float:left; text-indent:-9999px; cursor:pointer;}
#nav li:hover, #nav li a:hover { background-position:0 -120px;}
#nav-company {background:url(../images/nav-company.png) no-repeat;}
#nav-services {background:url(../images/nav-services.png) no-repeat;}
#nav-gallery {background:url(../images/nav-gallery.png) no-repeat;}
#nav-blog {background:url(../images/nav-blog.png) no-repeat;}
#nav-contact {background:url(../images/nav-contact.png) no-repeat;}

#pgCompany #nav-company, #pgServices #nav-services, #pgGallery #nav-gallery, #pgBlog #nav-blog, #pgContact #nav-contact {background-position: 0 -120px;}



/* SUBNAV ######### */

/* all  */
ul#subnav {margin:33px 0 0 25px; list-style:none;}
#subnav li, #subnav li a { height:28px; width:120px; text-align:left; display:block; text-indent:-9999px; cursor:pointer;list-style:none; background-repeat:no-repeat; }
#subnav li:hover, #subnav li a:hover {background-position:0 -28px;}

/* company  */
#subnav-co { background:url(../images/subnav-co-1.gif)}
#subnav-facility {background:url(../images/subnav-co-2.gif)}
#subnav-factsheet {background:url(../images/subnav-co-3.gif)}
#subnav-careers {background:url(../images/subnav-co-4.gif)}

/* services  */

#subnav-preprod { background:url(../images/subnav-svcs-2.gif)}
#subnav-filmvideo {background:url(../images/subnav-svcs-3.gif)}
#subnav-editorial {background:url(../images/subnav-svcs-editorial.gif)}

#subnav-postprod {background:url(../images/subnav-svcs-4.gif)}
#subnav-multi {background:url(../images/subnav-svcs-6.gif)}
#subnav-motion {background:url(../images/subnav-svcs-motion.gif)}
#subnav-audio {background:url(../images/subnav-svcs-7.gif)}
#subnav-web {background:url(../images/subnav-svcs-8.gif)}

/* gallery  */
#subnav-gallery1 { background:url(../images/subnav-gallery-1.gif)}
#subnav-gallery2 {background:url(../images/subnav-gallery-2.gif)}
#subnav-gallery3 {background:url(../images/subnav-gallery-3.gif)}
#subnav-gallery4 {background:url(../images/subnav-gallery-4.gif)}


/* MISC ######### */

.topspaceXL {margin-top:35px;}
.topspace {margin-top:15px;}
.fltlt {float:left;}
.fltrt {float:right;}
.clear {clear:both;}


/* GALLERY ######### */
#pgGallery #content {height:380px; }	

#pgGallery #mainContent {width:585px; float:left;
	padding: 0 10px 0 10px;
	background:url(../images/divline1.gif) no-repeat;
	position:relative;}	

#content {background:url(../images/bg-bodytile.gif) repeat-y;height:100%; width:782px; float:left; position:relative;}	

	
#galleryPlayer {width: 391px; height:321px; position:relative; top:40px; left:50px; background:url(../images/ytplayer_bg3.jpg) no-repeat;}
#galleryPlayerFlash {position:absolute; top: 14px; left: 21px; width:350px; height:260px;}

div#bytesdisplay {position:absolute; top:275px; right:5px; font-size:9px; color:#666666; z-index:1000;}

div#btns {position:absolute; top:271px; left:15px;}
.btn {margin-right:12px;}
a#btnPlay{height:17px; width:16px; background:url(../images/btn-play.gif) no-repeat; text-indent:-9999px; display:block;float:left;}
a#btnPause{height:17px; width:16px; background:url(../images/btn-pause.gif) no-repeat; text-indent:-9999px; display:block; float:left;}
a#btnStop{height:17px; width:16px; background:url(../images/btn-stop.gif) no-repeat; text-indent:-9999px; display:block;float:left;}
a#btnMute{height:17px; width:16px; background:url(../images/btn-mute.gif) no-repeat; text-indent:-9999px; display:block;float:left;}
a#btnUnmute{height:17px; width:16px; background:url(../images/btn-unmute.gif) no-repeat; text-indent:-9999px; display:block;float:left;}

a#btnPlay:hover, a#btnPause:hover, a#btnStop:hover, a#btnMute:hover, a#btnUnmute:hover {background-position:0 -19px;}

#scrollbox {overflow-y:scroll; height:310px; width:310px; margin: 0;position:absolute; top:40px; left:450px;}

#scrollbox h1 {display:none;}

#pgGallery table td {vertical-align:top;}
#pgGallery table p {margin: 0;}


#pgGallery #timedisplay {
      border: solid 1px red;
      width: 50px;
    }

#pgGallery div.item {
      margin: 5px; 
	  background-color:#eee;
      padding: 5px; 
      width: auto;
    }
#pgGallery span.thumbnail {
      margin-right: 10px;
      padding:0;
      text-align: left;
	  display:block;
    }    
#pgGallery img.thumb {	  border:1px solid #CCC;}
	
#pgGallery span.attr {
      font-size:9px; font-style:italic; 
    }
#pgGallery p.title {
      font-size: 12px;
	  display:block;
    }
	
#pgGallery p.descrip {font:10px/12px Arial, Helvetica, sans-serif !important;}	

#pgGallery img {
      border: 0;
    }  
	
#pgGallery #pgTitle {position:absolute; left:50px;}	
	  


#contentWrapper {margin-bottom:0 !important; padding-bottom:0 !important;}	



/* SLIDERS ######### */

		a:focus { outline:none }
		
		img { border: 0 }
		
		
		.stripViewer .panelContainer .panel ul {
			text-align: left;
			margin: 0 15px 0 30px;
		}
		
		.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
			margin: 20px 0;
			position: relative;
			width: 100%;
		}

		/* These 2 lines specify style applied while slider is loading */
		.csw {width: 100%; height: 280px; background: #fff; overflow: hidden;}
		.csw .loading {margin: 100px 0 400px 0; text-align: center}

		.stripViewer { /* This is the viewing window */
			position: relative;
			overflow: hidden; 
			margin: auto;
			width: 556px; /* Also specified in  .stripViewer .panelContainer .panel  below */
			height: 280px;
			clear: both;
			background: #fff;
			 /* overflow-y:scroll; 		creates scroll bar*/

		}
		
		.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
			position: relative;
			left: 0; top: 0;
			width: 100%;
			list-style-type: none;
			/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */

		}
		
		.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
			float:left;
			height: 280px;
			position: relative;
			width: 556px; /* Also specified in  .stripViewer  above */
		}
		
		.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
			padding: 0;

		}
		
/* hide the generated nav */		
		.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
			display:none;}
		.stripNavL {display:none;}
		.stripNavR {display:none;}