/* Import for IE 6.0 */

@import url("ie6style.css");

/* Core Rules */

html, body {
   height: 100%;
   font-family: Geneva, Arial, Helvetica, sans-serif;
   color: #808080;
   overflow-x: hidden;
}
html, body, div, ul, p, a, h1, h2, h3, h4, h5, h6, img {
   margin: 0;
   padding: 0;
}
p, table, dl {
   font-size: 12px;
}
p strong {
   font-weight: bold;
}
h1, h2, h3, h4, h5 {
   font-weight: normal;
}
h1 {
   font-size: 18px;
}
h2, h3 {
   color: #707070;
   text-transform: uppercase;
}
h2 {
   font-size: 12px;
}
h3 {
   /*font-family: Georgia, Times New Roman, Times, serif;*/
   font-size: 16px;
}
h4 {
   font-size: 10px;
   color: #F26522;
}
h5 {
   font-size: 10px;
}
a {
   color: #808080;
   text-decoration: none;
   outline: none;
}
a:hover {
   color: #f26522;
   text-decoration: none;
}
*:active, a:focus {
   -moz-outline-style: none; /* IMPORTANT - Fixes Firefox dotted-line links */
}
img {
   -ms-interpolation-mode: bicubic;
}
a img {
   border-style: none;
   outline: none;
}
ul {
   list-style-type: none;
}
.clearFix {
   clear: both;
}
/* Layout */

div#shim {
   visibility: hidden;
   width: 100%;
   height: 50%;
   margin-top: -280px;
   float: left;
   display: inline;
}
div#container_outer {
   width: 862px;
   margin-left: auto;
   margin-right: auto;
   clear: both;
}
div#header {
   margin-bottom: 6px;
   width: 862px;
   height: 69px; /* was 74px */
   position: relative; /* For adding #show_thumbs */
   clear: both;
}
div#logo {
   margin-top: 10px;
   float: right;
   display: inline;
   position: relative;
}
div#logo a {
   text-indent: -9999px;
   width: 117px;
   height: 45px;
   display: block;
   background: url(../images/fcl_logo_small.png) no-repeat 0 0;
}
div#nav {
   margin-top: 45px;
   float: left;
   display: inline;
   position: relative;
   width: 388px;
   height: 24px;
}
div#line {
   width: 474px;
   height: 13px;
   float: right;
   clear: right;
   display: inline;
   position: relative;
   border-bottom: #B8B7B6 1px solid;
}
div#strapline {
   width: 137px; /* Was 143px */
   height: 13px; /* Was 20px */
   float: right;
   display: inline;
   margin-top: 15px;
   margin-right: 0px;
   background: url(../images/tagline_fcl.png) no-repeat 0 0;
}
div#strapline h2 {
   text-indent: -9999px;
}
#home_intro {
   float: left;
   display: inline;
   width: 719px;
   margin-top: 15px;
}
#home_intro p {
   font-size: 10px;
}

/* Pre loader */

#pre_loader {
   display: none;
}

/* Main Nav Rules */

#nav li {
   float: left;
   display: inline;
}
#nav a {
   height: 24px;
   display: block;
   text-indent: -9999px;
   background-position: 0 0;
   background-repeat: no-repeat; 
}
#nav a:hover, #nav a.current {
   background-position: 0 -24px;
}

/* New Main Nav Items */

a.portfolio {
   width: 90px;
   background-image: url(../images/nav_portfolio.png);
}
a.services {
   width: 83px;
   background-image: url(../images/nav_services.png);
}
a.process {
   width: 78px;
   background-image: url(../images/nav_process.png);
}
a.about_us {
   width: 85px;
   background-image: url(../images/nav_about.png);
}
a.contact {
   width: 52px;
   background-image: url(../images/nav_contact.png);
}

/* Home Page Carousel */

#home_frame {
   position: relative;
   width: 860px;
   height: 400px;
   border: 1px solid #D8D8D8;
   overflow: hidden;
}
.js .home_carousel {
   display: none;
}
.home_carousel li {
   width: 860px;
   height: 400px;
   overflow: hidden;
   position: relative;
}

/* Home Page Carousel Overlay */

