@charset "utf-8";
/*
  FestivalChairs re-design (www.festivalchairs.nl, www.festivalchairs.nl/english/, www.festivalchairs.fr)
  Graphic design by Marcel Hellemons, www.digitalideas.nl
    XHTML/CSS & PHP code by Michel Bozgounov, www.optimiced.com
    Powered by IBM/Lenovo ThinkPad, Adobe Dreamweaver, Adobe Fireworks, Web Standards, and Jacobs Coffee ;)
  Version 1.1, 2009/Oct/16 - 2010/Jan/30
  (c)2010, All Rights Reserved
*/




/* Global
--------------------------------[O'd]-------------------------------- */

html { /* Force vertical scrollbar */
overflow-y: scroll;
height: 100%;
}

body {
font-family: Verdana, "Helvetica LT Std", "HelveticaNeueLT Std", Tahoma, Geneva, Arial, sans-serif;
font-size: 62.5%; /* 1em = 10px */
line-height: 1.4;
color: #424242;
background: #9573B4 url(../img/css/body-background.gif);
margin: 0;
padding: 0;
}

.clear {clear: both;}

.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display: inline-block;}
.clearfix {display: block;}

a:link {color: #6F4B8D; text-decoration: none; font-weight: bold;}
a:visited {color: #9573B4; text-decoration: none; font-weight: bold;}
a:hover {text-decoration: underline; font-weight: bold;}
a:active {text-decoration: underline; font-weight: bold;}
a:focus {text-decoration: underline; font-weight: bold;}

h1, h2, h3 {font-family: "Century Gothic", Verdana, Tahoma, sans-serif;;}
h1 {font-size: 2.4em;}
h2 {font-size: 1.7em;}
h3 {font-size: 1.7em; margin-bottom: .5em;}
h4 {font-size: 1.4em;}
h5 {font-size: 1.2em;}

blockquote {color: #777;}

p {font-size: 1.3em; margin-top: .5em; margin-bottom: .5em;}
p img {margin-top: 15px; margin-bottom: 5px;}

/* accessibility elements */
.access {
position: absolute;
left: -10000px;
top: auto;
overflow: hidden;
}






/* Header, Logo, Language Switch
--------------------------------[O'd]-------------------------------- */

#header {
width: 100%;
height: 74px;
border-bottom: 1px solid #000;
}
#h-inner {
width: 960px;
height: 75px;
margin: 0 auto -1px auto;
background-image: url(../img/css/header.png);
background-repeat: no-repeat;
position: relative;
}
  #page-in #header {background-color: #10B556;}
  #page-in #h-inner {background-position: 0 0;}
  #page-cr #header {background-color: #0AADD3;}
  #page-cr #h-inner {background-position: 0 -75px;}
  #page-sp #header {background-color: #E18D32;}
  #page-sp #h-inner {background-position: 0 -150px;}
  #page-de #header {background-color: #D1B23D;}
  #page-de #h-inner {background-position: 0 -225px;}
  #page-po #header {background-color: #88C712;}
  #page-po #h-inner {background-position: 0 -300px;}
  #page-ft #header {background-color: #A4A4FE;}
  #page-ft #h-inner {background-position: 0 -375px;}
  #page-ne #header {background-color: #7274D1;}
  #page-ne #h-inner {background-position: 0 -450px;}
  #page-pr #header {background-color: #E4007B;}
  #page-pr #h-inner {background-position: 0 -525px;}
  #page-co #header {background-color: #F68BE8;}
  #page-co #h-inner {background-position: 0 -600px;}

#header #logo {
position: absolute;
top: 8px;
right: 62px;
width: 180px;
height: 57px;
}
#header #logo h1 {
margin: 0;
}
#header #logo a {
width: 180px;
height: 57px;
display: block;
text-indent: -9999px;
overflow: hidden;
}

