/* CSS Document
AUTH: Kain Balzary
note: Tried to reduce the use of javascript to a minimum. used sprite naves, css hide/shows with js ie5/6 correction and css layout.
 */
 
body {background:url(i/background.png) 50% 0 no-repeat;}
#logo 	{position:absolute; top:106px; left:50%; margin-left:-414px; width:55px;z-index:15;}
#navi   {position:absolute; top:107px; left:50%; margin-left:189px; z-index:15;}
#pencil {position:absolute; top:327px; left:50%; margin-left:189px;z-index:15;}
#rollnav{position:absolute; top:233px; left:50%; margin-left:-405px; width:43px; }
#content{position:absolute; top:228px; left:50%; margin-left:-316px; width:366px; z-index:3; display:inline; }
#content.sfhover {display:none;}
#content { font-family:Arial, Helvetica, sans-serif; font-size:12px; }
#content a:link, #content a:link, #content a:visited {text-decoration:none; color:#0033FF}
#content a:hover {color:#0066CC; text-decoration:underline}

#slideshowContainer{position:absolute; top:-121px; left:403px; margin-left:-316px; width:780px;  display:inline; height: 391px;
z-index:5; }

/* rollover */
#gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
#gallerycontainer a.thumbnail {
padding:0;
text-decoration:none;
}
/*IE6 filter:*/ 

* html #gallerycontainer a.thumbnail span.linkbox img { margin:0 2px 2px 0}

/*IE7 filter:*/ 
*+html #gallerycontainer a.thumbnail span.linkbox img{ margin:0 2px 2px 0}

/* this will be changed by onload event*/

 /*CSS for enlarged image*/
.thumbnail div{
/*
top:-180px; 
left: -2000px;
width:762px;*/
position: absolute;
width:1px;
height:1px;
top:-1200px;
left:-1200px;
text-decoration:none;
visibility: hidden;}
.thumbnail div img{visibility: hidden;}


.thumbnail:hover div, a.sfhover div{ /*CSS for enlarged image*/
visibility: visible;
position:absolute; top:-127px; left:50%; margin-left:67px;  
width:762px; height:400px;
z-index: 100;
}
.thumbnail:hover div img, a.sfhover div img{ /*CSS for enlarged image*/
visibility: visible;}

