/* this style sheet is for the template only. You can still use template styles for content or vise versa, but it might get complicated */
#block_1
    {
    float:left;
    width:176px;
    padding-top: 30px;
    background:#1163e7;
    color:#FFFFFF;
    z-index:2;
    }

#block_2
    {
    float:left;
    width:584px;
    background-color:#ffffff;
    }

/* Start Mac IE5 filter \*/
#block_1, #block_2
    {
    padding-bottom:32767px !important;
    margin-bottom:-32767px !important; 
    }
@media all and (min-width:0px) {
#block_1, #block_2
    {
    padding-bottom:0 !important;
    margin-bottom:0 !important; 
    }
#block_1:before, #block_2:before
    {
    content:'[DO NOT LEAVE IT IS NOT REAL]';
    display:block;
    background:inherit;
    padding-top:32767px !important;
    margin-bottom:-32767px !important;
    height:0;
    }
}
/* End Mac IE5 filter */
/* IE Win can be a bit out - you might need to adjust  
bottom value by -1px or as required */
.verticalalign
    {
    position:absolute;
    bottom:0;
    }
#block_1 .verticalalign
    {
    width:175px;
    }
#block_2 .verticalalign
    {
    width:560px;
    }
/* hack for Opera 7+ */
@media all and (min-width:0px){
.verticalalign
    {
    width:100% !important;
    }
/* But Opera 9 does it right, so CSS3 hax to the max */
div[id^="wrapper"] #block_1 .verticalalign
    {
    width:175px !important;
    }
div[id^="wrapper"] #block_2 .verticalalign
    {
    width:560px !important;
    }
}
/* hack for IEs of all persuasions */
* html .verticalalign
    {
    width:100% !important;
    }
.verticalalign p
    {
    position:absolute;
    bottom:0;
    right:0;
    margin:0;
    padding:0;
    background:#996666;
    }

/* this centers the whole thing in the middle of the page ... nearly
#framer {
    margin: 5% 5% 5% 5%;
}
*/

#wrapper {
    margin-left: 10%;
    margin-right: 10%;
    width:760px;
    /* width:800px; */
    /* background-color: #ff0000; */
    position:relative;
    overflow:hidden; /* This hides the excess padding in non-IE browsers */
}
/* we need this for IE 5.01 - otherwise the wrapper does not expand to the
necessary height (unless fixed, this problem becomes even more acute 
weirdness as the method is enhanced */
#wrapper
    {
/* Normally a Holly-style hack height:1% would suffice but that causes 
IE 5.01 to completely collapse the wrapper - instead we float it */
    float:left;
/* NB. possibly only IE 5.01 needs to get this float value - otherwise 5.5 sometimes 
(I saw it happen many moons ago) makes the width of wrapper too small 
the float:none with the comment is ignored by 5.01,
5.5 and above see it and carry on about their business
It's probably fine to just remove it, but it's left here 
just in case that many moons ago problem rears its head again */
    float/**/:none;
    }
/* easy clearing */
#wrapper:after
    {
    content:'[DO NOT LEAVE IT IS NOT REAL]'; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
    }
#wrapper
    {
    display:inline-block;
    }
/*\*/
#wrapper
    {
    display:block;
    }
/* end easy clearing */

#header, #footer
/* #footer */
    width:760px;
    {
    /* debug background-color:#999999;*/
    background-color:#000000;
    /* this background-color has stopped working in exploder ... like an hour ago ... , so I added it to the index page and it works */
    border:0px solid #000000;
    }
/* footer can't be inside wrapper without completely frying. So here is some extra TTV stuff */
#footer  {
    margin-left: 10%;
    margin-right: 10%;
    width:760px;
    z-index:1;
}

/* Safari needs this - otherwise the ghost overflow, though painted 
correctly obscures links and form elements that by rights should be above it.
An unintended side-effect is that it cause such elements to vanish in IE 5.01
and 5.5, hence the child selector hack */
* > #footer, * > form, * > #notes, * > .output
    {
    position:relative;
    /* z-index:1000; a little excessive maybe? */
    z-index:10;
    }

/* TTV additions */

form.preview {
    /* page preview form */
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 20px;
    width:760px;
}

td.slogan {
    /* slogan in the header */
    text-align: center;
    font:italic 900 12px arial, sans-serif;
	color:#FFFFFF;
	background-color:#000000;
}

td.spacer {
    /* empty table cell */
	background-color:#000000;
    border-style: none solid
    border-collapse: collapse;
}

