/* 2024-01-22. Made a Grand Canyon specific style sheet that includes everything. */


/* 2004-03-17. Created one style sheet to rule them all. */
/* FONTS */
/* text: optima, Mac; Trebuchet MS, PC; helvetica, Linux */
/* heading: lucida, Linux; */
/* Moved essays, yearIntro */
/* If the selector list is not separated by commas, it has entirely different meaning, it specifies contextual selectors.
It affects elements matching last mentioned selector if it is inside elements specified by preceding selectors. */

/* Override IE auto margins by specifying value. */
/* 20040810. Background color. c99 */

/* Override IE auto margins by specifying value. */

/*
The default font size in most browsers is 16px; seems big to me:
Compromised with 14px and 18 line-height
*/
body {
	color: #000; background-color:#c86;
	margin:0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-family: optima, verdana, helvetica, serif;
	font-size: 14px;
	line-height:18px;
}

/* 2004-08-10. Change to Muav Granite for Grand Canyon banner */
#banner {
	/* background-image:url(http://www.zanthan.com/gardens/photos/160/bluebonnets.jpg);
	background-repeat:repeat-x; */
	display:block;
	width: 100%;
	color:#630; background-color:#95c5f6;
	padding-left:72px;
	padding-top:60px;
	border-bottom: 1px solid #630;
}

#banner h1 {
	font-family: Zapfino, "Monotype Corsiva", verdana, Lucida, serif;
	padding-bottom:0;
	margin-bottom:0;
}

span.pagetitle {
	font-size:30px;
	line-height:36px; /* affects leading beneath the font */
	font-weight:normal;
}

span.description {
	padding-left:400px;
	font-size:10px;
	line-height:14px; /* affects leading beneath the font */
	font-weight:normal;
}

/* Horizontal list for site navigation. */
#navbar {
	display:block;
	width: 100%;
	color: #630; background-color: #996;
	padding-left:24px;
	border-bottom: 1px solid #630;
}

/* Don't display element name for id */
/* Setting the margin to 0 got it list to horizontal align */
#navsitelist {
	padding-top:1px;
	padding-bottom:1px;
	margin:0px;
}

/* Horizontal lists are created by displaying items inline. */
/* Set displayinline to remove need for list-style-type set to none. */
/* Override coler with  the darker green 330 because the header background is dark #996 */

#navsitelist li {
	display:inline;
	padding-left:18px;
	font-size:10px;
	line-height:12px;
}
#navsitelist a:link		{color: #330; background-color: transparent;}
#navsitelist a:visited	{color: #330; background-color: transparent;}
#navsitelist a:active	{color: #330; background-color: #ff9;}
#navsitelist a:hover	{color: #330; background-color: #ff9;}


/* 2024-01-22. Added to even up column lengths. */
.flex-container {
    display: flex;
    flex-direction: row;
}

/* 2002-04-11. Decreased width. */
/* 2002-06-06 Add width to correct for problem in Omniweb and IE Windows
	which doesn't calculate width of parent div based on child elements. */

/* 2024-01-22. Copied from gardenlog.css */
#content {
	color:#000; background-color:#fff;
	float:left;
	margin:0px;
	border-left: 80px solid #cc9;
	border-right:1px solid #630;
	padding-left:15px;
	padding-right:3em;
}


/* Contained within div blog */
/* With colored borders, needs margins not padding */
div.blog {
	color:#000; background-color: #fff;
	/* width:340px; */
	width: 100%;
	padding-bottom:10px;
	padding-right:0px;
	margin-right:0px;
	border-bottom:1px solid #630;
	margin-bottom:10px;
	margin-top:15px;
	clear:both;
}

.blog p {margin-top:0ex; margin-bottom:1ex; width:360px;}

span.title {
	color:#630; background-color:transparent;
	font-size:16px;
	font-weight:bold;
	text-transform:uppercase;
}

/*
2024-01-30
All span title with parent of div class side
The problem is that a span is an inline element and needs a block element to force it to the left margin. Solution. Define as block. This also enables me to set a top margin.

*/
div.side span.title {
    display: block;
	color:#630; background-color:transparent;
	font-size:12px;
	font-weight:500;
	text-transform:uppercase;
}


