/*font family, font size*/
@font-face {
    font-family: 'SourceSansProBold';
    src: url('../fonts/SourceSansPro-Bold-webfont.eot');
    src: url('../fonts/SourceSansPro-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/SourceSansPro-Bold-webfont.woff') format('woff'),
         url('../fonts/SourceSansPro-Bold-webfont.ttf') format('truetype'),
         url('../fonts/SourceSansPro-Bold-webfont.svg#SourceSansProBold') format('svg');
    font-weight: normal;
    font-style: normal;
	}
@font-face {
    font-family: 'SourceSansProBoldItalic';
    src: url('../fonts/SourceSansPro-BoldIt-webfont.eot');
    src: url('../fonts/SourceSansPro-BoldIt-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/SourceSansPro-BoldIt-webfont.woff') format('woff'),
         url('../fonts/SourceSansPro-BoldIt-webfont.ttf') format('truetype'),
         url('../fonts/SourceSansPro-BoldIt-webfont.svg#SourceSansProBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;
	}
@font-face {
    font-family: 'SourceSansProRegular';
    src: url('../fonts/SourceSansPro-Regular-webfont.eot');
    src: url('../fonts/SourceSansPro-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/SourceSansPro-Regular-webfont.woff') format('woff'),
         url('../fonts/SourceSansPro-Regular-webfont.ttf') format('truetype'),
         url('../fonts/SourceSansPro-Regular-webfont.svg#SourceSansProRegular') format('svg');
    font-weight: normal;
    font-style: normal;
	}
@font-face {
    font-family: 'SourceSansProItalic';
    src: url('../fonts/SourceSansPro-It-webfont.eot');
    src: url('../fonts/SourceSansPro-It-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/SourceSansPro-It-webfont.woff') format('woff'),
         url('../fonts/SourceSansPro-It-webfont.ttf') format('truetype'),
         url('../fonts/SourceSansPro-It-webfont.svg#SourceSansProItalic') format('svg');
    font-weight: normal;
    font-style: normal;
	}
@font-face {
    font-family: 'BitstreamVeraSansMonoRoman';
    src: url('../fonts/VeraMono-webfont.eot');
    src: url('../fonts/VeraMono-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/VeraMono-webfont.woff') format('woff'),
         url('../fonts/VeraMono-webfont.ttf') format('truetype'),
         url('../fonts/VeraMono-webfont.svg#BitstreamVeraSansMonoRoman') format('svg');
    font-weight: normal;
    font-style: normal;
	}
@font-face {
	font-family: 'geveyStandard';
	src: url('../fonts/geveyStandard.eot');
	src: local('../geveyStandard'), 
		 url('../fonts/geveyStandard.woff') format('woff'), 
		 url('../fonts/geveyStandard.ttf') format('truetype'), 
		 url('../fonts/geveyStandard.svg#geveyStandard') format('svg');
    font-weight: normal;
    font-style: normal;
	}
.mono {
	font-family: 'BitstreamVeraSansMonoRoman', 'DejaVu Sans Mono', 'Courier New', Courier, monospace;
	font-size: 11pt;
	line-height: 130%;
	}
.gNative {
	font-family: 'geveyStandard';
	font-size: 16pt;
	line-height: 130%;
	}
.gIpa {
	font-family: "Arial Unicode MS", "Lucida Grande", Tahoma, sans-serif;
	font-size: 12pt;
	line-height: 130%;
	color: #646345;
	}
.elementname {
	color: #05722e;
	}
.warning {
	color: #aa0000;
	}
	
.table {
	display: table;
	border-collapse: collapse;
	table-layout: fixed;
	background-color: transparent;
	}
.row {
	display: table-row;
	background-color: transparent;
	}
.cell {
	display: table-cell;
	background-color: transparent;
	}
.centered {
	width: 100%;
	text-align: center;
	}

#offscreen {
	left: −9999em;
	position: absolute;
	top: auto;
	overflow: hidden;
	width: 1px;
	height: 1px;
	}
header, footer, nav, article, aside, section { 
	display: block;
	}

/* Basics */
* {
	padding: 0;
	border: 0;
	margin: 0;
	}
*, html, body {
	font-family: 'SourceSansProRegular', Arial, sans-serif;
	font-size: 13pt;
	line-height: 130%;
	}
b, i, strong, em, a {
	font-family: inherit;
	font-size: inherit;
	}
	
