/*
-----------------------------------------------------------
jocelyn lee web workbase style
 
-----------------------------------------------------------*/



/* to reset browser-specific settings
-----------------------------------------------------------*/



/* basic elements
-----------------------------------------------------------*/


body {
  color: #999;
  background-image: none;
  background-repeat: no-repeat;
  background-color: #333;
  text-align: center; /* this is for IE to center the cantainer ;) */
  font: x-small Verdana, Sans-serif;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: small;
  } html>body {font-size:small;}

a, a:link {
  text-decoration: none;
  color: #999;
  }
  
a:visited {
  text-decoration: none;
  color: #666;
  }

a:hover, .subnav a:hover {
  color: #ccc;
  }
  
a:active, .subnav a:active {
  color: #ccc;
  }
  
p {
  font-size: 100%;
  color: #666;
  }
  
h1, h2, h3, h4, h5, h6 {
  color: #999;
  }
  
h1 {
  font-size: 95%;
  font-weight: normal;
  color: #333;
  } 

h2 {
  font-size: 84%;
  color: #999;
  }
  
  
div {
  border: none; /* 1px solid #99cccc */
  }
  
em {
  font-style: normal;
  }  

span {
  padding: 0;
  margin: 0;
  }

img {
  padding: 0;
  margin: 0;
  }

/* basic divs centering the layout
-----------------------------------------------------------*/


#container {
  width: 1000px;
  margin: 0 auto;
  }

#main {
  float: left;
  width: 100%;
  text-align: left; /* to revoke the body definition to please IE */
  }
  


/* the site structure
-----------------------------------------------------------*/



#maincontentwrapper {
  width: 100%;
  margin: 0;
  padding: 0;
  color: #666;
  background-color: transparent;
  }

#header {
  float: left;
  width: 100%;
  padding-top: 15px;
  margin: 0;
  background-repeat: no-repeat;
  background-color: transparent;
  }

#header a, a:link, a:hover, a:visited, a:visited:hover {
  border-bottom: none;
  border: 0;
  margin: 0;
  padding: 0;
  }

#header img {
  float: left;
  border: 0;
  margin: 0;
  padding: 0;
  }

p.info {
  width: 38%;
  font-size: 80%;
  color: #777;
  float: right;
  border-top: 2px solid #cc3333;
  margin-right: 180px;
  margin-top: 3px;
  padding: 6px 0px 0px 10px;
  line-height: 1.4em;
  visibility: hidden;
  }


/*    left nav 
-----------------------------------------------------------*/

#leftnav {
  width: 320px;
  float: left; 
  background: transparent;
  margin: 15px 5px 5px 0px;
  padding: 0;
  letter-spacing: 1px;
  font-size: 100%;
  }
  
#leftnav li {
  display: block;
  margin: 0;
  padding: 0;
  }

#leftnav ul {
  list-style-type: none;
  list-style-position: outside;
  margin: 0;
  padding: 0;
  }

#leftnav ul.list1 {
  margin: 0 0 0 15px;
  padding: 0;
  }

#leftnav ul.list2 {
  margin: 45px 0 0 15px;
  padding: 0px;
  }

#leftnav ul.list3 {
  margin: 100px 0 0 15px;
  padding: 0px;
  font-size: 80%;
  text-transform: uppercase;
  letter-spacing: 1px;
  }


  
#leftnav li.portraits a, a:link {
  background: #333 url("../img/linkimages/alink_01.png") left no-repeat;
  text-decoration: none; /*Mozilla Underline Fix*/
  line-height: 24px;
  padding: 0px 5px 1px 0px;
  }
  
#leftnav li.portraits a:visited {
  background: #333 url("../img/linkimages/alink_visited_01.png") left no-repeat;
  text-decoration: none; /*Mozilla Underline Fix*/
  }

#leftnav li.portraits a:hover {
  background: #333 url("../img/linkimages/alink_hoveractive_01.png") left no-repeat;
  text-decoration: none; /*Mozilla Underline Fix*/
  }



