/* 
Thanks for stopping by and checking out the code. In addition to the creation of the overall layout, 
design, site structure and all graphics needed, I also hand-coded both the XHTML and CSS.

Jennifer Holbert - Wilke 
jennifer.wilke @yahoo.com  

---------------------------------------
SWATCH COLORS :
Blue -  #21A5DE 
Green - #61C088 
Purple - #9B4B9D 
Yellow - #FFDA4A 
Dark Grey - #252525
Grey Bkg - #444343

*/




body {
     background-color: #444343;
     font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
     font-size: 12px;
     color: #252525;
     margin: 0;
     padding: 0;
     border-style: hidden;
     letter-spacing: 0.09em;
     overflow: hidden;
     }



/* background images ============================================================================ */
#bkggreyhome { 
     position: relative;
     background-image:url('images/bkghome.gif');
     background-repeat: no-repeat;
     background-color: #444343;
     width: 1152px;
     height: 975px;
     margin: 0 auto;
     padding: 0;
     outline: 0 solid #0000ff;
     } 
     
     
#bkggrey { 
     position: relative;
     background-image:url('images/bkg.gif');
     background-repeat: no-repeat;
     background-color: #444343;
     width: 1152px;
     height: 975px;
     margin: 0 auto;
     padding: 0;
     outline: 0 solid #0000ff;
     } 
     



/* layout ====================================================================================== */ 
#content { 
     position: absolute;
     top: 0px;
     left: 240px;
     background-color: transparent;
     width: 670px;
     height: 590px;
     margin: 10px 0 1em 0;
     padding: 0;
     outline: 0 solid #ff0000;
     } 
     


#aboutme { 
     position: absolute;
     top: 0px;
     left: 0px;
     background-color: transparent;
     width: 670px;
     height: 545px;
     margin: 0;
     padding: 0;
     font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
     font-size: 12px;
     color: #252525;
     letter-spacing: 0.09em;
     outline: 0 solid #ff0000;
     } 




#aboutme a:link { text-decoration: none; color: #21A5DE; font-weight: bold; }
#aboutme a:visited { text-decoration: none; color: #21A5DE; font-weight: bold; }
#aboutme a:hover { text-decoration: underline; color: #61C088; font-weight: bold; }
#aboutme a:active { text-decoration: underline; color: #9B4B9D; font-weight: bold; }




/* 3 Columns Homepage ========================================================================== */  
#leftcol { 
     position: absolute;
     top: 265px;
     left: 0px;
     background-color: transparent;
     width: 200px;
     height: 290px;
     margin: 0;
     padding: 0;
     outline: 0 solid #ff0000;
     } 
   

#midcol { 
     position: absolute;
     top: 265px;
     left: 240px;
     background-color: transparent;
     width: 180px;
     height: 290px;
     margin: 0;
     padding: 0;
     outline: 0 solid #ff0000;
     } 
     
     
 
#rightcol { 
     position: absolute;
     top: 265px;
     left: 460px;
     background-color: transparent;
     width: 200px;
     height: 290px;
     margin: 0;
     padding: 0;
     outline: 0 solid #ff0000;
     } 
     




/* Client List ================================================================================= */  
#clientlist { 
     position: absolute;
     top: 0;
     left: 300px;
     background-color: transparent;
     width: 370px;
     height:  auto;
     margin: 0;
     padding: 0;
     outline: 0 solid #ff0000;
     }
     

#clientlist-left { 
     position: absolute;
     top: 30px;
     left: 0px;
     background-color: transparent;
     width: 250px;
     height: auto;
     margin: 0;
     padding: 0;
     font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
     font-size: 10px;
     color: #252525;
     line-height: 1.5;
     outline: 0 solid #ff0000;
     } 
   

#clientlist-right { 
     position: absolute;
     top: 30px;
     left: 200px;
     background-color: transparent;
     width: 250px;
     height: auto;
     margin: 0;
     padding: 0;
     text-align: left;
     font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
     font-size: 10px;
     color: #252525;
     line-height: 1.5;
     outline: 0 solid #ff0000;
     } 



span.space-clientlist { 
    margin-left: 24px;
    padding: 0;
    } 



#clientlogos { 
     position: absolute;
     top: 500px;
     left: 0px;
     background-color: transparent;
     width: 284px;
     height: auto;
     margin: 0;
     outline: 0 solid #ff0000;
     }



