/* 
	twiggstyle.css 
*/

body {
	margin: 5px 5px 0px 5px;
	padding: 0 0 0 0;
	font-family: verdana, "trebuchet ms", gadget, arial, sans-serif;
	color: #fffeee;
	background-color: #555;
/*	background-image:url(/css/nzmap1.gif);	*/
	border: 0 none;
}

a {
	color: #fffe8e;
	font-weight: bold;
}
a:link, 
a:visited {
	text-decoration:none;
	color: #fffebe;
}

a:active, 
a:hover {
	text-decoration:underline overline;
	color: #fffe9b;
	color: #fffebe;
}

#title h2 a {
	color: red;
}

p {
	font-size: 0.95em;
	line-height:1.5em;
	margin:0 0 .3em 0;
}
table 
{
	margin-bottom:2em;
	margin-left:10%;
	margin-right:10%;
	clear: both;
}

td 
{
	padding:0.25em 0.5em 0.25em 10px;
	vertical-align:top;
	border-bottom:1px solid #888;
	font-size: 0.8em;
}
td a
{
	font-size: 1.4em;

}
tr
{
	margin: 0
}

/* forms in twigg are drop-down menu (c.f. #title) and building (not styled) */
/* note no textarea, input, select; option, input; form p; form defined for the general case */

/* 
*****************************
classes and id's for twigg pages 

	usage:
	
	main: 		id for div that encloses everthing -- sets background color and text color
	headmatter: id for div enclosing title, nav, etc. -- sets colors for nav boxes
		sitemenu: 	id for site menu; absolute position, overlays title
		sitelogo: 	id for logo; absolute position, overlays title
	title:		id for topmost visible container; has title and is overlaid with sitelogo and sitemenu
	navbar:		id for 2nd visible container; holds breadcrumbs and nav buttons
	albumpage	class for tables on the album display page
	abbumymenu id for dropdown menu of album pages

	
	nav: 2nd band, holds navigation elements, including bread-crumbs
	textright: class for right-aligning text
******************************
*/
#main {
	background-color: transparent;
	border: 0px;	

}
#main h1, 
#main h2, 
#main h3, 
#main p {
	text-align: left;
	margin: 5px 0 5px 0;	/* headings inherit margin from somewhere */
}
#main h1 {
	font-size: 1.1em;
	line-height: 1em;
}

#main h2, 
#main h3, 
#main p {
	font-size: 85%;
	line-height: 1.5em;
}

#title {  /* band at the top */
	 margin-top: 4px;
	 margin-right: 10px;
	 margin-bottom: 5px;
	 margin-left: 10px; 
	 padding: 5px;
	 border: 1px solid #666;

	 background-color: #777;
	 
}
#title h1{

	position: relative;
	right: 0px;
	margin-right: -15px; /* mac ie 5 bug */
	font-size: 1.2em;
}

#title h1, 
#title h2, 
#title h3,
#title p {
	margin: 0 90px 0 10px;
}
.oneem {
	font-size: .95em;
	font-style: italic;
}
#title p{
	font-size: .8em;
}

#navbar form {
	float: right; 
	text-align:right;
	margin: -26px 50px 0 0;
	border-width: 1px;
}

#navbar form p {
	border-width: 0px;
}
#navbar option,
#navbar input  {
	background-color: #777;
	color: #ddddd0;
	border-color: #aaa;
	border-width: 1px;
	font-size: .95em;
	padding: 0 3px 2px 3px;
	margin-left: 5px;
}


#sitelogo {
	position: fixed;
	top: 0px;	/* appears to be ignored when position is fixed? */
	left: 0px;
	float: left;
	border: 1px solid #999;
	background-color: black;
}
#sitelogo img {
	width: 70px;
}
/* navbar shows, e.g., Photos>>Alaska>>North Slope */
#navbar{
	margin: 0 10px 2px 10px; 
	padding: 5px 5px 5px 10px;
	background-color:  #777;
	border: 1px solid #666; 
}


#navbar h1 {
	font-size: 1em;

}
#albummenu,
#sitemenu {
	margin: 0 1px;
	line-height: 1em;
	border:1px solid #555;
	text-align:center;
	padding: 0 0px;
	width: 5em;	
	position:absolute;
	top: 10px;
}
#sitemenu {
	right:15px;	
}
#albummenu {
	right:100px;	
}

#albummenu a,
#sitemenu a {

	color: #ddd;
	background:#777;
	font-size:.8em	;
	font-weight:normal;
	display:block;
	margin:0;
	padding:2px 0;
	text-decoration:none;
}
#albummenu a:active,
#albummenu a:hover,
#sitemenu a:active, 
#sitemenu a:hover {
	color:#fffeee;
}
#albumitem,
#menuitem 
{
	color:#000;
	background-color: #fffdee;
	z-index:100;
	margin:0px ;
	padding:0px;

	/* top:0px; */
}

#menuitem {
	position: absolute;
	 right: 0px;
}
#albumitem {
	position: absolute;
	left: 100px;
}

#albumitem li,
#menuitem li 
{
	font-size:1em;
	line-height:1em;
	list-style:none;
	list-style-image:none;
	margin:0 ;
	padding: 0 0px;
	border:1px solid #999;
	background-color: #555;
}
#albumitem a,		
#menuitem a 
{
	display:block;
	text-decoration:none;
	font-weight:normal;

}
#albumitem a:hover,
#menuitem a:hover {
	background:#fffeee;
	border: 1px solid #666;
	color: #000;
}

#footer, #footerleft 
{
	clear:both;
	font-size: 	0.7em;
	color:		#999;
	padding:	1em 2.5% 0.5em 2.7%; 
	font-family: "trebuchet ms", arial, sans-serif;
	font-weight: normal;
	font-size: 12px;
	
}
p#footer {
	text-align: right;
}
p#footerleft {
	text-align: left;
	}
	