div.infoOverlay {
   position: absolute;
   top: 0;
   width: 860px;
   height: 400px;
   display: none;
}
div.infoOverlay h2 {
   margin-top: 24px;
   margin-left: 30px;
   text-indent: -9999px;
   color: #FFFFFF;
}
a.more_button {
   position: absolute;
   top: 19px;
   right: 25px;
   width: 65px;
   height: 29px;
   display: block;
   text-indent: -9999px;
   background: url(../images/more_button.png) no-repeat -65px 0;
}
a.more_button:hover {
   background: url(../images/more_button.png) no-repeat 0 0;
}
div.overlay_bar {
   position: absolute;
   top: 307px;
   width: 860px;
   height: 67px;
   background-position: 0 0;
}
div#overlay_exposure {
   background-image: url(../images/home/overlay_coca_exp.png);
}
div#overlay_blow {
   background-image: url(../images/home/overlay_coca_blow.png);
}
div#overlay_moe_efs {
   background-image: url(../images/home/overlay_moe_efs.png);
}
div#overlay_erik {
   background-image: url(../images/home/overlay_coca_erik.png);
}
div#overlay_oc {
   background-image: url(../images/home/overlay_oc.png);
}
div#overlay_fcl_hihi {
   background-image: url(../images/home/overlay_fcl_hihi.png);
}
div#overlay_gw_collage {
   background-image: url(../images/home/overlay_gw_collage.png);
}

/* Home Page Carousel Buttons */

#frameNext, #framePrev {
    position: absolute;
    top: 173px;
    z-index:99;
}
#frameNext {
    right: 0;
}
#framePrev {
    left: 0;
}
#frameNext a, #framePrev a {
   display: block;
   width: 56px;
    height: 53px;
    text-indent: -9999px;
}
#frameNext a {
   background: transparent url(../images/arrow-next_3.png) no-repeat 0 0;
}
#framePrev a {
   background: transparent url(../images/arrow-prev_3.png) no-repeat 0 0;
}
#frameNext a:visited, #framePrev a:visited {
    background-position: 0 0;
}
#frameNext a:hover, #framePrev a:hover {
    background-position: -56px 0;
}
#frameNext a:active, #framePrev a:active {
    background-position: -112px 0;
}
#framePrev a.disabled, #frameNext a.disabled {
    display: none;
}

/* Portfolio Container */

#container {
   width: 729px;
   position: relative;
   float: right;
   /*clear: right;*/
   display: inline;
}
.js #container {
   display: none; /* Javascript fades in container */
}

/* Sub Nav */

#sub_nav {
   width: 128px;
   position: relative;
   float: left;
   display: inline;
   background-color: #F0F0F0;
}
.js #sub_nav {
   overflow: hidden;
}
.accordion {
   height: 403px;
}
.standard {
   height: 402px;
}
/* Portfolio Accordion Nav */

#accordion_nav, #standard_nav {
   text-indent: 0;
   width: 128px;
   font-size: 10px;
   text-transform: uppercase;
   background-color: #F0F0F0;
}
.js #accordion_nav li {
   display: inline;
}
#accordion_nav ul, #standard_nav ul {
   text-indent: 0;
}
#accordion_nav li a.head, #standard_nav h2.head {
   display: block;
   height: 17px;
   border-bottom: 1px solid #FFFFFF;
   padding-top: 5px;
   text-indent: 15px;
}
#accordion_nav li a.head {
   cursor: pointer;
   background: #E0E0E0 url(../images/nav_arrow.png) no-repeat scroll 6px 8px;
   color: #808080;
}
#standard_nav h2.head {
   background: #F26522 url(../images/nav_arrow_current.png) no-repeat 6px 8px;
   color: #FFFFFF;
   font-size: 10px;
}
#accordion_nav li a.head:hover {
   background-color: #D0D0D0;
}
#accordion_nav li a.selected {
   background-image: url(../images/nav_arrow_current.png);
   background-color: #F26522;
   color: #FFFFFF;
}
#accordion_nav li a.selected:hover {
   background-color: #F26522;
   cursor: auto;
}
#projects_list a, #type_list a, #archive_list a, #standard_list a {
   display: block;
   height: 15px;
   padding-top: 3px;
   text-indent: 10px;
   color: #909090;
}
#standard_nav a {
   margin-bottom: 3px;
}
#accordion_nav li ul li a:hover, #accordion_nav li ul li a.current, #accordion_nav li ul li a.highlighted, #standard_nav a:hover, #standard_nav a.current {
   background-color: #FFFFFF;
   color: #F26522;
}
#accordion_nav li ul li a.current, #standard_nav a.current {
   cursor: auto;
}
#projects_list a.first, #type_list a.first, #archive_list a.first, #standard_list a.first {
   padding-top: 8px;
}

