erikkaplun/index.html

## index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Selver</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" href="reset.css" type="text/css" media="screen, print, projection" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen, print, projection" />
    <script type="text/javascript" src="jquery-1.4.3.min.js"></script>
    <link href="jquery.loadmask.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="jquery.loadmask.min.js"></script>
    <script type="text/javascript" src="jquery.contentdragscroller.js"></script>
    <script type="text/javascript" src="jquery.nap-1.0.0.js"></script>
    <script type="text/javascript" src="selver.js"></script>
</head>

<body>

    <div id="main">

        <div id="keel">
            <div class="button70"><img src="img/eesti.png" width="70" height="70" alt="" class="a" /><img src="img/punane.png" width="70" height="70" alt="" class="b" id="reset" /></div>
            <!--<span id="tmain">toggle main</span>-->
        </div>

        <div id="logi"><b>Debugger:</b><div></div></div>
        <div id="tryki">
            <img src="img/trykia.png" width="226" height="126" alt="" class="ta" />
            <img src="img/trykib.png" width="226" height="126" alt="" class="tb" title="tryki" />
        </div>


        <div id="recipes">
            <div id="lft">
                <div class="section button100"><img src="img/siga.png" width="110" height="110" alt="" class="a" /><img src="img/punane.png" width="110" height="110" alt="" class="b" title="siga" /><br />Siga</div>
                <div class="section button100"><img src="img/veis.png" width="110" height="110" alt="" class="a" /><img src="img/punane.png" width="110" height="110" alt="" class="b" title="veis" /><br />Veis</div>
                <div class="section button100"><img src="img/lammas.png" width="110" height="110" alt="" class="a" /><img src="img/punane.png" width="110" height="110" alt="" class="b" title="lammas" /><br />Lammas</div>
                <div class="section button100"><img src="img/lind.png" width="110" height="110" alt="" class="a" /><img src="img/punane.png" width="110" height="110" alt="" class="b" title="lind" /><br />Lind</div>

                <div class="pliks button100"><img src="img/pliks.png" width="110" height="110" alt="" class="a" /><img src="img/punane.png" width="110" height="110" alt="" class="b" title="pliks" /><br />Pliks-plaks</div>
            </div>

            <div id="rght">
                <div id="siga">
                    <div><img src="siga0.png" /><br /><br />Sealihapilaff</div>
                    <div><img src="siga1.png" /><br /><br />Seapraad õunte ja fenkoliga</div>
                    <div><img src="siga2.png" /><br /><br />Punase sõstra glasuuriga seafilee</div>
                    <!--<div><img src="tmp.png" /><br /><br />Karjase pirukas</div>-->
                </div>
                <div id="veis">
                    <div><img src="veis0.png" /><br /><br />Röstitud veiseliha välisfilee</div>
                    <div><img src="veis1.png" /><br /><br />Praetud veisemaks</div>
                    <!--<div><img src="tmp.png" /><br /><br />Beef á la Lindsröm</div>
                        <div><img src="tmp.png" /><br /><br />Chilli con carne</div>-->
                </div>
                <div id="lammas">
                    <div><img src="lammas0.png" /><br /><br />Lambakarree peterselli ja sidruniga</div>
                    <div><img src="lammas1.png" /><br /><br />Lambaliha-köögivilja hautis</div>
                    <div><img src="lammas2.png" /><br /><br />Guljašisupp lambalihast</div>
                    <!--<div><img src="tmp.png" /><br /><br />Lammas 4<span><br />e. sealiha mustade sõstardega</span></div>-->
                </div>
                <div id="lind">
                    <div><img src="lind0.png" /><br /><br />Mee ja sojaga glasuuritud kanakoivad</div>
                    <!--<div><img src="tmp.png" /><br /><br />Lind 2</div>
                    <div><img src="tmp.png" /><br /><br />Lind 3</div>
                    <div><img src="tmp.png" /><br /><br />Lind 4<span><br />e. sealiha mustade sõstardega</span></div>-->
                </div>
                <!--<div id="pliks"></div>-->
            </div>
        </div>

        <div id="recipe"></div>

        <div id="mainselection">
            <img src="img/logo_150.png" alt="" id="logo" /><br />
            <h1>Vali, millisest lihast soovid toitu<br />valmistada ja prindi retsept välja!</h1>

            <div class="section button148"><img src="img/siga.png" width="148" height="148" alt="" class="a" /><img src="img/punane.png" width="148" height="148" alt="" class="b" title="siga" /><br />Siga</div>
            <div class="section button148"><img src="img/veis.png" width="148" height="148" alt="" class="a" /><img src="img/punane.png" width="148" height="148" alt="" class="b" title="veis" /><br />Veis</div>
            <div class="section button148"><img src="img/lammas.png" width="148" height="148" alt="" class="a" /><img src="img/punane.png" width="148" height="148" alt="" class="b" title="lammas" /><br />Lammas</div>
            <div class="section button148"><img src="img/lind.png" width="148" height="148" alt="" class="a" /><img src="img/punane.png" width="148" height="148" alt="" class="b" title="lind" /><br />Lind</div>

            <div class="pliks button148"><img src="img/pliks.png" width="148" height="148" alt="" class="a" /><img src="img/punane.png" width="148" height="148" alt="" class="b" title="pliks" /><br />Pliks-plaks</div>
        </div>

    </div>
