/*
|  http://www.artisanbreadbaking.com/css/recipes.css  2-19-08
|  stylesheet for all pages in http://www.artisanbreadbaking.com
|  Media:         all
|  XHTML layout:  avoiding being table-based
|           (see inline comments)
|-------------------------------------------*/  
 
body {
  margin: 0;
  padding: 0;
 }

/*  Style for the header.  This is complex,
    but once set, it's the same for all breads.
*/

#headpic{position:absolute;top:0px;left:0px;height:100px;width:132px;}
#headleft{position:absolute;top:0px;left:132px;height:100px;width:78px;background:#FFCC99;}
#headtitle{position:absolute;top:0px;left:210px;text-align:center;height:100px;width:450px;background:tan;font:1.4em/1.4:font-weight:lighter;}
#headright{position:absolute;top:0px;left:660px;height:100px;width:340px;background:#FFCC99;}

.cntr{text-align:center;}


/*   Position for Amazon icon
     + 180 X 180, due to padding
     + Sits in upper left corner, just under header
*/

#topleft{position:absolute;top:180px;left:10px;width:160px;height:160px;}

/*   Horizontal spaces and the head ad stripe
*/

#headstripeupper{position:absolute;top:100px;height:20px;left:180px;width:640px;}

#headstripe{position:absolute;top:120px;height:900px;left:180px;width:640px;}


/*  Affiliate link at right top,
    just under the header
*/

#topright{position:absolute;left:750px;top:100px;}


/*   The text box, where the content goes.
*/

#textbox{position:absolute;padding-left:10px;padding-right:10px;top:270px;left:180px;width:640px;height:1200px;color: #000;  background: #fff;
  font-family: Arial, Helvetica, sans-serif;  font-size: .9em;  line-height: 125%; 
}

/*   The left side of the page.  
The first part is a banner headbox.
*/

#headbox{position:absolute;top:200px;left:200px;width:800px;height:60px;}

/*   Second part is a small banner and 13 places for affiliate links.
*/

#lbanner{position:absolute;top:105px;left:10px;width:468px;height:60px;}
#l0{position:absolute;top:105px;left:10px;width:150px;height:150px;}
#l1{position:absolute;top:200px;left:10px;width:150px;height:150px;}
#l2{position:absolute;top:440px;left:10px;width:150px;height:150px;}
#l3{position:absolute;top:680px;left:10px;width:150px;height:150px;}
#l4{position:absolute;top:920px;left:10px;width:150px;height:150px;}
#l5{position:absolute;top:1160px;left:10px;width:150px;height:150px;}
#l6{position:absolute;top:1400px;left:10px;width:150px;height:150px;}
#l7{position:absolute;top:1640px;left:10px;width:150px;height:150px;}
#l8{position:absolute;top:1880px;left:10px;width:150px;height:150px;}
#l9{position:absolute;top:2120px;left:10px;width:150px;height:150px;}
#l10{position:absolute;top:2360px;left:10px;width:150px;height:150px;}
#l11{position:absolute;top:2600px;left:10px;width:150px;height:150px;}
#l12{position:absolute;top:2840px;left:10px;width:150px;height:150px;}

/*   Third part is two large towers.
*/

#ltower1{position:absolute;top:250px;left:10px;width:150px;height:600px;}
#ltower2{position:absolute;top:1000px;left:10px;width:150px;height:600px;}


/*   Right side has the same provisions as the left side. 
First is a half banner.
*/

#rbanner{position:absolute;top:105px;left:520px;width:468px;height:60px;}

/*   Then 13 positions for affiliate links.
*/

#r0{position:absolute;top:105px;left:840px;width:150px;height:150px;}
#r1{position:absolute;top:220px;left:840px;width:150px;height:150px;}
#r2{position:absolute;top:460px;left:840px;width:150px;height:150px;}
#r3{position:absolute;top:700px;left:840px;width:150px;height:150px;}
#r4{position:absolute;top:940px;left:840px;width:150px;height:150px;}
#r5{position:absolute;top:1180px;left:840px;width:150px;height:150px;}
#r6{position:absolute;top:1420px;left:840px;width:150px;height:150px;}
#r7{position:absolute;top:1660px;left:840px;width:150px;height:150px;}
#r8{position:absolute;top:1900px;left:840px;width:150px;height:150px;}
#r9{position:absolute;top:2140px;left:840px;width:150px;height:150px;}
#r10{position:absolute;top:2380px;left:840px;width:150px;height:150px;}
#r11{position:absolute;top:2620px;left:840px;width:150px;height:150px;}
#r12{position:absolute;top:2860px;left:840px;width:150px;height:150px;}

/*   Last, the two towers.
*/

#rtower1{position:absolute;top:250px;left:840px;width:150px;height:600px;}
#rtower2{position:absolute;top:1000px;left:840px;width:150px;height:600px;}


/*   The foot stripes.
*/

#footstripe{position:absolute;background-color:green;top:980px;left:0px;width:1000px;height:30px;}
#footbox{position:absolute;top:980px;left:0pc;width:1000px;height:100px;}


/*  the code to allow the index file to display properly
*/

#ixnav{position:absolute;top:300px;width:120px;left:10px;}
#ixtext{position:absolute;top:300px;width:490px;left:180px;bgcolor:tan;}
#iximages{position:absolute;top:200px;width:90px;left:860px;}
#ixaffiliate{position:absolute;top:300px;width:180px;left:810px;}

h1 {	font-size: 2em;	font-weight: bold;}

h2 {	font-size: 1.6em;	font-weight: bold;}

h3 {        font-size: 1.4em;    font-weight:bold;}

h4 {	font-size: 1.2em;	font-style: italic;	font-weight: bold;}

h5 {	font-size: 1em;	font-style: italic;	font-weight: bold;}

h6 {	font-size: 1em;	font-style: italic;	font-weight: normal;}