/* First format */
body {
	background-color: #0a2a0a;
	color: #2a2911;
	}
#page {
	width: 810px;
	margin: 20px auto 20px auto;
	}
h2 {
	width: 100%;
	text-align: center;
	font-size: 180%;
	margin: 0.4em 0 1em 0;
	border-bottom: 1px solid black;
	padding-bottom: 0.3em;
	}
h3 {
	width: 100%;
	text-align: center;
	font-size: 140%;
	margin: 1em 0 1em 0;
	border-bottom: 1px solid black;
	padding-bottom: 0.3em;
	}
p {
	margin-bottom: 1em;
	}
li {
	margin-left: 2em;
	}
li.spacedlist {
	padding-bottom: 0.8em;
	}
div.section {
	background-color: #fbfadb;
	border: 1px solid black;
	}

/* splash image */
#initial {
	background-color: #0a2a0a;
	height: 1100px;
	}
#initial img {
	margin: 0 auto 0 auto;
	}

/* navigation bar */
nav {
	margin: 0;
	padding: 0;
	}
ol {
	list-style-type: none;
	margin: 0;
	padding: 0;
	}
ol li {
	display: inline-block;
	width: 100px;
	height: 50px;
	background: #005500 url('../images/eye0.png') no-repeat center center;
	color: #fffdb9;
	padding: 5px 5px 0 5px;
	margin: 0 0 0 1px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	text-align: center;
	vertical-align: top;
	cursor: pointer;
	}
ol li a{
	display: block;
	background-color: transparent;
	color: #fffdb9;
	font-size: 100%;
	text-decoration: none;
	}
ol li:hover, ol li:active{
	color: #efe710;
	background: #226622 url('../images/eye1.png') no-repeat center center;
	}

/* Banner */
#banner {
	position: relative;
	height: 120px;
	background-color: #0a2a0a;
	text-align: center;
	}
#vreskiwardslogo {
	position: absolute;
	top: 0;
	left: 0;
	}
#vreskiwardstitle {
	position: absolute;
	top: 0;
	left: 155px;
	}
#GIJlogo {
	position: absolute;
	top: 0;
	right: 0;
	}
	
/* Form section*/
#form_section {
	padding: 1em;
	}
#dataformcontainer {
	width: 80%;
	margin: 0 auto 1em auto;
	border: 1px solid #646345;
	padding: 1em;
	background-color: #fffdb9;
	}
#dataformcontainer .cell {
	padding: 0.5em;
	}
#dataformcontainer .labels {
	width: 30%;
	text-align: right;
	}
#dataformcontainer .inputs {
	width: 70%;
	}
#dataformcontainer .newnamecell {
	padding-top: 1em;
	}
#dataformcontainer .submitcell {
	padding-bottom: 1em;
	}
#dataformcontainer .inputs input{
	background-color: #efe710;
	border: 3px ridge #646345;
	padding: 0.2em 0.2em 0.3em 0.2em;
	width: 96%;
	}
#dataformcontainer input#mysubmit {
	background-color: #efe710;
	border: 2px outset #646345;
	padding: 0.3em 0.2em 0.3em 0.2em;
	cursor: pointer;
	width: 55%;
	}
#dataformcontainer .inputs p{
	font-size: 70%;
	line-height: 140%;
	margin: 0.5em 0 0.5em 0;
	padding: 0;
	color: #646345;
	}
	
/* Wards section*/
#wards_section .padded {
	padding: 1em;
	}
#elementschart {
	}
#chart_canvas {
	width: 576px;
	height: 400px;
	padding: 0 16px 0 16px;
	border-right: 1px solid black;
	}
#key_canvas {
	width: 200px;
	height: 400px;
	}
#chart_header {
	width: 100%;
	text-align: center;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	}
#chart_title {
	font-size: 1.2em;
	margin: 0;
	padding: 1em;
	font-weight: bold;
	}
#chart_instructions {
	font-size: 0.8em;
	color: #646345;
	padding: 0 15em 0.5em 1em;
	margin: 0;
	line-height: 130%;
	text-align: left;
	}
#datezone {
	padding-top: 1em; 
	border-top: 1px solid black;
	width: 100%;
	}
#datezone p {
	}
#date_label {
	font-weight: bold;
	}
