/* Body */

body {
margin:				0px;
border:             none; 
padding:            0px;
background-image:url('images/BackgroundLogo.png');
background-repeat:no-repeat;
background-attachment:absolute;
background-position:center top;
background-color:	#000000;
color:				#BEA7A1;
font-family:		Eras Medium ITC, Arial, Helvetica, sans-serif; 
font-size:          1em;
font-weight: normal;
font-stretch: normal;
}


/* Header */

div.Header
{
position: absolute;
right: 6%;
top: 5px;
margin-right: 20px;
border: none;
padding: 0px;
text-align: right;
vertical-align: top;
color: #CCCCCC;
font-size: 1.0em;
opacity: .6;
filter: alpha(opacity=60%);
}

#HeaderPhone { color: #FFFFFF; font-stretch:expanded; font-weight:bold; font-family: Arial, Helvetica, sans-serif; }

a { font-stretch:expanded; color: #FF5522; font-family: Arial, Helvetica, sans-serif; text-decoration: none; }
a:visited { font-stretch:expanded; color: #FF5522; font-family: Arial, Helvetica, sans-serif; text-decoration: none; }
a:hover { font-stretch:expanded; color: #FF5522; font-family: Arial, Helvetica, sans-serif; text-decoration: underline; }
a:active { font-stretch:expanded; color: #FF4400; font-family: Arial, Helvetica, sans-serif; text-decoration: underline; }

a.ContactLink { font-stretch:expanded; color: #FF9955; font-family: Arial, Helvetica, sans-serif; text-decoration: none; }
a.ContactLink:visited { font-stretch:expanded; color: #FFAA99; font-family: Arial, Helvetica, sans-serif; text-decoration: none; }
a.ContactLink:hover { font-stretch:expanded; color: #FF5522; font-family: Arial, Helvetica, sans-serif; text-decoration: none; }
a.ContactLink:active { font-stretch:expanded; color: #FF4400; font-family: Arial, Helvetica, sans-serif; text-decoration: none; }




/* Nav */


div.navTopBar
{
position: fixed;
left: 13%;
top: 117px;
margin: 0px 0px 0px -110px;
border: solid hsla(0, 0%, 100%, 0.2) 1px;
/* ie doesn't support hsla */ border: 1px solid #333333;
border-bottom:0px;
border-top-left-radius: 24px 8px;
-moz-border-radius-topleft: 24px 8px; 
padding: 0px;
width: 140px;
height: 6px;
}

div.navTopBarColor
{
border-top-left-radius: 24px 8px;
-moz-border-radius-topleft: 24px 8px; 
padding: 3px;
background-color: #968a88;
}

#nav {
position: fixed;
z-index: 1;
left: 13%;
top: 124px;
margin: 0px 0px 0px -110px;
border: solid hsla(0, 0%, 100%, 0.2) 1px;
/* ie doesn't support hsla */ border: 1px solid #333333;
border-top:0px;
border-bottom-left-radius: 24px 8px;
-moz-border-radius-bottomleft: 24px 8px;
padding: 12px 12px 12px 12px;
width: 116px;
height: 178px;
color: white;
text-align: center;
list-style-type: none;
background-color: hsla(0, 0%, 100%, 0.1);
}

#navBar
{ 
position: fixed;
left: 13%;
top: 123px;
margin: 0px 0px 0px -108px;
border-top: solid hsla(0, 0%, 100%, 0.2) 1px;
/* ie doesn't support hsla */ border-top: 1px solid #333333;
padding: none;
width: 140px;
}

#nav li 
{ 
margin: 8px 0px 0px 0px;
list-style-type: none;
width: 116px;
height: 28px;
background-color: hsla(0, 0%, 0%, 0.5);
}

#nav { position: absolute }
*>#nav { position: fixed }

#PageHome #nav .PageHome > a {
  pointer-events: none;
  cursor: default;
  display: block;
  width: 116px;
  height: 28px;
  background: url("images/NavHome.png") no-repeat 0 0; 
  background-position: 0 -29px;
}
#PagePort #nav .PagePort > a {
  pointer-events: none;
  cursor: default;
  display: block;
  width: 116px;
  height: 28px;
  background: url("images/NavPort.png") no-repeat 0 0; 
  background-position: 0 -29px;
}
#PageResume #nav .PageResume > a {
  pointer-events: none;
  cursor: default;
  display: block;
  width: 116px;
  height: 28px;
  background: url("images/NavResume.png") no-repeat 0 0; 
  background-position: 0 -29px;
}

#PageAbout #nav .PageAbout > a {
  pointer-events: none;
  cursor: default;
  display: block;
  width: 116px;
  height: 28px;
  background: url("images/NavAbout.png") no-repeat 0 0; 
  background-position: 0 -29px;
}

#PageArt #nav .PageArt > a {
  pointer-events: none;
  cursor: default;
  display: block;
  width: 116px;
  height: 28px;
  background: url("images/NavArt.png") no-repeat 0 0; 
  background-position: 0 -29px;
}



#Home {
  display: block;
  width: 116px;
  height: 28px;
  background: url("images/NavHome.png") no-repeat 0 0;
}
#Home:hover { 
  background-position: 0 -29px;
}
#Home .Home > a {
  pointer-events: none;  
  display: block;
  width: 116px;
  height: 28px; 
  background-position: 0 -29px;
  background: url("images/NavHome.png") no-repeat 0 0;
}

