/* OVERVIEW 
-------------------------------------------------------------------------------------------*/ 
/*
main.css
hacked together much too fast by David Lubinski in May 2006

Mixed fluid and fixed layout derived from No. 15 at Alessandro Fulciniti's layout gala
http://blog.html.it/layoutgala/

Main horizontal navigation menu derived from that used by Dan Cederholm in april 2006 at 
http://www.simplebits.com/ 

CSS image map rollovers used on the large and small cam pages derived from those of Paul http://www.yourtotalsite.com/archives/xhtml_css/image_replacement_maps/Default.aspx 

Accordion menu dhtml widget modified from that of Hedger Wang 
http://www.hedgerwow.com/360/mwd/accordion/demo.php

Shadowed layout boxes modified from those of Roger Johansson
http://www.456bereastreet.com/archive/200505/transparent_custom_corners_and_borders/

Dynamic large images with Lightbox JS v. 2 by Lokesh Dhakar
http://www.huddletogether.com/projects/lightbox2/

*/



/* TABLE OF CONTENTS OF THIS FILE 
-------------------------------------------------------------------------------------------*/
/*
1. GLOBAL AND LAYOUT
2. HORIZ NAV MENU
3. MENU BIG SMALL BUTTONS
4. DIVS MISC
5. CLASSES
6. FONT TEXT STUFF
7. LINKS
8. CSS IMAGE MAP ROLLOVER
9. LISTS
10. ACCORDION BOX DEF LISTS
11. IMAGES
12. TABLES
13. IE HACKS
*/


/* 1. GLOBAL AND LAYOUT
-------------------------------------------------------------------------------------------*/

html,body {
	background:#6F9242 url(../img/background_gradient.jpg) repeat-x top left fixed;
	margin:0;
	padding:0;
	}
	
html {
	height: 100%; /*height and margin-bottom keeps page centered with or without vertical scrollbar*/
	margin-bottom:1px; /*height and margin-bottom keeps page centered with or without vertical scrollbar*/
	}

body {
	font:76% arial,sans-serif;
	}

a {
	display:block; /*display block for the whole file seems odd but I won't mess with it now */
	color:#00F;
	padding:10px;
	}

#header {
	float:left; /*via Bulletproof Web Design book*/
	width:100%; /*via Bulletproof Web Design book*/
	background-image:url(../img/logo.gif); /*Firefox didn't like all background attributes on one line, so I separated them*/
	background-repeat:no-repeat;
	background-position:0 50%;
	background-color:#000;
	padding:0;
	}
	
#headershadow {
	float:left;
	width:100%;
	color:#FFF;
	height:9px;
	background:#000 url(../img/nav_shadow.gif) repeat-x bottom left;
	}

div#wrapper {
	float:left;
	width:100%;
	max-width:1200px;
	}



/*	LARGE CAM LAYOUT
	Column div names have been changed from those of #15 layout gala.  
	"camtext" used to be called "content" 
	"middlecolumn" used to be called "navigation" 
	"camapplet_large" used to be called "extra" 
	 */
	
div#camtext {
	margin-right:600px; /*margin-right should equal the total width of middlecolumn + camapplet_large*/
	min-width:400px;
	}
	
div#middlecolumn {
	float:left;
	width:50px; /*width and margin-left should have same px value, but diff sign*/
	margin-left:-50px;
	}

div#camapplet_large {
	float:left;
	width:550px; /*width and margin-left should have same px value, but diff sign*/
	margin-left:-550px;
	}
	

/*	SMALL CAM LAYOUT
	Column div names have been changed from those of #15 layout gala. 
	"camapplet_small" used to be called "content" 
	"middlecolumn" used to be called "navigation" 
	"rightcolumn" used to be called "extra" 
	 */	

div#camapplet_small {
	margin-right:20px; /*margin-right should equal the total width of middlecolumn + rightcolmn*/
	min-width:600px;
	}
	
div#middlecolumn {
	float:left;
	width:10px; /*width and margin-left should have same px value, but diff sign*/
	margin-left:-10px;
	}
	
div#rightcolumn {
	float:left;
	width:10px; /*width and margin-left should have same px value, but diff sign*/
	margin-left:-10px;
	}


/*	NON-CAM LAYOUT
	Column div names have been changed from those of #15 layout gala. 
	"primarycontent" used to be called "content" 
	"middlecolumn" used to be called "navigation" 
	"secondarycontent" used to be called "extra" 
	 */	

div#primarycontent {
	margin-right:390px; /*margin-right should equal the total width of middlecolumn + secondarycontent*/
	min-width:390px;
	margin-top:20px;
	}
	
div#middlecolumn {
	float:left;
	width:40px; /*width and margin-left should have same px value, but diff sign*/
	margin-left:-40px;
	}
	
div#secondarycontent {
	float:left;
	width:350px; /*width and margin-left should have same px value, but diff sign*/
	margin-left:-350px;
	margin-top:25px;
	}
	


