/* CSS Document for Suzanne Kasler */

/* Base page settings */
html * {
	margin:					0;
	padding:				0;
	border:					0;
}

html,
body {
	height:					100%; /* required to center the page vertically */
}

body {
	/** Lock the base font size to 10px so we can em everything **/
	font-size: 				10px;   /* 16px ? 62.5% = 10px */
	font-family:			Helvetica, Arial, sans-serif;
	color:					#666666;
	/*background:				#E8E4D7;*/
	background: #666666;
}

div#sitecontainer {
	width:					100em;
	height:					58em;
	overflow:				hidden;
	background:			 	#FFFFFF;

	/** Center the page horizontally **/
	margin:					0 auto 0 auto;	

	/** Respect the vertical centering **/
	clear:					left;
	position:				relative;
	/*border: 3px solid; */
}

div#verticalspacer {
	/** Center the page vertically **/
	float:					left;
	height:					50%;
	margin-bottom:			-28.5em;;
	width:					1px;
}


/******* MAIN CONTENT *****/
div#frontpagecontent {
	position:				absolute;
	top:					48px;
	left:					48px;
	width:					904px;
}

.frontpage .article {
	display:				block;
	height:					330px;
	width:					904px;
	overflow:				hidden;
}

.frontpage .article a {
	display:				block;
	height:					330px;
	overflow:				hidden;
	float:					left;
}

.frontpage .article a:hover img {
	margin-top:				-330px;
}

.frontpage img.frontcenter {
	margin:					0 15px 0 15px;
}

/********* Bottom Logo ********/
div#bottomlogo {
	position:				absolute;
	top:					405px;
	left:					373px;
}


/** Frontpage Footer **/
#frontpage_footer {
	display:				block;
	width:					904px;
	height:					80px;
	border-top:				1px solid #E8E4D7;
	margin:					469px auto 0 auto;
	padding:				15px 48px 15px 48px;
}

#frontpage_footer .bannergroup {
	height:					80px;
	width:					920px;
	overflow:				hidden;	
}

#frontpage_footer .bannergroup .banneritem {
	height:					80px;
	overflow:				hidden;
	float:					left;
	margin-right:			15px;
}

#frontpage_footer .bannergroup .banneritem a {
	display:				block;
	height:					80px;
	width:					290px;
	overflow:				hidden;
}

#frontpage_footer .bannergroup .banneritem a:hover img {
	margin-top:				-80px;
}

div#inside {
	padding: 5px 5px 5px 5px;
}

div#splash {
	position:				absolute;
	overflow:				hidden;
	width:					522px;
	height:					364px;
	left:					430px;
	top:					137px;
	font-size:				1.2em;
	line-height:			1.4em;
	letter-spacing:				0;
	border		: solid 1px #666666;
}

div#textcontent {
	position:				absolute;
	overflow:				hidden;
	width:					522px;
	height:					364px;
	left:					430px;
	top:					137px;
	font-size:				1.2em;
	line-height:			1.4em;
	letter-spacing:				0;
	border		: solid 1px #666666;
}

div#textcontent2 {
	position:				absolute;
	overflow:				hidden;
	width:					905px;
	height:					364px;
	left:					47px;
	top:					137px;
	font-size:				1.2em;
	line-height:			1.4em;
	letter-spacing:				0;
	border		: solid 1px #666666;
}

div#textcontent .portfoliocontent {
	height:					336px;
}

#scrollcontained {
	position:				relative;
}

#scrollcontained .contentpaneopen {
	margin-top:				-5px;
}


/******** Address *********/
div#address {
	position:				absolute;
	top:					94px;
	right:					552px;
	height:					39px;
	width:					623px;
	overflow:				hidden;
	background:				url(../img/address.png) no-repeat top right;
}

div#address h2 {
	visibility:				hidden;
}

/******** Left Image ******/
div#leftimage {
	position:				absolute;
	top:					137px;
	left:					47px;
	width:					364px;
	height:					364px;
	text-align:				center;
	border		: solid 1px #666666;
	font-size:				1.2em;
	line-height:			1.4em;
	letter-spacing:				0;
}

div#padd {
	padding: 4px 4px 4px 4px;
}

/******** Alternating Logo ****/
div#logo {
	position:				absolute;
	top:					80px;
	left:					430px;
}


/******** Portfolio *******/
div#projectthumbs {			/* This is for the page of thumbnails of projects */
	text-align:				right;
	width:					666px;
	position:				absolute;
	top:					137px;
	right:					40px;
	font-size:				1.3em;
	letter-spacing:			1px;
	color:					#666666;
	text-transform:			capitalize;
}

div#thumbs {
	display:				block;
	text-align:				right;
	width:					628px;
	float:					right;
}
a.projectthumb {
	margin:					0 0 7px 7px;
	width:					150px;
	height:					50px;
	overflow:				hidden;
	display:				block;
	float:					left;
}
a.projectthumb:hover img {
	margin:					-50px 0 0 0;
}

