jesjos · September 14, 2011 11:08
diff --git a/default.css b/default.css
 /* 
    Document   : default
    Created on : 2011-sep-12, 22:11:08
    Author     : jesper
    Description:
        Purpose of the stylesheet follows.
 */

 /* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
 */

 body {
    margin: 0;
    font-family: "myriad pro", helvetica, sans-serif
 }
 root { 
    display: block;
 }

 #menu_wrapper,
 #content_wrapper
 {
    width: 50em;
    margin: 0px auto;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 20px #ccc;
 }

 #content_wrapper {
    margin-top: 1em;
    background-color: #ffff99;
    /*
    -webkit-transition: all 1s ease-in-out;
    transition: all 2s ease-in-out;
    */
 }
 /*
 #content_wrapper:hover {
    background-color: #ffff66;
    box-shadow: 0px 0px 25px #555;
 }
 */

 #content {
    padding:.5em;
 }
 #menu_wrapper {
    margin-top: 1em;
    height: 6em;
    background-color: #99ff66;
 }

 #menu_list {
    display: inline-block;
    list-style: none;
    margin: 1em 0 0 0;
    padding:0;
 }

 #menu_list li {
    float: left;
    margin-left: 10px;
    border: 1px solid black;
    padding: 5px;
 }

 #pic
 {
    float: right;
    width: 100px;
    height: 100%;
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Face-smile.svg/200px-Face-smile.svg.png');
    background-position: 50%;
 }

 #button_container {
    margin: 2em auto;
    width: 50em;
    text-align: center;
 }
diff --git a/index.xhtml b/index.xhtml
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
 To change this template, choose Tools | Templates
 and open the template in the editor.
 -->
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" href="default.css" type="text/css"/>
        <script type="text/javascript" src="js/flash.js" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" />
        <script type="text/javascript" src="js/darken_jq.js" />
        <title>Amazing app</title>
    </head>
    <body>
        <div id="menu_wrapper">
            <ul id="menu_list">
                <li>Fruits</li>
                <li>Vegetables</li>
                <li>Nuts</li>
            </ul>
            <div id="pic">
                 
            </div>
        </div>
        <div id="content_wrapper">
            <div id="content">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                    Donec malesuada mi id quam elementum eu ornare purus aliquet. 
                    Nulla vehicula convallis lacus, sed feugiat risus adipiscing sed. 
                    Nullam eget consectetur odio. Maecenas bibendum, mi ac tempus consequat, 
                    ipsum libero dignissim dolor, et ultrices arcu risus sed ipsum. 
                    Aenean ultricies fermentum pretium. Duis accumsan augue sed est hendrerit vestibulum. 
                    Sed consequat, mi a eleifend sodales, nisl nisl vulputate est, 
                    gravida interdum velit nisi a diam. Sed vel lacus est, sed porta sapien. 
                    Morbi et est tortor. Sed ligula nisl, rhoncus congue blandit ac, vehicula pharetra quam. 
                    Praesent sollicitudin rutrum augue, nec porta purus sodales et. 
                    Ut tincidunt dolor vitae ipsum tincidunt scelerisque. 
                    Ut dolor risus, luctus quis tempor lacinia, interdum a magna. 
                    Morbi in cursus odio.
                </p>
            </div>
        </div>
        <div id="button_container">
            <input id="flash" type="button" value="Start unobtrusive flash" name="flash" onclick="Flasher.flash('content_wrapper')"/>
        </div>
    </body>
 </html>
	/*
	Document : default
	Created on : 2011-sep-12, 22:11:08
	Author : jesper
	Description:
	Purpose of the stylesheet follows.
	*/

	/*
	TODO customize this sample style
	Syntax recommendation http://www.w3.org/TR/REC-CSS2/
	*/

	body {
	margin: 0;
	font-family: "myriad pro", helvetica, sans-serif
	}
	root {
	display: block;
	}

	#menu_wrapper,
	#content_wrapper
	{
	width: 50em;
	margin: 0px auto;
	border: 1px solid #ccc;
	box-shadow: 0px 0px 20px #ccc;
	}

	#content_wrapper {
	margin-top: 1em;
	background-color: #ffff99;
	/*
	-webkit-transition: all 1s ease-in-out;
	transition: all 2s ease-in-out;
	*/
	}
	/*
	#content_wrapper:hover {
	background-color: #ffff66;
	box-shadow: 0px 0px 25px #555;
	}
	*/

	#content {
	padding:.5em;
	}
	#menu_wrapper {
	margin-top: 1em;
	height: 6em;
	background-color: #99ff66;
	}

	#menu_list {
	display: inline-block;
	list-style: none;
	margin: 1em 0 0 0;
	padding:0;
	}

	#menu_list li {
	float: left;
	margin-left: 10px;
	border: 1px solid black;
	padding: 5px;
	}

	#pic
	{
	float: right;
	width: 100px;
	height: 100%;
	background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Face-smile.svg/200px-Face-smile.svg.png');
	background-position: 50%;
	}

	#button_container {
	margin: 2em auto;
	width: 50em;
	text-align: center;
	}
	<?xml version="1.0" encoding="UTF-8"?>
	<!--
	To change this template, choose Tools \| Templates
	and open the template in the editor.
	-->
	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<link rel="stylesheet" href="default.css" type="text/css"/>
	<script type="text/javascript" src="js/flash.js" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" />
	<script type="text/javascript" src="js/darken_jq.js" />
	<title>Amazing app</title>
	</head>
	<body>
	<div id="menu_wrapper">
	<ul id="menu_list">
	<li>Fruits</li>
	<li>Vegetables</li>
	<li>Nuts</li>
	</ul>
	<div id="pic">

	</div>
	</div>
	<div id="content_wrapper">
	<div id="content">
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	Donec malesuada mi id quam elementum eu ornare purus aliquet.
	Nulla vehicula convallis lacus, sed feugiat risus adipiscing sed.
	Nullam eget consectetur odio. Maecenas bibendum, mi ac tempus consequat,
	ipsum libero dignissim dolor, et ultrices arcu risus sed ipsum.
	Aenean ultricies fermentum pretium. Duis accumsan augue sed est hendrerit vestibulum.
	Sed consequat, mi a eleifend sodales, nisl nisl vulputate est,
	gravida interdum velit nisi a diam. Sed vel lacus est, sed porta sapien.
	Morbi et est tortor. Sed ligula nisl, rhoncus congue blandit ac, vehicula pharetra quam.
	Praesent sollicitudin rutrum augue, nec porta purus sodales et.
	Ut tincidunt dolor vitae ipsum tincidunt scelerisque.
	Ut dolor risus, luctus quis tempor lacinia, interdum a magna.
	Morbi in cursus odio.
	</p>
	</div>
	</div>
	<div id="button_container">
	<input id="flash" type="button" value="Start unobtrusive flash" name="flash" onclick="Flasher.flash('content_wrapper')"/>
	</div>
	</body>
	</html>