a, a:hover, a:visited, a:active {
	color: #000;
	text-decoration: none;
}

/*this is to get the borders right - had a problem w/IE showing blue border around the images. this is the only thing i found to work - must class the image only, not the link. DO NOT declare a border in HTML either, will screw things up */
.photoborder {
	border:1px; border-thickness: 1px; border-color: #000000; border-style: solid;
} 

a.photoborder, a.photoborder:hover, a.photoborder:visited, a.photoborder:active {
	border: none;
} 

.mainnav {
	font-family: Arial;
	font-size: 11px;
	font-weight: bold;
}

#logopic {
	width: 154px;
	height: 120px;
	/*new
	/*text-align: center; make star centered */	
}

#logopic a {
	display: block;
	height: 118px;
	background: url(images/logo_sliced_a.jpg) no-repeat;
	overflow: hidden;
}

#logopic a:hover {
	display: block;
	height: 118px;
	background: url(images/logo_sliced_a_star.jpg) no-repeat;
	overflow: hidden;
}

#logopic img {
  visibility: hidden;
}

/*end new for logopic*/


#navwrapper {
	height: 120px; /* to give enough space for cmac image */
	width: 600px;
	background: url(images/logo_sliced_b1.jpg) no-repeat;
}


/************FROM SUCKERFISH DROP-DOWNS - HEAVILY MODIFIED******************************************/
/****3/30/07 all new nav. got rid of navHOME, 1st level lists are white, logo_sliced_a is now a rollover link to home ***/

#nav, #nav ul { /* all lists */
	padding: 0; /*removes indent IE and Opera*/
	margin: 0; /*removes indent Mozilla and NN7*/
	list-style: none; /*turns off display of bullet*/
	line-height: 1;
	width: 600px;
	z-index: 1;
	/*border: solid 1px #0f0; for debugging purposes */
}

#nav a { /*all links */
	display: block;
	text-decoration: none; /*removes underline from links*/
	/*color: #000;*/
}


#nav li a { /*aligns the 1st level lists and the star image as centered */
	text-align: center;
	padding-left: 13px;
	padding-right: 13px;
	color: #fff; /*new*/
}

#nav li ul a { /*aligns the second level lists to the left of their box - looks better than centered */
	text-align: left;
	padding: 0px;
	color: #000; /*new*/
}

#nav a img{ /* hides any images within <a> tags */
	visibility: hidden;
}

#nav a:hover {
	color: #fff;
}

#nav li a:hover { /*aligns the 1st level lists and the star image as centered */
	color: #000; /*new*/
}

#nav li { /* all lists*/
	float: left;
	/*width: 10.5em; width needed or else Opera goes nuts - it didn't so guess i don't need it */
	padding-bottom: 3px; /*gives space between the top-level list elements and the bottom of the cmac image */
	padding-top: 75px; /*pushes all lists down to bottom */
	/*border: solid 1px #00f; for debugging purposes */
}


#nav li ul li { /* 2nd level lists*/
	float: left;
	width: 118px;/* new - used to be 10em. width needed or else Opera goes nuts - overrides the width from #nav li */
	padding: 1px; /*specifically overrides the padding-top: 75px from the #nav li declaration so that second level lists are one one top of the other */
	/*text-align: left;*/
	/*border: solid 1px #00f; for debugging purposes */
}



#nav li ul { /* second-level lists */
	position: absolute;
	border: solid 1px #000;
	border-top: none;
	width: 118px;/*new - used to be 10em;*/
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	padding-top: 3px; /*gives space between the bottom edge of the top-level list and the text */
	margin-top: 3px; /*aligns the border to the bottom of the top-level list */
	background: #fff;
}

#nav li ul ul { /*3rd level lists */
	margin: -1em 0 0 9em;
	padding: 0; /* take the padding down so that the 3rd level is in line with the 2nd level */
	width: 6em; /* don't need to be as wide as the 2nd level*/
	border: solid 1px #000; /* make the border all the way around */
}

#nav li:hover ul ul, #nav li.sfhover ul ul { /*hide the 3rd level list */
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* display lists nested under hovered list items */
	left: auto;
}

#nav li:hover img, #nav li.sfhover img {
	visibility: visible; /* displays star image when any li is hovered */
}

#nav ul li ul li a:hover { /*second-level lists - when you hover on their links*/
	background-color: #000;
	width: 10em;
	color: #fff; /*new*/
}

#nav ul li ul li ul li a:hover { /*third-level lists - when you hover on their links*/
	background-color: #000;
	width: 6em;
	color: #fff; /*new*/
}

/**********************DONE WITH NAV******************/
#contentMAINPAGES { /*right indent these pages and align under last hump of "m" in cmacpictures logo */
	clear: left;
	color: #000;
	margin: 0px;
	min-height: 600px;
	/*padding-left: 20px;*/
	background: url(images/background.jpg);
	background-repeat: no-repeat;
}

#contentSUBPAGES {
	background: url(images/background.jpg);
	background-repeat: no-repeat;
	min-height: 600px;
	height: auto !important;
    height: 600px;
}

