body{margin: 0; padding:0; background-color: #CCC;}

#screenLeft{width: 0%; background-color: #FFF; position: fixed; left:0; height: 100%; z-index: 999;}
#screenRight{width: 0%; background-color: #FFF; position: fixed; right:0; height: 100%; z-index: 999;}

#menu {z-index: 998; background-color: #000; color: #FFF; margin-bottom:0px; padding:0; position: fixed; top:0;width: 100%; border-bottom: 3px #999 solid;}
#menu #titleBar{max-width: 1024px; margin: 0 auto;height: 3.3em;}
#menu #titleBar h1{font-family: 'Roboto Slab', arial, sans-serif; font-size: 1em; max-width:1024px; padding:15px 0 10px 20px; float:left;margin: 0; text-transform: uppercase;}
#menu #titleBar h1 a{color: #FFF;/*ee4037*/ text-decoration: none;}
#menu #titleBar h1 a:hover{color: #FFF;}
#menu #titleBar img{float: right; padding: 12px 20px 0 0;cursor: pointer; cursor: hand; }


#menu ul{text-decoration: none; background-color: #666; list-style-type: none; padding:0; margin:0 auto; max-width: 1024px; max-height: 86vh; overflow: auto;}
#menu ul li{background-color: #CCC; border-top: 1px dotted #666;  padding:8px 0 8px 20px; margin:0; font-family: arial, sans-serif; }
#menu ul a li:hover{background-color: #FFF;}
#menu ul a {text-decoration: none; color:#000;}
#menu ul a.current {color:#999;}
#menu ul li.tbd{text-decoration: line-through; color:#666;}
#menu ul li.map{background-color: #999; color:#FFF;}
#menu ul li.map:hover{background-color: #ee4037; color:#FFF;}

#menu-ul {display: none;}

	/*scrollable menu*/
	#menu_container{overflow-y:scroll;}
	.menuNew#menu-ul{overflow-y:auto; height: auto;}
	ul#menu-ul a li.new:after{content: " * NEW *"}


#container {width: 100%; max-width: 1024px; margin:0 auto; padding: 0; background-color: #FFF;}
#container .illustration {width:100%; min-height: 400px;}
#container .illustration img {width: 100%;}

#container .illustration img.comicPanel {width: 100%; display: inline-block;}


#container .illustration{position: relative; z-index: 997;}
#container .illustration a #randomImageText{position: absolute; bottom: 60px; background-color: rgba(0, 0, 0, .7); margin: 0; padding: 20px; }
#container .illustration a:hover #randomImageText{background-color: rgba(0, 0, 0, .8);}
#container .illustration a #randomImageText h3, .illustration a #randomImageText h4{color:#FFF; padding:0; margin:0;}
#container .illustration a #randomImageText h4{text-transform: uppercase; color: #999;}


#container #titleBlock{padding: 0 20px 0 20px;}
#container .openingParagraphs{padding: 0 40px 0 20px;  text-align: left;}
#container a{/*background-color: #fdf63f;*/ color:#000; text-decoration: underline}
#container a:hover{text-decoration: underline; color:#ee4037;}
#container #story {border-top: none /*1px dotted #EEE*/; margin:30px 0 0 0;}
#container #story p{padding:0px 20px 0 20px; text-align: left;}

#container #story .introText{font-size: 1.5em; margin-top: 50px; padding-top:30px; font-family: Arial, sans-serif;}
#container #story .introText .presentedBy {float:right;font-size:.8em; padding-bottom:10px}

#story img{width: 100%; margin:40px 0; padding:0;}
#story img.columnWidth{margin:40px 0 0 0;}

.hideMobile{display: none;}
.asia{color:#ee4037;}
.rfaTagline{display: none; color:#666; font-weight: normal; font-family: Arial, sans-serif; text-transform: none;}

h4#byline{display: none; float: left; color:#ee4037;}
h4#byline a{background-color: transparent; color:#ee4037; text-decoration: none;}


/*#sharingLinks{display: none;}*/
.share{float:right;}
#sharingLinks{position: fixed; right:55px; top:7px; z-index: 999;pointer-events: none}
#sharingLinks a{display: inline-block;float:none; background-color: transparent;height: 35px; width: 35px;pointer-events: auto;}
#sharingLinks a#facebook{background: url(../images/share_facebook_small.png)}
#sharingLinks a#twitter{background: url(../images/share_twitter_small.png)}
#sharingLinks a#rfa{display: none;}


#headline{color: #999;}
#container h2 {font-family: 'Roboto Slab', arial, sans-serif; font-size: 2.5em; line-height: 1em; margin: 0px 0 10px 0; padding:20px 0 0 0;}
#container h3, #container h4{font-family: arial, sans-serif;}
#container h3 {font-weight: normal; font-size: 1.6em; margin:0; padding:0; margin-bottom: 30px;}
#container h4 {color:#ee4037;}
#container h5 {background-color: #ee4037; color:#FFF; font-family: arial, sans-serif; padding: 4px 0 4px 20px;margin: 55px 0 10px 0; }
#container h5 {display: block;}
#container #titleBlock h5 {display: none;}

.firstcharacter { float: left; color: #000;/*#ee4037*/; font-size: 4em; line-height: .9em; padding-top: 0px; padding-right: 8px; padding-left: 3px; font-family: 'Roboto Slab', arial, sans-serif; }
.openingParagraphs p {font-size: 1.25em; line-height: 1.5em;}
.clearIt{clear: both;}

#story .fullWidth{margin-bottom: 0; padding-bottom: 0;}
#story .fullWidth img{margin: 4px 0 0 0; padding: 0;}
#story .fullWidth #map_canvas{margin: 4px 0 10px 0; padding: 0;}

/*style='width:49.7%; float:left;margin-right:5px;'*/
#story p.cutline{font-family: arial, sans-serif; font-size: .85em; line-height: 1.25em; font-weight: bold; margin-top: 10px; margin-bottom: 40px; padding-top:0;}
.credit {font-family: arial, sans-serif; font-size: .85em; font-weight: normal; text-align: right; color: #666; padding-right: 40px; margin-bottom:40px;}

.mugshot {float: right; margin-left: 20px; margin-bottom: 20px; border-bottom: 10px solid #ee4037; padding-bottom: 5px;}
.mugshot img{/*border: #999 1px solid*/}
.mugshot p{font-family: Arial, sans-serif; margin: 0; padding:0; font-size: 1em;}
.mugshot p.name{font-weight: bold;}
.mugshot p.title{font-size: .8em;}

.mugshot.double {width: 90%;padding:0;margin:0 5%;float:none;}

#container #story .mugshot {border-bottom: none; padding-right: 20px;}
#container #story .mugshot p{padding: 0; margin: 0; width: 100%;}
#container #story .mugshot img {margin: 10px 0; border: none;}


p.pullquote {font-family: 'Roboto Slab', arial, sans-serif; font-size: 1.2em; line-height: 1.4em;}

#navigation #next{position: fixed; right:0; bottom:0; width:40px; height: 100px; background: url('../images/buttonRight.png' ) no-repeat 100% 50%; text-decoration: none;}
#navigation #next:hover{background: rgba(0, 0, 0, 0) url('../images/buttonRightHover.png') no-repeat 100% 50%; text-decoration: none;}
#navigation #prev{position: fixed; left:0; bottom:0; width:40px; height: 100px; background: url('../images/buttonLeft.png') no-repeat 0% 50%; text-decoration: none;}
#navigation #prev:hover{background: url('../images/buttonLeftHover.png')no-repeat 0% 50%; text-decoration: none;}


/*Photo grid*/
#container #photos h3{padding-left: 20px; color: #999; font-weight: normal;}
#container ul.grid{padding: 0; margin:0;}
#container ul.grid a {background-color: transparent;text-decoration: none;}
#container ul.grid li {position: relative; border-bottom: 1px solid #CCC;}
#container ul.grid a:hover, #container ul.grid a:hover li h4.name {text-decoration: none; color:#000;}
#container ul.grid a:hover li {background-color: #EEE;}
#container ul.grid li, #container ul.grid li h4, #container ul.grid li h6, #container ul.grid li p{padding: 0; margin:0;}
#container ul.grid li img{display: inline-block; height: 55px;padding: 0 0 0 20px; margin:0;}
#container ul.grid li div{display: inline-block;padding: 5px 0 0 10px; margin: 0; vertical-align: top;}
#container ul.grid li h4{font-size: 1.3em; color:#000; }
#container ul.grid li p.description{display: none; font-family: Arial, sans-serif;}
#container ul.grid li div h6{color: #ee4037; font-family: Arial, sans-serif; font-size: .8em; text-transform: uppercase;}


/*map infobox styles*/
#container h3.insetHeadline{margin-top: 50px; padding-left: 20px; color: #999;}
#map_canvas { height: 320px; width: 100%; margin:0 auto 10 auto; padding-bottom: 0; }

#map_canvas .mapBox{
	width:225px;
	padding: 0px 0 10px 10px;
}
#map_canvas .mapBox h4{
	text-transform: uppercase;
	margin-bottom: 0;
	padding-bottom: 0;
	margin-top: 0;
}
#map_canvas .mapBox h3{
	margin:0 0 10px 0;
	padding:0;
	font-family: Arial, sans-serif;
	font-weight: bold;
}
#map_canvas .mapBox p{
	margin:0;
	padding:0 0 10px 0;	
	height: 5em;
	overflow:hidden;
}
#map_canvas .mapBox a{
	text-decoration:none;
	color:#333;
}

#map_canvas .mapBox a:hover h3{
	text-decoration:underline;
	color:#000;
}

