@import url(lib/reset.css);
@import url(lib/layout.css);

/* =baseline */
html
{
	/* Emulate position: fixed in IE 6  (force re-calculation of dynamic expression before scroll event)*/
	_background-image: url(about:blank);
	_background-attachment:fixed;
}

body 
{
	width: 100%;
	background-color: #fff;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#content
{
	padding-bottom: 0;
}

#footer
{
	height: 62px;
}

#footer img
{
	margin: 19px 0 0 14px;
	*float: left; /* For IE 6 & 7 */
}

/* TODO Where is the right place to put this stuff? */
#footer .site-info
{
	float: right;
	margin: 27px 17px 0 0;
}

#footer p
{
	color: #808080;
	display: inline;
}

#footer a
{
	color: #fff;
}

#footer a:link,
#footer a:visited
{
	text-decoration: underline;
}

#footer a:focus
{
	outline: 1px dotted #fff;
}

#footer a:hover
{
	text-decoration: none;
}

#footer a:active
{
	outline: 1px dotted #fff;
}

/**
 * H1 is the logo for the site
 */
h1
{
	background: transparent url(../images/logo.gif) 50% 50% no-repeat;
	height: 4em;
	width: 50px;
	float: left;
	padding: 1em 25px;
	background-color: #ff0000;
}

h1 a
{
	display: block;
	height: 40px;
	text-indent: -9999em;
}

/**
 * H2s are used only to provide structural information to screen readers and are hidden from visual display
 */
h2 {
	position: absolute;
	left: -9999em;
}

h3 
{
	background-color: #000;
	padding: 4px 0 3px 5px;
	color: #fff;
	font-weight: bold;
	font-size: 1.4em;
}

/* =page grid component (see module component as well) */
#navigation
{
	margin: 0 auto;
	width: 970px;
	position: relative;
	*position: static; /* For IE 6 & 7, which reset z-index relative to a positioned parent */
}

.mod.navigation
{
	position: fixed;
	top: 0;
	width: auto;
	z-index: 200;
	/* Emulate position: fixed in IE 6 */
	*zoom: 1;
	_position: absolute; 
	_top: expression(eval(document.documentElement.scrollTop));
	_bottom: auto;
}

#language-selection
{
	position: absolute;
	z-index: 199;
	top: 0;
	right: 0;
	*zoom: 1;
	*right: 146px; /* For IE */
	*width: 107px; /* For IE */
}

#about,
#blog,
#support,
#company
{
	width: 198px;
	margin-right: 29px;
	float: left;
}

#company
{
	margin-right: 0;
}

#company img.left,
#support img.left
{
   margin-left: -5px;
}

#map
{
  width: 878px;
  height: 700px;
	border: 1px #a2a2a2 solid;
  background: #e5e3df;
}

#help-cards
{
	position: relative;
	margin: 20px 0 0 5px;
}

#footer
{
	width: 960px;
	margin: 0 auto;
	background-color: #000;
	color: #fff;
	position: static; /* Reset the positioning in layout.css */
	_margin-top: -62px; /* For IE */
}

/* =module component */
.mod-wrapper
{
  background: transparent none 50% top no-repeat;
	zoom: 1; /* For IE */
}

/**
 * Apply specific images and padding on #ids
 */
#cred-deck
{
	padding-top: 18px;
	height: 1441px;
	background: transparent url(../images/bg/cred-deck.jpg) repeat-y center top;
}

#phones
{
	height: 2307px;
	background: transparent url(../images/bg/phones.jpg) repeat-y center top;
}

#more
{
	height: 2047px;
	background: transparent url(../images/bg/more.jpg) repeat-y center top;
}

#art
{
	background: transparent url(../images/bg/art.jpg) repeat-y center top;
	height: 1185px;
	margin-bottom: -62px; /* The height of #footer */
	_margin-bottom: 0;
}

.mod 
{
	width: 984px;
	margin: 0 auto;
}

.mod .header
{
	background: transparent url(../images/bg/module.png) -984px top no-repeat;
	height: 24px;
}

.mod .footer
{
	background: transparent url(../images/bg/module.png) 0 100% no-repeat;
	height: 24px;
}

.mod .footer span
{
	display: block;
	background-color: #fff;
	height: 12px;
	margin: 0 12px;
}

.mod .content-wrapper
{
	background: transparent url(../images/bg/module.png) -1968px top repeat-y;
	_zoom: 1;
}

.mod .content
{
	padding: 28px 40px 28px; /* 40px minus the height of .mod .footer span */
	margin: 0 12px;
	background-color: #fff;
	zoom: 1; /* For IE */
}

.mod .content:after
{
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}

.mod.navigation
{
	_width: 335px;
}

.mod.navigation .content-wrapper
{
	background: transparent url(../images/bg/main-nav.png) -327px 0 repeat-y;
}

.mod.navigation .content
{
	margin: 0 0 0 5px;
	padding: 0 5px 0 0;
	background: transparent url(../images/bg/main-nav.png) right 0 repeat-y;
}

.mod.navigation .footer
{
	margin: 0;
	padding: 0 5px;
	height: 5px;
	background: transparent url(../images/bg/main-nav.png) 0 -5px no-repeat;
}

.mod.navigation .footer span
{
	background-color: #ff0000;
	height: 5px;
	margin: 0 5px;
}

.mod.language-selection 
{
	width: auto;
}

.mod.language-selection .content-wrapper
{
	background: transparent url(../images/bg/main-nav.png) -327px 0 repeat-y;
}

.mod.language-selection .content
{
	margin: 0 0 0 5px;
	padding: 0 5px 0 0;
	background: transparent url(../images/bg/main-nav.png) -332px 0 repeat-y;
}

.mod.language-selection .footer
{
	padding: 0 5px;
	margin: 0;
	height: 5px;
	background: transparent url(../images/bg/main-nav.bg) 0 -5x no-repeat;
}

#language-pointer
{
	position: absolute;
	display: block;
	z-index: 199;
	top: 0;
	right: 113px;
	*right: 259px;
	*zoom: 1;
	display: none;
}

#language-pointer p {
	color: #fff;
	background:url("../images/bg/lang-pointer.png") no-repeat right top #000000;
	display:block;
	font-size:1em;
	font-weight:bold;
	padding:10px 25px 10px 10px;
	text-transform:uppercase;
}

