/* CSS for Brian MacMillan's site. Copyright Brian MacMillan All Rights Reserved. */


/* html elements */
body
{
	font-size: 16px;  
	line-height: 23px;
	font-family: Palatino,Times,serif;
	font-style: normal;
	text-align: justify;
	margin:0;
	padding:0;
}
/* 
Make selection color the same as the background color 
so that selecting does not interfere with other interface elements.
This needs to be altered to work with individual elements.
*/
/* Safari first, Firefox second */
/*
 ::selection {
	background: white; 
	}
::-moz-selection {
	background: white; 
}
*/

p.first-paragraph:first-letter
{
	font-size: 4em;
	line-height:.75em;	
	margin-right: -0px;
	font-family: Optima,Palatino,sans-serif;
}

/* end html elements */

/* misc */
/* the quote class is read from story */
.title
{
	font-family: Optima,Helvetica,sans-serif;
}
.page-title{font-size:14pt;font-weight:normal;text-align:center}
.column-title{font-size:30pt;font-weight:normal;text-align:left;font-family:Verdana}
.column-title:first-letter{font-size:30pt}

.div-right{float:right} /*align container div right*/

.quote
{
	font-style:italic !important;
}


/* temp hack until cover page methodology sorted out */
.opening-poem
{
	font-style:italic !important;	
	margin-left: 25px;
	margin-right: 10px;
}
.opening-poem-first-paragraph{margin-top:30px;} /*temp hack*/
.opening-poem-last-paragraph{margin-bottom:30px;} /*temp hack*/

.body-text{margin-bottom:0}

.small-break, .fin
{
	text-align: center;
}
.submit-button
{
	padding-left: 10px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
}

#no-javascript
{
	position: absolute;
	color:#222;
	margin-top: 120px;
	margin-left: 100px;
	z-index: 555;
}

/* the styles below are laid out according to a standard
   format - main, header, navbar, sidebar, content, foooter
*/
/* main element */

#main
{
	position: absolute;
	top:0;
	left:0;
	padding: 0px;
	height: 100%;
	width: 98%;
	min-height: 500px;
	min-width: 760px;
}

#main-inner
{
	border: 0px dotted red;
	top: 10px;
	left: 20px;
	height:100%;
	position: relative;
}

#main-elements
{
	position: absolute;
	top: 2%;
	height: 90%;
	width: 100%;
	border: 0px dotted black;
}

/*** end of main **/

/* Only display if javascript is on */
/*
#next, #previous, #top, #bottom
{
	display:none;
	border: 1px solidid red;
}
*/
/************** TABLE OF CONTENTS and TOOLTIPS ****************/
.tocToolTip #tooltipTitle{
	font: 12px Arial, Helvetica, sans-serif;
	font-weight:bold;
}
.tocToolTip{
	background-color: transparent;
	border: 0px dotted gray;
	margin-top: 10px;
	margin-left: -50px;
	color:#536445;
}
.navigation-arrow{cursor:default}
.navigation-arrow:hover{cursor:pointer}

#toc-navbar
{
	left: 15%; 
	top: 98%;
	position: absolute;
	border: 1px solid white;
	padding-left:0px;
	padding-top:0px;
	text-align: left;
	width: 220px;
	height: 35px;
	display: block;
	z-index: 101;
	color: #666;
	font-family: arial, helvetica, sans-serif;
	font-size: 13px;
	line-height: 18px;
	text-align: left
}
#toc-navbar-inner{margin-top:0px}
/*#toc-nav0, #toc-nav1,#toc-nav2,#toc-nav3,#toc-nav4,#toc-nav5 /* NB should be class */
.toc-nav
{
	display: inline;
}

/* other values are set in tocNavbarInit() */
/*#toc-img0,#toc-img1,#toc-img2,#toc-img3,#toc-img4,#toc-img5*/
.toc-nav-icon
{
	height: 20px;
	margin-right:5px;
}
/* ******** END TOC ***************/

/* **********DRAGGABLE / DROPPABLE **********/
/* properties of the draggable class 
   css3 spec. not*/