#lang {
position: absolute;
top: 4px;
right: 42px;
width: 100px;
height: 30px;
}
#lang ul {
margin: 0;
padding: 0;
list-style: none;
}
#lang li {
float: left;
display: block;
width: 26px;
height: 19px;
margin: 0 4px 0 0;
padding: 0;
text-indent: -9999px;
overflow: hidden;
}
#lang a {
float: left;
display: block;
background-image: url(../img/css/flags.png);
background-repeat: no-repeat;
width: 24px;
height: 17px;
border: 1px solid #D3D3D3;
}
#lang a:hover, #lang a:active, #lang a:focus {border: 1px solid #B5B5B5;}
#lang #l-en a {background-position: 1px 1px;}
#lang #l-fr a {background-position: -51px 1px;}
#lang #l-nl a {background-position: -25px 1px;}






/* Container, Wrap
--------------------------------[O'd]-------------------------------- */

#container {
width: 866px;
margin: 0 auto;
padding: 0 47px 0 47px;
background-image: url(../img/css/faux-columns-alpha-960.png); /* all browsers (note: ie6 has separate images) */
background-repeat: repeat-y;
position: relative;
}
  #page-in #container {background-position: 0 0;}
  #page-cr #container {background-position: -960px 0;}
  #page-sp #container {background-position: -1920px 0;}
  #page-de #container {background-position: -2880px 0;}
  #page-po #container {background-position: -3840px 0;}
  #page-ft #container {background-position: -4800px 0;}
  #page-ne #container {background-position: -5760px 0;}
  #page-pr #container {background-position: -6720px 0;}
  #page-co #container {background-position: -7680px 0;}






/* Sidebar (navigation, flash box on index & specifications pages]
--------------------------------[O'd]-------------------------------- */

#sidebar {
float: left;
width: 245px; /* 231 -> 245 */
margin: 0 0 0 20px;
padding: 0;
position: relative; /* needed by IE6 to overlap header! */
}






/* Navigation
--------------------------------[O'd]-------------------------------- */

#nav {
margin: 0;
padding: 0 0 253px 0; /* leaves exact space for graphic element below navigation */
background-image: url(../img/css/nav-bottom.png);
background-repeat: no-repeat;
}
#nav ul {
position: relative;
margin: -48px auto 0 24px;
padding: 0;
list-style: none;
}
#nav li {
margin: 0;
padding: 0;
float: left;
display: block;
width: 197px; /* for IE7, must match < #nav li a > !! */
height: 24px; /* for IE7, must match < #nav li a > !! */
line-height: 2.4em;
}
#page-co #nav li#co { /* Contact pages, sub-menu */
width: 197px;
height: auto;
}

#nav li a {
color: #F5F2F9;
text-decoration: none;
display: block;
float: left;
margin: 0;
padding: 0;
width: 197px;
height: 24px;
position: relative;
overflow: hidden; /* prevents dotted outline to flow to the left of page */
background-color: #A07EBF; /* if images are not available: > */
color: #FFF;
font-family: Arial, Helvetica, Verdana, Geneva, sans-serif;
font-weight: bold;
text-indent: 10px;
font-size: 13px;
}
#nav li a:hover, #nav li a:focus {
background-color: #AE92C9; /* < if images are not available: */
}

/* Contact sub-pages */
#nav ul ul {
margin: 0;
padding: 0;
float: left;
width: 197px;
height: auto;
list-style: none;
font-family: Arial, Tahoma, Helvetica, sans-serif;
font-weight: bold;
font-size: 0.9em;
}
#nav li li {
height: auto;
}
#nav ul ul a {
width: 162px;
padding: 2px 10px 2px 25px;
border: 0;
}
 
#page-co #nav li li a {
color: #FDD4F8;
background-color: #CB60BD;
text-indent: 0;
font-family: Verdana, Tahoma, Arial, sans-serif; 
font-size: 1.3em;
line-height: 1.3em;
height: auto;
font-weight: normal;
padding-bottom: 4px;
}
  #page-co #nav li li a {color: #FDD4F8; text-indent: 0;}
  #page-co #nav li li a:hover, #page-co #nav li li a:focus {color: #FFF;}
#page-co #nav ul ul a:hover, #page-co #nav ul ul a:active, #page-co #nav ul ul a:focus, #page-co #nav ul ul li.current a {
background: #D57DCA !important; 
color: #FFF;
}

