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






/*----------------------------------- Portfolio section - see notes for info on how to update -------------------*/

#container {height:700px;}

/*----------------------------------- Portfolio Navigation -------------------*/
#work_nav { 
width:160px; float:left;
margin:0px;
padding:0px;}

#work_nav li {display:block; height:37px; list-style:none; text-indent:-9999px;}
#work_nav li a { display:block; height:35px;}

li#title {background:url(../images/ourwork.gif) no-repeat right;}

li#identities a { background:url(../images/work_nav_2.gif) no-repeat -191px -5px;}
li#identities a:hover { background:url(../images/work_nav_2.gif) no-repeat -15px -5px;}


li#advertising a { background:url(../images/work_nav_2.gif) no-repeat -191px -43px;}
li#advertising a:hover { background:url(../images/work_nav_2.gif) no-repeat -15px -45px;}


li#print a { background:url(../images/work_nav_2.gif) no-repeat -191px -79px;}
li#print a:hover { background:url(../images/work_nav_2.gif) no-repeat -15px -83px;}


li#brand a { background:url(../images/work_nav_2.gif) no-repeat -191px -115px;}
li#brand a:hover { background:url(../images/work_nav_2.gif) no-repeat -15px -120px;}


li#web a { background:url(../images/work_nav_2.gif) no-repeat -191px -150px;}
li#web a:hover, li#web a.on { background:url(../images/work_nav_2.gif) no-repeat -15px -155px;}


/*----------------------------------- previous and next controls -------------------*/

ul.controls { margin:0px; padding:0px; position:absolute;
top:375px; left:200px; height:37px; width:288px;}

ul.controls li { display:block; list-style:none; padding:0px; margin:0px; height:37px; width:144px; position:absolute; text-indent:-99999px;}
ul.controls li a { display:block;height:37px; width:144px;}
li.previous a {background:url(../images/controls.gif) no-repeat 0px 0px;}
li.previous a:hover {background:url(../images/controls_on.gif) no-repeat 0px 0px;}
li.next {top:0px; left:144px;}
li.next a {background:url(../images/controls.gif) no-repeat -144px 0px;}
li.next a:hover {background:url(../images/controls_on.gif) no-repeat -144px 0px;}

#intro ul.controls {top:250px; left:100px;}
#intro li.next a {background:url(../images/control_intro.gif) no-repeat; width:208px; height:81px;}
#intro li.next a:hover {background:url(../images/control_intro_on.png) no-repeat;}


/*----------------------------------- Outer layer of slider effect - don't change this -------------------*/

#wrapper { position: absolute; 
height: 400px; width:550px; overflow: hidden; 
margin:0px; padding:0px 0 0 ;
margin:0 auto; left:180px;
color:#666666;
font-size:11px; line-height:1.4em;
border-left:#CCCCCC dashed 1px;}

/*----------------------------------- Inner layer of slider effect - you can make this wider to 
accomodate more portfolio divs, otherwise, don't change  -------------------*/

#work_images  { height:400px; width:20000px;  position: relative;  margin:0px; padding:0px; z-index:10;}

#work_images p { margin:0 0 5px 0;}

#work_images img {margin-bottom:10px;}

/*----------------------------------- This class separates the portfolio pieces -------------------*/
div.port_piece { width:510px; height:400px; position:absolute; padding:0 30px; line-height:1.4em; }
div.port_piece h1 {margin:0 0 9px 0px;}
div.port_piece h2 {font-size:14px; margin:4px 0 4px 0px;}
div.port_piece p {margin:0 0 0px 10px; line-height:1.5em; }

div.port_piece#intro { background:none;}

/*-----------------------------------Individual Portfolio peices - each should have it's own unique div id
NOTE - this controls the positioning of each portfolio piece, to make sure they are not overlapping
they are set up in increments of 550px - to add a new piece, add 550px to the LEFT property -------------------*/

/*-----------------------------------Use id of intro and closing for the first div in each section - don't change -------------------*/

#intro, #closing {top:0px; left:0px; font-size:11px; padding:40px 0 0 30px; line-height:1.4em;}


 
img.awards {float:right;}

/*-----------------------------------ordered navigation of portfolio pieces - there is one in each portfolio page -------------------*/

ul#ordered_nav {z-index:100; position:absolute;bottom: 20px; right:10px; width:550px; text-align:center; font-family:"trebuchet ms", Arial, Helvetica, sans-serif;}
ul#ordered_nav li { display:inline; font-size:90%; }
ul#ordered_nav li a  { padding:0 3px; text-decoration:none; color:#999999;}
ul#ordered_nav li a:hover { text-decoration:underline; color:#333333;}