/* part of drag / drop code from jquery */
.dropable-active {
	opacity: 1.0;
}
.dropable-hover {
	outline: 1px dotted black;
}
/********** END DRAGGABLE/DROPPABLE *******/

/* Generic interface classes */

.error{color: red}


/******* CONTENT begin ******/
#home-page-content
{
	border: 0px solid red;
	height:600px;
	width:800px;
	margin-top:-20px;
}
/*home page */
#homepage-main{width:1440px;height:740px;border:1px solid green}
#home-page-hr{width:200px;position:absolute;top:35px;left:15px;color:cornflowerblue}
#div-friendconnect{position:absolute;top:400px;height:200px;border: 1px solid green; display:none}

#div-home-page-turn-off-animation-container{margin-left:-10px}  /* find tuning */

.hex-map{overflow:hidden;opacity:1;z-index:7}
.hex-area{overflow:hidden;text-decoration:none;border:none}
.hex{
	border:0;margin:0;
	height:50px;width:50px;
	z-index:8;
}
#home-page-about-image{height:100%;}
#home-page-header{left:0px;width:100%;height:49px}
#home-page-header a
	{padding-right: 10px;padding-left:10px;padding-bottom:14px;
	font-family:Verdana;font-size:14px;text-align:left}
#home-page-header a.open{border:1px solid BurlyWood;display:inline;border-bottom:1px solid LightGoldenRodYellow;color:maroon}
#home-page-header a:hover{color:darkcyan}

.home-page-content
{
	margin-top:25px;
	padding: 20px;
	border:1px solid BurlyWood;  /*	#DEB887 DarkSlateBlue;  /* #483D8B	DarkSlateGray  	#2F4F4F;*/
	display:none;
}
.home-page-content.open{display:block}

#home-page-right-column
{
	padding:15px;position: absolute;
	top:0px;left:610px;
	background-color:LightGoldenRodYellow;
	border:0px solid red;width:48%;min-width: 560px;height:700px;
}
/*align with bottom*/
#div-home-page-image-comment{position:absolute;top:600px;padding-left:10px;padding-right:20px}
#div-home-page-image-comment p{bottom:0px;}
#div-home-page-image-comment div{bottom:0px;}

#contact-message{width:100%;height:200px}
#div-home-page-contact{}
#div-home-page-contact-submit{width:70px;text-align:center;padding:30px;margin-top:-70px;}

#contact-submit{padding:10px;border:1px solid SlateGray} /*SlateGray #708090 */
#contact-submit:hover{color:DarkCyan}

.hex-container{border: 0px solid red;margin:0;padding:0;overflow:hidden;
	height: 730px;width:600px;position:absolute;left:1px;top:1px}


#div-home-page-about-image{height:800px;width:600px;border:0px solid blue;opacity:1;z-index:1;}
/*colored masks */
.hex-container-blue{background-color:blue;opacity:0;z-index:2}
.hex-container-green{background-color:green;opacity:0;z-index:3}
.hex-container-red{background-color:red;opacity:0;z-index:4}


.hex-container-white{background-color:white;opacity:.0;z-index:5}
.hex-container-black{background-color:black;opacity:0;z-index:6}
.hex-image{height:200px;width:200px;border:0;opacity:1;z-index:7}
/*
.image-container{border: 0px solid red;background-color:green;margin:0;padding:0;overflow:hidden;
		height: 592px;width:485px;left:1px;top:1px;position:absolute;opacity:.5}
*/
/*overflow hidden not working on map. tried using mask. didn't work either. using half size hex image instead. much more work */

.hex-image{height:202px;width:202px;border:0;opacity:1;z-index:7}
.hex-container-black{background-color:black;opacity:1.0;z-index:9}
/*
start:
1.
.hex-image{height:202px;width:202px;border:0;opacity:1;z-index:1001}
.hex-container-black{background-color:black;opacity:1.0;z-index:9}
2. black to zero. exposes hexagon grid.
.hex-container-black{background-color:black;opacity:0;z-index:9}

3. shrink hex to 150
.hex-image{height:150px;width:150px;border:0;opacity:1;z-index:10}
4. red from one to zero; hex from 200 to 150
.hex-container-red{background-color:red;opacity:0;z-index:4}
5. green from one to zero;hex from 150 to 100;
.hex-container-green{background-color:green;opacity:0;z-index:4}
.hex-image{height:100px;width:100px;border:0;opacity:1;z-index:10}
6. blue from one to zero; 
.hex-container-blue{background-color:blue;opacity:0;z-index:4}
.hex-image{height:100px;width:100px;border:0;opacity:1;z-index:10}
7.
*/

