/*
CSS TODO:
 hyperlink style in "main" div to be <em>?
PAGE TODO:
 banner at top changes with mouse over of content in gallery?
*/

.hardleft {
	position: absolute;
	left: 0px;
}
.center {
	text-align: center;
}
.nudgeup {
	margin-top: -10px;
}
.floatright {
	margin-left: 5px;
	margin-bottom: 5px;
	float: right;
	/*	clear: right; */
}
.floatleft {
	margin-right: 5px;
	margin-bottom: 5px;
	float: left;
}

.clear {
	clear: both;
}
.clearright {
	clear: right;
}
.clearleft {
	clear: left;
}

html {
	margin: 0;
	padding: 0;
	background: #F2F2F6;
	color: #000;
}
body {
	min-width: 700px;
}
p,img,h1,h2,h3,ol,ul,li{
	padding: 0;
	margin: 0;
}

.red {
	color: #F00;
}
.blue {
	color: #0AA;
}
.yellow {
	color: #BB0;
}
.black {
	color: #000;
}
.lightredbg {
	background: #EEDDDD; 
}
.lightgreenbg {
	background: #DDEEDD; 
}

a:link {color: #259; text-decoration: none; }
a:active {color: #000; text-decoration: none; }
a:visited {color: #259; text-decoration: none; }
a:hover {color: #259; text-decoration: underline; }
a:link img { border: 1px solid #259; }
a:active img { border: 1px solid #000; }
a:visited img { border: 1px solid #259; }
a:hover img { border: 1px solid #962; }

#wrapper {
	background: #FFF;
	margin: 0 auto;
	width: 700px;
    padding: 6px;
	background: #FFF;
    position:relative;
    z-index:2;
}

#gadgets {
    position: absolute;
    z-index: 1;
	top: 105px;
	background: #FFF;
    border: 1px gray dotted;
    padding: 3px 1px 5px 5px; 
} 
#gadgets.right {
    width: 150px;
	right: 5px;
}
#gadgets.left {
    width: 135px;
    left: 5px;
} 
#gadgets p,ul,ol,li,h1,h2 {
    font-family: Arial, Helvetica, sans-serif; 
    text-align:left;
    font-size: 10.0px;
    margin: 0;
    font-weight: normal;
    text-align: left;
}
#gadgets h2 {
    padding: 0;
    margin: 5px 0 5px 5px;
    font-size: 11px;
    font-weight: bold;
    text-align: left;
}
#gadgets ul,ol {
    color: red;
    text-align: left;
    font-weight: bold;
    font-size: 10.0px;
}
#gadgets li {
    color: black;
    padding: 0;
    text-align: left;
    margin: 0 0 0 15px;
	padding: 0 0 3px 0;
	font-size: 10.0px; 
}
#gadgets img {
    margin-right: 5px;
    margin-bottom: 5px;
    float: left;
}
#gadgets a:link img { border: none; }
#gadgets a:active img { border: none; }
#gadgets a:visited img { border: none; }
#gadgets a:hover img { border: none; }

#header {
	border-bottom: 2px gray solid; 
	background: #FFF;
	/* font-family: georgia, serif; */
	margin: 0 0 1px 0;
	padding: 0 0 2px 0;
	text-align: right;
	/* font-weight: bold; */
}
#header.small {
	margin: 0 0 1px 0; /* top used to be -5, but that clipped text in ie6 */
}

#header span {
	font-family: georgia, serif;
}
#header span.s1 {
	font-size: 15.0px;
}
#header span.s2 {
	font-size: 11.0px;
}
#header p {
	font-family: Verdana, Geneva, sans-serif;
	float: left;
}
#header p.nav {
	/* font-family: Verdana, Geneva, sans-serif; */
	font-size: 13.0px;
	margin-top: 1px;
	clear: left;
}
#header p.nav_small_r {
	font-size: 13.0px;
	float: none;
	text-align: right;
}
#header img {
	vertical-align: bottom;
}

#nav {
	margin: 1px 0 1px 0;
	border-top: 1px gray solid;
	border-bottom: 0;
	padding: 1px 0 1px 0;
    background: #FFF;
}
#nav p {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 13.0px;
	margin: 0 0 1px 150px;
	padding: 2px 0px 2px 0;
	text-align: center;
}
#nav p.center {
	margin: 0 0 1px 0px;
}

#nav.subnav {
	padding: 2px 0 2px 0;
	margin-left: 150px;
}
#nav.subnav p {
    margin: 0 0 1px 0;
	font-size: 12.0px;
	text-align: center;
}
#nav.subnav p.tiny {
    margin: 0 0 1px 0;
	font-size: 9.0px;
	text-align: center;
}

#main {
	background: #FFF;
	border-top: 0px;
}
#main code {
    text-indent:200px;
    font-size: 11.0px;
}
#main code.h1 {
    font-size: 13.0px;
}
#codeblock {
    background: #E9E9FA;
    padding: 5px;
}
#main img.thumb {
	margin: 0 10px 10px 0;
	vertical-align: middle;
	max-width: 80px;
	max-height: 80px; 
}
#main p,h1,h2,h3,ol,ul,li,table,tr,td {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13.0px;
	padding: 0px 0 10px 0;
	margin: 0;
	text-align: justify;
	/* background: #FFF; */
}

#main table {
	width:100%;
    margin-bottom:10px;
}
#main table,tr,td {
	text-align:left;
	border: none;
	padding: 0px;
}
#main tr.alt,td.alt {
	background: #D8D8E9; 
}
#main td {
	padding: 2px;
}

#main li {
	text-align:left;
	margin-bottom: 5px;
	padding: 0;
}
#main ol {
	/* text-align:left; */
	font-weight: bold;
	margin-left: 30px;
}
#main ul {
	margin-left: 30px;
}
#main ul.table {
	text-align:left;
	margin-left: 20px;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

#main h1 {
	/*font-size: 15.0px; */
	font-weight: bold;
	font-style: italic;
}
#main h2 {
	/*font-size: 15.0px; */
	margin: 0px 5px 0 0;
	padding: 0 0 5px 0;
	font-weight: bold;
	font-style: normal;
}
#main h2.newstitle {
	float: left;
	margin-bottom: 0;
	padding-bottom: 0;
}
#main h3 {
	font-weight: normal;
	font-style: italic;
	margin: 0px 5px 5px 0px;
	padding: 0;
}

#main .block {
	margin: 1px 0 0 0;
	clear: both;
}
#main .left {
	float: left;
	width: 150px;
	margin: -7px 0 12px 0;	/* for now, top should be negative half of the font height of left p */
	/*padding: 0 10px 10px 0;*/
}
#main .left h1 {
	padding: 0px 0 5px 0;
	text-align: center;
}
#main .left h2 {
	padding: 0px 0 5px 0;
    font-size: 13.0px;
	text-align: center;
    font-weight: normal;
}
#main .left p {
	font-family: "Times New Roman", Times, serif;
	font-size: 13.0px;
	padding: 0 0 5px 0;
	text-align: center;
}
#main .right {
	float:right;
	width: 550px;
	border-top: 1px gray solid;
	padding: 3px 0 0px 0;
	margin: 0 0 5px 0px;
}

#footer {
	clear: both;
	border-top: 1px gray solid;
	text-align: left;
	width: 700px;
	padding-top: 3px;
}
#footer p {
	font-family: Courier New, Courier, monospace;
	font-size: 11.0px;
	color: #777;
}
#footer p.rightinfo {
	text-align: right;
	float: right;
}