/* 
   filename: styles.css
   purpose:  main site styles for davesrecipes.org
*/

/* ===== themes ===== */
body#greystar div#bg          { background-image: url('/images/bg2.jpg'); }
body#greystar div#container   { background-image: url('/images/top2.jpg'); }
body#bluecool div#bg          { background-image: url('/images/bg3.jpg'); }
body#bluecool div#container   { background-image: url('/images/top3.jpg'); }

/* ===== default styles ===== */
body,html                     { height: 100%; }
body                          { font: 1em Arial; margin: 0px; padding: 0px; }
div#bg                        { background: url('/images/bg1.jpg') top center repeat-y; min-width: 1000px; min-height: 100%; padding-bottom: 80px; }
p.error                       { color: #f00 !important; }

/* ===== main page container ===== */
div#container                 { position: relative; width: 786px; margin: 0 auto; padding: 0 107px; background: url('/images/top1.jpg') top center no-repeat; }
body.poetry div#container     { height: 1100px; }
body.magnets div#container    { height: 1100px; }

/* ===== top menu ===== */
ul.topmenu                    { position: absolute; list-style: none; padding: 0; margin: 0; top: 66px; left: 430px; font-size: 11px; font-weight: bold; width: 240px;}
ul.topmenu li a               { display: block; float: left; width: 56px; height: 16px !important; padding-bottom: 46px; border: 0; overflow: hidden; margin: 0 3px 0 0; background-image: url('/images/topbutton.png'); background-repeat: no-repeat; background-position: 0 16px; text-decoration: none; color: #777; }
ul.topmenu li a.active        { background-position: -56px 16px; }
ul.topmenu li a:hover         { background-position: -56px 16px; }
ul.topmenu li.browse a        { background-position: 7px 16px; }
ul.topmenu li.browse a.active { background-position: -49px 16px; }
ul.topmenu li.browse a:hover  { background-position: -49px 16px; }
ul.topmenu li.search a        { background-position: 4px 16px; }
ul.topmenu li.search a.active { background-position: -52px 16px; }
ul.topmenu li.search a:hover  { background-position: -52px 16px; }
ul.topmenu li.login a         { background-position: 0px 16px; }
ul.topmenu li.login a.active  { background-position: -56px 16px; }
ul.topmenu li.login a:hover   { background-position: -56px 16px; }

/* ===== main menu ===== */
ul.mainmenu                   { position: absolute; list-style: none; padding: 0 0 0 151px; margin: 0; top: 290px;  /*border: 1px dotted #0f0; */}
ul.mainmenu li a              { display: block; float: left; width: 120px; height: 0px !important; padding-top: 143px; overflow: hidden; margin: 0 40px 0 0; }
ul.mainmenu li.home a         { background-image: url('/images/mm-home.jpg'); }
ul.mainmenu li.about a        { background-image: url('/images/mm-about.jpg'); width: 150px; margin: 0 20px 0 0; }
ul.mainmenu li.browse a       { background-image: url('/images/mm-browse.jpg'); width: 140px; }

/* ===== main heading ===== */
h1             { display: block; position: absolute; width: 775px; height: 100px; left: 110px; top: 150px; z-index: 20; }
h1 span        { display: block; position: absolute; background-repeat: no-repeat; height: 0px !important; overflow: hidden; }
h1 span#h11    { background-image: url('/images/h11d.png'); padding-top: 80px; width: 60px; left: 16px; top: 0; }
h1 span#h12    { background-image: url('/images/h12a.png'); padding-top: 53px; width: 60px; left: 73px; top: 13px; }
h1 span#h13    { background-image: url('/images/h13v.png'); padding-top: 60px; width: 63px; left: 136px; top: 13px; }
h1 span#h14    { background-image: url('/images/h14e.png'); padding-top: 59px; width: 57px; left: 195px; top: 16px;}
h1 span#h15    { background-image: url('/images/h15s.png'); padding-top: 59px; width: 52px; left: 251px; top: 7px;}
h1 span#h16    { background-image: url('/images/h16r.png'); padding-top: 56px; width: 40px; left: 371px; top: 8px;}
h1 span#h17    { background-image: url('/images/h17e.png'); padding-top: 55px; width: 58px; left: 417px; top: 7px;}
h1 span#h18    { background-image: url('/images/h18c.png'); padding-top: 61px; width: 47px; left: 474px; top: 6px;}
h1 span#h19    { background-image: url('/images/h19i.png'); padding-top: 61px; width: 21px; left: 521px; top: 0px;}
h1 span#h110    { background-image: url('/images/h110p.png'); padding-top: 71px; width: 57px; left: 549px; top: 4px;}
h1 span#h111    { background-image: url('/images/h111e.png'); padding-top: 55px; width: 57px; left: 607px; top: 4px;}
h1 span#h112    { background-image: url('/images/h112s.png'); padding-top: 58px; width: 52px; left: 666px; top: 0px;}


/* ===== content ===== */
a#home         { position: absolute; top: 50px; left: 140px; display: block; width: 95px; height: 0px !important; overflow: hidden; padding-top: 95px; background: url(../images/home.png); }
div.content    { padding: 300px 25px 20px 100px; background: url('/images/handle.jpg') 35px 450px no-repeat; min-height: 450px;}

/* ===== homepage ===== */

div.homepage div.about        { position: absolute; top: 300px; left: 380px; width: 140px; height: 160px; background: url('/images/postit1.jpg') 100% 0 no-repeat; padding: 10px 20px; color: #333; font-family: Trebuchet; font-size: 17px; font-weight: bold;}
div.homepage div.recipe1      { position: absolute; top: 310px; right: 160px; width: 145px; height: 160px; }
div.homepage div.subscribe    { display: none; } 
div.homepage div.links        { position: absolute; top: 500px; left: 210px; width: 140px; height: 160px; background: url('/images/postit1.jpg') 100% 0 no-repeat; padding: 10px 20px; color: #333; font-family: Trebuchet; font-size: 13px; }
div.homepage div.links a      { text-decoration: none; color: #333; }
div.homepage div.links h3 a   { border-bottom: 1px dotted #333; }
div.homepage div.links p      { font-weight: normal; }
div.homepage div.links p a strong { border-bottom: 1px dotted #333; }
div.homepage div.links p.more a   { color: #375593; }
div.homepage div.magnets      { position: absolute; top: 600px; right: 200px; width: 140px; height: 160px; background: url('/images/postit1.jpg') 100% 0 no-repeat; padding: 10px 20px; color: #333; font-family: Trebuchet; font-size: 14px; font-weight: bold;}
div.homepage div.magnets a    { color: #333; text-decoration: none; border-bottom: 1px dotted #333;}
div.homepage div.magnets img  { border: 0; float: right; }
div.homepage div.magnets p a  { border: 0; }
div.homepage div.poetry       { position: absolute; top: 740px; left: 260px; }
div.homepage div.poetry a     { display: block; width: 132px; height: 0px !important; padding: 45px 0 0 0; overflow: hidden; background-image: url('/images/poetry.jpg'); }

div#poetry                    { display: block; position: absolute; width: 775px; height: 800px; left: 108px; top: 300px; z-index: 20; }
div#poetry span               { display: block; position: absolute; border: 1px solid #666; background: #ddd; color: #333; font-weight: bold; padding: 1px 3px; font-size: 11.5px; }

/* ===== article (home/links/about) ===== */
div.article                   { position: relative; background: url('/images/note-back.jpg') 35px 0px repeat-y; padding: 0; border: 1px dotted #0f0; width: 580px;}
div.article div               { /* background: url('/images/note-back.jpg') 35px 0px repeat-y; */ padding: 140px 40px 0 80px; margin: 0; }
a.polaroid                    { position: absolute; top: 0; left: 0; border: 0; z-index: 10; }
a.polaroid img                { width: 145px; height: 160px; border: 0; }
a.polaroid span               { width: 165px; height: 160px; background: url('/images/magnet-carrots.png') 100% 30px no-repeat; position: absolute; top: 0; left: 0; z-index: 11;}
div.article h2                { position: absolute; top: 0px; left: 50px; width: 390px; height: 70px; background: url('/images/note-top.jpg') top left no-repeat; padding: 80px 40px 0 100px; border: 1px dotted #f00; margin: 0; font-size: 14px; color: #f66; }
div.article p                 { font-size: 13px; color: #555; }

/* ===== browse categories list ===== */
div#categorylist              { float: left; width: 138px; }
div#categorylist ul           { list-style: none; padding: 0; margin: 0; }
div#categorylist ul li        { margin: 0 0 8px 0; }
div#categorylist ul li a      { display: block; width: 122px; padding: 26px 8px 0 8px; height: 33px; background-image: url('/images/cata.png'); text-align: center; color: #375593; text-decoration: none; font-weight: bold; font-size: 16px;}
div#categorylist ul li.cat2 a { background-image: url('/images/catb.png'); }
div#categorylist ul li.cat3 a { background-image: url('/images/catc.png'); }
div#categorylist ul li.catlatest a  { background-image: url('/images/catlatest.png'); height: 30px; }
div#categorylist ul li a.active     { background-position: 0 -59px; }

/* ===== browse recipies list ===== */
div#browsepage                { float: left; width: 465px; margin-left: 30px;}
div#browsepage ul             { list-style: none; padding: 0; margin: 0; }
div#browsepage ul li          { position: relative; display: block; width: 465px; height: 240px; padding: 0; margin: 0 0 25px 0; background-image: url('/images/fixedpaper.png'); background-repeat: no-repeat; background-position: 10px 20px;}
div#browsepage ul li h4       { padding: 85px 20px 0 165px; color: #375593; margin: 0; }
div#browsepage ul li.nopic h4 { padding-left: 40px; padding-top: 95px; }
div#browsepage ul li p        { padding: 8px 30px 0 165px; color: #666; margin: 0; font-weight: bold; font-size: 12.5px; }
div#browsepage ul li.nopic p  { padding-left: 40px; }
div#browsepage ul li h4 a     { text-decoration: none;  color: #375593; font-size: 18px; font-weight: normal; border-bottom: 1px dotted #375593; }
div#browsepage a.polaroid span{ width: 185px; height: 160px; background-position: 100% 0;}
div#browsepage li.rec2 a.polaroid span { background-image: url('/images/magnet-banana.png'); }
div#browsepage li.rec3 a.polaroid span { background-image: url('/images/magnet-apple.png'); }
div#browsepage li.rec4 a.polaroid span { background-image: url('/images/magnet-grapes.png'); }
div#browsepage li.rec5 a.polaroid span { background-image: url('/images/magnet-cherries.png'); }
p.nav                         { clear: both; width: 100%; }
p.nav a                       { float: right; display: block; width: 122px; padding: 27px 8px 0 8px; height: 32px; background-image: url('/images/cata.png'); text-align: center; color: #375593; text-decoration: none; font-weight: bold; font-size: 16px; }

/* ===== long article (can expand down) ===== */

ul.images                     { list-style: none; padding: 0; margin: 0; width: 180px; float: left; }

div.longarticle               { float: left; position: relative; background: url('/images/note-middle.png') 1px 0 repeat-y; padding: 0 0 20px 0; margin: 60px 0 0 30px; width: 437px;}
div.longarticle h2            { background: url('/images/note-top.png') 0 0 no-repeat; margin: 0; width: 437px; padding: 60px 20px 0 20px; position: absolute; left: 0; top: -60px; color: #375593; font-size: 20px;}
div.longarticle h2 span       { width: 437px; height: 100px; background: url('/images/magnet-carrots.png') 100% 0 no-repeat; position: absolute; top: -10px; left: 20px; z-index: 11;}
div.longarticle p             { padding: 10px 20px 0 20px; margin: 0; font-size: 14px; color: #666; }
div.longarticle p.intro       { padding-top: 40px; font-weight: bold; }
div.longarticle p.intro em    { display: block; font-weight: normal; font-style: normal; padding: 0 0 8px 0; }
div.longarticle h4            { padding: 16px 20px 0 20px; margin: 0; font-size: 16px; color: #375593; }
div.longarticle ul, div.longarticle ol
                              { padding: 8px 20px 0 40px; margin: 0; font-size: 14px; color: #666; }
div.longarticle div li        { padding: 0 0 6px 0; }
div.longarticle div.bottom    { width: 437px; position: absolute; left: 0; bottom: -21px; height: 31px; background: url('/images/note-bottom.png') 0 0 no-repeat; padding: 0; margin: 0; }

/* ===== fixed notice ===== */
div.notice                    { position: relative; display: block; width: 405px; height: 319px; padding: 0 20px; margin: 0; background-image: url('/images/fixedpaper.png'); background-repeat: no-repeat; }
div.notice p                  { color: #375593; margin: 0; padding: 75px 0 0 0; font-size: 16px; }


/* ===== links page ===== */

div.links ul                  { margin-top: 20px; list-style-image: url('/images/bulletpoint.gif'); }
div.links ul li h4            { font-size: 15px; padding: 10px 0 0 0; margin: 0; }
div.links ul li h4 a          { color: #375593; text-decoration: none; border-bottom: 1px dotted #375593; }
div.links ul li p             { padding: 8px 0 0 0; margin: 0; }
div.links h2 span             { background-image: url('/images/magnet-banana.png'); }

/* ===== login page ===== */

table.inputtable              { margin: 15px 0 15px 30px; }
table.inputtable th           { color: #666; font-weight: normal; vertical-align: top; }
table.inputtable input        { border: 1px solid #375593; padding: 2px; color: #375593; }
p.button                      { text-align: right; }
p.button input                { border: 1px solid #375593; background: #eee; color: #375593; font-weight: bold; font-size: 15px; cursor: pointer; }
p.button input:hover          { background-color: #f99; }

/* ===== magnet upload ===== */

div.magnetupload              { position: absolute; right: 200px; top: 280px; width: 190px; height: 210px; background: url('/images/postit2.jpg') 100% 0 no-repeat; padding: 20px 30px; color: #333; font-family: Trebuchet; font-size: 16px; z-index: 21; }
div.magnetupload input        { font-size: 12px; }
div#fridgemags                { display: block; position: absolute; width: 775px; height: 800px; left: 5px; top: 300px; z-index: 20; }
div#fridgemags span           { display: block; position: absolute; width: 95px; height: 95px; }

/* ===== search page ===== */

div.search h2 span            { background-image: url('/images/magnet-grapes.png'); }

/* ===== admin page ===== */
div.admin h2                  { color: #333; }
div.admin h3                  { color: #333; margin-top: 40px; }
div.admin h3 a                { color: #333; }
div.admin p.back              { color: #666; font-size: 13px; }
div.admin p.back a            { color: #666; }
ul.adminmenu                  { margin: 0; padding: 0; }
ul.adminmenu li               { list-style: none; padding: 0; margin: 0 0 10px 0; }
ul.adminmenu li a             { color: #333; display: block; height: 28px; padding-left: 30px; background: url(../images/small_recipe.png) top left no-repeat; }
ul.adminmenu li.addrecipe a   { background-image: url(../images/recipe_add_small.png); }
ul.adminmenu li.managerecipes a { background-image: url(../images/small_recipe.png); }
ul.adminmenu li.changepass a  { background-image: url(../images/change_password_small.png); }
ul.adminmenu li.categories a  { background-image: url(../images/small_category.png); }
ul.adminmenu li.links a       { background-image: url(../images/small_link.png); }
ul.adminmenu li.users a       { background-image: url(../images/small_user.png); }
ul.adminmenu li.newsletters a { background-image: url(../images/newsletter_small.png); }
ul.recipes                    { padding:0; margin: 0; }
ul.recipes li                 { background: url(../images/small_recipe_ok.png) top left no-repeat; list-style: none; margin: 0 0 8px 0; padding: 0 0 8px 30px; border-bottom: 1px dotted #ccc;}
ul.recipes li.inprogress      { background-image: url(../images/small_recipe_inprogress.png); }
ul.recipes li h4              { margin: 0; padding: 0;}
ul.recipes li h4 a            { color: #333; text-decoration: none; border-bottom: 1px solid #333; }
ul.recipes li em              { color: #999; font-size: 12px; }
ul.recipes li div.edit        { float: right;}
ul.recipes li div.edit a      { color: #333; margin-left: 10px; }
ul.recipes li div.edit a.edit { }

 
/* ===== print styles ===== */
@media print {
   body                                { background: transparent; }
   ul.mainmenu                         { display: none; }
   ul.topmenu                          { display: none; }
   div#container                       { width: auto; height: auto; background: transparent; padding: 0; }
   h1                                  { display: block; position: relative; width: auto; height: auto; left: 0; top: 0; padding: 0 20px; }
   body div#container h1 span          { display: inline; position: relative !important; top: 0! important; left: 0 !important; height: auto !important; width: auto !important; background: transparent;}
   body div#container div.content      { padding: 0; margin: 0; background: transparent; }
   body div#container div.longarticle  { background: transparent; width: auto; margin: 0;}
   body div#container div.longarticle h2     { background: transparent; padding: 0 20px 15px 20px; clear: both; position: relative; top: 0; left: 0; margin: 0; }
   body div#container div.longarticle span   { background: transparent; display: none;}
   body div#container div.longarticle p.intro{ background: transparent; position: relative; top: 0; left: 0; padding: 0 20px; margin: 0;}
   body div#container div.bottom       { background: transparent; }
   body div#container ul.images        { padding: 0 20px 15px 20px; }
   body div#container ul.images li     { float: left; margin: 0 20px 0 0; }
}