html, body{ margin: 0; padding: 0; background: url(../images/background.jpg) no-repeat center top fixed; font: 11px 'arial'; color: #333; cursor: default; }
.siteWidth{ width: 980px; margin-top: 20px; }

*:focus{ outline: none; }

/* pasek przewijania */
::-webkit-scrollbar{ height: 12px; width: 10px; background: #F7DA96; overflow: visible; }
::-webkit-scrollbar-corner{ display: none; background: #F7DA96; }
::-webkit-scrollbar-button{ display: none; height:0; width: 0; }
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment{ display: block; }
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement{ display: none; }
::-webkit-scrollbar-track{ -moz-background-clip: border; -webkit-background-clip: border; background-clip: padding-box; background-color: #f2d798; }
::-webkit-scrollbar-track:vertical, 
::-webkit-scrollbar-track:horizontal{ border-left-width: 0; border-right-width: 0; }
::-webkit-scrollbar-track:vertical,
::-webkit-scrollbar-track:horizontal,
::-webkit-scrollbar-thumb:vertical,
::-webkit-scrollbar-thumb:horizontal,
::-webkit-scrollbar-track:vertical,
::-webkit-scrollbar-track:horizontal,
::-webkit-scrollbar-thumb:vertical,
::-webkit-scrollbar-thumb:horizontal{ border-style: solid; border-color: transparent; }
::-webkit-scrollbar-thumb{ -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07); background-clip: padding-box; background-color: #EEAF5F; min-height: 28px; padding-top: 100px; }
::-webkit-scrollbar-thumb:hover{ -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,.25); background-color: #EEAF5F; }
::-webkit-scrollbar-thumb:active{ -webkit-box-shadow: inset 1px 1px 3px rgba(0,0,0,.35); background-color: #EEAF5F; }
::-webkit-scrollbar-thumb:vertical,
::-webkit-scrollbar-thumb:horizontal{ border-width: 0; border-left-width: 0; border-right-width: 0; }

/* Page background */
.p1{ width: 980px; min-height: 600px; background: #C38749; position: relative; border-radius: 4px; }
.p2{ width: 980px; min-height: 600px; background: #EEAF5F; position: relative; border-radius: 4px; }

.logo{ width: 353px; height: 168px; background: url(../images/logo.png) no-repeat; margin: 50px 0 0 30px; }
.slogan{ width: 329px; height: 111px; background: url(../images/slogan.png) no-repeat; margin: 20px 0 0 40px; }

span.bull{ color: #38961F; padding-right: 3px; }

.content{ width: 980px; min-height: 600px; background: url(../images/edge.jpg) repeat-y; border: 1px solid #C38749; border-radius: 4px; }

.content .left{ float: left; width: 440px; height: 620px; text-align: left; padding: 10px; }
.content .right{ float: right; width: 440px; height: 620px; text-align: left; padding: 10px; }

.content .backPage{ position: absolute; bottom: 0; left: 0; }
.content .backPage div{ width: 36px; height: 36px; background: url(../images/corner-left.png) no-repeat; padding: 0; margin: 0; cursor: pointer; }

.content .nextPage{ position: absolute; bottom: 0; right: 0; }
.content .nextPage div{ width: 36px; height: 36px; background: url(../images/corner-right.png) no-repeat; padding: 0; margin: 0; }

/* subTitle */
.content .subTitle{ font: 26px 'Times New Roman'; color: #920; text-shadow: 0 1px 1px #999; -webkit-text-shadow: 0 1px 1px #999; -moz-text-shadow: 0 1px 1px #999; -khtml-text-shadow: 0 1px 1px #999; }
.content .subTitle span{ color: green; }
.content .decorationLine{ background: url(../images/subTitleLine.png) no-repeat; width: 172px; height: 3px; margin-bottom: 10px; }

/* All Marks */
.markIndex{ width: 29px; height: 100px; background: url(../images/markIndex.png) no-repeat; position: absolute; top: 0; margin: 180px 0 0 -29px; cursor: pointer; }
.markSearch{ width: 29px; height: 100px; background: url(../images/markSearch.png) no-repeat; position: absolute; top: 0; margin: 320px 0 0 -27px; cursor: pointer; }
.markContact{ width: 29px; height: 100px; background: url(../images/markContact.png) no-repeat; position: absolute; top: 0; margin: 150px 0 0 980px; cursor: pointer; }
.markCalculator{ width: 29px; height: 80px; background: url(../images/markCalculator.png) no-repeat; position: absolute; top: 0; margin: 290px 0 0 977px; cursor: pointer; }

.markFacebook{ width: 30px; height: 35px; background: #e4e4e4; border-radius: 5px 5px 0 0; position: absolute; top: 0; margin: 450px 0 0 980px; -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); -ms-transform:rotate(90deg); box-shadow: 0 -1px 10px #999; }
.markFacebook div{ width: 20px; height: 20px; -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform:rotate(-90deg); transform:rotate(-90deg); margin: 5px 0 0 5px; cursor: pointer; }

.markIndex a, .markSearch a, .markContact a, .markCalculator a{ font: bold 16px arial; color: #fff; position: relative; top: 5px }

/* UL pool list */
.content ul{ list-style: none; margin: 0; padding: 0; }
.content ul.tableOfContents li{ margin-left: 10px; }

/* Href links */
a{ color: #920; text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Footer */
.footer{ text-align: center; font: 10px arial; color: #EEAF5F; text-shadow: 0 1px 1px #333; margin-top: 10px; }

/* -------- PAGES -------- */

/* RecipView */
.recipe .title{ font: bold 30px "Times New Roman"; color: #920; text-shadow: 0 1px 1px #999; -webkit-text-shadow: 0 1px 1px #999; -moz-text-shadow: 0 1px 1px #999; -khtml-text-shadow: 0 1px 1px #999; }
.recipe .title h1{ margin:0; padding:0; font: bold 30px "Times New Roman", Times, serif; }
.recipe .title .time{ float: left; font: 12px arial; color: #963; text-shadow: 0 0 0; margin: -5px 0 0 0; }
.recipe .title .time span{ clear: both; font: bold 13px arial; color: #920; text-shadow: 0 0 0; }
.recipe .title .ration{ float: left; font: 12px arial; color: #963; text-shadow: 0 0 0; margin: -5px 0 0 40px; }
.recipe .title .ration span{ clear: both; font: bold 13px arial; color: #920; text-shadow: 0 0 0; }
.recipe .image{ margin-top: 30px; width: 460px; height: 250px; border: 1px solid #920; border-radius: 2px; }
.recipe .subTitle.components{ margin-top: 15px; }
.recipe .make{ text-align: justify; padding-right: 10px; }
.recipe .description{ text-align: justify; padding-right: 10px; }
.recipe .print{ position: absolute; margin-left: 420px; width: 20px; height: 20px; background: url(../images/print.png) no-repeat; cursor: pointer; }

/* Index A-Z */
ul.tableOfContents{ font: 14px "Times New Roman"; margin: 30px 30px; }
ul.tableOfContents a{ color: #333; text-decoration: none; }
ul.tableOfContents a:hover{ color: #333; }
ul.tableOfContents > li{ background: none; }
ul.tableOfContents ul{ margin-bottom: 20px; }
ul.tableOfContents ul li{ }
ul.tableOfContents ul li a:hover{ color: #920; }
ul.tableOfContents ul li.active{ }
ul.tableOfContents div.name{ float: left; background: #f7da96; height: 17px; padding: 2px 5px 0 0; }
ul.tableOfContents div.dotted{ border-bottom: 1px dotted #333; height: 15px; }
ul.tableOfContents div.count{ float: right; background: #f7da96; height: 17px; padding: 3px 0 0 5px; }
ul.tableOfContents h3{ margin: 0; padding: 0; font: 18px "Times New Roman", Times, serif; color: #920; text-shadow: 0 1px 1px #999; }

table.categories{ width: 435px; border: 0; border-collapse: collapse; padding: 0; margin: 0 0 5px 0; }
table.categories td.img{ width: 75px; }
table.categories td img{ padding: 2px; border: 1px solid #920; border-radius: 2px; margin-right: 10px; }
table.categories td.title a{ font: 19px "Times New Roman", Times, serif; color: #920; text-shadow: 0 1px 1px #999; -webkit-text-shadow: 0 1px 1px #999; -moz-text-shadow: 0 1px 1px #999; -khtml-text-shadow: 0 1px 1px #999; }
table.categories td.title div{ font-style: italic; cursor: default; }
table.categories tr:hover{ background: #f4d489; }
table.categories tr:hover > .img img{ background: #DC941C; }

.noRecipes{ text-align: center; margin-top: 20px; font: italic 14px "Times New Roman"; }

/* DialogBox - search */
.search{ display: none ; position: absolute; top: 35%; left: 35%; z-index: 1000; width: 400px; height: 140px; background: #F7DA96; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; box-shadow: 0 0 25px #666; -webkit-box-shadow: 0 0 25px #666; -moz-box-shadow: 0 0 25px #666; }
.search .close{ position: absolute; right: 9px; top: 8px; width: 15px; height: 15px; text-align: center; font: bold 12px Verdana, Geneva, sans-serif; color: #920; border: 1px solid #920; cursor: pointer; }
.search .subTitle{ font: 26px "Times New Roman", Times, serif; color: #920; text-shadow: 0 1px 1px #999; -webkit-text-shadow: 0 1px 1px #999; -moz-text-shadow: 0 1px 1px #999; -khtml-text-shadow: 0 1px 1px #999; padding: 10px 15px; }
.search input{ width: 350px; margin-left: 13px; padding: 7px 10px; border: 1px solid #920; border-radius: 5px; box-shadow: inset 1px 2px 3px #999; }
.search input[type='button']{ border: 0; width: 100px; background: #920; font: bold 11px arial; color: #fff; box-shadow: 0 0 0; -webkit-box-shadow: 0 0 0; -moz-box-shadow: 0 0 0; float: right; margin: 10px 25px 0 0; cursor: pointer; }
.search input[type='button']:hover{ box-shadow: 1px 1px 2px #999; }

/* DialogBox - calculator */
.calculator{ display: none; position: absolute; top: 23%; left: 28%; z-index: 1000; width: 600px; height: 390px; background: #F7DA96; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; box-shadow: 0 0 25px #666; -webkit-box-shadow: 0 0 25px #666; -moz-box-shadow: 0 0 25px #666; }
.calculator .close{ position: absolute; right: 9px; top: 8px; width: 15px; height: 15px; text-align: center; font: bold 12px Verdana, Geneva, sans-serif; color: #920; border: 1px solid #920; cursor: pointer; }
.calculator .subTitle{ font: 26px "Times New Roman", Times, serif; color: #920; text-shadow: 0 1px 1px #999; -webkit-text-shadow: 0 1px 1px #999; -moz-text-shadow: 0 1px 1px #999; -khtml-text-shadow: 0 1px 1px #999; padding: 10px 15px; }
.calculator .text{ font: 12px arial; padding: 0 15px; }
.calculator .point{ font: 20px "Times New Roman", Times, serif; color: #920; padding: 10px 15px; }
.calculator .pointContent{ margin-left: 35px; }
.calculator .selectProdukt{ width: 500px; border: 1px solid #920; border-radius: 3px; padding: 4px; }
.calculator .jm{ width: 387px; border: 1px solid #920; border-radius: 3px; padding: 4px; }
.calculator .quantity{ width: 100px; border: 1px solid #920; border-radius: 3px; padding: 4px; text-align: center; }
.calculator input[type='button']{ width: 350px; padding: 7px 10px; border: 1px solid #920; border-radius: 5px; box-shadow: inset 1px 2px 3px #999; width: 100px; background: #920; font: bold 11px arial; color: #fff; box-shadow: 0 0 0; -webkit-box-shadow: 0 0 0; -moz-box-shadow: 0 0 0; margin-left: 7px; cursor: pointer; }
.calculator input[type='button']:hover{ box-shadow: 1px 1px 2px #999; }
.calculator .result{ font: 20px "Times New Roman", Times, serif; color: #920; text-align: center; padding: 20px; }
.calculator .result strong{ color: #006600; }

.contact{ font-size: 14px; text-align: justify; padding: 30px; }
.contact img{ float: left; padding: 2px; border: 1px solid #920; margin: 0 30px 10px 0; }
.contact .sign{ text-align: right; margin-top: 40px; }
.contact strong{ font-style: italic; color: #920; }

.scrollBar{ width: 7px; background: #EEAF5F; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; margin-right: -3px; }