</body>

</html>

## selver.js
selectedRecipeId = null;

function hide(sel) {
    // hides element and pushes it back so it won't capture clicks
    $(sel).css('opacity', 0);
    $(sel).css('z-index', -10);
}

function show(sel) {
    // shows element and brings it forward so it can capture clicks
    $(sel).css('opacity', 1);
    $(sel).css('z-index', 10);
}

function loadRecipe(recipeId) {
    log('R: ' + recipeId);

    selectedRecipeId = recipeId;
    $('#recipe').empty().load(recipeId + '.html');
}

function printRecipe(recipeId) {
    log('Print: ' + recipeId);

    $('#main').mask("Prindime... ");  // + argument
    setTimeout(function() { $('#main').unmask(); }, 4000);

    $.get('http://localhost:8080/' + recipeId + '.ps');
}

function log(msg) {
    $('#logi div').prepend(msg + '<br />');
}

$(document).ready(function() {

    $(document).nap(
        function() {
            log('<span>reset to init (TO)</span>');

            hide('#recipes, #recipe, #tryki');
            show('#mainselection');
        },
        $.noop
    );
    $.fn.nap.standbyTime = 25;

    // $('#siga').contentdragscroller();

    // Disable dragging on everything:
    $(document.body).bind('dragstart', function() { return false; });

    // Set up animation effects on all buttons:
    $('img.b').bind({
        'mousedown': function() {
            // $(this).parent().siblings().animate({'opacity': 0}, 'fast'); // only button itself
            $(this).css('opacity', 1);
        },
        'mouseup mouseout': function() {
            $(this).animate({'opacity': 0}, 'fast');
        }
    });

    // Meat type selection buttons:
    $('.section img.b').click(function() {
        log('M: ' + $(this).attr('title'));

        hide('#recipe, #tryki');
        hide('#mainselection, #siga, #veis, #lammas, #lind');
        show('#recipes, #rght, ' + '#' + $(this).attr('title'));

        // $('#rght').animate({scrollTop: $('#' + $(this).attr('title')).offset().top}, 'slow');
    });

    $('.pliks img.b').click(function() {
        var allSectionNames = $('#mainselection .section img.b').map(function () {
            return $(this).attr('title');
        });

        var allRecipeIds = [];

        $(allSectionNames).each(function(_, name) {
            $('#' + name).find('div').each(function(i) {
                allRecipeIds.push(name + i);
            });
        });

        var randomRecipeId = allRecipeIds[Math.floor(Math.random() * allRecipeIds.length)];
        loadRecipe(randomRecipeId);

        hide('#mainselection, #siga, #veis, #lammas, #lind');
        show('#recipes, #recipe, #tryki');
    });

    // Recipe selection buttons:
    $('#rght > div > div').click(function() {
        var parentId = $(this).parent().attr('id');
        var elIndex = $(this).index();
        var recipeId = parentId + elIndex;

        loadRecipe(recipeId);

        hide('#rght');
        show('#recipe, #tryki');
    });

    $('#tryki').click(function() {
        printRecipe(selectedRecipeId);
    });

    $('#reset').click(function() {
        log('<span>reset to init</span>');

        hide('#recipes, #recipe, #tryki');
        show('#mainselection');
    });
});

