/*
	design.css (extends core.css)
	contains all design specific colors, images and text formatting
	
	All style rule attributes in alpha-numeric order starting from 0-9 A-Z
	x = horizontal, y = vertical
	property: trbl, tb rl, t rl b, t r b l;
	
	-- START ALL STYLES --
*/

@import url("core.css");

/* COLORS
-----------------------------------------------------------------------------
	
For colors, refer to the color folders blue, red, brown, etc.
	
*/

/* TABLE OF CONTENTS
-----------------------------------------------------------------------------
	
	1. WRAP
	2. HEADER
		2a. LOGO
		2b. HEADER MENU
	3. MEDIA BAR
		3a. MEDIA BAR MENU/NAVIGATION
	4. MAIN
		4a. LAYOUT - 3 COLUMNS
		4b. LAYOUT - 2 COLUMNS
		4c. LAYOUT - COLUMNLESS
	5. FOOTER
	6. COPYRIGHT
	7. SEARCH
	8. TABLE STYLE DIV
	9. DHTML MODAL STYLE WINDOW
	10. DHTML Tooltip
	
*/


/* 1. WRAP
----------------------------------------------------------------------------- */
#wrap{ 
}
/* This controls the width of the fluid width layouts */
div.fluid
{
width: 90% !important;
}
/* This controls the width of the fixed width layouts */
div.fixed
{
width: 950px !important;
}
/* Basic Stuff */
br.clear
{
clear: both;
}

/* 2. HEADER
----------------------------------------------------------------------------- */
#header
{
width:100%;
height:150px;
background: #7c0012 url('/images/layout/header_bg.png');
}
#header_inner
{
position: relative;
width: 950px;
height:150px;
margin: 0 auto;
background: #7c0012 url('/images/layout/header_inner_bg.png') repeat-x;/**/
}

/* 2a. HEADER LOGO
----------------------------------------------------------------------------- */
#logo
{
position: absolute;
top:1em;
left:1em;
}
#logo img
{
display: inline;
}
/* 2b. HEADER CLOCK
----------------------------------------------------------------------------- */
#time{
position: absolute;
top:.2em;
right: 16.5em;
  text-align: right;
  font: .8em verdana, helvetica, arial, sans-serif;
  color:#FFFFFF;
}
/* 2b. HEADER SLOGAN
----------------------------------------------------------------------------- */
#slogan
{
position: absolute;
left:1em;
bottom: 0.1em;
left:1em;
}
#slogan h1
{
display: inline;
color: #ffffff;
font-size: 2.6em;
}

#slogan h2
{
display: inline;
padding-left: 0.5em;
color: #E5CCD0;
font-size: 1.8em;
}
/* 2c. HEADER MENU
----------------------------------------------------------------------------- */
#menu
{
position: absolute;
right: 0em;
bottom: 0em;
}

#menu ul
{
list-style: none;
}

#menu li
{
float: left;
}
#menu li a
{
margin-left: 0.5em;
display: block;
padding: 0.8em 1em 0.7em 1em;
background: #fff url('/images/tabmenu/n4.gif') repeat-x;
border: solid 1px #fff;
color: #616161;
font-weight: bold;
font-size: 1.0em;
text-transform: lowercase;
text-decoration: none;
}
#menu li a.active
{
background: #CA2F2F url('/images/tabmenu/n3_red.gif') repeat-x;
color: #fff;
border: solid 1px #A94B4B;
}
#menu li a:hover
{
background: #CA2F2F url('/images/tabmenu/n3_red.gif') repeat-x;
color: #fff;
border: solid 1px #A94B4B;
}

/* 3. MEDIA BAR
----------------------------------------------------------------------------- */

#media
{
	width:100%;
	position: relative;
	background-color: #999999;
	background-image: url('/images/layout/media_bg.png');
	background-repeat: repeat-x;
	background-position: 0px 1px;
	padding-bottom:1px;
}

#media_inner
{
	position: relative;
	width: 930px;
	height:210px;
	margin: 0 auto;
	border: solid 1px #fff;
	border-top-style:none;
	padding: 9px;
	background-color: #ffffff;
	background-image: url('/images/layout/media_inner_bg.gif');
	background-repeat: repeat-x;
	background-position: 1px bottom;
}

#tabcontainer{
	border:1px solid gray;
	background-color:#CCCCCC;
	width:920px;
	height:202px;
	text-align: justify; /*set to left, center, or right to align the menu as desired*/
	margin: 0 auto;
	overflow:auto;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}