#nav li#in a {background-color: #10B556;}
#nav li#cr a {background-color: #0AADD3;}
#nav li#sp a {background-color: #E18D32;}
#nav li#de a {background-color: #D1B23D;}
#nav li#po a {background-color: #88C712;}
#nav li#ft a {background-color: #A4A4FE;} 
#nav li#ne a {background-color: #7274D1;}
#nav li#pr a {background-color: #E4007B;}
#nav li#co a {background-color: #F68BE8;}

#nav li a span {cursor: pointer; background: url(../img/css/nav.png); position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

#nav li#in a span {background-position: -197px 0;}
#nav li#in a:hover span, #nav li#in a:active span, #nav li#in a:focus span {background-position: 0 0;}
#page-in #nav li#in a span {background-position: -394px 0;}
  #nav li#cr a span {background-position: -197px -24px;}
  #nav li#cr a:hover span, #nav li#cr a:active span, #nav li#cr a:focus span {background-position: 0 -24px;}
  #page-cr #nav li#cr a span {background-position: -394px -24px;}
#nav li#sp a span {background-position: -197px -48px;}
#nav li#sp a:hover span, #nav li#sp a:active span, #nav li#sp a:focus span {background-position: 0 -48px;}
#page-sp #nav li#sp a span {background-position: -394px -48px;}
  #nav li#de a span {background-position: -197px -72px;}
  #nav li#de a:hover span, #nav li#de a:active span, #nav li#de a:focus span {background-position: 0 -72px;}
  #page-de #nav li#de a span {background-position: -394px -72px;}
#nav li#po a span {background-position: -197px -96px;}
#nav li#po a:hover span, #nav li#po a:active span, #nav li#po a:focus span {background-position: 0 -96px;}
#page-po #nav li#po a span {background-position: -394px -96px;}
  #nav li#ft a span {background-position: -197px -120px;}
  #nav li#ft a:hover span, #nav li#ft a:active span, #nav li#ft a:focus span {background-position: 0 -120px;}
  #page-ft #nav li#ft a span {background-position: -394px -120px;}
#nav li#ne a span {background-position: -197px -144px;}
#nav li#ne a:hover span, #nav li#ne a:active span, #nav li#ne a:focus span {background-position: 0 -144px;} 
#page-ne #nav li#ne a span {background-position: -394px -144px;}
  #nav li#pr a span {background-position: -197px -168px;}
  #nav li#pr a:hover span, #nav li#pr a:active span, #nav li#pr a:focus span {background-position: 0 -168px;}
  #page-pr #nav li#pr a span {background-position: -394px -168px;}
#nav li#co a span {background-position: -197px -192px;}
#nav li#co a:hover span, #nav li#co a:active span, #nav li#co a:focus span {background-position: 0 -192px;}
#page-co #nav li#co a span {background-position: -394px -192px;}

  #page-in #nav {background-position: -9000px bottom;} /* no image below nav on index page */
  #page-cr #nav {background-position: 0 bottom;}
  #page-sp #nav {background-position: -245px bottom;}
  #page-de #nav {background-position: -490px bottom;}
  #page-po #nav {background-position: -735px bottom;}
  #page-ft #nav {background-position: -980px bottom;}
  #page-ne #nav {background-position: -1225px bottom;}
  #page-pr #nav {background-position: -1470px bottom;}
  #page-co #nav {background-position: -1715px bottom;}

/* Flash movies in #sidebar on index page & specifications page */
#page-in #sidebar #s-flash {
margin: -242px 4px 0 0;
width: auto;
text-align: center;
height: 242px;
}
#page-sp #sidebar #s-flash {
margin: -242px 4px 10px 0;
width: auto;
text-align: center;
height: 242px;
}

  /* Address block in sidebar */
  #sidebar #address {margin: 2em; text-align: center;}
  #sidebar #address strong {font-family: Arial, Helvetica, sans-serif; font-size: 1.3em;}
  #sidebar #address p {font-family: Verdana, Geneva, sans-serif; font-size: 1.1em;}
  #sidebar #address p a {color: #FFF;}






/* Main (content)
--------------------------------[O'd]-------------------------------- */

#main {
float: left;
width: 545px; /* border-right: 1px solid green; */
margin: 30px 0 0 7px;
padding: 0 10px 10px 10px;
background: #FFF;
color: #444;
min-height: 625px; /* takes into account height of #portfolio-highlight box (see Portfolio sub-pages) */
}
#main p, #main ul, #main ol, #main blockquote {
font-size: 1.3em;
}
#main blockquote p {
font-size: 1em;
}

