/* Across the Sea of Stars website CSS */

@media screen {
	html {
		margin: 2em;
		padding: 0;
	}

	article, footer, header, nav {
		display: block;
	}
	
	article {
		float: right;
		margin: 0.5em 0 0.5em 0;
		padding: 0;
		width: 79%;
	}
	
	footer {
		clear: both;
	}
	
	header {
		background-image: url('Images/pillarsOfCreationEagleNebula.jpg');
		background-repeat: no-repeat;
		background-position: center;
		height: 400px;
		width: 100%;
		margin: -2em 0 0 0;
	}
	
	header h1 {
		color: #ffffcc;
		font-size: 350%;
		padding: 300px 0 0 0;
		text-align: center;
	}

	/* Yikes. The GM pages don't need a big, splashy header. */

	header.gmPage {
		background-image: none;
		background-repeat: no-repeat;
		background-position: none;
		height: auto;
		width: 100%;
		margin: /*-2em*/ 0 0 0 0;
	}
	
	header.gmPage h1 {
		background-color: orange;
		border: 3px double black;
		color: black;
		font-size: 250%;
		padding: 0 0 0 0;
		text-align: center;
	}
	
	nav {
		background-color: ivory;
		border: 1px solid #cc3300;
		float: left;
		margin: 1.5em 0 0.5em 0;
		width: 18%;
	}
	
	nav a {
		text-decoration: none;
		font-style: normal;
		font-weight: normal;
	}
	
	nav a:link,
	nav a:visited {
		color: #666666;
	}
	
	nav a:hover {
		color: red;
	}
	
	nav li {
		margin: 0.5em 0 0.5em 0.5em;
		color: #ff0000;
		font-size: 100%;
		font-style: italic;
		font-weight: bold;
	}
	
	nav ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	/* Lynn suggested putting these headers at 150%. */
	article h3 {
		font-size: 150%;
		margin: 0;
		padding: 0;
		text-align: center;
	}
	
	/* These headers are smaller and have the colored border around them */
	article h3#colored {
		background: url(Images/galaxy.gif) 0.2em 0.2em no-repeat;
		background-color: #ff9933;
		border-left: 1px solid #cc3300;
		border-top: 1px solid #cc3300;
		font-size: 125%;
		margin: 0.25em 0 0.25em 0;
		padding: 4px 0 4px 1.75em;
		text-align: left;
	}
}

article a {
	color: #cc3300;
	font-style: normal;
	font-weight: normal;
}

/* There are link targets inside some headers, which get confused when we change
   the CSS for the a tag. We have to restore the desired formatting. */
h3 a.linkTarget {
	color: black;
	font-style: normal;
	font-weight: bold;
}

article a:hover {
	color: #666666;
}

article li {
	padding: 2px 0 5px 3em;
}

article ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

article ul#indent {
	list-style: none;
	margin: 0 0 0 2em;
	padding: 0;
}

body {
	background: #ffffcc;
	color: black;
	font: 100% Century Gothic, Futura, Futura Condensed;
	margin: 0;
	padding: 0;
}

footer, h4 {  /* upload, dammit! */
	border-top: 1px solid black;
	border-left: 1px solid black;
	font-size: 100%;
	margin: 0.5em 0 0 0;
	padding: 0.25em;
}

footer p {
	margin: 0;
	padding: 0;
}

h1 {
	font-size: 200%;
	margin: 0;
	padding: 0;
}

h4 {
	margin: 0;
}

div.importantNote {
	background-color: #ffcc66;
	border: 3px solid black; /* #ffcc00; */
	margin: 0.5em 3em 0.5em 3em;
	padding: 5px;
}

div#quotation,
div.quotation {
	border: 1px solid #ffcc00;
	font-style: italic;
	margin: 0.5em 3em 0.5em 3em;
	padding: 5px;
}

/* This is the best way to center the image inside the block. */
p#centeredImage {
    margin: 0;
    padding: 0;
    text-align: center;
}

p#citation,
p.citation {
	font-size: 80%;
	margin: 0;
	padding: 2px;
	text-align: right;
}

p#quote,
p.quote {
	margin: 0;
	padding: 2px;
}

span#rheaaa {
	white-space: nowrap;
}

table#characterTraits {
	margin: 0 0 0 40px;
	padding: 0;
	vertical-align: top;
}

table#twoColumnList {
	margin: 0 0 0 3em;
	padding: 0;
	vertical-align: top;
	width: 80%;
}

/* Make these pad just like the content li entry */
table#twoColumnList td {
	padding: 2px 0 5px 0;
	width: 50%;
}

