@charset "utf-8";

@font-face
{
  font-family: 'Literata';
  font-style: normal;
  font-weight: 300;
  src: local('Literata'), url('fonts/Literata_300-Normal_Latin.woff2') format('woff2'), url(fonts/Literata12pt-Regular.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body
{
	background-image: url(images/bg.png);
  background-repeat: repeat-x;
	background-position: left top;
	background-attachment: fixed;
  background-color: #b6bedc;
  margin: 0px;
  padding: 0px;
	font-family: Literata, Courier New, Georgia, "Times New Roman", Times, serif;
	font-size: large;
	color: #333333;
}

/* ==== Header ==== */
header
{
	margin: 60px auto 60px auto;
	max-width: 780px;
	font-size: 3rem;
	line-height: 2.8rem;
}

header a, header a:link, header a:visited, header a:hover
{
	font-size: 3rem;
	line-height: 2.8rem;
}

header table tr td
{
	margin: 0px 0px;
	padding: 0px 0px;
}

header table
{
	width: 100%;
}

.ux
{
	font-size: xx-large;
	line-height: 3.2rem;
	text-align: right;
}

/* ==== Navigation ==== */
nav
{
	margin: 0px auto 60px auto;
	padding-left: 20px;
  max-width: 780px;
}

/* ==== Section, article ==== */
section
{
	display: flex;
	justify-content: center;
	margin: 0px auto 100px auto;
}

.pix
{
	width: 780px;
	height: 585px;
	border: #CCCCCC 1px solid;
	box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.30);
}

.crafts
{
	max-width: 650px;
	border: #CCCCCC 1px solid;
}

.ref
{
	width: 200px;
	height: 120px;
	border: #CCCCCC 1px solid;
}

.reftable
{
	width: 100%;
}

.reftable td
{
	width: 33%;
	text-align: center;
	vertical-align: top;
}

article
{
	width: 780px;
	margin: 0px;
	background-color: #FFFFFF;
	border: #CCCCCC 1px solid;
	box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.30);
}

.container
{
	margin: 0px;
	padding: 80px 60px 80px 60px;
	line-height: 2rem;
}

.main
{
	font-size: 1.4em;
	line-height: 2.6rem;
}

.main img
{
	float: right;
	margin: 0px 0px 60px 60px;
}

.title
{
	font-size: x-large;
	font-weight: bold;
	letter-spacing: 0.2rem;
	display:inline-block;
	width: 100%;
	margin: 0px auto 50px auto;
}

.highlight
{
	background-color: #E1E1F4;
	background-clip: border-box;
	padding: 1px 4px;
	margin: -1px -2px;
}

hr
{
	border: 1px solid #DDDDDD;
	width: 40%;
	margin-top: 60px;
	margin-bottom: 60px;
}

strong
{
	letter-spacing: 0.2rem;
}

td
{
	vertical-align: top;
}

ul
{
	margin-top: 0px;
}

ul li
{
  list-style-type: none;
}

ul li::before
{
  content: "» ";
}

/* ==== Footer ==== */
footer
{
	clear: both;
	left: 0px;
	right: 0px;
	width: 100%;
	display: flex;
	justify-content: center;
	text-align: center;
	line-height: 1.8rem;
}

.small
{
	font-size: medium;
}

/* ==== Typography ==== */
a, a:link, a:visited
{
	color: #666699;
	text-decoration: none;
}

a:hover
{
  text-decoration: underline;
}