/*
  iPhoneUI.css
  
  Base styles for iPhone Web applications, based on Apple's
  recommended user interface styles.
  
  http://developer.apple.com/iphone/designingcontent.html
*/

body {
  font-family: Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.edgeToEdge {
  background-color: #fff;
  border-spacing: 0;
  border-width: 0;
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

.edgeToEdge.formButtons {
  margin: 0;
  padding: 10px;
}

.edgeToEdge .formList {
  font-weight: normal;
}

.edgeToEdge.formFields textarea,
.roundedRect.formFields textarea,
.roundedRect .formFields textarea {
  clear: left;
  display: block;
  width: 296px;
}

dl.edgeToEdge.formFields dd,
dl.roundedRect.formFields dd,
.roundedRect .formFields dd {
  border-bottom: 1px solid rgb(217,217,217);
  padding: 10px;
  margin: 0;
  text-align: right;
}

dl.edgeToEdge.formFields dd.last,
dl.roundedRect.formFields dd.last,
.roundedRect .formFields dd.last {
  border-bottom-width: 0;
}

dl.edgeToEdge.formFields dt,
dl.roundedRect.formFields dt,
.roundedRect .formFields dt {
  clear: left;
  float: left;
  padding: 10px 10px 0 10px;
  margin: 0;
}

p.edgeToEdgeLast {
  border-bottom-width: 0;
}

form {
  margin: 0;
}

.formButtons {
  text-align: right;
}

.formList {
  list-style-type: none;
  margin: 0 0 -.33em 0;
  padding: 0;
}

.formList li {
  margin-bottom: .33em;
}

.formResults {
  background-color: #fff;
  -webkit-border-radius: 8px;
  color: #900;
  font: normal normal bold 17px/normal Helvetica, Arial, sans-serif;
  margin: 1em 10px;
  padding: 10px;
  text-align: center;
}

.iphone-preview-landscape,
.iphone-preview-portrait {
  background-color: #A3A3A3;
  border: 1px solid #000;
  margin: 1em auto;
  min-height: 320px;
  width: 356px;
}

.iphone-preview-portrait {
  min-height: 356px;
  width: 320px;
}

.roundedRect {
  background-color: #fff;
  border-width: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: bold;
  margin: 10px;
  -webkit-border-radius: 8px 8px;
}

body.roundedRect,
body.roundedRect .iphone-preview-landscape {
  background-color: #C5CCD3;
}

body.roundedRect {
  font: normal normal bold 17px/normal Helvetica, Arial, sans-serif;
}

div.roundedRect {
  margin: .6em 10px 1em 10px;
  padding: 1px 10px;
}

p.roundedRect {
  padding: 10px;
}

.roundedRectHead,
.roundedRect legend {
  color: rgb(76,86,108);
  font: normal normal bold 17px/normal Helvetica, Arial, sans-serif;
  margin: 0;
}

.roundedRectIntHead {
  font: normal normal normal 21px/normal Helvetica, Arial, sans-serif;
  margin: 1em 0 -.75em 0;
}

fieldset.roundedRect {
  margin: 2em 10px 1em 10px;
  padding: 0 0 1px 0;
}

fieldset.roundedRect p {
  margin: 1em 10px;
}

.roundedRect legend {
  padding-left: 10px;
  position: relative;
  top: -.8em;
}

.roundedRectHead {
  margin: 1em 20px -.5em 20px;
}

/* New/Updated List */
font-family: Arial,Helmet,Freesans,sans-serif;
font-family: 'Arial Narrow','Nimbus Sans L',sans-serif;
font-family: 'Bookman Old Style',Bookman,'URW Bookman L',serif;
font-family: 'Century Gothic',Futura,'URW Gothic L',sans-serif;
font-family: 'Comic Sans MS',cursive;
font-family: 'Courier New',Courier,Freemono,'Nimbus Mono L',monospace;
font-family: Constantina,Georgia,'Nimbus Roman No9 L',serif;
font-family: Consolas,'Lucida Console','Bitstream VeraSans Mono','DejaVu Sans Mono',monospace;
font-family: 'Lucida Sans Unicode','Lucida Grande','Lucida Sans','DejaVu Sans Condensed',sans-serif;
font-family: Cambria,'Palatino Linotype','Book Antiqua','URW Palladio L',serif;
font-family: symbol,'Standard Symbols L';
font-family: Cambria,'Times New Roman','Nimbus Roman No9 L','Freeserif',Times,serif;
font-family: Verdana,Geneva,'Bitstream Vera Sans','DejaVu Sans',sans-serif;

font-family: 'Helvetica Neue',Arial,'Liberation Sans',FreeSans,sans-serif;

/* Traditional List */
font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: 'Bookman Old Style', serif;
font-family: 'Comic Sans MS', cursive;
font-family: 'Courier New', Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'Lucida Console', Monaco, monospace;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family: 'MS Sans Serif', Geneva, sans-serif; /* bitmap */
font-family: 'MS Serif', 'New York', serif; /* bitmap */
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, 'Zapf Dingbats', sans-serif;

.shadow {
	-moz-box-shadow: 3px 3px 4px #000;
	-webkit-box-shadow: 3px 3px 4px #000;
	box-shadow: 3px 3px 4px #000;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>

<style>
  h1 {
    width: 1em;
    font-size: 40px;
    letter-spacing: 40px; /* arbitrary large letter-spacing for safety */
  }
</style>
</head>
<body>
  <h1> N e t t u t s </h1>
</body>
</html>

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

table.center {margin:auto;}

input, textarea  {
    outline:none;
}

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}
/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

/* Asignamos el tamaño en tanto por ciento en el body */
body { font-size: 62.5%; }

/* El resto de tamaños los tenemos que poner como em con un solo decimal como máximo */
p { font-size: 1em; }
h1 { font-size: 2em; }
h2 { font-size: 1.8em; }
...

* { outline: 2px dotted red } 
* * { outline: 2px dotted green } 
* * * { outline: 2px dotted orange } 
* * * * { outline: 2px dotted blue } 
* * * * * { outline: 1px solid red } 
* * * * * * { outline: 1px solid green } 
* * * * * * * { outline: 1px solid orange } 
* * * * * * * * { outline: 1px solid blue }