/*
fade in, display for five seconds
opacity on hex-image to .2

*/
/*
.hex-image-half{height:95px;width:190px;border:0;}
*/
/*col 1*/
.hex1_1{position:absolute;left:-50px;top:1px}
.hex1_2{position:absolute;left:-50px;top:199px}
.hex1_3{position:absolute;left:-50px;top:398px}
.hex1_4{position:absolute;left:-50px;top:597px}
/*col 2*/
.hex2_0{position:absolute;left:100px;top:-299px}
.hex2_1{position:absolute;left:100px;top:-99px}
.hex2_2{position:absolute;left:100px;top:99px}
.hex2_3{position:absolute;left:100px;top:299px}
.hex2_4{position:absolute;left:100px;top:499px;}
.hex2_5{position:absolute;left:100px;top:699px;}
/*col 3*/
.hex3_1{position:absolute;left:250px;top:1px}
.hex3_2{position:absolute;left:250px;top:199px}
.hex3_3{position:absolute;left:250px;top:398px}
.hex3_4{position:absolute;left:250px;top:597px}
/*col 4*/
.hex4_1{position:absolute;left:400px;top:-99px}
.hex4_2{position:absolute;left:400px;top:99px}
.hex4_3{position:absolute;left:400px;top:299px}
.hex4_4{position:absolute;left:400px;top:499px;}
.hex4_5{position:absolute;left:400px;top:699px;}
/*col 5*/
.hex5_1{position:absolute;left:550px;top:1px}
.hex5_2{position:absolute;left:550px;top:199px}
.hex5_3{position:absolute;left:550px;top:398px}
.hex5_4{position:absolute;left:550px;top:597px}
/*#about-me{position:absolute;left:200;border: 1px solid grey;height: 600px}
*/

/* *****  */
#content
{
	padding: 0px;
	position: absolute;
	width: 75%;
	left: 0%;
	top: 6%;
	height: 83%;
	text-align: left;
	min-width: 450px;
	border:1px solid #FFFFFF;
	padding:5px;
	z-index: 1;
}
#content-header
{
	/* position: static; */
	/* make width and left the same as #content so headers line up*/
	/* make padding the same as content-inner */
	position: absolute;
	display: none;
	position: absolute;
	border: 1px solid white;
	width: 99%;
	height: 30px;
	top: -8%;
	left: 0%;
	display: block;
	font-size: 10pt;
	font-style:italic; 
	color: #444;
	z-index: 1;
}
#content-header-inner
{
	margin-top:5px;
}
/* 
   The header is composed of four elements. 
   left-nav left-right  right-left and right-nav
	navigation information 
*/
.navigation-arrow
{ 
position: absolute;text-align: center;height:32px;width:32px;
top:0px;
margin-top: -7px;margin-left: -13px;margin-right:0px;background-color: transparent;opacity:0.5
}
.navigation-arrow:hover {opacity:1.0}
/* 	NB Brian I struggled (somewhat) with the alignment of the header elements.
   	My solution was to absolutely position the containers 
	content-header-left-nav and content-header-right-nav
	and offset all other elements
*/
#content-header-left-nav  /* container for nav arrows and page number, upper left  */
{
	position: absolute;
	left: 0%;
	height: 100%;
	z-index: 500;
	text-align:center;
	width: 50px;
}
#content-header-left-previous,#content-header-right-previous  /* left arrow - previous page */
{float: left;}
#content-header-left-previous:hover
{
	color: #E00;
	/* background-image: url("pictures/arrow-next-orange.png"); */
}
#content-header-left-pagenumber	/* page number */
{
	margin-left:5px; /*NB Brian - micromanaging. kind of nec. for each nav. arrow image that's used.*/
}
#content-header-left-next,#content-header-right-next{float: right;} /* note right next also has a setting below */
#content-header-left-next-img:hover
{
	color: #E00;
	/* background-image: url("pictures/arrow-next-orange.png"); */
}
#content-header-left-right
{
	border: 0px solid black;
	position: absolute;
	left: 0%;
	height: 45%;
	text-align: right;
	width: 47%;
}
#content-header-right-left
{
	/* make left the same as #column-two left */
	position: absolute;
	left: 51%; /* sync with column width */
	height: 45%;
	text-align: right;
	z-index: 99;
	margin-left: 0px;
}
#content-header-right-nav /* container for nav arrows and page number, upper right  */
{
	position: absolute;
	left: 94%;
	height: 100%;
	z-index: 500;
	text-align:center;
	width:50px;
}
	#content-header-right-previous
	{
		left: 0%;
		top: 0%;
		margin-top: 0px;
		margin-left: 0px;
	}

	#content-header-right-pagenumber /* page number */
	{
	}
	#content-header-right-next,#content-header-left-next
	{
		top: 0%;
		z-index: 2;
		margin-right:8px;
	}
	#content-header-right-previous:hover
	{
		color: #E00;
	}
	#content-header-right-next:hover
	{
		color: #E00;
		background-color: white;
	}