/* JAW Experience  ============================================================================= */ 
.experience { 
     background-color: transparent;
     margin: 0;
     padding: 0;
     font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
     font-size: 10px;
     color: #252525;
     line-height: 1.4;
     outline: 0 solid #ff0000;
     } 


#experience-2col { 
     position: absolute;
     top: 210px;
     left: 0;
     background-color: transparent;
     width: 370px;
     height:  auto;
     margin: 0;
     padding: 0;
     outline: 0 solid #ff0000;
     } 



#experience-left { 
     position: absolute;
     top: 0;
     left: 0;
     background-color: transparent;
     width: 300px;
     height: auto;
     outline: 0 solid #ff0000;
     } 
   

#experience-right { 
     position: absolute;
     top: 0;
     left: 370px;
     background-color: transparent;
     width: 300px;
     height: auto;
     outline: 0 solid #ff0000;
     } 


.title { 
    background-color: transparent;
    font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
    font-size: 12px;
    color: #61C088; 
    margin-top: 5px;
    margin-bottom: 5px;
    outline: 0 solid #ff0000;
    }
 

span.city { 
    background-color: transparent;
    font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
    font-size: 12px;
    color: #8d8c8c; 
    font-weight: normal;
    letter-spacing: 2px;
    line-height: 1.5;
    outline: 0 solid #ff0000;
    }
    
    
    

 
span.experience-subhead { 
    background-color: transparent;
    font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
    font-weight: bold;
    font-size: 11px;
    letter-spacing: 0.1em;
    margin: 0; 
    text-transform: uppercase; 
    outline: 0 solid #ffff00;
    } 
 








 
/* Purple Head with Blue Rule ================================================================== */  
.head { 
    background-color: transparent;
    color: #9B4B9D;
    font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 0.25em;
    width: auto;
    margin: 0; 
    padding: 0;
    text-transform: uppercase; 
    border-bottom: 1px solid #21A5DE;
    line-height: 1.5;
    outline: 0 solid #ffff00;
    } 
 
 

 
 
/* Black Bold Subhead  ======================================================================== */  
.subhead { 
    background-color: transparent;
    font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
    font-weight: bold;
    font-size: 12px;
    letter-spacing: 0.1em;
    margin: 0; 
    text-transform: uppercase; 
    outline: 0 solid #ffff00;
    } 
 
 
 
 
/* Template  ======================================================================== */  
.template-subhead { 
    background-color: transparent;
    font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
    color: #21A5DE;
    font-weight: bold;
    font-size: 12px;
    letter-spacing: 0.1em;
    margin: 0; 
    text-transform: capitalize; 
    outline: 0 solid #ffff00;
    } 
 

#template { 
     position: absolute;
     top: 420px;
     left: 295px;
     background-color: #61C088;
     width: 70%;
     height: auto;
     margin: 0;
     padding: 5px 5px 10px 5px; 
     font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
     color: #252525; 
     font-size: 11px;
     font-style: normal;
     text-align: left;
     line-height: 1.3;
     border: 1px solid #c5c3c3;
     outline: 0 solid #ff0000;
     }


span.quotes { 
     padding: 0;
     text-align: left;
     font-size: 20px;
     vertical-align: text-bottom;
     border: 0 solid #c5c3c3;
     outline: 0 solid #ff0000;
     }


#template a:link { text-decoration: none; color: #FFDA4A; font-weight: bold; }
#template a:visited { text-decoration: none; color: #FFDA4A; font-weight: bold; }
#template a:hover { text-decoration: underline; color: #ffffff; font-weight: bold; }
#template a:active { text-decoration: underline; color: #9B4B9D; font-weight: bold; }

     



/* WEB BACK NEXT CLIENTS ====================================================================================== */
#webclientjump { 
     position: absolute;
     top: 420px;
     left: 295px;
     background-color: #61C088;
     width: 70%;
     height: auto;
     margin: 0;
     padding: 5px 5px 10px 5px; 
     font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
     color: #252525; 
     font-size: 11px;
     font-style: normal;
     text-align: left;
     line-height: 1.3;
     border: 1px solid #c5c3c3;
     outline: 0 solid #ff0000;
     }
     

span.webclient_back { 
     width: 50%;
     margin-right: 100px;
     text-align: left;
     line-height: 1.3;
     border: 0 solid #c5c3c3;
     outline: 0 solid #ff0000;
     }

span.webclient_next { 
     width: 50%;
     text-align: right;
     line-height: 1.3;
     border: 0 solid #c5c3c3;
     outline: 0 solid #ff0000;
     }
     