#leftnav li.physicalworld a, a:link {
  background: #333 url("../img/linkimages/alink_02.png") left no-repeat;
  text-decoration: none; /*Mozilla Underline Fix*/
  line-height: 24px;
  padding: 0px 10px 2px 0px;
  }

#leftnav li.physicalworld a:visited {
  background: #333 url("../img/linkimages/alink_visited_02.png") left no-repeat;
  text-decoration: none; /*Mozilla Underline Fix*/
  }

#leftnav li.physicalworld a:hover {
  background: #333 url("../img/linkimages/alink_hoveractive_02.png") left no-repeat;
  text-decoration: none; /*Mozilla Underline Fix*/
  }

  

#leftnav li.archive {
 background: #333 url("../img/linkimages/alink_03.png") left no-repeat;
 text-decoration: none; /*Mozilla Underline Fix*/ 
 line-height: 24px;
 }



#leftnav li.childrens a, a:link {
  background: #333 url("../img/linkimages/alink_04.png") left no-repeat;
  text-decoration: none; /*Mozilla Underline Fix*/
  line-height: 35px;
  padding: 0px 15px 12px 0px;
  }

#leftnav li.childrens a:visited {
  background: #333 url("../img/linkimages/alink_visited_04.png") left no-repeat;
  text-decoration: none; /*Mozilla Underline Fix*/  
  }

#leftnav li.childrens a:hover {
  background: #333 url("../img/linkimages/alink_hoveractive_04.png") left no-repeat;
  text-decoration: none; /*Mozilla Underline Fix*/
  }



#leftnav li.youngest a, a:link {
  background: #333 url("../img/linkimages/alink_05.png") left no-repeat;
  text-decoration: none; /*Mozilla Underline Fix*/
  line-height: 35px;    
  padding: 0px 0px 12px 0px;  
  }

#leftnav li.youngest a:visited {
  background: #333 url("../img/linkimages/alink_visited_05.png") left no-repeat;
  text-decoration: none; /*Mozilla Underline Fix*/
  }

#leftnav li.youngest a:hover {
  background: #333 url("../img/linkimages/alink_hoveractive_05.png") left no-repeat;
  text-decoration: none; /*Mozilla Underline Fix*/
  }

  
  
#leftnav li.biography a, a:link {
  background: #333 url("../img/linkimages/alink_06.png") left no-repeat;
  text-decoration: none; /*Mozilla Underline Fix*/
  line-height: 23px;
  padding: 0px 15px 0px 0px;  
  }

#leftnav li.biography a:visited {
  background: #333 url("../img/linkimages/alink_visited_06.png") left no-repeat;
  text-decoration: none; /*Mozilla Underline Fix*/
  }

#leftnav li.biography a:hover {
  background: #333 url("../img/linkimages/alink_hoveractive_06.png") left no-repeat;
  text-decoration: none; /*Mozilla Underline Fix*/
  }



#leftnav li.statements a, a:link {
  background: #333 url("../img/linkimages/alink_07.png") left no-repeat;
  text-decoration: none; /*Mozilla Underline Fix*/
  line-height: 24px;
  padding: 0px 15px 0px 0px;   
  }

#leftnav li.statements a:visited {
  background: #333 url("../img/linkimages/alink_visited_07.png") left no-repeat;
  text-decoration: none; /*Mozilla Underline Fix*/
  }

#leftnav li.statements a:hover {
  background: #333 url("../img/linkimages/alink_hoveractive_07.png") left no-repeat;
  text-decoration: none; /*Mozilla Underline Fix*/
  }

 
 
#leftnav li.contact a, a:link {
  background: #333 url("../img/linkimages/alink_08.png") left no-repeat;
  text-decoration: none; /*Mozilla Underline Fix*/
  line-height: 24px;
  padding: 0px 15px 0px 0px;   
  }

#leftnav li.contact a:visited {
  background: #333 url("../img/linkimages/alink_visited_08.png") left no-repeat;
  text-decoration: none; /*Mozilla Underline Fix*/
  }