/**** end header ***/
#content-inner
{
	position: relative;
	border: 0px solid blue;
	height: 94%;
	margin-top: 0%;
	margin-bottom: 0%;
	margin-left: 0%;
	margin-right: 0%;
	padding: 0px;
}
#content-title
{
	position: absolute;
	float: left;
	top: -10px;
	height: 0%;
	padding: 0px;
	margin: 0px;
	text-align: left;
	border: 0px solid red;
	width: 100%;
	font-family: verdana, arial, helvetica;
}

#content-text
{
	border: 0px solid blue;
	clear: both;
	height: 100%;
	margin-left: 0%;
	margin-right:0%;
	z-index: 3;
	background-color: rgb(255,255,255);
}
/*#ct-display{height:100%;}*/

#content-text p
{
	font-style: normal;  /* this was added for safari, where the cloned paragraphs were italic. */
	margin-top: 0em;
}

#content-invisible-story
{
	position: absolute;
	left: -9999px;
}	

/* NB This is lame. Should be done with classes NOT id. Slightly trickier than appears - need a couple of classes */
/* story divs must have the same attributes as column one and column two */
#eternal-suffering, #when-we-all-have-brains, #skin-deep, #food, #swimming-with-invertebrates, #dream-of-a-perfect-world,#rebirth,#windigo,#loss,#hermits-rest,#coins,#birthplace-of-the-condors
{
	/* display must be something other than none or paragraph calcs don't work in setGlobals*/
	position: absolute;
	top: 0px;
	left:0px;
	float: left;
	width: 48%;
	border: 0px solid gray;
	height: 100%;
	overflow: hidden;
	z-index: -100;
}

#column-one
{
	position: absolute;
	top: 0px;
	left:0px;
	float: left;
	width: 48%;
	border: 0px solid gray;
	height: 100%;
	overflow: hidden;

}
#column-one-mask
{
	position: absolute;
	z-index: 3;
	width: 48%;
	float: left;
	left: 0px;
	height: 20px;
	margin:0px;
	padding:0px;
	background-color: white;
}

/* space between columns */
#gutter
{
	position: absolute;
	width: 3%;
	top: 0px;
	left:48%;
	border: 1px solid white;
	height: 100%;
	z-index: 500; /* used for navigation */
}
#column-two
{
	position: absolute;
	top: 0px;
	left: 51.5%;
	width: 48%;
	border: 0px solid gray;
	height: 100%;
	clear: both;
	overflow: hidden;
}

#column-two-mask
{
	position: absolute;
	left: 51.5%;
	width: 48%;
	z-index: 3;
	height: 14px;
	z-index: 3;
	background-color:white;
}

/* 
  added for safari - a cloning related issue 
  see addeNode in the javascript for details
*/
#column-two p.normal
{
	font-style: normal; 
}