/* Portfolio Thumbnails Structure */

ul#nav_thumbnails {
   position: relative; /* Was absolute */
   /*top: 0;*/
   width: 727px;
   height: 400px;
   display: block;
   border: 1px solid #FFFFFF;
   z-index: 0;
}
.js ul#nav_thumbnails {
   position: absolute;
   top: 0;
}
ul#nav_thumbnails li {
   position: absolute; /* All have inline values */
   overflow: hidden;
}
ul#nav_thumbnails img {
   float: left;
}
ul#nav_thumbnails a {
   text-indent: -9999px;
   float: left;
   position: absolute;
   top: 0;
   left: 0;
   display: block;
   width: 198px;
   height: 198px;
   background: url(../images/portfolio/nav_thumb_overlay5.png) no-repeat 0 0;
   z-index: 3;
}
ul#nav_thumbnails a:hover, ul#nav_thumbnails a.highlighted {
   background: url(../images/portfolio/nav_thumb_overlay5.png) no-repeat -198px 0;
}

/* Portfolio Thumbnails hidden */

#nav_thumbnails.hidden {
   display: none;
}

/* Show Thumbnails Button */

a#show_thumbs {
   display: block;
   position: absolute; /* was relative */
   top: 0;
   left: 0;
   text-indent: -9999px;
   width: 94px;
   height: 24px;
   /*background: url(../images/project-close-2.png) no-repeat 0 0; Taken Out */
}
/*a#show_thumbs:hover {
   background-position: -20px 0;
} Taken Out */

/* Portfolio Set */

.portfolio_set {
   width: 727px;
   position: relative;
}
.js .portfolio_set {
	display: none;
}
/* Portfolio Project Description */

.project_description_summary {
   position: absolute;
   top: 415px;
   left: 0px;
   width: 651px;
   z-index: 7;
}
.project_description_summary li {
   padding-right: 4px;
   float: left;
   display: inline;
}
.project_description_summary p {
   font-size: 10px;
}
.project_description_summary p span {
   color: #F26522;
}
.project_description {
   position: absolute;
   top: 467px;
   left: 30px;
   width: 651px;
   z-index: 7;
}
.project_description li {
   padding-right: 4px;
   float: left;
   display: inline;
}
.project_description p {
   font-size: 10px;
}
.project_description p span {
   color: #F26522;
}

/* Portfolio Project Description Test - to use if we do away with the list

.project_description h4 {
   padding-right: 4px;
}
.js .project_description h4 {
   float: left;
} */

/* Portfolio Image Frame */

.frame_outer {
   position: relative;
   width: 727px;
   height: 400px;
   overflow: hidden;
   border: 1px solid #D8D8D8;
   margin-bottom: 12px;
}
.frame_inner {
   float: left;
   width: 727px; /* Maximum width based on 10 x 737px plus the gutters (and margins) */
   position: absolute;
   top: 0;
   left: 0;
}
.js .frame_inner {
   width: 7370px;
}
.frame_inner a {
   font-size: 12px;
   border-right: 1px solid #D8D8D8;
   padding: 0 10px;
   margin-top: 10px;
}
.js .frame_inner a { /* Visibility hidden if javascript enabled */
   display: none;
}
.frame_inner img {
   float: left;
   display: inline; /* Recently added */
   margin-right: 10px; /* Gutter width set to 10px in javascript */
}

/* Image Number */

h5#imageNumber {
   width: 78px;
   height: 0;
   position: absolute;
   top: 415px;
   right: 0;
   text-align: right;
}

/* Previous Next Buttons */

