/*-----------------------------------------------------------------------------
Prototype Style Sheet (empty commented stylesheet)

version:   1.0
author:    andy budd
email:     info@andybudd.com
website:   http://www.andybudd.com/
-----------------------------------------------------------------------------*/

/* border: 1px solid #ff0000; /*

/* =General
-----------------------------------------------------------------------------*/


/* Remove padding and margin */
* { margin: 0; 	padding: 0; }

/* Put it back on certain elements */
h2, h3, h4, h5, h6, p, pre, blockquote, form, fieldset, table, ul { margin: 5px 0;}

/* Class for clearing floats */
.clear { clear:both; }

.floatlf {float: left; margin-right: 10px;}
.floatrt {float: right; margin-left: 10px;}

/* Remove border around linked images */
img { border: 0; }

/* MALARKEY IMAGE REPLACEMENT class */ 		
.mir { letter-spacing : -1000em; } 
/* Just for Opera, but hide from MacIE */ 
/*\*/html>body .mir { letter-spacing : normal; text-indent : -999em; overflow : hidden;} 
/* End of hack */


/* =Basic positional layout
-----------------------------------------------------------------------------*/

body {
	text-align: center;
	font-family: "Lucida Grande", "Lucida Sans", "Trebuchet MS", Tahoma, Verdana, sans-serif;
	font-size: 62.5%;
	line-height: 1.6;
	color: #000;
	background-color:#fff;
	background-image: url(../images/architecture/bgrope2.jpg);
	background-repeat: repeat;
	padding: 0 410px 0 410px; /* these side paddings together determine the natural min-width */
	}
	
body#words, body#respond {
	background-color:#000;
	background-image: url(../images/architecture/bgrope2_black.jpg);
	}

div#sizer {
	width: 40%; /* here is the critical value for customizing the Jello behavior */
	margin: 0 auto 0 auto; /* standard centering method */
	text-align: left; /* resets centering hack to default */
	}	
		
div#wrapper {
	margin: 0 -410px 0 -410px; /* these side margins should be the same or slightly less than body paddings */
	min-width: 820px; /* This prevents Safari from losing the negative margins in narrow windows */
	text-align: left;
	position: relative;
	}
	
/* Holly hack for IE Must be zero, not the usual 1% value, due to IE bug  \*/
* html body,
* html #sizer,
* html #wrapper { height: 0; }
/* */	
	
/* helps IE get the child percentages right. */
div#inner { width: 100%; } 	

div#wrapper {
	background-repeat: no-repeat;
	background-position: 93% 0px;
	}	
	
body#men div#wrapper {background-color: #2d2d82; background-image: url(../images/architecture/menright.gif)}
body#women div#wrapper { background-color: #cc3366; background-image: url(../images/architecture/womenright.gif); }		
body#words div#wrapper, body#respond div#wrapper { background-color: #fff; background-image: url(../images/architecture/wordsright.gif);}
	
	
/* =body front page
-----------------------------------------------------------------------------*/
body#front {
	background-image: url(../images/architecture/frontbg.gif);
	background-repeat: repeat-y;
	background-position: center top;
	}	

body#front div#wrapper {
	background-image: url(../images/architecture/blue_cover.jpg);
	background-repeat: no-repeat;
	background-position: right top;
	}
	
body#front div#mainContent { width: 48%; height: 690px;}	
body#front div#secondaryContent {
	width: 48%;
	height: 690px;
	background-image: url(../images/architecture/pink_cover.jpg);
	background-repeat: no-repeat;
	}	
	
div#secondaryContent h1	{
	position:relative;
	margin: 30px 0 0 200px;
	width: 198px;
	height: 110px;
	}
	
body#front div#secondaryContent h1 span {background-image: url(../images/architecture/front_header.gif);}	

body#front h2 {font-size: 1.8em; margin-top: 30px;}
body#front div#secondaryContent h2 {text-align:right;}
body#front div#secondaryContent h2 a:link, 
body#front div#secondaryContent h2 a:visited {color: #2d2d82;}	
body#front div#secondaryContent h2 a:hover, 
body#front div#mainContent h2 a:hover {color: #fff} 