#map_canvas .mapBox a:hover p{
	text-decoration:none;
}

#map_canvas .mapBox a:visited{ 
	color:#666;
}
#map_canvas .mapBox a img{
	float:left;	
	margin: 0 10px 10px 0;
}

/*footer*/
#footer{margin: 50px 0 0 0; padding: 20px 0 20px 0px; background-color: #333; color:#FFF;overflow: hidden;}
#footer .column {padding-left: 20px;}
#footer .column h3{font-family: 'Roboto Slab', arial, sans-serif; font-size: 1.3em; line-height: 1.3em; color:#CCC;}
#footer .column ul a {text-decoration: none;}
#footer .column ul a li {background-color: transparent; color: #FFF;}
#footer .column p {margin-bottom: 2em;}
#footer .column p, #footer .column ul a li{font-family: arial, sans-serif; line-height: 1.5em;}
#footer .column#quote{display: none;}
#footer .column#quote a:hover h3{color: #999;}
#footer .column#follow {padding-left: 0px;}
#footer .column#follow h3{padding-left: 20px;}
#footer .column#follow ul{list-style-type: none;  padding-left: 0; margin-left: 0;width: 100%;}
#footer .column#follow ul a li{width: 100%; border-top: 1px dotted  #FFF; border-top: 1px dotted #666; padding: 10px 0 10px 20px;}
#footer .column#follow ul a:hover li{background-color: #999;}
#footer .column#follow ul a:hover {text-decoration: none;}
#footer .column#about p a {color:#FFF;}
#footer .column#about p img {padding-right:10px; padding-bottom: 10px; float:left;}