span.webclient_next1 { 
     width: 50%;
     margin-left: 150px;
     text-align: right;
     line-height: 1.3;
     border: 0 solid #c5c3c3;
     outline: 0 solid #ff0000;
     }
 
span.webclient_list { 
     width: 50%;
     margin-left: 26px;
     line-height: 1.3;
     border: 0 solid #c5c3c3;
     outline: 0 solid #ff0000;
     }
     
#webclientjump a:link { text-decoration: none; color: #FFDA4A; font-weight: bold; }
#webclientjump a:visited { text-decoration: none; color: #FFDA4A; font-weight: bold; }
#webclientjump a:hover { text-decoration: underline; color: #ffffff; font-weight: bold; }
#webclientjump a:active { text-decoration: underline; color: #9B4B9D; font-weight: bold; }





/* A HREF ====================================================================================== */
a:link { color: #21A5DE; text-decoration: none; font-weight: bold; }
a:visited { color: #21A5DE; text-decoration: none; font-weight: bold; } 
a:hover { color: #61C088; text-decoration: underline; font-weight: bold; } 
a:active { color: #9B4B9D; text-decoration: underline; font-weight: bold; } 



.boxnav {
     white-space: nowrap; 
     margin: 0;
     padding: 0;
     text-align: left;
     font-style: normal;
     margin: 20px 0 0 0;
     border: 0;
     outline: 0 solid #ff0000;
     }



.boxnav2 {
     white-space: nowrap; 
     margin: 0;
     padding: 0;
     text-align: left;
     font-style: normal;
     margin: 0;
     border: 0;
     outline: 0 solid #ff0000;
     }


.boxnav2 a:link { text-decoration: none; color: #21A5DE; font-weight: bold; }
.boxnav2 a:visited { text-decoration: none; color: #21A5DE; font-weight: bold; }
.boxnav2 a:hover { text-decoration: underline; color: #61C088; font-weight: bold; }
.boxnav2 a:active { text-decoration: underline; color: #9B4B9D; font-weight: bold; }



.flickr {
     margin: 0;
     padding: 0;
     text-align: left;
     font-size: 9px;
     color: #252525;
     font-style: normal;
     margin: 20px 0 0 0;
     border: 0;
     outline: 0 solid #ff0000;
     }


.flickr a:link { text-decoration: none; color: #21A5DE; font-weight: bold; }
.flickr a:visited { text-decoration: none; color: #21A5DE; font-weight: bold; }
.flickr a:hover { text-decoration: underline; color: #61C088; font-weight: bold; }
.flickr a:active { text-decoration: underline; color: #9B4B9D; font-weight: bold; }






span.hit { 
    font-size: 1.2em; 
    text-transform: uppercase; 
    } 


 



/* Contact Me ===================================================================================== */
#contact { 
     position: absolute;
     top: 0px;
     left: 390px;
     background-color: transparent;
     width: 270px;
     height: 200px;
     margin: 0;
     padding: 0;
     line-height: 1.9;
     outline: 0 solid #ff0000;
     } 


#twitter { 
     position: absolute;
     top: 8px;
     left: 8px;
     background-color: #ffffff;
     width: 340px;
     height: 350px;
     margin: 0;
     padding: 0;
     outline: 0 solid #ff0000;
     } 




/* Fav Icons ========================================================================== */  
#icons { float: left; }

#cv-icon { position: absolute; top: 150px; left: 0px; background-color: transparent; width: 36px; height: 36px; margin: 0; padding: 0; outline: 0 solid #ff0000; }

#thisweekdesign-icon { position: absolute; top: 150px; left: 60px; background-color: transparent; width: 36px; height: 36px; margin: 0; padding: 0; outline: 0 solid #ff0000; }

#twitter-icon { position: absolute; top: 150px; left: 120px; background-color: transparent; width: 36px; height: 36px; margin: 0; padding: 0; outline: 0 solid #ff0000; }
 
#linkedin-icon { position: absolute; top: 150px; left: 180px; background-color: transparent; width: 36px; height: 36px; margin: 0; padding: 0; outline: 0 solid #ff0000; } 

#flickr-icon { position: absolute; top: 150px; left: 240px; background-color: transparent; width: 36px; height: 36px; margin: 0; padding: 0; outline: 0 solid #ff0000; }




/* Fav Icons TwitterSplit ========================================================================== */  
/* Developed by Dan Hollings : http://twitter.com/dhollings */

#twittersplit { background-image:url('images/bkg-twittersplit.jpg'); background-color: #444343; position: absolute; top: 0px; left: 0px; width: 1000px; height: 100px; margin: 0; padding: 0; outline: 0 solid #ff0000; } 

#twid-twittersplit { position: absolute; top: 15px; left: 100px; background-color: transparent; width: 36px; height: 36px; margin: 0; padding: 0; outline: 0 solid #ff0000; } 

#twitter-twittersplit { position: absolute; top: 15px; left: 160px; background-color: transparent; width: 36px; height: 36px; margin: 0; padding: 0; outline: 0 solid #ff0000; }   
 
#linkedin-twittersplit { position: absolute; top: 15px; left: 220px; background-color: transparent; width: 36px; height: 36px; margin: 0; padding: 0; outline: 0 solid #ff0000; } 

#flickr-twittersplit { position: absolute; top: 15px; left: 280px; background-color: transparent; width: 36px; height: 36px; margin: 0; padding: 0; outline: 0 solid #ff0000; } 

#cv-twittersplit { position: absolute; top: 15px; left: 340px; background-color: transparent; width: 36px; height: 36px; margin: 0; padding: 0; outline: 0 solid #ff0000; } 





#links { 
     position: absolute;
     top: 400px;
     left: 8px;
     background-color: transparent;
     width: 270px;
     height: 200px;
     margin: 0;
     padding: 0;
     color: #ffffff;
     line-height: 2;
     outline: 0 solid #ff0000;
     } 


#story { 
     position: absolute;
     top: 0px;
     left: 300px;
     background-color: transparent;
     width: 370px;
     height:  auto;
     margin: 0;
     padding: 0;
     outline: 0 solid #ff0000;
     } 


#photo {
    float: left;
    height: 100%;
    width: auto;
    margin-right: 1em;
    padding: 0;
    }

 #storyjaw { 
    background-color: transparent;
    text-align: right;
    margin: 0;
    padding: 0;
    outline: 0 solid #ff0000;
    }
 
 
 #seo { 
     position: absolute;
     top: 8px;
     left: 390px;
     background-color: transparent;
     width: 290px;
     height: 510px;
     margin: 0;
     padding: 0;
     font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
     color: #4f4f4f; 
     font-size: 12px;
     font-style: normal;
     text-align: left;
     line-height: 1.25;
     outline: 0 solid #ff0000;
     } 
 
 
 
 
/* Cloud Tags ================================================================================= */ 
.cloudtags { 
     position: absolute;
     top: 8px;
     left: 8px;
     background-color: transparent;
     width: 340px;
     height: auto;
     margin: 0;
     padding: 5px; 
     font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
     color: #4f4f4f; 
     font-size: 10px;
     font-style: normal;
     text-transform: lowercase; 
     text-align: left;
     border: 1px solid #21A5DE;
     outline: 0 solid #ff0000;
     /* line-height: 1.5; */
     }
     
     
.head-cloudtags { 
    background-color: #21A5DE;
    color: #ffffff;
    font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
    font-weight: bold;
    font-size: 14px;
    margin: 0 0 5px 0;
    letter-spacing: 0.3em;
    padding-left: 5px; 
    text-transform: uppercase; 
    font-style: normal;
    outline: 0 solid #ff0000;
    } 

 

     
     
     
 
/* Testimonial ================================================================================ */

#testimonialleft { 
     position: absolute;
     top: 4px;
     left: 0px;
     background-color: transparent;
     width: 271px;
     height: auto;
     margin: 0;
     padding: 5px; 
     font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
     color: #4f4f4f; 
     font-size: 10px;
     text-align: left;
     line-height: 1.5;
     border: 1px solid #61C088;
     outline: 0 solid #ff0000;
     }
 

#testimonialright { 
     position: absolute;
     top: 8px;
     left: 390px;
     background-color: transparent;
     width: 290px;
     height: 510px;
     margin: 0;
     padding: 0;
     font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
     color: #4f4f4f; 
     font-size: 10px;
     text-align: left;
     line-height: 1.5;
     outline: 0 solid #ff0000;
     } 



#testimonial-name { 
     position: absolute;
     top: 390px;
     left: 295px;
     background-color: #61C088;
     width: 70%;
     height: auto;
     margin: 0;
     padding: 5px 5px 10px 5px; 
     font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
     color: #252525; 
     font-size: 11px;
     font-style: normal;
     text-align: left;
     line-height: 1.3;
     border: 1px solid #c5c3c3;
     outline: 0 solid #ff0000;
     }
 

 
.head-testimonial { 
    background-color: #61C088;
    color: #ffffff;
    font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 0.3em;
    padding-left: 5px; 
    text-transform: uppercase; 
    font-style: normal;
    outline: 0 solid #ffff00;
    } 



span.space-testimonial { 
    margin-left: 25px;
    padding: 0;
    } 

span.space-testimonial2 { 
    margin-left: 48px;
    padding: 0;
    } 

span.space-services { 
    margin-left: 11px;
    padding: 0;
    } 


 
 
/* Portfolio Thumbnail Box Placement =========================================================== */
#portfolio-top { 
     position: absolute;
     top: 8px;
     left: 8px;
     background-color: #ffffff;
     width: 350px;
     height: 240px;
     margin: 0;
     padding: 1px; 
     font-style: normal;
     border: 1px solid #3b3a3a;
     outline: 0 solid #ff0000;
     }
 

#portfolio-bottom { 
     position: absolute;
     top: 260px;
     left: 8px;
     background-color: #ffffff;
     width: 350px;
     height: 240px;
     margin: 0;
     padding: 1px; 
     font-style: normal;
     border: 1px solid #3b3a3a;
     outline: 0 solid #ff0000;
     }