#language-pointer p span {
	color: #9c9c9c;
}

/* =navigation component */
.navigation.main
{
	float: left;
	background-color: #ff0000;
	_position: static; /* For IE */
	_width: 225px;
}

.navigation.main:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}

.navigation.main li {
	display: block;
	float: left;
	height: 6em; /* 60px */
	border-left: 1px solid #ff5959;
	text-align: center;
}

.navigation.main a
{
	font-size: 1em; /* 10px */
	text-transform: uppercase;
	font-weight: bold;
	display: block;
	padding: 0 20px;
	text-decoration: none;
	line-height: 6em; /* Set to height of .navigation.main li to vertically center */
}

.navigation.main a:link,
.navigation.main a:visited
{
	color: #fff;
}

.navigation.main a:focus
{
	outline: 1px dotted #000;
	background-image: none;
}

.navigation.main a:hover
{
	background-color: #fff;
	color: #ff0000;
	
}

.navigation.main a:active,
.navigation.main a.selected
{
	background-color: #000;
	color: #fff;
}

/* =language selector component */
.language-selector
{
	float: right;
	width: 107px;
}

.language-selector li 
{
	color: #fff;
	display: none;
}

.language-selector span
{
	background: #000 url(../images/bg/lang-selector-uk.gif) 15px 47% no-repeat;
	padding-left: 32px;
}

.language-selector a
{
	font-size: 1em;
	text-transform: uppercase;
	font-weight: bold;
	display: block;
	text-decoration: none;
	padding: 10px 0 15px 32px;
	background: #000 url(../images/bg/lang-selector-uk.gif) 15px 47% no-repeat;
	border-top: 1px solid #c8c8c8;
}

.language-selector .uk 
{
	background-image: url(../images/bg/lang-selector-uk.gif);
}

.language-selector .it 
{
	background-image: url(../images/bg/lang-selector-it.gif);
}

.language-selector .in 
{
	background-image: url(../images/bg/lang-selector-in.gif);
}

