cjbarnes18/core.css

## core.css
html {
  background-color: lightblue;
  padding: 0;
  margin: 0;
  height: 100%;
}
body {
  padding: 0;
  height: 100%;
  background-color: white;
  margin: 0 auto;
  max-width: 50em;
  border-left: 2px solid Grey;
  border-right: 2px solid Grey;
  font-family: Arial, Tahoma;
}

dt{
  font-weight: bold;
  font-style: italic;
}

#main {
  background-color: white;
  padding: 1em;
  margin: 0 -2px;
  border-left: 2px solid Grey;
  border-right: 2px solid Grey;
}
#title {
  color: darkblue;
  margin: 0;
  padding: 1em 0.2em 0.2em 0.2em;
  background-color: LightGrey;
  border-bottom: 2px dashed Grey;
  font-size: 1.6em;
}

h1 {
  font-size: 1.4em;
  color: darkblue;
}

h2 {
  font-size: 1.2em;
  color: darkblue;
}

h3 {
  font-size: 1.1em;
  color: darkblue;
}

th {
  font-size: 0.9em;
}
#Ui-datepicker-div {
  font-size: 0.8em;
}

## csstest.html
<!DOCTYPE html/>
<html>
<head>
  <title>CSS Rendering Test</title>
  <link rel="stylesheet" href="core.css">
  <link type="image/x-icon" href="/favicon.ico" rel="shortcut icon">
        <link type="text/css" href="css/smoothness/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
        <script type="text/javascript">
                $(function(){
                        // Datepicker
                        $('#date1').datepicker({
                                dateFormat: "yy-mm-dd"
                        });
                });
        </script>
</head>
<body>
        <h1 id="title">Page title h1</h1>
        <div id="main">
                <p>Paragraph in main div.</p>
                <dl>
                        <dt>dt 1</dt>
                        <dd>dd with a whole bunch of text that I hope will wrapp over the one line mark in the browser so that I can test how it looks on multiple lines.</dd>
                        <dt>dt 2</dt>
                        <dd>This dd is shorter.</dt>
                </dl>
                <h1>h1</>
                <h2>h2</h2>
                <h3>h3</h3>
                <h3>table form</h3>
    <form action="" method="get">
      <input type="hidden" name="qryid" value="80">
      <table>
        <tr><th>Company<td><input type="text" name="co" value=""></td></tr>
        <tr><th>Customer<td><input type="text" name="cust" value=""></td></tr>
                                <tr><th>Months<td><input type="numeric" name="months" value=12></td></tr>
                                <tr><th>Date<td><input id="date1" type="numeric" name="date"></td></tr>
      </table>
      <input type="submit">
    </form>
          <h3>inline table form</h3>
                <form method="get" action="">
                        <input type="hidden" value="87" name="qryid">
                        <table>
                                <tbody>
                                        <tr><th>CODE</th>
                                                <td><input type="text" name="code"></td>
                                                <td><input type="submit"></td>
                                        </tr>
                                </tbody>
                        </table>
                </form>
        </div>
</body>
</html>
	html {
	background-color: lightblue;
	padding: 0;
	margin: 0;
	height: 100%;
	}
	body {
	padding: 0;
	height: 100%;
	background-color: white;
	margin: 0 auto;
	max-width: 50em;
	border-left: 2px solid Grey;
	border-right: 2px solid Grey;
	font-family: Arial, Tahoma;
	}

	dt{
	font-weight: bold;
	font-style: italic;
	}

	#main {
	background-color: white;
	padding: 1em;
	margin: 0 -2px;
	border-left: 2px solid Grey;
	border-right: 2px solid Grey;
	}
	#title {
	color: darkblue;
	margin: 0;
	padding: 1em 0.2em 0.2em 0.2em;
	background-color: LightGrey;
	border-bottom: 2px dashed Grey;
	font-size: 1.6em;
	}

	h1 {
	font-size: 1.4em;
	color: darkblue;
	}

	h2 {
	font-size: 1.2em;
	color: darkblue;
	}

	h3 {
	font-size: 1.1em;
	color: darkblue;
	}

	th {
	font-size: 0.9em;
	}
	#Ui-datepicker-div {
	font-size: 0.8em;
	}
	<!DOCTYPE html/>
	<html>
	<head>
	<title>CSS Rendering Test</title>
	<link rel="stylesheet" href="core.css">
	<link type="image/x-icon" href="/favicon.ico" rel="shortcut icon">
	<link type="text/css" href="css/smoothness/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
	<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
	<script type="text/javascript">
	$(function(){
	// Datepicker
	$('#date1').datepicker({
	dateFormat: "yy-mm-dd"
	});
	});
	</script>
	</head>
	<body>
	<h1 id="title">Page title h1</h1>
	<div id="main">
	<p>Paragraph in main div.</p>
	<dl>
	<dt>dt 1</dt>
	<dd>dd with a whole bunch of text that I hope will wrapp over the one line mark in the browser so that I can test how it looks on multiple lines.</dd>
	<dt>dt 2</dt>
	<dd>This dd is shorter.</dt>
	</dl>
	<h1>h1</>
	<h2>h2</h2>
	<h3>h3</h3>
	<h3>table form</h3>
	<form action="" method="get">
	<input type="hidden" name="qryid" value="80">
	<table>
	<tr><th>Company<td><input type="text" name="co" value=""></td></tr>
	<tr><th>Customer<td><input type="text" name="cust" value=""></td></tr>
	<tr><th>Months<td><input type="numeric" name="months" value=12></td></tr>
	<tr><th>Date<td><input id="date1" type="numeric" name="date"></td></tr>
	</table>
	<input type="submit">
	</form>
	<h3>inline table form</h3>
	<form method="get" action="">
	<input type="hidden" value="87" name="qryid">
	<table>
	<tbody>
	<tr><th>CODE</th>
	<td><input type="text" name="code"></td>
	<td><input type="submit"></td>
	</tr>
	</tbody>
	</table>
	</form>
	</div>
	</body>
	</html>