/* We want a scrollbar to show - always 
 evil hack, but overflow-y: scroll sometimes doesn't work*/

html, body {
    height: 100%;
    margin: 0 0 1px 0;
    padding: 0;
}

#display {
    postion:relative;
    background: rgba(163,128,95,0.9);
    border-radius: 20px;
    padding: 5px 10px 5px 10px;
    display:none;
}

h1 {
    text-align: center;
    margin-top: 10px;
}

#game {
    width:auto;
    margin: 0px 20px 0px 0px;
    border: #692200 4px solid ;
    border-radius: 4px;
    float:left;
}

#output {
    position:relative;
}

#uibon, #uiatt {
    right: 30px;
}

#load {
    margin: 0px auto 5px auto;
}

#clear {
    clear: both;
}

.bon {
    width: 50px;
}

.label {
    display: inline-block;
    width: 160px;
    padding: auto;
}

select {
    width: 100px;
}

/* Don't show anything but warning, if too small */
/* handheld doesn't work, don't know why…*/
@media handheld {
    #display {
	display:none;
    }
    #small {
	display:inline;
    }
}

@media screen and (min-width:815px) {
    #small {
	display:none;
    }
    body {
	width: 800px;
	margin: auto;
	background: url('/assets/freielande.jpg') no-repeat 0 0, rgb(198,186,160);
	background-size: 100% auto;
	padding: 10px 0;
    }
    #display {
	display:block;
    }
}

@media screen and (max-width:814px) {
    #display {
	display:none;
    }
    #small {
	display:inline;
    }
}