.language-selector .aus
{
	background-image: url(../images/bg/lang-selector-aus.gif);
}

.language-selector .fca, .language-selector .eca
{
    background-image: url(../images/bg/lang-selector-canada.gif);
}

.language-selector a:link,
.language-selector a:visited
{
	color: #fff;
}

.language-selector a:focus
{
	outline: 1px dotted #000;
}

.language-selector a:hover
{
	text-decoration: underline;
}

.language-selector a:active
{
	
}

.language-selector .current
{
	background: #000 url(../images/bg/lang-selector.gif) 92px 50% no-repeat;
	display: block;
	padding: 10px 15px 10px 0;
	font-size: 1em;
	text-transform: uppercase;
	font-weight: bold;
}

.language-selector .active
{

}

/* =tabbed navigation component */
.navigation.tabs 
{
	zoom: 1; /* For IE */
	_position: static; /* For IE */
	_z-index: 0; /* For IE */
	width: 880px;
	margin-left: 5px;
}

.navigation.tabs:after /* Clears the contained floats */
{ 
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}

.navigation.tabs li 
{
	float: left;
	width: 292px;
	border-right: 1px solid #b1b1b1;
	border-top: 1px solid #b1b1b1;
	position: relative;
	cursor: pointer;
	min-height: 240px;
	background: transparent url(../images/bg/tab.gif) left bottom repeat-x;
	_height: 240px;
	_display: inline; /* For IE6 */
}

.navigation.tabs .active
{
	background-image: none;
}

.navigation.tabs li:first-child,
.navigation.tabs li.first
{
	border-left: 1px solid #b1b1b1;
}

.navigation.tabs li *
{
	-moz-opacity: 0.80; /* older Gecko-based browsers */
	opacity: 0.80;
}

.navigation.tabs .active *
{
	-moz-opacity: 1; /* older Gecko-based browsers */
	opacity: 1;
}

.navigation.tabs  #buy-link {
	display: none;
}
.navigation.tabs .active #buy-link {
	display: block;
}

.navigation.tabs  .more-link {
	display: block;
}
.navigation.tabs .active .more-link {
	display: none;
}

.navigation.tabs .wrapper
{
	position: absolute;
	top: 50%;
	right: 19px;
	_top: 30%; /* For IE 6 */
	zoom: 1; /* For IE */
}

.navigation.tabs .caption
{
	float: left;
	width: 150px;
	position: relative;
	text-align: center;
	margin-top: -25%;
	*margin-top: -12%; /* For IE 7 */
	_margin-top: 0; /* For IE 6 */
	_position: static; /* For IE 6 */
}

.navigation.tabs li h3
{
	background-color: transparent;
	color: #000; 
	margin-top: 100px;
	width: 132px;
	font-size: 2em;
	line-height: 1.25;
	margin: 0 auto 0.6em;
	*color: #b5b5b5; /* For IE 6 & 7 */
}

.navigation.tabs .active h3
{
	*color: #000; /* For IE 6 & 7 */
}

.navigation.tabs li .img-wrapper
{
	position: absolute;
	bottom: 25px;
	text-align: center;
	width: 142px;
}

/* =thumbnail navigation component */
.navigation.thumbnails 
{
	zoom: 1;
	margin-left: 28px;
	_position: static; /* For IE */
	_z-index: 0; /* For IE */
	width: auto;
	_top: 0; /* For IE */
}

.navigation.thumbnails:after
{
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}

.navigation.thumbnails li 
{
	float: left;
	margin-left: 5px;
}

.navigation.thumbnails li img
{
	width: 85px;
}

/* The first thumbnail */
#art-thumb-1
{
	margin-left: 0;
}

/*.navigation.thumbnails li a
{
	position: relative;
	z-index: 300;
}*/

#art .navigation.thumbnails
{
	position: relative;
	zoom: 1; /* For IE 6 & 7 */
}

#cred-deck .thumbnails
{
	height: 48px;
}

#art .thumbnails
{
	position: relative;
	/*overflow: hidden;
	height: 50px;
	width: 855px;*/
	width: 865;
	margin-left: 33px;
}

div.artist-thumb-text {
	padding-top: 4px; 
	color: #6b6b6b; 
	font-size: 1.2em;
}