body#front p {color: #fff; margin-top: 30px; width: 150px}
.size {font-size: 1.3em; font-weight: bold}
body#front p a:link, 
body#front p a:visited,
body#front div#mainContent h2 a:link,
body#front div#mainContent h2 a:visited {color: #f69; }

body#front div#footer {	
	clear: both;
	height: 180px;
	background-color: #000;}		

body#front ul.left {list-style-type: none; float: left; margin-left: 20px}
body#front ul.right {list-style-type: none; float: right;margin-right: 20px} 
body#front ul li {color:#fff}
body#front ul li a:link, body#front ul li a:visited {color:#fff}

body#front div#footer p {width: 500px; float: left; margin: 10px 0 0 50px}
	

/* =pop-up
-----------------------------------------------------------------------------*/	

body#poem_f, body#poem_m {
	padding: 0;
	width: 400px;
	border: 4px solid #2d2d82;
	background-image: none;
	text-align: left;
	padding: 10px 0
	}

body#poem_f { border: 4px solid #cc3366;}		
body#poem_f p, body#poem_m p, body#poem_f h2, body#poem_m h2 {padding: 5px 10px}
body#poem_m h2 {color: #cc3366;}
body#poem_f h2 {color: #2d2d82;}
body#poem_f strong, body#poem_m strong {color: #555 }

	
/* =main and secondary columns
-----------------------------------------------------------------------------*/	
		
div#mainContent { 
	float: right; 
	width: 70%; 
	color: #000;
	}
		
div#secondaryContent { 
	width: 25%; 
	float: left;
	}
	

/* =right column
-----------------------------------------------------------------------------*/

div#right {
	float: right;
	width: 36%;
	padding-top: 350px;
	}
	
div#right img {border: solid 1px #fff; margin: 0 0 20px 10%}	


/* =mainNav
-----------------------------------------------------------------------------*/

ul#mainNav {
	width:360px; 
	padding: 0 0 30px 5px;
	margin: 30px 0 0 0; 
	list-style-type:none; 
	}
	
ul#mainNav li {display:inline;}
ul#mainNav li a {
	float:left; 
	display:block; 
	height: 35px; 
	padding-right: 20px;
	position: relative
	}
	
ul#mainNav li a span {
	position: absolute;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	}	
	
ul#mainNav li a#about {width: 50px}	
ul#mainNav li a#workshops {width: 96px}
ul#mainNav li a#poems {width: 58px}
ul#mainNav li a#you {width: 71px}

/* menNav */
a:link#about span, a:visited#about span	{
	background:url(../images/navigation/about.gif) no-repeat;
	}
a:link#workshops span, a:visited#workshops span {
	background:url(../images/navigation/workshops.gif) no-repeat;
	}
a:link#poems span, a:visited#poems span {
	background:url(../images/navigation/poems.gif) no-repeat;
	}
a:link#you span,a:visited#you span {
	background:url(../images/navigation/you.gif) no-repeat;
	}
a:hover#about span, a#about.active span {
	background:url(../images/navigation/about_over.gif) no-repeat;
	}
a:hover#workshops span, a#workshops.active span {
	background:url(../images/navigation/workshops_over.gif) no-repeat;
	}
a:hover#poems span, a#poems.active span {
	background:url(../images/navigation/poems_over.gif) no-repeat;
	}
a:hover#you span, a#you.active span {
	background:url(../images/navigation/you_over.gif) no-repeat;
	}

/* womenNav */
body#women a:link#about span, body#women a:visited#about span {
	background:url(../images/navigation/about_f.gif) no-repeat;
	}
body#women a:link#workshops span, body#women a:visited#workshops span {
	background:url(../images/navigation/workshops_f.gif) no-repeat;
	}
body#women a:link#poems span, body#women a:visited#poems span {
	background:url(../images/navigation/poems_f.gif) no-repeat;
	}
body#women a:link#you span, body#women a:visited#you span {
	background:url(../images/navigation/you_f.gif) no-repeat;
	}
body#women a:hover#about span, body#women a#about.active span {
	background:url(../images/navigation/about_f_over.gif) no-repeat;
	}
body#women a:hover#workshops span, body#women a#workshops.active span {
	background:url(../images/navigation/workshops_f_over.gif) no-repeat;
	}
body#women a:hover#poems span, body#women a#poems.active span {
	background:url(../images/navigation/poems_f_over.gif) no-repeat;
	}