#main .align-l {
display: block;
float: left;
margin: 0 8px 8px 0;
}
#main .align-r {
display: block;
float: right;
margin: 0 0 8px 8px;
}

#main a img {
border: 1px solid #CAB9D9;
margin: 0;
padding: 3px;
vertical-align: bottom;
}
#main a:hover img {
border: 1px solid #9573B4;
}

#main h2 {
font-family: "Century Gothic", Verdana, Tahoma, sans-serif;
font-weight: bold;
margin-bottom: 1.5em;
}
  #page-in #main h2 {color: #10B556;}
  #page-cr #main h2, #page-cr #main h3 {color: #0AADD3;} /* all titles on creative page are same color */
  #page-sp #main h2 {color: #E18D32;}
  #page-de #main h2 {color: #D1B23D;}
  #page-po #main h2 {color: #88C712;}
  #page-ft #main h2 {color: #A4A4FE;}
  #page-ne #main h2 {color: #7274D1;}
  #page-pr #main h2 {color: #E4007B;}
  #page-co #main h2 {color: #F68BE8;}

#page-po #main #page-b {
margin: 20px 20px 20px 0;
font-size: 1.3em;
font-weight: bold;
}
#page-po #main #page-b a {
color: #C262DE;
text-decoration: none;
}
#page-po #main #page-b a:hover {
color: #C262DE;
text-decoration: underline;
}

#main ul {
font-size: 1.3em;
line-height: 1.4em;
}

/* contact - articles styling */
#page-co #main ol {
list-style-type: lower-alpha;
}






/* Footer
--------------------------------[O'd]-------------------------------- */

#footer {
width: 960px;
height: 50px;
margin: 0 auto;
background-image: url(../img/css/footer-alpha.png);
background-repeat: no-repeat;
clear: both;
}
  #page-in #footer {background-position: 0 0;}
  #page-cr #footer {background-position: 0 -50px;}
  #page-sp #footer {background-position: 0 -100px;}
  #page-de #footer {background-position: 0 -150px;}
  #page-po #footer {background-position: 0 -200px;}
  #page-ft #footer {background-position: 0 -250px;}
  #page-ne #footer {background-position: 0 -300px;}
  #page-pr #footer {background-position: 0 -350px;}
  #page-co #footer {background-position: 0 -400px;}

#footer p {
margin: 0 60px 0 270px;
padding: 15px 5px;
color: #D5C7E2;
text-align: right;
font-size: 11px;
}






/* Individual pages & styles
--------------------------------[O'd]-------------------------------- */

/* index */
#img-random {
float: right;
margin: 10px -50px 10px 20px;
padding: 0;
position: relative;
}
#img-random span {
position: absolute;
top: 0;
right: 0;
z-index: 1000;
background: url(../img/css/index-rotator.png) 0 0 no-repeat;
width: 116px;
height: 216px;
}
#img-random img {
margin: 3px 3px 0 0;
}


/* used for some images in news section */
#main .top-m {
margin-top: -60px; 
}


/* news page */
.item {
margin: 0 0 30px 0;
padding: 0 0 10px 0;
clear: both; /* clears any floated elements within the news item */
}
.item h3 {
margin-bottom: 0;
font-family: "Century Gothic", Georgia, sans-serif;
color: #505050;
}
.item p.meta, .meta {
margin: 0 30em 0 0;
padding: 0 0 5px 0;
font-style: italic;
color: #AAA;
}
.item .meta a {
font-weight: normal;
color: #AAA !important;
font-style: normal;
}
.item .meta a:hover {
color: #9573B4 !important;
}
.item .meta a {
visibility: hidden;
}
.item .meta:hover a {
visibility: visible;
}

