/*** Various font definitions ***/

@font-face {
    font-family: handfont;
    src: url("resources/handfont2.eot");
}
@font-face {
    font-family: handfont;
    src: url("resources/handfont2.ttf");
}

/*** Header ***/

#tagline {
    line-height: 1em;
    font-family: handfont;
    x-font-family: Daniel Black;

    font-size: 2em; /* for handfont */
    x-font-size: 1.8em; /* for daniel black */
}

#header
{
    height: 160px;
    border-bottom-color: black;
    border-bottom-width: 3px;
    border-bottom-style: double;
}

#paw_1, #paw_2, #paw_3
{
    position: absolute;
}
#paw_1
{
    top: 20px;
    left: 500px;
}
#paw_2
{
    top: 40px;
    left: 600px;
}
#paw_3
{
    top: 60px;
    left: 550px;
}
#contact
{
    position: absolute;
    right: 20px;
    top: 20px;
}

#logo, img#tagline, div#tagline
{
    z-index: 1;
}
#logo
{
    position: absolute;
    top: 20px;
    left: 100px;
}
div#header a {
    text-decoration: none;
}
div#tagline
{
    position: absolute;
    top: 95px;
    left: 300px;
    color: black;
    x-font-size: 28px;
    x-font-size: 36px;
    line-height: 1em;
}
img#tagline
{
    padding-left: 20px;
}


/*** Common ***/
.handy {
    font-size: 1.2em;
}
h3, h4 {
    font-size: 1.5em;
}
body
{
    padding: 0;
    margin: 0;
    z-index: -1;
}
body, .normalfont
{
    font-family: sans, arial;
    color: black;
}
.blue, .box, #header, #sidebar, div.other_products table tr th { /* blue */
    background-color: rgb(133,166,233);
}

/*** Common Colours ***/

.green, #social_insects_game, body { /* green */
    background-color: rgb(100,166,100);
}
.dark_blue_font {
    color: rgb(0,100,200);
}
.orange {
    background-color: rgb(200,166,100);
}
.orange_font {
    color: rgb(255,150,0);
}
.yellow {
    background-color: rgb(233,200,133);
}
.red {
    background-color: rgb(166,100,100);
}

div#sidebar
{
    position: absolute;
    top: 250px;
    left: 25px;
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: black;
    min-height: 10px;
}
div#sidebar table {
    border-collapse: collapse;
}

div#sidebar table tr td {
    border-style: solid;
    border-color: black;
    border-width: 1px;
    font-size: 0.85em;
}
div#sidebar table tr td a
{
    text-decoration: none;
}
div#sidebar table tr td a div
{
    min-width: 170px;
    max-width: 180px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
}

div#body, div#bodynosidebar
{
    background-color: white;
    position: absolute;
    top: 163px;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 1em;
    padding-bottom: 4em;
    border-style: solid;
    border-width: 0 2px 2px 2px;
    border-color: black;
}
div#body
{
    width: 555px;
    left: 245px;
}
div#bodynosidebar
{
    width: 800px;
    left: 0px;
}

img
{
    border: none;
}


/*** Common and Game Series ***/

.boardgame_box span.title, #x-tagline, .handy, h3, h4 {
    font-family: handfont;
    x-font-family: Daniel Black; 
    /* adjust tagline's font, sizes separately */
}

.boardgame_box, .box {
    padding: 1em 3em 1em 3em;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: 2px;
    border-color: black;
}

div.other_products {
    width: 20em;
    margin-left: auto;
    margin-right: auto;
}

div.other_products table  {
    border: solid black 1px;
    border-collapse: collapse;
}
div.other_products table tr th {
    border-bottom: solid black 1px;
}


/*** Game Series ***/

.boardgame_box {
    padding: 1em;
    min-height: 285px;
}
.boardgame_box div.preview {
    padding: 1em;
    width: 100%;
    text-align: center;
}
.boardgame_box span.title {
    font-size: 1.8em;
}
.boardgame_box img.thumbnail {
    float: right;
    margin-left: 2px;
}

/*** Strategies Page buttons ***/

/*
#food_chain_game, #social_insects_game
{
    width: 200px;
    text-align: right;
}
*/

/*** Index page Strategy box ***/

#strategies
{
    max-width: 300px;
}

#logo, img#tagline, div#tagline
{
    z-index: 1;
}
#logo
{
    position: absolute;
    top: 20px;
    left: 100px;
}
div#header a {
    text-decoration: none;
}
div#tagline
{
    position: absolute;
    top: 95px;
    left: 300px;
    color: black;
    x-font-size: 28px;
    x-font-size: 36px;
    line-height: 1em;
}
img#tagline
{
    padding-left: 20px;
}



/*** Pricing page ***/

table#products tr th {
    font-size: 0.8em;
}

td.pricebox {
    text-align: center;
    width: 300px;
    height: 3.5em;
    vertical-align: middle;
}



/*** Index page ***/


table#features tr td
{
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.image_cell
{
    width: 100px;
    text-align: center;
}



/*** Games Page ***/
div.gamesdirectory a { color: white; text-decoration: none; }
div.gamesdirectory td, th { vertical-align: middle; height: 60px;}
div.gamesdirectory td { padding-left: 30px; }
div.gamesdirectory th { border-bottom: dashed 3px white; }