body#women a:hover#you span, body#women a#you.active span {
	background:url(../images/navigation/you_f_over.gif) no-repeat;
	}

/* wordsNav and respondNav */
body#words a:link#about span, body#words a:visited#about span,
body#respond a:link#about span, body#respond a:visited#about span {
	background:url(../images/navigation/about_w.gif) no-repeat;
	}
body#words a:link#workshops span, body#words a:visited#workshops span,
body#respond a:link#workshops span, body#respond a:visited#workshops span {
	background:url(../images/navigation/workshops_w.gif) no-repeat;
	}
body#words a:link#poems span, body#words a:visited#poems span,
body#respond a:link#poems span, body#respond a:visited#poems span {
	background:url(../images/navigation/poems_w.gif) no-repeat;
	}
body#words a:link#you span, body#words a:visited#you span,
body#respond a:link#you span, body#respond a:visited#you span {
	background:url(../images/navigation/you_w.gif) no-repeat;
	}
body#words a:hover#about span, body#words a#about.active span,
body#respond a:hover#about span, body#respond a#about.active span {
	background:url(../images/navigation/about_w_over.gif) no-repeat;
	}
body#words a:hover#workshops span, body#words a#workshops.active span,
body#respond a:hover#workshops span, body#respond a#workshops.active span {
	background:url(../images/navigation/workshops_w_over.gif) no-repeat;
	}
body#words a:hover#poems span, body#words a#poems.active span,
body#respond a:hover#poems span, body#respond a#poems.active span {
	background:url(../images/navigation/poems_w_over.gif) no-repeat;
	}
body#words a:hover#you span, body#words a#you.active span,
body#respond a:hover#you span, body#respond a#you.active span {
	background:url(../images/navigation/you_w_over.gif) no-repeat;
	}


/* =mainContent
-----------------------------------------------------------------------------*/


/* =h1 */

div#mainContent h1 { 
	position:relative;
	margin: 30px 0 0 15px;
	width: 298px;
	height: 63px;
	}
	
div#mainContent h1 span, div#secondaryContent h1 span {
	position: absolute;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	}
	
body#men div#mainContent h1 span {background-image: url(../images/architecture/menbg.gif);}
body#women div#mainContent h1 span {background-image: url(../images/architecture/womenbg.gif);}
body#words div#mainContent h1 span, body#respond div#mainContent h1 span {background-image: url(../images/architecture/wordsbg.gif);}

/* =feature */	
div.feature, div.featurebig {
	width: 356px;
	background-color: #fff;
	background-repeat: no-repeat;
	margin-bottom: 30px;
	}	
	
body#men div.feature {background-image: url(../images/architecture/scrap.jpg); height: 339px;}	
body#men div.featurebig {background-image: url(../images/architecture/biggerscrap.jpg); height: 530px;}	
body#women div.feature {background-image: url(../images/architecture/scrap_f.jpg); height: 339px;}	
body#women div.featurebig {background-image: url(../images/architecture/biggerscrap_f.jpg); height: 530px}
	
div.feature p, 
div.featurebig p,
div.feature ul, 
div.featurebig ul { padding-left: 40px; padding-right: 35px; }

div.feature h2, 
div.featurebig h2,
div.featurepoem h2 { padding-top: 35px; padding-left: 40px; margin-bottom: 0px; }	

div.feature img, div.featurebig img {padding: 5px 40px 0 0;}
div.feature ul, div.featurebig ul { list-style-type: none; margin-top: 10px }


/* =featurepoem */
div.featurepoem p, 
div.featurepoem h2,
div.featurepoem h3,
div.featurepoem h4 { padding-left: 20px; padding-right: 20px; }
div.featurepoem img {float: right; padding: 20px 20px 0 0;} 
div.featurepoem {
	width: 370px; 
	margin-top: 20px;
	color: #000;
	}
	
div.featurepoem h2 {	
	padding-top: 20px;
	margin-top: 0;
	text-transform:uppercase;
	}
	
div.featurepoem h4	{ margin-top: 50px }
div.featurepoem h4.first {margin-top: 10px}	
	
