/* FOR CISC 282
* Name: assignment1.css
* Author: Andy Wang
* Description: CSS file for index.html and dungeonDesign.html of the Basic Dungeon Crawler for CISC 282 Assignment 1
*/

/***********************/
/* General Formatting  */
/***********************/
body {
	min-width: 320px;
	width: auto;
	font-family: "Times New Roman", "Times", serif;	
}

p {
	font-size: 1.2em;
}

img {
	border: 2px solid black;
}

/**************/
/* Navigation */
/**************/

nav ul{
	overflow: hidden;
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
}

nav ul li {
	float: left;
	margin-right: 10px;
}

nav ul li a {
	display: inline-block;
	color: #fff;
	background-color: #000;
	font-weight: bold;
	text-decoration: none;
	padding: 5px 20px;
}

nav ul li a:hover {
	color: #000;
	background-color: #ddd;
}

/******************/
/* Content Layout */
/******************/

#output {
	width: 75%;
	min-height: 250px;
	font-size: 1.2em;
	padding: 10px 10px 10px 10px;
	border: 2px solid black;
	margin-right: 10px;
}

.columnOne, .columnTwo {
	float: left;
}

.columnTwo {
	width: 20%;
}

#dataTable {
	margin-bottom: 10px;
}

#showData{
	border: 1px solid black;
	border-collapse: collapse;
	text-align: left;
	font-size: 1.2em;
	margin: auto;
	width: 20%;
}

#showData tr {
	border-bottom: 1px solid black;
}

#showData th {
	border-right: 1px solid black;
	text-align: center;
	padding: 3px;
}

#hpCell, #expCell {
	text-align: right;
}

#levelCell, #goldCell {
	text-align: center;
}

#buttonDiv {
	vertical-align: center;
}

.buttons {
	border: none;
	text-align: center;
	table-layout: fixed;
	clear: left;
	width: 100%;
}

button {
	float: left;
	height: 70px;
	width: 100%;
	font-size: 0.9em;
}

.buttons button {
	width: 100%;
}

#rules {
	float: left;
	min-width: 460px;
}

/***************/
/* Design Page */
/***************/

#natRolls, #unlucky {
	width: 100%;
	border: 1px solid black;
	border-collapse: collapse;
	text-align: center;
	font-size: 1.2em;
}

#natRolls td {
	border: 1px solid black;
}

#unlucky td, th {
	border: 1px solid black;
}

#fontAdjust {
	font-family: Monospace;
	color: #AAAAAA;
	font-size: 1em;
	line-height: 0.8em;
}

#paraRPG {
	padding-bottom: 12%;
}

#darkFigure, #mabiFigure {
	float: right;
	width: 30%;
	clear: right;
	margin: 0% 2% 2% 2%;
}

#EOFigure {
	float: left;
	width: 30%;
	margin: 0% 2% 2% 0%;
}

#bloodFigure {
	max-width: 31%;
	display: inline-block;
	margin: 0% 0% 0% 1%
}

#mabiFigure {
	position: relative;
	top: -20%;
}

#darkImg, #mabiImg, #EOImg, #bloodImg{
	width: 100%;
	height: 100%;
}

#darkCaption, #mabiCaption, #EOCaption, #bloodCaption {
	width: 100%;
}

#inspireList {
	clear: both;
}

#gameList {
	list-style-image: url('sword.png');
}

#bookList {
	list-style-image: url('book.png');
}

/*********************/
/* Responsive Design */
/*********************/

@media only screen and (max-width: 1300px) {
	#paraRPG {
		padding-bottom: 3%;
	}
}

@media only screen and (max-width: 1500px) {
	#paraRPG {
		padding-bottom: 8%;
	}
}

@media only screen and (max-width: 768px) {
	#output {
		width: 100%;
		margin-bottom: 10px;
	}
	
	#dataTable {
		float: left;
	}
	
	.columnTwo {
		width: 88%;
		max-height: 110px;
		margin-right: 5%;
	}
	
	.buttons {
		position: relative;
		top: -131px;
		left: 110px;
		width: 100%;
	}	
	
	button {
		height: 57px;
		font-size: 1.3em;
	}
	
	#darkFigure, #mabiFigure, #EOFigure {
		float: none;
		width: 90%;
		margin: auto;
	}
	
	#bloodFigure {
		display: none;
	}
	
	#darkCaption, #mabiCaption, #EOCaption {
		margin-top: 1%;
	}
	
	
	#darkImg, #mabiImg, #EOImg {
		width: 100%;
	}
	
	#paraRPG {
		padding-bottom: 0%;
	}
	
}

@media only screen and (max-width: 480px) {	
	#output {
		min-width: 453px;
	}
	
	.columnTwo {
		width: 80%;
		min-width: 370px;
	}
	
}