/* 3a. MEDIA BAR MENU/NAVIGATION
----------------------------------------------------------------------------- */
#navigation_container
{
	/*position: relative;*/
	width: 948px;
	height:30px;
	margin: 0 auto;
	border: solid 1px #fff;
	border-top-style:none;
	background: #414141; /*background of menu items (default state)*/
}
.ddsmoothmenu{
font: bold 12px Verdana;
/*background: #ffff00; background of menu bar (default state)*/
width: 948px;
float:left;

}

.ddsmoothmenu ul{
z-index:3;
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
color: white;
background: #414141; /*background of menu items (default state)*/
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}

.ddsmoothmenu ul li a:hover{
background: #7c0012; /*background of menu items during onmouseover (hover state)*/
color: white;
}
	
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}


/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

/* ######### CSS for shadow added to sub menus  ######### */

.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}

.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
/*opacity: 0.8;*/
}

/* 3b. STYLES SELECT
----------------------------------------------------------------------------- */
#styles_container{
padding: 7px 10px;
width: 950px;
margin: 0 auto;
}
#styles_container span{
font-weight: bold;
}
#styles_container h4
{
font-size: 1.2em;
padding-bottom: 0.175em;
margin-bottom: 0.5em;
margin-top: 0.175em;
color:#FFFFFF;
}
.box_red{
width:16px; 
height:16px; 
background:url('/images/icons/red_on.gif') center center no-repeat;
}
.box_blue{
width:16px; 
height:16px; 
background:url('/images/icons/blue.gif') center center no-repeat;
}
.box_green{
width:16px; 
height:16px; 
background:url('/images/icons/green.gif') center center no-repeat;
}
.box_magenta{
width:16px; 
height:16px; 
background:url('/images/icons/magenta.gif') center center no-repeat;
}
.box_brown{
width:16px; 
height:16px; 
background:url('/images/icons/brown.gif') center center no-repeat;
}

/* 4. MAIN
----------------------------------------------------------------------------- */

#main
{
background: #ffffff url('/images/layout/main_bg.gif') 0px 1px repeat-x;/**/
}

#main_inner p
{
text-align: justify;
margin-bottom: 2.0em;
}

#main_inner ul
{
margin-bottom: 2.0em;/**/
}

#main_inner
{
/*position: relative;*/
width: 950px;
margin: 0 auto;
padding-top: 2.5em;
}

#main_inner h3,h4
{
border-bottom: dotted 1px #E1E1E1;
/*position: relative;*/
}

#main_inner h3
{
font-size: 2.1em;
padding-bottom: 0.1em;
margin-bottom: 0.8em;
}

#main_inner h4
{
font-size: 1.2em;
padding-bottom: 0.175em;
margin-bottom: 1.4em;
margin-top: 0.95em;
}

#main_inner .post
{
position: relative;
}
ul.left-links
{
	width:145px;
	left: 0px;
	position:relative;
	float:left;
}
ul.right-links
{
	left:5px;
	width:145px;
	position:relative;
	float:left;
}
#main_inner .post h3
{
position: relative;
font-size: 1.7em;
/*padding-bottom: 1.2em;*/
}

#main_inner .post ul.post_info
{
list-style: none;
position: absolute;
top: 3em;
font-size: 0.8em;
}

#main_inner .post ul.post_info li
{
background-position: 0em 0.2em;
background-repeat: no-repeat;
display: inline;
padding-left: 18px;
}

#main_inner .post ul.post_info li.date
{
background-image: url('/images/icons/n5.gif');
}

#main_inner .post ul.post_info li.date_noicon
{

}
#main_inner .post ul.post_info li.comments
{
background-image: url('/images/icons/n6.gif');
margin-left: 1.1em;
}
#main_inner .post ul.post_info li.comments_noicon
{

}
#main_inner .post .totop
{
list-style: none;
/*position: absolute;
bottom: 0em;
right:0em;*/
clear:left;
float:right;
font-size: 1em;
margin-top:20px;
margin-bottom:20px;
}
#main_inner .post .totop
{
background-position: 0em 0.2em;
background-repeat: no-repeat;
display:inline-block;
padding-left: 20px;
}
#main_inner .post .totop
{
background-image: url('/images/icons/icon_top.png');
margin-left: 1.2em;
}


#main_inner .post .toprev
{
list-style: none;
/*position: absolute;
bottom: 0em;
right:0em;*/
clear:left;
float:right;
font-size: 1em;
margin-top:20px;
margin-bottom:20px;
}
#main_inner .post .toprev
{
background-position: 0em 0.2em;
background-repeat: no-repeat;
display:inline-block;
padding-left: 20px;
}
#main_inner .post .toprev
{
background-image: url('/images/icons/icon_back.png');
margin-left: 1.2em;
}