#portfolio-double { 
     position: absolute;
     top: 8px;
     left: 8px;
     background-color: #ffffff;
     width: 350px;
     height: 492px;
     margin: 0;
     padding: 1px; 
     font-style: normal;
     border: 1px solid #3b3a3a;
     outline: 0 solid #ff0000;
     }
 

#portfolio-click { 
     position: absolute;
     top: 510px;
     left: 8px;
     background-color: transparent;
     width: 350px;
     height: 240px;
     margin: 0;
     padding: 1px; 
     font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
     color: #4f4f4f; 
     font-size: 8.5px;
     font-style: normal;
     border: 0 solid #3b3a3a;
     outline: 0 solid #ff0000;
     }
 


#portfolio-info { 
     position: absolute;
     top: 8px;
     left: 390px;
     background-color: transparent;
     width: 290px;
     height: 510px;
     margin: 0;
     padding: 0;
     font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
     color: #252525; 
     font-size: 11px;
     font-style: normal;
     text-align: left;
     line-height: 1.25;
     outline: 0 solid #ff0000;
     } 


#portfolio-head { 
    background-color: transparent;
    font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
    color: #9B4B9D; 
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 0.1em;
    margin: 0 0 10px 0; 
    text-transform: uppercase; 
    border-bottom: 1px solid #21A5DE;
    line-height: 1.5;
    outline: 0 solid #ffff00;
    } 
 