/*clears floats*/
.cleardiv{clear:both}


/*center the iframe for videos and embeds*/
iframe{margin:0 auto 30px auto; display:block;}

@media screen and ( max-width: 320px ) {
	#footer .column#about p img {padding-right:10px; padding-bottom: 10px; float:left; width:40%; height:auto;}
}


@media screen and ( min-width: 320px ) {
	#container #photos{margin:0 auto; width: 90%;}
	#container #photos h3{padding-left: 0px}

	#container ul.grid li div{display: inline-block;padding: 0; margin: 10px 0 0 0; vertical-align: top;}

	#container ul.grid li p.description{/*overflow: hidden; height: 40px; */display: block; }
	#container ul.grid li, #container ul.grid li h4, #container ul.grid li h6, #container ul.grid li p{padding: 0; margin:0;}
	#container ul.grid li {display: inline-block; width: 47%; margin: 0 2% 20px auto; border-bottom: none;}

	#container ul.grid a:hover li div h4 {text-decoration: underline; color: #ee4037}
	#container ul.grid a:hover li {background-color: transparent;}

	#container ul.grid li img{display: block; width: 100%; height: auto; padding: 0; margin:0; border: #FFF 3px solid;}
	#container ul.grid a:hover li img{border: #000 3px solid;}
	#container ul.grid li div h6{position: absolute; top:3px; left: 3px; background-color: #000; color: #FFF; font-family: Arial, sans-serif; font-size: .8em; padding: 5px;}
	


}