#date_label_native {
	font-family: geveyStandard;
	font-size: 16pt;
	line-height: 130%;
	}
#surfaceholder {
	position: relative;
	height: 200px;
	}
#surfaceholder .surface {
	position: absolute;
	top: 0;
	left: 0;
	width: 808px;
	height: 200px;
	text-align: center;
	}
#stone {
	background: url('../images/surface-stone.png') repeat-x;
	}
#wooden {
	background: url('../images/surface-wooden.png') repeat-x;
	}
#wardtext ul {
	margin-bottom: 1em;
	}
img.warditem {
	margin: 0;
	border: 0;
	padding: 0;
	}

/* Sprites section*/
#sprites_section {
	padding: 1em;
	}
#sprites_section ul {
	margin-bottom: 1em;
	}
#spriteImage {
	width: 150px;
	height: 120px;
	text-align: center;
	vertical-align: top;
	}
#spriteHeader p {
	font-size: 120%;
	color: #646345;
	margin: 0;
	padding: 0;
	line-height: 170%;
	}
#spritetime {
	font-size: inherit;
	font-weight: bold;
	}
#spriteHeader .warning, #spriteHeader .elementname, #spriteHeader .gIpa {
	font-size: inherit;
	}

/* Luck section*/
#luck_section {
	padding: 1em;
	}
#luck_section .luckpartsimage {
	width: 20%;
	}
#luck_section .luckpartstext {
	width: 80%;
	vertical-align: top;
	padding: 0.2em 0 1em 0;
	}
#luck_section p {
	margin: 0 0 0.5em 0;
	}
#luck_section .lucktitle {
	font-size: 140%;
	}
#aphorism {
	width: 70%;
	margin: 0 auto 1em auto;
	text-align: center;
	}
#aphorism p {
	font-style: italic;
	font-size: 120%;
	color: #646345;
	}
#predictionsfor, #predictionsat {
	font-weight: bold;
	}

/* Elements section*/
#elements_section {
	padding: 1em;
	}
#elements_section ul {
	margin-bottom: 1em;
	}
#elements_section .domaindescriptionimage {
	width: 20%;
	}
#elements_section .domaindescriptiontext {
	width: 80%;
	vertical-align: top;
	padding: 0 0 1em 0;
	}
#elements_section .domaindescriptiontext p {
	margin: 0 0 1em 0;
	}
#elements_section .elementdescriptionimage {
	width: 20%;
	}
#elements_section .elementdescriptiontext {
	width: 80%;
	vertical-align: top;
	padding: 0.5em 0 1em 0;
	}
#elements_section .elementdescriptiontext p{
	margin: 0 0 1em 0;
	}
#elements_section .elementheader {
	font-size: 140%;
	}

/* Natal section*/
#natal_section {
	padding: 1em;
	}
#natal_section .elementdescriptionimage {
	width: 20%;
	}
#natal_section .elementdescriptiontext {
	width: 80%;
	vertical-align: top;
	padding: 0.5em 0 1em 0;
	}
#natal_section .elementdescriptiontext p {
	margin: 0 0 1em 0;
	}
#natal_section .natalelementimage {
	width: 12%;
	}
#natal_section .natalelementtext {
	width: 88%;
	vertical-align: top;
	padding: 0 0 0.4em 0;
	}
#natal_section .natalelementtext p {
	margin: 0 0 1em 0;
	}
#natal_section .natalelementtext .elementheader {
	font-size: 140%;
	margin: 0;
	}
#natal_section .elementheader .element {
	font-size: inherit;
	font-weight: bold;
	}

/* Promo section*/
#promo_section {
	padding: 1em;
	}
#booktrailer {
	width: 420px;
	margin: 0 auto 0 auto;
	}
#bookcover {
	width: 40%;
	}
#booksaleslinks {
	width: 60%;
	vertical-align: top;
	padding: 0.2em 0 1em 0;
	}
#booksaleslinks .producttitle {
	margin: 0;
	text-decoration: underline;
	font-weight: bold;
	}
#booksaleslinks b {
	color: #646345;
	}

/* footer*/
footer {
	background-color: #fbfadb;
	border: 1px solid black;
	border-top: 0;
	padding-top: 0.4em;
	padding-bottom: 0.4em;
	text-align: center;
	}
footer p {
	font-size: 80%;
	color: #646345;
	padding: 0;
	margin: 0;
	}