nunfo/dabblet.css

## dabblet.css
/**
 * The first commented line is your dabblet’s title
 */
/* Reseteo CSS */
* { padding:0; margin:0; border:0; }

#contenedor {
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height:100%;
}

#presentacion  {position:static; left:4%; width:30%; margin:0 10px; list-style:none;
		font:0.9em Arial, Helvetica, sans-serif; text-align:left; background-color:rgba(0,0,0,0.5);}

#logo { position:fixed; width:200px; height:60px; background:url(../img/logoTipical.png) no-repeat; margin:0px 5px; cursor:pointer;}

#container li {position:absolute; top:0 left:0; /*margin:40px 15px 15px 15px;*/
               /*cursor:pointer;
               -moz-box-shadow: 0px 0px 3px #888; -webkit-box-shadow: 0px 0px 3px #888; box-shadow: 0px 0px 3px #888;
               -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;*/
               background-color:rgba(0,0,0,0.4) }
}
#container li a { color:#222; text-decoration:none;}
#container li.current {cursor:default;}
#container li.current a { color:#0010a9; text-decoration:underline;}

#somos {padding:60px 10px; color:#FFF;}
	/*#localizacion { height:500px; width:700px; padding:10px 5px; background-color:#F00; }
	#album { height:500px; width:700px; padding:10px 5px; background-color:#6C0; }
	#menu { height:500px; width:700px; padding:10px 5px; background-color:#03F; }*/
	/*#somos:hover, #localizacion:hover, #album:hover, #menu:hover { cursor:pointer; }*/

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="contenedor">

	<ul id="presentacion">

		<li class="">
			<div id="logo"></div>
		</li>

		<li class="current">
			<div id="somos">
				<p>
					<h3>Quien somos</h3><br>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis feugiat congue. Donec id nisi lacus, ut euismod metus.
					Nunc eu sem nibh, sit amet feugiat ipsum. In ut risus sit amet orci placerat ornare. Vivamus facilisis lacus eget metus
					elementum eget tristique magna lobortis. Etiam vulputate mi nec nisi hendrerit in ullamcorper est ultrices. Vivamus placerat
					sapien id eros dapibus quis volutpat lorem aliquam. Pellentesque scelerisque hendrerit volutpat. Aliquam ut lorem velit.
					Vestibulum posuere felis eu libero posuere vel rhoncus nibh iaculis. Donec id ornare eros. Aliquam mauris leo, malesuada quis
					elementum non, blandit eget neque. Pellentesque sagittis venenatis auctor. Curabitur volutpat facilisis augue, iaculis sagittis
					ante tincidunt eget.
				</p>
			</div>
			<div id="ofrecemos">
				<p>
					<h3>Que ofrecemos</h3><br>
					Sed ante nisl, sollicitudin eget tincidunt vitae, facilisis sit amet tortor. Mauris vestibulum imperdiet feugiat.
					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed justo justo.
					Vestibulum feugiat, nunc a rutrum placerat, nunc sapien venenatis erat, et tristique dolor quam nec dolor.
					Vestibulum et nisi orci, nec aliquam leo. Vestibulum ligula nibh, dictum in rutrum id, imperdiet quis justo.
					Suspendisse sit amet sapien nec arcu mollis feugiat a non sapien. Integer feugiat urna a neque consequat gravida.
					Praesent placerat, ligula in suscipit pulvinar, mauris nulla semper dui, id molestie sapien orci non nibh.
					Nunc libero nibh, laoreet at cursus ac, porta at nunc. Curabitur in neque ac dolor luctus consequat.
					Vivamus consectetur, ligula sed rhoncus viverra, elit arcu porta purus, at consectetur erat ipsum sit amet nunc.
					Mauris sed odio quis dui lacinia pretium.
				</p>
			</div>
			<div id="estamos">
				<p>
					<h3>Donde estamos</h3>

				</p>
			</div>
		</li>

	</ul>


<!--
	<div class="oe_wrapper">
    <div id="oe_overlay" class="oe_overlay"></div>
    <ul id="oe_menu" class="oe_menu">
        <li>
            <a href="">Collections</a>
            <div>
                <ul>
                    <li class="oe_heading">
                        Summer 2011
                    </li>
                    <li><a href="#">Milano</a></li>
                    ...
                </ul>
                <ul>
                    ...
                </ul>
                <ul>
                    ...
                </ul>
            </div>
        </li>
        <li>
            <a href="">Projects</a>
            <div style="left:-111px;">
                ...
            </div>
        </li>
        <li>
            <a href="">Fragrances</a>
            <div style="left:-223px;">
                <ul class="oe_full">
                    <li class="oe_heading">
                        Fashion Fragrances
                    </li>
                    <li><a href="#">Deálure</a></li>
                    <li><a href="#">Violet Woman</a></li>
                    <li><a href="#">Deep Blue for Men</a></li>
                    <li><a href="#">New York, New York</a></li>
                    <li><a href="#">Illusion</a></li>
                </ul>
            </div>
        </li>
        <li><a href="">Events</a>
            <div style="left:-335px;">
                ...
            </div>
        </li>
        <li><a href="">Stores</a>
            <div style="left:-447px;">
                ...
            </div>
        </li>
    </ul>-->

</div>


