/*-- background/margins --*/
/* sets dark background for all page */



body {
	background-image: url("../back_linen.gif");   /*-- background dark image--*/
	margin: 0;
	padding: 0;
	color: #000; /*-- font color --*/
	/*font-family: "Palatino Linotype", "Times New Roman", Times, serif;*/
	font-family: "Times New Roman", Times, serif;
	font-size: 100%;
	line-height: 1.4;
	height: 100%;
}

/* should probably use padding in div boxes rather than this below */


/* eliminated this, will be using padding for list items when I want to.

ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding: 0;
	margin: 0;
}

*/

/* eliminated this, using div-padding

h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* remove top margin for paragraphs */
	padding-right: 15px;
	padding-left: 15px; /* add padding to side of paragraphs & headers */
}

*/

a img { /* remove default blue border on linked images */
	border: none;
}



a:link { 
	color:  #000080;  /* unvisited link, general page */
	text-decoration: underline; 
}



a:visited {                   /* visited link, general page, could specify a color */
	color: #551A8B;
	text-decoration: underline;
}


a:hover, a:active, a:focus { /* for keyboard navigators */
	text-decoration: none;
}

/* special links for schools pages */

td#redlink a:link {color: #C80000;} /* unvisited link, schools name list */
td#redlink a:visited {color: red;} /* visited link, schools name list */
a.redlink a:link {color: #C80000;} /* for special names class */
a.breadcrumb {color: #842B45;} /*unvisited link, profile names tab */
a.breadcrumb {color: #842B45;} /*visited link, profile names tab */
#breadcrumbtrail a:link {color: #842B45;} /*unvisited link, profile names tab */
#breadcrumbtrail a:visited {color: #842B45;} /*visited link, profile names tab */
.profiles_tab a:link {color: #842B45;} /*unvisited link, profile names tab */
.profiles_tab a:visited {color: #842B45;} /*visited link, profile names tab */




/* container of all divs - that is, entire page */

.container {  /* the left margin will be this color, the right margin has its own container with margin */
	/* max-width: 100%;  */
	/*background-image: url("../back_linen.gif");   /*-- background dark image--*/
	background-color: #111;  /*dark black */ /* 333 is lighter gray */  	
	margin: 0 auto; /* the auto value on the sides centers the layout */
}


/*
Explaining widths (important!)
width of logo box = 140px
width of sidebar box = 140px
max-width of white page = 1180px  
width of top bar should be: 140px + 1180px = 1320 or if overhang, + 140px = 1460 
(so hangs evenly on both sides of white page)
so witdh of big header bar should be: 1180px + 140 = 1320
(max-width means it wraps, width stays fixed in line
use max-width whitepage, but use plain width for header bar)
*/

.big_sidebar {  /*big sidebar contains everything on left - icon, buttons, INET logo */
	float: left;
	width: 150px;
	background-color: #111;  	
	padding-bottom: 10px;
}


#het_logo_box {  /* blue box inside red, floats to left */
	height:160px;  /* = 150px width + lower padding */
	width:150px; 
	background-color: #111;  	
	/* background-color:#393430;  /* blackish brown */
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}


.het_logo {     /* trying to center in box, not working */
 
}


#sidebar_navigation_box   /* box to hold navigation buttons togther */
	{  
	width: 150px;  /* as wide as fake header_middle */
	float:left;
	overflow:hidden;
}


/* sidebar nav list */

.nav {
    list-style-type: none; /* remove bullets */
    margin: 0;  /* remove browser default settings of natural indentation of lists */
    padding: 0; /* ditto */
    overflow: hidden;  /* cuts off buttons if they exceed bar boundary */
    background-color: #111;  /* dark grey box */
	margin-bottom: 15px; /* creates space between buttons and any sidebar content below buttons */
}


.nav-item {  								/* appearance styles of buttons*/
  float: left;
  width: 150px;					       	  /* black button width, also width of "navigation" bar, must match width of hovering */
  border-top: 1px solid #111; 			/* borders on buttons */
  border-bottom: 1px solid #000;     /* button separation lines */

}



.nav-item a, nav-item a:visited { /* makes buttons look like buttons even after visited */
  display: block;  /* turn link into button */
 /* color: #f2f2f2; /* grey font */
  color: #B5B5DB; /* silver font */
 /* text-align: center; /* centers text in button - ok for top & foot, not for sidebar*/
 /*   background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); */ /* gives boxes darker color it seems  */
  /*padding: 14px 16px;  /* text padding inside button */
  /*padding: 0.5em; */
  padding: 5px 5px 5px 15px;  /*smaller padding than 0.5em*/
  text-decoration: none; /* remove underline link */
  font-size: 1em;   /* was 1.2em in fly-in, 17px in DW */   
  transition: color 0.2s, background 0.5s;  /*slows transition in moving between buttons */
}

 
.nav-item a:hover, nav-item a:active, nav-item a:focus  { /* changes background and text color for both mouse and keyboard navigators */
    /* background-color: #111; /*black selected box, Change the link color to #111 (black) on hover */  
    /*color: #c74438;  /* changes font color instead of whole box */
 	color: #bb3e62;  /*too red? */ 
	/*#9d3956; 
	/*#842B45; /* marroon */
    background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(75,20,20,0.65) 100%); /* changes color of box with gradient */

}


#inet_logo_box {  /* header row to insert breadcrumbs, yellow box inside green, floats left to black */
    float: left;
    position: relative;
    margin: 10px 15px 15px 10px;
	/* top, right, bottom, left */
}	

/* .inet_logo{   /* not used, use #inet_logo_box instead above
    float: right;
    position: relative;
    margin: 10px 15px 15px 10px;
}*/	


/*content container math:
whitepage math: 1180 + 15px left + 15px right = 1210 total actual width 
sidebar = 150px wide
so total space from left to right = 1360 
*/


/* needed to contain header & whitepage so that in small screens, whitepage doesn't jump below sidebar, and is instead re-centered on it */


.right_margin_container {
	 max-width: 100%;  
	 margin-left:160px;
	background-image: url("../back_linen.gif");   */ /*-- background linen --*/
	/*background-color: #abaaa4;  	/*-- right background dark image--*/
}


.content_container {      /* needed to contain header & whitepage so that in small screens, whitepage doesn't jump below sidebar */ 
	max-width:1210px;  /* max-width (rather than fixed) so whitepage text is adjusted ^& re-centered on it */
	/*background-color: #c99563;  */
/*	float:left; */
	overflow:hidden;  /*prevents scrollbar from developing near footer*/
	}

#big_header {      
	width:1210px;  /* same legth as content container, needed to be fixed width (not max-width) to prevent crumbs & search bar from wrapping each other, keeps top header in line */
	height:60px; 
	background-color: #d6d6d6; 
	/*background-color: #c99563;  */
/*	float:left; */
	overflow: hidden; /* clips headers in smalle windows, prevents header from bringing on scroll bars */
	}

#breadcrumbs_box {
	max-width: 500px;
    float: left;
    position: relative;
    margin: 10px 15px 15px 10px;
	/*background-color: red;	*/
	overflow: hidden;
	

}

