/*  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 */
table {
	width: 95%;
}
td {
	vertical-align: top;
}
.smap {
	width: 33%;
	padding: 5px;
}
a{
text-decoration:none;
}
/* keeps border off of image link*/
a img{
border:0;
}
a:link{
color: 	#C71585;
font-family: sans-serif;

}
a:visited{
color:#102561;
font-family: sans-serif;

}
a:hover,a:active{
color:#4169e1;
font-family: sans-serif;

text-decoration:underline;
}
/* blockquote element is used for long quotes,citations,included content from other sources,or special stories,etc.*/
blockquote{
border:1px dotted silver;
padding:.5em;
background: #ececfb;
color:#0000ff;
font-family:, sans-serif;

}
/* 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: sans-serif;

}
h2{
color:#0c0c0c;
font-variant:small-caps;
font-family: sans-serif;
letter-spacing:.15em;
}
h3{
color:#193b9e;
font-variant:small-caps;
font-family: sans-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("../images/pgbkhdr.png") #ffffff repeat-x;
color:#000000;
font-family: sans-serif;
font-size: medium;
}
/*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("../images/openfolder.png");
}*/
/* just some styling for preformatted text,or code */
pre{
border:thin groove #000080;
padding:.5em;
background:#b0c4de;
color:#0000ff;
font-weight:bold;
}
.center{
	text-align: center;
}
/*this class just styles a bit of text as blue cursive */
.cursive {
	color: blue;
font-family:  sans-serif;

	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;
margin-left: 2px;
list-style-image:url("../images/folder.png");
list-style-type:square;
vertical-align: bottom;
}
.dirlist .open{
padding-left:2px;
margin-left: 5px;
list-style-image:url("../images/openfolder.png");
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("../images/page.png");
}
.dirlist ul{
line-height:175%;
}
/*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;
font-family: sans-serif;
background: #a8bfdd url("../images/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: #f4f8fb;
font-size:.9em;
text-align:left;
}
/* the sidelinks class styles the links section in the sidebar */
.sidelinks{
background-color: #ffffff;
border:1px solid navy;
border-right:0;
margin-left:1em;
padding-left:6px;
font-size:.9em;
line-height:150%;
}
/* 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;
background:url("../images/bakz.png") repeat-y center top;
height:100%;
}
/* main content div - this is the big box which holds the main text or content of your webpage. It contains additional divs for subcategories and further splitting into columns . It generally contains paragraphs of text with hierarchical titles or subject headers,images,lists,quotations,articles,code examples,and perhaps some dynamically included content via xml/rss/database,web services,etc. */
#content{
background-color: white;
border:0;
/*border-top:1px solid navy;*/
float:left;
margin: 1.5em 4px 1em 10px;
/*bad IE padding: .5em 0 4px 2px;*/
width:560px;
color: 	#C71585;
font-family: sans-serif;
font-style:		italic;
}
/* generic paragraph in main content section */
#content p{
margin: 0 6px 10px 10px;
}
/* footer div - */
#footer{
border-top:2px ridge #000080;
clear:both;
margin:0;
padding:0;
background:navy url("../images/botbk.png") repeat center;
color:	White;
/*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:transparent url("../images/globalz.png") 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("../images/botbk.png") repeat-x center;
text-align:center;
height:34px;
}
#navbar a:hover,#footer a:hover{
background:url("../images/topbk.jpg") repeat-x bottom;
}
/* 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("../images/pgbkhdr.png") repeat-x;
font:76% Arial,Helvetica,sans-serif;
line-height:1.9em;
text-align:justify;
height:100%;
}
/* #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: 2px;
margin-top: 2px;
margin-right: 8px;
/* 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("../images/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("../images/topbk.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{
background:url("../images/botbk.jpg")no-repeat top;
}