html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

/*###############################################
Remember to define focus styles!
###############################################*/

:focus {
	outline: 0;
}

/*###############################################
General Settings
###############################################*/

body {
	line-height: 1;
	color: black;
	background: white;

}

ol, ul {
	list-style: none;
       color: #252526;
}

/*###############################################
Tables still need 'cellspacing="0"' in the markup
###############################################*/

table {
	border-collapse: separate;
	border-spacing: 0;
}

caption, th, td {
	text-align: left;
	font-weight: normal;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}

blockquote, q {
	quotes: "" "";
}

 /*###############################################
General Settings Body
###############################################*/

body {
	background: #313131;
	
    font-family: Arial, Orator Std, Helvetica, sans-serif;
}

a {
	text-decoration: none;
}


/*###############################################
Container info
###############################################*/
#container {
	color: #242527;
	font-size: 0.8em;
	font-family: Arial,Orator Std, Helvetica;
	width: 900px;
	margin: 0px auto;
	position: relative;
    
}

#container #headertext img {
	position: absolute;
	top: 136px;
	left: -80px;
}




  /*###############################################
Index Text Settings
###############################################*/

 #info {
	padding: 65px 30px 0px 330px;
	font-family: Arial,Orator Std, Helvetica;
	text-align: justify;
 }

 
/*###############################################
Menu info
###############################################*/

.menu {
    top: 300px;
	position: absolute;
	height: 800px;
	margin: 22px 0px 0px 0px;
    padding: 0px 0px 0px 25px;
	font-family: Arial,Orator Std, Helvetica;
	text-decoration: none;
}

/*###############################################
Simple dropdown Menu
###############################################*/

	 .chromestyle{
	position: absolute ;
	top: 100px;
	left: 45px;
	font: Utsaah, Arial,Orator Std, Helvetica;

}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.chromestyle ul{

	width: 100%;
	padding: 0px 0;
	margin: 0px;
	text-align: center; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
	display: inline;
}

.chromestyle ul li a{
	color: #999696;
	padding: 4px 10px;
	margin: 0;
	text-decoration: none;

}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
	background-color: ;
	color: #5694fc;
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{

	position:absolute;
	border-bottom-width: 0;
	font: Arial,Orator Std, Helvetica;
	font-size: 0.2em;
	line-height:18px;
	z-index:100;
	background-color: white;
	width: 200px;
	visibility: hidden;

}


.dropmenudiv a{
	width: auto;
	display: block;
	text-indent: 3px;
	padding: 2px 0;
	text-decoration: none;
	color: #242527;
}

* html .dropmenudiv a{ /*IE only hack*/
	width: 100%;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
	background-color: #d7dadc;
}

/*###############################################
Photos of Artwork
###############################################*/

 #photos2 {
	position:absolute;
	left: 55px;
	top: 80px;
	width: 900px;
	margin: 66px auto;
    font-family: Arial, Orator Std, Helvetica;
    padding: 0px;
    float: left;
}
 #photos2 img{
    padding: 0px 6px 8px 0px;

 }
 /*###############################################
Photos of Artwork
###############################################*/

 #photos3 {
	position:absolute;
	left: 40px;
	top: 75px;
	width: 900px;
	margin: 66px auto;
    font-family: Arial, Orator Std, Helvetica;
    padding: 0px 50px 0px 50px;
    float: left;
}
 #photos3 img{
    padding: 0px 20px 20px 0px;

 }
/*###############################################
Series Headings
###############################################*/
h1 {
    position:absolute;
	top: 100px;
	
	left:690px;
	font-size: 1em;
	font-family: Arial, Orator Std, Helvetica;
	color: #474747;
	padding: 0px 0px 5px 0px;
	}
	
h2 {
	font-size: 0.7em;
	font-family: Arial, Orator Std, Helvetica;
	color: #999696;
	padding: 0px 0px 5px 0px;
	}
	
h3 {
	font-size: 0.7em;
	font-family: Arial, Orator Std, Helvetica;
	color: #474747;
	padding: 8px 0px 5px 0px;
	}
	
h4 {
	font-size: 0.7em;
	font-family: Arial, Orator Std, Helvetica;
	color: #999696;
	padding: 0px 0px 5px 0px;
	}
h5 {
	font-size: 2em;
	font-family: Arial, Orator Std, Helvetica;
	color: #999696;
	padding: 0px 0px 5px 0px;
	}	



/*###############################################
CV
###############################################*/

 #cv {
 color: #b8b5b5;
 font-size: 1em;
 position: absolute;
 left: 50px;
 top: 145px;
 padding: 0px 0px 0px 0px;
 font-family: 'Raleway', sans-serif;
 text-align: justify;
 width: 800px;
 }
 
