/*  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{
color:#4169e1;
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:cursive;
}
/* just a style for definition lists */
dd{
font:1.00em 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-family:Georgia,"Times New Roman",Times,serif;
letter-spacing:.15em;
}
h3{
color:#193b9e;
font-variant: normal;
font-family:Georgia,Times,serif;
letter-spacing:normal;
text-align:left;
font-size: 1.5em;
}
/*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-top: 0px;
padding:0;
/*background: #03729C;*/
background: #252525 url(img/bg2.gif) repeat-x top;
color:#4F4F4F;
}
/*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 #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: #142f7a;
	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:1.1em;
}
.dirlist li{
padding-left: 0;
margin-left: 0;
list-style-image:url(img/folder.png);
list-style-type:square;
list-style-position: outside;
vertical-align: text-top;
}
.dirlist .open{
padding-left:0;
margin-left: 5px;
list-style-image:url(img/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:0;
/*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/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;
background: #1f4ac5 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 new items*/
.newsitem{
background-color: white;
border: 1px solid navy;
line-height: 140%;
margin-left: 0px;
margin-right: 0px;
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;
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:3px;
font-size:1.2em;
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;
margin-top:0;
padding:0;
background: url(img/background.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: url(btbk.png) repeat-x;*/
border:0;
/*border-top:1px solid navy;*/
float:left;
margin: 1.5em 4px 1em 10px;
/* bad IE 6
padding:.5em 8px 4px;*/
width:560px;
}
/* generic paragraph in main content section */
#content p{
margin:0 6px 10px 10px;
font-size: 1.2em;
}
/* main content div - tentative style for 3 column design- center column */
#contentcenter{
border:0;
margin:0 180px 1em 180px;
padding:0 8px 4px 8px;
width:380px;
}
/* main content div - tentative style for alternate 2 column design- right-aligned main content column*/
#contentright{
border:0;
float:right;
margin:0 12px 1em 5px;
padding:0 0 4px 8px;
width:540px;
}
/* footer div - */
#footer{

clear:both;
margin:0;
padding:0;
color:#000000;
height:50px;
}
#footer a{
	color: #1a3fa9;
}

/* left-aligned span in footer -similar to  */
#footer .lt{
float:left;
margin-left:10px;
margin-top:0;
}
/* right-aligned span in footer */
#footer .rt{
float:right;
margin-right:10px;
margin-top:0;
}
/* 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{
border:0;
margin-right:1.75em;
color: blue;
float: right;
font-variant: small-caps;
font-size: 1.75em;
}
/* 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:0px solid #002448;
background: url(img/MoonOcean4.jpg) no-repeat center;
height:156px;
width:760px;
}
/*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-top:30px;
color: #2f4f4f;
text-align:center;
margin-bottom: 30px;
}
/* This styles the secondary,or page title which is aligned to the right in the header*/
#header h2{
border:0;
clear: both;
color: silver;
text-align:center;
margin-top: 30px;
margin-bottom: .25em;
}
#header h3{
	color: silver;
	font-size: 1.5em;
	letter-spacing: .15em;
	/*line-height: 150%;*/
	margin-top: 1em;
	text-align: center;
	
}
#header a{
	color: #f5f5f5;
	text-decoration: none;
	padding: .25em;
}
#header a:hover{
	background: #2a4d6b url(img/btbk.png) repeat-x center;
}
/*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 6
padding-top:.5em;*/
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-color: transparent;
text-align:center;
height:34px;
}
#navbar a:hover,#footer a:hover{
background:url(img/topbk.png) 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 transparent;
border-top:0;
margin: 1px auto;
padding:0;
width:758px;
background: transparent;
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-top: 2px;
margin-left:2px;
margin-right:8px;
/* bad IE6 
padding-right:6px;
padding-top:.5em;*/
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: #223e57 url(img/pgbkhdr2.png) repeat-x top;
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;
background-color: transparent;
color:#c0c0c0;
height:5px;
text-align: center;
padding-top: 2px;
}
/* for left-aligned spans within #topnav paragraph*/
#topnav .lt{
float:left;
margin-bottom:0;
margin-left:2px;
margin-top:4px;
background: #708090 url(img/btbk.png) repeat-x center;
width: 25%;
border: thin solid silver;
padding-left: .25em;
padding-bottom: 0;
padding-top: 0;
font-size: .95em;
}
/* for right-aligned spans in the uppermost menu bar*/
#topnav .rt{
float:right;
margin-bottom:0;
margin-right:2px;
margin-top:4px;
background: #708090 url(img/btbk.png) repeat-x center;
padding-right:.25em;
width: 25%;
border: thin solid silver;
padding-bottom: 0;
padding-top: 0;
text-align: center;
font-size: .95em;
}
#topnav .cnt {
	background-color: #000000;
	border: thin groove navy;
	color: aqua;
	display: inline;
	text-align: center;
	/*margin-left: 30%;
	margin-right: 30%;
	width: 30%;*/
}
/*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{
padding: 2px .25em;
color: silver;
}
#topnav a:hover{
background: navy url(img/btbk.png)repeat-x top;
border: thin solid #f5f5f5;
text-decoration: underline;
color: #f5f5f5;
}