#calendar { 
     position: absolute;
     top: 8px;
     left: 8px;
     background-color: #ffffff;
     width: 350px;
     height: 500px;
     margin: 0;
     padding: 1px; 
     font-style: normal;
     border: 1px solid #3b3a3a;
     outline: 0 solid #ff0000;
     }

 
 #calendar-copyright { 
     position: absolute;
     top: 520px;
     left: 8px;
     background-color: transparent;
     width: 350px;
     height: 240px;
     margin: 0;
     padding: 1px; 
     font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
     color: #4f4f4f; 
     font-size: 8.5px;
     font-style: normal;
     border: 0 solid #3b3a3a;
     outline: 0 solid #ff0000;
     }
 





/* Lightbox ==================================================================================== */ 
.black_overlay{
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
    }
Ê

.white_content {
	display: none;
	position: absolute;
	top: 25%;
	left: 25%;
	width: 50%;
	height: 50%;
	padding: 16px;
	border: 16px solid orange;
	background-color: white;
	z-index:1002;
	overflow: auto;
    }



#lightbox{	position: absolute; margin-top:-70px;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }




#credit { 
    position: absolute;
    top: 590px;
    left: 830px;
    background-color: transparent;
    font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
    color: #9B4B9D; 
    text-align: right;
    font-size: 8px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    clear: both;
    outline: 0 solid #ff0000;
    }
    
    
 #sg { 
    background-color: transparent;
    font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
    color: #61C088; 
    font-size: 8px;
    font-weight: normal;
    margin: 0;
    padding-left: 22px;
    outline: 0 solid #ff0000;
    }


 
 
