/*  original design by <a href="http://www.openwebdesign.org/search.php?tab=designer&amp;designer=barnacle9">Barnacle9</a> copy and paste this url into your browser to view barnacle9's designs at Open Web Design.org  -  http://www.openwebdesign.org/search.php?tab=designer&amp;designer=barnacle9   it would be appreciated if you left this line in the source code so others can benefit from it */
/* global - elements */
/* generic links - text links within content,etc */
a{
text-decoration:none;
}
/* keeps border off of image link*/
a img{
border:0;
}
a:link{
color:#193b9e;
}
a:visited{
color:#102561;
}
a:hover,a:active{

text-decoration:none;
color:red;
}

.bandlink a:link
{
	color:#333333;
	text-decoration:underline;
	font-weight:700;
}

.bandlink a:hover,a:active
{
	color:#666666;
}

.bandlink a:visited
{
	text-decoration:underline;
	font-weight:700;
}

p{
letter-spacing: normal;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
/* blockquote element is used for long quotes,citations,included content from other sources,or special stories,etc.*/
blockquote{
	border:1px solid #FAB506;
	padding:.5em;
	color:#000000;
}
/* just a style for definition lists */
dd{
font:.95em oblique Arial,Helvetica,sans-serif;
}
dl{
margin-left:0;
}
dt{
font-weight:bold;
}
/* headers */
h1{
color:#000000;
font-family:Georgia,"Times New Roman",Times,serif;
}
h2{
color:#0c0c0c;
font-variant:small-caps;
font-family:Georgia,Times,serif;
}
h3{
color:#193b9e;
font-variant:small-caps;
font-family:Georgia,Times,serif;
letter-spacing:normal;
text-align:left;
}
/*this just defines the web page itself - interpreted with inconsistency by various user agents - useful for adding background,margin definitions to,and a few browser hacks which we will avoid*/
html,body{
margin:0;
padding:0;
background:url(/img/pgbkhdr.png) #FAB506 repeat-x;
color:#000000;
}
/*this was for the open folder image on directories with submenus in the .dirlist, but it apparently is not necessary - the styling in the .dirlist section does this*/
/*li.open{
list-style-image: url(../img/openfolder.png);
}*/
/* just some styling for preformatted text,or code */
pre{
border:thin groove #000000;
padding:.5em;
background:#b0c4de;
color:#0000ff;
font-weight:bold;
}
.center{
	text-align: center;
	margin-right: auto;
	margin-left: auto;
}
/*this class just styles a bit of text as blue cursive */
.cursive {
	color: blue;
	font-family: cursive;
	font-size: 1.15em;
	font-weight: bold;
}

/* the dirlist class is designed to support basic two-level tree-type menus - perfect for sitemaps,main menus with links to individual pages as well as index pages for directories/major topics - the folder image (fc.png) is applied to major sections,best layed out as directories of related topic pages,with a toplevel index page for each major section - the use of the folder image should be logical here*/
.dirlist{
font-size:.98em;
}
.dirlist li{
	padding-left:5px;
	padding-top: 5px;
	margin-left: 2px;
	list-style-image:url(/img/mug.gif);
	list-style-type:square;
	vertical-align: middle;
}
.dirlist .open{
padding-left: 2px;
margin-left: 5px;
list-style-position: outside;
list-style-image:url(/img/mug.gif);
list-style-type:square;
}
/*this sub (pseudo?) class resembles or imitates submenu items used by Andreas in some of his designs - I learned from his examples - the item image is applied to submenu links,most likely to individual topic pages*/
.dirlist li ul li{
padding-left:2px;
/*the negative margins keep the list items from sitting too far to the right - I don't know how well this will work in all browsers*/
margin-left:-20px;
list-style-image:url(/img/mug.gif);
}
.dirlist ul{
line-height:200%;
}
/*this class creates a colored box with contrasting text - useful for content of particular importance or special topics - whatever you wish to have highlighted - if you wish to hilight a lot of text, you may want to get rid of the background image or make a larger one - I am just reusing the top page background*/
.hilite{
border:thin solid #000080;
padding:.5em;
color:#ffffff;
background: #a8bfdd url(/img/pgbkhdr.png) repeat-x;
}
/* see .right below */
.left{
float:left;
margin:3px 6px 4px -8px;
padding:2px;
}
/* this class styles the 'read more' links in the news boxes - it could be used elsewhere as well */
.morelink{
clear:both;
float:right;
margin-right:10px;
margin-top:0;
}
/*class to style individual news items*/
.newsitem{
background-color: white;
border: 1px solid navy;
line-height: 140%;
margin-left: 5px;
margin-right: 5px;
text-align: left;
}
/*generic class for right-aligned elements - perhaps redundant and unnecessary - it was used in earlier xhtml versions of this template- you may wish to remove this*/
.right{
float:right;
margin:3px -8px 4px 6px;
padding:2px;
}
/* sidebar codes - the sidebar class is applied to major sections of the side menu -one for the directorylist,one for news,one for linklists,a shoutbox,a search box or other forms,etc */	
.sidebar{
border:1px solid #aac0dd;
margin-bottom:1.5em;
margin-top:1.25em;
padding-bottom:10px;
background: #FFFBAE;
font-size:.9em;
text-align:left;
}
/* the sidelinks class styles the links section in the sidebar */
.sidelinks{
	background-color: #ffffff;
	border:1px solid navy;
	margin-left:1em;
	margin-right:1em;
	font-size:0.7em;
	line-height:2em;
	text-align: center;
}
/* the splitleft class is applied to left-aligned columns within the main content area - used in conjunction with the splitright class to split the main content column into two equal columns*/
.splitleft{
float:left;
margin-top:1.5em;
width:46%;
}
/* please refer to comment on the splitleft class*/
.splitright{
float:right;
margin-top:1.5em;
width:46%;
}
/*this class is for subtopics which should be indented from main topics*/
.subcat{
margin-left:10px;
}
/* id's */
/* the #container div acts as a sylistic 'box' which extends beyond the fixed-width content areas. It is semantically worthless in this situation.*/
#container{
border:0;
margin:0;
padding:0;
height:100%;
}
/* main content div -  style for 3 column design- center column */
#contentcenter{
border:0;
background-color: #ffffff;
margin: 1.5em 180px 1em 180px;
/* bad IE 
padding: .5em 2px 2px 2px;*/
width:400px;
}
/* generic paragraph in main content section */
#contentcenter p{
margin: 0 0 10px 10px;
}
/* footer div - */
#footer{
border-top:2px ridge #000080;
clear:both;
margin:0;
padding:0;
background:navy url(/img/botbk.png) repeat-x center;
color:#000000;
height:40px;
}
/* left-aligned span in footer -similar to  */
#footer .lt{
float:left;
margin-left:10px;
margin-top:0;
background:transparent;
}
/* right-aligned span in footer */
#footer .rt{
float:right;
margin-right:10px;
margin-top:0;
background:transparent;
}
/* a paragraph within the footer div - marginally useful,with potential to extend footer below its background image - don't put much text here unless you know why you want to and how to deal with it*/
#footer p{
margin:0;
padding:.5em;
}
/* This styles the header tagline,or slogan */
#hdr_tagline{
color:#0000ff;
font: small-caps bold 1.5em cursive;
text-align:center;
}
/* header  div - transparent background color to show background image from #container div,but optional small logo image set as background image for header div */
#header{
border:1px solid #e0e0e0;
padding:.25em 1.5em;
background: url(/img/globalz.gif) no-repeat center;
height:140px;
}
/*header h1 is the main title header for the page or perhaps for a group of related pages- it is aligned to the left - may want to change color/alignment depending in length of h1 text and logo background*/
#header h1{
margin-bottom:.25em;
margin-left:.25em;
margin-top:15px;
color:blue;
text-align:left;
}
/* This styles the secondary,or page title which is aligned to the right in the header*/
#header h2{
border:0;
margin-right:.75em;
margin-top:0;
color:#000080;
text-align:right;
}
/*this is like a mirror of #rside,with a left menu and wider right-hand content area*/
#lside{
float:left;
margin-bottom:1em;
margin-left: 6px;
margin-right: 4px;
margin-top:2px;
/* bad IE padding-left: 0;
padding-right: 2px;
padding-top:.25em; */
width:160px;
}
/* this navbar is at top of page,but below the header -good for same-page navigation between subtopics,or  to 'jump' down the page to various sections - note that both this and menu above the header are contained as paragraphs rather than separate divs such as the footer - I can't really say one way is better or worse,but there seems little reason to make entirely separate divs for similar elements in the header region above the main content area . . .*/
#navbar{
border-bottom: 1px solid #f8f8f8;
border-left:1px solid #e0e0e0;
border-right:1px solid #e0e0e0;
border-top:1px groove #000080;
clear:both;
margin:0;
padding-top:.25em;
background: navy url(/img/botbk.png) repeat-x center;
text-align:center;
height:34px;
}
#navbar a:hover,#footer a:hover{
text-transform:uppercase;
text-decoration:none;
color:#FFFF00;
}
/* this is the definition for the #page div,which serves as a container for all divs which have actual content- essentially positions us centered with a page width known to display well at 800x600 resolution. It is not perhaps the ideal semantic design,particularly since we have an additional #container div which serves simply as a box which can define style elements beyond the #page div's 768 pixel width - this is done for the benefit of those who are viewing with larger resolutions -it is for stylistic purposes,and is not generally intended to contain content(although it would be possible to do so if desired*/
#page{
border:1px solid #000080;
/*border-top:0;*/
margin:0 auto;
padding:0;
width:768px;
background:#ffffff url(/img/pgbkhdr.png) repeat-x;
font:76% Arial,Helvetica,sans-serif;
line-height:1.9em;
text-align:justify;
height:100%;
}
#page_img{
float:left;
margin: 4px;
}