/*###############################################
Index Slideshow Code
###############################################*/ 

					  				  
/*
	UTILITY STYLES
*/				  				  
					  				  
.floatLeft 									{ float: left; margin-right: 10px;}
.floatRight									{ float: right; }
.clear 										{ clear: both; }
a											{ outline: none; }


/*
	PAGE STRUCTURE
*/
#page-wrap 									{ width: 500px; margin: 25px auto; position: relative; min-height: 500px;
											  background: url(images/bg.png) top center; }


/*
	TYPOGRAPHY
*/
ul											{ list-style: square inside; }
a, a:visited								{ color: #729dff; text-decoration: none; }
a:hover, a:active							{ color: white; }
blockquote									{ padding: 0 20px; margin-left: 20px; border-left: 20px solid #ccc; font-size: 14px; 
									  		  font-family: Georgia, serif; font-style: italic; margin-top: 10px;}

/*
	SLIDER
*/
.slider-wrap								{ width: 408px; position: absolute; top: 0px; left: 300px; }			
.stripViewer .panelContainer 
.panel ul									{ text-align: left; margin: 0 15px 0 30px; }
.stripViewer								{ position: relative; overflow: hidden; width: 300px; height: 408px; }
.stripViewer .panelContainer				{ position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel			{ float: left; height: 100%; position: relative; width: 419px; }
.stripNavL, .stripNavR, .stripNav			{ display: none; }
.nav-thumb 									{ border: 1px solid black; margin-right: 5px; }
#movers-row									{ margin: -43px 0 0 62px; }
#movers-row div								{ width: 20%; float: left; }
#movers-row div a.cross-link 				{ float: right; }
.photo-meta-data							{ background: url(images/transpBlack.png); padding: 10px; height: 30px; 
											  margin-top: -50px; position: relative; z-index: 9999; color: white; }
.photo-meta-data span 						{ font-size: 13px; }
.cross-link									{ display: block; width: 62px; margin-top: -14px; 
											  position: relative; padding-top: 15px; z-index: 9999; }
.active-thumb 								{ background: transparent url(images/icon-uparrowsmallwhite.png) top center no-repeat; }





/*###############################################
xxxxxxx
###############################################*/	
	
	
.cssnav
{
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(../images/headerroll01.jpg) no-repeat;
white-space: nowrap;
display: block;
width: 200px;
height: 250px;
margin: 0;
padding: 0;
}

.cssnav a
{
display: block;
color: #000000;
font-size: 11px;
width: 200px;
height: 250px;
display: block;
float: left;
color: black;
text-decoration: none;
}

.cssnav img
{
width: 200px;
height: 250px;
border: 0
}

* html a:hover
{
visibility:visible
}

.cssnav a:hover img
{
visibility:hidden
}

.cssnav span
{
position: absolute;
left: 35px;
top: 15px;
margin: 0px;
padding: 0px;
cursor: pointer;
}

/*###############################################
Container info
###############################################*/
#container3 {
	
	position: absolute;
	top: 403px;
	left: 680px;
	
}
/*###############################################
xxxxxxx2
###############################################*/	
	
	
.cssnav2
{
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(../images/headerroll01.jpg) no-repeat;
white-space: nowrap;
display: block;
width: 200px;
height: 250px;
margin: 0;
padding: 0;
}

.cssnav2 a
{
display: block;
color: #000000;
font-size: 11px;
width: 200px;
height: 250px;
display: block;
float: left;
color: black;
text-decoration: none;
}

.cssnav2 img
{
width: 200px;
height: 250px;
border: 0
}

* html a:hover
{
visibility:visible
}

.cssnav2 a:hover img
{
visibility:hidden
}

.cssnav2 span
{
position: absolute;
left: 35px;
top: 15px;
margin: 0px;
padding: 0px;
cursor: pointer;
}

#sketch {
position: absolute;
left: 500px;
top: 50px;
}

/* Stuart ;)  just to explain :)
your images each have their own DIV,
each DIV has 2 classes - used to target link behaviour, ie you 'a':
.thumbnail = to establish size & hide the link text
.vis1/2/3... = to assign each link their own background image & control background image positioning
===> you basically first set the link size and hide the text for the thumbnail link and through the numbered 'vis' class, different for each individual image, you can assign each link its own image and control the rollover behaviour.
 */