div.art-thumb {

	width: 168px; 
	height: 176px; 
	overflow: hidden; 
	margin: 10px 0; 
	padding: 4px 4px 4px 0px; 
	float:left; 
	text-align: left;
}

#art .thumbnails .items
{
	width: 20000em; 
	position: absolute;
	clear: both;
}

#art-thumbnail-carousel
{
	position: relative;
	zoom: 1; /* For IE 6 */
}

#art-thumbnail-carousel .top
{
	background: transparent url(../images/bg/thumbnails-left.png) left top no-repeat;
	position: absolute;
	left: 33px;
	top: -11px;
	height: 73px;
	width: 13px;
}

#art-thumbnail-carousel .tail
{
	background: transparent url(../images/bg/thumbnails-right.png) right top no-repeat;
	position: absolute;
	right: 40px;
	top: -11px;
	height: 73px;
	width: 13px;
}

/* =carousel component */
.carousel
{
	position: relative; 
	overflow: hidden; 
	/*width: 860px;*/
	width: 900px;
	height: 560px;
}

.carousel .items
{
	width: 20000em; 
	position: absolute;
	clear: both;
}

.slide
{
	float: left;
	width: 900px;
	_display: inline; /* For IE 6 */
	position: relative;
}

.slide a
{
	display: block;
/*	position: absolute;*/
	width: 900px; /* The width of the slide images */
	height: 480px; /* The height of the slide images */
	top: 0;
	left: 0;
	*background-color: transparent; /* For IE 6 & 7 */
/*	filter:alpha(opacity=0); /* For IE 6 & 7 */*/
}

/* =carousel pager component */
.pager
{
	_width: 100%; /* For IE 6 (overwrite of .navigation.main) */
	_position: static; /* For IE 6 (overwrite of .navigation.main) */
}

.pager .next,
.pager .prev,
.pager .nextPage,
.pager .prevPage
{
	position: absolute;
	width: 18px; /* The width of the bg image */
	top: 50%;
	color: #8b8b8b;
	height: 25px; /* The height of the bg image */
	cursor: pointer;
	text-indent: -9999em;
	background: transparent url(../images/bg/arrow-right.gif) no-repeat;
}

.pager .next,
.pager .nextPage
{
	right: 0;
	background-position: right top;
}

.pager .prev,
.pager .prevPage
{
	left: 0;
	background-image: url(../images/bg/arrow-left.gif);
}

.pager .disabled
{
	display: none;
}

/* =artwork component */
.artwork
{
	/*display: none;*/
	float: left;
	width: 940px;
	margin: 0 34px;
}

h3#art-title 
{
	margin-left: 33px;
	margin-bottom: 1.25em;
	width: 200px;
	background-color: #6b6b6b;
	padding: 4px 0 3px 5px;
	color: #fff;
	font-weight: bold;
	font-size: 1.5em;     
}

div#art-introduction {
	margin: 0px 33px;
	font-size: 1.4em; 
	color: #6b6b6b;
}

.artwork .desc
{
	float: left;
	width: 253px;
	margin-left: 22px;
}

.artwork .desc h3
{
    margin: 0;
    padding: 0;
    background: 0;
    padding-top: 5px;   
	margin-bottom: 12px;    
}             

.artwork .desc h3 span {
    padding: 5px;
}
 
.artwork .desc p
{
	font-size: 1.2em;
	color: #6b6b6b;
	line-height: 1.5em;
}

.artwork p.image-num
{
	font-size: 1em;
	font-weight: normal;
    font-style:italic; 
}

.artwork img
{
	float: left;
}

/* =post excerpt component */
.post-excerpt h4
{
	font-size: 1.8em;
	line-height: 1.39; /* 25px */
	background-color: #00ccff;
	color: #000;
	font-weight: bold;
	/*margin-top: 5px;
		margin-bottom: 16px;*/ /* Margins won't work for inline elements */
	display: inline;
}

.post-excerpt h4 a
{
	line-height: 1.39; /* 25px */
	background-color: #00ccff;
	color: #000;
	font-weight: bold;
}

.post-excerpt span a
{
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 28px;
	display: block;
}