span.linkbox img {
width:14px; height:14px; border:1px solid #999; background:white; text-decoration:none; line-height:1px; margin:0 -2px 0 0;}

.thumbnail:hover span.linkbox img, a.sfhover span.linkbox img{ 
background:#D53609;}



.thumbnail div span.tag {
position:absolute;
top:253px;
right:0px;
text-decoration:none;
}



.thumbnail div img{ /*CSS for enlarged image*/
border-width: 0;
padding: 0px;
}

/* ccss sprite style nav*/
#subnavSamples, #subnavAbout, #subnavServices, #subnavContact
{ height:11px; width:254px;}
#subnavSamples a, #subnavAbout a, #subnavServices a, #subnavContact a
{height:11px; padding:0px; margin:0px; line-height:0px;}

/*#subnavSamples	{background:url(i/navSamples.png) top left no-repeat;}
#subnavAbout 	{background:url(i/navAbout.png) top left no-repeat;}
#subnavServices	{background:url(i/navServices.png) top left no-repeat;}
#subnavContact	{background:url(i/navContact.png) top left no-repeat;}*/


a#navDesign 		{width:49px; background:url(i/navSamples.png) 0px 0px no-repeat;}
a#navAdvertising	{width:81px; background:url(i/navSamples.png) -49px 0px no-repeat;}
a#navExhibition		{width:72px; background:url(i/navSamples.png) -130px 0px no-repeat;}
a#navWeb			{width:51px; background:url(i/navSamples.png) -202px 0px no-repeat;}

a#navDesign:hover 		{background:url(i/navSamples.png) 0px -11px no-repeat;}
a#navAdvertising:hover	{background:url(i/navSamples.png) -49px -11px no-repeat;}
a#navExhibition:hover	{background:url(i/navSamples.png) -130px -11px no-repeat;}
a#navWeb:hover			{background:url(i/navSamples.png) -202px -11px no-repeat;}

a#navExperience 	{width:71px; background:url(i/navAbout.png) 0px 0px no-repeat;}
a#navCommunity 		{width:74px; background:url(i/navAbout.png) -71px 0px no-repeat;}
a#navStaff 			{width:40px; background:url(i/navAbout.png) -145px 0px no-repeat;}

a#navExperience:hover 	{background:url(i/navAbout.png) 0px -11px no-repeat;}
a#navCommunity:hover 	{background:url(i/navAbout.png) -71px -11px no-repeat;}
a#navStaff:hover 		{background:url(i/navAbout.png) -145px -11px no-repeat;}

a#navWhat 		{width:147px; background:url(i/navServices.png) 0px 0px no-repeat;}
a#navWhat:hover	{background:url(i/navServices.png) 0px -11px no-repeat;}

a#navContact 		{width:73px; background:url(i/navContact.png) 0px 0px no-repeat;}
a#navNewsletter 	{width:78px; background:url(i/navContact.png) -73px 0px no-repeat;}
a#navEnvironment 	{width:85px; background:url(i/navContact.png) -151px 0px no-repeat;}

a#navContact:hover 		{background:url(i/navContact.png) 0px -11px no-repeat;}
a#navNewsletter:hover 	{background:url(i/navContact.png) -73px -11px no-repeat;}
a#navEnvironment:hover 	{background:url(i/navContact.png) -151px -11px no-repeat;}



div.content {
	/* The display of content is enabled by a javascript generated style on the page.
	   This is so that the slideshow content won't display unless javascript is enabled. */
	display: none;
	
position:absolute; top:88px; left:50%; margin-left:-322px; width:780px;    height: 391px;
z-index:5;
}
div.content a, div.navigation a {
	text-decoration: none;
	color: #777;
}
div.content  a:focus, div.content  a:hover, div.content  a:active {
	text-decoration: underline;
}
div.controls {
	position:absolute
	top: 5px;
	height: 23px;
}
div.controls a {
	padding: 5px;
}
div.ss-controls {
	float: left;
}
div.nav-controls {
	float: left;
}

div.loader {
	background-image: url('../galleriffic/loader.gif');
	background-repeat: no-repeat;
	background-position: center;
	width: 550px;
	height: 350px
}
div.slideshow {
	clear: both;
}
div.slideshow span.image-wrapper {
	float: left;
	padding-bottom: 12px;
}
div.slideshow a.advance-link {
	padding: 2px;
	display: block;
}
div.slideshow img {
	border: none;
	display: block;
}
div.download {
	float: right;
}
div.embox {
	clear: both;
	border: 1px solid #ccc;
	background-color: #eee;
	padding: 12px;
}
div.image-title {
	font-weight: bold;
	font-size: 1.4em;
}

div.image-desc {
	line-height: 1.3em;
	padding-top: 12px;
}
div#thumbs {
	/* The navigation style is set by a javascript generated style on the page.
	   This is so that the javascript specific styles won't be applied unless javascript is enabled. */
	   margin-top:190px;
	   margin-left:50%;
	   
	  
}
ul.thumbs {
	clear: both;
	margin: 0 0 0 -400px;
	padding: 0;
	width:30px;
	
}
ul.thumbs li {
	float: left;
	padding: 0;
	margin: 5px 5px 5px 0;
	list-style: none;
	width:8px; height:8px;
}
a.thumb {
	padding: 4px 5px 4px 4px;
	display: block;
	border: 1px solid #444;
}
ul.thumbs li.selected a.thumb {
	background: #000;
}
a.thumb:focus {
	outline: none;
}
ul.thumbs img {
	border: none;
	display: block;
}
div.pagination {
	clear: both;
}
div.navigation div.top {
	margin-bottom: 12px;
	height: 11px;
}
div.navigation div.bottom {
	margin-top: 12px;
}
div.pagination a, div.pagination span.current {
	display: block;
	float: left;
	margin-right: 2px;
	padding: 4px 7px 2px 7px;
	border: 1px solid #ccc;
}
div.pagination a:hover {
	background-color: #eee;
	text-decoration: none;
}
div.pagination span.current {
	font-weight: bold;
	background-color: #000;
	border-color: #000;
	color: #fff;
}

/* Minimal Gallery Styles */
#thumbs-min ul.thumbs li {
	float: none;
	padding: 0;
	margin: 0;
	list-style: none;
}

#thumbs-min a.thumb {
	padding: 0px;
	display: inline;
	border: none;
}

#thumbs-min ul.thumbs li.selected a.thumb {
	background: inherit;
	color: #000;
	font-weight: bold;
}

/* play pause buttons */
#controls {margin-left:5px}
#controls a{border:none; text-decoration:none; margin:0px; width:25px; padding:2px 6px;}
#controls a.pause  {background:url('galleriffic/control_pause.png') 0px 0px no-repeat;}
#controls a.play  {background:url('galleriffic/control_play.png') 0px 0px no-repeat;}
#controls a.prev  {background:url('galleriffic/control_start.png') 0px 0px no-repeat;}
#controls a.next  {background:url('galleriffic/control_end.png') 0px 0px no-repeat;}