span.black { 
    background-color: transparent;
    color: #000000; 
    line-height: 1.5;
    } 


/* EMPHASIS ON DESCRIPTION TEXT  =============================================================== */
span.green { 
    background-color: transparent;
    color: #61C088; 
    font-weight: bold;
    text-transform: uppercase; 
    font-size: 12px;
    } 
        
        
span.yellow { 
    background-color: transparent;
    color: #FFDA4A; 
    line-height: 1.5;
    } 
    

span.purple { 
    background-color: transparent;
    color: #9B4B9D; 
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 1.5;
    font-size: 12px;
    } 

        
span.blue { 
    background-color: transparent;
    color: #21A5DE; 
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 1.5;
    font-size: 12px;
    } 
        

span.grey { 
    background-color: transparent;
    color: #8d8c8c; 
    font-weight: normal;
    letter-spacing: 2px;
    line-height: 1.5;
    font-size: 12px;
    } 
        
         
  
 
span.sup {
    vertical-align:super;
    line-height: 0;
    vertical-align: text-top;
    font-size: 9px;
    }
 
 




/* Images ====================================================================================== */
p  {
   margin-bottom: 0.5em;
   } 


span.standout { 
    background-color: transparent;
    color: #21A5DE;
    font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
    font-weight: bold;
    font-size: 13px;
    letter-spacing: 0.08em;
    padding: 0; 
    outline: 0 solid #ffff00;
    text-transform: uppercase; 
    } 


span.bullet { 
    background-color: transparent;
    color: #000000;
    font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.4em;
    padding: 0; 
    outline: 0 solid #ffff00;
    } 


span.bulletlite { 
    background-color: transparent;
    color: #cccccc;
    font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.08em;
    padding: 0; 
    outline: 0 solid #ffff00;
    } 



span.arrow-back { 
     background-color: transparent;
     width: 9px;
	 height: 9px;
	 padding: 0 0 0 0; 
	 margin: 20px 10px 0 0;
     border: 0;
     outline: 0 solid #ff0000;
    } 
    
    
 
    
#homethumbnail {
    position: absolute;
    top: 160px;
    left: 0px;
    height: 79px;
    width: 680px;
    margin: 0;
    padding: 0;
    outline: 0 solid #ffff00;
    }




/* Print Card Thumbnails ==================================================================================== */
#thumbnails-1a {
    position: absolute;
    top: 150px;
    left: 0px;
    width: 130px;
    height: auto;
    margin: 0;
    padding: 0;
    outline: 0 solid #ffff00;
    }

#thumbnails-1b {
    position: absolute;
    top: 150px;
    left: 180px;
    width: 130px;
    height: auto;
    margin: 0;
    padding: 0;
    outline: 0 solid #ffff00;
    }

#thumbnails-1c {
    position: absolute;
    top: 150px;
    left: 360px;
    width: 130px;
    height: auto;
    margin: 0;
    padding: 0;
    outline: 0 solid #ffff00;
    }

#thumbnails-1d {
    position: absolute;
    top: 150px;
    left: 540px;
    width: 130px;
    height: auto;
    margin: 0;
    padding: 0;
    outline: 0 solid #ffff00;
    }

#thumbnails-2a {
    position: absolute;
    top: 280px;
    left: 0px;
    width: 130px;
    height: auto;
    margin: 0;
    padding: 0;
    outline: 0 solid #ffff00;
    }

#thumbnails-2b {
    position: absolute;
    top: 280px;
    left: 180px;
    width: 130px;
    height: auto;
    margin: 0;
    padding: 0;
    outline: 0 solid #ffff00;
    }

#thumbnails-2c {
    position: absolute;
    top: 280px;
    left: 360px;
    width: 130px;
    height: auto;
    margin: 0;
    padding: 0;
    outline: 0 solid #ffff00;
    }

#thumbnails-2d {
    position: absolute;
    top: 280px;
    left: 540px;
    width: 130px;
    height: auto;
    margin: 0;
    padding: 0;
    outline: 0 solid #ffff00;
    }

#thumbnails-3a {
    position: absolute;
    top: 410px;
    left: 0px;
    width: 130px;
    height: auto;
    margin: 0;
    padding: 0;
    outline: 0 solid #ffff00;
    }

#thumbnails-3b {
    position: absolute;
    top: 410px;
    left: 180px;
    width: 130px;
    height: auto;
    margin: 0;
    padding: 0;
    outline: 0 solid #ffff00;
    }