#Home span {
  display: none;
}

#Port {
  display: block;
  width: 116px;
  height: 28px;
  background: url("images/NavPort.png") no-repeat 0 0;
}
#Port:hover { 
  background-position: 0 -29px;
}
#Port span {
  display: none;
}


#Resume {
  display: block;
  width: 116px;
  height: 28px;
  background: url("images/NavResume.png") no-repeat 0 0;
}
#Resume:hover { 
  background-position: 0 -29px;
}
#Resume span {
  display: none;
}

#About {
  display: block;
  width: 116px;
  height: 28px;
  background: url("images/NavAbout.png") no-repeat 0 0;
}
#About:hover { 
  background-position: 0 -29px;
}
#About span {
  display: none;
}


#Art {
  display: block;
  width: 116px;
  height: 28px;
  background: url("images/NavArt.png") no-repeat 0 0;
}
#Art:hover { 
  background-position: 0 -29px;
}
#Art span {
  display: none;
}



/* Content */

div.ContentBox
{
margin-top: 117px;
margin-bottom: 0px;
margin-right: 6%;
margin-left: 17%;
border-top: solid hsla(0, 0%, 100%, 0.2) 1px;
/* ie doesn't support hsla */ border: 1px solid #333333;
border-bottom-left-radius: 24px 8px;
-moz-border-radius-bottomleft: 24px 8px;
border-top-right-radius: 24px 8px;
-moz-border-radius-topright: 24px 8px; 
padding: 0px;
}

div.ContentBar
{
border-top-right-radius: 24px 8px;
-moz-border-radius-topright: 24px 8px; 
padding: 3px;
background-color: #968a88;
}

div.ContentArea
{ 
border-bottom-left-radius: 24px 8px;
-moz-border-radius-bottomleft: 24px 8px;
padding: 1px 2em 1em 2em;
width: auto;
background-color: hsla(0, 0%, 100%, 0.1);
}

div.ContentAreaTall
{ 
border-bottom-left-radius: 24px 8px;
-moz-border-radius-bottomleft: 24px 8px;
padding: 1px 2em 1em 2em;
width: auto;
min-height: 540px;
background-color: hsla(0, 0%, 100%, 0.1);
}


p
{
margin-top: .5em;
margin-bottom: .5em;
}

p + p {
  text-indent: 2.0em;
  margin-top: 0; }
  
