/* The file below is read by ALL browsers

	but the hacks contained within it further target 

	IE5-6 for Windows. See file for details. */



@import "ie6win.css";

@import "ie7win.css";



/*IE 5.5 hacks only*/

@media tty {

i{content:"";/*" "*/}}@m;

@import 'ie55win.css'; /*";}

}/* */ 



/* The file below is ONLY read by IE5/Win.

	Makes use of the Mid Pass Filter: 

	http://tantek.com/CSS/Examples/midpass.html */   

@media tty {

 i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";}

}/* */



/* The file below is ONLY read by IE5/Mac.

	Makes use of the Band Pass Filter: 

	http://www.stopdesign.com/examples/ie5mac-bpf/ */



/*\*//*/

  @import "ie5mac.css";

/**/



/* -- Generic Initiation items not covered in "undothml.css" -- */



body

{

	background: #fff;

	text-align: left;

	font-size: 62.5%;

	color: #444;

	font-family: Verdana, Helvetica, Arial, Sans-Serif;
	text-align: center;
	min-width: 800px;
}



h1, h2, h3, h4, h5, h6, p

{

	position: relative;

}



fieldset

{

	border : none;

}



legend

{

	display: none;

}



.invisible

{

	display: none;

}



.hide

{

	position: relative;

	left: -9999px;

	top: -9999px;

}



.floatLeft

{

	float: left;

}



.floatRight

{

	float: right;

}



.theBreaker

{

	height: 1px;

	clear: both;

	overflow: hidden;

}



/*Generic Levin image replacement -  http://levin.grundeis.net/files/20030809/alternatefir.html */



.replace

{ 

	position:relative; 

	margin:0px; 

	padding:0px; 

	/* hide overflow:hidden from IE5/Mac */ 

	/* \*/ overflow: hidden; /* */ 

} 



.replace span

{

	display:block; 

	position:absolute; 

	top:0px; 

	left:0px; 

	z-index:1; /*for Opera 5 and 6*/ 

}



/*Example HTML - all elements that require replacement use the .replace class then

set the rule for the specific image and dimensions and associate with the elements ID.



<h1 id="myh1" class="replace" >Headline<span></span></h1> 



the add the CSS:

#myh1, #myh1 span

{ 

	height:100px; 

	width:300px; 

	background-image: url(head.png); 

} 

*/

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clear { display: inline-block; }   
.clear:after, .container:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
* html .clear { height: 1%; }
.clear { display: block; }

#wrap {
	margin: 0 auto;
	margin-top: 20px;
	width: 800px;
	text-align: left;
	text-align: center;
}

#branding, #main, #foot{
	text-align: left;
}

#primary-nav {
	padding-bottom: 9px;
	/*background: url(../../images/line.jpg) left bottom no-repeat;*/
	
}

#primary-nav li{
	float: left;
	width: 20%;
	text-align: center;
	font-size: 1.2em;
	line-height: 2em;
}

#primary-nav li div, #primary-nav li div span,
#primary-nav li a, #primary-nav li a span{
	height: 28px;
	width: 100%;
}

#primary-nav li a{
	display: block;
	color: black;
}


#primary-nav li.home a span{
	background: url(../../images/nav-BG.gif) 0% 0%  no-repeat;
}

#primary-nav li.home div span,
#primary-nav li.home a:hover span,
#primary-nav li.home a:focus span{
	background: url(../../images/nav-BG.gif) 0% 100%  no-repeat;
}
/*------------------------------------*/
#primary-nav li.gallery a span{
	background: url(../../images/nav-BG.gif) 25% 0%  no-repeat;
}

#primary-nav li.gallery div span,
#primary-nav li.gallery a:hover span,
#primary-nav li.gallery a:focus span{
	background: url(../../images/nav-BG.gif) 25% 100% no-repeat;
}
/*------------------------------------*/
#primary-nav li.contact a span{
	background: url(../../images/nav-BG.gif) 75% 0%  no-repeat;
}

