/* global styles */
html{
	line-height: 1.5;
	background: #fff;
	color: #333;
}
html,input,textarea {
	font-family: "Trebuchet MS", Helvetica, sans-serif
}
body {
	margin: 0;
	padding: 0;
}

/* links */
a:link {
	text-decoration:none;
}
a:visited {
	text-decoration:none;
}
a:hover {
	text-decoration:none;
}
a:active {
	text-decoration:none;
}

/* background */
.space {
	position: absolute;
	top: 0;
	z-index: -3;
	background-color:#fff;
	width: 100%;
	height: 200%;
	opacity: 1;
	background: url('images/palette.jpg') no-repeat center 140px;
}
.atmosphere {
	position: absolute;
	top: 0;
	z-index: -2;
	background-color:#fff;
	width: 100%;
	height: 150%;
	opacity: .1;
	filter:alpha(opacity=50); /* For IE8 and earlier */
	background: url('images/palette.jpg') no-repeat center 140px;
	display: none;
	-webkit-animation: fadeSpace 1s linear 0 1 alternate;
	animation: fadeSpace 5s linear 2s infinite alternate;
	-moz-animation: faceSpace 5s linear 2s infinite alternate;
}
.sky {
  position: absolute;
  height: 1024px;
  z-index: -1;
	background-repeat: no-repeat;
	width: 100%;
}

/* header */
.header {
	height: 80px;
	padding-top: 20px;
	z-index:-1;
	width: 100%;
	background-color: #fff;
	opacity: .85;
	filter:alpha(opacity=85); /* For IE8 and earlier */
}
#logo {
	cursor: pointer;
}
.header-bar-magenta {
	color:#939;
}
.header-bar-turquoise {
	color: #099;
}
.header-tagline {
	text-align: center;
	width: 100%;
	opacity: .7;
	letter-spacing: .4em;
	height: 28px;
	margin-top: 45px;
	padding-top: 7px;
	padding-bottom:0;
	color: #000;
	font-size: 90%;
	background: -moz-linear-gradient(-45deg,  rgba(238,238,238,0.01) 0%, rgba(255,255,255,1) 50%, rgba(238,238,238,0.1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(238,238,238,0.01)), color-stop(50%,rgba(255,255,255,1)), color-stop(100%,rgba(238,238,238,0.1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg,  rgba(238,238,238,0.01) 0%,rgba(255,255,255,1) 50%,rgba(238,238,238,0.1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg,  rgba(238,238,238,0.01) 0%,rgba(255,255,255,1) 50%,rgba(238,238,238,0.1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg,  rgba(238,238,238,0.01) 0%,rgba(255,255,255,1) 50%,rgba(238,238,238,0.1) 100%); /* IE10+ */
	background: linear-gradient(-45deg,  rgba(238,238,238,0.01) 0%,rgba(255,255,255,1) 50%,rgba(238,238,238,0.1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03eeeeee', endColorstr='#1aeeeeee',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

/* nav */
.nav {
	background-color: #666;
	opacity: .9;
	height: 50px;
	border-bottom: 1px solid #ccc;	
	z-index: 2;
	width: 100%;
	text-align: center;
	padding: 0;
	margin: 0;
		
	background: -moz-linear-gradient(top,  rgba(102,102,102,0) 0%, rgba(133,133,133,0) 62%, rgba(145,145,145,0.54) 85%, rgba(113,113,113,0.8) 96%, rgba(102,102,102,0.8) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(102,102,102,0)), color-stop(62%,rgba(133,133,133,0)), color-stop(85%,rgba(145,145,145,0.54)), color-stop(96%,rgba(113,113,113,0.8)), color-stop(100%,rgba(102,102,102,0.8))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(102,102,102,0) 0%,rgba(133,133,133,0) 62%,rgba(145,145,145,0.54) 85%,rgba(113,113,113,0.8) 96%,rgba(102,102,102,0.8) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(102,102,102,0) 0%,rgba(133,133,133,0) 62%,rgba(145,145,145,0.54) 85%,rgba(113,113,113,0.8) 96%,rgba(102,102,102,0.8) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(102,102,102,0) 0%,rgba(133,133,133,0) 62%,rgba(145,145,145,0.54) 85%,rgba(113,113,113,0.8) 96%,rgba(102,102,102,0.8) 100%); /* IE10+ */
	background: linear-gradient(top,  rgba(102,102,102,0) 0%,rgba(133,133,133,0) 62%,rgba(145,145,145,0.54) 85%,rgba(113,113,113,0.8) 96%,rgba(102,102,102,0.8) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00666666', endColorstr='#cc666666',GradientType=0 ); /* IE6-9 */
}
ul.nav-list {
	list-style-type: none;	
	display: inline-block;
}
ul.nav-list li {
	float: left;
	width: 100px;	
	height: 25px;
	margin: 3px 10px;
	padding: 5px 5px 0px 5px;
	text-align: center;
	letter-spacing: .2em;
	font-size: 90%;	
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	color: #fff;
	background-color: #111;
	opacity: .9;
	filter:alpha(opacity=90); /* For IE8 and earlier */
	cursor: pointer;
	border-top-right-radius: 4px;
	border-top-left-radius: 4px;
}
ul.nav-list li#nav-painting {
	background-color: #655187;
	opacity: 1;
}
ul.nav-list li#nav-drawing {
	background-color: #3d8a74;
}
ul.nav-list li#nav-digital {
	background-color: #d23202;
}
ul.nav-list li#nav-about {
	background-color: #41547e;
}
ul.nav-list li#nav-contact {
	background-color: #eeb004;
}

/* thumbnails */
#painting-thumbnails {
	display: none;
	background-color: #655187;
}
#drawing-thumbnails {
	display: none;
	background-color: #3d8a74;	
}
#digital-thumbnails {
	display: none;
	background-color: #d23202;	
}
#about-thumbnails {
	display: none;
	background-color: #41547e;	
}
#contact-thumbnails {
	display: none;
	background-color: #eeb004;	
}

