@charset "UTF-8";
/* CSS Document */
body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, a,  font, img, 
strong, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, table, tbody, tfoot, thead, tr, th, td
{
	margin: 0;
	padding: 0;
	border: 0;
}
header, footer, aside, nav, article, section{  
    display: block;
}
body {
	font-family: "Lucida Sans", Verdana, Arial, Helvetica, sans-serif;
	color: #4E4E4E;
	font-size: 15px;
}
a {
	font-weight: bold;
	color: #008BAF;
	text-decoration: none;
}
a:hover {
	font-weight: bold;
	color: #CC6600;
	text-decoration: none;
}

#topwrapper {
	margin:auto;
	max-width:1000px;
}
nav {
	padding: 30px 10px;
	width: 100%;
	min-height:50px;
	margin: auto;
}
nav ul{
	float: right;
}
nav li{
	list-style-type: none;
	float: left;
}
nav li a{
	display: block;
	padding: 10px 20px;
	text-decoration: none;
	color: #666666;
	font-weight: 400;
}
nav  li  a:hover{
	text-decoration: none;
	font-weight:normal;
}
#joshuahaleart {
	display: block;
	float:left;
	clear:none;
	width:20%;
}
#joshuahaleart a img {
	width:95%;
	
}
#bannerwrapper {
    background-color: #FFF;
    border-top: 1px solid #E9E9E9;
    border-bottom: 1px solid #E9E9E9;
}
#banner {
    max-width: 1000px;
    margin: auto;
    padding: 0px 0px;
    background-color: #FFF;
    min-height: 300px;
    background-image: url(site_images/larger/049_Hale_Shibboleth.jpg);
	background-size: cover;
	background-position:top;
}
#banner.banner2 {
    background-image: url(site_images/larger/048_Hale_After_Friedrich.jpg);
	background-position:center;
}
#banner.banner3 {
    background-image: url(site_images/larger/046_Hale_Beautiful.jpg);
    background-position: center;
}
#workbanner {
	max-width: 1000px;
    margin: 0px auto 20px auto;
    padding: 20px 20px;
    background-color: #FFF;
	height:auto;
	overflow:auto;
}
#mainwhitewrapper {
}
#mainwhite {
	max-width: 1000px;
	margin: auto;
	padding: 40px 20px;
	font-size: 13px;
	overflow:auto;
}
.gallery {
	
}

h2   {
	color: #008BAF;
	font-weight: 600;
	font-size: 24px;
	font-family: "Open Sans", "Lucida Sans", Verdana, Arial, Helvetica, sans-serif;
}
#workbanner h2 {
	margin-left:8px;
	}