table.header {
    /* table for the header stuff at the top of the page */ 
	background-color:#000000;
    border-style: none solid
    border-collapse: collapse;
}

img.top_container {
    /* top containing graphic */
    position: relative;
    float:left;
    border:0px;
    margin:8px -100px 24px 14px;
    z-index:2;
}

img.bottom_container {
    /* bottom containing graphic */
    float:right;
    position:relative;
    border:0px;
    margin:-84px 0px 0px 0px;
    z-index:2;
}

li.content_header {
    /* header describing the content itself */
    position: relative;
    /* margin:50px 0px 8px 34px; */
    /*margin:50px 0px 8px 0px;*/
    z-index:300;
}

ul.content_header {
    /* header describing the content itself */
    list-style-type: none;
    padding: 0;
    margin:50px 0px 8px 74px;
}

/* these are gifs until I can find a way to run the i.e. png replacement script on this file. Or I could include this file inline 
   or I could just include this piece of css inline and leave the rest of the file out. All of that sucks. */
li.nav_header, li.content_header {
    /* header describing the content itself and the nav links*/
    color: #000000;
    font: 900 12px arial, sans-serif;
    list-style-image: url('../images/sphere_small.gif');
}

img.content_bound {
    /* image that bounds content */
    /* it's a border */
    position: relative;
    margin:0px 0px 0px 56px;
    z-index:3;
}

a.nav_header, a.nav_header:hover, a.nav_header:visited {
    /* navigation link */
    color:#000000;
    /*font:900 12px arial, sans-serif;*/
    font:900 12px arial, sans-serif;
    text-decoration:none;
}


hr.link_separator {
    /* separates the main links on the nav bar */
    border:none 0;
    border-top:1px dashed #bbbbbb;/*the border*/
    width:100%;
    height:2px;/*whatever the total width of 
    the border-top and border-bottom equal*/
}

#container {
    /* contains the text */
	border:0px solid #445566;
    margin:auto;
    width:760px;
    /* temporary height
    height:1000px; */
    text-align:left;
    color:#000000;
}

#holder {
    /* unused? */
    height:110px;
}

/*
#logo1 {
    position:absolute;
    left:183px;
    top:8px;
}
*/
#logo1 {
    float:left
}

/* styles for JS dropdowns */
#dropmenudiv {
	position:absolute;
	background-color:#1163e7;
	border:1px solid black;
	border-bottom-width:0;
	font:normal 12px Verdana, arial, sans-serif bold;
	line-height:18px;
	z-index:100;
	/* opacity settings. Not valid css */
	opacity:0.9; 
	-moz-opacity:0.9; 
	-khtml-opacity:0.9; 
	filter:alpha(opacity=90); 
}

#dropmenudiv a {
	width:100%;
	display:block;
	text-indent:3px;
	border-bottom:1px solid black;
	padding:1px 0;
	text-decoration:none;
	font-weight:bold;
    /*color:#88bbff;*/
    color:#ffbf0c;
}

#dropmenudiv a:hover { /*hover background color*/
    background-color:#6699ff;
}

/* end JS dropdowns */

tr.header_row {
    height: 55px;
}

tr.search_row {
    height: 16px;
}

td.search_contain {
    /* DON'T FORGET THAT URL LINKS ARE RELATIVE TO THE STYLESHEET, NOT THE PAGE THAT CONTAINS THEM!! */
    background: url(../images/link_gradient.png);
    height:16px;
    background-repeat:no-repeat;
    text-align: right;
    border:0px solid #000000;
}

form.search {
    margin-bottom:-4px;
}

input.tiny {
    color:#ffffff;
    font-family:'trebuchet ms',helvetica,sans-serif;
    font-size:8pt;
    height: 16px;
    background-color:#999999;
    padding-bottom:0px;
    padding-top:0px;
    margin-top:0px;
    margin-right:0px;
    margin-bottom:3px;
    border-left:0px solid;
    border-top:0px solid;
    border-right:1px solid; border-color:#000000;
    border-bottom:1px solid; border-color:#000000;
}

input.searchfield {
    position:relative;
    top:-6px;
    margin-bottom:-4px;
    margin-right:4px;
    height: 10px;
    width: 60px;
    font: 10px arial, sans-serif;
    border: 1px solid solid border-color:#000000;
}

/* Log in, etc. */
h2.login_message {
    font:900 14px arial, sans-serif;
    margin-left:72px;
    margin-bottom:24px;
    margin-top:24px;
}