/* MT excerpt box. Often used for photos */
/* Contained within div blog */
div.excerpt {
	color:#333; background-color: #fff;
	width: 324px;
	font-family:verdana, arial, sans-serif;
	font-size:11px;
	line-height:14px;
}


#links {
	color:#000; background-color:#fff;
	/* width: 330px; */
	float:left;
	padding-left:1em;
	padding-right:3em;
	padding-top:15px;
	padding-bottom:24ex;
}

/* 2004-03-17. Moved from essays.css */
div.sidetitle {
	color:#630; background-color:transparent;
	width:24em;
	margin-top:10px;
	padding:2px;
	font-family: "Trebuchet MS", "Lydian MT", Lucida, serif;
	font-size:14px;
	font-weight:normal;
	line-height:12px;
	border-bottom:1px solid #630;
}

/* Contained within div links to create the links column */
/* 2024-01-24. Need the color override here. */
/* 2024-01-24. Interesting. Setting the width in em had an interesting effect. */
div.side {
    width: 24em;
	padding-top: 1ex;
	padding-bottom:10px;
	color:#630; background-color:#fff;
}

.side p {
	font-family:optima, sans-serif;
	font-size: 13px;
	line-height:18px;
	margin-bottom:1em;
}

ul.linkslists {
	list-style-type:square;
	margin:0px;
	padding-left:2em;
}

/* Any list item in a ul with a class of links */
/* 2004-08-10. Added helvetica to Grand Canyon because not picking up on Linux. */
.linkslists li {
	font-family:optima, helvetica, sans-serif;
	font-size: 12px;
	line-height:16px;
}

#footer {
    text-align: center;
    color: #333; background-color:transparent;
    font-size: 7pt; padding-top: 10px;
}

/* 996 looks like cc9 when the font is bold, such as in link lists */
/* 993 a bright green, used with normal fonts on the index pages. */
a {
	color: #330; background-color: transparent;
	font-family:optima, verdana, arial, helvetica, sans-serif;
	text-decoration: none;
}
a:link	{color: #330; background-color: transparent; font-weight:bold;}
a:visited	{color: #330; background-color: transparent; font-weight:bold;}
a:active	{color: #663; background-color: #ff9; font-weight:bold;}
a:hover	{color: #663; background-color: #ff9; font-weight:bold;}



p a:link	{color: #993; background-color: transparent; font-weight: normal; 	border-bottom: dotted 1px #996;
}
p a:visited	{color: #993; background-color: transparent; font-weight: normal; 	border-bottom: dotted 1px #996;
}
p a:active	{color: #663; background-color: #ff9; font-weight: normal; border-bottom: dotted 1px #996;
}
p a:hover	{color: #663; background-color: #ff9; font-weight: normal;border-bottom: dotted 1px #996;
}



/* H1 is the banner heading and controlled by div.banner */
	h1 {color: #630; background-color:transparent; font-size: 115%; margin-bottom:0em; font-weight:normal;}
	h2 {color: #630; background-color:transparent; font-size: 110%; margin-bottom:0em;}
	h3 {color: #630; background-color:transparent; font-size: 100%; margin-bottom:0em;}
	p {margin-top:0em; margin-bottom:0em;}
	p.cont {text-indent:2em;}
/* 2004-03-17. Because the blog is auto-paragraphed and doesn't use class cont, add space between. */

p.dateline {font-size: 12px; color: #630; background-color:#fff; margin-top:0px;}
p.caption {text-align:center; width:80px;}

blockquote {
    font-family: Skia, "Comic Sans MS", sans-serif;
    font-size:11px; line-height:16px;
    color:#630; background-color:transparent;
    text-indent:0px;
}
b, strong {color: #630; background-color:transparent; font-weight:normal;}
pre {font-family: monospace;}
span.strike {text-decoration: line-through;}
img {
    border: 1px solid #630;
    max-width:100%;
    }
  /* Adhere to container width. */