/*
-----------------------------------------------
KozmoDermo.com - Slide Show Styles
Author:  Design-Ist - Ozgur Kayhan [ okayhan@design-ist.com]
Version:  18 December 2009
----------------------------------------------- */

html, body {
 margin:0;
 padding:0;
}

body{
 font:12px/1 Arial, Helvetica, sans-serif; 
 color: #333;
 background-color: #eee;
}

#header { height:115px;}
#header img {border:none;}

#header h2 {
 padding-right:4px;
 line-height:24px;
 text-align:right;
 font-family:Georgia, "Times New Roman", Times, serif;
 font-size:14px;
 font-weight:500;
 color:#fff;
 background:#431462;
}

#header-banner {
 position:absolute;
 right:10px;
 top:10px;
}

div#page {
 position:relative;
 width: 800px;
 background-color: #fff;
 margin: 0 auto;
 text-align: left;
 border: 1px solid #ddd;
 border-top: none;
}
div#container {
 padding: 10px;
 overflow: hidden;
}

div.content {
 display: none;
 margin:0;
 padding:0;
 margin:10px 0 ;
 
 /*background:#0F0;*/
 }

div.content a, div.navigation a { text-decoration: none;}
div.content a:hover, div.content a:active { text-decoration: underline;}

/*div.navigation a.pageLink {
 height: 77px;
 line-height: 77px;
 }*/

div.controls {
 position:absolute;
 top:315px;
 left:43px;
 z-index:100;
 margin-top:5px;
 height: 23px;
 }
div.controls a { padding: 5px;}
div.ss-controls { float: left; display:none;}
div.nav-controls a.next {margin-left:60px;}

div.slideshow-container,
div.loader,
div.slideshow a.advance-link {
 width: 500px; /* This should be set to be at least the width of the largest image in the slideshow with padding */
 height: 340px; /* This should be set to be at least the height of the largest image in the slideshow with padding */
}

div.loader,
div.slideshow a.advance-link,
div.caption-container {
}

 

div.slideshow-container {
 position: relative;
 clear: both;
 float: left;
 height: 340px;
}

div.loader {
 position: absolute;
 top: 0;
 left: 0;
 background: url(loader.gif) center no-repeat;
}
div.slideshow span.image-wrapper {
 position: absolute;
 width:500px;
 height:340px;
 z-index:100;
 display: block;
 top: 0;
 left: 0;
}

div.slideshow a.advance-link {
 display: block;
 line-height: 0; /* This should be set to be at least the height of the largest image in the slideshow with padding */
 text-align: left;
 }

div.slideshow a.advance-link:hover,
div.slideshow a.advance-link:active,
div.slideshow a.advance-link:visited {
 text-decoration: none;
}
div.slideshow a.advance-link:focus { outline: none;}

div.slideshow img {border:none;}


span.image-caption {}


/*Image Captions*/
div.caption-container {
 position: relative;
 float: right;
 width: 270px;
 height: 340px;
 background:#E8E5F0 url(bg-slideshow-caption.png) no-repeat bottom center;
 /*margin-top: 10px;*/
 }

span.image-caption {
 position: absolute;
 display: block;
 top: 0;
 left: 0;
}

div.caption { padding: 0 10px; height:300px; overflow:auto;}
div.caption h2 {filter:alpha(opacity=90); line-height:1.2em; font-family:Arial, Helvetica, sans-serif; font-size:1.2em; font-weight:900; background-color:#E8E5F0;}
div.caption p {width:100%; filter:alpha(opacity=90); line-height:1.2em; font-family:Arial, Helvetica, sans-serif; font-size:1em; font-weight:600; background-color:#E8E5F0;}
div.caption strong {filter:alpha(opacity=90); font-weight:bold; background-color:#E8E5F0;}
div.caption em {width:100%; filter:alpha(opacity=90); background-color:#E8E5F0;}


div.caption ul {
	margin-bottom: 1em;
	font-size: 1em;
	line-height: 1em;
	}
div.caption ul li {
	color:#000;
	margin-bottom: 0.5em;
	list-style: disc;
	}

div.image-title {
 font-weight: bold;
 font-size: 1.4em;
}
div.image-desc {
 line-height: 1.3em;
 padding-top: 12px;
}
div.download {
 margin-top: 8px;
}
div.photo-index {
 position: absolute;
 bottom: 8px;
 left: 102px;
 padding: 0 10px;
 text-align:center;
 }



/*Navigation Styles*/

div.navigation-container {
 float: left;
 position: relative;
 width:780px; /*test*/
 background:#E8E5F0;
}
div.navigation {}
div.navigation a.pageLink {
 display: block;
 position: relative;
 float: left;
 margin: 2px;
 width: 16px;
 background-position:center center;
 background-repeat:no-repeat;
 }
div.navigation a.pageLink:focus {
 outline: none;
}

div.navigation a.prev { margin-top:5px; height:75px; background: url(prevPageArrow.gif) center no-repeat;}
div.navigation a.next { margin-top:5px; height:75px; background: url(nextPageArrow.gif) center no-repeat;}

ul.thumbs {
 position: relative;
 float: left;
 margin: 0;
 padding: 0;
}
ul.thumbs li {
 float: left;
 padding: 0;
 margin: 5px 5px 5px 0;
 list-style: none;
}
a.thumb {
 padding: 1px;
 display: block;
}
a.thumb:focus {
 outline: none;
}
ul.thumbs img {
 border: none;
 display: block;
}
div.pagination {
 clear: both;
 position: relative;
 left: -50%;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
 position: relative;
 display: block;
 float: left;
 margin-right: 2px;
 padding: 4px 7px 2px 7px;
 border: 1px solid #ccc;
}
div.pagination a:hover {
 text-decoration: none;
}
div.pagination span.current {
 font-weight: bold;
}
div.pagination span.ellipsis {
 border: none;
 padding: 5px 0 3px 2px;
}

div.gallery-gutter {
 clear: both;
 padding-bottom: 20px;
}

#footer {width:780px; margin:0 auto; text-align:center;}
#footer p {}
#footer p.disclaimer {color:#999;}

/* [ misc ] 
--------------------------------------------- */


/* self-clear floats */
.clearfix:after {content: ".";  display: block; height: 0; clear: both; font-size: 0; visibility: hidden;}