/* The styles in this sheet are just for presentation and *shouldn't* effect 
the way the corners work -- in theory anyway*/
body {
	font-family:verdana, sans-serif ;
	margin:0;
	padding:0
}
#container {
	margin-left:auto;
	margin-right:auto;
	padding-bottom:1em;
	height:1%
}
#flow {
	width:100%!important;
  }
h1.title{
	font-size:2.5em;
	color:#036;
}
h1.title span{
	font-size:50%;
	font-style:italic
}
h5.title {
	font-size:small;
	font-style:italic;
}
div#flow div.wrap div.rounded h5 {
	font: bold italic 1.4em  verdana, sans-serif ;
}
div#flow div.wrap div.rounded h5#window{
	font: bold 1.3em  verdana, sans-serif ;
	width:250px;
	height:1%;
	background: transparent url(/images/layout/pop.gif) center left no-repeat;
	right:0;
	top:25px;
	position:absolute;
	padding: 8px 2.2em;
	}
div#flow div.wrap div.column {
	width:32%;
	float:left;
	margin-left:1%;
}

div#flow div.wrap div.column div#generator{
	/*overflow:hidden;*/
}
div#flow div#tab div.wrap h1, div#flow div#tab div.wrap h5 {
	margin-left:20px;	
}

div#flow div.wrap div#code, div#instructions {
	width:64%;
	float:right;
	height:auto
	}
div#flow div.wrap div.rounded .note {
	font-weight:bold;
	}

div#flow div.wrap div.rounded span.date {
	color:red;
	font-variant:small-caps;
	text-transform:capitalize;
	margin-right:.5em;
	background:#fff;
	padding:1px 4px;
	}


/* form elements styling */
div#flow div.wrap div.rounded form * {
	background :none!important;
	line-height:1.2;
	padding:.3em;
	margin:0 2%;
}
div#flow div.wrap div.rounded form  {
	font-size:1.3em;

}

div#flow div.wrap div.rounded form fieldset {
	background: transparent url(vignette.gif) top left repeat!important;
	line-height: 1.2;
	padding: .3em!important;
	margin: 0!important;
	padding-top: 0!important;
	color:#000;
	border:1px outset #eee;
	width:90%;
	color:#000;
}

div#flow div.wrap #generate-options label {
	display: inline;
	margin: 0!important;
	font-size: 80%!important;
	overflow:hidden;
}

div#flow div.wrap #generate-options input.text {
	background-color: #E0E8EF!important;
	width: 90%;
	border: 1px solid #000;
	font-family: monospace;
	color:#000
}

div#flow div.wrap #generate-options input.button {
	background-color: #E0E8EF!important;
	width: 100%;
	border: 2px outset #000;
	margin: 1em 0 0 0;
}
div#flow div.wrap p, div#flow div.wrap li {
font: 1.2em Arial, Helvetica, sans-serif
}
div#flow div.wrap ul.corners li {
	list-style: none;
	display: inline;
	padding-right: 20px;
}
div#flow div.wrap ul.corners li img {
	padding: 20px;
	border: 2px dashed #ddd!important;
	background-color:#fff!important;
}
div#flow div.wrap div.rounded pre {
	color:#333;
	font: small "Courier New", Courier, monospace;
}
div#flow div.wrap div.rounded pre code{
	display:block;
	width:90%!important;
	background-color:#eee!important;
	color:#333;
	font: 85% "Courier New", Courier, monospace;
	margin-right:1em;
	margin-bottom:10px;
	padding:1em ;
}
div#flow div.wrap div.rounded dd {
	margin-top:10px;
	margin-bottom:15px;
	font-size:small
	}
div#flow div.wrap div.rounded dd code{
	color:#990000;	
	font-size:small
	}
