/* ------------------------------------------------------------------------------------------------------------------
 * Exhibition Theme CSS for Tajima
 * by John Tajima
 * Copyright 2009, All rights reserved.
 * ------------------------------------------------------------------------------------------------------------------
 */

/* --------------------------------------- 
 * Blueprint overrides & Global Styles
 * ---------------------------------------
*/
*  		{	font-family: "Helvetica Neue",Arial,Verdana,sans-serif; }
html 	{ background: #fff; line-height: 1.5em; margin: 0; padding: 0; }
body  { padding: 0; margin: 0; line-height: 1.5em;  }
h1,h2,h3,h4,h5 { font-weight: bold; line-height: 1.7em; color: #666 }

h2.cap { color:#999; letter-spacing: .3em; font-weight: normal; font-size: 18px; line-height: 2em; text-transform: lowercase; font-variant: small-caps; }
h5.cap { color:#999; font-weight: normal; letter-spacing: 0.1em; line-height: 2em; text-transform: uppercase; font-variant: small-caps; }
h6.cap { color:#999; font-weight: normal; letter-spacing: 0.1em;  line-height: 2em; text-transform: uppercase; font-variant: small-caps; }

a        { color: #333; text-decoration: none; }
a:hover, 
a:active { color: #000; text-decoration: underline; }

div.clearleft { clear: left; }
strong { color: #000; }

.center { text-align: center }
.right  { text-align: right  }

/* --------------------------------------- 
 * Layout
 * ---------------------------------------
*/

/* frame around entire page if using fixed with */
div.frame { }
/* frame around header if requiring background across entire page */
div.header-frame { background: #fff; display:block; position: relative; height: 70px; min-height: 50px; margin: 0 auto;}
/* frame around page if requiring background across entire page */
div.page-frame   { background: #fff; display: block; position: relative; min-height: 600px; height: 670px; margin: 0 auto; }
/* blueprint container for page */
div#page { height:670px; display:block; position: relative;  }
/* frame around page if requiring background across entire page */
div.subpage-frame { background: #fff; display: block; width: 100%; z-index: 10; }
/* frame around footer if requiring background across entire page */
div.footer-frame  { background: #fff; display: block; position: fixed; bottom: 0; left: 0; width: 100%; padding-top: 10px; height: 30px; overflow: hidden; }

/* --------------------------------------- 
 * Common Styles 
 * ---------------------------------------
*/

/* page title */

ul.menu { list-style: none; margin: 0; padding: 0; }
ul.menu li { padding: 0; display:inline; }
ul.menu li a { color: #999; font-size: 9px; padding: 1px 5px; margin: 0 5px; font-weight: normal; text-decoration: none; text-transform: uppercase; letter-spacing: 0.3em; border: 1px solid #fff; }
ul.menu li a:hover { color: #000; xtext-decoration: underline; border: 1px solid #999; }


span.photo-count    { color: #ccc; font-size: 11px; font-weight: normal;  }
span.published-date { font-size: 10px; color: #444; font-weight: bold; text-transform: uppercase; }

p.subtitle { font-size: 12px; color: #333; font-weight: normal; }
p.description { font-size: 12px; line-height: 1.7em; color: #333; font-weight: normal; font-style: italic }

.scaps { font-size: 9px; font-weight: normal; text-transform: uppercase; font-style: normal; letter-spacing: 0.2em; }

/* photo-specs */
ul.specs { list-style: none; padding: 1px 5px; margin: 5px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; background: #f0f0f0;}
ul.specs li { display:inline; font-size: 9px; text-transform: uppercase;  letter-spacing: 0.5px; color: #666; padding-right: 5px;}
ul.specs li.label { font-weight: bold; color: #333; padding-right: 0;}
ul.specs li.label:before { content: "| "; color: #666; font-size: 11px; }
/* --------------------------------------- 
 * Header 
 * ---------------------------------------
*/
div#header			{ border-bottom: 1px solid #ddd; height: 60px;}
div#logo				{ text-align: center; height: 30px; padding-bottom: 5px; }
div#main-menu		{ text-align: center; }


/* --------------------------------------- 
 * Footer 


 * ---------------------------------------
*/
div#footer  { color: #aaa; text-align: center; border-top: 1px solid #ddd; height: 30px; font-size: 10px;}
div#footer:after {content:"";display:block;height:0;clear:left;visibility:hidden;}
div#copyright   { font-size: 9px; line-height: 1.5em}
div#copyright span.copyright { font-size: 9px; font-family: "Helvetica Neue", san-serif; text-transform: uppercase; letter-spacing: 0.2em; }
div#contact			{}
div#exhibition  { text-align:right; }
div#exhibition span.powered { font-size: 8px; font-family: "lucida grande", arial, san-serif; text-transform: uppercase; letter-spacing: 0.2em; margin-right: -0.2em; font-weight: bold;}
div#exhibition span.login { font-size: 9px; font-family: "Helvetica Neue", arial, san-serif; line-height: 1.2em; font-weight: bold; }
div#exhibition span.login a { text-decoration: none; color: #999; margin-bottom: 0;}
div#exhibition span.login a:hover { text-decoration: underline;}

/* --------------------------------------- 
 * Index.liquid
 * ---------------------------------------
*/
div.splash { display: block; position: relative; text-align: center; margin: 0 auto; }
div.splash img.preview { border: 3px solid #999; text-align:center; margin-bottom:10px;}
div.splash h2 {margin-bottom:0;}

/* --------------------------------------- 
 * Collection.liquid
 * ---------------------------------------
*/

ul.collections { list-style:none; margin-right: 0; margin-bottom: 0; padding: 0; }
ul.collections.root { margin-left: 0;}
ul.collections h5 { font-size: 13px;  letter-spacing: 0.05em; font-weight:normal; color: #999; margin: 0; padding: 0; line-height: 2.5em; border-bottom: 1px dotted #ddd;}
ul.collections li { }
ul.collections li.folder {}
ul.collections li.folder > h5 { font-size: 14px; color: #999; text-transform: lowercase; font-variant: small-caps; line-height: 1.5em}
ul.collections li.album {}
ul.collections li.album h5 { font-weight: bold; color: #333;}
ul.collections li.album .preview { width: 25px; height: 25px; border: 1px solid #ddd; margin: 2px; vertical-align:middle;}
/* --------------------------------------- 
 * Album.liquid
 * ---------------------------------------
*/
/* breadcrumb style */
/* container for breadcrumb markers */
div#breadcrumbs  {color: #666; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; font-style:normal; padding-bottom: 1.5em;}
div#breadcrumbs ul.crumbs { margin: 0; padding: 0; display: inline; list-style: none; color: #999; font-size: 9px; font-weight:normal; text-transform: uppercase;}
div#breadcrumbs ul.crumbs li { display: inline; margin: 0 2px;}
div#breadcrumbs ul li:before { content: "\0020 \0020 \0020 \00BB \0020"; color: #666; font-size: 11px; }
div#breadcrumbs	ul li.first:before { content: " "; }
div#breadcrumbs	ul li.last { font-weight: bold; color: #333;}
div#breadcrumbs a { color: #666;}
div#breadcrumbs a:hover,
div#breadcrumbs a:active { color: #000;}

div#thumbnails { display:block; position: relative; height: 70px; }

div#main-image 		 { text-align: center; }
div#main-image img { border: 3px double #666; text-align:center;}
#title 	 { font-size: 24px; clear: right; display:block; position: relative; padding-top: .5em; line-height: 1em;}
#caption { color: #888; font-size: 11px; font-weight: normal; font-family: "Helvetica Neue", arial, san-serif; text-transform: uppercase; font-style: normal; letter-spacing: 0.1em;}

/* link for photo details */

a.details-bt { color: #999; position:relative; margin:-2em auto 0; float:right; font-size: 9px; text-decoration: underline; letter-spacing: 0px;}

ul.gallery { margin: 0; padding: 0; list-style:none; text-align:center;}
ul.gallery li { display: block; float: left; margin-right: 5px; width: 52px; height: 52px; }
ul.gallery li img { border: 1px solid #666; }

/* --------------------------------------- 
 * Photo.liquid
 * ---------------------------------------
*/

/* --------------------------------------- 
 * Blog.liquid / Article.liquid

 * ---------------------------------------
*/



div#sidebar { }

div#sidebar h1 { font-size: 12px; color: #999; margin-bottom: 1em; text-transform: uppercase; letter-spacing: 1px;}
div#sidebar h2 { font-size: 10px; color: #222; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;}
div#sidebar ul { list-style:none; margin-left: .5em; }
div#sidebar span.date { font-size: 9px; color: #999; padding-left: 5px; }
div#sidebar span.count { font-size: 10px; color: #999; padding-left: 5px; }
div#sidebar div.section { display: block; position: relative; margin: 1em 0;}
/* article post */
div.article { padding: 1em; display: block; position: relative; overflow: hidden; margin-bottom: 2em; }
div.article span.date { font-size: 9px; color: #999; text-transform: uppercase; letter-spacing: 1px; }
div.article h2 { font-size: 30px; color: #666; font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", Georgia, serif; line-height: 1.5em; 
  font-style: italic; font-weight: normal;}
div.article h2 a { text-decoration: none; }
div.article img.photo { border: 3px double #333; margin: 0 1.5em 1.5em; text-align: center; }

/* --------------------------------------- 
 * Page.liquid
 * ---------------------------------------
*/


/*
 * Client signin
 */
form#client-signin-form { width: 500px; margin: 100px auto 0 auto; padding: 10px; border: 1px solid #666; text-align: left; background: #ccc }
form#client-signin-form label { width: 130px; text-align: right; padding-right: 10px; float: left; display: block; }
form#client-signin-form input[type=text] {  width: 250px; margin: 2px; background: #eee }
form#client-signin-form input[type=password] { width: 250px; margin: 2px; background: #eee}


/* ---------------------------------------------------------------
 * jcarousel style 
 * ---------------------------------------------------------------
*/

/**
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
.jcarousel-container { position: relative; height: 67px }
.jcarousel-clip { z-index: 2; padding: 5px 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 { float: left; list-style: none;
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 52px; height: 52px; }

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

/* Skin specific */
.jcarousel-skin-white .jcarousel-container { -moz-border-radius: 8px; -webkit-border-radius: 8px; background: #f8f8f8; border: 1px solid #ddd; }
.jcarousel-skin-white .jcarousel-container-horizontal { width: 900px; padding: 0px 40px; }
.jcarousel-skin-white .jcarousel-clip-horizontal  { width:  900px; height: 55px; }
.jcarousel-skin-white .jcarousel-item 						{ width: 50px; height: 55px;}
.jcarousel-skin-white .jcarousel-item img 			  { border: 1px solid #666;}
.jcarousel-skin-white .jcarousel-item-horizontal  { margin-right: 5px; }
.jcarousel-skin-white .jcarousel-item-placeholder { background: #fff; color: #000; }

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-white .jcarousel-next-horizontal { position: absolute; top: 15px; right: 5px; width: 32px; height: 32px; cursor: pointer; background: transparent url(next-horizontal.png) no-repeat 0 0; }
.jcarousel-skin-white .jcarousel-next-horizontal:hover { background-position: -32px 0; }
.jcarousel-skin-white .jcarousel-next-horizontal:active { background-position: -64px 0; }
.jcarousel-skin-white .jcarousel-next-disabled-horizontal,
.jcarousel-skin-white .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-white .jcarousel-next-disabled-horizontal:active { cursor: default; background-position: -96px 0; }

.jcarousel-skin-white .jcarousel-prev-horizontal { position: absolute; top: 15px; left: 5px; width: 32px; height: 32px; cursor: pointer; background: transparent url(prev-horizontal.png) no-repeat 0 0; }


.jcarousel-skin-white .jcarousel-prev-horizontal:hover { background-position: -32px 0; }
.jcarousel-skin-white .jcarousel-prev-horizontal:active { background-position: -64px 0; }
.jcarousel-skin-white .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-white .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-white .jcarousel-prev-disabled-horizontal:active { cursor: default; background-position: -96px 0; }


/* ----------------------------------------------------------------------
 * Facebook styles
 * ----------------------------------------------------------------------
 */
#facebox .t { background:url(t.png) top left repeat-x; height: 20px; }
#facebox .b { background:url(b.png) top left repeat-x; height: 20px;}
#facebox .l { background:url(l.png) top left repeat-y; width: 20px; }
#facebox .r { background:url(r.png) top left repeat-y; width: 20px; }
#facebox .tl { background:url(tl.png); }
#facebox .tr { background:url(tr.png); }
#facebox .bl { background:url(bl.png); }
#facebox .br { background:url(br.png); }
#facebox { position: absolute; top: 0; left: 0; z-index: 100; text-align: left; }
#facebox a.close { position: absolute; top: 0; right: 0; background: url(close.png) top left no-repeat; dislay:block; width: 30px; height: 30px;}
#facebox .popup { position: relative; }
#facebox table { border-collapse: collapse; margin:0; padding: 0; width: auto; }
#facebox td { border-bottom: 0; padding: 0; }
#facebox .body { padding: 5px; background: #fff; width: 600px; min-height: 400px; }
#facebox div.content { min-height: 200px;}
#facebox .loading { text-align: center; }
#facebox .image { text-align: center; }
#facebox img { border: 0;  margin: 0;}
#facebox .footer { border-top: 1px solid #DDDDDD; padding-top: 5px; margin-top: 10px; text-align: right; }
#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br { height: 10px; width: 10px; overflow: hidden; padding: 0; }
#facebox_overlay { position: fixed; top: 0px; left: 0px; height:100%; width:100%; background: #fff;}
.facebox_hide { z-index:-100;}
.facebox_overlayBG { background-color: #fff; z-index: 99; }
* html #facebox_overlay { /* ie6 hack */
  position: absolute;
  height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}