h3   {
	color: #4F4F4F;
	font-weight: 600;
	font-size: 18px;
	overflow:auto;
}
h3 a {
	color: #CC6600;
	font-weight: 600;
	font-size: 18px;
	float:right;
	clear:both;
	overflow:auto;
	display:block;
	width:auto;
	padding-right:15px;
}
h4   {
	color: #4F4F4F;
	font-weight: 600;
	font-size: 16px;
}
.bio {
	font-size:1.2em;
	line-height: 1.6em;
	overflow:auto;
	text-align: justify;
	column-count: 2;
	column-gap: 40px;
	vertical-align: top;
}
.statement {
	column-count: 2;
	column-gap: 40px;
	font-size:1.2em;
	line-height: 1.6em;
	overflow:auto;
	text-align: justify;
}
.maindescription {
	column-gap: 40px;
	font-size:1.2em;
	line-height: 1.6em;
	column-count:2;
	text-align: justify;
}
#rightbuttons {
	float: right;
	margin: 0px 0px 0px 50px;
}
#rightbuttons ul {
}
#rightbuttons  ul li {
    list-style-type: none;
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 1px;
}
#rightbuttons  ul li a {
    display: block;
    width: 300px;
    background-color: #E8E8E8;
    color: #666666;
    text-decoration: none;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    text-align: center;
    font-family: "Open Sans", "Lucida Sans", Verdana, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-weight: normal;
}
#rightbuttons   ul  li  a:hover {
	background-color: #BBD9E9;
	color: #333C40;
}
#positioningbox {
	position: relative;
	width: 700px;
	float: right;
}
#showcase {
	width: 610px;
	display: block;
	margin: 30px 20px 30px 0px;
	float: right;
	position: relative;
	height: 650px;
	overflow: hidden;
}
#showcase   ul#slideshow {
	list-style-type: none;
	width: 100000px;
	display: block;
	position: absolute;
}
#showcase   ul#slideshow li  {
	list-style-type: none;
	float: left;
	width: 600px;	
	margin-right: 75px;
	/*background-color: #FBFBFB;*/
}
#showcase   ul#slideshow   li img {

	margin: 0px 0px 20px 0px;
}
img.buyshowcase        {
	height: 480px;
	margin: 0px 40px 20px 20px;
	float: left;
}
.center {
	text-align: center;
	background-color: #FFFFFF;
	height:480px;
}
.captionbox {
	padding: 10px 15px 10px 15px;
	font-size: 14px;
	height: 125px;
}
#left {
	position: absolute;
	left: 30px;
	top: 220px;
	width: 50px;
	z-index: 100;
}
#left a {
	width: 0px;
	height: 0px;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-right: 20px solid #008BAF;
	display:block;
}
#left  a:hover {
	width: 0px;
	height: 0px;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-right: 20px solid #CC6600;
	display:block;
}
#lefthotbutton {
	position:absolute;
	left:20px;
	top:47px;
	width:150px;
	height:460px;
	z-index:1;
}
#lefthotbutton   a {
	display:block;
	height: 100%;
	width: 100%;
}
#righthotbutton {
	position:absolute;
	top:47px;
	width:150px;
	height:460px;
	z-index:1;
	right: -25px;
}
#righthotbutton  a {
	display:block;
	height: 100%;
	width: 100%;
}
#right {
	position: absolute;
	right: -10px;
	top: 220px;
	z-index: 100;
}
#right a {
	width: 0px;
	height: 0px;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 20px solid #008BAF;
	display:block;
}
#right  a:hover {
	width: 0px;
	height: 0px;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 20px solid #CC6600;
	display:block;
}
a.largeview {
	color: #666666;
	float: right;
	font-weight: normal;
}
a.largeview:hover {
	color: #CC6600;
}
a.largeview .smallrightarrow  {
	width: 0px;
	height: 0px;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 5px solid #333333;
	display:inline-block;
	margin-left: 5px;
}
a.largeview:hover  .smallrightarrow  {
	width: 0px;
	height: 0px;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 5px solid #CC6600;
	display:inline-block;
}
#showcase h2 {
	color: #008BAF;
	font-size: 20px;
	font-style: italic;
}
.buybuttons{
	display:none;
	padding:8px;
	background-color:#E8E8E8;
	color:#666666;
	float:right;
	text-align:center;
	margin: 0px 10px 10px 0px;
	font-weight: normal;
	font-size: 12px;
}
.buybuttons:hover{
	display:block;
	padding:8px;
	background-color:#BBD9E9;
	color:#333C40;
	float:right;
	text-align:center;
	margin: 0px 10px 10px 0px;
	font-weight: normal;
}
.bigbuttons {
	background-color: #E8E8E8;
	padding: 10px;
	color: #666666;
	float: right;
	clear:both;
	overflow:auto;
	display:block;
	width:auto;
	margin-right:15px;
	margin-bottom:30px;
	font-size:13px;
}
.bigbuttons:hover {
	background-color: #BBD9E9;
	padding: 10px;
	color: #333C40;
}
ul#thumbnails {
    list-style-type: none;
    width: 100%;
    padding: 30px 0px 0px 0px;
	overflow: auto;
}
ul#thumbnails li {
	list-style-type: none;
	margin: 4px;
	float: left;
}
ul#thumbnails  li a {
	border: 4px solid #FFF;
	display: block;
}
ul#thumbnails   li  a:hover {
	border: 4px solid #CCC;
}
ul#thumbnails  li  a img {
}
.inline {
	display: inline;
}
hr {
	clear:both;
}
#footerwrapper {
	background-color: #F6F6F6;
}
#footer {
	width: 1000px;
	margin: auto;
	padding: 5px 0px;
	color: #999999;
	text-align: center;
}

.designimage{
	width:100%;
	height:auto;
}
.box {
	width:100%;
    box-shadow: 6px 3px 8px 4px #D2D2D2;
}


@media screen and (max-width:600px){
	body {width:100%}
	#topwrapper {width:100%}
	#bannerwrapper{width:100%}
	#mainwhitewrapper{width:100%}
	#footerwrapper {width:100%}
	#footer {width:100%}
	nav {
		width:100%;
		overflow:auto;
		margin:0px;
		padding:20px 0px 20px 0px;
	}
	nav ul {
		width:100%;
		margin:0px;
		padding:10px 0px;
	}
	nav ul li {
		clear:both;
		float:none;
		margin:0px;
		padding:0px;
		width:100%;
	}
	nav ul li a{
		clear:both;
		float:none;
		width:100%;
		display:block;
		text-align:center;
		margin:0px;
		padding:20px 0px;
		font-size:1em;
	}
	nav ul li a:hover{
		clear:both;
		float:none;
		width:100%;
		display:block;
		text-align:center;
		margin:0px;
		padding:20px 0px;
	}
	#joshuahaleart {
    width: 50%;
    clear: both;
    text-align: center;
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: auto;
    padding: 0px;
    border-bottom: 1px #CCC;
    float: none;
	}
	#mainwhite {
		padding:20px;
	}
	
	#workbanner {
		padding:20px;
	}
	.bio {
	column-count: 1;
}
	.statement {
	column-count: 1;
}
	.maindescription {
	column-count:1;
}
	.gallery {
		padding-left:15px;
	}
	#workbanner h2 {
		padding:20px;
	}
	
}