div#footer {
	clear:left;
	width:100%;
	}


 /* 2. HORIZ NAV MENU
-------------------------------------------------------------------------------------------*/
#header ul {
	float:left;
	list-style:none;
	margin:0;
	padding:0 0 0 150px;
	}

#header li {
	float:left;
	margin:0;
	padding:0;
	}

#header li a {
	float:left;
	font-size:100%;
	font-weight:normal;
	text-decoration:none;
	color:#CCC;
	margin:0 1px 0 0;
	padding:4px 9px;
	}

#header li a:hover {
	color:#fff;
	background:#75531A url(../img/nav_gradient_hover.gif) repeat-x bottom left;
	}

#header li a.active {
	color:#fff;
	background:#C7902E url(../img/nav_gradient_active.gif) repeat-x bottom left;
	}

 
 /* 3. MENU BIG SMALL BUTTONS
-------------------------------------------------------------------------------------------*/


div#primarycontent #bigsmall ul {
	float:left;
	list-style:none;
	margin:0;
	padding:0 0 0 0;
	}

div#primarycontent #bigsmall li {
	float:left;
	margin:0;
	/*padding:0px 10px 0px 10px;*/
	}

div#primarycontent #bigsmall li a {
	float:left;
	font-size:115%;
	font-weight:bold;
	text-decoration:none;
	color: #000000;
	margin:0 0 0.8em 0;
	padding:9px 15px 9px 9px;
	background:#FFFF69 url(../img/bigsmall_gradient_hover.gif) repeat-x bottom left;
	border: 1px solid #000;	
	}

div#primarycontent #bigsmall li a:hover {
	color:#000;
	background:#C7902E url(../img/nav_gradient_active.gif) repeat-x bottom left;
	}

div#primarycontent #bigsmall li a.active {
	color:#000;
	background:#C7902E url(../img/nav_gradient_active.gif) repeat-x bottom left;
	}


/* 4. DIVS MISC
-------------------------------------------------------------------------------------------*/
div#minitagline { /*this controls the right aligned text on the black nav bar*/
	float:right;
	color:#FFFF69;
	font-size:0.88em;
	background:url(../img/cam_sm.gif) no-repeat 0 50%;
	margin:0;
	padding:4px 25px 4px 20px;
	}


/* 5. CLASSES
-------------------------------------------------------------------------------------------*/
.subtitle {
	color:#DDD;
	margin:0 0 0 10px;
	}
	
.moreinfo {
	text-align:right;
	/*margin-right:10px;*/
	}
	
.centeredImage {
	text-align:center;
	margin-top:0;
	margin-bottom:5px;
	padding:0;
	}
.leftmargin20 {
	margin-left:20px;
	}
	
/* 6. FONT TEXT STUFF
-------------------------------------------------------------------------------------------*/
#primarycontent h1.hometitle {
	text-align:center; 
	color:#FFFF69; 
	font-size:1.3em; 
	letter-spacing:0.1em;
	margin-bottom:0.5em;
	margin-top:1em;
	}

h2 {
	font-size:1.15em;
	}
	
#camtext h1, #camapplet_small h1, #primarycontent h1 {
	font-size:1.5em;
	color:#FFF;
	margin:10px 0 0 10px;
	}
	
div#camtext p, div#camapplet_small p, div#primarycontent p {
	line-height:1.4;
	}
	
.lbcaption {
	color:#666666;/*orange #B06117*/
	font-style: italic;
	margin-left: 20px;
	margin-right: 20px;
	text-align:center;
	font-size:95%;
	}
	
.contact {
	text-align:right;
	margin-right:10px;
	font-size:90%;
	color:#DDD;
	}
	
.contact p {
	font-weight:bold;
	color:#FFF;
	}
	
.contact li {
	margin-bottom:0.5em;
	}
	
.contact ul {
	list-style-type:none; 
	margin-top:-0.5em;
	}
	
#bigsmall p {
	color:#DDD;
	clear:both;
	margin-top:0.5em;
	text-align:center;
	}
	
div#secondarycontent p {
	color:#DDD;
	}


/* 7. LINKS
-------------------------------------------------------------------------------------------*/
div#camtext a, div#camapplet_small a, div#primarycontent a, div#secondarycontent a {
	display:inline;
	padding:0;
	}

div#camtext a:link, div#camapplet_small a:link, div#primarycontent a:link{
	color:#00F;
	font-weight:bold;
	}
	
div#secondarycontent a:link{
	color:#FFF;
	font-weight:bold;
	}
	
.lbgallery a:link img, .lbinset a:link img {
	border: solid #069 2px;
	}

div#camtext a:visited, div#camapplet_small a:visited, div#primarycontent a:visited {
	color:#069;
	font-weight:bold;
	}
	
div#secondarycontent a:visited {
	color:#FFF;
	font-weight:bold;
	}

div#camtext a:hover, div#camapplet_small a:hover, div#primarycontent a:hover,  div#secondarycontent a:hover {
	color:#069;
	font-weight:bold;
	background-color:#FFFF69;
	}
	