@media screen and ( min-width: 400px ) {
	#menu #titleBar h1{font-size: 1.2em;}

	#sharingLinks a#facebook{background: url(../images/share_facebook.gif)}
	#sharingLinks a#twitter{background: url(../images/share_twitter.gif)}
	.hideMobile{display: inline-block;}

	#container .illustration img.comicPanel {width: 49%;}
	#container .illustration img:nth-child(3), #container .illustration img:nth-child(4){ margin: 0; padding:0;}
}




@media screen and ( min-width: 600px ) {
	.rfaTagline{display: inline-block;}
	#sharingLinks{display: block;}

	#container .illustration {width: 59%; float:left; margin-right: 2%; min-height: 500px;}
	#container h2 {font-size: 3.5em; }
	.credit {margin-bottom:0px;}

	#container .openingParagraphs{padding: 0 20px;}
	
	#story p{width: 70%; margin:20px auto 1em auto; padding:0; font-size: 1.1em; line-height: 1.7em;}
	#container #titleBlock h3 {margin-bottom: 20px;}
	#story p.cutline{font-size: 1em; line-height: 1.5em; }

	#container #story .mugshot {padding-right: 15%;}


	#container h3.insetHeadline{margin: 50px auto 10px auto; padding:0; width: 70%;}

	#container #photos{margin:0 auto; width: 70%;}
	#container #photos h3{padding-left: 0px}

	#container ul.grid li div{display: inline-block;padding: 0; margin: 10px 0 0 0; vertical-align: top;}

	#container ul.grid li p.description{/*overflow: hidden;  height: 40px; */display: block;}
	#container ul.grid li, #container ul.grid li h4, #container ul.grid li h6, #container ul.grid li p{padding: 0; margin:0;}
	#container ul.grid li {display: inline-block; width: 47%; margin: 0 2% 20px auto; border-bottom: none;}

	#container ul.grid a:hover li div h4 {text-decoration: underline; color: #ee4037}
	#container ul.grid a:hover li {background-color: transparent;}

	#container ul.grid li img{display: block; width: 100%; height: auto; padding: 0; margin:0; border: #FFF 3px solid;}
	#container ul.grid a:hover li img{border: #000 3px solid;}
	#container ul.grid li div h6{position: absolute; top:3px; left: 3px; background-color: #000; color: #FFF; font-family: Arial, sans-serif; font-size: .8em; padding: 5px;}

	.mugshot.double {width: auto;float: right; margin: 0 0 20px 20px; border-bottom: 10px solid #ee4037; padding-bottom: 5px;}

	#story img.columnWidth{width:70%; margin:0 15%;}

	#story .fullWidth img{display: inline-block; width: 49.5%; margin: 0 auto; padding:0; border:none; float:right;}
	#story .fullWidth #map_canvas{display: inline-block; width: 49.5%; margin: 0 auto 10 auto; padding:0; border:none;}

	#container .illustration a #randomImageText{
		-webkit-border-top-right-radius: 10px;
		-webkit-border-bottom-right-radius: 10px;
		-moz-border-radius-topright: 10px;
		-moz-border-radius-bottomright: 10px;
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px; 
	}


	#map_canvas { height: 320px; width: 70%; margin:0 auto 10px auto; padding-bottom: 0; }

	#footer {padding-top:0;}
	#footer .column{width: 60%; float:left;margin-bottom: -99999px;padding-bottom: 99999px; margin-right: 3%; padding-top:20px; padding-right: 3%; border-right: 1px dotted #666;}
	#footer .column:nth-child(3){padding-right: 0%; border-right: none; width: 20%;}
}