#contentSUBPAGES_FILM { /*left indent these pages and align under the lens of camera of girl in logo - NOT USING THIS STYLE IN V4, CAROLYN DOESN'T WANT THIS ALIGNMENT ANYMORE, BUT KEEPING STYLE IN CASE NEED TO REVERT*/
	clear: left;
	color: #000;
	margin: 0px;
	min-height: 600px;
	padding-left: 62px;
	background: url(images/background.jpg);
	background-repeat: no-repeat;
}

#contentSUBPAGES_PHOTO { /*left indent these pages and align under the left hair of girl in logo. also no background image - gets in the way of the photos */
	clear: left;
	color: #000;
	margin: 0px;
	min-height: 600px;
	padding-left: 37px;
}

div.row { 
  	clear: both;
  	padding-top: 10px;
}

div.row span.thumb {
  	float: left;
  	width: 150px;
  	text-align: left;
}

span.thumb img {
	margin-bottom: 13px;
	margin-right: 10px;
}

div.row span.thumbtrips, span.enlargetrips { /*for the triptychs - display inline */
  	float: left;
  	text-align: left;
}

span.thumbtrips img {
	margin-bottom: 73px;
	margin-right: 10px;
}

div.row span.enlarge {
  	float: right;
  	width: 495px;
  	text-align: right;
	padding-right: 70px;
} 


/*need to redefine the same span for the caption in order to get it to align right in IE. works fine in firefox and opera 9. */
div.row span.caption {
  	float: right;
  	width: 495px;
  	text-align: right;
	padding-right: 70px;
}

div.row span.enlargeVertical { /*to account for 6 inch wide portraits - the verticals */
  	float: right;
  	width: 455px;
  	text-align: right;
	padding-right: 110px;
} 

div.row span.enlargePilot6 { /*for the pilot 6/holgas - they are only 432px wide instead of 468px */
  	float: right;
  	width: 455px;
  	text-align: right;
	padding-right: 106px;
} 
div.row span.captionPilot6 { /*for the pilot 6/holgas - they are only 432px wide instead of 468px */
  	float: right;
  	width: 455px;
  	text-align: right;
	padding-right: 106px;
} 



#contentHOME {
	clear: left;
	margin: 0px;
	min-height: 600px;
	padding-left: 20px;
	background: url(images/backgroundHOME_new1.jpg);
	background-repeat: no-repeat;
}


#footer {
	font-family: Arial;
	font-size: 9px;
	text-align: center;
	margin-top: 40px;
	margin-bottom: 0px;
}


.pageheader {
	font-family: Arial;
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
	color: #000000;
}
.pagenav {
	font-family: Arial;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	color: #000000;
}
.instructions {
	font-family: Arial;
	font-size: 11px;
	color: #000000;
}

.tagline {
	font-size: 16px;
	color: #CC0000;
	font-weight: bold;
	font-family: Arial;
	margin-top: 80px; /*was originally 350px, had to shift up (300px) b/c the drop-down menus got bigger. then shifted again. */
	margin-left: 20px;

}

.taglineTEMP { /*use this one while the "under construction" is up under header. */
	font-size: 16px;
	color: #CC0000;
	font-weight: bold;
	font-family: Arial;
	margin-top: 325px;
	margin-left: 20px;

}

#nav a.current img, #navHOME a.current img{ /* makes the star over the current page visible always, just define <a class="current" ...> around the current page nav link */
	visibility: visible;
}

.bodytext {
	font-size: 12px;
	color: #000000;
	font-family: Arial;
}

.button {
	font-family: Arial;
	font-size: 17px;
	font-weight: bold;
	color: #000000;
	/*background-color: #CCCCCC;*/
	/*padding: 5px;*/
	position: relative;/*adding a margin to this only pushed EVERYTHING down on the page including the #contentHOME bg image. it wasn't until i added the position: relative and used those coordinates to push the button down from the top of the page, did it work. this leaves the bg image alone. */
	top:0px;/* new - used to be 75px. made room for pic of day */
	left: 25px;
}


.biotext {
	font-size: 14px;
	color: #000000;
	font-family: Arial;
	padding-left: 70px;
	font-weight: normal;
}

.strong {
	font-weight: bold;
}

.backtotop {
	font-family: Arial;
	font-size: 9px;
	color: #000000;
	font-style: italic;
}

.bodytextindent {
	font-family: Arial;
	font-size: 12px;
	color: #000000;
	padding-left: 20px;
}
.clicktoplay {
	font-size: 12px;
	color: #CC0000;
	font-family: Arial;
	font-weight: bold;
}

a.clicktoplay, a.clicktoplay:hover, a.clicktoplay:visited, a.clicktoplay:active {
	color: #CC0000;
}
.highlight {

	font-size: 12px;
	color: #CC0000;
	font-family: Arial;
	font-weight: normal;
}
a.highlight, a.highlight:hover, a.highlight:visited, a.highlight:active {
	color: #CC0000;
}

.pod {
	position: relative;
	top: 40px;
	left: 25px;
	text-align: left;
}

.embeddedwasp {
	border: solid 1px #000;
	width: 460px;
	height: 260px;
}

#waspTarget0812230653, #waspTarget0812231756, #waspTarget0812203037 {
	border: solid 1px #000;
	width: 460px;
	height: 260px;
}