#breadcrumbtrail {  /* called in from javascript, with id = breadcrumbtrail, make sure aligns with breadcrumbs above, should adjust margins */
    float: left;
    position: relative;
    margin: 10px 15px 15px 0px;
	/* top right bottom left; I set left to 0px so not too much space with breadcrumbs beginning	*/
	overflow: hidden;
	

}


#search_box {
	max-width: 250px;
    float: left; /* must float left to prevent scroll bars in header */
    position: relative;
    margin: 10px 15px 15px 10px;	
	overflow:hidden;
}


#search_results {    /* irrelevant in this page, as search results generated in search.htm */
	margin: 0;
	padding: 0;	
	background-image: url("../back.gif");
}


/* to style results see https://www.labnol.org/internet/google-custom-search-css/28360/ */


.cse input.gsc-input,input.gsc-input{background-image:none !important} /* gets rid of Google search watermark in search box */


/* whitepage block, floats to align with sidebar & header bar */
/* only padding at bottom included 
padding rules
rule of 4: top, right, bottom, left
rule of 3: top, right & left, bottom
rule of 2: top & bottom, right & left
rule of 1: all four  
whitepage math: 1180 + 15px left + 15px right = 1210 total actual width */

/* WHITEPAGE = major content area */

.whitepage {

	padding: 10px 15px;  /* -- 10px at top & bottom, 15 at left & right */
	max-width: 1180px;    /* -- how far white page extends in full browser, so wraps in small */
			     /* -- use simply "width" to fix length, without wrapping in small */
	float: left;
	background-image: url("../back.gif");   /*-- background light image--*/
	/*margin-left:180px; */
}