body#women div.featurepoem h3 {font-size: 1.8em; color: #cc3366; padding-top: 10px}	
body#men div.featurepoem h3 {font-size: 1.8em; color: #2d2d82; padding-top: 10px}
body#women div.featurepoem h4 {color: #cc3366;} /*biog list */
body#men div.featurepoem h4 {color: #2d2d82;} /*biog list */

body#men div.featurepoem h4:target, body#women div.featurepoem h4:target {
	background-color: #000; color: #fff; 
	} /*this is to target internal links in biog list */
	

	
div.featurepoem p.last {
	padding-bottom: 20px;
	margin: 0
	}		

body#women div.featurepoem	{background: #fff url(../images/boxes/poemmiddle.gif) repeat-y;}
body#women div.featurepoem h2 {background: url(../images/boxes/poemtop.gif) no-repeat left top; }
body#women div.featurepoem p.last {	background: url(../images/boxes/poembottom.gif) no-repeat left bottom;}
body#men div.featurepoem {background: #fff url(../images/boxes/poemmiddle_m.gif) repeat-y;}
body#men div.featurepoem h2 {background: url(../images/boxes/poemtop_m.gif) no-repeat left top; }
body#men div.featurepoem p.last {	background: url(../images/boxes/poembottom_m.gif) no-repeat left bottom;}
	
/* workshop and respond pages*/

body#words div.feature p,
body#words div.feature h2,
body#words div.feature img, 
body#respond div.feature p, 
body#respond div.feature h2, 
body#respond div.feature img { padding-left: 5px; padding-right: 0; }

body#words div.feature h2 {text-transform:uppercase; color: #2d2d82; padding-top: 35px}
body#respond div.feature h2 {text-transform:uppercase; color: #cc3366; padding-top: 35px}

body#words h3 { 
	color: #cc3366; 
	padding: 15px 0 5px 0; 
	margin-left: 5px; 
	border-bottom: 3px solid #cc3366;
	} 

/* p classes*/
p.byline {
	font-weight: bold; 
	text-transform:uppercase;
	font-size: 1.3em; 
	margin-top: 10px; 
	margin-bottom: 20px;
	}
	
body#men p.byline {color: #cc3366; }
body#women p.byline {color: #2d2d82; }
p.review {color: #006;} 
p.reviewby {color: #444; text-align: right; font-weight: bold; margin-bottom: 20px;}
p.biog {
	color: #444;
	margin-bottom: 20px;
	padding-top: 20px;
	background-image: url(../images/borderLine.gif);
	background-repeat: no-repeat;
	background-position: center top;
	}

a.top {font-size: 1.1em; float: right; padding: 5px; margin-right: 20px; border: 1px solid #ccc;} 


/* =secondaryContent
-----------------------------------------------------------------------------*/

div#secondaryContent img {margin: 30px 0 0 60px;}
div#secondaryContent div.news p img {margin: 0;}
img.bookcovers  {border: solid 1px #fff;}

ul#secondaryNav {
	width:140px; 
	height: 210px;
	margin: 0 0 0 60px; 
	list-style-type:none;
	}
	
ul#secondaryNav li a { display:block; position: relative; }

ul#secondaryNav li a#women, ul#secondaryNav li a#men,
ul#secondaryNav li a#wordsmen, ul#secondaryNav li a#wordswomen {
	width: 140px; 
	height: 40px; 
	padding-bottom: 53px;
	}
	
ul#secondaryNav li a#buy {
	width: 115px; 
	height: 115px;
	margin-left: 12px;
	}	
	
ul#secondaryNav li a span {
	position: absolute;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	}	
	
ul#secondaryNav li a#women span {background: url(../images/navigation/nav_women.gif) no-repeat;}
ul#secondaryNav li a#men span {background: url(../images/navigation/nav_men.gif) no-repeat;}	
ul#secondaryNav li a#wordsmen span {background: url(../images/navigation/nav_men_words.gif) no-repeat;}	
ul#secondaryNav li a#wordswomen span {background: url(../images/navigation/nav_women_words.gif) no-repeat;}	
	

	
body#men ul#secondaryNav li a#buy span {background:url(../images/navigation/buy.gif) no-repeat;}
body#women ul#secondaryNav li a#buy	span {background:url(../images/navigation/buy_f.gif) no-repeat;}	
body#words ul#secondaryNav li a#buy	span {background:url(../images/navigation/buy_w.gif) no-repeat;}
body#respond ul#secondaryNav li a#buy span	{background:url(../images/navigation/buy_r.gif) no-repeat;}	


