/* style.css */
/* TODO:
 * [ ] Lists and Paragraphs don't play well with Divs, fix that.
 * [ ] Find some better bullets.
 * [ ] Styles for forms, images, etc. still needed
 * [ ] Styles for translucent elements
 * [ ] Fix the right margin on boxes
 */
body {
 margin: 0px;
 padding: 0px;
 font-family: "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif;
 font-size: 11px;
 background: url('img/blkdiamondplatebg.png') #000000;
 background-attachment: fixed;
}

/* temporary displays div frame borders */
/* div { border: 1px solid #000000; } */

/* #### Page elements #### */
#page {
 width: 960px;
 margin: 0 auto;
 /* background: #ffffff; */
}

#header {
 position: relative;
 /* height: 180px; */
 z-index: 2;
 /* background: #880000; */
 /* border: 1px solid #000000; */
}

#logo {
 height: 120px;  /* I hate this gap between the header and main, this should fix it. */
 z-index: 3;
 /* border: 1px solid #000000; */
 /* position: absolute; NO! DON'T USE THIS! */
}

/* See https://developer.mozilla.org/En/Useful_CSS_tips/Color_and_Background for opacity */

#bkgd {
 z-index: 4;
 background: #000088;
 height: 120px;
 filter:alpha(opacity=50);	/* MSIE */
 -moz-opacity:0.5;		/* Moz 1.6 on down */
 opacity:0.5;			/* newer Moz, Firefox, and CSS3 */
}

#fgd {
 z-index:5;			/* on top of bkgd */
 background-color: transparent;
 color: #0088ff;
 height: 120px;
 position: absolute;
}

#fgd h1 {
 font-size: 24pt;
 /* line-height: 18pt; */
}

#fgd h2 {
 font-size: 18pt;
}

#menutabs {
 font-size: 12pt;
 height: 90 px;
 z-index: 3;
 background: #003366;
 color: #ffffff;
}

/* Main section */
#content {
 z-index: 1;
 background: #ffffff;
 /* border-color: #ff0000; */
}

/* content-left */
#main {
 float: left;
 width: 620px;
 padding: 5px 10px;
 font-size: 12pt; /* Large font! Actually read what you write! */
 /* border: 1px solid #000000; */
}

/* content-right */
#sidebar {
 float: right;
 width: 300px;
 padding: 5px 5px;
 /* border: 1px solid #000000; */
}

/* Footer section */
#footer {
 width: 960px;
 height: 20px;	/* make is about the same size as the menubar */
 margin: 0 auto;
 background: #003366;
 color: #ffffff;
}

/* #### Content boxes #### */
/* For all boxes */
.box {
 background: #6699CC;
 border: 2px solid #6699CC;
 /* padding: 2px; */ /* This should make the inner boxes look less sloppy when using padding or margins */
 margin-bottom: 5px; /* make room for the next box */
}

.box-title {
 width: 99%;		/* Temporarily fixes the overhang */
 background: #003366;
 color: #ffffff;
 min-height: 20px;	/* a minimum height of 20px in the box title */
 font-weight: bold;
 /* border: 1px solid #ff0000; */
 margin: 1px;
 padding: 1px;
}

.box-content {
 width: 99%;
 background: #ffffff;
 color: #000000;
 /* border: 1px solid #ff0000; */
 margin: 1px;
 padding: 1px;
}

/* Articles */
/* box-left */
#main .box {
 width: 620px; /* DON'T TOUCH! */
}
#main .box-title {
 font-size: 14pt;
}
#main .box-content {
 font-size: 12pt;
}

/* Widgets */
/* box-right */
#sidebar .box {
 width: 290px; /* DON'T TOUCH! */
}

#sidebar .box-title {
 font-size: 10pt;
}

#sidebar .box-content {
 font-size: 8pt;
}

/* #### Useful stuff #### */
.clearfix:after {
 content: " ";
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0;
}

.clearfix {
 display: inline-block;
}

html[xmlns] .clearfix {
 display: block;
}

* html .clearfix {
 height: 1%;
}

.clear {
 clear: both;
}