/* ======== css for main site ======== */

/* \*/
* html {height: 1%;}
/* */

* {
	padding: 0;
	margin: 0;
	}
	
body
	{
	font-size: 100.01%;
	text-align:center;
	background-color: #E5ECFF;
	}
	
#page
	{
	font-size: 1em;
	width: 52em;
	margin: 1em;
	margin-left: auto;	
	margin-right: auto;	
	margin-top: 0;	
	text-align: left;
	border: 1px solid gray;
	background-color: #ffffff;
	}
	
#banner
	{
	padding: 1em;
	background: #333366;	
	}

#banner h1
	{
	color: #ffffff;
	font-weight: bold;
	font-size: 1.4em;
	text-align: center;
	font-family: helvetica, geneva, arial, sans-serif;	
	}

#picture
	{
	float: right;
	padding: 0;
	color: blue;
	font-size: 0.8em;
	text-align: center;
	font-family: helvetica, geneva, arial, sans-serif;	
	}
			
#content
	{
	width: 44em;
	padding: 2em;
	padding-bottom:1em;
	padding-top:0;
	}

#content-main
	{
	float: left;
	width: 22em;
	padding: 2em;
	padding-bottom:1em;
	padding-top:0;
	}

#content p
	{
	padding-top: 1em;
	padding-bottom: 1em;
	padding: 0;
	}

#content-main p
	{
	padding: 0;
	}

#content-main img
	{
	margin-right: 20px;
	}
		
#side-bar
	{
	float: right;
	width: 22em;
	padding: 2em;
	padding-bottom:1em;
	padding-left:1em;
	padding-top:0;
	}

.full
	{
	width: 44em;
	padding: 2em;
	padding-bottom:1em;
	padding-top:0;
	}

.full h1, .full h2, .fullh3
	{
	margin-left: 3em;
	}

#full
	{
	width: 44em;
	padding: 2em;
	padding-bottom:1em;
	padding-top:0;
	}

#full h1, #full h2, #full h3
	{
	margin-left: 3em;
	}
								
img
	{
	border: none;
	margin: 0.5em;
	}
	
.floatR
	{
	float: right;
	}
	
.floatL
	{
	float: left;	
	}
	
.right
	{
	text-align: right; 	
	}
	
.left
	{
	text-align: left; 	
	}

.center
	{
	text-align: center;
	}

.clear
	{
	clear: both;
	}	

.bold
	{
	font-size: 1em;
	font-weight:900;
	}

.tiny
	{
	font-size: 0.6em;	
	}
	
.red
	{
	color: red;	
	}

.green
	{
	color: green;	
	}

	
.yellow
	{
	background-color: yellow;	
	}

td.center
	{
	text-align: center;
	}
	
				
h1, h2, h3
	{
	margin: 1em;
	margin-left: 0;
	font-family: helvetica, geneva, arial, sans-serif;	
	}
			
h1
	{
	color: #0354c2;
	font-weight: bold;
	font-size: 1.4em;
	}
	
h2
	{
	color:#0354c2;
	font-size: 1.1em;
	}

h3
	{
	color:#0354c2;
	font-size: 1em;
	}

.red
	{
	color: #ff0000;	
	}

.blue
	{
	color: blue;	
	}
	
.white
	{
	color: #fff;
	}
	
.c1
	{
	color: green;
	font-weight: bold;
	}

.c2
	{
	color: blue;	
	}

.c3
	{
	color: black;	
	}

.c4
	{
	color: orange;	
	}

.c5
	{
	color: red;	
	font-weight: bold;
	}

.w5
	{
	width: 5%;
	}

.w30
	{
	width: 30%;
	}
			
hr
	{
	clear: both;
	margin: 1em;	
	}
					
p
	{
	color:#3b3b3b;
	font-size: 1em;
	line-height: 1.3em;
	font-family: "Times New Roman", georgia, serif;
	margin-bottom: 1em;
	}

ul
	{
	margin-left: 2em;
	color:#3b3b3b;
	font-size: 1em;
	line-height: 1.3em;
	font-family: "Times New Roman", georgia, serif;
	margin-bottom: 1em;
	/* list-style-image: url(right.gif); */
	list-style-type: square;
	}

ul.instructions li
	{
	margin: 1em;
	}
		
#footer
	{
	padding: 1em;
	background: #FFFFFF;	
	}
	
#footer p
	{
	margin: 5em;
	font-size: 0.8em;
	font-family: arial, helvetica, "gill sans", sans-serif;
	color: #fff;
	margin: 0;
	text-align: center;
	}

#footer a
	{
	margin: 5em;
	}

fieldset
	{
	width: 70%;
	padding: 1em;
	}
					
#name
	{
	padding-bottom: 1em;	
	}

#picture
	{
	float: right;
	padding:1em;	
	color: blue;
	font-size: 0.8em;
	text-align: center;
	font-family: helvetica, geneva, arial, sans-serif;	
	}
							
img
	{
	border: none;
	margin: 0;
	}

a
	{
	margin: 0;
	}

a.icon
	{
	float: right;
	clear: both;
	margin: 1em;
	margin-top: -1em;
	}

#card
	{
	font-size: 0.8em;
	width:100%;
	border: 6px double #63A3FD;
	background-color: #CCDAFF;
	}

#card p
	{
	color: #002699;
	margin: 0.5em;
	margin-top: 2em;
	}

#card h2
	{
	color: #002699;
	margin: 1em;
	margin-bottom: 0;
	}
		
