/* CSS Document */

body, div, p, th, td, li, ul, dd {
 font-size: 100%; 
 font-family: Arial, Helvetica, sans-serif;  }

body { background-color:#000; color:#333; margin: 0px; padding: 0px; }

/* page types */

#storyhome { width: 780px;  background-color:#000; text-align: left;}

#template { width: 780px;  background-color:#FFF; text-align: left;}

/* generic properties */

h1, h2, h3, h4, h5 { 
    font-family:"Trebuchet MS", Georgia, "Times New Roman", Times, serif; }
h1 { font-size: 1.5em; }
h2 { font-size: 1em; }
h3 { font-size: .8em; }

h1 span.bg { background-color: #D32700; 
	padding: 0px 5px; 
	color: #fff; }

img { border: none; }

span.cap { 
	font-family:"Trebuchet MS", Georgia, "Times New Roman", Times, serif; 
	font-size: 1.5em; 
	color: #D32700; 
	font-weight: bold; }

p { font-size: .8em; }

p.help { font-size: .7em; }

.imgcaption div.txt {
	text-align: right; margin-top: 1px; margin-bottom: 2px; 
	font-size: .7em; margin-right: 10px; }
	
.imgcaptionright { float: right; 
    background-color: #D32700; margin-left: 10px; }
	
.imgcaptionright div.txt {
	text-align: right;
	font-size: .7em; 
	margin-top: 1px; margin-bottom: 2px; 
	margin-right: 10px; } 

a:link, 
a:visited { color: #D32700; text-decoration: none; }
a:active, 
a:hover { color: #552D21; text-decoration: none; }

a.continue { font-variant: small-caps; font-weight: bold; }
a.continuewhite { font-variant: small-caps; font-weight: bold; color: #FFF;}

.clear { float:none; clear:both; margin: 0px; padding: 0px; }
	
/* template header */

.header { margin: 0px; padding: 0px; }
.storyheader { margin: 0px; padding: 0px;
	background-image:url(../images/storyheader.jpg);
	background-repeat: no-repeat; 
	background-color: #333; }

.storyhome { position: relative; float: left; margin-top: -15px; position: relative; left: 15px; 
font-variant: small-caps; 
font-size: .7em; background-color: #D32700; 
padding: 3px 8px 3px 8px }
.storyhome a:link, 
.storyhome a:visited { color: #fff; text-decoration: none; }
.storyhome a:active, 
.storyhome a:hover { color: #ccc; text-decoration: none; }

.storyairson { position: relative; float: right; margin-top: -20px;
font-variant: small-caps; 
font-size: .7em; color: #ccc; margin-right: 10px;}
.storyairson a:link, 
.storyairson a:visited { color: #fff; text-decoration: none; }
.storyairson a:active, 
.storyairson a:hover { color: #D32700; text-decoration: none; }


/* template story body */
.storybody { background-color: #FFFFFF; }
.storybody p { margin: 15px 24px 15px 24px;  }

.storybody .topleft { width: 200px; color: #FFF; float: left; }

  /* diaries navblock */
.navblock { 
	clear:both; 
	background-color:#E3D9D1; 
	width: 200px;
	text-align: right; 
	font-size: .7em; 
	background-color:#E3D9D1; 
	padding: 2px 0px}
	
.navtitle { 
	background-color: #D32700; 
	margin-bottom: 1px;
	text-align: center;  
	width: 200px;
	font-size: 1.5em; 
	font-family:'Trebuchet MS', Georgia, 'Times New Roman', Times, serif }

.storybody .topright { float:right; width: 564px; }
.storybody .topright .image { margin-left: 24px;
 	font-size: .7em; font-style: italic; }
.storybody .topright .image img { 
	border: 1px solid #D32700; }

.storybody .left { float: left; width: 500px; }
.storybody .left p { margin: 15px 0px 15px 24px;  }

.storybody .right { float: right; width: 210px; }
.storybody .right p { color: #552D21; 
   margin: 0px 15px; }

.storybody h2 { margin: 15px 24px 15px 24px; color: #333; }

.storybody h3 { margin: 15px 24px 15px 24px; color: #D32700; }

.storybody font.highlight { color: #D32700; }

.storybody h1 { margin: 0px 0px 15px 24px; }

.storybody .introtitle { 
	background-color: #D32700;
	color: #fff; margin-left: 0px;
	padding: 2px 10px;   }

.storybody .introtext { 
    color: #5A4D3E; 
	font-style: italic; 
	line-height: .85em; }
	
.storybody .introtext p { 
	margin: 10px 24px;  }

a.backtotop { margin: 15px 24px 15px 24px; font-size: .8em; }

.storybody .right .related { 
    background-color: #EEE; 
	color: #333333; 
	padding-bottom: 20px;   
	width: 210px; 
	float: right; }

.related font.highlight {
	color: #D32700;
	font-style: italic; }
 
.storybody .rightfifty .related { 
    width: 390px; 
	background-color: #EEE; 
	color: #333333; 
	padding-bottom: 20px;}

.storybody .right .related .header,
.storybody .rightfifty .related .header { 
    background-color: #D32700; 
    color: #FFFFFF; 
    font-variant: small-caps; 
	font-size: .7em;
	padding: 3px 0px 3px 15px;
	margin-bottom: 10px; }

.storybody .right .related p,
.storybody .rightfifty .related p {
	/* margin: 0px 15px;
	padding: 5px 0px; */
	font-size: 0.7em;}

.storybody .related .active img,
.storybody .related .on img { 
    border: 1px solid #000; margin-bottom: 20px; padding: 0px; }
	
.storybody .right .related ul, .storybody .rightfifty .related ul { 
	margin: 5px; padding-left: 15px; }
.storybody .right .related li, .storybody .rightfifty .related li {
	list-style-position: inside; 
	list-style-type: square; font-size: .8em;
}
.storybody .right .related li.highlight,
.storybody .rightfifty .related li.highlight {
    font-weight: bold; color: #D32700;  }

div.active { filter: alpha(opacity=60);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
 -moz-opacity: 0.60; opacity:0.6; }
 
div.active:hover { filter: alpha(opacity=100);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
 -moz-opacity: 1.0; opacity:1.0; }
 
img.interview {  margin: 0px 5px 0px 0px; }
.active img.interview {  margin: 0px 5px 0px 0px; }

.storybody h1 span.interviewheader {
	background-color:#D32700;
	color: #FFF; 
	font-weight: bold;
	font-stretch: expanded;
	letter-spacing: .1em;
	padding: 0px 5px 0px 5px;
}
	
.storybody h2.pullquote {
	margin: 24px;
	text-align: right;
	color: #D32700;
	line-height: 30px;
}

.storybody h2.pullquoteinline {
	margin: 24px 24px 24px 520px; 
	width: 200px; 
	position: absolute;
	text-align: right;
	color: #D32700;
	line-height: 25x;
}

.storybody p.bio {
    font-weight: bold; 
	font-style: italic;
	text-align: left;
	color: #D32700;
	line-height: 16px;
	margin: 24px;
}


/* template navigation */

#nav { /* width: 780px; */
   margin-top: 0px; padding: 0px; 
   left: 0px; position: relative; 
   margin-bottom: 3px; }

#nav span.navsm {
	/*font-variant: small-caps;
	font-weight: normal;
	text-transform: uppercase;*/
	font-size: 100%; 
	}
	
#nav a { text-decoration: none; 
   color: #000000; }

#nav ul {
	margin: 0px 0px 0px 0px; 
	padding: 10px 0px 0px 0px; 
	list-style-type: none; 
        width: 780px; }

#nav li { float: left; }
   
#nav li {
	width: auto;
	font-size:11px;
	font-family:Arial, Helvetica, sans-serif;
	border-left: 2px solid #D32700;
	font-weight: bold;
	text-align: left;
	vertical-align: middle;
	margin: 0px; padding: 5px 24px; 
    float: left; color: #999; }

#nav li.borderoff { border: none; margin-left: 35px;} 

#nav li a {
	width: auto;
	font-size:11px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-align: left;
	vertical-align: middle;
        float: left; }

#nav li a.one { border-left: 2px solid #fff; }

#nav li a:hover {
	width: auto;
	color: #D32700;
	font-weight: bold;
	text-align: left;
	vertical-align: middle;
	float: left; 
}

/* navigation indicator - set id in body tag for each page */

#one #nav li a.one, 
#two #nav li a.two,
#three #nav li a.three,
#four #nav li a.four,
#five #nav li a.five,
#six #nav li a.six,
#seven #nav li a.seven, 
#eight #nav li a.eight,
#nine #nav li a.nine, 
#ten #nav li a.ten
{ color: #D32700; }

/* Footer */

#footer {
clear: both;
font-size: .7em;
padding-bottom: 10px;
color: white;
background-color: black;
text-align: center;
}

#footer p {
margin: 0px;
padding-top: 10px;
padding-bottom: 0px;
}


#footer a, #footer a:visited {
color: #D32700;
text-decoration: underline;
}

#footer a:hover {
color: #CCC;
text-decoration: underline;
}


/* react */

#reactcontainer { background-color: #eee; 
margin: 25px; padding: 15px; }

#reactcontainer p { font-size: .75em;  }

#reactcontainer td p { font-size: .75em; margin: 0px; padding: 0px;  }

#reactcontainer td {
	vertical-align: top;  margin: 0px; padding: 5px;}

#reactcontainer table { border: 1px solid #000; 
padding: 10px; }

.reactlinkbutton a { border: 1px solid #333; 
background-color: #D32700;
width: 200px; color: #FFFFFF; 
padding: 3px; font-size: .7em; } 

.reactlinkbutton a:link, 
.reactlinkbutton a:visited { color: #fff; text-decoration: none; }
.reactlinkbutton a:active, 
.reactlinkbutton a:hover { color: #ccc; text-decoration: none; }

#reactcontainer p.share { font-size: .9em;
font-weight: bold; margin: 0px 0px 15px 0px; 
padding: 0px;  }

p.introparagraph { font-size: 100%; }

/* red intro paragraph */

.intro { background-color:#D32700; color: #fff; width: 100%;  }
.intro p { padding: 10px 0px; }

.interactivebutton {
	display: block; 
	background-color: #D32700;
	padding: 3px 8px 3px 8px;
	margin: 7px 7px 0px 12px; 
	width: auto; font-size: .7em; 
    font-variant: small-caps;
    font-weight: bold;
    text-align: right; 
	color: #fff; 
	float: left; }
	
/* promo page specific */
.subhead { width: 400px; font-size: .9em; 
font-weight: bold; margin-left: 23px; margin-top: 30px; 
border-bottom: 1px solid #ccc; font-variant: small-caps; }

.promovideo { background-color: #D32700; 
	padding: 15px 0px 5px 0px; }

.right .promovideo p { color: #ccc; 
font-size: .75em; }

.promoleftimage { border: 1px solid #D32700; margin: 0px 15px 5px 25px; }
.promorightimage { border: 1px solid #D32700; margin: 5px;  }

.promovideo a:link, 
.promovideo a:visited { color: #fff; 
text-decoration: none; font-weight: bold;}

.promovideo a:active, 
.promovideo a:hover { color: #fff; 
text-decoration: none; }

.promovideo .previewbutton { 
border: 1px solid #FFF; 
margin-left: 15px;
margin-bottom: 10px; 
font-size: .75em; 
padding: 2px 3px 2px 5px; 
width:145px;  }

.credits { color: #D32700; }

/* slideshow */

#slideshow { width: 740px; margin-left: 59px; height: 600px;  }
#slideshow .margins { margin: 20px 0px; }
#slideshow p { margin: 0px; padding: 0px; }
#slideshow div.left { float:left; width: 140px; }
#slideshow div.right { float:right; width: 600px; }

#slideshow table.thumbnails { 
	margin: 0px; padding: 0px; 
	border-top: 1px solid #D32700; 
	border-left: 1px solid #D32700; }
	
#slideshow table.thumbnails td {
	margin: 0px; padding: 0px; 
	border-bottom: 1px solid #D32700; 
	border-right: 1px solid #D32700; }
	
#slideshow table.thumbnails td a:visited img, 
#slideshow table.thumbnails td a img, 
#slideshow div.imgnav a:visited img, 
#slideshow div.imgnav a img { 
	filter: alpha(opacity=60);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
 -moz-opacity: 0.60; opacity:0.6;}
 
#slideshow table.thumbnails td a:hover img, 
#slideshow div.imgnav a:hover img { filter: alpha(opacity=100);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
 -moz-opacity: 1.00; opacity:1; }

#slideshow .imgnav { 
    text-align: right; 
	margin-right: 100px; 
	margin-bottom: 10px;  }

#slideshow .image img { margin-bottom: 10px; border: 1px solid #D32700; }

#slideshow .caption {
    width: 540px; }

#slideshow .captionleft { 
	float: left; 
	width: 340px; }

#slideshow .imagetitle { 
     font-size: 1em; 
	 font-family: Georgia, 'Times New Roman', Times, serif, 'Trebuchet MS'; 
	 color: #D32700;
	 font-weight: bold; 
	 margin-bottom: 10px;  }
	 
#slideshow .imagetext { font-size: .75em; 
font-family: Arial, Helvetica, sans-serif; }

#slideshow .captionright { 
	float: right; 
	width: 200px; 
	font-size: 1em; 
	color: #D32700;
	font-family: Georgia, 'Times New Roman', Times, serif, 'Trebuchet MS'; 
}
#slideshow .slideshowtitle {
	font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
	margin-bottom: 20px;
	font-size: 1.2em;
	letter-spacing: .05em; }
#slideshow .slideshowtitle span.bg { background-color: #D32700; padding: 0px 5px; }


/* map */

#map { width: 100%; height: 500px }
#map .margins { margin: 0px 24px; }

#map p { margin: 0px; padding: 0px; }
#map div.left { float:left; width: 200px;  }
#map div.right { float:right; width: 500px; }
#map div.right img,
#map div.left table { border: 1px solid #333; }

#map .caption { 
	float: left; 
	width: 400px; }

#map .imagetitle { 
     font-size: 1em; 
	 font-family: Georgia, 'Times New Roman', Times, serif, 'Trebuchet MS'; 
	 color: #D32700;
	 font-weight: bold; 
	 margin: 10px 0px;  }
	 
#map .imagetext { font-size: .75em; 
font-family: Arial, Helvetica, sans-serif; }