.thumbnail {
	float: left;
	width: 150px;
	padding: 0px 10px 10px 0px;
}
.thumbnail a {
	text-indent: -9999px;
	display: block;
	width: 150px;
	height: 150px;
}
.thumbnail a:link, .thumbnail a:visited {
	background-position: 0 0;
}
.thumbnail a:hover, .thumbnail a:active {
	background-position: 0 -319px;
}
.thumbnail.vis1 a {
	background: url(../pages/images/bluesmokerollover.gif) no-repeat;
	background-position: 0 0;
}
.thumbnail.vis1 a:visited {
	background-position: 0 -319px;
}
.thumbnail.vis1 a:hover {
	background-position: 0 -164px;
}	

.thumbnail.vis2 a {
	background: url(../pages/images/bamborollover.gif) no-repeat;
	background-position: 0 0;
}
.thumbnail.vis2 a:visited {
	background-position: 0 -319px;
}
.thumbnail.vis2 a:hover {
	background-position: 0 -164px;
}	

.thumbnail.vis3 a {
	background: url(../pages/images/treerollover.gif) no-repeat;
	background-position: 0 0;
}
.thumbnail.vis3 a:visited {
	background-position: 0 -319px;
}
.thumbnail.vis3 a:hover {
	background-position: 0 -164px;
}	

.thumbnail.vis4 a {
	background: url(../pages/images/archrollover.gif) no-repeat;
	background-position: 0 0;
}
.thumbnail.vis4 a:visited {
	background-position: 0 -319px;
}
.thumbnail.vis4 a:hover {
	background-position: 0 -164px;
}	

.thumbnail.vis5 a {
	background: url(../pages/images/houserollover.gif) no-repeat;
	background-position: 0 0;
}
.thumbnail.vis5 a:visited {
	background-position: 0 -319px;
}
.thumbnail.vis5 a:hover {
	background-position: 0 -164px;
}	


.thumbnail.vis6 a {
	background: url(../pages/images/surfrollover.gif) no-repeat;
	background-position: 0 0;
}
.thumbnail.vis6 a:visited {
	background-position: 0 -319px;
}
.thumbnail.vis6 a:hover {
	background-position: 0 -164px;
}	

.thumbnail.vis7 a {
	background: url(../pages/images/pencilrollover.gif) no-repeat;
	background-position: 0 0;
}
.thumbnail.vis7 a:visited {
	background-position: 0 -319px;
}
.thumbnail.vis7 a:hover {
	background-position: 0 -164px;
}	

.thumbnail.vis8 a {
	background: url(../pages/images/circitrollover.gif) no-repeat;
	background-position: 0 0;
}
.thumbnail.vis8 a:visited {
	background-position: 0 -319px;
}
.thumbnail.vis8 a:hover {
	background-position: 0 -164px;
}	

.thumbnail.vis9 a {
	background: url(../pages/images/windowrollover.gif) no-repeat;
	background-position: 0 0;
}
.thumbnail.vis9 a:visited {
	background-position: 0 -319px;
}
.thumbnail.vis9 a:hover {
	background-position: 0 -164px;
}	

.thumbnail.vis10 a {
	background: url(../pages/images/newyorkrollover.gif) no-repeat;
	background-position: 0 0;
}
.thumbnail.vis10 a:visited {
	background-position: 0 -319px;
}
.thumbnail.vis10 a:hover {
	background-position: 0 -164px;
}	


.thumbnail.vis11 a {
	background: url(../pages/images/handsrollover.gif) no-repeat;
	background-position: 0 0;
}
.thumbnail.vis11 a:visited {
	background-position: 0 -319px;
}
.thumbnail.vis11 a:hover {
	background-position: 0 -164px;
}	

.thumbnail.vis12 a {
	background: url(../pages/images/hallrollover.gif) no-repeat;
	background-position: 0 0;
}
.thumbnail.vis12 a:visited {
	background-position: 0 -319px;
}
.thumbnail.vis12 a:hover {
	background-position: 0 -164px;
}	
.thumbnail.vis13 a {
	background: url(../pages/images/leafrollover.gif) no-repeat;
	background-position: 0 0;
}
.thumbnail.vis13 a:visited {
	background-position: 0 -319px;
}
.thumbnail.vis13 a:hover {
	background-position: 0 -164px;
}

.thumbnail.vis14 a {
	background: url(../pages/images/patternrollover.gif) no-repeat;
	background-position: 0 0;
}
.thumbnail.vis14 a:visited {
	background-position: 0 -319px;
}
.thumbnail.vis14 a:hover {
	background-position: 0 -164px;
}	

.thumbnail.vis15 a {
	background: url(../pages/images/streetrollover.gif) no-repeat;
	background-position: 0 0;
}
.thumbnail.vis15 a:visited {
	background-position: 0 -319px;
}
.thumbnail.vis15 a:hover {
	background-position: 0 -164px;
}	