.lbgallery a:hover img, .lbinset a:hover img {
	border: solid #FFFF69 2px;
	}
	
div#camtext .contact a:link, div#camapplet_small .contact a:link, div#primarycontent .contact a:link {
	color:#DDD;
	text-decoration:none;
	font-weight:normal;
	padding:3px 3px;
	}

div#camtext .contact a:visited, div#camapplet_small .contact a:visited, div#primarycontent .contact a:visited {
	color:#DDD;
	text-decoration:none;
	font-weight:normal;
	}

div#camtext .contact a:hover, div#camapplet_small .contact a:hover, div#primarycontent .contact a:hover {
	color:#069;
	text-decoration:underline;
	font-weight:normal;
	}


/* 8. CSS IMAGE MAP ROLLOVER
-------------------------------------------------------------------------------------------*/
#menu {
	position:relative;
	margin-left:24px;
	width:476px;
	height:181px;
	background:url(../img/panorama_key.jpg) no-repeat;
	list-style-type:none;
	}

#menu a {
	text-indent:-9999px;
	text-decoration:none;
	position:absolute;
	}

#imap_watershed a {
	top:37px;
	left:60px;
	width:40px;
	height:40px;
	}

#imap_fence a {
	top:49px;
	left:206px;
	width:20px;
	height:20px;
	}

#imap_subnivean a {
	top:48px;
	left:126px;
	width:40px;
	height:20px;
	}

#imap_tundralab a {
	top:60px;
	left:302px;
	width:60px;
	height:40px;
	}

#imap_mettower a {
	top:136px;
	left:276px;
	width:80px;
	height:20px;
	}

#imap_watershed a:hover {
	background:transparent url(../img/panorama_key.jpg) -60px -218px no-repeat;
	}

#imap_fence a:hover {
	background:transparent url(../img/panorama_key.jpg) -206px -230px no-repeat;
	}

#imap_subnivean a:hover {
	background:transparent url(../img/panorama_key.jpg) -126px -229px no-repeat;
	}

#imap_tundralab a:hover {
	background:transparent url(../img/panorama_key.jpg) -302px -241px no-repeat;
	}

#imap_mettower a:hover {
	background:transparent url(../img/panorama_key.jpg) -276px -317px no-repeat;
	}


/* 9. LISTS
-------------------------------------------------------------------------------------------*/
.moreinfo ul {
	list-style-type:none;
	}
	

/* 10. ACCORDION BOX DEF LISTS
-------------------------------------------------------------------------------------------*/
.bd dl,.bd {
	margin:0 10px; /*was 0 10px when working with cam layouts*/
	}
	
.bd dt {
	font-weight:bold;
	}

.bd dd {
	margin:0 0 10px;
	}


/* 11. IMAGES
-------------------------------------------------------------------------------------------*/
.bd img {
	border:solid #B06117 1px;
	}
	
#bigsmall img {
	border:none;
	}
	
.sponsors img {
	border:none;
	}

#secondarycontent img {
	border:1px solid #FFF;
	}
	
.lbinset {
	text-align:center;
	}
	

/* 12. TABLES
-------------------------------------------------------------------------------------------*/
table.metdata {
	border:1px solid #999;
	background:#EEE;
	margin:0 auto;
	}

table.metdata td {
	border-bottom:1px solid #999;
	margin:0;
	padding:8px;
	}

table.metdata tr {
	background:#CDD8E7;
	}

table.metdata tr.alt {
	background:#AFC0D8;
	}
	

/* 13. IE HACKS
-------------------------------------------------------------------------------------------*/


/*the below hack keeps tables within dd class="a-m-d" from being invisible in IE 6 and IE7
but doesn't seem to bother other browsers */

.a-m-d {
	height:1%;
	}
	
/* when I first fixed the invisible table problem (peekaboo bug?) I used the infamous holly hack
which worked for IE6 but not IE7, probably because IE7 no longer recognizes the star/tan hack
Anyhow, I've commented out this hack but am keeping it here in case other problems arise.

/* Hides from IE5-mac \*/
/*
* html .a-m-d {
	height:1%;
	}
*/
/* End hide from IE5-mac */


/* 14. 2009 additions
-------------------------------------------------------------------------------------------*/
/* using a css sprite rollover technique at 
http://www.chromaticsites.com/blog/css-image-rollovers-accessible-standard-compliant-flicker-free
*/
a.viewRollover {  
    display: block; 
    width: 200px;  
    height: 50px;  
    background: url(../img/view_button_sprites.jpg) no-repeat 0 0; 
	overflow: hidden;  
    text-indent: -10000px;  
    font-size: 0px;  
    line-height: 0px;
	/*margin:0px; added by djl to try to fix IE6 layout issue*/
	/* padding:0px; added by djl to try to fix IE6 layout issue*/}  
	
a:visted.viewRollover {  
    background-position: 0 -50px;} 
	
a:hover.viewRollover {  
    background-position: 0 -100px;} 
	
a:active.viewRollover {  
    background-position: 0 -150px;}