/* Main /portfolio/ page (colorful squares) */
#pw {
width: 480px;
margin: 15px 0;
padding: 0 20px 0 0;
/*background: url(../img/portfolio/main/portfolio-nl-dates.gif) top right no-repeat;  can be disabled, if needed */
}
#pw ul {
list-style: none;
margin: 0;
padding: 0;
}
#pw li {
margin: 0;
padding: 0;
display: block;
float: left;
width: 80px;
height: 80px;
overflow: hidden;
position: relative;
}
#pw a {
display: block;
float: left;
width: 80px;
height:80px;
overflow: hidden;
color: #000;
font-weight: normal;
line-height: 1.3em;
background: #EEE;
text-align: left;
font-size: 11px;
}
#pw a:hover {
background: #FFF;
}
#pw a img {
position: absolute;
left: -80px;
margin: 0;
padding: 0;
border: 0;
}
#pw a:hover img {
border: 0;
margin: 0;
left: 0;
}
#pw span {position: absolute; top: 0; left: 0;}

  /* Styling of the empty colorful squares; more colors & classes can be added later */
  .rose {background: #F68BE8;}
  .pale-red {background: #E4007B;}
  .light-green {background: #88C712;}
  .dark-green {background: #10B556;}
  .light-blue {background: #0AADD3;}
  .blue {background: #7274D1;}
  .beige {background: #D1B23D;}
  .sand-brown {background: #E18D32;}

/* portfolio - subpages are narrower (only the main Portfolio page is standard width), so class "clients" is added dinamically */
.clients #main {
width: 500px;
}

/* portfolio subpages - divider in main title between Portfolio >> Subtitle */
h2 em {
color: #CCC;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-style: normal;
}
h2 a, h2 a:visited {color: #9573B4; border-bottom: 2px solid #9573B4; text-decoration: none;}
h2 a:hover {color: #9573B4; border-bottom: 2px solid #E9E2EF; text-decoration: none;}

/* portfolio - link at the bottom: "back to portfolio" */
.back {
margin-top: 30px;
margin-bottom: 15px;
}

/* portfolio - h3 titles */
#page-po h3 {
margin-bottom: 0;
}

/* portfolio - best clients AJAX scroll box at the right */
#portfolio-highlight {
position: absolute;
right: 0;
top: 50px;
width: 95px;
height: 510px;
background: url(../img/css/portfolio-highlight-alpha.png) top right no-repeat;
line-height: 50px;
margin: 0;
padding: 50px 0 0 0;
}
#portfolio-highlight ul {
list-style: none;
margin: 0;
padding: 0 5px 0 0;
background: #FFF;
height: 510px;
overflow: hidden; /*prevents "jumping" effect while jCarousel loads! */
}
#portfolio-highlight li, .jcarousel-list li, .jcarousel-item {
margin: 0 0 14px 0;
padding: 0;
float: left;
display: block;
width: 88px;
height: 88px;
/* We set the width/height explicitly (no width/height causes infinite loops). */
}
.b {position: absolute; bottom: -40px; right: 0; width: 90px; height: 50px; background: url(../img/css/portfolio-highlight-alpha.png) bottom right no-repeat;}

  #portfolio-highlight img {vertical-align: bottom; border: 0;}
  #portfolio-highlight a img {border: 1px solid #FFF;}
  #portfolio-highlight a:hover img {border: 1px solid #CAB9D9;}
  #portfolio-highlight .current img {border: 1px solid #CAB9D9;}

/* pricelist table */
#pricelist {
font-size: 1.3em;
border-collapse: collapse;
width: auto;
}
#pricelist td {
padding: 3px 10px;
margin: 0;
}
#pricelist .p1 {width: 80px;}
#pricelist .p2 {width: 70px;}
#pricelist .p3 {width: 5px;}
#pricelist .p4 {width: 95px;}
#pricelist .p5 {width: 90px;}
#pricelist .p6 {width: 5px;}
#pricelist .p7 {width: 65px;}
#pricelist .p8 {width: 65px;}

#pricelist p {
font-size: 1em;
}

#pricelist .fl {background: #10B556; color: #FFF; text-align: center;}
#pricelist .flp {background: #65F3A1; color: #000; text-align: right;}
 #pricelist .of {background: #0AADD3; color: #FFF; text-align: center}
 #pricelist .ofp {background: #88DEF2; color: #000; text-align: right;}
  #pricelist .uv {background: #D1B23D; color: #FFF; text-align: center;}
  #pricelist .uvp {background: #ECD376; color: #000; text-align: right;}
   #pricelist .st {background: #999999; color: #FFF; text-align: center;}
   #pricelist .stp {background: #CCCCCC; color: #000; text-align: right;}
.note-fl {font-weight: bold; color: #10B556;}
.note-of {font-weight: bold; color: #0AADD3;}
.note-uv {font-weight: bold; color: #D1B23D;}
.note-st {font-weight: bold; color: #999999;}

/* contact form on "Contact" page */
form {
margin: 0;
padding: 0;
width: 545px;
}
form fieldset {
border: 0;
padding: 10px;
margin: 0;
}
form legend {
display: none
}
form label {
display: block;
float: left; 
width: 160px;
padding: 0;
margin: 3px 0;
text-align: right;
font-size: 1.3em;
font-weight: bold;
line-height: 1.7em;
}
form input, form select, form textarea {
width: 280px;
margin: 3px 0 3px 10px;
font-size: 1.2em;
border: 1px solid #CAB9D9;
padding: 2px;
font-size: 1.3em;
font-family: Courier new, Verdana, Geneva, sans-serif;
}
form br {
clear: left;
}
form input#verstuur {
margin-left: 170px;
font-weight: bold;
font-family: Verdana, Tahoma, Helvetica, sans-serif;
background: #CAB9D9;
color: #FFF;
width: 280px;
}
form input#verstuur:hover, form input#verstuur:focus {
background: #9573B4;
}
form input:hover, form input:focus, form select:hover, form select:focus, form textarea:hover, form textarea:focus {
border: 1px solid #9573B4;
}
.submit-button, .submit-button:visited {
background: #222;
display: inline-block;
padding: 3px 10px 4px 10px; 
color: #fff;
text-decoration: none;
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}
  .submit-button:hover {background-color: #111; color: #fff;}
  .submit-button:active {top: 1px;}
  .submit-button, .submit-button:visited {font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25);}






/*
    ColorBox Core Style
    The following rules are the styles that are consistent between themes.
    Avoid changing this area to maintain compatability with future versions of ColorBox.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; overflow:hidden;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

/* 
    Example user style
    The following rules are ordered and tabbed in a way that represents the
    order/nesting of the generated HTML, so that the structure is easier to understand.
*/
#cboxOverlay{background:url(../img/css/colorbox/overlay.png) 0 0 repeat;}
#colorbox{}
    #cboxTopLeft{width:21px; height:21px; background:url(../img/css/colorbox/controls.png) -100px 0 no-repeat;}
    #cboxTopRight{width:21px; height:21px; background:url(../img/css/colorbox/controls.png) -129px 0 no-repeat;}
    #cboxBottomLeft{width:21px; height:21px; background:url(../img/css/colorbox/controls.png) -100px -29px no-repeat;}
    #cboxBottomRight{width:21px; height:21px; background:url(../img/css/colorbox/controls.png) -129px -29px no-repeat;}
    #cboxMiddleLeft{width:21px; background:url(../img/css/colorbox/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(../img/css/colorbox/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(../img/css/colorbox/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(../img/css/colorbox/border.png) 0 -29px repeat-x;}
    #cboxContent{background:#fff;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0px; background:url(../img/css/colorbox/controls.png) -75px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious.hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(../img/css/colorbox/controls.png) -50px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext.hover{background-position:-50px -25px;}
        #cboxLoadingOverlay{background:url(../img/css/colorbox/loading_background.png) center center no-repeat;}
        #cboxLoadingGraphic{background:url(../img/css/colorbox/loading.gif) center center no-repeat;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(../img/css/colorbox/controls.png) -25px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose.hover{background-position:-25px -25px;}

/*
    The following fixes png-transparency for IE6.  
    It is also necessary for png-transparency in IE7 & IE8 to avoid 'black halos' with the fade transition
    
    Since this method does not support CSS background-positioning, it is incompatible with CSS sprites.
    Colorbox preloads navigation hover classes to account for this.
    
    !! Important Note: AlphaImageLoader src paths are relative to the HTML document,
    while regular CSS background images are relative to the CSS document.
*/
.cboxIE #cboxTopLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/img/css/colorbox/internet_explorer/borderTopLeft.png, sizingMethod='scale');}
.cboxIE #cboxTopCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/img/css/colorbox/internet_explorer/borderTopCenter.png, sizingMethod='scale');}
.cboxIE #cboxTopRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/img/css/colorbox/internet_explorer/borderTopRight.png, sizingMethod='scale');}
.cboxIE #cboxBottomLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/img/css/colorbox/internet_explorer/borderBottomLeft.png, sizingMethod='scale');}
.cboxIE #cboxBottomCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/img/css/colorbox/internet_explorer/borderBottomCenter.png, sizingMethod='scale');}
.cboxIE #cboxBottomRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/img/css/colorbox/internet_explorer/borderBottomRight.png, sizingMethod='scale');}
.cboxIE #cboxMiddleLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/img/css/colorbox/internet_explorer/borderMiddleLeft.png, sizingMethod='scale');}
.cboxIE #cboxMiddleRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/img/css/colorbox/internet_explorer/borderMiddleRight.png, sizingMethod='scale');}






/* jcarousel CSS
--------------------------------[O'd]-------------------------------- */

/* --- main CSS --- */
/* This <div> element is wrapped by jCarousel around the list and has the classname "jcarousel-container". */
.jcarousel-container {position: relative;}
.jcarousel-clip {z-index: 2; padding: 0; margin: 0; overflow: hidden; position: relative;}
.jcarousel-list {z-index: 1; overflow: hidden; position: relative; top: 0; left: 0; margin: 0; padding: 0;}
.jcarousel-list li, .jcarousel-item {
/* set in #portfolio-highlight section */
/* We set the width/height explicitly. No width/height causes infinite loops. */
}

/* The buttons are added dynamically before the <ul> list (inside the <div> described above) & have classes "jcarousel-next"/"jcarousel-prev". */
.jcarousel-next {z-index: 3; display: none;}
.jcarousel-prev {z-index: 3; display: none;}

/* --- "tango" skin CSS --- */
.jcarousel-skin-tango .jcarousel-container {background: url(/img/css/portfolio-highlight-alpha.png) bottom right no-repeat;}
.jcarousel-skin-tango .jcarousel-container-vertical {width: 90px; height: 520px; padding: 0 5px 30px 0;}
.jcarousel-skin-tango .jcarousel-clip-vertical {width: 95px; height: 510px;}
.jcarousel-skin-tango .jcarousel-item {width: 88px; height: 88px; margin: 0 0 10px 0; padding: 0 5px 0 0;}
.jcarousel-skin-tango .jcarousel-item-vertical {/* margin-bottom: 10px; */}
.jcarousel-skin-tango .jcarousel-item-placeholder {background: #FFF; color: #000;}

/* Vertical Buttons */
.jcarousel-skin-tango .jcarousel-next-vertical {position: absolute; bottom: 5px; left: 30px; width: 32px; height: 32px; cursor: pointer; background: url(/img/css/portfolio-next.png) no-repeat 0 0;}
.jcarousel-skin-tango .jcarousel-next-vertical:hover {background-position: 0 -32px;}
.jcarousel-skin-tango .jcarousel-next-vertical:active {background-position: 0 -64px;}
.jcarousel-skin-tango .jcarousel-next-disabled-vertical,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {cursor: default; background-position: 0 -96px;}
.jcarousel-skin-tango .jcarousel-prev-vertical {position: absolute; top: -45px; left: 30px; width: 32px; height: 32px; cursor: pointer; background: url(/img/css/portfolio-previous.png) no-repeat 0 0;}
.jcarousel-skin-tango .jcarousel-prev-vertical:hover {background-position: 0 -32px;}
.jcarousel-skin-tango .jcarousel-prev-vertical:active {background-position: 0 -64px;}
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {cursor: default; background-position: 0 -96px;}






/* Notes & Ideas
--------------------------------[O'd]-------------------------------- */

/*
  http://superfluousbanter.org/archives/2004/05/navigation-matrix-reloaded/
  http://www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/
  http://css-tricks.com/css-image-replacement/
  http://levinalex.net/files/20030809/alternatefir.html
  http://sorgalla.com/jcarousel/
  http://colorpowered.com/colorbox/
*/