@font-face
{
	font-family: BlackCastleMF;
	src: url(font/BlackCastleMF.ttf);
}

@font-face
{
	font-family: SeagramTFB;
	src: url(font/Seagram-tfb.ttf);
}

@font-face
{
	font-family: GoudyMediaevalR;
	src: url(font/GoudyMediaeval-Regular.ttf);
}

body {
	/*font-family: BlackCastleMF;*/
	/*font-family: SeagramTFB;*/
	/*font-family: GoudyMediaevalR;*/
	margin: 0; padding: 0;
	overflow: hidden;
}

#preload 
{ 
	display: none; 
}

#setup {
	position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    margin-top: 40vh;
    padding: 2vh;
    width: 30vh;
    min-height: 80px;
    height: 11vh;
    background-color: #FFFBCD;
    border: 2px dashed rgba(255, 255, 255, 0.9);
}

#setup input,
#setup input[type="button"] {
	padding: 8px;
}
#setup input[type="button"]:hover
{
    background-color: #9DA52A;
}
#setup input[type="button"]
{
	width: 100%;
    padding: 8px;
    color: #fff;
    background-color: #A52A2A;
    border: 0px;
}

#setup input[type="button"] {
	margin-top: 1.2vh;
}

#setup input[type="checkbox"] {
	width:16px;
}

#container #content {
    padding: 4px;
    height: 64px;
    max-height: 64px;
    background-color: #FFFBCD;
    border-bottom: 2px dashed rgba(255, 255, 255, 0.9);
}

#container #content p {
    display: inline-block;
    margin-top: 0;
    margin-right: 6px;
}

#container #content #clickinfo {
    display: inline-block;
}

#container #content #buttons {
    display: inline-block;
    float: right;
    padding-right: 20px;
}

#container #content #buttons input[type="button"]
{
	padding: 14px;
    margin-left: 10px;
    font-size: 22px;
}

#container #board {
	min-width:500px;
}

#container #cvboard {
	display: inline-block;
	vertical-align: top;
}

.tt {
    float: left;
    position: relative;
    display: inline-block;
}
.tt1, .tt2, .tt3, .tt4, .tt5, .tt6, .tt7, .tt8, .tt9, .tt10, .tt11, .tt12 {
    transition: opacity .25s ease-in-out;
    -o-transition: opacity .25s ease-in-out;
	-moz-transition: opacity .25s ease-in-out;
	-webkit-transition: opacity .25s ease-in-out;
	position: relative;
}

.tt1:hover, .tt2:hover, .tt3:hover, .tt4:hover, .tt5:hover, .tt6:hover, .tt7:hover, .tt8:hover, .tt9:hover, .tt10:hover, .tt11:hover, .tt12:hover {
	opacity: 0.6;
}

.tt-row {
    clear: left;
}

.tt > .middle {
	padding: 16px;
}

#view {
	overflow-y:auto;
	width:1320px;
}

/*tilecolors */
/* * water */
.tt0 .left, .tt0 .right { border-left-color: #197CFF; border-right-color: #197CFF; } .tt0 .middle { background-color: #197CFF; background-repeat: no-repeat; background-position: 2px 2px; }

/* * sand * */
.tt1 .left, .tt1 .right { border-left-color: #E8C916; border-right-color: #E8C916; } .tt1 .middle { background: #E8C916 url(icon/desert.png); background-repeat: no-repeat; background-position: 2px 2px; }

/* * plains * */
.tt2 .left, .tt2 .right { border-left-color: #5BB822; border-right-color: #5BB822; } .tt2 .middle { background: #5BB822 url(icon/plains.png); background-repeat: no-repeat; background-position: 2px 2px; }

/* * plains * */
.tt3 .left, .tt3 .right { border-left-color: #5BB822; border-right-color: #5BB822; } .tt3 .middle { background: #5BB822 url(icon/plains2.png); background-repeat: no-repeat; background-position: 2px 2px; }

/* * trees * */
.tt4 .left, .tt4 .right { border-left-color: #5BB822; border-right-color: #5BB822; } .tt4 .middle { background: #5BB822 url(icon/tree.png); background-repeat: no-repeat; background-position: 2px 2px; }

/* * trees 2 * */
.tt5 .left, .tt5 .right { border-left-color: #5BB822; border-right-color: #5BB822; } .tt5 .middle { background: #5BB822 url(icon/tree2.png); background-repeat: no-repeat; background-position: 2px 2px; }

/* * town (also townhall) * */
.tt6 .left, .tt6 .right { border-left-color: #5BB822; border-right-color: #5BB822; } .tt6 .middle { background: #5BB822 url(icon/town.png); background-repeat: no-repeat; background-position: 2px 2px; }

/* * outpost * */
.tt7 .left, .tt7 .right { border-left-color: #5BB822; border-right-color: #5BB822; } .tt7 .middle { background: #5BB822 url(icon/outpost.png); background-repeat: no-repeat; background-position: 2px 2px; }

/* * snowplains * */
.tt8 .left, .tt8 .right { border-left-color: #ccc; border-right-color: #ccc; } .tt8 .middle { background: #ccc url(icon/mntn.png); background-repeat: no-repeat; background-position: 2px 2px; }

/* * mountain * */
.tt9 .left, .tt9 .right { border-left-color: #fff; border-right-color: #fff; } .tt9 .middle { background: #fff url(icon/snow.png); background-repeat: no-repeat; background-position: 2px 2px; }


/*not used yet */

/* * poor house */
.tt10 .left, .tt10 .right { border-left-color: #8FB822; border-right-color: #8FB822; } .tt10 .middle { background: #8FB822 url(icon/poorhouse.png); background-repeat: no-repeat; background-position: 2px 2px; }

/* * normal house */
.tt11 .left, .tt11 .right { border-left-color: #8FB822; border-right-color: #8FB822; } .tt11 .middle { background: #8FB822 url(icon/normalhouse.png); background-repeat: no-repeat; background-position: 2px 2px; }

/* * normal house 2 */
.tt12 .left, .tt12 .right { border-left-color: #8FB822; border-right-color: #8FB822; } .tt12 .middle { background: #8FB822 url(icon/normalhouse2.png); background-repeat: no-repeat; background-position: 2px 2px; }

/* * rich house */
.tt13 .left, .tt13 .right { border-left-color: #8FB822; border-right-color: #8FB822; } .tt13 .middle { background: #8FB822 url(icon/richhouse.png); background-repeat: no-repeat; background-position: 2px 2px; }

/* *town */
.tt14 .left, .tt14 .right { border-left-color: #8FB822; border-right-color: #8FB822; } .tt14 .middle { background: #8FB822 url(icon/town.png); background-repeat: no-repeat; background-position: 2px 2px; }