/* thumbnail-nav */
.satellites {
	z-index: 0;
	height: 100%;
}
.thumbnail-container {
	text-align: center;
	opacity: .2;
	filter:alpha(opacity=50); /* For IE8 and earlier */
	height: 150%;
	padding: 10px;
	display: block;
	animation: thumbnailContainerEnter 1s linear 0 1 alternate;
	-moz-animation: thumbnailContainerEnter 1s linear 0 1 alternate;
	-webkit-animation: thumbnailContainerEnter 1s linear 0 1 alternate;
	z-index: 1;
}
ul.thumbnail-list {
	position: relative;
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: inline-block;
}
ul.thumbnail-list li {
	display: inline-block;
	float: left;
	width: 50px;	
	height: 50px;
	margin: 0px 5px;
	border: 1px solid #ccc;
	border-radius: 5px;
	opacity: 1;
	animation: thumbnailEnter 2s linear 0 1 alternate;
	-moz-animation: thumbnailEnter 2s linear 0 1 alternate;
	-webkit-animation: thumbnailEnter 2s linear 0 1 alternate;
}
@-webkit-keyframes thumbnailContainerEnter  {
	0%   {width: 0;}
	50%  {width: 50%;}
	75%  {width: 100%;}
	100% {width: 100%;}
}
@keyframes thumbnailContainerEnter  {
	0%   {width: 0;}
	50%  {width: 50%;}
	75%  {width: 100%;}
	100% {width: 100%;}
}
@-moz-keyframes thumbnailContainerEnter  {
	0%   {width: 0;}
	50%  {width: 50%;}
	75%  {width: 100%;}
	100% {width: 100%;}
}

@-webkit-keyframes thumbnailEnter {
	0%   {opacity: 0; filter:alpha(opacity=0); }
	50%  {opacity: 0; filter:alpha(opacity=0);}
	75%  {opacity: 1; filter:alpha(opacity=1);}
	100% {opacity: 1; filter:alpha(opacity=1);}
}
@keyframes thumbnailEnter {
	0%   {opacity: 0; filter:alpha(opacity=0); }
	50%  {opacity: 0; filter:alpha(opacity=0);}
	75%  {opacity: 1; filter:alpha(opacity=1);}
	100% {opacity: 1; filter:alpha(opacity=1);}
}
@-moz-keyframes thumbnailEnter  {
	0%   {opacity: 0; filter:alpha(opacity=0); }
	50%  {opacity: 0; filter:alpha(opacity=0);}
	75%  {opacity: 1; filter:alpha(opacity=1);}
	100% {opacity: 1; filter:alpha(opacity=1);}
}

@-webkit-keyframes mainEnter {
	0%   {opacity: 0; filter:alpha(opacity=0);}
	50%  {opacity: 0; filter:alpha(opacity=0);}
	75%  {opacity: .7; filter:alpha(opacity=70);}
	100% {opacity: 1; filter:alpha(opacity=100);}
}
@-moz-keyframes mainEnter {
	0%   {opacity: 0; filter:alpha(opacity=0);}
	50%  {opacity: 0; filter:alpha(opacity=0);}
	75%  {opacity: .7; filter:alpha(opacity=70);}
	100% {opacity: 1; filter:alpha(opacity=100);}
}
@keyframes mainEnter {
	0%   {opacity: 0; filter:alpha(opacity=0);}
	50%  {opacity: 0; filter:alpha(opacity=0);}
	75%  {opacity: .7; filter:alpha(opacity=70);}
	100% {opacity: 1; filter:alpha(opacity=100);}
}