#footer a:link, 
#footer a:visited  
{
	color:			#808080;
}

/* 
*************************************
	for the inline frame
*************************************
*/

#photo 
{
	background-image: none;
	padding: 	10px 0 0 0 ;
	margin: 1.1em 0 0 0;		/* adjust to align the iframe's top border with the thumbs */
	text-align: center;
}
	/* the iframed image */

#photo img 
{
	border:2px solid #aaa;
	margin: 4px 0 0 0 ;
}

#photo h2  /* text for photo caption */
{
	/* margin:0.5em 0 0.25em 6px; */
	text-align: center;
}

#photo p  /* text for photo description */
{
	text-align: center;
/*	margin-left: 10px;
	margin-right: 40px; */
	font-size: .8em;
	line-height: 1.3em;
}

#index p{
	color: #aab;
	font-size: 0.8em;
	font-family: georgia, "trebuchet ms", serif; 
	padding: 10px; 
	padding-bottom: 0px;
	padding: 0;
	margin: 0;
}

/* #index */ .texttop
{
	position: absolute;
	right: 40px;  
	/* margin-right: -15px; */
	font-weight: bold;
	font-size: .8em;
	margin-top: 0px;
	/* margin-right: 5%; */
	float: right;
}

#photo .textright
{
	position: absolute;
	right:0;
	margin-right: -15px;
	font-size: .8em;
	padding-right: 10%;
	
}
#photo .texttop /* for the next/prev hlink in the iframe */
{
	position: absolute;
	right: 0px; 
	top: 0px; 
	font-size: .8em;
	padding-right: 15px;
	font-weight: bold;

}
#photo .nexttop
{
	position: absolute;
	top: 0px;
	left: 45px;
	font-size: .8em; 
	font-weight:bold
	
}

.textright { 
	position:absolute;
	right: 0;
	font-size:80%;
	}

	/* the image thumbs that aren't at the page level , i.e., the Album thumbs */
#index img 
{
	padding: 0;
	border: 1px solid #999;

}

#index iframe 
{
	width:660px;
		/* the maximum width of an image before scrollbars appear */
		/* this is a compromise, make it too large and wrapped thumbs will
		   be pushed down */
	height: 620px; 
	float: left;
	margin: 0 0 0 0px;
	padding: 0;
}


	/* the thumbs at the page level */
#thumbs 
{
	margin: 1.1em 0 0 0; /* the top margin can be adjusted to align top edge of top row with iframe */
}
#thumbs img 
{
	margin: 4px 0 0 0;
	border: 1px solid #999;
		vertical-align: bottom;
}

/*
*******************
 sets the background box for the thumbnail images 
********************
*/


#thumbs p 
{
	float:left;
	width:100px;
	height: 88px; 
	/* if you want a box around the thumbs at the page level do it here */
	border: 1px solid #999;
	text-align: center;
	list-style-type: none;
	padding: 1px;
	margin: 2px;
	font-size: 10px;
	background-color: transparent;
}

#thumbs a {
	font-family: verdana, "trebuchet ms", gadget, arial, sans-serif;
}

#thumbs a:link, 
#thumbs a:visited {
	text-decoration:none;
	color: #fffebe;
}

#thumbs a:active, 
#thumbs a:hover {
	text-decoration:underline;
	/*font-weight: bold;*/
	color: #fffebe;
}

	/* the border for the iframe, can't set the iframe border
	  directly without strange results */
#photo.iframeborder {
	border: 1px solid #999;
/*	margin: 4px 5px 0 10px; */
	padding: 3px;

	background-color: #4f4f4f;
}
	/* albumpages is a container for the album page (table for now) formatting */
	/* the .tdleft... and .tdright... are classes used in the <td> tag to format individual cells */
	/* in the album-level table   */
#albumpages {
	text-align: center;	
	
}
#albumpages p{
	color: #fffeee;
	font-size: 1em;
		font-family: verdana, "trebuchet ms", gadget, arial, sans-serif;
}
#albumpages p a{
	font-size: 1em;
}

.tdleftbig,
.tdrightbig,
.tdbothbig {
	width: 40%;
	text-align: left;
}
.tdrightbig
{
	width: 40%;
	text-align: left;
	border-right: 1px solid #999;

}
.tdbothbig
{
	width: 40%;
	text-align: left;
	border-right: 1px solid #999;
	border-left: 1px solid #999;

}


.tdleftsmall {
	width: 2%;
	border-left: 1px solid #999;
	background: transparent;
}
.tdrightsmall { 
	width: 90px;

}
	/* hide the captions in thumbnails at the page level */
.hideshow {
	 display:none;
}



.ital {
	font-style:italic;
}
.define,
.define a
.define p{
	font-size: 1em;
	color: #eee;
	text-align:left;
	margin: 0;
	font-family: monospace;
}

.define a:link,
.define a:visited {
	text-decoration: underline;
	font-weight: normal;
}

.imageleft{
	margin: 2px 0 0px 5px;
	float:left;
	border: 1px solid #999;
	padding: 4px;
}

.boxit {		/* empty boxes as placeholder for image */
	height: 240px;
	width: 400px;
	background-color: transparent;
}
.boxit p,
.boxit h2 {
	text-align: right;

}
.welcome
{
	width: 400px;
	margin: 20px 20% 20px 20%;
}
.welcome p
{
	text-align: center;
}
.welcome a:hover
{
	font-weight: bold;
	margin: 2px;
	font-family: georgia, verdana, serif;
	font-size: 1.1em;

}