## style.css
@font-face {
    font-family: 'DiavloBook';
    src: url('diavlo/diavlo_book_ii_37-webfont.eot');
    src: url('diavlo/diavlo_book_ii_37-webfont.eot?iefix') format('eot'),
         url('diavlo/diavlo_book_ii_37-webfont.woff') format('woff'),
         url('diavlo/diavlo_book_ii_37-webfont.ttf') format('truetype'),
         url('diavlo/diavlo_book_ii_37-webfont.svg#webfonttyufD0FD') format('svg');
    font-weight: normal;
    font-style: normal;
}


html, body, div, span, object,
form, input, h1, h2, button, label, a, img {
    -moz-user-select: none;
}

img {
    -moz-user-select: none;
    user-select: none;
}

#main {
    background: url("taust.jpg") top left no-repeat;
    width: 1280px; height: 1024px;
    position: fixed;
    font-family: 'DiavloBook';
    color: #5d4219;
}

.button148 { width: 160px; margin: 3px; float: left; display: inline; position: relative; text-align: center; font: 30px 'DiavloBook'; }
.button100 { width: 120px; margin: 3px; float: left; display: inline; position: relative; text-align: center; font: 24px 'DiavloBook'; }
.button70 { width: 70px; margin: 3px; float: left; display: inline; position: relative; text-align: center; font: 24px 'DiavloBook'; }

img.a { position: absolute; top:0; margin: 0 auto; }
img.b { position: relative; top:0; margin: 0 auto; opacity: 0; }
img.ta { position: absolute; top:0; margin: 0 auto; }
img.tb { position: relative; top:0; margin: 0 auto;  }


h1 {
    font-family: 'DiavloBook';
    text-align: center;
    font-size: 40px;
    margin-bottom: 20px;
}

#keel {
    position: absolute;
    top: 35px;
    left: 1100px;
    color: white;
}

#logi {
    position: absolute; background: #F1F1F1; padding: 3px; border: 1px solid black;
    top: 400px; left: 1340px; /* 1140 */ vertical-align: bottom;
    width: 120px; height: 300px; text-align: left;
    overflow: hidden;
}
#logi span { color: red; }

#tryki {
    opacity: 0;
    position: absolute;
    z-index: 50;
    top: 850px; left: 1000px;
    width: 226px; margin: 3px; float: left; display: inline; position: relative; text-align: center; font: 24px 'DiavloBook';
}

#mainselection {
    margin: 0px auto 0px auto;
    padding-top: 200px;
    /* width: 700px; /\* pliksplaks'ita *\/ */
    width: 900px; /* pliksplaks'iga */
    height: 900px;
    position: relative;
}
#logo {
    width: 150px;
    /* margin: 0px 0px 30px 300px; /\* pliksplaks'ita *\/ */
    margin: 0px 0px 30px 350px; /* pliksplaks'ita */
}

#lft {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 130px;
    padding: 100px 50px 100px 0;
    background: url("img/border.png") top right no-repeat;
}

#rght {
    position: absolute;
    padding: 0 0 0 20px;
    top: 75px;
    left: 200px;
    width: 900px;
    height: 800px;
}

#recipes { opacity: 0; }
#siga, #veis, #lammas, #lind { opacity: 0; position: absolute; top: 0px; left: 30px; width: 800px; height: 220px; }
#rght div img { float: left; margin: 0 30px;  }
#rght > div > div {
    width: 900px; height: 220px;
    font-size: 50px;
    line-height: 40px;
    margin: 5px;
}
#rght > div > div > span { font-size: 30px; }