#content-navigation
{
	position: absolute;
	top: 104%;
	border: 0px solid red;
	margin-top: 6%;
	float: left;
	display: none;
	left: 0%;
	width: 97%;
	height: 2%;
	z-index: 700;
}
#content-navigation-inner
{
	position: absolute;
	border: 0px dotted blue;
	padding-bottom: 0%;
	display: block;
	height: 100%;
	width: 100%;
}

#content-navigation-inner-left-left
{
	position: absolute;
	border: 0px dotted yellow;
	top: 0%;
	left: 3%;
	height: 45%;
	text-align: left;
	margin: 0%;
	margin-left: 0px;
}
#content-navigation-inner-left-right
{
	border: 0px dotted green;
	margin-left: 10px;
	position: absolute;
	left: 0%;
	height: 45%;
	text-align: right;
	width: 47%;
}

#content-navigation-inner-right-left
{
	border: 0px dotted green;
	/* make left the same as #column-two left */
	position: absolute;
	left: 52%;
	top: 0%;
	height: 45%;
	text-align: right;
	margin: 0%;
	/* above header-inner-right-right*/
	z-index: 3;
	margin-left: 0px;
}
#content-navigation-inner-right-right
{	
	border: 0px dotted black;
	position: absolute;
	left: 51%;
	width: 47%;
	top: 0%;
	height: 45%;
	text-align: right;
	margin: 0%;
	text-align: right;
	margin-left: 0px;
}

#content-navigation-left-previous
{
	border: 0px dotted purple;
	position: absolute;
	left:0%;
	top: -400%;
	color: black;
	z-index: 400;
}

#content-navigation-left-next
{
	border: 0px dotted red;
	position: absolute;
	left:5%;
	z-index: 400;
	color: black;
	top: -400%;
}

#content-navigation-right-previous
{
	border: 0px dotted blue;
	position: absolute;
	left: 94%;
	color: black;
	top: -400%;
}

#content-navigation-right-next
{
	border: 0px dotted green;
	position: absolute;
	left:99%;
	color: black;
	top: -400%;
}

#content-navigation-right-previous:hover
{
	color: #E00;
}
#content-navigation-right-next:hover
{
	color: #E00;
	background-color: white;
}
#content-navigation-left-previous:hover
{
	color: #E00;
}
#content-navigation-left-next:hover
{
	color: #E00;
	background-color: white;
}

/********** content end ***********/
/* see navbarInit() javascript function */
/*
#navbar
{
		position: absolute;
		display: block;
		border: 0px solid black;
		margin-top: 0%;
		left: 50
		height: 5%;
		top: 88%;
		padding: 0px;
		background-color: transparent;
		width: 50%;
		color: #ccc;
		font-family: verdana, arial, helvetica;
		font-size: 13px;
		line-height: 20px;
		z-index: 200;
}
.nav-icon
{
	border: 1px dotted gray;
	padding: 0px;
	margin-right: 1px;
	margin-left: 1px;
}
#navbar-hide-show-div
{
	position: absolute;
	z-index:500;
	top: -5%;
	left: -7%;
}
#navbar-hide-show-img
{
	
}
#navbar-inner
{
		border: 0px solid red;
		margin: 0px;
}
*/
/*
.nav-menu
{
	position: absolute;
	top: 3%;
}
*/
/* NB I would like to rename to dock-img to be consistent with naming conventions elsewhere 
but its a hassle because it has to be done here and in the .js, and the img string occurs elsewhere */
/*
#img0, #img1, #img2, #img3, #img4, #img5, #img6, #img7, #img8, #img9,#img10,#img11
{
		border: 1px solid #ccc;
		height: 55%;
		width: 55%;
		margin-top: 0%;
		margin-left: 0%;
		z-index: 100;
}
*/
/*NB Brian convert to class
#nav0,#nav1,#nav2,#nav3,#nav4,#nav5,#nav6,#nav7,#nav8,#nav9, #nav10
{
	position: absolute;
	border: 0px solid blue;
	z-index: 300;
	height: 30px;
	min-height: 30px;
	width: 30px;
	margin-top: 0px;
}
/* overridden programmatically in the function navbarInit() */
/*
#options
{ 
	text-align: left;
	border: 0px dotted red;
	position: absolute;
	left: 100%;
	width: 13%;
	height: 3%;
	top: 0%;
	display: none;
	z-index: 500;


	color: #666;
	font-family: arial, helvetica;
	font-size: 13px;
	line-height: 20px;	

}
#options-inner
{
	display: none;
	width: 100%;
	height: 84%;
	left: 0%;
	top: 0%;
	border: 0px solid green;
	left: 75%;
	text-align: left;
	z-index: 500;
	margin-top: 10px;
	margin-left: -10px;
}

#options-inner-ul
{
	z-index: 500;
}


#options ul
{
	list-style: none;
	list-style-image: none;
	list-style-type: none;
	text-align: left;
	width: 100%;
	border: 2px solid #202; 
	background-color:white;
	margin-top: 5px;
	margin-left: -0px;
	padding-right: 2%;
	padding-left: 3%;
	padding-top: 5px;
	padding-bottom: 5px;
}
end of options */
/* NB Brian note that sidebar right and left are NOT being used now */
/*
#sidebar-left
{
	position: absolute;
	display: none;
	top: 5%;
	left: 0%;
	height: 80%;
	width: 17%;
	min-width: 100px;
	background-color: #eee;
	padding: 0px;
}

#sidebar-left-inner
{
	margin: 5%;
	height: 70%;
}
#sidebar-right
{
	position: absolute;
	border: 0px solid black;
	top: 7.0%;
	left: 85%;
	height: 80%;
	width: 14%;
	min-width: 100px;
	padding: 0px;
	display: block;
	z-index: 100;
}

#sidebar-right-inner
{
	margin: 5%;
	height: 95%;
}
*/