.thumbnail.vis16 a {
	background: url(../pages/images/milkrollover.gif) no-repeat;
	background-position: 0 0;
}
.thumbnail.vis16 a:visited {
	background-position: 0 -319px;
}
.thumbnail.vis16 a:hover {
	background-position: 0 -164px;
}	


.thumbnail.vis17 a {
	background: url(../pages/images/house2rollover.gif) no-repeat;
	background-position: 0 0;
}
.thumbnail.vis17 a:visited {
	background-position: 0 -319px;
}
.thumbnail.vis17 a:hover {
	background-position: 0 -164px;
}	

.thumbnail.vis18 a {
	background: url(../pages/images/shaprollover.gif) no-repeat;
	background-position: 0 0;
}
.thumbnail.vis18 a:visited {
	background-position: 0 -319px;
}
.thumbnail.vis18 a:hover {
	background-position: 0 -164px;
}	
/*###############################################
xxxxxxx2xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
###############################################*/

	
.clearboth { 
 clear: both; 

} 

.image {
	padding: 0px 10px 10px 470px;
}

/*! http://responsiveslides.com v1.54 by @viljamis */

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }
#wrapper {
  padding: 58px 20px 0px 20px;
  }


.rslides {
  margin: 0 auto 40px;
  }

#slider2,
#slider3 {
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  margin: 0 auto;
  }

.rslides_tabs {
  list-style: none;
  padding: 0;
  background: rgba(0,0,0,.25);
  box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
  -moz-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
  font-size: 18px;
  list-style: none;
  margin: 0 auto 50px;
  max-width: 540px;
  padding: 10px 0;
  text-align: center;
  width: 100%;
  }

.rslides_tabs li {
  display: inline;
  float: none;
  margin-right: 1px;
  }

.rslides_tabs a {
  width: auto;
  line-height: 20px;
  padding: 9px 20px;
  height: auto;
  background: transparent;
  display: inline;
  }

.rslides_tabs li:first-child {
  margin-left: 0;
  }

.rslides_tabs .rslides_here a {
  background: rgba(255,255,255,.1);
  color: #fff;
  font-weight: bold;
  }

a {
  color: #5694fc;
  text-decoration: none;
  }

#download {
  background: #333;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  display: block;
  font-size: 20px;
  font-weight: bold;
  margin: 60px auto;
  max-width: 500px;
  padding: 20px;
  }

#download:hover {
  background: rgba(255,255,255,.15);
  }

.footer {
  font-size: 11px;
  }

/* Callback example */



.events {
  list-style: none;
  }

.callbacks_container {
  margin-bottom: 50px;
  position: relative;
  float: left;
  width: 100%;
  }

.callbacks {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.callbacks li {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  }

.callbacks img {
  display: block;
  position: relative;
  z-index: 1;
  height: auto;
  width: 100%;
  border: 0;
  }

.callbacks .caption {
  display: block;
  position: absolute;
  z-index: 2;
  font-size: 20px;
  text-shadow: none;
  color: #fff;
  background: #000;
  background: rgba(0,0,0, .8);
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 20px;
  margin: 0;
  max-width: none;
  }

.callbacks_nav {
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  top: 52%;
  left: 0;
  opacity: 0.7;
  z-index: 3;
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none;
  height: 61px;
  width: 38px;
  background: transparent url("themes/themes.gif") no-repeat left top;
  margin-top: -45px;
  }

.callbacks_nav:active {
  opacity: 1.0;
  }

.callbacks_nav.next {
  left: auto;
  background-position: right top;
  right: 0;
  }

#slider3-pager a {
  display: inline-block;
}

#slider3-pager img {
  float: left;
}

#slider3-pager .rslides_here a {
  background: transparent;
  box-shadow: 0 0 0 2px #666;
}

#slider3-pager a {
  padding: 0;
}

@media screen and (max-width: 600px) {
  h1 {
    font: 24px/50px "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
  .callbacks_nav {
    top: 47%;
    }
	}
  /*###############################################
Bio
###############################################*/

 #bio {
 color: #b8b5b5;
 
 font-size: 1.2em;
 position: absolute;
 left: 50px;
 top: 145px;
 padding: 0px 0px 0px 0px;
 font-family: 'Raleway', sans-serif;
 text-align: justify;
 width: 800px;
 }
 
 /*###############################################
Bio
###############################################*/

 #copy {
 color: ;
 
 font-size: 0.8em;
 position: absolute;
 left: 50px;
 top: 630px;
 padding: 0px 0px 0px 0px;
 
 text-align: justify;
 width: 800px;
 }