div.thumbtitle {
	text-align:				right;
	width:					666px;
	background: green;
	clear:					both;
	float:					right;
	display:				block;
}

div#projectthumblist {
	width:					150px;
	margin:					0 0 0 auto;
}

#projectthumblist .button {
	height:					50px;
	width:					150px;
	margin:					0 0 7px 0;
	overflow:				hidden;
	cursor:					pointer;
}

#projectthumblist .button:hover img,
#projectthumblist .selected img {
	margin:					-50px 0 0 0;
}


img.otherproject {
	margin:					0 1px 0 1px;
}

div#projectlist {
	font-size:				1.2em;
	line-height: 			1.8em;
	letter-spacing:			0px;
	word-spacing:			normal;
	color:					#666666;
	text-transform:			capitalize;
	position:				absolute;
	top:					137px;
	left:					47px;
}

#projectlist ul {
	list-style-type:		none;
}

#projectlist a {
	color:					#88B5BA;
	text-decoration:		none;
}

#projectlist a:hover,
#projectlist .active a {
	color:					#666666;
}

div#mainimage {
	margin:					137px 0 0 336px;
	width:					465px;
	height:					336px;
	display:				block;
	overflow:				hidden;
}

#mainimage .slide {
	position:				absolute;
	visibility:				hidden;
}



/******** Joomla 1.5 Menu ********/
ul.menu {
	list-style-type:		none;
}

ul.menu li {
	float:					left;
	margin-right:			0px;
	height:					8px;
	overflow:				hidden;
}

ul.menu li.ultimo {
	float:					left;
	margin-right:			22px;
	height:					8px;
	overflow:				hidden;
}

ul.menu li.spazio {
	margin-right:			8px;
}

ul.menu li.spazio2 {
	margin-right:			2px;
}

ul.menu li a:hover img,
ul.menu li.active img {
	margin-top:				-10px;
}

ul.menu li span {
	display:				none;
}


/******** Menu ************/
div#bottomrightmenu {
	height:					8px;
	line-height:			8px;
	position:				absolute;
	right:					20px;
	top:					517px;
	text-align:				right;
}

div#menusplash {
	height:					8px;
	line-height:			8px;
	position:				absolute;
	right:					650px;
	top:					427px;
	text-align:				left;
	font-size:				1.2em;
	text-transform:			capitalize;
}

div#bottomcentermenu {
	height:					8px;
	line-height:			8px;
	position:				absolute;
	left:					419px;
	top:					517px;
	text-align:				left;
}



/* KAA Credit Line */

div#credit {
	font-family:		Verdana, Arial, Helvetica, sans-serif;
	color:				#BBBBBB;
	font-size:			1em;
	width:				100em;
	height:				1.5em;
	position:			relative;
	margin:				0 auto 0 auto;
	clear:				both;
	text-align:			right;
}

div#credit a:active,
div#credit a:link,
div#credit a:visited {
	color:				#BBBBBB;
	text-decoration:	underline;
}

div#credit a:hover {
	color:					#88B5BA;
}

.slideshow {  }
.slideshow img { background-color: white; }

img {border: none;}

ul.gallery {
	width: 905px;
	list-style: none;
	margin: 0 auto; padding: 0;
}
ul.gallery li {
	float: left;
	margin: 10px 0 10px 10px; padding: 0;
	text-align: center;
	border: 1px solid #ccc;
	-moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	-khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	-webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	display: inline; /*--Gimp Fix aka IE6 Fix--*/
}
ul.gallery li a.thumb {
	width: 150px;
	height: 100px;
	padding: 5px;
	border-bottom: 1px solid #ccc;
	cursor: pointer;
}

ul.gallery li span { /*--Used to crop image--*/
	overflow: hidden;
	display: block;
}
ul.gallery li a.thumb:hover {
	background: #E7E7E7;
}
ul.gallery li h2 {
	font-size: 1em;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0; padding: 5px;
	background: #f0f0f0;
	border-top: 1px solid #fff; /*--Subtle bevel effect--*/
}
ul.gallery li h3 {
	font-size: 10px;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0; padding: 5px;
	background: #f0f0f0;
	border-top: 1px solid #fff; /*--Subtle bevel effect--*/
}
ul.gallery li a {text-decoration: none; color: #777; display: block;}

.scroll-pane {
	width: 200px;
	height: 200px;
	overflow: auto;
	background: #ccc;
	float: left;
}
#pane2 {
	height: 150px;
}

#s3slider {
    /*width: 400px; important to be same as image width */
   /*height: 300px;  important to be same as image height */
   width:					355px;
	height:					355px;
   position: relative; /* important */
   overflow: hidden; /* important */
}

#s3sliderContent {
   width:					355px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}

.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}