/* =tweet component */
.mod.tweet 
{
	width: auto; /* Need to reset the width set by .mod */
	background-color: #0cf;
	position: relative;
	margin-top: 30px;
}

.mod.tweet .header
{
	background-image: none;
	display: block;
	font-size: 0;
	height: 1px;
	width: 1px;
	position: absolute;
	top: -18px;
	left: 21px;
	border-top: 0;
	border-left: 18px solid #0cf; /* pixel size = tail size */
	border-top: 18px solid transparent; /* set angle of arrow */
	border-bottom: 10px solid transparent;
	_border-top-color: cyan; /* No 'transparent' borders in IE6 */
	_border-bottom-color: cyan;
	_filter: chroma(color="cyan"); /* filter out the cyan color */ 	
}

.mod.tweet .footer
{
	background: transparent url(../images/bg/tweet.gif) no-repeat;
	height: 6px;
}

.mod.tweet .content
{
	background: transparent url(../images/bg/tweet.gif) -198px top no-repeat;
	margin: 0;
	padding: 17px 11px;
}

.mod.tweet p
{
	color: #000;
	font-size: 1.1em;
	line-height: 1.36; /* 15px */
	margin-bottom: 1.36em;
	font-weight: bold;
}

.mod.tweet .meta
{
	font-size: 1em;
	line-height: 1.2; /* 12px */
	color: #27525e;
	margin-bottom: 0;
}

.mod.tweet a
{
	color: #fff;
}

/* =overwrites */
/* Put location-specific styling here */
#phones .content
{
	_padding: 28px; /* For IE 6 */
}

#more .content
{
	background-color: #000;
}

#more .content h3
{
	background-color: #fff;
	color: #000;
	margin-bottom: 21px;
}

#cred-deck .content
{
	padding: 28px 0 28px;
}

#art .content
{
	padding: 28px 16px 28px;
}

#more .mod .header,
#more .mod .footer
{
	background-image: url(../images/bg/more-module.png);
}

#more .mod.tweet .header
{
	background-image: none;
}

#more .mod.tweet .footer
{
	background: transparent url(../images/bg/tweet.gif) no-repeat;
}

#more .mod.tweet .content
{
	background-color: transparent;
}

#cred-deck .carousel
{
	height: 510px;
	width: 900px;
	margin: 0 30px;
}

#cred-deck .pager .next,
#cred-deck .pager .prev
{
	background-image: url(../images/bg/arrow-lrg-right.gif);
	width: 36px;
	height: 101px;
	top: 190px;
}

#cred-deck .pager .prev
{
	background-image: url(../images/bg/arrow-lrg-left.gif);
}

#artwork-thumbnail-pager
{
	height: 73px;
	margin-top: -61px;
}

#artwork-thumbnail-pager .nextPage,
#artwork-thumbnail-pager .prevPage
{
	top: 20%;
}

/**
 * HACK
 * slide 10 shouldn't be there (it is meant to be the second-part of slide 9), so we're hiding it with css
 */
#slide-thumb-10
{
	display: none;
}


/* =map window popup */
#mapcontainer
{
  position: relative;
  padding: 0 5px 0;
	background: transparent url(../images/bg/map.gif) repeat-y;
	width: 880px;
	overflow: hidden;
}

#mapcontainer .footer
{
	background: transparent url(../images/bg/map-footer.gif) left bottom no-repeat;
	position: relative;
	left: -5px;
	width: 890px;
	height: 6px;
}

#mapwindow
{
  position: absolute;
  display: none;
	z-index: 100;
  width: 880px;
  height: 702px;
  background: #000;
  opacity: 0.65;
  -moz-opacity: 0.65; /* older Gecko-based browsers */
  filter:alpha(opacity=65); /* For IE6&7 */  
}

#mapwindow-content
{
  position: absolute;
  display: none;
  color: #fff;
	z-index: 101;
  margin-top: 35px;
  margin-left: 84px;
  width: 709px;
  height: 570px;
}    

#mapwindow-content #content-left {
  width: 105px;
  float: left;    
	background: transparent url(../images/bg/popup_left_bg.png) repeat;   
  height: 100%;	
}             

#mapwindow-content #content-right {
  width: 604px;
  float: left; 
  background: #000;
  height: 100%;
}             