#thumbnails-3c {
    position: absolute;
    top: 410px;
    left: 360px;
    width: 130px;
    height: auto;
    margin: 0;
    padding: 0;
    outline: 0 solid #ffff00;
    }

#thumbnails-3d {
    position: absolute;
    top: 410px;
    left: 540px;
    width: 130px;
    height: auto;
    margin: 0;
    padding: 0;
    outline: 0 solid #ffff00;
    }


#cplay-logo { 
     position: absolute;
     top: 8px;
     left: 0px;
     background-color: #ffffff;
     width: 350px;
     height: 240px;
     margin: 0;
     padding: 1px; 
     font-style: normal;
     border: 0 solid #3b3a3a;
     outline: 0 solid #ff0000;
     }




.thumbnails {
    width: 130px;
    font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
    font-size: 9px;
    font-weight: normal;
    margin-top: 5px;
    border: 0;
    outline: 0 solid #ffff00;
    }


.thumbnails a:link { text-decoration: underline; color: #9B4B9D; font-weight: bold; }
.thumbnails a:visited { text-decoration: underline; color: #9B4B9D; font-weight: bold; }
.thumbnails a:hover { text-decoration: none; color: #21A5DE; font-weight: bold; }
.thumbnails a:active { text-decoration: none; color: #61C088; font-weight: bold; }



span.frontback { 
    background-color: transparent;
    font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
    color: #61C088; 
    font-size: 9px;
    text-align: right;
    margin-right: 36px;
    outline: 0 solid #ff0000;
    }


span.click { 
     position: absolute;
     top: 120px;
     left: 0px;
     background-color: transparent;
     width: 350px;
     height: 240px;
     margin: 0;
     padding: 1px; 
     font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
     color: #4f4f4f; 
     font-size: 8.5px;
     font-style: normal;
     border: 0 solid #3b3a3a;
     outline: 0 solid #ff0000;
     }
 






/* Swatches ==================================================================================== */
.swatch {
    width: auto;
    height: 40px;
    text-align: left;
    margin: 0.5em 0 0 0;
    padding: 0;
    border: 0;
    }


.swatch a:link { text-decoration: none; color: #444343; font-weight: bold; }
.swatch a:visited { text-decoration: none; color: #444343; font-weight: bold; }
.swatch a:hover { text-decoration: none; color: #444343; font-weight: bold; }
.swatch a:active { text-decoration: none; color: #444343; font-weight: bold; }





/* Clear Float ================================================================================= */
#clearfloat  {
	clear: both;
	height: 0;
	line-height: 0;
	}





/* Headers ===================================================================================== */
h1   { 
    background-color: transparent;
    color: #ffffff;
    font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.08em;
    padding: 0; 
    line-height: 1.6;
    text-align: left;
    outline: 0 solid #ffff00;
    } 
    
    
    
h2   { 
    background-color: transparent;
    color: #252525;
    font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
    font-weight: normal;
    font-size: 12px;
    padding: 0; 
    text-align: center;
    outline: 0 solid #ffff00;
    letter-spacing: 0.09em;
    }
   

h3   { 
    background-color: transparent;
    margin-top: 0;
    color: #e5dccb;
    font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
    font-weight: normal;
    font-size: 15px;
    letter-spacing: 0.2em;
    padding: 0.5em 1em 0 1em; 
    line-height: 1.6;
    text-align: center;
    outline: 0 solid #ff0000;
    } 
    


h4  { 
    background-color: transparent;
    color: #ccac8e;
    font-family: "Baskerville", sans-serif;
    font-weight: normal;
    font-size: 30px;
    letter-spacing: 0.2em;
    padding: 0 1em 0 1em; 
    outline: 0 solid #000000;
    text-align: center;
    outline: 0 solid #0000ff;
    } 


h5  { 
    background-color: transparent;
    color: #b07c4b;
    font-family: "Baskerville", sans-serif;
    font-weight: normal;
    font-size: 20px;
    text-transform: capitalize;
    letter-spacing: 0.2em;
    padding-left: 1em; 
    outline: 0 solid #ff0000;
    } 


h6  { 
    background-color: transparent;
    color: #e5dccb; 
    position: relative; 
    font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
    font-size: 16px; 
    font-weight: normal;
    text-align: left;
    margin: 0.5em 0 0 0em;
    padding: 0.9em 0 0 1em;
    } 
    
    





/* HR HORIZONTAL RULE ========================================================================== */
hr
	{
	background-color: #918581; 
	height: 2px;
	width: 80%;
	margin-top: 3em;
	text-align: center;
	border: 0;
	}





/* LIST ======================================================================================== */
ul  { 
    background-color: transparent;
    /* list-style-image: url(images/bullet.gif); */
    list-style-type: square;
    color: #252525;
    margin: 0 0 0 1em;
    padding: 0 0 0 0em;
    vertical-align: text-top; 
    text-align: left;
    } 




ol  { 
    margin: 0 0 0 1.9em;
    padding: 0em;
    vertical-align: text-top; 
    text-align: left;
    }




#error404   { 
    position: absolute;
    top: 0px;
    left: 240px;
    width: 670px;
    height: 590px;
    background-color: transparent;
    color: #252525;
    font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
    font-weight: normal;
    font-size: 12px;
    margin: 10px 0 1em 0;
    padding: 0;
    text-align: left;
    letter-spacing: 0.09em;
    outline: 0 solid #ff0000;
    }
 
 
 
#errorimg   { 
    background-color: transparent;
    margin: 0px;
    padding: 0;
    text-align: center;
    outline: 0 solid #ff0000;
    }
 
 
#error404 a:link { text-decoration: none; color: #21A5DE; font-weight: bold; }
#error404 a:visited { text-decoration: none; color: #21A5DE; font-weight: bold; }
#error404 a:hover { text-decoration: underline; color: #61C088; font-weight: bold; }
#error404 a:active { text-decoration: underline; color: #9B4B9D; font-weight: bold; }







/* Navigation Menu ============================================================================= */
#sidebarTotal { 
     position: absolute;
     top: 180px;
     left: 50px;
     background-color: transparent;
     width: 200px;
     height: auto;
     margin: 0;
     padding: 0;
     outline: 0 solid #ff0000;
     } 
     


.jawnav { 
    background-color: transparent;
    color: #ffffff;
    font-family: "Lucida Grande", "Trebuchet MS", "Myriad Pro", sans-serif;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.08em;
    padding-bottom: 1em; 
    line-height: 1.6;
    text-align: left;
    outline: 0 solid #ffff00;
    } 

.jawnav a:link { text-decoration: none; color: #ffffff; }
.jawnav a:visited { text-decoration: none; color: #ffffff; }
.jawnav a:hover { text-decoration: underline; color: #ffffff; }
.jawnav a:active { text-decoration: underline; color: #ffffff; }


span.jenn { 
    background-color: transparent;
    font-size: 14px;
    color: #ffda4a; 
    line-height: 1.5;
    font-weight: normal;
    } 





/* Accordion Navigation Menu =================================================================== */ 
dl.accordion-menu 
	{
	background-color: transparent;
	margin: 0;
	padding: 0;
	width: 120px;
	}

dl.accordion-menu dt.a-m-t 
	{
	background-color: transparent;
	margin: 0;
	color: #ffffff;
	padding: 0.25em 1em 0.25em 0.25em;
	border-bottom: 1px solid #FFDA4A;
	width: 120px;
	}

dl.accordion-menu dt.a-m-t-hover
	{
	color: #FFDA4A;
	background-color: transparent;
	font-weight: normal;
	width: 120px;
	}

html.accordion-menu-js dt.a-m-t-expand 
	{
	color: #ffffff;
	background: #252525;
	font-weight: normal;
	width: 120px;
	}

dl.accordion-menu dt.a-m-t-down
	{
	background-color: transparent;
	width: 120px;
	}

html.accordion-menu-js dt.a-m-t
    {
	cursor: pointer;
	zoom: 1;
	}

dl.accordion-menu dd.a-m-d 
	{
	margin: 0;
	padding: 0;
	padding:0;
	}

html.accordion-menu-js dd.a-m-d
    {
	display: none;
	}

html.accordion-menu-js dd.a-m-d-expand 
    {
	display: block;
	}

html.accordion-menu-js dd.a-m-d-before-expand 
    {
	display: block;
	position: relative;
	z-index:-1;
	opacity: 0;
	height: auto !important;
	visibility: hidden;
	overflow: visible;
	}

html.accordion-menu-js dd.a-m-d-anim 
    {
	overflow: hidden;
	display: block;	
	}

dl.accordion-menu dd.a-m-d .bd 
    {
	border: solid 0px #fff;
	background-color: transparent;
	padding-bottom: 10px;
	padding-left: 0.25em;
	line-height: 1.6em;
	}