@media screen and ( min-width: 800px ) {
	body{background: url(../images/paper.jpg) no-repeat center center fixed; 
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;}


	#menu #titleBar h1{font-size: 1.5em; padding:10px 0 10px 20px; }

	#navigation #next{ width:40px; height: 90%; background: url('../images/buttonRight.png' ) no-repeat 100% 50%;}
	#navigation #next:hover{background: rgba(0, 0, 0, 0) url('../images/buttonRightHover.png') no-repeat 100% 50%;}
	#navigation #prev{width:40px; height: 90%; background: url('../images/buttonLeft.png') no-repeat 0% 50%;}
	#navigation #prev:hover{background: url('../images/buttonLeftHover.png')no-repeat 0% 50%;}

	.share{float:right;}
	#sharingLinks{position: fixed; right:0; top:20%;z-index: 990;}
	#sharingLinks a{display: block;float:none;}
	#sharingLinks a#facebook{background: url(../images/share_facebook.jpg)}
	#sharingLinks a#twitter{background: url(../images/share_twitter_color.gif)}
	#sharingLinks a#rfa{background: url(../images/rfa.png); display: block;}


	#container .illustration {width: 50%; float:left; margin-right: 0; padding-right: 0;}
	#container .illustration img {padding-top: 50px;}
	
	#container #titleBlock{width:40%; margin-right: 3%; float:right; margin-top: 100px}

	#container h5 {display: none;}
	#container #titleBlock h5 {display: inline-block; margin-top: 0; padding-left: 10px; padding-right: 10px;}

	#container h2 {margin-top: 100px; font-size: 3em; margin: 0 0 10px 0; padding:0;}
	#container h3 {font-weight: normal; font-size: 1.8em; margin:0; padding:0;}

	.openingParagraphs {width:40%; margin-right: 3%; float: right;}
	.clearIt{clear: both;}
	#story {width: 100%; margin:20px 0 0 0; padding:0 !important; border-top:none;}
	#story img{width: 100%; margin:2em 0; padding:0;}
	#story p{width: 70%; margin:0 auto 1em auto; font-size: 1.1em; line-height: 1.7em;}

	.credit {padding-right: 0;}
	
	#story p.pullquote {font-family: 'Roboto Slab', arial, sans-serif; font-size: 1.8em; line-height: 1.6em; float:right; width: 30%; margin-left: 50px;}


	#container ul.grid li {display: inline-block; width: 31%; margin: 0 1.5% 30px auto;}
	#story .fullWidth img{display: inline-block; width: 49.7%; margin: 0; padding:0;}


	#footer .column{width: 33%; float:left;margin-bottom: -99999px;padding-bottom: 99999px; margin-right: 3%; padding-right: 3%; border-right: 1px dotted #666;}
	#footer .column:nth-child(3){padding-right: 0%; border-right: none; width: 13%;}
	#footer .column#quote{display: block;}
	#footer .column#quote a{text-decoration: none;}
	#footer .column#quote p{color: #FFF;}

}

/*Anchor the sharing icons to the side of the #container on wide screens*/
@media screen and ( min-width: 1100px ) {
	#container{border-left: #DDD solid 1px; border-right: #DDD solid 1px;}

	#sharingLinks{position: fixed; width:1059px; right:auto;}
	#sharingLinks .box{width: 35px;float:right;background-color: #999;}
	#sharingLinks a{display: block;float:none; }

	#story .fullWidth img{display: inline-block; width: 49.7%; margin: 0; padding:0;}
}


@media screen and ( min-height: 700px ) {
	#menu ul{max-height: none;}
	/*#menu_container{max-height: 90vh; overflow-y:scroll;}*/
}

/*Styles to make it look pretty when you print it*/
@media print {
	body{font-size: .8em;}
    #menu, #navigation, #sharingLinks, #footer .column:nth-child(2), #footer .column:nth-child(3) {display: none;}

	#footer{margin: 50px 0 0 0; padding: 20px 0 0 0; background-color: #FFF; color:#999; border-top: #CCC solid 1px;}
	#footer .column {padding-left: 0px; margin: 0;}
	#footer .column h3{font-family: 'Roboto Slab', arial, sans-serif; font-size: 1.1em; line-height: 1em; color:#CCC; margin: 0; padding:0;}

    #container .illustration{display: inline-block; width: 50%;float:left; margin-right: 20px;}
    #container .illustration img.comicPanel {width: 49%;}
	#container .illustration img:nth-child(3), #container .illustration img:nth-child(4){ margin: 0; padding:0;}


	#container #titleBlock, #container .openingParagraphs{padding: 0px;}
	#container #story {margin:30px 0 0 0;}
	#container #story p{padding:0px;}
	#container h5 {background-color: #FFF; color:#ee4037; font-family: arial, sans-serif; padding: 0px;margin: 20px 0 0 0; }
	#container h5 {display: block;}

	#story p.pullquote {font-size: 1.4em; line-height: 1.6em; float:right; width: 40%; margin-left: 50px;}

}