#leftnav li.contact a:hover {
  background: #333 url("../img/linkimages/alink_hoveractive_08.png") left no-repeat;
  text-decoration: none; /*Mozilla Underline Fix*/
  }



#leftnav li.portraits span, #leftnav li.physicalworld span, #leftnav li.archive span, #leftnav li.childrens span, #leftnav li.youngest span,
#leftnav li.biography span, #leftnav li.statements span, #leftnav li.contact span {
  visibility: hidden; 
  }  




/*    text photo wrapper
-----------------------------------------------------------*/



#textphotowrapper {
  width: 620px;
  height: 650px;
  float: left; 
  background: transparent;
  margin-top: 15px;
  margin-bottom: 5px;
  margin-right: 5px;
  padding: 0;
  line-height: 1.4em;
  }
  
    
#textphotowrapper p {
  font-size: 90%;
  background: transpatent;
  text-align: center;
  margin: 0;
  padding-top: 5px;
  }

#textphotowrapper img {
  border: none;
  
  }

  
#textphotowrapper p.jocelynInfo, #textphotowrapper p.JocelynBio, #textphotowrapper p.WorkStatmemt, #textphotowrapper p.ClientsList, #textphotowrapper p.JocelynContactInfo {
  text-align: left;
  padding: 5px 10px 10px 10px;
  }
  


/*    gallery Nav
-----------------------------------------------------------*/  



#gallerynav {
  width: 100%;
  height: 19px;
  float: left;
  margin-top: 15px;
  padding: 0;
  text-align: right;
  visibility: hidden;
  }

#gallerynav li {
  display: inline;
  margin: 0;
  padding: 0;
  }
  
#gallerynav li.prev a:link {
  background-image: none;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  padding: 10px;
  margin: 0;
  }
  
#gallerynav li.prev a:hover {
  background-image: none;  
  background-repeat: no-repeat;
  background-position: 50% 50%;
  padding: 10px;
  margin: 0;
  }

#gallerynav li.prev a:visited, #gallerynav li.prev a:active {
  background-image: none;  
  background-repeat: no-repeat;
  background-position: 50% 50%;
  padding: 10px;
  margin: 0;
  }

#gallerynav li.thumbs a:link {
  background-image: none;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  padding: 10px;
  margin: 0;
  }
  
#gallerynav li.thumbs a:hover {
  background-image: none;  
  background-repeat: no-repeat;
  background-position: 50% 50%;
  padding: 10px;
  margin: 0;
  }

#gallerynav li.thumbs a:visited, #gallerynav li.thumbs a:active {
  background-image: none;  
  background-repeat: no-repeat;
  background-position: 50% 50%;
  padding: 10px;
  margin: 0;
  }
  
#gallerynav li.next a:link {
  background-image: none;  
  background-repeat: no-repeat;
  background-position: 50% 50%;
  padding: 10px;
  margin: 0;
  }

#gallerynav li.next a:hover {
  background-image: none;  
  background-repeat: no-repeat;
  background-position: 50% 50%;
  padding: 10px;
  margin: 0;
  }

#gallerynav li.next a:visited, #gallerynav li.next a:active {
  background-image: none;  
  background-repeat: no-repeat;
  background-position: 50% 50%;
  padding: 10px;
  margin: 0;
  }

#gallerynav li.prev strong, #gallerynav li.next strong {
  text-transform: uppercase;
  letter-spacing: 1px;
  }

#gallerynav li.thumbs strong {
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 1px;
  }
  
#gallerynav ul {
  font-size: 90%;
  list-style-type: none;
  list-style-position: outside;
  margin: 5px 3px 5px 3px;
  padding: 0;
  }   

  
#lgallerynav img {
  border: none;
  }



  
  
  
/*   footer
-----------------------------------------------------------*/

  
#footer {
  width: 100%;
  float: left;
  text-align: right;
  background: transparent;
  margin-top: 50px;
  padding: 0;
  border-top: 1px solid #666;
  }
  
#footer p {
  font-size: 80%;
  background: none;
  margin-top: 8px;
  padding-right: 3px;
  }
  
#footer strong {
  color: #666;
  font-weight: normal;
  }