#recipe {
    opacity: 0;
    top: 120px;
    left: 280px;
    width: 800px;
    height: 800px;
    position: absolute;
    font-size: 23px;
    line-height: 25px;
}
#recipe ul { list-style: disc; padding-left: 20px;  }
#recipe li { padding-left: 20px; }
#recipe > h2 { font-size: 40px; padding-top: 10px; }
#recipe > h3 { font-size: 30px; padding-top: 10px; }
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>Selver</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<link rel="stylesheet" href="reset.css" type="text/css" media="screen, print, projection" />
	<link rel="stylesheet" href="style.css" type="text/css" media="screen, print, projection" />
	<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
	<link href="jquery.loadmask.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="jquery.loadmask.min.js"></script>
	<script type="text/javascript" src="jquery.contentdragscroller.js"></script>
	<script type="text/javascript" src="jquery.nap-1.0.0.js"></script>
	<script type="text/javascript" src="selver.js"></script>
	</head>

	<body>

	<div id="main">

	<div id="keel">
	<div class="button70"><img src="img/eesti.png" width="70" height="70" alt="" class="a" /><img src="img/punane.png" width="70" height="70" alt="" class="b" id="reset" /></div>
	<!--<span id="tmain">toggle main</span>-->
	</div>

	<div id="logi"><b>Debugger:</b><div></div></div>
	<div id="tryki">
	<img src="img/trykia.png" width="226" height="126" alt="" class="ta" />
	<img src="img/trykib.png" width="226" height="126" alt="" class="tb" title="tryki" />
	</div>


	<div id="recipes">
	<div id="lft">
	<div class="section button100"><img src="img/siga.png" width="110" height="110" alt="" class="a" /><img src="img/punane.png" width="110" height="110" alt="" class="b" title="siga" /><br />Siga</div>
	<div class="section button100"><img src="img/veis.png" width="110" height="110" alt="" class="a" /><img src="img/punane.png" width="110" height="110" alt="" class="b" title="veis" /><br />Veis</div>
	<div class="section button100"><img src="img/lammas.png" width="110" height="110" alt="" class="a" /><img src="img/punane.png" width="110" height="110" alt="" class="b" title="lammas" /><br />Lammas</div>
	<div class="section button100"><img src="img/lind.png" width="110" height="110" alt="" class="a" /><img src="img/punane.png" width="110" height="110" alt="" class="b" title="lind" /><br />Lind</div>

	<div class="pliks button100"><img src="img/pliks.png" width="110" height="110" alt="" class="a" /><img src="img/punane.png" width="110" height="110" alt="" class="b" title="pliks" /><br />Pliks-plaks</div>
	</div>

	<div id="rght">
	<div id="siga">
	<div><img src="siga0.png" /><br /><br />Sealihapilaff</div>
	<div><img src="siga1.png" /><br /><br />Seapraad õunte ja fenkoliga</div>
	<div><img src="siga2.png" /><br /><br />Punase sõstra glasuuriga seafilee</div>
	<!--<div><img src="tmp.png" /><br /><br />Karjase pirukas</div>-->
	</div>
	<div id="veis">
	<div><img src="veis0.png" /><br /><br />Röstitud veiseliha välisfilee</div>
	<div><img src="veis1.png" /><br /><br />Praetud veisemaks</div>
	<!--<div><img src="tmp.png" /><br /><br />Beef á la Lindsröm</div>
	<div><img src="tmp.png" /><br /><br />Chilli con carne</div>-->
	</div>
	<div id="lammas">
	<div><img src="lammas0.png" /><br /><br />Lambakarree peterselli ja sidruniga</div>
	<div><img src="lammas1.png" /><br /><br />Lambaliha-köögivilja hautis</div>
	<div><img src="lammas2.png" /><br /><br />Guljašisupp lambalihast</div>
	<!--<div><img src="tmp.png" /><br /><br />Lammas 4<span><br />e. sealiha mustade sõstardega</span></div>-->
	</div>
	<div id="lind">
	<div><img src="lind0.png" /><br /><br />Mee ja sojaga glasuuritud kanakoivad</div>
	<!--<div><img src="tmp.png" /><br /><br />Lind 2</div>
	<div><img src="tmp.png" /><br /><br />Lind 3</div>
	<div><img src="tmp.png" /><br /><br />Lind 4<span><br />e. sealiha mustade sõstardega</span></div>-->
	</div>
	<!--<div id="pliks"></div>-->
	</div>
	</div>

	<div id="recipe"></div>

	<div id="mainselection">
	<img src="img/logo_150.png" alt="" id="logo" /><br />
	<h1>Vali, millisest lihast soovid toitu<br />valmistada ja prindi retsept välja!</h1>

	<div class="section button148"><img src="img/siga.png" width="148" height="148" alt="" class="a" /><img src="img/punane.png" width="148" height="148" alt="" class="b" title="siga" /><br />Siga</div>
	<div class="section button148"><img src="img/veis.png" width="148" height="148" alt="" class="a" /><img src="img/punane.png" width="148" height="148" alt="" class="b" title="veis" /><br />Veis</div>
	<div class="section button148"><img src="img/lammas.png" width="148" height="148" alt="" class="a" /><img src="img/punane.png" width="148" height="148" alt="" class="b" title="lammas" /><br />Lammas</div>
	<div class="section button148"><img src="img/lind.png" width="148" height="148" alt="" class="a" /><img src="img/punane.png" width="148" height="148" alt="" class="b" title="lind" /><br />Lind</div>

	<div class="pliks button148"><img src="img/pliks.png" width="148" height="148" alt="" class="a" /><img src="img/punane.png" width="148" height="148" alt="" class="b" title="pliks" /><br />Pliks-plaks</div>
	</div>

	</div>
	</body>

	</html>
	selectedRecipeId = null;

	function hide(sel) {
	// hides element and pushes it back so it won't capture clicks
	$(sel).css('opacity', 0);
	$(sel).css('z-index', -10);
	}

	function show(sel) {
	// shows element and brings it forward so it can capture clicks
	$(sel).css('opacity', 1);
	$(sel).css('z-index', 10);
	}

	function loadRecipe(recipeId) {
	log('R: ' + recipeId);

	selectedRecipeId = recipeId;
	$('#recipe').empty().load(recipeId + '.html');
	}

	function printRecipe(recipeId) {
	log('Print: ' + recipeId);

	$('#main').mask("Prindime... "); // + argument
	setTimeout(function() { $('#main').unmask(); }, 4000);

	$.get('http://localhost:8080/' + recipeId + '.ps');
	}

	function log(msg) {
	$('#logi div').prepend(msg + '<br />');
	}

	$(document).ready(function() {

	$(document).nap(
	function() {
	log('<span>reset to init (TO)</span>');

	hide('#recipes, #recipe, #tryki');
	show('#mainselection');
	},
	$.noop
	);
	$.fn.nap.standbyTime = 25;

	// $('#siga').contentdragscroller();

	// Disable dragging on everything:
	$(document.body).bind('dragstart', function() { return false; });

	// Set up animation effects on all buttons:
	$('img.b').bind({
	'mousedown': function() {
	// $(this).parent().siblings().animate({'opacity': 0}, 'fast'); // only button itself
	$(this).css('opacity', 1);
	},
	'mouseup mouseout': function() {
	$(this).animate({'opacity': 0}, 'fast');
	}
	});

	// Meat type selection buttons:
	$('.section img.b').click(function() {
	log('M: ' + $(this).attr('title'));

	hide('#recipe, #tryki');
	hide('#mainselection, #siga, #veis, #lammas, #lind');
	show('#recipes, #rght, ' + '#' + $(this).attr('title'));

	// $('#rght').animate({scrollTop: $('#' + $(this).attr('title')).offset().top}, 'slow');
	});

	$('.pliks img.b').click(function() {
	var allSectionNames = $('#mainselection .section img.b').map(function () {
	return $(this).attr('title');
	});

	var allRecipeIds = [];

	$(allSectionNames).each(function(_, name) {
	$('#' + name).find('div').each(function(i) {
	allRecipeIds.push(name + i);
	});
	});

	var randomRecipeId = allRecipeIds[Math.floor(Math.random() * allRecipeIds.length)];
	loadRecipe(randomRecipeId);

	hide('#mainselection, #siga, #veis, #lammas, #lind');
	show('#recipes, #recipe, #tryki');
	});

	// Recipe selection buttons:
	$('#rght > div > div').click(function() {
	var parentId = $(this).parent().attr('id');
	var elIndex = $(this).index();
	var recipeId = parentId + elIndex;

	loadRecipe(recipeId);

	hide('#rght');
	show('#recipe, #tryki');
	});

	$('#tryki').click(function() {
	printRecipe(selectedRecipeId);
	});

	$('#reset').click(function() {
	log('<span>reset to init</span>');

	hide('#recipes, #recipe, #tryki');
	show('#mainselection');
	});
	});
	@font-face {
	font-family: 'DiavloBook';
	src: url('diavlo/diavlo_book_ii_37-webfont.eot');
	src: url('diavlo/diavlo_book_ii_37-webfont.eot?iefix') format('eot'),
	url('diavlo/diavlo_book_ii_37-webfont.woff') format('woff'),
	url('diavlo/diavlo_book_ii_37-webfont.ttf') format('truetype'),
	url('diavlo/diavlo_book_ii_37-webfont.svg#webfonttyufD0FD') format('svg');
	font-weight: normal;
	font-style: normal;
	}


	html, body, div, span, object,
	form, input, h1, h2, button, label, a, img {
	-moz-user-select: none;
	}

	img {
	-moz-user-select: none;
	user-select: none;
	}

	#main {
	background: url("taust.jpg") top left no-repeat;
	width: 1280px; height: 1024px;
	position: fixed;
	font-family: 'DiavloBook';
	color: #5d4219;
	}

	.button148 { width: 160px; margin: 3px; float: left; display: inline; position: relative; text-align: center; font: 30px 'DiavloBook'; }
	.button100 { width: 120px; margin: 3px; float: left; display: inline; position: relative; text-align: center; font: 24px 'DiavloBook'; }
	.button70 { width: 70px; margin: 3px; float: left; display: inline; position: relative; text-align: center; font: 24px 'DiavloBook'; }

	img.a { position: absolute; top:0; margin: 0 auto; }
	img.b { position: relative; top:0; margin: 0 auto; opacity: 0; }
	img.ta { position: absolute; top:0; margin: 0 auto; }
	img.tb { position: relative; top:0; margin: 0 auto; }



	h1 {
	font-family: 'DiavloBook';
	text-align: center;
	font-size: 40px;
	margin-bottom: 20px;
	}

	#keel {
	position: absolute;
	top: 35px;
	left: 1100px;
	color: white;
	}

	#logi {
	position: absolute; background: #F1F1F1; padding: 3px; border: 1px solid black;
	top: 400px; left: 1340px; /* 1140 */ vertical-align: bottom;
	width: 120px; height: 300px; text-align: left;
	overflow: hidden;
	}
	#logi span { color: red; }

	#tryki {
	opacity: 0;
	position: absolute;
	z-index: 50;
	top: 850px; left: 1000px;
	width: 226px; margin: 3px; float: left; display: inline; position: relative; text-align: center; font: 24px 'DiavloBook';
	}

	#mainselection {
	margin: 0px auto 0px auto;
	padding-top: 200px;
	/* width: 700px; /\* pliksplaks'ita \/ /
	width: 900px; /* pliksplaks'iga */
	height: 900px;
	position: relative;
	}
	#logo {
	width: 150px;
	/* margin: 0px 0px 30px 300px; /\* pliksplaks'ita \/ /
	margin: 0px 0px 30px 350px; /* pliksplaks'ita */
	}

	#lft {
	position: absolute;
	top: 50px;
	left: 50px;
	width: 130px;
	padding: 100px 50px 100px 0;
	background: url("img/border.png") top right no-repeat;
	}

	#rght {
	position: absolute;
	padding: 0 0 0 20px;
	top: 75px;
	left: 200px;
	width: 900px;
	height: 800px;
	}

	#recipes { opacity: 0; }
	#siga, #veis, #lammas, #lind { opacity: 0; position: absolute; top: 0px; left: 30px; width: 800px; height: 220px; }
	#rght div img { float: left; margin: 0 30px; }
	#rght > div > div {
	width: 900px; height: 220px;
	font-size: 50px;
	line-height: 40px;
	margin: 5px;
	}
	#rght > div > div > span { font-size: 30px; }


	#recipe {
	opacity: 0;
	top: 120px;
	left: 280px;
	width: 800px;
	height: 800px;
	position: absolute;
	font-size: 23px;
	line-height: 25px;
	}
	#recipe ul { list-style: disc; padding-left: 20px; }
	#recipe li { padding-left: 20px; }
	#recipe > h2 { font-size: 40px; padding-top: 10px; }
	#recipe > h3 { font-size: 30px; padding-top: 10px; }