#primary-nav li.contact div span,
#primary-nav li.contact a:hover span,
#primary-nav li.contact a:focus span{
	background: url(../../images/nav-BG.gif) 75% 100% no-repeat;
}
/*------------------------------------*/
#primary-nav li.bio a span{
	background: url(../../images/nav-BG.gif) 50% 0%  no-repeat;
}

#primary-nav li.bio div span,
#primary-nav li.bio a:hover span,
#primary-nav li.bio a:focus span{
	background: url(../../images/nav-BG.gif) 50% 100% no-repeat;
}
/*------------------------------------*/
#primary-nav li.shop a span{
	background: url(../../images/nav-BG.gif) 100% 0%  no-repeat;
}

#primary-nav li.shop div span,
#primary-nav li.shop a:hover span,
#primary-nav li.shop a:focus span{
	background: url(../../images/nav-BG.gif) 100% 100% no-repeat;
}


/*#primary-nav li a:hover{
	text-decoration: underline;
}*/

h1#txtRebecca{
	font-size: 2em;
}

h1#txtRebecca a{
	display: block;
	height: 100%;
	width: 100%;
}

h1#txtRebecca, h1#txtRebecca span{
	width: 405px;
	height: 61px;
}

h1#txtRebecca, h2#txtIllustrator{
	margin-left: 197px
}

h2#txtIllustrator{
	font-size: 1.8em;
}

h1#txtRebecca span{
	background: url(../../images/h1-bec-BG.gif) top left no-repeat
}

h2#txtIllustrator, h2#txtIllustrator span{
	width: 506px;
	height: 40px;
}

h2#txtIllustrator span{
	background: url(../../images/h2-illustrator-BG.gif) top left no-repeat;
}

#thumbnails ul{
	width: 540px;
	margin: 0 auto;
}

#thumbnails ul li{
	float: left;
	margin: 1px;
}

#thumbnails ul li a{
	border: 1px solid #fff;
	display: block;
	opacity: 0.7;
}

#thumbnails ul li a:hover{
	border: 1px solid #000;
	opacity: 1;
}

#img img{
	display: block;
	border: solid 1px #999;
	margin: 0 auto 5px auto;
}

#content{
	padding-top: 1em;
	text-align: left;
}

#flash-content{
	width: 418px;
	margin: 0 auto;
}

.col{
	float: left;
	text-align: left;
}

.main{
	width: 500px;
}

.secondary{
	width: 300px;
}

.main .gutter{
	margin: 0 30px 0 0 ;
}

a.detached{
	display: block;
	margin: 0 0 1em 0;
}

h3{
	display: none;
	font-weight: Helvetica, Verdana, sans-serif;
	font-size: 1.2em;
	margin-bottom: 0.5em;
}

#gallery h3{
	margin-left: 200px;
}

a#flickr, a#flickr span,
a#blog, a#blog span{
	height: 75px;
	width: 150px;
}

a#flickr,
a#blog{
	float: left;
	margin-right: 10px;
	border: 1px solid #fff;
}

a#flickr:focus,
a#blog:focus,
a#flickr:hover,
a#blog:hover{
	border: 1px solid #000;
}

a#flickr:hover span,
a#blog:hover span{
	background-position: top left;
}


a#flickr span{
	background: url(../../images/lnk-flickr-BG.jpg) bottom left no-repeat;
}

a#blog span{
	background: url(../../images/lnk-blog-BG.jpg) bottom left no-repeat;
}

p{
	margin-bottom: 1em;
	font-size: 1em;
	line-height: 1.8em;
}

form, div#msg{
	width: 300px;
	margin: 0 auto;
}

div#msg ul, div#msg dl{
	font-size: 1.2em;
}

div#msg dt, div#msg dd{
	float: left;
}

div#msg dt{
	width: 100px;
	clear: left;
}

legend{
	display: none;
}

label, input.text, textarea{
	display: block;
	float: left;
	margin-bottom: 5px;
}

label{
	line-height: 1.8em;
}

input.text{
	width: 300px;
}

textarea{
	width: 300px;
	height: 150px;
}

#site-info p{
	margin-top: 1em;
	font-size: 0.9em;
}

#img p{
	text-align: center;
}