/* 
child selector. is not working 
#table-of-contents-inner ul:hover > li
{
 	display:block; 
}
*/
/* end of table of contents */

/*  */


/*
#footer-left
{
	display: none;
}

#footer
{
	display: none;
	border-left: 0px solid gray;
	border-bottom: 0px dotted gray;
	border-right: 0px solid gray;
	border-top: 0px solid gray;
	position: absolute;
	top: 93%;
	left: 0%;
	width: 84%;
	height: 4%;
	display: none;
	color: #ccc;
	font-family: verdana, arial, helvetica;
	font-size: 10pt;
	z-index: 1;
}
#footer-inner
{
	z-index: 300;
	border: 0px dotted red;
	height: 100%;
	color: black;
}

#footer-right
{
	border: 1px dotted purple;
	position: absolute;
	display: none;
	padding: 5px;
	top: 61%;
	left: 84%;
	width: 15%;
	height: 27%;
	min-height: 1.0em;
	color: #ccc;
	font-family: verdana, arial, helvetica;
	font-size: 13px;
	line-height: 20px;
	z-index: 400;
}

#footer-right-inner
{
	height: 50%;
	margin-left: 1%;
	margin-top: 0.5%;
	margin-right: 1%;
}
*/
/************   footer end **********/

/************   products  **********/
/* 
   products is not part of standard drupal template 
*/
/* 
   a series of images which represent stories
   that can be dragged into a shopping cart 
*/
/*
#products
{
	position: absolute;
	left: 15%;
	top: 20%;	
 	color: #ccc; 
}
#products:hover
{

	color: #E00;
}

#product-one:hover
{
}

#shopping-cart
{
	position: absolute;
	left: 65%;
	top: 20%;	
	color: #aaa;	
}

#shopping-cart:hover
{
	color: #E00;
}
*/


/*
.column_one
{
	float: left;
	text-align: justify;
	margin-top: 0px;
	padding-left: 15px;
	height: 100%;
	margin-bottom: 0px;
}


.column_two
{
	float: right;
	text-align: justify;
	margin-left: 50%;
	margin-top: -407px;
	right: -0px;
	padding-left:25px;
	border-left: 0px solid #aaa;
	padding-right: 15px;
}

.column_one p
{
	margin-right: 52.5%;
}
.column_two p
{

}

p.first-paragraph
{
	text-indent: 0em;
}
*/