/* news */

div.news {
	width: 140px;
	margin-left: 60px;
	margin-top: 30px;
	background-color: #fff;
	color: #000;
	}
	
body#men div.news {background: url(../images/boxes/newsmiddle.gif) repeat-y;}
body#women div.news {background: url(../images/boxes/newsmiddle_f.gif) repeat-y;}	
body#words div.news  {background: url(../images/boxes/newsmiddle_w.gif) repeat-y;}	

div.news h2 { padding-top: 10px; margin-top: 0;}
div.news p.last {padding-bottom: 15px; margin: 0 }
div.news h2, div.news p { padding-left: 10px; padding-right: 10px;}
div.news img {padding: 0 10px}

body#men div.news h2 { color: #cc3366; background: url(../images/boxes/newstop.gif) no-repeat left top; }
body#women div.news h2 { color: #2d2d82; background: url(../images/boxes/newstop_f.gif) no-repeat left top; }
body#words div.news h2 { color: #333; background: url(../images/boxes/newstop_w.gif) no-repeat left top; }	
	
body#men div.news p.last { background: url(../images/boxes/newsbottom.gif) no-repeat left bottom;	}
body#women div.news p.last { background: url(../images/boxes/newsbottom_f.gif) no-repeat left bottom; }
body#words div.news p.last { background: url(../images/boxes/newsbottom_w.gif) no-repeat left bottom; }

body#respond div.news h2 {color: #2d2d82;}
div.news p.date {color: #555555; text-transform:uppercase}	


/* =Footer
-----------------------------------------------------------------------------*/
div#footer {
clear: both;
height: 250px;
position: relative
}

body#men div#footer  {
	background-image: url(../images/architecture/footer_men.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
}
body#women div#footer  {
	background-image: url(../images/architecture/footer_women.gif);
	background-repeat: no-repeat;
	background-position: right bottom;}
	
body#words div#footer, body#respond div#footer {
	background-image: url(../images/architecture/footer_words.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
	}
		
div#footer p.top {
	position: absolute;
	padding: 5px;
	border: 1px solid #666;
	background-color: #fff;
	left: 60px;
	bottom: 70px;
	}
	
div#footer p.credit {
	position: absolute;
	right: 20px;
	bottom: 10px;
	font-family: 'Trebuchet MS', Verdana, Arial;
	}	



/* =Links 
----------------------------------------------------------------------------*/
a { text-decoration: none; font-weight: bold}
a:link, a:visited { color:#CC3366}
a:hover {text-decoration:underline}

body#women a:link, body#women a:visited, 
body#respond a:link, body#respond a:visited { color:#2d2d82}

body#men ul a:link, body#men ul a:visited {color:#2d2d82;}
body#women ul a:link, body#women ul a:visited {color:#cc3366;}

div#footer p.credit a:link, div#footer p.credit a:visited {color: #fff}
div#footer p.credit a:hover {color: #ccc; text-decoration: none}


/* =Typography
-----------------------------------------------------------------------------*/

/*HEADS*/
h1 { font-size: 2.5em; }
h2 { font-size: 1.5em; color: #000 }
h3 { font-size: 1.4em; }
h4 { font-size: 1.4em; }

p  { font-size: 1.2em; }	
li  { font-size: 1.2em; }	
blockquote { font-size: 1.5em; color:#555555; line-height: 1.3 }


/* =Forms
-----------------------------------------------------------------------------*/
form { padding: 1em 0; margin: 0}
fieldset {
	margin: 0 1em;
	padding: 1em;
	border: 1px solid #ccc;
	background: #f8f8f8;
	}
		
legend { font-weight: bold; }		
label { display: block; color: #2d2d82;}
input { width: 200px; margin-bottom: 10px; }	
textarea {
	width: 300px;
	height: 300px;
	margin-bottom: 20px;
	}		
	
input:focus, textarea:focus {background: #ffc;}	

input[type="text"], textarea {
 border-top: 2px solid #999;
 border-left: 2px solid #999;
 border-bottom: 2px solid #ccc;
  border-right: 2px solid #ccc;
  }
  
form p {position: relative;  }