/*      Formatting thanks to http://www.pmob.co.uk                              */
/*      Some changes have been made, but the basic idea is from there =)        */

@media all {

html, body {height:100%}

body {
        padding:0px;
        margin:0px;
        color: #eee;
        background:#000 url('/skin/images/i3/HWT-header.gif') 50% 0 repeat-x;
        font-family: Helvetica, Arial, sans-serif;
        font-size:10pt;
        text-align:center;
}

div {
        /* give proper browsers a correct value */
        height:auto;
}

div {height: 1%}

* > div { height:auto; }

h1 {
        margin: 0px auto 0px;
        width:748px;
        height:190px;
        text-align:left;
}

#header span {height:150px; width:250px; position:absolute; left:0; background: transparent url(/skin/images/i3/logo.jpg) no-repeat }

#header {
	position:relative;
	margin:0 20px;
	height: 150px; width: 250px;
	overflow:hidden;
	display:block;
}

#outer {
        margin: 0px auto;
        width: 750px;
}

#centrecontent {
        padding-left: 130px;
        margin-left:1px;
}

#innerwrap{
margin-right:175px
}

#outerwrap {
        width: 100%;
        float: right;
        margin-left: -2px;
}

#left {
        position: relative;
        width: 125px;
        float: left;
        margin-right: -124px;
        font-size: 8pt;
        text-align: left;
}

#footer {
        margin: 0pt auto 10px;
        width: 750px;
        min-height: 6em;
        text-align: center;
}

#clearfooter {
        clear: both;
        height: 1px;
}

/* And now for my stuff */
/* Side box styles */
.box{border: 1px solid #444; margin: 0 0 0.75em}
.boxIn{ padding: 0.25em 0.5em}
.box h3 { margin:0; padding:0.25em; background:url(/images/SideBoxTop.gif) #262626; border-bottom: 1px solid #333; font-weight:normal; font-size:10pt}
.box h4 { margin:0; padding: 0 }

/* Main Body styles */
/* The outer-most div - needs all the old "centrecontent" stuff applying to it */
.mainT{ background:url('/skin/images/i3/HWT-frame2_02.gif') repeat-x top left; border:1px solid #444; float:left;width:100%; position:relative; margin: 0 0 1em -2px; min-height:300px; padding: 0}
h2 {border: 1px solid #666; background-color: #000; display:inline; padding: 0 0.5em; color:#ccc}
/* The inner-most div with the main content */
.mainL{ padding: 1em 0.5em 1em; min-height:300px; text-align:left }


/* and now add IE height setting to the center content*/
* html .mainTop{ height:300px }

/*** Other formatting ***/

/* elements */
a {
        background-color:transparent;
        color:#ddd
}

a:visited {
        background-color:transparent;
        color:#ccc
}

a:hover{text-decoration:underline overline}

h1, h2, h3, h4 {
        font-family: Helvetica, Arial, sans-serif;
}

h1{ font-size:13pt; }
h2{ font-size:12pt; }
h3{ font-size:11pt; clear: left }
h4{ font-size:9pt; clear: left }

.mainT h3 { border: 1px solid #333; background-color: #111110; padding:0.25em}

img { border:0 }
form br, form p {clear:both}
form {width:100%}

form:after, #refList:after, .sample:after {
	display:block;
	content:".";
	height:1px;
	line-height:0%;
	overflow:hidden;
	clear:both;
color:#222;
}

label, .input, .lrgtextarea, .lrgtextbox, select {
	margin: 6px 4px;
	display: block;
	width: 150px;
	float: left;
}

.textarea {
	width: 250px;
	height: 100px;
}

.lrgtextarea {
	width: 400px;
	height: 200px;
}

input.tickbox {margin: 10px; float:left; display:block}

label {
	text-align: right;
	width: 150px;
        padding-right: 0.5em;

}

select{width:auto;}

label.flowed{width:auto; padding-left:2em}
label.tickbox{width:auto; text-align:left; padding-right:1em}

/* classes and IDs */
#banners{
position:absolute;
text-align:center;
top:5px;
left:275px;
width:63%;
}
.centertext{
        text-align:center;
}
.copyright {
        height:4em;
        padding-top:0.25em;
        font-size:8pt;
        border:1px solid #444;
        text-align:center
}

.download H2{
font-size:10pt;
font-weight:bold;
}

.download p{
line-height:120%;
}

.hide{
        visibility:hidden;
        height:1px;
        overflow:hidden;
        margin: 0; padding: 0
}

.sayingBox {
        margin: 0 10%;/* center align using margins */
        border: 3px double #444;
        font-family: courier new, monospace;
        font-size:9pt;
        text-align:center;
}

.box ul{
        margin:0px;
        padding: 2px 0px 2px 18px;
        list-style-type:circle;
}

.boxselect{
background-color:#000;
color:#ddd;
}

/* and add hover effects that IE can't see */
.box li:hover { list-style-type:disc;}

.righttext{
text-align:right;
}

.stats{
        padding-top:0.25em;
        font-size:8pt;
        border: 1px solid #444;
        border-bottom-width:0px;
        text-align:center
}
.stats p{margin:0;padding:4px}

.question{
padding-top:1.5em;
font-weight:bold;
}
.answer{
padding-left:10px;
}

br.both{
clear:both
}   

.error {width:80%; text-align:center; margin:1em auto; padding:0.5em; border:1px solid #333; background-color:#111}

input, textarea, select {color:#eee; background-color:#222;border:1px solid #444}  
.lrgtextarea{ width:400px; height: 150px }

ul { margin:1em 0; padding: 0 0.5em 0 2.5em}
ul ul { margin: 0.25em 0;}
.mainL li { margin: 0.3em 0}
dt {font-weight:bold}
dd { margin: 0 0.5em 2em 3em}
.mainL dd p { margin:0.25em 0.5em }
.mainL p, .mainL dl {margin: 1em 0.5em}
ins{color:#bb0; text-decoration:none}
ins:before{content:"++ "}
ins:after{content:" ++"}
ins a:link,ins a:visited,ins a:hover,ins a:active{color:#aa3}
.mainL .copyrightText{font-size:8pt; margin: 1em 15%; width:70%; border:1px solid #333; padding:0.25em}
.footerLinks{text-align:center}
.prev{float:left}
.next{float:right}

blockquote{
  background-color:#161616;
  border:1px solid #292929;
  border-left:3px solid #443;
  padding: 0.5em
}

.mainL blockquote p { margin: 0.5em 0 0.5em 1.5em}

.dlCats{ width:90%; margin-left:5%; border: 1px solid #333; border-width: 1px 0}
.dlCats p {margin-bottom:0}
.dlCats ul{width:100%;margin:0.2em 0; padding:0}
.dlCats ul:after{content:" "; display:block; clear:both}
.dlCats li{float:left; list-style-type:none; margin:0 1em 0.25em 0}

q{font-style:italic}
q:before, q:after {content:"\201C"}

#refList{margin:0; padding:0; width:100%}
#refList li{margin:0; padding:0; float:left; display:block}

cite a{font-style:normal}
.permalink{text-align:right; margin:-2.5em 1em 0 0}
.permalink a img {border-width: 0}
.newsFooter {text-align:center}
.datestamp{ font-size:8pt; font-style:italic }
hr{border-width:0px; height:3px; width:80%; color:#444; background-color:#444}

.amazon { width: 280px; float: left; margin: 10px; }
.amazon iframe { width:130px; height:240px; margin: 0 75px}
.amazon .buy { margin: 0; text-align: center }
}