/* ----------------------------------------------------------------
 * Site CSS file for Theme
 * 
 * ----------------------------------------------------------------
*/


/* Global overrides of blueprint */
h1 { margin-bottom: 0.25em;}
*  { font-family:"Lucida Grande",Arial,Verdana,sans-serif; }
div { text-align: left; }
p, span { font-size: 11px }
a { color: #333; }
a:hover, a:active { color: #000; text-decoration: underline; }

/* ---------------------------------------------------------------
 * Layout
 * ---------------------------------------------------------------
 */
body 			 { background: #fff; margin: 0; padding: 0; }
div#frame  { margin-top: .5em;}
div#header { border-bottom: 1px solid #eee; margin-bottom: 1em;}
div#footer { border-top: 1px solid #eee; padding-top: .5em; margin: 1em auto 1em; text-align:center; color: #aaa; }
div#footer span.copyright { font-size: 10px; }

div#content { display:block; position: relative; text-align: center; min-height: 600px; }

/* ---------------------------------------------------------------
 * Common Styles
 * ---------------------------------------------------------------
 */
div.clearfix { clear: both;}
span.bold { font-weight: bold; }
span#contact {font-size: 12px; color: #666; letter-spacing: 0.1em;}
strong { color: #444; font-weight: bold;}
/* main menu div */
div#menu { padding: 1em 0 0; text-align:right; }
ul.menu { list-style: none; margin: 0; padding: 0; }
ul.menu li { padding: 0 .8em; display:inline;}
ul.menu li a { color: #888; font-size: 9px; font-weight: normal; text-decoration: none; text-transform: uppercase; letter-spacing: 0.2em;}
ul.menu li a:hover { color: #000; text-decoration: underline; }

div#breadcrumb { color: #666; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; font-style:normal; padding-bottom: 2em;}
div#breadcrumb a { color: #666;}
div#breadcrumb a:hover,
div#breadcrumb a:active { color: #000;}

div#breadcrumb span.crumb { color: #666; font-family: inherit; font-size: 9px;}
div#breadcrumb span.end   { color: #333; font-weight: bold;}
/* ---------------------------------------------------------------
 * Section - Home
 * ---------------------------------------------------------------
 */
h1 a { text-decoration: none;}
h1 a:hover { text-decoration: none;}
img.splash { border: 3px double #ccc; padding:0; margin: 5px; }

/* ---------------------------------------------------------------
 * Section - Album
 * ---------------------------------------------------------------
 */

span#album_info { font-size: 9px; color: #999; }

/* galleria main image and title */
div.galleria_wrapper 		 { text-align: center; }
div.galleria_wrapper img { text-align: center; padding: 0; border: 3px double #ccc; margin: 5px; }
span#title  { font-size: 24px; text-align: center; display:block; margin-top: -0.25em; color: #222;}
span#caption { font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 11px; xtext-transform: uppercase; letter-spacing: 0.1em; margin-top: -.75em; color: #666; text-align: center; display: block; font-style: normal; font-variant: small-caps}
#main_image { min-height: 500px; display:block; position:relative; }
div#thumbs  { text-align: center; width: 980px; display: block; position: relative; margin-top: 2em;}



/* galleria thumbs */
.galleria 		{ list-style:none; width:900px; margin: 0 auto; }
.galleria li	{ display:block; width:50px; height:50px; border: 3px double #ccc; overflow:hidden; float:left; margin:0 10px 10px 0}
.galleria li a { display:none }
.galleria li div { position:absolute; display:none; top:0; left:180px}
.galleria li div img { cursor:pointer; }
.galleria li.active div img,.galleria li.active div{display:block}
.galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto}
.galleria li .caption{display:block;padding-top:.5em}
* html .galleria li div span{width:400px} /* MSIE bug */

/* ---------------------------------------------------------------
 * Section - Collection
 * ---------------------------------------------------------------
 */

div#collection { margin: 0 3em; margin-left: 1.5em;}
ul.folders { list-style: none; margin-right: 0; }
ul.folders li { margin: .5em 0; }
ul.folders span.title { font-size: 12px; color: #666; border-bottom: 1px dotted #ddd; display: block; text-transform: uppercase; }
ul.folders a.album { font-size: 12px; color: #333; font-weight: bold; text-decoration: none; }
ul.folders a:hover { text-decoration: underline;}
/* ---------------------------------------------------------------
 * Section - Photo
 * ---------------------------------------------------------------
 */
/* ---------------------------------------------------------------
 * Section - Blog / Article
 * ---------------------------------------------------------------
 */
div.sidebar { }

div.sidebar h1 { font-size: 14px; color: #999; margin-bottom: 1em;}
div.sidebar h2 { font-size: 10px; color: #333; font-weight: bold; text-transform: uppercase;}
div.sidebar ul { list-style:none; margin-left: .5em; }

div.article { width: 100%; display: block; position: relative; overflow: hidden; margin-bottom: 2em; }
div.article span.date { font-size: 9px; color: #999; text-transform: uppercase; }
div.article h1.article-title { color: #666; }
div.article h1 a { text-decoration: none; }
div.article ul.details { padding: 1px 5px 1px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; margin: 5px 0; list-style:none; background: #f0f0f0;}
div.article ul.details li { display: inline; font-size: 10px; color: #666; font-style: normal; text-transform: uppercase;  xfont-variant: small-caps; }
div.article ul.details li.label { color: #444; font-weight: bold; }
div.article ul.details li.divider { margin-left: 5px; border-left: 1px solid #999; padding-left: 5px;}
/* ---------------------------------------------------------------
 * Section - Page
 * ---------------------------------------------------------------
 */

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

/**
 * 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 { float: left; list-style: none;
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 75px; height: 75px; }

/**
 * 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: 10px; background: #f0f0f0; border: 1px solid #ddd 	; }
.jcarousel-skin-white .jcarousel-container-horizontal { width: 900px; padding: 10px 40px; }
.jcarousel-skin-white .jcarousel-clip-horizontal  { width:  900px; height: 56px; }
.jcarousel-skin-white .jcarousel-item 						{ width: 50px; height: 50px;}
.jcarousel-skin-white .jcarousel-item img 			  { }
.jcarousel-skin-white .jcarousel-item-horizontal  { margin-right: 10px; }
.jcarousel-skin-white .jcarousel-item-placeholder { background: #fff; color: #000; }

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-white .jcarousel-next-horizontal { position: absolute; top: 22px; 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: 22px; 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; }
#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');
}