#image_buttons {
   position: absolute;
   top: 415px;
}
#image_buttons li {
   margin-bottom: 4px;
}
#image_buttons a {
   display: block;
   width: 21px;
   height: 20px;
   text-indent: -9999px;
}
#prev_button a {
   background-image: url(../images/prev_button.png);
   background-position: 0 0;
   background-repeat: no-repeat;
}
#next_button a {
   background: url(../images/next_button.png) no-repeat 0 0;
}
#prev_button a:hover, #next_button a:hover {
   background-position: -21px 0;
}
#prev_button a:active, #next_button a:active {
   background-position: 0 0;
}
#prev_button a.disabled, #next_button a.disabled {
   background-position: -42px 0;
   cursor: auto;
}

/* Loading Images */

.loader {
   position: absolute;
   top: 0;
   left: 0;
   display: block;
   width: 727px;
   height: 400px;
   z-index: 10;
   background: #D8D8D8 url(../images/ajax-loader-3.gif) no-repeat center center;
}

/* Project Information */

.project_info {
   padding-top: 30px;
   z-index: 50;
}
.js .project_info {
   position: absolute;
   top: 0;
   left: 0;
   width: 280px;
   height: 400px;
   overflow: hidden;
}
.background_white {
   background: transparent url(../images/overlay-white-80.png) repeat;
}
.background_white_90 {
   background: transparent url(../images/overlay-white-90.png) repeat;
}
.background_light {
   background: transparent url(../images/overlay-white-50.png) repeat;
}
.background_white_solid {
   background: url(../images/overlay-white-ie6.png) repeat;
}
.project_info p {
   line-height: 18px;
   margin: 0 20px 10px 20px;
}
.project_info h2, .project_info h3 {
   margin: 0 20px 8px 20px;
}

/* Thumbnail Navigation */

.portfolio_thumbnails {
   position: absolute;
   top: 415px;
   left: 30px;
   display: none; /* Javascript shows these */
}
.portfolio_thumbnails li {
   margin-right: 9px;
   float: left;
   border: 1px solid #E8E8E8; 
}
.portfolio_thumbnails a {
   display: block;
   width: 55px;
   height: 42px;
   text-indent: -9999px;
}

/* Thumbnail Background Position */

.thumb-01 a {
   background-position: 0px 0px;
}
.thumb-01 a:hover, .thumb-01 a.current_thumb {
   background-position: 0px -42px;
}
.thumb-02 a {
   background-position: -55px 0px;
}
.thumb-02 a:hover, .thumb-02 a.current_thumb {
   background-position: -55px -42px;
}
.thumb-03 a {
   background-position: -110px 0px;
}
.thumb-03 a:hover, .thumb-03 a.current_thumb {
   background-position: -110px -42px;
}
.thumb-04 a {
   background-position: -165px 0px;
}
.thumb-04 a:hover, .thumb-04 a.current_thumb {
   background-position: -165px -42px;
}
.thumb-05 a {
   background-position: -220px 0px;
}
.thumb-05 a:hover, .thumb-05 a.current_thumb {
   background-position: -220px -42px;
}
.thumb-06 a {
   background-position: -275px 0px;
}
.thumb-06 a:hover, .thumb-06 a.current_thumb {
   background-position: -275px -42px;
}
.thumb-07 a {
   background-position: -330px 0px;
}
.thumb-07 a:hover, .thumb-07 a.current_thumb {
   background-position: -330px -42px;
}
.thumb-08 a {
   background-position: -385px 0px;
}
.thumb-08 a:hover, .thumb-08 a.current_thumb {
   background-position: -385px -42px;
}
.thumb-09 a {
   background-position: -440px 0px;
}
.thumb-09 a:hover, .thumb-09 a.current_thumb {
   background-position: -440px -42px;
}
.thumb-10 a {
   background-position: -495px 0px;
}
.thumb-10 a:hover, .thumb-10 a.current_thumb {
   background-position: -495px -42px;
}

/* Project Specific Thumbnails */
         