a { font-color: #FF3399; text-decoration: none; }
a:visited { font-color: #FF3399; text-decoration: none; }
a:hover { font-color: #FF3399; text-decoration: underline; }
a:active { font-color: #FF3399; text-decoration: underline; }

h1 /* page sub header */ { font-size: 30pt; font-stretch: narrower; font-weight: light; color: #FFFFFF; font-family: Eras Light ITC, Arial, Helvetica, sans-serif;
margin top: .5em;
margin bottom: .5em;
line-height: .5em;
 }

h2 /* content header */ { font-size: 1.0em; color: #d0bb91; font-family: Eras Bold ITC, Arial, Helvetica, sans-serif;
padding-right: 12px;
margin top: .5em;
margin bottom: .5em; }
	
h3 /* resume header */ { font-size: 20pt; font-stretch: narrower; font-weight: light; color: #FFFFFF; font-family: Eras Light ITC, Arial, Helvetica, sans-serif;
margin top: .5em;
margin bottom: .5em;
line-height: .1em;
 }

a { font-color: #3399FF; }


table, th, td
{
border: 0px;
padding: 2px;
}
table { width:98%;
margin-left: auto;
margin-right: auto; }
th { text-align:left;
color: #d0bb91;
font-size: 1em; }
th.date { text-align:right;
vertical-align: text-top;
color: #CC4444; }
td.title { padding-top: 10px;
color: #FFFFFF;
font-size: 1em; }
td.content { padding-bottom: 25px;
color: #BEA7A1;
font-size: .9em; }

/* thumbnails */



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

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

.thumb:hover img{
border: 1px solid blue;
}

.thumb span{ /*CSS for enlarged image*/
position: absolute;
background-color: hsla(0, 0%, 100%, 0.1);
padding: 5px;
left: -1000px;
border: solid hsla(0, 0%, 100%, 0.2) 1px;
/* ie doesn't support hsla */ border: 1px solid #333333;
border-top-left-radius: 24px 8px;
border-bottom-left-radius: 24px 8px;
-moz-border-radius-topleft: 24px 8px;
-moz-border-radius-bottomleft: 24px 8px;
opacity: .9;
filter: alpha(opacity=90%);
visibility: hidden;
color: white;
text-decoration: none;
}

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

.thumb:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 80px;
left: -140px; /*position where enlarged image should offset horizontally */
z-index: 2;
}








.popupimageviewer{
position: relative;
float:left;
}

.text_line /*for ending the image float*/
{
clear:both;
}

a.imagefade img {
	padding-right: 4px;
	border: 0px;
	color: #3399FF;
}	
a.imagefade:hover img {
	opacity: 1.0;
	filter: alpha(opacity=100);
	padding-right: 4px;
	border: 0px;
	color: #3399FF;
}
.imagefade span{ /*CSS for enlarged image*/
position: absolute;
background-color: hsla(0, 0%, 5%, 0.8);  
padding: 5px;
left: 0px;
border: solid hsla(0, 0%, 100%, 0.2) 1px;
/* ie doesn't support hsla */ border: 1px solid #333333;
border-top-left-radius: 24px 8px;
border-bottom-right-radius: 24px 8px;
-moz-border-radius-topleft: 24px 8px;
-moz-border-radius-bottomright: 24px 8px;
opacity: 1.0;
filter: alpha(opacity=100%);
visibility: hidden;
color: white;
text-decoration: none;
text-align:center;
}
.imagefade span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.imagefade:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: -60px;
left: 280px; /*position where enlarged image should offset horizontally */
z-index: 2;
}


a.imagefadeweb img {
	padding-right: 12px;
	border: 0px;
	color: #3399FF;
}	
a.imagefadeweb:hover img {
	opacity: .65;
	filter: alpha(opacity=65%);
	padding-right: 12px;
	border: 0px;
	color: #3399FF;
}

div.thumbnails {
	padding-top: 6px;
	padding-bottom: 16px;
}

div.bannerads {
    padding-top: 6px;
	padding-bottom: 6px;
	padding-right: 12px;
	border: 0px;
}	

.floatleft {
float:left;
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
}



img.imagepage  /*CSS for unique display page for large images*/
{
display: block;
margin-top: 17px;
margin-bottom: 40px;
margin-right: auto;
margin-left: auto;
border: none;
padding: 8px;
text-align: center;
vertical-align: top;
color: #CCCCCC;
}


/* Footer */

div.footer
{
margin-top: 1em;
margin-bottom: 20px;
margin-right: 6%;
margin-left: 17%;
border: none;
padding: 0em 2em 1em 2em;
text-align:center;
color: #AAAAAA;
font: 1.0em Eras Medium ITC, Arial, Helvetica, sans-serif;
}

#FooterPhone { color: #FFFFFF; font-stretch:expanded; font-weight:bold; }

p.fineprint
{ 
color: #666666;
font-size: .75em; 
font-family: New-Times Roman;
margin-top: 2px
}