#mapwindow-content #leftarrow
{
  cursor: pointer;
  width: 50px;
  height: 516px;
  background: url(../images/leftarrow.gif) center no-repeat;
  float: left; 
  margin-top: 30px;
}

#mapwindow-content #dummyleftarrow
{
  width: 50px;     
  height: 516px;  
  float: left;
}

#mapwindow-content #rightarrow
{
  cursor: pointer;
  width: 49px;
  height: 100%;
  background: url(../images/rightarrow.gif) center no-repeat;  
  float: left;  
}

#mapwindow-content #wrap
{
  width: 505px;
  float: left;  
  overflow: hidden;
}

#mapwindow-content #closewindow
{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  background: url(../images/rounded_close.gif) center no-repeat;    
  cursor: pointer;
}

#mapwindow-content h4
{
  margin: 0;
  padding: 0;
  margin-top: 25px;
}              

#mapwindow-content h4 span {
  padding: 5px;
}
      
#mapwindow-content #desc
{       
  margin-top: 12px;
  height: 185px;
  overflow: hidden;
}

#mapwindow-content #info-placeholder
{
  min-height: 100px;
}

#mapwindow-content #video-placeholder
{                      
  margin-top: 15px;
  width: 100%;
} 

#mapwindow-content #thumbnails-placeholder
{     
  width: 100%;      
  margin-top: 28px;                                 
}       

#mapwindow-content #thumbnails-placeholder a
{     
  color: #fff;
  text-decoration: none;
}

#mapwindow-content #thumbnails-placeholder ul
{
  margin: 0;
  padding: 0;       
  font-size: 1.1em;
}

#mapwindow-content #thumbnails-placeholder li span {
  display: block;
  margin-left: 20px;
}

#mapwindow-content #thumbnails-placeholder li
{
  margin: 0;
  padding: 0;
  list-style-type: none;
  float: left;
  width: 100%; 
  color: #fff;  
  padding-top: 6px;
  padding-bottom: 6px; 
  line-height: 1.5em;
}             

#mapwindow-content #thumbnails-placeholder li.current {     
  background: #666666 url(../images/bg/arrow-left-small.gif) no-repeat 8px 10px;     
}

#mapwindow-content #thumbnails-placeholder .lasti
{
  margin-right: 0px;
}

#mapwindow-content #thumbnails-placeholder li img
{
  width: 55px; 
  height: 55px; 
}     

/* =artwindow */
#artwindow
{
  position: absolute;
  display: none;
  z-index: 150;
  width: 900px;
  height: 850px;
  background: transparent url(../images/bg/white-bg.png) repeat;
}

#artwindow-content
{
  position: absolute;
  display: none;
  color: #fff;
  z-index: 151;
  width: 880px;
  height: 493px;    
}

#artwindow-content #closewindow
{
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 20px;
  background: url(../images/bg/close-art.gif) center no-repeat;    
  cursor: pointer;
}  

#artwindow-content #artwork-carousel
{
    margin-top: 120px;
}        

#artwindow-content .artwork
{
    padding-left: 111px;
}     

#artwindow-content .description {
    margin-top: 40px;
}      

#artwindow-content .desc a {
    color: #00ccff;
}     

.clearbox
{
  clear: both;
}

.tooltip {

}

.tooltip-block {
	position:absolute;
}

	/* tooltip */
		.tooltip-block {
			background:url(../images/tooltip_bg_ie.png) transparent no-repeat left top; /* fixed for IE */
			position: absolute;
			width:180px;
			z-index: 20;
			padding-top:8px;
		}

		.tooltip-block .inner {
			background:url(../images/tooltip_bg_ie.png) transparent no-repeat left bottom; /* fixed for IE */
			padding:5px 15px 15px 15px;
		}

		.tooltip-block.right,
		.tooltip-block.right .inner {
			background-image:url(../images/tooltip_bg_right_ie.png); /* fixed for IE */
		}

		.tooltip-block h3 {
			font-size: 1.1em;
			font-family: Verdana, Helvetica, Arial;
			font-weight: normal;
			color: #330021;
		}

		.tooltip-content {
			display: none;
		}