body {
	background-color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-decoration: none;
	line-height: 22px;
	color: white;
}





H1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight:normal;
	text-align:center;
	line-height: 20px;
	margin:0;
	color: #E8E0AE;
	background-color: #333333;
	padding: .10cm;
}

H2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 28px;
	font-weight:normal;
	line-height: 30px;
	margin-bottom:0;
	color: #E8E0AE;
}

H3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight:normal;
	text-align:center;
	line-height: 22px;
	margin:0;
	color: #E8E0AE;
	padding: .10cm;
}



td.foot {
	color:           #999;
	font-size:       11px;
	line-height:     14px;
	font-family:     Arial, Helvetica;
	text-align:      left;
	padding-left:    .45cm;
	padding-top:    .15cm;
}

/* Hyperlinks */

a
{
  outline: none;
}

:focus
{
  -moz-outline-style: none;
}



a {
	background:      transparent;
	font-size:       12px;
	font-family:     Arial, Helvetica;
	color:			 #CCCCCC;
	height:          100%;
	line-height:     18px;
	text-decoration: none;
	
}


a:link {
	background:      transparent;
	font-size:       12px;
	font-family:     Arial, Helvetica;
	color:			 #CCCCCC;
	height:          100%;
	line-height:     18px;
	text-decoration: none;
	
}

a:hover {
	background:      transparent;
	font-size:       12px;
	font-family:     Arial, Helvetica;
	color:			 #F2AC28;
	height:          100%;
	line-height:     18px;
	text-decoration: none; 
}



/* Hyperlinks LIST/INDEX */


a.list {
	background:      transparent;
	font-size:       12px;
	font-family:     Arial, Helvetica;
	color:			 #F2AC28;
	height:          100%;
	line-height:     14px;
	text-decoration: none;	
}


a.list:link {
	background:      transparent;
	font-size:       12px;
	font-family:     Arial, Helvetica;
	color:			 #F2AC28;
	height:          100%;
	line-height:     14px;
	text-decoration: none;
	
}

a.list:hover {
	background:      transparent;
	font-size:       12px;
	font-family:     Arial, Helvetica;
	color:			 #CCCCCC;
	height:          100%;
	line-height:     14px;
	text-decoration: none; 
	
}


a:list: visited {
	background:      transparent;
	font-size:       12px;
	font-family:     Arial, Helvetica;
	color:			 #F2AC28;
	height:          100%;
	line-height:     14px;
	text-decoration: none;
	
}

/* Hyperlinks BIO Nav */

a.bionav {
	background:      transparent;
	font-size:       15px;
	font-family:     Arial, Helvetica;
	color:			 #CCCCCC;
	height:          100%;
	line-height:     28px;
	text-decoration: none;
}

a.bionav:link {
	background:      transparent;
	font-size:       15px;
	font-family:     Arial, Helvetica;
	color:			 #CCCCCC;
	height:          100%;
	line-height:     28px;
	text-decoration: none;
}

a.bionav:hover {
	background:      transparent;
	font-size:       15px;
	font-family:     Arial, Helvetica;
	color:			 #F2AC28;
	height:          100%;
	line-height:     28px;
	text-decoration: none; 
	
}	

/* Hyperlinks LIST/GALLERY */


a.gallery {
	background:      transparent;
	font-size:       12px;
	font-family:     Arial, Helvetica;
	color:			 #CCC;
	height:          100%;
	line-height:     14px;
	text-decoration: none;	
}


a.gallery:link {
	background:      transparent;
	font-size:       12px;
	font-family:     Arial, Helvetica;
	color:			 #CCC;
	height:          100%;
	line-height:     14px;
	text-decoration: none;
	
}

a.gallery:hover {
	background:      transparent;
	font-size:       12px;
	font-family:     Arial, Helvetica;
	color:			 #F2AC28;
	height:          100%;
	line-height:     14px;
	text-decoration: none; 
	
}


a:gallery: visited {
	background:      transparent;
	font-size:       12px;
	font-family:     Arial, Helvetica;
	color:			 #CCC;
	height:          100%;
	line-height:     14px;
	text-decoration: none;	
}

/* Hyperlinks FOOTER */


a.foot {
	background:      transparent;
	font-size:       11px;
	font-family:     Arial, Helvetica;
	color:			 #999;
	line-height:     14px;
	text-decoration: none;	
}


a.foot:link {
	background:      transparent;
	font-size:       12px;
	font-family:     Arial, Helvetica;
	color:			 #999;
	line-height:     14px;
	text-decoration: none;
	
}

a.foot:hover {
	background:      transparent;
	font-size:       12px;
	font-family:     Arial, Helvetica;
	color:			 #F2AC28;
	line-height:     14px;
	text-decoration: none; 
	
}


a.foot:visited {
	background:      transparent;
	font-size:       12px;
	font-family:     Arial, Helvetica;
	color:			 #999;
	line-height:     14px;
	text-decoration: none;
	
}	



/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: transparent;
padding: 0px;
left: -500px;
border: none;
visibility: hidden;
color: black;
text-decoration: none;
}

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

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -500px;
left: -100px; /*position where enlarged image should offset horizontally */
z-index:100;
}

.thumbnail2{
position: relative;
z-index: 0;
}

.thumbnail2:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail2 span{ /*CSS for enlarged image*/
position: absolute;
background-color: transparent;
padding: 0px;
left: -500px;
border: none;
visibility: hidden;
color: black;
text-decoration: none;
}

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

.thumbnail2:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -500px;
right: -160px; /*position where enlarged image should offset horizontally */
z-index:100;
}


/* ARTISIAN INTERIORS SLIDE SHOW */

/*Time for the CSS*/


.slider{
	width: 875px; /*Same as width of the large image*/
	position: relative;
	/*Instead of height we will use padding*/
	padding-top: 450px; /*That helps bring the labels down*/
	
	margin: 0px auto;
	
	/*Lets add a shadow*/
	box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}


/*Last thing remaining is to add transitions*/
.slider>img{
	position: absolute;
	left: 0; top: 0;
	transition: all 0.0s;
}

.slider input[name='slide_switch'] {
	display: none;
}

.slider label {
	/*Lets add some spacing for the thumbnails*/
	margin: 18px 0 0 18px;
	border: 3px solid #999;
	
	float: left;
	cursor: pointer;
	transition: all 0.5s;
	
	/*Default style = low opacity*/
	opacity: 0.6;
}

.slider label img{
	display: block;
}

/*Time to add the click effects*/
.slider input[name='slide_switch']:checked+label {
	border-color: #666;
	opacity: 1;
}
/*Clicking any thumbnail now should change its opacity(style)*/
/*Time to work on the main images*/
.slider input[name='slide_switch'] ~ img {
	opacity: 0;
	transform: scale(1.1);
}
/*That hides all main images at a 110% size
On click the images will be displayed at normal size to complete the effect
*/
.slider input[name='slide_switch']:checked+label+img {
	opacity: 1;
	transform: scale(1);
}
/*Clicking on any thumbnail now should activate the image related to it*/

/*We are done :)*/