@use '../../style/menu';

/* GLOBAL --------------------------------------------------------------------------------------- */

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #fff;
	background-color: #006;
	padding: 0;
	margin: 0;
}

a {
	color: #fc3;

	&:active { color: #009d27; }
	&:visited { color: #00f; }
}

nav {
	background-color: #fff;
	background-image: url(../img/main-menu_0b725143.gif);
	width: 180px;
	height: 100vh;
	position: fixed;
	padding: 20px 10px;

	text-align: right;

	a {
		display: block;
		margin-bottom: 8px;
	}

	#images { text-align: center; }

	#line {
		border-bottom: 1px solid rgba(171, 230, 246, 0.5);
	}
}

main{
	margin-left: 200px;
	padding: 15px 10px;
	min-height: 100vh;

	*:first-child {
		padding-top: 0;
		margin-top: 0;
	}
}

/* text */

p { margin-bottom: 20px; }

.left { text-align: left; }

.center { text-align: center; }

.defunct { text-decoration: line-through; }

.small { font-size: 10px; }

.big { font-size: 16px; }

.bigger { font-size: 18px; }

.y { color: #ff0; }

.o { color: #fc3; }

/* INDEX ---------------------------------------------------------------------------------------- */

#index nav #images { margin-top: 30px; }

#index h1 { font-size: 32px; }

#index h2 {
	font-size: 16px;
	font-weight: 700;
	padding-bottom: 0;
	margin-bottom: 0;

	& + p {
		padding-top: 0;
		margin-top: 0;
	}
}

#index main table {
	width: 585px;
	margin: 20px auto;
	border-collapse: collapse;
	font-weight: 700;

	td {
		border: #c0c0c0 solid 2px;
		padding: 2px;
	}

	td.title {
		background-color: #fc3;
		color: #006;
	}

	ul {
		list-style-position: outside;
		padding: 0;
		margin: 0;
		padding-left: 12px;

		li { padding-left: 15px; }

		li:nth-child(even) {
			color: #fc3;
		}
	}

	tr:nth-child(2) td {
		padding-bottom: 15px;
	}
}

#index section#online-fun {
	text-align: center;

	a:first-of-type {
		text-decoration: none;
	}
}

/* BREED PAGES ---------------------------------------------------------------------------------- */

.breed-page {
	h1 {
		font-size: 24px;
		display: inline;
	}

	#main-nav { margin: 10px 0 30px 0; }

	h2 {
		font-weight: 400;
		font-size: 18px;
	}

	nav a {
		color: #fff;

		&:visited { color: #fff; }
		&:active { color: #004000; }
	}

	table {
		width: 553px;
		margin: 0 auto;
		margin-bottom: 50px;
		text-align: center;

		td {
			border-bottom: 1px solid #fff;
			padding: 1px;
			padding-bottom: 7px;
		}

		.title {
			background-color: #009;
			font-weight: 700;
			font-size: 16px;
			padding-bottom: 1px;
		}

		tr:last-child td { border-bottom: none; }

		p { text-align: left; }
	}
}