.s3sliderImage span {
   position: absolute; /* important */
   left: 0;
   font: 10px/15px Arial, Helvetica, sans-serif;
   padding: 10px 3px;
   width:					355px;
   background-color: #000;
   filter: alpha(opacity=70); /* here you can set the opacity of box with text */
   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
   opacity: 0.7; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   bottom: 0;
   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

.clear {
   clear: both;
} 

ul.event {
	width: 905px;
	list-style: none;
	margin: 0 auto; padding: 0;
}
ul.event li {
	float: left;
	margin: 10px 0 10px 10px; padding: 0;
	text-align: center;
	border: 1px solid #ccc;
	-moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	-khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	-webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	display: inline; /*--Gimp Fix aka IE6 Fix--*/
	width:300px;
}
ul.event li a.thumb {
	width: 150px;
	height: 100px;
	padding: 5px;
	border-bottom: 1px solid #ccc;
	cursor: pointer;
}

ul.event li span { /*--Used to crop image--*/
	overflow: hidden;
	
}
ul.event li a.thumb:hover {
	background: #E7E7E7;
}
ul.event li h2 {
	font-size: 1em;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0; padding: 5px;
	background: #f0f0f0;
	border-top: 1px solid #fff; /*--Subtle bevel effect--*/
}
ul.event li a {text-decoration: none; color: #777; display: block;}


.propCont {
	margin:0 0 20px;
	overflow:hidden;
}

.propCont h3 {
	font-size:20px;
	font-weight:normal;
	text-transform:capitalize;

	border:1px solid #666666;
	margin:0 0 10px;
	padding:5px 0 3px;
}


.propThumb {
	float:left;
	width:120px;
	margin:0 10px 5px 5px;
	text-align:center;
}

.propInfo {
	float:left;
	width:870px;
	margin: 5px;
	border:1px solid #666666;
}

.propDetails {
	border:1px solid #666666;
	background-color:#666666;
	padding:1px 5px;
	margin:0 0 6px;
	color:#fff;
	font-size:14px;
	width: 858px;
}


/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/art_gallery.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
.artistimenu {width:750px; height:220px; padding:100px 0 0 0; font-size:10px; background:url(art/back.gif);}
/* remove all the bullets, borders and padding from the default list styling */
.artistimenu ul {
width:150px;
padding:0;
margin:0;
list-style-type:none;
}
/* position relative so that you can position the sub levels */
.artistimenu li {
position:relative;
}

/* get rid of the table */
table {position:absolute; top:0; left:0;}

/* style the links */
.artistimenu a, .artistimenu a:visited {
display:block; 
text-decoration:none;
height:24px;
line-height:23px;
width:149px;
color:#fff;
background:#444;
text-indent:5px;
border-right:1px solid #ddd;
border-bottom:1px solid #ddd;
cursor:default;
}

/* style the link hover */
.artistimenu a:hover{
color:#666; 
background:#eee;
}
.artistimenu :hover > a{
color:#666; 
background:#eee;
}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.artistimenu ul ul {
visibility:hidden;
position:absolute;
top:0;
left:150px; 
}
/* make the second level visible when hover on first level list OR link */
.artistimenu ul :hover ul{
visibility:visible;
}
.artistimenu ul :hover ul a {background:#888;}
.artistimenu ul :hover ul a:hover {background:#ddd; color:#333;}
.artistimenu ul :hover ul :hover > a {background:#ddd; color:#333;}

/* keep the third level hidden when you hover on first level list OR link */
.artistimenu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.artistimenu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.artistimenu ul :hover ul :hover ul{ 
visibility:visible;
}
.artistimenu ul :hover ul :hover ul a {background:#666;}
.artistimenu ul :hover ul :hover ul a:hover {background:#ccc; color:#000;}
.artistimenu ul :hover ul :hover ul :hover > a {background:#ccc; color:#000;}

/* make the fourth level visible when you hover over third level list OR link */
.artistimenu ul :hover ul :hover ul :hover ul { 
visibility:visible;
text-align:center;
}

.artistimenu ul :hover ul :hover ul :hover ul li.pos1 {top:-100px;}
.artistimenu ul :hover ul :hover ul :hover ul li.pos2 {top:-125px;}
.artistimenu ul :hover ul :hover ul :hover ul li.pos3 {top:-150px;}
.artistimenu ul :hover ul :hover ul :hover ul li.pos4 {top:-175px;}
.artistimenu ul :hover ul :hover ul :hover ul li.pos5 {top:-200px;}
.artistimenu ul :hover ul :hover ul :hover ul li.pos6 {top:-225px;}

.artistimenu ul :hover ul :hover ul :hover ul li a {background:transparent; color:#fff; width:298px; height:320px;}
.artistimenu ul :hover ul :hover ul :hover ul li a img {border:1px solid #fff; margin-top:5px;}



.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 0px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #fff;
padding: 0px;
left: -1000px;
border: 0px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
height: 20px;
width: 20px;
}

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

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 465px; /*position where enlarged image should offset horizontally */
z-index: 60;
height: 20px;
width: 20px;
}

.tt { /*CSS for enlarged image*/
position: absolute;
background-color: #fff;
border: 0px;
visibility: hidden;
height: 355px;
width: 355px;
left: 4px;
}

.alignsx {
float: left;
}
.aligndx {
float: right;
}