@-webkit-keyframes fadeSpace {
	0%   {opacity: 1; filter:alpha(opacity=100);}
	50%  {opacity: .8; filter:alpha(opacity=80);}
	75%  {opacity: .5; filter:alpha(opacity=50);}
	100% {opacity: .5; filter:alpha(opacity=50);}
}
@-moz-keyframes fadeSpace {
	0%   {opacity: 1; filter:alpha(opacity=100);}
	50%  {opacity: .8; filter:alpha(opacity=80);}
	75%  {opacity: .5; filter:alpha(opacity=50);}
	100% {opacity: .5; filter:alpha(opacity=50);}
}
@keyframes fadeSpace {
	0%   {opacity: 1; filter:alpha(opacity=100);}
	50%  {opacity: .8; filter:alpha(opacity=80);}
	75%  {opacity: .5; filter:alpha(opacity=50);}
	100% {opacity: .5; filter:alpha(opacity=50);}
}
/* main */
.main {
	width: 800px;
	left: 25%;
	position: absolute;
	z-index: 3;
	opacity: 1;
	top: 180px;
}
.intro {
  width: 90%;
}
#tab-painting {
	display: none;	
}
#tab-drawing {
	display: none;	
}
#tab-digital {
	display: none;	
}
#tab-about {
	display: none;	
}
#tab-contact {
	display: none;	
}
.item {
	width: 300px;
	margin: 0 50px 30px 0;
	animation: mainEnter 2s linear 0 1 alternate;
	-moz-animation: mainEnter 2s linear 0 1 alternate;
	-webkit-animation: mainEnter 2s linear 0 1 alternate;
	-moz-box-shadow: 3px 3px 4px #888;
	-webkit-box-shadow: 3px 3px 4px #888;
	box-shadow: 3px 3px 7px #888;
}
.item-left {
	float: left;
}
.item-right {
	float: left;
}
.description {
	background-color: #fff;
	height: 50px;
	opacity: .8;
	filter:alpha(opacity=80); /* For IE8 and earlier */
}
.image {
	min-width: 300px;
	min-height: 190px;
	background-repeat:no-repeat;
	background-position:center center	;
}
h2.title {
	font-size: 18px;
	width: 100%;
	margin: 0;
	padding: 0 0 0px 10px;
	letter-spacing: normal;
}
h2 {
	font-size: 110%;
	margin: 0;
	padding: 10px 0;
	letter-spacing: .5em;
}
.medium {
	font-size: 14px;
	font-weight: normal;	
	padding: 0 0 0 10px;
	float: left;
}
.size {
	float: right;
	font-size: 12px;
	font-weight: normal;	
	padding: 3px 3px 0 10px;
	color: #666;
	font-face: italic;
}


/* painting thumbnails */
#painting-apples {
	background-image:url('images/painting-apples.jpg');
}
#painting-annecy {
	background-image:url('images/painting-annecy.jpg');
}
#painting-brioche {
	background-image:url('images/painting-brioche.jpg');
}
#painting-ell {
	background-image:url('images/painting-ell.jpg');
}
#painting-lemons {
	background-image:url('images/painting-lemons.jpg');
}
#painting-monumental-lemons {
	background-image:url('images/painting-monumental-lemons.jpg');
}
#painting-vegas-madonna {
	background-image:url('images/painting-vegas-madonna.jpg');
}

/* drawing thumbnails */
#drawing-hat {
	background-image:url('images/drawing-hat.jpg');
}
#drawing-leaf {
	background-image:url('images/drawing-leaf.jpg');
}
#drawing-mummy {
	background-image:url('images/drawing-mummy.jpg');
}
#drawing-paper-bag {
	background-image:url('images/drawing-paper-bag.jpg');
}
#drawing-pear {
	background-image:url('images/drawing-pear.jpg');
}
#drawing-room {
	background-image:url('images/drawing-room.jpg');
}
#drawing-sphere {
	background-image:url('images/drawing-sphere.jpg');
}
#drawing-street {
	background-image:url('images/drawing-street.jpg');
}
#drawing-wine {
	background-image:url('images/drawing-wine.jpg');
}
#drawing-pizza {
	background-image:url('images/drawing-pizza.jpg');
}

/* digital thumbnails */
#digital-window {
	background-image:url('images/digital-window.jpg');
}
#digital-fish {
	background-image:url('images/digital-fish.jpg');
}

.header-text-left {
	position: absolute;
	padding-top: 5px;
	left: 50%;
	letter-spacing: .5em;
	font-weight: bold;
	font-size: 140%;
	color: #333;
}
.header-text-right {
	position: absolute;
	font-weight: bold;
	padding-top: 5px;
	right: 51%;
	color: #333;
	font-size: 140%;
	letter-spacing: .5em;
}

.contact {
	width: 600px;
	height: 560px;
	scrolling: no;
	margin: -10px;
	border:none;
	opacity: .9;
	border: none;
}