#thumbs_coca a, .coca a {
   background-image: url(../images/portfolio/thumbs_coca.jpg);
   background-repeat: no-repeat;
}
#thumbs_opencloud a, .opencloud a {
   background-image: url(../images/portfolio/thumbs_opencloud.jpg);
   background-repeat: no-repeat;
}
#thumbs_mission a, .mission a {
   background-image: url(../images/portfolio/thumbs_mission.jpg);
   background-repeat: no-repeat;
}
#thumbs_foya a, .foya a {
   background-image: url(../images/portfolio/thumbs_foya2.jpg);
   background-repeat: no-repeat;
}
#thumbs_blow09 a, .blow09 a {
   background-image: url(../images/portfolio/thumbs_blow.jpg);
   background-repeat: no-repeat;
}
#thumbs_exposure a, .exposure a {
   background-image: url(../images/portfolio/thumbs_exposure.jpg);
   background-repeat: no-repeat;
}
#thumbs_openday a, .openday a {
   background-image: url(../images/portfolio/thumbs_openday2.jpg);
   background-repeat: no-repeat;
}
#thumbs_gw a, .gw a {
   background-image: url(../images/portfolio/thumbs_gw4.jpg);
   background-repeat: no-repeat;
}
#thumbs_moe_tki a, .moe_tki a {
   background-image: url(../images/portfolio/thumbs_moe_tki.jpg);
   background-repeat: no-repeat;
}
#thumbs_moe_dc a, .moe_dc a {
   background-image: url(../images/portfolio/thumbs_moe_dc.jpg);
   background-repeat: no-repeat;
}
#thumbs_pet_team a, .pet_team a {
   background-image: url(../images/portfolio/thumbs_pet_team.jpg);
   background-repeat: no-repeat;
}
#thumbs_activate a, .activate a {
   background-image: url(../images/portfolio/thumbs_activate.jpg);
   background-repeat: no-repeat;
}
#thumbs_id360 a, .id360 a {
   background-image: url(../images/portfolio/thumbs_id360.jpg);
   background-repeat: no-repeat;
}
#thumbs_nature a, .nature a {
   background-image: url(../images/portfolio/thumbs_nature.jpg);
   background-repeat: no-repeat;
}
#thumbs_billi a, .billi a {
   background-image: url(../images/portfolio/thumbs_billi.jpg);
   background-repeat: no-repeat;
}
#thumbs_myoga a, .myoga a {
   background-image: url(../images/portfolio/thumbs_myoga.jpg);
   background-repeat: no-repeat;
}
/* Tried out a div id so portfolio thumbs could be added dynamically to save space */
div#kaweka ul.portfolio_thumbnails a, .kaweka a {
   background-image: url(../images/portfolio/thumbs_kaweka.jpg);
   background-repeat: no-repeat;
}
div#exmss  ul.portfolio_thumbnails a, .exmss a {
   background-image: url(../images/portfolio/thumbs_exmss.jpg);
   background-repeat: no-repeat;
}
#thumbs_twelve_four a, .twelve_four a {
   background-image: url(../images/portfolio/thumbs_1224.jpg);
   background-repeat: no-repeat;
}
#thumbs_fcl a, .fcl a {
   background-image: url(../images/portfolio/thumbs_fcl.jpg);
   background-repeat: no-repeat;
}

/* Type Of Work Specific thumbnails */

.brands a {
   background-image: url(../images/portfolio/thumbs_brands.jpg);
   background-repeat: no-repeat;
}
.print_design a {
   background-image: url(../images/portfolio/thumbs_print.jpg);
   background-repeat: no-repeat;
}
.publications a {
   background-image: url(../images/portfolio/thumbs_pub.jpg);
   background-repeat: no-repeat;
}
.packaging a {
   background-image: url(../images/portfolio/thumbs_pack.jpg);
   background-repeat: no-repeat;
}
.web a {
   background-image: url(../images/portfolio/thumbs_web.jpg);
   background-repeat: no-repeat;
}
.signage a {
   background-image: url(../images/portfolio/thumbs_signage.jpg);
   background-repeat: no-repeat;
}
.photography a {
   background-image: url(../images/portfolio/thumbs_photo.jpg);
   background-repeat: no-repeat;
}
.illustration a {
   background-image: url(../images/portfolio/thumbs_illo.jpg);
   background-repeat: no-repeat;
}