/* 4a. LAYOUT - 3 COLUMNS
----------------------------------------------------------------------------- */
	/* Primary content */
	
	#primaryContent_3columns
	{
	/*position: relative;*/
	margin-right: 34em;
	}
	
	#columnA_3columns
	{
	/*position: relative;*/
	float: left;
	width: 100%;
	margin-right: -34em;
	padding-right: 2em;
	}
	
	/* Secondary Content */
	
	#secondaryContent_3columns
	{
	float: right;
	}
	
	#columnB_3columns
	{
	width: 15.0em;
	float: left;
	padding: 0em 2em 0.5em 2em;
	border-left: dotted 1px #E1E1E1;
	}
	
	#columnC_3columns
	{
	width: 11.0em;
	float: left;
	padding: 0em 0em 0.5em 2em;
	border-left: dotted 1px #E1E1E1;
	}
	
/* 4b. LAYOUT - 2 COLUMNS
----------------------------------------------------------------------------- */	
	/* Primary content */
	
	#primaryContent_2columns
	{
	position: relative;
	margin-right: 17em;
	}
	
	#columnA_2columns
	{
	position: relative;
	float: left;
	width: 100%;
	margin-right: -17em;
	padding-right: 2em;
	}	
	/* Secondary Content */	
	#secondaryContent_2columns
	{
	float: right;
	}	
	#columnC_2columns
	{
	width: 13.0em;
	float: left;
	padding: 0em 0em 0.5em 2em;
	border-left: dotted 1px #E1E1E1;
	}
/* 4c. LAYOUT - COLUMNLESS
----------------------------------------------------------------------------- */
	/* Primary content */	
	#primaryContent_columnless
	{
	position: relative;
	}	
	#columnA_columnless
	{
	position: relative;
	width: 100%;
	}	
	
/* 4a. LAYOUT - 3 COLUMNS HOME PAGE
----------------------------------------------------------------------------- */
	/* Primary content */
	
	#primaryContent_3columns_home
	{
	/*position: relative;*/
	margin-right: 655px;
	}
	
	#columnA_3columns_home
	{
	/*position: relative;*/
	float: left;
	width: 100%;
	margin-right: -655px;
	padding-right: 15px;
	/*background:#CCCC00;*/
	}
	
	/* Secondary Content */
	
	#secondaryContent_3columns_home
	{
	float: right;
	}
	
	#columnB_3columns_home
	{
	width: 297px;
	float: left;
	padding: 0em 15px 0.5em 15px;
	border-left: dotted 1px #E1E1E1;
	/*background:#0033CC;*/
	}
	
	#columnC_3columns_home
	{
	width: 297px;
	float: left;
	padding: 0em 0em 0.5em 15px;
	border-left: dotted 1px #E1E1E1;
	/*background:#CC0000;*/
	}
	

/* 5. FOOTER
----------------------------------------------------------------------------- */

#footerWrap {
	margin:0 auto;
	background: #7c0012 url('/images/layout/footer_bg.png') repeat-x;/**/
	text-align:center;
	color: #FFFFFF;
	clear:both;
}
#footer {
	margin:0 auto;
	width:655px;
	padding:5px 0 5px 0;
	/*background-color:#FFFF33;*/
}
#footerAddress {
	clear: both;
	padding:5px 0 5px 0;
	height: 23px;
}
#footer .footerPost{
	font-size:91%;
	padding-left:10px;
}
#siteLinks {
	padding:10px;
}

#siteLinks dl {
	width:138px;
	float:left;
	margin:0 10px 15px 10px;
}

#siteLinks dt {
	display:block;
	padding:0 0 4px;
	margin:15px 0 5px;
	font:132% georgia;
	border-bottom:2px solid #999;
	color:#ccc;
}

#siteLinks dl a {
	display:block;
	background:url('/images/icons/dots.gif') bottom left repeat-x;
	font-size:91%;
	padding:3px 0 4px;
	color:#CCCCCC;
}

#siteLinks dd.last a {
	background:transparent;
}
		
		
/* 6. COPYRIGHT
----------------------------------------------------------------------------- */

#copyright{
			width:100%;
			padding:4px 0;
			background: #414141 url('/images/layout/footer_copyright_bg.png') repeat-x;
			border-top:1px solid #000;
			text-align:center;
			z-index: 0;
		}
#copyright_content{
			margin:0 auto;
position:relative;
}
.footerCopyright {
			clear:both;
			font-size:91%;
			height:23px;
			color:#ccc;
		}

.footerCopyright li {
			background:url('/images/icons/pipe.gif') no-repeat 100% 50%;
			float:left;
			height:17px;
			padding:3px 7px 3px 0;
			margin:0 6px 0 0;
		}
		
.footerCopyright li a{
			color:#ffffff;
}