.doubleblacklink a, doubleblacklink a:visited { /* ALWAYS blacklnked main pages, e.g. index, alphabet letters */
  color: #000000; /* blacklink */ !important
  text-decoration: underline; /* remove underline link */
}


.blacklink a { /* for blacklnked main pages, e.g. alphabet, essays, thought */
  color: #000000; /* blacklink */ !important
  text-decoration: underline; /* remove underline link */
}

.blacklink a:visited { /* for blacklnked main pages, e.g. alphabet, thought */
  color: #800080; /* purple visited */ !important
  text-decoration: underline; /* remove underline link */
}



#invisibletext { /* keeps background on contents page aligned.  Dirty method until I can figure it out. */
	visibility: hidden;
}
 
 
/* ~~ The footer ~~ */

.footer {
	padding: 10px 0;
	background-image: url("../back_linen.gif");   /*-- background dark image--*/
	/*background: #CCC49F;  - beige color */
	position: relative;/* required for IE6 to clear */
	clear: both; /* forces the .container to understand where the columns end and contain them */
}


 
#footer_whitepage_container { /* footer container aligned perfectly under whitepage size */
	max-width: 1210px;  /*exact length of whitepage + paddings, adjust as browser adjusts */
	height: 180px;
	margin-left:150px; /*width of sidebar, to align directly under whitepage */
	overflow: hidden;
}
 
 

#footer_row_container {  /*box holding icon & navigation, centered right in middle of whitepage container */
	width: 1180px; /* length of white page max-width disappears in chrome & safari! */
	height: 250px;
	margin: 0 auto; /* ensures it stays horizontally centered inside white container */
}


#foot_logo_box {  /* blue box inside red, floats to left */
	height:100px; 
	width:100px; 
	float:left;
	padding: 1em, 1.2em, 1em 15px;
	/* background-color:#393430;  /* blackish brown */
}


#footnav_box {  /*not needed */
	
}


.footnav {
    list-style-type: none; /* remove bullets */
    margin: 0;  /* remove browser default settings */
    padding: 0; /* ditto */
    overflow: hidden;  /* somehow important */
    /*background-color: #333;  /* dark grey box */
	float:left;	
	background:#111; /*black-grey background box */
}


.footnav-item {
  float: left;
  width: 150px;		       	  /* black button width, also width of "navigation" bar, must match width of hovering */  
  border-left: 1px solid #111; 			/* borders on buttons */
  border-right: 1px solid #000; 
  margin-right: 15px; 

}


.footnav-item a {
  display: block;  /* turn link into button */
 /* color: #f2f2f2; /* grey font */

  color: #B5B5DB; /* silver font */
   text-align: center; /* centers text in button */
   padding: 0.5em;  /* thinner boxes than before*/
 /* padding: 14px 16px;  /* text padding inside button */
  text-decoration: none; /* remove underline link */
  font-size: 1.2em;
  /*font-size: 17px;*/   
  transition: color 0.2s, background 0.5s;  /*slows transition in moving between buttons */
}


/* Change the link color to #111 (black) on hover */
.footnav-item a:hover {
    /* background-color: #111; /*black selected box */
    /*color: #c74438;  /* changes font color instead of whole box */
	color: #832843;  /*Heske's pink */ 
	/*#9d3956; 
	/*#842B45; /* marroon */
   /* background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(75,20,20,0.65) 100%); /* changes color of box with gradient */
}

#foot_inet_box {  /* blue box inside red, floats to left */
	height:100px; 
	width:100px; 
	float:left;
	padding:1.2em
	/* background-color:#393430;  /* blackish brown */
}


/* footer navigation bar */


/* footer math 

sidebar = 150px
max-width of white page = 1210 px


*/










/* ~~ miscellaneous float/clear classes ~~ */

.float-right {  /* class to float an element right in your page. Floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}


.float-left { /* class to float an element left in your page. Floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}



.clear-float { /* class to be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

-->