## settings.json
{"view":"separate","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* The first commented line is your dabblet’s title
	*/
	/* Reseteo CSS */
	* { padding:0; margin:0; border:0; }

	#contenedor {
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height:100%;
	}

	#presentacion {position:static; left:4%; width:30%; margin:0 10px; list-style:none;
	font:0.9em Arial, Helvetica, sans-serif; text-align:left; background-color:rgba(0,0,0,0.5);}

	#logo { position:fixed; width:200px; height:60px; background:url(../img/logoTipical.png) no-repeat; margin:0px 5px; cursor:pointer;}

	#container li {position:absolute; top:0 left:0; /margin:40px 15px 15px 15px;/
	/*cursor:pointer;
	-moz-box-shadow: 0px 0px 3px #888; -webkit-box-shadow: 0px 0px 3px #888; box-shadow: 0px 0px 3px #888;
	-moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;*/
	background-color:rgba(0,0,0,0.4) }
	}
	#container li a { color:#222; text-decoration:none;}
	#container li.current {cursor:default;}
	#container li.current a { color:#0010a9; text-decoration:underline;}

	#somos {padding:60px 10px; color:#FFF;}
	/*#localizacion { height:500px; width:700px; padding:10px 5px; background-color:#F00; }
	#album { height:500px; width:700px; padding:10px 5px; background-color:#6C0; }
	#menu { height:500px; width:700px; padding:10px 5px; background-color:#03F; }*/
	/#somos:hover, #localizacion:hover, #album:hover, #menu:hover { cursor:pointer; }/
	<!-- content to be placed inside <body>…</body> -->
	<div id="contenedor">

	<ul id="presentacion">

	<li class="">
	<div id="logo"></div>
	</li>

	<li class="current">
	<div id="somos">
	<p>
	<h3>Quien somos</h3><br>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis feugiat congue. Donec id nisi lacus, ut euismod metus.
	Nunc eu sem nibh, sit amet feugiat ipsum. In ut risus sit amet orci placerat ornare. Vivamus facilisis lacus eget metus
	elementum eget tristique magna lobortis. Etiam vulputate mi nec nisi hendrerit in ullamcorper est ultrices. Vivamus placerat
	sapien id eros dapibus quis volutpat lorem aliquam. Pellentesque scelerisque hendrerit volutpat. Aliquam ut lorem velit.
	Vestibulum posuere felis eu libero posuere vel rhoncus nibh iaculis. Donec id ornare eros. Aliquam mauris leo, malesuada quis
	elementum non, blandit eget neque. Pellentesque sagittis venenatis auctor. Curabitur volutpat facilisis augue, iaculis sagittis
	ante tincidunt eget.
	</p>
	</div>
	<div id="ofrecemos">
	<p>
	<h3>Que ofrecemos</h3><br>
	Sed ante nisl, sollicitudin eget tincidunt vitae, facilisis sit amet tortor. Mauris vestibulum imperdiet feugiat.
	Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed justo justo.
	Vestibulum feugiat, nunc a rutrum placerat, nunc sapien venenatis erat, et tristique dolor quam nec dolor.
	Vestibulum et nisi orci, nec aliquam leo. Vestibulum ligula nibh, dictum in rutrum id, imperdiet quis justo.
	Suspendisse sit amet sapien nec arcu mollis feugiat a non sapien. Integer feugiat urna a neque consequat gravida.
	Praesent placerat, ligula in suscipit pulvinar, mauris nulla semper dui, id molestie sapien orci non nibh.
	Nunc libero nibh, laoreet at cursus ac, porta at nunc. Curabitur in neque ac dolor luctus consequat.
	Vivamus consectetur, ligula sed rhoncus viverra, elit arcu porta purus, at consectetur erat ipsum sit amet nunc.
	Mauris sed odio quis dui lacinia pretium.
	</p>
	</div>
	<div id="estamos">
	<p>
	<h3>Donde estamos</h3>

	</p>
	</div>
	</li>

	</ul>


	<!--
	<div class="oe_wrapper">
	<div id="oe_overlay" class="oe_overlay"></div>
	<ul id="oe_menu" class="oe_menu">
	<li>
	<a href="">Collections</a>
	<div>
	<ul>
	<li class="oe_heading">
	Summer 2011
	</li>
	<li><a href="#">Milano</a></li>
	...
	</ul>
	<ul>
	...
	</ul>
	<ul>
	...
	</ul>
	</div>
	</li>
	<li>
	<a href="">Projects</a>
	<div style="left:-111px;">
	...
	</div>
	</li>
	<li>
	<a href="">Fragrances</a>
	<div style="left:-223px;">
	<ul class="oe_full">
	<li class="oe_heading">
	Fashion Fragrances
	</li>
	<li><a href="#">Deálure</a></li>
	<li><a href="#">Violet Woman</a></li>
	<li><a href="#">Deep Blue for Men</a></li>
	<li><a href="#">New York, New York</a></li>
	<li><a href="#">Illusion</a></li>
	</ul>
	</div>
	</li>
	<li><a href="">Events</a>
	<div style="left:-335px;">
	...
	</div>
	</li>
	<li><a href="">Stores</a>
	<div style="left:-447px;">
	...
	</div>
	</li>
	</ul>-->

	</div>