#card img
	{
	margin-left: 0.2em;
	border: 2px solid white;
	}
						
pre
	{
	color: #039;
	background: #E5ECFF;	
	width: 80%;
	text-align: left;
	font-family: monaco, "Bitstream Vera Sans Mono", "Courier New", courier, monospace;
	font-weight: normal;
	font-size: small;
	line-height: 1.3em;
	padding: 1% 2%;
	margin: 1% 2%;
	border-style: solid;
	border-width: 2px 2px 1px 2px;
	border-color: #dfdfdf #dfdfdf #666 #ccc;
	}

.wrap
	{
	white-space: normal; 
	}

.header1
	{
  	background-color: #80A2FF;
  	color: #fff;
  	text-align: center;
  	text-transform: uppercase;
  	letter-spacing:2px;
  	padding-top: 0.5em;
  	padding-bottom: 0.5em;
	}

.header2
	{
  	background-color: #ccdaff;
  	text-align: center;	
	}

.header3
	{
	font-size: 0.8em;
  	background-color: #ccdaff;
  	text-align: center;	
	}

.highlight
	{
	font-weight: 900;	
	}
				
.row0
	{
  	background-color: #eeeeee;
	}
	
.row1
	{
  	background-color: #fff;	
	}
	
textarea.message
	{
	width: 600px;
	height: 120px;
	border: 3px solid #cccccc;
	padding: 5px;
	font-family: Tahoma, sans-serif;
	border: 1px solid #888;
	}

.title
	{
	width: 200px;	
	}

.margin
	{
	margin: 1em !important;
	}
		
textarea.description
	{
	width: 400px;
	height: 150px;
	border: 3px solid #cccccc;
	padding: 0;
	font-family: Tahoma, sans-serif;
	border: 1px solid #888;
	}
		
form
	{
	font-size: .8em;
	font-family: arial, helvetica, sans-serif;	
	}

table
	{
	font-size: 0.8em;
	width:80%;
	border: 6px double #eeeeee;
	background-color: #fff;
	}

table.full
	{
	margin:0;
	padding:0;
	font-size: 0.8em;
	width:100%;
	border: 6px double #eeeeee;
	background-color: #fff;
	}
	
th
	{
	font-size: 1.3em;
	padding: 0.5em;
	text-align: center;
	font-weight: bold;
	color: #000;
	background-color: #ccdaff;
	}
		
.db
	{
	vertical-align:text-top;	
	}

.normal
	{
	font-size: 1em;
	font-family: arial, helvetica, sans-serif;		
	}
				   
#arrow-paging
	{
	width: 100%;
	padding: 0;
	text-align: center;
	}

#arrow-paging p
	{
	font-size: .8em;
	color: blue;
	}
	        
#arrow-paging img
	{
	font-size: 1em;
	position: relative;
	top: .3em;
	margin-left: 0.5em;
	margin-right: 0.5em;
	height: 1.1875em;
	width: 1.375em;
	border: none;
	}		

#hide
	{
	display:none;
	line-height: 1.3em;
	color: #039;
	background: white;	
	text-align: left;
	font-weight: normal;
	font-size: 0.9em;
	line-height: 1.3em;
	padding: 1em;
	margin: 1em;
	border-style: solid;
	border-width: 2px 2px 1px 2px;
	border-color: #dfdfdf #dfdfdf #666 #ccc;
	}

.w3c
	{
	margin: 1em;
	margin-right: 3em;
	}
		
.dir
	{
	color: #039;
	background: #E5ECFF ! important;
	text-align: left;
	font-family: monaco, "Bitstream Vera Sans Mono", "Courier New", courier, monospace;
	font-weight: normal;
	font-size: small;
	line-height: 1.3em;
	padding: 1% 2%;
	margin: 1% 2%;
	border-style: solid;
	border-width: 2px 2px 1px 2px;
	border-color: #dfdfdf #dfdfdf #666 #ccc;	
	}

.dir input
	{
	margin-left: 1em;
	}

/* === timed === */

.timed
	{
	font-size: 1em;
	width: 200px;
	background-color: #ffffff;
	border: none !important;
	}

/* patern matching */

/*
span
	{
	background: yellow;
	}

code
	{
	margin-left: 2em;
	padding: 1em;
	background: #E5ECFF;	
	border: 1px solid black;
	}

tt
	{
	background: #FFA8EB;	
	}

			
.clear
	{
	clear: both;
	margin: 1em;	
	}
			
*/						
/* ======== nav code for examples ======== */

.navcontainer
	{
	clear: both;
	position: relative;
	top: 0px;
	left: 0px;
	margin: 0;
	padding: 0;
	font-family: helvetica, geneva, arial, sans-serif;	
	}

ul.navlist
	{
	margin-left: 0;
	padding-left: 0;
	white-space: nowrap;
	}

.navlist li
	{
	display: inline;
	list-style-type: none
	}

.navlist a
	{
	padding: 3px 10px;	/* top-bottom  3px, right-left 10px */
	}

.navlist a:link, .navlist a:visited
	{
	color: #fff;
	background-color: #036;	
	text-decoration: none;
	}

.navlist a:hover
	{
	color: #fff;

	background-color: #369;
	text-decoration: none;
	}	

.navlist li.active
	{
	color: #fff;
	padding: 3px 10px;	/* top-bottom  3px, right-left 10px */
	background-color: #369;	
	text-decoration: none;
	}