/* 
Charlie Campbell Photography CSS
Author: Alastair Mucklow
Author URL: http://www.strangerpixel.com
Last modified: 20/1/2009
*/


/* import CSS for compliant browsers */
/* ------------------------------------------------------- */
@import url(reset.css);
@import url(typography.css);
@import url(skin.css);


/* Blocks
------------------------------ */
#main {
  width: 850px;
  margin: 10px auto;
	text-align: left;
}

/* Page Title
------------------------------ */
#gallerytitle {
	padding: 6px 0 8px;
}

#gallerytitle h1 {
	display: none;
}

/* Index Page
------------------------------ */
#albums {
	float: left;
	width: 858px;
	/* padding: 0 100px; */
}

#albums ul {
	margin: 0;
}

#albums ul li {
	display:inline;
	float: left;
	width: 405px;
	padding: 3px 12px;
}

#albums img {
	border: 1px #B7B7B7 solid;
	opacity: 0.6;
}

.album-thumb {
	width: 400px;
	height: 220px;
}

.album-title {
	width: 400px;
}

.album-title h4 {
	margin: 0.25em 0;
	text-transform: uppercase;
}

/* Album + Image Page
------------------------------ */
#mainframe {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	float: left;
	padding: 4px 0 9px;
	height: 500px;
	width: 850px;
}

#main_image_wrapper {
	width: 700px;
	height: 500px;
	text-align: right;
	float: left;
	position: relative;
}

#main_image {
	height: 500px;
	}
	
#mainframe.loading {
	background: #fff url(../images/spinner.gif) no-repeat center center;
}

#thumbs.loading {
	display: none;
}

/* Galleria Styles
------------------------------ */
.galleria_wrapper {
	z-index: 0;
	position: absolute;
	top: 0;
	right: 0;
	width: 700px;
	height: 500px;
}

#image img{margin-bottom:10px;}

.info{text-align:left;width:700px;margin:30px auto;border-top:1px dotted #221;padding-top:30px;}
.info p{margin-top:1.6em;}

.galleria{margin: 0;}

.galleria li {
	display:block;
	width:110px;
	height:80px;
	overflow:hidden;
	float:left;
	margin:0 4px 10px 0;
	border: 1px solid #B7B7B7;
	}
	
.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 */

a{text-decoration:none;outline:none;}
.demo{position:relative;margin-top:2em;}
.gallery_demo{width:702px;margin:0 auto;}
.gallery_demo li{width:68px;height:50px;margin: 0 2px;}
.gallery_demo li div{left:240px}
.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}

/* Tooltips */
div#qTip {
 padding: 20px;
 display: none;
 background: url(arrow_trans.png) no-repeat top left;
 color: #111;
 position: absolute;
 z-index: 1000; }

/* tabs structure */
ul.ui-tabs-nav li {
	display: inline;
}

.ui-tabs-hide { 
	display: none;
}

#thumbs {
	float: right;
	margin-right: -4px;
}

ul.thumblist {
	display: inline;
}

/* Sidebar
------------------------------ */
#sidebar {
	position: relative;
	width: 150px;
	height: 510px;
	float: left;
	padding: 0;
}

ul.subalbumlist {
	margin: 0;
}

ul.subalbumlist li {
	letter-spacing: 2px;
	font-size: 1em;
	display: inline;
}

ul.subalbumlist li.current {
	text-decoration: none;
}

li.current {
	color: #1b646d;
}

.caption { /* hide .caption */
	display: none;
}

#sidebar-caption {
	position: absolute;
	bottom: 0;
}

#sidebar-caption h4 {
	font-size: 1em;
	margin-bottom: 9px;
	letter-spacing: 2px;
}

/* Navigation
------------------------------ */
#ancillary {
	float: left;
	width: 850px;
	padding: 0.5em 0;
	font-weight: bold;
}

#ancillary ul {
	margin: 0;
	float: left;
	padding: 0 0 4px 0;
}

#ancillary ul li {
	display: inline;
	margin: 0 8px 0 0;
	padding: 4px 0 0;
}

#ancillary ul li.current {
	border-bottom: 1px solid #1b646d;
}

#subnav {
	width: 480px;
	float: left;
	text-transform: uppercase;
}

.spacer {
	float: left;
	padding: 0 6px 0 0;
}

#navigator {
	z-index: 999;
}

#navigator, .navigator {
	float: right;
}

.navigator {
	padding: 0 4px;
}

/* Contact Page
------------------------------ */
body.contact #mainframe {
	/* background: #fff url('http://play.strangerpixel.com/cc/uploaded/contact.jpg') 0 6px no-repeat; */
}

#page-overlay {
	width: 400px;
	margin: 50px auto;
	/* background: url('overlay60.png') top left repeat; */
}

#page-overlay p {
	padding: 12px;
}


/* Credit
------------------------------ */
#credit {
	float: left;
	width: 850px;
	font-size: 1em;
	padding: 20px 0 4px;
	color: #999;
}

#credit a {
	color: #999;
}

#credit a:hover {
	color: #1b646d;
}

.left {
	float: left;
}

.right {
	float: right;
}

/* Splash Page
------------------------------ */

body.splash {
	padding: 80px 0;
}

.splash #main {
	width: 600px;
}

#splash {
	text-align: center;
	padding: 150px 0;
	letter-spacing: -1px;
}

#splash h1 {
	display: none;
}

#splash h2 {
	font-size: 1em;
	margin-top: 1.8em;
	text-transform: uppercase;
	color: #999;
	letter-spacing: 0.2px;
}

/* Admin Toolbox
------------------------------ */
#admin, #admin_data{
	position: fixed;
  _position: absolute;
	right: 0px;
	top: 0px;
	width: 130px;
	border-bottom: 1px solid #E6E6DF;
	border-left: 1px solid #E6E6DF;
	background: #fff;
  z-index: 2;
}
#admin_data{
	top: 0px;
	padding-top: 20px;
	z-index: 1;
	line-height: 1.6em;
}
#admin h3 {
	font-weight: normal;
	color: #999;
	margin:0;
	padding:0;
}
#admin h3:hover { color: #036; }


/* some styles from grid.css I may need */
/* Misc classes and elements
-------------------------------------------------------------- */

/* Use a .box to create a padded box inside a column.  */ 
.box { 
  padding: 1.5em; 
  margin-bottom: 1.5em; 
  background: #eee; 
}

/* Use this to create a horizontal ruler across a column. */
hr {
  background: #ddd; 
  color: #ddd;
  clear: both; 
  float: none; 
  width: 100%; 
  height: .1em;
  margin: 0 0 1.4em;
  border: none; 
}
hr.space {
  background: #fff;
  color: #fff;
}

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clear { display: inline-block; }   
.clear:after, .container:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
* html .clear { height: 1%; }
.clear { display: block; }