table#casting,
table#galaxy,
table#gameStructure, 
table#glossary, 
table#races, 
table#rules,
table#staging {
	border-left: 1px solid #cc3300;
	border-top: 1px solid #cc3300;
	margin: 0;
	padding: 3px;
	vertical-align: top;
}

/* Eliminate the very last weird row bottom */
table#galaxy tr#lastGalaxyRow td,
table#gameStructure tr#lastGameStructureRow td,
table#glossary tr#lastGlossaryRow td,
table#races tr#lastRaceRow td,
table#rules tr#lastRuleRow td {
	border-bottom: 1px solid #ffffcc;
}

table#casting tr#castingHeader td,
table#galaxy tr#galaxyHeader td,
table#gameStructure tr#gameStructureHeader td,
table#races tr#raceHeader td,
table#staging tr#stagingHeader td {
	background-color: #ff9933;
	border-bottom: 1px solid #ffffcc;
	font-weight: bold;
}

table#casting tr#castingRowOdd td#castingName,
table#casting tr#castingRowOdd td#castingRace,
table#casting tr#castingRowOdd td#castingPlayer,
table#staging tr#stagingRowOdd td#stagingToDo,
table#staging tr#stagingRowOdd td#stagingName,
table#staging tr#stagingRowOdd td#stagingPlayer {
	background-color: #ffcc66;
}

table#playtestSchedule {
	background: #ff9933;
	border-left: 1px solid #cc3300;
	border-top: 1px solid #cc3300;
	margin: 0 0 0 40px;
	padding: 0;
	vertical-align: top;
}

td {
	margin: 0 3px 0 0;
	padding: 1px 10px 1px 5px;
	vertical-align: top;
}

td#castingName,
td#castingPronunciation,
td#castingPlayer,
td#galaxyName, 
td#galaxyNotes,
td#gamePeriodTime, 
td#gamePeriodDefinition,
td#glossaryDefinition, 
td#raceDetails, 
td#raceHome, 
td#raceMember, 
td#ruleDefinition,
td#stagingToDo,
td#stagingName,
td#stagingPlayer {
	border-bottom: 1px solid #cc3300;
	font-style: normal;
	font-weight: normal;
	margin: 0 3px 0 0;
	padding: 4px 10px 4px 5px;
	text-align: left;
	vertical-align: top;
}

td#castingRace,
td#galaxyDistance, 
td#galaxyTravel {
	border-bottom: 1px solid #cc3300;
	font-style: normal;
	font-weight: normal;
	margin: 0 3px 0 0;
	padding: 4px 10px 4px 5px;
	text-align: center;
	vertical-align: top;
}

td#castingLeft,
td#galaxyRank, 
td#gamePeriodName, 
td#glossaryTerm, 
td#raceName, 
td#ruleTerm,
td#stagingLeft {
	background: #ff9933;
	border-bottom: 1px solid #ffffcc;
	font-style: normal;
	font-weight: bold;
	margin: 0 3px 0 0;
	padding: 4px 4px 4px 5px;
	text-align: left;
	vertical-align: top;
}

td#galaxyRank {
	text-align: center;
}

td#playtester {
	border-bottom: 1px solid #cc3300;
	border-right: 1px solid #cc3300;
}

td#playtestDate {
	border-bottom: 1px solid #cc3300;
	border-right: 1px solid #cc3300;
	font-style: italic;
	white-space: nowrap;
}

td#playtestHeader {
	border-bottom: 1px solid #cc3300;
	border-right: 1px solid #cc3300;
	font-weight: bold;
	text-align: center;
}

td#playtestNumber {
	border-bottom: 1px solid #cc3300;
	font-weight: bold;
	text-align: center;
}

td#statName {
	background-color: #cccccc;
	font-style: normal;
	font-weight: normal;
	padding: 4px;
	text-align: left;
}

td#statValue {
	background-color: #ffffff;
	border-bottom: 2px solid #cccccc;
	border-right: 2px solid #cccccc;
	font-style: normal;
	font-weight: normal;
	padding: 4px;
	text-align: center;
}

tr#playtestAlreadyRun {
	background-color: #ffcc66;
}

tr#playtestToRun {
	background-color: #ffcc66;
}

ul.rankMe {
	list-style-type: none;
	padding-left: 2em;
}

ul.rankMe li {
	padding: 0;
}

/* Puts the row of underscores in front of each entry. */
ul.rankMe li:before {
	content: "____";
	padding-right: 0.5em;
}