/* stylez for the Teen Homeschool Hang webpages */



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


/* 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-size: 2em;
font-family:Trebuchet MS,"Times New Roman",Times,serif;
}

h2{
color:#0c0c0c;
font-size: 1.5em;
font-family:Trebuchet MS,Times,serif;
}

h3{
color:#193b9e;
font-variant:small-caps;
font-family:Georgia,Times,serif;
letter-spacing:normal;
text-align:left;
}


/* defines the web page itself */
html,body{
margin:0;
padding:0;
background:url(img/pgbkhdr.png) #ffffff repeat-x;
color:#000000;
}


/* 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 styles a bit of text as blue cursive */
.cursive {
	color: blue;
	font-family: cursive;
	font-size: 1.15em;
	font-weight: bold;
}



/*this class creates a colored box with contrasting text - useful for content of particular importance or special topics */
.hilite{
font-family: Trebuchet MS, sans-serif;
font-size: .9em;
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 */
.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 */
.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:1px;
margin-left:1em;
margin-right:1em;
padding-left:4px;
font-size:.8em;
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:1px;
margin-right:1px;
}


/* 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(img/bakz.png) repeat-y center top;
height:100%;
}


/* main content div - this is the big box which holds the main text. It contains additional divs for subcategories and further splitting into columns . */
#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;
}


/* 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(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 */
#footer p{
margin:0;
padding:.5em;
}



/* 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(img/logonew.jpg) 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 */
#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 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{
background:url(img/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:#000000 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(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.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(img/botbk.jpg)no-repeat top;
}