/* #rside is used in the default xhtml layout and defined stylistically here as the right side column which serves as  menu,news,links,rss feeds,whatever in the two-column right menu layout. For a left-aligned menu 2 col layout,the div id could easily be switched from #rside to #lside.  Perhaps we will also allow for both side menus plus a now narrower center aisle for content*/
#rside{
background-color: transparent;
float:right;
margin-left: 4px;
margin-top: 2px;
margin-right: 6px;
/* bad IE padding-right: 0;
padding-left: 2px;
padding-top:.25em; */
width:160px;
}
/* these are the menu and news topic headers,etc. in the sidebars*/ 
#rside h2,#lside h2{
border-bottom:1px solid #000080;
border-left: 1px solid navy;
border-right: 1px solid navy;
border-top:1px solid #000000;
padding:2px;
color:#ffffff;
background: navy url(/img/topbk.jpg) center;
font-size:1.2em;
text-align:center;
margin-top: 0;
}
#rside h3,#lside h3{
border-bottom: 1px solid navy;
border-top: 1px solid navy;
background-color: white;
color:#0d0e3b;
font-size:1.15em;
text-align:center;
}
/* paragraphs within the side columns - probably not the best way of doing this */
#rside p,#lside p{
border:0;
margin:8px;
padding:.5em;
}
/* the menu at the very top of page -above the header - this is ideal for search,admin-related links,site maps or special pages,etc - user/site specific area,but use it for whatever you wish -intended for only a few short links */
#topnav{
border-bottom:1px outset #000080;
border-left:1px solid #e0e0e0;
border-right:1px solid #e0e0e0;
border-top:1px outset #000080;
margin:0;
padding-left:10px;
background: navy url(/img/topbk_flipped.jpg) repeat-x center;
color:#c0c0c0;
height:32px;
}
/* for left-aligned spans within #topnav paragraph*/
#topnav .lt{
float:left;
margin-bottom:0;
margin-left:10px;
margin-top:6px;
background:transparent;
}
/* for right-aligned spans in the uppermost menu bar*/
#topnav .rt{
float:right;
margin-bottom:0;
margin-right:10px;
margin-top:6px;
background:transparent;
}
/*style links in the blue bar sections- #topnav,#navbar,#footer - default of blue doesn't work well over blue background - could also define css rollover image/background color swapping*/
#topnav a,#navbar a,#footer a{
padding:3px .25em;
color:#ffffff;
}
#topnav a:hover{
text-transform:uppercase;
text-decoration:none;
color:#FFFF00;
}



.hidden {
	display: none;
}