.footerCopyright li.first {
			padding-left:28px;
			padding-right:0;
			background:url('/images/layout/footer-logo.png') 0 0 no-repeat;
		}

.footerCopyright li.last {
			margin-right:1px;
			background:none;
		}



/* 7. SEARCH
----------------------------------------------------------------------------- */

input.button
{
background: #CA2F2F url('red/images_red/n3.gif') repeat-x;
color: #fff;
border: solid 1px #A94B4B;
font-weight: bold;
text-transform: lowercase;
font-size: 0.8em;
height: 2.0em;
/*width:3em;*/
}

input.text
{
border: solid 1px #F1F1F1;
font-size: 1.0em;
padding: 0.25em 0.25em 0.25em 0.25em;
/*height: 2.0em;
width:12em;*/
}

#search
{
position: relative;
width: 100%;
margin-bottom: 2.0em;
}

#search input.text
{
position: absolute;
top: 0em;
left: 0em;
width: 9.5em;
}

#search input.button
{
position: absolute;
top: 0em;
right: 0em;
min-width: 2.0em;
max-width: 2.5em;
}

/* 8. TABLE STYLE DIV
----------------------------------------------------------------------------- */
.tableholder {
	text-align:left;
	clear:both;
}
/*note do the padding inline style on the page (different size tables different divs)*/
.tableheadingsholder{
	display:inline-block;
	border:solid #CC9999 1px;
	border-bottom:none;
margin:0px auto 0px auto;
text-align:left;
background-color:#666666;/**/
color:#FFFFFF;
font-weight:bold;
font-size:120%;
padding:3px 0px 3px 5px;
}
.tableoutsideborder
{
	display:inline-block;
	border:solid #CC9999 1px;
	padding:10px;
margin:0px auto 0px auto;
text-align:left;
}
.tablefootersholder{
	display:inline-block;
	border:solid #CC9999 1px;
	border-top:none;
margin:0px auto 0px auto;
text-align:left;
background-color:#C4C8CE;/**/
color:#FFFFFF;
font-weight:bold;
font-size:120%;
padding:3px 0px 3px 5px;
}
.tableheader {
	line-height:25px;
	/*padding-bottom:15px;*/
font-weight:bold;
}
.tablefirstcolumn {
	/*display:block;*/
float:left;
clear:left;
}
.tablecolumn {
	/*display:block;*/
float:left;
}
.tablelastcolumn_left {
	/*display:block;*/
float:left;
}
.tablelastcolumn_right {
	/*display:block;*/
float:right;
}

/* 9. DHTML MODAL STYLE WINDOW
----------------------------------------------------------------------------- */
/*THESE CAME IN DHTMLWINDOW.CSS*/
.dhtmlwindow{
position: absolute;
border: 5px solid #666666;
visibility: hidden;
background-color: white;
}
.drag-handle{ /*CSS for Drag Handle*/
	padding: 1px;
	text-indent: 3px;
	background-color: #666666;
	color: #FFFFFF;
	font-size: 1em;
	font-weight:bold;
	cursor: move;
	overflow: hidden;
	width: auto;
	/*opacity: 1;*/
}
.drag-handle .drag-controls{ /*CSS for controls (min, close etc) within Drag Handle*/
position: absolute;
right: -5px;
top: -23px;
cursor: pointer;
}
.drag-contentarea{ /*CSS for Content Display Area div*/
border-top: 1px solid #cccccc;
background-color: white;
height: 150px;
padding: 2px;
overflow: auto;
}
.drag-statusarea{ /*CSS for Status Bar div (includes resizearea)*/
border-top: 1px solid #666666;
background-color: #F8F8F8;
height: 13px; /*height of resize image*/
}
.drag-resizearea{ /*CSS for Resize Area itself*/
float: right;
width: 13px; /*width of resize image*/
height: 13px; /*height of resize image*/
cursor:nw-resize;
font-size: 0;
}
/*THESE CAME IN MODAL.CSS*/
#interVeil{ /*CSS for veil that covers entire page while modal window is visible*/
/*position: absolute;
background: black url('/images/blackdot.png');
width: 10px;
left: 0;
top: 0;
z-index: 101;
visibility: hidden;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=80);  /*ie hacks
opacity: 0.8;*/
 display: none;
 position: absolute;
top: 0%;
left: 0%;
 width: 100%;
height: 100%;
background-color: black;
 z-index:101;
/* -moz-opacity: 0.8;
 opacity:.80;
 filter: alpha(opacity=80);*/

}

/* 10. DHTML Tooltip
----------------------------------------------------------------------------- */

#dhtmltooltip{
position: absolute;
width: 150px;
border: 2px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}